/* IWENDO CRM - MOTYW „NOWY” (ciemny granat, menu w działach). Do wyboru przez każdego użytkownika w menu konta
   (decyzja właściciela 01.11, po galerii motywu testowego z gałęzi motyw-testowy). Domyślny jest „Klasyczny”.

   Wygląd: ciemne tło całej aplikacji (granat/grafit), jasny tekst, karty jaśniejsze od tła; menu w działach
   z kolorową kwadratową ikoną, dwie linie na pozycję (nazwa + szary podpis), działy rozwijane trójkątem w kolorze
   działu, aktywna pozycja z jaśniejszym tłem i kolorowym paskiem z lewej; u góry logo, nazwa biura i rola.

   JAK ZBUDOWANY: obecny arkusz (css/style.css) ma kolory w TOKENACH (--bg, --surface, --ink, --st-*-ink/tint…),
   więc większość pracy to nowe wartości tokenów. Reszta to miejsca z kolorem wpisanym wprost (pasek górny,
   obwódki przycisków, atomy a-background-…, wykresy SVG) - nadpisane tutaj, z nazwą miejsca.
   WSZYSTKO pod `html.motyw-nowy` - jedna klasa na <html> (stawia ją js/main.js z wyboru na koncie, patrz
   js/motywy.js). Bez niej ten plik nie robi nic, więc ładuje się zawsze i zmiana motywu nie przeładowuje strony.
   Klasy księgi wyglądu są te same w obu motywach - tu zmieniają się wartości, nie komponenty.
   Całość w `@media screen`: wydruk z ekranu zostaje jasny, jak kartka.
   Portale klienta, najemcy i właściciela tej klasy nie dostają (to strony dla ludzi z zewnątrz).

   KONTRAST (policzone, WCAG 2.1; mierzy go też wyglad-audyt.js w obu motywach): tekst główny 12,1-15,7:1,
   pomocniczy 6,4-8,3:1, plakietki 7,4-8,7:1 na własnym tincie, przycisk główny 5,1:1, białe ikony na kolorach
   działów 4,3-5,9:1 (próg dla ikon 3:1). */
@media screen {

/* ═══ 1. TOKENY ═══ (także na body - wariant body.sidebar-light z obecnego arkusza nie może przebić motywu) */
html.motyw-nowy, html.motyw-nowy body {
  --bg: #0F1724;
  --surface: #172131;
  --surface-2: #1E2A3D;
  --ink: #E7EBF1;
  --muted: #A2ADBD;
  --line: #263246;
  --line-strong: #33415A;

  --gold: #D4B47A;
  --gold-strong: #B9965A;
  --gold-deep: #E2C48C;        /* „złoto na tle” = odsyłacze i akcenty tekstu: na granacie jasne */
  --gold-soft: rgba(212, 180, 122, .14);

  --action: #2D6AD6;           /* przycisk główny: biały tekst 5,1:1 */
  --action-strong: #2459B8;
  --action-deep: #9CC0FF;      /* tekst akcji na ciemnym tle */

  --ciemna-powierzchnia: #0B1220;
  --atrament-na-zlocie: #1B1F23;

  --sidebar: #0B1220;
  --sidebar-logo-ink: #E7EBF1;
  --sidebar-ink: #B9C2CF;
  --sidebar-ink-strong: #F2F5F9;
  --sidebar-muted: #8D99AA;
  --sidebar-hover-bg: rgba(255, 255, 255, .05);
  --sidebar-active-bg: #1C2840;
  --sidebar-active-ink: #F2F5F9;
  --sidebar-accent: #7FB0FF;
  --sidebar-accent-strong: #2F6FDB;
  --sidebar-count-bg: rgba(255, 255, 255, .10);
  --sidebar-count-ink: #F2F5F9;
  --sidebar-line: rgba(255, 255, 255, .07);
  --sidebar-border: #1A2436;

  --danger: #FF8A7E;
  --brass: #F0B45A;
  --blue: #8DB6F2;
  --rdza: #F29A7C;
  --plum: #C7B3E0;

  --st-ok-ink: #93DBB4;          --st-ok-tint: #163428;
  --st-uwaga-ink: #F0CB86;       --st-uwaga-tint: #3A2D14;   --st-uwaga-obwodka: #6A5428;
  --st-info-ink: #A6C6F0;        --st-info-tint: #1B2C45;
  --st-cichy-ink: #BAC3CF;       --st-cichy-tint: #263142;
  --st-alarm-ink: #F4AE96;       --st-alarm-tint: #40231A;
  --st-wyroznik-ink: #D2BEEA;    --st-wyroznik-tint: #2E2442;
  --st-przeszkoda-ink: #F7A994;  --st-przeszkoda-tint: #43201A;  --st-przeszkoda-obwodka: #6E3426;
  --st-powodzenie-ink: #8FE0B8;  --st-powodzenie-tint: #143A29;

  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lift: 0 10px 28px -10px rgba(0, 0, 0, .6);
  --ring: 0 0 0 3px rgba(127, 176, 255, .40);

  /* kolory działów menu: tło ikony (biała ikona AA) i wersja jasna (trójkąt, pasek aktywnej pozycji) */
  --dz-przeglad: #2F6FDB;     --dz-przeglad-jasny: #7FB0FF;
  --dz-oferty: #7A55D3;       --dz-oferty-jasny: #B9A1FF;
  --dz-klienci: #1D8A5A;      --dz-klienci-jasny: #6FD6A4;
  --dz-najem: #B5650B;        --dz-najem-jasny: #F2B35E;
  --dz-finanse: #C2492A;      --dz-finanse-jasny: #FF9677;
  --dz-organizacja: #0E7F8C;  --dz-organizacja-jasny: #5CD3DF;
  --dz-analiza: #B03F7A;      --dz-analiza-jasny: #F38EC2;
  --dz-system: #5A6576;       --dz-system-jasny: #AEB8C6;
}
html.motyw-nowy { color-scheme: dark; background: var(--bg); }
html.motyw-nowy ::selection { background: rgba(127, 176, 255, .35); }
html.motyw-nowy * { scrollbar-color: #33415A transparent; }
html.motyw-nowy ::-webkit-scrollbar-thumb { background: #33415A; }
html.motyw-nowy ::-webkit-scrollbar-thumb:hover { background: #45557A; }

/* ═══ 2. MENU W DZIAŁACH ═══ */
html.motyw-nowy .app { grid-template-columns: 296px 1fr; }
html.motyw-nowy .sidebar { padding: 16px 12px; }
html.motyw-nowy .menu-biuro { display: flex; align-items: center; gap: 12px; padding: 4px 8px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--sidebar-line); }
html.motyw-nowy .menu-biuro-logo {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; overflow: hidden;
  background: var(--surface-2); color: var(--sidebar-ink-strong); font-weight: 800; font-size: 1.1rem; text-transform: uppercase;
}
html.motyw-nowy .menu-biuro-logo img { max-width: 100%; max-height: 100%; height: auto; }
html.motyw-nowy .menu-biuro .menu-tekst b { color: var(--sidebar-ink-strong); font-size: 0.95rem; }

html.motyw-nowy .menu-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; text-align: left; }
html.motyw-nowy .menu-tekst b { font-weight: 700; color: var(--sidebar-ink-strong); font-size: 0.875rem; overflow-wrap: anywhere; }
html.motyw-nowy .menu-opis { color: var(--sidebar-muted); font-size: 0.875rem; font-weight: 400; overflow-wrap: anywhere; }

/* ikona: kwadrat z zaokrąglonymi rogami w kolorze działu, biała kreska */
html.motyw-nowy .menu-ikona {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--dz, var(--dz-system)); color: #FFFFFF;
}
html.motyw-nowy .menu-ikona svg { width: 18px; height: 18px; opacity: 1; color: #FFFFFF; }
/* pozycja w dziale: ikona w tincie koloru działu (nie pełny kolor) - nagłówek działu ma być mocniejszy */
html.motyw-nowy .dzial-pozycje .menu-ikona { width: 32px; height: 32px; background: color-mix(in srgb, var(--dz) 26%, var(--sidebar)); color: var(--dz-jasny); }
html.motyw-nowy .dzial-pozycje .menu-ikona svg { width: 16px; height: 16px; color: var(--dz-jasny); }

html.motyw-nowy .dzial + .dzial { margin-top: 4px; }
html.motyw-nowy .dzial-przeglad { --dz: var(--dz-przeglad); --dz-jasny: var(--dz-przeglad-jasny); }
html.motyw-nowy .dzial-oferty { --dz: var(--dz-oferty); --dz-jasny: var(--dz-oferty-jasny); }
html.motyw-nowy .dzial-klienci { --dz: var(--dz-klienci); --dz-jasny: var(--dz-klienci-jasny); }
html.motyw-nowy .dzial-najem { --dz: var(--dz-najem); --dz-jasny: var(--dz-najem-jasny); }
html.motyw-nowy .dzial-finanse { --dz: var(--dz-finanse); --dz-jasny: var(--dz-finanse-jasny); }
html.motyw-nowy .dzial-organizacja { --dz: var(--dz-organizacja); --dz-jasny: var(--dz-organizacja-jasny); }
html.motyw-nowy .dzial-analiza { --dz: var(--dz-analiza); --dz-jasny: var(--dz-analiza-jasny); }
html.motyw-nowy .dzial-system { --dz: var(--dz-system); --dz-jasny: var(--dz-system-jasny); }

html.motyw-nowy .dzial-glowa {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px;
  background: none; border: 0; border-radius: 12px; color: var(--sidebar-ink); font: inherit; cursor: pointer;
}
html.motyw-nowy .dzial-glowa:hover { background: var(--sidebar-hover-bg); }
html.motyw-nowy .dzial-glowa:focus-visible, html.motyw-nowy .nav-item:focus-visible { outline: 2px solid var(--dz-jasny); outline-offset: -2px; }
/* trójkąt w kolorze działu - w prawo zwinięty, w dół rozwinięty */
html.motyw-nowy .dzial-trojkat {
  flex: none; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 7px solid var(--dz-jasny); transition: transform .16s; margin-right: 4px;
}
html.motyw-nowy .dzial.otwarty .dzial-trojkat { transform: rotate(90deg); }
html.motyw-nowy .dzial-pozycje { display: none; padding: 2px 0 6px 8px; }
html.motyw-nowy .dzial.otwarty .dzial-pozycje { display: block; }
html.motyw-nowy .dzial.otwarty .dzial-licznik { display: none; }

html.motyw-nowy .nav-item { gap: 12px; min-height: 48px; padding: 6px 8px 6px 12px; border-radius: 10px; margin-top: 2px; }
html.motyw-nowy .nav-item .menu-tekst b { font-weight: 600; color: var(--sidebar-ink); }
html.motyw-nowy .nav-item:hover .menu-tekst b { color: var(--sidebar-ink-strong); }
html.motyw-nowy .nav-item.active { background: var(--sidebar-active-bg); }
html.motyw-nowy .nav-item.active .menu-tekst b { color: var(--sidebar-active-ink); font-weight: 700; }
html.motyw-nowy .nav-item.active::before { left: 0; top: 8px; bottom: 8px; width: 4px; background: var(--dz-jasny); }
html.motyw-nowy .nav-item .count, html.motyw-nowy .dzial-licznik {
  flex: none; margin-left: auto; font-size: 0.875rem; font-weight: 700; padding: 0 8px; border-radius: 99px;
  background: color-mix(in srgb, var(--dz) 30%, var(--sidebar)); color: var(--sidebar-ink-strong);
}
html.motyw-nowy .dzial-licznik[hidden] { display: none; }
html.motyw-nowy .theme-switch { display: none; }   /* przełącznik jasnego paska nie ma sensu w ciemnym motywie */
html.motyw-nowy .sidebar-foot { border-top-color: var(--sidebar-line); }

@media (max-width: 900px) {
  html.motyw-nowy .app { grid-template-columns: 1fr; }
  html.motyw-nowy .sidebar { width: 312px; max-width: 88vw; }
  html.motyw-nowy .nav-backdrop { background: rgba(3, 6, 12, .6); }
}

/* ═══ 3. MIEJSCA Z KOLOREM WPISANYM WPROST W OBECNYM ARKUSZU ═══ */
html.motyw-nowy .topbar { background: rgba(15, 23, 36, .94); border-bottom-color: var(--line); }
html.motyw-nowy .btn:hover, html.motyw-nowy .btn.ghost:hover { border-color: var(--line-strong); }
html.motyw-nowy .btn.danger { border-color: #6E3426; }
html.motyw-nowy .btn.danger:hover { background: #2A1714; border-color: #8A4232; }
html.motyw-nowy .btn.ghost.danger { border-color: #6E3426; }
html.motyw-nowy .chip:hover { border-color: var(--line-strong); }
html.motyw-nowy .modal-backdrop { background: rgba(3, 6, 12, .66); }
html.motyw-nowy .modal { box-shadow: 0 24px 70px -18px rgba(0, 0, 0, .8); border: 1px solid var(--line); }
html.motyw-nowy .toast { border-color: var(--line-strong); }
html.motyw-nowy .tekst-14-szary { color: var(--muted); }
/* atomy z kolorem w nazwie (stare style= zamienione na klasy) */
html.motyw-nowy .a-background-fff { background: var(--surface) !important; }
html.motyw-nowy .a-background-linear-gradient-180deg-f0f7f2-f6f6f3 { background: linear-gradient(180deg, #16302A, var(--surface)) !important; }
html.motyw-nowy .a-border-1px-solid-999, html.motyw-nowy .a-border-1px-solid-bbb { border-color: var(--line-strong) !important; }
html.motyw-nowy .a-border-color-rgba-61-130-100-2 { border-color: rgba(111, 214, 164, .25) !important; }
/* paski komunikatów: obwódki z pliku pasek-komunikatu.css były jasne */
html.motyw-nowy .pas-crm.informacja { border-color: #2F4A6E; }
html.motyw-nowy .pas-crm.awaria { border-color: #6E3426; }
/* podgląd dokumentu to „kartka” - zostaje biała, z ciemnym tekstem, jak wydruk */
html.motyw-nowy .doc-preview { color: #1C2024; }

/* ═══ 4. WYKRESY (js/charts.js maluje SVG kolorami w atrybutach; arkusz je przebija) ═══ */
html.motyw-nowy svg [stroke="#EAEAE6"] { stroke: var(--line); }
html.motyw-nowy svg [fill="#23272B"] { fill: var(--ink); }
html.motyw-nowy svg [fill="#8B9096"] { fill: var(--muted); }
html.motyw-nowy svg [stroke="#8B9096"] { stroke: var(--muted); }
html.motyw-nowy svg [stroke="#FEFEFD"] { stroke: var(--surface); }
html.motyw-nowy svg [fill="#FEFEFD"] { fill: var(--surface); }
/* kółko z inicjałami: konto bez własnego koloru ma tło #1B1F23 (w atrybucie) - na granacie znikało, stąd obwódka */
html.motyw-nowy .avatar { box-shadow: 0 0 0 1px var(--line-strong); }

/* ═══ 5. KOLORY Z PALETY W JS (przyrząd KONTRAST, 01.11) ═══
   Na granacie ciemne kolory palety jako napis mają 2,6-3,6:1. Arkusz nie zmienia widoku: podmienia sam kolor napisu
   na jasny odpowiednik - w motywie Klasycznym ten sam kolor typu jest przyciemniany czernią (css/style.css). */
/* typ wydarzenia na pulpicie: kolor typu rozjaśniony bielą, tło jego tint na ciemnej karcie */
html.motyw-nowy .typ-wydarzenia { background: color-mix(in srgb, var(--kal-typ) 22%, transparent); color: color-mix(in srgb, var(--kal-typ) 40%, #fff); }
/* przyciski publikacji w Social media: obwódka zostaje w kolorze marki (w style=), napis jasny */
html.motyw-nowy #soc-fb, html.motyw-nowy #soc-in, html.motyw-nowy #soc-ig { color: var(--ink) !important; }
/* podgląd dokumentu to biała kartka - napis pomocniczy na niej w kolorze z obecnego wyglądu (AA na bieli) */
html.motyw-nowy .doc-preview .muted { color: #5F676D; }

}   /* koniec @media screen */