:root{
  --primary:#fec639;
  --primary-dark:#e5b02d;
  --secondary:#2980b9;

  --sidebar:#2c3e50;
  --sidebar-text:#ecf0f1;
  --sidebar-muted:#bdc3c7;
  --sidebar-active:rgba(254,198,57,.15);

  --bg:#f6f6f6;
  --card:#ffffff;
  --border:#e5e5e5;

  --text:#333;
  --muted:#757575;

  --orange:#ee4d2d;
  --success:#2ecc71;
  --danger:#e74c3c;
  --warning:#f1c40f;
  --info:#2980b9;

  --shadow1:0 1px 4px rgba(0,0,0,.1);
  --shadow2:0 6px 24px rgba(0,0,0,.08);

  --radius:10px;
  --topbar-h:60px;
  --sidebar-w:260px;
}

.dark{
  --sidebar:#1e2731;
  --bg:#18191a;
  --card:#242526;
  --border:#3a3b3c;
  --text:#e4e6eb;
  --muted:#b0b3b8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
}

a{color:inherit}
button,input,select,textarea{font:inherit}

.hidden{display:none!important}
.container{display:flex;height:100%}

/* Loader */
#loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--card);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity .35s ease;
}
.dots span{
  width:12px;height:12px;border-radius:50%;
  background:var(--primary);
  display:inline-block;margin:0 4px;
  animation:bounce 1.1s infinite ease-in-out;
}
.dots span:nth-child(2){animation-delay:.18s}
.dots span:nth-child(3){animation-delay:.36s}
@keyframes bounce{0%,80%,100%{transform:scale(1);opacity:.55}40%{transform:scale(1.45);opacity:1}}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);
  background:var(--sidebar);
  color:var(--sidebar-text);
  height:100%;
  position:fixed; left:0; top:0;
  z-index:101;
  overflow:auto;
  border-right:1px solid rgba(255,255,255,.06);
  transform:translateX(0);
  transition:transform .25s ease;
}
.sidebar .logo{
  padding:18px 20px;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.12);
}
.sidebar .logo img{max-width:150px; height:auto}
.profile{
  padding:14px 18px;
  display:flex; gap:10px; align-items:center;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.20);
}
.avatar{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary); color:#fff; font-weight:700;
}
.profile small{display:block;color:var(--sidebar-muted);font-size:.8rem;margin-top:2px}

.menu{list-style:none;margin:0;padding:10px 0}
.menu .hdr{
  padding:18px 20px 8px;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--sidebar-muted);
  font-weight:600;
}
.menu a{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  padding:12px 18px;
  border-left:3px solid transparent;
  color:var(--sidebar-text);
  transition:all .15s ease;
  font-size:.95rem;
}
.menu a i{width:22px;text-align:center;color:var(--sidebar-muted)}
.menu a:hover, .menu a.active{
  background:var(--sidebar-active);
  color:var(--primary);
  border-left-color:var(--primary);
}
.menu a:hover i,.menu a.active i{color:var(--primary)}
.menu .pill{
  margin-left:auto;
  font-size:.75rem;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:var(--sidebar-text);
}
.menu .pill.orange{background:var(--orange); color:#fff}

.has-sub > a::after{
  content:"\f107";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  margin-left:auto;
  transition:transform .2s ease;
}
.has-sub.open > a::after{transform:rotate(180deg)}
.sub{
  list-style:none;margin:0;padding:0;
  max-height:0; overflow:hidden;
  transition:max-height .25s ease;
  background:rgba(0,0,0,.20);
}
.has-sub.open .sub{max-height:520px}
.sub a{padding-left:52px;font-size:.92rem}

/* Overlay (mobile) */
.overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  z-index:100;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.overlay.active{opacity:1; pointer-events:auto}

/* Topbar */
.topbar{
  position:fixed; top:0; left:var(--sidebar-w); right:0;
  height:var(--topbar-h);
  background:var(--card);
  box-shadow:var(--shadow1);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px;
  z-index:99;
}
.topbar-left{display:flex; align-items:center; gap:10px}
.hamburger{
  display:none;
  width:40px;height:40px;
  border-radius:10px;
  border:1px solid var(--border);
  background:transparent;
  cursor:pointer;
}
.hamburger i{font-size:1.1rem;color:var(--muted)}
.topbar h1{font-size:1rem;margin:0;font-weight:650;color:var(--text)}
.topbar-right{display:flex; align-items:center; gap:14px}
.icon-btn{
  position:relative;
  width:40px;height:40px;
  border-radius:10px;
  border:1px solid var(--border);
  background:transparent;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
}
.icon-btn:hover{border-color:var(--primary)}
.badge{
  position:absolute;
  top:-6px; right:-6px;
  background:var(--orange);
  color:#fff;
  font-size:.72rem;
  padding:1px 6px;
  border-radius:999px;
  border:2px solid var(--card);
}
.user-dd{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
}
.user-dd small{color:var(--muted)}
.user-dd i{color:var(--muted);font-size:.8rem}

/* Main */
.main{
  margin-left:var(--sidebar-w);
  padding:18px;
  padding-top:calc(var(--topbar-h) + 18px);
  height:100%;
  overflow:auto;
}
.section{display:none}
.section.active{display:block; animation:fade .2s ease}
@keyframes fade{from{opacity:.4; transform:translateY(6px)}to{opacity:1; transform:translateY(0)}}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow1);
}
.card-h{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.card-h h2{margin:0;font-size:1.02rem;font-weight:650}
.card-b{padding:16px}

.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (max-width: 1100px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 720px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}

.kpi{
  padding:14px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.kpi .v{font-size:1.6rem;font-weight:750;color:var(--primary)}
.kpi .t{color:var(--muted);font-size:.92rem}
.kpi .tag{font-size:.78rem; padding:2px 8px; border-radius:999px}
.tag.up{background:rgba(46,204,113,.12); color:var(--success)}
.tag.down{background:rgba(231,76,60,.12); color:var(--danger)}
.tag.warn{background:rgba(241,196,15,.18); color:#b06a00}

.actions{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px}
.action{
  padding:16px;
  display:flex; flex-direction:column; gap:10px;
  align-items:center; text-align:center;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease;
}
.action:hover{transform:translateY(-2px); border-color:var(--primary)}
.action i{font-size:1.6rem; color:var(--primary)}
.action span{font-weight:600}

/* Tables */
.table-wrap{overflow:auto}
table{width:100%; border-collapse:collapse; min-width:780px}
th,td{padding:10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle}
th{font-size:.85rem; color:var(--muted); background:rgba(0,0,0,.02)}
.row-actions{display:flex; gap:8px; flex-wrap:wrap}
.btn{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:transparent;
  cursor:pointer;
  font-weight:600;
}
.btn.primary{background:var(--primary); border-color:var(--primary); color:#1f1f1f}
.btn.danger{background:rgba(231,76,60,.12); border-color:rgba(231,76,60,.35); color:var(--danger)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.55; cursor:not-allowed}
.badge2{
  display:inline-flex; align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:.78rem; font-weight:700;
}
.b-success{background:rgba(46,204,113,.14); color:var(--success)}
.b-warning{background:rgba(241,196,15,.16); color:#b06a00}
.b-danger{background:rgba(231,76,60,.14); color:var(--danger)}
.b-info{background:rgba(41,128,185,.14); color:var(--info)}
.b-muted{background:rgba(0,0,0,.06); color:var(--muted)}

/* Forms + modal */
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (max-width: 720px){.form-grid{grid-template-columns:1fr}}
.field label{display:block;font-size:.85rem;color:var(--muted); margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  outline:none;
}
.field textarea{min-height:90px; resize:vertical}

.modal{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:1000;
  background:rgba(0,0,0,.45);
  padding:18px;
}
.modal .box{
  width:min(720px,100%);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow2);
  overflow:hidden;
}
.modal .box-h{
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.modal .box-h strong{font-size:1.02rem}
.modal .box-b{padding:16px}
.xbtn{
  width:40px;height:40px;border-radius:10px;
  border:1px solid var(--border);
  background:transparent; cursor:pointer;
}
.toast-wrap{
  position:fixed; right:16px; bottom:16px; z-index:2000;
  display:flex; flex-direction:column; gap:10px;
}
.toast{
  width:min(360px,calc(100vw - 32px));
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow2);
  padding:12px 12px;
  display:flex; gap:10px; align-items:flex-start;
}
.toast i{margin-top:2px}
.toast .m{font-size:.92rem}
.toast .s{color:var(--muted); font-size:.8rem; margin-top:2px}

/* Responsive sidebar */
@media (max-width: 900px){
  body{overflow:hidden}
  .hamburger{display:flex; align-items:center; justify-content:center}
  .topbar{left:0}
  .main{margin-left:0}
  .sidebar{transform:translateX(-100%); width:280px}
  .sidebar.active{transform:translateX(0)}
}

/* Mobile polish */
@media (max-width: 900px){
  .topbar-right .user-dd{display:none}
  .topbar-right{gap:10px}
  .icon-btn{width:38px;height:38px}
  .main{padding:14px; padding-top:calc(var(--topbar-h) + 14px)}
  .sidebar{width:82vw; max-width:320px}
  .profile{position:sticky; top:0; z-index:2}
}

/* Responsive tables: turn rows into cards on small screens */
.table-wrap{width:100%}
@media (max-width: 720px){
  table{min-width:0}
  thead{display:none}
  table, tbody, tr, td{display:block; width:100%}
  tr{
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    margin-bottom:12px;
    background:var(--card);
    box-shadow:var(--shadow1);
  }
  td{
    border-bottom:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:12px 12px;
    font-size:.95rem;
  }
  td:last-child{border-bottom:none}
  td::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:.82rem;
    font-weight:650;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding-right:10px;
  }
  .row-actions{justify-content:flex-end}
  .card-b.table-wrap{padding:12px}
}

/* Small chips on mobile */
@media (max-width: 720px){
  .badge2{font-size:.76rem}
  .btn{padding:10px 12px;border-radius:12px}
  input, select{padding:12px 12px;border-radius:12px}
}