/* ══════════════════════════════════════════════════════════
   TOTAL FACILITY IMS — assets/css/style.css
   Shared stylesheet for all frontend pages
   ══════════════════════════════════════════════════════════ */

:root{
  --bg:#F2F0E6; --sf:#FFF; --s2:#EAE7D5; --bd:#C8C3A8;
  --tx:#191714; --t2:#63604A; --t3:#97937C;
  --ac:#1B4F8C; --a2:#E8F0FF; --a3:#0C3264; --a4:#C0D8FF;
  --gn:#165E26; --g2:#E0F4E6; --g3:#7ECE95;
  --wn:#C05000; --w2:#FEF0D9; --w3:#F3B558;
  --rd:#AC1919; --r2:#FCE8E8; --r3:#EDA4A4;
  --rad:10px; --rad2:7px;
  --sh:0 1px 4px rgba(0,0,0,.07),0 3px 12px rgba(0,0,0,.04);
  --sh2:0 4px 20px rgba(0,0,0,.13),0 12px 30px rgba(0,0,0,.07);
  --tr:all .13s ease;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;}
html{font-size:16px;}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--tx);line-height:1.6;min-height:100vh;}
button,input,select,textarea{font-family:inherit;font-size:14px;}
input,select{text-transform:uppercase;}
input[type=email],input[type=password],input[type=date],input[type=number],.lo{text-transform:none!important;}
input::placeholder{text-transform:none;color:var(--t3);font-size:13px;}
a{color:var(--ac);text-decoration:none;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:var(--s2);}
::-webkit-scrollbar-thumb{background:var(--bd);border-radius:99px;}

/* ── Layout shells ─────────────────────────────────────── */
#app{display:flex;height:100vh;overflow:hidden;}
#sb{width:248px;background:var(--sf);border-right:2px solid var(--bd);display:flex;flex-direction:column;flex-shrink:0;box-shadow:2px 0 10px rgba(0,0,0,.04);}
#mn{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
#hd{height:56px;background:var(--sf);border-bottom:2px solid var(--bd);display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0;box-shadow:0 1px 6px rgba(0,0,0,.05);}
#pg{flex:1;overflow-y:auto;padding:22px 26px;}

.lg{padding:14px 16px;background:linear-gradient(140deg,#1B4F8C,#0C3264);flex-shrink:0;}
.lg1{font-size:12px;font-weight:800;color:#fff;letter-spacing:.6px;line-height:1.4;}
.lg2{font-size:9px;color:#9DC6FF;margin-top:2px;font-weight:600;letter-spacing:.5px;}
.ub{padding:8px 14px;background:var(--a2);border-bottom:1px solid var(--bd);font-size:11px;font-weight:700;color:var(--ac);flex-shrink:0;display:flex;align-items:center;gap:6px;}
.ub .role-badge{background:var(--ac);color:#fff;padding:2px 7px;border-radius:99px;font-size:9px;letter-spacing:.4px;}
.ub .role-badge.op{background:var(--t3);}

#nv{flex:1;overflow-y:auto;padding:6px 0;}
.ni{display:flex;align-items:center;gap:10px;padding:11px 16px;font-size:13px;font-weight:600;color:var(--t2);border:none;background:none;width:100%;text-align:left;cursor:pointer;outline:none;border-left:3px solid transparent;transition:var(--tr);}
.ni em{font-size:15px;width:20px;text-align:center;flex-shrink:0;font-style:normal;}
.ni:hover{background:var(--a2);color:var(--ac);border-left-color:var(--a4);}
.ni.on{background:var(--a2);color:var(--ac);border-left-color:var(--ac);font-weight:700;}
.sb-ft{padding:8px 14px;border-top:1px solid var(--bd);font-size:10px;color:var(--t3);font-weight:600;flex-shrink:0;display:flex;align-items:center;gap:6px;}
.sd{width:7px;height:7px;border-radius:50%;background:var(--g3);flex-shrink:0;transition:background .3s;}

.htl{font-size:16px;font-weight:800;color:var(--ac);white-space:nowrap;flex:1;}
.clk{font-size:11px;font-weight:600;color:var(--t2);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ── Cards / panels ────────────────────────────────────── */
.card{background:#fff;border:1.5px solid var(--bd);border-radius:var(--rad);padding:20px 22px;margin-bottom:18px;box-shadow:var(--sh);}
.sh{font-size:11px;font-weight:800;color:var(--ac);letter-spacing:.8px;text-transform:uppercase;margin-bottom:14px;padding-bottom:9px;border-bottom:2px solid var(--a2);display:flex;align-items:center;justify-content:space-between;}
.ph{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.pht{font-size:19px;font-weight:800;color:var(--tx);}

/* ── Stat cards ─────────────────────────────────────────── */
.gst{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:20px;}
.sc{background:#fff;border:1.5px solid var(--bd);border-radius:var(--rad);padding:17px 19px;position:relative;overflow:hidden;transition:var(--tr);}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--ac);}
.sc.gn::before{background:var(--gn);}
.sc.wn::before{background:var(--wn);}
.sc.rd::before{background:var(--rd);}
.sc:hover{box-shadow:var(--sh2);transform:translateY(-2px);}
.sc-lb{font-size:10px;font-weight:800;color:var(--t3);letter-spacing:1px;text-transform:uppercase;margin-bottom:7px;}
.sc-vl{font-size:27px;font-weight:800;color:var(--tx);line-height:1;}
.sc-ic{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:28px;opacity:.08;}
.sc-sb{font-size:11px;color:var(--t2);margin-top:5px;font-weight:500;}

/* ── Forms ──────────────────────────────────────────────── */
.fg{margin-bottom:14px;}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.lb{font-size:11px;font-weight:700;color:var(--t2);display:block;margin-bottom:6px;letter-spacing:.3px;text-transform:uppercase;}
.fc{width:100%;padding:11px 13px;border:1.5px solid var(--bd);border-radius:var(--rad2);font-size:14px;outline:none;background:#fff;transition:var(--tr);}
.fc:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--a2);}
textarea.fc{resize:vertical;min-height:70px;text-transform:none;}
.fhint{font-size:11px;color:var(--t3);margin-top:5px;}

/* ── Buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:var(--rad2);border:1.5px solid var(--bd);background:#fff;color:var(--t2);font-size:13px;font-weight:700;cursor:pointer;transition:var(--tr);white-space:nowrap;}
.btn:hover{border-color:var(--ac);color:var(--ac);}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.bp{background:var(--ac);color:#fff;border-color:var(--ac);}
.bp:hover{background:var(--a3);color:#fff;}
.bg{background:var(--gn);color:#fff;border-color:var(--gn);}
.bg:hover{background:#0e4a1c;color:#fff;}
.br{background:var(--rd);color:#fff;border-color:var(--rd);}
.br:hover{background:#7d1212;color:#fff;}
.bw{background:var(--wn);color:#fff;border-color:var(--wn);}
.bw:hover{background:#9a3f00;color:#fff;}
.bsm{padding:6px 12px;font-size:12px;}
.bblock{width:100%;justify-content:center;}
.blink{background:none;border:none;color:var(--ac);cursor:pointer;font-size:13px;font-weight:700;padding:8px 0;}
.blink:hover{text-decoration:underline;}

/* ── Tables ─────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border:1.5px solid var(--bd);border-radius:var(--rad);}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{background:var(--s2);color:var(--t2);font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;text-align:left;padding:11px 14px;border-bottom:2px solid var(--bd);white-space:nowrap;}
tbody td{padding:11px 14px;border-bottom:1px solid var(--s2);color:var(--tx);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--a2);}
.tbl-empty{padding:40px 20px;text-align:center;color:var(--t3);font-size:13px;}

/* ── Badges ─────────────────────────────────────────────── */
.bdg{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;}
.bdg.gn{background:var(--g2);color:var(--gn);}
.bdg.rd{background:var(--r2);color:var(--rd);}
.bdg.wn{background:var(--w2);color:var(--wn);}
.bdg.gy{background:var(--s2);color:var(--t3);}
.bdg.bl{background:var(--a2);color:var(--ac);}

/* ── Modals ─────────────────────────────────────────────── */
.modal-ov{position:fixed;inset:0;background:rgba(20,18,14,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-box{background:#fff;border-radius:14px;padding:28px;width:100%;max-width:460px;box-shadow:0 16px 48px rgba(0,0,0,.3);max-height:90vh;overflow-y:auto;}
.modal-box.wide{max-width:620px;}
.modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.modal-title{font-size:16px;font-weight:800;color:var(--ac);}
.modal-close{background:none;border:none;font-size:20px;color:var(--t3);cursor:pointer;line-height:1;padding:4px;}
.modal-close:hover{color:var(--rd);}
.modal-ft{display:flex;gap:10px;margin-top:18px;}

/* ── Login / Auth screens ───────────────────────────────── */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ECEADE,#F2F0E6);padding:20px;}
.auth-box{background:#fff;border-radius:16px;padding:42px;width:100%;max-width:420px;border:1.5px solid var(--bd);box-shadow:var(--sh2);}
.auth-logo{width:58px;height:58px;background:linear-gradient(135deg,var(--ac),var(--a3));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;}
.auth-title{font-size:20px;font-weight:800;color:var(--ac);text-align:center;}
.auth-sub{font-size:12px;color:var(--t2);margin-top:5px;font-weight:600;text-align:center;margin-bottom:26px;}
.auth-err{display:none;margin-bottom:14px;text-align:center;font-size:13px;font-weight:700;color:var(--rd);padding:9px;background:var(--r2);border-radius:7px;border:1.5px solid var(--r3);}
.auth-ok{display:none;margin-bottom:14px;text-align:center;font-size:13px;font-weight:700;color:var(--gn);padding:9px;background:var(--g2);border-radius:7px;border:1.5px solid var(--g3);}
.auth-foot{text-align:center;margin-top:16px;font-size:12px;color:var(--t3);}

/* ── Notifications (toast) ─────────────────────────────── */
#ntf{position:fixed;top:18px;right:18px;z-index:99999;display:flex;flex-direction:column;gap:8px;}
.toast{background:#2A2823;color:#fff;padding:12px 18px;border-radius:9px;font-size:13px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.25);min-width:220px;max-width:360px;animation:toastIn .2s ease;}
.toast.ok{background:var(--gn);}
.toast.err{background:var(--rd);}
.toast.warn{background:var(--wn);}
@keyframes toastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}

/* ── License warning bar ───────────────────────────────── */
#licBar{display:none;width:100%;text-align:center;font-size:12px;font-weight:700;padding:7px 12px;flex-shrink:0;}

/* ── Misc utility ───────────────────────────────────────── */
.flex{display:flex;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.flex-gap{display:flex;align-items:center;gap:10px;}
.muted{color:var(--t3);}
.mt8{margin-top:8px;} .mt12{margin-top:12px;} .mt16{margin-top:16px;} .mt20{margin-top:20px;}
.mb8{margin-bottom:8px;} .mb12{margin-bottom:12px;} .mb16{margin-bottom:16px;}
.tac{text-align:center;}
.loading-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.empty-state{padding:50px 20px;text-align:center;color:var(--t3);}
.empty-state .ic{font-size:38px;margin-bottom:10px;opacity:.5;}
.skeleton{background:linear-gradient(90deg,var(--s2) 25%,#f5f4ed 50%,var(--s2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.stabs{display:flex;background:var(--s2);border-radius:var(--rad);overflow:hidden;margin-bottom:18px;border:1.5px solid var(--bd);flex-wrap:wrap;}
.stab{padding:9px 14px;font-size:11px;font-weight:700;border:1.5px solid var(--bd);background:#fff;color:var(--t2);cursor:pointer;transition:var(--tr);text-transform:uppercase;letter-spacing:.3px;border-radius:6px;margin:2px;white-space:nowrap;}
.stab.on{background:var(--ac);color:#fff;}
.stab:hover:not(.on){background:var(--a2);color:var(--ac);}

.kv-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--s2);font-size:13px;}
.kv-row:last-child{border-bottom:none;}
.kv-row .k{color:var(--t3);font-weight:600;}
.kv-row .v{color:var(--tx);font-weight:700;}

.checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:6px;}
.cb-item{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1.5px solid var(--bd);border-radius:7px;cursor:pointer;font-size:12px;font-weight:600;color:var(--t2);transition:var(--tr);}
.cb-item:hover{border-color:var(--ac);}
.cb-item.checked{background:var(--a2);border-color:var(--ac);color:var(--ac);}
.cb-item input{margin:0;width:auto;}

code.key{font-family:'Consolas',monospace;background:var(--s2);padding:4px 9px;border-radius:6px;font-size:12.5px;font-weight:700;letter-spacing:.5px;color:var(--ac);}

@media(max-width:860px){
  #sb{position:fixed;left:-260px;top:0;bottom:0;z-index:500;transition:left .2s;}
  #sb.open{left:0;}
  .fr{grid-template-columns:1fr;}
  .gst{grid-template-columns:repeat(2,1fr);}
}