/**
 * theme.css — identyfikacja wizualna Grupy Dr IT
 *
 * Ładowany PO stylach domyślnych z index.html, więc nadpisuje je bez
 * modyfikowania tamtego pliku. Logika aplikacji nie jest w ogóle dotykana.
 *
 * ŹRÓDŁO WARTOŚCI
 * Kolory pochodzą z `references/brand.md` skilla dokumentów Dr IT — to jedyne
 * źródło prawdy dla identyfikacji. Wartości oznaczone tam jako FAKT zostały
 * odczytane pipetą z logo Grupy Dr IT.
 *
 * ROZBIEŻNOŚĆ WZGLĘDEM drit.pl — ŚWIADOMA
 * Pomarańcze są w obu źródłach praktycznie identyczne (#F9A14A co do bitu).
 * Kolor ciemny NIE jest: drit.pl używa granatu #1C1C4E, a brand.md ciepłej
 * szarości #33363A i wprost ostrzega, że „chłodny, niebieskawy grafit obok
 * pomarańczu z logo wygląda obco". Przyjęto brand.md, bo portal sąsiaduje
 * z dokumentacją Dr IT, a paleta brand.md wywodzi się wprost z logo.
 * Aby przejść na granat ze strony www: podmień --drit-ink i --drit-ink-soft.
 *
 * KONTRAST
 * Biały tekst na #F79232 daje 2,30:1 i jest nieczytelny — brand.md tego
 * zabrania. Dlatego tekst na pomarańczowych powierzchniach ma kolor
 * --drit-ink (5,27:1, AA), a odnośniki i tekst pomocniczy używają grafitu;
 * pomarańcz pojawia się przy nich wyłącznie jako obramowanie lub kreska.
 *
 * TYPOGRAFIA
 * brand.md wskazuje Inter dla HTML, ale CSP portalu ma `font-src 'self'`,
 * więc czcionki z CDN są blokowane. Używamy Segoe UI — obecnego na każdym
 * stanowisku Windows i wskazanego w brand.md jako krój dokumentów Office,
 * metrycznie bliskiego Interowi.
 */

/* ── 1. Tokeny marki ────────────────────────────────────────────────────── */

:root {
  /* FAKT — odczytane z logo */
  --drit-orange:       #F79232;
  --drit-orange-light: #F9A14A;
  --drit-orange-mid:   #EC8B2E;
  --drit-ink:          #33363A;
  --drit-ink-soft:     #4F5256;

  /* brand.md, skala dobrana wokół kolorów logo */
  --drit-orange-dark:  #D97A1E;
  --drit-orange-soft:  #FDE7CE;
  --drit-orange-wash:  #FEF6EE;
  --drit-text:         #40444A;
  --drit-muted:        #7A7F86;
  --drit-line:         #DFE1E4;
  --drit-surface:      #F5F6F7;

  --drit-ok:   #1E8A5F;
  --drit-warn: #C58012;
  --drit-err:  #C0392B;

  /* DOBRANE tutaj: brand.md nie definiuje jasnych teł dla stanów
     semantycznych ani palety trybu ciemnego. Wyprowadzone z powyższych. */
  --drit-ok-bg:   #E8F4EE;
  --drit-warn-bg: #FDF1DC;
  --drit-err-bg:  #F9E7E5;
}

/* ── 2. Mapowanie na zmienne portalu — tryb jasny ───────────────────────── */

:root {
  --color-primary:        var(--drit-orange);
  --color-primary-hover:  var(--drit-orange-mid);
  --color-primary-active: var(--drit-orange-dark);
  --color-primary-light:  var(--drit-orange-soft);
  /* Grafit, nie biel — patrz nota o kontraście w nagłówku pliku. */
  --color-primary-text:   var(--drit-ink);

  --color-success:    var(--drit-ok);
  --color-success-bg: var(--drit-ok-bg);
  --color-warning:    var(--drit-warn);
  --color-warning-bg: var(--drit-warn-bg);
  --color-danger:     var(--drit-err);
  --color-danger-bg:  var(--drit-err-bg);

  --color-bg:         var(--drit-surface);
  --color-surface:    #FFFFFF;
  --color-border:     var(--drit-line);
  --color-text:       var(--drit-text);
  --color-text-muted: var(--drit-muted);
  --color-overlay:    rgba(51, 54, 58, .55);

  --font:      'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

  /* brand.md: „Zaokrąglenia trzymaj małe. Duże promienie czytają się jak
     interfejs" — 4 px dla bloków, 2 px dla znaczników. */
  --radius:    4px;
  --radius-lg: 6px;

  --shadow:    0 1px 3px rgba(51, 54, 58, .10);
  --shadow-lg: 0 8px 28px rgba(51, 54, 58, .18);

  --logo-url:    url('/assets/logo-drit.png');
  --logo-width:  48px;
  --logo-height: 36px;
}

/* ── 3. Znak rozpoznawczy: pomarańczowa kreska pod paskiem ──────────────── */
/* Ten sam element występuje w nagłówku dokumentów Dr IT. */

.topbar {
  border-bottom: 1px solid var(--drit-line);
  box-shadow: inset 0 -3px 0 var(--drit-orange), 0 1px 3px rgba(51, 54, 58, .07);
}

/* Odnośniki i przycisk drugorzędny: tekst grafitowy, pomarańcz jako
   obramowanie. Pomarańczowy tekst na bieli ma 2,30:1 i odpada. */
.btn-secondary {
  border-color: var(--drit-orange);
  color: var(--drit-ink);
}
.btn-secondary:hover {
  background: var(--drit-orange-wash);
  border-color: var(--drit-orange-mid);
}

.device-card:hover {
  border-color: var(--drit-orange);
  box-shadow: 0 2px 10px rgba(247, 146, 50, .16);
}

/* ── 4. Ekran logowania — tryb jasny ────────────────────────────────────── */

#view-login {
  background:
    radial-gradient(ellipse at 20% 25%, rgba(247, 146, 50, .22) 0%, transparent 52%),
    radial-gradient(ellipse at 78% 72%, rgba(79, 82, 86, .35) 0%, transparent 52%),
    linear-gradient(155deg, #2B2E32 0%, #3D4045 45%, #26282B 100%);
}

#view-login .card-center {
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--drit-orange);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .40), 0 0 0 1px rgba(255, 255, 255, .06);
}

.login-icon {
  background: linear-gradient(145deg, var(--drit-orange-light) 0%, var(--drit-orange-mid) 100%);
  border-radius: var(--radius-lg);
}
/* Ikona w środku kafelka: grafit, nie biel — kontrast jak przy przyciskach. */
.login-icon svg { fill: var(--drit-ink); }

#view-login .title    { color: var(--drit-ink); }
#view-login .subtitle { color: var(--drit-muted); }
#view-login .hint     { color: var(--drit-muted); }

.login-features {
  background: var(--drit-orange-wash);
  border: 1px solid var(--drit-orange-soft);
  border-radius: var(--radius);
}
.login-feature     { color: var(--drit-text); }
.login-feature svg { fill: var(--drit-orange-mid); }

.login-divider {
  background: linear-gradient(to right, transparent, var(--drit-line), transparent);
}

#view-login .btn-microsoft {
  border: 1.5px solid var(--drit-line);
  border-radius: var(--radius);
}
#view-login .btn-microsoft:hover {
  background: var(--drit-orange-wash);
  border-color: var(--drit-orange);
  box-shadow: 0 6px 18px rgba(247, 146, 50, .22);
}
.btn-microsoft:hover { background: var(--drit-surface); }

/* ── 5. Tryb ciemny ─────────────────────────────────────────────────────── */
/* index.html używa selektora html[data-theme="dark"], żeby wygrać z :root
   pliku motywu. Powtarzamy tę samą specyficzność — ten plik ładuje się
   później, więc przy remisie wygrywa. Paleta jest ciepła (wyprowadzona
   z grafitu logo), a nie chłodno-granatowa jak w oryginale. */

html[data-theme="dark"] {
  --color-bg:            #1F2124;
  --color-surface:       #292C30;
  --color-border:        #3B3F45;
  --color-text:          #E4E6E8;
  --color-text-muted:    #9BA0A6;
  --color-overlay:       rgba(0, 0, 0, .65);
  --color-primary-light: #4A3A25;
  --color-success-bg:    #1C3129;
  --color-warning-bg:    #3A2F1A;
  --color-danger-bg:     #3A2422;
  --shadow:              0 1px 3px rgba(0, 0, 0, .35);
  --shadow-lg:           0 8px 28px rgba(0, 0, 0, .45);
}

[data-theme="dark"] .topbar {
  box-shadow: inset 0 -3px 0 var(--drit-orange), 0 1px 4px rgba(0, 0, 0, .30);
}

[data-theme="dark"] #view-login .card-center {
  background: rgba(41, 44, 48, .96);
  border-top-color: var(--drit-orange);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06);
}

[data-theme="dark"] #view-login .title    { color: #E4E6E8; }
[data-theme="dark"] #view-login .subtitle { color: #9BA0A6; }
[data-theme="dark"] #view-login .hint     { color: #808790; }

[data-theme="dark"] .login-features {
  background: #33363A;
  border-color: #45494F;
}
[data-theme="dark"] .login-feature     { color: #C9CDD2; }
[data-theme="dark"] .login-feature svg { fill: var(--drit-orange-light); }

[data-theme="dark"] .login-divider {
  background: linear-gradient(to right, transparent, #45494F, transparent);
}

[data-theme="dark"] .btn-microsoft,
[data-theme="dark"] #view-login .btn-microsoft {
  background: #33363A;
  border-color: #4F5256;
  color: #D8DBDE;
}
[data-theme="dark"] .btn-microsoft:hover { background: #3D4045; }
[data-theme="dark"] #view-login .btn-microsoft:hover {
  background: #3D4045;
  border-color: var(--drit-orange);
  box-shadow: 0 6px 18px rgba(247, 146, 50, .22);
}

[data-theme="dark"] .btn-secondary {
  border-color: var(--drit-orange);
  color: #E4E6E8;
}
[data-theme="dark"] .btn-secondary:hover { background: #3D4045; }

[data-theme="dark"] .device-card:hover {
  border-color: var(--drit-orange);
  box-shadow: 0 2px 10px rgba(247, 146, 50, .20);
}