/* =====================================================================
   CORE: design tokens (light/dark) + base reset/typography/layout
   ===================================================================== */

*{ box-sizing:border-box; }
html, body{ max-width:100%; }

:root{
  /* surfaces */
  --bg:#f8f9fc;
  --text:#1e293b;
  --muted:#64748b;

  --card:#ffffff;
  --border:#e2e8f0;
  --shadow:0 2px 4px rgba(0,0,0,0.02);

  /* table */
  --th:#f1f5f9;
  --hover:#f1f5f9;
  --row-border:#e2e8f0;

  /* links */
  --link:#2563eb;

  /* inputs */
  --input-bg:#ffffff;
  --input-border:#cbd5e1;
  --input-focus:#2563eb;
  --input-focus-ring:rgba(37,99,235,0.10);

  /* buttons */
  --btn-primary:#2563eb;
  --btn-primary-text:#ffffff;
  --btn-secondary:#e2e8f0;
  --btn-secondary-text:#1e293b;
  --btn-danger:#dc2626;
  --btn-danger-text:#ffffff;

  /* chips/badges neutral */
  --chip-bg:#e2e8f0;
  --chip-text:#334155;
  --chip-border:transparent;

  /* status badges */
  --badge-active-bg:#dcfce7;
  --badge-active-text:#166534;
  --badge-warning-bg:#ffedd5;
  --badge-warning-text:#9a3412;
  --badge-off-bg:#fee2e2;
  --badge-off-text:#991b1b;

  --badge-waiting-bg:#fef9c3;
  --badge-waiting-text:#854d0e;
  --badge-approved-bg:#dcfce7;
  --badge-approved-text:#166534;

  /* back button */
  --back-bg:#f1f5f9;
  --back-border:#e2e8f0;
  --back-text:#334155;
  --back-hover-bg:#e2e8f0;
  --back-hover-border:#cbd5e1;

  /* flash */
  --flash-success-bg:#059669;
  --flash-success-text:#ffffff;
  --flash-error-bg:#dc2626;
  --flash-error-text:#ffffff;
  --flash-warning-bg:#f59e0b;
  --flash-warning-text:#111827;

  /* detail panels */
  --panel-bg:#f8f9fb;
  --panel-title:#374151;
  --divider:#e5e7eb;

  /* signature */
  --sig-bg:#f8fafc;
  --sig-border:#94a3b8;

  /* pager */
  --pager-bg:#f8fafc;
  --pager-border:#e2e8f0;
  --pager-text:#0f172a;
  --pager-hover:#f1f5f9;

  /* expander */
  --chev:#475569;

  /* accent (used mainly in dark) */
  --accent:#2563eb;
  --accent-soft:rgba(37,99,235,0.10);
  --accent-border:rgba(37,99,235,0.28);
  --accent-glow:rgba(37,99,235,0.35);
}

html[data-theme="dark"]{
  --bg:#1f2021;
  --text:#e5e7eb;
  --muted:#9ca3af;

  --card:#262728;
  --border:#323334;
  --shadow:0 10px 51px rgba(0,0,0,0.35);

  --th:#2a2b2d;
  --hover:#2c2d2f;
  --row-border:#2f3032;
  --divider:#2f3032;

  --accent:#3b82f6;
  --accent-soft:rgba(59,130,246,0.12);
  --accent-border:rgba(59,130,246,0.28);
  --accent-glow:rgba(59,130,246,0.35);

  --link:#60a5fa;

  --input-bg:#18191a;
  --input-border:#3a3b3d;
  --input-focus:var(--accent);
  --input-focus-ring:rgba(59,130,246,0.18);

  --btn-primary:#3b82f6;
  --btn-primary-text:#ffffff;
  --btn-secondary:#32363c;
  --btn-secondary-text:#e5e7eb;
  --btn-danger:#b91c1c;
  --btn-danger-text:#ffffff;

  --chip-bg:var(--accent-soft);
  --chip-text:#93c5fd;
  --chip-border:var(--accent-border);

  --badge-active-bg:rgba(34,197,94,0.18);
  --badge-active-text:#86efac;
  --badge-warning-bg:rgba(249,115,22,0.18);
  --badge-warning-text:#fdba74;
  --badge-off-bg:rgba(239,68,68,0.18);
  --badge-off-text:#fca5a5;
  --badge-waiting-bg:rgba(234,179,8,0.18);
  --badge-waiting-text:#fde68a;
  --badge-approved-bg:rgba(34,197,94,0.18);
  --badge-approved-text:#86efac;

  --back-bg:#2a2b2d;
  --back-border:#3a3b3d;
  --back-text:#e5e7eb;
  --back-hover-bg:#323334;
  --back-hover-border:#4b4c4e;

  --panel-bg:#18191a;
  --panel-title:#d1d5db;

  --sig-bg:#18191a;
  --sig-border:#4b4c4e;

  --pager-bg:#18191a;
  --pager-border:#2f3032;
  --pager-text:#e5e7eb;
  --pager-hover:#2a2b2d;

  --chev:#9ca3af;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  padding:16px;
}
@media (min-width:900px){ body{ padding:25px; } }

a{ color:var(--link); text-decoration:none; font-weight:500; }
a:hover{ text-decoration:none; }

.hidden{ display:none !important; }
.muted{ color:var(--muted); font-size:0.9rem; }

/* header layout */
.top-wrapper{
  position:sticky;
  top:0;
  z-index:1000;
  width:100vw;
  padding-top: 16px;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}

.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:20px;
  flex-wrap:wrap;
  margin-left:auto;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px 24px;
  margin:16px 0;
  box-shadow:var(--shadow);
}


.row{ display:flex; gap:16px; flex-wrap:wrap; }
.col{ flex:1 1 260px; min-width:220px; }
.inline-check{ font-size:0.85rem; opacity:0.8; }

@media (max-width:720px){
  .col{ flex:1 1 100%; min-width:0; }
  .card{ padding:16px; }
}

/* Mobile: header kompakt + back-bar ładnie */
@media (max-width: 600px){
  .top-wrapper{
    padding: 10px 12px;
    position: relative;
  }

  .top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  .brand-main{
    font-size: 2.0rem;
    letter-spacing: 0.20em;
    line-height: 1;
  }

  .brand-sub{
    font-size: 0.70rem;
    letter-spacing: 0.35em;
    opacity: 0.8;
  }

  .top-right-vertical{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
  }

  .theme-label{
    font-size: 0.85rem;
    opacity: 0.85;
  }

  .back-bar{
    padding: 10px 12px 12px;
  }

  .back-button{
    width: 100%;
    display: inline-flex;
    justify-content: center;
  }
}