/* ============================================================================
 * G-DIGITAL SHELL — KANONICZNA POWŁOKA PANELI (logowanie + sidebar)
 *
 * ŹRÓDŁO PRAWDY: shared/src/ui/shell.css (ten plik).
 * Kopie rozwozi `infra/sync-shell.sh` do worker/public/ (Suite), siedmiu
 * paneli i panelu CMS. Zmieniasz TUTAJ, potem uruchamiasz skrypt.
 *
 * TOKENY `--gd-*` SĄ WSPÓLNE DLA POWŁOKI I OBSZARU ROBOCZEGO: `tokens.css`
 * kitu podnosi je do warstwy `@theme` Tailwinda, więc kolor pada w systemie
 * dokładnie raz — tutaj.
 *
 * IDENTYFIKACJA WIZUALNA = STRONA www.digitaldevelopment.pl (2026-08-01).
 * Przeniesione stamtąd 1:1: marka #2A47D1, Eurostile Bold + Mundial, skala
 * szarości (Tailwind `gray`, nie `slate`), promienie 10/12/16/24 px, miękkie
 * cienie o dużym rozmyciu i niskiej sile, brandowana poświata pod CTA,
 * przyciemnienie nakładek z `backdrop-filter: blur`.
 *
 * Wymagane assety w każdym serwisie: /fonts/{Eurostile-Bold,Mundial-Regular}
 * .woff2 + .otf, /img/sygnet.png, /img/logo-text.png, /favicon.webp
 * ========================================================================== */

/* WOFF2 przed OTF — te same kroje co na stronie, ale 45 kB zamiast 74 kB
   (Eurostile) i 68 kB zamiast 170 kB (Mundial). OTF zostaje jako zapas dla
   przeglądarek bez woff2 i dla starszych kopii powłoki. */
@font-face {
  font-family: 'Eurostile';
  src: url('/fonts/Eurostile-Bold.woff2') format('woff2'),
       url('/fonts/Eurostile-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Mundial';
  src: url('/fonts/Mundial-Regular.woff2') format('woff2'),
       url('/fonts/Mundial-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* --- MARKA -------------------------------------------------------------
     Kolor główny jest white-label: `applyPrimaryColor()` z brandingu
     instalacji nadpisuje w runtime paletę `--color-brand-*`. Te wartości to
     DOMYŚLNA marka Digital Development. */
  --gd-brand: #2A47D1;
  --gd-brand-hover: #243BB0;
  --gd-brand-tint: #EEF2FF;
  /* Pigułka „tagline" ze strony: bg brand/8 + ramka brand/15 */
  --gd-brand-soft: rgb(42 71 209 / 0.08);
  --gd-brand-soft-border: rgb(42 71 209 / 0.15);

  /* --- POWIERZCHNIE I TEKST ---------------------------------------------
     Skala szarości ze strony (Tailwind `gray`). Poprzednio panele stały na
     `slate` — chłodniejszym, lekko niebieskawym; obok marki #2A47D1 dawało
     to wrażenie drugiego, konkurencyjnego błękitu. */
  --gd-bg: #F9FAFB;          /* gray-50  — tło sekcji na stronie */
  --gd-card: #ffffff;
  --gd-text: #111827;        /* gray-900 — nagłówki */
  --gd-text-2: #374151;      /* gray-700 — tekst podstawowy */
  /* Strona ma tu gray-500 (#6B7280). Ściemniony o włos, bo gray-500 daje na
     tle gray-100 (nasze przytłumione wiersze i pola wyłączone) 4,39:1 —
     poniżej progu AA. 5,05 / 4,83 / 4,59 na bieli / gray-50 / gray-100. */
  --gd-muted: #64707E;
  --gd-border: #E5E7EB;      /* gray-200 — krawędź karty (element dekoracyjny) */
  --gd-border-soft: #F3F4F6; /* gray-100 — podział wewnątrz karty */
  /* Ramka POLA i przycisku wtórnego. Strona używa tu gray-300 (#D1D5DB), ale
     to 1,47:1 — WCAG 1.4.11 wymaga 3:1 dla granicy elementu interfejsu, bo bez
     niej pole nie jest rozpoznawalne przy słabym wzroku i na ekranie w słońcu.
     Ta wartość daje 3,30 na bieli i 3,16 na tle strony. To ŚWIADOME odstępstwo
     od www — jedyne w całej palecie. */
  --gd-border-strong: #868E9B;
  --gd-err: #DC2626;

  /* --- TYPOGRAFIA -------------------------------------------------------- */
  --gd-font: 'Mundial', -apple-system, 'Segoe UI', sans-serif;
  --gd-font-heading: 'Eurostile', 'Mundial', sans-serif;

  /* --- PROMIENIE ---------------------------------------------------------
     Ze strony: pole 10 px, przycisk 12 px, karta 16 px, duża karta 24 px. */
  --gd-radius-field: 10px;
  --gd-radius-control: 12px;
  --gd-radius-surface: 16px;
  --gd-radius-card: 24px;

  /* --- CIENIE ------------------------------------------------------------
     Podpis strony: duże rozmycie, minimalna siła — karta ma „unosić się",
     a nie mieć obwódkę. Pod CTA idzie poświata w kolorze marki. */
  --gd-shadow-raised: 0 4px 20px rgb(17 24 39 / 0.04);
  --gd-shadow-overlay: 0 8px 30px rgb(17 24 39 / 0.08), 0 2px 8px rgb(17 24 39 / 0.04);
  --gd-shadow-modal: 0 24px 60px rgb(17 24 39 / 0.18), 0 8px 20px rgb(17 24 39 / 0.06);
  --gd-shadow-brand: 0 8px 30px rgb(42 71 209 / 0.25);
}

/* Identyczne wygładzanie glifów wszędzie — Tailwind (panele) używa
   antialiased, czysty CSS (Suite) domyślnie subpixel; różnica wygląda
   jak "inna czcionka" mimo tych samych plików. */
.gd-login-screen, .gd-sidebar {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- EKRAN LOGOWANIA (identyczny; różni się tylko nazwą serwisu) --- */
.gd-login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--gd-bg); position: relative; overflow: hidden; font-family: var(--gd-font); }
/* Rozmyte plamy marki w tle — ten sam zabieg co w hero strony
   (`bg-brand-blue/15 rounded-full blur-[100px]`). */
.gd-login-screen::before { content: ''; position: absolute; top: -160px; right: -160px; width: 600px; height: 600px;
  background: rgba(42,71,209,.10); border-radius: 50%; filter: blur(64px); pointer-events: none; }
.gd-login-screen::after { content: ''; position: absolute; bottom: -160px; left: -160px; width: 500px; height: 500px;
  background: rgba(42,71,209,.05); border-radius: 50%; filter: blur(64px); pointer-events: none; }
.gd-login-card { background: var(--gd-card); border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius-card);
  padding: 48px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center;
  width: 100%; max-width: 420px; box-shadow: 0 10px 40px rgba(42,71,209,.12); position: relative; z-index: 1; }
.gd-login-lockup { display: flex; align-items: center; justify-content: center; gap: 12px; }
/* logo instalacji white-label (zastępuje lockup po wgraniu w panelu) —
   ten sam gabaryt co lockup, żeby karta nie zmieniała geometrii */
.gd-login-logo { max-width: 210px; max-height: 40px; object-fit: contain; }
.gd-login-lockup-signet { width: 36px; height: 36px; object-fit: contain; }
.gd-login-lockup-text { width: 122px; object-fit: contain; }
/* Nagłówki na stronie są ZAWSZE Eurostile Bold z ciasną interlinią. */
.gd-login-title { font-family: var(--gd-font-heading); font-size: 26px; letter-spacing: .01em;
  color: var(--gd-text); margin: 0; line-height: 32px; font-weight: 700; }
.gd-login-sub { font-size: 14px; color: var(--gd-muted); margin: 0; line-height: 20px; }
.gd-login-error { font-size: 14px; color: var(--gd-err); margin: 0; }

/* ---------- SIDEBAR (identyczny; różnią się tylko pozycje menu) ----------- */
.gd-sidebar { width: 256px; flex-shrink: 0; background: var(--gd-card); color: var(--gd-text-2);
  border-right: 1px solid var(--gd-border); display: flex; flex-direction: column;
  font-family: var(--gd-font); }
.gd-sidebar-head { display: flex; align-items: center; gap: 12px; padding: 22px 20px;
  border-bottom: 1px solid var(--gd-border-soft); }
.gd-sidebar-signet { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
/* line-height PRZYPIĘTE jawnie — Tailwind (panele) narzuca globalnie 1.5,
   czysty CSS (Suite) ~1.2; bez tego odstęp nazwa→domena różni się per serwis
   i nagłówek "skacze" przy przełączaniu kart */
.gd-sidebar-brand { font-family: var(--gd-font-heading); color: var(--gd-text); font-size: 15px;
  letter-spacing: .02em; line-height: 20px; font-weight: 700; }
.gd-sidebar-domain { font-size: 11px; color: var(--gd-muted); margin-top: 2px; line-height: 14px; }
.gd-sidebar-nav { flex: 1; padding: 14px 12px; overflow-y: auto; }
/* Nagłówek sekcji menu = „tagline" ze strony: wersaliki, szeroki trakt. */
.gd-nav-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .2em; color: var(--gd-muted); padding: 0 12px 8px; }
.gd-nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px;
  border: none; background: none; border-radius: var(--gd-radius-control); font-size: 14px;
  font-family: inherit; color: var(--gd-text-2); cursor: pointer; transition: all .15s; text-align: left;
  text-decoration: none; }
.gd-nav-item:hover { background: var(--gd-border-soft); color: var(--gd-text); }
.gd-nav-item.active { background: var(--gd-brand-tint); color: var(--gd-brand); font-weight: 600; }
.gd-sidebar-foot { border-top: 1px solid var(--gd-border-soft); padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gd-sidebar-user { font-size: 12px; color: var(--gd-muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.gd-sidebar-logout { background: none; border: none; color: var(--gd-err); font-size: 12px;
  cursor: pointer; font-family: inherit; padding: 6px 10px; border-radius: 8px; flex-shrink: 0; }
.gd-sidebar-logout:hover { background: rgba(239,68,68,.1); }