/* ================================================================
   DTTASA LEAVE CENTRE — Enterprise Design v2
   Mobile-first · glassmorphic · touch-optimised · accessible
   ================================================================ */

:root{
  --void:#0c1109; --deep:#111a0e; --base:#172213; --lift:#1e2e1b;
  --panel:rgba(255,255,255,.10); --panel2:rgba(255,255,255,.18);
  --panel3:rgba(255,255,255,.04); --border:rgba(255,255,255,.16);
  --bord2:rgba(255,255,255,.28);
  --gold:#f0c832; --gold2:#f7d94e; --gdim:rgba(212,175,55,.12);
  --gglow:rgba(212,175,55,.32); --gsoft:rgba(212,175,55,.05);
  --green:#4cd657; --gndim:rgba(67,177,75,.12); --gnsoft:rgba(67,177,75,.05);
  --red:#ff4848; --rdim:rgba(232,64,64,.12);
  --orange:#FF8C00; --teal:#20B2AA; --blue:#6080E8;
  --text:#f2f7ee; --t2:rgba(242,247,238,.88); --t3:rgba(242,247,238,.60); --t4:rgba(242,247,238,.38);
  --mono:'IBM Plex Mono',monospace; --disp:'Cinzel',serif; --body:'DM Sans',sans-serif;
  --hdh:66px;
  --ease:cubic-bezier(.16,1,.3,1);
  --sh-sm:0 4px 12px rgba(0,0,0,.18);
  --sh-md:0 8px 24px rgba(0,0,0,.32);
  --sh-lg:0 18px 52px rgba(0,0,0,.55);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;min-height:100%;background:var(--void);color:var(--text);font-family:var(--body);font-size:15px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse at 12% 0%,rgba(67,177,75,.045) 0%,transparent 52%),
    radial-gradient(ellipse at 88% 100%,rgba(212,175,55,.045) 0%,transparent 52%),
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.02) 2px,rgba(0,0,0,.02) 4px);}

/* ── LOGIN ── */
#login-overlay{position:fixed;inset:0;background:#050905;z-index:9999999;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{width:100%;max-width:420px;background:rgba(6,10,6,.78);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:44px 36px;text-align:center;position:relative;overflow:hidden;animation:lcIn .9s var(--ease) both;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 32px 80px rgba(0,0,0,.65);backdrop-filter:blur(32px) saturate(160%);-webkit-backdrop-filter:blur(32px) saturate(160%);}
@keyframes lcIn{from{opacity:0;transform:translateY(26px) scale(.96);}to{opacity:1;transform:none;}}
.login-card::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:180px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.login-brand{font-family:var(--disp);font-size:34px;font-weight:900;letter-spacing:10px;background:linear-gradient(135deg,var(--green),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:5px;}
.login-sub{font-size:9px;letter-spacing:4px;color:var(--gold);opacity:.6;text-transform:uppercase;margin-bottom:32px;}
#login-err{color:var(--red);font-size:11px;margin-bottom:13px;display:none;background:rgba(232,64,64,.08);border:1px solid rgba(232,64,64,.22);border-radius:8px;padding:8px 11px;}

/* ── BUTTONS ── */
.btn{border:none;padding:12px 22px;border-radius:50px;font-weight:800;font-size:11px;letter-spacing:1.6px;cursor:pointer;text-transform:uppercase;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s,color .25s;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;line-height:1;min-height:42px;justify-content:center;font-family:inherit;}
.btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.14);transform:translate(-50%,-50%);transition:width .35s,height .35s;}
.btn:active::after{width:240px;height:240px;}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.btn-green{background:var(--green);color:#0a160a;box-shadow:0 6px 18px rgba(67,177,75,.28);}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(67,177,75,.42);}
.btn-gold{background:var(--gold);color:#0c1109;box-shadow:0 6px 18px rgba(212,175,55,.24);}
.btn-gold:hover{background:var(--gold2);transform:translateY(-2px);box-shadow:0 12px 28px rgba(212,175,55,.4);}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(232,64,64,.26);}
.btn-red:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(232,64,64,.4);}
.btn-outline{background:transparent;border:1px solid var(--bord2);color:var(--t2);padding:10px 16px;font-size:11px;border-radius:9px;}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);background:var(--gdim);}
.btn-full{width:100%;border-radius:12px;padding:14px;font-size:13px;}
.btn-sm{padding:9px 14px;font-size:11px;border-radius:8px;min-height:36px;}
.btn-proc{opacity:.7;cursor:not-allowed!important;pointer-events:none;}
.spin-ico{display:inline-block;width:11px;height:11px;border:2px solid rgba(255,255,255,.2);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── FORMS ── */
.gi{width:100%;background:rgba(0,0,0,.32);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:11px 13px;font-size:14px;outline:none;font-family:var(--body);transition:border-color .25s,box-shadow .25s,background .25s;}
.gi:hover:not(:focus){border-color:var(--bord2);}
.gi:focus{border-color:rgba(212,175,55,.5);box-shadow:0 0 0 3px rgba(212,175,55,.1);background:rgba(0,0,0,.4);}
.gi-ta{min-height:96px;resize:vertical;line-height:1.55;}
select.gi{cursor:pointer;}
select.gi option{background:#0b130a;color:var(--text);}
input[type="date"].gi{color-scheme:dark;}
.ig{display:block;}
.ig label{display:block;font-size:10px;font-weight:800;letter-spacing:1.6px;color:var(--gold);text-transform:uppercase;margin-bottom:6px;}

/* ── TOAST ── */
#toast{position:fixed;bottom:calc(24px + var(--safe-b));left:50%;transform:translateX(-50%) translateY(80px);background:rgba(5,9,5,.98);border:1px solid var(--gold);border-left:4px solid var(--gold);padding:13px 20px;border-radius:10px;display:flex;align-items:center;gap:11px;font-size:12px;font-weight:600;z-index:600000;min-width:280px;max-width:460px;box-shadow:var(--sh-lg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:transform .45s var(--ease),opacity .45s;opacity:0;}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
#toast.error{border-color:var(--red);border-left-color:var(--red);}
#toast i{flex-shrink:0;}
#toast:not(.error) i{color:var(--gold);}
#toast.error i{color:var(--red);}

/* ── HEADER ── */
#lv-hdr{height:var(--hdh);display:flex;align-items:center;justify-content:space-between;padding:0 24px;padding-left:max(24px,var(--safe-l));padding-right:max(24px,var(--safe-r));background:rgba(4,8,4,.78);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(32px) saturate(160%);-webkit-backdrop-filter:blur(32px) saturate(160%);position:sticky;top:0;z-index:500;animation:hdrDrop .7s var(--ease) both;box-shadow:inset 0 -1px 0 rgba(255,255,255,.05),0 4px 24px rgba(0,0,0,.3);gap:12px;}
@keyframes hdrDrop{from{transform:translateY(-100%);opacity:0;}to{transform:none;opacity:1;}}
.hdr-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 auto;}
.back-btn{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;background:var(--panel2);border:1px solid var(--border);color:var(--t2);font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;cursor:pointer;transition:all .22s var(--ease);min-height:38px;white-space:nowrap;flex-shrink:0;}
.back-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--gdim);transform:translateX(-2px);}
.back-btn:active{transform:translateX(0);}
.brand{display:flex;align-items:center;gap:10px;min-width:0;}
.brand-logo-img{height:36px;width:auto;cursor:pointer;object-fit:contain;flex-shrink:0;}
.brand-text{display:flex;flex-direction:column;gap:1px;}
.brand-logo{font-family:var(--disp);font-size:22px;font-weight:900;letter-spacing:6px;line-height:1;background:linear-gradient(135deg,var(--green),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.brand-sub{font-size:9px;letter-spacing:3px;color:var(--gold);opacity:.55;text-transform:uppercase;}
.page-title-pill{display:inline-flex;align-items:center;gap:7px;background:var(--gdim);border:1px solid rgba(212,175,55,.22);padding:6px 14px;border-radius:20px;font-size:11px;font-weight:800;color:var(--gold);letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap;flex-shrink:0;}
.hdr-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.hdr-clock{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--gold);border:1px solid rgba(212,175,55,.28);padding:7px 12px;border-radius:8px;background:var(--gdim);letter-spacing:1.4px;white-space:nowrap;}
.hdr-user-chip{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:22px;background:var(--panel2);border:1px solid var(--border);font-size:12px;font-weight:600;color:var(--t2);white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;min-height:36px;}
.hdr-user-chip i{color:var(--gold);font-size:13px;}
.hdr-user-chip span{overflow:hidden;text-overflow:ellipsis;}
.hdr-icon-btn{position:relative;width:38px;height:38px;border-radius:50%;background:var(--panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:14px;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s,transform .2s;flex-shrink:0;}
.hdr-icon-btn:hover{background:var(--gdim);color:var(--gold);box-shadow:0 0 16px var(--gglow);transform:scale(1.06);}
.hdr-icon-badge{position:absolute;top:-3px;right:-3px;background:var(--red);color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #050905;}
.hdr-notif-wrap{position:relative;}
.hdr-notif-dd{position:fixed;top:calc(var(--hdh) + 8px);right:12px;width:320px;max-width:calc(100vw - 24px);background:#0d150c;border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-lg);display:none;z-index:99999;overflow:hidden;}
.hdr-notif-dd.open{display:block;animation:ddIn .22s var(--ease) both;}
@keyframes ddIn{from{opacity:0;transform:translateY(-7px);}to{opacity:1;transform:none;}}
.hdr-notif-hdr{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.hdr-notif-clear{font-size:11px;color:var(--t3);cursor:pointer;background:none;border:none;transition:color .2s;}
.hdr-notif-clear:hover{color:var(--gold);}
.hdr-notif-list{max-height:300px;overflow-y:auto;}
.hdr-notif-item{padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;display:flex;gap:10px;align-items:flex-start;}
.hdr-notif-item:hover{background:var(--panel);}
.hdr-notif-item.unread{background:rgba(212,175,55,.045);}
.hdr-ni-icon{width:30px;height:30px;border-radius:50%;background:var(--gdim);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:11px;flex-shrink:0;}
.hdr-ni-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;}
.hdr-ni-msg{font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:218px;}
.hdr-ni-time{font-size:10px;color:var(--t4);margin-top:3px;letter-spacing:.3px;}
.hdr-notif-empty{padding:24px;text-align:center;color:var(--t3);font-size:12px;}

/* ── NAV TAB BAR ── */
#lv-nav{position:sticky;top:var(--hdh);z-index:490;background:rgba(4,7,4,.92);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;padding:0 max(8px,var(--safe-l)) 0 max(8px,var(--safe-l));}
#lv-nav::-webkit-scrollbar{display:none;}
.lv-nav-item{display:flex;align-items:center;gap:8px;padding:14px 18px;font-size:11px;font-weight:800;letter-spacing:1.4px;color:var(--t3);text-transform:uppercase;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:color .22s,border-color .22s,background .2s;flex-shrink:0;scroll-snap-align:start;min-height:46px;position:relative;}
.lv-nav-item:hover{color:var(--t2);background:rgba(255,255,255,.025);}
.lv-nav-item.active{color:var(--gold);border-bottom-color:var(--gold);}
.lv-nav-item.active::after{content:'';position:absolute;bottom:-2px;left:18px;right:18px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);filter:blur(4px);}
.lv-nav-item i{font-size:13px;}
.lv-nav-badge{background:var(--red);color:#fff;font-size:9px;font-weight:900;min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;margin-left:2px;letter-spacing:0;}

/* ── VIEW PANELS ── */
.lv-view{display:none;}
.lv-view.active{display:block;animation:cvIn .4s var(--ease) both;}
@keyframes cvIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ── MAIN ── */
#lv-main{padding:28px max(32px,var(--safe-l)) calc(80px + var(--safe-b)) max(32px,var(--safe-r));position:relative;z-index:1;width:100%;margin:0;}
@media(min-width:1100px){.stat-cards{grid-template-columns:repeat(4,1fr)!important;}}

/* ── SECTION LABEL ── */
.mlbl{font-size:11px;font-weight:800;letter-spacing:2.4px;color:var(--gold);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:9px;}
.mlbl::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent);}

/* ── GLASS ── */
.glass{background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.025) 100%);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:22px;position:relative;overflow:hidden;transition:border-color .3s,box-shadow .3s;backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--sh-md);animation:glassIn .55s var(--ease) both;}
@keyframes glassIn{from{opacity:0;transform:translateY(14px) scale(.99);}to{opacity:1;transform:none;}}
.glass::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);}
.glass:hover{border-color:var(--bord2);}
.glass-gold{border-color:rgba(212,175,55,.18);background:linear-gradient(135deg,var(--gsoft),var(--panel) 65%);}

/* ── OVERVIEW SECTION ── */
.lv-section{margin-bottom:32px;animation:cvIn .5s var(--ease) both;}
.overview-grid{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;margin-bottom:24px;}
.ring-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0;}
.ring-container{position:relative;width:188px;height:188px;}
.ring-container svg{transform:rotate(-90deg);width:100%;height:100%;display:block;}
.ring-container::before{content:'';position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.06),transparent 70%);pointer-events:none;}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring-pct{font-family:var(--mono);font-size:32px;font-weight:700;color:var(--gold);line-height:1;letter-spacing:-1px;}
.ring-lbl{font-size:10px;color:var(--t3);letter-spacing:1.6px;text-transform:uppercase;margin-top:5px;font-weight:700;}
.ring-sub{font-size:11px;color:var(--t3);text-align:center;letter-spacing:.4px;}
.ring-sub span{color:var(--gold);font-family:var(--mono);font-weight:700;}

.stat-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.stat-card{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);padding:16px 18px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--sh-sm);animation:scIn .55s var(--ease) both;position:relative;overflow:hidden;}
.stat-card::after{content:'';position:absolute;top:0;right:0;width:50%;height:50%;background:radial-gradient(circle at top right,rgba(212,175,55,.05),transparent 70%);pointer-events:none;}
.stat-card:hover{transform:translateY(-3px);border-color:rgba(212,175,55,.22);box-shadow:0 12px 28px rgba(0,0,0,.32);}
@keyframes scIn{from{opacity:0;transform:translateY(18px) scale(.97);}to{opacity:1;transform:none;}}
.stat-card:nth-child(1){animation-delay:.08s;}.stat-card:nth-child(2){animation-delay:.14s;}.stat-card:nth-child(3){animation-delay:.2s;}.stat-card:nth-child(4){animation-delay:.26s;}
.sc-icon{font-size:16px;margin-bottom:10px;line-height:1;}
.sc-label{font-size:10px;font-weight:800;letter-spacing:1.4px;color:var(--t3);text-transform:uppercase;margin-bottom:6px;}
.sc-val{font-family:var(--mono);font-size:26px;font-weight:700;line-height:1;letter-spacing:-.5px;}
.sc-sub{font-size:11px;color:var(--t3);margin-top:5px;font-weight:500;}

.owed-strip{border-radius:var(--r-md);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap;transition:border-color .3s,background .3s;}
.owed-strip.net-debt{background:linear-gradient(135deg,rgba(232,64,64,.07),rgba(232,64,64,.02));border:1px solid rgba(232,64,64,.2);}
.owed-strip.net-credit{background:linear-gradient(135deg,rgba(67,177,75,.07),rgba(67,177,75,.02));border:1px solid rgba(67,177,75,.2);}
.owed-strip.net-clear,.owed-strip.clear{background:var(--panel);border:1px solid var(--border);}
.owed-strip-left{display:flex;align-items:center;gap:14px;min-width:0;flex:1;}
.owed-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.owed-text{min-width:0;}
.owed-text .ot{font-size:13px;font-weight:800;letter-spacing:.4px;}
.owed-text .os{font-size:11px;color:var(--t3);margin-top:3px;line-height:1.45;}
.owed-components{margin-top:5px;display:flex;align-items:center;}
.owed-val{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.5px;flex-shrink:0;}

.hours-acc-panel{margin-bottom:24px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--panel);overflow:hidden;transition:border-color .25s;}
.hours-acc-panel:hover{border-color:var(--bord2);}
.hours-acc-summary{display:flex;align-items:center;gap:8px;padding:14px 18px;font-size:12px;font-weight:700;letter-spacing:1px;cursor:pointer;list-style:none;color:var(--t2);transition:background .2s;}
.hours-acc-summary:hover{background:rgba(255,255,255,.02);}
.hours-acc-summary::-webkit-details-marker{display:none;}
.hours-acc-arrow{margin-left:auto;font-size:11px;color:var(--t3);transition:transform .28s var(--ease);}
details[open] .hours-acc-arrow{transform:rotate(180deg);}
.hours-acc-body{padding:0 18px 18px;}
.has-title{font-size:11px;font-weight:800;color:var(--t3);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.has-subtitle{font-size:11px;font-weight:400;letter-spacing:0;color:var(--t3);text-transform:none;margin-left:auto;}

/* ── SCROLLABLE TABLE WRAPPER (HR-monitor style) ── */
.rota-scroll,.dtbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.16);position:relative;margin-bottom:8px;}
.rota-scroll::-webkit-scrollbar,.dtbl-wrap::-webkit-scrollbar{height:8px;}
.rota-scroll::-webkit-scrollbar-track,.dtbl-wrap::-webkit-scrollbar-track{background:rgba(0,0,0,.22);}
.rota-scroll::-webkit-scrollbar-thumb,.dtbl-wrap::-webkit-scrollbar-thumb{background:rgba(212,175,55,.34);border-radius:4px;}
.rota-scroll::-webkit-scrollbar-thumb:hover,.dtbl-wrap::-webkit-scrollbar-thumb:hover{background:rgba(212,175,55,.6);}
.rota-scroll .dtbl,.dtbl-wrap .dtbl{min-width:640px;width:100%;}
.rota-scroll .dtbl th,.dtbl-wrap .dtbl th{white-space:nowrap;background:rgba(0,0,0,.32);}
.rota-scroll .dtbl tbody td,.dtbl-wrap .dtbl tbody td{white-space:nowrap;}
/* Allow cells with inline word-break or max-width to wrap their text */
.rota-scroll .dtbl tbody td[style*="break-word"],
.rota-scroll .dtbl tbody td[style*="max-width"],
.dtbl-wrap .dtbl tbody td[style*="break-word"],
.dtbl-wrap .dtbl tbody td[style*="max-width"]{white-space:normal;}
/* Hours-account admin tables can stretch wider */
.admin-sub .dtbl-wrap .dtbl{min-width:820px;}

.req-leave-btn{display:flex;align-items:center;gap:10px;margin-bottom:28px;flex-wrap:wrap;}
.req-leave-btn .btn{flex-shrink:0;}

/* ── CALENDAR ── */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:14px;}
.cal-month{font-family:var(--disp);font-size:19px;font-weight:700;letter-spacing:2.4px;color:var(--gold);flex:1;text-align:center;text-shadow:0 0 18px rgba(212,175,55,.18);transition:color .22s var(--ease);}
.cal-arrow{width:40px;height:40px;border-radius:11px;background:var(--panel2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);transition:all .25s cubic-bezier(.16,1,.3,1);flex-shrink:0;}
.cal-arrow:hover{border-color:var(--gold);color:var(--gold);background:var(--gdim);transform:translateY(-1px);box-shadow:0 4px 12px rgba(212,175,55,.18);}
.cal-arrow:active{transform:translateY(0) scale(.95);}

/* Calendar grid — enterprise polish.
   Stagger entrance via animation-delay set inline by renderCalendar(),
   cubic-bezier ease curve matches the rest of the portal. */
.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  animation:fadeIn .35s cubic-bezier(.16,1,.3,1) both;
}
.cal-dow{
  text-align:center;font-size:10px;font-weight:800;letter-spacing:1.4px;
  color:var(--t3);text-transform:uppercase;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cal-dow.weekend{color:rgba(212,175,55,.55);}

@keyframes calCellIn{
  from{opacity:0;transform:translateY(8px) scale(.96);}
  to{opacity:1;transform:none;}
}
.cal-day{
  min-height:74px;
  border-radius:10px;
  background:rgba(0,0,0,.20);
  border:1px solid var(--border);
  padding:7px;
  transition:border-color .22s cubic-bezier(.16,1,.3,1),
             background .22s cubic-bezier(.16,1,.3,1),
             transform .22s cubic-bezier(.16,1,.3,1),
             box-shadow .22s cubic-bezier(.16,1,.3,1);
  cursor:default;position:relative;
  display:flex;flex-direction:column;gap:3px;overflow:hidden;
  animation:calCellIn .42s cubic-bezier(.16,1,.3,1) both;
}
.cal-day::before{
  content:'';position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.04) 0%,transparent 60%);
  opacity:0;transition:opacity .22s cubic-bezier(.16,1,.3,1);
}
.cal-day:hover{
  border-color:rgba(212,175,55,.32);
  background:rgba(212,175,55,.04);
  transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(0,0,0,.22);
}
.cal-day:hover::before{opacity:1;}
.cal-day.weekend{background:rgba(255,255,255,.025);}
.cal-day.past{opacity:.82;}
.cal-day.past:hover{opacity:1;}
.cal-day.today{
  border-color:rgba(212,175,55,.6);
  background:linear-gradient(150deg,rgba(212,175,55,.10) 0%,rgba(212,175,55,.04) 80%);
  box-shadow:0 0 0 1px rgba(212,175,55,.30) inset, 0 8px 26px rgba(212,175,55,.18);
}
.cal-day.today::after{
  content:'TODAY';
  position:absolute;top:5px;right:6px;
  font-family:var(--mono);font-size:7px;font-weight:900;letter-spacing:1.4px;
  color:var(--gold);opacity:.78;
}
.cal-day.has-leave{border-left:3px solid rgba(212,175,55,.4);}
.cal-day.has-ph{border-top:2px solid rgba(212,175,55,.4);}
.cal-day.empty{background:transparent;border-color:transparent;pointer-events:none;animation:none;}
.cal-day-num{
  font-size:11px;font-weight:700;color:var(--t2);
  margin-bottom:3px;font-family:var(--mono);
  letter-spacing:.5px;
}
.cal-day.today .cal-day-num{color:var(--gold);font-weight:900;}
.cal-day.weekend .cal-day-num{color:var(--t3);}
.cal-pip{
  width:100%;font-size:9.5px;font-weight:700;
  border-radius:5px;padding:2px 6px;
  text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
  letter-spacing:.3px;line-height:1.35;
  transition:transform .18s cubic-bezier(.16,1,.3,1),filter .18s;
}
.cal-pip[data-status="pending"]::before{
  content:'⏳ ';font-size:8px;opacity:.85;
}
.cal-day:hover .cal-pip{transform:translateX(1px);}
.cal-pip-more{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:var(--t3)!important;
}
.cal-ph{
  display:flex;align-items:center;gap:4px;
  font-size:9.5px;color:var(--gold);font-weight:800;
  background:linear-gradient(135deg,rgba(212,175,55,.20),rgba(212,175,55,.08));
  border:1px solid rgba(212,175,55,.35);
  border-radius:5px;padding:2px 6px;line-height:1.35;
  text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
}
.cal-ph i{font-size:8px;flex-shrink:0;}
.cal-legend{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:18px;padding-top:15px;
  border-top:1px solid var(--border);
  animation:fadeIn .5s cubic-bezier(.16,1,.3,1) .15s both;
}
.cal-leg-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t2);}
.cal-leg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}

/* ── MY REQUESTS TABLE ── */
.req-filter-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.rtab{padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--t3);font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;cursor:pointer;transition:all .22s;min-height:36px;font-family:inherit;}
.rtab.active{background:var(--gdim);border-color:rgba(212,175,55,.3);color:var(--gold);}
.rtab:hover:not(.active){border-color:rgba(212,175,55,.2);color:var(--t2);background:rgba(255,255,255,.025);}

.dtbl{width:100%;border-collapse:collapse;font-size:12px;}
.dtbl thead tr{background:rgba(0,0,0,.32);border-bottom:1px solid var(--border);}
.dtbl th{padding:13px 14px;text-align:left;font-size:10px;font-weight:800;letter-spacing:1.4px;color:var(--gold);text-transform:uppercase;white-space:nowrap;}
.dtbl td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle;}
.dtbl tbody tr{transition:background .15s;}
.dtbl tbody tr:hover{background:rgba(255,255,255,.025);}
.dtbl tbody tr:last-child td{border-bottom:none;}
.status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:9.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;white-space:nowrap;}
.sb-pending{background:rgba(212,175,55,.12);color:var(--gold);border:1px solid rgba(212,175,55,.3);}
.sb-approved{background:rgba(67,177,75,.12);color:var(--green);border:1px solid rgba(67,177,75,.3);}
.sb-declined{background:rgba(232,64,64,.12);color:var(--red);border:1px solid rgba(232,64,64,.3);}
.sb-cancelled{background:rgba(255,255,255,.06);color:var(--t3);border:1px solid rgba(255,255,255,.1);}
.sb-escalated{background:rgba(255,140,0,.12);color:var(--orange);border:1px solid rgba(255,140,0,.3);}
.tbl-empty{text-align:center;padding:44px 20px;color:var(--t3);font-size:12px;}

/* ── LEAVE GUIDE ACCORDION ── */
.acc-item{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-bottom:8px;transition:border-color .2s,box-shadow .2s;}
.acc-item.open{border-color:rgba(212,175,55,.25);box-shadow:0 4px 16px rgba(0,0,0,.18);}
.acc-hdr{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;background:var(--panel);transition:background .2s;}
.acc-hdr:hover{background:var(--panel2);}
.acc-type-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.04);}
.acc-name{font-size:13px;font-weight:700;flex:1;}
.acc-code{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:1px;}
.acc-arrow{color:var(--t3);transition:transform .3s var(--ease);font-size:11px;}
.acc-item.open .acc-arrow{transform:rotate(180deg);}
.acc-body{display:none;padding:16px;border-top:1px solid var(--border);background:rgba(0,0,0,.14);}
.acc-item.open .acc-body{display:block;animation:accOpen .25s var(--ease);}
@keyframes accOpen{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;}
.acc-info-item label{font-size:9.5px;font-weight:800;letter-spacing:1.4px;color:var(--t3);text-transform:uppercase;display:block;margin-bottom:4px;}
.acc-info-item p{font-size:12px;color:var(--text);line-height:1.5;}

/* ── ADMIN PANEL ── */
.admin-tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap;overflow-x:auto;scrollbar-width:none;}
.admin-tabs::-webkit-scrollbar{display:none;}
.atab{padding:9px 16px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--t3);font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;cursor:pointer;transition:all .22s;white-space:nowrap;flex-shrink:0;min-height:36px;font-family:inherit;}
.atab.active{background:var(--gdim);border-color:rgba(212,175,55,.3);color:var(--gold);}
.atab:hover:not(.active){color:var(--t2);background:rgba(255,255,255,.025);}
.admin-sub{display:none;}
.admin-sub.active{display:block;animation:cvIn .4s var(--ease) both;}
.approval-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);padding:18px;margin-bottom:12px;transition:border-color .25s,box-shadow .25s;animation:scIn .5s var(--ease) both;}
.approval-card:hover{border-color:rgba(212,175,55,.2);box-shadow:0 8px 24px rgba(0,0,0,.22);}
.appr-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.appr-name{font-size:14px;font-weight:700;margin-bottom:3px;}
.appr-meta{font-size:11px;color:var(--t3);letter-spacing:.4px;}
.appr-type-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:.8px;}
.appr-dates{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;background:rgba(0,0,0,.22);border-radius:10px;padding:12px;}
.appr-date-item label{font-size:9.5px;color:var(--t3);letter-spacing:1.4px;text-transform:uppercase;font-weight:800;display:block;margin-bottom:4px;}
.appr-date-item p{font-size:12px;font-family:var(--mono);font-weight:700;}
.appr-actions{display:flex;gap:8px;flex-wrap:wrap;}
.appr-empty{text-align:center;padding:54px 20px;color:var(--t3);}
.appr-empty i{font-size:36px;margin-bottom:14px;display:block;color:rgba(212,175,55,.22);}
.appr-empty p{font-size:13px;margin-top:6px;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);gap:14px;}
.settings-row:last-child{border-bottom:none;}
.settings-row .sr-left{flex:1;min-width:0;}
.settings-row .sr-left .sr-title{font-size:13px;font-weight:600;}
.settings-row .sr-left .sr-desc{font-size:11px;color:var(--t3);margin-top:3px;line-height:1.45;}
.toggle-switch{position:relative;width:44px;height:24px;cursor:pointer;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-track{position:absolute;inset:0;background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:12px;transition:all .3s;}
.toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--t3);transition:all .3s var(--ease);box-shadow:0 2px 4px rgba(0,0,0,.3);}
.toggle-switch input:checked + .toggle-track{background:var(--gndim);border-color:rgba(67,177,75,.4);}
.toggle-switch input:checked ~ .toggle-thumb{left:23px;background:var(--green);}

/* ── MODALS ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);z-index:100000;display:none;align-items:center;justify-content:center;padding:16px;padding-bottom:max(16px,var(--safe-b));overflow-y:auto;}
.modal-bg.show{display:flex;animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-box{width:100%;max-width:560px;background:rgba(8,12,8,.92);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),var(--sh-lg);animation:mpop .35s var(--ease);max-height:calc(100dvh - 32px);overflow-y:auto;backdrop-filter:blur(32px) saturate(160%);-webkit-backdrop-filter:blur(32px) saturate(160%);}
.modal-box.modal-lg{max-width:700px;}
@keyframes mpop{from{transform:scale(.92) translateY(20px);opacity:0;}to{transform:none;opacity:1;}}
.modal-box::before{content:'';display:block;width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 auto 22px;}
.modal-title{font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:3px;text-align:center;margin-bottom:6px;}
.modal-sub{font-size:11px;color:var(--t3);text-align:center;letter-spacing:.5px;margin-bottom:24px;line-height:1.55;}
.modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:var(--panel2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);font-size:13px;transition:all .22s;z-index:3;}
.modal-close:hover{border-color:var(--red);color:var(--red);transform:scale(1.08);}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;padding-top:18px;border-top:1px solid var(--border);flex-wrap:wrap;}
.modal-footer .btn{flex:0 1 auto;}
.wz-pane .modal-footer{position:sticky;bottom:-32px;background:linear-gradient(180deg,transparent 0%,rgba(8,12,8,.95) 30%);margin:0 -32px -32px;padding:18px 32px 32px;z-index:2;}

/* ── WIZARD ── */
.wizard-steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:28px;}
.wz-step{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;flex-shrink:0;}
.wz-dot{width:34px;height:34px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--t3);transition:all .35s var(--ease);background:var(--panel2);}
.wz-step.active .wz-dot{border-color:var(--gold);color:var(--gold);background:var(--gdim);box-shadow:0 0 16px rgba(212,175,55,.25);transform:scale(1.06);}
.wz-step.done .wz-dot{border-color:var(--green);color:var(--green);background:var(--gndim);}
.wz-label{font-size:10px;font-weight:800;letter-spacing:1.1px;color:var(--t3);text-transform:uppercase;}
.wz-step.active .wz-label{color:var(--gold);}
.wz-step.done .wz-label{color:var(--green);}
.wz-line{width:60px;height:2px;background:var(--border);margin-bottom:24px;transition:background .35s;}
.wz-line.done{background:rgba(67,177,75,.4);}
.wz-pane{display:none;}
.wz-pane.active{display:block;animation:cvIn .3s var(--ease) both;}

.lt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.lt-card{padding:14px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--panel);cursor:pointer;transition:all .25s var(--ease);display:flex;align-items:center;gap:12px;}
.lt-card:hover{border-color:rgba(212,175,55,.22);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.18);}
.lt-card.selected{border-color:var(--gold);background:var(--gdim);box-shadow:0 0 18px rgba(212,175,55,.1);}
.lt-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.lt-name{font-size:13px;font-weight:700;margin-bottom:2px;}
.lt-code{font-size:10px;color:var(--t3);font-family:var(--mono);letter-spacing:1px;}
.lt-desc{font-size:11.5px;color:var(--t3);line-height:1.6;margin-top:12px;padding:13px 14px;background:rgba(0,0,0,.22);border-radius:10px;border:1px solid var(--border);}
/* ── WIZARD: Duration box ── */
.wz-duration-box{margin-top:14px;padding:16px;background:rgba(240,200,50,.05);border:1px solid rgba(240,200,50,.2);border-radius:12px;}
.wz-duration-lbl{font-size:11px;font-weight:800;color:var(--gold);margin-bottom:14px;letter-spacing:1.4px;text-transform:uppercase;display:flex;align-items:center;gap:7px;}
.wz-duration-grid{display:grid;grid-template-columns:1fr 1fr 2fr;gap:10px;align-items:end;}
.wz-dur-col label{display:block;font-size:9.5px;color:var(--t3);font-weight:800;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:6px;}
.wz-dur-input{text-align:center;font-family:var(--mono)!important;font-size:18px!important;font-weight:800!important;color:var(--gold)!important;}
.wz-dur-equiv-wrap{display:flex;align-items:flex-end;padding-bottom:1px;}
.wz-dur-equiv{font-size:11px;color:var(--t3);line-height:1.5;padding:10px 13px;background:rgba(0,0,0,.22);border-radius:8px;min-height:44px;display:flex;align-items:center;width:100%;}
@media(max-width:540px){
  .wz-duration-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .wz-dur-equiv-wrap{grid-column:span 2;}
  .wz-dur-input{font-size:16px!important;}
}

.hours-calc{background:var(--gdim);border:1px solid rgba(212,175,55,.25);border-radius:11px;padding:14px 16px;margin-top:14px;}
.hc-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:3px 0;gap:10px;}
.hc-row .hk{color:var(--t2);}
.hc-row .hv{font-family:var(--mono);font-weight:700;color:var(--gold);white-space:nowrap;}
.hc-row.warn .hv{color:var(--red);}
.confirm-summary{background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:12px;padding:16px;}
.cs-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px;gap:10px;}
.cs-row:last-child{border-bottom:none;}
.cs-row .ck{color:var(--t3);}
.cs-row .cv{font-weight:700;text-align:right;}

/* ── HR ANALYTICS ── */
.analytics-alert{border-radius:var(--r-md);padding:16px 18px;margin-bottom:14px;}
.analytics-alert.danger{background:rgba(232,64,64,.06);border:1px solid rgba(232,64,64,.2);}
.analytics-alert.warn{background:rgba(255,140,0,.06);border:1px solid rgba(255,140,0,.2);}
.analytics-alert.ok{background:rgba(67,177,75,.06);border:1px solid rgba(67,177,75,.2);}
.analytics-alert-title{font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:10px;}
.analytics-charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.sl-bar-wrap{margin-bottom:14px;}
.sl-bar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:10px;flex-wrap:wrap;}
.sl-bar-track{height:8px;background:rgba(255,255,255,.06);border-radius:10px;overflow:hidden;}
.sl-bar-fill{height:100%;border-radius:10px;transition:width 1.2s var(--ease);}
.flag-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(232,64,64,.15);color:var(--red);border:1px solid rgba(232,64,64,.3);border-radius:10px;padding:2px 8px;font-size:10px;font-weight:800;letter-spacing:.6px;margin-left:8px;}
.warn-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(255,140,0,.15);color:var(--orange);border:1px solid rgba(255,140,0,.3);border-radius:10px;padding:2px 8px;font-size:10px;font-weight:800;letter-spacing:.6px;margin-left:8px;}
.chart-box{position:relative;padding:20px;height:280px;}

/* ── SKELETON ── */
.skel{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:400% 100%;animation:shim 1.5s infinite;border-radius:7px;}
@keyframes shim{from{background-position:100% 0;}to{background-position:-100% 0;}}

/* ── BANNERS ── */
#test-mode-banner{display:none;position:fixed;top:0;left:0;right:0;height:36px;z-index:999999;background:linear-gradient(90deg,rgba(160,0,0,.97),rgba(220,40,40,.97));border-bottom:2px solid rgba(255,100,100,.5);align-items:center;justify-content:center;gap:12px;font-size:11px;font-weight:900;letter-spacing:1.8px;color:#fff;text-transform:uppercase;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:0 12px;}
#test-mode-banner.show{display:flex;animation:tmBIn .45s var(--ease) both;}
@keyframes tmBIn{from{transform:translateY(-100%);opacity:0;}to{transform:none;opacity:1;}}
.test-toggle-btn,.maint-toggle-btn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);color:#fff;padding:4px 14px;border-radius:20px;cursor:pointer;font-size:10px;font-weight:900;letter-spacing:1.4px;white-space:nowrap;transition:background .2s,transform .2s;flex-shrink:0;}
.test-toggle-btn:hover,.maint-toggle-btn:hover{background:rgba(255,255,255,.32);transform:scale(1.05);}
#maint-banner{display:none;position:fixed;top:0;left:0;right:0;height:36px;z-index:999998;background:linear-gradient(90deg,rgba(180,120,0,.97),rgba(220,160,0,.97));border-bottom:2px solid rgba(255,200,50,.5);align-items:center;justify-content:center;gap:12px;font-size:11px;font-weight:900;letter-spacing:1.8px;color:#fff;text-transform:uppercase;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:0 12px;}
#maint-banner.show{display:flex;animation:tmBIn .45s var(--ease) both;}
#maint-overlay{display:none;position:fixed;inset:0;z-index:999997;background:rgba(5,9,5,.96);align-items:center;justify-content:center;flex-direction:column;gap:16px;color:#fff;text-align:center;padding:32px;}
#maint-overlay.show{display:flex;}
#maint-overlay i{font-size:48px;color:var(--gold);margin-bottom:8px;}
#maint-overlay h2{font-family:var(--disp);font-size:28px;letter-spacing:4px;margin:0;}
#maint-overlay p{color:rgba(255,255,255,.6);font-size:13px;max-width:440px;line-height:1.7;}
body.test-mode #root{margin-top:36px;}
body.maint-mode.test-mode #root{margin-top:72px;}
body.maint-mode:not(.test-mode) #root{margin-top:36px;}

/* ── LIGHT THEME ── */
[data-theme="light"]{--void:#fff;--deep:#f4f6f4;--base:#e8ede8;--lift:#dce4dc;--panel:rgba(4,80,30,.05);--panel2:rgba(4,80,30,.09);--border:rgba(4,80,30,.16);--bord2:rgba(4,80,30,.26);--gold:#04501e;--gold2:#065a23;--gdim:rgba(4,80,30,.10);--gglow:rgba(4,80,30,.22);--gsoft:rgba(4,80,30,.04);--green:#43b14b;--gndim:rgba(67,177,75,.12);--red:#c42020;--rdim:rgba(196,32,32,.10);--text:#000;--t2:rgba(0,0,0,.80);--t3:rgba(0,0,0,.52);--t4:rgba(0,0,0,.32);}
[data-theme="light"] body{background:#fff;}[data-theme="light"] body::before{display:none;}
[data-theme="light"] #lv-hdr{background:rgba(255,255,255,.96)!important;border-color:rgba(4,80,30,.14)!important;}
[data-theme="light"] .glass,[data-theme="light"] .lv-section{background:rgba(255,255,255,.88)!important;border-color:rgba(4,80,30,.13)!important;}
[data-theme="light"] input.gi,[data-theme="light"] textarea.gi,[data-theme="light"] select.gi{background:rgba(255,255,255,.85)!important;border-color:rgba(4,80,30,.20)!important;color:#000!important;}
[data-theme="light"] .btn-green{background:#43b14b;}
[data-theme="light"] .btn-gold{background:#04501e;color:#fff;}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — mobile-first refinements
   ════════════════════════════════════════════════════════════ */

/* ── Large tablet ── */
@media(max-width:1100px){
  #lv-main{padding:24px 18px 80px;}
  .modal-box{max-width:600px;}
  .analytics-charts-grid{gap:16px;}
}

/* ── Tablet ── */
@media(max-width:820px){
  :root{--hdh:60px;}
  #lv-main{padding:22px 16px 80px;}
  .overview-grid{grid-template-columns:1fr;gap:20px;}
  .ring-wrap{flex-direction:row;justify-content:center;gap:18px;}
  .ring-container{width:160px;height:160px;}
  .ring-pct{font-size:28px;}
  .stat-cards{grid-template-columns:repeat(2,1fr);gap:12px;}
  .form-grid{grid-template-columns:1fr;}
  .form-grid-resp{grid-template-columns:1fr!important;}
  .analytics-charts-grid{grid-template-columns:1fr;}
  .hdr-clock{display:none;}
  .brand-sub{display:none;}
  .appr-dates{grid-template-columns:1fr 1fr;}
  .acc-grid{grid-template-columns:1fr;}
  .modal-box{padding:26px 22px;max-width:calc(100vw - 24px);}
  .lt-card{padding:13px;}
  .has-subtitle{margin-left:0;flex-basis:100%;}
}

/* ── Small tablet / large phone ── */
@media(max-width:640px){
  :root{--hdh:58px;}
  #lv-main{padding:18px 14px 80px;}
  #lv-hdr{padding:0 14px;gap:8px;}
  .back-btn{padding:0 12px;min-height:40px;min-width:44px;}
  .back-btn span{display:none;}
  .brand-logo-img{height:30px;}
  .page-title-pill{display:none;}
  .hdr-clock{display:none;}
  .hdr-user-chip span{display:none;}
  .hdr-user-chip{padding:6px 8px;max-width:none;}
  .lv-nav-item{padding:13px 14px;font-size:10.5px;letter-spacing:1.2px;}
  .stat-cards{grid-template-columns:1fr 1fr;}
  .sc-val{font-size:22px;}
  .cal-grid{gap:5px;}
  .cal-day{min-height:62px;padding:5px;border-radius:9px;}
  .cal-day-num{font-size:10px;}
  .cal-pip,.cal-ph{font-size:9px;padding:1px 5px;}
  .cal-day.today::after{font-size:6px;letter-spacing:1px;top:4px;right:4px;}
  .cal-month{font-size:16px;letter-spacing:1.8px;}
  .cal-arrow{width:36px;height:36px;}
  .req-filter-tabs{gap:5px;}
  .rtab{padding:7px 12px;font-size:10.5px;min-height:34px;}
  .acc-hdr{padding:13px 14px;}
  .acc-body{padding:14px;}
  .btn,.btn-green,.btn-gold,.btn-red,.btn-outline{min-height:44px;}
  .btn-sm{min-height:38px;padding:9px 13px;}
  .modal-box{padding:22px 18px;border-radius:18px;}
  .modal-title{font-size:16px;letter-spacing:2px;}
  .wz-line{width:38px;}
  .wz-dot{width:30px;height:30px;font-size:11px;}
  .wizard-steps{gap:0;margin-bottom:22px;}
  .lt-grid{grid-template-columns:1fr;gap:9px;}
  .appr-dates{grid-template-columns:1fr;gap:8px;}
  .approval-card{padding:15px;}
  .appr-actions{width:100%;}
  .appr-actions .btn,.appr-actions button{flex:1;justify-content:center;}
  .dtbl th,.dtbl td{padding:10px 9px;}
  .dtbl{font-size:11px;}
  .ring-container{width:148px;height:148px;}
  .ring-pct{font-size:24px;}
  .req-leave-btn .btn{flex:1 1 100%;justify-content:center;}
}

/* ── Phone ── */
@media(max-width:540px){
  :root{--hdh:56px;}
  #lv-hdr{padding:0 12px;}
  #lv-main{padding:14px 10px 80px;}
  .back-btn{padding:0 10px;}
  .brand-logo-img{height:28px;}
  .hdr-icon-btn{width:36px;height:36px;}
  .hdr-user-chip{padding:6px;border-radius:50%;width:36px;height:36px;justify-content:center;}
  .hdr-user-chip i{font-size:14px;}
  .lv-nav-item{padding:12px;font-size:10px;letter-spacing:1px;gap:6px;}
  .lv-nav-item span{display:none;}
  .lv-nav-item i{font-size:15px;}
  .glass{padding:18px;border-radius:14px;}
  .stat-card{padding:14px;}
  .sc-val{font-size:20px;}
  .owed-strip{padding:13px 14px;}
  .owed-icon{width:36px;height:36px;font-size:14px;}
  .owed-val{font-size:18px;}
  .cal-grid{gap:4px;}
  .cal-day{min-height:54px;padding:4px;border-radius:8px;}
  .cal-day-num{font-size:10px;margin-bottom:2px;}
  .cal-day.today::after{display:none;}
  .cal-month{font-size:15px;}
  /* On very narrow phones the 7-cell row gets cramped — drop pip
     padding so the leave label still fits a one-word name. */
  .cal-pip,.cal-ph{font-size:8.5px;padding:1px 4px;}
  .cal-pip,.cal-ph{font-size:8px;padding:1px 3px;}
  .cal-legend{gap:6px;margin-top:12px;padding-top:12px;}
  .cal-leg-item{font-size:10px;}
  .req-leave-btn{flex-direction:column;}
  .req-leave-btn .btn{width:100%;}
  .modal-box{padding:20px 16px;border-radius:16px;max-height:calc(100dvh - 16px);}
  .modal-bg{padding:8px;padding-bottom:max(8px,var(--safe-b));}
  .modal-close{top:10px;right:10px;width:32px;height:32px;}
  .modal-title{font-size:15px;letter-spacing:2px;}
  .modal-sub{font-size:10.5px;margin-bottom:18px;}
  .wz-pane .modal-footer{margin:0 -16px -20px;padding:16px;bottom:-20px;}
  .modal-footer{flex-direction:column-reverse;gap:8px;}
  .modal-footer .btn{width:100%;}
  .wz-line{width:30px;}
  .wz-dot{width:28px;height:28px;font-size:10px;}
  .wz-label{font-size:9px;}
  .hours-acc-summary{padding:13px 14px;}
  .hours-acc-body{padding:0 12px 14px;}
  #toast{left:10px;right:10px;transform:translateY(80px);min-width:0;width:auto;max-width:none;}
  #toast.show{transform:translateY(0);}
  .hdr-notif-dd{width:calc(100vw - 20px);right:-30px;}
  .dtbl th,.dtbl td{padding:9px 8px;font-size:11px;}
  .ring-container{width:140px;height:140px;}
  .ring-pct{font-size:22px;}
  .ring-lbl{font-size:9px;}
  .appr-top{flex-direction:column;align-items:flex-start;}
  .appr-actions{flex-direction:column;width:100%;}
  .appr-actions .btn{width:100%;}
  .settings-row{flex-wrap:wrap;}
  .acc-grid{grid-template-columns:1fr;}
  .chart-box{height:240px;padding:14px;}
}

/* ── Small phone ── */
@media(max-width:400px){
  :root{--hdh:54px;}
  #lv-hdr{padding:0 10px;}
  #lv-main{padding:12px 8px 80px;}
  .stat-cards{grid-template-columns:1fr;}
  .lv-nav-item{padding:11px 8px;}
  .cal-grid{font-size:9px;}
  .cal-day{min-height:40px;padding:2px;}
  .cal-day-num{font-size:9px;}
  .brand-logo-img{height:26px;}
  .ring-container{width:130px;height:130px;}
  .ring-pct{font-size:20px;}
  .modal-box{padding:18px 14px;}
  .atab{padding:8px 12px;font-size:10px;}
  .glass{padding:14px;}
}

/* ── REDUCE MOTION ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ── Premium pass (2026-06-08) — appended last; CSS-only, no logic touched ── */
.glass,.stat-card,.approval-card,.lt-card,.hours-acc-panel{
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 42%,var(--panel)),linear-gradient(320deg,var(--gdim),transparent 60%) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:0 12px 34px -14px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08) !important;}
.glass:hover,.stat-card:hover,.approval-card:hover,.lt-card:hover{transform:translateY(-3px);border-color:var(--gglow) !important;box-shadow:0 18px 44px -12px rgba(0,0,0,.5) !important;}
/* premium login card (matches the other portal logins) */
.login-card{background:linear-gradient(160deg,rgba(255,255,255,.09),transparent 45%),linear-gradient(320deg,var(--gdim),transparent 60%),rgba(6,10,6,.80) !important;border:1px solid rgba(240,200,50,.30) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 32px 80px rgba(0,0,0,.65),0 0 90px rgba(240,200,50,.07) !important;}
/* premium modal shell */
.modal-box{background:linear-gradient(165deg,var(--base),var(--deep)) !important;border:1px solid rgba(255,255,255,.20) !important;}
.dtbl th{color:var(--gold) !important;}
.dtbl tbody tr:hover td{background:rgba(212,175,55,.06) !important;}