/* ==========================================================================
   Proglikemia — system projektowy (tokeny + prymitywy)
   Paleta i skala przeniesione z zatwierdzonych mockupów.
   Motyw sterowany atrybutem data-theme na :root (patrz theme_controller.js).
   ========================================================================== */

:root {
  --bg: #f5f8f7; --surface: #ffffff; --surface-2: #eef3f2; --surface-3: #e6edeb;
  --border: #d7e0de; --border-strong: #c2cfcc;
  --text: #14201e; --muted: #5c6d69; --faint: #8a9995;
  --accent: #0e7c6b; --accent-ink: #ffffff; --accent-soft: #d7ede8;
  --ok: #2f8f5b; --ok-soft: #dcefe2;
  --warn: #ad7913; --warn-soft: #f4e8cf;
  --crit: #c0453b; --crit-soft: #f5dcd9;
  --info: #2b6ca3; --info-soft: #dce9f4;
  --shadow: 0 1px 2px rgba(20,32,30,.05), 0 6px 20px rgba(20,32,30,.06);
  --radius: 10px; --radius-sm: 7px;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1413; --surface: #131e1c; --surface-2: #1a2724; --surface-3: #21302d;
    --border: #26332f; --border-strong: #33443f;
    --text: #e7efec; --muted: #97a7a2; --faint: #6e807b;
    --accent: #2fb7a0; --accent-ink: #06211c; --accent-soft: #16332e;
    --ok: #45b578; --ok-soft: #16301f;
    --warn: #d4a13f; --warn-soft: #322611;
    --crit: #e0685c; --crit-soft: #331b18;
    --info: #57a0d8; --info-soft: #142838;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
}
:root[data-theme="light"] {
  --bg: #f5f8f7; --surface: #ffffff; --surface-2: #eef3f2; --surface-3: #e6edeb;
  --border: #d7e0de; --border-strong: #c2cfcc;
  --text: #14201e; --muted: #5c6d69; --faint: #8a9995;
  --accent: #0e7c6b; --accent-ink: #ffffff; --accent-soft: #d7ede8;
  --ok: #2f8f5b; --ok-soft: #dcefe2; --warn: #ad7913; --warn-soft: #f4e8cf;
  --crit: #c0453b; --crit-soft: #f5dcd9; --info: #2b6ca3; --info-soft: #dce9f4;
  --shadow: 0 1px 2px rgba(20,32,30,.05), 0 6px 20px rgba(20,32,30,.06);
}
:root[data-theme="dark"] {
  --bg: #0d1413; --surface: #131e1c; --surface-2: #1a2724; --surface-3: #21302d;
  --border: #26332f; --border-strong: #33443f;
  --text: #e7efec; --muted: #97a7a2; --faint: #6e807b;
  --accent: #2fb7a0; --accent-ink: #06211c; --accent-soft: #16332e;
  --ok: #45b578; --ok-soft: #16301f; --warn: #d4a13f; --warn-soft: #322611;
  --crit: #e0685c; --crit-soft: #331b18; --info: #57a0d8; --info-soft: #142838;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
button { font-family: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- App shell ---------------------------------------------------------- */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 11px; padding: 20px 20px 16px; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.brand-mark.admin { background: var(--text); color: var(--bg); }
.brand-name { font-weight: 650; letter-spacing: -.01em; font-size: 15.5px; }
.brand-sub { font-size: 11px; color: var(--faint); letter-spacing: .05em; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; overflow-y: auto; }
.nav-label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); padding: 14px 10px 6px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--radius-sm); border: none; background: none; color: var(--muted); font-size: 14px; text-align: left; width: 100%; text-decoration: none; transition: background .12s, color .12s; }
.nav-item svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item .tag { margin-left: auto; background: var(--crit); color: #fff; font-size: 11px; font-weight: 700; min-width: 19px; height: 19px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; }
.sidebar-foot { margin-top: auto; padding: 14px; border-top: 1px solid var(--border); }
.user { display: flex; align-items: center; gap: 10px; padding: 6px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3); color: var(--muted); display: grid; place-items: center; font-weight: 650; font-size: 13px; flex: none; }
.user-name { font-size: 13.5px; font-weight: 600; }
.user-role { font-size: 12px; color: var(--faint); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 15px 30px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; }
.crumb { font-size: 12.5px; color: var(--faint); margin-bottom: 1px; }
.crumb b { color: var(--muted); }
.topbar h1 { font-size: 18px; margin: 0; letter-spacing: -.02em; font-weight: 650; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.content { padding: 24px 30px 70px; max-width: 1160px; width: 100%; margin: 0 auto; }

/* ---- Buttons ------------------------------------------------------------ */
.btn { border: 1px solid transparent; border-radius: 8px; font-size: 13.5px; font-weight: 600; padding: 8px 14px; display: inline-flex; align-items: center; gap: 7px; transition: background .13s, border-color .13s, opacity .13s; white-space: nowrap; text-decoration: none; }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: var(--surface); border-color: var(--border-strong); color: var(--crit); }
.btn-danger:hover { background: var(--crit-soft); border-color: var(--crit); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-block { width: 100%; justify-content: center; padding: 11px; }

.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); display: grid; place-items: center; transition: background .12s, color .12s; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }

/* ---- Cards & tables ----------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.table-tools { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
table.data thead th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 11px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
table.data tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr.clickable { cursor: pointer; transition: background .1s; }
table.data tbody tr.clickable:hover { background: var(--surface-2); }
.cell-strong { font-weight: 600; }
.cell-sub { font-size: 12px; color: var(--faint); margin-top: 1px; }
.nip { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

/* ---- Expandable rows ---------------------------------------------------- */
.row-toggle { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); display: grid; place-items: center; transition: background .12s, color .12s; }
.row-toggle:hover { background: var(--surface-2); color: var(--text); }
.row-toggle svg { width: 15px; height: 15px; transition: transform .16s ease; }
.row-toggle.open svg { transform: rotate(90deg); }
.row-toggle.open { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.detail-row > td { background: var(--surface-2); padding: 0 16px 0 48px; }
.detail-box { padding: 14px 0; }
.detail-box h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
table.lines { width: 100%; border-collapse: collapse; font-size: 13px; }
table.lines td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--border); }
table.lines tr:last-child td { border-bottom: none; }

/* ---- Pills -------------------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.pill.active { background: var(--ok-soft); color: var(--ok); } .pill.active .dot { background: var(--ok); }
.pill.inactive { background: var(--surface-3); color: var(--muted); } .pill.inactive .dot { background: var(--faint); }
.pill.wait { background: var(--accent-soft); color: var(--accent); } .pill.wait .dot { background: var(--accent); }
.pill.new { background: var(--info-soft); color: var(--info); } .pill.new .dot { background: var(--info); }
.pill.prog { background: var(--warn-soft); color: var(--warn); } .pill.prog .dot { background: var(--warn); }
.pill.done { background: var(--ok-soft); color: var(--ok); } .pill.done .dot { background: var(--ok); }
.pill.canc { background: var(--surface-3); color: var(--muted); } .pill.canc .dot { background: var(--faint); }

/* ---- Toggle ------------------------------------------------------------- */
.toggle { position: relative; width: 40px; height: 23px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-strong); transition: background .16s, border-color .16s; flex: none; padding: 0; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .16s; }
.toggle.on { background: var(--accent); border-color: var(--accent); }
.toggle.on::after { transform: translateX(17px); }

/* ---- Forms -------------------------------------------------------------- */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.input, .select,
input[type="text"].input, input[type="email"].input, input[type="password"].input {
  width: 100%; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 9px 11px; font-size: 14px; color: var(--text); font-family: inherit;
}
.input:focus, .select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.hint { font-size: 12px; color: var(--faint); margin-top: 6px; }
.form-error { color: var(--crit); font-size: 12.5px; margin-top: 5px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Auth (login) ------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 32px; }
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.auth-card h1 { font-size: 19px; margin: 0 0 4px; letter-spacing: -.02em; }
.auth-card .sub { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; }
.alert { padding: 10px 13px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.alert.error { background: var(--crit-soft); color: var(--crit); }

/* ---- Page head ---------------------------------------------------------- */
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.page-head h2 { font-size: 21px; margin: 0 0 4px; letter-spacing: -.02em; }
.page-head p { color: var(--muted); font-size: 13.5px; margin: 0; max-width: 60ch; }
.page-head .actions { margin-left: auto; display: flex; gap: 9px; }

/* ---- Flash -------------------------------------------------------------- */
.flash { padding: 12px 16px; border-radius: var(--radius); font-size: 13.5px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.flash.success { background: var(--ok-soft); color: var(--ok); }
.flash.error { background: var(--crit-soft); color: var(--crit); }

@media (max-width: 940px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .nav-label, .sidebar-foot { display: none; }
  .content { padding: 18px 16px 60px; }
  .topbar { padding: 13px 16px; }
}

/* Pasek decyzji o zamówieniu (zatwierdź / anuluj) — wyeksponowany, oddzielony od nawigacji. */
.decision-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding: 16px 18px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-2); }
.decision-bar .decision-label { font-weight: 600; color: var(--text); }
.decision-bar .decision-actions { display: flex; gap: 10px; align-items: center; }
.btn-lg { padding: 11px 20px; font-size: 14.5px; }

/* Modal potwierdzenia dla akcji nieodwracalnych. */
dialog.modal { border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); color: var(--text); padding: 0; max-width: 440px; width: calc(100% - 32px); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
dialog.modal::backdrop { background: rgba(0, 0, 0, .45); }
dialog.modal .modal-body { padding: 22px 22px 8px; }
dialog.modal h3 { margin: 0 0 8px; font-size: 17px; }
dialog.modal p { margin: 0; color: var(--faint); font-size: 13.5px; line-height: 1.5; }
dialog.modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 20px; }

/* Chip (np. typ operacji w historii puli) i kolor delty. */
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.delta-pos { color: var(--ok); font-weight: 600; }
.delta-neg { color: var(--crit); font-weight: 600; }

/* Pasek filtrów (np. historia puli): selecty w jednej linii zamiast pełnej szerokości. */
.filter-bar .input { width: auto; min-width: 190px; }