/* ==========================================================
   BKRTC Staff Management System — Main Stylesheet
   ========================================================== */

:root{
  --n:#0f1547;        /* navy primary */
  --n2:#07093a;        /* navy darker */
  --g:#c8960c;          /* gold */
  --g2:#e8b82a;        /* gold lighter */
  --bg:#f4f5fb;
  --w:#ffffff;
  --bd:rgba(15,21,71,.10);
  --mu:#6b7280;
  --rd:#dc2626;
  --gr:#16a34a;
  --bl:#2563eb;
  --or:#ea580c;
  --r:14px;
  --rs:8px;
  --fh:"Playfair Display",Georgia,serif;
  --f:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:var(--f);
  background:var(--bg);
  color:#1f2430;
  font-size:14px;
  line-height:1.5;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:var(--f);cursor:pointer;}
input,select,textarea{font-family:var(--f);font-size:13px;}

/* ===== LAYOUT ===== */
.app-shell{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{
  width:230px;flex-shrink:0;background:linear-gradient(180deg,var(--n2),var(--n));
  color:#fff;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  transition:width .2s ease;
}
.sidebar.collapsed{width:64px;}
.sidebar::-webkit-scrollbar{width:4px;}
.sidebar::-webkit-scrollbar-thumb{background:var(--g);border-radius:4px;}

.sb-brand{
  display:flex;align-items:center;gap:10px;padding:16px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sb-brand img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid rgba(200,150,12,.4);flex-shrink:0;}
.sb-brand .org-name{font-family:var(--fh);font-size:13px;font-weight:700;color:var(--g2);line-height:1.3;}
.sidebar.collapsed .org-name, .sidebar.collapsed .nsec{display:none;}

.nsec{
  font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:rgba(255,255,255,.35);padding:14px 16px 6px;
}
.ni{
  display:flex;align-items:center;gap:10px;padding:9px 16px;
  color:rgba(255,255,255,.78);font-size:13px;font-weight:500;
  border-left:3px solid transparent;cursor:pointer;position:relative;
}
.ni:hover{background:rgba(255,255,255,.06);color:#fff;}
.ni.active{background:rgba(200,150,12,.15);border-left-color:var(--g);color:var(--g2);font-weight:600;}
.ni .ico{width:16px;text-align:center;flex-shrink:0;font-size:14px;}
.ni .badge{
  margin-left:auto;background:var(--rd);color:#fff;font-size:10px;font-weight:700;
  border-radius:10px;padding:1px 6px;min-width:18px;text-align:center;
}
.sidebar.collapsed .ni span:not(.ico){display:none;}
.sidebar.collapsed .ni{justify-content:center;}

/* Main area */
.main{flex:1;display:flex;flex-direction:column;min-width:0;}

/* Topbar */
.topbar{
  height:56px;background:var(--n);color:#fff;display:flex;align-items:center;
  padding:0 18px;gap:14px;position:sticky;top:0;z-index:50;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.tb-burger{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;}
.tb-title{font-family:var(--fh);font-weight:700;color:var(--g2);font-size:15px;flex:1;}
.tb-clock{font-size:12px;color:rgba(255,255,255,.6);font-family:monospace;}
.tb-icon-btn{
  width:32px;height:32px;border-radius:50%;border:none;background:rgba(255,255,255,.08);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;
  position:relative;
}
.tb-icon-btn:hover{background:rgba(255,255,255,.18);}
.tb-icon-btn .dot{position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--rd);}
.tb-user{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:20px;background:rgba(200,150,12,.15);}
.tb-av{
  width:28px;height:28px;border-radius:50%;background:var(--g);color:var(--n);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;overflow:hidden;
}
.tb-av img{width:100%;height:100%;object-fit:cover;}
.tb-name{font-size:12px;font-weight:600;}
.tb-logout{background:none;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:6px;padding:6px 12px;font-size:12px;display:flex;align-items:center;gap:6px;}
.tb-logout:hover{background:rgba(255,255,255,.1);}

/* Content */
.content{flex:1;padding:20px;overflow-y:auto;}

/* Page header */
.ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
.ptitle{font-family:var(--fh);font-size:21px;font-weight:700;color:var(--n);display:flex;align-items:center;gap:8px;}
.ptitle .ico{color:var(--g);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
  border-radius:var(--rs);font-size:12.5px;font-weight:600;border:1px solid transparent;
  background:#eef0f8;color:var(--n);transition:all .12s;
}
.btn:hover{opacity:.88;}
.btn.bg{background:linear-gradient(135deg,var(--g2),var(--g));color:#3a2900;}
.btn.bn{background:var(--n);color:#fff;}
.btn.bo{background:#fff;border-color:var(--bd);color:var(--n);}
.btn.br{background:#fef2f2;color:var(--rd);border-color:rgba(220,38,38,.2);}
.btn.bbl{background:#eff6ff;color:var(--bl);border-color:rgba(37,99,235,.2);}
.btn.bgr{background:#f0fdf4;color:var(--gr);border-color:rgba(22,163,74,.2);}
.btn.bsm{padding:5px 11px;font-size:11.5px;}
.btn.bxs{padding:3px 8px;font-size:11px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* Cards / sections */
.card{background:var(--w);border-radius:var(--r);padding:16px;box-shadow:0 1px 4px rgba(15,21,71,.05);border:1px solid var(--bd);}
.sc{background:var(--w);border-radius:var(--r);padding:18px;box-shadow:0 1px 4px rgba(15,21,71,.05);border:1px solid var(--bd);}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px;}
.stat-card{background:var(--w);border-radius:var(--r);padding:16px;border:1px solid var(--bd);}
.stat-card .stat-num{font-family:var(--fh);font-size:26px;font-weight:700;color:var(--n);}
.stat-card .stat-lbl{font-size:11.5px;color:var(--mu);margin-top:3px;}
.stat-card .stat-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:8px;}

/* Tables */
.tw{background:var(--w);border-radius:var(--r);overflow-x:auto;border:1px solid var(--bd);}
table{width:100%;border-collapse:collapse;font-size:12.5px;}
thead th{
  background:var(--n);color:var(--g2);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;padding:10px 12px;text-align:left;white-space:nowrap;
}
tbody td{padding:9px 12px;border-bottom:1px solid rgba(0,0,0,.04);vertical-align:middle;}
tbody tr:hover td{background:rgba(15,21,71,.02);}
tbody tr:last-child td{border-bottom:none;}

/* Pills / badges */
.p{display:inline-block;padding:2px 9px;border-radius:12px;font-size:10.5px;font-weight:600;white-space:nowrap;}
.pnew{background:#dbeafe;color:#1e40af;}
.pcal{background:#f3e8ff;color:#6b21a8;}
.pna{background:#fce7f3;color:#9d174d;}
.pint{background:#dcfce7;color:#14532d;}
.phot{background:#ffedd5;color:#c2410c;}
.pfu{background:#fef9c3;color:#854d0e;}
.ppd{background:#dcfce7;color:#14532d;}
.pni{background:#fee2e2;color:#991b1b;}
.pdn{background:#ccfbf1;color:#134e4a;}
.pact{background:#dcfce7;color:#14532d;}
.pblue{background:#dbeafe;color:#1e40af;}
.pgold{background:#fef3c7;color:#92400e;}
.pgray{background:#f3f4f6;color:#374151;}
.pph{background:#fee2e2;color:#991b1b;}
.ppm{background:#fef9c3;color:#854d0e;}
.ppl{background:#dcfce7;color:#14532d;}

/* Forms */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.fg label{display:block;font-size:11px;font-weight:600;color:var(--mu);margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px;}
.fg input,.fg select,.fg textarea{
  width:100%;padding:9px 11px;border:1px solid var(--bd);border-radius:var(--rs);
  font-size:13px;background:#fff;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--n);}
.fg textarea{min-height:70px;resize:vertical;}

/* Alerts */
.al{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:var(--rs);font-size:12.5px;}
.ali{background:#eff6ff;color:#1e40af;border-left:3px solid var(--bl);}
.alw{background:#fffbeb;color:#92400e;border-left:3px solid var(--g);}
.als{background:#f0fdf4;color:#166534;border-left:3px solid var(--gr);}
.ale{background:#fef2f2;color:#991b1b;border-left:3px solid var(--rd);}

/* Modal */
.mov{position:fixed;inset:0;background:rgba(15,21,71,.5);display:none;align-items:center;justify-content:center;z-index:900;padding:16px;}
.mov.on{display:flex;}
.modal{background:#fff;border-radius:var(--r);max-width:560px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.mhd{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--bd);}
.mhd h3{font-family:var(--fh);font-size:16px;color:var(--n);display:flex;align-items:center;gap:8px;}
.mcls{background:none;border:none;font-size:16px;cursor:pointer;color:var(--mu);}
.mbody{padding:18px 20px;}
.mftr{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--bd);}

/* Avatar */
.mav{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;overflow:hidden;flex-shrink:0;}
.mav img{width:100%;height:100%;object-fit:cover;}
.tdn{display:flex;align-items:center;gap:8px;}

/* Toast */
.toast-wrap{position:fixed;top:64px;right:16px;z-index:1500;display:flex;flex-direction:column;gap:8px;}
.toast{background:#fff;border:1px solid var(--bd);border-radius:var(--rs);padding:10px 14px;display:flex;align-items:center;gap:9px;font-size:12px;box-shadow:0 4px 20px rgba(0,0,0,.12);min-width:260px;max-width:320px;animation:slideIn .25s ease;}
@keyframes slideIn{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}
.toast.success{border-left:3px solid var(--gr);}
.toast.warning{border-left:3px solid var(--g);}
.toast.error{border-left:3px solid var(--rd);}
.toast.info{border-left:3px solid var(--bl);}

/* Utility */
.flex{display:flex;align-items:center;}
.gap6{gap:6px;}.gap8{gap:8px;}
.mb8{margin-bottom:8px;}.mb12{margin-bottom:12px;}.mt8{margin-top:8px;}.mt4{margin-top:4px;}
.f10{font-size:10px;}.f11{font-size:11px;}.f12{font-size:12px;}.f13{font-size:13px;}
.bold{font-weight:700;}.cm{color:var(--mu);}.cn{color:var(--n);}.cr{color:var(--rd);}.cgr{color:var(--gr);}
.w100{width:100%;}
.center{text-align:center;}

/* Login page */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--n2),var(--n));padding:20px;}
.login-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:32px;max-width:380px;width:100%;backdrop-filter:blur(6px);}
.login-card .lc-logo{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:0 auto 14px;display:block;border:3px solid rgba(200,150,12,.4);}
.login-card h2{font-family:var(--fh);color:#fff;text-align:center;font-size:18px;margin-bottom:4px;}
.login-card .lc-sub{text-align:center;color:rgba(255,255,255,.5);font-size:11.5px;margin-bottom:20px;}
.lc-field{position:relative;margin-bottom:12px;}
.lc-field .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:rgba(200,150,12,.7);font-size:13px;}
.lc-field input{width:100%;padding:11px 11px 11px 34px;border-radius:9px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);color:#fff;font-size:13px;}
.lc-field input::placeholder{color:rgba(255,255,255,.4);}
.lc-field input:focus{outline:none;border-color:var(--g);}
.lc-btn{width:100%;padding:12px;border-radius:9px;background:linear-gradient(135deg,var(--g2),var(--g));border:none;color:#2a1d00;font-weight:700;font-size:13.5px;margin-top:6px;}
.lc-hint{text-align:center;color:rgba(255,255,255,.35);font-size:10.5px;margin-top:14px;}
.lc-error{background:rgba(220,38,38,.15);color:#fca5a5;border-radius:8px;padding:9px 12px;font-size:12px;margin-bottom:10px;display:none;align-items:center;gap:7px;}
.lc-error.on{display:flex;}

/* Responsive */
@media(max-width:768px){
  .sidebar{position:fixed;left:-230px;z-index:200;transition:left .2s;}
  .sidebar.mob-open{left:0;}
  .tb-name{display:none;}
}

/* Progress bar */
.pb{height:6px;background:#e5e7eb;border-radius:4px;overflow:hidden;}
.pf{height:100%;background:linear-gradient(90deg,var(--n),#3a44c9);border-radius:4px;transition:width .4s;}

/* Icon font fix - using Font Awesome from CDN */
.fa,.fas,.far,.fal,.fab{font-style:normal;display:inline-block;text-rendering:auto;-webkit-font-smoothing:antialiased;}