/* ══════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════ */

.layout{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100dvh;transition:grid-template-columns .25s ease;}
.layout.focus-mode{grid-template-columns:0 1fr;}
.layout.focus-mode .sidebar{width:0;overflow:hidden;border-right:none;padding:0;}
.content-area{display:grid;grid-template-rows:var(--topbar-h) 1fr;overflow:hidden;}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════ */

.sidebar{background:linear-gradient(180deg,var(--surface) 0%,color-mix(in oklch,var(--primary) 4%,var(--surface)) 100%);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:16px 18px 14px;border-bottom:1px solid var(--border);}
.brand-name{font-weight:700;font-size:15px;letter-spacing:-.3px;}
.brand-name span{color:var(--primary);}
.nav{flex:1;padding:10px 8px;}
.nav-group{margin-bottom:20px;}
.nav-group-label{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--text-faint);padding:0 10px 6px;text-transform:uppercase;}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:var(--radius-sm);color:var(--text-muted);font-size:13.5px;font-weight:500;transition:background .15s,color .15s;text-align:left;}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.7;}
.nav-item:hover{background:var(--surface-off);color:var(--text);}
.nav-item:hover svg{opacity:1;}
.nav-item.active{background:var(--primary-bg);color:var(--primary);box-shadow:inset 3px 0 0 var(--primary);}
.nav-item.active svg{opacity:1;}
.sidebar-footer{padding:12px 14px;border-top:1px solid var(--border);}
.sys-status{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-muted);}

/* ══════════════════════════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════════════════════════ */

.topbar{background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;box-shadow:0 1px 0 var(--border);}
.page-title{font-size:16px;font-weight:600;letter-spacing:-.2px;}
.topbar-right{display:flex;align-items:center;gap:16px;}
.topbar-stat{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted);}
.btn-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);color:var(--text-muted);transition:background .15s,color .15s;}
.btn-icon:hover{background:var(--surface-off);color:var(--text);}
.btn-icon svg{width:16px;height:16px;}

/* ══════════════════════════════════════════════════════════════
   MAIN
   ══════════════════════════════════════════════════════════════ */

.main{overflow-y:auto;overscroll-behavior:contain;padding:24px;}

@keyframes pageEnter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.main.page-enter{animation:pageEnter .22s ease forwards;}

/* ══════════════════════════════════════════════════════════════
   GRIDS
   ══════════════════════════════════════════════════════════════ */

.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;}
.charts-row { display: grid; grid-template-columns: 1fr 260px; gap: 14px; margin-bottom: 20px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE
   ══════════════════════════════════════════════════════════════ */

.mobile-menu-btn{display:none !important;}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:399;backdrop-filter:blur(2px);}
.mobile-overlay.show{display:block;}

@media (max-width: 768px) {
  .layout{grid-template-columns:1fr;}
  .sidebar{
    position:fixed;left:0;top:0;height:100dvh;z-index:400;
    transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
    width:var(--sidebar-w);
  }
  .sidebar.mobile-open{transform:translateX(0);}
  .mobile-menu-btn{display:flex !important;}
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .charts-row{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .main{padding:16px 14px;}
  .topbar{padding:0 14px;}
  .page-header{flex-wrap:wrap;gap:10px;}
  .page-header > div:last-child{width:100%;display:flex;gap:6px;flex-wrap:wrap;}
  .filter-bar{gap:6px;}
  .notif-dropdown{width:290px;right:-4px;}
  .form-row{grid-template-columns:1fr;}
}

@media (max-width: 480px) {
  .kpi-row{grid-template-columns:1fr 1fr;}
  .order-stats-bar,.charts-row,.grid-2{grid-template-columns:1fr;}
  .topbar-stat{display:none;}
}

/* Focus mode button */
.btn-focus{background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 10px;cursor:pointer;color:var(--text-muted);font-size:12px;display:inline-flex;align-items:center;gap:6px;transition:all .15s;}
.btn-focus:hover{color:var(--text);border-color:var(--primary);}
.btn-focus.active{color:var(--primary);border-color:var(--primary);}