/* ══════════════════════════════════════════════════════════════
   SND POS — Login page
   One unified promotional page: a wide promo column with the
   product showcase, and a login card floating over the SAME
   background (not a separate white panel).

   Layout is a 2×2 grid — promo | login on the first row, and a
   full-bleed category footer spanning both columns on the second,
   so the dark band never stops in dead space.

   Colour/type tokens come from assets/css/brand.css — this file
   must not hardcode brand colours.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Shell ─────────────────────────────────────────────────── */
/* Belt-and-braces: the page must never scroll sideways at any width. */
.login-body{overflow-x:hidden}
.login-page{
    --promo-pad-x:clamp(20px,3.2vw,52px);
    --promo-pad-y:clamp(14px,2.2vh,28px);
    min-height:100vh;min-height:100dvh;
    display:grid;
    grid-template-columns:minmax(0,62fr) minmax(0,38fr);
    grid-template-rows:minmax(0,1fr) auto;
    background:linear-gradient(155deg,#FFFFFF 0%,var(--bg) 44%,#EDF2FD 100%);
    overflow:hidden;
    position:relative;
}
.promo{grid-column:1;grid-row:1}
.auth {grid-column:2;grid-row:1}
.page-footer{grid-column:1 / -1;grid-row:2}

/* Desktop is a fixed viewport: nothing scrolls in either direction. */
@media (min-width:1200px){
    html.login-html,body.login-body{height:100%;overflow:hidden}
    .login-page{height:100vh;height:100dvh}
}

/* ── 2. Decorative background ─────────────────────────────────── */
/* Soft organic sweeps rather than hard circles. Purely visual. */
.login-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.login-deco span{position:absolute;display:block}
/* Blue sweep behind the login column */
.login-deco .deco--navy{
    top:-34vh;right:-16vw;width:74vw;height:104vh;
    background:radial-gradient(closest-side,rgba(13,71,161,.13),rgba(13,71,161,0) 78%);
    border-radius:46% 54% 38% 62%/52% 44% 56% 48%;
}
/* Warm glow behind the device showcase */
.login-deco .deco--gold{
    left:30%;top:24%;width:36vw;height:52vh;
    background:radial-gradient(closest-side,rgba(255,193,7,.34),rgba(255,193,7,0) 74%);
    border-radius:54% 46% 40% 60%/46% 58% 42% 54%;
}
/* Light wash, lower left */
.login-deco .deco--soft{
    left:-14vw;bottom:-20vh;width:52vw;height:58vh;
    background:radial-gradient(closest-side,rgba(21,101,192,.12),rgba(21,101,192,0) 76%);
}
/* Thin arc echoing the reference swoosh */
.login-deco .deco--arc{
    right:-20vw;top:-26vh;width:62vw;height:76vh;
    border:2.4vw solid rgba(21,101,192,.10);
    border-radius:50%;
}

/* ── 3. Promotional column ────────────────────────────────────── */
.promo{
    position:relative;z-index:1;
    display:flex;flex-direction:column;
    gap:clamp(9px,1.4vh,18px);
    padding:var(--promo-pad-y) clamp(12px,2vw,28px) 0 var(--promo-pad-x);
    min-width:0;min-height:0;
}

/* Brand lockup */
.promo__brand{display:flex;align-items:center;gap:14px;flex:none}
.promo__brand img{width:clamp(44px,4.2vw,64px);height:auto;object-fit:contain;flex:none}
.promo__brand .snd-wordmark{font-size:clamp(1.35rem,2.4vw,2.1rem)}
.promo__brand .snd-edition{font-size:clamp(.48rem,.7vw,.64rem);margin-top:5px}

/* Headline — clamp() keeps it whole at every width, never cropped. */
.promo__headline{
    flex:none;
    font-family:var(--font-heading);
    font-size:clamp(1.6rem,3.2vw,2.95rem);
    line-height:1.1;letter-spacing:-.03em;font-weight:800;
    color:var(--dark);margin:0;
}
.promo__headline span{display:block;color:var(--primary)}
.promo__headline .dot{font-style:normal;color:var(--accent)}

.promo__lede{
    flex:none;max-width:48ch;margin:0;color:var(--muted);
    font-size:clamp(.8rem,.98vw,.98rem);line-height:1.55;
}

/* Feature list + device showcase share this row. */
.promo__body{
    display:grid;grid-template-columns:minmax(196px,.74fr) minmax(0,1.26fr);
    gap:clamp(12px,1.8vw,26px);align-items:center;
    flex:1;min-height:0;
    /* Pull the row up so the space left by the headline isn't dead. */
    margin-top:clamp(-6px,-0.6vh,0px);
}

/* ── 4. Feature list ──────────────────────────────────────────── */
.feature-list{display:flex;flex-direction:column;gap:clamp(6px,1vh,13px);min-width:0}
.feature{display:flex;align-items:center;gap:11px;min-width:0}
.feature__icon{
    width:clamp(29px,2.4vw,36px);height:clamp(29px,2.4vw,36px);flex:none;
    display:grid;place-items:center;border-radius:10px;
    background:var(--primary-soft);color:var(--primary);
    font-size:clamp(.74rem,.88vw,.92rem);
    border:1px solid rgba(13,71,161,.14);
}
.feature__text{min-width:0}
.feature__text b{
    display:block;font-family:var(--font-heading);font-weight:700;
    font-size:clamp(.76rem,.9vw,.9rem);color:var(--dark);line-height:1.25;
}
.feature__text small{
    display:block;color:var(--muted);
    font-size:clamp(.64rem,.76vw,.76rem);line-height:1.3;
}

/* ── 5. Device showcase ───────────────────────────────────────── */
/* Drawn in CSS so the page ships no screenshot asset. To use real
   captures instead, see the note at the top of the view file. */
.devices{position:relative;width:100%;height:100%;min-height:0;display:grid;place-items:center}
/* Width-driven and capped by the column height. Sizing from height instead
   lets the aspect ratio compute a width that escapes the grid track and
   slides under the login card. */
.devices__stage{position:relative;width:100%;max-width:640px;aspect-ratio:16/10.6;max-height:100%}

.dv{position:absolute}
.dv__body{
    position:relative;width:100%;height:100%;
    background:linear-gradient(160deg,#2C3444,#151C29);
    border-radius:9px;padding:3.5%;
    box-shadow:0 18px 38px rgba(7,26,69,.26),0 2px 5px rgba(7,26,69,.18);
}
.dv__screen{width:100%;height:100%;background:#FFFFFF;border-radius:4px;overflow:hidden;display:flex}

/* Monitor + stand */
.dv--monitor{left:7%;top:0;width:75%;aspect-ratio:16/10}
.dv--monitor .dv__body{padding:2.6% 2.6% 3.4%;border-radius:10px}
.dv--monitor .dv__neck{
    position:absolute;left:50%;bottom:-9%;transform:translateX(-50%);
    width:11%;height:9%;background:linear-gradient(180deg,#2C3444,#1B2231);
}
.dv--monitor .dv__foot{
    position:absolute;left:50%;bottom:-12%;transform:translateX(-50%);
    width:30%;height:3.4%;background:linear-gradient(180deg,#2C3444,#141A26);
    border-radius:4px;box-shadow:0 10px 18px rgba(7,26,69,.20);
}
/* Tablet, lower-left overlap */
.dv--tablet{left:0;bottom:3%;width:31%;aspect-ratio:3/4.05;z-index:2}
.dv--tablet .dv__body{border-radius:8px;padding:4.5%}
/* Phone, lower-right overlap */
.dv--phone{right:2%;bottom:1%;width:16.5%;aspect-ratio:1/2.03;z-index:3}
.dv--phone .dv__body{border-radius:9px;padding:5.5% 4.5%}
.dv--phone .dv__body:before{
    content:"";position:absolute;left:50%;top:2.2%;transform:translateX(-50%);
    width:34%;height:1.5%;background:#0B111C;border-radius:3px;
}

/* ── Mini SND POS interface ───────────────────────────────────── */
.app{display:flex;width:100%;height:100%;min-width:0}
.app__side{
    width:21%;background:linear-gradient(180deg,var(--primary),#0A3478);
    padding:5% 4%;display:flex;flex-direction:column;gap:10%;
}
.app__logo{color:#FFFFFF;font-weight:800;font-size:.32em;letter-spacing:-.02em;line-height:1}
.app__logo em{font-style:normal;color:var(--accent)}
.app__side u{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.26);text-decoration:none}
.app__side u.on{background:var(--accent);width:88%}

.app__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3.5%;padding:4%;background:#F7F9FE}
.app__bar{display:flex;align-items:center;gap:4%}
.app__bar u{display:block;height:4px;width:26%;border-radius:2px;background:var(--dark);opacity:.75;text-decoration:none}
.app__bar s{display:block;height:4px;width:12%;margin-left:auto;border-radius:2px;background:var(--border);text-decoration:none}

.app__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:3%}
.app__kpis div{background:#FFFFFF;border:1px solid var(--border);border-radius:3px;padding:6% 5%}
.app__kpis u{display:block;height:2px;width:70%;border-radius:2px;background:var(--border);text-decoration:none}
.app__kpis b{display:block;height:5px;width:88%;border-radius:2px;background:var(--dark);opacity:.82;margin-top:22%}
.app__kpis i{display:block;height:2px;width:44%;border-radius:2px;background:var(--success);margin-top:16%}

.app__charts{display:grid;grid-template-columns:1.55fr 1fr;gap:3%;flex:1;min-height:0}
.chart{background:#FFFFFF;border:1px solid var(--border);border-radius:3px;padding:5%;display:flex;flex-direction:column;min-height:0}
.chart u{display:block;height:2px;width:40%;border-radius:2px;background:var(--border);margin-bottom:auto;text-decoration:none}
.chart__bars{display:flex;align-items:flex-end;gap:6%;height:72%}
.chart__bars span{flex:1;border-radius:1px 1px 0 0;background:var(--primary)}
.chart__bars span:nth-child(even){background:var(--accent)}
.chart__donut{
    width:62%;aspect-ratio:1;margin:auto;border-radius:50%;
    background:conic-gradient(var(--primary) 0 45%,var(--accent) 45% 75%,#CBD8F0 75% 100%);
    display:grid;place-items:center;
}
.chart__donut:after{content:"";width:52%;height:52%;border-radius:50%;background:#FFFFFF}

/* Tablet — checkout */
.pos{display:flex;flex-direction:column;width:100%;height:100%;background:#F7F9FE}
.pos__top{background:var(--primary);padding:6% 5%;display:flex;align-items:center;gap:5%}
.pos__top u{display:block;height:3px;width:44%;border-radius:2px;background:rgba(255,255,255,.85);text-decoration:none}
.pos__top s{display:block;height:3px;width:16%;margin-left:auto;border-radius:2px;background:var(--accent);text-decoration:none}
.pos__lines{flex:1;padding:5%;display:flex;flex-direction:column;gap:5%;min-height:0}
.pos__lines div{display:flex;align-items:center;gap:5%;background:#FFFFFF;border:1px solid var(--border);border-radius:3px;padding:4% 5%}
.pos__lines i{width:14%;aspect-ratio:1;border-radius:2px;background:var(--primary-soft);flex:none}
.pos__lines u{display:block;height:3px;flex:1;border-radius:2px;background:var(--border);text-decoration:none}
.pos__lines b{display:block;height:3px;width:18%;border-radius:2px;background:var(--dark);opacity:.7}
.pos__pay{padding:5%;background:#FFFFFF;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8%}
.pos__pay u{display:block;height:4px;width:56%;border-radius:2px;background:var(--dark);opacity:.8;text-decoration:none}
.pos__pay s{display:block;height:9%;min-height:7px;border-radius:3px;background:var(--primary);text-decoration:none}

/* Phone — reports */
.rep{display:flex;flex-direction:column;width:100%;height:100%;background:#F7F9FE}
.rep__top{background:var(--primary);padding:9% 7%;display:flex;flex-direction:column;gap:16%}
.rep__top u{display:block;height:2px;width:56%;border-radius:2px;background:rgba(255,255,255,.7);text-decoration:none}
.rep__top b{display:block;height:5px;width:78%;border-radius:2px;background:#FFFFFF}
.rep__body{flex:1;padding:7%;display:flex;flex-direction:column;gap:7%;min-height:0}
.rep__card{background:#FFFFFF;border:1px solid var(--border);border-radius:3px;padding:7%;display:flex;align-items:flex-end;gap:8%;flex:1;min-height:0}
.rep__card span{flex:1;border-radius:1px 1px 0 0;background:var(--primary)}
.rep__card span:nth-child(even){background:var(--accent)}
.rep__row{display:flex;flex-direction:column;gap:22%}
.rep__row u{display:block;height:2px;border-radius:2px;background:var(--border);text-decoration:none}
.rep__row u:nth-child(2){width:70%}

/* ── 6. Statistics bar ────────────────────────────────────────── */
.stats{
    flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(6px,1vw,18px);
    background:rgba(255,255,255,.88);backdrop-filter:blur(6px);
    border:1px solid var(--border);border-radius:16px;
    padding:clamp(8px,1.3vh,15px) clamp(10px,1.6vw,22px);
    margin-bottom:clamp(8px,1.4vh,16px);
    box-shadow:var(--shadow-sm);
}
.stat{display:flex;align-items:center;gap:9px;min-width:0}
.stat i{
    width:clamp(25px,2vw,33px);height:clamp(25px,2vw,33px);flex:none;
    display:grid;place-items:center;border-radius:9px;
    background:var(--primary-soft);color:var(--primary);font-size:clamp(.64rem,.78vw,.84rem);
}
.stat b{
    display:block;font-family:var(--font-heading);font-weight:800;
    font-size:clamp(.84rem,1.12vw,1.18rem);color:var(--dark);line-height:1.1;letter-spacing:-.02em;
}
.stat small{display:block;color:var(--muted);font-size:clamp(.58rem,.7vw,.73rem)}

/* ── 7. Full-bleed category footer ────────────────────────────── */
/* Spans both columns so the dark band resolves at the page edge
   instead of stopping against empty space. */
.page-footer{
    position:relative;z-index:1;
    background:linear-gradient(100deg,var(--primary) 0%,var(--primary) 58%,#0A3478 100%);
    padding:clamp(9px,1.5vh,15px) clamp(20px,3vw,52px);
    display:flex;align-items:center;gap:clamp(12px,2vw,30px);flex-wrap:wrap;
}
.page-footer h2{
    margin:0;color:#FFFFFF;font-family:var(--font-heading);font-weight:700;
    font-size:clamp(.72rem,.92vw,.94rem);white-space:nowrap;
}
.categories{display:flex;align-items:center;gap:clamp(10px,1.6vw,28px);flex-wrap:wrap}
.categories span{
    display:inline-flex;align-items:center;gap:7px;color:#FFFFFF;
    font-size:clamp(.62rem,.78vw,.78rem);font-weight:600;white-space:nowrap;
}
.categories i{color:var(--accent);font-size:clamp(.72rem,.86vw,.9rem)}
.page-footer__tag{
    margin-left:auto;color:rgba(255,255,255,.86);
    font-size:clamp(.62rem,.76vw,.78rem);white-space:nowrap;
}
.page-footer__tag b{color:var(--accent);font-weight:700}

/* ── 8. Login column + floating card ──────────────────────────── */
.auth{
    position:relative;z-index:2;
    display:flex;align-items:center;justify-content:center;
    padding:clamp(14px,2.2vh,30px) clamp(16px,2.4vw,40px);
    min-width:0;min-height:0;
}
.auth-card{
    width:min(410px,100%);
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:0 26px 70px rgba(7,26,69,.16),0 2px 6px rgba(7,26,69,.05);
    padding:clamp(18px,2.2vh,30px);
    max-height:100%;overflow-y:auto;
}
.auth-card__head{text-align:center;margin-bottom:clamp(10px,1.6vh,18px)}
.auth-card__head img{width:clamp(38px,3.2vw,52px);height:auto;object-fit:contain}
.auth-card__head .snd-wordmark{font-size:clamp(1.15rem,1.65vw,1.55rem);margin-top:7px}
.auth-card__head .snd-edition{font-size:clamp(.44rem,.58vw,.56rem);margin-top:4px}
.auth-card__title{
    font-family:var(--font-heading);font-weight:800;letter-spacing:-.02em;
    font-size:clamp(1.12rem,1.55vw,1.5rem);margin:clamp(7px,1.1vh,13px) 0 4px;color:var(--dark);
}
.auth-card__sub{color:var(--muted);font-size:clamp(.74rem,.86vw,.88rem);margin:0}

/* ── 9. Form ──────────────────────────────────────────────────── */
.field{margin-bottom:clamp(9px,1.3vh,14px)}
.field__label{
    display:block;font-weight:600;color:var(--dark);
    font-size:clamp(.72rem,.82vw,.82rem);margin-bottom:6px;
}
.field__control{display:flex;align-items:stretch;border:1.5px solid var(--border);border-radius:11px;background:#FFFFFF;transition:border-color .15s,box-shadow .15s}
.field__control:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(13,71,161,.12)}
.field__icon{
    width:44px;flex:none;display:grid;place-items:center;
    color:var(--primary);font-size:.88rem;border-right:1px solid var(--border);
}
.field__control input{
    flex:1;min-width:0;border:0;outline:0;background:transparent;
    padding:0 13px;height:45px;font-size:.9rem;color:var(--dark);border-radius:0 11px 11px 0;
}
.field__control input::placeholder{color:#94A3B8}
.field__toggle{
    width:44px;flex:none;border:0;background:transparent;color:var(--muted);
    cursor:pointer;border-radius:0 11px 11px 0;
}
.field__toggle:hover{color:var(--primary)}

.field-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:clamp(11px,1.5vh,17px)}
.field-row label{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--dark);cursor:pointer;margin:0}
.field-row a{font-size:.82rem;font-weight:600;color:var(--primary)}

/* Buttons */
.btn-signin{
    width:100%;height:47px;border:0;border-radius:11px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#FFFFFF;font-family:var(--font-body);font-weight:700;font-size:.95rem;
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    cursor:pointer;transition:transform .14s,box-shadow .14s,filter .14s;
    box-shadow:0 8px 20px rgba(13,71,161,.24);
}
.btn-signin:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 12px 26px rgba(13,71,161,.30);color:#FFFFFF}
.btn-signin:active{transform:translateY(0)}

.btn-outline{
    width:100%;height:45px;border:1.5px solid var(--border);border-radius:11px;
    background:#FFFFFF;color:var(--dark);font-weight:600;font-size:.88rem;
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    cursor:pointer;transition:border-color .15s,background .15s,color .15s;
}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.btn-outline--accent{border-color:var(--accent);color:var(--accent-strong)}
.btn-outline--accent:hover{background:var(--accent);border-color:var(--accent);color:var(--dark)}
.btn-outline img,.btn-outline svg{width:17px;height:17px;flex:none}

.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.78rem;margin:clamp(10px,1.4vh,15px) 0}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}

.trust{
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
    gap:6px clamp(8px,1.1vw,15px);
    margin-top:clamp(11px,1.5vh,17px);color:var(--muted);font-size:.68rem;
}
.trust span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.trust i{color:var(--primary)}

/* ── 10. Responsive ───────────────────────────────────────────── */
/* Tablet — keep two columns, drop the showcase (needs width to read). */
@media (max-width:1199px){
    .login-page{grid-template-columns:minmax(0,57fr) minmax(0,43fr);height:auto;min-height:100vh}
    .promo__body{grid-template-columns:1fr;gap:14px}
    .devices{display:none}
    .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .page-footer__tag{display:none}
}
@media (max-width:991px){
    /* minmax(0,1fr), not 1fr: a plain 1fr track floors at the content's
       min-content width, which lets wide rows push the column past the
       viewport and drags the centred login card off-screen with it. */
    .login-page{grid-template-columns:minmax(0,1fr);height:auto}
    /* Login first on small screens, after a compact branding header. */
    .auth{grid-column:1;grid-row:1;padding:18px 16px 6px}
    .promo{grid-column:1;grid-row:2;padding:6px 20px 0}
    .page-footer{grid-column:1;grid-row:3;justify-content:center;text-align:center}
    .promo__headline{font-size:clamp(1.5rem,5.6vw,2.1rem)}
    .categories{justify-content:center}
    .login-deco .deco--arc{display:none}
}
@media (max-width:575px){
    .login-page{background:var(--bg)}
    .promo__lede{display:none}
    .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px}
    .promo__brand .snd-wordmark{font-size:1.3rem}
    .auth-card{padding:20px;border-radius:16px}
    .field__control input{height:48px}   /* touch-friendly */
    .btn-signin{height:50px}
    .btn-outline{height:48px}
    .login-deco{display:none}
    .page-footer h2{font-size:.74rem}
}
/* Short viewports: drop the showcase before anything readable. */
@media (max-height:720px) and (min-width:1200px){
    .devices{display:none}
    .promo__body{grid-template-columns:1fr}
    .feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
}
@media (prefers-reduced-motion:reduce){
    .btn-signin,.btn-signin:hover{transition:none;transform:none}
}