/* =====================================================================
   GastroSys — Motyw "Pro" (nakładka wizualna)  v2
   ---------------------------------------------------------------------
   Dopasowane 1:1 do Twojego style.css:
     • motyw ciemny  = :root           (domyślny)
     • motyw jasny   = body.light
     • te same nazwy tokenów i klas

   JAK WDROŻYĆ — w <head> KAŻDEJ strony, TUŻ PO style.css:

        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="gastrosys-theme.css">   <!-- dodaj to -->

   Plik zmienia tylko WYGLĄD (kolory, cienie, drobny szlif komponentów).
   Nie rusza JavaScriptu, API ani struktury HTML. Ładowany po style.css,
   więc nadpisuje paletę bez !important.

   Chcesz wrócić do starej palety? Po prostu usuń tę jedną linię <link>.
   ===================================================================== */


/* =====================================================================
   1. PALETA — MOTYW CIEMNY (domyślny, :root)
   Stonowana, „delikatna" zieleń jadeitowa + spokojne kolory pomocnicze.
   ===================================================================== */
:root {
  /* akcenty */
  --green:     #2CBE88;  --green-d:   #23A475;  --green-dim:  rgba(44,190,136,.14);
  --red:       #E0635B;  --red-dim:   rgba(224,99,91,.14);
  --amber:     #DFA23E;  --amber-dim: rgba(223,162,62,.14);
  --blue:      #5C9AD4;  --blue-dim:  rgba(92,154,212,.14);
  --purple:    #9B86E8;  --purple-dim:rgba(155,134,232,.15);
  --gold:      #D6B05A;  --gold-dim:  rgba(214,176,90,.15);

  /* tła i powierzchnie (lekko ciepły, zielonkawy grafit zamiast płaskiej czerni) */
  --bg:        #0E1311;
  --surface:   #161D19;
  --surf2:     #1B231E;
  --surf3:     #232C26;
  --border:    rgba(255,255,255,.08);
  --border2:   rgba(255,255,255,.045);

  /* tekst */
  --text:      #E9EEEA;
  --text2:     #9AA89F;
  --text3:     #616E66;

  /* cienie — bardziej miękkie, „warstwowe" */
  --shadow:    0 1px 2px rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.28);
  --shadow-md: 0 12px 34px rgba(0,0,0,.42);

  /* role */
  --role-admin:   #9B86E8;
  --role-manager: #DFA23E;
  --role-kucharz: #2CBE88;
  --role-kelner:  #5C9AD4;
}


/* =====================================================================
   2. PALETA — MOTYW JASNY (body.light)
   Ciepła biel zamiast zimnej szarości, nasycone akcenty dla kontrastu.
   ===================================================================== */
body.light {
  --green:     #13855E;  --green-d:   #0E6E4D;  --green-dim:  rgba(19,133,94,.10);
  --red:       #BC433D;  --red-dim:   rgba(188,67,61,.10);
  --amber:     #B9791A;  --amber-dim: rgba(185,121,26,.11);
  --blue:      #2C6BAE;  --blue-dim:  rgba(44,107,174,.10);
  --purple:    #6A55C0;  --purple-dim:rgba(106,85,192,.10);
  --gold:      #A9842C;  --gold-dim:  rgba(169,132,44,.10);

  --bg:        #F3F5F2;
  --surface:   #FFFFFF;
  --surf2:     #F6F8F4;
  --surf3:     #EDF0EA;
  --border:    rgba(20,40,30,.10);
  --border2:   rgba(20,40,30,.05);

  --text:      #1B231E;
  --text2:     #5C675F;
  --text3:     #98A29A;

  --shadow:    0 1px 3px rgba(27,35,30,.06), 0 0 0 1px rgba(27,35,30,.03);
  --shadow-md: 0 12px 34px rgba(27,35,30,.12);

  --role-admin:   #6A55C0;
  --role-manager: #B9791A;
  --role-kucharz: #13855E;
  --role-kelner:  #2C6BAE;
}


/* =====================================================================
   3. SZLIF KOMPONENTÓW (oba motywy — sterowane tokenami powyżej)
   Drobne poprawki, których sama zmiana tokenów nie złapie.
   ===================================================================== */

/* TOPBAR — subtelna głębia pod paskiem */
.topbar {
  box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(0,0,0,.06);
}
.app-name { font-weight: 700; letter-spacing: -.01em; }

/* KARTY — delikatny, warstwowy cień również w ciemnym motywie */
.card      { box-shadow: var(--shadow); }
.stat-card { box-shadow: var(--shadow); }
.stat-value { letter-spacing: -.02em; }

/* PRZYCISK GŁÓWNY — biały tekst na zieleni (czytelny w obu motywach) */
.btn-primary { color: #fff; }

/* POLA — pierścień focus w NOWYM kolorze zieleni (był zaszyty stary) */
.input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-dim);
}
body.light .input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-dim), inset 0 1px 3px rgba(0,0,0,.04);
}

/* NAWIGACJA — aktywny element spójny z nową zielenią */
.nav-item.active {
  background: var(--green-dim);
  color: var(--green);
  border-color: var(--green-dim);
}
body.light .nav-item.active {
  background: var(--green-dim);
  color: var(--green);
  border-color: rgba(19,133,94,.22);
}

/* GRAFIK — focus pola godzin i akcenty w nowej zieleni */
.time-in:focus      { border-color: var(--green); }
.inv-input:focus    { border-color: var(--green); }
.day-today .day-header { background: var(--green-dim); border-color: var(--green); }
.day-today .day-num    { color: var(--green); }

/* TABS — aktywna zakładka (pełny kontrast tekst/tło) */
.tab-btn.active { background: var(--text); color: var(--surface); border-color: var(--text); }

/* MODAL — miększy, głębszy cień */
.modal { box-shadow: var(--shadow-md); }

/* TOAST */
#toast { box-shadow: var(--shadow-md); }