/* ============================================================
   BOAZMART — Main Stylesheet (Full)
   ============================================================ */

/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root{
  --primary:            #307a1a;
  --primary-rgb:        48,122,26;
  --primary-hover:      #265e12;
  --primary-hover-rgb:  38,94,18;

  --bg:                 #ffffff;
  --bg-alt:             #f9fafb;
  --card:               #ffffff;
  --border:             #e5e7eb;
  --border-strong:      #d1d5db;

  --text:               #111827;
  --text-soft:          #374151;
  --muted:              #6b7280;
  --muted-light:        #9ca3af;

  --header-bg:          #ffffff;
  --header-bg-rgb:      255,255,255;
  --header-text:        #111827;

  --sidebar-bg:         #ffffff;
  --sidebar-bg-rgb:     255,255,255;
  --sidebar-text:       #111827;

  --font-size:          14px;
  --radius:             12px;
  --radius-sm:          8px;
  --radius-lg:          16px;
  --shadow:             0 4px 16px rgba(0,0,0,.06);
  --shadow-md:          0 8px 24px rgba(0,0,0,.08);
  --shadow-lg:          0 16px 40px rgba(0,0,0,.12);
  --topbar-h:           60px;
  --sidebar-w:          230px;

  --success:            #16a34a;
  --success-bg:         #dcfce7;
  --success-text:       #166534;
  --error:              #dc2626;
  --error-bg:           #fee2e2;
  --error-text:         #991b1b;
  --warning:            #f59e0b;
  --warning-bg:         #fef3c7;
  --warning-text:       #92400e;
  --info:               #0ea5e9;
  --info-bg:            #e0f2fe;
  --info-text:          #075985;
}

[data-theme="dark"]{
  --bg:                 #0f1720;
  --bg-alt:             #131e2a;
  --card:               #17212b;
  --border:             #2b3543;
  --border-strong:      #3a4553;

  --text:               #f1f5f9;
  --text-soft:          #cbd5e1;
  --muted:              #94a3b8;
  --muted-light:        #64748b;

  --header-bg:          #17212b;
  --header-bg-rgb:      23,33,43;
  --header-text:        #f1f5f9;

  --sidebar-bg:         #0f1720;
  --sidebar-bg-rgb:     15,23,32;
  --sidebar-text:       #f1f5f9;

  --shadow:             0 4px 16px rgba(0,0,0,.45);
  --shadow-md:          0 8px 24px rgba(0,0,0,.55);
  --shadow-lg:          0 16px 40px rgba(0,0,0,.65);

  --success-bg:         #0f2f1c;
  --success-text:       #86efac;
  --error-bg:           #3b1a1a;
  --error-text:         #fca5a5;
  --warning-bg:         #3b2f0b;
  --warning-text:       #fcd34d;
  --info-bg:            #1e3a8a;
  --info-text:          #93c5fd;
}

/* ============================================================
   2. RESET
   ============================================================ */
*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html,body{height:100%}

body{
  font-family:'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
  font-size:var(--font-size);
  line-height:1.5;
  background:var(--bg);
  color:var(--text);
  transition:background .25s ease, color .25s ease;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ============================================================
   3. WATERMARK (background)
   ============================================================ */
body::before{
  content:'BOAZMART';
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-28deg);
  font-size:clamp(80px, 15vw, 220px);
  font-weight:900;
  letter-spacing:clamp(8px, 2vw, 24px);
  color:var(--primary);
  opacity:.035;
  pointer-events:none;
  user-select:none;
  z-index:0;
  white-space:nowrap;
  font-family:'Segoe UI', Roboto, sans-serif;
}
[data-theme="dark"] body::before{
  opacity:.05;
}

/* Watermark icon nyuma ya app-body */
.app-body::after{
  content:'\f0e7'; /* fa-bolt */
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  position:fixed;
  bottom:-60px;
  right:-40px;
  font-size:clamp(200px, 30vw, 420px);
  color:var(--primary);
  opacity:.025;
  pointer-events:none;
  user-select:none;
  z-index:0;
  transform:rotate(-15deg);
  line-height:1;
}
[data-theme="dark"] .app-body::after{
  opacity:.04;
}

/* Login page watermark */
.login-body::before{
  content:'BOAZMART';
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-28deg);
  font-size:clamp(60px, 12vw, 180px);
  font-weight:900;
  letter-spacing:clamp(6px, 1.5vw, 20px);
  color:var(--primary);
  opacity:.05;
  pointer-events:none;
  user-select:none;
  z-index:0;
  white-space:nowrap;
}

a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit}
img{max-width:100%;display:block}
ul,ol{list-style:none}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ============================================================
   4. LOGIN PAGE
   ============================================================ */
.login-body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:20px;
  background:linear-gradient(135deg,#f4fbf1 0%,#eaf6e4 100%);
  position:relative;
}
[data-theme="dark"] .login-body{
  background:linear-gradient(135deg,#0f1720 0%,#1a2634 100%);
}

.login-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  padding:34px 30px;
  animation:fadeUp .35s ease;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.login-brand{text-align:center;margin-bottom:22px}
.login-brand .brand-logo{
  width:60px;height:60px;
  background:var(--primary);color:#fff;
  border-radius:16px;
  display:inline-flex;
  align-items:center;justify-content:center;
  font-size:26px;margin-bottom:12px;
  box-shadow:0 6px 20px rgba(var(--primary-rgb),.35);
}
.login-brand h1{
  font-size:1.5rem;letter-spacing:1px;
  color:var(--text);font-weight:700;
}
.login-brand p{color:var(--muted);font-size:.9rem;margin-top:4px}

.lang-switch{
  display:flex;justify-content:center;gap:4px;
  background:var(--border);padding:4px;
  border-radius:20px;width:fit-content;
  margin:0 auto 18px;
}
.lang-switch a{
  padding:5px 14px;border-radius:16px;
  font-size:.82rem;font-weight:600;
  color:var(--muted);transition:.2s;
}
.lang-switch a.active{background:var(--primary);color:#fff}

/* ============================================================
   5. FIELDS
   ============================================================ */
.field{display:block;margin-bottom:14px}
.field>span{
  display:block;font-size:.85rem;
  color:var(--muted);margin-bottom:6px;font-weight:500;
}
.field input,
.field select,
.field textarea{
  width:100%;padding:11px 14px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg);color:var(--text);
  font-size:.95rem;
  transition:border .2s, box-shadow .2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.20);
}

.input-wrap{position:relative;display:flex;align-items:center}
.input-icon{
  position:absolute;left:12px;
  color:var(--muted);pointer-events:none;font-size:.9rem;z-index:1;
}
.input-wrap input{
  width:100%;padding:11px 42px 11px 38px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg);color:var(--text);
  font-size:.95rem;
  transition:border .2s, box-shadow .2s;
}
.input-wrap input:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.20);
}
.toggle-pass{
  position:absolute;right:10px;
  background:none;border:none;
  color:var(--muted);padding:6px;
  font-size:.9rem;cursor:pointer;transition:color .15s;
}
.toggle-pass:hover{color:var(--primary)}

.login-row{display:flex;justify-content:flex-end;margin:6px 0 16px}
.link{color:var(--primary);font-size:.85rem;font-weight:600;transition:.15s}
.link:hover{text-decoration:underline}

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:11px 18px;
  border-radius:var(--radius-sm);border:none;
  font-size:.92rem;font-weight:600;line-height:1;
  transition:.2s;cursor:pointer;white-space:nowrap;
}
.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}

.btn-primary{
  background:var(--primary);color:#fff;
  box-shadow:0 2px 8px rgba(var(--primary-rgb),.25);
}
.btn-primary:hover{
  background:var(--primary-hover);
  box-shadow:0 4px 12px rgba(var(--primary-rgb),.35);
  transform:translateY(-1px);
}
.btn-primary:active{transform:translateY(0)}

.btn-secondary{
  background:rgba(var(--primary-rgb),.10);
  color:var(--primary);
  border:1px solid rgba(var(--primary-rgb),.28);
}
.btn-secondary:hover{background:var(--primary);color:#fff}

.btn-ghost{
  background:transparent;color:var(--text);
  border:1px solid var(--border);
}
.btn-ghost:hover{background:var(--border)}

.btn-danger{background:var(--error);color:#fff}
.btn-danger:hover{background:#b91c1c}

.btn-block{width:100%}

/* ============================================================
   7. ALERTS
   ============================================================ */
.alert{
  padding:11px 15px;border-radius:var(--radius-sm);
  font-size:.88rem;display:flex;
  align-items:center;gap:8px;margin-bottom:14px;
  animation:slideDown .25s ease;
}
.alert-error{background:var(--error-bg);color:var(--error-text);border:1px solid rgba(220,38,38,.25)}
.alert-success{background:var(--success-bg);color:var(--success-text);border:1px solid rgba(22,163,74,.25)}
.alert-warning{background:var(--warning-bg);color:var(--warning-text);border:1px solid rgba(245,158,11,.25)}
.alert-info{background:var(--info-bg);color:var(--info-text);border:1px solid rgba(14,165,233,.25)}

@keyframes slideDown{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

/* ============================================================
   8. STEPS
   ============================================================ */
.steps{display:flex;justify-content:center;gap:10px;margin-bottom:20px}
.steps span{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--border);color:var(--muted);
  font-weight:600;font-size:.85rem;transition:.25s;
}
.steps span.active{
  background:var(--primary);color:#fff;
  box-shadow:0 4px 12px rgba(var(--primary-rgb),.35);
}

/* ============================================================
   9. APP SHELL
   ============================================================ */
.app-body{
  min-height:100vh;
  display:flex;flex-direction:column;
  background:var(--bg);
  position:relative;
}

.topbar{
  height:var(--topbar-h);
  background:var(--header-bg);
  color:var(--header-text);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;
  position:sticky;top:0;z-index:40;
  transition:background .25s ease, color .25s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
}
.topbar-left,
.topbar-right{display:flex;align-items:center;gap:12px}
.topbar-right{gap:14px}

.brand{display:flex;align-items:center;gap:10px}
.brand-logo-sm{
  width:34px;height:34px;
  background:var(--primary);color:#fff;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  box-shadow:0 3px 10px rgba(var(--primary-rgb),.35);
}
.brand-title{
  font-weight:700;letter-spacing:1px;
  font-size:1rem;color:var(--header-text);
}

.hamburger{
  display:none;background:none;border:none;
  color:var(--header-text);font-size:1.25rem;
  cursor:pointer;padding:6px;
  border-radius:var(--radius-sm);
  transition:.15s;
}
.hamburger:hover{background:rgba(var(--primary-rgb),.10)}

.icon-btn{
  position:relative;background:none;border:none;
  color:var(--header-text);font-size:1.15rem;
  cursor:pointer;padding:6px;
  border-radius:var(--radius-sm);
  transition:.15s;
}
.icon-btn:hover{
  color:var(--primary);
  background:rgba(var(--primary-rgb),.08);
}
.badge-dot{
  position:absolute;top:6px;right:6px;
  width:8px;height:8px;border-radius:50%;
  background:#ef4444;
  border:2px solid var(--header-bg);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}
  70%{box-shadow:0 0 0 6px rgba(239,68,68,0)}
}

.role-chip{
  background:rgba(var(--primary-rgb),.14);
  color:var(--primary);
  padding:4px 10px;border-radius:20px;
  font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;
}

/* ===== Avatar ===== */
.avatar-wrap{
  display:flex;align-items:center;gap:6px;
  cursor:pointer;position:relative;
  padding:4px;border-radius:var(--radius-sm);
  transition:background .15s;
}
.avatar-wrap:hover{background:rgba(var(--primary-rgb),.08)}

.avatar{
  width:36px;height:36px;border-radius:50%;
  object-fit:cover;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;
}
.avatar-txt{
  background:var(--primary);color:#fff;
  font-weight:700;font-size:.82rem;letter-spacing:.5px;
}
.avatar.sm{width:32px;height:32px;font-size:.72rem}
.avatar-big{
  width:140px;height:140px;border-radius:50%;
  object-fit:cover;border:4px solid var(--primary);
  box-shadow:0 8px 24px rgba(var(--primary-rgb),.25);
}
.avatar-big.avatar-txt{
  display:flex;align-items:center;justify-content:center;
  font-size:2.6rem;font-weight:800;
  background:var(--primary);color:#fff;
}
.avatar-caret{font-size:.7rem;opacity:.7;color:var(--header-text)}

.avatar-menu{
  display:none;position:absolute;
  top:calc(100% + 10px);right:0;
  width:230px;background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  overflow:hidden;z-index:50;
  animation:pop .18s ease;
}
.avatar-menu.open{display:block}
@keyframes pop{
  from{transform:scale(.94);opacity:0}
  to{transform:scale(1);opacity:1}
}
.avatar-menu-head{padding:12px 14px;border-bottom:1px solid var(--border)}
.avatar-menu-head strong{display:block;font-size:.9rem;color:var(--text)}
.avatar-menu-head small{color:var(--muted);font-size:.78rem}
.avatar-menu a{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;font-size:.9rem;
  color:var(--text);transition:.15s;
}
.avatar-menu a i{width:16px;text-align:center;color:var(--muted)}
.avatar-menu a:hover{
  background:rgba(var(--primary-rgb),.08);
  color:var(--primary);
}
.avatar-menu a:hover i{color:var(--primary)}
.avatar-menu a.danger{color:var(--error)}
.avatar-menu a.danger i{color:var(--error)}
.avatar-menu a.danger:hover{background:var(--error-bg)}

/* ============================================================
   10. LAYOUT
   ============================================================ */
.layout{
  display:flex;flex:1;
  min-height:calc(100vh - var(--topbar-h));
  position:relative;z-index:1;
}

.sidebar{
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
  border-right:1px solid var(--border);
  padding:16px 0px;
  transition:transform .25s ease, background .25s ease, color .25s ease;
  flex-shrink:0;
  position:relative;
}
.sidebar nav{display:flex;flex-direction:column;gap:3px}

.sidebar-brand{
  display:none;align-items:center;gap:10px;
  padding:8px 10px 16px;
  border-bottom:1px solid var(--border);
  margin-bottom:10px;
  font-weight:700;letter-spacing:1px;
  color:var(--sidebar-text);
}
.sidebar-close{
  display:none;position:absolute;
  top:12px;right:12px;
  width:34px;height:34px;
  border-radius:var(--radius-sm);
  background:rgba(var(--primary-rgb),.10);
  color:var(--primary);border:none;
  cursor:pointer;font-size:1rem;
  align-items:center;justify-content:center;
}

.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 18px;border-radius:0;
  color:var(--sidebar-text);
  font-size:.92rem;font-weight:500;
  transition:.15s;
}
.nav-item i{
  width:20px;text-align:center;
  font-size:.95rem;opacity:.7;
  transition:opacity .15s, color .15s;
}
.nav-item:hover{
  background:rgba(var(--primary-rgb),.10);
  color:var(--primary);
}
.nav-item:hover i{opacity:1;color:var(--primary)}
.nav-item.active{
  background:var(--primary);color:#fff;
  box-shadow:0 4px 12px rgba(var(--primary-rgb),.25);
}
.nav-item.active i{color:#fff;opacity:1}
.nav-item.logout{color:var(--error);margin-top:10px}
.nav-item.logout i{color:var(--error);opacity:.9}
.nav-item.logout:hover{background:var(--error-bg)}

.main-content{
  flex:1;padding:24px;
  overflow-x:auto;min-width:0;
  position:relative;z-index:1;
}

.overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.45);z-index:45;
  animation:fadeIn .2s ease;
}
.overlay.show{display:block}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ============================================================
   11. RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .hamburger{display:block}
  .sidebar{
    position:fixed;top:var(--topbar-h);
    left:0;bottom:0;z-index:46;
    transform:translateX(-100%);
    box-shadow:6px 0 24px rgba(0,0,0,.15);
    overflow-y:auto;
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-brand{display:flex}
  .sidebar-close{display:flex}
  .main-content{padding:16px}
  .role-chip{display:none}
}
@media (max-width:600px){
  .topbar{padding:0 12px}
  .brand-title{display:none}
  .avatar-menu{width:200px}
  .page-head.between{flex-direction:column;align-items:stretch}
}

/* ============================================================
   12. CARDS & GRID
   ============================================================ */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  transition:box-shadow .2s;
}
.card:hover{box-shadow:var(--shadow-md)}
.card h2{font-size:1.1rem;margin-bottom:14px;color:var(--text)}
.card h3{
  font-size:1rem;display:flex;
  align-items:center;gap:10px;color:var(--text);
}
.card h3 i{color:var(--primary)}

.grid-3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}

.stat{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  display:flex;align-items:center;gap:14px;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.stat:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:rgba(var(--primary-rgb),.35);
}
.stat i{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--primary-rgb),.14);
  color:var(--primary);font-size:20px;flex-shrink:0;
}
.stat h3{font-size:1.35rem;font-weight:700;color:var(--text)}
.stat p{color:var(--muted);font-size:.85rem}

/* ============================================================
   13. PAGE HEAD
   ============================================================ */
.page-head{margin-bottom:20px}
.page-head h2{
  font-size:1.35rem;display:flex;
  align-items:center;gap:10px;
  color:var(--text);font-weight:700;
}
.page-head h2 i{color:var(--primary)}
.page-head p{color:var(--muted);font-size:.9rem;margin-top:4px}
.page-head.between{
  display:flex;justify-content:space-between;
  align-items:center;gap:14px;flex-wrap:wrap;
}

/* ============================================================
   14. FILTER BAR
   ============================================================ */
.filter-bar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.filter-bar .field{margin:0}
.filter-bar select,
.filter-bar input{min-width:150px}

/* ============================================================
   15. TABLES
   ============================================================ */
.data-table{width:100%;border-collapse:collapse;min-width:760px}
.data-table th,
.data-table td{
  padding:12px;text-align:left;
  border-bottom:1px solid var(--border);
  font-size:.9rem;color:var(--text);
}
.data-table th{
  color:var(--muted);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.5px;
  background:rgba(var(--primary-rgb),.04);
  font-weight:700;
}
.data-table tbody tr{transition:background .15s}
.data-table tbody tr:hover td{background:rgba(var(--primary-rgb),.04)}
.data-table .actions{
  white-space:nowrap;display:flex;
  gap:4px;align-items:center;
}

.icon-btn.sm{
  width:32px;height:32px;border-radius:var(--radius-sm);
  background:rgba(var(--primary-rgb),.10);
  color:var(--primary);border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.85rem;transition:.15s;
}
.icon-btn.sm:hover{background:var(--primary);color:#fff}
.icon-btn.sm.danger{background:var(--error-bg);color:var(--error)}
.icon-btn.sm.danger:hover{background:var(--error);color:#fff}

/* ============================================================
   16. CHIPS
   ============================================================ */
.chip{
  display:inline-block;padding:3px 10px;
  border-radius:20px;font-size:.72rem;
  font-weight:700;letter-spacing:.3px;
  background:var(--border);color:var(--muted);
}
.chip-admin{background:#ede9fe;color:#6d28d9}
.chip-agent{background:rgba(var(--primary-rgb),.16);color:var(--primary)}
.chip-on{background:var(--success-bg);color:var(--success-text)}
.chip-off{background:var(--error-bg);color:var(--error-text)}
[data-theme="dark"] .chip-admin{background:#3b2f6b;color:#c4b5fd}

/* ============================================================
   17. MODAL
   ============================================================ */
.modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  align-items:center;justify-content:center;
  z-index:100;padding:20px;
  backdrop-filter:blur(2px);
}
.modal.open{display:flex}

.modal-box{
  background:var(--card);
  border-radius:var(--radius-lg);
  width:100%;max-width:600px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border);
  animation:pop .25s ease;
  max-height:90vh;overflow-y:auto;
}
.modal-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--card);z-index:1;
}
.modal-head h3{
  font-size:1rem;display:flex;gap:8px;align-items:center;
  color:var(--text);
}
.modal-head h3 i{color:var(--primary)}
.modal-body{padding:20px}
.modal-foot{
  display:flex;justify-content:flex-end;gap:10px;
  margin-top:18px;padding-top:16px;
  border-top:1px solid var(--border);
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){
  .two-col{grid-template-columns:1fr}
  .modal-box{max-width:100%}
}
.check-row{
  display:flex;gap:20px;margin-top:8px;
  flex-wrap:wrap;padding:12px;
  background:rgba(var(--primary-rgb),.05);
  border-radius:var(--radius-sm);
}
.check-row label{
  display:flex;align-items:center;gap:8px;
  cursor:pointer;font-size:.9rem;color:var(--text);
}
.check-row input{accent-color:var(--primary);width:16px;height:16px}

/* ============================================================
   18. PROFILE
   ============================================================ */
.profile-grid{
  display:grid;grid-template-columns:280px 1fr;gap:18px;
}
@media (max-width:800px){.profile-grid{grid-template-columns:1fr}}
.avatar-card{text-align:center}
.avatar-big-wrap{display:flex;justify-content:center}
.hint{color:var(--muted);font-size:.78rem;margin-top:8px}
.info-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:16px;padding-top:16px;
  border-top:1px solid var(--border);
}

/* ============================================================
   19. NOTIFICATIONS
   ============================================================ */
.notif-group{margin-bottom:22px}
.notif-day{
  font-size:.8rem;text-transform:uppercase;
  letter-spacing:1px;color:var(--muted);
  margin-bottom:8px;font-weight:700;
}
.notif-list{
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);
}
.notif-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-bottom:1px solid var(--border);
  transition:.15s;cursor:pointer;
}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:rgba(var(--primary-rgb),.05)}
.notif-icon{
  width:40px;height:40px;border-radius:10px;
  flex-shrink:0;display:flex;
  align-items:center;justify-content:center;
  font-size:1rem;
}
.notif-item.info    .notif-icon{background:var(--info-bg);color:var(--info-text)}
.notif-item.success .notif-icon{background:var(--success-bg);color:var(--success-text)}
.notif-item.warn    .notif-icon{background:var(--warning-bg);color:var(--warning-text)}
.notif-item.danger  .notif-icon{background:var(--error-bg);color:var(--error-text)}
.notif-body{flex:1;display:flex;flex-direction:column;min-width:0}
.notif-body strong{font-size:.92rem;color:var(--text)}
.notif-body small{
  color:var(--muted);font-size:.82rem;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.notif-time{color:var(--muted);font-size:.78rem;white-space:nowrap}
.notif-arrow{color:var(--muted);font-size:.72rem}

/* ============================================================
   20. TOAST
   ============================================================ */
.toast{
  position:fixed;bottom:24px;right:24px;
  padding:14px 20px;border-radius:12px;
  color:#fff;font-weight:600;font-size:.9rem;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(20px);
  transition:.3s ease;z-index:999;
  pointer-events:none;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{background:var(--success)}
.toast.error{background:var(--error)}
.toast.warn{background:var(--warning)}

/* ============================================================
   21. UTILITIES
   ============================================================ */
.text-center{text-align:center}
.text-muted{color:var(--muted)}
.text-primary{color:var(--primary)}
.text-sm{font-size:.85rem}
.text-lg{font-size:1.1rem}
.fw-bold{font-weight:700}

.mt-0{margin-top:0}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:8px}
.mb-2{margin-bottom:16px}
.mb-3{margin-bottom:24px}

.flex{display:flex}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-center{display:flex;justify-content:center;align-items:center}
.flex-col{flex-direction:column}
.gap-1{gap:8px}
.gap-2{gap:16px}

.hidden{display:none}
.w-100{width:100%}

/* ============================================================
   22. PRINT
   ============================================================ */
@media print{
  body::before,
  .app-body::after,
  .topbar,
  .sidebar,
  .overlay,
  .hamburger,
  .toast,
  .save-status{display:none !important}
  .main-content{padding:0}
  .layout{display:block}
}

/* ============================================================
   23. ADMIN DASHBOARD
   ============================================================ */

/* Hero */
.dash-hero{
  background:linear-gradient(135deg,
    rgba(var(--primary-rgb),.10) 0%,
    rgba(var(--primary-rgb),.02) 100%);
  border:1px solid rgba(var(--primary-rgb),.18);
  border-radius:16px;
  padding:22px 24px;
  margin-bottom:20px;
  position:relative;
  overflow:hidden;
}
.dash-hero::after{
  content:'';
  position:absolute;
  right:-60px;top:-60px;
  width:220px;height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--primary-rgb),.18), transparent 70%);
  pointer-events:none;
}
.dash-hero h1{
  font-size:1.5rem;
  font-weight:800;
  color:var(--text);
  display:flex;align-items:center;gap:10px;
  letter-spacing:-.3px;
}
.dash-hero h1 i{color:var(--primary)}
.dash-hero p{color:var(--muted);font-size:.9rem;margin-top:4px}
.dash-hero .meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.dash-hero .meta-item{
  display:flex;align-items:center;gap:8px;
  font-size:.85rem;color:var(--text-soft);
  background:var(--card);
  padding:6px 12px;border-radius:20px;
  border:1px solid var(--border);
}
.dash-hero .meta-item i{color:var(--primary)}

/* KPI cards */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;
  margin-bottom:20px;
}
.kpi{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  position:relative;
  overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.kpi:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(var(--primary-rgb),.15);
  border-color:rgba(var(--primary-rgb),.35);
}
.kpi::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb),.3));
}
.kpi-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:10px;
}
.kpi-ic{
  width:42px;height:42px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;
}
.kpi-ic.green{background:rgba(var(--primary-rgb),.15);color:var(--primary)}
.kpi-ic.blue{background:rgba(14,165,233,.15);color:#0ea5e9}
.kpi-ic.purple{background:rgba(124,58,237,.15);color:#7c3aed}
.kpi-ic.orange{background:rgba(245,158,11,.15);color:#f59e0b}
.kpi-ic.red{background:rgba(220,38,38,.15);color:#dc2626}
.kpi-ic.pink{background:rgba(236,72,153,.15);color:#ec4899}

.kpi-label{
  font-size:.78rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;
  font-weight:700;
}
.kpi-value{
  font-size:1.5rem;font-weight:800;color:var(--text);
  line-height:1.1;letter-spacing:-.5px;
}
.kpi-foot{
  display:flex;align-items:center;gap:6px;
  margin-top:8px;font-size:.78rem;font-weight:600;
  flex-wrap:wrap;
}
.kpi-trend{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:20px;
  font-size:.72rem;font-weight:700;
}
.kpi-trend.up{background:var(--success-bg);color:var(--success-text)}
.kpi-trend.down{background:var(--error-bg);color:var(--error-text)}
.kpi-trend.flat{background:var(--border);color:var(--muted)}

/* Charts grid */
.charts-grid{
  display:grid;grid-template-columns:2fr 1fr;
  gap:16px;margin-bottom:20px;
}
.charts-grid-2{
  display:grid;grid-template-columns:1fr 1fr;
  gap:16px;margin-bottom:20px;
}
.charts-grid-3{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;margin-bottom:20px;
}
@media (max-width:1000px){
  .charts-grid,
  .charts-grid-2,
  .charts-grid-3{grid-template-columns:1fr}
}
@media (max-width:1200px) and (min-width:1001px){
  .charts-grid-3{grid-template-columns:1fr 1fr}
}

/* Chart card */
.chart-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
  transition:box-shadow .2s, border-color .2s;
}
.chart-card:hover{
  box-shadow:0 8px 24px rgba(var(--primary-rgb),.10);
  border-color:rgba(var(--primary-rgb),.25);
}
.chart-head{
  display:flex;justify-content:space-between;
  align-items:flex-start;gap:12px;
  margin-bottom:16px;flex-wrap:wrap;
}
.chart-head h3{
  font-size:1rem;font-weight:700;
  display:flex;align-items:center;gap:8px;
  color:var(--text);
}
.chart-head h3 i{color:var(--primary)}
.chart-head .chart-sub{
  font-size:.78rem;color:var(--muted);
  margin-top:2px;
}
.chart-body{position:relative;height:280px}
.chart-body.sm{height:230px}
.chart-body.lg{height:340px}

/* Dash tables */
.dash-table-wrap{overflow-x:auto}
.dash-table{width:100%;border-collapse:collapse}
.dash-table th,
.dash-table td{
  padding:11px 14px;text-align:left;
  border-bottom:1px solid var(--border);
  font-size:.88rem;
}
.dash-table th{
  font-size:.75rem;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);
  background:rgba(var(--primary-rgb),.04);
  font-weight:700;
}
.dash-table tbody tr:hover td{
  background:rgba(var(--primary-rgb),.04);
}
.dash-table .amt{font-weight:700;color:var(--primary)}

/* Dash footer */
.dash-footer{
  display:grid;grid-template-columns:1.4fr 1fr;
  gap:16px;
}
@media (max-width:1000px){
  .dash-footer{grid-template-columns:1fr}
}

/* Pulse dot */
.pulse-dot{
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;margin-right:6px;
  animation:livePulse 1.6s infinite;
}
@keyframes livePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(1.4)}
}

/* ============================================================
   24. NOTIFICATION BADGES (header + sidebar)
   ============================================================ */
.badge-num{
  position:absolute;
  top:0;
  right:0;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:10px;
  background:#ef4444;
  color:#fff;
  font-size:.65rem;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--header-bg);
  line-height:1;
  letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(239,68,68,.35);
  animation:badgePop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badgePop{
  from{transform:scale(0)}
  to{transform:scale(1)}
}

.nav-badge{
  margin-left:auto;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:10px;
  background:#ef4444;
  color:#fff;
  font-size:.68rem;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(239,68,68,.35);
}

/* Badge inapungua rangi kwenye active nav-item */
.nav-item.active .nav-badge{
  background:#fff;
  color:var(--primary);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* ============================================================
   25. CHANGE PASSWORD MODAL
   ============================================================ */
.cp-modal-box{
  max-width:440px;
}

.cp-field{
  display:block;
  margin-bottom:14px;
}

.cp-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
}

.cp-input-wrap .cp-icon{
  position:absolute;
  left:14px;
  color:var(--muted);
  font-size:.9rem;
  pointer-events:none;
}

.cp-input-wrap input{
  width:100%;
  padding:12px 44px 12px 42px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg);
  color:var(--text);
  font-size:.92rem;
  transition:border .2s, box-shadow .2s;
}

.cp-input-wrap input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.15);
}

.cp-toggle{
  position:absolute;
  right:10px;
  background:none;
  border:none;
  color:var(--muted);
  padding:6px;
  cursor:pointer;
  font-size:.9rem;
  border-radius:6px;
  transition:.15s;
}
.cp-toggle:hover{
  color:var(--primary);
  background:rgba(var(--primary-rgb),.08);
}

.cp-err{
  display:none;
  font-size:.75rem;
  color:var(--error);
  margin-top:5px;
  align-items:center;
  gap:5px;
}
.cp-err.show{display:flex}

.cp-hint{
  display:flex;
  gap:10px;
  padding:12px 14px;
  margin-top:6px;
  margin-bottom:4px;
  background:rgba(var(--primary-rgb),.05);
  border:1px dashed rgba(var(--primary-rgb),.25);
  border-radius:10px;
  font-size:.82rem;
  color:var(--text);
  line-height:1.5;
}
.cp-hint i{
  color:var(--primary);
  font-size:.95rem;
  margin-top:2px;
  flex-shrink:0;
}

/* Password strength meter */
.cp-strength{
  margin-top:8px;
  display:none;
}
.cp-strength.show{display:block}

.cp-strength-bar{
  height:5px;
  border-radius:3px;
  background:var(--border);
  overflow:hidden;
  display:flex;
  gap:2px;
}
.cp-strength-bar span{
  flex:1;
  height:100%;
  background:var(--border);
  border-radius:3px;
  transition:.3s;
}
.cp-strength-bar.s1 span:nth-child(1){background:#dc2626}
.cp-strength-bar.s2 span:nth-child(1),
.cp-strength-bar.s2 span:nth-child(2){background:#f59e0b}
.cp-strength-bar.s3 span:nth-child(1),
.cp-strength-bar.s3 span:nth-child(2),
.cp-strength-bar.s3 span:nth-child(3){background:#22c55e}
.cp-strength-bar.s4 span{background:#22c55e}

.cp-strength-text{
  font-size:.72rem;
  color:var(--muted);
  margin-top:4px;
  font-weight:600;
}
.cp-strength-text.weak{color:#dc2626}
.cp-strength-text.medium{color:#f59e0b}
.cp-strength-text.strong{color:#22c55e}