/* =====================================================================
   DGT — Riho-style light admin theme (loaded AFTER app.css)
   Visual language: DGT brand palette, grouped navigation, white cards,
   subtle shadows, Roboto UI typography and Montserrat display headings.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Roboto:wght@400;500;600;700;800&display=swap');

:root{
  --primary:#0a355e;--primary-d:#082a4a;--primary-l:#0a355e14;--primary-m:#0a355e26;
  --secondary:#e50000;--secondary-l:#e500001f;
  --success:#1B76AF;--warning:#C8C8C8;--danger:#E50000;--info:#1B76AF;
  --bg:#F5F6F9;--card:#fff;--ink:#0f2a44;--ink2:#4a5865;--muted:#86909C;--line:#ecf0f4;--line2:#e2e8ee;
  --shadow:0 0 20px rgba(8,21,66,.06);
  /* remap legacy tokens used by app.css */
  --s1:#fff;--s2:#fff;--s3:#f6f8fa;
  --navy:var(--primary-d);--blue:var(--primary);--sky:var(--primary);
  --red:var(--primary);--red2:var(--secondary);--grey:var(--ink2);
  --green:var(--success);--amber:var(--warning);--purple:var(--primary);--purple2:var(--primary-d);
}
*{font-family:'Roboto',Arial,sans-serif!important;scrollbar-color:#cdd6dc transparent}
::selection{background:var(--primary);color:#fff}
html,body{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-size:14px;font-feature-settings:normal;font-variant-numeric:normal}
body:before{display:none}

/* ---------- Sidebar ---------- */
.sidebar{margin:0;top:0;height:100vh;border-radius:0;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-right:1px solid var(--line);box-shadow:0 0 24px rgba(8,21,66,.05);padding:20px 16px}
@media(min-width:1151px){.sidebar{width:280px}}
.brand{color:var(--ink);font-weight:700;font-size:23px;letter-spacing:-.3px;padding:0 6px 18px}
.brand small{color:var(--muted);opacity:1;letter-spacing:1.6px;font-weight:500;font-size:8.5px}
.logo,.mark{border:0;border-radius:11px;background:linear-gradient(135deg,var(--primary),#1b76af);color:#fff;box-shadow:0 8px 18px -6px #0a355e88;font-weight:700}
.workspace{background:var(--bg);border:1px solid var(--line);border-radius:12px;backdrop-filter:none}
.ws-icon{background:var(--primary);border-radius:10px}
.workspace b{color:var(--ink);font-weight:600}.workspace small,.workspace>span{color:var(--muted)}
.nav-title,.nav-group{color:#66727f;font-weight:600;font-size:10.5px;letter-spacing:1.2px;padding:18px 12px 6px;text-transform:uppercase}
.nav-link{color:var(--ink2);border:0;border-radius:8px;padding:10px 12px;margin:1px 0}
.nav-link .ic{opacity:.75;color:var(--ink2)}
.nav-link span:nth-child(2){font-size:13px}
.nav-link em{background:var(--primary-l);color:var(--primary);font-weight:600}
.nav-link:hover{background:var(--primary-l);color:var(--primary)}
.nav-link:hover .ic{color:var(--primary);opacity:1}
.nav-link.active{background:var(--primary-l);color:var(--primary);border:0;box-shadow:none}
.nav-link.active .ic{color:var(--primary);opacity:1}
.nav-link.active span:nth-child(2){font-weight:600}
.nav-link.active:before{left:-16px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--primary);box-shadow:none}
.plan-box{background:linear-gradient(135deg,#0a355e12,#e5000014);border:1px solid var(--line);border-radius:14px;backdrop-filter:none}
.plan-row{color:var(--muted)}.plan-row b{color:var(--ink)}
.usage{background:#e4eef7}.usage i{background:linear-gradient(90deg,var(--primary),var(--secondary))}
.plan-box small{color:var(--muted)}
.link{background:var(--primary);color:#fff;box-shadow:0 8px 18px -8px #0a355eaa;border-radius:8px}
.link:hover{background:var(--primary-d);color:#fff}
.user{border-top-color:var(--line)}.user b{color:var(--ink);font-weight:600}.user small,.user>span{color:var(--muted)}
.avatar{background:linear-gradient(135deg,var(--primary),#1b76af);color:#fff;font-weight:600}

/* ---------- Top bar ---------- */
.topbar{margin:0;top:0;height:74px;border-radius:0;padding:0 30px;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(8,21,66,.04)}
.wl{display:flex;align-items:center;gap:10px;min-width:0}
.wl h6{margin:0;font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap}
.wl p{margin:1px 0 0;font-size:12px;color:var(--muted);white-space:nowrap}
.wl .wave{font-size:22px;line-height:1}
.gs{background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--muted);margin-left:26px}
.gs:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-l);background:#fff}
.gs input{color:var(--ink)}.gs input::placeholder{color:#9aa6b2}
.gs kbd{border-color:var(--line2);color:var(--muted);background:#fff}
.live{background:#1B76AF18;border-color:transparent;color:#1B76AF;font-weight:600;letter-spacing:.5px}
.live i{background:var(--success);box-shadow:0 0 0 3px #1B76AF30}
.bell{width:38px;height:38px;border-radius:50%;background:var(--bg);color:var(--ink2);display:grid;place-items:center;font-size:17px}
.bell:hover{background:var(--primary-l);color:var(--primary)}
.bell i{background:var(--danger);box-shadow:0 0 0 2px #fff;right:6px;top:7px}
.mobile-menu{color:var(--ink2)}
.me{display:flex;align-items:center;gap:10px;padding-left:14px;margin-left:2px;border-left:1px solid var(--line)}
.me b{display:block;font-size:13px;font-weight:600;color:var(--ink);line-height:1.2}.me small{display:block;font-size:11px;color:var(--muted)}
.crumb{display:flex;align-items:center;gap:0;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.crumb span{margin:0 8px;color:#8d98a5}.crumb b{color:var(--primary);font-weight:500}
.crumb:before{content:"⌂";margin-right:8px;color:var(--primary)}

/* ---------- Page heading ---------- */
.content{padding:26px 30px}
.eyebrow{display:none}
h1{background:none;-webkit-text-fill-color:currentColor;color:var(--ink);font-weight:600;font-size:26px;letter-spacing:-.3px;margin:2px 0 6px}
.heading h1 span{display:none}
.heading p{color:var(--muted);font-size:13.5px}

/* ---------- Buttons ---------- */
.btn,.btn.outline{background:#fff;border:1px solid var(--line2);color:var(--ink2);border-radius:8px;box-shadow:none;backdrop-filter:none;font-weight:500;font-size:13px;padding:10px 16px}
.btn:hover,.btn.outline:hover{background:var(--primary-l);border-color:var(--primary-m);color:var(--primary);transform:none}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 8px 18px -8px #0a355ebb}
.btn.primary:hover{background:var(--primary-d);border-color:var(--primary-d);color:#fff;box-shadow:0 10px 22px -8px #0a355ecc}
.btn.primary:after{display:none}

/* ---------- Cards / panels / stats ---------- */
.card,.panel,.visual-showcase,.stat{background:var(--card);border:0;border-radius:15px;box-shadow:var(--shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
.stat{padding:20px;transition:box-shadow .2s,transform .2s}
.stat:before,.stat:after,.stat:nth-child(3n+2):after,.stat:nth-child(3n):after{display:none}
.stat:hover{transform:translateY(-2px);border:0;box-shadow:0 10px 30px rgba(10,53,94,.14)}
.stat-top{color:var(--muted);font-size:13px}
.stat-icon,.ops-icon,.quick .stat-icon{width:42px;height:42px;border-radius:50%;background:var(--primary-l);border:0;box-shadow:none;color:var(--primary);font-size:17px}
.stat:nth-child(4n+2) .stat-icon{background:var(--secondary-l);color:#d4472b}
.stat:nth-child(4n+3) .stat-icon{background:#16c7f91f;color:#0888aa}
.stat:nth-child(4n) .stat-icon{background:#FFAE1A1f;color:#a86f00}
.stat strong{background:none;-webkit-text-fill-color:currentColor;color:var(--ink);font-weight:600;font-size:28px;letter-spacing:-.4px}
.stat small{color:var(--muted)}.up{color:#00AC46;font-weight:600}
.card-head{background:none;border-bottom:1px solid var(--line);padding:18px 22px}
.card-head h3,.panel h3,.ph h3{color:var(--ink);font-weight:600;font-size:17px;letter-spacing:0}
.card-head p,.panel>p{color:var(--muted)}
.section-head h2{color:var(--ink);font-weight:600;font-size:19px}.section-head p{color:var(--muted)}
.dgt-an .panel{padding:20px 22px}
.chip{background:var(--bg);border:1px solid var(--line);color:var(--ink2);border-radius:6px;font-weight:500}
.chip.al{background:#dc35451a;border-color:transparent;color:var(--danger)}
.demo-tag{background:var(--primary-l);border:0;color:var(--primary);font-weight:600;letter-spacing:.6px}

/* ---------- Tables ---------- */
thead{background:none}
th{background:#f6f8fa;color:var(--ink);font-weight:600;font-size:12.5px;letter-spacing:0;opacity:1;border-radius:0}
th:first-child{border-radius:8px 0 0 8px}th:last-child{border-radius:0 8px 8px 0}
td{border-top:1px solid var(--line);color:var(--ink2);font-size:13px}
td strong,td b{color:var(--ink);font-weight:500}
tbody tr:hover{background:#f9fbfd}tbody tr:hover td:first-child{box-shadow:inset 3px 0 var(--primary)}
.entity-icon{background:linear-gradient(135deg,var(--primary),#1b76af);color:#fff;border-radius:50%;font-weight:600}
.entity small{color:var(--muted)}
.pill{box-shadow:none;font-weight:600}
.pill.active,.pill.completed,.pill.confirmed,.pill.paid,.pill.delivered{background:#00AC461f;color:#00AC46}
.pending{background:#FFAE1A1f;color:#c98000}
.inactive{background:#86909C1f;color:#667380}
.rejected{background:#dc35451a;color:var(--danger)}
.act{background:#fff;border-color:var(--line2);color:var(--ink2);border-radius:6px}
.act:hover{background:var(--primary-l);border-color:var(--primary-m);color:var(--primary)}
.act.del:hover{background:#dc35451a;border-color:#dc354544;color:var(--danger)}
.table-footer{border-top-color:var(--line);color:var(--muted)}
.pg{background:#fff;border-color:var(--line2);color:var(--ink2);border-radius:6px}
.pg:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.pg.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:none;border-radius:6px}

/* ---------- Form controls ---------- */
.search,.select,.field input,.field select,.field textarea{background:#fff;border:1px solid var(--line2);color:var(--ink);border-radius:8px;box-shadow:none}
.search{color:var(--muted)}.search input{color:var(--ink)}.search input::placeholder{color:#9aa6b2}
.search:focus-within,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-l)}
.select option,.field select option{background:#fff;color:var(--ink)}
.field label{color:var(--ink2);font-weight:500;font-size:12.5px}
:focus-visible{outline-color:var(--primary)}

/* ---------- Modal / toast ---------- */
.modal-back{background:#1b26334d;backdrop-filter:blur(3px)}
.modal{background:#fff;backdrop-filter:none;border:0;border-top:3px solid var(--primary);border-radius:14px;box-shadow:0 30px 80px rgba(8,21,66,.25)}
.modal-head,.modal-foot{border-color:var(--line)}.modal-head h2{color:var(--ink);font-weight:600}.modal-head p{color:var(--muted)}
.close{background:var(--bg);color:var(--ink2)}.close:hover{background:var(--primary);color:#fff}
.toast{background:var(--ink);border:0;color:#fff;border-radius:8px;box-shadow:0 14px 40px rgba(0,0,0,.25)}

/* ---------- Content blocks ---------- */
.quick,.venue-card,.visual-card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:none;backdrop-filter:none}
.quick:hover,.venue-card:hover,.visual-card:hover{border-color:var(--primary-m);background:#fbfdff;box-shadow:0 12px 28px -12px rgba(10,53,94,.3)}
.quick b,.venue-detail h4,.visual-card h3,.visual-card b,.venue-meta b{color:var(--ink);font-weight:600}
.quick small,.venue-detail p,.visual-card p,.muted{color:var(--muted)}
.venue-meta{border-top-color:var(--line)}
.visual-type{color:var(--secondary)}
.showcase-head h2{color:var(--ink);font-weight:600}.showcase-head p{color:var(--muted)}.showcase-kicker{color:var(--primary)}
.visual-card img{background:#eef2f1}
.bar{background:#edf1f0;box-shadow:none}.bar i{box-shadow:none}
.funnel-row{color:var(--ink2)}.funnel-row strong{color:var(--ink);font-weight:600}
.funnel-row:nth-child(5n+1) .bar i,.bar i{background:linear-gradient(90deg,#082a4a,var(--primary))}
.funnel-row:nth-child(5n+2) .bar i{background:linear-gradient(90deg,#b80000,var(--secondary))}
.funnel-row:nth-child(5n+3) .bar i,.bar.green i{background:linear-gradient(90deg,#3f9a36,var(--success))}
.funnel-row:nth-child(5n+4) .bar i,.bar.amber i{background:linear-gradient(90deg,#e09200,var(--warning))}
.funnel-row:nth-child(5n) .bar i{background:linear-gradient(90deg,#0aa5cf,var(--info))}
.notice{background:var(--primary-l);border:0;border-left:3px solid var(--secondary);color:var(--ink2);backdrop-filter:none;border-radius:8px}
.empty{color:var(--muted)}
.commerce-hero{background:radial-gradient(420px 220px at 100% 0,#1b76af,transparent 70%),linear-gradient(115deg,#082a4a,var(--primary))}
.commerce-hero:after{border-color:#e50000cc;border-left-color:transparent;border-bottom-color:transparent;box-shadow:0 0 0 24px #ffffff10}
.mini-label{color:#c8dcef}.commerce-hero p{color:#d8e6f4}
.commerce-hero .btn.primary{background:var(--secondary);border-color:var(--secondary);box-shadow:0 8px 20px #0004}.commerce-hero .btn.primary:hover{background:#b80000;border-color:#b80000}
.gift-art:before,.gift-art:after{background:var(--primary)}.gift-art i{border-color:var(--primary)}
.ops-row{border-bottom-color:var(--line)}.ops-row b{color:var(--ink);font-weight:500}.ops-row small{color:var(--muted)}.ops-row button{color:var(--primary);font-weight:600}
.ops-icon.green{background:#00AC461f;color:#008a38}.ops-icon.amber{background:#FFAE1A1f;color:#a86f00}.ops-icon.blue{background:#16c7f91f;color:#0888aa}
.ops-foot{color:var(--muted)}.live-dot{background:var(--success);box-shadow:0 0 0 4px #00AC4626}
footer,.footer{color:var(--muted)}footer span,.footer span{color:#66727f}

/* ---------- Analytics widgets ---------- */
.bn{color:var(--ink);font-weight:600}
.sp{filter:none}
.lg{color:var(--muted)}.lg.v b{color:var(--ink);font-weight:600}
.cb b{box-shadow:0 0 0 2px #fff,0 4px 10px -2px rgba(8,21,66,.25);font-weight:600}
.cb i{box-shadow:none}.cb small{color:var(--muted)}
.dn svg{filter:none}
.lc .ln{filter:none}
.dgt-an td .bar{width:100px}
.tg i{background:#dfe5ea}.tg input:checked+i{background:var(--primary)}
.hd .ok{background:var(--success)}.hd .wn{background:var(--warning)}

/* ---------- Responsive ---------- */
@media(max-width:850px){.wl p{display:none}.me div{display:none}.me{padding-left:8px}}
@media(max-width:600px){.sidebar{background:#fff;border-radius:0;box-shadow:15px 0 40px rgba(8,21,66,.18)}.topbar{margin:0;border-radius:0;padding:0 14px}.wl h6{font-size:15px}.live{display:none}.content{padding:18px 14px}.gs{display:none}}

/* =====================================================================
   RIHO EXACT-LOOK LAYER (dashboard-03 "Project" style)
   Real Riho tokens: teal #0a355e, coral #e50000, heading #0f2a44,
   body #86909C, page bg #F5F6F9, cards radius 15px, Outfit font
   ===================================================================== */
:root{--r-head:#0f2a44;--r-body:#86909C;--r-bg:#F5F6F9;--r-border:#E6E9EB;--r-shadow:0 0 20px rgba(8,21,66,.06)}
body{background:var(--r-bg);color:var(--r-body)}
/* sidebar */
.sidebar{width:290px;box-shadow:0 0 20px rgba(8,21,66,.06);border-right:0}
@media(min-width:1151px){.sidebar{width:290px}}
.nav-group,.nav-title{color:var(--r-head);font-size:11px;font-weight:600;letter-spacing:.8px;position:relative;padding:20px 14px 8px}
.nav-group:after,.nav-title:after{content:"";display:block;width:22px;height:2px;border-radius:2px;background:var(--secondary);margin-top:6px;opacity:.9}
.nav-link{border-radius:6px;padding:10px 14px;color:#4a5865;font-weight:400}
.nav-link.active{background:#0a355e12;color:var(--primary);font-weight:500;position:relative}
.nav-link.active:before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--primary)}
.nav-link.active .ic{color:var(--primary);opacity:1}
/* header */
.topbar{height:76px;box-shadow:0 0 20px rgba(8,21,66,.06);border-bottom:0}
.wl h6{color:var(--r-head);font-size:18px;font-weight:600}
.wl p{color:var(--r-body)}
.gs{border-radius:30px;background:var(--r-bg);border:0;padding-left:16px}
.live{display:none}
.bell{background:var(--r-bg);width:40px;height:40px}
.me b{color:var(--r-head)}
/* page title + breadcrumb (right aligned like Riho) */
.heading{align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.heading>div:first-child{display:flex;flex-direction:column}
h1{font-size:22px;font-weight:600;color:var(--r-head);margin:0}
.heading p{display:none}
.heading>.crumb{order:2;margin:0 0 0 auto}
.head-actions{order:3;width:100%;display:none}
.crumb:before{content:"";display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}
.crumb span{color:var(--r-body);margin:0 6px}
.crumb b{color:var(--r-body);font-weight:400}
/* buttons */
.btn,.btn.outline{border-radius:6px;border-color:var(--r-border)}
.btn.primary{background:var(--primary);border-color:var(--primary);box-shadow:none}
.btn.primary:hover{background:var(--primary-d);border-color:var(--primary-d);box-shadow:none}
/* stat cards: Riho project counters */
.stats{gap:20px}
.stat{padding:22px 22px 0;overflow:hidden;box-shadow:var(--r-shadow);border-radius:15px;position:relative}
.stat-top{font-size:14px;color:var(--r-body);justify-content:space-between;gap:10px;align-items:center}
.stat-top>span:first-child{color:var(--r-head);font-weight:500}
.stat-icon{border-radius:10px;width:44px;height:44px;background:#0a355e15;color:var(--primary)}
.stat:nth-child(4n+2) .stat-icon{background:#e5000018;color:var(--secondary)}
.stat:nth-child(4n+3) .stat-icon{background:#00AC4618;color:#00AC46}
.stat:nth-child(4n) .stat-icon{background:#FFAE1A1c;color:#e59a00}
.stat strong{font-size:26px;color:var(--r-head);font-weight:600;margin-top:12px;display:block}
.stat small{color:var(--r-body);display:block;padding-bottom:6px}
.stat .up{color:#00AC46}
.stat .rbars{display:flex;align-items:flex-end;gap:5px;height:42px;margin:6px -4px 0;padding-bottom:0}
.stat .rbars i{flex:1;border-radius:3px 3px 0 0;background:var(--primary);opacity:.18}
.stat:nth-child(4n+2) .rbars i{background:var(--secondary)}
.stat:nth-child(4n+3) .rbars i{background:#00AC46}
.stat:nth-child(4n) .rbars i{background:#FFAE1A}
.stat .rbars i:nth-child(n+7){opacity:.85}
/* cards */
.card,.panel,.visual-showcase,.stat{box-shadow:var(--r-shadow)}
.card-head h3,.panel h3,.ph h3{font-size:18px;color:var(--r-head)}
.chip{border-radius:4px;background:var(--r-bg);border-color:transparent}
/* tables + badges like Riho */
th{background:var(--r-bg);color:var(--r-head);font-weight:500;text-transform:none;font-size:13px}
td{border-top:1px dashed var(--r-border);color:var(--r-body)}
tbody tr:hover{background:#0a355e06}
tbody tr:hover td:first-child{box-shadow:none}
.pill{border-radius:4px;padding:4px 9px;font-weight:500;font-size:12px}
.pill.active,.pill.completed,.pill.confirmed,.pill.paid,.pill.delivered{background:#00AC4626;color:#00AC46}
.pending{background:#FFAE1A1f;color:#e59a00}
.rejected{background:#e5000030;color:#e50000}
.entity-icon,.avatar{background:linear-gradient(135deg,#0a355e,#1b76af)}
.pg.active{background:var(--primary)}
.act:hover{background:#0a355e12;color:var(--primary)}
footer,.footer{background:#fff;margin:24px -30px -26px;padding:18px 30px;box-shadow:0 0 20px rgba(8,21,66,.06);color:var(--r-body)}
.commerce-hero{background:linear-gradient(115deg,#082a4a,#0a355e)}
.commerce-hero .btn.primary{background:var(--secondary);border-color:var(--secondary)}
.k-row .panel{border-top:0}

.stats{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))!important}
.stat-top>span:first-child{white-space:normal;line-height:1.25}
.me div{white-space:nowrap}

/* =====================================================================
   PREMIUM COLORED SIDEBAR
   ===================================================================== */
.sidebar{background:radial-gradient(420px 300px at 0% 0%,#1b76af55,transparent 70%),radial-gradient(360px 280px at 100% 100%,#e5000026,transparent 70%),linear-gradient(180deg,#0a355e 0%,#093058 55%,#082a4a 100%);border-right:0;box-shadow:8px 0 40px rgba(8,42,74,.28);color:#d3e3f0}
.sidebar:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 2px,transparent 2px 14px)}
.sidebar>*{position:relative}
.brand{color:#fff}
.brand small{color:#8fb3d1;opacity:1}
.logo,.mark{background:linear-gradient(135deg,#e50000,#ff4040);color:#fff;box-shadow:0 10px 22px -6px #e5000099}
.workspace{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ws-icon{background:linear-gradient(135deg,#e50000,#ff4040)}
.workspace b{color:#fff}.workspace small,.workspace>span{color:#b4cde2}
.nav-title,.nav-group{color:#8fb3d1;opacity:1}
.nav-group:after,.nav-title:after{background:#e50000}
.nav-link{color:#d3e3f0;border-radius:10px;transition:all .2s}
.nav-link .ic{color:#8fb3d1;opacity:1}
.nav-link:hover{background:rgba(255,255,255,.09);color:#fff;transform:translateX(3px)}
.nav-link:hover .ic{color:#fff}
.nav-link.active{background:linear-gradient(90deg,rgba(229,0,0,.95),rgba(255,64,64,.85));color:#fff;font-weight:500;box-shadow:0 10px 22px -10px #e50000}
.nav-link.active .ic{color:#fff}
.nav-link.active:before{display:none}
.nav-link em{background:rgba(255,255,255,.14);color:#fff}
.nav-link.active em{background:rgba(255,255,255,.28)}
.sidebar-bottom{background:none}
.plan-box{background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.plan-row,.plan-box small{color:#b4cde2}.plan-row b{color:#fff}
.usage{background:rgba(255,255,255,.14)}.usage i{background:linear-gradient(90deg,#e50000,#ffc36b)}
.link{background:#e50000;box-shadow:0 8px 18px -8px #e50000}.link:hover{background:#b80000}
.user{border-top-color:rgba(255,255,255,.14)}.user b{color:#fff}.user small,.user>span{color:#b4cde2}
.sidebar .avatar{background:linear-gradient(135deg,#e50000,#ff4040);box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:6px}
.sidebar{scrollbar-color:rgba(255,255,255,.25) transparent}
@media(max-width:600px){.sidebar{background:linear-gradient(180deg,#0a355e,#082a4a)}}


/* =====================================================================
   DGT BRAND LOGO (Dixit Global Tech) — navy sidebar uses the white logo
   ===================================================================== */
.brand{flex-direction:column;align-items:flex-start;gap:6px;padding:0 8px 22px}
.brand .brand-logo{height:50px;width:auto;max-width:100%;display:block}
.brand .brand-sub{display:block;font:700 8px Roboto,Arial,sans-serif!important;letter-spacing:1.45px;color:#8fb3d1;margin:0;opacity:1}
@media(max-width:850px){.brand{align-items:center;padding:0 0 22px}.brand .brand-logo{height:auto;width:52px}}
@media(max-width:600px){.sidebar.open .brand{align-items:flex-start;padding:0 8px 22px}.sidebar.open .brand .brand-logo{height:50px;width:auto}.sidebar.open .brand-sub-wrap{display:block}}


/* ===== DGT Brand Book compliance overrides (2026-10) =====
   Official palette: Navy #0A355E, Blue #1B76AF, Red #E50000,
   Black #000000, Cool Grey #C8C8C8, White #FFFFFF.
   Typography: Roboto primary; Montserrat display/headings.
*/

:root{
  --primary:#0A355E; --primary-d:#062744; --primary-l:#1B76AF18; --primary-m:#1B76AF30;
  --secondary:#E50000; --secondary-l:#E5000018;
  --info:#1B76AF; --bg:#F5F6F9; --card:#FFFFFF; --ink:#111111; --ink2:#354657;
  --muted:#687786; --line:#E5E9ED; --line2:#C8C8C8; --blue:#1B76AF; --navy:#0A355E;
  --red:#E50000; --red2:#E50000; --sky:#1B76AF; --grey:#C8C8C8;
}
*,*::before,*::after{font-family:'Roboto',Arial,sans-serif!important}
body,button,input,select,textarea{font-family:'Roboto',Arial,sans-serif!important}
h1,h2,h3,h4,h5,h6,.heading h1,.heading h2,.heading h3,.brand,.nav-title,.nav-group,.eyebrow,.plan-row,.live,.btn,.btn.primary,.btn.outline,.stat-label,.section-title,.card-title,.modal-title{font-family:'Montserrat','Roboto',Arial,sans-serif!important}
.brand small,.brand .brand-sub,.crumb,.nav-link,.workspace,.user,.plan-box,.topbar,.content,table,th,td,label,p,small{font-family:'Roboto',Arial,sans-serif!important}
.btn.primary,.link{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}
.btn.primary:hover,.link:hover{background:#062744!important;border-color:#062744!important}
.nav-link.active,.nav-link:hover{background:#1B76AF18!important;color:#0A355E!important}
.nav-link.active:before{background:#E50000!important;box-shadow:none!important}
.nav-link.active .ic,.nav-link:hover .ic{color:#1B76AF!important}
.logo,.mark,.ws-icon{background:linear-gradient(135deg,#0A355E,#1B76AF)!important}
.avatar{background:linear-gradient(135deg,#0A355E,#1B76AF)!important}
:focus-visible{outline-color:#1B76AF!important}
::selection{background:#0A355E!important;color:#FFFFFF!important}
.brand-logo{max-width:100%;height:auto;object-fit:contain}
@media(max-width:600px){.brand .brand-logo{max-width:100%;object-fit:contain}}


/* Technical quality fixes: keyboard focus, mobile containment and motion preferences */
html{scroll-behavior:smooth}
body{min-width:0}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{max-width:100%}
:focus-visible{outline:3px solid #1B76AF!important;outline-offset:2px!important}
button:disabled,.pg:disabled{cursor:not-allowed;opacity:.5}
@media(max-width:600px){
  .topbar{padding:0 14px}
  .content{padding:18px 14px}
  footer,.footer{margin:20px -14px -18px;padding:16px 14px}
  .toolbar{flex-wrap:wrap;min-width:0}
  .toolbar>*{max-width:100%}
  .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap table{min-width:680px}
  .modal{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* FIX: keep sidebar navigation labels readable on the dark DGT sidebar.
   The brand override previously set active/hover labels to navy on navy. */
.sidebar .nav-link,
.sidebar .nav-link span,
.sidebar .nav-link em,
.sidebar .nav-link strong { color: #d8e6f2 !important; }
.sidebar .nav-link.active,
.sidebar .nav-link:hover,
.sidebar .nav-link.active span,
.sidebar .nav-link:hover span,
.sidebar .nav-link.active em,
.sidebar .nav-link:hover em { color: #ffffff !important; }
.sidebar .nav-link.active { background: rgba(27,118,175,.34) !important; }
.sidebar .nav-link:hover { background: rgba(27,118,175,.22) !important; }
.sidebar .nav-link .ic,
.sidebar .nav-link.active .ic,
.sidebar .nav-link:hover .ic { color: #b8d9f0 !important; }