/* Panel CasperCars: tylko układ ekranów. Kolory, typografia i odstępy z tokenów (@cc/tokens), przyciski i pola z @cc/ui-css. */

.p-body {
  margin: 0;
  background: var(--cc-color-bg-canvas);
  color: var(--cc-color-text-primary);
  font-family: var(--cc-font-family-body);
  line-height: var(--cc-font-line-height-base);
}

.p-wrap {
  max-width: var(--cc-layout-wide);
  margin-inline: auto;
  padding-inline: var(--cc-layout-gutter);
}

.p-header {
  background: var(--cc-color-surface-inverse);
  color: var(--cc-color-text-inverse);
}
.p-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cc-space-40);
  min-height: 3.5rem;
}
.p-header .cc-logo { color: inherit; text-decoration: none; }
.p-header .cc-button--link { color: var(--cc-color-text-inverse-secondary); }
.p-tag {
  font-size: var(--cc-font-size-xs);
  color: var(--cc-color-text-inverse-secondary);
  font-family: var(--cc-font-family-body);
}
.p-nav { display: flex; gap: var(--cc-space-30); margin-inline-start: auto; }
.p-nav a {
  color: var(--cc-color-text-inverse-secondary);
  text-decoration: none;
  padding-block: var(--cc-space-20);
  border-block-end: 2px solid transparent;
}
.p-nav a[aria-current='page'] { color: var(--cc-color-text-inverse); border-color: currentColor; }
.p-nav a:focus-visible { outline: 2px solid var(--cc-color-focus-ring); outline-offset: 2px; }

.p-main { padding-block: var(--cc-space-60) var(--cc-space-90); display: grid; gap: var(--cc-space-50); }
.p-main h1 { font-family: var(--cc-font-family-display); font-size: var(--cc-font-size-xxl); line-height: var(--cc-font-line-height-heading); margin: 0; }
.p-main h2 { font-size: var(--cc-font-size-l); margin: 0 0 var(--cc-space-30); }
.p-lead { color: var(--cc-color-text-secondary); margin: 0; max-width: var(--cc-layout-content); }
.p-muted { color: var(--cc-color-text-secondary); font-size: var(--cc-font-size-s); }

.p-card {
  background: var(--cc-color-surface-default);
  border: 1px solid var(--cc-color-border-subtle);
  border-radius: var(--cc-radius-m);
  padding: var(--cc-space-50);
}
.p-narrow { max-width: 28rem; width: 100%; margin-inline: auto; }

.p-form { display: grid; gap: var(--cc-space-40); }
.p-actions { display: flex; flex-wrap: wrap; gap: var(--cc-space-30); align-items: center; }
.p-grid3 { display: grid; gap: var(--cc-space-40); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

.p-scroll { overflow-x: auto; }
.p-table { border-collapse: collapse; width: 100%; min-width: 32rem; }
.p-table th, .p-table td {
  text-align: start;
  padding: var(--cc-space-20) var(--cc-space-30);
  border-block-end: 1px solid var(--cc-color-border-subtle);
}
.p-table th { font-size: var(--cc-font-size-s); color: var(--cc-color-text-secondary); font-weight: var(--cc-font-weight-regular); }
.p-amount { max-width: 8rem; font-variant-numeric: tabular-nums; }

.p-flash {
  border-radius: var(--cc-radius-s);
  padding: var(--cc-space-30) var(--cc-space-40);
  border-inline-start: 4px solid;
  background: var(--cc-color-surface-raised);
}
.p-flash--ok { border-color: var(--cc-color-feedback-success); }
.p-flash--error { border-color: var(--cc-color-feedback-danger); }
.p-flash--info { border-color: var(--cc-color-border-strong); }
.p-warn { color: var(--cc-color-feedback-warning); font-weight: var(--cc-font-weight-bold); }

.p-filters { display: flex; flex-wrap: wrap; gap: var(--cc-space-20); }
.p-filters a {
  padding: var(--cc-space-10) var(--cc-space-30);
  border: 1px solid var(--cc-color-border-strong);
  border-radius: var(--cc-radius-full);
  color: var(--cc-color-text-primary);
  text-decoration: none;
  min-height: var(--cc-size-touch-min);
  display: inline-flex;
  align-items: center;
}
.p-filters a[aria-current='page'] { background: var(--cc-color-action-primary-bg); color: var(--cc-color-action-primary-fg); border-color: transparent; }

.p-leads { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cc-space-30); }
.p-lead-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cc-space-30); align-items: center; padding-block: var(--cc-space-40); }
.p-lead-row__link { color: var(--cc-color-text-link); }
.p-badge {
  font-size: var(--cc-font-size-xs);
  padding: var(--cc-space-10) var(--cc-space-30);
  border-radius: var(--cc-radius-full);
  border: 1px solid var(--cc-color-border-strong);
}
.p-badge--nowe { border-color: var(--cc-color-text-accent); color: var(--cc-color-text-accent); font-weight: var(--cc-font-weight-bold); }
.p-badge--potwierdzone { border-color: var(--cc-color-feedback-success); color: var(--cc-color-feedback-success); }
.p-badge--odrzucone { color: var(--cc-color-text-secondary); }

.p-changes { margin: 0 0 var(--cc-space-40); padding-inline-start: var(--cc-space-50); display: grid; gap: var(--cc-space-10); }
.p-changes s { color: var(--cc-color-text-secondary); }
.p-log {
  white-space: pre-wrap;
  font-size: var(--cc-font-size-xs);
  max-height: 20rem;
  overflow: auto;
  background: var(--cc-color-surface-raised);
  padding: var(--cc-space-30);
  border-radius: var(--cc-radius-s);
}
.p-equiv { display: grid; grid-template-columns: max-content 1fr; gap: var(--cc-space-20) var(--cc-space-40); margin: 0; }
.p-equiv dt { color: var(--cc-color-text-secondary); }
.p-equiv dd { margin: 0; }