/* ============================================================================================
   Ekran logowania (layouts/auth.php): ciemny motyw — z lewej „System ERP” i lista funkcji, pośrodku zdjęcie żarówki (własna kolumna),
   z prawej karta z formularzem. Style „dark” karty dotyczą też pozostałych widoków logowania (2FA, reset hasła, rejestracja urządzenia),
   które używają jasnych klas Tailwind — przekolorowujemy je tylko wewnątrz .auth-card.
   ============================================================================================ */

:root { --gold: #facc15; --gold-d: #eab308; }

body.auth-body {
    margin: 0; min-height: 100vh; color: #fff; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(900px 600px at 38% 55%, rgba(250, 204, 21, .10), transparent 60%),
        radial-gradient(1200px 800px at 100% 0%, rgba(90, 70, 224, .10), transparent 55%),
        linear-gradient(135deg, #101116, #07080b 60%);
    overflow-x: hidden;
}

.auth-shell { position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 600px); gap: 2rem; align-items: center; padding: 3rem clamp(1rem, 4vw, 5rem); max-width: 1600px; margin: 0 auto; }

/* ---------------------------------------------------------------- lewa strona */
.auth-hero { position: relative; z-index: 2; max-width: 440px; }
.auth-brand { display: flex; align-items: center; gap: 16px; }
.auth-brand-name { font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.auth-brand-name span { color: var(--gold); }
.auth-brand-sub { margin-top: 10px; font-size: .8rem; letter-spacing: .32em; text-transform: lowercase; color: #cbd5e1; }
/* oba wiersze nagłówka zawsze w jednej linii (white-space: nowrap) — rozmiar czcionki skaluje się z szerokością ekranu, żeby się mieściły */
.auth-headline { margin-top: 3.2rem; font-size: clamp(1.3rem, 2.1vw, 2rem); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }
.auth-headline em { display: block; font-style: normal; color: var(--gold); }
.auth-features { margin: 2.4rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.35rem; }
.auth-features li { display: flex; align-items: center; gap: 1.1rem; }
.auth-features svg { width: 38px; height: 38px; flex: none; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.auth-features strong { display: block; font-size: 1.05rem; font-weight: 600; }
.auth-features small { display: block; margin-top: 2px; font-size: .88rem; color: #94a3b8; }
.auth-script { margin-top: 2.6rem; display: inline-block; font-family: 'Segoe Script', 'Brush Script MT', 'Lucida Handwriting', cursive; font-style: italic; font-size: 1.7rem; color: var(--gold); transform: rotate(-4deg); }
.auth-script::after { content: ""; display: block; height: 3px; margin-top: 6px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--gold) 15%, var(--gold)); transform: skewX(-18deg); }

/* ---------------------------------------------------------------- scena: karta + żarówka pod nią
   Żarówka (zdjęcie z przezroczystym tłem; świeci tylko środek obrazu, ok. 46% jego szerokości) jest wycentrowana na lewej krawędzi karty,
   więc jej połowa jest schowana POD kartą (z-index niżej), a druga połowa wystaje między tekstem a kartą. */
.auth-stage { position: relative; z-index: 1; width: 100%; }
.auth-bulb { --bulb-w: clamp(430px, min(47vw, 112vh), 850px); position: absolute; z-index: 0; left: 0; top: 50%; width: var(--bulb-w); transform: translate(-50%, -50%); pointer-events: none; }
.auth-bulb img { display: block; width: 100%; height: auto; animation: auth-glow 4.6s ease-in-out infinite; }
@keyframes auth-glow { 0%, 100% { opacity: .86; filter: brightness(.96); } 50% { opacity: 1; filter: brightness(1.06); } }

/* ---------------------------------------------------------------- karta */
.auth-card {
    position: relative; z-index: 1; width: 100%; padding: 3.2rem 3.2rem 2.4rem; border-radius: 24px;
    background: linear-gradient(180deg, rgba(27, 28, 34, .985), rgba(19, 20, 25, .99)); border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.auth-logo { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 2.2rem; }
.auth-logo img { width: 56px; height: 56px; object-fit: contain; }
.auth-logo .name { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.auth-logo .tag { display: block; margin-top: 5px; font-size: .68rem; letter-spacing: .3em; color: #9ca3af; font-weight: 500; }
.auth-foot { margin-top: 2rem; text-align: center; font-size: .82rem; color: #6b7280; }
.auth-foot a { color: #9ca3af; text-decoration: none; }
.auth-foot a:hover { color: #fff; }

/* ---------------------------------------------------------------- formularz logowania (nowy widok) */
.auth-title { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.auth-lead { margin-top: .5rem; font-size: 1.02rem; color: #9ca3af; }
.auth-field { position: relative; margin-top: 1.3rem; }
.auth-field .ico { position: absolute; left: 17px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); stroke: #cbd5e1; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.auth-field input {
    width: 100%; box-sizing: border-box; height: 62px; padding: 0 52px 0 52px; border-radius: 14px; font-size: 1.05rem; color: #fff;
    background: rgba(255, 255, 255, .025); border: 1px solid #3a3f4b; outline: none; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.auth-field input::placeholder { color: #8b93a3; }
.auth-field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(250, 204, 21, .16); background: rgba(255, 255, 255, .04); }
.auth-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: #cbd5e1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.auth-eye:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.auth-eye svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.auth-row { margin-top: 1.1rem; display: flex; justify-content: flex-end; }
.auth-row a { font-size: .92rem; font-weight: 600; color: var(--gold); text-decoration: none; }
.auth-row a:hover { text-decoration: underline; }
.auth-submit {
    margin-top: 1.6rem; width: 100%; height: 62px; border: 0; border-radius: 12px; cursor: pointer; font-size: 1.1rem; font-weight: 700; color: #111827;
    background: linear-gradient(180deg, #fbd22a, #f2bb08); box-shadow: 0 10px 24px -10px rgba(250, 204, 21, .55); transition: transform .15s, box-shadow .15s, filter .15s;
}
.auth-submit:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(250, 204, 21, .7); }
.auth-submit:active { transform: translateY(0); }

/* ---------------------------------------------------------------- jasne klasy z pozostałych widoków → ciemna karta */
.auth-card .text-slate-900, .auth-card .text-slate-800 { color: #fff; }
.auth-card .text-slate-700 { color: #e5e7eb; }
.auth-card .text-slate-600, .auth-card .text-slate-500 { color: #9ca3af; }
.auth-card .text-slate-400 { color: #7b8392; }
.auth-card .hover\:text-slate-800:hover, .auth-card .hover\:text-slate-600:hover, .auth-card .hover\:text-slate-700:hover { color: #fff; }
.auth-card .text-brand-600, .auth-card .text-brand-700, .auth-card .hover\:text-brand-700:hover { color: var(--gold); }
.auth-card input[type="text"], .auth-card input[type="email"], .auth-card input[type="password"], .auth-card input:not([type]) {
    background: rgba(255, 255, 255, .025); border: 1px solid #3a3f4b; color: #fff;
}
.auth-card input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(250, 204, 21, .16); outline: none; }
.auth-card .bg-brand-600 { background: linear-gradient(180deg, #fbd22a, #f2bb08); color: #111827; box-shadow: 0 10px 24px -10px rgba(250, 204, 21, .55); }
.auth-card .bg-brand-600:hover, .auth-card .hover\:bg-brand-700:hover { background: linear-gradient(180deg, #fcd93f, #f5c21a); }
.auth-card .text-white { color: inherit; }
.auth-card .bg-brand-600.text-white, .auth-card a.bg-brand-600 { color: #111827; }
.auth-card .bg-slate-50, .auth-card .bg-slate-50\/60 { background: rgba(255, 255, 255, .04); }
.auth-card .border-slate-200 { border-color: rgba(255, 255, 255, .12); }
.auth-card .bg-emerald-50 { background: rgba(16, 185, 129, .12); } .auth-card .text-emerald-700 { color: #6ee7b7; } .auth-card .border-emerald-200 { border-color: rgba(16, 185, 129, .35); }
.auth-card .bg-red-50 { background: rgba(239, 68, 68, .12); } .auth-card .text-red-700, .auth-card .text-red-600 { color: #fca5a5; } .auth-card .border-red-200 { border-color: rgba(239, 68, 68, .35); }
.auth-card .bg-amber-50 { background: rgba(245, 158, 11, .12); } .auth-card .text-amber-800 { color: #fcd34d; } .auth-card .border-amber-200 { border-color: rgba(245, 158, 11, .35); }
.auth-card code { color: #fcd34d; }
.auth-card details { border-color: rgba(255, 255, 255, .12); }

/* ---------------------------------------------------------------- mniejsze ekrany */
/* średnie ekrany: węższa karta i mniejsza żarówka, żeby jej lewa połowa nie podchodziła pod tekst */
@media (max-width: 1300px) {
    .auth-shell { grid-template-columns: minmax(0, 1fr) minmax(440px, 560px); }
    .auth-bulb { --bulb-w: clamp(380px, min(40vw, 112vh), 780px); }
}
@media (max-width: 1100px) {
    .auth-shell { grid-template-columns: 1fr; justify-items: center; padding: 2rem 1rem 2.5rem; row-gap: 0; }
    .auth-hero { max-width: 560px; width: 100%; text-align: center; }
    .auth-headline, .auth-features, .auth-script { display: none; }
    .auth-brand { justify-content: center; }
    .auth-brand-sub { padding-left: 0; text-align: center; }
    /* nad kartą (tylko okno logowania) delikatnie widoczna GÓRA żarówki: reszta schowana pod kartą */
    .auth-stage { max-width: 600px; margin-top: 7.5rem; }
    .auth-bulb { --bulb-w: min(98vw, 500px); left: 50%; top: 0; transform: translate(-50%, -43%); opacity: .75;
        -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 26%); mask-image: linear-gradient(to bottom, transparent 8%, #000 26%); }
}
@media (max-width: 520px) {
    .auth-card { padding: 2.2rem 1.5rem 1.8rem; }
    .auth-stage { margin-top: 6.5rem; }
    .auth-field input { height: 58px; }
    .auth-submit { height: 58px; }
    .auth-brand-sub { letter-spacing: .22em; }
}
@media (prefers-reduced-motion: reduce) { .auth-bulb img { animation: none; } }