/* ============================================================
   login.css — ULCrew Service prijava (S97 brand reset)

   Split layout:
   - Lijevo: hero s Pine gradient + tagline + 4 feature kartice
   - Desno: forma za prijavu

   Design tokens: docs/BAZAZNANJA/30-design-tokens.md
   ============================================================ */

/* ── Shell ─────────────────────────────────────────────────── */
.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 480px;
    background: var(--surface);
}

@media (max-width: 980px) {
    .login-shell {
        grid-template-columns: 1fr;
    }
    .login-hero {
        display: none;
    }
}

/* ── Hero (lijevo) ─────────────────────────────────────────── */
.login-hero {
    background:
        radial-gradient(circle at 100% 0%, rgba(234,88,12,.08), transparent 50%),
        linear-gradient(135deg, var(--p-700), var(--p-900));
    color: #fff;
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.login-hero::after {
    content: '';
    position: absolute;
    bottom: -120px;
    left: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
    pointer-events: none;
}

.hero-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 1;
}

.hero-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
}

.hero-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.hero-brand-text strong {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hero-brand-text span {
    font-size: 11px;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

.hero-message {
    z-index: 1;
    /* Pomak prema sredini: 6% sirine od lijevog ruba (bilo 10vw — smanjeno da lanac
       dobije prostor). Hero panel već ima padding-left 56px, pa oduzmi taj da dobiješ
       apsolutni položaj. Sirinu vise NE ogranicavamo ovdje: tekst je ogranicen u
       .hero-tekst, a lanac smije uzeti punu sirinu kolone. */
    margin-left: calc(6vw - 56px);
}

/* Duljina retka teksta — lanac ispod nije vezan na ovu sirinu. */
.hero-tekst {
    max-width: 600px;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(234,88,12,.18);
    color: #fed7aa;
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 28px;
    border: 1px solid rgba(234,88,12,.3);
}

.hero-headline {
    /* Naslov je slozen u DVA retka (<br> u Login.razor): "Od upita do naplate —" /
       "bez nepotrebnih koraka." Kolona naslova je ~600px, pa 72px lomi svaki dio jos
       jednom (4 retka umjesto 2). Velicina se skalira sirinom i staje u dva retka. */
    font-size: clamp(34px, 3.1vw, 52px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
    color: #fff;
    outline: none;
    text-wrap: balance;
}

.hero-headline .hero-accent {
    color: #fdba74;
}

.hero-sub {
    font-size: 19px;
    opacity: 0.85;
    line-height: 1.55;
    max-width: 520px;
}

.hero-feats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    z-index: 1;
}

/* Cetiri obecanja: naslov je obecanje, podnaslov dokaz. Tekst je duzi nego prije,
   pa ikona ide uz VRH retka (ne po sredini) i naslov nosi vecu tezinu. */
.hero-feat {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    font-size: 13px;
}

.hero-feat > i {
    width: 28px;
    height: 28px;
    background: rgba(4,120,87,.4);
    color: #a7f3d0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.hero-feat strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 3px;
}

.hero-feat span {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.78;
}

/* ── Form panel (desno) ────────────────────────────────────── */
.login-form-wrap {
    background: #fff;
    padding: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form-inner {
    width: 100%;
    max-width: 360px;
}

.login-h2 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.login-sub {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 28px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-label {
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text-primary);
}

.login-field .dxbl-text-edit {
    width: 100%;
}

.login-error {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px var(--sp-3);
    background: var(--danger-bg);
    color: var(--danger);
    font-size: var(--fs-md);
    border-radius: var(--radius-default);
    border: 1px solid var(--danger-border);
}

.login-error i {
    font-size: 16px;
}

.login-btn {
    width: 100%;
    justify-content: center;
    padding: 11px;
    font-size: var(--fs-lg);
    margin-top: var(--sp-2);
    font-weight: 600;
}

/* DEV-only login as block */
.login-dev {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px dashed var(--gray-300, #d1d5db);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.login-dev-label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.login-btn-dev {
    margin-top: var(--sp-1);
}

.login-dev-sort {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.login-dev-sort-combo {
    width: 130px;
}

/* Mobile app download */
.login-mobile-link {
    text-align: center;
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--surface-border);
}

.btn-mobile-download {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-secondary);
    font-size: var(--fs-md);
    text-decoration: none;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-default);
    transition: var(--transition);
}

.btn-mobile-download i {
    font-size: 18px;
}

.btn-mobile-download:hover {
    background: var(--p-50);
    color: var(--brand-primary);
}

.login-footer {
    text-align: center;
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    opacity: 0.7;
}

/* ============================================================
   S215 — HOMEPAGE REDESIGN (.login-marketing modifier)

   Mapa:
   - Lijevi panel (login-hero) — Pine gradient, postojeći layout reuse-an
     iz demo.css preko `.login-marketing` selektora (vidi demo.css §S124)
   - Desni panel (login-form-wrap) — Pine gradient (zelena umjesto bijele)
     - Gornji dio (.marketing-info-section) — bijeli tekst na zelenoj,
       prikazuje opis odabranog feature-a iz tree-a
     - Donji dio (.marketing-login-card) — bijela "kartica" s shadow-om,
       sadrži login formu + DEV widget + APK link + footer
   - Login button (.login-btn-orange) — narančasti override DX Primary stila
   ============================================================ */

/* Desni panel — Pine zelena pozadina (suptilan vertikalni gradient) */
.login-shell.login-marketing .login-form-wrap {
    background: linear-gradient(180deg, var(--p-700), var(--p-800));
    color: #fff;
    padding: 0;
    overflow-y: auto;
}

/* Gornji dio: opis odabranog featurea (bijeli tekst na zelenoj) */
.marketing-info-section {
    flex: 1;
    min-height: 220px;
    padding: 40px 36px 28px;
    display: flex;
    flex-direction: column;
    color: #fff;
}

/* Placeholder kad ništa nije odabrano */
.marketing-info-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding: 24px 16px;
}

.marketing-info-empty > i {
    font-size: 2.4rem;
    color: rgba(255,255,255,.45);
}

.marketing-info-empty-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: #fff;
}

.marketing-info-empty-sub {
    font-size: var(--fs-md);
    color: rgba(255,255,255,.75);
    line-height: 1.55;
    max-width: 280px;
}

/* Detalji odabranog featurea */
.marketing-info-icon {
    font-size: 2rem;
    color: #fdba74; /* Orange 300 — accent na zelenoj */
    margin-bottom: 14px;
    display: block;
}

.marketing-info-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.marketing-info-desc {
    font-size: var(--fs-md);
    color: rgba(255,255,255,.88);
    line-height: 1.6;
    margin-bottom: 16px;
}

.marketing-info-checks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.marketing-info-checks li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--fs-md);
    color: rgba(255,255,255,.92);
    line-height: 1.45;
}

.marketing-info-checks li i {
    color: #a7f3d0; /* Pine 200 — light green check */
    font-size: 0.95rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

/* Donji dio: bijela kartica s login formom (frosted-style) */
.marketing-login-card {
    flex-shrink: 0;
    margin: 0 24px 24px;
    padding: 28px 28px 22px;
    background: rgba(255,255,255,.97);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
}

.marketing-login-card .login-h2 {
    color: var(--text-primary);
    margin-bottom: 4px;
}

.marketing-login-card .login-sub {
    margin-bottom: 18px;
}

/* Narančasti login button — override DX Primary stila samo za login.
   Specifičnost: .marketing-login-card .login-btn-orange.dxbl-btn da
   nadjača Pine primary token. Hover ide na Orange 700. */
.marketing-login-card .login-btn-orange,
.login-btn-orange.dxbl-btn,
.login-btn-orange.dxbl-btn-primary {
    background: var(--brand-accent, #ea580c) !important;
    border-color: var(--brand-accent, #ea580c) !important;
    color: #fff !important;
}

.marketing-login-card .login-btn-orange:hover,
.login-btn-orange.dxbl-btn:hover,
.login-btn-orange.dxbl-btn-primary:hover {
    background: var(--a-700, #c2410c) !important;
    border-color: var(--a-700, #c2410c) !important;
    color: #fff !important;
}

.marketing-login-card .login-btn-orange:focus-visible,
.login-btn-orange.dxbl-btn:focus-visible {
    outline: 2px solid var(--a-border, #fdba74);
    outline-offset: 2px;
}

/* DEV widget unutar bijele kartice — granica usklađena s ostatkom */
.marketing-login-card .login-dev {
    border-top-color: var(--gray-200, #e5e7eb);
}

/* APK link i footer — boje malo prigušene da ne zauzimaju previše pažnje */
.marketing-login-card .login-mobile-link {
    border-top-color: var(--gray-200, #e5e7eb);
}

.marketing-login-card .login-footer {
    color: var(--text-muted);
}

/* ── Stranica staje u JEDAN EKRAN ───────────────────────────────────────
   Katalog ima 13 kategorija; kad se stablo slobodno rasteze, zelena kolona naraste
   na ~2.5 ekrana. Tada stranica skrola, a hero tekst + lanac padnu na sredinu TE
   visine (na ekranu prazno zeleno), dok 4 panela i forma za prijavu odu ispod ruba.
   Zato: shell je fiksno visok koliko i ekran, a JEDINO stablo skrola unutar sebe.
   `min-height: 0` na svakom flex pretku je nuzan — bez njega flex item ne smije
   biti manji od svog sadrzaja i skrol se nikad ne pojavi na stablu, nego na stranici. */
.login-shell.login-marketing {
    height: 100dvh;
    overflow: hidden;
}

.login-shell.login-marketing .login-hero,
.login-shell.login-marketing .demo-hero-top,
.login-shell.login-marketing .demo-hero-content,
.login-shell.login-marketing .demo-hero-tree-col {
    min-height: 0;
}

/* Desni panel (detalji + forma) skrola sam ako je nizak ekran. */
.login-shell.login-marketing .login-form-wrap {
    min-height: 0;
    overflow-y: auto;
}

/* ── Feature tree — JEDAN stupac sklopivih kategorija ───────────────────
   Kategorije su sklopive, pa je popis nizak i ne treba mu drugi stupac. U dva uska
   stupca nazivi su se lomili u dva retka; u jednom stanu u redak.
   Klizac je na ovom spremniku; naslov "Sto sustav radi" iznad ostaje fiksan. */
.login-shell.login-marketing .marketing-tree-grid {
    display: block;
    padding: 4px 28px 10px 28px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Zatvorene kategorije stoje jedna do druge; otvorena dobiva zraka ispod. */
.login-shell.login-marketing .marketing-tree-cat {
    display: block;
    margin-bottom: 2px;
}

.login-shell.login-marketing .marketing-tree-cat.otvorena {
    margin-bottom: 10px;
}

/* Naslov kategorije je GUMB: klik otvara/zatvara njezine znacajke. Otvorena ostaje
   otvorena — ni klik na znacajku ni otvaranje druge kategorije je ne zatvaraju. */
.login-shell.login-marketing .demo-tree-cat-hdr {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: 0;
    padding: 5px 6px 5px 4px;
    border-radius: 6px;
    cursor: pointer;
    color: #fdba74;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

.login-shell.login-marketing .demo-tree-cat-hdr:hover {
    background: rgba(255,255,255,.07);
}

/* Otvorena kategorija NEMA vlastitu pozadinu — ostaje zelena kao i prozor.
   Da je otvorena, kaze zakrenuta strelica, ne obojan blok. */
.login-shell.login-marketing .demo-tree-cat-hdr .kat-strelica {
    flex: 0 0 auto;
    font-size: 9px;
    color: #8faca0;
    transition: transform 0.18s ease;
}

.login-shell.login-marketing .marketing-tree-cat.otvorena .kat-strelica {
    transform: rotate(90deg);
}

/* Naziv kategorije u JEDAN redak — u jednom stupcu ima mjesta, pa lom ne treba. */
.login-shell.login-marketing .demo-tree-cat-hdr .kat-ime {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.login-shell.login-marketing .demo-tree-cat-hdr .cat-icon {
    flex: 0 0 auto;
    font-size: 14px;
}

.login-shell.login-marketing .demo-tree-items {
    padding: 0;
}

.login-shell.login-marketing .demo-tree-item {
    display: block;
    /* 3px umjesto 4px okomito: 57 znacajki x 2px = ~60px ustede, sto katalog od
       14 kategorija drzi unutar ekrana bez klizaca. */
    padding: 3px 8px 3px 24px;
    margin-left: 0;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255,255,255,.78);
    border-left: none;
    border-radius: 4px;
    text-align: left;
}

.login-shell.login-marketing .demo-tree-item:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.login-shell.login-marketing .demo-tree-item.active {
    background: rgba(255,255,255,.16);
    color: #fff;
    font-weight: 600;
    border-left: 2px solid #fdba74;
    padding-left: 22px;
}

/* Responsive — kad se hero sakrije na mobile, desni panel pokriva sve */
@media (max-width: 980px) {
    /* Na mobitelu se hero skriva, ostaje samo forma — vrati normalan skrol stranice
       (jedan-ekran pravilo gore vrijedi samo za desktop prikaz s hero panelom). */
    .login-shell.login-marketing {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }
    .login-shell.login-marketing .login-form-wrap {
        background: var(--surface);
        color: var(--text-primary);
        padding: 24px 16px;
        overflow-y: visible;
    }
    .marketing-info-section {
        display: none;
    }
    .marketing-login-card {
        background: var(--surface);
        box-shadow: none;
        margin: 0;
        padding: 0;
    }
}


/* ── Hero lanac (HeroLanac.razor) ───────────────────────────────────────────
   Slika dvostrukosti sustava: zajednicko deblo (zahtjev -> nalog -> teren), dva
   dokazna kraka (servis = zapisnik, gradjevina = dokaznica + situacija), pa opet
   zajednicko (racun -> naplata). Klik na znacajku u katalogu istakne stanicu i
   osvijetli njezin krak.                                                          */
.hero-lanac {
    margin-top: 34px;
    /* Lanac uzima punu sirinu hero kolone + jos 40px u njezin desni padding (tekst je
       uzi — vidi .hero-tekst). 11 cvorova s labelama treba svaki piksel. Gornja granica
       960px: iznad toga lanac izgleda razvuceno. NE smije prijeci u stablo desno —
       zato se veze na sirinu kolone, a ne na vw. */
    width: calc(100% + 40px);
    min-width: 520px;
    max-width: 960px;
}

.hero-lanac svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* ── linije ── */
.hero-lanac .lanac-linija {
    fill: none;
    stroke-width: 1.5;
    /* miter + butt: lomovi ostaju PRAVI KUTEVI (zaobljeni linejoin bi ih omeksao). */
    stroke-linejoin: miter;
    stroke-linecap: butt;
}

/* Sve linije lanca — deblo i oba kraka — su ISTA linija: ista debljina, ista boja,
   bez crtkanja i bez gradijenta. Vertikale se razlikuju polozajem i natpisom, ne
   stilom crte. */
.hero-lanac .lanac-deblo,
.hero-lanac .grana-servis,
.hero-lanac .grana-gradjevina {
    stroke: #6ee7b7;
    stroke-opacity: 0.65;
}

/* ── okvir posla: klijent / projekt / ugovor ── */
.hero-lanac .okvir-linija {
    fill: none;
    stroke: #a7f3d0;
    stroke-opacity: 0.3;
    stroke-width: 1.2;
}

.hero-lanac .okvir-cvor circle {
    fill: #064e3b;
    stroke: #a7f3d0;
    stroke-opacity: 0.75;
    stroke-width: 1.5;
}

.hero-lanac .okvir-cvor text {
    fill: #a7c0b4;
    font-size: 13px;
    font-weight: 600;
}

/* ── iskre ── */
.hero-lanac .lanac-iskra {
    fill: #fff;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}

/* ── stanice ── */
.hero-lanac .lanac-halo {
    fill: none;
    stroke: #6ee7b7;
    stroke-opacity: 0;
    stroke-width: 1.5;
    transition: stroke-opacity 0.25s ease;
}

.hero-lanac .lanac-tocka {
    fill: #064e3b;
    stroke: #6ee7b7;
    stroke-width: 2;
    transition: fill 0.25s ease, stroke 0.25s ease;
}

.hero-lanac .lanac-naziv {
    fill: #e8f2ed;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: fill 0.25s ease;
}

.hero-lanac .lanac-podnaziv {
    fill: #8faca0;
    font-size: 12px;
    font-weight: 500;
    transition: fill 0.25s ease;
}

/* ── oznake vertikala ── */
.hero-lanac .lanac-traka {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.hero-lanac .traka-servis,
.hero-lanac .traka-gradjevina {
    fill: #8faca0;
}

/* ── istaknuta stanica ──
   Dijagram je jednobojan, pa se isticanje radi SVJETLINOM (ispunjena tocka + prsten
   + bijeli naziv), ne drugom bojom. */
.hero-lanac .lanac-stanica.aktivna .lanac-tocka {
    fill: #6ee7b7;
    stroke: #fff;
}

.hero-lanac .lanac-stanica.aktivna .lanac-halo {
    stroke: #6ee7b7;
    stroke-opacity: 0.55;
}

.hero-lanac .lanac-stanica.aktivna .lanac-naziv {
    fill: #fff;
}

.hero-lanac .lanac-stanica.aktivna .lanac-podnaziv {
    fill: #e8f2ed;
}

/* Dok je stanica istaknuta, ostale se povuku u drugi plan. */
.hero-lanac-aktivan .lanac-stanica:not(.aktivna) {
    opacity: 0.45;
    transition: opacity 0.25s ease;
}

/* ── osvijetljen krak: suprotna vertikala se prigusi ──
   Selektori NAMJERNO nose i .lanac-stanica: pravilo za neistaknute stanice gore
   (.hero-lanac-aktivan .lanac-stanica:not(.aktivna)) ima tri klase, pa bi inace
   pobijedilo specifičnošću i prigušenje kraka se ne bi ni vidjelo (0.45 umjesto 0.15). */
.hero-lanac-servis .grana-gradjevina,
.hero-lanac-servis .lanac-stanica.stanica-gradjevina,
.hero-lanac-servis .traka-gradjevina,
.hero-lanac-servis .iskra-gradjevina {
    opacity: 0.15;
}

.hero-lanac-gradjevina .grana-servis,
.hero-lanac-gradjevina .lanac-stanica.stanica-servis,
.hero-lanac-gradjevina .traka-servis,
.hero-lanac-gradjevina .iskra-servis {
    opacity: 0.15;
}

/* Stanice vlastitog kraka ostaju citljive iako nisu one istaknute. */
.hero-lanac-servis .lanac-stanica.stanica-servis,
.hero-lanac-gradjevina .lanac-stanica.stanica-gradjevina {
    opacity: 1;
}

.hero-lanac .grana,
.hero-lanac .lanac-traka,
.hero-lanac .lanac-iskra,
.hero-lanac .lanac-stanica {
    transition: opacity 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .hero-lanac .lanac-iskra { display: none; }
}