/* ============================================================
   Zephyr Rail Time Off Portal — styles.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&family=Barlow:wght@400;500;600&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── CSS VARIABLES ───────────────────────────────────────────── */
:root {
  --cr:#8B1A2E; --crh:#A82240;
  --go:#C9963A; --gol:#E0AD50; --god:#9A7228;
  --bg:#F4F1EC; --bgt:#FFFFFF; --bgs:#FAFAF7; --bgc:#FFFFFF;
  --bs2:#EEE9E2; --bs3:#E5DFD7;
  --t1:#1C1714; --t2:#5C5450; --t3:#8A8480; --t4:#B8B3AE;
  --bd:#DDD7D0; --bdg:rgba(201,150,58,0.3);
  --sh:0 1px 4px rgba(0,0,0,0.07);
  --apb:rgba(21,95,50,0.1);  --apc:#155F32; --apd:rgba(21,95,50,0.25);
  --dyb:rgba(139,26,46,0.1); --dyc:#8B1A2E; --dyd:rgba(139,26,46,0.25);
  --pdb:rgba(180,130,40,0.1); --pdc:#8A6010;
  --sob:#FFFFFF; --soc:#1C1714; --sos:0 1px 3px rgba(0,0,0,0.1); --sof:#8A8480;
  --acb:transparent; --acc:var(--go); --acd:rgba(201,150,58,0.3);
  --cab:rgba(139,26,46,0.08); --cac:#8B1A2E; --cad:rgba(139,26,46,0.25);
  --fd:'Barlow Condensed',sans-serif; --fb:'Barlow',sans-serif;
  --r:8px; --rl:12px;
}
[data-theme=dark] {
  --bg:#1C1C1F; --bgt:#25252A; --bgs:#222226; --bgc:#2C2C32;
  --bs2:#34343B; --bs3:#3E3E46;
  --t1:#F0EDE8; --t2:#A09890; --t3:#6E6860; --t4:#4A4440;
  --bd:rgba(255,255,255,0.1); --bdg:rgba(201,150,58,0.32);
  --sh:0 2px 8px rgba(0,0,0,0.4);
  --apb:rgba(30,110,65,0.2);  --apc:#52C77A; --apd:rgba(82,199,122,0.32);
  --dyb:rgba(180,50,70,0.2);  --dyc:#E87A8A; --dyd:rgba(232,122,138,0.32);
  --pdb:rgba(201,150,58,0.15); --pdc:#D4A848;
  --sob:#8B1A2E; --soc:#FFFFFF; --sos:0 1px 4px rgba(0,0,0,0.5); --sof:#6E6860;
  --acb:#8B1A2E; --acc:#FFFFFF; --acd:#8B1A2E;
  --cab:#8B1A2E; --cac:#FFFFFF; --cad:#8B1A2E;
}

body { background:var(--bg); color:var(--t1); font-family:var(--fb); transition:background .3s,color .3s; }

/* ── AUTH SCREEN ─────────────────────────────────────────────── */
.auth-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); }
.auth-card { background:var(--bgc); border:1px solid var(--bdg); border-radius:16px; padding:48px 40px; width:100%; max-width:400px; text-align:center; box-shadow:0 8px 40px rgba(0,0,0,0.1); }
.auth-logo { height:36px; object-fit:contain; margin-bottom:20px; }
.auth-divider { width:48px; height:2px; background:var(--go); margin:0 auto 24px; }
.auth-title { font-family:var(--fd); font-size:22px; font-weight:700; color:var(--t1); margin-bottom:8px; }
.auth-sub { font-size:13px; color:var(--t2); margin-bottom:28px; line-height:1.5; }
.btn-signin { display:inline-flex; align-items:center; gap:10px; background:var(--t1); color:var(--bgc); font-family:var(--fd); font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:13px 24px; border-radius:8px; border:none; cursor:pointer; width:100%; justify-content:center; transition:opacity .15s; }
.btn-signin:hover { opacity:.85; }
.btn-signin:disabled { opacity:.4; cursor:not-allowed; }
.auth-note { font-size:11px; color:var(--t4); margin-top:14px; }

/* ── LOADING ─────────────────────────────────────────────────── */
.loading-screen { display:none; align-items:center; justify-content:center; min-height:100vh; flex-direction:column; gap:16px; background:var(--bg); }
.spinner { width:36px; height:36px; border:3px solid var(--bd); border-top-color:var(--go); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-family:var(--fd); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); }

/* ── SHELL ───────────────────────────────────────────────────── */
.shell { display:none; flex-direction:column; min-height:100vh; }

/* ── TOPBAR ──────────────────────────────────────────────────── */
.topbar { background:var(--bgt); border-bottom:1px solid var(--bdg); height:54px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; box-shadow:var(--sh); transition:background .3s; }
.logo-wrap { display:flex; align-items:center; gap:10px; }
.logo-img { height:26px; object-fit:contain; }
.logo-div { width:1px; height:22px; background:var(--bdg); }
.app-name { font-family:var(--fd); font-size:14px; font-weight:600; color:var(--go); letter-spacing:.09em; text-transform:uppercase; }
.user-wrap { display:flex; align-items:center; gap:9px; }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--cr); display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:12px; font-weight:700; color:#fff; }
.uname { font-size:13px; color:var(--t2); }
.role-pill { font-size:10px; font-weight:600; padding:2px 6px; border-radius:3px; text-transform:uppercase; letter-spacing:.06em; display:inline-block; }
.role-pill.emp { background:rgba(201,150,58,0.12); color:var(--go); border:1px solid var(--bdg); }
.role-pill.mgr { background:rgba(139,26,46,0.12); color:#A82240; border:1px solid rgba(139,26,46,0.25); }
[data-theme=dark] .role-pill.mgr { color:#E87A8A; }
.btn-signout { font-family:var(--fd); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:5px; border:1px solid var(--bd); background:transparent; color:var(--t3); cursor:pointer; transition:all .15s; }
.btn-signout:hover { color:var(--t1); border-color:var(--t3); }

/* ── THEME TOGGLE ────────────────────────────────────────────── */
.theme-btn { width:32px; height:32px; border-radius:50%; border:1px solid var(--bd); background:var(--bs2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; position:relative; overflow:hidden; flex-shrink:0; }
.theme-btn:hover { border-color:var(--go); }
.th-ic { position:absolute; font-size:15px; transition:opacity .25s,transform .35s; }
.sun  { opacity:1; transform:rotate(0) scale(1); }
.moon { opacity:0; transform:rotate(80deg) scale(.5); }
[data-theme=dark] .sun  { opacity:0; transform:rotate(-80deg) scale(.5); }
[data-theme=dark] .moon { opacity:1; transform:rotate(0) scale(1); }

/* ── LAYOUT ──────────────────────────────────────────────────── */
.layout { display:flex; flex:1; min-height:0; }

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.sidebar { width:196px; background:var(--bgs); border-right:1px solid var(--bd); display:flex; flex-direction:column; transition:background .3s; flex-shrink:0; }
.nav-area { flex:1; padding:16px 0; }
.nav-label { font-family:var(--fd); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--t4); padding:0 14px 6px; }
.nav-it { display:flex; align-items:center; gap:9px; padding:8px 14px; font-size:13px; color:var(--t3); cursor:pointer; transition:all .15s; border-left:2px solid transparent; font-weight:500; user-select:none; }
.nav-it:hover { color:var(--t1); background:var(--bs2); }
.nav-it.on { color:var(--go); border-left-color:var(--go); background:rgba(201,150,58,0.07); }
[data-theme=dark] .nav-it:not(.on) { color:#2e2b28; }
[data-theme=dark] .nav-it:not(.on):hover { color:var(--t1); background:var(--bs2); }
.nav-ic { width:16px; text-align:center; font-size:13px; }
.nbadge { margin-left:auto; background:var(--cr); color:#fff; font-size:10px; font-weight:700; padding:1px 5px; border-radius:8px; min-width:17px; text-align:center; }

/* ── MANAGER SWITCHER ────────────────────────────────────────── */
.sidebar-bottom { padding:12px 14px 16px; border-top:1px solid var(--bd); }
.mgr-label { font-size:10px; font-weight:600; color:var(--t4); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; display:flex; align-items:center; gap:5px; }
.mgr-col { display:flex; flex-direction:column; gap:3px; }
.mgr-btn { width:100%; font-family:var(--fd); font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:7px 10px; border-radius:5px; border:1px solid var(--bd); cursor:pointer; color:var(--t3); background:transparent; transition:all .18s; text-align:left; }
.mgr-btn.on { background:var(--cr); color:#fff; border-color:var(--cr); }
.mgr-btn:not(.on):hover { color:var(--t1); background:var(--bs2); }

/* ── CONTENT ─────────────────────────────────────────────────── */
.content { flex:1; padding:22px; overflow:auto; }
.pg { display:none; } .pg.on { display:block; }
.ph { margin-bottom:22px; }
.ph h1 { font-family:var(--fd); font-size:25px; font-weight:700; color:var(--t1); letter-spacing:.04em; }
[data-theme=dark] .ph h1 { color:#1e1b18; }
.ph p { font-size:13px; color:var(--t2); margin-top:3px; }
.gline { width:36px; height:2px; background:var(--go); margin:7px 0 3px; }

/* ── CARDS ───────────────────────────────────────────────────── */
.card { background:var(--bgc); border:1px solid var(--bd); border-radius:var(--rl); padding:18px; margin-bottom:14px; box-shadow:var(--sh); transition:background .3s,border-color .3s; }
[data-theme=dark] .card { border-color:rgba(255,255,255,0.13); }
.card-t { font-family:var(--fd); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); margin-bottom:16px; display:flex; align-items:center; gap:7px; }
.card-t::before { content:''; display:inline-block; width:3px; height:13px; background:var(--go); border-radius:2px; }

/* ── STATS ───────────────────────────────────────────────────── */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:20px; }
.scard { background:var(--bgc); border:1px solid var(--bd); border-radius:var(--r); padding:12px 14px; box-shadow:var(--sh); }
[data-theme=dark] .scard { border-color:rgba(255,255,255,0.13); }
.scard.ga { border-color:var(--bdg); }
.slabel { font-size:10px; color:var(--t4); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; }
.sval { font-family:var(--fd); font-size:26px; font-weight:700; color:var(--t1); line-height:1; }
.sval.gold { color:var(--go); }
.sval.red { color:var(--cr); }
[data-theme=dark] .sval.red { color:#E87A8A; }
.ssub { font-size:11px; color:var(--t3); margin-top:3px; }

/* ── FORMS ───────────────────────────────────────────────────── */
.fg { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fi { display:flex; flex-direction:column; gap:5px; }
.fi.full { grid-column:1/-1; }
label { font-size:11px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.05em; }
.req-note { color:var(--cr); font-size:10px; font-style:italic; font-weight:400; text-transform:none; letter-spacing:0; }
input, select, textarea { background:var(--bs2); border:1px solid var(--bd); border-radius:6px; padding:9px 12px; font-size:13px; color:var(--t1); font-family:var(--fb); transition:border-color .15s,background .3s; width:100%; }
[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] textarea { border-color:rgba(255,255,255,0.12); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--go); background:var(--bs3); }
select option { background:var(--bgc); color:var(--t1); }
textarea { resize:vertical; min-height:80px; }

/* ── SEGMENTED CONTROLS ──────────────────────────────────────── */
.seg { display:flex; background:var(--bs2); border-radius:6px; padding:3px; gap:2px; border:1px solid var(--bd); }
[data-theme=dark] .seg { border-color:rgba(255,255,255,0.12); }
.seg-btn { flex:1; font-family:var(--fd); font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:7px 10px; border-radius:4px; border:none; cursor:pointer; color:var(--sof); background:transparent; transition:all .18s; text-align:center; }
.seg-btn.on { background:var(--sob) !important; color:var(--soc) !important; box-shadow:var(--sos); }
.seg-btn:not(.on):hover { color:var(--t1); }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn { font-family:var(--fd); font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:9px 18px; border-radius:6px; border:1px solid transparent; cursor:pointer; transition:all .15s; }
.btn-sm { font-size:11px; padding:6px 12px; }
.btn-submit { background:var(--cr); color:#fff; border-color:var(--cr); }
.btn-submit:hover { background:var(--crh); }
.btn-submit:disabled { opacity:.6; cursor:not-allowed; }
.btn-action { background:var(--acb); color:var(--acc); border-color:var(--acd); }
.btn-action:hover { opacity:.85; }
.btn-cancel { background:var(--cab); color:var(--cac); border-color:var(--cad); }
.btn-cancel:hover { opacity:.85; }
.btn-app { background:var(--apb); color:var(--apc); border-color:var(--apd); }
.btn-app:hover { opacity:.85; }
.btn-den { background:var(--dyb); color:var(--dyc); border-color:var(--dyd); }
.btn-den:hover { opacity:.85; }
.btn-modal-s { background:transparent; color:var(--go); border:1px solid var(--bdg); }
.btn-modal-s:hover { background:rgba(201,150,58,0.08); }
.btn-row { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }

/* ── FORM HINTS ──────────────────────────────────────────────── */
.hhint { font-size:12px; color:var(--god); margin-top:2px; font-style:italic; }
[data-theme=dark] .hhint { color:var(--gol); }

/* ── CALENDAR PREVIEW ────────────────────────────────────────── */
.cal-prev { background:var(--bs2); border:1px solid var(--bdg); border-left:3px solid var(--go); border-radius:6px; padding:10px 14px; font-size:13px; margin-top:14px; }
[data-theme=dark] .cal-prev { background:var(--bs3); }
.cal-prev-lbl { font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--t4); margin-bottom:3px; }
.cal-prev-name { font-weight:600; color:var(--god); margin-bottom:1px; }
[data-theme=dark] .cal-prev-name { color:var(--gol); }
.cal-prev-time { font-size:12px; color:var(--t3); }

/* ── TABLE ───────────────────────────────────────────────────── */
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--t4); padding:8px 11px; border-bottom:1px solid var(--bd); }
.tbl td { padding:11px; font-size:13px; border-bottom:1px solid var(--bd); vertical-align:middle; color:var(--t1); }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:var(--bs2); }

/* ── STATUS PILLS ────────────────────────────────────────────── */
.spill { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:3px; }
.spill::before { content:''; width:4px; height:4px; border-radius:50%; display:inline-block; }
.spill.pending   { background:var(--pdb); color:var(--pdc); } .spill.pending::before   { background:var(--pdc); }
.spill.approved  { background:var(--apb); color:var(--apc); } .spill.approved::before  { background:var(--apc); }
.spill.denied    { background:var(--dyb); color:var(--dyc); } .spill.denied::before    { background:var(--dyc); }
.spill.cancelled { background:var(--bs2); color:var(--t3);  } .spill.cancelled::before { background:var(--t3); }

/* ── LEAVE BADGES ────────────────────────────────────────────── */
.lbadge { font-size:11px; font-weight:700; padding:2px 7px; border-radius:3px; text-transform:uppercase; letter-spacing:.03em; }
.lt-pto  { background:rgba(24,95,165,0.1);  color:#185FA5; } [data-theme=dark] .lt-pto  { background:rgba(55,138,221,0.16);  color:#7BBFF4; }
.lt-sick { background:rgba(160,120,40,0.1); color:#9A7228; } [data-theme=dark] .lt-sick { background:rgba(201,150,58,0.16);  color:#E0AD50; }
.lt-vto  { background:rgba(21,95,50,0.1);   color:#155F32; } [data-theme=dark] .lt-vto  { background:rgba(30,120,80,0.16);   color:#52C77A; }
.lt-jury { background:rgba(88,28,135,0.1);  color:#6B21A8; } [data-theme=dark] .lt-jury { background:rgba(139,100,200,0.16); color:#C4A0F0; }
.lt-berv { background:rgba(80,80,80,0.1);   color:#504844; } [data-theme=dark] .lt-berv { background:rgba(160,160,160,0.14); color:#C0BCBA; }
.lt-uto  { background:rgba(139,26,46,0.1);  color:#8B1A2E; } [data-theme=dark] .lt-uto  { background:rgba(232,122,138,0.15); color:#E87A8A; }

/* ── PENDING CARDS ───────────────────────────────────────────── */
.pcard { background:var(--bs2); border:1px solid var(--bd); border-radius:var(--r); padding:14px; margin-bottom:10px; transition:border-color .15s; }
[data-theme=dark] .pcard { border-color:rgba(255,255,255,0.1); }
.pcard:hover { border-color:var(--bdg); }
.pcard-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
.pcard-name { font-weight:600; font-size:14px; color:var(--t1); }
.pcard-meta { font-size:12px; color:var(--t3); margin-top:2px; }
.pcard-acts { display:flex; gap:6px; flex-shrink:0; }
.pcard-reason { font-size:12px; color:var(--t2); background:var(--bgc); border-radius:5px; padding:7px 10px; margin-bottom:8px; font-style:italic; border-left:2px solid var(--bdg); }
[data-theme=dark] .pcard-reason { background:var(--bs3); }
.pcard-cal { font-size:11px; color:var(--t4); }
.pcard-cal strong { color:var(--god); }
[data-theme=dark] .pcard-cal strong { color:var(--gol); }

/* ── FILTER BUTTONS ──────────────────────────────────────────── */
.filters { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.fbtn { font-size:11px; font-weight:600; padding:4px 11px; border-radius:4px; border:1px solid var(--bd); background:transparent; color:var(--t3); cursor:pointer; text-transform:uppercase; letter-spacing:.05em; transition:all .15s; }
.fbtn.on { border-color:var(--go); color:var(--god); background:rgba(201,150,58,0.08); }
[data-theme=dark] .fbtn.on { color:var(--go); }

/* ── CALENDAR ────────────────────────────────────────────────── */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-dh { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--t4); text-align:center; padding:5px 2px; }
.cal-d { background:var(--bs2); border:1px solid var(--bd); border-radius:4px; min-height:58px; padding:4px; }
[data-theme=dark] .cal-d { border-color:rgba(255,255,255,0.08); }
.cal-d.today { border-color:var(--go); }
.cal-dn { font-weight:600; font-size:10px; color:var(--t3); margin-bottom:2px; }
.cal-d.today .cal-dn { color:var(--go); }
.cal-ev { font-size:9px; background:var(--cr); color:#fff; border-radius:2px; padding:1px 3px; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── MODALS ──────────────────────────────────────────────────── */
.moverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:200; align-items:center; justify-content:center; padding:16px; }
[data-theme=dark] .moverlay { background:rgba(0,0,0,0.65); }
.moverlay.show { display:flex; }
.modal { background:var(--bgc); border:1px solid var(--bdg); border-radius:var(--rl); padding:22px; width:100%; max-width:460px; max-height:85vh; overflow-y:auto; box-shadow:0 8px 30px rgba(0,0,0,0.15); transition:background .3s; }
[data-theme=dark] .modal { box-shadow:0 8px 30px rgba(0,0,0,0.55); }
.modal h2 { font-family:var(--fd); font-size:19px; font-weight:700; color:var(--t1); margin-bottom:3px; }
.modal-sub { font-size:12px; color:var(--t2); margin-bottom:16px; }
.ml { font-size:10px; font-weight:600; color:var(--t4); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.mv { font-size:14px; color:var(--t1); margin-bottom:12px; }
.mdiv { height:1px; background:var(--bd); margin:14px 0; }
.mreason { background:var(--bs2); border:1px solid var(--bd); border-left:3px solid var(--go); border-radius:6px; padding:9px 11px; font-size:13px; color:var(--t2); font-style:italic; }

/* ── TOAST ───────────────────────────────────────────────────── */
.toast { display:none; position:fixed; bottom:22px; right:22px; background:var(--bgc); border:1px solid var(--apd); border-left:3px solid var(--apc); border-radius:var(--r); padding:11px 16px; font-size:12px; color:var(--apc); font-weight:600; z-index:999; font-family:var(--fd); letter-spacing:.04em; text-transform:uppercase; box-shadow:var(--sh); }
.toast.show { display:block; animation:fiu .25s ease; }
@keyframes fiu { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.empty { text-align:center; padding:36px 16px; color:var(--t4); font-size:13px; }

/* ── MOBILE NAV ──────────────────────────────────────────────── */
.mob-nav { display:none; background:var(--bgt); border-top:1px solid var(--bdg); padding:5px 0; position:sticky; bottom:0; z-index:100; }
.mob-inner { display:flex; justify-content:space-around; }
.mob-btn { display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 10px; background:transparent; border:none; color:var(--t4); font-family:var(--fd); font-size:9px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.mob-btn.on { color:var(--go); }
.mob-ic { font-size:17px; line-height:1; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:620px) {
  .sidebar { display:none; }
  .mob-nav { display:block; }
  .fg { grid-template-columns:1fr; }
  .content { padding:14px; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .uname, .btn-signout { display:none; }
  .tbl th:nth-child(3), .tbl td:nth-child(3) { display:none; }
}