*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#08090c;--surf:#0f1117;--card:#151820;
  --border:#1e2330;--border2:#262d3d;
  --accent:#e8a020;--accent-g:rgba(232,160,32,.12);
  --text:#dde1ec;--muted:#5a6278;--muted2:#8890a8;
  --green:#27c47a;--red:#e5534b;--blue:#4d9de0;--purple:#9b72e8;
  --r:12px;--rsm:8px;
}
html,body{height:100%;font-family:'Instrument Sans',sans-serif;font-size:14px;line-height:1.5;background:var(--bg);color:var(--text)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

/* ═══ LOGIN PAGE ══════════════════════════════════════════════════ */
#login-page{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(232,160,32,.08) 0%,transparent 70%),var(--bg);
}
.login-logo{text-align:center;margin-bottom:36px}
.login-logo-mark{font-family:'Barlow Condensed',sans-serif;font-size:42px;font-weight:800;letter-spacing:4px;color:var(--accent);text-transform:uppercase}
.login-logo-ar{font-size:18px;color:rgba(232,160,32,.6);letter-spacing:2px;margin-top:2px;font-style:italic}
.login-logo-sub{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-top:6px}
.login-box{
  background:var(--card);border:1px solid var(--border2);border-radius:16px;
  width:min(420px,100%);padding:36px 32px;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.login-title{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.login-sub{font-size:12px;color:var(--muted2);margin-bottom:28px}
.login-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}
.login-tab{
  padding:10px;text-align:center;border-radius:var(--rsm);cursor:pointer;
  border:1px solid var(--border2);color:var(--muted2);font-weight:600;font-size:13px;
  transition:all .15s;background:var(--surf);
}
.login-tab.active{background:var(--accent-g);color:var(--accent);border-color:rgba(232,160,32,.35)}
.field{margin-bottom:16px}
.field label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted2);margin-bottom:6px;font-weight:600}
.field input,.field select{width:100%;background:var(--bg);border:1px solid var(--border2);color:var(--text);border-radius:var(--rsm);padding:11px 14px;font-family:inherit;font-size:14px;outline:none;transition:border-color .2s}
.field input:focus,.field select:focus{border-color:var(--accent)}
.login-err{color:var(--red);font-size:12px;margin-top:-8px;margin-bottom:12px;display:none}
.login-err.show{display:block}
.login-hint{font-size:11px;color:var(--muted);margin-top:16px;padding:12px;background:var(--surf);border-radius:var(--rsm);line-height:1.8}
.login-hint strong{color:var(--muted2)}

/* ═══ APP SHELL ═══════════════════════════════════════════════════ */
#app{display:flex;height:100vh;overflow:hidden;position:relative}
#app.hidden,#login-page.hidden{display:none!important}

/* ─── Sidebar ──────────────────────────────────────────────────── */
#sidebar{
  width:240px;background:var(--surf);border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;padding:0 0 20px;
  transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:200;
}
.logo{padding:22px 20px 16px;border-bottom:1px solid var(--border);margin-bottom:10px}
.logo-en{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;letter-spacing:2px;color:var(--accent);text-transform:uppercase;line-height:1}
.logo-ar{font-size:13px;color:rgba(232,160,32,.65);letter-spacing:1px;font-style:italic;margin-top:1px}
.logo-sub{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:4px}
nav{padding:0 10px;flex:1;overflow-y:auto}
.nav-sec{font-size:9px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);padding:12px 12px 5px}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--rsm);
  cursor:pointer;font-weight:500;font-size:13px;color:var(--muted2);
  transition:all .15s;margin-bottom:2px;border:1px solid transparent;user-select:none;
}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-item.active{background:var(--accent-g);color:var(--accent);border-color:rgba(232,160,32,.2)}
.nav-icon{font-size:16px;width:20px;text-align:center}
.nav-badge{margin-left:auto;background:rgba(232,160,32,.2);color:var(--accent);font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px}
.sidebar-footer{padding:14px 20px 0;border-top:1px solid var(--border)}
.user-card{display:flex;align-items:center;gap:10px}
.u-av{width:34px;height:34px;background:var(--accent-g);border:1px solid rgba(232,160,32,.3);border-radius:50%;display:grid;place-items:center;font-size:14px;flex-shrink:0}
.u-name{font-weight:600;font-size:13px}
.u-role{font-size:10px;color:var(--muted)}
.logout-btn{margin-top:10px;width:100%;background:rgba(229,83,75,.1);color:var(--red);border:1px solid rgba(229,83,75,.2);border-radius:var(--rsm);padding:7px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;letter-spacing:.5px}
.logout-btn:hover{background:rgba(229,83,75,.2)}
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:150;backdrop-filter:blur(2px)}
#sidebar-overlay.open{display:block}

/* ─── Main ─────────────────────────────────────────────────────── */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#topbar{background:var(--surf);border-bottom:1px solid var(--border);padding:0 20px;height:60px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:10px}
#hamburger{display:none;background:transparent;border:none;color:var(--text);font-size:22px;cursor:pointer;padding:4px;line-height:1;flex-shrink:0}
.topbar-title{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:700;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.topbar-date{font-size:11px;color:var(--muted2);margin-top:1px}
.topbar-right{display:flex;gap:8px;align-items:center;flex-shrink:0}
#content{flex:1;overflow-y:auto;padding:20px 24px 80px}

/* ─── Views ────────────────────────────────────────────────────── */
.view{display:none;animation:fadeUp .22s ease}
.view.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ─── KPI ──────────────────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;display:flex;align-items:center;gap:12px;transition:border-color .2s}
.kpi:hover{border-color:var(--border2)}
.kpi-icon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:19px;flex-shrink:0}
.kpi-val{font-size:20px;font-weight:700;font-family:'Barlow Condensed',sans-serif;letter-spacing:.5px}
.kpi-lbl{font-size:10px;color:var(--muted2);text-transform:uppercase;letter-spacing:.8px;margin-top:1px}
.kpi-sub{font-size:11px;margin-top:3px}

/* ─── Cards ────────────────────────────────────────────────────── */
.sc{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.sc-head{padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.sc-title{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.sc-body{padding:18px}

/* ─── Table ────────────────────────────────────────────────────── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--border);font-weight:600;white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(255,255,255,.02)}

/* ─── Mobile cards ─────────────────────────────────────────────── */
.mc-list{display:none;flex-direction:column}
.mc{padding:14px 16px;border-bottom:1px solid var(--border);transition:background .12s}
.mc:last-child{border-bottom:none}
.mc:hover{background:rgba(255,255,255,.02)}
.mc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.mc-id{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--accent)}
.mc-main{font-weight:600;font-size:14px}
.mc-sub{font-size:12px;color:var(--muted2);margin-top:2px}
.mc-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.mc-amount{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700}
.mc-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* ─── Badges ───────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.badge::before{content:'';width:5px;height:5px;border-radius:50%}
.bg{background:rgba(39,196,122,.12);color:var(--green)}.bg::before{background:var(--green)}
.br{background:rgba(229,83,75,.12);color:var(--red)}.br::before{background:var(--red)}
.by{background:rgba(232,160,32,.12);color:var(--accent)}.by::before{background:var(--accent)}
.bb{background:rgba(77,157,224,.12);color:var(--blue)}.bb::before{background:var(--blue)}
.bgr{background:rgba(90,98,120,.12);color:var(--muted2)}.bgr::before{background:var(--muted2)}

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 15px;border:none;border-radius:var(--rsm);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s;-webkit-tap-highlight-color:transparent}
.btn:hover{opacity:.85;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:#0a0700}
.btn-ghost{background:var(--border);color:var(--text)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-danger{background:rgba(229,83,75,.15);color:var(--red)}
.btn-success{background:rgba(39,196,122,.15);color:var(--green)}
.btn-info{background:rgba(77,157,224,.15);color:var(--blue)}

/* ─── Pills ────────────────────────────────────────────────────── */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pill{padding:5px 14px;border-radius:999px;border:1px solid var(--border2);background:var(--card);color:var(--muted2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.pill:hover{border-color:var(--accent);color:var(--text)}
.pill.active{background:var(--accent-g);border-color:rgba(232,160,32,.35);color:var(--accent)}

/* ─── Search ───────────────────────────────────────────────────── */
.srch{position:relative}
.srch input{background:var(--surf);border:1px solid var(--border2);padding:8px 12px 8px 32px;border-radius:var(--rsm);color:var(--text);width:100%;font-family:inherit;outline:none;transition:border-color .2s;font-size:13px}
.srch input:focus{border-color:var(--accent)}
.srch-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none}

/* ─── Modal ────────────────────────────────────────────────────── */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(3px);z-index:500;align-items:center;justify-content:center;padding:12px}
.overlay.open{display:flex}
.modal{background:var(--card);border:1px solid var(--border2);border-radius:14px;width:min(540px,100%);max-height:92vh;overflow-y:auto;animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
.modal-head{padding:18px 22px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--card);z-index:1}
.modal-title{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.modal-close{width:30px;height:30px;background:var(--border);border:none;border-radius:7px;color:var(--text);cursor:pointer;font-size:15px;display:grid;place-items:center}
.modal-close:hover{background:var(--border2)}
.modal-body{padding:22px}
.mf{display:flex;gap:10px;justify-content:flex-end;padding-top:14px;border-top:1px solid var(--border);margin-top:18px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* ─── Toast ────────────────────────────────────────────────────── */
#tc{position:fixed;bottom:76px;right:16px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--card);border:1px solid var(--border2);border-left:3px solid var(--green);border-radius:10px;padding:10px 16px;font-size:13px;font-weight:500;animation:toastIn .25s ease;max-width:280px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.toast.err{border-left-color:var(--red)}
.toast.warn{border-left-color:var(--accent)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* ─── Activity feed ────────────────────────────────────────────── */
.feed-item{display:flex;gap:14px;align-items:flex-start;padding:12px 18px;border-bottom:1px solid var(--border)}
.feed-item:last-child{border-bottom:none}
.feed-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px}
.feed-text{font-size:13px;line-height:1.5}
.feed-who{font-weight:600;color:var(--text)}
.feed-meta{font-size:11px;color:var(--muted2);margin-top:2px}

/* ─── Date filter row ──────────────────────────────────────────── */
.date-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.date-row input[type="date"]{background:var(--surf);border:1px solid var(--border2);color:var(--text);border-radius:var(--rsm);padding:7px 10px;font-family:inherit;font-size:13px;outline:none;transition:border-color .2s}
.date-row input[type="date"]:focus{border-color:var(--accent)}

/* ─── Leave info ───────────────────────────────────────────────── */
.leave-info{font-size:11px;color:var(--muted2);margin-top:3px}

/* ─── Admin-only badge ─────────────────────────────────────────── */
.admin-only-note{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;padding:8px 12px;background:var(--surf);border-radius:var(--rsm);border:1px solid var(--border)}

/* ─── Bottom nav ───────────────────────────────────────────────── */
#bnav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--surf);border-top:1px solid var(--border);height:62px;z-index:199;justify-content:space-around;align-items:center;padding:0 4px}
.bn-item{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;padding:6px 4px;cursor:pointer;color:var(--muted2);transition:color .15s;border:none;background:none;font-family:inherit;-webkit-tap-highlight-color:transparent}
.bn-item.active{color:var(--accent)}
.bn-icon{font-size:19px;line-height:1}
.bn-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}

/* ─── FAB ──────────────────────────────────────────────────────── */
#fab{position:fixed;bottom:74px;right:16px;z-index:250;width:50px;height:50px;border-radius:50%;border:none;background:var(--accent);color:#0a0700;font-size:26px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(232,160,32,.4);display:none;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}

/* ─── Responsive ───────────────────────────────────────────────── */
@media(max-width:900px){
  #sidebar{position:fixed;top:0;left:0;bottom:0;transform:translateX(-100%);box-shadow:4px 0 24px rgba(0,0,0,.5)}
  #sidebar.open{transform:translateX(0)}
  #hamburger{display:flex;align-items:center}
  #topbar{padding:0 14px}
  #content{padding:16px 14px 80px}
}
@media(max-width:640px){
  #bnav{display:flex}
  .tw table{display:none}
  .mc-list{display:flex}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:12px 14px}
  .kpi-icon{width:36px;height:36px;font-size:16px}
  .kpi-val{font-size:18px}
  .pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .pills::-webkit-scrollbar{height:0}
  .g2,.g3{grid-template-columns:1fr}
  .modal{border-radius:14px 14px 0 0;position:fixed;bottom:0;left:0;right:0;max-height:90vh;width:100%}
  .overlay{align-items:flex-end;padding:0}
  #tc{bottom:70px;left:10px;right:10px}
  .toast{max-width:none}
}
@media(max-width:380px){
  .kpi-grid{grid-template-columns:1fr}
}