/* =========================================================
   SESSION24 BACKOFFICE DESIGN SYSTEM — STEP 32.3
   Fashion retail / monochrome / warm red accent
   Presentation-only overrides. Existing behaviour is preserved.
   ========================================================= */
:root{
  --s24-ink:#0d0d0e;
  --s24-ink-2:#19191b;
  --s24-paper:#fff;
  --s24-canvas:#f6f5f2;
  --s24-soft:#efeeea;
  --s24-line:#dfddd7;
  --s24-muted:#76736f;
  --s24-red:#961e24;
  --s24-red-soft:#f4e8e7;
  --s24-green:#18794e;
  --s24-amber:#ad6b00;
  --s24-blue:#3c5a74;
  --s24-shadow:0 18px 55px rgba(23,19,15,.09),0 2px 8px rgba(23,19,15,.05);
  --s24-shadow-sm:0 8px 26px rgba(23,19,15,.07),0 1px 4px rgba(23,19,15,.04);
  --s24-radius:18px;
}

body.s24-admin,
body.s24-login,
body.s24-denied{
  background:
    radial-gradient(circle at 4% 2%,rgba(150,30,36,.045),transparent 22rem),
    linear-gradient(180deg,#faf9f7 0%,var(--s24-canvas) 100%);
  color:var(--s24-ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.s24-wordmark{display:block;width:138px;max-width:100%;height:auto;object-fit:contain}
.s24-wordmark.on-dark{filter:brightness(0) invert(1)}
.s24-kicker{font-size:10px;letter-spacing:.17em;font-weight:800;color:var(--s24-muted);text-transform:uppercase}
.s24-red-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--s24-red);box-shadow:0 0 0 5px rgba(150,30,36,.09)}

/* ---------- Login ---------- */
body.s24-login.login-body{
  min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:28px;
  background:
    linear-gradient(115deg,rgba(255,255,255,.92),rgba(246,245,242,.92)),
    repeating-linear-gradient(135deg,transparent 0 19px,rgba(13,13,14,.018) 19px 20px);
}
.s24-login-shell{width:min(980px,100%);display:grid;grid-template-columns:minmax(300px,.9fr) minmax(380px,1.1fr);background:#fff;border:1px solid var(--s24-line);border-radius:28px;overflow:hidden;box-shadow:var(--s24-shadow)}
.s24-login-visual{min-height:590px;background:#111;color:#fff;padding:44px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.s24-login-visual:before{content:"24";position:absolute;right:-24px;bottom:-70px;font-size:320px;font-weight:900;line-height:1;color:rgba(255,255,255,.035);letter-spacing:-.1em}
.s24-login-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 45%,rgba(150,30,36,.15) 100%);pointer-events:none}
.s24-login-visual>*{position:relative;z-index:1}
.s24-login-visual .s24-wordmark{width:170px}
.s24-login-mantra{font-size:11px;letter-spacing:.16em;line-height:1.8;color:#aaa;font-weight:700}
body.s24-login .login-card{width:auto;background:#fff;border-radius:0;padding:64px 58px;box-shadow:none;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
body.s24-login .login-card .brand{display:none}
body.s24-login .login-card h1{font-size:38px;letter-spacing:-.045em;margin:0 0 9px}
body.s24-login .login-card p{margin:0 0 30px;color:var(--s24-muted);font-size:12px;letter-spacing:.04em}
body.s24-login .login-card label{font-size:11px;letter-spacing:.02em;color:#292929;margin-bottom:15px}
body.s24-login .login-card input{border:1px solid #d8d5cf;border-radius:12px;padding:14px;background:#fbfbfa;box-shadow:inset 0 1px 1px rgba(0,0,0,.02)}
body.s24-login .login-card input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.06)}
body.s24-login .login-card .primary{margin-top:8px;border-radius:12px;background:#111;box-shadow:0 8px 20px rgba(0,0,0,.14);transition:.18s ease}
body.s24-login .login-card .primary:hover{transform:translateY(-1px);background:#242424}
.s24-login-context{display:flex;align-items:center;gap:9px;margin-bottom:17px}.s24-login-context b{font-size:10px;letter-spacing:.13em}

/* ---------- POS shell ---------- */
body.s24-pos .app{grid-template-columns:248px minmax(0,1fr);background:transparent}
body.s24-pos aside{background:rgba(255,255,255,.92);color:var(--s24-ink);border-right:1px solid var(--s24-line);padding:26px 18px;backdrop-filter:blur(18px)}
body.s24-pos aside .brand{font-size:0;margin:0 7px 8px}
body.s24-pos aside .brand .s24-wordmark{width:148px}
body.s24-pos aside .sub{color:#8a8782;margin:0 7px 25px;letter-spacing:.16em}
body.s24-pos .nav{color:#4d4b48;border:1px solid transparent;border-radius:11px;font-weight:700;padding:11px 12px}
body.s24-pos .nav:hover{background:#f1f0ed;color:#111}
body.s24-pos .nav.active{background:#111;color:#fff;box-shadow:0 7px 16px rgba(0,0,0,.13)}
body.s24-pos .nav.active:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--s24-red);margin-right:9px;vertical-align:1px}
body.s24-pos .aside-bottom{border-top:1px solid var(--s24-line);padding:15px 7px 0;color:#666}
body.s24-pos .logout{background:#fff;color:#111;border:1px solid #cbc8c2;border-radius:10px;font-weight:800}
body.s24-pos main{padding:28px 32px 48px}
body.s24-pos header{background:rgba(255,255,255,.76);border:1px solid rgba(223,221,215,.9);border-radius:16px;padding:14px 18px;box-shadow:var(--s24-shadow-sm);backdrop-filter:blur(14px)}
body.s24-pos header h1{font-size:25px;letter-spacing:-.035em}body.s24-pos header p{font-size:11px;margin-top:3px}
body.s24-pos .status{display:flex;align-items:center;gap:8px;border:1px solid #d9d6d0;border-radius:999px;background:#fff;padding:8px 11px;font-size:10px;letter-spacing:.08em}
body.s24-pos .card,body.s24-pos .panel,body.s24-pos .checkout{border-color:var(--s24-line);border-radius:16px;box-shadow:var(--s24-shadow-sm)}
body.s24-pos .card{transition:transform .18s ease,box-shadow .18s ease}body.s24-pos .card:hover{transform:translateY(-2px);box-shadow:var(--s24-shadow)}
body.s24-pos .card strong{letter-spacing:-.04em}body.s24-pos .panel h2{letter-spacing:-.02em}
body.s24-pos input,body.s24-pos select,body.s24-pos textarea{border-color:#d8d5cf;background:#fdfdfc}
body.s24-pos .primary{background:#111;box-shadow:0 7px 18px rgba(0,0,0,.12)}
body.s24-pos .secondary,body.s24-pos .icon{background:#efeeea}
body.s24-pos #toast{border:1px solid #333;box-shadow:var(--s24-shadow)}

/* ---------- Website Admin / Orders ---------- */
body.s24-backoffice{background:var(--s24-canvas)!important}
body.s24-backoffice .topbar{height:74px!important;background:rgba(255,255,255,.92)!important;color:#111!important;border-bottom:1px solid var(--s24-line);box-shadow:0 5px 22px rgba(20,18,15,.035);backdrop-filter:blur(18px);padding:0 28px!important}
body.s24-backoffice .topbar .brand{display:flex;align-items:center;gap:14px}body.s24-backoffice .topbar .brand strong{display:none}body.s24-backoffice .topbar .brand .s24-wordmark{width:144px}
body.s24-backoffice .topbar .brand small{color:#807d78!important;border-left:1px solid #ddd9d2;padding-left:14px;margin:0!important;letter-spacing:.14em!important}
body.s24-backoffice .top-note,body.s24-backoffice .business,body.s24-backoffice .admin-user{color:#77736f!important}
body.s24-backoffice .live-link{background:#111!important;color:#fff!important;border-radius:10px!important;box-shadow:0 7px 17px rgba(0,0,0,.12)}
body.s24-backoffice .logout-btn{background:#fff!important;color:#111!important;border-color:#cbc7c0!important;border-radius:10px!important}
body.s24-backoffice .shell{max-width:1540px!important;background:transparent}
body.s24-backoffice .side{background:rgba(255,255,255,.82)!important;border-color:var(--s24-line)!important;padding:25px 14px!important;backdrop-filter:blur(15px)}
body.s24-backoffice .side-label{color:#95918c!important}
body.s24-backoffice .side a{color:#3d3b38!important;border:1px solid transparent;transition:.16s ease}
body.s24-backoffice .side a:hover:not(.active){background:#f0efec!important}
body.s24-backoffice .side a.active{background:#111!important;color:#fff!important;box-shadow:0 8px 18px rgba(0,0,0,.13)}
body.s24-backoffice .content{padding:30px 32px 50px!important}
body.s24-backoffice .page-head h1{letter-spacing:-.045em!important}
body.s24-backoffice .panel,body.s24-backoffice .product-line,body.s24-backoffice .summary-card,body.s24-backoffice .order-row{border-color:var(--s24-line)!important;box-shadow:var(--s24-shadow-sm);background:#fff!important}
body.s24-backoffice .panel{border-radius:17px!important}body.s24-backoffice .product-line,body.s24-backoffice .order-row{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}body.s24-backoffice .product-line:hover,body.s24-backoffice .order-row:hover{transform:translateY(-1px);box-shadow:var(--s24-shadow);border-color:#cac6bf!important}
body.s24-backoffice .publish-bar{background:#111!important;border-radius:17px!important;box-shadow:var(--s24-shadow)}
body.s24-backoffice .btn,body.s24-backoffice button{border-radius:10px}
body.s24-backoffice .btn.primary{background:#111!important;color:#fff!important}
body.s24-backoffice .field input,body.s24-backoffice .field textarea,body.s24-backoffice .field select,body.s24-backoffice .search{border-color:#d8d5cf!important;background:#fdfdfc!important;border-radius:10px!important}
body.s24-backoffice .mode-option:has(input:checked){border-color:#111!important;background:#f6f5f2!important}
body.s24-backoffice .mode-dot{background:var(--s24-red)!important}
body.s24-backoffice .state.live{background:#111!important}.s24-accent-text{color:var(--s24-red)!important}

/* orders statuses: saturated only where meaning is useful */
body.s24-backoffice .pill.NEW,body.s24-backoffice .pill.waiting_review{background:#fff4df!important;color:#8a5400!important}
body.s24-backoffice .pill.CONFIRMED,body.s24-backoffice .pill.verified{background:#e7f5ed!important;color:#16643f!important}
body.s24-backoffice .pill.CANCELLED,body.s24-backoffice .pill.rejected,body.s24-backoffice .pill.refund_required{background:var(--s24-red-soft)!important;color:var(--s24-red)!important}

/* ---------- Access denied ---------- */
body.s24-denied{min-height:100vh;min-height:100dvh;margin:0;display:grid;place-items:center;padding:28px;overflow:hidden;position:relative}
body.s24-denied:before{content:"24";position:fixed;right:-25px;top:2vh;font-size:min(38vw,510px);line-height:.8;font-weight:900;letter-spacing:-.11em;color:rgba(17,17,17,.025);pointer-events:none}
.s24-denied-card{width:min(620px,100%);position:relative;background:rgba(255,255,255,.9);border:1px solid var(--s24-line);border-radius:26px;padding:44px;box-shadow:var(--s24-shadow);backdrop-filter:blur(18px)}
.s24-denied-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:44px}.s24-denied-top .s24-wordmark{width:155px}.s24-role-badge{border:1px solid #d9d6cf;border-radius:999px;padding:8px 11px;font-size:9px;font-weight:900;letter-spacing:.12em;color:#666;background:#fff}
.s24-lock{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:#111;color:#fff;box-shadow:0 12px 24px rgba(0,0,0,.17);margin-bottom:23px;position:relative}.s24-lock>span{width:20px;height:16px;border:2px solid #fff;border-radius:4px;position:relative;margin-top:8px}.s24-lock>span:before{content:"";position:absolute;left:3px;right:3px;height:12px;border:2px solid #fff;border-bottom:0;border-radius:9px 9px 0 0;top:-13px}.s24-lock:after{content:"";position:absolute;right:-5px;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--s24-red);border:3px solid #fff}
.s24-denied-card h1{font-size:44px;line-height:1;letter-spacing:-.055em;margin:9px 0 14px}.s24-denied-copy{color:#66615d;line-height:1.7;font-size:13px;margin:0 0 25px;max-width:480px}
.s24-account{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #e0ddd7;background:#faf9f7;border-radius:14px;padding:13px 15px;margin:22px 0}.s24-account b{display:block;font-size:12px}.s24-account small{color:#8a8680;font-size:9px;letter-spacing:.08em}.s24-account-role{text-align:right}
.s24-denied-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.s24-action{min-height:46px;display:flex;align-items:center;justify-content:center;text-decoration:none;border-radius:11px;font-size:10px;font-weight:900;letter-spacing:.03em;border:1px solid #cfcac3}.s24-action.primary{background:#111;color:#fff;border-color:#111;box-shadow:0 9px 20px rgba(0,0,0,.13)}.s24-action.secondary{background:#fff;color:#111}
.s24-denied-footer{margin-top:32px;border-top:1px solid #ece9e4;padding-top:20px;display:flex;justify-content:space-between;align-items:center;color:#9a9690;font-size:8px;letter-spacing:.12em;text-transform:uppercase}

@media(max-width:900px){
  .s24-login-shell{grid-template-columns:1fr;width:min(560px,100%)}.s24-login-visual{min-height:190px;padding:28px}.s24-login-visual:before{font-size:180px;bottom:-55px}.s24-login-mantra{display:none}body.s24-login .login-card{padding:42px 34px}
  body.s24-pos .app{display:block}.s24-pos aside{background:#fff!important}.s24-pos main{padding:15px!important}
}
@media(max-width:650px){
  body.s24-backoffice .topbar{height:66px!important;padding:0 14px!important}.s24-backoffice .topbar .brand small{display:none}.s24-backoffice .topbar .brand .s24-wordmark{width:122px}.s24-backoffice .content{padding:15px 12px 40px!important}
  body.s24-denied{padding:14px}.s24-denied-card{padding:27px 20px;border-radius:22px}.s24-denied-top{margin-bottom:34px}.s24-denied-card h1{font-size:36px}.s24-denied-actions{grid-template-columns:1fr}.s24-denied-footer{display:block;line-height:1.8}.s24-role-badge{display:none}
  body.s24-login.login-body{padding:14px}.s24-login-shell{border-radius:22px}.s24-login-visual{min-height:155px;padding:24px}.s24-login-visual .s24-wordmark{width:145px}body.s24-login .login-card{padding:34px 24px}body.s24-login .login-card h1{font-size:32px}
}