/* ==========================================================================
   iRawda Sales Intelligence — Premium Visual System v3
   Matched to the iRawda brand mark (gold/amber) and the internal
   dashboardsalesirawda reference: warm amber accent, soft lavender icon
   chips, white/cream gradient cards, generous rounded corners.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --purple:#e8933a;--purple2:#f6c15c;--pink:#e07a2c;--violet-deep:#b8631c;
  --lav:#f3eefc;--lav2:#ece2fa;--ink:#1c1a22;--muted:#726d7d;--border:#ece7f4;
  --surface:#fff;--surface-2:#fbf9ff;--page:#f7f6fb;
  --green:#15b77c;--blue:#3e8cf5;--orange:#f0a000;--red:#ef4d63;
  --shadow-color:243,232,214;--glow-purple:232,147,58;--glow-pink:246,193,92;
  --radius-lg:22px;--radius-md:18px;--radius-sm:12px;
  --ease:cubic-bezier(.19,1,.22,1);--ease-soft:cubic-bezier(.25,.8,.35,1);
  --font-display:Inter,ui-sans-serif,system-ui,sans-serif;
  --icon-bg:#efe7fb;--icon-ink:#d4852c;
  --badge-bg:#ece1fb;--badge-ink:#6d3fbf;
  --hero-grad:linear-gradient(135deg,#ffffff 0%,#faf8ff 55%,#f1eafb 100%);
  --hero-grad-dark:linear-gradient(135deg,#1c1726 0%,#231b30 55%,#2c2038 100%);
  --kpi-grad:linear-gradient(135deg,#ffffff 0%,#fdf9f1 55%,#faf1de 100%);
  --kpi-grad-dark:linear-gradient(135deg,#1c1726 0%,#241d29 55%,#2c2620 100%);
  --elev-1:0 1px 2px rgba(40,30,20,.04),0 8px 20px -14px rgba(232,147,58,.22),inset 0 1px 0 rgba(255,255,255,.7);
  --elev-2:0 2px 6px rgba(40,30,20,.06),0 22px 38px -20px rgba(232,147,58,.35),inset 0 1px 0 rgba(255,255,255,.8);
  --elev-1-dark:0 1px 2px rgba(0,0,0,.3),0 10px 26px -16px rgba(232,147,58,.35),inset 0 1px 0 rgba(255,255,255,.05);
  --elev-2-dark:0 4px 10px rgba(0,0,0,.35),0 26px 46px -20px rgba(232,147,58,.45),inset 0 1px 0 rgba(255,255,255,.07);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,"Public Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:500;color:var(--ink);background:var(--page);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;font-size:15px}
button,a{font:inherit}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0}
.nav-icon svg{width:1em;height:1em;display:block}
.dr-icon svg{width:15px;height:15px;display:block}
.header-menu-btn svg{width:18px;height:18px}
.hero-card-icon svg{width:22px;height:22px}
.kpi-card-icon svg{width:17px;height:17px}
.big-metric-icon svg{width:26px;height:26px}
.modal-close svg{width:13px;height:13px}
.cal-head button svg,.cal-back svg{width:13px;height:13px}
::selection{background:var(--purple);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--purple),var(--purple2));border-radius:99px;border:2px solid var(--page)}

@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-3%,4%) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-5%) scale(1.05)}100%{transform:translate(0,0) scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@keyframes pulseDot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(var(--glow-purple),.5)}50%{opacity:.55;box-shadow:0 0 0 6px rgba(var(--glow-purple),0)}}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes segGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tickerGlow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes glowPulse{0%,100%{box-shadow:0 6px 18px -6px rgba(var(--glow-purple),.55),0 0 0 0 rgba(var(--glow-purple),.35)}50%{box-shadow:0 6px 22px -4px rgba(var(--glow-pink),.7),0 0 0 6px rgba(var(--glow-purple),0)}}
@keyframes glowPulseSoft{0%,100%{box-shadow:0 0 0 0 rgba(var(--glow-purple),.35)}50%{box-shadow:0 0 0 5px rgba(var(--glow-purple),0)}}
@keyframes breathe{0%,100%{box-shadow:0 8px 22px -8px rgba(var(--glow-purple),.55),0 0 0 0 rgba(var(--glow-purple),.45)}50%{box-shadow:0 10px 28px -6px rgba(var(--glow-purple),.75),0 0 0 7px rgba(var(--glow-purple),0)}}

/* ---------------------------------- SIGN-IN ---------------------------------- */
.login-body{background:#0c0906}
.signin-page{min-height:100vh;display:grid;grid-template-columns:1fr 1.08fr;background:#0c0906;color:#fff;position:relative;overflow:hidden}
.signin-panel{padding:38px clamp(32px,8vw,130px);display:flex;flex-direction:column;justify-content:center;position:relative;border-right:1px solid #ffffff0d;z-index:2;animation:fadeUp .7s var(--ease) both}
.signin-brand{position:absolute;top:36px;left:clamp(32px,8vw,130px);display:flex;align-items:center;gap:14px;z-index:3}
.signin-brand img{width:148px;height:48px;object-fit:contain;object-position:left center;filter:drop-shadow(0 4px 18px rgba(232,147,58,.35))}
.signin-brand span{font-size:10px;letter-spacing:.18em;color:#a79a85;text-transform:uppercase;border-left:1px solid #453a2e;padding-left:14px}
.signin-copy{max-width:430px}
.overline{font-size:10px;font-weight:800;letter-spacing:.24em;color:#f6c15c;display:flex;align-items:center;gap:8px}
.overline::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--purple2);box-shadow:0 0 0 0 rgba(var(--glow-pink),.6);animation:pulseDot 2s infinite}
.signin-copy h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:48px;margin:14px 0 14px;background:linear-gradient(135deg,#fff 30%,#ffd9a0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.signin-copy>p:last-child{color:#a69f92;line-height:1.7;font-size:14px}
.signin-note{max-width:430px;text-align:center;margin-top:24px;color:#786e5e;font-size:11px}
.signin-showcase{position:relative;overflow:hidden;display:flex;align-items:center;padding:70px 8%;background:radial-gradient(circle at 70% 10%,#3d2f1c 0,transparent 45%),radial-gradient(circle at 20% 90%,#3a2412 0,transparent 40%),#0c0906}
.glow{position:absolute;border-radius:50%;filter:blur(95px);opacity:.35;pointer-events:none}
.glow-one{width:420px;height:420px;background:radial-gradient(circle,#f0a83c,transparent 70%);right:-110px;top:-90px;animation:drift 16s ease-in-out infinite}
.glow-two{width:320px;height:320px;background:radial-gradient(circle,#f6c15c,transparent 70%);left:8%;bottom:-130px;animation:drift2 20s ease-in-out infinite}
.grain-orb{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#ffcf7a,transparent 70%);opacity:.22;filter:blur(80px);right:18%;bottom:6%;animation:drift 24s ease-in-out infinite reverse}
.showcase-content{position:relative;max-width:640px;z-index:2;animation:fadeUp .8s .15s var(--ease) both}
.ai-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid #8a6a35;border-radius:99px;padding:8px 16px;color:#f6c689;font-size:10px;font-weight:800;letter-spacing:.16em;background:rgba(232,147,58,.1);backdrop-filter:blur(6px)}
.showcase-content h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:clamp(45px,5vw,72px);line-height:1.04;margin:28px 0 20px}
.showcase-content h2 em{font-style:normal;background:linear-gradient(120deg,#f0a83c,#ffd27a 55%,#f0a83c);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 5s linear infinite}
.showcase-content>p{color:#a49c8c;max-width:520px;line-height:1.75;font-size:14.5px}
.feature-grid{margin-top:50px;padding-top:30px;border-top:1px solid #342a1e;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feature-grid article{border:1px solid #2d2519;background:linear-gradient(160deg,#181209,#1e160c);border-radius:12px;padding:18px;display:flex;gap:14px;transition:transform .35s var(--ease-soft),border-color .35s,box-shadow .35s;animation:popIn .6s both;animation-delay:calc(var(--i,0)*80ms + .3s)}
.feature-grid article:nth-child(1){--i:1}.feature-grid article:nth-child(2){--i:2}.feature-grid article:nth-child(3){--i:3}.feature-grid article:nth-child(4){--i:4}
.feature-grid article:hover{transform:translateY(-3px);border-color:#8a6a35;box-shadow:0 14px 34px -12px rgba(232,147,58,.4)}
.feature-grid b{color:#e8933a;font-size:11px}
.feature-grid span{font-size:13px;font-weight:700}

.login-form{width:100%;max-width:430px;margin-top:24px;display:grid;gap:14px}
.login-form label{display:grid;gap:7px;font-size:11px;color:#cabfa8;font-weight:600}
.login-form input{width:100%;height:48px;border-radius:9px;border:1px solid #342a1e;background:#161009;color:#fff;padding:0 14px;outline:none;transition:border-color .25s,box-shadow .25s,background .25s}
.login-form input:hover{border-color:#4a3c26}
.login-form input:focus{border-color:#e8933a;box-shadow:0 0 0 4px rgba(232,147,58,.16);background:#1a1309}
.login-form button{height:50px;border:0;border-radius:9px;background:linear-gradient(90deg,var(--purple),var(--purple2));background-size:160% 100%;color:#1c1207;font-weight:800;cursor:pointer;padding:0 18px;transition:background-position .5s var(--ease),transform .2s,box-shadow .3s;animation:glowPulse 2.6s ease-in-out infinite}
.login-form button:hover{background-position:100% 0;transform:translateY(-1px);box-shadow:0 18px 40px -10px rgba(232,147,58,.65)}
.login-form button:active{transform:translateY(0) scale(.99)}
.login-form button span{float:right;display:inline-block;transition:transform .25s}
.login-form button:hover span{transform:translateX(4px)}
.login-error{padding:10px 12px;border:1px solid #73394e;background:#351724;border-radius:8px;color:#ffb9cc;font-size:11px;animation:fadeUp .3s var(--ease)}

@media(max-width:680px){
  .signin-page{grid-template-columns:1fr}
  .signin-panel{min-height:100vh;padding:100px 28px 40px}
  .signin-showcase{display:none}
  .signin-brand{left:28px}
  .signin-copy h1{font-size:38px}
}

/* ---------------------------------- APP SHELL ---------------------------------- */
.app-shell{min-height:100vh;background:var(--page);color:var(--ink);--side:250px;display:grid;grid-template-columns:var(--side) 1fr;transition:grid-template-columns .3s var(--ease-soft),background .4s,color .35s;position:relative}
.app-shell::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(600px 400px at 85% -8%,rgba(232,147,58,.09),transparent 60%),radial-gradient(500px 380px at 10% 105%,rgba(109,63,191,.06),transparent 60%)}
.app-shell.dark{--page:#120f18;--surface:#1b1622;--surface-2:#211a2a;--lav:#241d30;--lav2:#2c2338;--ink:#f5f2fa;--muted:#a89fb4;--border:#302840;--icon-bg:#2c2338;--icon-ink:#f0b45c;--badge-bg:#2c2140;--badge-ink:#c79bff;background:var(--page)}
.app-shell.dark::before{background:radial-gradient(700px 460px at 88% -10%,rgba(232,147,58,.14),transparent 60%),radial-gradient(560px 420px at 6% 108%,rgba(109,63,191,.10),transparent 60%),radial-gradient(500px 340px at 50% 40%,rgba(62,140,245,.05),transparent 70%)}
.app-shell.compact-nav{--side:78px}
body,.app-shell,.app-shell *{transition:background-color .35s ease,border-color .35s ease,color .35s ease}

.sidebar{height:100vh;position:sticky;top:0;border-right:1px solid var(--border);background:var(--surface);padding:16px 12px;display:flex;flex-direction:column;overflow:hidden;z-index:20}
.side-brand{height:52px;display:flex;align-items:center;gap:11px;padding:2px 4px 16px;border-bottom:1px solid var(--border);margin-bottom:14px}
.side-brand img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(232,147,58,.35))}
.side-brand-text{display:grid;min-width:0}
.side-brand-text strong{font-size:14px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.side-brand-text small{font-size:9.5px;color:var(--muted);font-weight:600}
.menu-label{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--muted);margin:6px 8px 8px;display:flex;align-items:center;justify-content:space-between;cursor:default}
.menu-label i{font-style:normal;font-size:9px;transition:transform .25s}
.sidebar nav{display:grid;gap:4px}
.nav-group{display:grid;gap:4px;padding-left:6px;margin-bottom:6px;border-left:1px solid var(--border)}
.sidebar nav a{position:relative;height:42px;display:flex;align-items:center;gap:11px;padding:0 12px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;transition:color .25s,background .3s,transform .25s var(--ease-soft)}
.sidebar nav a:hover{color:var(--ink);background:var(--lav)}
.sidebar nav a.selected{color:#fff;font-weight:800;background:linear-gradient(135deg,var(--purple2),var(--purple));box-shadow:0 10px 22px -10px rgba(232,147,58,.7);animation:glowPulseSoft 3s ease-in-out infinite}
.sidebar nav a .nav-icon{font-size:18px;width:19px;transition:transform .3s var(--ease-soft)}
.sidebar nav a:hover .nav-icon{transform:scale(1.15)}
.sidebar nav a.selected .nav-icon{transform:none}
.user-card{margin-top:auto;padding:14px 6px 6px;border-top:1px solid var(--border);display:grid;grid-template-columns:38px 1fr;gap:10px;color:var(--ink)}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple2),var(--purple));color:#fff;font-weight:900;font-size:13px;box-shadow:0 6px 16px -6px rgba(232,147,58,.55)}
.user-card>div:nth-child(2){display:grid;min-width:0;gap:1px}
.user-card strong{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.user-card small{font-size:9.5px;color:var(--muted);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role-badge{grid-column:2/3;justify-self:start;margin-top:3px;background:var(--badge-bg);color:var(--badge-ink);font-size:9px;font-weight:800;padding:3px 10px;border-radius:99px}
.user-actions{grid-column:1/-1;display:flex;gap:6px;margin-top:12px}
.user-actions button,.user-actions a{flex:1;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--muted);font-size:9.5px;font-weight:700;padding:8px 4px;text-align:center;text-decoration:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:transform .2s,border-color .25s,color .25s,box-shadow .25s}
.user-actions button .nav-icon,.user-actions a .nav-icon{font-size:14px}
.user-actions button:hover,.user-actions a:hover{transform:translateY(-2px);border-color:var(--purple);color:var(--purple);box-shadow:var(--elev-1)}
.compact-nav .side-brand-text,.compact-nav .menu-label,.compact-nav nav a span:not(.nav-icon),.compact-nav .user-card>div:nth-child(2),.compact-nav .role-badge,.compact-nav .user-actions{display:none}
.compact-nav .side-brand{justify-content:center}
.compact-nav .nav-group{border-left:0;padding-left:0}
.compact-nav .sidebar nav a{justify-content:center;padding:0}
.compact-nav .user-card{grid-template-columns:1fr;justify-items:center}

.dashboard-main{position:relative;z-index:1;background:transparent;padding:22px clamp(18px,2.5vw,42px) 32px;min-width:0}
.dash-header{position:relative;z-index:40;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:20px;flex-wrap:wrap;animation:fadeUp .5s var(--ease) both}
.dash-header-left{display:flex;align-items:center;gap:14px;min-width:0}
.header-menu-btn{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;font-size:17px;box-shadow:var(--elev-1);transition:transform .25s var(--ease-soft),border-color .25s,box-shadow .25s}
.dark .header-menu-btn{box-shadow:var(--elev-1-dark)}
.header-menu-btn:hover{transform:translateY(-2px) scale(1.04);border-color:var(--purple)}
.dash-header h1{font-size:clamp(20px,2.2vw,25px);margin:0;font-weight:800;letter-spacing:-.01em;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.dark .dash-header h1{text-shadow:none}
.dash-header p{font-size:10.5px;color:var(--muted);margin:0}
.header-controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.header-btn{display:flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:11.5px;font-weight:700;cursor:pointer;box-shadow:var(--elev-1);transition:transform .25s var(--ease-soft),box-shadow .3s,border-color .3s}
.dark .header-btn{box-shadow:var(--elev-1-dark)}
.header-btn:hover{transform:translateY(-2px);border-color:var(--purple);box-shadow:var(--elev-2)}
.dark .header-btn:hover{box-shadow:var(--elev-2-dark)}
.header-btn .nav-icon{color:var(--purple);font-size:15px}
.header-btn.primary{background:linear-gradient(90deg,var(--purple),var(--purple2));color:#fff;border-color:transparent;animation:breathe 2.8s ease-in-out infinite}
.header-btn.primary .nav-icon{color:#fff}
.header-btn.primary:hover{transform:translateY(-2px) scale(1.02)}
.period-chip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border);background:var(--surface);border-radius:11px;padding:9px 15px;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:18px;box-shadow:var(--elev-1)}
.dark .period-chip{box-shadow:var(--elev-1-dark)}
.period-chip .nav-icon{color:var(--purple);font-size:14px}
.period-chip b{color:var(--purple);font-weight:800}

/* ---------------------------------- HERO CARDS (Sales / Gross Profit) ---------------------------------- */
.hero-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
.hero-card{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:24px 26px;background:var(--hero-grad);box-shadow:var(--elev-1);transition:transform .35s var(--ease-soft),box-shadow .35s;animation:fadeUp .55s .05s var(--ease) both}
.dark .hero-card{background:var(--hero-grad-dark);box-shadow:var(--elev-1-dark)}
.hero-card:hover{transform:translateY(-6px);box-shadow:var(--elev-2)}
.dark .hero-card:hover{box-shadow:var(--elev-2-dark)}
.hero-card::after{content:"";position:absolute;top:-45%;right:-12%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(232,147,58,.16),transparent 70%);pointer-events:none;animation:drift 15s ease-in-out infinite}
.hero-card-icon{width:48px;height:48px;border-radius:15px;background:var(--icon-bg);color:var(--icon-ink);display:grid;place-items:center;font-size:21px;margin-bottom:18px;position:relative;z-index:1;transition:transform .35s var(--ease-soft)}
.hero-card:hover .hero-card-icon{transform:scale(1.1) rotate(-6deg)}
.hero-card-label{font-size:12.5px;color:var(--muted);font-weight:700;margin:0 0 8px;position:relative;z-index:1}
.hero-card-value{font-size:clamp(24px,2.6vw,32px);font-weight:900;letter-spacing:-.01em;position:relative;z-index:1;display:block}
.hero-card-caption{font-size:11px;color:var(--muted);margin-top:8px;font-weight:600;position:relative;z-index:1}
.hero-card-caption b{color:var(--purple);font-weight:800}
#totalProfitValue{background:linear-gradient(90deg,#0f9e68,#15b77c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------------------------------- KPI GRID ---------------------------------- */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.kpi-card{position:relative;overflow:hidden;border-radius:var(--radius-md);padding:17px;background:var(--kpi-grad);box-shadow:var(--elev-1);transition:transform .3s var(--ease-soft),box-shadow .3s;animation:fadeUp .5s var(--ease) both;animation-delay:calc(var(--i,0)*70ms + .1s)}
.dark .kpi-card{background:var(--kpi-grad-dark);box-shadow:var(--elev-1-dark)}
.kpi-card:nth-child(1){--i:1}.kpi-card:nth-child(2){--i:2}.kpi-card:nth-child(3){--i:3}.kpi-card:nth-child(4){--i:4}.kpi-card:nth-child(5){--i:5}.kpi-card:nth-child(6){--i:6}
.kpi-card:hover{transform:translateY(-5px);box-shadow:var(--elev-2)}
.dark .kpi-card:hover{box-shadow:var(--elev-2-dark)}
.kpi-card-icon{width:38px;height:38px;border-radius:12px;background:var(--icon-bg);color:var(--icon-ink);display:grid;place-items:center;font-size:16px;margin-bottom:14px;transition:transform .3s var(--ease-soft)}
.kpi-card:hover .kpi-card-icon{transform:scale(1.12) rotate(-6deg)}
.kpi-card-label{font-size:11.5px;color:var(--muted);font-weight:700;margin:0 0 6px}
.kpi-card-value{font-size:19px;font-weight:900;display:block}
.kpi-card-value.waiting{font-size:13px;color:var(--muted);font-weight:800}
.kpi-card-caption{font-size:9.5px;color:var(--muted);margin-top:5px;font-weight:600}
.kpi-card-value{text-shadow:0 1px 0 rgba(255,255,255,.55)}
.dark .kpi-card-value{text-shadow:none}

/* ---------------------------------- BIG METRIC (Average Net Profit) ---------------------------------- */
.big-metric{display:flex;align-items:center;gap:20px;border-radius:var(--radius-lg);padding:26px 30px;background:var(--hero-grad);box-shadow:var(--elev-1);margin-bottom:14px;transition:transform .35s var(--ease-soft),box-shadow .35s;animation:fadeUp .55s .08s var(--ease) both}
.dark .big-metric{background:var(--hero-grad-dark);box-shadow:var(--elev-1-dark)}
.big-metric:hover{transform:translateY(-5px);box-shadow:var(--elev-2)}
.dark .big-metric:hover{box-shadow:var(--elev-2-dark)}
.big-metric-icon{width:58px;height:58px;flex:none;border-radius:17px;background:var(--icon-bg);color:var(--icon-ink);display:grid;place-items:center;transition:transform .35s var(--ease-soft)}
.big-metric:hover .big-metric-icon{transform:scale(1.1) rotate(-6deg)}
.big-metric-body{min-width:0}
.big-metric-label{font-size:12.5px;color:var(--muted);font-weight:700;margin:0 0 6px}
.big-metric-value{font-size:clamp(28px,3vw,38px);font-weight:900;letter-spacing:-.01em;display:block;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.dark .big-metric-value{text-shadow:none}
.big-metric-caption{font-size:11px;color:var(--muted);margin:8px 0 0;font-weight:600}

/* ---------------------------------- GRIDS / CARDS ---------------------------------- */
.dashboard-grid,.detail-grid{display:grid;grid-template-columns:1.65fr .8fr;gap:10px;margin-bottom:10px}
.dash-card{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);padding:18px;min-width:0;box-shadow:var(--elev-1);transition:box-shadow .35s,border-color .35s,transform .35s var(--ease-soft);animation:fadeUp .55s .1s var(--ease) both}
.dark .dash-card{box-shadow:var(--elev-1-dark)}
.dash-card:hover{box-shadow:var(--elev-2);transform:translateY(-3px)}
.dark .dash-card:hover{box-shadow:var(--elev-2-dark)}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.section-head h2{font-size:15px;margin:0 0 3px;font-weight:800}
.section-head p{font-size:10px;color:var(--muted);margin:0}
.chart-controls{display:flex;gap:3px}
.chart-controls button,.view-all{border:0;background:var(--lav);color:var(--purple);border-radius:6px;font-size:8px;font-weight:800;padding:6px 10px;cursor:pointer;transition:background .25s,color .25s,transform .2s}
.chart-controls button:hover,.view-all:hover{transform:translateY(-1px)}
.chart-controls button.active{background:linear-gradient(90deg,var(--purple),var(--purple2));color:white;animation:glowPulseSoft 2.8s ease-in-out infinite}
.target-note{display:flex;gap:12px;align-items:center;margin:12px 0 3px;font-size:7px;color:var(--muted)}
.target-note span{color:var(--purple);font-weight:800}
.sales-chart{min-height:300px;padding-top:8px}

.detail-grid{grid-template-columns:1.45fr 1fr}
.approved-chip{font-size:8px;padding:6px 9px;border-radius:6px;background:#dcf6eb;color:#0c9362;font-weight:800}
.dark .approved-chip{background:#0f2e24;color:#3fd6a1}
.hpm-list{display:grid;gap:10px;margin-top:17px}
.hpm-list>div{display:grid;grid-template-columns:60px 1fr 78px;gap:9px;align-items:center;font-size:8px}
.hpm-list i{height:7px;background:var(--lav);border-radius:8px;overflow:hidden}
.hpm-list i b{display:block;height:100%;background:linear-gradient(90deg,var(--purple),var(--purple2));border-radius:8px;transform-origin:left;animation:segGrow .8s var(--ease-soft) both;animation-delay:calc(var(--hi,0)*80ms + .1s)}
.hpm-list strong{text-align:right}
.confidence-score{display:grid;grid-template-columns:82px 1fr;gap:13px;align-items:center;margin:15px 0}
.score-ring{width:78px;height:78px;border-radius:50%;background:conic-gradient(var(--purple) 0 var(--p,88%),var(--lav2) var(--p,88%));display:grid;place-items:center;position:relative;transition:background 1s var(--ease-soft)}
.score-ring:after{content:"";position:absolute;inset:8px;background:var(--surface);border-radius:50%}
.score-ring span{z-index:1;font-size:19px;font-weight:900}
.score-ring small{font-size:8px}
.confidence-score strong{font-size:10px}
.confidence-score p{font-size:8px;line-height:1.5;color:var(--muted)}
.confidence-list{border-top:1px solid var(--border)}
.confidence-list>div{display:grid;grid-template-columns:9px 1fr 20px;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
.confidence-list i{width:6px;height:6px;border-radius:50%}
.confidence-list i.ok{background:var(--green)}
.confidence-list i.live{background:var(--purple);animation:pulseDot 1.6s infinite}
.confidence-list i.gap{background:var(--orange)}
.confidence-list span{display:grid}
.confidence-list b,.confidence-list strong{font-size:8px}
.confidence-list small{font-size:6px;color:var(--muted)}
.dash-footer,footer{display:flex;justify-content:space-between;color:var(--muted);font-size:7px;padding:14px 2px 0}

/* ---------------------------------- DATE RANGE PICKER ---------------------------------- */
.date-range{position:relative}
.date-range-btn{animation:glowPulseSoft 3.2s ease-in-out infinite}
.date-range-btn.open{border-color:var(--purple)!important;box-shadow:0 0 0 4px rgba(232,147,58,.16)!important}
.dr-icon{display:inline-flex;color:var(--purple);font-size:14px}
.date-range-panel[hidden]{display:none}
.date-range-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:60;display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--elev-2);overflow:hidden;animation:popIn .22s var(--ease-soft) both;min-width:560px}
.dark .date-range-panel{box-shadow:var(--elev-2-dark)}
.dr-col{padding:16px}
.dr-quick{width:200px;border-right:1px solid var(--border);display:flex;flex-direction:column}
.dr-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:2px 0 8px}
.dr-quick>button{all:unset;box-sizing:border-box;width:100%;padding:9px 8px;border-radius:8px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .2s}
.dr-quick>button:hover{background:var(--lav)}
.dr-custom-btn{color:var(--purple)!important;font-weight:800!important}
.dr-timeframe{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.dr-year-pills{display:flex;flex-wrap:wrap;gap:4px;background:var(--lav);padding:3px;border-radius:9px}
.dr-year-pills button{flex:1;min-width:44px;border:0;background:transparent;padding:8px 6px;font-size:10px;font-weight:800;border-radius:6px;color:var(--muted);cursor:pointer;transition:background .25s,color .25s}
.dr-year-pills button.active{background:linear-gradient(90deg,var(--purple),var(--purple2));color:#fff;animation:glowPulseSoft 2.8s ease-in-out infinite}
.dr-calendar[hidden]{display:none}
.dr-calendar{width:340px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:6px}
.cal-head button{border:1px solid var(--border);background:var(--surface-2);width:26px;height:26px;flex:none;border-radius:50%;cursor:pointer;color:var(--muted);display:grid;place-items:center;transition:border-color .2s,color .2s}
.cal-head button:hover{border-color:var(--purple);color:var(--purple)}
.cal-head strong{font-size:12px}
.cal-label{all:unset;box-sizing:border-box;font-size:12px;font-weight:800;color:var(--ink);cursor:pointer;padding:4px 10px;border-radius:8px;transition:background .2s,color .2s}
.cal-label:hover{background:var(--lav);color:var(--purple)}
.cal-head-title{font-size:12px;font-weight:800;color:var(--ink)}
.cal-back{margin-right:4px}
.cal-pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.cal-pick{all:unset;box-sizing:border-box;text-align:center;padding:11px 4px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);transition:border-color .2s,color .2s,background .2s}
.cal-pick:hover{border-color:var(--purple);color:var(--purple)}
.cal-pick.current{background:linear-gradient(90deg,var(--purple),var(--purple2));color:#fff;border-color:transparent}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:6px}
.cal-dow{font-size:9px;color:var(--muted);text-align:center;font-weight:700;padding:4px 0}
.cal-day{all:unset;box-sizing:border-box;text-align:center;padding:7px 0;border-radius:8px;font-size:11px;cursor:pointer;color:var(--ink);transition:background .2s,color .2s}
.cal-day:hover{background:var(--lav)}
.cal-day.picking{background:linear-gradient(90deg,var(--purple),var(--purple2));color:#fff;font-weight:800;animation:glowPulseSoft 2.2s ease-in-out infinite}
.cal-day.in-range{background:#e3e1e8;color:var(--ink)}
.dark .cal-day.in-range{background:#332c40}
.cal-day.edge{background:#54505c;color:#fff;font-weight:800}
.dark .cal-day.edge{background:#7a7488}
.cal-day[disabled]{color:var(--border);cursor:not-allowed}
.cal-today{all:unset;box-sizing:border-box;display:block;text-align:center;margin-top:10px;padding:8px;border-radius:8px;background:var(--lav);color:var(--purple);font-size:10px;font-weight:800;cursor:pointer;width:100%;transition:transform .2s,box-shadow .2s}
.cal-today:hover{transform:translateY(-1px);box-shadow:var(--elev-1)}

/* ---------------------------------- CHART (SVG) ---------------------------------- */
.chart-svg{width:100%;height:300px;overflow:visible}
.grid-line{stroke:var(--border);stroke-dasharray:3 4}
.axis-label{fill:var(--muted);font-size:9px;font-weight:600}
.chart-x-label{fill:var(--muted);font-size:9px;font-weight:600}
.bar-sales{fill:var(--purple)}
.bar-sales.live{fill:var(--purple2)}
.bar-profit.pos{fill:#15b77c}
.bar-profit.neg{fill:#ef4d63}
.bar-profit.gap{fill:#e0cef5}
.dark .bar-profit.gap{fill:#3a2f4d}
.bar-profit-overlay{fill:#2fe0a6;fill-opacity:.9}
.line-sales{stroke:var(--purple);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.line-profit{stroke:#15b77c;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:0}
.dot-sales{fill:var(--purple);stroke:var(--surface);stroke-width:2}
.dot-profit{fill:#15b77c;stroke:var(--surface);stroke-width:2}
.chart-legend{display:flex;gap:18px;margin-top:8px;font-size:9px;font-weight:700;color:var(--muted)}
.chart-legend span{display:flex;align-items:center;gap:6px}
.lg-dot{width:8px;height:8px;border-radius:2px;display:inline-block}
.lg-dot.lg-sales{background:var(--purple)}
.lg-dot.lg-profit{background:#15b77c}
.chart-empty{color:var(--muted);font-size:11px;padding:40px 0;text-align:center}

/* ---------------------------------- CHANNEL PERFORMANCE ---------------------------------- */
.channel-note{margin:10px 0 4px}
.gap-note{font-size:9px;color:var(--orange);font-weight:700}
.channel-list{display:grid;gap:12px;margin-top:12px}
.channel-row{display:grid;grid-template-columns:84px 1fr 92px;gap:10px;align-items:center;font-size:10px}
.channel-name{font-weight:700}
.channel-track{height:9px;background:var(--lav);border-radius:8px;overflow:hidden}
.dark .channel-track{background:var(--lav2)}
.channel-track b{display:block;height:100%;background:linear-gradient(90deg,var(--purple),var(--purple2));border-radius:8px;transform-origin:left;animation:segGrow .8s var(--ease-soft) both;animation-delay:calc(var(--ci,0)*90ms + .1s)}
.channel-track b.channel-empty{background-image:repeating-linear-gradient(135deg,#e0cef5 0,#e0cef5 5px,#ede0f7 5px,#ede0f7 10px)}
.dark .channel-track b.channel-empty{background-image:repeating-linear-gradient(135deg,#3a2f4d 0,#3a2f4d 5px,#453a58 5px,#453a58 10px)}
.waiting-inline{color:var(--muted);font-weight:700;font-size:9px}
.empty-panel{margin-top:16px;padding:26px 14px;text-align:center;color:var(--muted);font-size:11.5px;line-height:1.7;background:var(--lav);border-radius:var(--radius-sm)}
.dark .empty-panel{background:var(--lav2)}

/* ---------------------------------- MODAL ---------------------------------- */
.modal-overlay[hidden]{display:none}
.modal-overlay{position:fixed;inset:0;background:rgba(10,8,20,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .25s var(--ease-soft)}
.modal-panel{background:var(--surface);border-radius:var(--radius-lg);padding:24px;width:min(620px,92vw);box-shadow:var(--elev-2);border:1px solid var(--border);animation:popIn .3s var(--ease-soft)}
.dark .modal-panel{box-shadow:var(--elev-2-dark)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.modal-head h3{font-size:15px;margin:0}
.modal-close{border:0;background:var(--lav);width:30px;height:30px;border-radius:50%;cursor:pointer;color:var(--muted);font-size:13px;transition:background .2s,color .2s}
.modal-close:hover{background:var(--purple);color:#fff}
.modal-table{border-top:1px solid var(--border)}
.modal-row{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:10px;padding:11px 4px;border-bottom:1px solid var(--border);font-size:11px}
.modal-head-row{font-size:9px;font-weight:800;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.modal-footnote{margin:12px 2px 0;font-size:9px;color:var(--muted)}

/* ---------------------------------- HPM METRIC TOGGLE ---------------------------------- */
.hpm-metric-toggle{display:flex;gap:3px;background:var(--lav);padding:3px;border-radius:9px}
.hpm-metric-toggle button{border:0;background:transparent;padding:7px 11px;font-size:9px;font-weight:800;border-radius:6px;color:var(--muted);cursor:pointer;transition:background .25s,color .25s}
.hpm-metric-toggle button.active{background:linear-gradient(90deg,var(--purple),var(--purple2));color:#fff;animation:glowPulseSoft 2.8s ease-in-out infinite}
.hpm-list>div.hpm-empty{display:block;grid-column:1/-1;font-size:11px;color:var(--muted);line-height:1.7;padding:24px 12px;text-align:center}

/* ---------------------------------- ORDER STATUS (formerly Data Confidence) ---------------------------------- */
.score-ring.empty{background:conic-gradient(var(--lav2) 0 100%)!important}
.ring-empty{font-size:20px;color:var(--muted)}

/* ---------------------------------- RESPONSIVE ---------------------------------- */
@media(max-width:980px){
  .app-shell{--side:74px}
  .side-brand-text,.menu-label,.sidebar nav a span:not(.nav-icon),.user-card>div:nth-child(2),.role-badge,.user-actions{display:none}
  .nav-group{border-left:0;padding-left:0}
  .sidebar nav{gap:6px}
  .sidebar nav a{justify-content:center;padding:0}
  .side-brand{justify-content:center}
  .user-card{grid-template-columns:1fr;justify-items:center;padding-top:12px}
  .hero-cards{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .dashboard-grid,.detail-grid{grid-template-columns:1fr}
  .date-range-panel{min-width:0;width:min(560px,90vw)}
}
@media(max-width:680px){
  .app-shell{display:block}
  .sidebar{height:auto;position:sticky;width:100%;padding:10px 12px;border-right:0;border-bottom:1px solid var(--border);z-index:30}
  .side-brand{padding-bottom:0;border-bottom:0;margin-bottom:0}
  .sidebar nav{display:flex;overflow-x:auto;gap:4px;margin-top:10px;padding-bottom:2px}
  .nav-group{display:contents}
  .sidebar nav a{flex:none;width:44px;height:44px;justify-content:center;padding:0;border-left:0}
  .user-card{display:none}
  .dashboard-main{padding:16px 12px 26px}
  .dash-header{align-items:flex-start;flex-direction:column}
  .header-controls{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .hero-cards{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .big-metric{flex-direction:column;align-items:flex-start;text-align:left}
  .dashboard-grid,.detail-grid{grid-template-columns:1fr}
  .sales-chart{min-height:250px}
  .date-range-panel{position:fixed;left:12px;right:12px;top:auto;width:auto;flex-direction:column}
  .dr-quick{width:auto;border-right:0;border-bottom:1px solid var(--border)}
  .dr-calendar{width:auto}
  .channel-row{grid-template-columns:70px 1fr 78px}
  .modal-row{grid-template-columns:1fr 1fr;row-gap:4px}
  .modal-row span:nth-child(1){grid-column:1/-1;font-weight:800}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .glow,.glow-one,.glow-two,.grain-orb,.date-chip::before,.overline::before,.confidence-list i.live,.hero-card::after{animation:none!important}
}