/* LILVA "lux" dark theme for the staff dashboard (body.lux, set for every non-client account).
   Same palette as the presentation and the portals: deep navy, glass cards, gold actions,
   and a topic photo at the top of every page that fades into the background.
   Scoped to #app / #drawer / #toast so the login page keeps its own look. */
body.lux { background: #061219; }
body.lux #app, body.lux #drawer, body.lux #toast {
  --bg: #071820;
  --card: rgba(16, 46, 58, .66);
  --ink-text: #EDE6D6;
  --muted: rgba(237, 230, 214, .58);
  --line: rgba(245, 239, 226, .11);
  --green: #7FD8B0; --green-soft: rgba(63, 143, 110, .2);
  --red: #F2A39A; --red-soft: rgba(178, 58, 58, .22);
  --amber: #E8C27A; --amber-soft: rgba(201, 147, 58, .2);
  --blue: #7FD3E4;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px rgba(0, 0, 0, .32);
  color: var(--ink-text);
}
body.lux .main { position: relative; background: radial-gradient(120% 70% at 50% 0%, #0E2B36 0%, #081B23 45%, #050B0F 100%); min-height: 100vh; }
body.lux .main > .topbar, body.lux .main > .view { position: relative; z-index: 1; }

/* topic photo at the top of each page */
.page-hero { display: none; }
body.lux .page-hero { display: block; position: absolute; inset-inline: 0; top: 0; height: clamp(220px, 34vh, 340px); overflow: hidden; pointer-events: none; z-index: 0; }
body.lux .page-hero[hidden] { display: none; }
body.lux .page-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 20% 45%; opacity: .55; filter: saturate(1.05); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.75) 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.75) 45%, transparent 100%); animation: lux-hero 1.2s ease both, lux-kb 40s ease-in-out infinite alternate; }
body.lux .page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(5,11,15,.85) 8%, rgba(5,11,15,.25) 55%, rgba(5,11,15,0) 85%); }
html[dir="ltr"] body.lux .page-hero img { transform: scaleX(-1); animation: lux-hero 1.2s ease both; }
html[dir="ltr"] body.lux .page-hero::after { background: linear-gradient(to right, rgba(5,11,15,.85) 8%, rgba(5,11,15,.25) 55%, rgba(5,11,15,0) 85%); }
@keyframes lux-hero { from { opacity: 0; } to { opacity: .55; } }
@keyframes lux-kb { from { transform: scale(1.04); } to { transform: scale(1.12) translate3d(-1.5%, 0, 0); } }

/* top bar sits on the photo */
body.lux .topbar { background: transparent; padding-top: 26px; padding-bottom: 22px; }
body.lux .topbar { transition: background .25s, backdrop-filter .25s, box-shadow .25s; }
body.lux .topbar.scrolled { background: rgba(7, 24, 32, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(245, 239, 226, .08), 0 14px 30px -18px rgba(0, 0, 0, .6); padding-top: 14px; padding-bottom: 14px; }
body.lux .topbar h2 { font-size: clamp(22px, 2.6vw, 30px); color: var(--cream); text-shadow: 0 4px 24px rgba(5,11,15,.7); letter-spacing: -.01em; }
body.lux .menu-btn { color: var(--cream); }

/* surfaces */
body.lux :is(#app, #drawer) .card, body.lux :is(#app, #drawer) .doc-card, body.lux :is(#app, #drawer) .track-card, body.lux :is(#app, #drawer) .staff-card, body.lux :is(#app, #drawer) .expiry-card, body.lux :is(#app, #drawer) .ready-item, body.lux :is(#app, #drawer) .channel-card {
  border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body.lux :is(#app, #drawer) .card { animation: lux-rise .5s cubic-bezier(.2,.9,.2,1) both; }
@keyframes lux-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.lux :is(#app, #drawer) h1, body.lux :is(#app, #drawer) h2, body.lux :is(#app, #drawer) h3, body.lux :is(#app, #drawer) h4,
body.lux #drawer h3, body.lux #drawer h4,
body.lux :is(#app, #drawer) .kpi .value, body.lux :is(#app, #drawer) .doc-head h4, body.lux :is(#app, #drawer) .psec-head h3, body.lux :is(#app, #drawer) .ready-item b, body.lux :is(#app, #drawer) .expiry-card .days, body.lux :is(#app, #drawer) .post-text { color: var(--cream); }
body.lux :is(#app, #drawer) .kpi .value { color: var(--gold-glow); }
body.lux :is(#app, #drawer) .kpi.accent { background: radial-gradient(500px 200px at 20% 0%, rgba(195,150,91,.28), rgba(14,43,54,.9)); border-color: rgba(232,204,154,.3); }
body.lux :is(#app, #drawer) tbody tr:hover { background: rgba(245, 239, 226, .045); }
body.lux :is(#app, #drawer) th { color: rgba(237, 230, 214, .55); }
body.lux :is(#app, #drawer) .doc-notes, body.lux #drawer .doc-notes { background: rgba(245, 239, 226, .05); }
body.lux :is(#app, #drawer) .dropzone { background: rgba(245, 239, 226, .04); border-color: rgba(232, 204, 154, .35); }
body.lux :is(#app, #drawer) .dropzone.drag { background: rgba(29, 122, 140, .15); }
body.lux :is(#app, #drawer) .alert.warn { color: #F2D9A6; } body.lux :is(#app, #drawer) .alert.bad { color: #FFC4BC; } body.lux :is(#app, #drawer) .alert.ok { color: #BFF0DA; }
body.lux :is(#app, #drawer) .meter, body.lux :is(#app, #drawer) .chip { background: rgba(245, 239, 226, .07); }
body.lux :is(#app, #drawer) .chip-green { background: var(--green-soft); } body.lux :is(#app, #drawer) .chip-red { background: var(--red-soft); } body.lux :is(#app, #drawer) .chip-amber { background: var(--amber-soft); }
body.lux :is(#app, #drawer) .segmented { background: rgba(5, 11, 15, .45); }
body.lux :is(#app, #drawer) .icon-btn:hover { background: rgba(255, 255, 255, .06); }
body.lux :is(#app, #drawer) .stage-col { background: rgba(5, 11, 15, .4); }
body.lux :is(#app, #drawer) .stage-col.active { background: linear-gradient(135deg, rgba(195,150,91,.35), rgba(14,43,54,.9)); border-color: rgba(232,204,154,.4); }
body.lux :is(#app, #drawer) .empty { color: var(--muted); }

/* controls */
body.lux :is(#app, #drawer) input, body.lux :is(#app, #drawer) select, body.lux :is(#app, #drawer) textarea,
body.lux #drawer input, body.lux #drawer select, body.lux #drawer textarea { background: rgba(5, 11, 15, .5); color: var(--ink-text); border-color: rgba(245, 239, 226, .16); }
body.lux :is(#app, #drawer) input::placeholder, body.lux #drawer input::placeholder, body.lux :is(#app, #drawer) textarea::placeholder, body.lux #drawer textarea::placeholder { color: rgba(237, 230, 214, .35); }
body.lux :is(#app, #drawer) select option, body.lux #drawer select option { background: #0E2B36; color: #EDE6D6; }
body.lux :is(#app, #drawer) input:focus, body.lux :is(#app, #drawer) select:focus, body.lux :is(#app, #drawer) textarea:focus,
body.lux #drawer input:focus, body.lux #drawer select:focus, body.lux #drawer textarea:focus { outline: 3px solid rgba(232, 204, 154, .18); border-color: var(--gold-light); }
body.lux :is(#app, #drawer) .btn, body.lux #drawer .btn { background: rgba(245, 239, 226, .06); color: var(--ink-text); border-color: rgba(245, 239, 226, .16); }
body.lux :is(#app, #drawer) .btn:hover, body.lux #drawer .btn:hover { background: rgba(245, 239, 226, .12); }
body.lux :is(#app, #drawer) .btn-primary, body.lux #drawer .btn-primary, body.lux :is(#app, #drawer) .btn-gold, body.lux #drawer .btn-gold { background: linear-gradient(135deg, #D6AE7A, #C3965B); color: #0E2B36; border-color: transparent; box-shadow: 0 8px 24px -10px rgba(195, 150, 91, .7); }
body.lux :is(#app, #drawer) .btn-primary:hover, body.lux #drawer .btn-primary:hover, body.lux :is(#app, #drawer) .btn-gold:hover, body.lux #drawer .btn-gold:hover { background: linear-gradient(135deg, #E8CC9A, #D6AE7A); }
body.lux :is(#app, #drawer) .btn-danger, body.lux #drawer .btn-danger { color: var(--red); border-color: rgba(242, 163, 154, .35); }
body.lux :is(#app, #drawer) .btn-ghost, body.lux #drawer .btn-ghost { background: transparent; border-color: transparent; }
body.lux :is(#app, #drawer) label, body.lux #drawer label { color: rgba(237, 230, 214, .66); }

/* side drawer */
body.lux #drawer .drawer { background: linear-gradient(175deg, #12333F, #081B23 60%); color: var(--ink-text); border-inline-start: 1px solid rgba(245, 239, 226, .1); }
body.lux #drawer .drawer header { border-color: var(--line); }
body.lux #drawer .drawer-scrim { background: rgba(5, 11, 15, .55); backdrop-filter: blur(4px); }
body.lux #drawer .card { background: rgba(245, 239, 226, .05); border: 1px solid var(--line); box-shadow: none; }
body.lux #drawer .icon-btn { color: var(--cream); }

/* ---------- inside sales home (#/myday), on the shared .pz.sp stage ---------- */
.sh-rings { width: min(1180px, 100%); display: flex; gap: clamp(14px, 3vw, 34px); flex-wrap: wrap; margin: 0 0 22px; animation: pz-rise .6s both .35s; }
.sh-ring { --p: 0; display: grid; justify-items: center; gap: 8px; }
.sh-ring > div { width: clamp(84px, 9vw, 110px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(circle, #0E2B36 58%, transparent 59%), conic-gradient(var(--gold-light) calc(var(--p) * 1%), rgba(245,239,226,.12) 0); box-shadow: 0 0 30px -8px rgba(232,204,154,.45); }
.sh-ring b { font-family: var(--font-latin); font-size: clamp(22px, 2.4vw, 30px); line-height: 1; color: var(--gold-glow); }
.sh-ring small { font-family: var(--font-latin); font-size: 11px; color: rgba(245,239,226,.55); }
.sh-ring span { font-size: 12.5px; color: rgba(245,239,226,.75); text-align: center; max-width: 120px; }
.sh-queue { width: min(1180px, 100%); margin: 0 0 26px; text-align: start; }
.sh-queue h3 { margin: 0 0 10px; font-size: 15px; color: var(--gold-glow); }
.sh-queue .pp-job-row .pp-job { flex-basis: min(260px, 78%); }
@media (max-width: 760px) {
  body.lux .topbar { flex-wrap: wrap; row-gap: 10px; padding-top: 18px; padding-bottom: 12px; }
  body.lux .topbar h2 { flex: 1 1 auto; }
  body.lux .topbar-actions { order: 3; flex: 1 1 100%; margin-inline-start: 0; flex-wrap: nowrap; overflow-x: auto; }
  body.lux .page-hero { height: 200px; }
  body.lux .topbar-actions .btn, body.lux .topbar-actions .icon-btn { width: auto; min-width: 38px; padding: 0 12px; border-radius: 999px; font-size: 13px; white-space: nowrap; flex: none; }
}
body.lux #app .lang-menu summary { background: rgba(245, 239, 226, .08); color: var(--cream); border-color: rgba(245, 239, 226, .2); }
body.lux #app .lang-menu .lang-list, body.lux #app .lang-menu > div { background: #0E2B36; border-color: rgba(245, 239, 226, .14); color: var(--cream); }
body.lux #app .lang-list button { color: var(--cream); }
body.lux #app .lang-list button:hover { background: rgba(245, 239, 226, .08); }
body.lux #app .lang-list button.active { background: var(--gold); color: #0E2B36; }