/* ============================================================
   AURA CRM — Design System v2
   ============================================================ */

/* --- TOKENS & BASE --- */
:root {
  color-scheme: light;
  --font: 'Inter', Arial, sans-serif;

  /* Brand palette */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;

  /* Neutral */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Semantic */
  --success-bg: #f0fdf4; --success-border: #bbf7d0; --success-text: #166534;
  --error-bg:   #fef2f2; --error-border:   #fecaca; --error-text:   #991b1b;
  --warning-bg: #fff7ed; --warning-border: #fed7aa; --warning-text: #9a3412;
  --info-bg:    #eff6ff; --info-border:    #bfdbfe; --info-text:    #1d4ed8;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --shadow-sm: 0 2px 6px rgba(15,23,42,.08);
  --shadow-md: 0 4px 16px rgba(15,23,42,.10);
  --shadow-lg: 0 8px 30px rgba(15,23,42,.12);

  /* Layout */
  --sidebar-w: 220px;
  --topbar-h:  58px;
  --content-max: 100%;
  --content-narrow: 1120px;
  --content-wide: 100%;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* Controls */
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-pad-x: 14px;
  --control-gap: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--gray-100);
  color: var(--gray-800);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Globalne płynne przejścia */
* { transition: background-color .15s ease, border-color .15s ease, color .1s ease, opacity .15s ease; }
button, .btn, a, .nav-link, .kpi-card, .dashboard-action-tile, .finance-metric, .dashboard-list-item,
.card, .table tbody tr, input, select, textarea {
  transition: background-color .15s ease, border-color .15s ease, box-shadow .2s ease,
              color .1s ease, transform .15s ease, opacity .15s ease !important;
}
/* Wyłącz transition na ikonach SVG żeby nie migały */
svg, .icon { transition: none !important; }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.admin-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 1fr;
  min-height: 100vh;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  background: linear-gradient(180deg, #1e1b4b 0%, #312e81 100%);
  color: #fff;
  padding: 20px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0 4px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 12px;
}

.brand-logo { display: block; max-width: 100%; height: auto; }
.brand-logo--sidebar { width: 130px; }
.brand-logo--topbar  { width: 112px; }
.brand-logo--login   { width: 150px; margin-bottom: 8px; }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav--primary {
  flex: 1;
}

.sidebar-nav--secondary {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.16);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 500;
  transition: background .15s, color .15s;
}

.nav-link .icon { width: 16px; height: 16px; flex-shrink: 0; }
.nav-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-link.active {
  background: rgba(255,255,255,.18);
  color: #fff;
  font-weight: 600;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.main-content {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  min-height: 100vh;
  overflow: hidden;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: var(--topbar-h);
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-xs);
}

.topbar-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-400);
  line-height: 1;
  margin-bottom: 2px;
}

.topbar-page-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-50);
  color: var(--brand-700);
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  padding: 4px 12px 4px 8px;
  font-size: 12.5px;
  font-weight: 600;
  max-width: min(42vw, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip .icon { width: 15px; height: 15px; }

/* ============================================================
   CONTENT WRAPPER
   ============================================================ */
.content {
  padding: 20px 24px 28px;
  overflow-y: auto;
  max-width: 100%;
}

.page-shell {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

.page-shell--narrow {
  max-width: var(--content-narrow);
}

.page-shell--wide {
  max-width: var(--content-wide);
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.layout-2,
.layout-3,
.layout-1-3,
.layout-3-1 {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.layout-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.layout-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.layout-1-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.layout-3-1 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }

.stack-md {
  display: grid;
  gap: var(--space-4);
}

.section-cluster {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.form-canvas {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.form-canvas--sidebar {
  grid-template-columns: minmax(0, 1.8fr) minmax(340px, 1fr);
}

.form-canvas--balanced {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
}

.form-canvas--offers {
  grid-template-columns: minmax(0, 1.9fr) minmax(360px, 1fr);
}

.form-canvas__main,
.form-canvas__side {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}

.page-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-header h1 .icon { width: 22px; height: 22px; color: var(--brand-600); }

/* Legacy h1 inside .content (no .page-header wrapper) */
.content > h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--gray-900);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.content > h1 .icon { width: 22px; height: 22px; color: var(--brand-600); }

/* ============================================================
   FLASH / ALERTS
   ============================================================ */
.flash {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 13.5px;
  border-left: 4px solid transparent;
}

.flash ul { margin: 4px 0 0; padding-left: 20px; }
.flash li { margin-bottom: 2px; }

.flash--success { background: var(--success-bg); color: var(--success-text); border-left-color: #22c55e; }
.flash--error   { background: var(--error-bg);   color: var(--error-text);   border-left-color: #ef4444; }
.flash--info    { background: var(--info-bg);     color: var(--info-text);    border-left-color: #3b82f6; }
.flash--warning { background: var(--warning-bg);  color: var(--warning-text); border-left-color: #f97316; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--gray-50) 0%, #fff 100%);
}

.card-header h2, .card-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
}

.card-body { padding: 18px; }

/* Legacy .card-block */
.card-block {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-xs);
}

/* Gradient accent cards */
.card--accent {
  border: none;
  background: linear-gradient(135deg, var(--brand-600) 0%, #7c3aed 100%);
  color: #fff;
}

.card--accent .card-header { background: transparent; border-bottom-color: rgba(255,255,255,.2); color: #fff; }

/* ============================================================
   BUTTONS
   ============================================================ */
button, .btn, input[type="submit"] {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control-h);
  padding: 0 var(--control-pad-x);
  line-height: 1.4;
  transition: background .15s, box-shadow .15s, transform .08s;
  text-decoration: none;
  white-space: nowrap;
}

button .icon, .btn .icon, input[type="submit"] .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

button:active, .btn:active { transform: translateY(1px); }

/* Primary */
.btn, .btn-primary,
form .btn-submit {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79,70,229,.35);
}

.form-actions > button[type="submit"],
.form-actions > input[type="submit"] {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79,70,229,.35);
  width: auto;
}

.form-grid > button[type="submit"]:not(.btn-full):not(.danger):not(.btn-danger) {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79,70,229,.35);
  width: auto;
  justify-self: start;
}

.btn:hover, .btn-primary:hover { box-shadow: 0 4px 14px rgba(79,70,229,.45); }

/* Secondary */
.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover { background: var(--gray-200); }

.btn-ghost {
  background: transparent;
  color: var(--brand-700);
  border-color: var(--brand-200);
  box-shadow: none;
}

.btn-ghost:hover {
  background: var(--brand-50);
  box-shadow: none;
}

.btn-link {
  min-height: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--brand-700);
  box-shadow: none;
}

.btn-link:hover {
  color: var(--brand-600);
  box-shadow: none;
}

/* Danger */
.danger, .btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(239,68,68,.3);
}

.danger:hover, .btn-danger:hover { box-shadow: 0 4px 12px rgba(239,68,68,.4); }

/* Success */
.btn-success {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(34,197,94,.3);
}
.btn-success:hover { box-shadow: 0 4px 14px rgba(34,197,94,.4); }

/* Warning */
.btn-warning {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(249,115,22,.25);
}
.btn-warning:hover { box-shadow: 0 4px 14px rgba(249,115,22,.35); }

/* Small */
.btn-sm {
  min-height: var(--control-h-sm);
  padding: 0 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

/* Icon button */
.btn-icon {
  min-height: var(--control-h-sm);
  min-width: var(--control-h-sm);
  padding: 0;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  line-height: 1;
}

.btn-icon:hover { background: var(--gray-200); }

.btn-icon--danger {
  background: #fff;
  border-color: #fecaca;
  color: #dc2626;
}

.btn-icon--danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}

/* Full-width submit (legacy "Dodaj" / "Zapisz zmiany") */
.btn-full, .form-submit-full {
  width: 100%;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  font-size: 14px;
  border-radius: var(--radius-md);
}

.btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-group--end {
  justify-content: flex-end;
}

.btn-group--stack {
  flex-direction: column;
  align-items: stretch;
}

/* ============================================================
   FORMS — GLOBAL
   ============================================================ */
.content > .form-grid,
.card-body > .form-grid {
  max-width: 900px;
}

.card--form {
  max-width: 960px;
}

label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 4px;
  letter-spacing: .02em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="tel"],
select,
textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 8px 12px;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--gray-900);
  background: #fff;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

input::placeholder, textarea::placeholder { color: var(--gray-400); }

/* Field wrapper */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field--span-2,
.field--full {
  grid-column: 1 / -1;
}

.field--dense {
  gap: 3px;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.field-row > *:first-child:not(.btn):not(button) {
  flex: 1 1 auto;
  min-width: 0;
}

.field-note {
  display: none;
  font-size: 12.5px;
  margin-top: 4px;
}

.field-note.is-visible {
  display: block;
}

.field-note--error {
  color: var(--error-text);
}

.field-note--muted {
  color: var(--gray-500);
}

/* ============================================================
   FORM GRID — 2-COLUMN LAYOUT (główna zmiana UX!)
   ============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 14px;
  align-items: start;
}

.form-grid--dense {
  row-gap: 10px;
  column-gap: 16px;
}

.form-grid--layout-1-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}

.form-grid--layout-3-1 {
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}

/* Label + input pairs — each label spans only 1 column naturally,
   input follows in next row thanks to subgrid-like pattern.
   We wrap each pair in .field for clean semantics. */

/* When .form-grid children are raw label+input (legacy EJS):
   make each label start the pair and the next sibling input stay in same column */
.form-grid > label { margin-bottom: 0; align-self: end; }

/* Full-width elements inside 2-col grid */
.form-grid > .flash,
.form-grid > h3,
.form-grid > .card-block,
.form-grid > .form-section-title,
.form-grid > textarea,
.form-grid > .help-inline,
.form-grid > button[type="submit"],
.form-grid > .form-actions,
.form-grid > [data-span-full] {
  grid-column: 1 / -1;
}

/* Section title inside form */
.form-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-600);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--brand-100);
  margin-top: 8px;
  grid-column: 1 / -1;
}

/* Formularz z raw label+input (bez .field) — wymuszamy 1 kolumnę */
.form-grid--raw-pairs {
  grid-template-columns: 1fr;
}

/* Narrow form (login, small modals) */
.form-grid--narrow { grid-template-columns: 1fr; max-width: 480px; }

/* 3-column grid for settings tables add forms */
.form-grid--3col { grid-template-columns: 1fr 1fr 1fr; }

.form-grid--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.form-grid--3col-balanced { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.form-section {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-4);
  padding: 16px 18px 18px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.form-section--dense {
  gap: var(--space-3);
  padding: 16px;
}

.form-section__header {
  display: grid;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 2px;
}

.form-section__title,
.form-section-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brand-600);
  line-height: 1.2;
}

.form-section__description {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0;
  max-width: 74ch;
}

/* ============================================================
   FORM ACTIONS BAR (sticky bottom)
   ============================================================ */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 0 0;
  border-top: 1px solid var(--gray-200);
  margin-top: 8px;
  grid-column: 1 / -1;
}

.form-actions--between {
  justify-content: space-between;
}

.form-actions--sticky-side {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(248,250,252,0) 0%, rgba(248,250,252,.92) 16%, rgba(248,250,252,1) 100%);
  padding-top: 18px;
}

/* ============================================================
   CUSTOM TOGGLE SWITCH (replaces native checkbox for is_active / is_default)
   ============================================================ */
.switch-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}

.switch-field label { margin: 0; font-size: 13px; font-weight: 500; color: var(--gray-700); }

.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.switch input { opacity: 0; width: 0; height: 0; position: absolute; }

.switch .slider {
  position: absolute;
  inset: 0;
  background: var(--gray-300);
  border-radius: 24px;
  cursor: pointer;
  transition: background .2s;
}

.switch .slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.switch input:checked + .slider { background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(99,102,241,.3); }

/* Kompaktowy switch do tabel */
.switch--compact {
  width: 36px;
  height: 20px;
}

.switch--compact .slider::before {
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
}

.switch--compact input:checked + .slider::before {
  transform: translateX(16px);
}

/* ============================================================
   CUSTOM CHECKBOX (replaces native checkbox in tables)
   ============================================================ */
.cb-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

input[type="checkbox"].styled-cb,
.table input[type="checkbox"].js-instant-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--gray-300);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.table input[type="checkbox"].js-instant-switch:checked,
input[type="checkbox"].styled-cb:checked {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  border-color: var(--brand-600);
}

.table input[type="checkbox"].js-instant-switch:checked::after,
input[type="checkbox"].styled-cb:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* ============================================================
   TABLES
   ============================================================ */
.table-wrapper {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  overflow-y: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.table thead tr {
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
}

.table th {
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-500);
  border-bottom: 2px solid var(--gray-200);
  text-align: left;
  white-space: nowrap;
}

.table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--gray-50); }

/* Actions column */
.table td:last-child, .table th:last-child { text-align: right; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.badge--ok      { background: #dcfce7; color: #15803d; }
.badge--off     { background: #fee2e2; color: #b91c1c; }
.badge--pending { background: var(--warning-bg); color: var(--warning-text); }
.badge--info    { background: var(--brand-50); color: var(--brand-700); }
.badge--gray    { background: var(--gray-100); color: var(--gray-600); }

/* ============================================================
   SETTINGS NAV TABS
   ============================================================ */
.settings-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  background: rgba(255,255,255,.72);
  padding: 6px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  flex-wrap: wrap;
  box-shadow: var(--shadow-xs);
  width: 100%;
}

.settings-nav a {
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.settings-nav a:hover { background: #fff; color: var(--gray-900); }

.settings-nav a.active {
  background: #fff;
  color: var(--brand-700);
  box-shadow: var(--shadow-xs);
}

/* ============================================================
   DETAILS GRID (2-col key-value)
   ============================================================ */
.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.detail-item label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); margin-bottom: 2px; }
.detail-item .val  { font-size: 14px; color: var(--gray-900); font-weight: 600; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
}

.login-box {
  width: 360px;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}

.login-box form { display: grid; gap: 14px; }
.login-box .brand { text-align: center; margin-bottom: 8px; }

/* ============================================================
   TOAST
   ============================================================ */
.toast-region {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1200;
  display: grid;
  gap: 8px;
  max-width: 360px;
  pointer-events: none;
}

.toast {
  border-radius: var(--radius-md);
  padding: 11px 14px;
  border: 1px solid transparent;
  background: #fff;
  box-shadow: var(--shadow-md);
  color: var(--gray-800);
  font-size: 13.5px;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

.toast.is-visible { transform: translateY(0); opacity: 1; }
.toast--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.toast--error   { background: var(--error-bg);   border-color: var(--error-border);   color: var(--error-text); }
.toast--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.toast--info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-text); }

/* ============================================================
   MISC HELPERS
   ============================================================ */
.icon { width: 1em; height: 1em; vertical-align: -0.12em; }
.icon-lucide { width: 1em; height: 1em; }

.help-inline {
  font-size: 12.5px;
  color: var(--gray-500);
  margin: 0;
}

.help-inline--tight {
  margin-top: -2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.link-button {
  background: transparent;
  border: none;
  color: var(--brand-600);
  cursor: pointer;
  padding: 0;
  font-family: var(--font);
  font-size: inherit;
}

.svg-preview {
  margin-top: 8px;
  max-width: 280px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: var(--gray-50);
}

.svg-preview img { max-width: 100%; height: auto; display: block; }

.account-row {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  align-items: start;
}

.account-row label { margin-bottom: 0; align-self: end; }
.account-row .switch-field,
.account-row [data-remove-account] { grid-column: 1 / -1; }

/* ============================================================
   FORM INLINE (search bar etc.)
   ============================================================ */
.form-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.toolbar__group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.form-inline input[type="text"],
.form-inline input[type="search"] {
  width: auto;
  min-width: 200px;
  max-width: 300px;
  flex: 1 1 200px;
}

.form-inline select {
  width: auto;
  min-width: 130px;
  max-width: 180px;
  flex: 0 0 auto;
}

.form-inline button,
.form-inline .btn {
  flex-shrink: 0;
}

.form-inline--filters {
  padding: 14px 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.form-inline__search {
  min-width: 240px;
  max-width: 360px;
}

.form-inline__select {
  min-width: 144px;
}

/* ============================================================
   OFFER DOCUMENT
   ============================================================ */
.offer-template { max-width: 920px; margin: 0 auto; font-family: var(--font); color: var(--gray-900); }
.offer-template__header { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-bottom: 3px solid #66c7c7; padding-bottom: 14px; }
.offer-template__logo { max-width: 300px; max-height: 90px; object-fit: contain; margin-bottom: 12px; }
.offer-template__meta { text-align: right; }
.offer-template__meta-title { color: #5ebdbd; font-weight: 700; letter-spacing: .04em; margin: 0; }
.offer-template__offer-number { margin: 2px 0 12px; font-size: 42px; font-weight: 800; line-height: 1; }
.offer-template__client { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 16px 0; }
.offer-template__table th { background: #fff; font-weight: 700; }
.offer-template__table tbody tr:nth-child(even) td { background: #eaf5f5; }
.offer-template__sum { text-align: right; font-size: 26px; font-weight: 700; margin: 18px 0; }
.offer-template__payment { border: 2px solid #66c7c7; padding: 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.offer-template__footer { border-top: 16px solid #dff0f0; margin-top: 30px; padding-top: 12px; text-align: center; }
.offer-template__footer-logo { max-width: 100%; max-height: 68px; object-fit: contain; }

/* Offer topbar */
.offer-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.offer-topbar__identity h1 { margin: 0 0 6px; }
.offer-topbar__status-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.offer-status-caption { font-size: 13px; color: var(--gray-500); font-weight: 600; }
.offer-topbar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-edit-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--gray-300); background: #fff; color: var(--brand-600); cursor: pointer; padding: 0; }
.status-edit-toggle:hover { background: var(--brand-50); }
.offer-status-correction-mini[hidden] { display: none; }

/* ============================================================
   UNIT INLINE EDIT
   ============================================================ */
.unit-table-wrap { overflow-x: auto; }
.unit-inline-edit { display: grid; gap: 6px; min-width: 520px; }
.unit-inline-edit input[type="text"]   { max-width: 240px; }
.unit-inline-edit input[type="number"] { max-width: 110px; }
.unit-inline-edit select               { max-width: 200px; }

/* ============================================================
   PRODUCTS PAGE
   ============================================================ */
.form-grid--product-create { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }

/* ============================================================
   PRODUCTS PAGE HEAD
   ============================================================ */
.products-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.products-page-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 10px;
}

.products-page-head h1 .icon { width: 22px; height: 22px; color: var(--brand-600); }

.products-page-head__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.product-manage-card__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.product-manage-card__toolbar .help-inline {
  margin: 0;
}

.product-danger-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}


/* ============================================================
   OFFER WORKFLOW ACTIONS
   ============================================================ */
.offer-workflow__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.offer-workflow__actions--top {
  margin-bottom: 10px;
}

.workflow-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .08s;
  white-space: nowrap;
  text-decoration: none;
}

.workflow-btn,
.workflow-btn--neutral,
.workflow-btn--positive,
.workflow-btn--negative,
.workflow-btn--warning,
.workflow-btn--compact {
  all: unset;
}

.workflow-btn:active { transform: scale(.97); }
.workflow-btn .icon { width: 14px; height: 14px; flex-shrink: 0; }

.workflow-btn--neutral {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79,70,229,.3);
}
.workflow-btn--neutral:hover { box-shadow: 0 4px 14px rgba(79,70,229,.45); }

.workflow-btn--positive {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(34,197,94,.3);
}
.workflow-btn--positive:hover { box-shadow: 0 4px 14px rgba(34,197,94,.4); }

.workflow-btn--negative {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(239,68,68,.3);
}
.workflow-btn--negative:hover { box-shadow: 0 4px 14px rgba(239,68,68,.4); }

.workflow-btn--warning {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(249,115,22,.3);
}
.workflow-btn--warning:hover { box-shadow: 0 4px 14px rgba(249,115,22,.4); }

.workflow-btn--compact {
  padding: 6px 10px;
  font-size: 12px;
}

.offer-topbar__links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.offer-topbar__danger {
  margin-left: auto;
}

.offer-topbar__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.offer-workflow-form {
  display: contents;
}

.inline-form {
  display: inline-flex;
}

.inline-form--contents {
  display: contents;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.table-actions,
.table-actions-stack {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.table-actions-stack {
  white-space: nowrap;
}

.table-actions-stack--tight {
  gap: 4px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.status-pill--success {
  background: #dcfce7;
  color: #166534;
}

.status-pill--danger {
  background: #fee2e2;
  color: #b91c1c;
}

.table-cell-center {
  text-align: center;
}

.table-cell-right {
  text-align: right;
}

.table-empty-row td {
  padding: 24px;
  text-align: center;
  color: var(--gray-400);
}

.table-edit-row td {
  background: var(--gray-50);
  padding: 16px;
}

.table-empty-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.empty-state--compact {
  padding: 12px 14px;
}

.offer-topbar__actions h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-400);
  align-self: flex-start;
}


/* Label nad grupą przycisków w topbar oferty */
.offer-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-400);
  margin-bottom: 6px;
}

/* Korekta statusu — mini formularz */
.offer-status-correction-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.offer-status-correction-mini__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  margin: 0;
  white-space: nowrap;
}

.offer-status-correction-mini select {
  width: auto;
  min-width: 160px;
  flex: 0 0 auto;
}

.offer-status-correction-mini[hidden] { display: none !important; }

/* Logistyka sekcja w show ofercie */
.offer-logistics-summary {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
}

.offer-logistics-summary strong { color: var(--gray-700); }
.offer-logistics-summary .help-inline { margin: 2px 0; }
.offer-logistics-summary ul { margin: 6px 0 0; padding-left: 20px; }
.offer-logistics-summary li { margin-bottom: 2px; color: var(--gray-600); }

.offer-items-list {
  display: grid;
  gap: 12px;
}

.offer-item-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.offer-item-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.offer-item-card__header > div {
  display: grid;
  gap: 4px;
}

.offer-item-card__title {
  color: var(--gray-900);
  font-size: 15px;
}

.offer-item-card__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.offer-item-card__field--wide {
  grid-column: span 2;
}

.offer-item-card__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
  flex-wrap: wrap;
}

.offer-item-card__summary,
.offer-item-card [data-line-logistics] {
  display: block;
  white-space: normal;
  word-break: break-word;
}

.offer-item-card__summary {
  font-weight: 800;
  color: var(--gray-900);
}

.offer-item-card [data-line-logistics] {
  color: var(--gray-500);
  max-width: 520px;
}

.offer-item-type {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.offer-bulk-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  padding: 20px;
  display: grid;
  place-items: center;
}

.offer-bulk-modal[hidden] {
  display: none !important;
}

.offer-bulk-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .52);
  backdrop-filter: blur(2px);
}

.offer-bulk-modal__dialog {
  position: relative;
  width: min(980px, 100%);
  max-height: min(86vh, 920px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .22);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}

.offer-bulk-modal__header,
.offer-bulk-modal__footer {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.offer-bulk-modal__header {
  border-bottom: 1px solid var(--gray-100);
}

.offer-bulk-modal__footer {
  border-top: 1px solid var(--gray-100);
}

.offer-bulk-modal__header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.offer-bulk-modal__header button {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  background: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid--3col,
  .form-grid--4col,
  .layout-2,
  .layout-3,
  .layout-1-3,
  .layout-3-1,
  .form-grid--layout-1-3,
  .form-grid--layout-3-1 { grid-template-columns: 1fr; }
  .details-grid { grid-template-columns: 1fr; }
  .offer-template__header, .offer-template__client, .offer-template__payment { grid-template-columns: 1fr; text-align: left; }
  .offer-template__meta { text-align: left; }
  .toast-region { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
  .content { padding-inline: 18px; }
}

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: relative;
    height: auto;
    padding: 12px;
    gap: 10px;
  }
  .brand-link {
    margin-bottom: 0;
    padding-bottom: 12px;
  }
  .sidebar-nav--primary,
  .sidebar-nav--secondary {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
  }
  .sidebar-nav--secondary {
    padding-top: 2px;
  }
  .nav-link {
    flex: 0 0 auto;
    min-height: 40px;
  }
  .main-content {
    grid-template-rows: auto 1fr;
  }
  .topbar {
    height: auto;
    min-height: var(--topbar-h);
    padding: 12px 16px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .topbar-user {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .user-chip {
    max-width: 100%;
  }
  .sidebar-nav--secondary {
    margin-top: 10px;
    padding-top: 10px;
  }
  .unit-inline-edit { min-width: 380px; }
  .unit-inline-edit input[type="text"], .unit-inline-edit select { max-width: 170px; }
  .offer-topbar { flex-direction: column; align-items: stretch; }
  .offer-topbar__actions { align-items: flex-start; }
  .offer-workflow__actions { flex-direction: column; align-items: stretch; }
  .workflow-btn { justify-content: center; }
  .offer-topbar__links { flex-direction: column; }
  .offer-topbar__links .btn { justify-content: center; }
  .products-page-head { flex-direction: column; align-items: flex-start; }
  .settings-nav {
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 8px;
    scroll-snap-type: x proximity;
  }
  .settings-nav a {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* ============================================================
   PRINT
   ============================================================ */

/* ============================================================
   PERFORMANCE — GPU acceleration dla animacji
   ============================================================ */

/* Przyspiesz animacje GPU */
.kpi-card,
.dashboard-action-tile,
.finance-metric,
.dashboard-list-item,
.card,
.btn,
.nav-link {
  will-change: transform;
  backface-visibility: hidden;
}

/* Smooth page transitions */
.content {
  animation: fadeInUp .18s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Skeleton loading state (używany przez JS) */
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  pointer-events: none;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Tabela — wiersze wchodzą kolejno */
.table tbody tr {
  animation: rowFadeIn .15s ease both;
}

.table tbody tr:nth-child(1)  { animation-delay: .03s; }
.table tbody tr:nth-child(2)  { animation-delay: .06s; }
.table tbody tr:nth-child(3)  { animation-delay: .09s; }
.table tbody tr:nth-child(4)  { animation-delay: .12s; }
.table tbody tr:nth-child(5)  { animation-delay: .15s; }
.table tbody tr:nth-child(n+6) { animation-delay: .18s; }

@keyframes rowFadeIn {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media print {
  .sidebar, .topbar, .btn, button, a { display: none !important; }
  .content { padding: 0; }
  .offer-document { border: none; }
}

/* ============================================================
   CLIENT DETAILS (ETAP 7.2)
   ============================================================ */
.client-profile-page {
  display: grid;
  gap: 16px;
}

.client-profile-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.client-profile-header h1 {
  margin: 0 0 6px;
}

.client-profile-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.client-summary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}

.stat-label {
  color: var(--gray-500);
  font-size: 12px;
}

.stat-value {
  font-size: 18px;
  color: var(--gray-900);
}

.client-info-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-info-grid .card {
  margin: 0;
}

.meta-list {
  margin: 0;
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 8px 10px;
}

.meta-list dt {
  color: var(--gray-500);
  margin: 0;
}

.meta-list dd {
  margin: 0;
  color: var(--gray-800);
}

.client-meta-card {
  grid-column: 1 / -1;
}

.section-stack {
  display: grid;
  gap: 12px;
}

.section-stack h2 {
  margin: 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.client-offers-summary {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.table-actions {
  white-space: nowrap;
}

.empty-state {
  border: 1px dashed var(--gray-300);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: 14px;
  color: var(--gray-600);
  display: grid;
  gap: 10px;
}

.activity-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.activity-item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.activity-item h4 {
  margin: 0 0 2px;
}

.activity-item p {
  margin: 0;
  color: var(--gray-600);
}

.client-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
}

.client-profile-layout__main,
.client-profile-layout__side {
  display: grid;
  gap: 16px;
}

.client-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.client-detail-grid .card {
  margin: 0;
}

.activity-card .card-body {
  padding-top: 14px;
}

.activity-list-compact {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.activity-list-compact li {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-100);
}

.activity-list-compact li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.activity-list-compact time {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.activity-list-compact strong {
  color: var(--gray-900);
}

.activity-list-compact p {
  margin: 0;
  color: var(--gray-600);
}

.issuer-form-layout {
  align-items: start;
}

.issuer-form-grid {
  align-items: start;
}

.issuer-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.issuer-account-list {
  display: grid;
  gap: 12px;
}

.issuer-account-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.issuer-account-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.issuer-account-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.issuer-account-card__field--wide {
  grid-column: span 2;
}

.issuer-toggle-row {
  min-height: var(--control-h);
  padding: 0 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
}

@media (max-width: 980px) {
  .client-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-profile-layout,
  .client-info-grid {
    grid-template-columns: 1fr;
  }

  .client-detail-grid {
    grid-template-columns: 1fr;
  }

  .meta-list {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .issuer-account-card__grid {
    grid-template-columns: 1fr;
  }

  .issuer-account-card__field--wide {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .client-profile-header {
    flex-direction: column;
  }

  .client-profile-actions {
    justify-content: flex-start;
  }

  .client-summary-grid {
    grid-template-columns: 1fr;
  }
}



/* ─── OFFLINE BANNER ─── */
.offline-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(90deg, #1e1b4b, #312e81);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.offline-banner[hidden] { display: none !important; }

.offline-banner__text {
  line-height: 1.4;
}

.offline-banner__close {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}

.offline-banner__close:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* ============================================================
   DASHBOARD — Design System v3
   ============================================================ */

/* Stack — główny kontener */
.dashboard-stack {
  display: grid;
  gap: 18px;
  width: 100%;
}

/* ─── POWITANIE ─── */
.dashboard-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}

.dashboard-greeting__title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--gray-900);
}

.dashboard-greeting__sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--gray-400);
}

.dashboard-greeting__date {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
}

/* ─── KPI CARDS ─── */
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.kpi-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Dekoracyjne koło w tle */
.kpi-card::after {
  content: '';
  position: absolute;
  right: -20px;
  top: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}

/* Warianty kolorystyczne */
.kpi-card--indigo {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
}

.kpi-card--green {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #fff;
}

.kpi-card--violet {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  color: #fff;
}

.kpi-card--amber {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  color: #fff;
}

.kpi-card__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-card__icon svg { width: 20px; height: 20px; color: #fff; }

.kpi-card__label {
  font-size: 12px;
  font-weight: 600;
  opacity: .85;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.kpi-card__value {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

.kpi-card__meta {
  font-size: 11.5px;
  opacity: .75;
}

.kpi-card__alert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 3px 10px;
  margin-top: 2px;
  width: fit-content;
}

.kpi-card__alert svg { width: 12px; height: 12px; }

/* ─── FINANCE ROW ─── */
.dashboard-finance-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.finance-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .15s;
}

.finance-metric:hover { box-shadow: var(--shadow-sm); }

.finance-metric--alert {
  border-color: #fecaca;
  background: #fff5f5;
}

.finance-metric__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.finance-metric__icon svg { width: 20px; height: 20px; color: #fff; }

.finance-metric__icon--blue  { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.finance-metric__icon--green { background: linear-gradient(135deg, #22c55e, #16a34a); }
.finance-metric__icon--red   { background: linear-gradient(135deg, #ef4444, #b91c1c); }

.finance-metric__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}

.finance-metric__value {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
}

.finance-metric--alert .finance-metric__value { color: #b91c1c; }

/* ─── MAIN GRID (2 col) ─── */
.dashboard-main-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: start;
}

.dashboard-left-col,
.dashboard-sidebar-col {
  display: grid;
  gap: 14px;
}

/* ─── SECTION CARDS ─── */
.dashboard-section-card {
  display: grid;
  gap: 12px;
}

.dashboard-section-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-100);
  background: linear-gradient(135deg, var(--gray-50) 0%, #fff 100%);
}

.dashboard-section-card__header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-section-card__header h3 .icon {
  width: 16px;
  height: 16px;
  color: var(--brand-600);
}

.dashboard-see-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-600);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  transition: background .15s;
  white-space: nowrap;
}

.dashboard-see-all:hover { background: var(--brand-100); }

/* Card body padding dla dashboard cards */
.dashboard-section-card > *:not(.dashboard-section-card__header):not(.table-wrapper) {
  padding-left: 16px;
  padding-right: 16px;
}

.dashboard-section-card > .table-wrapper {
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--gray-100);
  box-shadow: none;
}

/* ─── ATTENTION GROUPS ─── */
.dashboard-attention-group {
  display: grid;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--gray-100);
}

.dashboard-attention-group__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 4px;
}

.dashboard-attention-group__label .icon { width: 12px; height: 12px; }

.dashboard-attention-group__label--warning {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.dashboard-attention-group__label--danger {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.dashboard-attention-group__label--success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

/* ─── LIST ITEMS ─── */
.dashboard-list-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  transition: box-shadow .15s, border-color .15s;
}

.dashboard-list-item:hover {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-xs);
}

.dashboard-list-item--danger {
  background: #fff5f5;
  border-color: #fecaca;
}

.dashboard-list-item--danger:hover { border-color: #f87171; }

.dashboard-list-item--success {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.dashboard-list-item__main {
  display: grid;
  gap: 2px;
}

.dashboard-list-item__number {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-700);
  text-decoration: none;
}

.dashboard-list-item__number:hover { text-decoration: underline; }

.dashboard-list-item__client {
  font-size: 13px;
  color: var(--gray-700);
}

.dashboard-list-item__meta {
  font-size: 12px;
  color: var(--gray-500);
}

.dashboard-list-item__value {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 13px;
  color: var(--gray-900);
  font-weight: 700;
}

.dashboard-list-item__link {
  font-size: 12px;
  color: var(--brand-600);
  text-decoration: none;
  font-weight: 600;
}

.dashboard-list-item__link:hover { text-decoration: underline; }

.dashboard-list-item__amount {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
  max-width: 100%;
}

.dashboard-list-item__currency {
  white-space: nowrap;
  font-weight: 600;
}

/* ─── STATUS BARS ─── */
.dashboard-status-bars {
  display: grid;
  gap: 10px;
  padding: 12px 16px;
}

.dashboard-status-row { display: grid; gap: 4px; }

.dashboard-status-row__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.dashboard-status-row__label {
  font-size: 12.5px;
  color: var(--gray-700);
  font-weight: 500;
  text-transform: capitalize;
}

.dashboard-status-row__count {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
  min-width: 24px;
  text-align: right;
}

.dashboard-status-row__bar {
  height: 8px;
  background: var(--gray-200);
  border-radius: 999px;
  overflow: hidden;
}

/* Animacja paska — wypełnia się po załadowaniu */
.dashboard-status-row__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  animation: bar-fill .6s ease forwards;
  animation-delay: .2s;
}

@keyframes bar-fill {
  to { width: var(--bar-w); }
}

/* Kolory pasków według statusu */
.dashboard-status-row__fill--draft     { background: linear-gradient(90deg, #94a3b8, #64748b); }
.dashboard-status-row__fill--sent      { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
.dashboard-status-row__fill--printed   { background: linear-gradient(90deg, #818cf8, #6366f1); }
.dashboard-status-row__fill--accepted  { background: linear-gradient(90deg, #4ade80, #22c55e); }
.dashboard-status-row__fill--rejected  { background: linear-gradient(90deg, #f87171, #ef4444); }
.dashboard-status-row__fill--cancelled { background: linear-gradient(90deg, #fb923c, #f97316); }
.dashboard-status-row__fill--expired   { background: linear-gradient(90deg, #f87171, #dc2626); }
.dashboard-status-row__fill--default   { background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); }


/* ─── SYSTEM STATUS TILE ─── */
.dashboard-status-indicators {
  display: grid;
  gap: 6px;
  padding: 12px 16px;
}

.system-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: background .15s;
}

.system-status-row:hover { background: var(--gray-50); }

.system-status-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

/* Pulsowanie dla statusu OK */
.system-status-row__dot--ok {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.4);
  animation: status-pulse 2s infinite;
}

.system-status-row__dot--warn {
  background: #f97316;
}

.system-status-row__dot--err {
  background: #ef4444;
  animation: status-pulse-red 1s infinite;
}

.system-status-row__dot--gray {
  background: var(--gray-300);
}

@keyframes status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

@keyframes status-pulse-red {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

.system-status-row__label {
  font-size: 12.5px;
  color: var(--gray-600);
  flex: 1;
}

.system-status-row__value {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-800);
  text-align: right;
}

.dashboard-status-footer {
  padding: 8px 16px 12px;
  border-top: 1px solid var(--gray-100);
}

/* ─── QUICK ACTIONS ─── */
.dashboard-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 16px;
}

.dashboard-action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  transition: transform .15s, box-shadow .15s;
  border: 1.5px solid transparent;
}

.dashboard-action-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.dashboard-action-tile .icon { width: 22px; height: 22px; }

.dashboard-action-tile--primary {
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  color: var(--brand-700);
  border-color: var(--brand-200);
}

.dashboard-action-tile--primary:hover { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }

.dashboard-action-tile--violet {
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  color: #6d28d9;
  border-color: #ddd6fe;
}

.dashboard-action-tile--violet:hover { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }

.dashboard-action-tile--amber {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  color: #b45309;
  border-color: #fde68a;
}

.dashboard-action-tile--amber:hover { background: linear-gradient(135deg, #fef3c7, #fde68a); }

.dashboard-action-tile--gray {
  background: var(--gray-100);
  color: var(--gray-700);
  border-color: var(--gray-300);
}

.dashboard-action-tile--gray:hover { background: var(--gray-200); }

/* ─── TABELE W DASHBOARDZIE ─── */
.dashboard-table-compact td,
.dashboard-table-compact th { white-space: nowrap; }

.dashboard-table-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

.offer-num-link {
  color: var(--brand-700);
  font-size: 13px;
}

/* ─── EMPTY STATE ─── */
.dashboard-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: var(--gray-400);
  font-size: 13px;
  font-style: italic;
}

.dashboard-empty .icon { width: 16px; height: 16px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1200px) {
  .dashboard-main-grid { grid-template-columns: 1fr 300px; }
}

@media (max-width: 1024px) {
  .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-finance-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .dashboard-sidebar-col { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
}

@media (max-width: 720px) {
  .dashboard-kpi-grid { grid-template-columns: 1fr; }
  .dashboard-finance-row { grid-template-columns: 1fr; }
  .dashboard-sidebar-col { grid-template-columns: 1fr; }
  .dashboard-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-list-item { flex-direction: column; }
  .dashboard-list-item__value { width: 100%; align-items: flex-end; }
  .dashboard-list-item__amount { justify-content: flex-end; }
  .dashboard-greeting { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PRODUCTS MODALS UX (ETAP 7.4)
   ============================================================ */
body.modal-open { overflow: hidden; }

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 16px;
}

.admin-modal[hidden] { display: none !important; }

.admin-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.admin-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: calc(100vh - 32px);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.admin-modal--narrow .admin-modal__dialog { width: min(640px, 100%); }
.admin-modal--wide .admin-modal__dialog { width: min(1040px, 100%); }

.admin-modal__header,
.admin-modal__footer {
  padding: 12px 14px;
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
}

.admin-modal__footer {
  border-top: 1px solid var(--gray-200);
  border-bottom: 0;
  position: sticky;
  bottom: 0;
}

.admin-modal__title { margin: 0; font-size: 18px; }
.admin-modal__subtitle { margin: 2px 0 0; color: var(--gray-500); font-size: 12px; }

.admin-modal__close {
  border: 0;
  background: transparent;
  color: var(--gray-600);
  width: 32px;
  height: 32px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.admin-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.admin-modal__form { min-height: 0; display: grid; grid-template-rows: 1fr auto; }
.admin-modal__body { padding: 14px; min-height: 0; }
.admin-modal__scroll { overflow: auto; }

.admin-modal__grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-modal__field { display: grid; gap: 5px; }
.admin-modal__field--full { grid-column: 1 / -1; }

.admin-modal__field label { font-weight: 600; font-size: 12px; color: var(--gray-600); }

.admin-modal__error {
  border: 1px solid var(--error-border);
  background: var(--error-bg);
  color: var(--error-text);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 10px;
}

.admin-modal__error ul { margin: 0; padding-left: 18px; }

.admin-modal__actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.relation-summary-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.relation-summary-list li {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 8px;
  background: var(--gray-50);
}

@media (max-width: 860px) {
  .admin-modal { padding: 10px; }
  .admin-modal__dialog { max-height: calc(100vh - 20px); }
  .admin-modal__grid { grid-template-columns: 1fr; }
}

/* Cena + waluta w jednej linii */
.cell-money {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--gray-900);
}

.cell-money .currency {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-500);
  margin-left: 2px;
}

/* Kolumny z datami też nie łamie */
.table td.cell-date {
  white-space: nowrap;
  font-size: 13px;
  color: var(--gray-600);
}

/* Dodaj do istniejących badge klas */
.badge--expired {
  background: #fff1f2;
  color: #9f1239;
  border: 1px solid #fecdd3;
}

/* Badge z ikoną dla przeterminowanych */
.badge--expired::before {
  content: '⏰ ';
  font-size: 10px;
}

/* Tabela ofert — kompaktowa z akcjami */
.offers-table .table th { font-size: 11px; }
.offers-table .table td { padding: 9px 12px; }

/* Numer oferty + system number w jednej komórce */
.offer-cell-number strong { color: var(--brand-700); font-size: 13px; }
.offer-cell-number .help-inline { font-size: 11px; color: var(--gray-400); margin-top: 1px; }

/* Akcje w tabeli ofert — kompaktowe przyciski */
.offer-cell-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

/* Filtrowanie ofert — pasek filtrów */
.offers-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.offers-filter-bar input[type="text"],
.offers-filter-bar select {
  width: auto;
  min-width: 0;
  flex: 1 1 140px;
  max-width: 220px;
}

.offers-filter-bar .btn { flex-shrink: 0; }

/* Page entry animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.content { animation: fadeInUp .2s ease; }

/* ============================================================
   ETAP 2 — LAYOUT UNIFICATION (CLIENT / PRODUCTS / OFFER EDITOR)
   ============================================================ */
.client-profile-header {
  padding: 18px;
  align-items: center;
}

.client-profile-header__identity {
  display: grid;
  gap: 8px;
}

.client-profile-header__identity h1 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-card {
  padding: 14px 16px;
  gap: 6px;
}

.stat-value {
  font-size: 20px;
  font-weight: 800;
}

.client-info-grid .card .card-body {
  display: grid;
  gap: 10px;
}

.client-notes {
  margin: 0;
  color: var(--gray-700);
  line-height: 1.6;
}

.section-stack > .card-body {
  display: grid;
  gap: 14px;
}

.client-offers-summary {
  padding: 10px 12px;
}

.activity-item {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px 14px;
  padding: 12px;
}

.activity-content {
  display: grid;
  gap: 6px;
}

.activity-link {
  font-size: 12.5px;
  font-weight: 600;
}

.product-manage-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.product-manage-card {
  margin: 0;
}

.product-manage-card--half {
  /* Zajmuje jedną kolumnę w 2-kolumnowym gridzie */
}

/* Sekcja B (warianty) i D (relacje) — pełna szerokość */
.product-manage-card--full {
  grid-column: 1 / -1;
}

.product-manage-logistics-form {
  max-width: 560px;
  margin-bottom: 16px;
}

.product-manage-inline-form {
  display: inline-block;
  margin: 0 8px 8px 0;
}

.content > .form-grid.form-grid--offer-editor,
.card-body > .form-grid.form-grid--offer-editor {
  max-width: none;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.offer-items-panel {
  border-radius: var(--radius-lg);
}

.offer-items-panel__header {
  margin-bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.offer-items-panel__header h3 {
  margin: 0;
  font-size: 16px;
}

.offer-items-panel__heading {
  display: grid;
  gap: 4px;
  max-width: 720px;
}

.offer-items-panel__body {
  display: grid;
  gap: 16px;
}

.offer-items-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.offer-items-summary {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.offer-items-summary__metric {
  min-width: 120px;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}

.offer-items-summary__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-500);
}

.offer-items-summary__value {
  font-size: 18px;
  font-weight: 800;
  color: var(--gray-900);
}

.offer-items-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.offer-items-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}

.offer-items-footer__total {
  display: grid;
  gap: 4px;
}

.offer-items-footer__total span {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-500);
}

.offer-items-footer__total strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--brand-700);
}

.offer-items-footer__hint {
  max-width: 440px;
}

.offer-bulk-modal__search {
  padding: 0 18px;
}

.offer-bulk-modal__search input {
  width: 100%;
}

.offer-bulk-modal__list {
  padding: 4px 18px 0;
  display: grid;
  gap: 10px;
  max-height: min(56vh, 620px);
  overflow: auto;
}

.offer-bulk-modal__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
}

.offer-bulk-modal__row:hover {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.offer-bulk-modal__row input {
  margin-top: 2px;
}

.offer-bulk-modal__row-main {
  display: grid;
  gap: 4px;
}

.offer-bulk-modal__row-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
}

.offer-bulk-modal__row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: var(--gray-500);
}

.offer-bulk-modal__row-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-700);
  white-space: nowrap;
}

.offer-editor-actions {
  justify-content: space-between;
}

.draft-restore-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.draft-restore-banner__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.offline-conflict-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.offline-conflict-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .48);
}

.offline-conflict-modal__dialog {
  position: relative;
  width: min(520px, 100%);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
  padding: 22px;
}

.offline-conflict-modal__dialog h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--gray-900);
}

.offline-conflict-modal__dialog p {
  margin: 0 0 18px;
  color: var(--gray-600);
  line-height: 1.5;
}

.offline-conflict-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-split {
  align-items: start;
}

@media (max-width: 1024px) {
  .product-manage-layout {
    grid-template-columns: 1fr;
  }

  .form-canvas--sidebar,
  .form-canvas--balanced,
  .form-canvas--offers,
  .settings-split {
    grid-template-columns: 1fr;
  }

  .form-actions--sticky-side {
    position: static;
    background: transparent;
    padding-top: 14px;
  }
}


.product-manage-card .card-body {
  display: grid;
  gap: 12px;
}

.product-manage-card .table-wrapper {
  margin-top: 6px;
}

@media (max-width: 640px) {
  .content {
    padding: 14px 12px 20px;
  }
  .page-header {
    margin-bottom: 14px;
  }
  .page-header h1,
  .content > h1 {
    font-size: 18px;
    gap: 8px;
  }
  .form-section,
  .form-section--dense {
    padding: 14px;
    border-radius: var(--radius-md);
  }
  .form-section__header {
    padding-bottom: 10px;
  }
  .form-actions,
  .form-actions--between {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .form-actions .btn,
  .form-actions button,
  .form-actions a {
    width: 100%;
    justify-content: center;
  }
  .field-row {
    flex-direction: column;
    align-items: stretch;
  }
  .field-row > .btn,
  .field-row > button {
    width: 100%;
  }
  .table th,
  .table td {
    padding: 10px 12px;
  }
  .offer-topbar__status-row {
    flex-wrap: wrap;
  }
  .offer-items-actions {
    flex-direction: column;
  }
  .offer-items-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .offer-items-toolbar,
  .offer-items-panel__header,
  .offer-items-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .offer-items-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .offer-items-footer__hint {
    max-width: none;
  }
  .offer-item-card {
    padding: 12px;
  }
  .offer-item-card__grid {
    grid-template-columns: 1fr;
  }
  .offer-item-card__field--wide {
    grid-column: span 1;
  }
  .offer-item-card__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .offer-bulk-modal__search,
  .offer-bulk-modal__list {
    padding-inline: 14px;
  }
  .offer-bulk-modal__row {
    grid-template-columns: auto 1fr;
  }
  .offer-bulk-modal__row-price {
    grid-column: 2;
  }
  .offer-bulk-modal {
    padding: 10px;
  }
  .offer-bulk-modal__dialog {
    max-height: calc(100vh - 20px);
  }
  .settings-nav {
    margin-bottom: 14px;
  }
  .activity-item {
    grid-template-columns: 1fr;
  }

  .offer-editor-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .offer-editor-actions .btn {
    justify-content: center;
  }
}