/* ==========================================================
   1) VARIABLES & BASE (global)
   ========================================================== */
:root{
  --primary:#0b84b8;
  --primary2:#0a6d96;
  --accent:#ef6a4a;
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow:0 10px 22px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
  margin:0;
  padding:0;
  font-family:Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
}

body.menu-open{
  overflow:hidden;
}

.app{
  display:flex;
  height:100vh;
  width:100%;
  overflow:hidden;
}

/* ==========================================================
   2) LARGEUR UNIFORME
   ========================================================== */
.content{
  flex:1;
  width:100%;
  padding:18px;
  overflow-y:auto;
  overflow-x:hidden;
}

.content-inner{
  width:100%;
  max-width:1200px;
  margin:0 auto;
}

.card{
  width:100%;
  background:var(--card);
  border-radius:20px;
  padding:20px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}

.form-card{
  max-width:1200px;
  margin:16px auto 0;
}

/* ==========================================================
   3) SIDEBAR
   ========================================================== */
.sidebar{
  width:260px;
  min-width:260px;
  height:100vh;
  position:fixed;
  top:0;
  left:0;
  background:#fff;
  border-right:1px solid var(--border);
  padding:14px;
  overflow-y:auto;
  overflow-x:hidden;
  z-index:1100;
}

.sidebar-mobile-head{
  display:none;
}

.brand{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:12px;
  background:#f0fbff;
}

.brand-logo{
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:.5px;
}

.brand-title{
  font-weight:800;
}

.brand-sub{
  color:var(--muted);
  font-size:13px;
}

.menu{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-bottom:20px;
}

.menu-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  text-decoration:none;
  color:var(--text);
  border:1px solid transparent;
  border-radius:10px;
  font-size:15px;
  transition:.2s ease;
}

.menu-item i{
  width:20px;
  text-align:center;
  font-size:16px;
}

.menu-item span{
  font-weight:500;
}

.menu-item:hover{
  background:#f5f7fa;
  border-radius:8px;
}

.menu-item.active{
  background:#eef2ff;
  border-radius:8px;
  font-weight:600;
  color:var(--primary2);
}

.menu-sep{
  height:1px;
  background:var(--border);
  margin:10px 0;
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--primary);
  display:inline-block;
}

/* ==========================================================
   4) MAIN / TOPBAR
   ========================================================== */
.main{
  margin-left:260px;
  width:calc(100% - 260px);
  height:100vh;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
}

.topbar{
  background:linear-gradient(90deg, var(--primary2), var(--primary));
  color:#fff;
  padding:12px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:var(--shadow);
  gap:12px;
  position:sticky;
  top:0;
  z-index:1000;
  flex-shrink:0;
}

.topbar-left{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.topbar-right{
  display:flex;
  align-items:center;
}

.pill{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  padding:8px 10px;
  border-radius:999px;
  display:flex;
  gap:8px;
  align-items:center;
}

.pill-label{
  font-size:12px;
  opacity:.9;
}

.pill-value{
  font-weight:700;
}

.user{
  display:flex;
  align-items:center;
  gap:10px;
}

.user-name{
  font-size:14px;
}

.icon-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  border-radius:10px;
  text-decoration:none;
  color:#fff;
  background:rgba(255,255,255,.15);
  min-width:38px;
  min-height:38px;
}

.icon-btn:hover{
  background:rgba(255,255,255,.25);
}

.notif-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
}

/* ==========================================================
   5) PAGE HEAD
   ========================================================== */
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.page-head h1{
  margin:0;
  color:var(--accent);
  font-size:34px;
}

.filter select{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
}

/* ==========================================================
   6) GRID / CARD
   ========================================================== */
.grid{
  display:grid;
  gap:16px;
  margin-top:16px;
}

.grid-3{
  grid-template-columns:1.1fr 1fr 1fr;
}

.grid-2{
  grid-template-columns:1fr 1.4fr;
}

.card-title{
  text-align:center;
  font-weight:900;
  color:var(--accent);
  letter-spacing:.5px;
}

.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.card-title-lg{
  font-size:18px;
  font-weight:900;
  margin:0;
}

.card-click{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:.15s;
}

.card-click:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.card-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.arrow{
  font-size:22px;
  opacity:.5;
}

/* ==========================================================
   7) KPI / HINT
   ========================================================== */
.kpi-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:8px;
}

.kpi-line span{
  color:#111827;
}

.kpi-line b{
  font-size:14px;
}

.good{
  color:#0e9f6e;
}

.hint{
  color:var(--muted);
  font-size:12px;
  margin:10px 0 0;
}

/* ==========================================================
   8) DONUT / LIST / CHART
   ========================================================== */
.donut-wrap{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin-top:10px;
}

.donut{
  width:120px;
  height:120px;
  border-radius:50%;
  border:10px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  font-weight:900;
  color:#111827;
  position:relative;
}

.donut:before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:10px solid transparent;
  border-top-color:var(--accent);
  border-right-color:var(--primary);
  transform:rotate(25deg);
}

.donut-legend{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.legend-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  min-width:180px;
}

.list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}

.list-item{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

.chart-placeholder{
  height:220px;
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:14px;
  border-radius:14px;
  border:1px dashed #cbd5e1;
  background:#fbfdff;
}

.chart-bar{
  flex:1;
  border-radius:10px 10px 0 0;
  background:rgba(11,132,184,.35);
  height:40%;
}

.chart-bar:nth-child(2){ height:70%; }
.chart-bar:nth-child(3){ height:55%; }
.chart-bar:nth-child(4){ height:85%; }
.chart-bar:nth-child(5){ height:60%; }

/* ==========================================================
   9) BOUTONS
   ========================================================== */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  background:linear-gradient(90deg, var(--primary2), var(--primary));
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:var(--shadow);
  font-weight:700;
}

.btn-primary:hover{
  filter:brightness(1.03);
}

.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  background:#fff;
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--border);
  font-weight:700;
}

.btn-outline:hover{
  background:#f9fafb;
}

.btn-mini{
  padding:6px 10px;
  border-radius:10px;
  line-height:1;
}

/* ==========================================================
   10) BADGES / STATUS / ALERTS
   ========================================================== */
.badge{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#f9fafb;
  font-size:12px;
}

.badge.success{ background:#dcfce7; color:#166534; }
.badge.warning{ background:#ffedd5; color:#9a3412; }
.badge.danger{ background:#fee2e2; color:#991b1b; }

.badge-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}

.status{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid var(--border);
}

.status.ok{
  background:#ecfdf3;
  color:#047857;
  border-color:#a7f3d0;
}

.status.faible{
  background:#fff7ed;
  color:#9a3412;
  border-color:#fed7aa;
}

.status.rupture{
  background:#fee2e2;
  color:#991b1b;
  border-color:#fecaca;
}

.alert{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff7ed;
  color:#9a3412;
  box-shadow:var(--shadow);
}

.alert .icon{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#fed7aa;
  font-size:18px;
}

.alert strong{
  color:#7c2d12;
}

/* ==========================================================
   11) TABLEAUX
   ========================================================== */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:12px;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--border);
}

.table th,
.table td{
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:middle;
}

.table th{
  background:#f9fafb;
  font-size:13px;
  color:#374151;
}

.table tr:last-child td{
  border-bottom:none;
}

.table td strong{
  font-weight:900;
}

.table-wrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:14px;
}

.table-wrap .table{
  border:0;
  margin:0;
}

/* ==========================================================
   12) ACTIONS / LIENS
   ========================================================== */
.actions{
  display:flex;
  gap:10px;
}

.link{
  text-decoration:none;
  font-weight:800;
  color:var(--primary2);
}

.link:hover{
  text-decoration:underline;
}

/* ==========================================================
   13) FILTRES
   ========================================================== */
.filters{
  margin-top:10px;
}

.filters-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.field{
  min-width:160px;
  flex:1;
}

.field.actions{
  flex:0;
  min-width:280px;
  display:flex;
  gap:10px;
  align-items:flex-end;
}

.field.actions label{
  display:none;
}

.label{
  display:block;
  font-weight:700;
  margin-bottom:6px;
}

/* ==========================================================
   14) FORMULAIRES
   ========================================================== */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.form-grid .full{
  grid-column:1 / -1;
}

.form-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:14px;
  flex-wrap:wrap;
}

.input,
.select,
input,
select,
textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #d1d5db;
  background:#fff;
  outline:none;
  font-size:14px;
}

.input:focus,
.select:focus,
input:focus,
select:focus,
textarea:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.15);
}

.toolbar{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}

/* ==========================================================
   15) TOP 5 GRID
   ========================================================== */
.top5{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:12px;
  margin-top:12px;
}

.top5-item{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:12px;
}

.top5-rank{
  font-weight:900;
  color:var(--primary2);
  margin-bottom:6px;
}

.top5-name{
  font-weight:900;
}

.top5-meta{
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}

/* ==========================================================
   16) EMPTY STATE
   ========================================================== */
.empty-box{
  border:1px dashed #cbd5e1;
  background:#fbfdff;
  border-radius:14px;
  padding:18px;
  margin-top:12px;
}

.empty-title{
  font-weight:900;
  margin-bottom:6px;
}

/* ==========================================================
   17) PRODUITS - ALERT STOCK
   ========================================================== */
.stock-alert{
  margin-top:6px;
  font-size:12px;
  color:#b91c1c;
}

/* ==========================================================
   18) COMPTABILITE / FINANCE
   ========================================================== */
.finance-page .txt-strong{
  font-weight:700;
}

.finance-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-top:16px;
}

.kpi-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.kpi-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  background:var(--primary);
  opacity:.9;
}

.kpi-card .kpi-label{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.kpi-card .kpi-value{
  margin-top:8px;
  font-size:22px;
  font-weight:800;
  color:var(--text);
}

.kpi-card .kpi-sub{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}

.kpi-card.kpi-green:before{ background:#16a34a; }
.kpi-card.kpi-orange:before{ background:#f97316; }
.kpi-card.kpi-red:before{ background:#dc2626; }
.kpi-card.kpi-blue:before{ background:var(--primary); }

.result-box{
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(90deg, rgba(11,132,184,.10), rgba(239,106,74,.08));
  box-shadow:var(--shadow);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:14px;
}

.result-box .title{
  font-weight:800;
  color:var(--primary2);
}

.result-box .value{
  font-weight:800;
  font-size:20px;
}

.finance-page .amount{
  font-weight:600;
}

.finance-page .table td strong{
  font-weight:600;
}

.mini-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}

.mini-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

.mini-title{
  font-weight:700;
}

.mini-sub{
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
}

.mini-right{
  white-space:nowrap;
}

.alert-list{
  display:grid;
  gap:12px;
}

.alert-lite{
  border:1px solid var(--border);
  background:#fff;
  border-radius:14px;
  padding:12px 14px;
}

.alert-lite .alert-title{
  font-weight:800;
}

.alert-lite .alert-value{
  margin-top:6px;
  font-size:18px;
  font-weight:800;
}

.alert-lite .alert-sub{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}

.alert-lite.warning{
  background:#fff7ed;
  border-color:#fed7aa;
}

.alert-lite.danger{
  background:#fee2e2;
  border-color:#fecaca;
}

.pill-mini{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  margin-right:6px;
  margin-top:6px;
}

/* ==========================================================
   19) RAPPORTS COMPTABILITE
   ========================================================== */
.report-page{
  width:100%;
}

.report-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.report-sub{
  color:var(--muted);
  font-size:13px;
  margin-top:6px;
}

.report-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow);
}

.report-card .card-title-lg{
  margin:0;
}

.finance-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}

.finance-line:last-child{
  border-bottom:none;
}

.finance-line .label{
  font-weight:600;
  color:var(--text);
  margin:0;
}

.finance-line .value{
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
}

.result-highlight{
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(90deg, rgba(11,132,184,.10), rgba(239,106,74,.08));
  box-shadow:var(--shadow);
  padding:18px;
  margin-top:16px;
}

.result-highlight .title{
  font-weight:800;
  color:var(--primary2);
}

.result-highlight .amount{
  margin-top:10px;
  font-size:28px;
  font-weight:800;
  color:var(--text);
}

.result-highlight .sub{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
}

.report-table-wrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:16px;
  margin-top:12px;
  background:#fff;
}

.report-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:0;
}

.report-table th,
.report-table td{
  padding:12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:middle;
}

.report-table th{
  background:#f9fafb;
  font-size:13px;
  color:#374151;
  font-weight:800;
}

.report-table tr:last-child td{
  border-bottom:none;
}

.report-table tfoot th,
.report-table tfoot td{
  background:#fbfdff;
  font-weight:800;
}

.report-amount{
  text-align:right;
  font-weight:700;
  white-space:nowrap;
}

.journal-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}

.bilan-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px;
}

.bilan-side{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow);
}

.bilan-side .side-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.bilan-side .side-title{
  font-size:18px;
  font-weight:800;
  margin:0;
}

.bilan-total{
  margin-top:14px;
  padding-top:14px;
  border-top:2px solid var(--border);
}

.bilan-total .finance-line{
  padding:0;
  border-bottom:none;
}

.bilan-total .value{
  font-size:18px;
  font-weight:800;
}

.bilan-side.actif{
  background:linear-gradient(180deg, rgba(11,132,184,.04), #fff);
}

.bilan-side.passif{
  background:linear-gradient(180deg, rgba(239,106,74,.04), #fff);
}

.report-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}

.back-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* ==========================================================
   20) MENU MOBILE
   ========================================================== */
.mobile-menu-btn{
  display:none;
  width:42px;
  height:42px;
  border:none;
  border-radius:10px;
  background:rgba(255,255,255,.15);
  color:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}

.mobile-menu-btn:hover{
  background:rgba(255,255,255,.25);
}

.mobile-close-btn{
  border:none;
  background:#f3f4f6;
  color:var(--text);
  width:38px;
  height:38px;
  border-radius:10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

.mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(15, 23, 42, .45);
  opacity:0;
  visibility:hidden;
  transition:.25s ease;
  z-index:9998;
}

.mobile-overlay.show{
  opacity:1;
  visibility:visible;
}

/* ==========================================================
   21) RESPONSIVE
   ========================================================== */
@media (max-width: 1100px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .sidebar{
    width:220px;
    min-width:220px;
  }
  .main{
    margin-left:220px;
    width:calc(100% - 220px);
  }
  .kpi-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 900px){
  .top5{ grid-template-columns:1fr 1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .bilan-grid{ grid-template-columns:1fr; }

  .report-table th,
  .report-table td{
    white-space:nowrap;
    font-size:12px;
    padding:10px;
  }

  .result-highlight .amount{
    font-size:22px;
  }
}

@media (max-width: 820px){
  html, body{
    overflow:auto;
  }

  .mobile-menu-btn{
    display:inline-flex;
  }

  .sidebar{
    position:fixed;
    top:0;
    left:0;
    width:290px;
    max-width:85%;
    height:100vh;
    overflow-y:auto;
    border-right:1px solid var(--border);
    border-bottom:none;
    padding:14px;
    background:#fff;
    z-index:9999;
    transform:translateX(-110%);
    transition:transform .28s ease;
    box-shadow:0 18px 40px rgba(0,0,0,.18);
  }

  .sidebar.sidebar-open{
    transform:translateX(0);
  }

  .sidebar-mobile-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
    font-weight:800;
    color:var(--text);
  }

  .menu{
    margin-top:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .menu-item{
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    padding:12px 14px;
    font-size:14px;
  }

  .menu-sep{
    margin:10px 0;
  }

  .user-name{
    display:none;
  }

  .main{
    margin-left:0;
    width:100%;
    height:auto;
    min-height:100vh;
    overflow:visible;
  }

  .topbar{
    position:sticky;
    top:0;
  }

  .content{
    overflow:visible;
    padding:12px;
  }

  .content-inner{
    max-width:100%;
  }

  .page-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .page-head h1{
    font-size:22px;
  }

  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .table th,
  .table td{
    white-space:nowrap;
    font-size:12px;
    padding:10px;
  }

  .form-actions{
    justify-content:stretch;
  }

  .form-actions .btn-primary,
  .form-actions .btn-outline{
    width:100%;
    justify-content:center;
  }

  .input,
  .select,
  input,
  select,
  textarea{
    padding:12px;
    font-size:14px;
  }

  .top5{
    grid-template-columns:1fr;
  }

  .kpi-grid{
    grid-template-columns:1fr;
  }

  .topbar{
    padding:10px 12px;
  }

  .topbar-left{
    flex-wrap:nowrap;
  }

  .pill{
    padding:7px 10px;
  }
}

@media (max-width: 420px){
  .page-head h1{
    font-size:20px;
  }

  .sidebar{
    width:280px;
  }

  .top5{
    grid-template-columns:1fr;
  }

  .content{
    padding:10px;
  }

  .card{
    padding:16px;
    border-radius:16px;
  }
}

.card-title-lg {
  font-size: 24px;
  font-weight: 700;
  margin-top: 6px;
}

.toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
}

.empty-box {
  padding: 24px;
  text-align: center;
}

.empty-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}