/* ══════════════════════════════════════════════
   ZANA CRM v2 — Shared Stylesheet
   ══════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --orange:#f97316; --dark:#111827; --gray:#6b7280;
  --light-gray:#f3f4f6; --border:#e5e7eb;
  --green:#059669; --red:#dc2626; --blue:#3b82f6;
  --sidebar-w:220px;
}
body{font-family:Arial,sans-serif;background:#f6f7fb;color:var(--dark);font-size:15px}

/* ── LAYOUT ── */
#layout{display:flex;min-height:100vh}
#sidebar{width:var(--sidebar-w);background:var(--dark);color:#fff;flex-shrink:0;display:flex;flex-direction:column;transition:left .25s ease}
#sidebar .brand{padding:18px 16px;font-size:18px;font-weight:900;border-bottom:1px solid #374151;display:flex;align-items:center;gap:8px}
#sidebar nav{flex:1;padding:12px 0}
#sidebar nav a{display:flex;align-items:center;gap:10px;padding:10px 16px;color:#9ca3af;text-decoration:none;font-size:14px;font-weight:600;transition:background .15s,color .15s}
#sidebar nav a:hover,#sidebar nav a.active{background:#374151;color:#fff}
#sidebar nav a.active{border-left:3px solid var(--orange)}
#sidebar nav .nav-section{font-size:11px;color:#4b5563;padding:14px 16px 4px;text-transform:uppercase;letter-spacing:.05em}
#sidebar .user-info{padding:14px 16px;border-top:1px solid #374151;font-size:13px}
#sidebar .user-info .uname{font-weight:700;color:#fff}
#sidebar .user-info .urole{color:#9ca3af;font-size:11px;margin-top:2px}
#sidebar .user-info button{margin-top:8px;padding:7px;font-size:12px;background:#374151;color:#9ca3af;border:0;border-radius:7px;cursor:pointer;width:100%}
#sidebar .user-info button:hover{background:#f97316;color:#fff}
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#topbar{background:#fff;padding:12px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
#topbar .page-title{font-size:18px;font-weight:700;flex:1}
#content{flex:1;padding:20px;overflow-y:auto}

/* ── HAMBURGER BUTTON (hidden on desktop) ── */
#sidebarToggle{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;background:var(--dark);color:#fff;
  border:none;border-radius:9px;font-size:20px;cursor:pointer;
  flex-shrink:0;line-height:1
}

/* ── SIDEBAR OVERLAY (mobile backdrop) ── */
#sidebarOverlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);z-index:999;
}
#sidebarOverlay.open{display:block}

/* ── CARDS ── */
.card{background:#fff;border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:0 2px 12px rgba(0,0,0,.07)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.card-title{font-size:15px;font-weight:700}

/* ── STAT BOXES ── */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}
@media(min-width:640px){.stat-grid.col4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:640px){.stat-grid.col3{grid-template-columns:repeat(3,1fr)}}
.stat-box{background:#f9fafb;border-radius:12px;padding:14px;text-align:center}
.stat-box .num{font-size:28px;font-weight:900}
.stat-box .lbl{font-size:12px;color:var(--gray);margin-top:3px}
.stat-box.orange .num{color:var(--orange)}
.stat-box.green  .num{color:var(--green)}
.stat-box.red    .num{color:var(--red)}
.stat-box.blue   .num{color:var(--blue)}

/* ── FORMS ── */
label{display:block;font-size:13px;color:var(--gray);margin-bottom:3px;font-weight:600}
input,select,textarea{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:9px 10px;font-size:14px;color:var(--dark);background:#fff;margin-bottom:10px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange)}
textarea{resize:vertical;min-height:60px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row.col3{grid-template-columns:1fr 1fr 1fr}

/* ── BUTTONS ── */
button,.btn{display:inline-block;padding:10px 18px;border:0;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s;text-decoration:none}
button:hover,.btn:hover{opacity:.85}
button:disabled,.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-orange{background:var(--orange);color:#fff}
.btn-dark  {background:var(--dark);color:#fff}
.btn-green {background:var(--green);color:#fff}
.btn-red   {background:var(--red);color:#fff}
.btn-gray  {background:var(--gray);color:#fff}
.btn-blue  {background:var(--blue);color:#fff}
.btn-ghost {background:transparent;border:1.5px solid var(--border);color:var(--dark)}
.btn-sm    {padding:6px 12px;font-size:13px}
.btn-block {display:block;width:100%;text-align:center}

/* ── TABLE ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;font-size:13px;border-collapse:collapse}
th{padding:9px 8px;text-align:left;background:#f9fafb;color:var(--dark);font-weight:700;border-bottom:2px solid var(--border);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--light-gray);color:var(--dark);vertical-align:middle}
tr:hover td{background:#fafafa}
.td-right{text-align:right}
.td-center{text-align:center}

/* ── BADGES / TAGS ── */
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700;border:1px solid}
.badge-orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
.badge-green {background:#f0fdf4;color:#166534;border-color:#bbf7d0}
.badge-red   {background:#fef2f2;color:#991b1b;border-color:#fca5a5}
.badge-blue  {background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.badge-gray  {background:#f9fafb;color:#374151;border-color:#e5e7eb}

/* ── MISC ── */
.divider{border:none;border-top:1.5px solid var(--light-gray);margin:14px 0}
.spinner{text-align:center;padding:32px;color:var(--gray);font-size:14px}
.empty{text-align:center;padding:40px;color:#9ca3af}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--dark);color:#fff;padding:10px 24px;border-radius:99px;font-size:14px;font-weight:600;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1}
.alert{padding:10px 14px;border-radius:9px;font-size:13px;font-weight:600;margin-bottom:12px}
.alert-warn{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.alert-err {background:#fef2f2;color:#991b1b;border:1px solid #fca5a5}
.alert-ok  {background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}

/* ── MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:5000;align-items:center;justify-content:center;padding:12px}
.modal-overlay.open{display:flex}
.modal-box{background:#fff;border-radius:16px;padding:22px;width:92%;max-width:480px;max-height:90vh;overflow-y:auto}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal-title{font-size:16px;font-weight:700}
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--gray);padding:0;margin:0}

/* ── LOGIN SCREEN ── */
#loginScreen{position:fixed;inset:0;background:#111827;z-index:9000;display:flex;align-items:center;justify-content:center}
.login-box{background:#fff;border-radius:20px;padding:32px 28px;width:90%;max-width:380px;box-shadow:0 8px 40px rgba(0,0,0,.4);text-align:center}
.login-box .brand{font-size:30px;font-weight:900;color:var(--dark);margin-bottom:4px}
.login-box .sub{font-size:13px;color:#9ca3af;margin-bottom:22px}
.login-box select{text-align:center;font-size:15px;margin-bottom:8px}
.pin-display{display:flex;gap:12px;justify-content:center;margin:14px 0}
.pin-circle{width:16px;height:16px;border-radius:50%;background:#e5e7eb;transition:background .2s}
.pin-circle.filled{background:var(--orange)}
.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.pin-keypad button{background:#f3f4f6;color:var(--dark);border-radius:12px;font-size:22px;padding:14px 0;margin:0;font-weight:700;border:none;cursor:pointer}
.pin-keypad button:hover{background:#e5e7eb}
.pin-keypad .btn-enter{background:var(--orange);color:#fff;grid-column:span 3;font-size:15px;padding:14px;border-radius:10px}
.pin-err{color:var(--red);font-size:13px;font-weight:700;min-height:20px;margin-top:4px}

/* ── KPI PILLS ── */
.kpi-pass{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700}
.kpi-pass.yes{background:#f0fdf4;color:#166534}
.kpi-pass.no {background:#fef2f2;color:#991b1b}

/* ── PROGRESS BAR ── */
.progress-row{margin-bottom:4px}
.progress-bar{height:10px;background:#f3f4f6;border-radius:99px;overflow:hidden}
.progress-fill{height:100%;border-radius:99px;transition:width .5s ease}
.progress-fill.blue  {background:var(--blue)}
.progress-fill.orange{background:var(--orange)}
.progress-fill.green {background:var(--green)}

/* ── STAT BOX SUB TEXT ── */
.stat-box .sub{font-size:11px;color:var(--gray);margin-top:2px}

/* ══════════════════════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
   ══════════════════════════════════════════════ */
@media(max-width:1024px){
  :root{ --sidebar-w:190px }
  #sidebar nav a{font-size:13px;padding:9px 12px}
  #content{padding:16px}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤767px)
   ══════════════════════════════════════════════ */
@media(max-width:767px){
  /* Show hamburger button */
  #sidebarToggle{display:flex}

  /* Sidebar: fixed overlay, starts off-screen */
  #sidebar{
    position:fixed;
    top:0;bottom:0;left:calc(-1 * var(--sidebar-w));
    z-index:1000;
    width:var(--sidebar-w);
    overflow-y:auto;
    box-shadow:4px 0 20px rgba(0,0,0,.3);
  }
  #sidebar.open{left:0}

  /* Main takes full width */
  #main{width:100%;min-height:100vh}

  /* Topbar */
  #topbar{padding:10px 14px}
  #topbar .page-title{font-size:15px}

  /* Content */
  #content{padding:12px}

  /* Forms collapse to single column */
  .form-row,.form-row.col3{grid-template-columns:1fr}

  /* Stat grids */
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid.col4,.stat-grid.col3{grid-template-columns:repeat(2,1fr)}
  .stat-box .num{font-size:22px}

  /* Cards */
  .card{padding:12px;border-radius:12px}
  .card-header{flex-direction:column;align-items:flex-start;gap:8px}

  /* Tables */
  table{font-size:12px}
  th,td{padding:7px 6px}

  /* Buttons */
  .btn-sm{padding:8px 10px;font-size:12px}

  /* Modal */
  .modal-box{width:98%;padding:16px;border-radius:12px}
  .modal-overlay{padding:8px}

  /* Toast */
  .toast{width:90%;max-width:340px;white-space:normal;text-align:center;bottom:16px}

  /* Login box */
  .login-box{padding:24px 18px}
  .login-box .brand{font-size:26px}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — SMALL PHONE (≤400px)
   ══════════════════════════════════════════════ */
@media(max-width:400px){
  :root{--sidebar-w:200px}
  .stat-grid.col4,.stat-grid.col3,.stat-grid{grid-template-columns:1fr 1fr}
  .stat-box .num{font-size:20px}
  .stat-box{padding:10px}
  .pin-keypad button{font-size:18px;padding:12px 0}
}