:root{--p:#174A7C;--bg:#f4f7fb;--m:#667085}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial;background:var(--bg);color:#1f2937}a{text-decoration:none;color:var(--p)}.layout{display:flex;min-height:100vh}.sidebar{width:245px;background:#0f2f4f;color:#fff;padding:20px;position:fixed;height:100vh}.brand{font-size:20px;font-weight:700;margin-bottom:25px}.sidebar a{display:block;color:#dbeafe;padding:11px;border-radius:10px;margin:5px 0}.sidebar a:hover{background:#174A7C}.main{margin-left:245px;padding:24px;width:calc(100% - 245px)}.top{display:flex;justify-content:space-between;align-items:center}.card{background:#fff;border-radius:18px;box-shadow:0 8px 24px rgba(16,24,40,.08);padding:18px;margin-bottom:18px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.kpi .label{color:var(--m);font-size:13px}.kpi .value{font-size:25px;font-weight:800;margin-top:8px;color:var(--p)}input,select,textarea{width:100%;padding:11px;border:1px solid #d0d5dd;border-radius:10px;margin:6px 0 12px}button,.btn{background:var(--p);color:#fff;border:0;border-radius:10px;padding:11px 16px;cursor:pointer}table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}th,td{padding:11px;border-bottom:1px solid #eef2f7;text-align:left;font-size:14px}th{background:#eaf3f8;color:#174A7C}.badge{padding:4px 9px;border-radius:999px;background:#eaf3f8;color:#174A7C;font-size:12px}.login{max-width:430px;margin:8vh auto}.footer{color:#98a2b3;font-size:12px;margin-top:20px}@media(max-width:900px){.sidebar{position:static;width:100%;height:auto}.layout{display:block}.main{margin:0;width:100%}.grid{grid-template-columns:1fr 1fr}}
/* MOBILE RESPONSIVE */

@media (max-width: 768px){

.layout{
  display:block !important;
}

.sidebar{
  width:100% !important;
  height:auto !important;
  position:relative !important;
  padding-bottom:20px;
}

.main{
  width:100% !important;
  padding:15px !important;
}

.cards-grid,
.stats-grid,
.dashboard-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:15px !important;
}

.card{
  width:100% !important;
  margin-bottom:15px;
}

canvas{
  max-width:100% !important;
  height:auto !important;
}

table{
  display:block;
  overflow-x:auto;
  white-space:nowrap;
}

form{
  grid-template-columns:1fr !important;
}

button{
  width:100%;
}

h1{
  font-size:34px !important;
}

.sidebar a{
  padding:14px;
  display:block;
}

}

/* ===== MOBILE FULL FIX ===== */

@media screen and (max-width: 768px){

html,body{
  overflow-x:hidden !important;
  width:100% !important;
}

.layout{
  display:flex !important;
  flex-direction:column !important;
}

.sidebar{
  width:100% !important;
  min-height:auto !important;
  position:relative !important;
  padding:20px !important;
}

.main{
  width:100% !important;
  padding:12px !important;
  overflow-x:hidden !important;
}

.dashboard-top{
  display:flex !important;
  flex-direction:column !important;
  gap:15px !important;
}

.stats-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
}

.card{
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
}

.chart-card{
  width:100% !important;
}

canvas{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
}

table{
  width:100% !important;
  display:block !important;
  overflow-x:auto !important;
  white-space:nowrap !important;
}

h1{
  font-size:28px !important;
  line-height:1.2 !important;
}

button{
  width:100% !important;
}

input,select{
  width:100% !important;
}

form{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.sidebar a{
  display:block !important;
  padding:14px 0 !important;
}

}

/* EXTRA SMALL DEVICES */

@media screen and (max-width:480px){

.stats-grid{
  grid-template-columns:1fr !important;
}

h1{
  font-size:24px !important;
}

}

/* FORCE DASHBOARD MOBILE STACK */
@media screen and (max-width:768px){

.main > div[style*="grid-template-columns"]{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
}

.main > div[style*="grid-template-columns"] > div{
  width:100% !important;
  max-width:100% !important;
}

.main .card{
  box-sizing:border-box !important;
}

.main div[style*="width:190px"]{
  width:160px !important;
  height:160px !important;
}

.top{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
}

.top .btn{
  width:100% !important;
  text-align:center !important;
}

.kpi .value{
  font-size:28px !important;
  line-height:1.15 !important;
}

}

/* ===== FINAL MOBILE MENU FIX ===== */
@media screen and (max-width:768px){

  .mobile-menu-btn{
    display:block !important;
    position:fixed !important;
    top:12px !important;
    left:12px !important;
    z-index:10001 !important;
    width:auto !important;
  }

  .mobile-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:9998;
  }

  .mobile-overlay.show{
    display:block !important;
  }

  .sidebar{
    position:fixed !important;
    top:0 !important;
    left:-280px !important;
    width:260px !important;
    max-width:85% !important;
    height:100vh !important;
    z-index:9999 !important;
    transition:left .25s ease !important;
    overflow-y:auto !important;
  }

  .sidebar.mobile-open{
    left:0 !important;
  }

  .main{
    margin-left:0 !important;
    width:100% !important;
    padding-top:70px !important;
  }

}