/**
 * Warstwa marki Woohoo — nakładka na styles.css.
 *
 * Wydzielona celowo: styles.css to przeniesiony interfejs aplikacji, a ten
 * plik zawiera wyłącznie identyfikację wizualną. Usunięcie odnośnika do niego
 * z index.html przywraca poprzedni wygląd bez grzebania w reszcie stylów.
 *
 * Wartości nie są zgadywane — pochodzą ze zmiennych CSS na woohoo.pl:
 *   --color-blue #0049FF, --color-navy #091133, --color-steel-blue #7881A9,
 *   --color-pale-blue #C7D7FF, --color-azure-blue #F6F9FC, --color-gray #475467
 */

/* -------------------------------------------------------------------------- */
/* Krój pisma                                                                  */
/* -------------------------------------------------------------------------- */

/**
 * Inter hostowany lokalnie, a nie z CDN Google.
 *
 * styles.css deklarował już `--font: Inter, ...`, ale font nigdy nie był
 * wczytywany, więc przeglądarka spadała na krój systemowy. Pliki leżą u nas z
 * dwóch powodów: interfejs działa bez internetu, a przeglądarka pracownika nie
 * łączy się przy każdym wejściu z serwerem Google (co przy danych kadrowych i
 * RODO jest po prostu mniej kłopotliwe).
 *
 * Wersja zmienna: jeden plik na podzbiór obsługuje wszystkie grubości.
 * Podzbiór latin-ext jest konieczny dla polskich znaków (ą, ć, ę, ł, ń, ó, ś, ź, ż).
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------- */
/* Paleta marki                                                                */
/* -------------------------------------------------------------------------- */

:root {
  --wh-blue: #0049ff;
  --wh-blue-hover: #0038c9;
  --wh-navy: #091133;
  --wh-navy-soft: #30385a;
  --wh-steel: #7881a9;
  --wh-pale: #c7d7ff;
  --wh-azure: #f6f9fc;
  --wh-gray: #475467;
  --wh-border: #e3e8f2;
}

/* -------------------------------------------------------------------------- */
/* Ekran logowania                                                             */
/* -------------------------------------------------------------------------- */

.auth-view { background: var(--wh-azure); }

/* --- lewa kolumna: hero --- */

.auth-view .auth-visual {
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(0, 73, 255, .38), transparent 60%),
    var(--wh-navy);
  color: #fff;
}

.auth-view .auth-visual::before { opacity: .13; }

.auth-view .auth-visual__orb--one { background: rgba(0, 73, 255, .30); }
.auth-view .auth-visual__orb--two { background: rgba(199, 215, 255, .12); }

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.auth-brand__logo {
  display: block;
  width: auto;
  height: 40px;
}

/* Dopisek produktu obok logo firmowego: to nadal Woohoo, ale konkretny system. */
.auth-brand__product {
  padding: 5px 12px;
  border: 1px solid rgba(199, 215, 255, .30);
  border-radius: 999px;
  background: rgba(199, 215, 255, .14);
  color: #fff;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Zachowuje kompozycję z oryginału: logo nad treścią, poza jej przepływem. */
.auth-view .auth-visual__content > .auth-brand {
  position: absolute;
  bottom: calc(100% + clamp(80px, 9vh, 130px));
  left: 0;
}

.auth-view .auth-visual__content h2 {
  font-weight: 700;
  letter-spacing: -.035em;
}

.auth-view .auth-visual__content > p:not(.eyebrow) { color: rgba(199, 215, 255, .82); }
.auth-view .auth-visual .eyebrow { color: var(--wh-pale); }

.auth-view .auth-quote {
  border-color: rgba(199, 215, 255, .22);
  background: rgba(199, 215, 255, .09);
  color: rgba(255, 255, 255, .88);
}

.auth-view .auth-quote__icon { color: var(--wh-pale); }

/* --- prawa kolumna: formularz --- */

.auth-view .auth-mobile-brand .auth-brand__product {
  border-color: rgba(9, 17, 51, .16);
  background: rgba(0, 73, 255, .08);
  color: var(--wh-blue);
}

.auth-view h1 {
  color: var(--wh-navy);
  font-weight: 700;
  letter-spacing: -.03em;
}

.auth-view .eyebrow--accent { color: var(--wh-blue); }
.auth-view .muted { color: var(--wh-gray); }
.auth-view label { color: var(--wh-navy); }

.auth-view .field input {
  border-color: var(--wh-border);
  border-radius: 12px;
  background: #fff;
  color: var(--wh-navy);
}

.auth-view .field input::placeholder { color: #9aa5bd; }

.auth-view .field input:focus,
.auth-view .field input:focus-visible {
  border-color: var(--wh-blue);
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 73, 255, .14);
}

.auth-view .button--primary {
  border: none;
  border-radius: 12px;
  background: var(--wh-blue);
  box-shadow: 0 10px 24px -12px rgba(0, 73, 255, .75);
  color: #fff;
  font-weight: 600;
}

.auth-view .button--primary:hover { background: var(--wh-blue-hover); }

.auth-view .button--primary:focus-visible {
  outline: 2px solid var(--wh-navy);
  outline-offset: 2px;
}

.auth-view .button--ghost {
  border: 1px solid var(--wh-border);
  border-radius: 12px;
  background: #fff;
  color: var(--wh-navy);
  font-weight: 500;
}

.auth-view .button--ghost:hover {
  border-color: var(--wh-pale);
  background: var(--wh-azure);
}

.auth-view .auth-divider { color: var(--wh-steel); }
.auth-view .auth-divider::before,
.auth-view .auth-divider::after { background: var(--wh-border); }

.auth-view .auth-domain-hint,
.auth-view .auth-help { color: var(--wh-steel); }

.auth-view .inline-alert--error {
  border-radius: 12px;
}

/* Ekran logowania na wąskim ekranie: hero znika, zostaje logo w kolorze. */
@media (max-width: 900px) {
  .auth-view .auth-mobile-brand { display: inline-flex; }
}

/* Ekran startowy — to samo logo co na ekranie logowania. */
.initial-loader__logo { display: block; width: auto; height: 44px; }

/* ========================================================================== */
/* Marka w całej aplikacji                                                    */
/* ========================================================================== */

/**
 * styles.css jest zbudowany na tokenach, więc marka wchodzi przez podmianę
 * zmiennych, a nie przez przepisywanie reguł. Ten arkusz ładuje się po
 * styles.css, więc te wartości wygrywają.
 *
 * Role tokenów sprawdzone przed podmianą — to istotne, bo część z nich pełni
 * podwójną funkcję. --ink-950 jest jednocześnie kolorem tekstu i ciemnym tłem
 * menu bocznego, a --lime i --mint są TŁEM pod ciemnym tekstem, nie kolorem
 * tekstu. Dlatego zastępniki muszą zachować tę samą jasność, inaczej rozsypie
 * się kontrast.
 */
:root {
  /* Neutralne — ta sama drabinka jasności co wcześniej, ale w tonacji navy. */
  --ink-950: #091133;
  --ink-900: #141d3f;
  --ink-800: #232c52;
  --ink-700: #30385a;
  --ink-600: #475467;
  --ink-500: #7881a9;
  --ink-300: #aeb7cf;
  --ink-200: #dde3f0;
  --ink-100: #eef2f9;

  /* Powierzchnie: kremowe tła ustępują bieli i błękitowi z woohoo.pl. */
  --paper: #ffffff;
  --surface: #ffffff;
  --canvas: #f6f9fc;

  /* Akcenty. --teal jest kolorem działań i odnośników (11 użyć jako tekst),
     więc musi mieć kontrast na bieli — #0049FF daje 6,1:1. */
  --teal: #0049ff;
  --teal-dark: #0038c9;

  /* --mint i --lime to jasne tła pod ciemnym tekstem oraz akcenty na navy. */
  --mint: #c7d7ff;
  --mint-soft: #eaf0ff;
  --lime: #c7d7ff;

  /* Pomarańcz i błękit stalowy z palety woohoo.pl zamiast koralu i liliowego. */
  --coral: #f59e14;
  --coral-soft: #fff1dc;
  --sun: #f59e14;
  --sun-soft: #fff4e0;
  --lilac: #7881a9;
  --lilac-soft: #eef2f9;
  --blue: #0049ff;
  /* Tokeny wymagane przez fundament (brak = zepsute elementy). --blue-dark: hover
     .button--primary (bez niego tło znika i biały tekst jest niewidoczny na hover). */
  --blue-dark: #0038c9;
  --pale: #c7d7ff;
  --pale-soft: #eaf0ff;
  --orange: #a3520a;
  --orange-soft: #fff2e0;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Kolory statusów zostają ciemne — służą jako tekst na jasnych tłach. */
  --danger: #c0362b;
  --danger-soft: #fdeceb;
  --success: #2f7d32;
  --success-soft: #e8f5e9;
  --warning: #8a5209;
  --warning-soft: #fff4e0;
  --info: #0049ff;
  --info-soft: #eaf0ff;
}

/**
 * Wyjątki od podmiany tokenów.
 *
 * Główne działanie w aplikacji zasługuje na pełny kolor marki, a nie na jego
 * pastelową wersję. Zmieniamy tło i kolor tekstu razem, żeby kontrast został
 * zachowany (biały na #0049FF to 6,1:1).
 */
.clock-button {
  background: var(--wh-blue);
  color: #fff;
}

.clock-button:hover:not(:disabled) { background: var(--wh-blue-hover); }

.mobile-clock {
  background: var(--wh-blue);
  color: #fff;
}

/* Logo w menu bocznym: navy tło, więc wariant jasny. */
.sidebar-brand { text-decoration: none; }
.sidebar-brand .auth-brand__logo { height: 32px; }

.sidebar-brand .auth-brand__product {
  padding: 3px 9px;
  font-size: .66rem;
}

/**
 * Kolory wpisane w regułach na sztywno.
 *
 * Podmiana tokenów ich nie obejmuje, bo to gotowe wartości rgba() — poświaty,
 * pierścienie fokusu i cienie w starej zieleni. Zostawione, świeciłyby na
 * zielono w granatowym interfejsie.
 */

/* Pierścienie fokusu i cienie działań — z zieleni na błękit marki. */
:focus-visible { outline-color: rgba(0, 73, 255, .35); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(0, 73, 255, .14); }
.switch-row input:focus-visible + .switch { outline-color: rgba(0, 73, 255, .3); }
.button--primary { box-shadow: 0 8px 20px rgba(0, 73, 255, .20); }
.button--primary:hover:not(:disabled) { box-shadow: 0 10px 24px rgba(0, 73, 255, .28); }

/* Menu boczne i pulpit: poświaty w tonacji marki. */
.nav-item.is-active { background: rgba(199, 215, 255, .14); }
.sidebar::before { background: rgba(0, 73, 255, .12); }
.clock-card__glow { border-color: rgba(199, 215, 255, .18); }
.pulse-dot { box-shadow: 0 0 0 5px rgba(199, 215, 255, .18); }

/* Pasek nawigacji na telefonie — tło w granacie zamiast ciemnej zieleni. */
.mobile-nav { background: rgba(9, 17, 51, .96); }

/* Ostatnie poświaty: kropka powiadomienia i kręgi wokół zegara. */
.nav-dot { box-shadow: 0 0 0 4px rgba(199, 215, 255, .16); }

.clock-card__glow {
  box-shadow: 0 0 0 55px rgba(199, 215, 255, .04), 0 0 0 110px rgba(199, 215, 255, .022);
}