/* OrderFlow SaaS — Classic Light Workspace Theme */
:root{
  --bg:#f5f7fb;
  --bg-soft:#f8faff;
  --panel:#ffffff;
  --panel-soft:#fbfcff;
  --sidebar:#ffffff;
  --line:#e7ebf2;
  --line-strong:#dce2ec;
  --text:#172033;
  --heading:#101828;
  --muted:#667085;
  --muted-light:#98a2b3;
  --primary:#3b5ccc;
  --primary-dark:#2f4db8;
  --primary-soft:#eef2ff;
  --success:#16a36a;
  --warning:#d99019;
  --danger:#d94b55;
  --purple:#7655d9;
  --cyan:#1595b6;
  --shadow-xs:0 1px 2px rgba(16,24,40,.03);
  --shadow-sm:0 4px 14px rgba(16,24,40,.045);
  --shadow:0 12px 32px rgba(16,24,40,.055);
  --shadow-lg:0 22px 60px rgba(16,24,40,.09);
  --radius-sm:9px;
  --radius:14px;
  --radius-lg:20px;
}

*{scrollbar-width:thin;scrollbar-color:#cfd6e2 transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:#cfd6e2;border-radius:99px}
*::-webkit-scrollbar-track{background:transparent}
html{font-size:15px;scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 82% -10%,rgba(59,92,204,.055),transparent 28%),
    var(--bg);
  color:var(--text);
  font-family:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  font-feature-settings:"ss01" 1,"cv01" 1;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,.metric-value,.status-metric strong{
  font-family:"Segoe UI Variable Display","Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif;
  color:var(--heading);
  letter-spacing:-.025em;
}
.ui-icon{display:block;fill:currentColor;flex:0 0 auto}

/* Shell */
.sidebar{
  width:272px;
  background:rgba(255,255,255,.97);
  color:var(--text);
  border-right:1px solid var(--line);
  padding:18px 14px 16px;
  box-shadow:6px 0 28px rgba(16,24,40,.025);
  backdrop-filter:blur(16px);
  transition:width .25s cubic-bezier(.4,0,.2,1),transform .25s ease;
}
.sidebar-head{display:flex;align-items:center;gap:8px;padding:0 2px 17px;border-bottom:1px solid #eef1f5}
.brand{min-width:0;flex:1;padding:0 5px;gap:11px}
.brand-mark{
  width:41px;height:41px;border-radius:13px;
  background:linear-gradient(145deg,#516fd6,#304fb9);
  box-shadow:0 8px 20px rgba(59,92,204,.24),inset 0 1px 0 rgba(255,255,255,.28);
  font-size:.82rem;letter-spacing:.02em;
}
.brand-copy{min-width:0}
.brand strong{color:var(--heading);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{color:#8a94a6;font-size:.72rem;margin-top:2px;letter-spacing:.015em}
.sidebar-collapse-btn{
  width:31px;height:31px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#7b879a;
  display:grid;place-items:center;cursor:pointer;transition:.18s;
}
.sidebar-collapse-btn:hover{color:var(--primary);background:var(--primary-soft);border-color:#d9e1ff}
.nav-list{display:block;overflow-y:auto;overflow-x:hidden;padding:12px 0 8px}
.nav-group{margin-bottom:10px}
.nav-group-label{
  padding:8px 12px 6px;color:#a0a8b8;font-size:.64rem;font-weight:800;letter-spacing:.095em;text-transform:uppercase;
  white-space:nowrap;transition:opacity .18s;
}
.nav-item{
  position:relative;min-height:43px;padding:10px 11px;margin:2px 0;border-radius:10px;
  color:#5e6a7d;font-weight:650;font-size:.87rem;gap:11px;
  transition:background .18s,color .18s,transform .18s,box-shadow .18s;
}
.nav-item::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:0 6px 6px 0;background:var(--primary);opacity:0;transform:scaleY(.3);transition:.18s}
.nav-item:hover{background:#f6f8fc;color:#263248;transform:translateX(2px)}
.nav-item.active{background:linear-gradient(90deg,#edf2ff,#f6f8ff);color:#2e50bc;box-shadow:inset 0 0 0 1px rgba(59,92,204,.075)}
.nav-item.active::before{opacity:1;transform:scaleY(1)}
.nav-icon{width:22px;height:22px;display:grid;place-items:center;color:#8a96a9;transition:.18s}
.nav-item.active .nav-icon,.nav-item:hover .nav-icon{color:var(--primary)}
.nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-card{
  margin-top:auto;background:linear-gradient(145deg,#f7f9ff,#f0f4ff);border:1px solid #dfe6fb;
  border-radius:15px;padding:14px;box-shadow:none;color:var(--text);transition:.2s;
}
.sidebar-card:hover{border-color:#cdd8fa;box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.sidebar-card-icon{width:31px;height:31px;background:#dfe7ff;color:#3153bf;border-radius:9px;margin-bottom:10px}
.sidebar-card strong{color:var(--heading);font-size:.84rem}
.sidebar-card p{color:#758197;font-size:.73rem;line-height:1.48;margin:5px 0 12px}
.sidebar-card .btn{box-shadow:none}
.sidebar-user{border-top:1px solid #eef1f5;margin-top:13px;padding:15px 7px 0;grid-template-columns:38px minmax(0,1fr) 31px}
.sidebar-user strong{color:var(--heading);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user small{color:#929bad;font-size:.69rem}
.avatar,.top-user-avatar{background:linear-gradient(145deg,#e9eeff,#dbe4ff);color:#3153bf;border:1px solid #d5dffb}
.logout-link{width:31px;height:31px;border-radius:9px;color:#8b96a7;display:grid;place-items:center;transition:.18s}
.logout-link:hover{background:#fff0f1;color:#c9404a}
.main-area{margin-left:272px;transition:margin-left .25s cubic-bezier(.4,0,.2,1)}
.topbar{
  height:74px;padding:0 26px;background:rgba(255,255,255,.88);border-bottom:1px solid rgba(225,230,238,.9);
  box-shadow:0 1px 0 rgba(16,24,40,.015);backdrop-filter:blur(18px) saturate(1.25);
}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.desktop-collapse{color:#738096;background:#fff}
.icon-btn{border-color:var(--line);box-shadow:var(--shadow-xs);transition:.18s}
.icon-btn:hover{border-color:#cad4e5;color:var(--primary);background:#f8faff}
.global-search{
  width:min(550px,46vw);height:42px;background:#f7f9fc;border:1px solid #e7ebf2;border-radius:11px;
  padding:0 11px;transition:.2s;box-shadow:inset 0 1px 2px rgba(16,24,40,.015);
}
.global-search:focus-within{background:#fff;border-color:#b8c6ef;box-shadow:0 0 0 4px rgba(59,92,204,.08)}
.global-search .search-icon{color:#8b96a8;display:grid;place-items:center}
.global-search input{font-size:.84rem;color:#344054}
.global-search input::placeholder{color:#9ca5b4}
.search-shortcut{width:22px;height:22px;border:1px solid #dfe4ec;border-radius:6px;display:grid;place-items:center;color:#98a2b3;background:#fff;font-size:.7rem}
.top-actions{gap:9px}
.workspace-date,.connection-pill{
  height:36px;display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:0 10px;
  font-size:.72rem;color:#667085;box-shadow:var(--shadow-xs)
}
.workspace-date{color:#59667a}
.connection-pill{border-radius:10px}
.connection-pill i{width:7px;height:7px;box-shadow:0 0 0 3px rgba(22,163,106,.1)}
.top-new-order{height:39px;padding:0 14px}
.top-user-avatar{width:37px;height:37px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:.78rem}
.content{padding:27px 30px 38px;max-width:1900px;width:100%;margin:0 auto}
.page-heading{margin-bottom:23px;align-items:flex-end}
.page-heading h1{font-size:1.72rem;font-weight:760;line-height:1.2;margin:3px 0 5px}
.page-heading p{font-size:.85rem;color:#7a8597}
.page-eyebrow,.section-kicker,.dashboard-kicker,.login-kicker{
  display:block;color:#536dcc;font-size:.66rem;line-height:1.2;font-weight:800;letter-spacing:.105em;text-transform:uppercase
}
.app-footer{padding:14px 30px 22px;color:#99a2b1;font-size:.68rem;display:flex;justify-content:center;gap:9px;border:0;background:transparent}
.app-footer span+span::before{content:"•";margin-right:9px;color:#c1c7d0}

/* Collapsed desktop navigation */
body.sidebar-collapsed .sidebar{width:82px}
body.sidebar-collapsed .main-area{margin-left:82px}
body.sidebar-collapsed .sidebar-head{justify-content:center}
body.sidebar-collapsed .brand{flex:0;padding:0}
body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .sidebar-collapse-btn,
body.sidebar-collapsed .nav-group-label,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .sidebar-card-copy,
body.sidebar-collapsed .sidebar-card .btn span,
body.sidebar-collapsed .sidebar-user-copy,
body.sidebar-collapsed .logout-link{display:none}
body.sidebar-collapsed .nav-item{justify-content:center;padding:10px}
body.sidebar-collapsed .nav-icon{width:23px}
body.sidebar-collapsed .sidebar-card{padding:10px;display:grid;place-items:center}
body.sidebar-collapsed .sidebar-card-icon{margin:0 0 8px}
body.sidebar-collapsed .sidebar-card .btn{width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:10px}
body.sidebar-collapsed .sidebar-user{grid-template-columns:38px;justify-content:center;padding-left:0;padding-right:0}

/* Global components */
.card{
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs);background:rgba(255,255,255,.98);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.card-header{padding:17px 19px;border-bottom:1px solid #edf0f5;min-height:61px}
.card-header h2,.card-header h3{font-size:.94rem;font-weight:740}
.card-body{padding:19px}
.btn{border-radius:9px;font-size:.8rem;font-weight:700;letter-spacing:-.005em;box-shadow:none;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(180deg,#4666d1,#3857c5);box-shadow:0 7px 15px rgba(59,92,204,.18),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{background:linear-gradient(180deg,#3d5eca,#304eb8);box-shadow:0 9px 19px rgba(59,92,204,.23)}
.btn-secondary{background:#f0f3f8;color:#435066;border:1px solid #e2e7ef}
.btn-secondary:hover{background:#e9eef5}
.btn-light{background:#fff;color:#475467;border:1px solid var(--line);box-shadow:var(--shadow-xs)}
.btn-light:hover{border-color:#cfd7e4;background:#fbfcff}
input,select,textarea{
  border-color:#dfe4ec;border-radius:9px;padding:10px 11px;background:#fff;color:#344054;font-size:.84rem;
  box-shadow:inset 0 1px 2px rgba(16,24,40,.018);transition:border-color .17s,box-shadow .17s,background .17s;
}
input:hover,select:hover,textarea:hover{border-color:#cfd6e2}
input:focus,select:focus,textarea:focus{border-color:#9db0e8;box-shadow:0 0 0 4px rgba(59,92,204,.08)}
label{font-size:.76rem;font-weight:700;color:#596579;gap:6px}
.table th{background:#fafbfc;color:#818b9c;font-size:.66rem;letter-spacing:.055em;padding:12px 15px}
.table td{padding:13px 15px;border-color:#eef1f5;font-size:.82rem}
.table tbody tr{transition:background .15s}
.table tbody tr:hover td{background:#fafcff}
.table strong{font-size:.84rem;color:#263248}
.badge,.type-badge{padding:5px 8px;font-size:.64rem;box-shadow:inset 0 0 0 1px rgba(16,24,40,.025)}
.alert{border-radius:11px;font-size:.81rem;box-shadow:var(--shadow-xs)}
.empty-state{color:#7f899a}
.empty-state h3{color:#3b4557}

/* Dashboard */
.dashboard-hero{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:142px;margin-bottom:18px;padding:25px 27px;border:1px solid #dfe5f5;border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at 85% 25%,rgba(255,255,255,.9) 0 4%,transparent 4.5%),
    linear-gradient(118deg,#f9faff 0%,#f1f5ff 58%,#edf3ff 100%);
  box-shadow:var(--shadow-sm);
  animation:fadeUp .45s ease both;
}
.dashboard-hero::after{content:"";position:absolute;right:-85px;top:-130px;width:310px;height:310px;border:46px solid rgba(72,102,207,.055);border-radius:50%}
.dashboard-hero-copy,.dashboard-hero-actions{position:relative;z-index:1}
.dashboard-hero h2{font-size:1.55rem;margin:7px 0 7px;font-weight:760}
.dashboard-hero p{margin:0;color:#69758a;font-size:.84rem}
.dashboard-hero p strong{color:#42506a}
.dashboard-hero-actions{display:flex;gap:9px;align-items:center}
.dashboard-filter-panel{margin-bottom:29px;overflow:hidden;animation:fadeUp .5s .03s ease both}
.dashboard-filter-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 13px;border-bottom:1px solid #eef1f5}
.dashboard-filter-head h3{font-size:.91rem;margin:4px 0 0}
.active-period-pill,.panel-period{
  display:inline-flex;align-items:center;min-height:29px;padding:0 10px;border-radius:999px;background:#f0f3ff;color:#3d5dc5;
  border:1px solid #dfe6ff;font-size:.68rem;font-weight:750
}
.dashboard-filter{padding:13px 17px 17px;margin:0;border:0;border-radius:0;box-shadow:none;background:#fff}
.filter-tabs{border:0;padding:0;margin:0 0 13px;gap:5px}
.filter-tab{padding:7px 11px;border:1px solid transparent;border-radius:8px;background:transparent;color:#788396;font-size:.73rem;font-weight:700}
.filter-tab:hover{background:#f5f7fb;color:#455268}
.filter-tab.active{background:#edf2ff;color:#3153bf;border-color:#dfe6ff;box-shadow:none}
.dashboard-filter-fields{grid-template-columns:repeat(6,minmax(128px,1fr)) auto;gap:10px;align-items:end}
.dashboard-filter-fields label{gap:5px}
.dashboard-filter-fields label>span{padding-left:1px;color:#7c8798;font-size:.67rem}
.dashboard-filter-actions{display:flex;gap:7px;align-items:center}
.dashboard-filter-actions .btn{height:38px}
.dashboard-section{margin:0 0 31px;animation:fadeUp .52s ease both}
.dashboard-section:nth-of-type(4){animation-delay:.04s}.dashboard-section:nth-of-type(5){animation-delay:.07s}.dashboard-section:nth-of-type(6){animation-delay:.1s}
.dashboard-section-last{margin-bottom:8px}
.section-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 2px 13px}
.section-heading-row h2{font-size:1.08rem;margin:4px 0 3px;font-weight:750}
.section-heading-row p{font-size:.76rem;color:#8791a2;margin:0;line-height:1.45}
.section-link{color:#526bc6;font-size:.73rem;font-weight:750;padding-bottom:2px}
.section-link:hover{color:#2e50bc}
.metric-grid.expanded{grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin-bottom:0}
.metric-card{position:relative;overflow:hidden;min-height:151px;padding:16px 16px 14px;box-shadow:var(--shadow-xs)}
.metric-card:hover{transform:translateY(-3px);border-color:#d6ddea;box-shadow:var(--shadow)}
.metric-card::after{content:"";position:absolute;right:-27px;top:-28px;width:91px;height:91px;border-radius:50%;background:var(--metric-soft,#eff3ff);opacity:.7}
.metric-top{position:relative;z-index:1;color:#69758a;font-size:.69rem;font-weight:750}
.metric-icon{width:32px;height:32px;border-radius:9px;background:var(--metric-soft,#eef2ff);color:var(--metric,#3b5ccc);font-size:.8rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.metric-value{position:relative;z-index:1;font-size:1.38rem;font-weight:760;margin:17px 0 5px;line-height:1.1}
.metric-foot{position:relative;z-index:1;font-size:.67rem;line-height:1.4;color:#929bad}
.metric-accent{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--metric,#3b5ccc);opacity:.78}
.tone-blue{--metric:#3b6dd8;--metric-soft:#edf3ff}.tone-indigo{--metric:#4d5fc7;--metric-soft:#eff1ff}.tone-green{--metric:#159c67;--metric-soft:#eaf8f2}.tone-amber{--metric:#d58a15;--metric-soft:#fff6e5}.tone-violet{--metric:#7655d9;--metric-soft:#f3efff}.tone-cyan{--metric:#128eae;--metric-soft:#eaf8fb}.tone-rose{--metric:#d25368;--metric-soft:#fff0f3}
.status-metric-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:11px;margin-bottom:0}
.status-metric{position:relative;overflow:hidden;min-height:126px;padding:15px;box-shadow:var(--shadow-xs)}
.status-metric:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d7deea}
.status-card-head{display:flex;align-items:center;gap:7px;color:#69758a;font-size:.7rem;font-weight:720;white-space:nowrap}
.status-card-dot{width:8px;height:8px;border-radius:50%;background:var(--status-color,#3b5ccc);box-shadow:0 0 0 4px var(--status-soft,#edf2ff)}
.status-metric strong{display:block;font-size:1.55rem;margin:18px 0 3px;font-weight:760}
.status-metric small{font-size:.65rem;color:#929bad}
.status-metric::after{content:"";position:absolute;right:-20px;bottom:-26px;width:70px;height:70px;border-radius:50%;background:var(--status-soft,#edf2ff)}
.status-tone-pending{--status-color:#d99019;--status-soft:#fff4de}.status-tone-confirmed{--status-color:#18a36a;--status-soft:#e9f8f1}.status-tone-processing{--status-color:#7655d9;--status-soft:#f1edff}.status-tone-packed{--status-color:#5664d7;--status-soft:#eef0ff}.status-tone-shipped{--status-color:#1595b6;--status-soft:#e9f8fc}.status-tone-delivered{--status-color:#158a5b;--status-soft:#e9f7f0}.status-tone-cancelled{--status-color:#d94b55;--status-soft:#fff0f1}.status-tone-returned{--status-color:#7d8797;--status-soft:#f0f2f5}
.dashboard-grid.analytics-grid{grid-template-columns:minmax(0,1.45fr) minmax(350px,.55fr);gap:14px;margin:0}
.dashboard-panel{overflow:hidden;box-shadow:var(--shadow-xs)}
.dashboard-panel:hover{border-color:#dde3ec;box-shadow:var(--shadow-sm)}
.dashboard-panel .card-header{background:linear-gradient(180deg,#fff,#fdfdfe)}
.chart-bars.large{height:275px;gap:8px;padding:20px 3px 25px;border-bottom:1px solid #f0f2f6;background:linear-gradient(to top,rgba(231,235,242,.38) 1px,transparent 1px);background-size:100% 25%}
.chart-bars.large .bar-group{gap:3px}
.bar{background:linear-gradient(180deg,#6d86dc,#3c5dc9);border-radius:6px 6px 2px 2px;box-shadow:0 3px 8px rgba(59,92,204,.12);transition:filter .18s,transform .18s}
.bar-group:hover .bar{filter:saturate(1.15);transform:scaleX(1.08)}
.bar.secondary{background:#eef2f8;box-shadow:none}
.chart-bars.large .bar-group small{color:#98a2b3;font-size:.61rem}
.source-chart{padding-top:22px;padding-bottom:22px;gap:18px}
.source-row{grid-template-columns:minmax(120px,1fr) 1.35fr 39px}
.source-row strong{font-size:.78rem;color:#344054}
.source-row span{font-size:.65rem;color:#98a2b3}
.source-row b{font-size:.71rem;color:#526079}
.status-track{height:7px;background:#edf0f5}
.status-fill{background:linear-gradient(90deg,#5874d3,#3b5ccc)}
.triple-grid.performance-cards{gap:14px;margin:0}
.rank-row{padding:13px 16px;transition:background .15s}
.rank-row:hover{background:#fafbfe}
.rank-no{background:#f0f3ff;color:#4662c2;border:1px solid #e2e7fa}
.rank-row strong{font-size:.8rem;color:#344054}
.rank-row small{font-size:.66rem}
.rank-row b{font-size:.73rem;color:#3c485e}
.dual-grid{gap:14px;margin:0}
.activity-row{padding:13px 16px}
.activity-icon{background:#eaf8f2;color:#149762;border:1px solid #d9f1e6}
.activity-row strong{font-size:.79rem;color:#344054}
.activity-row small,.activity-row time{font-size:.65rem}
.activity-row b{font-size:.73rem;color:#344054}
.recent-orders-card .table th:first-child,.recent-orders-card .table td:first-child{padding-left:19px}
.recent-orders-card .table th:last-child,.recent-orders-card .table td:last-child{padding-right:19px;text-align:right}

/* Forms and operational screens */
.order-layout.advanced{gap:15px}
.order-layout.advanced>div>section.card,.sticky-stack .card{box-shadow:var(--shadow-xs)}
.product-tile{border-color:#e4e9f1;box-shadow:var(--shadow-xs)}
.product-tile:hover{border-color:#b9c7ee;box-shadow:0 8px 20px rgba(59,92,204,.09)}
.product-tile-icon{background:#eef2ff;color:#3b5ccc}
.sticky-card{top:92px}
.order-header-card{border-radius:var(--radius-lg)}
.checkbox-row{background:#f8faff;border:1px solid #edf0f7}
.summary-line.total{color:#182230}
.toolbar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 11px;box-shadow:var(--shadow-xs)}
.toolbar .filter-form{flex:1}
.filter-form input,.filter-form select{min-width:155px}

/* Login */
.auth-bg{background:#f3f6fb}
.login-shell{background:#fff}
.login-visual{background:linear-gradient(145deg,#243d8f,#3f60c5 58%,#5573d2)}
.login-visual::after{content:"";position:absolute;right:-160px;bottom:-190px;width:520px;height:520px;border:80px solid rgba(255,255,255,.055);border-radius:50%}
.login-copy h1{font-size:3rem;letter-spacing:-.045em}
.login-panel{background:#fff}
.login-form-wrap{max-width:410px}
.login-form-wrap h2{font-size:1.7rem;margin-top:8px}
.login-kicker{margin-bottom:3px}
.visual-card{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.11);backdrop-filter:blur(12px)}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:1500px){
  .metric-grid.expanded{grid-template-columns:repeat(4,1fr)}
  .status-metric-grid{grid-template-columns:repeat(4,1fr)}
  .dashboard-filter-fields{grid-template-columns:repeat(4,minmax(130px,1fr))}
  .dashboard-filter-actions{grid-column:auto}
}
@media(max-width:1200px){
  .workspace-date{display:none}
  .metric-grid.expanded{grid-template-columns:repeat(3,1fr)}
  .dashboard-grid.analytics-grid{grid-template-columns:1fr}
  .triple-grid.performance-cards{grid-template-columns:1fr 1fr}
  .dashboard-filter-fields{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .sidebar{width:272px}
  body.sidebar-collapsed .sidebar{width:272px}
  body.sidebar-collapsed .main-area{margin-left:0}
  body.sidebar-collapsed .brand-copy,body.sidebar-collapsed .nav-group-label,body.sidebar-collapsed .nav-label,body.sidebar-collapsed .sidebar-card-copy,body.sidebar-collapsed .sidebar-card .btn span,body.sidebar-collapsed .sidebar-user-copy,body.sidebar-collapsed .logout-link{display:block}
  body.sidebar-collapsed .sidebar-collapse-btn{display:grid}
  body.sidebar-collapsed .nav-item{justify-content:flex-start;padding:10px 11px}
  body.sidebar-collapsed .sidebar-card{padding:14px;display:block}
  body.sidebar-collapsed .sidebar-card .btn{width:100%;height:auto;padding:7px 10px;display:inline-flex}
  body.sidebar-collapsed .sidebar-user{grid-template-columns:38px minmax(0,1fr) 31px}
  .desktop-collapse{display:none}
  .topbar{padding:0 18px}
  .content{padding:23px 20px 34px}
  .dashboard-hero{padding:23px}
  .dashboard-filter-fields{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .top-user-avatar,.connection-pill{display:none}
  .top-new-order span{display:none}
  .top-new-order{width:39px;padding:0;display:grid;place-items:center}
  .global-search{width:auto}
  .dashboard-hero{align-items:flex-start;flex-direction:column}
  .dashboard-hero-actions{width:100%}
  .dashboard-hero-actions .btn{flex:1;justify-content:center}
  .section-heading-row{align-items:flex-start;flex-direction:column;gap:8px}
  .metric-grid.expanded{grid-template-columns:1fr 1fr}
  .status-metric-grid{grid-template-columns:1fr 1fr}
  .triple-grid.performance-cards{grid-template-columns:1fr}
  .dashboard-filter-head{align-items:flex-start;gap:10px}
  .dashboard-filter-fields{grid-template-columns:1fr 1fr}
  .dashboard-filter-actions{grid-column:1/-1}
}
@media(max-width:520px){
  .content{padding:18px 14px 30px}
  .topbar{padding:0 12px;gap:8px}
  .page-heading{margin-bottom:18px}
  .page-heading h1{font-size:1.45rem}
  .dashboard-hero{min-height:0;padding:20px;border-radius:16px}
  .dashboard-hero h2{font-size:1.3rem}
  .dashboard-hero-actions{flex-direction:column}
  .dashboard-hero-actions .btn{width:100%}
  .dashboard-filter-fields{grid-template-columns:1fr}
  .dashboard-filter-actions{grid-column:auto}
  .dashboard-filter-actions .btn{flex:1;justify-content:center}
  .metric-grid.expanded{grid-template-columns:1fr}
  .status-metric-grid{grid-template-columns:1fr 1fr}
  .status-metric{min-height:114px}
  .app-footer{flex-wrap:wrap}
}