/* ==========================================================================
   RetailIQ AI — Portal UI
   Design language: calm, high-contrast, blue→violet AI accent, light + dark.
   ========================================================================== */

:root{
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --bg:#f5f6fa;
  --surface:#ffffff;
  --surface-2:#f8f9fc;
  --surface-3:#f0f2f8;
  --ink:#0f172a;
  --ink-2:#334155;
  --muted:#64748b;
  --faint:#94a3b8;
  --line:#e6e9f1;
  --line-2:#d5dae6;

  --brand:#4f6df5;
  --brand-ink:#3550d8;
  --brand-soft:#eef1ff;
  --brand-soft-2:#e0e6ff;
  --grad:linear-gradient(135deg,#3b82f6 0%,#5b6cf6 52%,#8b5cf6 100%);
  --grad-text:linear-gradient(120deg,#2563eb 0%,#6d5ef5 55%,#a855f7 100%);

  --green:#059669;--green-soft:#e9f9f2;
  --red:#e11d48;--red-soft:#fff0f3;
  --amber:#b45309;--amber-soft:#fff7e6;

  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px -12px rgba(30,41,90,.14);
  --shadow-lg:0 30px 70px -24px rgba(30,41,110,.30);
  --ring:0 0 0 4px rgba(91,108,246,.16);
  --glass:rgba(255,255,255,.72);

  --radius:16px;
  --radius-sm:10px;
  --sidebar-w:272px;
  --topbar-h:64px;
  color-scheme:light;
}

[data-theme="dark"]{
  --bg:#070a13;
  --surface:#0e1322;
  --surface-2:#121830;
  --surface-3:#171f3a;
  --ink:#e8ecf7;
  --ink-2:#c5cde3;
  --muted:#8d98b6;
  --faint:#5f6b8c;
  --line:#1b2340;
  --line-2:#283260;

  --brand:#7386ff;
  --brand-ink:#a5b4fc;
  --brand-soft:rgba(99,112,255,.13);
  --brand-soft-2:rgba(99,112,255,.22);
  --grad-text:linear-gradient(120deg,#7cb0ff 0%,#a0a8ff 50%,#d0a2ff 100%);

  --green:#34d399;--green-soft:rgba(52,211,153,.12);
  --red:#fb7185;--red-soft:rgba(251,113,133,.12);
  --amber:#fbbf24;--amber-soft:rgba(251,191,36,.12);

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 34px -14px rgba(0,0,0,.6);
  --shadow-lg:0 30px 80px -24px rgba(0,0,0,.7);
  --ring:0 0 0 4px rgba(115,134,255,.22);
  --glass:rgba(14,19,34,.72);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:14px;line-height:1.5;
  font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;
  transition:background-color .25s,color .25s;
}
body::before{ /* soft aurora behind everything */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 500px at 85% -10%,rgba(99,102,241,.10),transparent 60%),
    radial-gradient(700px 420px at -5% 0%,rgba(59,130,246,.08),transparent 60%);
}
[data-theme="dark"] body::before{
  background:
    radial-gradient(900px 520px at 85% -12%,rgba(99,102,241,.18),transparent 60%),
    radial-gradient(700px 420px at -5% 0%,rgba(37,99,235,.14),transparent 60%);
}
#app{position:relative;z-index:1}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand-ink);text-decoration:none}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em}
::selection{background:rgba(99,102,241,.25)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.hidden{display:none!important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box;border:3px solid transparent}
::-webkit-scrollbar-track{background:transparent}

.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic.sm{width:15px;height:15px}
.ic.lg{width:22px;height:22px}

/* ---------- 2026 AI Boot Experience ---------- */
.boot{position:relative;height:100vh;min-height:100svh;display:grid;place-content:center;justify-items:center;gap:0;overflow:hidden;color:var(--muted);background:radial-gradient(circle at 50% 42%,var(--brand-soft-2),transparent 24%),radial-gradient(circle at 50% 50%,rgba(99,102,241,.10),transparent 48%);isolation:isolate}
.boot:before,.boot:after{content:"";position:absolute;inset:-30%;z-index:-2;pointer-events:none}
.boot:before{background:conic-gradient(from 0deg,transparent 0 28%,rgba(91,108,246,.12),transparent 43% 67%,rgba(168,85,247,.09),transparent 82%);animation:boot-spin 18s linear infinite}
.boot:after{background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.55),transparent 18%),radial-gradient(circle at 50% 50%,transparent 0 29%,rgba(91,108,246,.06) 30%,transparent 31%);filter:blur(1px)}
.boot-core{position:relative;width:118px;height:118px;display:grid;place-items:center;animation:boot-core-float 4.5s ease-in-out infinite;filter:drop-shadow(0 18px 35px rgba(79,109,245,.28))}
.boot-core img{position:relative;z-index:5;width:76px;height:76px;object-fit:contain;object-position:center;padding:7px;border-radius:24px;display:block;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 0 35px rgba(99,102,241,.24)}
.boot-core-glow{position:absolute;inset:20px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.34),rgba(99,102,241,.08) 42%,transparent 72%);filter:blur(8px);animation:boot-glow 2.4s ease-in-out infinite}
.boot-core-ring{position:absolute;inset:7px;border:1px solid var(--brand);border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;opacity:.8;animation:boot-ring 2.6s linear infinite}
.boot-core-grid{position:absolute;inset:15px;border:1px dashed var(--brand-ink);border-radius:50%;opacity:.32;animation:boot-ring-reverse 7s linear infinite}
.boot-orbit{position:absolute;border:1px solid var(--brand);border-left-color:transparent;border-right-color:transparent;border-radius:50%;opacity:.28;pointer-events:none}
.boot-orbit:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--brand);box-shadow:0 0 14px var(--brand)}
.boot-orbit-a{width:178px;height:72px;transform:rotate(-24deg);animation:boot-orbit-a 4.2s linear infinite}
.boot-orbit-a:after{left:16%;top:3px}
.boot-orbit-b{width:205px;height:86px;transform:rotate(54deg);animation:boot-orbit-b 5.8s linear infinite}
.boot-orbit-b:after{right:11%;bottom:5px}
.boot-orbit-c{width:145px;height:145px;border-color:var(--brand-ink);border-bottom-color:transparent;animation:boot-ring 9s linear infinite}
.boot-orbit-c:after{right:8px;top:20%}
.boot-brand{margin-top:26px;font-size:23px;line-height:1;font-weight:800;letter-spacing:-.045em;color:var(--ink);animation:boot-text-in .8s .12s both ease-out}
.boot-brand span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.boot-status{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:10.5px;font-weight:650;letter-spacing:.015em;color:var(--muted);animation:boot-text-in .8s .25s both ease-out}
.boot-status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft),0 0 12px rgba(52,211,153,.5);animation:health-pulse 1.5s ease-in-out infinite}
.boot-progress{width:170px;height:3px;margin-top:16px;border-radius:99px;background:var(--line);overflow:hidden;animation:boot-text-in .8s .35s both ease-out}
.boot-progress i{display:block;width:38%;height:100%;border-radius:inherit;background:var(--grad);box-shadow:0 0 12px rgba(99,102,241,.45);animation:boot-progress 1.8s ease-in-out infinite}
@keyframes boot-spin{to{transform:rotate(360deg)}}
@keyframes boot-ring{to{transform:rotate(360deg)}}
@keyframes boot-ring-reverse{to{transform:rotate(-360deg)}}
@keyframes boot-orbit-a{to{transform:rotate(336deg)}}
@keyframes boot-orbit-b{to{transform:rotate(-306deg)}}
@keyframes boot-core-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.018)}}
@keyframes boot-glow{0%,100%{opacity:.6;transform:scale(.88)}50%{opacity:1;transform:scale(1.08)}}
@keyframes boot-progress{0%{transform:translateX(-115%)}65%,100%{transform:translateX(300%)}}
@keyframes boot-text-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.boot:before,.boot-core,.boot-core-ring,.boot-core-grid,.boot-orbit,.boot-core-glow,.boot-status-dot,.boot-progress i{animation:none}.boot-progress i{width:72%}}

.portal-ready .portal{animation:portal-reveal .48s cubic-bezier(.22,.8,.25,1) both}
@keyframes portal-reveal{from{opacity:0;transform:translateY(8px) scale(.995);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.portal-ready .portal{animation:none}}

/* ---------- Brand ---------- */
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:40px;height:40px;border-radius:13px;padding:2px;background:var(--grad);flex:none;box-shadow:0 8px 20px -8px rgba(79,109,245,.7);display:grid;place-items:center}
.brand-mark img{width:100%;height:100%;object-fit:contain;object-position:center;border-radius:11px;display:block;background:#fff;padding:3px}
.brand-name{font-weight:750;font-size:17px;letter-spacing:-.02em;line-height:1.15}
.brand-name b{font-weight:750;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-sub{font-size:11px;color:var(--muted);font-weight:500;margin-top:1px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:11px;padding:10px 16px;
  font-weight:600;font-size:13.5px;line-height:1.2;white-space:nowrap;
  min-height:44px;
  transition:transform .12s,box-shadow .2s,background .2s,border-color .2s,color .2s,opacity .2s;
}
.btn:focus-visible{outline:2px solid color-mix(in srgb,var(--brand,#4f6df5) 45%,transparent);outline-offset:2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand,#4f6df5) 18%,transparent)}
.btn:active:not(:disabled){transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{
  color:#fff;background:var(--grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px -8px rgba(79,109,245,.65);
}
.btn-primary:hover:not(:disabled){box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 26px -8px rgba(79,109,245,.8);filter:brightness(1.05)}
.btn-soft{background:var(--brand-soft);color:var(--brand-ink)}
.btn-soft:hover:not(:disabled){background:var(--brand-soft-2)}
.btn-outline{background:var(--surface);border-color:var(--line-2);color:var(--ink-2);box-shadow:var(--shadow-sm)}
.btn-outline:hover:not(:disabled){border-color:var(--brand);color:var(--brand-ink)}
.btn-danger{background:var(--red-soft);color:var(--red)}
.btn-danger:hover:not(:disabled){background:var(--red);color:#fff}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover:not(:disabled){background:var(--surface-3);color:var(--ink)}
.btn-sm{padding:7px 11px;font-size:12.5px;border-radius:9px;min-height:36px}
.btn-block{width:100%}
.icon-btn{
  width:44px;height:44px;display:inline-grid;place-items:center;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);transition:.2s;box-shadow:var(--shadow-sm);
}
.icon-btn:hover{color:var(--ink);border-color:var(--line-2);background:var(--surface-2)}
.icon-btn:focus-visible{outline:2px solid color-mix(in srgb,var(--brand,#4f6df5) 45%,transparent);outline-offset:2px}
.spinner{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
.btn-soft .spinner,.btn-outline .spinner{border-color:rgba(79,109,245,.25);border-top-color:var(--brand)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Forms ---------- */
.field{margin:16px 0}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:7px;color:var(--ink-2)}
.input,.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--line-2);border-radius:11px;padding:11px 13px;outline:none;
  background:var(--surface);color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field textarea{min-height:150px;resize:vertical;line-height:1.55}
.field select{
  appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:var(--ring)}
.input-icon{position:relative}
.input-icon>.ic{
  position:absolute;
  left:13px;
  top:calc(50% - 2px);
  transform:translateY(-50%);
  width:18px;
  height:18px;
  color:var(--faint);
  pointer-events:none;
  transition:color .2s;
}
.input-icon:focus-within>.ic{color:var(--brand)}
.input-icon input{padding-left:40px}
.input-icon .reveal{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  color:var(--faint);
  border-radius:9px;
  display:grid;
  place-items:center;
}
.input-icon .reveal:hover{color:var(--ink);background:var(--surface-3)}
.input-icon.has-reveal input{padding-right:44px}
.strength{display:flex;gap:5px;margin-top:9px}
.strength i{flex:1;height:4px;border-radius:4px;background:var(--line-2);transition:background .25s}
.strength[data-s="1"] i:nth-child(-n+1){background:var(--red)}
.strength[data-s="2"] i:nth-child(-n+2){background:var(--amber)}
.strength[data-s="3"] i:nth-child(-n+3){background:#84cc16}
.strength[data-s="4"] i:nth-child(-n+4){background:var(--green)}
.hint{font-size:12px;color:var(--muted);margin-top:6px}

.alert{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:11px;font-size:13px;margin:14px 0;border:1px solid transparent}
.alert.error{background:var(--red-soft);color:var(--red);border-color:color-mix(in srgb,var(--red) 22%,transparent)}
.alert.ok{background:var(--green-soft);color:var(--green);border-color:color-mix(in srgb,var(--green) 22%,transparent)}

/* ==========================================================================
   Auth — futuristic, animated, glass + neon accent
   Everything below is scoped under .auth so it can never bleed into the
   dashboard, chat, or admin views.
   ========================================================================== */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);isolation:isolate}

/* ---------- Left panel: animated deep-space hero ---------- */
.auth-art{
  position:relative;overflow:hidden;padding:44px clamp(32px,5vw,72px);color:#e8ecf7;
  display:flex;flex-direction:column;
  background:#060814;
}
.auth-art::before{ /* drifting aurora blobs */
  content:"";position:absolute;inset:-20%;z-index:0;opacity:.9;
  background:
    radial-gradient(620px 480px at 82% 8%,rgba(99,102,241,.50),transparent 60%),
    radial-gradient(560px 460px at -4% 96%,rgba(37,99,235,.42),transparent 58%),
    radial-gradient(460px 380px at 58% 92%,rgba(168,85,247,.30),transparent 58%),
    radial-gradient(380px 320px at 20% 20%,rgba(34,211,238,.16),transparent 60%);
  animation:auroraDrift 16s ease-in-out infinite alternate;
  filter:saturate(1.15);
}
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2%,1.5%,0) scale(1.06)}
  100%{transform:translate3d(2%,-1%,0) scale(1.02)}
}
.auth-art::after{ /* moving dotted grid + scanline sweep */
  content:"";position:absolute;inset:0;z-index:0;opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.15) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 75%);
  animation:gridDrift 30s linear infinite;
}
@keyframes gridDrift{from{background-position:0 0}to{background-position:130px 130px}}
.auth-art>*{position:relative;z-index:1}

/* fine particle field, pure CSS (no images/JS needed) */
.auth-art .particles{position:absolute;inset:0;z-index:0;pointer-events:none}
.auth-art .particles i{
  position:absolute;width:3px;height:3px;border-radius:50%;background:#bcd0ff;
  box-shadow:0 0 6px 1px rgba(139,168,255,.9);opacity:0;
  animation:twinkle 5.5s ease-in-out infinite;
}
.auth-art .particles i:nth-child(1){left:12%;top:22%;animation-delay:.2s}
.auth-art .particles i:nth-child(2){left:78%;top:14%;animation-delay:1.4s}
.auth-art .particles i:nth-child(3){left:60%;top:64%;animation-delay:2.6s}
.auth-art .particles i:nth-child(4){left:30%;top:78%;animation-delay:.9s}
.auth-art .particles i:nth-child(5){left:88%;top:52%;animation-delay:3.3s}
.auth-art .particles i:nth-child(6){left:46%;top:36%;animation-delay:1.9s}
.auth-art .particles i:nth-child(7){left:20%;top:52%;animation-delay:4s}
.auth-art .particles i:nth-child(8){left:68%;top:86%;animation-delay:2.2s}
@keyframes twinkle{0%,100%{opacity:0;transform:translateY(0) scale(.6)}45%{opacity:1;transform:translateY(-8px) scale(1)}}

.auth-art .brand-name{color:#fff}
.auth-art .brand-name b{background:linear-gradient(120deg,#7cb0ff,#c4a6ff);-webkit-background-clip:text;background-clip:text}
.auth-art .brand-sub{color:#93a0c4}
.auth-art .brand-mark{position:relative;animation:markPulse 3.4s ease-in-out infinite}
.auth-art .brand-mark::before{
  content:"";position:absolute;inset:-6px;border-radius:16px;z-index:-1;
  background:conic-gradient(from 0deg,#5b6cf6,#8b5cf6,#22d3ee,#5b6cf6);
  filter:blur(9px);opacity:.65;animation:spinGlow 5s linear infinite;
}
@keyframes markPulse{50%{transform:scale(1.04)}}
@keyframes spinGlow{to{transform:rotate(360deg)}}

.auth-body{flex:1;position:relative;display:flex;align-items:center;padding:32px 0}
.hero{position:relative;z-index:1;width:100%;animation:heroIn .7s cubic-bezier(.2,.8,.25,1) both}
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;font-size:12px;font-weight:600;color:#c7d2fe;background:rgba(99,102,241,.16);border:1px solid rgba(165,180,252,.25)}
.pill i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.2);animation:dotPulse 1.8s ease-in-out infinite}
@keyframes dotPulse{50%{box-shadow:0 0 0 7px rgba(52,211,153,0)}}
.hero h1{font-size:clamp(36px,3.7vw,58px);line-height:1.03;letter-spacing:-.045em;font-weight:750;margin:20px 0 18px;color:#fff}
.hero h1 span{
  background:linear-gradient(120deg,#7cb0ff 0%,#a9a4ff 30%,#e0aaff 50%,#7cb0ff 70%,#a9a4ff 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradientShift 6s ease-in-out infinite;
}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero p{font-size:16px;line-height:1.7;color:#a5b1d3;max-width:400px;margin:0}
.feature-list{display:grid;gap:12px;margin-top:34px}
.feature{
  display:flex;gap:13px;align-items:flex-start;padding:13px 15px;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px);
  transition:transform .25s,border-color .25s,background .25s;
  animation:featureIn .6s cubic-bezier(.2,.8,.25,1) both;
}
.feature:nth-child(1){animation-delay:.1s}
.feature:nth-child(2){animation-delay:.2s}
.feature:nth-child(3){animation-delay:.3s}
@keyframes featureIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.feature:hover{transform:translateY(-2px);border-color:rgba(139,168,255,.35);background:rgba(255,255,255,.07)}
.feature .ic-wrap{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(99,102,241,.22);color:#c7d2fe;flex:none}
.feature b{display:block;color:#f1f4ff;font-size:13.5px;font-weight:600}
.feature span{display:block;color:#8f9bc0;font-size:12.5px;margin-top:2px}
.hero-stage{position:absolute;right:clamp(24px,5vw,72px);top:50%;bottom:auto;translate:0 -50%;width:clamp(230px,17vw,310px);z-index:0}
.hero-stage .chip-float{display:none}
.feature-list{max-width:350px}
@media(min-width:1700px){
  .hero-stage{right:clamp(36px,5vw,90px);top:50%;bottom:auto;translate:0 -50%;width:clamp(270px,17vw,340px)}
  .hero-stage .chip-float{display:flex}
  .feature-list{max-width:470px}
}
.hero-stage::before{content:"";position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,rgba(129,140,248,.55),transparent 65%);filter:blur(30px);animation:markPulse 4s ease-in-out infinite}
.hero-card{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:linear-gradient(160deg,#ffffff,#eef2ff);border:1px solid rgba(255,255,255,.5);box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 8px rgba(255,255,255,.05);animation:float 6s ease-in-out infinite;display:grid;place-items:center;padding:14%}
.hero-card img{width:100%;height:100%;max-width:none;margin:0;object-fit:contain;object-position:center;display:block}
@keyframes float{50%{transform:translateY(-10px)}}
.chip-float{position:absolute;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;font-size:12px;font-weight:600;color:#e8ecf7;background:rgba(15,20,44,.78);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);box-shadow:0 12px 30px -10px rgba(0,0,0,.6);white-space:nowrap;animation:chipFloat 4.5s ease-in-out infinite}
.chip-float .ic{color:#a5b4fc}
.chip-float.a{left:-34px;top:18%;animation-delay:.3s}
.chip-float.b{right:-16px;bottom:16%;animation-delay:1.1s}
@keyframes chipFloat{50%{transform:translateY(-6px)}}
.auth-foot{font-size:12px;color:#6f7ba0}

/* ---------- Right panel: glass login card ---------- */
.auth-panel{display:grid;place-items:center;padding:40px 24px;background:var(--bg);position:relative;overflow:hidden}
.auth-panel::before{ /* soft ambient glow that follows the card, subtle on light theme too */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(560px 420px at 50% 38%,rgba(99,102,241,.10),transparent 65%);
}
[data-theme="dark"] .auth-panel::before{
  background:radial-gradient(560px 420px at 50% 38%,rgba(99,102,241,.20),transparent 65%);
}
.login-card{
  position:relative;z-index:2;width:min(344px,100%);
  background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:38px;
  box-shadow:var(--shadow-lg);
  animation:cardIn .55s cubic-bezier(.2,.85,.25,1.05) both;
  --mx:50%;--my:0%;
}
.login-card::after{ /* cursor-reactive spotlight */
  content:"";position:absolute;inset:0;z-index:-1;border-radius:24px;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx) var(--my),rgba(91,108,246,.14),transparent 70%);
  opacity:0;transition:opacity .3s;
}
.login-card:hover::after{opacity:1}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.login-card::before{ /* animated gradient outline */
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:25px;
  background:conic-gradient(from 0deg,rgba(91,108,246,.55),rgba(139,92,246,.4),rgba(34,211,238,.35),rgba(91,108,246,.55));
  opacity:0;transition:opacity .35s;animation:spinGlow 7s linear infinite;
}
.login-card:hover::before,.login-card:focus-within::before{opacity:1}
[data-theme="dark"] .login-card{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(16px)}
.login-card h2{font-size:26px;font-weight:700;letter-spacing:-.03em;margin:22px 0 6px}
.login-card>p{color:var(--muted);margin:0 0 22px}
.login-foot{margin-top:22px;text-align:center;font-size:12px;color:var(--muted);display:flex;gap:7px;align-items:center;justify-content:center}
.auth-theme{position:absolute;right:20px;top:20px;z-index:3}

/* ---------- Auth form micro-interactions ---------- */
.auth .field input{
  position:relative;transition:border-color .2s,box-shadow .25s,background .2s;
  background:var(--surface-2);border-color:var(--line-2);color:var(--ink);
}
.auth .field input::placeholder{color:var(--faint)}
.auth .field input:focus{
  background:var(--surface);border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(91,108,246,.18),0 0 16px -2px rgba(91,108,246,.35);
}
[data-theme="dark"] .auth .field input{
  background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12);color:var(--ink);
}
[data-theme="dark"] .auth .field input:focus{
  background:rgba(255,255,255,.07);border-color:var(--brand);
}
.auth .btn-primary{position:relative;overflow:hidden}
.auth .btn-primary::after{ /* sheen sweep on hover */
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.auth .btn-primary:hover:not(:disabled)::after{transform:translateX(120%)}

/* ---------- Login / password recovery ---------- */
.login-links{display:flex;justify-content:flex-end;margin-top:12px}
.link-btn{border:0;background:transparent;padding:4px 0;color:var(--brand);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;position:relative}
.link-btn::after{content:"";position:absolute;left:0;right:100%;bottom:1px;height:1.5px;background:var(--brand);transition:right .22s ease}
.link-btn:hover::after{right:0}
.login-card .brand{margin-bottom:2px}
.login-card .brand-mark{width:44px;height:44px}
.login-card .brand-mark img{object-fit:contain}
.auth-panel .login-card{position:relative;z-index:2}
/* Keep the RetailIQ robot visible on normal desktop login screens. */
@media (min-width:1100px){
  .hero-stage{display:block}
}
@media(prefers-reduced-motion:reduce){
  .auth-art::before,.auth-art::after,.auth-art .particles i,.auth-art .brand-mark::before,
  .hero,.feature,.hero-stage::before,.hero-card,.chip-float,.login-card,.login-card::before,.hero h1 span{
    animation:none!important;
  }
}

/* ---------- Shell ---------- */
.portal{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
.sidebar{
  position:sticky;top:0;height:100vh;padding:18px 14px;display:flex;flex-direction:column;
  background:var(--surface);border-right:1px solid var(--line);
}
.side-brand{padding:4px 8px 18px}
.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;margin:0 -4px;padding:0 4px;scrollbar-width:none;-ms-overflow-style:none}.nav::-webkit-scrollbar{display:none;width:0;height:0}
.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:700;padding:16px 12px 7px}
.nav-label:first-child{padding-top:4px}
.nav-item{
  position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border:0;background:transparent;
  border-radius:10px;color:var(--muted);font-weight:550;font-size:13.5px;text-align:left;transition:background .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),transform .12s cubic-bezier(.4,0,.2,1);
}
.nav-item .ic{opacity:.9}
.nav-item:hover{background:var(--surface-3);color:var(--ink)}
.nav-item.active{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.nav-item.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 4px 4px 0;background:var(--grad);transition:top .2s cubic-bezier(.4,0,.2,1),bottom .2s cubic-bezier(.4,0,.2,1)}
.side-bottom{border-top:1px solid var(--line);padding-top:12px;margin-top:10px}
.user-mini{display:flex;gap:10px;align-items:center;padding:8px;border-radius:12px}
.user-mini .meta{min-width:0;flex:1}
.user-mini .meta b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-mini .meta span{display:block;font-size:11.5px;color:var(--muted);text-transform:capitalize}
.avatar{width:34px;height:34px;border-radius:11px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none;box-shadow:0 6px 14px -6px rgba(79,109,245,.7)}
.avatar.lg{width:64px;height:64px;border-radius:20px;font-size:26px}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:10;height:var(--topbar-h);display:flex;align-items:center;gap:14px;padding:0 28px;
  background:var(--glass);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);
}
.cmd{position:relative;flex:1;max-width:640px}
.cmd .ic{position:absolute;left:14px;top:50%;translate:0 -50%;color:var(--faint);pointer-events:none}
.cmd input{
  width:100%;height:40px;padding:0 64px 0 42px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  outline:none;font-size:13.5px;box-shadow:var(--shadow-sm);transition:.2s;
}
.cmd input::placeholder{color:var(--faint)}
.cmd input:focus{border-color:var(--brand);box-shadow:var(--ring)}
kbd{font-family:var(--font);font-size:11px;font-weight:600;color:var(--muted);background:var(--surface-3);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 6px}
.cmd kbd{position:absolute;right:10px;top:50%;translate:0 -50%}
.top-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.content{padding:28px 32px 40px;width:100%;max-width:1320px;margin:0 auto;flex:1;animation:contentIn .32s cubic-bezier(.16,1,.3,1)}
@keyframes contentIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.content.is-chat{padding:12px 16px 12px;max-width:1600px;min-height:0;overflow:hidden}
/* Chat is a fixed app surface: only the conversation canvas scrolls. */
.main.chat-mode{height:100dvh;min-height:0;overflow:hidden}
.main.chat-mode .content.is-chat{height:calc(100dvh - var(--topbar-h));flex:1;min-height:0;overflow:hidden}
.chat-layout{min-height:0}
.chat-top,.modes,.composer{flex-shrink:0}


.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.page-head h1{font-size:26px;font-weight:700;letter-spacing:-.035em}
.page-head p{margin:5px 0 0;color:var(--muted);max-width:640px}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px}

.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.two{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.card h3{font-size:15px;font-weight:650;margin-bottom:6px}
.card p.sub{color:var(--muted);margin:0 0 18px;line-height:1.6}
button.card{font:inherit;color:inherit;width:100%;display:block}
.card.hover{transition:transform .2s,border-color .2s,box-shadow .2s;cursor:pointer;text-align:left}
.card.hover:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:var(--shadow-lg)}

.metric-card{position:relative;overflow:hidden}
.metric-card .top{display:flex;justify-content:space-between;align-items:center}
.metric-label{color:var(--muted);font-size:12.5px;font-weight:600}
.metric{font-size:34px;font-weight:700;letter-spacing:-.04em;margin-top:14px;font-variant-numeric:tabular-nums}
.metric-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink)}
.metric-card.v2 .metric-ic{background:var(--green-soft);color:var(--green)}
.metric-card.v3 .metric-ic{background:var(--amber-soft);color:var(--amber)}
.metric-card.v4 .metric-ic{background:var(--red-soft);color:var(--red)}
.metric-card::after{content:"";position:absolute;right:-30px;bottom:-40px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.10),transparent 70%)}
.cta-card{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.cta-card .metric-ic{margin-bottom:14px}
.cta-card .btn{margin-top:auto}
.cta-card p.sub{flex:1}

/* ---------- Chat ---------- */
.chat-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;height:100%;min-height:0}
.chat-layout.with-rail{grid-template-columns:minmax(0,1fr) 300px}
.chat-card{padding:0;display:flex;flex-direction:column;overflow:hidden;position:relative;min-height:0;border-radius:20px}
.chat-top{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap;min-height:72px}
.chat-title{display:flex;align-items:center;gap:11px;min-width:0}
.chat-title .ai-orb{width:42px;height:42px;border-radius:13px}
.chat-title h2{font-size:17px;font-weight:700;letter-spacing:-.02em}
.chat-title p{margin:2px 0 0;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px}
.chat-title p i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)}
.chat-top .btn{margin-left:auto}
.modes{display:flex;gap:6px;overflow-x:auto;padding:10px 18px;border-bottom:1px solid var(--line);scrollbar-width:none;background:var(--surface-2)}
.modes.knowledge-only{display:block}
.modes.knowledge-only .chat-knowledge-picker{display:flex;width:100%;box-sizing:border-box;margin:0;align-items:center;justify-content:space-between;gap:14px;border-radius:12px;padding:9px 11px 9px 14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 14px -12px rgba(0,0,0,.35)}
.modes.knowledge-only .chat-knowledge-picker>span{flex:none;font-size:12px;font-weight:700;color:var(--ink-2)}
.modes.knowledge-only .chat-knowledge-picker select{width:100%;max-width:none;min-width:0;flex:1}
.modes::-webkit-scrollbar{display:none}
.mode{white-space:nowrap;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:550;color:var(--muted);transition:.15s}
.mode:hover{color:var(--ink);border-color:var(--line-2)}
.mode.active{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:600}
[data-theme="dark"] .mode.active{background:var(--brand-soft-2);border-color:color-mix(in srgb,var(--brand) 55%,transparent);color:#dfe4ff}

.messages{position:relative;flex:1;min-height:0;overflow-y:auto;padding:34px 28px 10px;scroll-behavior:smooth}
.thread{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:22px;min-height:100%}
.ai-orb{width:32px;height:32px;border-radius:11px;padding:2px;background:var(--grad);flex:none;box-shadow:0 6px 16px -8px rgba(79,109,245,.8)}
.ai-orb img{width:100%;height:100%;object-fit:cover;border-radius:9px;display:block;background:#fff}
.msg{display:flex;gap:12px;animation:rise .35s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.msg.user{justify-content:flex-end}
.msg .body{min-width:0;max-width:100%}
.msg.user .bubble{
  background:var(--grad);color:#fff;padding:11px 16px;border-radius:18px 18px 5px 18px;max-width:min(560px,86%);
  white-space:pre-wrap;word-break:break-word;line-height:1.55;box-shadow:0 10px 24px -12px rgba(79,109,245,.8);
}
.msg.ai .bubble{
  background:var(--surface);border:1px solid var(--line);border-radius:5px 18px 18px 18px;padding:14px 18px;
  box-shadow:var(--shadow-sm);line-height:1.65;word-break:break-word;
}
.msg.ai .body{flex:1;max-width:calc(100% - 44px)}
.msg.error .bubble{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 30%,transparent);color:var(--red)}
.msg-actions{display:flex;gap:4px;margin:6px 0 0 4px;opacity:0;transition:opacity .2s}
.msg:hover .msg-actions,.msg-actions:focus-within{opacity:1}
@media(hover:none){.msg-actions{opacity:1}}
.act{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--muted);padding:5px 9px;border-radius:8px;font-size:12px;font-weight:550}
.act:hover{background:var(--surface-3);color:var(--ink)}
.act.on{color:var(--amber)}
.act.on .ic{fill:currentColor}

.typing{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;font-weight:500;padding:4px 2px}
.typing .dots{display:inline-flex;gap:4px}
.typing .dots i{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:bounce 1.2s infinite ease-in-out}
.typing .dots i:nth-child(2){animation-delay:.15s}.typing .dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.shimmer-text{background:linear-gradient(90deg,var(--muted) 30%,var(--ink) 50%,var(--muted) 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 1.8s linear infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

.welcome{margin:auto;text-align:center;padding:28px 0 12px;width:100%}
.welcome .ai-orb{width:74px;height:74px;border-radius:24px;margin:0 auto 20px;padding:3px;box-shadow:0 0 0 8px rgba(99,102,241,.08),0 24px 50px -16px rgba(79,109,245,.7)}
.welcome .ai-orb img{border-radius:19px}
.welcome h2{font-size:32px;font-weight:700;letter-spacing:-.045em}
.welcome h2 span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.welcome p{color:var(--muted);margin:9px auto 0;max-width:560px;line-height:1.65;font-size:15px}
.welcome .note{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:5px 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-size:12.5px;font-weight:600}
.chat-scope-notice{margin-bottom:8px;opacity:.96}
.chat-scope-notice .scope-notice{display:flex;align-items:flex-start;gap:8px;max-width:min(760px,90%);padding:10px 13px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-size:12.5px;line-height:1.55}
.chat-scope-notice .scope-notice svg{flex:0 0 auto;margin-top:2px;color:var(--brand-ink)}
.starters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:30px auto 0;max-width:780px;text-align:left}
.starter{display:flex;gap:12px;align-items:flex-start;padding:15px;border-radius:15px;border:1px solid var(--line);background:var(--surface);transition:.2s;text-align:left;min-height:70px}
.starter:hover{border-color:color-mix(in srgb,var(--brand) 50%,var(--line));transform:translateY(-1px);box-shadow:var(--shadow)}
.starter .metric-ic{width:32px;height:32px;border-radius:9px;flex:none}
.starter b{display:block;font-size:13px;font-weight:600}
.starter span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

.composer{padding:12px 28px 18px}
.composer-inner{max-width:900px;margin:0 auto}
.composer-box{
  display:flex;gap:8px;align-items:flex-end;background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:9px 9px 9px 17px;
  box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s;
}
.composer-box:focus-within{border-color:var(--brand);box-shadow:var(--ring),var(--shadow)}
.composer textarea{border:0;outline:0;resize:none;flex:1;min-height:28px;max-height:180px;padding:8px 0;background:transparent;line-height:1.55;font-size:14.5px}
.composer textarea::placeholder{color:var(--faint)}
.send{width:40px;height:40px;border-radius:13px;border:0;display:grid;place-items:center;color:#fff;background:var(--grad);flex:none;box-shadow:0 8px 18px -8px rgba(79,109,245,.8);transition:.2s}
.send:disabled{background:var(--surface-3);color:var(--faint);box-shadow:none;cursor:not-allowed}
.send:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.composer-hint{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--faint);margin:9px 6px 0}
.composer-hint span{display:inline-flex;align-items:center;gap:6px}

.rail{display:flex;flex-direction:column;gap:16px;min-height:0;overflow-y:auto}
.rail .card{padding:20px;border-radius:20px}
.rail h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:750;margin-bottom:15px}
.rail-btn{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:11px 10px;border-radius:13px;border:1px solid transparent;background:transparent;transition:.15s}
.rail-btn:hover{background:var(--surface-3)}
.rail-btn .metric-ic{width:32px;height:32px;border-radius:9px;flex:none}
.rail-btn b{display:block;font-size:13.5px;font-weight:650}
.rail-btn span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.q-item{display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;padding:9px 10px;border-radius:10px;border:0;background:transparent;color:var(--ink-2);font-size:13px;line-height:1.4}
.q-item .ic{margin-top:1px;color:var(--faint)}
.q-item:hover{background:var(--surface-3);color:var(--brand-ink)}

/* ---------- Markdown ---------- */
.md>*:first-child{margin-top:0}.md>*:last-child{margin-bottom:0}
.md p{margin:.6em 0}
.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{margin:1.2em 0 .5em;line-height:1.3;font-weight:650}
.md h1{font-size:1.3em}.md h2{font-size:1.18em}.md h3{font-size:1.06em}.md h4,.md h5,.md h6{font-size:1em}
.md ul,.md ol{margin:.6em 0;padding-left:1.4em}
.md li{margin:.25em 0}
.md li::marker{color:var(--faint)}
.md a{text-decoration:underline;text-underline-offset:2px}
.md hr{border:0;border-top:1px solid var(--line);margin:1.2em 0}
.md blockquote{margin:.8em 0;padding:.2em 0 .2em 14px;border-left:3px solid var(--brand);color:var(--muted)}
.md strong{font-weight:650}
.md-inline-code{font-family:var(--mono);font-size:.86em;background:var(--surface-3);border:1px solid var(--line);padding:1px 6px;border-radius:6px}
.md-code{margin:.8em 0;padding:14px 16px;border-radius:12px;background:#0b1024;color:#dbe4ff;overflow:auto;font-size:12.5px;line-height:1.65;border:1px solid rgba(255,255,255,.06)}
.md-code code{font-family:var(--mono)}
.md-table{margin:.9em 0;overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.md-table table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.md-table th,.md-table td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.md-table th{background:var(--surface-2);color:var(--muted);font-size:11.5px;font-weight:650;text-transform:uppercase;letter-spacing:.04em}
.md-table tr:last-child td{border-bottom:0}
.md-table tbody tr:hover td{background:var(--surface-2)}

/* ---------- Tables ---------- */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.table{width:100%;border-collapse:collapse;min-width:680px}
.table th,.table td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
.table th{color:var(--muted);background:var(--surface-2);font-size:11.5px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0}
.table tbody tr{transition:background .15s}
.table tbody tr:hover{background:var(--surface-2)}
.table tbody tr:last-child td{border-bottom:0}
.table td small{color:var(--muted)}
.cell-user{display:flex;align-items:center;gap:11px}
.cell-user .avatar{width:32px;height:32px;border-radius:10px;font-size:13px}
.cell-file{display:flex;align-items:center;gap:11px;font-weight:600}
.file-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink);flex:none}
.row-end{text-align:right!important}
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar .cmd{max-width:340px;flex:1}
.toolbar .cmd input{padding-right:14px}

.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--surface-3);color:var(--muted)}
.cap{text-transform:capitalize}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.red{background:var(--red-soft);color:var(--red)}
.badge.amber{background:var(--amber-soft);color:var(--amber)}
.badge.blue{background:var(--brand-soft);color:var(--brand-ink)}
.badge.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

.empty{padding:56px 20px;text-align:center;color:var(--muted)}
.empty .metric-ic{margin:0 auto 14px;width:52px;height:52px;border-radius:16px}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.empty p{margin:0 auto;max-width:360px}

.skel{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:shimmer2 1.4s infinite;border-radius:8px;height:14px}
@keyframes shimmer2{from{background-position:200% 0}to{background-position:-200% 0}}
.skel-rows{padding:18px;display:grid;gap:16px}

/* ---------- Saved answers ---------- */
.saved-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px}
.saved-card{display:flex;flex-direction:column;gap:12px}
.saved-card .q{display:flex;gap:10px;align-items:flex-start;font-weight:650;font-size:14.5px;letter-spacing:-.01em}
.saved-card .q .ic{color:var(--amber);fill:currentColor;margin-top:2px}
.saved-card .a{color:var(--ink-2);max-height:230px;overflow:auto;padding-right:6px;font-size:13.5px}
.saved-card .foot{display:flex;justify-content:flex-end;margin-top:auto}

/* ---------- Upload ---------- */
.drop{border:1.5px dashed var(--line-2);background:var(--surface-2);border-radius:18px;padding:44px 20px;text-align:center;transition:.2s;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-soft)}
.drop .metric-ic{margin:0 auto 14px;width:52px;height:52px;border-radius:16px}
.drop strong{display:block;font-size:16px;font-weight:650}
.drop p{color:var(--muted);margin:5px 0 16px}
.file-list{display:grid;gap:8px;margin-top:16px}
.file-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);padding:10px 12px;border-radius:12px;background:var(--surface);animation:rise .25s}
.file-row .name{display:flex;align-items:center;gap:11px;min-width:0;font-weight:550}
.file-row .name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}

/* ---------- Account ---------- */
.profile{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.profile h2{font-size:20px;font-weight:700}
.profile p{margin:3px 0 8px;color:var(--muted)}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.kv .k{font-size:12px;color:var(--muted);font-weight:600}
.kv .v{margin-top:5px;font-weight:600}
.note-box{display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:13px 15px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-size:12.5px;line-height:1.6}

/* ---------- Modal / Toast ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(6,10,25,.55);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;z-index:50;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{width:min(520px,100%);background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow-lg);animation:pop .25s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.modal-head h2{font-size:19px;font-weight:700}
.modal p.sub{color:var(--muted);margin:0 0 6px;line-height:1.6}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.modal .warn{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--red-soft);color:var(--red);margin-bottom:14px}

.toasts{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none;max-width:calc(100vw - 40px)}
.toast{
  pointer-events:auto;display:flex;gap:11px;align-items:flex-start;max-width:420px;padding:12px 15px;border-radius:14px;font-size:13px;font-weight:500;line-height:1.45;
  background:var(--ink);color:var(--bg);box-shadow:var(--shadow-lg);white-space:pre-line;animation:toast-in .3s cubic-bezier(.2,.9,.3,1.2);
}
.toast .ic{margin-top:1px;color:#34d399}
.toast.error .ic{color:#fb7185}
.toast.out{opacity:0;transform:translateY(8px);transition:.25s}
@keyframes toast-in{from{opacity:0;transform:translateY(12px) scale(.96)}}

/* ---------- Responsive ---------- */
@media(max-width:1280px){
  .chat-layout.with-rail{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
}
@media(max-width:1100px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two,.three{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  .auth-art{display:none}
  .auth-panel{min-height:100vh}
}
@media(max-width:1180px){.hero-stage{display:none}}

/* Sidebar -> bottom menu.
   Covers phones in any orientation (<=820px) AND iPads in portrait up to
   1024px (iPad mini/Air/10th-gen top out at 820-834px portrait, but the
   11" and 12.9" iPad Pro are 834px/1024px portrait — without the second
   clause those fell through to the desktop sidebar layout, which is what
   was covering/blocking content on iPad in portrait). */
@media(max-width:900px), (orientation:portrait) and (max-width:1024px){
  :root{
    /* Real height of the bottom bar: icon row + its own padding + the
       device's home-indicator safe area. Every element that needs to sit
       above the bar (page content, floating pills, the chat layout) reads
       from this one variable instead of a guessed pixel number, so nothing
       ends up hidden behind the bar on devices with a taller safe area. */
    --bottom-nav-h:calc(58px + env(safe-area-inset-bottom));
  }
  .portal{grid-template-columns:1fr}
  .sidebar{
    position:fixed;inset:auto 0 0 0;top:auto;height:auto;z-index:30;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    flex-direction:row;border-right:0;border-top:1px solid var(--line);background:var(--glass);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    transition:background .2s ease,border-color .2s ease;
  }
  .side-brand,.nav-label,.nav-item span{display:none}
  .nav{
    flex:1;min-width:0;flex-direction:row;overflow-x:auto;overflow-y:hidden;margin:0;padding:0 12px;gap:4px;
    scrollbar-width:none;justify-content:center;
    /* Fade the edges so it's visually obvious there are more icons to
       scroll to, instead of the row looking like it simply ends. */
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  }
  .nav::-webkit-scrollbar{display:none}
  .nav-item{width:52px;min-width:52px;flex:0 0 52px;padding:11px 8px;justify-content:center;transition:background .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1)}
  .nav-item:active{transform:scale(.92)}
  .side-bottom{display:flex;align-items:center;border:0;margin:0;padding:0;gap:4px}
  .side-bottom .user-mini{display:none}
  .side-bottom #logout{width:52px;min-width:52px;flex:0 0 52px;padding:11px 8px;justify-content:center;margin:0}
  .side-bottom #logout span{display:none}
  .nav-item.active::before{left:12px;right:12px;top:auto;bottom:0;width:auto;height:3px;border-radius:3px 3px 0 0;transition:left .2s cubic-bezier(.4,0,.2,1),right .2s cubic-bezier(.4,0,.2,1)}
  .main{padding-bottom:var(--bottom-nav-h)}
  .topbar{padding:0 14px;gap:10px}
  .cmd kbd{display:none}.cmd input{padding-right:14px}
  .top-actions .badge{display:none}
  .content{padding:18px 16px 30px}
  .content.is-chat{padding:10px}
  .chat-layout{height:calc(100dvh - var(--topbar-h) - var(--bottom-nav-h) - 20px);min-height:420px}
  .messages{padding:18px 12px 6px}
  .composer{padding:8px 10px 12px}
  .composer-hint{display:none}
  .chat-top{flex-wrap:nowrap;padding:12px 14px}
  .chat-title{flex:1}
  .chat-title p{display:none}
  .modes{padding:9px 14px}
  .starters{grid-template-columns:1fr;gap:8px;margin-top:18px}
  .starter{padding:11px 12px}
  .welcome{padding-top:6px}
  .welcome .ai-orb{width:52px;height:52px;border-radius:17px;margin-bottom:12px}
  .welcome .ai-orb img{border-radius:14px}
  .welcome h2{font-size:24px}
  .msg.user .bubble{max-width:92%}
  .page-head h1{font-size:22px}
  .login-card{padding:28px 22px}
  .kv{grid-template-columns:1fr}
}

/* Tablet portrait (iPad mini/Air/Pro and similarly-sized Android tablets):
   there's enough width to show every nav item with its label as a real
   bottom menu instead of a bare icon strip, so it wraps into rows rather
   than scrolling. Capped height + internal scroll keeps it from eating
   the whole screen if an admin account has every group visible. */
@media (min-width:641px) and (orientation:portrait) and (max-width:1024px){
  :root{--bottom-nav-h:min(34vh,240px)}
  .sidebar{
    flex-direction:column;flex-wrap:wrap;align-content:flex-start;
    height:var(--bottom-nav-h);max-height:var(--bottom-nav-h);
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  }
  .nav{
    flex:1 1 auto;flex-direction:row;flex-wrap:wrap;align-content:flex-start;
    overflow-x:hidden;overflow-y:auto;justify-content:flex-start;gap:4px 6px;
    -webkit-mask-image:none;mask-image:none;
  }
  .nav-label{display:block;flex:1 0 100%;padding:10px 6px 4px;font-size:9.5px}
  .nav-label:first-child{padding-top:2px}
  .nav-item{
    width:auto;min-width:0;flex:0 1 auto;flex-direction:column;gap:4px;
    padding:8px 10px;border-radius:12px;
  }
  .nav-item span{display:block;font-size:9.5px;font-weight:600;white-space:nowrap}
  .side-bottom{flex:0 0 auto;align-self:flex-start}
}

@media(max-width:520px){.cards{grid-template-columns:1fr}.metric{font-size:30px}.chat-top .btn span{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------- Learning quiz ---------- */
.quiz-head{display:flex;align-items:center;gap:12px;margin:0 0 16px;flex-wrap:wrap}
.quiz-question{margin-bottom:14px;line-height:1.55}
.quiz-options{display:grid;gap:8px;margin-top:14px}
.quiz-options label{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--surface-2)}
.quiz-options label:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.quiz-options input{margin-top:3px;accent-color:var(--brand)}
.quiz-question.correct{border-color:color-mix(in srgb,var(--green) 50%,var(--line))}.quiz-question.incorrect{border-color:color-mix(in srgb,var(--red) 50%,var(--line))}
.quiz-feedback{margin-top:13px;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:13px}
.quiz-feedback b{display:block;margin-bottom:3px}.quiz-feedback span{color:var(--muted)}
.quiz-score{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.quiz-score b{font-size:20px}.quiz-score span{color:var(--muted)}.quiz-score .btn{margin-left:auto}





/* Admin dashboard typography — match the standard Data Insights/page header */
.page-head:has(+ .admin-dashboard) h1{
  color:var(--ink);
  font-family:var(--font);
  font-weight:700;
  letter-spacing:-.035em;
}
.page-head:has(+ .admin-dashboard) p{
  color:var(--muted);
  font-family:var(--font);
}

/* =========================================================
   RetailIQ — Premium KPI Admin Dashboard
   ========================================================= */
.admin-range{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}.admin-range-sep{opacity:.45}.admin-live-dot{width:7px;height:7px;border-radius:50%;background:#20c997;box-shadow:0 0 0 4px rgba(32,201,151,.12)}
.admin-dashboard{display:grid;gap:16px}.admin-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.admin-kpi{position:relative;min-height:148px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}.admin-kpi:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-42px;bottom:-50px;opacity:.08}.admin-kpi.kpi-blue:after{background:#4c8dff}.admin-kpi.kpi-purple:after{background:#9b7cff}.admin-kpi.kpi-green:after{background:#20c997}.admin-kpi.kpi-amber:after{background:#f0ad4e}.admin-kpi.kpi-cyan:after{background:#20c9d9}.admin-kpi-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.01em}.admin-kpi-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--soft);color:var(--text)}.kpi-blue .admin-kpi-icon{color:#4c8dff}.kpi-purple .admin-kpi-icon{color:#9b7cff}.kpi-green .admin-kpi-icon{color:#20a879}.kpi-amber .admin-kpi-icon{color:#d89428}.kpi-cyan .admin-kpi-icon{color:#149eae}.admin-kpi-value{font-size:31px;line-height:1.1;font-weight:850;letter-spacing:-.03em;margin-top:17px;color:var(--text)}.admin-kpi-meta{font-size:11px;color:var(--muted);margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-main-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(230px,.8fr) minmax(260px,1fr);gap:16px}.admin-bottom-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px}.admin-panel{min-width:0;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow);padding:18px}.admin-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.admin-panel-head h3{margin:0;font-size:15px;letter-spacing:-.01em}.admin-panel-head p{margin:5px 0 0;color:var(--muted);font-size:11px}.admin-panel-badge{font-size:10px;font-weight:800;color:var(--muted);padding:6px 9px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}.admin-chart{min-height:225px;display:flex;flex-direction:column;justify-content:flex-end}.admin-bars{height:205px;display:grid;grid-template-columns:repeat(7,1fr);gap:12px;align-items:end;border-bottom:1px solid var(--line);padding:8px 4px 0}.admin-bar-day{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;color:var(--muted);font-size:10px}.admin-bar-stack{width:100%;height:175px;display:flex;align-items:flex-end;justify-content:center;gap:3px}.admin-bar-stack span{display:block;width:10px;min-height:2px;border-radius:5px 5px 2px 2px;transition:height .35s ease}.admin-bar-query{background:#7c6df2}.admin-bar-answer{background:#2dbd91}.admin-chart-legend{display:flex;gap:16px;padding-top:12px;color:var(--muted);font-size:10px;font-weight:700}.legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.legend-dot.query{background:#7c6df2}.legend-dot.answer{background:#2dbd91}.admin-activity,.admin-category-list{display:grid;gap:12px}.admin-activity-row{display:grid;grid-template-columns:88px 1fr 28px;gap:9px;align-items:center}.admin-activity-row>div:first-child{display:flex;flex-direction:column}.admin-activity-row strong{font-size:11px}.admin-activity-row span{font-size:9px;color:var(--muted);margin-top:2px}.admin-activity-row>b,.admin-cat-name>b,.admin-topcat>b{font-size:11px;text-align:right}.admin-mini-track{height:6px;border-radius:99px;background:var(--soft);overflow:hidden}.admin-mini-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6d63dc,#58bfa0)}.admin-cat-row{display:grid;gap:6px}.admin-cat-name{display:flex;justify-content:space-between;gap:8px;font-size:11px}.admin-cat-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-attention{width:100%;display:grid;grid-template-columns:34px 1fr 32px;gap:10px;align-items:center;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;padding:10px 0;cursor:pointer;color:var(--text)}.admin-attention:last-child{border-bottom:0}.admin-attention>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.admin-attention strong{font-size:11px}.admin-attention small{font-size:9px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-attention>b{font-size:11px;text-align:right}.attention-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center}.attention-icon.amber{background:rgba(240,173,78,.13);color:#d89428}.attention-icon.red{background:rgba(235,87,87,.12);color:#d94d4d}.attention-icon.blue{background:rgba(76,141,255,.12);color:#4c8dff}.admin-topcat{display:grid;grid-template-columns:22px minmax(70px,1fr) 70px 28px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.admin-topcat:last-child{border-bottom:0}.admin-rank{width:21px;height:21px;display:grid;place-items:center;border-radius:7px;background:var(--soft);font-size:9px;font-weight:800;color:var(--muted)}.admin-topcat-name{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-status-row{display:grid;grid-template-columns:9px 1fr auto;gap:9px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:11px}.admin-status-row:last-child{border-bottom:0}.status-dot{width:7px;height:7px;border-radius:50%}.status-dot.ok{background:#20b486;box-shadow:0 0 0 4px rgba(32,180,134,.10)}.status-dot.warn{background:#e3a33b;box-shadow:0 0 0 4px rgba(227,163,59,.10)}.admin-status-row b{font-size:10px;color:var(--muted)}.admin-empty{min-height:80px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:11px}.admin-success-empty{display:flex;justify-content:center;gap:7px;align-items:center;color:#20a879}.admin-system-panel{min-height:180px}
@media(max-width:1200px){.admin-kpis{grid-template-columns:repeat(3,1fr)}.admin-main-grid{grid-template-columns:1.4fr 1fr}.admin-main-grid>.admin-panel:last-child{grid-column:1/-1}.admin-bottom-grid{grid-template-columns:1fr 1fr}.admin-system-panel{grid-column:1/-1}}@media(max-width:820px){.admin-kpis{grid-template-columns:repeat(2,1fr)}.admin-main-grid,.admin-bottom-grid{grid-template-columns:1fr}.admin-main-grid>.admin-panel:last-child,.admin-system-panel{grid-column:auto}.admin-range{display:none}}@media(max-width:520px){.admin-kpis{grid-template-columns:1fr}.admin-kpi{min-height:132px}.admin-bars{gap:5px}.admin-bar-stack span{width:7px}.admin-topcat{grid-template-columns:22px minmax(55px,1fr) 55px 25px}.admin-panel{padding:14px}.admin-activity-row{grid-template-columns:76px 1fr 25px}}

/* Live operational health diagnostics */
.admin-health-summary{display:flex;align-items:center;gap:9px;padding:10px 11px;margin-bottom:9px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025)}
.admin-health-summary strong{font-size:13px}.admin-health-summary small{margin-left:auto;color:var(--muted);font-size:10px}
.admin-health-summary.attention{border-color:rgba(245,158,11,.28)}
.admin-status-row{min-height:40px}
.admin-status-row>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}
.admin-status-row small{color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.admin-status-row .status-dot.muted{opacity:.45}
.admin-health-issues{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.admin-health-issues-title{font-size:11px;font-weight:700;margin-bottom:6px;color:var(--muted)}
.admin-health-issue{display:flex;justify-content:space-between;gap:8px;padding:5px 0;font-size:10px}.admin-health-issue span{font-weight:650}.admin-health-issue small{color:var(--muted)}
.admin-health-noissues{font-size:10px;color:var(--muted);padding-top:9px}

/* Compact System Status panel — keep aligned with dashboard peers and scroll diagnostics */
.admin-system-panel{height:360px;min-height:360px;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden}
.admin-system-panel .admin-panel-head{flex:0 0 auto;margin-bottom:10px}
.admin-system-panel #systemStatus{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:6px;scrollbar-width:thin}
.admin-system-panel #systemStatus::-webkit-scrollbar{width:5px}
.admin-system-panel #systemStatus::-webkit-scrollbar-track{background:transparent}
.admin-system-panel #systemStatus::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.admin-system-panel .admin-health-summary{padding:8px 0;margin-bottom:2px}
.admin-system-panel .admin-status-row{padding:8px 0}
.admin-system-panel .admin-health-issues{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.admin-system-panel .admin-health-issues-title{font-size:10px;font-weight:800;color:var(--muted);margin-bottom:4px}
.admin-system-panel .admin-health-issue{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.admin-system-panel .admin-health-issue:last-child{border-bottom:0}
.admin-system-panel .admin-health-issue span{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-system-panel .admin-health-issue small{font-size:9px;color:var(--muted);white-space:nowrap}
.admin-system-panel .admin-health-noissues{font-size:10px;color:var(--muted);padding-top:8px}
@media(max-width:820px){.admin-system-panel{height:380px;min-height:380px}}
@media(max-width:520px){.admin-system-panel{height:420px;min-height:420px}}

/* ==========================================================================
   RetailIQ AI — Transparent login mascot
   The mascot is a real transparent PNG; no white image/card background is used.
   ========================================================================== */
.auth-art .hero-stage{
  width:clamp(270px,22vw,410px);
  right:clamp(18px,3.5vw,58px);
  top:52%;
  bottom:auto;
  translate:0 -50%;
  pointer-events:none;
}
.auth-art .hero-card.mascot-card{
  position:relative;
  width:100%;
  aspect-ratio:auto;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  padding:0;
  display:block;
  animation:mascotFloat 6s ease-in-out infinite;
  isolation:isolate;
}
.auth-art .mascot-card img{
  position:relative;
  z-index:3;
  width:100%;
  height:auto;
  max-height:72vh;
  object-fit:contain;
  object-position:center;
  display:block;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.48));
  transition:filter .45s ease,transform .45s ease;
}
.auth-art .mascot-ring{
  position:absolute;
  z-index:1;
  inset:9% 7% 5%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(20,139,255,.20) 0%,rgba(20,139,255,.08) 36%,transparent 68%);
  filter:blur(20px);
  opacity:.8;
  animation:mascotAmbient 5s ease-in-out infinite;
}
.auth-art .mascot-glow{
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  filter:blur(30px);
  mix-blend-mode:screen;
}
.auth-art .mascot-glow-blue{
  inset:12% 8% 4%;
  background:radial-gradient(circle,rgba(0,132,255,.48) 0%,rgba(0,132,255,.20) 34%,transparent 68%);
  animation:mascotBlueGlow 4.2s ease-in-out infinite alternate;
}
.auth-art .mascot-glow-green{
  inset:17% 2% 10%;
  background:radial-gradient(circle,rgba(16,245,150,.38) 0%,rgba(16,245,150,.12) 30%,transparent 66%);
  animation:mascotGreenGlow 4.8s ease-in-out infinite alternate;
}
.auth-art .hero-stage:hover .mascot-glow-blue{
  animation:mascotBlueHover 1.8s ease-in-out infinite alternate;
}
.auth-art .hero-stage:hover .mascot-glow-green{
  animation:mascotGreenHover 1.6s ease-in-out infinite alternate;
}
.auth-art .hero-stage:hover .mascot-card img{
  transform:translateY(-4px) scale(1.018);
  filter:drop-shadow(0 0 10px rgba(0,180,255,.45)) drop-shadow(0 0 22px rgba(0,255,155,.28)) drop-shadow(0 26px 36px rgba(0,0,0,.5));
}
@keyframes mascotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes mascotAmbient{0%,100%{opacity:.62;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
@keyframes mascotBlueGlow{from{opacity:.52;transform:scale(.94)}to{opacity:.95;transform:scale(1.06)}}
@keyframes mascotGreenGlow{from{opacity:.28;transform:translateX(10px) scale(.92)}to{opacity:.72;transform:translateX(-6px) scale(1.06)}}
@keyframes mascotBlueHover{from{opacity:.65;transform:scale(.94)}to{opacity:1;transform:scale(1.1)}}
@keyframes mascotGreenHover{from{opacity:.42;transform:translateX(8px) scale(.94)}to{opacity:.95;transform:translateX(-8px) scale(1.1)}}

/* Login card closer to the supplied futuristic reference while preserving the existing form. */
.auth-panel{background:radial-gradient(700px 500px at 50% 42%,rgba(20,115,255,.12),transparent 66%),#050b18}
[data-theme="light"] .auth-panel{background:radial-gradient(700px 500px at 50% 42%,rgba(20,115,255,.08),transparent 66%),var(--bg)}
.login-card{width:min(500px,100%);padding:38px 42px;border-radius:24px}
.login-card .brand{justify-content:center;text-align:center;margin-bottom:10px}
.login-card .brand-mark{display:none}
.login-card .brand-name{font-size:32px;font-weight:800;letter-spacing:-.045em;color:#f4f7ff}
.login-card .brand-name b{background:linear-gradient(100deg,#fff 0%,#fff 48%,#18a8ff 70%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-card .brand-sub{display:none}
.login-card h2{text-align:center;font-size:17px;font-weight:500;color:#aebbd7;letter-spacing:0;margin:3px 0 24px}
.login-card>p{display:none}
.login-card .login-links{justify-content:flex-end}
[data-theme="dark"] .login-card{background:rgba(7,18,38,.72);border-color:rgba(108,190,255,.25);box-shadow:0 30px 90px rgba(0,0,0,.42),0 0 55px rgba(0,126,255,.10);}
[data-theme="dark"] .login-card::before{background:conic-gradient(from 0deg,rgba(0,123,255,.72),rgba(0,255,167,.55),rgba(0,174,255,.75),rgba(0,123,255,.72))}
[data-theme="dark"] .login-card:hover::before,[data-theme="dark"] .login-card:focus-within::before{opacity:.85}
.auth .btn-primary{background:linear-gradient(100deg,#0877ff 0%,#0e9cff 45%,#20dc91 100%);box-shadow:0 12px 28px rgba(0,137,255,.22)}
.auth .btn-primary:hover:not(:disabled){filter:saturate(1.08) brightness(1.05);transform:translateY(-1px)}

@media(max-width:1200px){
  .auth{grid-template-columns:minmax(0,1fr) minmax(400px,.82fr)}
  .auth-art .hero-stage{width:clamp(245px,24vw,340px);right:8px}
  .hero{padding-right:220px}
}
@media(max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-art{min-height:560px;padding:30px 28px 24px}
  .auth-body{align-items:flex-start;padding-top:22px}
  .hero{padding-right:0;max-width:430px}
  .hero h1{font-size:42px}
  .auth-art .hero-stage{width:250px;right:2%;top:51%;opacity:.9}
  .feature-list{max-width:320px}
  .auth-panel{min-height:520px;padding:30px 20px}
  .login-card{width:min(500px,100%)}
}
@media(max-width:620px){
  .auth-art{min-height:500px;padding:24px 20px 20px}
  .auth-art .brand-sub{display:none}
  .hero h1{font-size:34px;margin-top:14px}
  .hero p{font-size:14px;max-width:300px}
  .feature-list{display:none}
  .auth-art .hero-stage{width:230px;right:-24px;top:58%;opacity:.76}
  .auth-art .chip-float{display:none}
  .auth-panel{min-height:0;padding:22px 14px 28px}
  .login-card{padding:30px 22px;border-radius:20px}
  .login-card .brand-name{font-size:28px}
}
@media(prefers-reduced-motion:reduce){
  .auth-art .mascot-card img,.auth-art .mascot-ring,.auth-art .mascot-glow,.auth-art .hero-stage{animation:none!important}
}


/* ============================================================================
   RetailIQ AI — Exact reference login composition
   Scoped to .auth-reference. Backend/API behavior is untouched.
   ============================================================================ */
.auth.auth-reference{
  min-height:100vh;
  height:100vh;
  overflow:hidden;
  display:grid;
  grid-template-columns:55.6% 44.4%;
  background:#020816;
}
.auth-reference .auth-art{
  position:relative;
  min-width:0;
  min-height:100vh;
  height:100vh;
  overflow:hidden;
  padding:0;
  color:#eef5ff;
  background:
    radial-gradient(620px 540px at 46% 43%,rgba(0,122,255,.18),transparent 67%),
    radial-gradient(520px 500px at 92% 5%,rgba(0,82,255,.27),transparent 65%),
    radial-gradient(460px 420px at 5% 85%,rgba(0,160,255,.16),transparent 67%),
    #020817;
}
.auth-reference .auth-art::before{
  content:"";
  position:absolute;
  inset:-22%;
  z-index:0;
  opacity:1;
  filter:none;
  background:
    radial-gradient(700px 700px at 52% 48%,transparent 46%,rgba(0,122,255,.10) 47%,transparent 48%),
    radial-gradient(880px 880px at 50% 48%,transparent 57%,rgba(0,116,255,.12) 57.2%,transparent 58%),
    radial-gradient(1060px 1060px at 48% 46%,transparent 65%,rgba(0,100,255,.09) 65.2%,transparent 66%),
    radial-gradient(420px 330px at 8% 50%,rgba(0,105,255,.13),transparent 68%);
  animation:referenceAurora 14s ease-in-out infinite alternate;
}
.auth-reference .auth-art::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:1;
  background:
    radial-gradient(circle at 12% 18%,rgba(0,180,255,.9) 0 1px,transparent 1.8px),
    radial-gradient(circle at 82% 15%,rgba(0,220,255,.65) 0 1px,transparent 1.8px),
    radial-gradient(circle at 73% 67%,rgba(0,255,170,.65) 0 1px,transparent 1.8px),
    radial-gradient(circle at 23% 72%,rgba(0,130,255,.75) 0 1px,transparent 1.8px);
  background-size:130px 120px,180px 160px,210px 180px,160px 140px;
  mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%);
  pointer-events:none;
}
@keyframes referenceAurora{from{transform:translate3d(-1.5%,0,0) scale(1)}to{transform:translate3d(1.5%,-1%,0) scale(1.035)}}
.auth-reference .particles{position:absolute;inset:0;z-index:2;pointer-events:none}
.auth-reference .particles i{width:3px;height:3px;background:#8ed7ff;box-shadow:0 0 8px 2px rgba(0,160,255,.75)}
.auth-reference .hero-stage{
  position:absolute;
  z-index:4;
  left:8.5%;
  right:auto;
  top:6.5%;
  bottom:auto;
  width:min(46vw,690px);
  translate:0 0;
  pointer-events:auto;
}
.auth-reference .hero-stage::before{display:none}
.auth-reference .hero-card.mascot-card{
  width:100%;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  padding:0;
  animation:referenceMascotFloat 6s ease-in-out infinite;
}
.auth-reference .mascot-card img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  display:block;
  filter:
    drop-shadow(0 0 5px rgba(0,177,255,.70))
    drop-shadow(0 0 13px rgba(0,110,255,.46))
    drop-shadow(0 0 9px rgba(0,255,160,.30))
    drop-shadow(0 25px 34px rgba(0,0,0,.48));
  transition:filter .45s ease,transform .45s ease;
}
@keyframes referenceMascotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.auth-reference .mascot-ring{
  inset:7% 3% 4%;
  background:radial-gradient(circle,rgba(0,140,255,.25),rgba(0,140,255,.08) 38%,transparent 68%);
  filter:blur(34px);
  opacity:.85;
}
.auth-reference .mascot-glow{filter:blur(34px);mix-blend-mode:screen}
.auth-reference .mascot-glow-blue{
  inset:7% 1% 3%;
  background:radial-gradient(ellipse at 44% 46%,rgba(0,155,255,.50),rgba(0,90,255,.20) 38%,transparent 69%);
  animation:referenceBlue 3.8s ease-in-out infinite alternate;
}
.auth-reference .mascot-glow-green{
  inset:10% -1% 6%;
  background:radial-gradient(ellipse at 70% 47%,rgba(0,255,157,.36),rgba(0,230,140,.12) 35%,transparent 66%);
  animation:referenceGreen 4.1s ease-in-out infinite alternate;
}
@keyframes referenceBlue{from{opacity:.55;transform:scale(.96)}to{opacity:.92;transform:scale(1.04)}}
@keyframes referenceGreen{from{opacity:.25;transform:translateX(7px) scale(.95)}to{opacity:.72;transform:translateX(-5px) scale(1.04)}}
.auth-reference .hero-stage:hover .mascot-card img{
  transform:scale(1.012) translateY(-3px);
  filter:
    drop-shadow(0 0 8px rgba(0,180,255,.95))
    drop-shadow(0 0 18px rgba(0,112,255,.72))
    drop-shadow(0 0 18px rgba(0,255,157,.66))
    drop-shadow(0 25px 34px rgba(0,0,0,.50));
}
.auth-reference .hero-stage:hover .mascot-glow-blue{animation:referenceBlueHover 1.2s ease-in-out infinite alternate}
.auth-reference .hero-stage:hover .mascot-glow-green{animation:referenceGreenHover 1.1s ease-in-out infinite alternate}
@keyframes referenceBlueHover{from{opacity:.7;transform:scale(.98)}to{opacity:1;transform:scale(1.08)}}
@keyframes referenceGreenHover{from{opacity:.45;transform:translateX(4px) scale(.98)}to{opacity:1;transform:translateX(-5px) scale(1.08)}}
.auth-reference .login-visual-copy{
  position:absolute;
  z-index:5;
  left:4.1%;
  bottom:5.8%;
  width:92%;
  pointer-events:none;
}
.auth-reference .login-tagline{
  font-size:clamp(27px,2.25vw,36px);
  line-height:1.12;
  font-weight:500;
  letter-spacing:-.035em;
  color:#eef5ff;
  text-shadow:0 3px 24px rgba(0,0,0,.35);
}
.auth-reference .login-tagline span{
  color:#08d4ff;
  font-weight:650;
}
.auth-reference .login-benefits{
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:28px;
  color:#b8c8e7;
  font-size:15px;
  font-weight:500;
}
.auth-reference .login-benefits>div{display:flex;align-items:center;gap:12px;white-space:nowrap}
.auth-reference .login-benefits .ic{width:25px;height:25px;color:#00c8ff;stroke-width:1.8}
.auth-reference .login-benefits i{width:1px;height:24px;background:rgba(170,194,230,.38);display:block}
.auth-reference .auth-orbit,.auth-reference .auth-wave{position:absolute;pointer-events:none;z-index:1}
.auth-reference .auth-orbit-a{
  width:820px;height:820px;left:-230px;top:-70px;border-radius:50%;
  border:1px solid rgba(0,132,255,.14);box-shadow:0 0 0 36px rgba(0,105,255,.035),0 0 0 92px rgba(0,105,255,.025);
}
.auth-reference .auth-orbit-b{
  width:680px;height:680px;left:-155px;top:65px;border-radius:50%;border:1px solid rgba(0,207,255,.08)
}
.auth-reference .auth-orbit-a{transform-origin:50% 50%;animation:authOrbitA 18s linear infinite}
.auth-reference .auth-orbit-b{transform-origin:50% 50%;animation:authOrbitB 13s linear infinite reverse}
@keyframes authOrbitA{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes authOrbitB{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.auth-reference .auth-wave-a{
  width:900px;height:260px;left:-170px;bottom:-115px;border-top:1px solid rgba(0,155,255,.24);border-radius:50%;transform:rotate(-6deg);box-shadow:0 -16px 0 rgba(0,155,255,.04),0 -32px 0 rgba(0,155,255,.025),0 -48px 0 rgba(0,155,255,.02)
}
.auth-reference .auth-wave-b{
  width:720px;height:180px;left:80px;bottom:-105px;border-top:1px solid rgba(0,225,255,.15);border-radius:50%;transform:rotate(-4deg)
}
.auth-reference .auth-panel{
  position:relative;
  min-width:0;
  min-height:100vh;
  height:100vh;
  padding:0 4.6vw;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(620px 520px at 58% 48%,rgba(0,94,255,.14),transparent 68%),
    radial-gradient(450px 360px at 96% 45%,rgba(0,242,170,.08),transparent 70%),
    #020817;
}
.auth-reference .auth-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 500px at 50% 50%,rgba(0,107,255,.09),transparent 67%);pointer-events:none}
.auth-reference .auth-panel::after{
  content:"";position:absolute;inset:-24%;pointer-events:none;z-index:0;opacity:.86;
  background:
    radial-gradient(3px 3px at 8% 18%,rgba(255,255,255,.95),transparent 70%),
    radial-gradient(2px 2px at 21% 64%,rgba(116,203,255,.92),transparent 70%),
    radial-gradient(3px 3px at 36% 28%,rgba(255,255,255,.78),transparent 70%),
    radial-gradient(2px 2px at 49% 76%,rgba(84,181,255,.9),transparent 70%),
    radial-gradient(3px 3px at 63% 19%,rgba(255,255,255,.88),transparent 70%),
    radial-gradient(2px 2px at 77% 57%,rgba(116,203,255,.9),transparent 70%),
    radial-gradient(3px 3px at 91% 31%,rgba(255,255,255,.82),transparent 70%),
    radial-gradient(2px 2px at 84% 84%,rgba(84,181,255,.78),transparent 70%),
    radial-gradient(280px 220px at 52% 42%,rgba(42,116,255,.12),transparent 72%);
  background-size:100% 100%;
  will-change:transform,background-position;
  animation:authStarsDrift 9s ease-in-out infinite alternate,authStarsTwinkle 3.8s ease-in-out infinite;
}
@keyframes authStarsDrift{
  0%{transform:translate3d(-70px,34px,0) scale(1.02);background-position:0 0}
  25%{transform:translate3d(42px,-26px,0) scale(1.055);background-position:45px -28px}
  50%{transform:translate3d(78px,18px,0) scale(1.08);background-position:105px 22px}
  75%{transform:translate3d(-35px,-42px,0) scale(1.045);background-position:-55px -48px}
  100%{transform:translate3d(-88px,30px,0) scale(1.02);background-position:-105px 34px}
}
@keyframes authStarsTwinkle{
  0%,100%{opacity:.68}
  45%{opacity:.98}
  70%{opacity:.78}
}

.auth-reference .auth-theme{display:none}
.auth-reference .login-card{
  position:relative;
  z-index:3;
  width:min(610px,100%);
  height:auto;
  min-height:0;
  max-height:calc(100dvh - 20px);
  box-sizing:border-box;
  padding:30px 46px 22px;
  border-radius:26px;
  background:linear-gradient(145deg,rgba(11,29,57,.88),rgba(4,17,37,.72));
  border:1px solid rgba(93,183,255,.72);
  box-shadow:
    0 0 0 1px rgba(0,130,255,.08),
    0 0 28px rgba(0,120,255,.10),
    0 30px 80px rgba(0,0,0,.35);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  --mx:50%;--my:0%;
}

.auth-reference .login-card{overflow:hidden;overflow-x:hidden;scrollbar-width:none;}
.auth-reference .login-card::-webkit-scrollbar{width:0;height:0}
.auth-reference .login-card::before{
  content:"";position:absolute;inset:-1px;border-radius:23px;z-index:-1;padding:1px;
  background:linear-gradient(135deg,rgba(0,175,255,.85),rgba(85,100,255,.55) 45%,rgba(0,255,165,.65));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.85;animation:none;
}
.auth-reference .login-card::after{opacity:0;background:radial-gradient(280px circle at var(--mx) var(--my),rgba(0,172,255,.16),transparent 70%);z-index:0}
.auth-reference .login-card:hover::after{opacity:1}
.auth-reference .reference-logo{
  position:relative;z-index:2;
  text-align:center;color:#f7f9ff;font-size:44px;line-height:1;font-weight:800;letter-spacing:-.055em;
}
.auth-reference .reference-logo span{color:#16a9ff}
.auth-reference .reference-logo-line{width:92px;height:6px;border-radius:99px;background:#ffc400;margin:16px auto 22px;box-shadow:0 0 16px rgba(255,196,0,.12)}
.auth-reference .login-card h2{position:relative;z-index:2;text-align:center;color:#b9c9e5;font-size:24px;line-height:1.15;font-weight:600;margin:0 0 5px;letter-spacing:0}
.auth-reference .login-card>p{display:block;position:relative;z-index:2;text-align:center;color:#9fb2d2;font-size:15px;line-height:1.4;margin:0 0 16px}
.auth-reference .reference-field{position:relative;z-index:2;margin-bottom:12px}
.auth-reference .reference-field label{display:block;color:#b9c9e5;font-size:13px;font-weight:600;margin:0 0 7px 2px;letter-spacing:.01em}
.auth-reference .reference-field .input-icon{position:relative}
.auth-reference .reference-field .input-icon>.ic{position:absolute;left:18px;top:50%;bottom:auto;margin:0;transform:translateY(calc(-50% + 1px));z-index:3;color:#b9c9e5;width:24px;height:24px;display:grid;place-items:center;pointer-events:none;display:block;line-height:0;flex:none}
.auth-reference .reference-field input{
  width:100%;height:62px;box-sizing:border-box;padding:0 58px 0 62px;border-radius:15px;
  background:rgba(12,30,58,.82)!important;border:1px solid rgba(108,145,197,.76)!important;
  color:#eef6ff!important;font-size:18px;outline:none;box-shadow:none!important;
}
.auth-reference .reference-field input::placeholder{color:#7f94b7;opacity:1}
.auth-reference .reference-field input:-webkit-autofill,
.auth-reference .reference-field input:-webkit-autofill:hover,
.auth-reference .reference-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#eef6ff!important;
  caret-color:#eef6ff;
  -webkit-box-shadow:0 0 0 1000px rgba(12,30,58,.96) inset,0 0 0 1px rgba(45,156,255,.28)!important;
  box-shadow:0 0 0 1000px rgba(12,30,58,.96) inset,0 0 0 1px rgba(45,156,255,.28)!important;
  transition:background-color 9999s ease-out 0s;
}
.auth-reference .reference-field input:focus{border-color:#2d9cff!important;background:rgba(15,36,68,.9)!important;box-shadow:0 0 0 2px rgba(0,139,255,.14),0 0 20px rgba(0,130,255,.10)!important}
.auth-reference .reference-field .reveal{position:absolute;right:17px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#9db0d0;padding:8px;z-index:4}
.auth-reference .reference-options{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:2px 1px 16px}
.auth-reference .remember-control{display:flex;align-items:center;gap:11px;color:#f0f5ff;font-size:16px;cursor:pointer;user-select:none}
.auth-reference .remember-control input{position:absolute;opacity:0;pointer-events:none}
.auth-reference .remember-control span{width:25px;height:25px;border:2px solid #a5b9d8;border-radius:5px;box-sizing:border-box;display:block;position:relative}
.auth-reference .remember-control input:checked+span{background:#168eff;border-color:#168eff;box-shadow:0 0 12px rgba(0,142,255,.4)}
.auth-reference .remember-control input:checked+span::after{content:"";position:absolute;left:6px;top:2px;width:7px;height:12px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.auth-reference .reference-forgot{border:0;background:transparent;color:#08a8ff;font-size:16px;font-weight:500;cursor:pointer;padding:5px 0}
.auth-reference .reference-forgot:hover{text-decoration:underline;text-underline-offset:4px}
.auth-reference .reference-signin{
  position:relative;z-index:2;width:100%;height:62px;border:0;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:15px;
  background:linear-gradient(100deg,#087cff 0%,#0d9dff 48%,#36e79a 100%);color:#fff;font-size:19px;font-weight:700;cursor:pointer;
  box-shadow:0 12px 30px rgba(0,124,255,.23);transition:transform .2s,filter .2s,box-shadow .2s;overflow:hidden
}
.auth-reference .reference-signin:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 15px 35px rgba(0,137,255,.34)}
.auth-reference .reference-signin .ic{width:22px;height:22px}
.auth-reference .reference-signin:disabled{opacity:.72;cursor:wait;transform:none}
.auth-reference .reference-divider{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:23px;margin:18px 0 14px;color:#a4b5d0;font-size:14px}
.auth-reference .reference-divider span{height:1px;background:rgba(116,145,187,.38)}
.auth-reference .reference-divider b{font-weight:500}
.auth-reference .reference-create{
  position:relative;z-index:2;width:100%;height:62px;border:1px solid #1598ff;border-radius:15px;background:rgba(7,25,51,.45);color:#eef6ff;
  display:flex;align-items:center;justify-content:center;gap:14px;font-size:17px;font-weight:600;cursor:pointer;transition:background .2s,box-shadow .2s,border-color .2s
}
.auth-reference .reference-create:hover{background:rgba(8,44,82,.55);box-shadow:0 0 22px rgba(0,145,255,.13);border-color:#39b0ff}
.auth-reference .reference-create .ic{width:25px;height:25px;color:#c8d9ef}
.auth-reference .reference-footer{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px;color:#b2bfd5;font-size:13px}
.auth-reference .reference-footer i{width:1px;height:16px;background:rgba(155,177,211,.46)}
.auth-reference .reference-footer span{cursor:pointer}
.auth-reference .reference-footer span:hover{color:#fff}
.auth-reference .reference-alert{position:relative;z-index:4;margin:-12px 0 12px}
.auth-reference .login-foot{display:none}
.auth-reference .brand{display:none}
.auth-reference .hero,.auth-reference .pill,.auth-reference .feature-list,.auth-reference .auth-body,.auth-reference .auth-foot{display:none}
@media(max-width:1250px){
  .auth.auth-reference{grid-template-columns:54% 46%}
  .auth-reference .hero-stage{left:6%;width:min(47vw,620px);top:7.5%}
  .auth-reference .login-visual-copy{left:4%;bottom:5%}
  .auth-reference .login-card{height:min(720px,calc(100dvh - 32px));min-height:0;padding:30px 42px 24px}
  .auth-reference .reference-logo{font-size:40px}
}
@media(max-width:900px){
  .auth.auth-reference{grid-template-columns:1fr;height:auto;min-height:100vh;overflow:auto}
  .auth-reference .auth-art{min-height:510px;height:510px}
  .auth-reference .hero-stage{left:50%;top:5%;width:min(70vw,500px);transform:translateX(-50%)}
  .auth-reference .login-visual-copy{left:6%;bottom:30px;width:88%}
  .auth-reference .login-tagline{font-size:28px}
  .auth-reference .login-benefits{gap:12px;font-size:12px;margin-top:18px}
  .auth-reference .login-benefits i{height:18px}
  .auth-reference .auth-panel{min-height:calc(100vh - 510px);height:auto;padding:35px 24px 45px}
  .auth-reference .login-card{height:auto;max-height:none;min-height:0;width:min(610px,100%);padding:44px 38px 34px}
}
@media(max-width:560px){
  .auth-reference .auth-art{min-height:400px;height:400px}
  .auth-reference .hero-stage{top:2%;width:92vw}
  .auth-reference .login-visual-copy{bottom:20px;left:20px;width:calc(100% - 40px)}
  .auth-reference .login-tagline{font-size:23px}
  .auth-reference .login-benefits{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-top:14px;font-size:10px}
  .auth-reference .login-benefits i{display:none}
  .auth-reference .login-benefits>div{gap:6px}
  .auth-reference .login-benefits .ic{width:19px;height:19px}
  .auth-reference .auth-panel{padding:20px 14px 32px}
  .auth-reference .login-card{padding:34px 20px 28px;border-radius:18px}
  .auth-reference .reference-logo{font-size:34px}
  .auth-reference .reference-logo-line{margin:14px auto 22px}
  .auth-reference .login-card h2{font-size:17px;margin-bottom:28px}
  .auth-reference .reference-field input,.auth-reference .reference-signin,.auth-reference .reference-create{height:58px}
  .auth-reference .reference-field input{font-size:15px;padding-left:54px}
  .auth-reference .reference-options{margin-bottom:22px}
  .auth-reference .remember-control,.auth-reference .reference-forgot{font-size:13px}
  .auth-reference .reference-divider{margin:28px 0 22px}
  .auth-reference .reference-footer{font-size:11px;gap:8px;margin-top:28px}
}

/* Short desktop viewport: keep the complete login card visible at 100% browser zoom. */
@media (min-width:901px) and (max-height:850px){
  .auth-reference .auth-panel{padding:10px 3.8vw;}
  .auth-reference .login-card{
    width:min(560px,100%);
    height:auto;
    max-height:calc(100dvh - 20px);
    padding:22px 34px 18px;
    overflow:visible;
    border-radius:24px;
    overflow:visible;
  }
  .auth-reference .reference-logo{font-size:38px;}
  .auth-reference .reference-logo-line{width:82px;height:5px;margin:12px auto 16px;}
  .auth-reference .login-card h2{font-size:22px;margin-bottom:4px;}
  .auth-reference .login-card>p{font-size:14px;margin-bottom:13px;}
  .auth-reference .reference-field{margin-bottom:10px;}
  .auth-reference .reference-field label{font-size:12px;margin-bottom:5px;}
  .auth-reference .reference-field input{height:54px;font-size:16px;padding-left:58px;padding-right:52px;border-radius:13px;}
  .auth-reference .reference-field .input-icon>.ic{left:17px;width:22px;height:22px;top:50%;bottom:auto;margin:0;transform:translateY(-50%);}
  .auth-reference .reference-field .reveal{right:12px;top:50%;transform:translateY(-50%);padding:6px;}
  .auth-reference .reference-options{margin:2px 1px 13px;}
  .auth-reference .remember-control,.auth-reference .reference-forgot{font-size:14px;}
  .auth-reference .remember-control span{width:23px;height:23px;}
  .auth-reference .reference-signin{height:56px;border-radius:13px;font-size:17px;}
  .auth-reference .reference-divider{margin:14px 0 12px;gap:18px;font-size:13px;}
  .auth-reference .reference-create{height:56px;border-radius:13px;font-size:15px;}
  .auth-reference .reference-create .ic{width:22px;height:22px;}
  .auth-reference .reference-footer{font-size:11px;gap:12px;margin-top:12px;}
}

/* ==========================================================================
   Login refinement v4 — optical icon centering, readable hero copy,
   theme control and robust tablet/portrait responsiveness.
   Backend/API behavior unchanged.
   ========================================================================== */
.auth-reference .auth-reference-theme-wrap{
  position:absolute;
  top:18px;
  right:20px;
  z-index:20;
}
.auth-reference .auth-reference-theme-wrap .icon-btn{
  width:42px;
  height:42px;
  border-radius:12px;
  color:#dce9ff;
  border:1px solid rgba(115,188,255,.34);
  background:rgba(5,22,47,.58);
  box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 18px rgba(0,126,255,.08);
  backdrop-filter:blur(10px);
}
.auth-reference .auth-reference-theme-wrap .icon-btn:hover{
  color:#fff;
  border-color:rgba(45,165,255,.72);
  background:rgba(10,38,72,.78);
  box-shadow:0 0 24px rgba(0,145,255,.18);
}

/* Optical centering: SVG paths sit slightly high inside their 24px viewBox. */
.auth-reference .reference-field .input-icon>.ic{
  left:18px!important;
  top:50%!important;
  width:24px!important;
  height:24px!important;
  margin:0!important;
  transform:translateY(calc(-50% + 5px))!important;
  display:block!important;
  line-height:0!important;
}
.auth-reference .reference-field .reveal{
  top:50%!important;
  transform:translateY(calc(-50% + 1px))!important;
}

/* Hero copy stays legible when it overlaps the white mascot. */
.auth-reference .login-visual-copy{
  text-shadow:0 2px 8px rgba(0,5,18,.92),0 0 18px rgba(0,8,24,.62);
}
.auth-reference .login-tagline{
  color:#c9d9ef;
  text-shadow:0 2px 9px rgba(0,4,18,.96),0 0 22px rgba(0,12,35,.72);
}
.auth-reference .login-tagline span{
  color:#08d4ff;
  text-shadow:0 2px 10px rgba(0,20,50,.95),0 0 18px rgba(0,180,255,.26);
}
.auth-reference .login-benefits{
  color:#c4d4ea;
  text-shadow:0 2px 7px rgba(0,5,18,.98),0 0 14px rgba(0,10,30,.7);
}
.auth-reference .login-benefits>div span{color:#c4d4ea}

/* Dark is the default. Light mode is optional via the login theme button. */
/* Light theme keeps the hero panel dark (brand photography feel); only the
   form panel becomes light. */
html[data-theme="light"] .auth-reference .auth-art{
  background:
    radial-gradient(620px 520px at 46% 43%,rgba(0,122,255,.18),transparent 67%),
    radial-gradient(520px 500px at 92% 5%,rgba(0,82,255,.27),transparent 65%),
    radial-gradient(460px 420px at 5% 85%,rgba(0,160,255,.16),transparent 67%),
    #020817;
}
html[data-theme="light"] .auth-reference .auth-panel{
  background:
    radial-gradient(620px 520px at 58% 48%,rgba(0,126,255,.10),transparent 68%),
    linear-gradient(145deg,#eaf4ff,#dcecff);
}
html[data-theme="light"] .auth-reference .login-card{
  background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(239,247,255,.86));
  border-color:rgba(40,135,220,.48);
  box-shadow:0 25px 70px rgba(16,67,115,.20),0 0 30px rgba(0,125,255,.10);
}
html[data-theme="light"] .auth-reference .reference-logo{color:#102849}
html[data-theme="light"] .auth-reference .login-card h2{color:#1e426c}
html[data-theme="light"] .auth-reference .login-card>p{color:#55718f}
html[data-theme="light"] .auth-reference .reference-field label{color:#315273}
html[data-theme="light"] .auth-reference .reference-field input{
  background:rgba(247,251,255,.95)!important;
  color:#16385d!important;
  border-color:rgba(67,125,174,.48)!important;
}
html[data-theme="light"] .auth-reference .reference-field input::placeholder{color:#7089a5}
html[data-theme="light"] .auth-reference .remember-control{color:#17395d}
html[data-theme="light"] .auth-reference .reference-create{color:#16385d;background:rgba(255,255,255,.58)}
html[data-theme="light"] .auth-reference .reference-footer{color:#4d6a88}
html[data-theme="light"] .auth-reference .auth-reference-theme-wrap .icon-btn{color:#17395d;background:rgba(255,255,255,.62);border-color:rgba(50,115,180,.35)}

/* Tablet portrait: stack and center the login panel; never leave it pinned right. */
@media (min-width:561px) and (max-width:900px){
  .auth.auth-reference{
    grid-template-columns:1fr;
    min-height:100svh;
    height:auto;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .auth-reference .auth-art{
    min-height:420px;
    height:420px;
    width:100%;
  }
  .auth-reference .hero-stage{
    left:50%;
    right:auto;
    top:2%;
    width:min(68vw,500px);
    transform:translateX(-50%);
  }
  .auth-reference .login-visual-copy{
    left:6%;
    bottom:24px;
    width:88%;
  }
  .auth-reference .login-tagline{font-size:26px}
  .auth-reference .login-benefits{font-size:12px;gap:12px;margin-top:15px}
  .auth-reference .auth-panel{
    width:100%;
    min-height:calc(100svh - 420px);
    height:auto;
    padding:28px 24px 40px;
    box-sizing:border-box;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    overflow:visible;
  }
  .auth-reference .login-card{
    width:min(590px,calc(100% - 20px));
    margin:0 auto;
  }
}

/* Small phones: centered card and copy with safe horizontal gutters. */
@media (max-width:560px){
  .auth-reference .auth-reference-theme-wrap{top:12px;right:12px}
  .auth-reference .auth-reference-theme-wrap .icon-btn{width:38px;height:38px;border-radius:10px}
  .auth-reference .auth-art{min-height:390px;height:390px}
  .auth-reference .hero-stage{left:50%;top:0;width:92vw;transform:translateX(-50%)}
  .auth-reference .login-visual-copy{left:18px;bottom:18px;width:calc(100% - 36px)}
  .auth-reference .login-tagline{font-size:22px}
  .auth-reference .login-benefits{font-size:10px;gap:5px;margin-top:13px}
  .auth-reference .auth-panel{min-height:0;padding:20px 14px 32px;display:flex;justify-content:center;align-items:flex-start;overflow:visible}
  .auth-reference .login-card{width:100%;max-width:520px;margin:0 auto}
  .auth-reference .reference-field .input-icon>.ic{left:16px!important;transform:translateY(calc(-50% + 5px))!important}
}

/* Very short desktop/laptop viewport: preserve complete card without scrolling. */
@media (min-width:901px) and (max-height:760px){
  .auth-reference .auth-panel{padding:8px 3.2vw}
  .auth-reference .login-card{width:min(535px,100%);padding:17px 30px 13px;border-radius:22px}
  .auth-reference .reference-logo{font-size:34px}
  .auth-reference .reference-logo-line{height:4px;width:74px;margin:9px auto 12px}
  .auth-reference .login-card h2{font-size:20px}
  .auth-reference .login-card>p{font-size:13px;margin-bottom:9px}
  .auth-reference .reference-field{margin-bottom:7px}
  .auth-reference .reference-field label{font-size:11px;margin-bottom:3px}
  .auth-reference .reference-field input{height:49px;font-size:15px}
  .auth-reference .reference-options{margin-bottom:9px}
  .auth-reference .reference-signin{height:50px;font-size:16px}
  .auth-reference .reference-divider{margin:10px 0 9px}
  .auth-reference .reference-create{height:50px;font-size:14px}
  .auth-reference .reference-footer{margin-top:8px;font-size:10px}
}

/* ============================================================================
   RetailIQ Login — final responsive system
   Desktop reference composition is preserved above. These rules only adapt
   the same design for landscape tablets, iPad portrait, phones and short
   viewports. Backend/API behaviour is untouched.
   ============================================================================ */

/* Large desktop / laptop: keep the reference two-column composition. */
@media (min-width:1101px){
  .auth.auth-reference{
    min-height:100dvh;
    height:100dvh;
    overflow:hidden;
  }
  .auth-reference .auth-art,
  .auth-reference .auth-panel{
    min-height:100dvh;
    height:100dvh;
  }
  .auth-reference .auth-panel{padding:18px clamp(24px,4vw,64px)}
}

/* Landscape tablets / small laptops (including iPad landscape). */
@media (min-width:769px) and (max-width:1100px) and (orientation:landscape){
  .auth.auth-reference{
    grid-template-columns:51% 49%;
    min-height:100dvh;
    height:100dvh;
    overflow:hidden;
  }
  .auth-reference .auth-art,
  .auth-reference .auth-panel{
    min-height:100dvh;
    height:100dvh;
  }
  .auth-reference .auth-art{overflow:hidden}
  .auth-reference .hero-stage{
    left:4%;
    top:5%;
    width:min(49vw,500px);
  }
  .auth-reference .login-visual-copy{
    left:5%;
    bottom:4.5%;
    width:90%;
  }
  .auth-reference .login-tagline{font-size:clamp(22px,2.5vw,30px)}
  .auth-reference .login-benefits{gap:10px;margin-top:15px;font-size:11px}
  .auth-reference .login-benefits>div{gap:6px}
  .auth-reference .login-benefits .ic{width:19px;height:19px}
  .auth-reference .login-benefits i{height:18px}
  .auth-reference .auth-panel{padding:14px 20px}
  .auth-reference .login-card{
    width:min(520px,calc(100% - 8px));
    max-height:calc(100dvh - 20px);
    padding:20px 30px 15px;
    border-radius:22px;
  }
  .auth-reference .reference-logo{font-size:34px}
  .auth-reference .reference-logo-line{width:76px;height:5px;margin:10px auto 13px}
  .auth-reference .login-card h2{font-size:20px;margin-bottom:3px}
  .auth-reference .login-card>p{font-size:13px;margin-bottom:11px}
  .auth-reference .reference-field{margin-bottom:8px}
  .auth-reference .reference-field label{font-size:12px;margin-bottom:4px}
  .auth-reference .reference-field input{height:50px;font-size:15px;padding-left:54px;padding-right:48px;border-radius:12px}
  .auth-reference .reference-field .input-icon>.ic{left:15px!important;width:21px!important;height:21px!important;transform:translateY(calc(-50% + 4px))!important}
  .auth-reference .reference-field .reveal{right:10px;padding:5px}
  .auth-reference .reference-options{margin:1px 0 10px}
  .auth-reference .remember-control,.auth-reference .reference-forgot{font-size:13px}
  .auth-reference .remember-control span{width:21px;height:21px}
  .auth-reference .reference-signin{height:50px;border-radius:12px;font-size:16px}
  .auth-reference .reference-divider{margin:10px 0 9px;gap:14px;font-size:12px}
  .auth-reference .reference-create{height:50px;border-radius:12px;font-size:14px}
  .auth-reference .reference-create .ic{width:21px;height:21px}
  .auth-reference .reference-footer{font-size:10px;gap:10px;margin-top:9px}
  .auth-reference .auth-reference-theme-wrap{top:10px;right:12px}
  .auth-reference .auth-reference-theme-wrap .icon-btn{width:36px;height:36px;border-radius:10px}
}

/* iPad/tablet portrait: stack the two panels and center the login card. */
@media (min-width:561px) and (max-width:1100px) and (orientation:portrait){
  .auth.auth-reference{
    display:flex;
    flex-direction:column;
    min-height:100dvh;
    height:auto;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .auth-reference .auth-art{
    flex:0 0 clamp(360px,43dvh,470px);
    min-height:clamp(360px,43dvh,470px);
    height:clamp(360px,43dvh,470px);
    width:100%;
    overflow:hidden;
  }
  .auth-reference .hero-stage{
    left:50%;
    right:auto;
    top:2%;
    width:min(62vw,500px);
    transform:translateX(-50%);
  }
  .auth-reference .login-visual-copy{
    left:5%;
    bottom:18px;
    width:90%;
  }
  .auth-reference .login-tagline{font-size:clamp(23px,3.2vw,30px)}
  .auth-reference .login-benefits{gap:14px;margin-top:14px;font-size:12px}
  .auth-reference .login-benefits>div{gap:7px}
  .auth-reference .login-benefits .ic{width:20px;height:20px}
  .auth-reference .login-benefits i{height:18px}
  .auth-reference .auth-panel{
    flex:1 0 auto;
    width:100%;
    min-height:0;
    height:auto;
    padding:24px 24px 34px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    box-sizing:border-box;
    overflow:visible;
  }
  .auth-reference .login-card{
    width:min(610px,100%);
    max-width:610px;
    margin:0 auto;
    padding:30px 38px 24px;
    border-radius:24px;
  }
  .auth-reference .auth-reference-theme-wrap{top:12px;right:16px}
}

/* Phones and narrow portrait devices. */
@media (max-width:560px){
  .auth.auth-reference{
    display:flex;
    flex-direction:column;
    min-height:100dvh;
    height:auto;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .auth-reference .auth-art{
    flex:0 0 clamp(285px,38dvh,390px);
    min-height:clamp(285px,38dvh,390px);
    height:clamp(285px,38dvh,390px);
    width:100%;
    overflow:hidden;
  }
  .auth-reference .hero-stage{
    left:50%;
    right:auto;
    top:1%;
    width:min(91vw,420px);
    transform:translateX(-50%);
  }
  .auth-reference .login-visual-copy{
    left:16px;
    bottom:14px;
    width:calc(100% - 32px);
  }
  .auth-reference .login-tagline{
    font-size:clamp(20px,6.2vw,25px);
    line-height:1.08;
    letter-spacing:-.025em;
  }
  .auth-reference .login-benefits{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;
    gap:4px;
    margin-top:11px;
    font-size:9px;
  }
  .auth-reference .login-benefits>div{
    justify-content:center;
    gap:4px;
    min-width:0;
  }
  .auth-reference .login-benefits>div span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .auth-reference .login-benefits .ic{width:18px;height:18px;flex:0 0 auto}
  .auth-reference .login-benefits i{display:none}
  .auth-reference .auth-panel{
    flex:1 0 auto;
    width:100%;
    min-height:0;
    height:auto;
    padding:16px 12px 28px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    box-sizing:border-box;
    overflow:visible;
  }
  .auth-reference .login-card{
    width:100%;
    max-width:520px;
    margin:0 auto;
    padding:28px 18px 22px;
    border-radius:20px;
  }
  .auth-reference .reference-logo{font-size:31px}
  .auth-reference .reference-logo-line{width:72px;height:5px;margin:12px auto 17px}
  .auth-reference .login-card h2{font-size:19px;margin-bottom:4px}
  .auth-reference .login-card>p{font-size:13px;margin-bottom:17px}
  .auth-reference .reference-field{margin-bottom:11px}
  .auth-reference .reference-field label{font-size:12px;margin-bottom:6px}
  .auth-reference .reference-field input{
    height:56px;
    font-size:15px;
    padding-left:53px;
    padding-right:48px;
    border-radius:13px;
  }
  .auth-reference .reference-field .input-icon>.ic{
    left:15px!important;
    width:22px!important;
    height:22px!important;
    transform:translateY(calc(-50% + 4px))!important;
  }
  .auth-reference .reference-field .reveal{right:10px;top:50%;transform:translateY(-50%);padding:6px}
  .auth-reference .reference-options{margin:3px 0 14px;gap:10px}
  .auth-reference .remember-control{font-size:13px;gap:8px}
  .auth-reference .remember-control span{width:22px;height:22px;flex:0 0 22px}
  .auth-reference .reference-forgot{font-size:13px;white-space:nowrap}
  .auth-reference .reference-signin{height:56px;border-radius:13px;font-size:17px}
  .auth-reference .reference-divider{margin:15px 0 12px;gap:12px;font-size:12px}
  .auth-reference .reference-create{height:56px;border-radius:13px;font-size:15px}
  .auth-reference .reference-create .ic{width:22px;height:22px}
  .auth-reference .reference-footer{font-size:10px;gap:8px;margin-top:13px;flex-wrap:wrap}
  .auth-reference .reference-footer i{height:13px}
  .auth-reference .auth-reference-theme-wrap{top:10px;right:10px}
  .auth-reference .auth-reference-theme-wrap .icon-btn{width:34px;height:34px;border-radius:9px}
}

/* Very narrow phones: keep controls usable without horizontal overflow. */
@media (max-width:380px){
  .auth-reference .auth-art{flex-basis:270px;min-height:270px;height:270px}
  .auth-reference .hero-stage{width:96vw;top:-1%}
  .auth-reference .login-visual-copy{bottom:10px}
  .auth-reference .login-tagline{font-size:19px}
  .auth-reference .login-benefits{font-size:8px;gap:2px;margin-top:8px}
  .auth-reference .login-benefits .ic{width:16px;height:16px}
  .auth-reference .auth-panel{padding:12px 9px 24px}
  .auth-reference .login-card{padding:24px 15px 20px;border-radius:18px}
  .auth-reference .reference-logo{font-size:28px}
  .auth-reference .reference-logo-line{margin-bottom:14px}
  .auth-reference .login-card h2{font-size:18px}
  .auth-reference .login-card>p{font-size:12px;margin-bottom:14px}
  .auth-reference .reference-field input{height:54px;font-size:14px;padding-left:50px}
  .auth-reference .reference-options{gap:6px}
  .auth-reference .remember-control,.auth-reference .reference-forgot{font-size:12px}
  .auth-reference .reference-signin,.auth-reference .reference-create{height:54px}
}

/* Landscape phones: preserve the two visual zones without crushing the card. */
@media (max-width:900px) and (orientation:landscape){
  .auth.auth-reference{
    display:grid;
    grid-template-columns:48% 52%;
    min-height:100dvh;
    height:100dvh;
    overflow:hidden;
  }
  .auth-reference .auth-art,
  .auth-reference .auth-panel{height:100dvh;min-height:100dvh}
  .auth-reference .auth-art{overflow:hidden}
  .auth-reference .hero-stage{left:5%;top:2%;width:min(43vw,360px)}
  .auth-reference .login-visual-copy{left:5%;bottom:3%;width:90%}
  .auth-reference .login-tagline{font-size:20px}
  .auth-reference .login-benefits{gap:7px;margin-top:9px;font-size:9px}
  .auth-reference .login-benefits>div{gap:4px}
  .auth-reference .login-benefits .ic{width:17px;height:17px}
  .auth-reference .auth-panel{padding:8px 14px;overflow:visible}
  .auth-reference .login-card{width:min(500px,100%);padding:15px 25px 11px;border-radius:20px}
  .auth-reference .reference-logo{font-size:29px}
  .auth-reference .reference-logo-line{width:65px;height:4px;margin:7px auto 9px}
  .auth-reference .login-card h2{font-size:18px}
  .auth-reference .login-card>p{font-size:11px;margin-bottom:8px}
  .auth-reference .reference-field{margin-bottom:6px}
  .auth-reference .reference-field label{font-size:10px;margin-bottom:3px}
  .auth-reference .reference-field input{height:42px;font-size:13px;padding-left:48px}
  .auth-reference .reference-field .input-icon>.ic{left:13px!important;width:19px!important;height:19px!important}
  .auth-reference .reference-options{margin:0 0 7px}
  .auth-reference .remember-control,.auth-reference .reference-forgot{font-size:11px}
  .auth-reference .remember-control span{width:18px;height:18px}
  .auth-reference .reference-signin{height:43px;font-size:14px;border-radius:10px}
  .auth-reference .reference-divider{margin:7px 0 6px;font-size:10px}
  .auth-reference .reference-create{height:43px;font-size:12px;border-radius:10px}
  .auth-reference .reference-footer{font-size:8px;gap:7px;margin-top:6px}
  .auth-reference .auth-reference-theme-wrap{top:7px;right:8px}
  .auth-reference .auth-reference-theme-wrap .icon-btn{width:30px;height:30px;border-radius:8px}
}


/* Dashboard refinement — use the same typography/color language as Data Insights. */
.admin-dashboard .admin-panel-head h3{font-size:16px;color:var(--ink);font-family:var(--font)}
.admin-dashboard .admin-panel-head p{font-size:12px;color:var(--muted);font-family:var(--font)}
.admin-dashboard .admin-kpi-top{font-size:13px;color:var(--muted);font-family:var(--font)}
.admin-dashboard .admin-kpi-value{font-size:33px;color:var(--ink);font-family:var(--font)}
.admin-dashboard .admin-kpi-meta{font-size:12px;color:var(--muted);font-family:var(--font)}
.admin-dashboard .admin-activity-row strong,.admin-dashboard .admin-cat-name,.admin-dashboard .admin-attention strong{font-size:12px}
.admin-dashboard .admin-activity-row span,.admin-dashboard .admin-attention small{font-size:10.5px}
.admin-dashboard .admin-topcat-name{font-size:11px}

/* KPI cards use the same surface treatment as the rest of the portal in both themes. */
.admin-dashboard .admin-kpi{
  background:var(--surface);
  color:var(--ink);
  border-color:var(--line);
}
.admin-dashboard .admin-kpi-icon{
  background:var(--brand-soft);
  color:var(--brand-ink);
}
.admin-dashboard .kpi-blue .admin-kpi-icon{background:var(--brand-soft);color:var(--brand-ink)}
.admin-dashboard .kpi-purple .admin-kpi-icon{background:var(--brand-soft-2);color:var(--brand-ink)}
.admin-dashboard .kpi-green .admin-kpi-icon{background:var(--green-soft);color:var(--green)}
.admin-dashboard .kpi-amber .admin-kpi-icon{background:var(--amber-soft);color:var(--amber)}
.admin-dashboard .kpi-cyan .admin-kpi-icon{background:var(--brand-soft);color:var(--brand-ink)}
.admin-dashboard .admin-panel{background:var(--surface);color:var(--ink);border-color:var(--line)}
.admin-dashboard .admin-range{background:var(--surface);color:var(--muted);border-color:var(--line)}

/* AI Usage Trend: keep the chart block vertically centered within the full panel height. */
.admin-usage-panel{display:flex;flex-direction:column;}
.admin-usage-panel .admin-chart{flex:1 1 auto;min-height:225px;display:flex;flex-direction:column;justify-content:center;}
.admin-usage-panel .admin-chart-grid{flex:0 0 205px;}

/* AI Usage Trend: readable scale/grid and exact values on every bar. */
.admin-chart-grid{position:relative;width:100%;max-width:760px;height:205px;margin:0 auto;padding-left:38px;box-sizing:border-box;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(25% - 1px),var(--line) 25%,transparent calc(25% + 1px));}
.admin-chart-grid>span{position:absolute;left:0;transform:translateY(-50%);font-size:10px;color:var(--muted);font-weight:700}
.admin-chart-grid>span:nth-child(1){top:0}.admin-chart-grid>span:nth-child(2){top:25%}.admin-chart-grid>span:nth-child(3){top:50%}.admin-chart-grid>span:nth-child(4){top:75%}.admin-chart-grid>span:nth-child(5){top:100%}
.admin-chart-grid .admin-bars{height:100%;border-bottom:0;padding:8px 8px 0;position:relative;z-index:1;box-sizing:border-box;}
.admin-bar-stack{position:relative!important;width:100%;height:175px;display:flex;align-items:flex-end;justify-content:center;gap:4px;}
.admin-bar-stack>span{position:relative;z-index:2;}
.admin-bar-value{position:absolute;z-index:4;font-size:9px;font-weight:800;line-height:1;color:var(--text);white-space:nowrap;pointer-events:none;bottom:0;}
.query-value{left:calc(50% - 9px);transform:translateX(-100%);bottom:calc(var(--query-height, 0%) + 5px);color:#9f94ff}
.answer-value{left:calc(50% + 9px);transform:translateX(0);bottom:calc(var(--answer-height, 0%) + 5px);color:#5ed8b4}
.admin-chart-note{margin-left:auto;opacity:.8}

/* Responsive login: portrait tablets center the card; landscape iPad keeps the mascot visible. */
@media (orientation:portrait) and (min-width:901px) and (max-width:1200px){
  .auth.auth-reference{grid-template-columns:1fr;height:auto;min-height:100dvh;overflow:auto}
  .auth-reference .auth-art{min-height:330px;height:330px}
  .auth-reference .hero-stage{left:50%;right:auto;top:8px;width:min(42vw,360px);transform:translateX(-50%)}
  .auth-reference .login-visual-copy{left:50%;transform:translateX(-50%);bottom:18px;width:88%;text-align:center}
  .auth-reference .auth-panel{min-height:calc(100dvh - 330px);height:auto;padding:28px 24px 40px;justify-content:center;align-items:center}
  .auth-reference .login-card{width:min(610px,calc(100vw - 48px));margin-inline:auto}
}
@media (orientation:landscape) and (min-width:901px) and (max-width:1366px){
  .auth.auth-reference{grid-template-columns:54% 46%;height:100dvh;min-height:100dvh;overflow:hidden}
  .auth-reference .auth-art{display:block;min-height:100dvh;height:100dvh}
  .auth-reference .hero-stage{display:block;left:5%;right:auto;top:50%;width:min(40vw,410px);transform:translateY(-50%)}
  .auth-reference .login-visual-copy{left:4%;bottom:4%;width:92%}
  .auth-reference .auth-panel{min-height:100dvh;height:100dvh;padding:16px 22px}
  .auth-reference .login-card{width:min(560px,calc(100% - 20px));max-height:calc(100dvh - 20px);padding:24px 34px 18px}
}
@media (max-height:760px) and (orientation:landscape) and (min-width:901px){
  .auth-reference .hero-stage{width:min(34vw,330px)}
  .auth-reference .login-card{padding-top:20px;padding-bottom:14px}
  .auth-reference .reference-field input,.auth-reference .reference-signin,.auth-reference .reference-create{height:52px}
  .auth-reference .reference-options{margin-bottom:10px}
  .auth-reference .reference-divider{margin:11px 0 9px}
}


/* Final reference: vertically center login field icons with input text. */
.login-card .input-icon{position:relative;display:flex;align-items:center}
.login-card .input-icon > .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);margin:0;pointer-events:none}
.login-card .input-icon input{padding-left:40px}
.login-card .input-icon .reveal{position:absolute;right:8px;top:50%;transform:translateY(-50%);margin:0;display:grid;place-items:center}


/* ---------- Persistent live system health indicator ---------- */
.global-health-wrap{position:fixed;right:20px;bottom:20px;z-index:75;font-size:12px}
.global-health-pill{display:flex;align-items:center;gap:8px;height:38px;padding:0 11px;border:1px solid var(--line-2);border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow);color:var(--ink);font-weight:700;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}
.global-health-pill:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:0 12px 34px rgba(30,41,90,.18),0 0 0 3px var(--brand-soft)}
.global-health-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft),0 0 14px rgba(52,211,153,.55);animation:health-pulse 2s ease-in-out infinite;flex:none}
.global-health-pill.attention .global-health-dot{background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft),0 0 14px rgba(251,191,36,.5)}
.global-health-pill.critical .global-health-dot{background:var(--red);box-shadow:0 0 0 4px var(--red-soft),0 0 14px rgba(251,113,133,.55)}
.global-health-pill.attention{border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}
.global-health-pill.critical{border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.global-health-chevron{display:grid;place-items:center;color:var(--muted);transition:.2s}
.global-health-pill[aria-expanded="true"] .global-health-chevron{transform:rotate(90deg)}
.global-health-panel{position:absolute;right:0;bottom:48px;width:min(390px,calc(100vw - 28px));padding:14px;border:1px solid var(--line-2);border-radius:16px;background:color-mix(in srgb,var(--surface) 94%,transparent);color:var(--ink);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-lg);animation:health-panel-in .18s ease-out}
.global-health-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 11px;border-bottom:1px solid var(--line)}
.global-health-panel-head strong{display:block;font-size:13px;color:var(--ink)}.global-health-panel-head small{display:block;margin-top:2px;color:var(--muted);font-size:10px}
.global-health-state{font-size:10px;font-weight:800;padding:4px 7px;border-radius:999px;background:var(--green-soft);color:var(--green);white-space:nowrap}
.global-health-state.attention{background:var(--amber-soft);color:var(--amber)}.global-health-state.critical{background:var(--red-soft);color:var(--red)}
.global-health-checks{display:grid;gap:3px;padding-top:8px;max-height:55vh;overflow:auto}
.global-health-row{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px 5px;border-radius:9px;transition:background .18s ease,transform .18s ease}.global-health-row:hover{background:var(--surface-2);transform:translateX(2px)}
.global-health-row-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(52,211,153,.35)}.global-health-row-dot.bad{background:var(--red);box-shadow:0 0 8px rgba(251,113,133,.4)}.global-health-row-dot.muted{background:var(--faint);box-shadow:none}
.global-health-row b{display:block;font-size:11px;color:var(--ink)}.global-health-row small{display:block;color:var(--muted);font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}.global-health-row strong{font-size:10px;color:var(--muted);font-weight:700;white-space:nowrap}.global-health-empty{padding:12px;color:var(--muted);text-align:center}
@keyframes health-pulse{0%,100%{opacity:1}50%{opacity:.58}}
@keyframes health-panel-in{from{opacity:0;transform:translateY(5px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:700px){.global-health-wrap{right:12px;bottom:72px}.global-health-pill{height:36px;padding:0 10px}.global-health-label{display:none}.global-health-panel{bottom:46px;width:min(370px,calc(100vw - 24px))}}
@media(max-width:820px), (orientation:portrait) and (max-width:1024px){.global-health-wrap{bottom:calc(var(--bottom-nav-h) + 12px);transition:bottom .2s ease}.global-health-panel{bottom:calc(var(--bottom-nav-h) + 38px)}}
@media (prefers-reduced-motion:reduce){.global-health-pill,.global-health-row{transition:none}.global-health-panel{animation:none}.global-health-dot{animation:none}}

/* AI error states — never leave a failed chat as an unexplained blank bubble. */
.ai-error-bubble{display:flex;flex-direction:column;gap:5px}
.ai-error-bubble strong{font-weight:650}
.ai-error-code{font-size:9px;opacity:.58;font-family:var(--mono,monospace);letter-spacing:.02em}
.ai-error-hint{font-size:10px;color:var(--muted)}
.msg.ai.error.warning .ai-error-bubble{border-color:rgba(245,158,11,.32);background:rgba(245,158,11,.07)}
.msg.ai.error.critical .ai-error-bubble{border-color:rgba(239,68,68,.34);background:rgba(239,68,68,.07)}

/* ---------- Admin controls / select polish ---------- */
.doc-category{
  width:100%;
  min-width:170px;
  height:40px;
  padding:0 38px 0 13px;
  border:1px solid var(--line-2);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--ink-2);
  font:inherit;
  font-size:12.5px;
  font-weight:600;
  outline:none;
  cursor:pointer;
  transition:border-color .2s,box-shadow .2s,background .2s,color .2s;
}
.doc-category:hover{border-color:var(--brand);background:var(--surface-3);color:var(--ink)}
.doc-category:focus{border-color:var(--brand);box-shadow:var(--ring);background:var(--surface)}
[data-theme="dark"] .doc-category{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12);color:var(--ink)}
[data-theme="dark"] .doc-category option{background:#0e1322;color:#e8ecf7}
.head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.user-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:230px}
.user-actions .btn{margin:0;white-space:nowrap}
.category-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.category-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.category-row:last-child{border-bottom:0}
.category-row>div:first-child{min-width:0}
.category-row small{display:block;margin-top:3px;color:var(--muted);font-size:10.5px}
.inline-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0}
.inline-form input{min-width:0;flex:1}

/* Give upload/category controls a deliberate visual gap. */
#manageCats,#addDocs{margin:0}
@media(max-width:700px){
  .doc-category{min-width:140px}
  .user-actions{justify-content:flex-start;min-width:0}
  .category-row{align-items:flex-start;flex-direction:column}
  .category-actions{justify-content:flex-start;width:100%}
}

/* Admin dashboard hover interaction — match Data Insights cards */
.admin-dashboard .admin-kpi,
.admin-dashboard .admin-panel{
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.admin-dashboard .admin-kpi:hover,
.admin-dashboard .admin-panel:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--brand) 45%,var(--line));
  box-shadow:var(--shadow-lg);
}

@media (prefers-reduced-motion:reduce){
  .admin-dashboard .admin-kpi,
  .admin-dashboard .admin-panel{transition:none}
  .admin-dashboard .admin-kpi:hover,
  .admin-dashboard .admin-panel:hover{transform:none}
}

/* ==========================================================================
   Login input icons — CSS-drawn icons
   The original SVG user/lock artwork is replaced because its internal
   viewBox whitespace makes optical vertical centering inconsistent.
   The eye/reveal icon remains the original SVG.
   ========================================================================== */

/* Hide only the left-side SVG icons. */
.input-icon > .ic{
  display:none;
}

/* Keep the eye icon visible. */
.input-icon .reveal .ic{
  display:block;
  width:15px;
  height:15px;
}

/* All replacement icon pieces are positioned relative to the input wrapper. */
.input-icon::before,
.input-icon::after{
  content:"";
  position:absolute;
  pointer-events:none;
  box-sizing:border-box;
}

/* ---------------- User / human icon ---------------- */
/* Shoulders: a simple centered U/arch shape. */
.input-icon:has(#email)::before,
.input-icon:has(#puid)::before{
  left:13px;
  top:calc(50% + 1px);
  width:18px;
  height:9px;
  border:2px solid var(--faint);
  border-bottom:0;
  border-radius:10px 10px 0 0;
}

/* Head. */
.input-icon:has(#email)::after,
.input-icon:has(#puid)::after{
  left:19px;
  top:calc(50% - 9px);
  width:7px;
  height:7px;
  border:2px solid var(--faint);
  border-radius:50%;
  background:transparent;
}

.input-icon:has(#email) input,
.input-icon:has(#puid) input{
  padding-left:40px;
}

/* ---------------- Lock icon ---------------- */
/* Lock body. */
.input-icon:has(input[type="password"])::before{
  left:13px;
  top:calc(50% - 1px);
  width:18px;
  height:13px;
  border:2px solid var(--faint);
  border-radius:3px;
  background:transparent;
}

/* Lock shackle. */
.input-icon:has(input[type="password"])::after{
  left:17px;
  top:calc(50% - 10px);
  width:10px;
  height:10px;
  border:2px solid var(--faint);
  border-bottom:0;
  border-radius:7px 7px 0 0;
  background:transparent;
}

.input-icon:has(input[type="password"]) input{
  padding-left:40px;
}

/* Optical alignment and focus colour. */
.input-icon:focus-within::before,
.input-icon:focus-within::after{
  border-color:var(--brand);
}



/* ==========================================================================
   FINAL LOGIN INPUT ICON FIX
   The login form no longer renders SVG user/lock icons. These two fields use
   dedicated wrapper classes so the login icons cannot collide with the
   generic input-icon rules used elsewhere in the portal.
   ========================================================================== */

/* Disable the previous generic pseudo-icons specifically for login fields. */
.input-icon.login-user::before,
.input-icon.login-user::after,
.input-icon.login-password::before,
.input-icon.login-password::after{
  content:none !important;
  display:none !important;
}

/* Remove any inherited left SVG icon space from these dedicated login fields. */
.input-icon.login-user > .ic,
.input-icon.login-password > .ic{
  display:none !important;
}

/* User icon — clean CSS geometry, centered as a complete unit. */
.input-icon.login-user::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  left:13px;
  top:50%;
  width:8px;
  height:8px;
  transform:translateY(-9px);
  border:2px solid var(--faint);
  border-radius:50%;
  box-sizing:border-box;
}

.input-icon.login-user::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  left:11px;
  top:50%;
  width:18px;
  height:9px;
  transform:translateY(1px);
  border:2px solid var(--faint);
  border-bottom:0;
  border-radius:10px 10px 0 0;
  box-sizing:border-box;
}

.input-icon.login-user input{
  padding-left:40px;
}

/* Lock icon — body and shackle are positioned from the same 50% reference. */
.input-icon.login-password::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  left:13px;
  top:50%;
  width:18px;
  height:13px;
  transform:translateY(-2px);
  border:2px solid var(--faint);
  border-radius:3px;
  box-sizing:border-box;
}

.input-icon.login-password::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  left:17px;
  top:50%;
  width:10px;
  height:10px;
  transform:translateY(-11px);
  border:2px solid var(--faint);
  border-bottom:0;
  border-radius:7px 7px 0 0;
  box-sizing:border-box;
}

.input-icon.login-password input{
  padding-left:40px;
}

/* Focus colour without moving the icons. */
.input-icon.login-user:focus-within::before,
.input-icon.login-user:focus-within::after,
.input-icon.login-password:focus-within::before,
.input-icon.login-password:focus-within::after{
  border-color:var(--brand);
}

/* Preserve the eye button exactly as the existing password reveal control. */
.input-icon.login-password .reveal{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
}

/* ---------- Admin Dashboard 2026 performance layer ---------- */
.admin-kpi-row{display:grid;gap:14px;min-width:0}
.admin-kpi-all{grid-template-columns:repeat(3,minmax(0,1fr))}
.admin-kpi-row .admin-kpi{min-width:0}

.admin-performance-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}
.admin-analysis-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);gap:16px}

.admin-breakdown-wrap{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:center;min-height:220px}
.admin-donut{width:170px;height:170px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--donut-stops,var(--surface-3) 0 100%));box-shadow:inset 0 0 28px rgba(79,109,245,.12),0 12px 35px rgba(30,41,90,.08)}
.admin-donut:after{content:"";position:absolute;inset:18px;border-radius:50%;background:var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.admin-donut>div{position:relative;z-index:1;text-align:center}
.admin-donut strong{display:block;font-size:24px;line-height:1.1;letter-spacing:-.04em;color:var(--ink)}
.admin-donut small{display:block;margin-top:5px;font-size:10px;color:var(--muted)}
.admin-breakdown-list{display:grid;gap:12px}
.admin-breakdown-row{display:grid;grid-template-columns:9px minmax(0,1fr) 62px 36px;gap:8px;align-items:center;font-size:11px;color:var(--ink-2)}
.admin-breakdown-row strong{font-size:11px;color:var(--ink);text-align:right}.admin-breakdown-row b{font-size:10px;color:var(--muted);text-align:right}
:root{--llm-color:#f59e0b;--rag-color:#2388ff;--embedding-color:#8b5cf6;--db-color:#10b981;--other-color:#94a3b8}
.admin-stage-dot{width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 4px var(--brand-soft)}
.admin-stage-dot.llm{background:#f59e0b}.admin-stage-dot.rag{background:#2388ff}.admin-stage-dot.embedding{background:#8b5cf6}.admin-stage-dot.db{background:#10b981}.admin-stage-dot.other{background:#94a3b8}

.admin-segment{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}
.admin-segment span{font-size:9px;font-weight:800;padding:5px 8px;border-radius:7px;color:var(--muted)}.admin-segment span.active{background:var(--brand-soft);color:var(--brand-ink)}
.admin-latency-chart{height:205px;display:flex;flex-direction:column;justify-content:flex-end}
.admin-latency-bars{height:175px;display:flex;align-items:flex-end;gap:5px;border-bottom:1px solid var(--line);padding:10px 4px 0;overflow:hidden}
.admin-latency-point{height:100%;flex:1;min-width:5px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.admin-latency-point i{width:100%;max-width:15px;min-height:3px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#5b6cf6,#3b82f6);transition:height .35s ease,transform .2s ease}
.admin-latency-point:hover i{transform:translateY(-3px);box-shadow:0 6px 14px rgba(79,109,245,.25)}
.admin-latency-point span{font-size:7px;color:var(--faint)}
.admin-latency-axis{display:flex;justify-content:space-between;padding-top:8px;color:var(--faint);font-size:9px}

.admin-share-row{display:grid;gap:6px;margin-bottom:14px}.admin-share-row:last-child{margin-bottom:0}
.admin-share-row>div:first-child{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--ink-2)}.admin-share-row b{color:var(--ink)}
.admin-share-track{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}.admin-share-track i{display:block;height:100%;border-radius:inherit;transition:width .4s ease}.admin-share-track i.llm{background:#f59e0b}.admin-share-track i.rag{background:#2388ff}.admin-share-track i.embedding{background:#8b5cf6}.admin-share-track i.db{background:#10b981}.admin-share-track i.other{background:#94a3b8}

.admin-perf-table-wrap{overflow:auto}.admin-perf-table{width:100%;border-collapse:separate;border-spacing:0;font-size:10.5px}.admin-perf-table th{padding:8px 9px;text-align:left;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);white-space:nowrap}.admin-perf-table td{padding:9px;border-bottom:1px solid var(--line);color:var(--ink-2);white-space:nowrap}.admin-perf-table tbody tr{transition:background .18s ease}.admin-perf-table tbody tr:hover{background:var(--surface-2)}.admin-perf-table td:first-child small{display:block;color:var(--faint);font-size:8px;margin-top:2px}.admin-perf-table td strong{color:var(--ink)}
.admin-category-pill{display:inline-flex;max-width:110px;overflow:hidden;text-overflow:ellipsis;padding:4px 7px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-size:9px;font-weight:800}.admin-query-status{display:inline-flex;padding:4px 7px;border-radius:999px;font-size:8px;font-weight:800}.admin-query-status.ok{background:var(--green-soft);color:var(--green)}.admin-query-status.bad{background:var(--red-soft);color:var(--red)}

.admin-quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.admin-quality-item{display:grid;grid-template-columns:32px 1fr;gap:9px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.admin-quality-item:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 40%,var(--line));box-shadow:var(--shadow)}.admin-quality-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink)}.admin-quality-item small{display:block;color:var(--muted);font-size:9px}.admin-quality-item strong{display:block;color:var(--ink);font-size:17px;line-height:1.1;margin-top:2px}.admin-quality-item em{display:block;color:var(--faint);font-size:8px;font-style:normal;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-consumption{display:grid;gap:2px}.admin-consumption-row{display:grid;grid-template-columns:30px 1fr auto;gap:9px;align-items:center;padding:10px 3px;border-bottom:1px solid var(--line);font-size:10px;color:var(--muted)}.admin-consumption-row:last-child{border-bottom:0}.admin-consumption-row strong{color:var(--ink);font-size:11px}

/* Keep the floating System Health monitor independent from the dashboard grid. */
.global-health-wrap{position:fixed!important;right:20px!important;bottom:20px!important;z-index:200}

@media(max-width:1280px){
  .admin-kpi-all{grid-template-columns:repeat(3,minmax(0,1fr))}
  .admin-performance-grid{grid-template-columns:1fr 1fr}.admin-time-share{grid-column:1/-1}.admin-analysis-grid{grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}
}
@media(max-width:900px){
  .admin-kpi-all{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-performance-grid,.admin-analysis-grid{grid-template-columns:1fr}.admin-time-share{grid-column:auto}.admin-breakdown-wrap{grid-template-columns:150px 1fr}.admin-donut{width:145px;height:145px}
}
@media(max-width:560px){
  .admin-kpi-all{grid-template-columns:1fr}.admin-breakdown-wrap{grid-template-columns:1fr;justify-items:center}.admin-breakdown-list{width:100%}.admin-quality-grid{grid-template-columns:1fr}.admin-panel{padding:14px}.admin-perf-table{min-width:610px}.global-health-wrap{right:12px!important;bottom:calc(var(--bottom-nav-h, 72px) + 12px)!important}
}
@media(prefers-reduced-motion:reduce){.admin-latency-point i,.admin-quality-item{transition:none}}

/* Response Time Trend metric selector: show a pointer instead of the text I-beam. */
.admin-segment span { cursor: pointer; user-select: none; }
.admin-segment span:hover { cursor: pointer; }


/* Final responsive / interaction polish */
.admin-analysis-grid{align-items:stretch;min-width:0}
.admin-analysis-grid>.admin-panel{min-width:0;min-height:0}
.admin-recent-performance{min-height:0;overflow:hidden}
.admin-recent-performance .admin-perf-table-wrap{height:196px;max-height:196px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.admin-recent-performance .admin-perf-table{width:100%;min-width:720px}
.admin-recent-performance .admin-perf-table thead th{position:sticky;top:0;z-index:2;background:var(--surface)}
.admin-recent-performance .admin-perf-table tbody tr:last-child td{border-bottom:0}
.admin-dashboard{position:relative;isolation:isolate;--dash-mx:50%;--dash-my:18%}
.admin-dashboard::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(300px circle at var(--dash-mx) var(--dash-my),color-mix(in srgb,var(--brand) 9%,transparent),transparent 72%);opacity:.9;transition:opacity .25s ease}
.admin-dashboard:hover::before{opacity:1}
.admin-dashboard .admin-kpi,.admin-dashboard .admin-panel{position:relative;overflow:hidden}
.admin-dashboard .admin-kpi::after,.admin-dashboard .admin-panel::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(190px circle at var(--card-mx,50%) var(--card-my,0%),color-mix(in srgb,var(--brand) 8%,transparent),transparent 72%);opacity:0;transition:opacity .25s ease}
.admin-dashboard .admin-kpi:hover::after,.admin-dashboard .admin-panel:hover::after{opacity:1}
@media(max-width:820px){.nav{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity}.nav-item{scroll-snap-align:start}.admin-recent-performance .admin-perf-table-wrap{height:196px;max-height:196px}}
@media(max-width:560px){.admin-recent-performance .admin-perf-table-wrap{height:190px;max-height:190px}.admin-recent-performance .admin-perf-table{min-width:720px}}
@media(prefers-reduced-motion:reduce){.admin-dashboard::before,.admin-dashboard .admin-kpi::after,.admin-dashboard .admin-panel::after{transition:none}}
.auth-art{--star-x:0px;--star-y:0px}.auth-art .particles{transform:translate3d(var(--star-x),var(--star-y),0);transition:transform .35s ease-out}
@media(max-width:900px){.auth-art .particles{transform:none!important}}
@media(prefers-reduced-motion:reduce){.auth-art .particles{transform:none!important;transition:none}}

/* ---------- Personal User Dashboard ---------- */
.user-dashboard{position:relative;display:grid;gap:16px;min-width:0}
.user-dashboard:before{content:"";position:absolute;inset:-20px;border-radius:28px;pointer-events:none;background:radial-gradient(260px circle at var(--ux,50%) var(--uy,12%),color-mix(in srgb,var(--brand) 9%,transparent),transparent 70%);opacity:.75;z-index:0}
.user-kpi-grid,.user-dash-grid{position:relative;z-index:1}
.user-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.user-kpi{position:relative;overflow:hidden;min-width:0;padding:17px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.user-kpi:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-45px;top:-45px;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 10%,transparent),transparent 68%);pointer-events:none}
.user-kpi:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 30%,var(--line));box-shadow:0 14px 34px rgba(30,41,90,.10)}
.user-kpi>span{display:block;color:var(--muted);font-size:11px;font-weight:750}
.user-kpi>b{display:block;margin-top:8px;color:var(--ink);font-size:28px;line-height:1;letter-spacing:-.04em}
.user-kpi>small{display:block;margin-top:8px;color:var(--faint);font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:24px}
.user-kpi>i{position:absolute;right:15px;bottom:16px;width:31px;height:31px;border-radius:10px;display:grid;place-items:center;font-style:normal;background:var(--brand-soft);color:var(--brand-ink)}
.user-kpi.green>i{background:var(--green-soft);color:var(--green)}.user-kpi.amber>i{background:var(--amber-soft);color:var(--amber)}.user-kpi.purple>i{background:var(--brand-soft-2);color:var(--brand-ink)}.user-kpi.cyan>i{background:var(--brand-soft);color:var(--brand-ink)}
.user-dash-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr);gap:16px;align-items:stretch}
.user-dash-grid.lower{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}
.user-dash-panel{min-width:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);padding:17px;overflow:hidden}
.user-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:15px}.user-panel-head h3{margin:0;font-size:15px;color:var(--ink)}.user-panel-head p{margin:4px 0 0;color:var(--muted);font-size:10.5px}.user-panel-badge,.user-dash-range{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:9px;font-weight:750;background:var(--surface-2)}
.user-chart{height:190px;display:flex;align-items:flex-end;gap:10px;padding:8px 5px 0;border-bottom:1px solid var(--line)}
.user-bar-day{height:100%;flex:1;min-width:20px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}.user-bars{height:165px;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:4px}.user-bars i{display:block;width:12px;min-height:3px;border-radius:5px 5px 2px 2px;transition:height .35s ease,transform .18s ease}.user-bars i.q{background:linear-gradient(180deg,#6978ff,#4f63df)}.user-bars i.a{background:linear-gradient(180deg,#34c98a,#19a66e)}.user-bars i:hover{transform:translateY(-3px)}.user-bar-day small{font-size:8px;color:var(--faint)}
.user-perf-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.user-perf-summary>div{padding:13px 10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);text-align:center}.user-perf-summary span{display:block;color:var(--muted);font-size:9px}.user-perf-summary b{display:block;margin-top:5px;color:var(--ink);font-size:18px}.user-mini-note{margin-top:15px;padding:10px 12px;border-radius:10px;background:var(--brand-soft);color:var(--muted);font-size:9px;line-height:1.5}
.user-recent-list{display:grid;height:236px;max-height:236px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding-right:3px}.user-recent-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:55px;padding:9px 2px;border-bottom:1px solid var(--line)}.user-recent-row:last-child{border-bottom:0}.user-recent-row>div{min-width:0}.user-recent-row b{display:block;color:var(--ink);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-recent-row small{display:block;margin-top:3px;color:var(--faint);font-size:8.5px}.user-recent-row strong{color:var(--ink);font-size:10px}.user-status-dot{width:7px;height:7px;border-radius:50%}.user-status-dot.ok{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}.user-status-dot.bad{background:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.user-category-list{display:grid;gap:14px;padding-top:3px}.user-cat-row>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted)}.user-cat-row b{color:var(--ink)}.user-cat-track{height:7px;margin-top:7px;border-radius:99px;background:var(--surface-3);overflow:hidden}.user-cat-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),#8b7cff);transition:width .4s ease}
.user-learning-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.user-learning-stats>div{padding:14px;border:1px solid var(--line);background:var(--surface-2);border-radius:12px}.user-learning-stats span{display:block;color:var(--muted);font-size:9px}.user-learning-stats b{display:block;margin-top:5px;color:var(--ink);font-size:20px}
.user-quick-actions{display:grid;gap:7px}.user-quick-actions button{display:grid;grid-template-columns:28px minmax(0,1fr) 16px;align-items:center;gap:10px;width:100%;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--muted);text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease}.user-quick-actions button:hover{transform:translateX(2px);border-color:color-mix(in srgb,var(--brand) 35%,var(--line));color:var(--brand-ink)}.user-quick-actions button>svg:first-child{padding:6px;width:28px;height:28px;border-radius:8px;background:var(--brand-soft)}.user-quick-actions b{display:block;color:var(--ink);font-size:10px}.user-quick-actions small{display:block;margin-top:2px;color:var(--faint);font-size:8.5px}
@media(max-width:1100px){.user-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.user-dash-grid,.user-dash-grid.lower{grid-template-columns:1fr}}
@media(max-width:600px){.user-kpi-grid{grid-template-columns:1fr}.user-kpi{padding:15px}.user-panel-head{align-items:flex-start}.user-panel-head p{max-width:210px}.user-dash-panel{padding:14px}.user-chart{height:165px;gap:5px}.user-bars{height:140px}.user-bars i{width:9px}.user-perf-summary b{font-size:15px}.user-learning-stats{grid-template-columns:1fr 1fr}.user-learning-stats>div:last-child{grid-column:1/-1}.user-dash-range{font-size:8px}.user-dashboard:before{display:none}.user-recent-list{height:220px;max-height:220px}}
@media(prefers-reduced-motion:reduce){.user-kpi,.user-bars i,.user-quick-actions button{transition:none}}

/* User gamification: leaderboard, XP and achievement badges */
.gamification-grid{align-items:stretch}
.user-leaderboard-panel,.user-badges-panel{min-height:0}
.user-you-score{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:2px 0 10px}
.user-you-score>div{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface-2) 72%,transparent);min-width:0}
.user-you-score span,.user-level-box span{display:block;color:var(--faint);font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}
.user-you-score b{display:block;margin-top:4px;color:var(--ink);font-size:19px;letter-spacing:-.03em}
.user-leaderboard-list{display:grid;max-height:285px;overflow:auto;scrollbar-width:thin;padding-right:3px}
.user-leader-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:9px;align-items:center;min-height:48px;padding:7px 6px;border-bottom:1px solid var(--line);border-radius:10px;transition:background .18s ease,transform .18s ease}
.user-leader-row:last-child{border-bottom:0}
.user-leader-row:hover{background:color-mix(in srgb,var(--brand) 5%,transparent);transform:translateX(2px)}
.user-leader-row.you{background:color-mix(in srgb,var(--brand) 8%,transparent);box-shadow:inset 2px 0 0 var(--brand)}
.user-rank{font-size:14px;text-align:center;font-weight:800;color:var(--muted)}
.user-leader-main{min-width:0}.user-leader-main b{display:block;font-size:10.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-leader-main em{font-style:normal;font-size:8px;color:var(--brand-ink);background:var(--brand-soft);padding:2px 5px;border-radius:999px;margin-left:4px}.user-leader-main small{display:block;margin-top:3px;color:var(--faint);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-leader-row>strong{font-size:12px;color:var(--brand-ink)}
.user-level-box{padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 8%,var(--surface)),var(--surface));margin-bottom:12px}.user-level-box>b{display:block;margin-top:3px;font-size:20px;color:var(--ink)}
.user-xp-track{height:7px;margin-top:8px;background:var(--surface-3);border-radius:99px;overflow:hidden}.user-xp-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),var(--cyan));box-shadow:0 0 12px color-mix(in srgb,var(--brand) 30%,transparent)}.user-level-box small{display:block;margin-top:6px;color:var(--faint);font-size:8px}
.user-badge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.user-badge{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}.user-badge>span{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--brand-soft);font-size:17px;flex:0 0 auto}.user-badge b{display:block;color:var(--ink);font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-badge small{display:block;margin-top:3px;color:var(--brand-ink);font-size:8px;font-weight:750}.user-badge-empty{grid-column:1/-1;padding:18px;text-align:center;color:var(--faint);font-size:9px;line-height:1.5;border:1px dashed var(--line);border-radius:12px}
@media(max-width:1100px){.gamification-grid{grid-template-columns:1fr}.user-badge-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.user-you-score{gap:7px}.user-you-score>div{padding:9px}.user-you-score b{font-size:16px}.user-leaderboard-list{max-height:260px}.user-badge-grid{grid-template-columns:1fr 1fr}.user-badge{padding:8px}.user-badge>span{width:28px;height:28px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.user-leader-row{transition:none}}

/* User dashboard refinements */
.user-chart{overflow:visible}
.user-bars{overflow:visible;position:relative}
.user-bars i{position:relative;overflow:visible}
.user-bars i::after{content:attr(data-value);position:absolute;left:50%;top:-17px;transform:translateX(-50%);font-size:8px;line-height:1;font-weight:800;color:var(--ink);white-space:nowrap;pointer-events:none}
.user-bars i.q::after{color:var(--brand-ink)}
.user-bars i.a::after{color:var(--green)}
.user-period-centered{position:absolute;left:50%;transform:translateX(-50%);top:0}
.user-dash-grid>.user-dash-panel:has(.user-period-centered) .user-panel-head{position:relative;min-height:28px}
.user-recent-list{grid-auto-rows:55px;align-content:start}
.leaderboard-head{align-items:center}
.leaderboard-period{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.leaderboard-period>span{font-size:9px;font-weight:750;color:var(--muted)}
.leaderboard-period select{appearance:none;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:999px;padding:6px 25px 6px 10px;font-size:9px;font-weight:750;cursor:pointer;outline:none;box-shadow:inset 0 0 0 1px transparent;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 12px) 10px,calc(100% - 8px) 10px;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.leaderboard-period select:focus{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:0 0 0 3px var(--brand-soft)}
@media(max-width:600px){
  .user-period-centered{position:static;transform:none}
  .user-dash-grid>.user-dash-panel:has(.user-period-centered) .user-panel-head{min-height:0}
  .leaderboard-head{align-items:flex-start;flex-direction:column}
  .leaderboard-period{width:100%;justify-content:space-between}
  .leaderboard-period select{flex:1;max-width:170px}
}


/* Chat knowledge library + account affordance */
.chat-knowledge-picker{display:inline-flex;align-items:center;gap:7px;margin-left:6px;padding:3px 5px 3px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:10px;font-weight:750;white-space:nowrap;box-shadow:var(--shadow)}
.chat-knowledge-picker>span{display:inline-flex;align-items:center;gap:5px}
.chat-knowledge-picker .ic{width:13px;height:13px;color:var(--brand-ink)}
.chat-knowledge-picker select{max-width:210px;border:0;outline:0;background:transparent;color:var(--ink);font-size:10px;font-weight:700;cursor:pointer;padding:4px 22px 4px 2px}
.account-avatar{background:linear-gradient(135deg,var(--brand),#6d5cf5)!important;color:#fff!important;border-color:color-mix(in srgb,var(--brand) 40%,transparent)!important;box-shadow:0 5px 16px color-mix(in srgb,var(--brand) 22%,transparent)}
.account-avatar-button{border:1px solid transparent;cursor:pointer;padding:0;font:inherit}
.user-account-trigger{border:0;background:transparent;color:inherit;width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:8px;border-radius:12px;cursor:pointer}
.user-account-trigger:hover{background:var(--surface-3)}
.user-account-trigger .meta{min-width:0}
.user-account-trigger .meta b,.user-account-trigger .meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.response-performance-head>div{width:100%;text-align:center}
.response-performance-head h3{text-align:left}
.response-performance-head p{text-align:center;margin-top:2px}
.response-performance-head .user-period-centered{display:block;position:static;transform:none;margin:2px auto 2px;width:max-content}
.user-recent-list{height:220px;max-height:220px;grid-auto-rows:52px;align-content:start;gap:0}
.user-recent-row{min-height:52px;height:52px;padding:6px 2px}
@media(max-width:820px){.chat-knowledge-picker{max-width:100%;}.chat-knowledge-picker select{max-width:160px}.user-account-trigger{padding:7px}}
@media(max-width:600px){.chat-knowledge-picker{width:100%;justify-content:space-between;margin:0;border-radius:12px}.chat-knowledge-picker select{max-width:none;flex:1}.response-performance-head>div{width:100%}.response-performance-head h3{text-align:left}.response-performance-head p{text-align:center}.user-recent-list{height:208px;max-height:208px;grid-auto-rows:52px}.user-recent-row{height:52px;min-height:52px}}

/* Daily Reading */
.daily-reading-grid{grid-template-columns:1fr!important}
.daily-reading-card{min-height:180px}
.daily-reading-preview{padding:4px 2px 2px}
.daily-reading-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.daily-reading-meta span:first-child{color:var(--brand-ink)}
.daily-reading-preview h2{margin:0 0 6px;font-size:22px;line-height:1.18;color:var(--ink)}
.daily-dek{margin:0 0 14px;color:var(--muted);font-size:12px;line-height:1.55;max-width:850px}
.daily-empty{display:grid;place-items:center;text-align:center;padding:24px 12px;color:var(--muted)}
.daily-empty .metric-ic{margin-bottom:10px}
.daily-empty b,.daily-empty h2{color:var(--ink);margin:0 0 5px}
.daily-empty p{max-width:620px;margin:0 0 14px;line-height:1.55;font-size:11px}
.daily-reading-modal{width:min(760px,100%);max-height:min(86vh,760px);overflow:auto}
.daily-interest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px;max-height:48vh;overflow:auto;padding-right:2px}
.daily-interest{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);cursor:pointer;transition:.18s ease}
.daily-interest:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));transform:translateY(-1px)}
.daily-interest input{accent-color:var(--brand);width:16px;height:16px;flex:0 0 auto}
.daily-interest span{display:grid;gap:3px;min-width:0}.daily-interest b{font-size:11px;color:var(--ink)}.daily-interest small{font-size:9px;color:var(--muted)}
.daily-setup-card{min-height:330px;display:grid;place-items:center}
.daily-article{padding:28px;max-width:980px;margin:0 auto}
.daily-article h2{font-size:30px;line-height:1.16;margin:0 0 8px}.daily-article-body{margin-top:24px;color:var(--ink);font-size:13px;line-height:1.75}.daily-article-body h2{font-size:18px;margin:24px 0 8px}.daily-article-body p{margin:0 0 14px}
.daily-history{max-width:980px;margin:16px auto 0}.daily-history h3{font-size:14px;margin:0 0 8px}.daily-history-row{width:100%;display:grid;grid-template-columns:90px 1fr auto;gap:12px;text-align:left;padding:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;margin-bottom:7px;cursor:pointer}.daily-history-row span,.daily-history-row small{color:var(--muted);font-size:10px}.daily-history-row b{font-size:11px}
.chat-knowledge-picker select{appearance:none;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.05);padding:5px 28px 5px 8px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 12px) 10px,calc(100% - 8px) 10px;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.chat-knowledge-picker select:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}.chat-knowledge-picker select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
@media(max-width:700px){.daily-interest-grid{grid-template-columns:1fr}.daily-article{padding:20px 16px}.daily-article h2{font-size:23px}.daily-history-row{grid-template-columns:1fr}.daily-reading-meta{align-items:flex-start;flex-direction:column}.daily-reading-card{min-height:0}}

/* Admin learning tools */
.admin-learning-tools-grid{grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);align-items:stretch}
.admin-daily-reading-panel,.admin-random-question-panel{min-height:260px}
.admin-random-question-body{display:flex;flex-direction:column;justify-content:center;min-height:170px}
.admin-random-question{display:flex;align-items:flex-start;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.admin-random-question-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);flex:none}
.admin-random-question-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.admin-random-question-copy b{font-size:15px;line-height:1.45;color:var(--ink)}
.admin-random-question-copy span{font-size:12px;color:var(--muted)}
.admin-random-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
@media (max-width:900px){.admin-learning-tools-grid{grid-template-columns:1fr}}

/* Keep the orbital boot animation active on desktop too. Some desktop OS/browser
   accessibility settings expose prefers-reduced-motion, but RetailIQ's short
   startup orbit is part of the product loading indicator. */
@media (prefers-reduced-motion:reduce){
  .boot-core-ring{animation:boot-ring 2.6s linear infinite}
  .boot-core-grid{animation:boot-ring-reverse 7s linear infinite}
  .boot-orbit{animation-duration:4.2s}
  .boot-orbit-a{animation-name:boot-orbit-a}
  .boot-orbit-b{animation-name:boot-orbit-b;animation-duration:5.8s}
  .boot-orbit-c{animation-name:boot-ring;animation-duration:9s}
}

/* ==========================================================================\n   Chat window — fixed app surface / reference design\n   Keep the existing Select Knowledge Area selector and its logic.\n   Only .messages is allowed to scroll.\n   ========================================================================== */
html.chat-screen, body.chat-screen{height:100%;overflow:hidden!important}
body.chat-screen .portal{height:100dvh;min-height:0;overflow:hidden}
body.chat-screen .main{height:100dvh;min-height:0;overflow:hidden}
body.chat-screen .main.chat-mode .content.is-chat{height:calc(100dvh - var(--topbar-h));min-height:0;max-height:calc(100dvh - var(--topbar-h));overflow:hidden}
body.chat-screen .content.is-chat{padding:12px 16px;}
body.chat-screen .chat-layout{height:100%;min-height:0;overflow:hidden;align-items:stretch}
body.chat-screen .chat-card{height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column}
body.chat-screen .chat-top{flex:0 0 64px;min-height:64px;height:64px;padding:10px 18px}
body.chat-screen .modes{flex:0 0 50px;min-height:50px;height:50px;padding:7px 14px;overflow:visible}
body.chat-screen .modes.knowledge-only .chat-knowledge-picker{min-height:36px;padding:7px 10px 7px 12px}
body.chat-screen .messages{flex:1 1 auto;min-height:0;height:auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding:18px 24px 8px}
body.chat-screen .thread{min-height:100%;}
body.chat-screen .composer{flex:0 0 auto;padding:8px 20px 10px;background:var(--surface);}
body.chat-screen .composer-inner{width:100%;max-width:1100px}
body.chat-screen .rail{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain}
body.chat-screen .rail .card{flex:0 0 auto}

/* Reference proportions */
body.chat-screen .chat-title .ai-orb{width:40px;height:40px;border-radius:13px}
body.chat-screen .chat-title h2{font-size:17px}
body.chat-screen .chat-title p{font-size:12.5px}
body.chat-screen .welcome{max-width:980px;margin:auto;padding:18px 0 8px}
body.chat-screen .welcome .ai-orb{width:70px;height:70px;border-radius:23px;margin-bottom:14px}
body.chat-screen .welcome h2{font-size:30px}
body.chat-screen .welcome p{font-size:14px;max-width:680px}
body.chat-screen .starters{max-width:940px;gap:10px;margin-top:20px}
body.chat-screen .starter{min-height:64px;padding:12px 14px}
body.chat-screen .composer-box{min-height:54px;border-radius:18px;padding:7px 8px 7px 15px}
body.chat-screen .send{width:38px;height:38px;border-radius:12px}
body.chat-screen .rail{gap:12px}
body.chat-screen .rail .card{padding:16px;border-radius:18px}

@media(max-width:900px){
  body.chat-screen .chat-layout.with-rail{grid-template-columns:minmax(0,1fr)}
  body.chat-screen .rail{display:none}
}

@media(max-width:820px), (orientation:portrait) and (max-width:1024px){
  body.chat-screen .content.is-chat{padding:10px}
  body.chat-screen .chat-layout{height:calc(100dvh - var(--topbar-h) - var(--bottom-nav-h) - 20px);min-height:420px}
  body.chat-screen .chat-top{padding:12px 14px;min-height:64px}
  body.chat-screen .modes{padding:9px 14px;min-height:56px}
  body.chat-screen .messages{padding:18px 12px 6px}
  body.chat-screen .composer{padding:8px 10px 12px}
  body.chat-screen .composer-hint{display:none}
  body.chat-screen .welcome{padding:6px 0 12px}
  body.chat-screen .welcome .ai-orb{width:54px;height:54px;border-radius:17px;margin-bottom:12px}
  body.chat-screen .welcome h2{font-size:25px}
  body.chat-screen .starters{grid-template-columns:1fr;gap:8px;margin-top:18px}
  body.chat-screen .starter{padding:11px 12px;min-height:64px}
}

/* AI Consumption: full-width row */
.admin-analysis-grid > .admin-panel:has(#consumptionMetrics) {
    grid-column: 1 / -1;
    width: 100%;
}

/* Communication centre */
.top-notification-btn{position:relative;width:38px;height:38px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:11px;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm)}
.top-notification-btn:hover{border-color:var(--brand);color:var(--brand)}
.notification-count{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid var(--surface)}
.notification-count[hidden]{display:none}
.notification-panel{position:fixed;right:22px;top:70px;width:390px;max-width:calc(100vw - 32px);max-height:620px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);z-index:1000;overflow:hidden}
.notification-panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.notification-panel-head b{display:block;font-size:15px}.notification-panel-head small{display:block;color:var(--muted);margin-top:2px}
.notification-list{max-height:550px;overflow:auto}.notification-item{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;padding:13px 16px;display:flex;gap:10px;cursor:pointer;color:var(--ink)}
.notification-item:hover,.notification-item.unread{background:var(--brand-soft)}.notification-item>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.notification-item b{font-size:13px}.notification-item small{color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-item em{font-style:normal;color:var(--faint);font-size:11px;margin-top:5px}.notification-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);margin-top:6px;flex:0 0 auto}.notification-item:not(.unread) .notification-dot{background:var(--line-2)}
.notification-empty{padding:35px;text-align:center;color:var(--muted)}
.notification-page-row{width:100%;display:flex;gap:14px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--surface);padding:16px;border-radius:14px;margin-bottom:10px;cursor:pointer;color:var(--ink)}.notification-page-row.unread{border-color:var(--brand-soft-2);background:var(--brand-soft)}.notification-page-row>span:nth-child(2){flex:1}.notification-page-row b,.notification-page-row small,.notification-page-row em{display:block}.notification-page-row small{color:var(--muted);margin-top:3px}.notification-page-row em{font-style:normal;color:var(--faint);font-size:11px;margin-top:4px}.notification-page-row i{font-style:normal;color:var(--brand);font-size:11px;font-weight:800}
.communication-grid{display:grid;grid-template-columns:310px minmax(0,1fr);min-height:560px}.conversation-list{border-right:1px solid var(--line);padding:8px}.conversation-row{width:100%;display:flex;gap:10px;text-align:left;padding:12px;border:0;border-radius:11px;background:transparent;color:var(--ink);cursor:pointer}.conversation-row:hover{background:var(--surface-2)}.conversation-row>span:last-child{min-width:0;display:flex;flex-direction:column}.conversation-row small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-row em{font-size:10px;color:var(--faint);font-style:normal;margin-top:3px}.conversation-view{display:flex;flex-direction:column;min-width:0}.conversation-head{display:flex;gap:10px;align-items:center;padding:16px;border-bottom:1px solid var(--line)}.conversation-head small{display:block;color:var(--muted)}.message-stream{flex:1;padding:20px;overflow:auto;min-height:360px}.message-bubble{max-width:72%;width:max-content;background:var(--surface-2);border:1px solid var(--line);padding:10px 13px;border-radius:13px 13px 13px 4px;margin-bottom:10px}.message-bubble.mine{margin-left:auto;background:var(--brand-soft);border-color:var(--brand-soft-2);border-radius:13px 13px 4px 13px}.message-bubble small{display:block;color:var(--faint);font-size:10px;margin-top:5px}.message-compose{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line)}.message-compose textarea{flex:1;resize:none}.user-picker{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:4px}.picker-search{margin-bottom:7px}
.broadcast-card,.survey-card{padding:18px;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;background:var(--surface)}.broadcast-card h3,.survey-card h3{margin:10px 0 6px}.broadcast-card p{margin:0;color:var(--ink-2);white-space:pre-wrap}.broadcast-meta{display:flex;gap:7px;align-items:center}.broadcast-meta small{margin-left:auto;color:var(--faint)}.broadcast-card footer{border-top:1px solid var(--line);margin-top:14px;padding-top:10px;color:var(--muted);font-size:12px}
.task-row{display:flex;align-items:flex-start;gap:14px;padding:16px;border-bottom:1px solid var(--line)}.task-row:last-child{border-bottom:0}.task-row>div:nth-child(2){flex:1}.task-row p{margin:3px 0;color:var(--muted)}.task-row small{color:var(--faint)}.task-priority{width:8px;height:42px;border-radius:5px;background:var(--line-2);flex:0 0 auto}.task-priority.high,.task-priority.urgent{background:var(--red)}.task-priority.medium{background:var(--amber)}.task-priority.low{background:var(--green)}.task-status{min-width:130px}
.kr-row{display:flex;gap:16px;align-items:center;padding:17px;border-bottom:1px solid var(--line)}.kr-row:last-child{border-bottom:0}.kr-main{flex:1;min-width:0}.kr-title{display:flex;align-items:center;gap:8px}.kr-main p{margin:5px 0;color:var(--muted)}.kr-main small{color:var(--faint)}.survey-options{display:grid;gap:8px;margin:14px 0}.survey-options label{padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}.survey-options label:hover{background:var(--surface-2)}
.wide-modal{width:min(700px,calc(100vw - 32px))}
@media(max-width:800px){.communication-grid{grid-template-columns:1fr}.conversation-list{border-right:0;border-bottom:1px solid var(--line);max-height:230px;overflow:auto}.notification-panel{right:10px;top:62px}.message-bubble{max-width:88%}.kr-row{align-items:flex-start;flex-wrap:wrap}.task-row{flex-wrap:wrap}.task-status{width:100%}}

/* ==========================================================================\n   Direct Email — Super Admin only\n   Responsive across desktop, iPad/tablet and mobile.\n   ========================================================================== */
.email-shell{max-width:1180px;margin:0 auto;min-width:0}
.email-compose-card{padding:0;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.email-card-intro{display:flex;align-items:center;gap:14px;padding:20px 22px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,var(--surface),var(--surface-2))}
.email-compose-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;background:var(--brand-soft);color:var(--brand-ink);box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 10%,transparent)}
.email-card-intro h3{margin:0;color:var(--ink);font-size:16px}.email-card-intro p{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.5}.email-card-intro p b{color:var(--ink-2)}
.email-fields{display:grid;grid-template-columns:minmax(300px,.82fr) minmax(360px,1.18fr);gap:0;min-width:0}
.email-recipient-field{margin:0;padding:20px;border-right:1px solid var(--line);min-width:0}.email-message-fields{padding:20px;min-width:0}.email-fields .field label{display:flex;justify-content:space-between;align-items:center;gap:8px}.field-count{font-size:10px;font-weight:800;color:var(--brand-ink);background:var(--brand-soft);border-radius:999px;padding:4px 8px;white-space:nowrap}
.email-recipient-list{height:330px;max-height:42vh;overflow:auto;display:grid;align-content:start;gap:6px;padding:2px;margin-top:2px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);scrollbar-gutter:stable}
.email-recipient{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink);text-align:left;cursor:pointer;min-width:0;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.email-recipient:hover{background:var(--surface);border-color:var(--line)}.email-recipient.selected{background:var(--brand-soft);border-color:var(--brand-soft-2)}
.email-recipient-avatar{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:linear-gradient(135deg,var(--brand),#6d5cf5);color:#fff;font-size:11px;font-weight:850}.email-recipient-copy{display:flex;flex-direction:column;min-width:0;flex:1}.email-recipient-copy b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-recipient-copy small{margin-top:2px;color:var(--muted);font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-recipient-check{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;color:var(--brand);background:var(--surface)}.email-recipient.selected .email-recipient-check{background:var(--brand);color:#fff}.email-recipient-empty{min-height:180px;display:grid;place-items:center;align-content:center;gap:8px;color:var(--muted);font-size:11px;text-align:center;padding:20px}.email-recipient-empty .ic{color:var(--brand)}
.email-message-fields textarea{min-height:260px;resize:vertical;line-height:1.55}.email-compose-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--line);background:var(--surface-2)}.email-compose-footer .hint{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1000px){.email-fields{grid-template-columns:1fr}.email-recipient-field{border-right:0;border-bottom:1px solid var(--line)}.email-recipient-list{height:250px;max-height:34vh}}
@media(max-width:700px){.email-card-intro{align-items:flex-start;padding:16px}.email-compose-icon{width:40px;height:40px}.email-fields .field{margin-bottom:13px}.email-recipient-field,.email-message-fields{padding:15px}.email-recipient-list{height:230px;max-height:32vh}.email-message-fields textarea{min-height:190px}.email-compose-footer{padding:12px 15px;align-items:stretch;flex-direction:column}.email-compose-footer .hint{text-align:center}.email-compose-footer .btn{width:100%;justify-content:center}.email-card-intro p{font-size:10px}}
@media(max-width:430px){.email-card-intro{gap:10px}.email-card-intro h3{font-size:15px}.email-recipient{padding:8px}.email-recipient-avatar{width:32px;height:32px}.email-recipient-copy b{font-size:10.5px}.email-recipient-copy small{font-size:8.5px}.email-recipient-list{height:215px}.email-message-fields textarea{min-height:170px}}

/* Communication + chat final viewport safety */
.communication-grid,.chat-layout,.chat-card,.messages,.thread,.content{min-width:0}
@media(max-width:900px){.communication-grid{min-height:0}.conversation-list{max-height:220px}.conversation-view{min-height:420px}.message-stream{min-height:260px;padding:14px}.message-compose{padding:10px}.message-compose textarea{min-width:0}.task-row,.kr-row{gap:10px}.task-row .btn,.kr-row .btn{max-width:100%}}
@media(max-width:600px){.page-head{gap:10px;align-items:flex-start}.page-head .actions{width:100%;display:flex;flex-wrap:wrap}.page-head .actions .btn{flex:1 1 auto}.conversation-list{max-height:190px}.conversation-row{padding:10px}.message-stream{padding:12px 10px}.message-bubble{max-width:92%;font-size:12px}.message-compose{gap:7px;align-items:flex-end}.message-compose textarea{min-height:44px}.message-compose .btn{min-width:44px;padding:10px}.notification-page-row{padding:13px;gap:10px}.notification-page-row i{display:none}.broadcast-card,.survey-card{padding:14px}.task-row{padding:13px}.task-row>div:nth-child(2){width:calc(100% - 18px)}.task-status{min-width:0}.kr-row{padding:13px}.kr-title{flex-wrap:wrap}}

/* Prevent iPad/mobile horizontal drift from wide utility controls. */
@media(max-width:1024px){.content,.main,.portal{min-width:0}.topbar{min-width:0}.top-search{min-width:0}.top-search input{min-width:0}.card{max-width:100%}}

/* Direct Email — Super Admin only: responsive desktop / iPad / mobile */
.email-shell{max-width:1180px;margin:0 auto;min-width:0}.email-compose-card{padding:0;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.email-card-intro{display:flex;align-items:center;gap:14px;padding:20px 22px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,var(--surface),var(--surface-2))}.email-compose-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;background:var(--brand-soft);color:var(--brand-ink);box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 10%,transparent)}.email-card-intro h3{margin:0;color:var(--ink);font-size:16px}.email-card-intro p{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.5}.email-card-intro p b{color:var(--ink-2)}
.email-fields{display:grid;grid-template-columns:minmax(300px,.82fr) minmax(360px,1.18fr);gap:0;min-width:0}.email-recipient-field{margin:0;padding:20px;border-right:1px solid var(--line);min-width:0}.email-message-fields{padding:20px;min-width:0}.email-fields .field label{display:flex;justify-content:space-between;align-items:center;gap:8px}.field-count{font-size:10px;font-weight:800;color:var(--brand-ink);background:var(--brand-soft);border-radius:999px;padding:4px 8px;white-space:nowrap}.email-recipient-list{height:330px;max-height:42vh;overflow:auto;display:grid;align-content:start;gap:6px;padding:6px;margin-top:2px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);scrollbar-gutter:stable}
.email-recipient{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink);text-align:left;cursor:pointer;min-width:0;transition:background .16s ease,border-color .16s ease,transform .16s ease}.email-recipient:hover{background:var(--surface);border-color:var(--line)}.email-recipient.selected{background:var(--brand-soft);border-color:var(--brand-soft-2)}.email-recipient-avatar{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:linear-gradient(135deg,var(--brand),#6d5cf5);color:#fff;font-size:11px;font-weight:850}.email-recipient-copy{display:flex;flex-direction:column;min-width:0;flex:1}.email-recipient-copy b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-recipient-copy small{margin-top:2px;color:var(--muted);font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-recipient-check{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;color:var(--brand);background:var(--surface)}.email-recipient.selected .email-recipient-check{background:var(--brand);color:#fff}.email-recipient-empty{min-height:180px;display:grid;place-items:center;align-content:center;gap:8px;color:var(--muted);font-size:11px;text-align:center;padding:20px}.email-recipient-empty .ic{color:var(--brand)}
.email-message-fields textarea{min-height:260px;resize:vertical;line-height:1.55}.email-compose-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--line);background:var(--surface-2)}.email-compose-footer .hint{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1000px){.email-fields{grid-template-columns:1fr}.email-recipient-field{border-right:0;border-bottom:1px solid var(--line)}.email-recipient-list{height:250px;max-height:34vh}}
@media(max-width:700px){.email-card-intro{align-items:flex-start;padding:16px}.email-compose-icon{width:40px;height:40px}.email-recipient-field,.email-message-fields{padding:15px}.email-recipient-list{height:230px;max-height:32vh}.email-message-fields textarea{min-height:190px}.email-compose-footer{padding:12px 15px;align-items:stretch;flex-direction:column}.email-compose-footer .hint{text-align:center}.email-compose-footer .btn{width:100%;justify-content:center}.email-card-intro p{font-size:10px}}
@media(max-width:430px){.email-card-intro{gap:10px}.email-card-intro h3{font-size:15px}.email-recipient{padding:8px}.email-recipient-avatar{width:32px;height:32px}.email-recipient-copy b{font-size:10.5px}.email-recipient-copy small{font-size:8.5px}.email-recipient-list{height:215px}.email-message-fields textarea{min-height:170px}}
/* Communication/chat viewport safety */
.communication-grid,.chat-layout,.chat-card,.messages,.thread,.content{min-width:0}@media(max-width:900px){.communication-grid{min-height:0}.conversation-list{max-height:220px}.conversation-view{min-height:420px}.message-stream{min-height:260px;padding:14px}.message-compose{padding:10px}.message-compose textarea{min-width:0}.task-row,.kr-row{gap:10px}}@media(max-width:600px){.page-head{gap:10px;align-items:flex-start}.page-head .actions{width:100%;display:flex;flex-wrap:wrap}.page-head .actions .btn{flex:1 1 auto}.conversation-list{max-height:190px}.message-stream{padding:12px 10px}.message-bubble{max-width:92%;font-size:12px}.message-compose{gap:7px;align-items:flex-end}.message-compose textarea{min-height:44px}.message-compose .btn{min-width:44px;padding:10px}.notification-page-row{padding:13px;gap:10px}.notification-page-row i{display:none}.broadcast-card,.survey-card{padding:14px}.task-row{padding:13px}.kr-row{padding:13px}.kr-title{flex-wrap:wrap}}@media(max-width:1024px){.content,.main,.portal{min-width:0}.topbar{min-width:0}.top-search{min-width:0}.top-search input{min-width:0}.card{max-width:100%}}

/* ===== Communication UX: viewport-safe, touch-friendly layouts ===== */
.inbox-card,.notification-page-card,.task-list-card,.survey-list-card{height:calc(100dvh - var(--topbar-h) - 128px);min-height:420px;overflow:hidden}
.communication-grid{height:100%;min-height:0;overflow:hidden;grid-template-rows:1fr}.conversation-list{height:100%;min-height:0;overflow-y:auto}.conversation-view{height:100%;min-height:0;overflow:hidden}.message-stream{min-height:0;height:auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.message-compose{flex:0 0 auto;background:var(--surface)}
.message-modal{width:min(620px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto}
.recipient-autocomplete{position:relative}.recipient-suggestions{position:absolute;z-index:20;left:0;right:0;top:76px;max-height:280px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:5px;animation:rise .16s ease}.recipient-suggestion{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--ink);padding:10px;border-radius:9px;text-align:left;cursor:pointer}.recipient-suggestion:hover{background:var(--surface-2)}.recipient-suggestion>span:last-child{min-width:0;display:flex;flex-direction:column}.recipient-suggestion small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recipient-selected{display:flex;align-items:center;gap:10px;border:1px solid var(--brand-soft-2);background:var(--brand-soft);border-radius:11px;padding:8px 10px}.recipient-selected>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}.recipient-selected small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notification-panel{max-height:min(430px,calc(100dvh - 90px));animation:notificationIn .18s ease-out}.notification-list{max-height:330px;overflow-y:auto;overscroll-behavior:contain}.notification-panel-head{gap:10px}.notification-head-actions{display:flex;align-items:center;gap:8px}.notification-read-all{font-size:10px;color:var(--brand-ink);white-space:nowrap}.notification-panel-foot{padding:9px 14px;border-top:1px solid var(--line);font-size:10px;color:var(--muted);text-align:center}.notification-panel-enter{transform-origin:top right}@keyframes notificationIn{from{opacity:0;transform:translateY(-7px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.notification-page-card{overflow-y:auto}.notification-page-row{animation:rise .18s ease both}.notification-page-row.unread{background:var(--brand-soft)}.notification-page-row+.notification-page-row{border-top:1px solid var(--line)}
.broadcast-card footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.broadcast-card footer .deleteBroadcast{margin-left:auto}
.task-status{appearance:none;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);padding:9px 34px 9px 11px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.task-status:focus{outline:2px solid var(--brand-soft-2);border-color:var(--brand)}
.survey-list-card{overflow-y:auto}.survey-card{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--surface),var(--surface-2));box-shadow:var(--shadow)}.survey-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.survey-timer{font-size:10px;font-weight:800;color:var(--brand-ink);background:var(--brand-soft);border-radius:999px;padding:5px 8px}.survey-card .resultsSurvey{margin-left:8px}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red)}.btn-danger:hover{filter:brightness(.95)}
@media(max-width:900px){.inbox-card,.notification-page-card,.task-list-card,.survey-list-card{height:calc(100dvh - var(--topbar-h) - 150px);min-height:360px}.communication-grid{grid-template-columns:270px minmax(0,1fr)}.conversation-list{border-right:1px solid var(--line);border-bottom:0;max-height:none}.message-bubble{max-width:82%}}
@media(max-width:700px){.inbox-card,.notification-page-card,.task-list-card,.survey-list-card{height:calc(100dvh - var(--topbar-h) - 178px);min-height:330px}.communication-grid{grid-template-columns:1fr;grid-template-rows:minmax(120px,30%) minmax(0,1fr)}.conversation-list{border-right:0;border-bottom:1px solid var(--line);max-height:none}.conversation-view{min-height:0}.message-bubble{max-width:90%}.notification-panel{left:10px;right:10px;top:62px;width:auto;max-width:none}.notification-list{max-height:calc(100dvh - 210px)}.task-status{width:100%}.survey-card .resultsSurvey{margin:8px 0 0;width:100%}.broadcast-card footer .deleteBroadcast{margin-left:0}}
@media(max-width:430px){.inbox-card,.notification-page-card,.task-list-card,.survey-list-card{height:calc(100dvh - var(--topbar-h) - 185px)}.message-compose textarea{font-size:13px}.recipient-suggestions{top:72px}.notification-panel{top:58px}.notification-panel-head{padding:13px}.notification-item{padding:10px}.task-row{align-items:flex-start}.survey-card{padding:13px}}

/* Knowledge request review */
.kr-row{width:100%;display:flex;align-items:center;gap:16px;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line,#263044);padding:16px 18px;color:inherit;cursor:pointer;transition:background .18s ease,transform .18s ease}.kr-row:hover{background:rgba(91,113,255,.07);transform:translateY(-1px)}.kr-open-hint{margin-left:auto;opacity:.65}.kr-remark{display:block;margin-top:7px}.kr-review-modal{max-width:900px}.kr-review-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}.kr-review-panel{border:1px solid var(--line,#263044);border-radius:16px;padding:16px;background:rgba(255,255,255,.025)}.kr-review-description{white-space:pre-wrap;line-height:1.6}.eyebrow{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;opacity:.6;margin-bottom:8px}.kr-meta{display:flex;justify-content:space-between;gap:12px;padding-top:10px;margin-top:10px;border-top:1px solid var(--line,#263044);font-size:13px}.kr-attachment{display:flex;align-items:center;justify-content:space-between;gap:14px}.kr-attachment>div{display:flex;align-items:center;gap:12px;min-width:0}.kr-attachment b,.kr-attachment small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kr-attachment small{opacity:.65;margin-top:3px}.kr-existing-remark{border:1px solid var(--line,#263044);border-radius:14px;padding:13px 15px;margin-top:12px}.kr-existing-remark p{margin:7px 0 0;white-space:pre-wrap}.required{color:#ff6b7a}.btn-danger{border:1px solid rgba(255,92,112,.4);background:rgba(255,92,112,.1);color:#ff8290}.btn-danger:hover{background:rgba(255,92,112,.18)}
@media(max-width:760px){.kr-review-grid{grid-template-columns:1fr}.kr-attachment{align-items:flex-start;flex-direction:column}.kr-review-modal{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}.kr-row{padding:14px 12px}.kr-title{display:flex;flex-wrap:wrap;gap:7px}.kr-main p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}

/* Communication v11 polish */
.modal .field + .field{margin-top:18px}
.modal .field input + input,.modal .field textarea + input,.modal .field input + textarea,.surveyOpt + .surveyOpt{margin-top:10px}
.notification-filter-btn,.notification-readall-btn{min-width:112px;justify-content:center;text-align:center;background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 6px 16px rgba(76,92,255,.18)}
.notification-filter-btn:hover,.notification-readall-btn:hover{filter:brightness(1.06);background:var(--brand);color:#fff}
.mobile-bottom-nav{display:none}
@media(max-width:900px){
  .mobile-bottom-nav{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));height:64px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;gap:4px;padding:6px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);box-shadow:0 14px 35px rgba(0,0,0,.22);z-index:45}
  .mobile-bottom-nav button{position:relative;border:0;background:transparent;color:var(--muted);height:52px;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:700 9px/1 var(--font);cursor:pointer}
  .mobile-bottom-nav button:hover,.mobile-bottom-nav button:focus-visible{color:var(--brand-ink);background:var(--brand-soft)}
  .mobile-bottom-nav .ic{width:18px;height:18px}
  .mobile-bottom-nav b{position:absolute;top:2px;right:calc(50% - 19px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:8px;display:grid;place-items:center;border:2px solid var(--surface)}
  .main{padding-bottom:20px}
}
@media(max-width:430px){.mobile-bottom-nav{left:7px;right:7px;height:60px;border-radius:16px}.mobile-bottom-nav button{height:48px;font-size:8px}.main{padding-bottom:20px}}


/* Communication + auth final polish */
.notification-filter-btn,
.notification-readall-btn{
  min-width:132px !important;
  height:38px;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:7px;
  padding:0 14px !important;
  line-height:1 !important;
}
.notification-filter-btn .ic,
.notification-readall-btn .ic{flex:0 0 auto}

/* Light-mode login: prevent Chrome autofill/focus from painting the username black. */
html[data-theme="light"] .auth-reference .reference-field input,
html[data-theme="light"] .auth-reference .reference-field input:focus,
html[data-theme="light"] .auth-reference .reference-field input:hover{
  background:#f7fbff !important;
  color:#16385d !important;
  -webkit-text-fill-color:#16385d !important;
  caret-color:#16385d !important;
}
html[data-theme="light"] .auth-reference .reference-field input:-webkit-autofill,
html[data-theme="light"] .auth-reference .reference-field input:-webkit-autofill:hover,
html[data-theme="light"] .auth-reference .reference-field input:-webkit-autofill:focus,
html[data-theme="light"] .auth-reference .reference-field input:-webkit-autofill:active{
  -webkit-text-fill-color:#16385d !important;
  caret-color:#16385d !important;
  -webkit-box-shadow:0 0 0 1000px #f7fbff inset !important;
  box-shadow:0 0 0 1000px #f7fbff inset !important;
  background-color:#f7fbff !important;
  transition:background-color 9999s ease-out 0s !important;
}

/* Message composer */
.message-compose textarea#messageText{
  min-height:48px;
  max-height:120px;
  resize:vertical;
  box-sizing:border-box;
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-2);
  color:var(--ink);
  font:500 13px/1.45 var(--font);
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.message-compose textarea#messageText::placeholder{color:var(--muted);opacity:.85}
.message-compose textarea#messageText:hover{border-color:var(--brand-soft-2)}
.message-compose textarea#messageText:focus{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px var(--brand-soft);
}
.message-compose .btn{align-self:stretch;min-width:88px;justify-content:center}

/* Quick Survey modal: keep options separated and actions aligned consistently. */
.modal .surveyOpt{
  display:block;
  width:100%;
  box-sizing:border-box;
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface-2);
  color:var(--ink);
  outline:none;
}
.modal .surveyOpt:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);background:var(--surface)}
.modal .surveyOpt + .surveyOpt{margin-top:10px}
.modal .modal-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  margin-top:20px;
  flex-wrap:wrap;
}
.modal .modal-actions .btn{min-width:112px;justify-content:center}

/* Mobile/iPad login: center the complete card in the viewport instead of pinning it to the top. */
@media (max-width:900px){
  .auth.auth-reference{
    display:flex !important;
    flex-direction:column;
    min-height:100svh !important;
    height:auto !important;
    overflow:auto !important;
  }
  .auth-reference .auth-art{display:none !important}
  .auth-reference .auth-panel{
    width:100%;
    min-height:100svh !important;
    height:auto !important;
    box-sizing:border-box;
    padding:24px 18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
  }
  .auth-reference .login-card{
    width:min(610px,100%) !important;
    max-width:610px !important;
    margin:auto !important;
  }
}
@media (max-width:560px){
  .auth-reference .auth-panel{padding:18px 12px !important}
  .auth-reference .login-card{width:100% !important}
}

/* v13 responsive/admin polish */

/* iPad: remove the System Health KPI from the compact KPI row. */
@media (min-width:561px) and (max-width:1024px){
  .admin-dashboard .admin-kpis > .admin-kpi.kpi-cyan:first-child{display:none !important}
}

/* AI Quality Metrics: never allow metric content to force the panel wider. */
.admin-quality-grid{min-width:0;width:100%;box-sizing:border-box}
.admin-quality-item{min-width:0;overflow:hidden;box-sizing:border-box}
.admin-quality-item>div{min-width:0;overflow:hidden}
.admin-quality-item small,.admin-quality-item strong,.admin-quality-item em{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.admin-quality-item em{white-space:normal;line-height:1.25;overflow-wrap:anywhere}

/* Quick Survey response/result actions. */
.survey-status{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.survey-status>span{font-size:11px;color:var(--muted);font-weight:700}
.survey-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-left:auto}
.survey-actions .btn{min-width:132px;justify-content:center;white-space:nowrap}
.survey-card>.respondSurvey{display:block;margin:14px 0 0}
@media(max-width:700px){
  .survey-status{align-items:stretch}
  .survey-actions{width:100%;margin-left:0}
  .survey-actions .btn{flex:1 1 150px;min-width:0}
  .survey-card>.respondSurvey{width:100%}
}

/* Inbox and Email use visually distinct communication icons. */

/* Desktop login: make the reference card and its contents about two-thirds of the previous width. */
@media (min-width:1101px){
  .auth-reference .login-card{
    width:min(410px,calc(100% - 30px)) !important;
    max-width:410px !important;
    padding:24px 28px 18px !important;
    border-radius:22px;
  }
  .auth-reference .reference-logo{font-size:28px}
  .auth-reference .reference-logo-line{width:62px;height:4px;margin:8px auto 11px}
  .auth-reference .login-card h2{font-size:18px;margin:15px 0 5px}
  .auth-reference .login-card>p{font-size:12px;margin-bottom:15px}
  .auth-reference .reference-field{margin-bottom:9px}
  .auth-reference .reference-field label{font-size:11px;margin-bottom:4px}
  .auth-reference .reference-field input{height:45px;font-size:13px;padding-left:46px;padding-right:42px;border-radius:11px}
  .auth-reference .reference-field .input-icon>.ic{left:13px !important;width:19px !important;height:19px !important}
  .auth-reference .reference-options{margin:3px 0 10px}
  .auth-reference .remember-control,.auth-reference .reference-forgot{font-size:11px}
  .auth-reference .reference-signin,.auth-reference .reference-create{height:46px;font-size:13px;border-radius:11px}
  .auth-reference .reference-divider{margin:10px 0 8px;gap:10px;font-size:10px}
  .auth-reference .reference-create .ic{width:19px;height:19px}
  .auth-reference .reference-footer{font-size:8px;gap:7px;margin-top:8px}
}

/* Keep the distinct Inbox icon visually different from Email. */
.conversation-row .avatar{box-shadow:0 0 0 3px var(--brand-soft)}

/* V14 auth motion polish */
.auth-reference .auth-panel > *{position:relative;z-index:2}
.auth-reference .auth-panel .auth-reference-theme-wrap{z-index:3}
@media(prefers-reduced-motion:reduce){
  .auth-reference .auth-orbit-a,.auth-reference .auth-orbit-b,.auth-reference .auth-panel::after{animation:none!important}
}

/* V15 — Login theme control pinned to the top-right of the entire login screen. */
.auth-reference .auth-reference-theme-wrap{
  position:fixed !important;
  top:18px !important;
  right:20px !important;
  left:auto !important;
  bottom:auto !important;
  z-index:9999 !important;
}
@media (max-width:1100px){
  .auth-reference .auth-reference-theme-wrap{
    top:14px !important;
    right:16px !important;
  }
}
@media (max-width:560px){
  .auth-reference .auth-reference-theme-wrap{
    top:10px !important;
    right:12px !important;
  }
}
@media (max-width:380px){
  .auth-reference .auth-reference-theme-wrap{
    top:8px !important;
    right:9px !important;
  }
}

/* ---------- Login starlight: always visibly animated ---------- */
.auth-reference .auth-panel::after{
  z-index:1!important;
  inset:-32%!important;
  opacity:.95!important;
  will-change:transform,opacity,background-position!important;
  background:
    radial-gradient(circle 4px at 7% 17%,rgba(255,255,255,.98) 0 35%,transparent 65%),
    radial-gradient(circle 2.5px at 18% 73%,rgba(102,201,255,.95) 0 35%,transparent 68%),
    radial-gradient(circle 3.5px at 31% 31%,rgba(255,255,255,.9) 0 35%,transparent 68%),
    radial-gradient(circle 2px at 43% 82%,rgba(78,175,255,.95) 0 35%,transparent 68%),
    radial-gradient(circle 4px at 56% 18%,rgba(255,255,255,.95) 0 35%,transparent 68%),
    radial-gradient(circle 2.5px at 69% 62%,rgba(95,196,255,.95) 0 35%,transparent 68%),
    radial-gradient(circle 3px at 82% 27%,rgba(255,255,255,.92) 0 35%,transparent 68%),
    radial-gradient(circle 2px at 94% 79%,rgba(81,181,255,.92) 0 35%,transparent 68%),
    radial-gradient(420px 320px at 50% 48%,rgba(20,105,255,.13),transparent 70%)!important;
  background-size:100% 100%!important;
  animation:retailIqLoginStars 7s ease-in-out infinite alternate!important;
  animation-duration:7s!important;
  animation-iteration-count:infinite!important;
}
@keyframes retailIqLoginStars{
  0%{transform:translate3d(-110px,55px,0) scale(1.03);opacity:.58;background-position:0 0}
  20%{transform:translate3d(55px,-35px,0) scale(1.08);opacity:.95;background-position:70px -40px}
  40%{transform:translate3d(120px,28px,0) scale(1.12);opacity:.7;background-position:130px 35px}
  60%{transform:translate3d(-40px,-70px,0) scale(1.07);opacity:1;background-position:-65px -80px}
  80%{transform:translate3d(-135px,18px,0) scale(1.1);opacity:.72;background-position:-145px 25px}
  100%{transform:translate3d(35px,65px,0) scale(1.04);opacity:.96;background-position:45px 70px}
}


/* RetailIQ: compact Remember Me checkbox */
.remember-me input[type="checkbox"],
.remember input[type="checkbox"],
.remember-row input[type="checkbox"],
.login-remember input[type="checkbox"],
input[type="checkbox"][name="remember"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 16px !important;
  appearance: auto;
  accent-color: currentColor;
}

.remember-me,
.remember,
.remember-row,
.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* RetailIQ: mobile bottom navigation removed */
.mobile-bottom-nav { display: none !important; }


/* RetailIQ login: compact Remember Me control */
.auth-reference .remember-control {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.2 !important;
}

.auth-reference .remember-control input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

.auth-reference .remember-control span {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
  border-width: 1.5px !important;
  border-radius: 4px !important;
}

.auth-reference .remember-control input:checked + span::after {
  left: 4px !important;
  top: 1px !important;
  width: 5px !important;
  height: 9px !important;
  border-width: 0 2px 2px 0 !important;
}

/* The mobile bottom navigation has been intentionally removed. */
.mobile-bottom-nav {
  display: none !important;
}


/* Prevent the two bottom rows from being stretched apart. */
  .sidebar .sidebar-bottom,
  .sidebar .nav-bottom,
  .sidebar .sidebar-footer {
    align-content: start !important;
    justify-content: flex-end !important;
  }

/* iPad Mini landscape: preserve the compact footer without wasting height. */
@media (min-width: 700px) and (max-width: 1100px) and (orientation: landscape) {
  .sidebar .sidebar-bottom,
  .sidebar .nav-bottom,
  .sidebar .sidebar-footer {
    gap: 3px !important;
    padding-top: 4px !important;
    padding-bottom: 5px !important;
  }

  .sidebar .sidebar-bottom > *,
  .sidebar .nav-bottom > *,
  .sidebar .sidebar-footer > *,
  .sidebar .sidebar-bottom .nav-item,
  .sidebar .nav-bottom .nav-item,
  .sidebar .sidebar-footer .nav-item {
    min-height: 36px !important;
    height: 36px !important;
  }
}

/* iPad Mini: exactly two compact rows at the bottom of the sidebar.
   No full-screen overlay/layer is introduced. */
.side-account-row{
  display:flex;
  align-items:center;
  gap:4px;
}
.side-account-row .user-mini{flex:1;min-width:0}
.side-logout{
  width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;
  border:0;background:transparent;color:var(--muted);
  border-radius:10px;cursor:pointer;
}
.side-logout:hover{background:var(--surface-3);color:var(--ink)}
.side-bottom-item{margin-bottom:3px}




@media (min-width:700px) and (max-width:900px) and (orientation:portrait){
  .side-bottom{
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
    padding-top:4px!important;
    margin-top:4px!important;
  }

  /* Row 1 */
  .side-bottom-item{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    height:34px!important;
    min-height:34px!important;
    padding:6px 10px!important;
    margin:0!important;
    white-space:nowrap!important;
  }

  /* Row 2: My Account + logout on the same line */
  .side-account-row{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    height:34px!important;
    min-height:34px!important;
    gap:2px!important;
  }

  .side-account-row .user-mini{
    display:flex!important;
    align-items:center!important;
    flex:1 1 auto!important;
    width:auto!important;
    height:34px!important;
    min-height:34px!important;
    padding:6px 10px!important;
    margin:0!important;
    white-space:nowrap!important;
  }

  .side-account-row .account-avatar,
  .side-account-row .meta span{
    display:none!important;
  }

  .side-account-row .meta{
    display:block!important;
    min-width:0!important;
    flex:1!important;
  }

  .side-account-row .meta b{
    display:block!important;
    font-size:13px!important;
    line-height:1!important;
    font-weight:600!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .side-account-row .user-mini::before{
    content:"♙";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    min-width:18px;
    margin-right:7px;
    font-size:16px;
  }

  .side-logout{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    flex:0 0 32px!important;
  }
}


/* Daily Reading: full screen/content width */
section.admin-panel.daily-reading-card.admin-daily-reading-panel,
.admin-daily-reading-panel {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Do not let the inner reading preview constrain the panel width. */
.admin-daily-reading-panel #adminDailyReadingPreview,
.admin-daily-reading-panel .daily-reading-preview {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Pagination + answer feedback */
.pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0;color:var(--muted);font-size:13px}
.pagination .btn:disabled{opacity:.45;cursor:not-allowed}
.msg-actions .rate{min-width:34px;justify-content:center;padding-inline:8px}
.msg-actions .rate.on{background:var(--blue-soft);color:var(--blue);border-color:transparent}
.chat-head-actions{display:flex;align-items:center;gap:7px}
.streaming-bubble{white-space:pre-wrap;line-height:1.55}
.audit-json{margin:0;max-width:560px;max-height:180px;overflow:auto;white-space:pre-wrap;word-break:break-word;font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.audit-toolbar{align-items:center}
.audit-toolbar select{height:40px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:0 12px;min-width:190px}
@media(max-width:700px){.chat-head-actions .chatExport span{display:none}.chat-head-actions{gap:4px}.audit-toolbar{flex-direction:column;align-items:stretch}.audit-toolbar .cmd{max-width:none}}


/* =========================================================
   RetailIQ — REAL ANDROID MOBILE BOTTOM NAV FIX
   Keep the navigation attached to the viewport on Samsung
   Chrome as well as DevTools device emulation.
   ========================================================= */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1024px) {
  /* A transformed/animated ancestor can change the containing
     block of position:fixed. Mobile navigation must use viewport
     coordinates. */
  .portal {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    min-height: 100dvh;
  }

  .sidebar {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    z-index: 99999 !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    flex-direction: row !important;

    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;

    transform: none !important;
  }

  .main {
    min-height: 100dvh;
    padding-bottom: var(--bottom-nav-h) !important;
  }

  body {
    overflow-x: hidden;
  }
}

/* ---------- Profile photo + accent color picker (My Account page) ---------- */
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.accent-section{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.accent-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.accent-swatch{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);background:var(--sw,#4f6df5) !important;cursor:pointer;padding:0;position:relative;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
button.accent-swatch,label.accent-swatch{width:32px !important;height:32px !important;border-radius:50% !important;border:2px solid var(--line) !important;background:var(--sw,#4f6df5) !important;box-shadow:none !important;color:transparent !important}
[data-theme="dark"] button.accent-swatch,[data-theme="dark"] label.accent-swatch{background:var(--sw,#4f6df5) !important;border-color:var(--line) !important}
.accent-swatch:hover{transform:translateY(-1px)}
.accent-swatch.active{border-color:var(--ink);box-shadow:0 0 0 3px var(--brand-soft)}
.accent-custom{display:grid;place-items:center;overflow:hidden}
.accent-custom input[type="color"]{width:150%;height:150%;border:0;padding:0;cursor:pointer;background:transparent;appearance:none}
.accent-custom input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.accent-custom input[type="color"]::-webkit-color-swatch{border:0}

/* =========================================================
   RetailIQ — Gemini 3.8 Live Voice
   ========================================================= */
.voice-btn{
  width:40px;height:40px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);display:grid;place-items:center;
  flex:0 0 40px;cursor:pointer;transition:.18s ease;
}
.voice-btn:hover{background:var(--blue-soft);color:var(--blue);border-color:transparent;transform:translateY(-1px)}
.voice-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.live-overlay{
  position:fixed;inset:0;z-index:100000;display:grid;place-items:center;
  padding:20px;background:rgba(7,12,24,.48);backdrop-filter:blur(12px);
}
.live-panel{
  width:min(520px,calc(100vw - 28px));max-height:min(760px,calc(100dvh - 28px));
  overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);border-radius:24px;box-shadow:0 28px 90px rgba(0,0,0,.25);
}
.live-panel-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 10px;border-bottom:1px solid var(--line)}
.live-panel-head h3{margin:3px 0 0;font-size:21px}
.live-panel-head .eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--blue)}
.live-orb-wrap{display:grid;place-items:center;padding:26px 20px 14px}
.live-orb{width:124px;height:124px;border-radius:50%;position:relative;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,var(--blue-soft),transparent 62%),var(--surface-2);
  border:1px solid var(--line);box-shadow:0 0 0 10px color-mix(in srgb,var(--blue) 7%,transparent),0 0 45px color-mix(in srgb,var(--blue) 18%,transparent);
}
.live-mascot{width:82px;height:96px;object-fit:contain;object-position:center bottom;display:block;position:relative;z-index:2;filter:drop-shadow(0 8px 16px rgba(79,109,245,.28));transition:transform .25s ease,filter .25s ease}
.live-orb span{display:none}
.live-overlay[data-status="speaking"] .live-orb{box-shadow:0 0 0 14px color-mix(in srgb,var(--blue) 8%,transparent),0 0 60px color-mix(in srgb,var(--blue) 25%,transparent)}
.live-overlay[data-status="speaking"] .live-mascot{transform:translateY(-1px) scale(1.035);filter:drop-shadow(0 10px 22px rgba(79,109,245,.42))}
@keyframes livePulse{0%,100%{transform:scaleY(.55);opacity:.35}50%{transform:scaleY(1);opacity:1}}
.live-status{text-align:center;font-size:13px;font-weight:700;color:var(--muted);padding:0 20px 14px}
.live-transcript{margin:0 18px 16px;padding:12px;min-height:130px;max-height:270px;overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.live-line{display:flex;gap:9px;padding:8px 7px;font-size:13px;line-height:1.5}.live-line-label{font-weight:800;min-width:62px;color:var(--muted)}.live-line.user .live-line-label{color:var(--blue)}.live-line.assistant .live-line-label{color:var(--green)}
.live-empty{color:var(--muted);font-size:12px;line-height:1.55;padding:8px}
.live-actions{display:flex;justify-content:center;padding:0 20px 14px}.live-end{min-width:170px;justify-content:center}
.live-note{text-align:center;padding:0 22px 18px;color:var(--muted);font-size:10px;line-height:1.45}
@media(max-width:700px){
  .voice-btn{width:38px;height:38px;flex-basis:38px;border-radius:11px}
  .live-overlay{padding:10px;align-items:end}
  .live-panel{width:100%;max-height:calc(100dvh - 20px);border-radius:22px}
  .live-transcript{max-height:32dvh}
  .live-orb{width:116px;height:116px}.live-mascot{width:76px;height:89px}
}

/* Live voice transcript: render RetailIQ answers as formatted Markdown/HTML
   instead of exposing literal tags such as <b>...</b>. */
.live-line-content { min-width: 0; }
.live-line-content p { margin: 0 0 8px; }
.live-line-content p:last-child { margin-bottom: 0; }
.live-line-content ul, .live-line-content ol { margin: 6px 0 8px 20px; padding: 0; }
.live-line-content li { margin: 3px 0; }
.live-line-content strong, .live-line-content b { font-weight: 700; }
.live-line-content br { line-height: 1.4; }


/* Global premium mouse-light effect — intentionally subtle and non-interactive. */
.global-mouse-light{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.72;background:radial-gradient(240px circle at var(--mouse-x,50vw) var(--mouse-y,35vh),color-mix(in srgb, var(--mouse-glow,var(--brand)) 16%, transparent),color-mix(in srgb, var(--mouse-glow,var(--brand)) 5%, transparent) 34%,transparent 68%);transition:opacity .25s ease;mix-blend-mode:screen}
.global-mouse-light.hidden{opacity:0}
@media (max-width:700px){.global-mouse-light{opacity:.48;background:radial-gradient(180px circle at var(--mouse-x,50vw) var(--mouse-y,35vh),color-mix(in srgb, var(--mouse-glow,var(--brand)) 10%, transparent),transparent 68%)}}
@media (prefers-reduced-motion:reduce){.global-mouse-light{display:none}}

/* Gemini voice orb: reactive edge energy for both listening and speaking. */
.live-orb:before{content:"";position:absolute;inset:-2px;border-radius:50%;padding:2px;background:conic-gradient(from 0deg,transparent 0 18%,rgba(91,108,246,.95) 27%,rgba(56,189,248,.75) 36%,transparent 47% 66%,rgba(99,102,241,.9) 76%,transparent 86% 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.28;animation:liveEdgeRotate 5s linear infinite;z-index:1}
.live-orb:after{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(91,108,246,.12);box-shadow:inset 0 0 22px rgba(91,108,246,.08);opacity:.7;animation:liveEdgeBreath 2.8s ease-in-out infinite}
.live-overlay[data-status="listening"] .live-orb:before{opacity:.72;animation-duration:2.2s;filter:drop-shadow(0 0 7px rgba(56,189,248,.65))}
.live-overlay[data-status="speaking"] .live-orb:before{opacity:1;animation-duration:1.15s;filter:drop-shadow(0 0 10px rgba(91,108,246,.8))}
.live-overlay[data-status="thinking"] .live-orb:before{opacity:.4;animation-duration:4s}
@keyframes liveEdgeRotate{to{transform:rotate(360deg)}}
@keyframes liveEdgeBreath{0%,100%{opacity:.4;transform:scale(.985)}50%{opacity:.95;transform:scale(1.015)}}

/* Response-time trend line */
.admin-line-chart{height:205px;padding:10px 4px 0;display:flex;flex-direction:column;justify-content:flex-end}
.admin-line-chart svg{width:100%;height:175px;overflow:visible}
.admin-line-chart .latency-area{fill:url(#latencyArea);opacity:.55}
.admin-line-chart .latency-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5;fill:none;opacity:.65}
.admin-line-chart .latency-line{fill:none;stroke:#5b6cf6;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 7px rgba(91,108,246,.25))}
.admin-line-chart circle{fill:var(--surface);stroke:#5b6cf6;stroke-width:2;transition:r .15s ease}
.admin-line-chart circle:hover{r:5}
.admin-line-chart .admin-latency-axis{padding-top:6px}
@media(prefers-reduced-motion:reduce){.live-orb:before,.live-orb:after{animation:none}.admin-line-chart circle{transition:none}}
\n/* RetailIQ communication + iPad fixes */\n.dm-person-row{width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) auto 24px;align-items:center;gap:14px;padding:18px 20px;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;text-align:left;cursor:pointer}.dm-person-row:hover{background:var(--surface-2)}.dm-person-copy{min-width:0;display:grid;gap:5px}.dm-person-copy b{font-size:15px}.dm-person-copy small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dm-person-row em{font-style:normal;color:var(--faint);font-size:11px}.dm-arrow{opacity:.55}.dm-fullscreen-backdrop{padding:0;background:rgba(4,8,20,.72);backdrop-filter:blur(12px)}.dm-fullscreen{width:min(980px,100vw);height:100dvh;background:var(--surface);display:grid;grid-template-rows:72px minmax(0,1fr) 76px;box-shadow:0 25px 70px rgba(0,0,0,.3)}.dm-full-head{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}.dm-full-head .dm-back{margin-right:2px}.dm-head-copy{flex:1;min-width:0}.dm-head-copy b,.dm-head-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dm-head-copy small{color:var(--muted);font-size:11px;margin-top:2px}.dm-delete{color:var(--red)}.dm-full-stream{padding:22px;overflow:auto;background:linear-gradient(180deg,var(--surface-2),var(--surface))}.dm-full-compose{margin:0;border-top:1px solid var(--line);padding:12px 16px;background:var(--surface)}.dm-full-compose textarea{min-height:44px;max-height:120px}.dm-empty{display:grid;place-items:center;height:100%;color:var(--muted)}.approval-list{display:grid}.approval-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}.approval-row b,.approval-row small{display:block}.approval-row small{margin-top:4px;color:var(--muted)}.approval-row>div:last-child{display:flex;gap:8px;flex:0 0 auto}.instagram-inbox{overflow:hidden}.broadcast-list-card{padding:0}.broadcast-card{padding:18px 20px;border-bottom:1px solid var(--line)}.broadcast-card footer{display:flex;align-items:center;gap:12px}.broadcast-card footer .deleteBroadcast{margin-left:auto}.check-row{display:flex;align-items:center;gap:8px;margin-top:15px;color:var(--muted)}\n@media (min-width:700px) and (max-width:1100px){\n  .portal{min-height:100dvh}\n  .sidebar{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100%!important;height:auto!important;min-height:64px!important;z-index:1000!important;display:flex!important;flex-direction:row!important;align-items:center!important;padding:6px 10px calc(6px + env(safe-area-inset-bottom))!important;border-top:1px solid var(--line)!important;background:color-mix(in srgb,var(--surface) 94%,transparent)!important;backdrop-filter:blur(18px)!important}\n  .side-brand,.side-bottom{display:none!important}\n  .sidebar .nav{display:flex!important;flex:1!important;align-items:center!important;justify-content:space-around!important;gap:4px!important;overflow-x:auto!important;scrollbar-width:none!important}\n  .sidebar .nav::-webkit-scrollbar{display:none}\n  .sidebar .nav-label{display:none!important}\n  .sidebar .nav-item{flex:0 0 auto!important;min-width:74px!important;height:52px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:4px!important;padding:5px 7px!important;border-radius:12px!important;font-size:10px!important}\n  .sidebar .nav-item .ic{width:18px!important;height:18px!important}\n  .main{padding-bottom:80px!important}\n}\n@media (max-width:699px){.dm-fullscreen{width:100vw}.dm-person-row{grid-template-columns:48px minmax(0,1fr) auto 18px;padding:15px}.dm-full-stream{padding:15px}.approval-row{align-items:flex-start;flex-direction:column}.approval-row>div:last-child{width:100%}.approval-row .btn{flex:1}}\n
/* Response Time Trend summary: keep Avg/P50/P95 visible in seconds. */
.admin-latency-summary{display:flex;gap:14px;align-items:center;margin-top:7px;flex-wrap:wrap;font-size:11px;color:var(--muted,#8d96aa)}
.admin-latency-summary span{display:inline-flex;gap:4px;align-items:center}
.admin-latency-summary b{font-size:12px;color:var(--text,#f4f6fb);font-weight:700}

/* Final DM experience: one full-width conversation row, theme-aware surfaces,
   last-online metadata, attachments and WhatsApp-style double read ticks. */
.dm-list-full{width:100%;display:block;background:var(--surface)}
.dm-person-row{width:100%!important;min-height:82px;display:grid;grid-template-columns:52px minmax(0,1fr) auto 24px!important;box-sizing:border-box;border-bottom:1px solid var(--line)!important;background:linear-gradient(90deg,var(--surface),color-mix(in srgb,var(--brand-soft) 20%,var(--surface)))!important;color:var(--ink)!important}
.dm-person-row:hover{background:var(--brand-soft)!important}
.dm-person-copy{min-width:0!important;text-align:left!important}
.dm-person-copy small{display:block!important}
.dm-online{display:block!important;color:var(--brand-ink)!important;font-size:10px!important;margin-top:2px}
.dm-fullscreen{border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:0 25px 90px color-mix(in srgb,var(--brand) 18%,transparent)}
.dm-full-head{background:linear-gradient(90deg,var(--surface),var(--brand-soft))!important;border-bottom-color:color-mix(in srgb,var(--brand) 22%,var(--line))!important}
.dm-full-stream{background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--brand-soft) 50%,transparent),transparent 45%),var(--surface-2)!important}
.dm-full-compose{background:var(--surface)!important;border-top-color:color-mix(in srgb,var(--brand) 20%,var(--line))!important;display:flex;align-items:flex-end;gap:7px}
.dm-full-compose textarea{flex:1;min-width:0;border-color:color-mix(in srgb,var(--brand) 30%,var(--line));background:var(--surface-2)}
.dm-full-compose .icon-btn{flex:0 0 auto}
.dm-emoji{font-size:19px}
.dm-attachment{display:flex;align-items:center;gap:9px;margin-top:7px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--brand) 25%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--brand-soft) 35%,var(--surface));color:inherit;text-decoration:none;max-width:min(360px,80vw)}
.dm-attachment b,.dm-attachment small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dm-attachment small{font-size:10px;color:var(--muted);margin-top:2px}
.dm-message-meta{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dm-read-receipt{font-weight:900;letter-spacing:-3px;font-size:12px;line-height:1}.dm-read-receipt.sent{color:var(--muted)}.dm-read-receipt.seen{color:#ffd21c}
.message-bubble.mine{border-color:color-mix(in srgb,var(--brand) 35%,var(--line));background:linear-gradient(135deg,var(--brand-soft),var(--surface))}

/* Final inbox polish */
.instagram-inbox{border:1px solid var(--line)!important;border-radius:18px!important;overflow:hidden;background:var(--surface)!important;box-shadow:0 12px 32px rgba(0,0,0,.08)}
.dm-list-full{width:100%;display:flex;flex-direction:column}
.dm-person-row{width:100%!important;display:grid!important;grid-template-columns:52px minmax(0,1fr) auto!important;align-items:center!important;gap:14px!important;padding:17px 20px!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:var(--surface)!important;color:var(--text)!important;text-align:left!important;cursor:pointer!important;transition:background .16s ease,transform .12s ease!important;box-shadow:none!important}
.dm-person-row:last-child{border-bottom:0!important}
.dm-person-row:hover{background:var(--surface-2)!important}
.dm-person-row:active{transform:scale(.998)}
.dm-person-row .dm-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;border:0!important;box-shadow:none!important;background:var(--surface-2)!important}
.dm-person-copy{min-width:0;display:grid;gap:4px}
.dm-person-copy b{font-size:15px;font-weight:700;color:var(--text)}
.dm-person-copy small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.dm-person-copy .dm-online{font-style:normal;color:var(--muted);font-size:11px}
.dm-time{font-style:normal;color:var(--faint);font-size:11px;white-space:nowrap;align-self:start;margin-top:4px}
.dm-arrow{display:none!important}
.dm-fullscreen-backdrop{padding:0!important;align-items:stretch!important;justify-content:center!important}
.dm-fullscreen{width:min(1040px,100vw)!important;border-radius:0!important}
.dm-full-head{min-height:72px;position:relative;z-index:2}
.dm-full-head .dm-back{width:42px!important;height:42px!important;min-width:42px!important;display:grid!important;place-items:center!important;border:1px solid var(--line)!important;border-radius:12px!important;background:var(--surface-2)!important;color:var(--text)!important;opacity:1!important;visibility:visible!important}
.dm-full-head .dm-back svg{width:19px;height:19px;stroke:currentColor;display:block}
.dm-full-head .dm-back:hover{background:var(--surface-3,var(--surface-2))!important}
.dm-back-label{display:grid;place-items:center}
.dm-head-copy b{font-size:15px}
.dm-full-stream{background:var(--surface-2)!important}
.dm-message-meta{opacity:.82}
@media(max-width:720px){
  .dm-person-row{grid-template-columns:48px minmax(0,1fr) auto!important;padding:15px 14px!important}
  .dm-person-row .dm-avatar{width:44px;height:44px}
  .dm-time{font-size:10px}
  .dm-full-head{padding:10px 12px!important}
}

/* Final DM back-button visibility fix */
.dm-full-head .dm-back{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;width:auto!important;min-width:74px!important;height:42px!important;padding:0 12px!important;color:var(--ink)!important;background:var(--surface-2)!important;border:1px solid var(--line)!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:20!important;}
.dm-full-head .dm-back-label,.dm-full-head .dm-back-text{display:inline-flex!important;align-items:center!important;visibility:visible!important;opacity:1!important;}
.dm-full-head .dm-back-text{font-size:13px!important;font-weight:600!important;line-height:1!important;}
.dm-full-head .dm-back svg{display:block!important;visibility:visible!important;opacity:1!important;width:18px!important;height:18px!important;stroke:currentColor!important;stroke-width:2!important;}
@media(max-width:520px){.dm-full-head .dm-back{min-width:44px!important;width:44px!important;padding:0!important}.dm-full-head .dm-back-text{display:none!important;}}

/* Verified DM floating glass window — overrides the earlier edge-to-edge rules. */
.dm-fullscreen-backdrop{
  padding:24px!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  background:rgba(5,10,24,.62)!important;
  backdrop-filter:blur(18px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(125%)!important;
}
.dm-fullscreen-backdrop .dm-fullscreen{
  width:min(1040px,calc(100vw - 48px))!important;
  height:min(820px,calc(100dvh - 48px))!important;
  max-height:calc(100dvh - 48px)!important;
  border:1px solid color-mix(in srgb,var(--brand) 30%,rgba(255,255,255,.18))!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:color-mix(in srgb,var(--surface) 82%,transparent)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.035) inset!important;
  backdrop-filter:blur(24px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(135%)!important;
}
.dm-fullscreen .dm-full-head{
  background:color-mix(in srgb,var(--surface) 72%,transparent)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.dm-fullscreen .dm-full-stream{
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand-soft) 16%,transparent),transparent 38%),color-mix(in srgb,var(--surface-2) 72%,transparent)!important;
}
.dm-fullscreen .dm-full-compose{
  background:color-mix(in srgb,var(--surface) 76%,transparent)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
@media(max-width:699px){
  .dm-fullscreen-backdrop{padding:12px!important}
  .dm-fullscreen-backdrop .dm-fullscreen{
    width:calc(100vw - 24px)!important;
    height:calc(100dvh - 24px)!important;
    max-height:calc(100dvh - 24px)!important;
    border-radius:20px!important;
  }
}

/* Inbox attachment picker: visible selection state before sending. */
.dm-attachment-preview{display:flex;align-items:center;gap:9px;flex:0 1 300px;min-width:0;padding:8px 10px;border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--brand-soft) 45%,var(--surface));color:var(--text);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.dm-attachment-preview[hidden]{display:none!important}
.dm-attachment-preview-icon{display:grid;place-items:center;flex:0 0 auto}.dm-attachment-preview>span:nth-child(2){min-width:0;display:grid;gap:2px}.dm-attachment-preview b,.dm-attachment-preview small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dm-attachment-preview small{font-size:10px;color:var(--muted)}.dm-attachment-clear{margin-left:auto;flex:0 0 auto}
@media(max-width:720px){.dm-attachment-preview{position:absolute;left:12px;right:12px;bottom:72px;z-index:4}.dm-full-compose{position:relative}}

/* FINAL iPad Mini portrait navigation override
   768x1024 Chrome/iPad Mini portrait: one horizontally scrollable row. */
@media (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    padding: 6px 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    z-index: 100000 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-top: 1px solid var(--line) !important;
    background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
    backdrop-filter: blur(18px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
  }

  .sidebar .side-brand,
  .sidebar .side-bottom,
  .sidebar .nav-label {
    display: none !important;
  }

  .sidebar .nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    height: 60px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
  }

  .sidebar .nav::-webkit-scrollbar { display: none !important; }

  .sidebar .nav-item {
    flex: 0 0 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 6px 4px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .sidebar .nav-item .ic {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px !important;
  }

  .sidebar .nav-item > span {
    display: block !important;
    max-width: 72px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  .sidebar .nav-item.active::before {
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 0 !important;
    width: auto !important;
    height: 3px !important;
  }

  .main {
    padding-bottom: 84px !important;
  }
}

/* =========================================================
   Role + Knowledge Access Control
   ========================================================= */
.access-modal{max-width:1120px;width:min(1120px,calc(100vw - 32px));max-height:min(88vh,900px);overflow:auto}
.access-modal .modal-head{align-items:flex-start}
.access-modal .modal-head h2{margin-bottom:4px}
.access-modal .modal-head .sub{margin:0;max-width:720px}
.access-inline-note{margin:2px 0 14px;padding:0 2px;color:var(--muted);font-size:11px;line-height:1.5}.access-inline-note b{color:var(--ink-2)}
.access-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.access-role-card{border:1px solid var(--border);border-radius:16px;background:var(--card);box-shadow:var(--shadow-sm);padding:16px;min-width:0}
.access-role-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.access-role-head>div:first-child{display:flex;align-items:center;gap:11px;min-width:0}
.access-role-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);flex:0 0 auto}
.access-role-head b{display:block;font-size:14px}
.access-role-head small{display:block;margin-top:3px;color:var(--muted);font-size:11px}
.access-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.access-check{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer;min-width:0;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.access-check:hover{border-color:color-mix(in srgb,var(--accent) 48%,var(--border));transform:translateY(-1px)}
.access-check:has(input:checked){border-color:color-mix(in srgb,var(--accent) 55%,var(--border));background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.access-check input{accent-color:var(--accent);width:16px;height:16px;flex:0 0 auto}
.access-check span{display:block;min-width:0;overflow:hidden}
.access-check b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.access-check small{display:block;color:var(--muted);font-size:10px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.access-role-foot{display:flex;justify-content:flex-end;margin-top:14px;padding-top:13px;border-top:1px solid var(--border)}
.access-user-summary{display:flex;align-items:center;gap:11px;padding:13px 14px;border:1px solid var(--border);border-radius:13px;background:var(--surface);margin-bottom:12px}
.access-user-summary .avatar{width:38px;height:38px;flex:0 0 auto}
.access-user-summary>div:nth-child(2){min-width:0;flex:1}
.access-user-summary b,.access-user-summary span{display:block}
.access-user-summary>div:nth-child(2) span{font-size:11px;color:var(--muted);margin-top:2px}
.access-note{display:flex;gap:9px;padding:11px 13px;margin-bottom:15px;border-radius:11px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border));font-size:12px;color:var(--muted)}
.access-note b{color:var(--text);white-space:nowrap}
.access-user-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:48vh;overflow:auto;padding-right:2px}

@media (max-width:900px){
  .access-role-grid{grid-template-columns:1fr}
  .access-user-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .access-modal{width:calc(100vw - 18px);max-height:92vh;border-radius:16px}
  .access-check-grid,.access-user-grid{grid-template-columns:1fr}
  .access-role-head{align-items:flex-start}
}

/* FINAL MOBILE NAV: dedicated vertical space for icon + label.
   The label must never occupy the icon's line. */
@media (max-width: 640px) {
  .sidebar {
    align-items: stretch !important;
    min-height: 70px !important;
    height: 70px !important;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  .sidebar .nav {
    align-items: stretch !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 6px !important;
    gap: 3px !important;
  }

  .sidebar .nav-item {
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 4px 3px !important;
    margin: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  .sidebar .nav-item .ic {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    flex: 0 0 20px !important;
  }

  .sidebar .nav-item > span {
    display: block !important;
    width: 100% !important;
    max-width: 62px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    margin: 0 !important;
    font-size: 8.5px !important;
    font-weight: 600 !important;
    line-height: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
  }

  .sidebar .side-bottom {
    display: flex !important;
    align-self: stretch !important;
    align-items: center !important;
    justify-content: center !important;
    height: 62px !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  .sidebar .side-bottom #logout,
  .sidebar .side-logout {
    display: grid !important;
    place-items: center !important;
    align-self: center !important;
    justify-self: center !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 62px !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  .sidebar .side-bottom #logout .ic,
  .sidebar .side-logout .ic {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    display: block !important;
  }

  .main {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
}

/* =========================================================
   PHONE LANDSCAPE CHAT HEADER / COMPOSER FIX
   Keep export actions inside the header row and remove the
   desktop keyboard shortcut hint on short phone screens.
   ========================================================= */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
  body.chat-screen .chat-top {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    min-height: 58px !important;
    height: 58px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.chat-screen .chat-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.chat-screen .chat-title > div:last-child {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.chat-screen .chat-title h2,
  body.chat-screen .chat-title p {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.chat-screen .chat-head-actions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    position: static !important;
    width: auto !important;
    min-width: max-content !important;
  }

  body.chat-screen .chat-head-actions .btn {
    flex: 0 0 auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  body.chat-screen .chat-head-actions .chatExport {
    width: 38px !important;
    min-width: 38px !important;
    height: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  body.chat-screen .chat-head-actions .chatExport span {
    display: none !important;
  }

  body.chat-screen .chat-head-actions #newChat {
    width: 38px !important;
    min-width: 38px !important;
    height: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  body.chat-screen .chat-head-actions #newChat span {
    display: none !important;
  }

  body.chat-screen .modes {
    min-height: 50px !important;
    height: 50px !important;
    flex-basis: 50px !important;
    padding: 7px 10px !important;
    overflow: visible !important;
  }

  body.chat-screen .composer-hint {
    display: none !important;
  }

  body.chat-screen .composer {
    padding: 6px 10px 8px !important;
  }
}

/* =========================================================
   iPad Mini portrait — balanced navigation + right actions
   Keep the main menu horizontally scrollable while reserving
   a fixed right-side action rail for Improve + Logout.
   ========================================================= */
@media (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {
  .sidebar {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    padding: 5px 8px !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  .sidebar .nav {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 0 2px !important;
    scroll-padding-inline: 2px !important;
  }

  .sidebar .nav-item {
    flex: 0 0 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 5px 3px !important;
  }

  /* Dedicated right-side action rail. */
  .sidebar .side-bottom {
    display: flex !important;
    flex: 0 0 136px !important;
    width: 136px !important;
    min-width: 136px !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 0 0 6px !important;
    border-left: 1px solid var(--line) !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    box-sizing: border-box !important;
  }

  /* The account button is not needed in this compact action rail. */
  .sidebar .side-account-row {
    display: contents !important;
  }

  .sidebar #sidebarAccount {
    display: none !important;
  }

  .sidebar #sidebarFeedback {
    display: flex !important;
    flex: 0 0 92px !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 5px 4px !important;
    margin: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 11px !important;
    box-sizing: border-box !important;
  }

  .sidebar #sidebarFeedback .ic {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px !important;
  }

  .sidebar #sidebarFeedback > span {
    display: block !important;
    width: 100% !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    margin: 0 !important;
    font-size: 8.5px !important;
    line-height: 11px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .sidebar .side-logout,
  .sidebar .side-bottom #logout {
    display: grid !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border-radius: 11px !important;
    box-sizing: border-box !important;
  }

  .sidebar .side-logout .ic,
  .sidebar .side-bottom #logout .ic {
    width: 19px !important;
    height: 19px !important;
  }

  .main {
    padding-bottom: 88px !important;
  }
}

/* Dealer Operations */
.dealer-tabs{display:flex;gap:6px;padding:7px;margin-bottom:16px;overflow:auto;position:sticky;top:10px;z-index:3;backdrop-filter:blur(16px)}
.dealer-tab{border:0;background:transparent;border-radius:10px;padding:10px 13px;display:flex;align-items:center;gap:7px;font-weight:700;color:var(--muted,#64748b);cursor:pointer;white-space:nowrap}
.dealer-tab.active{background:rgba(80,110,255,.12);color:var(--text,#18233a)}
.dealer-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}
.dealer-metric{padding:16px;display:flex;flex-direction:column;gap:4px}.dealer-metric span{font-size:12px;color:var(--muted,#64748b)}.dealer-metric strong{font-size:25px}.dealer-metric small{font-size:11px;color:var(--muted,#64748b)}
.dealer-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}.dealer-card-head h2{margin:0 0 4px}.dealer-card-head p{margin:0;color:var(--muted,#64748b);font-size:13px}.dealer-actions{display:flex;gap:8px;flex-wrap:wrap}
.dealer-order-builder,.dealer-table-card,.dealer-admin-card{padding:20px}.dealer-product-search{position:relative;max-width:760px;margin-bottom:18px}.dealer-product-suggestions{position:absolute;top:52px;left:0;right:0;background:var(--surface,#fff);border:1px solid var(--border,#dfe5ee);border-radius:12px;box-shadow:0 18px 45px rgba(20,35,60,.15);overflow:hidden;z-index:20}.dealer-product-option{display:block;width:100%;text-align:left;border:0;background:transparent;padding:13px 15px;cursor:pointer;font-size:14px}.dealer-product-option:hover{background:rgba(80,110,255,.08)}.dealer-cart{margin:12px 0 18px}.dealer-sale-box{margin-top:14px}.dealer-selected-product{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px;border:1px solid var(--border,#dfe5ee);border-radius:12px}.dealer-selected-product b{flex:1 1 100%;font-size:16px}.dealer-selected-product span{color:var(--muted,#64748b);font-size:12px}.dealer-selected-product input{width:130px}.dealer-admin-card{margin-bottom:18px}
@media(max-width:1100px){.dealer-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.dealer-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.dealer-card-head{flex-direction:column}.dealer-tabs{top:0}.dealer-order-builder,.dealer-table-card,.dealer-admin-card{padding:14px}}


/* Dealer Operations / Reports — compact, theme-aligned controls */
.dealer-tabs{background:var(--surface,#fff);border:1px solid var(--border,#dfe5ee);box-shadow:0 8px 24px rgba(20,35,60,.05);scrollbar-width:none}.dealer-tabs::-webkit-scrollbar{display:none}.dealer-tab{font-size:13px;min-height:38px}.dealer-tab.active{box-shadow:inset 0 0 0 1px rgba(80,110,255,.08)}
.dealer-admin-card,.dealer-order-builder,.dealer-table-card{border:1px solid var(--border,#dfe5ee);box-shadow:0 10px 28px rgba(20,35,60,.05);border-radius:16px}.dealer-metric{border:1px solid var(--border,#dfe5ee);box-shadow:none;border-radius:14px;min-width:0}.dealer-metric strong{font-size:22px;line-height:1.1}.dealer-actions{justify-content:flex-end;align-items:center}.dealer-actions .btn{white-space:nowrap}.dealer-card-head{align-items:center}.dealer-card-head h2{font-size:18px}.dealer-soft-note,.dealer-optional{font-size:12px;color:var(--muted,#64748b)}.dealer-submit-row{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:14px}.dealer-submit-row .btn{min-height:40px}.dealer-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dealer-row-actions .btn{min-width:34px}.dealer-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.dealer-form-grid .field{margin:0}.dealer-product-search.compact{max-width:none;margin:0}.dealer-divider{border:0;border-top:1px solid var(--border,#dfe5ee);margin:20px 0}.dealer-import-box{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:13px 15px;border:1px dashed var(--border,#dfe5ee);border-radius:12px;background:rgba(80,110,255,.025)}.dealer-import-box span{font-size:12px;color:var(--muted,#64748b)}.dealer-import-box input[type=file]{min-width:0;font-size:12px}.dealer-table-card .table-wrap{max-height:62vh;overflow:auto}.dealer-table-card table th{position:sticky;top:0;z-index:1;background:var(--surface,#fff)}
@media(max-width:900px){.dealer-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.dealer-form-grid{grid-template-columns:1fr}.dealer-import-box{grid-template-columns:1fr 1fr}.dealer-import-box input[type=file]{grid-column:1/-1}.dealer-actions{justify-content:flex-start}}
@media(max-width:700px){.dealer-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dealer-metric{padding:12px}.dealer-metric strong{font-size:19px}.dealer-card-head{align-items:flex-start}.dealer-actions{width:100%;gap:6px}.dealer-actions .btn{flex:0 0 auto}.dealer-form-grid{gap:10px}.dealer-import-box{grid-template-columns:1fr}.dealer-import-box input[type=file]{grid-column:auto}.dealer-submit-row{justify-content:stretch}.dealer-submit-row .btn{width:100%}.dealer-tabs{padding:5px;gap:4px}.dealer-tab{padding:9px 10px;font-size:12px}.dealer-table-card,.dealer-order-builder,.dealer-admin-card{padding:14px}.dealer-row-actions{justify-content:flex-start}}

/* ---------- Dealer Operations v5 refinements ---------- */
.dealer-tab.active{background:var(--brand-soft-2,#eaf0ff);color:var(--brand-ink,#3158d8)!important;font-weight:750;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand,#4f6df5) 22%,transparent)}
.dealer-tabs{gap:8px;padding:8px;align-items:center}
.dealer-tabs .dealer-tab{flex:0 0 auto;min-height:40px}
#dealerPanel .btn-outline,#dealerPanel .btn-ghost{border-color:color-mix(in srgb,var(--brand,#4f6df5) 28%,var(--line-2));color:var(--brand-ink,#3158d8);background:var(--surface,#fff)}
#dealerPanel .btn-outline:hover,#dealerPanel .btn-ghost:hover{background:var(--brand-soft,#eef3ff);border-color:var(--brand,#4f6df5);color:var(--brand-ink,#3158d8)}
#dealerPanel .btn-danger{background:var(--brand,#4f6df5);color:#fff;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px -8px rgba(79,109,245,.65)}
.dealer-entry-table th,.dealer-entry-table td,.dealer-report-table th,.dealer-report-table td{vertical-align:middle}
.dealer-entry-table th:first-child,.dealer-entry-table td:first-child{width:46px;text-align:center;color:var(--muted)}
.dealer-entry-table th:last-child,.dealer-entry-table td:last-child{width:48px;text-align:center}
.dealer-int-input{width:110px!important;text-align:center}
.dealer-report-table .qty-col{text-align:center!important}
.dealer-report-table th.qty-col{text-align:center!important}
.dealer-report-table td.qty-col b{display:inline-flex;min-width:54px;justify-content:center}
.dealer-table-card .table-wrap{border:1px solid var(--line);border-radius:12px;overflow:auto}
.dealer-table-card table{width:100%;border-collapse:separate;border-spacing:0;min-width:680px}
.dealer-table-card table th{font-weight:700;letter-spacing:.01em}
.dealer-inline-filter{min-width:190px;max-width:230px}
.dealer-inline-filter input{min-width:0}
.dealer-date-input,.dealer-select{height:40px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink);padding:0 11px;outline:none}
.dealer-date-input:focus,.dealer-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.dealer-report-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dealer-report-filters label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.dealer-report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dealer-report-section{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--surface)}
.dealer-report-section .dealer-card-head{margin-bottom:12px}
.dealer-report-section h3{margin:0 0 3px;font-size:15px}
.dealer-report-section p{margin:0;color:var(--muted);font-size:12px}
.dealer-report-section .table-wrap{max-height:390px}
.dealer-lock-note{padding:14px;border:1px solid var(--line);background:var(--brand-soft);border-radius:12px;color:var(--ink-2);font-size:13px;line-height:1.55}
.dealer-request-card{gap:14px}
.dealer-actions{align-items:center}
.dealer-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1;min-height:38px}
.dealer-actions .btn svg,.dealer-submit-row .btn svg{flex:none}
@media(max-width:1000px){.dealer-report-grid{grid-template-columns:1fr}.dealer-card-head{gap:12px}.dealer-actions{width:auto}}
@media(max-width:700px){.dealer-tabs{gap:4px}.dealer-tab{padding:9px 10px}.dealer-report-filters{width:100%}.dealer-report-filters label{flex:1 1 145px}.dealer-report-filters .dealer-date-input{width:100%}.dealer-inline-filter{width:100%;max-width:none}.dealer-actions{width:100%}.dealer-actions .btn{flex:0 0 auto}.dealer-report-section{padding:11px}.dealer-table-card table{min-width:620px}}

/* Order history: distribute columns across the available row width. */
#dealerHistoryBody .table-wrap{width:100%;overflow-x:auto}
#dealerHistoryBody table{width:100%;min-width:760px;table-layout:auto}
#dealerHistoryBody th,#dealerHistoryBody td{padding:12px 16px;white-space:nowrap}
#dealerHistoryBody th:nth-child(1){min-width:120px}#dealerHistoryBody th:nth-child(2){min-width:125px}#dealerHistoryBody th:nth-child(3){min-width:105px}#dealerHistoryBody th:nth-child(4),#dealerHistoryBody th:nth-child(5),#dealerHistoryBody th:nth-child(6){min-width:90px;text-align:center}
#dealerHistoryBody th:last-child,#dealerHistoryBody td:last-child{text-align:right;min-width:120px}

/* Keep the main selected RetailIQ menu readable in the same blue theme. */
.nav-item.active{color:var(--brand-ink,#3158d8)!important;background:var(--brand-soft,#eef3ff)!important}

/* Dealer Operations final UI refinements */
.dealer-tab.active,.dealer-tab.active span,.dealer-tab.active svg,.dealer-tab.active *{color:var(--brand-ink,#3158d8)!important}
.dealer-tab{color:var(--muted,#64748b)!important}
.dealer-entry-table{border:1px solid var(--line);border-collapse:separate!important;border-spacing:0!important;border-radius:12px;overflow:hidden;background:var(--surface)}
.dealer-entry-table th,.dealer-entry-table td{border-bottom:1px solid var(--line);padding:13px 15px!important}
.dealer-entry-table tr:last-child td{border-bottom:0}
.dealer-entry-table th{background:var(--surface-2);font-weight:750}
.dealer-entry-table th:first-child,.dealer-entry-table td:first-child{width:54px;text-align:center}
.dealer-entry-table th:nth-child(2),.dealer-entry-table td:nth-child(2){min-width:260px}
.dealer-int-input{height:40px!important;min-width:96px;width:110px!important;text-align:center!important;font-variant-numeric:tabular-nums}
.openingQty,.dealer-cart-qty,.dealer-sale-qty,.grQty,.billQty,#correctionQty{font-variant-numeric:tabular-nums;text-align:center!important}
.dealer-opening-requests{margin-top:24px}
.dealer-opening-locked{margin-bottom:0}
.dealer-whole-field input{text-align:center!important}
.dealer-selected-product{border:1px solid var(--line);box-shadow:0 6px 18px rgba(20,35,60,.04);gap:14px}
.dealer-selected-product .field{margin:0}
.dealer-report-section .dealer-actions .btn,.dealer-card-head .dealer-actions .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:7px}
#dealerStockBody .dealer-report-table th.qty-col,#dealerStockBody .dealer-report-table td.qty-col{text-align:center!important}
@media(max-width:700px){.dealer-entry-table{min-width:620px}.dealer-opening-requests{margin-top:18px}.dealer-int-input{width:92px!important}.dealer-report-section .dealer-card-head{align-items:flex-start}}

/* RetailIQ Dealer Operations v7: hard visual overrides. */
.dealer-tabs .dealer-tab,.dealer-tabs .dealer-tab span,.dealer-tabs .dealer-tab svg{color:#64748b!important;}
.dealer-tabs .dealer-tab.active,.dealer-tabs .dealer-tab.active span,.dealer-tabs .dealer-tab.active svg,.dealer-tabs .dealer-tab.active *{color:#3158d8!important;-webkit-text-fill-color:#3158d8!important;}
.dealer-tabs .dealer-tab.active{background:#eaf0ff!important;border:1px solid #c9d7ff!important;}
.dealer-admin-card .dealer-actions .btn-outline,.dealer-table-card .dealer-actions .btn-outline{background:#3158d8!important;border-color:#3158d8!important;color:#fff!important;-webkit-text-fill-color:#fff!important;}
.dealer-admin-card .dealer-actions .btn-outline svg,.dealer-table-card .dealer-actions .btn-outline svg{color:#fff!important;stroke:currentColor!important;}
.dealer-int-input{height:40px!important;min-width:96px!important;width:120px!important;text-align:center!important;font-variant-numeric:tabular-nums;} .dealer-cart-qty,.dealer-sale-qty{height:40px!important;min-width:96px!important;width:120px!important;padding:0 14px!important;border-radius:12px!important;border:1px solid var(--line)!important;background:var(--surface)!important;outline:none!important;font-size:13.5px!important;box-shadow:var(--shadow-sm)!important;transition:.2s!important;color:var(--ink)!important;text-align:center!important;font-variant-numeric:tabular-nums;} .dealer-cart-qty:focus,.dealer-sale-qty:focus{border-color:var(--brand)!important;box-shadow:var(--ring)!important;} .dealer-cart-qty::placeholder,.dealer-sale-qty::placeholder{color:var(--faint)!important;}
.dealer-entry-table{border:1px solid var(--line)!important;border-collapse:separate!important;border-spacing:0!important;border-radius:12px;overflow:hidden;background:var(--surface);}
.dealer-entry-table th,.dealer-entry-table td{padding:14px 16px!important;border-bottom:1px solid var(--line)!important;vertical-align:middle;}
.dealer-entry-table tbody tr:last-child td{border-bottom:0!important;}
.dealer-entry-table th:nth-child(2),.dealer-entry-table td:nth-child(2){padding-right:28px!important;}
.dealer-entry-table th:nth-child(3),.dealer-entry-table td:nth-child(3){text-align:center!important;width:150px;}
.dealer-opening-requests{margin-top:32px!important;}
.dealer-request-card{border:1px solid var(--line)!important;border-radius:12px!important;padding:14px 16px!important;margin-bottom:10px!important;background:var(--surface)!important;}
.dealer-report-section .dealer-actions .btn,.dealer-card-head .dealer-actions .btn,.dealer-submit-row .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:7px!important;line-height:1!important;}
.dealer-report-table th,.dealer-report-table td{padding:12px 14px!important;}
.dealer-report-table .qty-col{text-align:center!important;vertical-align:middle!important;}


/* RetailIQ Dealer Operations v8 — unified table/button treatment */
.dealer-ops-shell .dealer-tab,
.dealer-ops-shell .dealer-tab span,
.dealer-ops-shell .dealer-tab svg,
.dealer-ops-shell .dealer-tab i,
.dealer-ops-shell .dealer-tab.active,
.dealer-ops-shell .dealer-tab.active span,
.dealer-ops-shell .dealer-tab.active svg,
.dealer-ops-shell .dealer-tab.active i { color:#2f80ed !important; }
.dealer-ops-shell .dealer-tab.active { background:rgba(47,128,237,.10) !important; border-color:rgba(47,128,237,.35) !important; }
.dealer-ops-shell .dealer-table,
.dealer-ops-shell .dealer-report-table,
.dealer-ops-shell table { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid rgba(148,163,184,.24); border-radius:12px; }
.dealer-ops-shell th { text-align:center !important; vertical-align:middle !important; padding:11px 12px !important; font-weight:700; white-space:nowrap; border-bottom:1px solid rgba(148,163,184,.25); }
.dealer-ops-shell td { text-align:center !important; vertical-align:middle !important; padding:11px 12px !important; border-bottom:1px solid rgba(148,163,184,.16); }
.dealer-ops-shell tr:last-child td { border-bottom:0; }
.dealer-ops-shell .qty-col { text-align:center !important; }
.dealer-ops-shell .dealer-actions .btn,
.dealer-ops-shell button.btn-primary { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; min-height:36px; }
.dealer-ops-shell .dealer-actions .btn svg,
.dealer-ops-shell button.btn-primary svg { display:block !important; flex:0 0 auto; width:16px; height:16px; color:currentColor !important; stroke:currentColor !important; fill:none !important; visibility:visible !important; opacity:1 !important; }
.dealer-ops-shell .dealer-actions .btn span { display:inline-flex !important; align-items:center; justify-content:center; line-height:1 !important; }
.dealer-ops-shell .dealer-actions .btn-primary { color:#fff !important; background:#2f80ed !important; border-color:#2f80ed !important; }
.dealer-ops-shell .dealer-actions .btn-primary svg { color:#fff !important; stroke:#fff !important; }
.dealer-ops-shell .table-wrap { border-radius:12px; overflow:auto; }

/* RetailIQ Dealer Operations v9 — strict layout refinements */
#dealerPanel .dealer-metric { text-align:center !important; align-items:center !important; justify-content:center !important; min-height:104px; }
#dealerPanel .dealer-metric span,
#dealerPanel .dealer-metric strong,
#dealerPanel .dealer-metric small { width:100%; text-align:center !important; }

#dealerPanel .dealer-request-card { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:24px !important; min-height:78px; }
#dealerPanel .dealer-request-card > div:first-child { flex:1 1 auto; min-width:0; }
#dealerPanel .dealer-request-card .dealer-request-view { margin-left:auto !important; flex:0 0 auto !important; }
#dealerPanel .dealer-request-card .dealer-request-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
#dealerPanel .dealer-request-card small,
#dealerPanel .dealer-request-card p { line-height:1.5; }

#dealerPanel #dealerHistoryBody table { table-layout:fixed !important; min-width:980px !important; }
#dealerPanel #dealerHistoryBody th,
#dealerPanel #dealerHistoryBody td { padding:14px 20px !important; text-align:center !important; }
#dealerPanel #dealerHistoryBody th:first-child,
#dealerPanel #dealerHistoryBody td:first-child { width:17%; }
#dealerPanel #dealerHistoryBody th:nth-child(2),
#dealerPanel #dealerHistoryBody td:nth-child(2) { width:16%; }
#dealerPanel #dealerHistoryBody th:nth-child(3),
#dealerPanel #dealerHistoryBody td:nth-child(3) { width:19%; }
#dealerPanel #dealerHistoryBody th:nth-child(4),
#dealerPanel #dealerHistoryBody td:nth-child(4),
#dealerPanel #dealerHistoryBody th:nth-child(5),
#dealerPanel #dealerHistoryBody td:nth-child(5),
#dealerPanel #dealerHistoryBody th:nth-child(6),
#dealerPanel #dealerHistoryBody td:nth-child(6) { width:9%; }
#dealerPanel #dealerHistoryBody th:nth-child(7),
#dealerPanel #dealerHistoryBody td:nth-child(7) { width:14%; }
#dealerPanel #dealerHistoryBody th:last-child,
#dealerPanel #dealerHistoryBody td:last-child { width:16%; text-align:right !important; }
#dealerPanel #dealerHistoryBody .dealer-row-actions { justify-content:flex-end !important; gap:10px !important; }

#dealerPanel .dealer-reports-head { align-items:flex-end !important; }
#dealerPanel .dealer-reports-head .dealer-report-filters { flex-wrap:nowrap !important; white-space:nowrap; }
#dealerPanel .dealer-report-stack { display:flex !important; flex-direction:column !important; gap:20px !important; width:100%; }
#dealerPanel .dealer-report-section { width:100% !important; box-sizing:border-box; }
#dealerPanel .dealer-report-row-head { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:20px !important; margin-bottom:14px !important; }
#dealerPanel .dealer-report-row-head > div:first-child { min-width:0; }
#dealerPanel .dealer-report-row-head h3,
#dealerPanel .dealer-report-row-head p { text-align:left !important; }
#dealerPanel .dealer-report-row-head .dealer-actions { margin-left:auto !important; flex:0 0 auto !important; justify-content:flex-end !important; }
#dealerPanel .dealer-report-section .dealer-report-table th,
#dealerPanel .dealer-report-section .dealer-report-table td { text-align:center !important; vertical-align:middle !important; }
#dealerPanel .dealer-report-section .dealer-report-table td:first-child,
#dealerPanel .dealer-report-section .dealer-report-table th:first-child { text-align:center !important; }

#dealerPanel .dealer-order-builder + .dealer-table-card { margin-top:28px !important; }
#dealerPanel .dealer-order-builder + .dealer-table-card .dealer-card-head { margin-bottom:18px !important; }
#dealerPanel .dealer-order-builder .dealer-product-search { margin-bottom:22px !important; }

#dealerPanel .dealer-report-filters label { align-items:center !important; }
#dealerPanel .dealer-report-filters .dealer-date-input { text-align:center !important; }

/* Make every report export control visibly blue with a guaranteed icon. */
#dealerPanel .dealer-actions .btn.btn-primary,
#dealerPanel .dealer-report-row-head .btn.btn-primary,
#dealerPanel .dealer-report-filters .btn.btn-primary { color:#fff !important; background:#2f80ed !important; border-color:#2f80ed !important; -webkit-text-fill-color:#fff !important; }
#dealerPanel .dealer-actions .btn svg,
#dealerPanel .dealer-actions .btn svg.ic,
#dealerPanel .dealer-report-row-head .btn svg,
#dealerPanel .dealer-report-filters .btn svg { width:16px !important; height:16px !important; display:block !important; visibility:visible !important; opacity:1 !important; color:#fff !important; stroke:#fff !important; fill:none !important; flex:0 0 auto !important; }

@media(max-width:800px){
  #dealerPanel .dealer-reports-head { align-items:flex-start !important; }
  #dealerPanel .dealer-reports-head .dealer-report-filters { width:100%; flex-wrap:wrap !important; white-space:normal; }
  #dealerPanel .dealer-report-row-head { align-items:flex-start !important; }
  #dealerPanel .dealer-report-row-head .dealer-actions { flex-wrap:wrap; }
}
@media(max-width:600px){
  #dealerPanel .dealer-request-card { align-items:flex-start !important; }
  #dealerPanel .dealer-request-card .dealer-request-view { align-self:center; }
  #dealerPanel .dealer-report-row-head { flex-direction:column; }
  #dealerPanel .dealer-report-row-head .dealer-actions { width:100%; justify-content:flex-end !important; }
}

/* RetailIQ Dealer Operations v10 — order table and action spacing */
#dealerPanel .dealer-ops-shell table,
#dealerPanel .dealer-admin-card table {
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  table-layout:fixed !important;
  border:1px solid rgba(148,163,184,.24) !important;
  border-radius:14px !important;
  overflow:hidden !important;
}
#dealerPanel .dealer-ops-shell th,
#dealerPanel .dealer-ops-shell td,
#dealerPanel .dealer-admin-card th,
#dealerPanel .dealer-admin-card td {
  text-align:center !important;
  vertical-align:middle !important;
  padding:14px 18px !important;
  border-bottom:1px solid rgba(148,163,184,.16) !important;
}
#dealerPanel .dealer-admin-card th { font-weight:700 !important; }
#dealerPanel .dealer-admin-card #dealerAdminOrders table th:first-child,
#dealerPanel .dealer-admin-card #dealerAdminOrders table td:first-child { width:16%; }
#dealerPanel .dealer-admin-card #dealerAdminOrders table th:nth-child(2),
#dealerPanel .dealer-admin-card #dealerAdminOrders table td:nth-child(2) { width:15%; }
#dealerPanel .dealer-admin-card #dealerAdminOrders table th:nth-child(3),
#dealerPanel .dealer-admin-card #dealerAdminOrders table td:nth-child(3) { width:19%; }
#dealerPanel .dealer-admin-card #dealerAdminOrders table th:nth-child(4),
#dealerPanel .dealer-admin-card #dealerAdminOrders table td:nth-child(4),
#dealerPanel .dealer-admin-card #dealerAdminOrders table th:nth-child(5),
#dealerPanel .dealer-admin-card #dealerAdminOrders table td:nth-child(5),
#dealerPanel .dealer-admin-card #dealerAdminOrders table th:nth-child(6),
#dealerPanel .dealer-admin-card #dealerAdminOrders table td:nth-child(6) { width:9%; }
#dealerPanel .dealer-admin-card #dealerAdminOrders table th:nth-child(7),
#dealerPanel .dealer-admin-card #dealerAdminOrders table td:nth-child(7) { width:14%; }
#dealerPanel .dealer-admin-card #dealerAdminOrders table th:last-child,
#dealerPanel .dealer-admin-card #dealerAdminOrders table td:last-child { width:18%; }
#dealerPanel .dealer-admin-card #dealerAdminOrders .dealer-row-actions {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  min-width:140px;
}
#dealerPanel .dealer-admin-card #dealerAdminOrders .dealer-row-actions .btn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-height:34px !important;
  white-space:nowrap !important;
}
#dealerPanel #dealerHistoryBody .dealer-row-actions {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  min-width:135px;
}
#dealerPanel #dealerHistoryBody .dealer-row-actions .btn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-height:34px !important;
  white-space:nowrap !important;
}
#dealerPanel #dealerHistoryBody table th:last-child,
#dealerPanel #dealerHistoryBody table td:last-child { text-align:center !important; }
#dealerPanel .dealer-admin-card .dealer-actions { gap:10px !important; }
#dealerPanel .dealer-admin-card .dealer-actions .btn { min-height:36px !important; }

@media(max-width:900px){
  #dealerPanel .dealer-admin-card #dealerAdminOrders table,
  #dealerPanel #dealerHistoryBody table { min-width:980px !important; }
}

/* RetailIQ Dealer Operations v11 — reliable horizontal scrolling for wide order tables. */
#dealerPanel #dealerAdminOrders .table-wrap,
#dealerPanel #dealerHistoryBody .table-wrap {
  width:100%;
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:auto;
  scrollbar-gutter:stable both-edges;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
  box-sizing:border-box;
}
#dealerPanel #dealerAdminOrders table,
#dealerPanel #dealerHistoryBody table {
  width:max-content !important;
  min-width:1120px !important;
  table-layout:auto !important;
}
#dealerPanel #dealerAdminOrders th:last-child,
#dealerPanel #dealerAdminOrders td:last-child,
#dealerPanel #dealerHistoryBody th:last-child,
#dealerPanel #dealerHistoryBody td:last-child {
  min-width:170px !important;
  white-space:nowrap !important;
}
#dealerPanel #dealerAdminOrders .dealer-row-actions,
#dealerPanel #dealerHistoryBody .dealer-row-actions {
  min-width:160px !important;
  width:max-content !important;
}
#dealerPanel .dealer-inline-report-input {
  width:220px;
  min-width:190px;
  height:40px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface);
  outline:none;
  font-size:13.5px;
  box-shadow:var(--shadow-sm);
  transition:.2s;
  color:var(--ink);
}
.dealer-inline-report-input::placeholder{color:var(--faint)}
.dealer-inline-report-input:focus{border-color:var(--brand);box-shadow:var(--ring)}
@media(max-width:800px){
  #dealerPanel .dealer-inline-report-input { width:100%; min-width:0; }
}

/* Random Question panel: span the full available admin learning-tools width on every screen. */
.admin-learning-tools-grid > .admin-random-question-panel{
  grid-column:1 / -1;
  width:100%;
  box-sizing:border-box;
}

/* FINAL IPAD PORTRAIT ACTION-ROW FIX
   Single authoritative iPad portrait layout. This intentionally comes last
   so the older tablet 34vh/wrapped-navigation rules cannot affect iPad. */
@media (min-width: 700px) and (max-width: 1100px) and (orientation: portrait) {
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    padding: 5px 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 100000 !important;
  }

  .sidebar .side-brand,
  .sidebar .nav-label {
    display: none !important;
  }

  .sidebar .nav {
    order: 1 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 0 2px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .sidebar .nav::-webkit-scrollbar {
    display: none !important;
  }

  .sidebar .nav-item {
    flex: 0 0 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    padding: 5px 3px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .sidebar .nav-item > span {
    display: block !important;
    width: 100% !important;
    max-width: 70px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    margin: 0 !important;
    font-size: 8.5px !important;
    line-height: 11px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .sidebar .nav-item .ic {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
    flex: 0 0 19px !important;
  }

  .sidebar .side-bottom {
    order: 2 !important;
    display: flex !important;
    flex: 0 0 136px !important;
    width: 136px !important;
    min-width: 136px !important;
    max-width: 136px !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 0 0 6px !important;
    border: 0 !important;
    border-left: 1px solid var(--line) !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    box-sizing: border-box !important;
  }

  .sidebar .side-account-row {
    display: contents !important;
  }

  .sidebar #sidebarAccount {
    display: none !important;
  }

  .sidebar #sidebarFeedback {
    display: flex !important;
    flex: 0 0 92px !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 5px 4px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    border-radius: 11px !important;
    white-space: nowrap !important;
  }

  .sidebar #sidebarFeedback .ic {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
    flex: 0 0 19px !important;
  }

  .sidebar #sidebarFeedback > span {
    display: block !important;
    width: 100% !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    margin: 0 !important;
    font-size: 8.5px !important;
    line-height: 11px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .sidebar .side-logout,
  .sidebar .side-bottom #logout {
    display: grid !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 11px !important;
    box-sizing: border-box !important;
  }

  .sidebar .side-logout .ic,
  .sidebar .side-bottom #logout .ic {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
  }

  .main {
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }
}


/* iPad portrait: final authoritative bottom navigation geometry.
   Do not use the older 34vh tablet menu height here; it consumes a large
   portion of the viewport and causes the apparent 1/3-screen blank area. */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait) {
  :root {
    --bottom-nav-h:calc(76px + env(safe-area-inset-bottom)) !important;
  }
  .portal {
    grid-template-columns:1fr !important;
    width:100% !important;
    min-width:0 !important;
  }
  .main {
    width:100% !important;
    min-width:0 !important;
    padding-bottom:calc(88px + env(safe-area-inset-bottom)) !important;
  }
  .sidebar {
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
    width:100% !important;
    height:76px !important;
    min-height:76px !important;
    max-height:76px !important;
    padding:5px 8px !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    z-index:100000 !important;
  }
  .sidebar .side-brand,
  .sidebar .nav-label { display:none !important; }
  .sidebar .nav {
    order:1 !important;
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    height:66px !important;
    min-height:66px !important;
    max-height:66px !important;
    margin:0 !important;
    padding:0 2px !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:5px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;
    scrollbar-width:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
  .sidebar .nav::-webkit-scrollbar { display:none !important; }
  .sidebar .nav-item {
    flex:0 0 72px !important;
    width:72px !important;
    min-width:72px !important;
    max-width:72px !important;
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
    margin:0 !important;
    padding:5px 3px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    box-sizing:border-box !important;
  }
  .sidebar .nav-item > span {
    display:block !important;
    width:100% !important;
    max-width:70px !important;
    height:11px !important;
    flex:0 0 11px !important;
    margin:0 !important;
    font-size:8.5px !important;
    line-height:11px !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .sidebar .nav-item .ic {
    width:19px !important;
    height:19px !important;
    min-width:19px !important;
    min-height:19px !important;
    flex:0 0 19px !important;
  }
  .sidebar .side-bottom {
    order:2 !important;
    display:flex !important;
    flex:0 0 142px !important;
    width:142px !important;
    min-width:142px !important;
    max-width:142px !important;
    height:66px !important;
    min-height:66px !important;
    margin:0 !important;
    padding:0 0 0 6px !important;
    border:0 !important;
    border-left:1px solid var(--line) !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    box-sizing:border-box !important;
  }
  .sidebar .side-account-row { display:contents !important; }
  .sidebar #sidebarAccount { display:none !important; }
  .sidebar #sidebarFeedback {
    display:flex !important;
    flex:0 0 94px !important;
    width:94px !important;
    min-width:94px !important;
    max-width:94px !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    margin:0 !important;
    padding:5px 3px !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    box-sizing:border-box !important;
    border-radius:11px !important;
  }
  .sidebar #sidebarFeedback .ic { width:19px !important; height:19px !important; flex:0 0 19px !important; }
  .sidebar #sidebarFeedback > span {
    display:block !important;
    width:100% !important;
    height:11px !important;
    flex:0 0 11px !important;
    margin:0 !important;
    font-size:8.5px !important;
    line-height:11px !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .sidebar .side-logout,
  .sidebar .side-bottom #logout {
    display:grid !important;
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    margin:0 !important;
    padding:0 !important;
    place-items:center !important;
    border:0 !important;
    border-radius:11px !important;
    box-sizing:border-box !important;
  }
  .sidebar .side-logout .ic,
  .sidebar .side-bottom #logout .ic { width:20px !important; height:20px !important; min-width:20px !important; min-height:20px !important; }
}


/* iPad portrait v4.1 — lock the shell to the viewport and let only the main content scroll. */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait) {
  html, body {
    height:100% !important;
    min-height:100% !important;
    overflow:hidden !important;
  }
  .portal {
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
  }
  .main {
    height:100dvh !important;
    min-height:0 !important;
    max-height:100dvh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:contain !important;
    box-sizing:border-box !important;
    padding-bottom:calc(88px + env(safe-area-inset-bottom)) !important;
  }
}

/* iPad portrait v4 — bottom actions + System Health relationship.
   Keep the action controls physically inside the bottom navigation row and
   place the floating health control above that row, as on phone layout. */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait) {
  :root { --bottom-nav-h:calc(76px + env(safe-area-inset-bottom)) !important; }

  .sidebar {
    z-index:100000 !important;
    isolation:isolate !important;
  }

  .sidebar .nav {
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }

  /* Reserve a guaranteed right-side action zone. */
  .sidebar .side-bottom {
    position:relative !important;
    z-index:100002 !important;
    flex:0 0 150px !important;
    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    align-items:center !important;
    justify-content:flex-end !important;
    overflow:visible !important;
  }

  .sidebar .side-account-row {
    display:contents !important;
  }

  .sidebar #sidebarFeedback {
    position:relative !important;
    z-index:100003 !important;
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 96px !important;
    width:96px !important;
    min-width:96px !important;
    max-width:96px !important;
  }

  .sidebar .side-bottom #logout,
  .sidebar .side-logout {
    position:relative !important;
    z-index:100003 !important;
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
  }

  /* Health pill belongs above the bottom navigation, never on top of it. */
  .global-health-wrap {
    right:12px !important;
    bottom:calc(76px + env(safe-area-inset-bottom) + 10px) !important;
    z-index:99990 !important;
  }

  .global-health-panel {
    bottom:46px !important;
    max-height:calc(100dvh - 150px) !important;
  }
}

/* iPad Mini portrait ONLY — lock Improve + Logout to the right edge.
   This intentionally does not apply to iPad Pro or any other viewport. */
@media (min-width:700px) and (max-width:900px) and (orientation:portrait) {
  .sidebar {
    position:fixed !important;
    overflow:hidden !important;
  }

  .sidebar .nav {
    width:100% !important;
    max-width:none !important;
    padding-right:154px !important;
    box-sizing:border-box !important;
  }

  .sidebar .side-bottom {
    position:absolute !important;
    right:8px !important;
    top:5px !important;
    bottom:5px !important;
    width:146px !important;
    min-width:146px !important;
    max-width:146px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 0 0 5px !important;
    display:flex !important;
    flex:0 0 146px !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    z-index:100002 !important;
    background:color-mix(in srgb,var(--surface) 96%,transparent) !important;
    border-left:1px solid var(--line) !important;
    box-sizing:border-box !important;
  }

  .sidebar #sidebarFeedback {
    display:flex !important;
    position:relative !important;
    flex:0 0 94px !important;
    width:94px !important;
    min-width:94px !important;
    max-width:94px !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:100003 !important;
  }

  .sidebar .side-bottom #logout,
  .sidebar .side-logout {
    display:grid !important;
    position:relative !important;
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:100003 !important;
  }
}

/* iPad Mini portrait ONLY — unified bottom navigation.
   Keep Improve RetailIQ + Logout as part of the same sidebar flex row;
   do not create a separate floating action panel. */
@media (min-width:700px) and (max-width:900px) and (orientation:portrait) {
  .sidebar {
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:76px !important;
    min-height:76px !important;
    max-height:76px !important;
    padding:6px 10px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    background:color-mix(in srgb,var(--surface) 94%,transparent) !important;
    border-top:1px solid var(--line) !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    z-index:100000 !important;
  }

  .sidebar .nav {
    position:relative !important;
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:64px !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:5px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    box-sizing:border-box !important;
  }

  /* The action area is a normal child of the same bar — never absolute/floating. */
  .sidebar .side-bottom {
    position:relative !important;
    inset:auto !important;
    order:2 !important;
    flex:0 0 146px !important;
    width:146px !important;
    min-width:146px !important;
    max-width:146px !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    background:transparent !important;
    border:0 !important;
    border-left:0 !important;
    z-index:100002 !important;
  }

  .sidebar #sidebarFeedback {
    position:relative !important;
    flex:0 0 94px !important;
    width:94px !important;
    min-width:94px !important;
    max-width:94px !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    margin:0 !important;
    padding:5px 3px !important;
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:4px !important;
    box-sizing:border-box !important;
    border-radius:11px !important;
    z-index:100003 !important;
  }

  .sidebar .side-bottom #logout,
  .sidebar .side-logout {
    position:relative !important;
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    place-items:center !important;
    box-sizing:border-box !important;
    border:0 !important;
    border-radius:11px !important;
    z-index:100003 !important;
  }
}

/* ---------- Dealer RO / Trading Area performance ---------- */
.dealer-perf-period{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);font-size:12px;font-weight:800;color:var(--muted)}
.dealer-perf-shell{display:flex;flex-direction:column;gap:22px}
.dealer-perf-search{padding:20px}
.dealer-perf-search-main{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.dealer-perf-search-main h2,.dealer-perf-section-head h2{margin:0;font-size:21px}
.dealer-perf-search-main p,.dealer-perf-section-head p{margin:5px 0 0;color:var(--muted);font-size:13px}
.dealer-ro-search{position:relative;width:min(470px,100%);background:var(--surface,#fff)}
.dealer-ro-search input{width:100%}
.dealer-ro-suggestions{position:absolute;z-index:50;left:0;right:0;top:calc(100% + 7px);padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 18px 40px rgba(15,23,42,.16);max-height:300px;overflow:auto}
.dealer-ro-option{display:flex;width:100%;flex-direction:column;gap:3px;text-align:left;padding:11px 12px;border:0;border-radius:9px;background:transparent;color:var(--text);cursor:pointer}
.dealer-ro-option:hover{background:var(--surface-2,#f5f8fa)}
.dealer-ro-option small{color:var(--muted);font-size:11px}
.dealer-ro-noresult{padding:14px;color:var(--muted);font-size:12px}
.dealer-selected-ro{display:grid;grid-template-columns:1.5fr .8fr .9fr 1.4fr .6fr;gap:1px;margin-top:18px;border:1px solid var(--border);border-radius:13px;overflow:hidden;background:var(--border)}
.dealer-selected-ro>div{padding:12px 14px;background:var(--card)}
.dealer-selected-ro span{display:block;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.dealer-selected-ro b{display:block;font-size:13px;line-height:1.3}
.dealer-perf-section{padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--card);box-shadow:0 8px 24px rgba(15,23,42,.05)}
.dealer-perf-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:17px}
.dealer-perf-scope{padding:7px 10px;border-radius:999px;background:var(--surface-2,#f3f7f6);color:var(--muted);font-size:11px;font-weight:800;white-space:nowrap}
.dealer-perf-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dealer-perf-kpi{min-height:122px;padding:16px;border:1px solid var(--border);border-radius:13px;background:linear-gradient(145deg,var(--card),var(--surface-2,#f7faf9));display:flex;flex-direction:column;justify-content:center}
.dealer-perf-kpi>span{font-size:11px;font-weight:800;color:var(--muted)}
.dealer-perf-kpi strong{font-size:27px;line-height:1.15;margin-top:8px;letter-spacing:-.03em}
.dealer-perf-kpi strong em{font-size:12px;font-style:normal;font-weight:800;margin-left:4px;color:var(--muted)}
.dealer-perf-kpi small{margin-top:8px;font-size:11px;font-weight:800}
.dealer-perf-subgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.dealer-perf-subcard{border:1px solid var(--border);border-radius:13px;padding:16px;background:var(--surface-2,#f8faf9)}
.dealer-perf-subhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.dealer-perf-subhead h3{margin:0;font-size:14px}.dealer-perf-subhead span{font-size:11px;color:var(--muted);font-weight:700}
.dealer-perf-growth-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.dealer-perf-growth-grid>div{padding:11px;border-radius:10px;background:var(--card);border:1px solid var(--border)}.dealer-perf-growth-grid span{display:block;font-size:10px;color:var(--muted);font-weight:800;line-height:1.3}.dealer-perf-growth-grid b{display:block;margin-top:6px;font-size:17px}
.dealer-perf-ytd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.dealer-perf-ytd-grid .dealer-perf-kpi{min-height:100px;padding:12px}.dealer-perf-ytd-grid .dealer-perf-kpi strong{font-size:20px}
.dealer-perf-ro-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:11px;background:var(--blue-soft,#eef6ff);color:var(--text)}.dealer-perf-ro-note>span{margin-top:2px}.dealer-perf-ro-note b{font-size:12px}.dealer-perf-ro-note p{margin:3px 0 0;font-size:11px;color:var(--muted)}
.dealer-perf-district-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:14px}.dealer-perf-growth{padding:15px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2,#f8faf9)}.dealer-perf-growth span{display:block;font-size:11px;color:var(--muted);font-weight:800;line-height:1.35}.dealer-perf-growth strong{display:block;margin-top:7px;font-size:23px}.positive{color:var(--green,#16835b)!important}.negative{color:var(--red,#d64b4b)!important}
.dealer-perf-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px}.dealer-perf-table{width:100%;border-collapse:collapse;min-width:760px}.dealer-perf-table th,.dealer-perf-table td{padding:11px 12px;border-bottom:1px solid var(--border);font-size:11px;text-align:right;white-space:nowrap}.dealer-perf-table th:first-child,.dealer-perf-table td:first-child{text-align:left}.dealer-perf-table th{background:var(--surface-2,#f5f8f7);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.dealer-perf-table tr:last-child td{border-bottom:0}
.dealer-perf-ytd-note{margin-top:12px;padding:11px 13px;border-radius:10px;background:var(--surface-2,#f7faf9);font-size:11px;color:var(--muted)}
.dealer-perf-unassigned{padding:40px;text-align:center}.dealer-perf-unassigned .metric-ic{margin:0 auto 12px}.dealer-perf-unassigned h2{margin:0}.dealer-perf-unassigned p{max-width:620px;margin:8px auto;color:var(--muted)}
@media(max-width:1100px){.dealer-selected-ro{grid-template-columns:repeat(3,1fr)}.dealer-perf-kpi-grid,.dealer-perf-district-kpis{grid-template-columns:repeat(2,1fr)}.dealer-perf-subgrid{grid-template-columns:1fr}.dealer-perf-growth-grid,.dealer-perf-ytd-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.dealer-perf-section,.dealer-perf-search{padding:14px}.dealer-selected-ro{grid-template-columns:repeat(2,1fr)}.dealer-perf-kpi-grid,.dealer-perf-district-kpis{grid-template-columns:1fr}.dealer-perf-search-main{display:block}.dealer-ro-search{margin-top:13px}.dealer-perf-section-head{display:block}.dealer-perf-scope{display:inline-flex;margin-top:10px}.dealer-perf-kpi{min-height:105px}.dealer-perf-period{font-size:10px}}
.dealer-perf-context-label{margin:5px 0 8px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:900;color:var(--muted)}
.dealer-perf-district-share-growth{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-2px 0 14px;padding:10px 12px;border:1px dashed var(--border);border-radius:10px;background:var(--surface-2,#fafcfb);font-size:11px}.dealer-perf-district-share-growth span{font-weight:800;color:var(--muted);margin-right:3px}.dealer-perf-district-share-growth b{font-size:11px}

/* Dealer dashboard — HTML reference layout, using the existing RetailIQ theme */
.dealer-html-dashboard{display:flex;flex-direction:column;gap:18px}
.dealer-html-section{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(15,23,42,.05)}
.dealer-html-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.dealer-html-section-head h2{margin:0;font-size:21px;letter-spacing:-.02em}
.dealer-html-section-head p{margin:5px 0 0;color:var(--muted);font-size:12px}
.dealer-find-section{padding-bottom:16px}
.dealer-html-search-wrap{position:relative;max-width:720px;margin:4px 0 15px}
.dealer-html-search{position:relative;display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2,#f8faf9);padding:0 12px;min-height:48px}
.dealer-html-search:focus-within{border-color:var(--green,#16835b);box-shadow:0 0 0 3px rgba(22,131,91,.10)}
.dealer-html-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:13px}
.dealer-html-selected{display:grid;grid-template-columns:2fr 1.1fr .8fr 1fr 1.1fr .8fr;gap:8px}
.dealer-html-selected>div{padding:11px 12px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2,#f8faf9);min-width:0}
.dealer-html-selected span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:900;margin-bottom:5px}
.dealer-html-selected b{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dealer-html-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.dealer-html-monthly-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.dealer-html-kpi{min-height:126px;padding:15px;border:1px solid var(--border);border-radius:13px;background:linear-gradient(145deg,var(--card),var(--surface-2,#f7faf9));display:flex;flex-direction:column;justify-content:center}
.dealer-kpi-label{font-size:10px;font-weight:900;color:var(--muted);line-height:1.35}
.dealer-kpi-value{font-size:27px;font-weight:900;letter-spacing:-.035em;margin-top:7px;color:var(--text)}
.dealer-kpi-value span{font-size:11px;font-weight:800;color:var(--muted);margin-left:4px;letter-spacing:0}
.dealer-kpi-growth{font-size:11px;font-weight:900;margin-top:7px}
.dealer-omc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.dealer-omc-card{border:1px solid var(--border);border-radius:13px;padding:14px;background:var(--surface-2,#f8faf9)}
.dealer-omc-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.dealer-omc-card-head>span:last-child{font-size:10px;color:var(--muted);font-weight:800}
.dealer-omc-tag{display:inline-flex;align-items:center;justify-content:center;min-width:40px;padding:4px 8px;border-radius:7px;font-size:10px;font-weight:950;letter-spacing:.03em;border:1px solid transparent;white-space:nowrap}
.dealer-omc-tag.omc-bpc{background:#fff3bd;color:#765a00;border-color:#ead27a}.dealer-omc-tag.omc-hpc{background:#e8f1fb;color:#15558d;border-color:#b9d1e8}.dealer-omc-tag.omc-ioc{background:#fff0df;color:#9a5510;border-color:#edc18e}.dealer-omc-tag.omc-plain{background:var(--surface-2,#f8faf9);color:var(--text);border-color:var(--border)}
.dealer-omc-filter{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}.dealer-com-filter{border:1px solid var(--border);background:var(--surface-2,#f8faf9);color:var(--text);border-radius:999px;padding:7px 13px;font-size:11px;font-weight:850;cursor:pointer}.dealer-com-filter:hover{border-color:var(--accent,#0d5f8f)}.dealer-com-filter.active{background:var(--accent,#0d5f8f);color:#fff;border-color:var(--accent,#0d5f8f)}

.dealer-omc-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px}.dealer-omc-metrics>div{padding:10px;border-radius:10px;background:var(--card);border:1px solid var(--border)}.dealer-omc-metrics small{display:block;font-size:9px;color:var(--muted);font-weight:900}.dealer-omc-metrics b{display:block;font-size:18px;margin-top:4px}.dealer-omc-metrics em{display:block;font-size:10px;font-style:normal;font-weight:900;margin-top:3px}
.dealer-omc-share{display:grid;grid-template-columns:1fr auto;gap:7px 10px;margin-top:10px;align-items:center;font-size:10px;color:var(--muted)}.dealer-omc-share span{display:flex;justify-content:space-between;gap:8px}.dealer-omc-share b{color:var(--text)}.dealer-omc-share strong{font-size:10px;text-align:right}
.dealer-html-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px}.dealer-html-table{width:100%;border-collapse:collapse;min-width:820px}.dealer-html-table th,.dealer-html-table td{padding:9px 10px;border-bottom:1px solid var(--border);font-size:10px;white-space:nowrap;text-align:right}.dealer-html-table th:first-child,.dealer-html-table td:first-child,.dealer-html-table th:nth-child(2),.dealer-html-table td:nth-child(2),.dealer-html-table th:nth-child(3),.dealer-html-table td:nth-child(3),.dealer-html-table th:nth-child(4),.dealer-html-table td:nth-child(4){text-align:left}.dealer-html-table th{background:var(--surface-2,#f5f8f7);font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);position:sticky;top:0;z-index:1}.dealer-html-table tr:last-child td{border-bottom:0}
.dealer-peer-selected td{background:rgba(22,131,91,.07);font-weight:800}.dealer-peer-selected td:first-child{box-shadow:inset 3px 0 0 var(--green,#16835b)}
.dealer-ro-link{cursor:pointer;color:var(--text);font-weight:800}.dealer-ro-link:hover{text-decoration:underline;color:var(--green,#16835b)}
.dealer-delta{font-weight:900}.positive{color:var(--green,#16835b)!important}.negative{color:var(--red,#d64b4b)!important}.neutral{color:var(--muted)!important}
.dealer-ta-badges{display:flex;gap:7px;flex-wrap:wrap}.dealer-ta-badges span{padding:6px 9px;border-radius:999px;background:var(--surface-2,#f4f7f6);border:1px solid var(--border);font-size:10px;font-weight:900;color:var(--muted)}
.dealer-html-note{margin:12px 0;padding:11px 13px;border-radius:10px;background:var(--brand-soft);border:1px solid var(--line);font-size:11px;color:var(--muted)}.dealer-html-note b{color:var(--text)}
.dealer-gain-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.dealer-subtitle{font-size:13px;font-weight:950;margin:0 0 8px}

@media(max-width:1100px){.dealer-html-selected{grid-template-columns:repeat(3,1fr)}.dealer-html-kpi-grid,.dealer-html-monthly-grid{grid-template-columns:repeat(2,1fr)}.dealer-omc-grid{grid-template-columns:1fr}.dealer-gain-grid{grid-template-columns:1fr}}
@media(max-width:680px){.dealer-html-section{padding:14px}.dealer-html-section-head{display:block}.dealer-html-selected{grid-template-columns:repeat(2,1fr)}.dealer-html-kpi-grid,.dealer-html-monthly-grid{grid-template-columns:1fr}.dealer-html-kpi{min-height:104px}.dealer-kpi-value{font-size:24px}.dealer-ta-badges{margin-top:10px}.dealer-html-table{min-width:920px}}

/* Dealer Trading Area interactive performance */
.dealer-ta-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:-2px 0 14px;padding:9px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2,#f7faf9)}
.dealer-mode-buttons{display:flex;gap:5px;flex-wrap:wrap}
.dealer-mode-buttons button{border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:8px;padding:7px 11px;font-size:10px;font-weight:900;cursor:pointer}
.dealer-mode-buttons button:hover{border-color:var(--green,#16835b);color:var(--green,#16835b)}
.dealer-mode-buttons button.active{background:var(--green,#16835b);border-color:var(--green,#16835b);color:#fff}
.dealer-ta-context-pill{display:inline-flex;margin-left:8px;padding:4px 8px;border-radius:999px;background:rgba(22,131,91,.08);border:1px solid rgba(22,131,91,.18);font-weight:900;color:var(--green,#16835b)}
.dealer-ta-trend-card{margin:14px 0;border:1px solid var(--border);border-radius:14px;background:var(--card);padding:14px}
.dealer-ta-trend-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}.dealer-ta-trend-head b{display:block;font-size:13px}.dealer-ta-trend-head span{display:block;margin-top:3px;font-size:10px;color:var(--muted)}
.dealer-ta-chart{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dealer-ta-chart-product{border:1px solid var(--border);border-radius:11px;padding:9px;background:var(--surface-2,#fafcfb);font-size:11px;color:var(--text)}.dealer-ta-chart-product>b{display:block;margin:2px 4px 4px;font-size:11px}
.dealer-ta-chart svg{display:block;width:100%;height:auto;min-height:250px}.dealer-chart-canvas{position:relative;width:100%}.dealer-chart-grid{stroke:color-mix(in srgb,var(--muted) 18%,transparent);stroke-width:1;stroke-dasharray:3 5}.dealer-chart-axis{fill:var(--muted);font-size:10px;font-weight:750}.dealer-chart-line{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}.dealer-chart-line.current{stroke:var(--green)}.dealer-chart-line.prior{stroke:var(--muted);stroke-dasharray:7 6;opacity:.8}.dealer-chart-area{stroke:none}.dealer-chart-area.current-area{fill:url(#dealerAreaA);opacity:.75}.dealer-chart-area.prior-area{fill:url(#dealerAreaB);opacity:.18}.dealer-area-a-stop{stop-color:var(--green);stop-opacity:.24}.dealer-area-a-end{stop-color:var(--green);stop-opacity:0}.dealer-area-b-stop{stop-color:var(--muted);stop-opacity:.12}.dealer-area-b-end{stop-color:var(--muted);stop-opacity:0}.dealer-chart-point circle:first-child{fill:var(--card);stroke-width:3}.dealer-chart-point.current-point circle:first-child{stroke:var(--green)}.dealer-chart-point.prior-point circle:first-child{stroke:var(--muted)}.dealer-chart-point-halo{fill:transparent!important;stroke:none!important}.dealer-chart-value{fill:var(--text);font-size:10px;font-weight:950;paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}.dealer-chart-legend-line{stroke-width:3.5}.dealer-chart-legend-line.current{stroke:var(--green)}.dealer-chart-legend-line.prior{stroke:var(--muted);stroke-dasharray:7 6}.dealer-chart-legend-text{fill:var(--text)}.dealer-chart-foot{display:flex;justify-content:space-between;gap:12px;margin:0 8px 3px;color:var(--muted);font-size:10px;font-weight:750}.dealer-chart-foot b{color:var(--text)}.dealer-chart-empty{min-height:250px;display:grid;place-items:center;color:var(--muted);font-size:12px}
.dealer-ta-omc-summary{margin:12px 0}.dealer-ta-summary-title{font-size:12px;font-weight:950;margin:0 0 8px;color:var(--text)}
@media(max-width:900px){.dealer-ta-chart{grid-template-columns:1fr}}
@media(max-width:680px){.dealer-ta-controls{align-items:stretch}.dealer-mode-buttons{width:100%}.dealer-mode-buttons button{flex:1}.dealer-ta-trend-card{padding:9px}.dealer-ta-chart svg{min-height:185px}}
/* Trading Area peer table — matches the reference dashboard layout */
.dealer-ta-table-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:4px 0 10px}
.dealer-ta-table-head h3{margin:0;font-size:14px;letter-spacing:-.01em}
.dealer-ta-period-buttons{display:flex;align-items:center;border:1px solid var(--border);background:var(--surface-2,#eef3f6);border-radius:12px;padding:3px;overflow:hidden}
.dealer-ta-period-buttons button{border:0;background:transparent;color:var(--muted);font-weight:900;font-size:11px;padding:8px 13px;border-radius:9px;cursor:pointer;white-space:nowrap}
.dealer-ta-period-buttons button.active{background:#075b82;color:#fff;box-shadow:0 2px 7px rgba(0,0,0,.12)}
.dealer-ta-peer-wrap{border:0;border-radius:0;overflow:auto}
.dealer-ta-peer-table{min-width:1280px;border-collapse:separate;border-spacing:0}
.dealer-ta-peer-table th,.dealer-ta-peer-table td{font-size:11px;padding:9px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.dealer-ta-peer-table th{font-size:9px;background:var(--surface-2);text-transform:uppercase;letter-spacing:.035em;color:var(--muted)}
.dealer-ta-peer-table th:nth-child(3),.dealer-ta-peer-table td:nth-child(3){min-width:210px}
.dealer-ta-peer-table td:nth-child(n+5){text-align:right}
.dealer-ta-peer-table .dealer-peer-selected td{background:color-mix(in srgb,var(--brand-soft) 72%,var(--surface));font-weight:850}
.dealer-ta-peer-table .dealer-peer-selected td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
.dealer-ta-peer-table .dealer-ta-summary-row td{background:var(--surface-2);color:var(--ink);font-weight:850}
.dealer-ta-peer-table .dealer-ta-total-row td{background:var(--surface);color:var(--ink);font-weight:900;border-bottom:0;border-top:0;box-shadow:inset 0 0 0 0 transparent}
.dealer-ta-peer-table .dealer-ta-total-row td:first-child{border-top-left-radius:0}
.dealer-ta-peer-table .dealer-ta-total-row td:last-child{border-top-right-radius:0}
.dealer-ta-peer-table .dealer-ta-total-row .dealer-ta-neutral{color:var(--muted)}
.dealer-ta-peer-table .positive{color:var(--green);font-weight:900}.dealer-ta-peer-table .negative{color:var(--red);font-weight:900}.dealer-ta-peer-table .neutral{color:var(--muted)}
.dealer-ta-peer-table .dealer-ta-total-row .positive{color:var(--green)}.dealer-ta-peer-table .dealer-ta-total-row .negative{color:var(--red)}
.dealer-ta-peer-table .dealer-ta-name{text-align:left!important}
.dealer-ta-com{display:inline-flex;min-width:26px;justify-content:center;padding:4px 7px;border-radius:8px;background:var(--surface-2);color:var(--muted);font-weight:900;font-size:10px;border:1px solid var(--line)}
@media(max-width:680px){.dealer-ta-table-head{align-items:stretch}.dealer-ta-period-buttons{width:100%}.dealer-ta-period-buttons button{flex:1}.dealer-ta-peer-table{min-width:1280px}}

/* Dealer Performance visual refinement */
.dealer-html-section,
.dealer-html-kpi,
.dealer-omc-card,
.dealer-html-table-wrap,
.dealer-html-selected>div {
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
}
.dealer-html-selected>div {
  background: var(--surface);
  border-color: var(--line);
}
.dealer-html-selected .dealer-omc-tag.omc-plain {
  background: transparent;
  border: 0;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none;
}
.dealer-com-filter {
  border: 1px solid #2f80ed;
  background: #fff;
  color: #2f80ed;
  box-shadow: 0 4px 12px rgba(47,128,237,.10);
}
.dealer-com-filter:hover,
.dealer-com-filter.active {
  background: #2f80ed;
  color: #fff;
  border-color: #2f80ed;
  box-shadow: 0 7px 16px rgba(47,128,237,.22);
}
.dealer-html-table th,
.dealer-html-table td {
  text-align: center;
}
.dealer-html-table th:nth-child(3),
.dealer-html-table td:nth-child(3) {
  text-align: left;
}
.dealer-html-table th:nth-child(1),
.dealer-html-table td:nth-child(1),
.dealer-html-table th:nth-child(2),
.dealer-html-table td:nth-child(2),
.dealer-html-table th:nth-child(4),
.dealer-html-table td:nth-child(4) {
  text-align: center;
}
/* Dealer Performance final visual cleanup — theme aware */
.dealer-html-dashboard{background:var(--bg) !important}
.dealer-html-dashboard .dealer-html-section,
.dealer-html-dashboard .dealer-html-kpi,
.dealer-html-dashboard .dealer-omc-card,
.dealer-html-dashboard .dealer-html-table-wrap,
.dealer-html-dashboard .dealer-html-selected>div,
.dealer-html-dashboard .dealer-omc-metrics>div,
.dealer-html-dashboard .dealer-html-search{background:var(--surface) !important;color:var(--ink)}
.dealer-html-dashboard .dealer-html-section{border-color:var(--line) !important;box-shadow:var(--shadow)}
.dealer-html-dashboard .dealer-html-table th{background:var(--surface-2) !important;color:var(--muted) !important}
.dealer-html-dashboard .dealer-html-table td,
.dealer-html-dashboard .dealer-html-table th{text-align:center !important}
.dealer-html-dashboard .dealer-html-table .dealer-ro-link,
.dealer-html-dashboard .dealer-ta-peer-table .dealer-ta-name,
.dealer-html-dashboard .dealer-ta-peer-table th:nth-child(3),
.dealer-html-dashboard .dealer-ta-peer-table td:nth-child(3){text-align:left !important}
.dealer-overview-kpis-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.dealer-rank-kpi .dealer-kpi-value{font-size:27px}
.dealer-rank-kpi .dealer-kpi-growth{font-size:10px;color:var(--muted)}
.dealer-decline-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:14px}
.dealer-decline-card .dealer-omc-metrics{grid-template-columns:1fr 1fr}
.dealer-decline-card .dealer-omc-metrics em{font-size:9px}
@media(max-width:1200px){.dealer-overview-kpis-6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.dealer-overview-kpis-6{grid-template-columns:1fr}.dealer-decline-grid{grid-template-columns:1fr}}
/* Dealer trend charts — enlarged presentation layout */
.dealer-trend-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.dealer-trend-card{min-width:0;border:1px solid var(--border);border-radius:16px;padding:18px;background:var(--card);box-shadow:0 10px 28px rgba(15,23,42,.08)}
.dealer-trend-card-annual{grid-column:1 / -1}
.dealer-trend-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:8px}
.dealer-trend-card-head h3{margin:0;font-size:15px;font-weight:950;color:var(--text)}
.dealer-trend-card-head span{font-size:10px;font-weight:850;color:var(--muted);white-space:nowrap}
.dealer-chart-canvas-zoom{width:100%;min-height:390px}
.dealer-chart-canvas-zoom svg{width:100%;height:auto;min-height:390px}
.dealer-chart-value{font-size:12px;font-weight:950}
.dealer-chart-axis{font-size:11px}
.dealer-chart-axis-title{font-size:11px;font-weight:900}
.dealer-chart-xlabel{font-weight:850}
.dealer-chart-point circle:first-child{stroke-width:3.5}
.dealer-chart-point-halo{opacity:.14}
.dealer-chart-point.current-point .dealer-chart-point-halo{fill:currentColor!important}
.dealer-chart-point.prior-point .dealer-chart-point-halo{fill:currentColor!important}
@media(max-width:900px){.dealer-trend-grid{grid-template-columns:1fr}.dealer-trend-card-annual{grid-column:auto}}
@media(max-width:680px){.dealer-trend-card{padding:12px}.dealer-chart-canvas-zoom,.dealer-chart-canvas-zoom svg{min-height:300px}.dealer-trend-card-head{display:block}.dealer-trend-card-head span{display:block;margin-top:4px}}

/* Final dealer trend presentation: each chart canvas must occupy the full card width.
   The legacy .dealer-ta-chart grid is intentionally overridden here because these
   charts are already laid out by .dealer-trend-grid. */
.dealer-trend-card .dealer-ta-chart{display:block;width:100%;min-width:0}
.dealer-trend-card .dealer-chart-canvas-zoom{display:block;width:100%;min-width:0;min-height:430px}
.dealer-trend-card .dealer-chart-canvas-zoom svg{display:block;width:100%;height:auto;min-height:430px;overflow:visible}
.dealer-trend-card-annual .dealer-chart-canvas-zoom,
.dealer-trend-card-annual .dealer-chart-canvas-zoom svg{min-height:470px}
.dealer-trend-card:not(.dealer-trend-card-annual) .dealer-chart-canvas-zoom,
.dealer-trend-card:not(.dealer-trend-card-annual) .dealer-chart-canvas-zoom svg{min-height:390px}
.dealer-trend-card .dealer-chart-value{font-size:13px;font-weight:950}
.dealer-trend-card .dealer-chart-axis{font-size:11px}
.dealer-trend-card .dealer-chart-axis-title{font-size:12px;font-weight:900}
.dealer-trend-card .dealer-chart-point circle:first-child{r:7}
.dealer-trend-card .dealer-chart-point-halo{opacity:.16}
.dealer-trend-card .dealer-chart-foot{font-size:11px;margin:4px 10px 5px}
@media(max-width:900px){
  .dealer-trend-card-annual .dealer-chart-canvas-zoom,
  .dealer-trend-card-annual .dealer-chart-canvas-zoom svg,
  .dealer-trend-card:not(.dealer-trend-card-annual) .dealer-chart-canvas-zoom,
  .dealer-trend-card:not(.dealer-trend-card-annual) .dealer-chart-canvas-zoom svg{min-height:340px}
}
@media(max-width:680px){
  .dealer-trend-card-annual .dealer-chart-canvas-zoom,
  .dealer-trend-card-annual .dealer-chart-canvas-zoom svg,
  .dealer-trend-card:not(.dealer-trend-card-annual) .dealer-chart-canvas-zoom,
  .dealer-trend-card:not(.dealer-trend-card-annual) .dealer-chart-canvas-zoom svg{min-height:300px}
}

/* Dealer Performance — clean responsive canvas charts (no SVG scaling issues) */
.dealer-trend-card .dealer-chart-canvas-normal{width:100%;min-width:0;padding:0 4px 2px}
.dealer-trend-card .dealer-chart-canvas-normal canvas{display:block;width:100%;height:430px;max-width:100%}
.dealer-trend-card-annual .dealer-chart-canvas-normal canvas{height:460px}
.dealer-trend-card .dealer-chart-foot{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:8px 10px 2px;color:var(--muted);font-size:11px;font-weight:800}
.dealer-trend-card .dealer-chart-foot b{color:var(--ink);font-weight:950}
@media(max-width:900px){.dealer-trend-card .dealer-chart-canvas-normal canvas,.dealer-trend-card-annual .dealer-chart-canvas-normal canvas{height:360px}}
@media(max-width:680px){.dealer-trend-card .dealer-chart-canvas-normal canvas,.dealer-trend-card-annual .dealer-chart-canvas-normal canvas{height:310px}.dealer-trend-card .dealer-chart-foot{font-size:10px}}
/* Canvas charts replace SVG trend renderer: clean, large and responsive */
.dealer-trend-card .dealer-chart-canvas-normal{width:100%;padding:0 4px 2px;box-sizing:border-box}
.dealer-trend-card .dealer-chart-canvas-normal canvas{display:block;width:100%;height:390px}
.dealer-trend-card-annual .dealer-chart-canvas-normal canvas{height:440px}
.dealer-trend-card .dealer-chart-foot{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:8px 10px 2px;color:var(--muted);font-size:11px;font-weight:800}
.dealer-trend-card .dealer-chart-foot b{color:var(--ink);font-weight:950}
@media(max-width:900px){.dealer-trend-card .dealer-chart-canvas-normal canvas,.dealer-trend-card-annual .dealer-chart-canvas-normal canvas{height:350px}}
@media(max-width:680px){.dealer-trend-card .dealer-chart-canvas-normal canvas,.dealer-trend-card-annual .dealer-chart-canvas-normal canvas{height:300px}.dealer-trend-card .dealer-chart-foot{font-size:10px}}

/* Dealer Performance — sortable table headers (reference HTML behavior) */
.dealer-html-table th.sortable{cursor:pointer;user-select:none;white-space:nowrap;transition:background .16s ease,color .16s ease}
.dealer-html-table th.sortable:hover{background:var(--brand-soft)!important;color:var(--brand-ink)!important}
.dealer-html-table th.sortable:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.dealer-sort-arrow{display:inline-block;margin-left:3px;font-size:9px;line-height:1;vertical-align:middle;color:var(--brand-ink)}
/* Officer Sales Area dashboard */
.officer-dashboard{display:grid;gap:18px}.officer-section{background:var(--surface,#fff);border:1px solid var(--line,#dce5ef);border-radius:18px;box-shadow:0 10px 28px rgba(15,35,61,.07);padding:20px}.officer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px}.officer-head h2{margin:0;font-size:18px;color:var(--ink,#10233d)}.officer-head p{margin:5px 0 0;color:var(--muted,#667892);font-size:12px}.officer-search{position:relative;max-width:760px}.officer-search>span{position:absolute;left:14px;top:11px;color:var(--muted,#718096);font-size:20px}.officer-search input{width:100%;height:44px;border:1px solid var(--line,#dce5ef);border-radius:12px;background:var(--surface-2,#f7f9fc);color:var(--ink,#10233d);padding:0 14px 0 42px;outline:none}.officer-ro-option{display:flex;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line,#dce5ef);background:var(--surface,#fff);padding:11px 14px;cursor:pointer;color:var(--ink,#10233d);flex-direction:column}.officer-ro-option small{color:var(--muted,#718096);margin-top:3px}.officer-search>div[hidden]{display:none}.officer-search>div:not([hidden]){position:absolute;z-index:20;left:0;right:0;top:48px;background:var(--surface,#fff);border:1px solid var(--line,#dce5ef);border-radius:12px;box-shadow:0 16px 32px rgba(15,35,61,.15);overflow:hidden}.officer-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.officer-kpis>div{background:var(--surface-2,#f7f9fc);border:1px solid var(--line,#dce5ef);border-radius:14px;padding:15px;min-height:98px}.officer-kpis span,.officer-kpis small{display:block;color:var(--muted,#718096);font-size:11px}.officer-kpis b{display:block;font-size:21px;margin:8px 0;color:var(--ink,#10233d)}.officer-kpis em{font-style:normal;font-weight:800;font-size:12px}.officer-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.officer-controls select,.officer-segment{height:38px;border:1px solid var(--line,#dce5ef);border-radius:10px;background:var(--surface-2,#f7f9fc);color:var(--ink,#10233d);padding:0 11px;font-weight:700}.officer-segment{display:flex;padding:3px}.officer-segment button,.officer-toggle button{border:0;background:transparent;color:var(--muted,#667892);padding:8px 13px;border-radius:8px;font-weight:700;cursor:pointer}.officer-segment button.active,.officer-toggle button.active{background:#075a82;color:#fff;box-shadow:0 3px 8px rgba(7,90,130,.2)}.officer-toggle{display:flex;background:var(--surface-2,#f7f9fc);border:1px solid var(--line,#dce5ef);border-radius:11px;padding:3px}.officer-omc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}.officer-omc-card{border:1px solid var(--line,#dce5ef);border-radius:14px;padding:15px;background:var(--surface,#fff);box-shadow:0 6px 16px rgba(15,35,61,.05)}.officer-omc-card>div{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.officer-omc-card strong{display:inline-block;margin-right:10px;font-size:15px;color:var(--ink,#10233d)}.officer-omc-card span{font-size:12px;font-weight:800}.officer-omc-card small{display:block;color:var(--muted,#718096);line-height:1.7;margin-top:10px}.officer-omc{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:4px 9px;border-radius:8px;font-weight:800;font-size:11px}.officer-omc-bpc{background:#f4d04a;color:#3e3200}.officer-omc-hpc{background:#2178be;color:#fff}.officer-omc-ioc{background:#e58a20;color:#fff}.officer-table-wrap{overflow:auto;border:1px solid var(--line,#dce5ef);border-radius:12px}.officer-table{width:100%;border-collapse:collapse;font-size:12px;min-width:900px}.officer-table th{background:var(--surface-2,#f3f7fb);color:var(--muted,#667892);font-size:10px;text-transform:uppercase;letter-spacing:.05em;padding:10px 9px;border-bottom:1px solid var(--line,#dce5ef);text-align:center;white-space:nowrap}.officer-table td{padding:10px 9px;border-bottom:1px solid var(--line,#e5ebf2);text-align:center;color:var(--ink,#10233d)}.officer-table th:first-child,.officer-table td:first-child{text-align:left}.officer-table tr:last-child td{border-bottom:0}.officer-total td{font-weight:800;background:#073451;color:#fff!important}.officer-pos{color:#00a86b!important;font-weight:800}.officer-neg{color:#ef3d46!important;font-weight:800}.officer-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.officer-panel{border:1px solid var(--line,#dce5ef);border-radius:14px;overflow:hidden}.officer-panel-title{padding:13px 15px;font-weight:800;font-size:15px;background:var(--surface-2,#f7f9fc)}.officer-panel-title.gain{color:#00a86b}.officer-panel-title.loss{color:#ef3d46}.officer-ro-link,.officer-ta-link{cursor:pointer}.officer-ro-link:hover,.officer-ta-link:hover td:first-child{color:#007bc9}.officer-ta-table{min-width:1180px}.officer-ta-table th{vertical-align:middle}.officer-noresult{padding:14px;color:var(--muted,#718096)}
@media(max-width:1000px){.officer-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.officer-omc-cards{grid-template-columns:1fr}.officer-two-col{grid-template-columns:1fr}.officer-head{flex-direction:column}.officer-controls{width:100%}}
@media(prefers-color-scheme:dark){.officer-section{box-shadow:0 10px 30px rgba(0,0,0,.22)}.officer-total td{background:#082d45!important}.officer-table th{background:var(--surface-2,#172333)}}
/* Officer dashboard refinements: keep page fixed-width while tables scroll internally. */
.officer-dashboard{min-width:0;max-width:100%;width:100%;overflow:hidden}
.officer-section{min-width:0;max-width:100%;overflow:hidden}
.officer-head,.officer-controls{min-width:0}
.officer-table-wrap{max-width:100%;width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.officer-table{max-width:none}
.officer-table th[data-sort-col]{cursor:pointer;user-select:none;position:relative}
.officer-table th[data-sort-col]::after{content:'↕';font-size:9px;opacity:.45;margin-left:5px}
.officer-table th[data-sort-col].officer-sort-active::after{content:attr(data-sort-dir);opacity:1;color:var(--brand,#075a82)}
.officer-table th[data-sort-col].officer-sort-active[data-sort-dir="asc"]::after{content:'↑'}
.officer-table th[data-sort-col].officer-sort-active[data-sort-dir="desc"]::after{content:'↓'}
.officer-table th[data-sort-col]:hover{background:var(--surface-3,#eaf1f7)}
.officer-table td.officer-ro-name,.officer-table th[data-sort-col="2"]{text-align:left}
.officer-selected-ro{scroll-margin-top:18px}
.officer-selected-meta{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:15px}
.officer-selected-meta>div{min-width:0;padding:12px 13px;border:1px solid var(--line,#dce5ef);border-radius:12px;background:var(--surface-2,#f7f9fc)}
.officer-selected-meta span{display:block;color:var(--muted,#718096);font-size:9px;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.officer-selected-meta b{display:block;margin-top:5px;color:var(--ink,#10233d);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.officer-ta-detail-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.officer-ta-detail-head>div{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px}
.officer-ta-detail-head h3{margin:0;color:var(--ink,#10233d);font-size:14px}
.officer-selected-peer{background:color-mix(in srgb,var(--brand,#075a82) 7%,var(--surface,#fff))}
@media(max-width:900px){.officer-selected-meta{grid-template-columns:repeat(3,minmax(0,1fr))}.officer-ta-detail-head>div{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.officer-selected-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.officer-section{padding:14px}.officer-table{min-width:900px}}
/* Officer dashboard final responsive/table treatment */
.officer-find{position:relative;z-index:60;overflow:visible!important}
.officer-find .officer-search{z-index:70}
.officer-find .officer-search>div:not([hidden]){z-index:9999;max-height:420px;overflow-y:auto}
.officer-dashboard{overflow-x:hidden!important}
.officer-section{overflow-x:hidden}
.officer-overview-block{margin-bottom:16px}.officer-overview-block:last-child{margin-bottom:0}
.officer-overview-title{font-size:13px;font-weight:850;color:var(--ink,#10233d);margin:2px 0 9px}
.officer-kpis>div{background:var(--surface,#fff)}
.officer-two-col{grid-template-columns:1fr}
.officer-table-wrap{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.officer-table{min-width:0!important;width:100%;table-layout:fixed}
.officer-table th,.officer-table td{white-space:normal;overflow-wrap:anywhere;word-break:break-word;vertical-align:middle}
.officer-table th{line-height:1.15;padding:9px 6px}.officer-table td{padding:9px 6px}
.officer-table th:first-child,.officer-table td:first-child{width:15%;text-align:left}
.officer-ta-table th:first-child,.officer-ta-table td:first-child{width:16%}
.officer-ta-table th:nth-child(2),.officer-ta-table td:nth-child(2){width:5%}
.officer-ta-table th:nth-child(3),.officer-ta-table td:nth-child(3),.officer-ta-table th:nth-child(4),.officer-ta-table td:nth-child(4){width:7%}
.officer-ro-option{min-height:54px}
@media(max-width:900px){.officer-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.officer-table{font-size:11px}.officer-ta-table th:first-child,.officer-ta-table td:first-child{width:20%}}
@media(max-width:560px){.officer-kpis{grid-template-columns:1fr}.officer-table{font-size:10px}.officer-table th,.officer-table td{padding:7px 4px}}

/* Officer dashboard table space optimization: keep identifier columns compact and give freed width to metrics. */
.officer-table{table-layout:fixed!important;min-width:0!important;width:100%!important}
.officer-table th,.officer-table td{padding-left:5px!important;padding-right:5px!important}
.officer-table th:first-child,.officer-table td:first-child{width:10%!important}
.officer-table th:nth-child(2),.officer-table td:nth-child(2){width:7%!important}
.officer-table th:not(:first-child):not(:nth-child(2)),.officer-table td:not(:first-child):not(:nth-child(2)){width:auto}
.officer-ta-table th:first-child,.officer-ta-table td:first-child{width:12%!important}
.officer-ta-table th:nth-child(2),.officer-ta-table td:nth-child(2){width:5%!important}
.officer-ta-table th:nth-child(3),.officer-ta-table td:nth-child(3),.officer-ta-table th:nth-child(4),.officer-ta-table td:nth-child(4){width:8%!important}
.officer-selected-ta-table th:first-child,.officer-selected-ta-table td:first-child{width:4%!important}
.officer-selected-ta-table th:nth-child(2),.officer-selected-ta-table td:nth-child(2){width:6%!important}
.officer-selected-ta-table th:nth-child(3),.officer-selected-ta-table td:nth-child(3){width:20%!important}
.officer-selected-ta-table th:nth-child(4),.officer-selected-ta-table td:nth-child(4){width:7%!important}
.officer-gainers,.officer-losers{width:100%!important}
.officer-sales-area-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.officer-sales-area-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.officer-sales-area-kpis{grid-template-columns:1fr}}

/* Officer dashboard: dense Top-10 tables without wasting identifier width. */
#officerGainers,#officerLosers{table-layout:fixed!important;min-width:0!important;width:100%!important}
#officerGainers th,#officerGainers td,#officerLosers th,#officerLosers td{padding:8px 6px!important}
#officerGainers th:nth-child(1),#officerGainers td:nth-child(1),
#officerLosers th:nth-child(1),#officerLosers td:nth-child(1){width:4%!important;text-align:center}
#officerGainers th:nth-child(2),#officerGainers td:nth-child(2),
#officerLosers th:nth-child(2),#officerLosers td:nth-child(2){width:30%!important;text-align:left}
#officerGainers th:nth-child(3),#officerGainers td:nth-child(3),
#officerLosers th:nth-child(3),#officerLosers td:nth-child(3){width:7%!important}
#officerGainers th:nth-child(4),#officerGainers td:nth-child(4),
#officerLosers th:nth-child(4),#officerLosers td:nth-child(4){width:8%!important}
#officerGainers th:nth-child(n+5),#officerGainers td:nth-child(n+5),
#officerLosers th:nth-child(n+5),#officerLosers td:nth-child(n+5){width:10.2%!important;padding-left:5px!important;padding-right:5px!important}

/* Trading Area: give the actual TA name only the width it needs, with readable padding. */
#officerTaTable{table-layout:fixed!important;min-width:0!important;width:100%!important}
#officerTaTable th,#officerTaTable td{padding:8px 7px!important}
#officerTaTable th:first-child,#officerTaTable td:first-child{width:15%!important;text-align:left;white-space:normal;overflow-wrap:anywhere;word-break:break-word;padding-left:10px!important;padding-right:10px!important}
#officerTaTable th:nth-child(2),#officerTaTable td:nth-child(2){width:5%!important}
#officerTaTable th:nth-child(3),#officerTaTable td:nth-child(3),#officerTaTable th:nth-child(4),#officerTaTable td:nth-child(4){width:7%!important}
#officerTaTable th:nth-child(n+5),#officerTaTable td:nth-child(n+5){width:auto!important}
/* Officer dashboard final table width tuning */
.officer-gainers-table th:first-child,.officer-gainers-table td:first-child,
#officerGainers th:first-child,#officerGainers td:first-child,
#officerLosers th:first-child,#officerLosers td:first-child{width:4%!important;padding-left:3px!important;padding-right:3px!important}
#officerGainers th:nth-child(2),#officerGainers td:nth-child(2),
#officerLosers th:nth-child(2),#officerLosers td:nth-child(2){width:7%!important}
#officerGainers th:nth-child(3),#officerGainers td:nth-child(3),
#officerLosers th:nth-child(3),#officerLosers td:nth-child(3){width:30%!important;text-align:left!important}
#officerGainers th:nth-child(4),#officerGainers td:nth-child(4),
#officerLosers th:nth-child(4),#officerLosers td:nth-child(4){width:7%!important}
#officerGainers th:nth-child(n+5),#officerGainers td:nth-child(n+5),
#officerLosers th:nth-child(n+5),#officerLosers td:nth-child(n+5){width:auto!important;min-width:0!important;padding-left:4px!important;padding-right:4px!important}
.officer-ta-table th:first-child,.officer-ta-table td:first-child{width:9%!important;text-align:left!important}
.officer-ta-table th:nth-child(2),.officer-ta-table td:nth-child(2){width:4%!important}
.officer-ta-table th:nth-child(3),.officer-ta-table td:nth-child(3),
.officer-ta-table th:nth-child(4),.officer-ta-table td:nth-child(4){width:6%!important}
.officer-ta-table th:nth-child(n+5),.officer-ta-table td:nth-child(n+5){width:6.25%!important;padding-left:4px!important;padding-right:4px!important}


/* Officer final compact TA + Gainer/Loser OMC filter */
#officerGOMC{height:38px;border:1px solid var(--line,#dce5ef);border-radius:10px;background:var(--surface-2,#f7f9fc);color:var(--ink,#10233d);padding:0 11px;font-weight:700;min-width:110px}
#officerTaTable th:first-child,#officerTaTable td:first-child{width:6%!important;text-align:center!important;padding-left:5px!important;padding-right:5px!important}
#officerTaTable th:first-child b,#officerTaTable td:first-child b{text-align:center!important;display:block}


/* Officer V5: compact Trading Area + standard blue Top-10 controls */
#officerTaTable th:first-child,#officerTaTable td:first-child{width:7%!important;text-align:center!important;padding-left:5px!important;padding-right:5px!important}
#officerTaTable th:first-child b,#officerTaTable td:first-child b{text-align:center!important;display:block}
#officerGainers .officer-ro-link,#officerLosers .officer-ro-link{text-align:left!important}
#officerGOMC{height:38px!important;border:1px solid #075a82!important;border-radius:10px!important;background:#fff!important;color:#075a82!important;padding:0 11px!important;font-weight:700!important;min-width:110px!important}
#officerProduct,#officerGPeriod{height:38px!important;border:1px solid #075a82!important;border-radius:10px!important;background:#fff!important;color:#075a82!important;padding:3px!important}
#officerProduct button,#officerGPeriod button{border:0!important;background:transparent!important;color:#075a82!important;padding:8px 13px!important;border-radius:8px!important;font-weight:700!important;cursor:pointer!important}
#officerProduct button.active,#officerGPeriod button.active{background:#075a82!important;color:#fff!important;box-shadow:0 3px 8px rgba(7,90,130,.2)!important}
.officer-section .officer-head:has(#officerGOMC) .officer-controls{flex-wrap:nowrap!important;white-space:nowrap!important}
@media(max-width:900px){.officer-section .officer-head:has(#officerGOMC){flex-direction:column!important}.officer-section .officer-head:has(#officerGOMC) .officer-controls{width:100%!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:2px!important}}

/* =====================================================================
   RETAILIQ DASHBOARD BUTTON STANDARD — Dealer / Officer / Admin / Super Admin
   Use the same primary action treatment as .btn.btn-primary.
   ===================================================================== */

/* Dealer dashboard controls */
#dealerPanel .dealer-com-filter,
#dealerPanel .dealer-ta-period-buttons button {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:36px!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  padding:9px 14px!important;
  font-weight:700!important;
  font-size:12px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  background:var(--grad)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px -8px rgba(79,109,245,.65)!important;
  transition:transform .12s,box-shadow .2s,filter .2s,opacity .2s!important;
}
#dealerPanel .dealer-com-filter:hover,
#dealerPanel .dealer-com-filter.active,
#dealerPanel .dealer-ta-period-buttons button:hover,
#dealerPanel .dealer-ta-period-buttons button.active {
  background:var(--grad)!important;
  color:#fff!important;
  border-color:transparent!important;
  filter:brightness(1.05)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 26px -8px rgba(79,109,245,.8)!important;
}
#dealerPanel .dealer-com-filter:active,
#dealerPanel .dealer-ta-period-buttons button:active {
  transform:translateY(1px) scale(.99)!important;
}

/* Officer + Admin + Super Admin territory dashboard controls.
   Territory dashboard reuses the officer dashboard component. */
.officer-dashboard .officer-segment button,
.officer-dashboard .officer-toggle button {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:34px!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  padding:8px 13px!important;
  font-weight:700!important;
  font-size:12px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  background:var(--grad)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 7px 18px -8px rgba(79,109,245,.62)!important;
  transition:transform .12s,box-shadow .2s,filter .2s,opacity .2s!important;
}
.officer-dashboard .officer-segment button:hover,
.officer-dashboard .officer-segment button.active,
.officer-dashboard .officer-toggle button:hover,
.officer-dashboard .officer-toggle button.active {
  background:var(--grad)!important;
  color:#fff!important;
  border-color:transparent!important;
  filter:brightness(1.05)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -8px rgba(79,109,245,.78)!important;
}
.officer-dashboard .officer-segment button:active,
.officer-dashboard .officer-toggle button:active {
  transform:translateY(1px) scale(.99)!important;
}

/* Standard blue outline/select control used alongside primary buttons */
.officer-dashboard #officerGOMC,
.officer-dashboard .officer-controls select {
  min-height:36px!important;
  border:1px solid #2f80ed!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#2f80ed!important;
  font-weight:700!important;
  box-shadow:0 4px 12px rgba(47,128,237,.10)!important;
}
.officer-dashboard #officerGOMC:focus,
.officer-dashboard .officer-controls select:focus {
  outline:2px solid rgba(47,128,237,.18)!important;
  outline-offset:1px!important;
}

/* Preserve search-result rows as list items rather than action buttons. */
.officer-dashboard .officer-ro-option {
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  min-height:54px!important;
  border:0!important;
  border-bottom:1px solid var(--line,#dce5ef)!important;
  border-radius:0!important;
  padding:11px 14px!important;
  background:var(--surface,#fff)!important;
  color:var(--ink,#10233d)!important;
  box-shadow:none!important;
}
.officer-dashboard .officer-ro-option:hover {
  background:var(--surface-3,#eef4f8)!important;
  color:var(--ink,#10233d)!important;
  filter:none!important;
}

/* =====================================================================
   RETAILIQ PRIMARY BLUE — ALL DASHBOARD TOGGLE BUTTONS
   MS / HSD / YTD / Current-month and Trading Area period controls
   ===================================================================== */
.officer-dashboard .officer-segment,
.officer-dashboard .officer-toggle {
  background:transparent!important;
  border:0!important;
  padding:0!important;
  height:auto!important;
}
.officer-dashboard .officer-segment button,
.officer-dashboard .officer-toggle button {
  background:var(--grad)!important;
  color:#fff!important;
  border:1px solid transparent!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px -8px rgba(79,109,245,.65)!important;
}
.officer-dashboard .officer-segment button:hover,
.officer-dashboard .officer-toggle button:hover {
  background:var(--grad)!important;
  color:#fff!important;
  filter:brightness(1.05)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 26px -8px rgba(79,109,245,.8)!important;
}
.officer-dashboard .officer-segment button.active,
.officer-dashboard .officer-toggle button.active {
  background:var(--grad)!important;
  color:#fff!important;
  filter:brightness(.94)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 10px 22px -8px rgba(79,109,245,.82)!important;
}


/* =====================================================================
   GLOBAL BUTTON VISUAL STYLE
   Applied to every <button> without changing its layout/position.
   Visual reference: #refreshEmailUsers / .btn.btn-outline
   ===================================================================== */
button[class] {
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--ink-2, #334155) !important;
  background: var(--surface, #ffffff) !important;
  border-color: var(--line-2, #d7e0ea) !important;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 35, 61, .08)) !important;
  border-radius: 11px !important;
  text-decoration: none !important;
}

button[class]:hover:not(:disabled) {
  color: var(--brand-ink, #3158d8) !important;
  background: var(--surface, #ffffff) !important;
  border-color: var(--brand, #4f6df5) !important;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 35, 61, .08)) !important;
}

button[class]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand, #4f6df5) 35%, transparent) !important;
  outline-offset: 2px;
}

button[class] svg {
  color: currentColor;
  stroke: currentColor;
}

button[class]:disabled {
  opacity: .5;
}

/* =====================================================================
   FINAL GLOBAL BUTTON VISUAL NORMALIZATION
   Reference: #refreshEmailUsers / .btn.btn-outline
   Visual properties only. Existing position, display, dimensions,
   margins, padding, flex/grid placement and DOM structure are untouched.
   ===================================================================== */
button:not(.accent-swatch),
input[type="button"]:not(.accent-swatch),
input[type="submit"]:not(.accent-swatch),
input[type="reset"]:not(.accent-swatch) {
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--ink-2, #334155) !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--line-2, #d7e0ea) !important;
  border-radius: 11px !important;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 35, 61, .08)) !important;
}

button:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
input[type="reset"]:hover:not(:disabled) {
  color: var(--brand-ink, #3158d8) !important;
  background: var(--surface, #ffffff) !important;
  border-color: var(--brand, #4f6df5) !important;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 35, 61, .08)) !important;
}

button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand, #4f6df5) 35%, transparent) !important;
  outline-offset: 2px;
}

button svg {
  color: currentColor;
  stroke: currentColor;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
  opacity: .5;
}

/* FINAL OVERRIDE — EXACT REFRESH USERS BUTTON VISUALS FOR ALL ACTION/TOGGLE BUTTONS
   Layout/position properties intentionally omitted. */

/* FINAL OVERRIDE — EXACT REFRESH USERS BUTTON VISUALS FOR ALL ACTION/TOGGLE BUTTONS
   Layout/position properties intentionally omitted. */
button,
button[class],
.officer-dashboard .officer-segment button,
.officer-dashboard .officer-toggle button,
#officerProduct button,
#officerGPeriod button,
.dealer-mode-buttons button,
.dealer-ta-period-buttons button,
#dealerPanel .dealer-ta-period-buttons button {
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--ink-2, #334155) !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--line-2, #d7e0ea) !important;
  border-radius: 11px !important;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 35, 61, .08)) !important;
  text-decoration: none !important;
}

button:hover:not(:disabled),
button[class]:hover:not(:disabled),
.officer-dashboard .officer-segment button:hover:not(:disabled),
.officer-dashboard .officer-toggle button:hover:not(:disabled),
#officerProduct button:hover:not(:disabled),
#officerGPeriod button:hover:not(:disabled),
.dealer-mode-buttons button:hover:not(:disabled),
.dealer-ta-period-buttons button:hover:not(:disabled),
#dealerPanel .dealer-ta-period-buttons button:hover:not(:disabled) {
  color: var(--brand-ink, #3158d8) !important;
  background: var(--surface, #ffffff) !important;
  border-color: var(--brand, #4f6df5) !important;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 35, 61, .08)) !important;
  filter: none !important;
}

button svg {
  color: currentColor;
  stroke: currentColor;
}

/* =====================================================================
   RetailIQ — UNIFIED BUTTON STANDARD
   PASTE AT THE VERY END of styles.css (it must be the last rule).

   Reference: <button class="btn btn-primary notification-readall-btn" id="readAllPage">
   Its final computed look (after every override in styles.css) is the
   white "outline" button:
     text        var(--ink-2)
     background  var(--surface)
     border      1px solid var(--line-2)
     shadow      var(--shadow-sm)
     hover       text var(--brand-ink) + border var(--brand), no filter
   The blue gradient of .btn-primary never shows, because the global
   button[class] !important rules beat it.

   Buttons that were still blue are caught by older !important rules with
   higher specificity (#dealerPanel …, #officerProduct button.active,
   .officer-dashboard … button.active, .dealer-ops-shell …, .nav-item.active).
   :not(#rq-btn):not(#rq-btn) adds two ID-level specificity points so
   this block beats all of them without touching layout.

   Visual properties only: no size, padding, margin, display, position
   or transform is changed anywhere below.
   ===================================================================== */

/* ---------- 1. Base look: every button ---------- */
:is(button, input[type="button"], input[type="submit"], input[type="reset"]):not(#rq-btn):not(#rq-btn){
  color: var(--ink-2) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--surface) !important;
  border-color: var(--line-2) !important;
  box-shadow: var(--shadow-sm) !important;
  filter: none !important;
  transition: transform .12s, box-shadow .2s, background .2s, border-color .2s, color .2s, opacity .2s !important;
}

/* ---------- 2. Hover + selected state (same look as the reference hover) ----------
   "Selected" keeps tabs / toggles / active menu items distinguishable
   without a blue fill. Delete the second selector group if you want
   selected buttons to look exactly like unselected ones. */
:is(button, input[type="button"], input[type="submit"], input[type="reset"]):not(#rq-btn):not(#rq-btn):hover:not(:disabled),
:is(button, input[type="button"], input[type="submit"], input[type="reset"]):not(#rq-btn):not(#rq-btn):is(.active, .on, .selected, [aria-selected="true"], [aria-pressed="true"], [aria-current="page"]){
  color: var(--brand-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--surface) !important;
  border-color: var(--brand) !important;
  box-shadow: var(--shadow-sm) !important;
  filter: none !important;
}

/* ---------- 3. Icons and inner text follow the button colour ---------- */
:is(button, input[type="button"], input[type="submit"], input[type="reset"]):not(#rq-btn):not(#rq-btn) svg{
  color: inherit !important;
  stroke: currentColor !important;
}
button.dealer-tab:not(#rq-btn):not(#rq-btn) *{
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ---------- 4. Controls that sit next to the buttons (were blue-bordered) ---------- */

#officerProduct:not(#rq-btn):not(#rq-btn),
#officerGPeriod:not(#rq-btn):not(#rq-btn){
  background: var(--surface) !important;
  border-color: var(--line-2) !important;
  color: var(--ink-2) !important;
}
#officerGOMC:not(#rq-btn):not(#rq-btn),
.officer-dashboard .officer-controls select:not(#rq-btn):not(#rq-btn){
  color: var(--ink-2) !important;
  background-color: var(--surface) !important;
  border-color: var(--line-2) !important;
  box-shadow: var(--shadow-sm) !important;
}
#officerGOMC:not(#rq-btn):not(#rq-btn):hover:not(:disabled),
.officer-dashboard .officer-controls select:not(#rq-btn):not(#rq-btn):hover:not(:disabled){
  color: var(--brand-ink) !important;
  border-color: var(--brand) !important;
}

/* RetailIQ AI — Theme v2 "Aurora Glass". Loaded after styles.css; overrides tokens + shared components only. */
:root{
  --font:"Plus Jakarta Sans","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --bg:#f3f4fb;--surface:#ffffff;--surface-2:#f7f7fd;--surface-3:#eeeffa;
  --ink:#12132b;--ink-2:#3a3d5c;--muted:#6b6f93;--faint:#9a9dbb;
  --line:#e7e8f5;--line-2:#d8daee;
  --brand:#6d5df6;--brand-ink:#5142d8;--brand-soft:#efedff;--brand-soft-2:#e2defe;
  --grad:linear-gradient(135deg,#4f8cff 0%,#6d5df6 50%,#b25cf7 100%);
  --grad-text:linear-gradient(120deg,#3b82f6 0%,#7c5cf6 55%,#d048d8 100%);
  --radius:20px;--radius-sm:12px;--sidebar-w:264px;
  --shadow-sm:0 1px 2px rgba(30,27,75,.06);
  --shadow:0 1px 2px rgba(30,27,75,.04),0 18px 40px -22px rgba(72,56,180,.28);
  --shadow-lg:0 40px 80px -30px rgba(72,56,180,.42);
  --ring:0 0 0 4px rgba(109,93,246,.18);
  --glass:rgba(255,255,255,.66);
}
[data-theme="dark"]{
  --bg:#07071a;--surface:#100f26;--surface-2:#15142e;--surface-3:#1c1b3a;
  --ink:#eeeefc;--ink-2:#cdcdea;--muted:#9391bd;--faint:#66648f;
  --line:#23214a;--line-2:#322f66;
  --brand:#8b7dff;--brand-ink:#b8aeff;--brand-soft:rgba(139,125,255,.14);--brand-soft-2:rgba(139,125,255,.25);
  --grad-text:linear-gradient(120deg,#7cb4ff 0%,#a898ff 50%,#f08bf0 100%);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 20px 44px -20px rgba(0,0,0,.7);
  --ring:0 0 0 4px rgba(139,125,255,.26);
  --glass:rgba(16,15,38,.62);
}
body{letter-spacing:-.005em;font-feature-settings:"ss01","cv11"}
body::before{
  background:
    radial-gradient(800px 480px at 90% -8%,rgba(178,92,247,.16),transparent 60%),
    radial-gradient(700px 460px at -6% 2%,rgba(79,140,255,.15),transparent 60%),
    radial-gradient(600px 400px at 50% 110%,rgba(109,93,246,.08),transparent 60%)!important}
[data-theme="dark"] body::before{
  background:
    radial-gradient(800px 500px at 88% -10%,rgba(178,92,247,.20),transparent 60%),
    radial-gradient(700px 480px at -6% 0%,rgba(79,140,255,.16),transparent 60%)!important}
::selection{background:var(--brand-soft-2)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box;border:3px solid transparent}

/* Sidebar — floating glass panel */
.sidebar{background:var(--glass)!important;backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border-right:1px solid var(--line)!important}
.nav-item{border-radius:14px!important;font-weight:550;transition:background .2s,color .2s,transform .2s!important}
.nav-item:hover{transform:translateX(3px)}
.nav-item.active{background:linear-gradient(90deg,var(--brand-soft-2),var(--brand-soft))!important;color:var(--brand-ink)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent)}
.nav-label{letter-spacing:.14em!important}
.brand-mark{border-radius:15px!important;box-shadow:0 10px 26px -8px rgba(109,93,246,.75),0 0 0 4px rgba(109,93,246,.10)!important}
.brand-name{letter-spacing:-.03em}

/* Topbar */
.topbar{background:var(--glass)!important;backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border-bottom:1px solid var(--line)!important}

/* Page headers */
.page-head h1{font-size:30px!important;font-weight:800!important;letter-spacing:-.045em!important;background:linear-gradient(120deg,var(--ink) 30%,var(--brand-ink));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Cards */
.card{border-radius:var(--radius)!important;background:linear-gradient(180deg,var(--surface),var(--surface-2))!important;border:1px solid var(--line)!important;position:relative}
[data-theme="dark"] .card{background:linear-gradient(180deg,rgba(28,27,58,.7),rgba(16,15,38,.85))!important;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05)}
.card.hover:hover{transform:translateY(-4px)!important;border-color:color-mix(in srgb,var(--brand) 50%,var(--line))!important;box-shadow:0 30px 60px -28px rgba(109,93,246,.5)!important}
.metric-card::after{background:radial-gradient(circle,rgba(178,92,247,.22),transparent 70%)!important;width:150px!important;height:150px!important}
.metric-card .metric-ic,.rail-btn .metric-ic{border-radius:13px!important;background:var(--grad)!important;color:#fff!important;box-shadow:0 8px 18px -8px rgba(109,93,246,.8)}
.metric-card.v2 .metric-ic{background:linear-gradient(135deg,#10b981,#06b6d4)!important}
.metric-card.v3 .metric-ic{background:linear-gradient(135deg,#f59e0b,#f97316)!important}
.metric-card.v4 .metric-ic{background:linear-gradient(135deg,#f43f5e,#ec4899)!important}

/* Buttons */
.btn{border-radius:13px!important;font-weight:650;letter-spacing:-.01em}
.btn-primary{background:var(--grad)!important;background-size:140% 100%;border:0!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 24px -10px rgba(109,93,246,.85)!important;transition:background-position .4s,box-shadow .25s,transform .15s}
.btn-primary:hover:not(:disabled){background-position:100% 0;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 32px -10px rgba(109,93,246,.95)!important}
.btn-outline{background:var(--surface)!important}

/* Inputs */
.field input,.field select,.field textarea{border-radius:13px!important;background:var(--surface-2)!important;border:1px solid var(--line-2)!important;transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus,.field select:focus,.field textarea:focus{background:var(--surface)!important;border-color:var(--brand)!important}

/* Chat */
.msg.user .bubble{background:var(--grad)!important;color:#fff!important;border:0!important;border-radius:20px 20px 6px 20px!important;box-shadow:0 14px 28px -16px rgba(109,93,246,.9)}
.msg.ai .bubble{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:6px 20px 20px 20px!important;box-shadow:var(--shadow-sm)}
.composer-box{border-radius:22px!important;background:var(--glass)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line-2)!important;box-shadow:var(--shadow)!important}
.composer-box:focus-within{border-color:var(--brand)!important;box-shadow:var(--ring),0 24px 50px -24px rgba(109,93,246,.6)!important}
.send{background:var(--grad)!important;color:#fff!important;box-shadow:0 8px 20px -8px rgba(109,93,246,.9)!important}
.rail .card{border-radius:24px!important}
.rail-btn{border-radius:15px!important;transition:background .2s,transform .2s,border-color .2s}
.rail-btn:hover{transform:translateX(3px);border-color:var(--line)!important}

/* Badges / modals / toasts */
.badge,.pill{letter-spacing:.01em;font-weight:650}
.modal{border-radius:26px!important;box-shadow:var(--shadow-lg),0 0 0 1px var(--line)!important}
.modal-backdrop{backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);background:rgba(10,8,35,.45)!important}
.toast{border-radius:16px!important;backdrop-filter:blur(14px)}
.table th,.md-table th{text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--muted)}
.table tbody tr{transition:background .15s}
.table tbody tr:hover{background:var(--brand-soft)}

/* Login */
.auth-reference .reference-signin{background:var(--grad)!important;color:#fff!important;border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px -12px rgba(109,93,246,.9)!important;font-weight:700;transition:transform .15s,box-shadow .25s,filter .2s}
.auth-reference .reference-signin:hover{transform:translateY(-1px);filter:brightness(1.06)}
.auth-reference .reference-signin .ic,.auth-reference .reference-signin span{color:#fff!important}
.auth-reference .remember-control input:checked+span{background:var(--brand)!important;border-color:var(--brand)!important}
.auth-reference .reference-field input:focus{border-color:var(--brand)!important;box-shadow:var(--ring)!important}
.hero h1{letter-spacing:-.05em!important;font-weight:800!important}

/* Mobile bottom nav */
.mobile-bottom-nav{background:var(--glass)!important;backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border-top:1px solid var(--line)!important}

/* Boot screen */
.boot{background:radial-gradient(700px 500px at 50% 40%,rgba(109,93,246,.22),transparent 65%),var(--bg)!important}
.boot-brand{font-weight:800;letter-spacing:-.04em}
.boot-progress i{background:var(--grad)!important}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- Theme v2: beat the "unified button" layer (needs 3x :not(#rq-btn)) ---- */
:is(.btn-primary,.reference-signin,.send):not(#rq-btn):not(#rq-btn):not(#rq-btn){
  background:var(--grad)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:transparent!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 12px 26px -10px rgba(109,93,246,.9)!important}
:is(.btn-primary,.reference-signin,.send):not(#rq-btn):not(#rq-btn):not(#rq-btn):hover:not(:disabled){
  background:var(--grad)!important;color:#fff!important;border-color:transparent!important;filter:brightness(1.07)!important;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 34px -10px rgba(109,93,246,1)!important}
:is(.btn-primary,.reference-signin,.send):not(#rq-btn):not(#rq-btn):not(#rq-btn) svg{color:#fff!important;stroke:#fff!important}
button.nav-item.active:not(#rq-btn):not(#rq-btn):not(#rq-btn),.nav-item.active:not(#rq-btn):not(#rq-btn):not(#rq-btn){
  background:linear-gradient(90deg,var(--brand-soft-2),var(--brand-soft))!important;color:var(--brand-ink)!important;
  border-color:color-mix(in srgb,var(--brand) 28%,transparent)!important;box-shadow:none!important}
.btn-soft:not(#rq-btn):not(#rq-btn):not(#rq-btn){background:var(--brand-soft)!important;color:var(--brand-ink)!important;border-color:transparent!important;box-shadow:none!important}
.btn-soft:not(#rq-btn):not(#rq-btn):not(#rq-btn):hover:not(:disabled){background:var(--brand-soft-2)!important}

/* ===== Theme v3 "Aurora" — full redesign layer ===== */
:root{--bg:#eef0fb;--radius:24px;--sidebar-w:278px}
[data-theme="dark"]{--bg:#05051a}
body{background:var(--bg)!important}
/* floating sidebar */
.sidebar{margin:14px 0 14px 14px;height:calc(100dvh - 28px)!important;border:1px solid var(--line)!important;border-radius:28px;box-shadow:var(--shadow);padding:18px 12px!important}
.sidebar .nav-item:not(#rq-btn):not(#rq-btn):not(#rq-btn){background:transparent!important;border:0!important;box-shadow:none!important;border-radius:14px!important;color:var(--muted)!important;padding:10px 14px;font-weight:600}
.sidebar .nav-item:not(#rq-btn):not(#rq-btn):not(#rq-btn):hover{background:var(--brand-soft)!important;color:var(--brand-ink)!important;border:0!important}
.sidebar .nav-item.active:not(#rq-btn):not(#rq-btn):not(#rq-btn){background:var(--grad)!important;color:#fff!important;box-shadow:0 12px 24px -10px rgba(109,93,246,.85)!important;border:0!important}
.sidebar .nav-item.active::before{display:none}
.sidebar .nav-item.active svg{stroke:#fff!important}
.nav-label{color:var(--faint)!important;font-size:10px!important;padding:18px 14px 6px!important}
/* topbar as floating pill */
.topbar{margin:14px 18px 0;border:1px solid var(--line)!important;border-radius:22px;box-shadow:var(--shadow-sm);height:60px}
.content{padding-top:24px!important}
/* page title */
.page-head h1{font-size:34px!important;letter-spacing:-.05em!important}
.page-head .eyebrow,.eyebrow{color:var(--brand)!important;letter-spacing:.16em}
/* cards: soft glass with gradient hairline */
.card{border:1px solid color-mix(in srgb,var(--brand) 12%,var(--line))!important;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,var(--shadow)!important}
.metric-card{background:var(--surface)!important}
.metric-card:nth-child(1){background:linear-gradient(135deg,#5b6cff,#9b5cf6 70%,#d14fd8)!important;color:#fff!important;border:0!important;box-shadow:0 26px 50px -24px rgba(109,93,246,.9)!important}
.metric-card:nth-child(1) *{color:#fff!important}
.metric-card:nth-child(1) .metric-ic{background:rgba(255,255,255,.22)!important;box-shadow:none}
.metric-card .value,.metric-card .big{font-size:34px;font-weight:800;letter-spacing:-.05em}
/* composer + chat stage */
.chat-layout .card,.chat-stage{border-radius:28px!important}
.welcome h1,.welcome h2{letter-spacing:-.05em;font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.starter,.rail-btn{border-radius:18px!important;border:1px solid var(--line)!important;background:var(--surface)!important;transition:transform .2s,box-shadow .2s,border-color .2s}
.starter:hover{transform:translateY(-3px);border-color:var(--brand)!important;box-shadow:0 20px 40px -22px rgba(109,93,246,.7)!important}
/* chips, avatars */
.avatar,.user-account-trigger .avatar{background:var(--grad)!important;color:#fff!important;box-shadow:0 6px 16px -6px rgba(109,93,246,.8)}
.badge,.pill{border-radius:999px}
@media(max-width:900px){.sidebar{margin:0;height:auto!important;border-radius:0}.topbar{margin:8px}}

/* ===== Theme v3b: KPI tiles, chat, atmosphere ===== */
.user-kpi,.admin-kpi{border-radius:22px!important;padding:20px 22px!important;border:1px solid var(--line)!important;background:var(--surface)!important;transition:transform .25s,box-shadow .25s}
.user-kpi:hover,.admin-kpi:hover{transform:translateY(-4px);box-shadow:0 30px 56px -28px rgba(109,93,246,.55)!important}
.user-kpi>span,.admin-kpi-top>span:first-child{font-size:11px!important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)!important}
.user-kpi>b,.admin-kpi-value{font-size:36px!important;font-weight:800!important;letter-spacing:-.055em!important;line-height:1.1;color:var(--ink)}
.user-kpi>i,.admin-kpi-icon{display:grid!important;place-items:center;width:40px!important;height:40px!important;border-radius:14px!important;color:#fff!important;box-shadow:0 10px 20px -8px rgba(0,0,0,.35)}
.user-kpi>i svg,.admin-kpi-icon svg{stroke:#fff!important;color:#fff!important}
.user-kpi.blue>i{background:linear-gradient(135deg,#4f8cff,#6d5df6)!important}
.user-kpi.green>i{background:linear-gradient(135deg,#10b981,#06b6d4)!important}
.user-kpi.cyan>i{background:linear-gradient(135deg,#06b6d4,#3b82f6)!important}
.user-kpi.amber>i,.user-kpi.orange>i{background:linear-gradient(135deg,#f59e0b,#f97316)!important}
.user-kpi.purple>i,.user-kpi.violet>i{background:linear-gradient(135deg,#8b5cf6,#d946ef)!important}
.user-kpi.red>i,.user-kpi.rose>i{background:linear-gradient(135deg,#f43f5e,#ec4899)!important}
.user-kpi.blue:first-child{background:linear-gradient(135deg,#5b6cff 0%,#9b5cf6 65%,#d14fd8 100%)!important;border:0!important;box-shadow:0 28px 54px -26px rgba(109,93,246,.95)!important}
.user-kpi.blue:first-child>span,.user-kpi.blue:first-child>b,.user-kpi.blue:first-child>small{color:#fff!important}
.user-kpi.blue:first-child>small{opacity:.8}
.user-kpi.blue:first-child>i{background:rgba(255,255,255,.24)!important;box-shadow:none}
/* chat */
.welcome h1,.welcome h2,.welcome .hello{font-size:40px!important}
.chat-layout>*:first-child{border-radius:30px!important;box-shadow:var(--shadow),0 0 0 1px var(--line)}
.rail-btn{margin-bottom:8px}
.rail-btn:hover{background:var(--brand-soft)!important;border-color:var(--brand)!important}
/* atmosphere: soft floating orbs */
body::after{content:"";position:fixed;inset:auto -10% -30% auto;width:620px;height:620px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(209,79,216,.14),transparent 65%);filter:blur(20px)}
.sidebar,.main{position:relative;z-index:1}
[data-theme="dark"] .user-kpi:not(.blue),[data-theme="dark"] .admin-kpi,[data-theme="dark"] .starter,[data-theme="dark"] .rail-btn{background:linear-gradient(180deg,rgba(32,30,68,.75),rgba(16,15,38,.9))!important}
[data-theme="dark"] .sidebar{background:rgba(14,13,36,.72)!important}

/* ===== Fixed app frame: sidebar stays put, only the main area scrolls ===== */
@media (min-width:901px){
  html,body{height:100%;overflow:hidden}
  .portal{height:100dvh;min-height:0;overflow:hidden}
  .sidebar{position:relative!important;top:auto!important;height:calc(100dvh - 28px)!important;overflow:hidden}
  .sidebar .side-nav,.sidebar nav,.sidebar .nav{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .main{height:100dvh;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-behavior:smooth}
  .topbar{position:sticky!important;top:14px;z-index:30}
  .content{padding-bottom:48px!important}
}
@media (min-width:901px){
  .topbar{background:color-mix(in srgb,var(--surface) 92%,transparent)!important;backdrop-filter:blur(24px) saturate(1.6)}
  .sidebar .nav{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:2px}
}

/* ===== Pinned topbar: only the content region scrolls beneath it ===== */
@media (min-width:901px){
  .main{overflow:hidden!important;display:flex;flex-direction:column;height:100dvh}
  .topbar{position:relative!important;top:auto!important;flex:0 0 auto;margin:14px 18px 10px!important;background:var(--surface)!important;z-index:30}
  .content:not(.is-chat){flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;max-width:none!important;margin:0!important;
    padding:18px max(32px,calc((100% - 1320px)/2)) 48px!important;overscroll-behavior:contain;scrollbar-gutter:stable;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px);mask-image:linear-gradient(to bottom,transparent 0,#000 14px)}
}

/* appended by retailiq improvements */
.officer-collapse-btn{width:36px;height:36px;display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:10px;cursor:pointer;transition:transform .2s,background .2s,color .2s;flex-shrink:0}
.officer-collapse-btn:hover{color:var(--ink);background:var(--surface-2)}
.officer-collapse-btn.is-collapsed{transform:rotate(-90deg)}
.officer-section.collapsed .officer-table-wrap{display:none}
.officer-section.collapsed #officerSelectedRoBody{display:none}
.officer-scroll{max-height:440px;overflow:auto}
.omc-corner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.omc-corner-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px}
.omc-corner-card h3{margin:0;font-size:14px;line-height:1.35}
.omc-corner-card h3 a{color:var(--ink);text-decoration:none}
.omc-corner-card h3 a:hover{text-decoration:underline;color:var(--brand-ink)}
.omc-corner-card p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.omc-corner-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bulk-user-result{margin-top:12px}
.bulk-fail-list{margin:8px 0 0;padding-left:18px;color:var(--red);font-size:12.5px}
.bulk-fail-list li{margin:2px 0}
.gr-invoice-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.gr-invoice-row .field{margin:0}
.dealer-conv-hint{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;font-weight:500}
.dealer-conv-scroll{max-height:460px;overflow:auto}
.convComputed{font-variant-numeric:tabular-nums}
.req-mark{color:var(--red)}

/* ultra-final protect: accent swatches keep --sw fill against mega button overrides */
button.accent-swatch:not(#rq-btn):not(#rq-btn), input[type="button"].accent-swatch:not(#rq-btn):not(#rq-btn){background:var(--sw,#4f6df5) !important;border-radius:50% !important;width:32px !important;height:32px !important;border:2px solid var(--line) !important;box-shadow:none !important;color:transparent !important}
button.accent-swatch:not(#rq-btn):not(#rq-btn):hover{background:var(--sw,#4f6df5) !important;border-radius:50% !important}
label.accent-swatch{background:var(--sw,#4f6df5) !important;border-radius:50% !important}

/* ---- fix round two (user feedback) ---- */
/* 1. The side navbar must never show a scrollbar (later design rules re-enabled it). */
.sidebar .side-nav,.sidebar nav,.sidebar .nav{scrollbar-width:none !important;-ms-overflow-style:none !important}
.sidebar .side-nav::-webkit-scrollbar,.sidebar nav::-webkit-scrollbar,.sidebar .nav::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important}
/* 2. Top bar buttons (theme square vs bell) must be the same compact size. */
.top-actions .icon-btn{width:40px;height:40px;min-height:0;border-radius:11px}
.top-notification-btn{width:40px;height:40px}
/* 3. Text-only action links must not render as boxed buttons. */
button.link-btn:not(#rq-btn):not(#rq-btn),button.notification-read-all:not(#rq-btn):not(#rq-btn){background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;min-height:0 !important;width:auto !important;height:auto !important;padding:4px 2px !important;color:var(--brand-ink,#3158d8) !important;font-weight:600 !important;text-align:left !important}
button.link-btn:not(#rq-btn):not(#rq-btn):hover,button.notification-read-all:not(#rq-btn):not(#rq-btn):hover{background:transparent !important;border-color:transparent !important;box-shadow:none !important;text-decoration:underline}
button.reference-forgot:not(#rq-btn):not(#rq-btn){background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;min-height:0 !important;height:auto !important;width:auto !important;padding:5px 0 !important;color:#08a8ff !important;font-size:16px !important;font-weight:500 !important}
button.reference-forgot:not(#rq-btn):not(#rq-btn):hover{background:transparent !important;border-color:transparent !important;box-shadow:none !important;text-decoration:underline;text-underline-offset:4px}
/* 4. Dealer order cart totals */
.dealer-order-totals-note{margin-top:8px;font-size:12.5px;color:var(--ink-2,#334155);font-weight:700}
.dealer-cart-totals td{border-top:2px solid var(--line);background:var(--surface-2,#f7f9fc);font-variant-numeric:tabular-nums}
.dealer-price-cell{white-space:nowrap}

/* ---- dealer order cart: compact fixed layout, no horizontal overflow ---- */
.dealer-order-builder .table-wrap{overflow-x:hidden}
.dealer-cart-table{width:100%;table-layout:fixed;border-collapse:collapse}
.dealer-cart-table th,.dealer-cart-table td{padding:10px 12px !important;font-size:13px;line-height:1.35}
.dealer-cart-table th{white-space:nowrap;text-align:left;font-size:12px;letter-spacing:.02em}
.dealer-cart-table .idx-col{width:40px !important;text-align:center;color:var(--muted,#6b7a8f)}
.dealer-cart-table .q-col{width:104px !important;text-align:center}
.dealer-cart-table .pl-col{width:132px !important;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.dealer-cart-table .price-col{width:104px !important;text-align:right;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.dealer-cart-table th.price-col{text-align:right;font-weight:700}
.dealer-cart-table .act-col{width:44px !important;text-align:center}
.dealer-cart-table .name-col{overflow:hidden}
.dealer-cart-table .name-col b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.dealer-cart-table .dealer-conv-hint{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-size:10.5px;font-weight:500;color:var(--muted,#6b7a8f)}
.dealer-cart-table .dealer-cart-qty,.dealer-cart-table .dealer-int-input{height:36px !important;min-width:0 !important;width:76px !important;margin:0 auto;display:block}
.dealer-cart-table .act-col .icon-btn{width:36px;height:36px}
.dealer-cart-table .dealer-cart-totals td{padding:12px !important;background:var(--surface-2,#f7f9fc)}
.dealer-cart-table .dealer-cart-totals .name-col b{font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted,#6b7a8f)}
.dealer-cart-table .dealer-cart-totals .pl-col b,.dealer-cart-table .dealer-cart-totals .price-col b{font-size:13.5px}
.dealer-order-totals-note{display:flex;gap:8px;align-items:center;margin-top:10px;padding:10px 14px;border:1px dashed var(--line,#dce5ef);border-radius:10px;background:var(--surface-2,#f7f9fc);font-size:12.5px;font-weight:700;color:var(--ink-2,#334155)}
.dealer-order-totals-note:empty{display:none}

/* top bar avatar button must match bell & theme toggle (40x40) */
.top-actions .account-avatar-button,.top-actions .avatar.account-avatar-button{width:40px !important;height:40px !important;border-radius:11px !important;border:1px solid var(--line) !important;padding:0 !important;font-size:14px;box-shadow:none !important;background:linear-gradient(135deg,var(--brand,#4f6df5),#6d5cf5) !important;display:grid;place-items:center}
@media(max-width:640px){.top-actions .account-avatar-button,.top-actions .avatar.account-avatar-button{width:38px;height:38px}}

/* logout glyph (door+arrow) is visually right-heavy: nudge it 1px left so it reads centered */
.side-logout .ic,.sidebar .side-logout .ic,.side-bottom #logout .ic{transform:translateX(-1px)}
.side-logout,.sidebar .side-logout,.side-bottom #logout{width:40px;height:40px;flex:0 0 40px;border-radius:11px}
/* the exited-door icon is optically right-heavy: align its line + arrow around true center */
.side-logout svg,.sidebar .side-logout svg{transform:translateX(-1.2px)}

/* ---- dealer tabs: distribute evenly, avoid dead space at the right (desktop) ---- */
@media(min-width:901px){
  .dealer-tabs{display:flex !important;align-items:center}
  .dealer-tabs .dealer-tab{flex:1 1 0 !important;justify-content:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* ---- dealer order cart: keep the table dense & centered; inset the row actions ---- */
.dealer-order-builder .dealer-cart-table{max-width:860px;margin-inline:auto}
.dealer-cart-table .act-col{width:64px !important;padding-right:10px !important;padding-left:2px !important}
.dealer-cart-table .act-col .icon-btn{display:block;margin-left:auto;margin-right:6px}
/* keep the totals chip aligned with the capped table */
.dealer-order-builder .dealer-order-totals-note{max-width:860px;margin-inline:auto}

/* ---- dealer cart: single frame, table spans card width (no corner gaps) ---- */
/* remove the double frame: .table-wrap border/shadow inside the order builder */
.dealer-order-builder .table-wrap{border:0;box-shadow:none;background:transparent;border-radius:12px;width:100%}
/* table itself spans the card width so its border aligns with the card padding */
.dealer-order-builder .dealer-cart-table,.dealer-order-builder .table-wrap{max-width:100% !important;margin-left:0 !important;margin-right:0 !important}
/* cap the whole order builder card on very wide screens so columns stay balanced */
.dealer-order-builder{max-width:1120px;margin-inline:auto}

/* ---- invoice-style order cart ---- */
.dealer-order-builder{max-width:1180px}
.dealer-cart-table .q-col{width:170px !important;text-align:center}
.dealer-cart-table .packs-col{width:120px !important;text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.dealer-cart-table .ltr-col{width:110px !important;text-align:center;font-variant-numeric:tabular-nums}
.dealer-cart-table th.packs-col,.dealer-cart-table th.ltr-col{text-align:center}
.dealer-cart-table .price-col{text-align:right !important;font-weight:700;font-variant-numeric:tabular-nums}
.dealer-cart-table th.price-col{text-align:right !important}
/* UoM chip attached to the qty input (Case / Pail / Barrel…) */
.dealer-uom-input{display:inline-flex;align-items:stretch;justify-content:center;max-width:100%}
.dealer-uom-input .dealer-cart-qty,.dealer-uom-input .dealer-int-input{width:70px !important;min-width:0 !important;height:38px !important;border-radius:10px 0 0 10px !important;display:inline-block}
.dealer-uom-input .uom-chip{display:inline-flex;align-items:center;padding:0 10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--line,#dce5ef);border-left:0;border-radius:0 10px 10px 0;background:var(--surface-2,#f7f9fc);color:var(--muted,#6b7a8f);white-space:nowrap}
/* tfoot totals row */
.dealer-cart-table tfoot .dealer-cart-totals td{border-top:2px solid var(--line);background:var(--surface-2,#f7f9fc)}
.dealer-cart-table tfoot .dealer-cart-totals .name-col b{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
/* invoice-style totals block */
.dealer-invoice-summary{width:360px;max-width:100%;margin:14px 12px 0 auto;padding:16px 20px 12px;border:1px solid var(--line,#dce5ef);border-radius:14px;background:var(--surface-2,#f7f9fc);display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm,0 2px 8px rgba(15,35,61,.08))}
.dealer-invoice-line{display:flex;align-items:center;gap:10px;justify-content:space-between}
.dealer-invoice-line span:first-child{font-size:12.5px;font-weight:800;color:var(--muted,#6b7a8f);text-transform:uppercase;letter-spacing:.03em}
.dealer-invoice-line .invoice-eq{color:var(--muted,#6b7a8f);opacity:.55;font-weight:700}
.dealer-invoice-line b{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dealer-invoice-line.grand{border-top:1px dashed var(--line,#dce5ef);padding-top:10px;margin-top:2px}
.dealer-invoice-line.grand span:first-child{color:var(--ink-2,#25324d)}
.dealer-invoice-line.grand b{font-size:19px}
.dealer-invoice-note{margin-top:2px;font-size:10.5px;color:var(--muted,#6b7a8f);text-align:right}

/* ---- product suggestions: clearly elevated panel (solid bg + strong shadow), above cart ---- */
.dealer-product-search{z-index:30}
.dealer-product-suggestions{z-index:120 !important;border:1px solid var(--line-2,#c9d4e6) !important;background:var(--surface,#fff) !important;box-shadow:0 22px 48px -12px rgba(2,8,20,.55),0 4px 16px rgba(2,8,20,.25) !important}
[data-theme="dark"] .dealer-product-suggestions{box-shadow:0 22px 48px -12px rgba(0,0,0,.8),0 4px 16px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06) !important}
.dealer-product-option{position:relative;z-index:2;background:var(--surface,#fff) !important}
[data-theme="dark"] .dealer-product-option{background:#100f26 !important}
.dealer-product-option:hover{background:var(--surface-2,#f2f6ff) !important}
[data-theme="dark"] .dealer-product-option:hover{background:#1c1b3a !important}

/* Amount column: center-aligned like the other numeric columns for consistency */
.dealer-cart-table th.price-col,.dealer-cart-table td.price-col{text-align:center !important;padding-right:0 !important}
.dealer-cart-table tfoot .dealer-cart-totals td.price-col{text-align:center !important}

/* book sale: cases column (derived packs/UoM) */
.dealer-cart-table .cases-col{width:130px !important;text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.dealer-cart-table th.cases-col{text-align:center}
/* sale qty: plain packs input, no chip */
table.dealer-cart-table .dealer-sale-qty,table.dealer-cart-table .dealer-sale-qty.dealer-int-input{width:82px !important;border-radius:10px !important;display:inline-block}

/* sale price input column (per pack) */
.dealer-cart-table .price-input-col{width:118px !important;text-align:center;white-space:nowrap}
.dealer-cart-table th.price-input-col{text-align:center !important;font-size:12px}
.dealer-sale-price{width:96px;height:38px;border:1px solid var(--line,#dce5ef);border-radius:10px;background:var(--surface,#fff);color:var(--ink,#10233d);padding:0 10px;font-variant-numeric:tabular-nums;text-align:center;font-weight:700;outline:none}
.dealer-sale-price:focus{border-color:var(--brand,#4f6df5);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#4f6df5) 18%,transparent)}
/* remove the old buy-price column rules that still bind .packs-col (unused now) */

/* ---- final cart column scoping: percentage-based so Product name never collapses ---- */
.dealer-cart-table .idx-col{width:4% !important;text-align:center;color:var(--muted,#6b7a8f)}
.dealer-cart-table .name-col{width:27% !important}
.dealer-cart-table .q-col{width:14% !important}
.dealer-cart-table .cases-col{width:13% !important}
.dealer-cart-table .ltr-col{width:12% !important}
.dealer-cart-table .price-input-col{width:14% !important}
.dealer-cart-table .price-col{width:11% !important}
.dealer-cart-table .act-col{width:5% !important}
/* tidy the inputs inside the cells */
.dealer-cart-table .dealer-sale-qty,.dealer-cart-table .dealer-cart-qty,.dealer-cart-table .dealer-int-input{width:100% !important;max-width:96px !important;height:38px !important;border-radius:10px !important;box-sizing:border-box}
.dealer-cart-table .dealer-sale-price{width:100% !important;max-width:110px !important;height:38px !important;box-sizing:border-box;margin:0 auto;display:block}
.dealer-cart-table .name-col b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;line-height:1.3}
.dealer-cart-table .dealer-conv-hint{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){.dealer-cart-table .name-col{width:24% !important}.dealer-cart-table .price-input-col{width:16% !important}}

/* ---- sale fallback inputs + un-glued table headers ---- */
/* headers: allow wrapping to two lines; keep name left, numerics centered */
.dealer-cart-table th{white-space:normal !important;line-height:1.25;text-align:center;padding:10px 10px !important;vertical-align:middle}
.dealer-cart-table th.name-col{text-align:left}
.dealer-cart-table th.price-col{text-align:center}
/* manual cases/ltr inputs for materials without a conversion master */
.dealer-cart-table .dealer-dec-input{width:100%;max-width:92px;height:38px;border:1px solid var(--line,#dce5ef);border-radius:10px;background:var(--surface,#fff);color:var(--ink,#10233d);padding:0 8px;font-variant-numeric:tabular-nums;text-align:center;font-weight:700;outline:none}
.dealer-cart-table .dealer-dec-input:focus{border-color:var(--brand,#4f6df5);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#4f6df5) 18%,transparent)}
.dealer-cart-table .dealer-dec-input::placeholder{color:var(--muted,#6b7a8f);opacity:.7;font-weight:500}

/* My Stock header: let long column titles wrap instead of clipping */
#dealerStockBody .dealer-report-table th{white-space:normal !important;line-height:1.3;text-align:center !important;vertical-align:middle !important}
#dealerStockBody .dealer-report-table td{text-align:center}
#dealerStockBody .dealer-report-table td:first-child{text-align:center}
#dealerStockBody .dealer-conv-hint{display:block;margin-top:3px}

/* ---- dealer reports/history polish round ---- */
/* 1. single frame: strip wrapper border, frame belongs to the card or the table itself */
#dealerHistoryBody .table-wrap{border:0 !important;box-shadow:none !important;background:transparent !important;overflow-x:auto}
#dealerHistoryBody table{border:1px solid var(--line,#dce5ef) !important;border-radius:14px !important;overflow:hidden}
#dealerAdminOrders .table-wrap{border:0 !important;box-shadow:none !important;background:transparent !important}
#dealerAdminOrders table{border:1px solid var(--line,#dce5ef) !important;border-radius:14px !important;overflow:hidden}
.dealer-report-section .table-wrap{border:0 !important;box-shadow:none !important;background:transparent !important;border-radius:14px}
.dealer-report-section .dealer-report-table{border:1px solid var(--line,#dce5ef) !important;border-radius:14px !important;overflow:hidden}
/* 2. status badges: pill that never turns into a big circle/egg, no 3-line wrap */
#dealerPanel .dealer-report-table .badge,#dealerHistoryBody .badge{white-space:nowrap !important;border-radius:11px !important;line-height:1.2 !important;padding:5px 12px !important;max-width:160px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}
/* 4. From/To/Apply aligned on one comfortable row */
.dealer-report-filters{align-items:center !important;gap:10px !important}
.dealer-report-filters label{margin:0 !important;line-height:1;height:42px;display:flex;align-items:center;gap:8px}
.dealer-report-filters .dealer-date-input{height:42px;margin:0 !important}
.dealer-report-filters .btn{min-height:42px;padding:0 18px !important;margin:0 !important}
.dealer-report-filters .btn.btn-primary span,.dealer-report-filters .btn.btn-primary{align-items:center}
/* 5. modals: single frame + roomy, tidy tables */
.modal .table-wrap{border:0 !important;box-shadow:none !important;background:transparent !important;border-radius:12px}
.modal .dealer-entry-table,.modal table{border-radius:10px}
.modal .modal-actions{gap:10px;align-items:center}
.modal .modal-actions .btn,.modal .modal-actions .btn.btn-primary,.modal .modal-actions .btn.btn-danger{min-height:42px;border-radius:11px !important;white-space:nowrap}
.modal .field{margin:12px 0}
/* stock-correction review modal: proper summary chips (styles were missing) */
.dealer-correction-summary{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 12px}
.dealer-correction-summary>div{flex:1 1 110px;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--surface-2,#f7f9fc);border:1px solid var(--line,#dce5ef);border-radius:12px;padding:12px 10px}
.dealer-correction-summary span{font-size:11px;font-weight:700;color:var(--muted,#6b7a8f);text-transform:uppercase;letter-spacing:.04em}
.dealer-correction-summary b{font-size:17px;color:var(--ink,#10233d);font-variant-numeric:tabular-nums}
.dealer-soft-note{font-size:11.5px;color:var(--muted,#6b7a8f)}
@media(max-width:700px){.dealer-report-filters{flex-wrap:wrap !important}.dealer-report-filters label{height:auto}}

/* ---------- stock correction builder: labeled 44px grid (ui-ux-pro-max pass) ---------- */
.dealer-correction-builder{display:flex;flex-direction:column;gap:14px;margin-top:14px;padding:18px;border:1px solid var(--line,#dce5ef);border-radius:14px;background:var(--surface-2,#f7f9fc)}
.correction-product-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.correction-product-head b{font-size:15px}
.correction-system-stock{display:inline-flex;align-items:baseline;gap:8px;padding:8px 14px;border:1px solid var(--line,#dce5ef);border-radius:10px;background:var(--surface,#fff)}
.correction-system-stock span{font-size:11px;font-weight:800;color:var(--muted,#6b7a8f);text-transform:uppercase;letter-spacing:.04em}
.correction-system-stock b{font-size:16px;font-variant-numeric:tabular-nums;color:var(--ink,#10233d)}
.correction-system-stock small{font-size:11px;color:var(--muted,#6b7a8f)}
.correction-fields{display:grid;grid-template-columns:170px 1fr auto;gap:12px;align-items:end}
@media(max-width:760px){.correction-fields{grid-template-columns:1fr}.correction-submit{width:100%;justify-content:center}}
.correction-field{display:flex;flex-direction:column;gap:6px}
.correction-field>span{font-size:12px;font-weight:700;color:var(--ink-2,#334155)}
.correction-field>span .dealer-conv-hint{font-weight:600;text-transform:lowercase;letter-spacing:0}
.correction-field input{height:44px;border:1px solid var(--line,#dce5ef);border-radius:10px;background:var(--surface,#fff);color:var(--ink,#10233d);padding:0 12px;font-size:13.5px;outline:none;width:100%;box-sizing:border-box;font-variant-numeric:tabular-nums}
.correction-field input:focus{border-color:var(--brand,#4f6df5);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#4f6df5) 16%, transparent)}
.correction-qty-field input{text-align:center;font-weight:700}
.correction-submit{height:44px;border-radius:11px;white-space:nowrap}
.correction-note{font-size:11.5px;color:var(--muted,#6b7a8f);border-top:1px dashed var(--line,#dce5ef);padding-top:10px}

/* ---- FINAL dealer-frame pass (report section fix, actually applied) ---- */
/* 1. one frame only: the section card is the frame; inner tables are open */
#dealerPanel .dealer-report-section .dealer-report-table,#dealerPanel .dealer-report-section .table-wrap{border:0 !important;border-radius:0 !important;overflow:visible !important;box-shadow:none !important;background:transparent !important}
#dealerHistoryBody table,#dealerHistoryBody .table-wrap{border:0 !important;border-radius:0 !important;box-shadow:none !important;background:transparent !important}
#dealerAdminOrders table,#dealerAdminOrders .table-wrap{border:0 !important;border-radius:0 !important;box-shadow:none !important;background:transparent !important}
/* 2. headers: wrap to multiple lines, never truncated */
#dealerPanel .dealer-report-section .dealer-report-table th,#dealerPanel .dealer-report-section .dealer-report-table td,#dealerHistoryBody table th,#dealerHistoryBody table td{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;height:auto !important}
/* 3. badges: neat pill, no width-cap truncation */
#dealerPanel .dealer-report-table .badge,#dealerHistoryBody .badge{max-width:none !important;white-space:nowrap !important;border-radius:11px !important;padding:5px 12px !important;margin:auto}
/* 4. From/To/Apply: one compact aligned row */
#dealerPanel .dealer-reports-head .dealer-report-filters{width:auto !important;flex-wrap:nowrap !important;white-space:nowrap;display:inline-flex;align-items:center;gap:10px;margin-left:auto;margin-top:8px}
#dealerPanel .dealer-report-filters label{height:40px;line-height:40px;margin:0 !important;font-size:12px}
#dealerPanel .dealer-report-filters .dealer-date-input{width:128px !important;height:40px !important;margin:0 !important;font-size:12px}
#dealerPanel .dealer-report-filters .btn.btn-primary{min-height:40px !important;padding:0 16px !important;font-size:12px !important;margin:0 !important}
@media(max-width:760px){#dealerPanel .dealer-reports-head .dealer-report-filters{flex-wrap:wrap !important;width:100% !important}.dealer-report-filters label{height:auto;line-height:normal}}
/* 5. modal tables stay open inside the modal card */
.modal .table-wrap{border:0 !important;box-shadow:none !important;background:transparent !important}

/* ============================================================
   RESPONSIVE + POLISH PASS (production grade)
   Modes: Operate. Tested at 375 / 744 / 1024 / 1440 via iframe audit.
   ============================================================ */
/* 1. Mobile rail: SAFE centering — fixes the flex overflow bug where leading
      nav items were unreachable (clipped at the left edge, no scroll to them). */
@media(max-width:1280px){.nav{justify-content:safe center !important;scroll-snap-type:x proximity}}
@media(max-width:1280px){.nav .nav-item{scroll-snap-align:center}}
/* 2. Touch targets: every control ≥44px on touch form factors */
@media(max-width:1023px){
  .auth .icon-btn,.auth-reference .reveal{width:44px !important;height:44px !important}
  .top-notification-btn{min-width:44px}
  .dealer-remove,.saleRemove,.dealer-row-actions .btn{min-height:44px}
  .officer-toggle button,.officer-segment button{min-height:44px !important}
  .dealer-tabs .dealer-tab{min-height:44px !important}
}
/* 3. Dealer tabs strip: snap + edge fade affordance on small screens */
@media(max-width:1023px){
  .dealer-tabs{scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%)}
  .dealer-tabs .dealer-tab{scroll-snap-align:start}
}
/* 4. Content must never hide behind the fixed bottom rail on mobile */
@media(max-width:900px){
  .portal{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .side-bottom{padding-bottom:env(safe-area-inset-bottom,0px)}
}
/* 5. iOS niceties + text sizing */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
/* 6. Keyboard focus visible for form controls (buttons already covered) */
:where(input,select,textarea):focus-visible{outline:2px solid color-mix(in srgb,var(--brand,#4f6df5) 55%,transparent);outline-offset:1px}
/* 7. Respect reduced-motion */
@media(prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
/* 8. Very small phones (<360px): keep cards tight, no horizontal squeeze breaks */
@media(max-width:360px){
  .dealer-order-builder,.dealer-table-card,.dealer-admin-card{padding:10px}
  .topbar{gap:6px}
  .dealer-report-filters .dealer-date-input{width:110px !important}
}
/* 9. iPad mini portrait (744): filter row wraps to 2 tidy lines, stays inside the card */
@media(max-width:780px){
  #dealerPanel .dealer-reports-head .dealer-report-filters{flex-wrap:wrap !important;width:100% !important;margin-left:0 !important}
  #dealerPanel .dealer-report-filters label{flex:0 0 auto}
  .correction-fields{grid-template-columns:1fr !important}
  .correction-fields .correction-submit{width:100%;justify-content:center}
}
/* 10. iPad Pro portrait (1024): rail must scroll to leading items from either side */
@media(min-width:901px) and (max-width:1024px){
  .nav{justify-content:safe center !important}
  .portal{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
}

/* ============================================================
   REPORT / MODAL / TABS REPAIR PASS (prod feedback)
   ============================================================ */
/* A. report tables: bound each table inside its own section again (no spill),
      horizontal scroll only when needed, single frame stays */
#dealerPanel .dealer-report-section .table-wrap{overflow:auto !important;max-height:420px !important;border:0 !important;background:transparent !important;border-radius:10px}
#dealerPanel .dealer-report-section .dealer-report-table{border:0 !important}
#dealerPanel .dealer-report-section .dealer-report-table th{position:static !important;background:var(--surface-2,#f4f7fb);z-index:auto}
/* keep numeric + badge cells tidy so nothing collides */
#dealerPanel .dealer-report-section .dealer-report-table th,#dealerPanel .dealer-report-section .dealer-report-table td{padding:10px 12px !important}
#dealerPanel .dealer-report-section .dealer-report-table .badge{white-space:nowrap !important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:4px 10px !important;border-radius:9px !important;font-size:11px}
/* B. orders report: status + PDF columns sized so they never overlap */
.dealer-report-table .status-col{width:150px !important;min-width:150px !important;text-align:center !important}
.dealer-report-table .action-col{width:96px !important;min-width:96px !important;text-align:center !important;white-space:nowrap}
.dealer-report-table .action-col .btn{padding:7px 12px !important;min-height:36px !important}
/* C. report header: title on its own row, filters on the second row */
#dealerPanel .dealer-reports-head{display:block !important}
#dealerPanel .dealer-reports-head>div:first-child{display:block;margin-bottom:10px}
#dealerPanel .dealer-reports-head .dealer-report-filters{display:flex !important;flex-wrap:wrap !important;gap:10px !important;width:100% !important;margin:0 !important;white-space:normal !important;align-items:center !important}
#dealerPanel .dealer-reports-head .dealer-report-filters label{height:40px !important;line-height:40px !important;margin:0 !important;flex:0 0 auto}
#dealerPanel .dealer-reports-head .dealer-report-filters .dealer-date-input{width:132px !important;height:40px !important;margin:0 !important}
#dealerPanel .dealer-reports-head .dealer-report-filters .dealer-inline-report-input{height:40px !important;min-width:180px}
#dealerPanel .dealer-reports-head .dealer-report-filters .btn{min-height:40px !important;padding:0 16px !important;margin:0 !important}
/* D. dealer tabs: wrap labels instead of truncating */
@media(min-width:901px){.dealer-tabs .dealer-tab{flex:1 1 0 !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;text-align:center;line-height:1.25;height:auto;min-height:44px;padding:8px 10px}}
.dealer-tab{white-space:normal !important;text-overflow:clip !important}
/* E. modals: never taller than the viewport; footer stays visible; inner tables tidy */
.modal{max-height:calc(100dvh - 48px) !important;overflow:auto !important;display:flex;flex-direction:column}
.modal>.modal-actions{position:sticky;bottom:0;background:var(--surface,#fff);padding-top:12px;margin-top:auto;z-index:2}
.modal .table-wrap{overflow:auto !important;max-height:46vh;border:0 !important;box-shadow:none !important;background:transparent !important}
.modal table{width:100%;border-collapse:collapse}
.modal table th{position:static !important;background:var(--surface-2,#f4f7fb);font-size:11.5px;font-weight:700;color:var(--muted,#6b7a8f);text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;white-space:normal}
.modal table td{padding:10px 12px;vertical-align:middle;border-top:1px solid var(--line,#dce5ef)}
.modal table td b{font-weight:650}
/* F. admin order modal: keep action buttons from crowding */
.modal .modal-actions{gap:10px !important;flex-wrap:wrap !important;justify-content:flex-end}
.modal .modal-actions .btn{white-space:nowrap}

/* bulk user modal toolbar (template + upload) */
.bulk-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:4px 0 6px}
.bulk-toolbar .bulk-upload-label{cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin:0}
.bulk-file-hint{font-size:11.5px;color:var(--muted,#6b7a8f)}
.bulk-file-hint.ok{color:var(--green,#16835b);font-weight:700}
.bulk-users-modal .modal-actions{flex-wrap:wrap}
/* dealer order status pill + PDF: never collide */
.dealer-report-table .status-col .badge{max-width:140px}
.dealer-report-table .action-col a.btn{display:inline-flex;align-items:center;justify-content:center}

/* ============================================================
   NOTIFICATION PANEL + TAB EQUAL-HEIGHT POLISH
   ============================================================ */
/* A. notification dropdown: proper floating card, flat rows (no nested boxes) */
.notification-panel{top:74px !important;right:18px !important;width:392px !important;max-width:calc(100vw - 24px) !important;border-radius:18px !important;border:1px solid var(--line-2,#c9d4e6) !important;background:var(--surface,#fff) !important;box-shadow:0 28px 64px -16px rgba(2,8,20,.55),0 6px 20px rgba(2,8,20,.18) !important;overflow:hidden}
.notification-panel-head{padding:14px 16px !important;background:var(--surface-2,#f4f7fb) !important;border-bottom:1px solid var(--line,#dce5ef) !important;align-items:center !important}
.notification-panel-head b{font-size:14px !important;letter-spacing:.01em}
.notification-panel-head small{font-size:11px !important;color:var(--muted,#6b7a8f) !important;margin-top:2px !important}
.notification-head-actions{display:flex;align-items:center;gap:6px}
.notification-panel .icon-btn{width:30px !important;height:30px !important;min-height:30px !important;border-radius:9px !important;background:var(--surface,#fff) !important}
.notification-list{padding:6px !important;max-height:min(360px,calc(100dvh - 190px)) !important;overflow-y:auto !important}
button.notification-item:not(#rq-btn):not(#rq-btn){width:100% !important;display:flex !important;gap:10px !important;text-align:left !important;padding:12px !important;border:0 !important;border-radius:12px !important;background:transparent !important;box-shadow:none !important;min-height:0 !important;margin-bottom:2px;color:var(--ink,#10233d) !important;cursor:pointer}
button.notification-item:not(#rq-btn):not(#rq-btn):hover{background:var(--surface-2,#f4f7fb) !important}
button.notification-item.unread:not(#rq-btn):not(#rq-btn){background:var(--brand-soft,#eef2ff) !important}
button.notification-item.unread:not(#rq-btn):not(#rq-btn):hover{background:var(--brand-soft-2,#e3e9ff) !important}
.notification-item>span:nth-child(2){display:flex !important;flex-direction:column !important;min-width:0;gap:2px}
.notification-item b{font-size:12.5px !important;line-height:1.3}
.notification-item small{color:var(--muted,#6b7a8f) !important;font-size:11.5px !important;line-height:1.35 !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden !important}
.notification-item em{font-style:normal !important;color:var(--faint,#93a1b5) !important;font-size:10.5px !important;margin-top:4px !important}
.notification-dot{width:7px !important;height:7px !important;margin-top:7px !important;background:var(--brand,#4f6df5) !important}
.notification-empty{padding:30px 16px !important;text-align:center !important;color:var(--muted,#6b7a8f) !important;font-size:12.5px}
.notification-panel-foot{padding:10px 16px !important;border-top:1px solid var(--line,#dce5ef) !important;font-size:11.5px !important;color:var(--muted,#6b7a8f) !important;text-align:center;background:var(--surface-2,#f4f7fb)}
@media(max-width:520px){.notification-panel{top:66px !important;right:8px !important;left:8px !important;width:auto !important}}
/* B. dealer tabs: equal height across wrapped labels */
.dealer-tabs{align-items:stretch !important}
.dealer-tabs .dealer-tab{height:auto !important;align-self:stretch;display:inline-flex !important;align-items:center !important;justify-content:center !important}

/* ============================================================
   MODAL INPUTS / ATTENTION / OFFICER CONTROLS POLISH
   ============================================================ */
/* 1. bare inputs inside modals (billed qty, GR qty, order edit) */
.modal input.billQty,.modal input.grQty,.modal input.dealerEditQty,.modal input.dealer-int-input{height:38px !important;width:96px !important;min-width:0 !important;border:1px solid var(--line-2,#c9d4e6) !important;border-radius:10px !important;background:var(--surface,#fff) !important;color:var(--ink,#10233d) !important;text-align:center !important;font-weight:700;font-variant-numeric:tabular-nums;padding:0 8px;outline:none;box-shadow:none !important}
.modal input.billQty:focus,.modal input.grQty:focus,.modal input.dealerEditQty:focus,.modal input.dealer-int-input:focus{border-color:var(--brand,#4f6df5) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#4f6df5) 18%,transparent) !important}
/* 2. Attention Required rows: single clean card, count badge inside */
#attentionPanel .admin-attention{display:flex !important;align-items:center !important;gap:12px !important;width:100% !important;padding:12px 14px !important;border:1px solid var(--line,#dce5ef) !important;border-radius:12px !important;background:var(--surface-2,#f4f7fb) !important;box-shadow:none !important;min-height:0 !important;text-align:left !important;color:var(--ink,#10233d) !important;margin:0 0 8px}
#attentionPanel .admin-attention:hover{border-color:var(--brand,#4f6df5) !important;background:var(--brand-soft,#eef2ff) !important}
#attentionPanel .admin-attention .attention-icon{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:rgba(245,158,11,.16);color:#d97706}
#attentionPanel .admin-attention>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
#attentionPanel .admin-attention strong{font-size:12.5px;line-height:1.3}
#attentionPanel .admin-attention small{font-size:11px;color:var(--muted,#6b7a8f)}
#attentionPanel .admin-attention>b{margin-left:auto;flex:none;font-size:12px;min-width:30px;text-align:center;background:var(--surface,#fff);border:1px solid var(--line,#dce5ef);border-radius:999px;padding:3px 9px}
/* 3. officer/territory control groups: spacing + no glued buttons */
.officer-dashboard .officer-controls{display:flex !important;flex-wrap:wrap !important;gap:10px !important;align-items:center !important}
.officer-dashboard .officer-segment,.officer-dashboard .officer-toggle{display:inline-flex !important;align-items:center !important;gap:4px !important;padding:4px !important;border:1px solid var(--line,#dce5ef) !important;border-radius:12px !important;background:var(--surface-2,#f4f7fb) !important;height:auto !important}
.officer-dashboard .officer-segment button,.officer-dashboard .officer-toggle button{height:34px !important;min-height:34px !important;padding:0 12px !important;border-radius:9px !important;font-size:11.5px !important;box-shadow:none !important}
/* 4. Top 10 Gainers/Losers: single frame (section is the card), no inner panel border */
.officer-dashboard .officer-two-col .officer-panel{border:0 !important;border-radius:0 !important;overflow:visible !important;background:transparent !important}
.officer-dashboard .officer-two-col .officer-panel-title{padding:0 0 10px !important;background:transparent !important;font-size:13px !important}

/* ============================================================
   FINAL UI FIXES (idx width, modal headers, RO search, chevrons, groups)
   ============================================================ */
/* 1. serial-number column: fixed narrow width only where the header is # */
#dealerPanel .dealer-report-table:has(th.idx-col) th.idx-col,#dealerPanel .dealer-report-table:has(th.idx-col) td:first-child{width:46px !important;min-width:46px !important;max-width:56px !important;text-align:center !important;padding-left:6px !important;padding-right:6px !important}
/* 2. modal tables: flat header row (no pill/rounded band, aligned columns) */
.modal table{border-radius:0 !important}
.modal thead th,.modal table thead th{background:var(--surface-2,#f4f7fb) !important;border-bottom:1px solid var(--line,#dce5ef) !important;border-radius:0 !important;text-align:left !important;padding:10px 14px !important;vertical-align:middle !important}
.modal table thead th:not(:first-child){text-align:left !important}
.modal table td{padding:10px 14px !important}
.modal table td:has(input),.modal table th:has(+ * input){text-align:center !important}
/* 3. Find My RO search icon centered in its 44px field */
.officer-search>span{position:absolute !important;left:0 !important;top:0 !important;bottom:0 !important;width:46px !important;height:auto !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:18px !important;line-height:1 !important}
.officer-search input{padding-left:46px !important}
/* 4. collapse chevron: up when open, down when closed; vertically centered */
.officer-head .officer-collapse-btn{align-self:center !important;margin-top:0 !important;flex:none}
.officer-collapse-btn .ic{transform:rotate(-90deg) !important;transition:transform .2s ease}
.officer-collapse-btn.is-collapsed{transform:none !important}
.officer-collapse-btn.is-collapsed .ic{transform:rotate(90deg) !important}
/* 5. segmented control groups: buttons only, no outer border/box */
.officer-dashboard .officer-segment,.officer-dashboard .officer-toggle{border:0 !important;background:transparent !important;padding:0 !important;gap:8px !important}
/* 6. Trading Area table: never taller than the viewport, page scroll stays usable */
.officer-table-wrap.officer-scroll{max-height:min(58vh,440px) !important;overflow:auto !important}

/* segmented groups: defeat the ID-level border/background override */
#officerProduct,#officerGPeriod,#officerDPeriod,#officerTaPeriod,#officerSelectedRoMode{border:0 !important;background:transparent !important;padding:0 !important;gap:8px !important;box-shadow:none !important;display:inline-flex !important;align-items:center !important}
/* modal table headers: first column left, numeric columns centered like their values */
.modal table thead th:not(:first-child){text-align:center !important}
.modal table tbody td:not(:first-child){text-align:center}
.modal table tbody td:first-child{text-align:left}

/* collapse chevron + period buttons: one aligned control cluster */
#officerTaSection .officer-head,#officerSelectedRoPanel .officer-head{align-items:center !important;flex-wrap:wrap !important;gap:10px !important}
#officerTaSection .officer-head .officer-collapse-btn,#officerSelectedRoPanel .officer-head .officer-collapse-btn{margin-left:auto !important;margin-right:0 !important;align-self:center !important;width:34px !important;height:34px !important;min-height:34px !important}
#officerTaSection .officer-head .officer-toggle,#officerSelectedRoPanel .officer-head .officer-toggle{margin-left:8px !important;align-self:center !important;display:inline-flex !important;align-items:center !important}
#officerTaSection .officer-toggle button,#officerSelectedRoPanel .officer-toggle button{height:34px !important;min-height:34px !important}

/* officer head control cluster: chevron + period buttons in one aligned row */
.officer-head .officer-head-controls{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:nowrap}
.officer-head .officer-head-controls .officer-collapse-btn{margin:0 !important;align-self:center !important;width:34px !important;height:34px !important;min-height:34px !important;flex:none}
.officer-head .officer-head-controls .officer-toggle{margin:0 !important;display:inline-flex;align-items:center;gap:8px}
.officer-head .officer-head-controls .officer-toggle button{height:34px !important;min-height:34px !important}
@media(max-width:900px){.officer-head .officer-head-controls{margin-left:0;width:100%;justify-content:flex-start}}

/* ============================================================
   Dealer dashboard: frozen identity columns + compact numerics
   ============================================================ */
/* Trading Area Performance — #, OMC and RO Name stay pinned while the
   numeric MS/HSD columns scroll horizontally. Explicit column widths stop
   COM / MS YTD from absorbing all the free space. */
.dealer-ta-peer-table{width:1312px;table-layout:fixed;min-width:1312px}
.dealer-ta-peer-table th:nth-child(1),.dealer-ta-peer-table td:nth-child(1){position:sticky;left:0;z-index:2}
.dealer-ta-peer-table th:nth-child(2),.dealer-ta-peer-table td:nth-child(2){position:sticky;left:46px;z-index:2}
.dealer-ta-peer-table th:nth-child(3),.dealer-ta-peer-table td:nth-child(3){position:sticky;left:120px;z-index:2;box-shadow:2px 0 0 var(--border)}
.dealer-ta-peer-table thead th:nth-child(-n+3){z-index:6}
.dealer-ta-peer-table tbody td:nth-child(-n+3){background:var(--surface)}
.dealer-ta-peer-table tr.dealer-peer-selected td:nth-child(-n+3){background-color:var(--surface);background-image:linear-gradient(var(--brand-soft),var(--brand-soft))}
.dealer-ta-peer-table tr.dealer-ta-summary-row td:nth-child(-n+3){background:var(--surface-2)}
.dealer-ta-peer-table tr.dealer-ta-total-row td:nth-child(-n+3){background:var(--surface)}

/* OMC Comparison — OMC and ROs stay pinned while the share columns scroll. */
.dealer-omc-table{width:1040px;table-layout:fixed;min-width:1040px;border-collapse:separate;border-spacing:0}
.dealer-omc-table th:nth-child(1),.dealer-omc-table td:nth-child(1){position:sticky;left:0;z-index:2}
.dealer-omc-table th:nth-child(2),.dealer-omc-table td:nth-child(2){position:sticky;left:96px;z-index:2;box-shadow:2px 0 0 var(--border)}
.dealer-omc-table thead th:nth-child(-n+2){z-index:6}
.dealer-omc-table tbody td:nth-child(-n+2){background:var(--surface)}

/* Rank badges keep their pill look and wrap on small screens. */
.dealer-ta-badges span{white-space:nowrap}

/* Small screens: keep only # + OMC pinned so the numeric columns stay reachable. */
@media(max-width:680px){
  .dealer-ta-peer-table th:nth-child(3),.dealer-ta-peer-table td:nth-child(3){position:static;box-shadow:none}
  .dealer-ta-peer-table th:nth-child(2),.dealer-ta-peer-table td:nth-child(2){box-shadow:2px 0 0 var(--border)}
}

/* OMC comparison headers are long; let them wrap instead of overflowing. */
.dealer-omc-table thead th,
.dealer-omc-table thead th.sortable{white-space:normal;line-height:1.2;vertical-align:bottom}

/* Frozen headers must stay opaque even on hover (the sortable-header hover
   uses a translucent brand tint, which would let scrolled cells show through). */
.dealer-ta-peer-table thead th:nth-child(-n+3):hover,
.dealer-omc-table thead th:nth-child(-n+2):hover{
  background:linear-gradient(var(--brand-soft),var(--brand-soft)),var(--surface-2) !important;
}

/* KPI values must never wrap the unit onto a second line (it broke the
   vertical alignment of the six overview cards). */
.dealer-html-kpi{min-width:0}
.dealer-kpi-value{white-space:nowrap}
.dealer-overview-kpis-6 .dealer-kpi-value{font-size:clamp(18px,1.7vw,27px)}
/* The trading-area total label may wrap instead of being clipped. */
.dealer-ta-total-row .dealer-ta-name{white-space:normal;line-height:1.25}

/* Dealer quantity inputs: match the rest of the app instead of the browser default. */
.dealer-int-input,.openingPacks{
  border:1px solid var(--line-2,var(--line)) !important;
  border-radius:10px !important;
  background:var(--surface-2) !important;
  color:var(--ink) !important;
  padding:0 10px !important;
  outline:none !important;
  font:inherit;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.dealer-int-input:focus,.openingPacks:focus{
  border-color:var(--brand) !important;
  background:var(--surface) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent) !important;
}

/* ============================================================
   Responsive app shell + data tables (phones, iPad, landscape)
   ============================================================ */

/* The app shell must own the viewport on every device: the top bar and
   bottom navigation stay put, only the page content scrolls. Previously the
   fixed shell only applied at >=901px, so phones/landscape scrolled the whole
   document and the navigation drifted with it. */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1024px) {
  .portal {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
  .main {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
  }
  .topbar { flex: 0 0 auto; }
  .content:not(.is-chat) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--bottom-nav-h, 72px) + 18px) !important;
  }
  .content.is-chat { min-height: 0; }
}

/* Phone landscape: the bottom navigation takes a lot of a 375px-tall screen,
   so compact it instead of leaving the content a sliver. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  :root { --bottom-nav-h: calc(52px + env(safe-area-inset-bottom)); }
  .sidebar { padding: 3px 8px calc(3px + env(safe-area-inset-bottom)) !important; }
  .nav-item {
    width: 46px !important;
    min-width: 46px !important;
    flex: 0 0 46px !important;
    padding: 7px 6px !important;
  }
  .side-bottom #logout {
    width: 46px !important;
    min-width: 46px !important;
    flex: 0 0 46px !important;
    padding: 7px 6px !important;
  }
}

/* Wide data tables scroll inside their card instead of being squeezed until
   the columns overlap. The identity column stays frozen while scrolling. */
.officer-table-wrap {
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.officer-table {
  width: 100% !important;
  min-width: 860px !important;
  table-layout: auto !important;
}
.officer-ta-table { min-width: 1200px !important; }
#officerSelectedRoTable,
#officerOmcTable,
#officerGainers,
#officerLosers,
#officerDeclining { min-width: 860px !important; }
.officer-table th,
.officer-table td {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.officer-table th:first-child,
.officer-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface) !important;
  box-shadow: 2px 0 0 var(--line);
}
.officer-table thead th:first-child {
  z-index: 5;
  background: var(--surface-2) !important;
}
/* The Trading Area table has a two-row header: the second row starts at the
   BPC column, so it must not be pinned over the row-spanned first cell. */
.officer-ta-table thead tr:nth-child(2) th:first-child {
  position: static !important;
  left: auto !important;
  box-shadow: none !important;
  z-index: auto !important;
}
.officer-table tr.officer-selected-peer td:first-child { background: var(--brand-soft) !important; }
.officer-table tr.officer-total td:first-child { background: var(--surface-2) !important; }

/* Small phones: keep the table readable and let it scroll, never overlap. */
@media (max-width: 560px) {
  .officer-table { min-width: 780px !important; }
  .officer-ta-table { min-width: 1100px !important; }
  .officer-table th,
  .officer-table td { font-size: 10.5px; padding-left: 6px !important; padding-right: 6px !important; }
}

/* ID-level overrides beat the older percentage-column rules that squashed the
   Trading Area table into the card. Keep it scrollable and readable. */
#officerTaTable { min-width: 1200px !important; table-layout: auto !important; width: 100% !important; }
#officerTaTable th,
#officerTaTable td {
  width: auto !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
#officerTaTable th:first-child,
#officerTaTable td:first-child { text-align: left !important; }
@media (max-width: 560px) {
  #officerTaTable { min-width: 1100px !important; }
}


/* Mobile bottom bar: the desktop "card sidebar" rules were leaking into the
   phone layout (18px padding, 99px tall), so the bar was taller than the
   --bottom-nav-h reservation and covered the chat composer. */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1024px) {
  :root { --bottom-nav-h: calc(72px + env(safe-area-inset-bottom)); }
  .sidebar {
    margin: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
  }
  .nav-item { padding: 9px 8px !important; }
  .side-bottom #logout { padding: 9px 8px !important; }

  /* Chat: let the thread fill the space above the bottom bar, so the composer
     is never hidden behind it. */
  .content.is-chat {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: calc(var(--bottom-nav-h) + 10px) !important;
  }
  .content.is-chat .chat-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }
}

/* A late ".sidebar,.main{position:relative}" rule was pulling the mobile
   navigation back into the grid flow on iPad portrait (1024x1366), so it sat
   at the top and pushed the page 76px past the viewport. Pin it again. */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1024px) {
  .sidebar {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 60 !important;
  }
}

/* The gainers/losers grid tracks were sized by the table's min-width, so the
   table wrapper grew to 860px and was clipped by the card (and spilled past
   the viewport in landscape). Constrain the tracks and let the wrapper scroll. */
.officer-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; min-width: 0; }
.officer-two-col > .officer-panel { min-width: 0 !important; }
.officer-table-wrap { max-width: 100% !important; min-width: 0 !important; }
.officer-dashboard { grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (max-width: 1000px) {
  .officer-two-col { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Reserve the bottom bar's height in the flex shell instead of letting the
   page scroll underneath it. The scroll area then ends exactly above the bar
   in portrait and landscape. */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1024px) {
  .main { padding-bottom: calc(var(--bottom-nav-h) + 6px) !important; }
  .content:not(.is-chat) { padding-bottom: 18px !important; }
  .content.is-chat { padding-bottom: 10px !important; }
  .sidebar,
  [data-theme="dark"] .sidebar,
  [data-theme="light"] .sidebar {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Landscape phones use the compact bar; this must win over the portrait value. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  :root { --bottom-nav-h: calc(52px + env(safe-area-inset-bottom)); }
}

/* Login / auth: lock the page to the viewport. The auth panel scrolls
   internally if a very short screen cannot fit the card, so the document
   itself never scrolls. */
.auth,
.auth-reference {
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
.auth-panel {
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
.login-card {
  max-height: calc(100dvh - 20px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body:has(.auth) { overflow: hidden !important; }

/* The bottom nav's edge fade clipped the active pill into a strange shape. */
.sidebar .nav {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Landscape phones: show the menu names under the icons, like tablet portrait. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  :root { --bottom-nav-h: calc(58px + env(safe-area-inset-bottom)); }
  .nav-item {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 5px 9px !important;
  }
  .nav-item span {
    display: block !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
}

/* A legacy mobile auth rule (".auth.auth-reference" with !important) kept
   re-enabling page scrolling; this later, same-specificity rule wins. */
.auth.auth-reference {
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
.auth-reference .auth-panel {
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

/* On tall screens the card fits; hide its 1px rounding scrollbar. Short
   screens (landscape) keep the internal scroll. */
@media (min-height: 660px) {
  .login-card { overflow: hidden !important; }
}

/* ==========================================================================
   Mobile / tablet portrait login: an immersive brand hero (logo, headline,
   benefit chips and the mascot standing inside it) with the sign-in card
   sliding up over the hero's lower edge. The page stays viewport-locked; only
   the card scrolls, and only on screens too short to fit it.
   ========================================================================== */
.auth-brand-mobile { display: none; }

@media (orientation: portrait) and (max-width: 1100px) {
  .auth.auth-reference {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    background: #020812 !important;
  }
  html[data-theme="light"] .auth.auth-reference {
    background: linear-gradient(168deg, #eef6ff 0%, #dbeaff 55%, #cfe3fb 100%) !important;
  }

  /* ---------- Hero ---------- */
  .auth-reference .auth-art {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    height: clamp(232px, 30vh, 330px) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 16px 18px 44px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  .auth-reference .auth-art,
  html[data-theme="light"] .auth-reference .auth-art {
    background:
      radial-gradient(78% 82% at 84% 74%, rgba(0,118,255,.55), transparent 62%),
      radial-gradient(62% 58% at 10% -6%, rgba(0,190,255,.22), transparent 62%),
      linear-gradient(180deg, #081c3a 0%, #041022 58%, #020812 100%) !important;
    color: #eef5ff !important;
  }
  /* Depth: slow concentric rings behind the character */
  .auth-reference .auth-art::before {
    inset: -30% -20% -10% -20% !important;
    opacity: 1 !important;
    filter: none !important;
    background:
      radial-gradient(circle at 74% 64%, rgba(0,140,255,.30) 0 34%, transparent 35%),
      radial-gradient(circle at 74% 64%, transparent 0 46%, rgba(0,150,255,.16) 46.5% 47.5%, transparent 48%),
      radial-gradient(circle at 74% 64%, transparent 0 58%, rgba(0,150,255,.10) 58.5% 59.5%, transparent 60%) !important;
    animation: authHeroAura 16s ease-in-out infinite alternate !important;
  }
  /* Depth: faint architectural grid + bottom scrim so the card edge reads */
  .auth-reference .auth-art::after {
    inset: 0 !important;
    opacity: 1 !important;
    mask-image: none !important;
    background:
      repeating-linear-gradient(114deg, rgba(130,195,255,.055) 0 1px, transparent 1px 26px),
      linear-gradient(180deg, transparent 46%, rgba(2,8,18,.55) 78%, rgba(2,8,18,.96) 100%) !important;
  }
  @keyframes authHeroAura {
    from { transform: translate3d(-1%, 1%, 0) scale(1); }
    to   { transform: translate3d(1%, -1.5%, 0) scale(1.05); }
  }

  .auth-reference .auth-brand-mobile {
    display: flex !important;
    align-items: center;
    gap: 9px;
    position: relative;
    z-index: 6;
    margin-bottom: 12px;
  }
  .auth-reference .auth-brand-mobile .brand-mark {
    width: 28px; height: 28px; border-radius: 9px;
    display: grid; place-items: center; flex: 0 0 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(120,190,255,.30);
    box-shadow: 0 4px 14px rgba(0,10,30,.45);
  }
  .auth-reference .auth-brand-mobile .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
  .auth-reference .auth-brand-mobile .brand-name {
    font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: #f2f7ff;
  }
  .auth-reference .auth-brand-mobile .brand-name b { color: #42b3ff; }

  /* Mascot: larger, anchored to the hero's lower-right, partly behind the card */
  .auth-reference .hero-stage {
    display: block !important;
    position: absolute !important;
    left: auto !important;
    right: 2% !important;
    top: auto !important;
    bottom: -24px !important;
    width: clamp(140px, 38vw, 270px) !important;
    transform: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    z-index: 1 !important;
  }
  .auth-reference .particles { z-index: 2 !important; }

  /* Copy sits low-left, clear of the card overlap */
  .auth-reference .login-visual-copy {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 62% !important;
    max-width: 62% !important;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: auto;
  }
  .auth-reference .login-tagline,
  .auth-reference .login-tagline span { white-space: normal !important; }
  .auth-reference .login-tagline {
    font-size: clamp(16px, 4.2vw, 27px) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-align: left !important;
    letter-spacing: -.015em !important;
    color: #ffffff !important;
    text-shadow: 0 3px 14px rgba(0,4,16,.75) !important;
  }
  .auth-reference .login-benefits {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    gap: 6px !important;
    margin: 2px 0 0 !important;
    font-size: clamp(9.5px, 1.6vw, 12px) !important;
    color: #c4d4ea !important;
  }
  .auth-reference .login-benefits i { display: none !important; }
  .auth-reference .login-benefits > div { gap: 6px !important; }
  .auth-reference .login-benefits > div span { color: #c4d4ea !important; }
  .auth-reference .login-benefits .ic { width: 14px !important; height: 14px !important; flex: 0 0 14px; color: #4fb2ff !important; }

  /* Theme toggle floats clear of the artwork */
  .auth-reference .auth-reference-theme-wrap {
    top: auto !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    right: 14px !important;
  }

  /* ---------- Card sliding over the hero ---------- */
  .auth-reference .auth-panel {
    position: relative !important;
    z-index: 3 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    margin: -34px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
  }
  .auth-reference .auth-panel::before { display: none !important; }

  /* Moving starlight in the space around the card, like the desktop panel. */
  .auth-reference .auth-panel::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -18% !important;
    z-index: 0 !important;
    opacity: .85 !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle 1.5px at 12% 18%, rgba(140,205,255,.95) 0 40%, transparent 70%),
      radial-gradient(circle 1px at 34% 72%, rgba(255,255,255,.85) 0 40%, transparent 70%),
      radial-gradient(circle 1.5px at 58% 28%, rgba(120,190,255,.9) 0 40%, transparent 70%),
      radial-gradient(circle 1px at 76% 64%, rgba(255,255,255,.75) 0 40%, transparent 70%),
      radial-gradient(circle 1.5px at 88% 12%, rgba(150,215,255,.85) 0 40%, transparent 70%),
      radial-gradient(circle 1px at 22% 88%, rgba(120,190,255,.75) 0 40%, transparent 70%),
      radial-gradient(circle 1px at 66% 90%, rgba(255,255,255,.7) 0 40%, transparent 70%),
      radial-gradient(circle 1.5px at 46% 50%, rgba(130,200,255,.8) 0 40%, transparent 70%) !important;
    background-size: 260px 240px, 320px 300px, 220px 260px, 300px 280px, 240px 220px, 280px 300px, 340px 260px, 380px 320px !important;
    animation: retailIqLoginStars 11s ease-in-out infinite alternate !important;
  }
  html[data-theme="light"] .auth-reference .auth-panel::after {
    opacity: .55 !important;
    background:
      radial-gradient(circle 1.5px at 12% 18%, rgba(40,120,220,.55) 0 40%, transparent 70%),
      radial-gradient(circle 1px at 34% 72%, rgba(90,150,230,.45) 0 40%, transparent 70%),
      radial-gradient(circle 1.5px at 58% 28%, rgba(30,110,215,.5) 0 40%, transparent 70%),
      radial-gradient(circle 1px at 76% 64%, rgba(90,150,230,.45) 0 40%, transparent 70%),
      radial-gradient(circle 1.5px at 88% 12%, rgba(40,120,220,.5) 0 40%, transparent 70%),
      radial-gradient(circle 1px at 22% 88%, rgba(30,110,215,.4) 0 40%, transparent 70%),
      radial-gradient(circle 1px at 66% 90%, rgba(90,150,230,.4) 0 40%, transparent 70%),
      radial-gradient(circle 1.5px at 46% 50%, rgba(40,120,220,.45) 0 40%, transparent 70%) !important;
  }
  .auth-reference .login-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 20px 20px 16px !important;
    border-radius: 24px 24px 0 0 !important;
    border-top-color: rgba(122,192,255,.34) !important;
    box-shadow: 0 -22px 48px rgba(0,6,18,.38) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none;
  }
  .auth-reference .login-card::-webkit-scrollbar { width: 0; height: 0; }
  html[data-theme="light"] .auth-reference .login-card {
    box-shadow: 0 -20px 44px rgba(20,60,110,.20) !important;
    background: linear-gradient(160deg, rgba(255,255,255,.985), rgba(247,251,255,.975)) !important;
  }
}

/* Very short portraits: compact hero, smaller overlap, tighter card. */
@media (orientation: portrait) and (max-width: 1100px) and (max-height: 700px) {
  .auth-reference .auth-art {
    height: 150px !important;
    padding: 12px 16px 30px !important;
  }
  .auth-reference .hero-stage { width: clamp(104px, 30vw, 150px) !important; bottom: -16px !important; }
  .auth-reference .login-benefits { display: none !important; }
  .auth-reference .auth-brand-mobile { margin-bottom: 6px; }
  .auth-reference .auth-panel { margin-top: -26px !important; }
  .auth-reference .login-card { padding-top: 14px !important; padding-bottom: 12px !important; }
  .auth-reference .login-card h2 { margin: 8px 0 3px !important; }
  .auth-reference .login-card > p { margin-bottom: 10px !important; }
  .auth-reference .reference-divider { margin: 8px 0 7px !important; }
  .auth-reference .reference-footer { margin-top: 7px !important; }
}

/* Shortest phones (iPhone SE / older Android): drop the subtitle so the whole
   form still fits without scrolling. */
@media (orientation: portrait) and (max-width: 1100px) and (max-height: 660px) {
  .auth-reference .login-card > p { display: none !important; }
}

/* Narrow phones: the headline needs a hairline-slimmer size to stay on two
   lines above the card. */
@media (orientation: portrait) and (max-width: 360px) {
  .auth-reference .login-tagline { font-size: 14px !important; }
}

/* Landscape tablets (iPad 1024x768 and similar) keep the two-column
   hero + form layout instead of collapsing to a bare form. */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1100px) {
  .auth-reference .auth-art { display: block !important; }
}

/* Tablet portrait: deeper hero and a floating card that overlaps its edge. */
@media (orientation: portrait) and (min-width: 561px) and (max-width: 1100px) {
  .auth-reference .auth-art {
    height: clamp(286px, 31vh, 420px) !important;
    padding: 24px 30px 60px !important;
    border-radius: 0 0 30px 30px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 28px 60px -16px rgba(0,6,18,.75) !important;
  }
  .auth-reference .auth-brand-mobile { margin-bottom: 16px; }
  .auth-reference .auth-brand-mobile .brand-mark { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; }
  .auth-reference .auth-brand-mobile .brand-name { font-size: 20px; }
  .auth-reference .hero-stage { right: 4% !important; bottom: -30px !important; width: clamp(200px, 24vw, 330px) !important; }
  .auth-reference .login-visual-copy { width: 58% !important; max-width: 58% !important; gap: 13px; }
  .auth-reference .login-tagline { font-size: clamp(21px, 3.3vw, 32px) !important; }
  .auth-reference .login-benefits {
    flex-direction: row !important; flex-wrap: wrap;
    gap: 10px 16px !important; font-size: 12px !important;
  }
  .auth-reference .login-benefits .ic { width: 16px !important; height: 16px !important; flex: 0 0 16px; }
  .auth-reference .login-benefits > div span { white-space: nowrap; }

  .auth-reference .auth-panel {
    align-items: flex-start !important;
    justify-content: center !important;
    margin-top: -44px !important;
    padding: 0 24px 26px !important;
  }
  .auth-reference .login-card {
    height: auto !important;
    max-height: 100% !important;
    width: min(600px, 100%) !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 30px 40px 26px !important;
    border-radius: 26px !important;
    box-shadow: 0 26px 60px rgba(0,8,24,.42) !important;
    overflow-y: auto !important;
  }
  html[data-theme="light"] .auth-reference .login-card {
    box-shadow: 0 24px 56px rgba(16,60,110,.22) !important;
  }
}

/* ==========================================================================
   Login polish
   ========================================================================== */

/* The CSS-drawn user/lock glyphs sit behind the input's own background, which
   cut them in half (only the head / shackle stayed visible). Lift them above
   the field so each icon renders complete. */
.input-icon::before,
.input-icon::after { z-index: 3; }

/* "Remember me" and "Forgot password?" share one type scale everywhere (they
   used to be 11–16px depending on the breakpoint). The forgot link needs the
   extra :not() specificity to override the portal-wide button reset. */
.auth-reference .remember-control { font-size: 13px !important; }
button.reference-forgot:not(#rq-btn):not(#rq-btn) {
  font-size: 13px !important;
}