:root{
  --db-navy:#041a42;--db-navy2:#062b66;--db-blue:#116bf4;--db-cyan:#13b7d5;
  --db-bg:#f7f9fd;--db-card:#fff;--db-text:#0b2344;--db-muted:#71849a;--db-line:#e1e8f0;
  --db-green:#10b96c;--db-shadow:0 7px 22px rgba(19,48,76,.065)
}
body{background:var(--db-bg)!important;color:var(--db-text)!important;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif!important;-webkit-font-smoothing:antialiased}
#app{grid-template-columns:228px minmax(0,1fr)!important;background:var(--db-bg)}
.sidebar{background:linear-gradient(180deg,#031738 0%,#05285f 100%)!important;border:0!important;color:#fff!important;padding:18px 14px!important;box-shadow:12px 0 28px rgba(5,25,59,.08)}
.sidebar-brand{padding:2px 6px 19px!important;margin-bottom:15px!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
.sidebar-brand .brand-logo-img{width:48px!important;height:48px!important}
.sidebar .brand strong{color:#fff!important;font-size:19px!important;font-weight:800!important}.sidebar .brand span{color:#c4d3e5!important;font-size:8px!important;opacity:1!important}
.side-nav{gap:6px!important}.sidebar .nav-link,.sidebar a.nav-link{color:#d5dfef!important;min-height:48px!important;border-radius:12px!important;padding:0 13px!important;font-size:11px!important;font-weight:650!important;gap:12px!important}
.sidebar .nav-link:hover,.sidebar a.nav-link:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}.sidebar .nav-link.active,.sidebar a.nav-link.active{background:linear-gradient(90deg,#075fde 0%,#147bf9 100%)!important;color:#fff!important;box-shadow:0 11px 24px rgba(15,103,235,.26)!important}
.sidebar .nav-simple-icon{width:19px!important;height:19px!important;min-width:19px!important}.sidebar .nav-simple-icon svg{width:18px!important;height:18px!important;stroke-width:1.75!important}
.sidebar-user{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:13px!important;padding:9px!important}.sidebar-profile-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#0d68e7,#16b7d2);color:#fff;font-size:12px;font-weight:850}.sidebar-profile-avatar img{width:100%;height:100%;object-fit:cover}.sidebar-profile-name{text-decoration:none!important;display:grid}.sidebar-profile-name strong{color:#fff!important;font-size:10px!important}.sidebar-profile-name span{color:#b9cae0!important;font-size:7px!important;margin-top:2px}.sidebar-user>a:last-child{color:#cbd8e9!important}
.main{padding:0 24px 34px!important;background:var(--db-bg)!important}.blue-topbar{height:70px!important;min-height:70px!important;background:#fff!important;margin:0 -24px!important;padding:10px 24px!important;border-bottom:1px solid #e3eaf1!important;box-shadow:0 3px 12px rgba(18,50,80,.035)!important;position:sticky!important;top:0!important;z-index:30!important}.blue-topbar .topbar-left{flex:1}.global-search-ui{width:min(500px,55vw);height:42px;border:1px solid #dce5ed;border-radius:10px;display:flex;align-items:center;gap:9px;padding:0 12px;background:#fff;color:#365b7a}.global-search-ui input{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;font-size:10px!important;color:#1a3c59!important}.live-system{height:43px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid #dfe8ef;border-radius:10px;background:#fff}.live-system>i{width:9px;height:9px;border-radius:50%;background:#14bd72;box-shadow:0 0 0 5px #e5f8ef}.live-system>span{display:grid}.live-system small{font-size:6px;color:#697d91}.live-system b{font-size:7px;color:#0eaa65;margin-top:1px}.blue-date{height:43px!important;border-radius:10px!important;padding:0 9px!important;display:flex!important;gap:6px!important}.blue-date>span{font-size:13px!important;color:#175fc5!important}.blue-date input{width:116px!important;font-size:8px!important;color:#1a3550!important;padding:0!important}.profile-top-link{height:43px;min-width:150px;border:1px solid #dfe8ef;border-radius:10px;background:#fff;display:flex;align-items:center;gap:8px;padding:4px 9px;text-decoration:none!important}.profile-top-link img,.profile-top-initial{width:32px;height:32px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#173f78;color:#fff;font-size:9px;font-weight:800}.profile-top-copy{display:grid}.profile-top-copy b{font-size:8px;color:#0c2847}.profile-top-copy small{font-size:6px;color:#71849a;margin-top:1px}.dashboard-page-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:19px 4px 11px}.dashboard-page-heading small{font-size:6px;font-weight:800;letter-spacing:.12em;color:#6f8397}.dashboard-page-heading h1{font-size:21px;margin:3px 0 0;letter-spacing:-.025em;color:#0a2343}
.hero-card{background:transparent!important;border:0!important;box-shadow:none!important;min-height:0!important;margin:0!important;padding:0 4px 15px!important;border-radius:0!important;color:var(--db-text)!important}.hero-card .overline{display:none!important}.hero-card h2{font-size:25px!important;margin:0 0 6px!important;color:#0a2343!important;letter-spacing:-.035em!important}.hero-card p{color:#64798f!important;font-size:10px!important}.hero-card .btn.glass{background:#eef5ff!important;color:#1464cf!important;border:1px solid #dce8fa!important}.hero-card .btn.white{background:#0d6ff0!important;color:#fff!important}.hero-actions .btn{min-height:38px!important;padding:0 12px!important;font-size:8px!important;border-radius:9px!important}
.kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important;margin:0 0 16px!important;z-index:auto!important}.kpi{min-height:108px!important;border:1px solid var(--db-line)!important;background:#fff!important;color:var(--db-text)!important;border-radius:14px!important;padding:15px!important;box-shadow:var(--db-shadow)!important;position:relative;overflow:hidden}.kpi:first-child{background:#fff!important;color:var(--db-text)!important;border-color:var(--db-line)!important}.kpi:before{content:"";position:absolute;right:-21px;bottom:-25px;width:74px;height:74px;border-radius:50%;background:#eef5ff}.kpi small,.kpi:first-child small{font-size:7px!important;color:#6c8095!important}.kpi strong{font-size:17px!important;margin:8px 0 6px!important;color:#0b2848!important;position:relative;z-index:1}.kpi-meta,.kpi:first-child .kpi-meta{font-size:7px!important;color:#708398!important;border-top:0!important;padding-top:0!important;position:relative;z-index:1}.card{border:1px solid var(--db-line)!important;border-radius:14px!important;box-shadow:var(--db-shadow)!important;padding:14px!important}.card-head{margin-bottom:11px!important}.card-head h3{font-size:13px!important;color:#0c2948!important}.card-subtitle{font-size:7px!important;color:#718399!important}.analytics-grid{gap:13px!important}.comparison-strip{gap:7px!important}.trend-period,.chip{font-size:7px!important}.dash-grid{grid-template-columns:1.55fr .72fr!important;gap:13px!important;margin-bottom:13px!important}.manager-cards{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important}.manager-card{border:1px solid #e1e9f0!important;border-radius:12px!important;padding:11px!important;background:#fff!important;box-shadow:0 4px 12px rgba(17,49,79,.04)!important}.manager-card-profile{display:flex;align-items:center;gap:8px;margin-bottom:9px}.manager-photo,.manager-photo-fallback{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 38px;border:2px solid #eef4fb}.manager-photo-fallback{display:grid;place-items:center;background:linear-gradient(145deg,#0d6ff0,#16b4d0);color:#fff;font-weight:800;font-size:10px}.manager-card-profile-copy{min-width:0;display:grid}.manager-card-profile-copy h4{font-size:9px!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.manager-card-profile-copy small{font-size:6px!important;color:#71849a!important;margin-top:2px}.manager-top .chip{padding:4px 6px!important;font-size:5.5px!important}.manager-total{font-size:15px!important;margin:8px 0!important;color:#0f64d9!important}.manager-breakdown{gap:5px!important}.manager-breakdown div{padding:6px!important;border-radius:7px!important;background:#f6f9fc!important}.manager-breakdown span{font-size:5px!important}.manager-breakdown strong{font-size:7px!important}.progress-track{height:5px!important;margin-top:7px!important}.ranking-card{margin-bottom:13px}.showroom-row{border-radius:10px!important;padding:9px!important;font-size:8px!important}.bottom-nav{border-color:#e2e9f0!important}.bottom-link.active{background:#eaf3ff!important;color:#0e69e5!important}
/* profile page helper classes reused in top avatars */
.profile-sheet{display:none!important}
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.manager-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:900px){#app{display:block!important}.sidebar{width:min(278px,86vw)!important;background:linear-gradient(180deg,#031738 0%,#05285f 100%)!important}.main{padding:0 12px 28px!important}.blue-topbar{margin:0 -12px!important;padding:8px 12px!important;height:auto!important;min-height:64px!important;flex-wrap:wrap!important;border-radius:0!important}.global-search-ui{width:auto;flex:1}.live-system{display:none}.profile-top-copy{display:none}.profile-top-link{min-width:0;padding:4px}.dashboard-page-heading{padding:14px 2px 9px}.hero-card{padding-left:2px!important;padding-right:2px!important}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.dash-grid{grid-template-columns:1fr!important}.manager-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}.bottom-link.active{background:#eaf3ff!important;color:#0e69e5!important}}
@media(max-width:620px){.global-search-ui{order:3;width:100%;flex-basis:100%;height:39px}.blue-date{display:none!important}.dashboard-page-heading h1{font-size:18px}.hero-card h2{font-size:21px!important}.kpi-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}.kpi{min-height:94px!important;padding:12px!important}.kpi strong{font-size:14px!important}.manager-cards{grid-template-columns:1fr!important}.analytics-grid{grid-template-columns:1fr!important}.card{padding:12px!important}}
@media(max-width:390px){.kpi-grid{grid-template-columns:1fr!important}}

/* v5.9.3 Sales Overview — clean line + hover/touch tooltip */
.trend-chart{overflow-x:auto;overflow-y:visible;padding-top:0;position:relative}
.trend-svg-wrap{position:relative;min-width:700px}
.trend-chart svg{display:block;width:100%;height:auto;overflow:visible}
.trend-point{cursor:pointer;outline:none}
.trend-dot{transition:r .14s ease,stroke-width .14s ease,filter .14s ease}
.trend-point:hover .trend-dot,.trend-point:focus .trend-dot,.trend-point.active .trend-dot{r:5.8;stroke-width:3.6;filter:drop-shadow(0 2px 5px rgba(124,58,237,.28))}
.trend-tooltip{position:absolute;z-index:12;transform:translate(-50%,calc(-100% - 12px));min-width:105px;padding:8px 10px;border-radius:9px;background:#0b2848;color:#fff;box-shadow:0 8px 22px rgba(11,40,72,.22);pointer-events:none;text-align:center;white-space:nowrap}
.trend-tooltip::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #0b2848}
.trend-tooltip.below{transform:translate(-50%,12px)}
.trend-tooltip.below::after{top:-5px;bottom:auto;border-top:0;border-bottom:5px solid #0b2848}
.trend-tooltip strong{display:block;font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:800;line-height:1.2}
.trend-tooltip span{display:block;margin-top:3px;font-size:8px;color:#c7d7e5;font-weight:600}
.trend-labels{margin-top:0}
@media(max-width:700px){.trend-svg-wrap{min-width:760px}.trend-tooltip{min-width:98px;padding:7px 9px}.trend-tooltip strong{font-size:10px}}


/* v5.9.4 Modern target comparison chart */
.trend-chart{overflow-x:auto;overflow-y:visible;position:relative;padding-top:0}
.trend-modern-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:11px 0 4px;padding:0 4px}
.trend-modern-head h4{margin:0;font-size:11px;color:#0b2848;font-weight:750;letter-spacing:-.015em}
.trend-modern-head span{display:block;margin-top:3px;font-size:6.5px;color:#75879a}
.trend-currency{border:1px solid #dce5ed;border-radius:7px;padding:5px 8px;background:#fff;color:#344f69;font-size:7px;font-weight:700}
.trend-svg-wrap{position:relative;min-width:760px;border:1px solid #e4eaf1;border-radius:11px;background:#fff;overflow:visible}
.trend-chart svg{display:block;width:100%;height:auto;overflow:visible}
.trend-grid-line{stroke:#dbe3eb;stroke-width:1;stroke-dasharray:4 5}
.trend-y-label,.trend-x-label,.trend-axis-title{fill:#61768a;font-family:'Inter',system-ui,sans-serif;font-size:8px;font-weight:550}
.trend-axis-title{font-size:8.5px;font-weight:700}
.trend-sales-line{fill:none;stroke:#4f46e5;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.trend-dot{fill:#fff;stroke:#4f46e5;stroke-width:2.6;transition:r .14s ease,stroke-width .14s ease,filter .14s ease}
.trend-point{cursor:pointer;outline:none}
.trend-point:hover .trend-dot,.trend-point:focus .trend-dot,.trend-point.active .trend-dot{r:6;stroke-width:3.4;filter:drop-shadow(0 2px 5px rgba(79,70,229,.25))}
.trend-target-line{stroke:#6d28d9;stroke-width:2;stroke-dasharray:7 6}
.trend-target-tag rect{fill:#6d28d9;filter:drop-shadow(0 2px 4px rgba(109,40,217,.15))}
.trend-target-tag text{fill:#fff;font-family:'Inter',system-ui,sans-serif;font-size:7px;font-weight:750}
.trend-hover-line{stroke:#aebbd0;stroke-width:1;stroke-dasharray:3 4}
.trend-tooltip{position:absolute;z-index:12;transform:translate(-50%,calc(-100% - 12px));min-width:145px;padding:10px 11px;border:1px solid #dde5ed;border-radius:9px;background:#fff;color:#0d2947;box-shadow:0 10px 25px rgba(12,41,70,.14);pointer-events:none;text-align:left;white-space:nowrap}
.trend-tooltip::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:#fff;border-right:1px solid #dde5ed;border-bottom:1px solid #dde5ed}
.trend-tooltip.below{transform:translate(-50%,12px)}
.trend-tooltip.below::after{top:-6px;bottom:auto;border:0;border-left:1px solid #dde5ed;border-top:1px solid #dde5ed}
.trend-tip-date{display:block!important;font-size:8px!important;color:#183954!important;font-weight:700!important;margin:0 0 7px!important}
.trend-tooltip>div{display:grid;grid-template-columns:8px 1fr auto;gap:6px;align-items:center}
.trend-tooltip>div i{width:7px;height:7px;border-radius:50%;background:#4f46e5}
.trend-tooltip>div span{font-size:7px;color:#60758a;font-weight:600;margin:0}
.trend-tooltip>div strong{font-size:9px;color:#0d2947;font-weight:800}
.trend-legend{display:flex;align-items:center;justify-content:center;gap:28px;padding:8px 0 2px;font-size:7px;color:#4a6076;font-weight:650}
.trend-legend span{display:flex;align-items:center;gap:7px}
.trend-legend i{display:inline-block;width:22px;height:3px;border-radius:999px}
.trend-legend i.actual{background:#4f46e5}.trend-legend i.target{height:0;border-top:2px dashed #6d28d9;border-radius:0}
@media(max-width:700px){.trend-svg-wrap{min-width:900px}.trend-modern-head{position:sticky;left:0}.trend-tooltip{min-width:135px}.trend-legend{justify-content:flex-start;padding-left:10px}}
