/* =====================================================================
   OrderUp — wspólny system wizualny
   Kierunek: ciemny, nowoczesny, PROFESJONALNY (enterprise SaaS).
   Stonowany akcent, minimum poświat, zero "gamingowego" neonu/RGB.
   ===================================================================== */

:root{
  /* tła — ciemny, ale z WYRAŹNIE odseparowanymi warstwami (czytelność) */
  --bg:        #0a0d14;
  --bg-2:      #0e131d;
  --surface:   #18202c;
  --surface-2: #212b39;
  --surface-3: #2a3543;
  --line:      rgba(160,185,225,.18);
  --line-2:    rgba(160,185,225,.30);

  /* tekst — wysoki kontrast */
  --text:  #f3f6fb;
  --muted: #b2bccb;
  --faint: #7a8696;

  /* akcent — stonowana zieleń-teal (bez neonu) */
  --accent:    #1cbd98;
  --accent-2:  #5b8cff;     /* spokojny błękit — używany oszczędnie */
  --accent-ink:#04140f;     /* tekst na akcencie */
  --accent-hov:#27c9a4;     /* hover przycisku primary */
  --accent-soft:rgba(28,189,152,.14); /* delikatne tło akcentu (zaznaczenia, plakietki) */

  /* statusy — wyraźne, czytelne */
  --new:    #57a0f2;
  --prep:   #f0a93c;
  --ready:  #2fc08c;
  --alert:  #f06a78;

  --radius: 12px;
  --radius-sm: 9px;
  --shadow: 0 18px 44px -22px rgba(0,0,0,.8);
  --topbar-bg: rgba(13,18,26,.9);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Consolas', monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:clip; }   /* clip, NIE hidden: overflow-x:hidden na html/body wyłącza position:sticky (koszyk desktop) */
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  /* bardzo subtelna, neutralna poświata u góry — bez siatki, bez neonu */
  background-image:radial-gradient(1100px 520px at 82% -18%, rgba(255,255,255,.022), transparent 62%);
  background-attachment:fixed;
}
h1,h2,h3,h4{ margin:0; font-weight:640; letter-spacing:-.01em; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ---- typografia pomocnicza ---- */
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:''; width:18px; height:2px; background:var(--accent); border-radius:2px; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.muted{ color:var(--muted); }

/* ---- przyciski ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:var(--radius-sm); border:1px solid var(--line-2);
  background:var(--surface-2); color:var(--text); font-size:14px; font-weight:550;
  cursor:pointer; transition:.14s ease; white-space:nowrap; user-select:none;
}
.btn:hover{ background:var(--surface-3); border-color:var(--line-2); }
.btn:active{ transform:translateY(.5px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:650; }
.btn-primary:hover{ background:var(--accent-hov); }
.btn-ghost{ background:transparent; }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-danger{ background:#d8424f; border-color:transparent; color:#fff; font-weight:650; }
.btn-danger:hover{ background:#c5333f; }
/* Zasada Franka (23.10.2026): na zabarwionym tle napis w kolorze tekstu, nie w ciemniejszym odcieniu tła
   (para „jasne tło + ten sam kolor napisu” wygląda na stronę wygenerowaną przez AI). Kolor zostaje w tle, ramce i kropce. */
.btn-success{ background:rgba(43,165,119,.14); border-color:rgba(43,165,119,.45); color:var(--text); }
.btn-success:hover{ background:rgba(43,165,119,.2); }
.btn-sm{ padding:8px 13px; font-size:13px; border-radius:8px; }
.btn-lg{ padding:14px 24px; font-size:15px; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.btn-block{ width:100%; }

/* ---- karty / powierzchnie ---- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.surface{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }

/* ---- badge / pill statusu ---- */
.badge{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:7px;
  font-size:11px; font-weight:650; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--line-2); color:var(--muted);
}
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.is-new{   color:var(--text); border-color:rgba(79,143,230,.35); background:rgba(79,143,230,.10); }
.badge.is-prep{  color:var(--text); border-color:rgba(217,154,54,.35); background:rgba(217,154,54,.10); }
.badge.is-ready{ color:var(--text); border-color:rgba(43,165,119,.35); background:rgba(43,165,119,.10); }
.badge.is-alert{ color:var(--text); border-color:rgba(223,93,106,.35); background:rgba(223,93,106,.10); }
.badge.is-new .dot{ background:var(--new); } .badge.is-prep .dot{ background:var(--prep); }
.badge.is-ready .dot{ background:var(--ready); } .badge.is-alert .dot{ background:var(--alert); }

/* ---- pola formularza ----
   STANDARD (Franek, 26.10.2026): pole na tekst ZAWSZE ma białe tło, wpisany tekst czarny, podpowiedź w polu szara.
   Kolorowe pola w kolorach marki były za słabo widoczne. Dotyczy każdego motywu, także ciemnego. */
.input, .select, textarea.input{
  width:100%; padding:11px 13px; border-radius:var(--radius-sm);
  background:#fff; border:1px solid var(--line-2); color:#111;
  font-size:14px; font-family:inherit; outline:none; transition:.14s; color-scheme:light;
}
.input:focus, .select:focus, textarea.input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.input::placeholder, textarea.input::placeholder{ color:#80848b; opacity:1; }
label.field{ display:block; }
label.field > span{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; letter-spacing:.02em; }

/* ---- przełącznik (toggle) ---- */
.switch{ position:relative; display:inline-block; width:44px; height:25px; flex:0 0 auto; cursor:pointer; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{ position:absolute; inset:0; border-radius:100px; background:#222831; border:1px solid var(--line-2); transition:.16s; }
.switch .thumb{ position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#7a8494; transition:.16s; }
.switch input:checked + .track{ background:rgba(25,176,143,.28); border-color:rgba(25,176,143,.6); }
.switch input:checked + .track .thumb{ left:22px; background:var(--accent); }

/* ---- animacje (oszczędnie) ---- */
@keyframes softpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
@keyframes rot{ to{ transform:rotate(360deg); } }
@keyframes fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes sheetUp{ from{ transform:translateY(40px); opacity:0; } to{ transform:none; opacity:1; } }

/* ---- scrollbar ---- */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#222831; border-radius:10px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#2c333d; background-clip:content-box; }
*::-webkit-scrollbar-track{ background:transparent; }

.hr{ height:1px; background:var(--line); border:0; margin:0; }

/* ===================== MOTYW JASNY ===================== */
[data-theme="light"]{
  --bg:#eef1f6;
  --bg-2:#e6eaf1;
  --surface:#ffffff;
  --surface-2:#f3f5f9;
  --surface-3:#e9edf3;
  --line:rgba(22,30,48,.13);
  --line-2:rgba(22,30,48,.22);
  --text:#121823;
  --muted:#586375;
  --faint:#8a96a6;
  --accent:#e8602c;
  --accent-2:#3168d6;
  --accent-ink:#ffffff;
  --accent-hov:#d4521f;
  --accent-soft:rgba(232,96,44,.12);
  --new:#2f6bd0;
  --prep:#b07415;
  --ready:#0f8f61;
  --alert:#d23b54;
  --shadow:0 14px 34px -22px rgba(20,30,55,.28);
  --topbar-bg:rgba(255,255,255,.86);
}
[data-theme="light"] .switch .track{ background:#d4dae4; }
[data-theme="light"] .switch .thumb{ background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.18); }
[data-theme="light"] .switch input:checked + .track{ background:rgba(232,96,44,.20); border-color:rgba(232,96,44,.55); }
[data-theme="light"] *::-webkit-scrollbar-thumb{ background:#ced5e0; }
[data-theme="light"] *::-webkit-scrollbar-thumb:hover{ background:#bcc5d3; }

/* ===================== MOTYW BRANDU M22 (zamawiarka) — kremowy + czarny + czerwony ===================== */


/* ===================== DOMYSLNY MOTYW KLIENTA (jasny / bezowy / pomaranczowy) — nowi klienci startuja z tym ===================== */
[data-theme="default"]{
  --bg:#FAF6EF; --bg-2:#FFFDF9; --surface:#FFFFFF; --surface-2:#F3ECE0; --surface-3:#EAE1D2;
  --line:rgba(0,0,0,.10); --line-2:rgba(0,0,0,.20);
  --text:#141414; --muted:#4A4A4A; --faint:#8A8A8A;
  --accent:#E8722C; --accent-2:#F2914E; --accent-ink:#FFFFFF; --accent-hov:#F2914E; --accent-soft:rgba(232,114,44,.12);
  --new:#2f6bd0; --prep:#C9821A; --ready:#2FA86A; --alert:#C42935;
  --shadow:0 16px 38px -18px rgba(0,0,0,.18); --topbar-bg:rgba(250,246,239,.92);
}
[data-theme="default"] *::-webkit-scrollbar-thumb{ background:#e0d6c4; }