/* ================================================================
   DTTASA IT BOARD — Obsidian Command Design Language
   ================================================================ */
:root {
  --void:#0c1109; --deep:#111a0e; --base:#172213; --lift:#1e2e1b;
  --panel:rgba(255,255,255,0.11); --panel2:rgba(255,255,255,0.19);
  --border:rgba(255,255,255,0.23); --bord2:rgba(255,255,255,0.34);
  --gold:#f0c832; --gold2:#f7d94e; --gdim:rgba(212,175,55,0.12);
  --gglow:rgba(212,175,55,0.3); --gsoft:rgba(212,175,55,0.055);
  --green:#4cd657; --gndim:rgba(67,177,75,0.12); --gnsoft:rgba(67,177,75,0.055);
  --red:#ff4848; --rdim:rgba(232,64,64,0.12);
  --amber:#f59e0b; --adim:rgba(245,158,11,0.12);
  --blue:#3b82f6; --bdim:rgba(59,130,246,0.12);
  --text:#f4f9f0; --t2:rgba(244,249,240,0.95); --t3:rgba(244,249,240,0.82);
  --mono:'IBM Plex Mono',monospace; --disp:'Cinzel',serif; --body:'DM Sans',sans-serif;
  --hdh:66px; --sbw:230px;
}
*,*::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;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 12% 0%,rgba(59,130,246,0.10) 0%,transparent 52%),
             radial-gradient(ellipse at 88% 100%,rgba(212,175,55,0.04) 0%,transparent 52%),
             repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.025) 2px,rgba(0,0,0,0.025) 4px);}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(59,130,246,0.3);border-radius:3px;}

/* ── BUTTONS ── */
.btn{border:none;padding:13px 26px;border-radius:50px;font-weight:800;font-size:13px;letter-spacing:2px;cursor:pointer;text-transform:uppercase;transition:all .35s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;}
.btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.12);transform:translate(-50%,-50%);transition:width .4s,height .4s;}
.btn:active::after{width:220px;height:220px;}
.btn-green{background:var(--green);color:#fff;box-shadow:0 6px 18px rgba(67,177,75,.28);}
.btn-green:hover{transform:scale(1.04) translateY(-2px);box-shadow:0 12px 26px rgba(67,177,75,.44);}
.btn-gold{background:var(--gold);color:var(--deep);box-shadow:0 6px 18px rgba(212,175,55,.24);}
.btn-gold:hover{background:var(--gold2);transform:scale(1.04) translateY(-2px);}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(59,130,246,.28);}
.btn-blue:hover{transform:scale(1.04) translateY(-2px);box-shadow:0 12px 26px rgba(59,130,246,.44);}
.btn-red{background:var(--red);color:#fff;}
.btn-red:hover{transform:scale(1.04) translateY(-2px);box-shadow:0 12px 26px rgba(232,64,64,.4);}
.btn-outline{background:transparent;border:1px solid var(--bord2);color:var(--t2);padding:9px 16px;font-size:11px;border-radius:9px;}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}
.btn-sm{padding:8px 15px;font-size:11px;border-radius:8px;}
.btn-xs{padding:5px 11px;font-size:11px;border-radius:6px;letter-spacing:1px;}
.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);}}
@keyframes regSuccessIn{from{opacity:0;transform:scale(.95);}to{opacity:1;transform:scale(1);}}
@keyframes regCheckPulse{0%,100%{box-shadow:0 0 0 0 rgba(67,177,75,.4);}50%{box-shadow:0 0 0 18px rgba(67,177,75,0);}}

/* ── TOAST ── */
#toast{position:fixed;bottom:24px;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:8px;display:flex;align-items:center;gap:11px;font-size:13px;font-weight:600;z-index:9999999;min-width:280px;max-width:460px;box-shadow:0 12px 40px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);transition:transform .45s cubic-bezier(.16,1,.3,1),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);}

/* ── MODAL OVERLAY ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:800000;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);}
.modal-overlay.open{display:flex;animation:fadeIn .22s cubic-bezier(.16,1,.3,1) both;}/* backdrop fade — the .modal-box already animates via glassIn */
.modal-box{background:rgba(6,10,6,.78);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:36px;width:100%;max-width:500px;position:relative;animation:glassIn .65s cubic-bezier(.16,1,.3,1) both;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 32px 80px rgba(0,0,0,.7);max-height:90vh;overflow-y:auto;backdrop-filter:blur(32px) saturate(160%);-webkit-backdrop-filter:blur(32px) saturate(160%);}
@keyframes glassIn{from{opacity:0;transform:translateY(20px) scale(.97);filter:blur(6px);}to{opacity:1;transform:none;filter:blur(0);}}
@keyframes mIn{from{opacity:0;transform:translateY(22px) scale(.96);}to{opacity:1;transform:none;}}
.modal-box::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:140px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.modal-title{font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:3px;color:var(--gold);margin-bottom:6px;}
.modal-sub{font-size:13px;color:var(--t2);margin-bottom:24px;line-height:1.6;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;flex-wrap:wrap;}
.modal-close{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;background:var(--panel2);border:1px solid var(--border);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;}
.modal-close:hover{border-color:var(--red);color:var(--red);}

/* ── GLASS CARD ── */
.glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px;position:relative;overflow:hidden;transition:border-color .3s,transform .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,.07),0 8px 32px rgba(0,0,0,.3);animation:glassIn .65s cubic-bezier(.16,1,.3,1) both;}
.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);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 40px rgba(0,0,0,.35);}
@keyframes itReveal{from{opacity:0;transform:translateY(18px) scale(.98);filter:blur(3px);}to{opacity:1;transform:none;filter:blur(0);}}
.it-reveal{opacity:0;}
.it-reveal.it-in-view{animation:itReveal .5s cubic-bezier(.16,1,.3,1) both;}
.glass-blue{border-color:rgba(59,130,246,.18);background:linear-gradient(135deg,var(--bdim) 0%,var(--panel) 65%);}

/* ── FORM INPUTS ── */
.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;margin-bottom:12px;}
.gi:focus{border-color:rgba(59,130,246,.4);box-shadow:0 0 0 3px rgba(59,130,246,.08);}
.gi-ta{min-height:80px;resize:vertical;}
select.gi option{background:#0b130a;}
.gi-label{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;margin-bottom:6px;display:block;}
.gi-check-row{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;cursor:pointer;transition:border-color .2s;}
.gi-check-row:hover{border-color:var(--bord2);}
.gi-check-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);cursor:pointer;flex-shrink:0;margin-top:2px;}
.gi-check-row label{font-size:13px;color:var(--t2);cursor:pointer;line-height:1.5;}
/* ── REGISTRATION FORM ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;}
.ig label{display:block;font-size:11px;font-weight:800;letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin-bottom:5px;}
.pin-regen-wrap{display:flex;gap:8px;align-items:center;}
.pin-regen-wrap .gi{flex:1;font-family:var(--mono);letter-spacing:3px;font-size:16px;font-weight:700;color:var(--gold);}
.pin-regen-btn{flex-shrink:0;background:var(--gdim);border:1px solid rgba(212,175,55,.3);border-radius:9px;color:var(--gold);font-size:13px;font-weight:700;padding:10px 13px;cursor:pointer;letter-spacing:.5px;transition:background .2s,box-shadow .2s;white-space:nowrap;}
.pin-regen-btn:hover{background:rgba(212,175,55,.2);box-shadow:0 0 12px rgba(212,175,55,.15);}
.reg-section-lbl{font-size:11px;font-weight:800;letter-spacing:2.5px;color:var(--gold);text-transform:uppercase;margin:20px 0 14px;display:flex;align-items:center;gap:8px;}
.reg-section-lbl::after{content:'';flex:1;height:1px;background:var(--border);}
@media(max-width:700px){.form-grid{grid-template-columns:1fr;}}

/* ── SECTION LABEL ── */
.sec-lbl{font-size:12px;font-weight:800;letter-spacing:2.5px;color:var(--gold);text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.sec-lbl::after{content:'';flex:1;height:1px;background:var(--border);}
.sec-lbl i{font-size:13px;}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;letter-spacing:1px;padding:2px 7px;border-radius:8px;text-transform:uppercase;vertical-align:middle;}
.badge-pending{background:rgba(245,158,11,.15);color:var(--amber);border:1px solid rgba(245,158,11,.3);}
.badge-registered{background:rgba(67,177,75,.12);color:var(--green);border:1px solid rgba(67,177,75,.25);}
.badge-cancelled{background:rgba(232,64,64,.12);color:var(--red);border:1px solid rgba(232,64,64,.25);}
.badge-approved{background:rgba(67,177,75,.12);color:var(--green);border:1px solid rgba(67,177,75,.25);}
.badge-declined{background:rgba(232,64,64,.12);color:var(--red);border:1px solid rgba(232,64,64,.25);}
.badge-reopened{background:rgba(59,130,246,.12);color:var(--blue);border:1px solid rgba(59,130,246,.25);}
.badge-blue{background:rgba(59,130,246,.12);color:var(--blue);border:1px solid rgba(59,130,246,.25);}
.badge-it-head{background:rgba(212,175,55,.15);color:var(--gold);border:1px solid rgba(212,175,55,.3);}
.badge-it-staff{background:rgba(59,130,246,.12);color:var(--blue);border:1px solid rgba(59,130,246,.25);}
.badge-sa{background:rgba(212,175,55,.15);color:var(--gold);border:1px solid rgba(212,175,55,.3);}

/* ── CLEARANCE DENIED ── */
#clearance-screen{position:fixed;inset:0;background:#050905;z-index:9999990;display:none;align-items:center;justify-content:center;flex-direction:column;gap:20px;text-align:center;padding:30px;}
#clearance-screen.show{display:flex;}
.clearance-icon{width:90px;height:90px;border-radius:50%;background:var(--rdim);border:2px solid var(--red);display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--red);animation:clearancePulse 2s cubic-bezier(.16,1,.3,1) infinite;}
@keyframes clearancePulse{0%,100%{box-shadow:0 0 20px rgba(232,64,64,.2);}50%{box-shadow:0 0 50px rgba(232,64,64,.5),0 0 100px rgba(232,64,64,.2);}}
.clearance-title{font-family:var(--disp);font-size:28px;font-weight:900;letter-spacing:6px;color:var(--red);}
.clearance-msg{font-size:14px;color:var(--t2);max-width:420px;line-height:1.7;}
.clearance-redirect{font-size:12px;color:var(--t3);margin-top:10px;}

/* ── LOADING SCREEN ── */
#loading-screen{position:fixed;inset:0;background:#050905;z-index:9999999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;}
.loading-logo{font-family:var(--disp);font-size:36px;font-weight:900;letter-spacing:10px;background:linear-gradient(135deg,var(--blue) 0%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.loading-ring{width:36px;height:36px;border:3px solid rgba(59,130,246,.15);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;}
.loading-label{font-size:11px;letter-spacing:3px;color:var(--t3);text-transform:uppercase;}

/* ── LOGIN BRAND (shared by re-auth card) ── */
@keyframes lcIn{from{opacity:0;transform:translateY(26px) scale(.96);filter:blur(8px);}to{opacity:1;transform:translateY(0);filter:blur(0);}}

/* ── RE-AUTH OVERLAY (IT Staff) ── */
#reauth-overlay{position:fixed;inset:0;background:#050905;z-index:9999998;display:none;align-items:center;justify-content:center;padding:20px;}
#reauth-overlay.show{display:flex;}
.reauth-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 cubic-bezier(.16,1,.3,1) 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%);}
.reauth-card::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:180px;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent);}
.reauth-shield{width:56px;height:56px;border-radius:50%;background:var(--bdim);border:1px solid rgba(59,130,246,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:22px;color:var(--blue);}
#reauth-err{color:var(--red);font-size:12px;margin-bottom:13px;display:none;background:rgba(232,64,64,.08);border:1px solid rgba(232,64,64,.2);border-radius:8px;padding:8px 11px;}

/* ── HEADER ── */
#it-header{height:var(--hdh);display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:rgba(4,8,4,.78);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(36px) saturate(160%);-webkit-backdrop-filter:blur(36px) saturate(160%);position:sticky;top:0;z-index:500;flex-shrink:0;animation:hdrDrop .7s cubic-bezier(.16,1,.3,1) both;box-shadow:inset 0 -1px 0 rgba(255,255,255,.05),0 4px 24px rgba(0,0,0,.3);}
@keyframes hdrDrop{from{transform:translateY(-100%);opacity:0;}to{transform:none;opacity:1;}}
#it-header::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(59,130,246,.04) 50%,transparent);background-size:250% 100%;animation:hdrScan 7s linear infinite;}
@keyframes hdrScan{from{background-position:250% 0;}to{background-position:-250% 0;}}
.hdr-left{display:flex;align-items:center;gap:14px;}
.brand-logo{font-family:var(--disp);font-size:22px;font-weight:900;letter-spacing:7px;line-height:1;background:linear-gradient(135deg,var(--blue) 0%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.brand-sub{font-size:8.5px;letter-spacing:3px;color:var(--blue);opacity:.7;text-transform:uppercase;}
.page-pill{display:flex;align-items:center;gap:7px;background:var(--bdim);border:1px solid rgba(59,130,246,.22);padding:5px 14px;border-radius:20px;font-size:11px;font-weight:800;color:var(--blue);letter-spacing:1.5px;text-transform:uppercase;}
.hdr-right{display:flex;align-items:center;gap:10px;}
.hdr-clock{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--gold);border:1px solid rgba(212,175,55,.28);padding:7px 14px;border-radius:8px;background:var(--gdim);letter-spacing:2px;white-space:nowrap;}
.hdr-user-chip{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--border);padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;color:var(--text);}
.hdr-user-av{width:26px;height:26px;border-radius:50%;overflow:hidden;background:var(--bdim);border:1px solid rgba(59,130,246,.3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--blue);font-family:var(--mono);}
.hdr-icon-btn{width:36px;height:36px;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:all .2s;}
.hdr-icon-btn:hover{background:var(--bdim);color:var(--blue);box-shadow:0 0 14px rgba(59,130,246,.3);}
.back-btn{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;background:var(--panel2);border:1px solid var(--border);color:var(--t2);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all .25s;text-decoration:none;}
.back-btn:hover{border-color:var(--gold);color:var(--gold);}

/* ── HORIZONTAL NAV ── */
#it-nav-outer{position:sticky;top:var(--hdh);z-index:490;background:rgba(4,8,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;}
#it-nav{flex:1;min-width:0;display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;padding-left:4px;}
#it-nav::-webkit-scrollbar{display:none;}
.it-nav-item{display:flex;align-items:center;gap:7px;padding:13px 18px;font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;flex-shrink:0;}
.it-nav-item:hover{color:var(--t2);}
.it-nav-item.active{color:var(--gold);border-bottom-color:var(--gold);}
.it-nav-item i{font-size:12px;flex-shrink:0;}
.it-nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-size: 11px;font-weight:900;padding:0 4px;font-family:var(--mono);margin-left:4px;}
.it-nav-badge.amber{background:var(--amber);}
.it-nav-badge.blue{background:var(--blue);}
.it-nav-badge.green{background:var(--green);}
.it-nav-badge.red{background:var(--red);}
.it-nav-div{display:flex;align-items:center;padding:0 10px;font-size:11px;font-weight:900;letter-spacing:2px;color:var(--t3);text-transform:uppercase;white-space:nowrap;flex-shrink:0;opacity:.55;}
.it-nav-arrow{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(240,200,50,.04);border:none;cursor:pointer;color:var(--gold);font-size:15px;opacity:0;pointer-events:none;transition:opacity .25s,background .2s;position:relative;z-index:2;touch-action:manipulation;}
.it-nav-arrow.visible{opacity:1;pointer-events:auto;}
.it-nav-arrow:hover{background:var(--gdim);}
.it-nav-arrow i{transition:transform .2s;}
.it-nav-arrow:hover i{transform:scale(1.2);}
.it-nav-left::after{content:'';position:absolute;top:0;right:-16px;width:16px;height:100%;background:linear-gradient(90deg,rgba(4,8,4,.85),transparent);pointer-events:none;}
.it-nav-right::before{content:'';position:absolute;top:0;left:-16px;width:16px;height:100%;background:linear-gradient(270deg,rgba(4,8,4,.85),transparent);pointer-events:none;}

/* ── MAIN CONTENT ── */
#it-main{width:100%;overflow-x:hidden;}
.it-section{display:block;}
@keyframes secIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
/* ── SECTION GROUP DIVIDERS (scroll-first layout) ── */
.it-section-group{width:100%;padding:10px 28px 4px;display:flex;align-items:center;gap:14px;margin-top:8px;}
.it-section-group-label{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:3px;color:var(--t3);text-transform:uppercase;white-space:nowrap;}
.it-section-group-line{flex:1;height:1px;background:var(--border);}
/* ── SECTION SUB-HEADER (sticky while scrolling through section) ── */
.sec-sticky-sub{position:sticky;top:calc(var(--hdh) + 48px);z-index:10;padding:6px 28px;background:rgba(12,17,9,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:2.5px;color:var(--t3);text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.sec-header{padding:28px 28px 0;margin-bottom:24px;}
.sec-header-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.sec-title{font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:3px;color:var(--text);margin-bottom:4px;}
.sec-desc{font-size:13px;color:var(--t3);line-height:1.5;}

/* ── KPI STRIP ── */
#it-kpi-strip{padding:0 28px 24px;display:flex;gap:12px;flex-wrap:wrap;}
.kpi-pill{flex:1;min-width:150px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px 20px;transition:all .35s cubic-bezier(.16,1,.3,1);animation:kpiIn .6s cubic-bezier(.16,1,.3,1) both;cursor:default;}
@keyframes kpiIn{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
.kpi-pill:hover{border-color:rgba(59,130,246,.25);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25);}
.kpi-pill:nth-child(1){animation-delay:.05s}.kpi-pill:nth-child(2){animation-delay:.1s}.kpi-pill:nth-child(3){animation-delay:.15s}.kpi-pill:nth-child(4){animation-delay:.2s}
.kpi-icon{font-size:16px;margin-bottom:8px;}
.kpi-label{font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;margin-bottom:6px;}
.kpi-val{font-family:var(--mono);font-size:30px;font-weight:700;line-height:1;color:var(--text);}
.kpi-val.blue{color:var(--blue);}
.kpi-val.green{color:var(--green);}
.kpi-val.amber{color:var(--amber);}
.kpi-val.red{color:var(--red);}
.kpi-sub{font-size:11px;color:var(--t3);margin-top:4px;}

/* ── TABS ── */
.tab-bar{display:flex;gap:4px;padding:0 28px 20px;flex-wrap:wrap;}
.tab-btn{padding:9px 18px;border-radius:9px;border:1px solid var(--border);background:var(--panel);color:var(--t2);font-size:11px;font-weight:800;cursor:pointer;transition:all .2s;letter-spacing:1px;text-transform:uppercase;}
.tab-btn:hover{border-color:var(--bord2);color:var(--text);}
.tab-btn.active{background:var(--bdim);border-color:rgba(59,130,246,.35);color:var(--blue);}
.tab-pane{display:none;padding:0 28px 28px;}
.tab-pane.active{display:block;animation:secIn .3s cubic-bezier(.16,1,.3,1) both;}

/* ── ALERT RIBBON ── */
#it-alert-ribbon{padding:0 28px;margin-bottom:0;}
.alert-inner{display:flex;flex-direction:column;gap:8px;padding:8px 0;}
.alert-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;animation:alertIn .5s cubic-bezier(.16,1,.3,1) both;}
@keyframes alertIn{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:none;}}
.alert-red{background:rgba(232,64,64,.08);border:1px solid rgba(232,64,64,.25);}
.alert-amber{background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.22);}
.alert-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.alert-red .alert-dot{background:var(--red);animation:dotPulse 1.2s infinite;}
.alert-amber .alert-dot{background:var(--amber);animation:dotPulse 1.8s infinite;}
@keyframes dotPulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.alert-text{flex:1;font-size:13px;font-weight:600;line-height:1.4;}
.alert-red .alert-text{color:var(--red);}
.alert-amber .alert-text{color:var(--amber);}

/* ── TABLE ── */
.it-table-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--border);}
.it-table{width:100%;border-collapse:collapse;min-width:700px;}
.it-table thead th{padding:12px 14px;text-align:left;font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;background:rgba(0,0,0,.28);border-bottom:1px solid var(--border);white-space:nowrap;}
.it-table tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .2s;}
.it-table tbody tr:hover{background:rgba(255,255,255,.03);}
.it-table tbody td{padding:12px 14px;font-size:13px;vertical-align:middle;}
.it-av{width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--bdim);border:1px solid rgba(59,130,246,.25);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--blue);font-family:var(--mono);flex-shrink:0;}
.it-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:48px 20px;}
.empty-state i{font-size:36px;color:var(--t3);margin-bottom:14px;display:block;}
.empty-state p{font-size:14px;color:var(--t3);}

/* ── DAYS PENDING ── */
.days-ok{color:var(--t3);font-size:12px;font-family:var(--mono);}
.days-warn{color:var(--amber);font-size:12px;font-family:var(--mono);font-weight:700;}
.days-crit{color:var(--red);font-size:12px;font-family:var(--mono);font-weight:700;}

/* ════════════════════ TABLET ≤ 900px ════════════════════ */
@media(max-width:900px){
  .hdr-clock{display:none;}
  .page-pill{display:none;}

  /* Reduce all section content horizontal padding */
  .sec-header{padding:16px 14px 0;}
  #it-kpi-strip{padding:0 14px 14px;}
  #it-alert-ribbon{padding:0 14px;}
  .tab-bar{padding:0 14px 14px;}
  .tab-pane{padding:0 14px 16px;}
  .tab-pane.active{padding:0 14px 20px;}

  /* Override inline padding:0 28px… on all section body divs */
  #it-main div[style*="padding:0 28px"]{padding-left:14px!important;padding-right:14px!important;}
  #it-main div[style*="padding:12px 28px"]{padding-left:14px!important;padding-right:14px!important;}
  #it-main div[style*="padding:8px 28px"]{padding-left:14px!important;padding-right:14px!important;}

  /* KPI pills — 2 per row */
  .kpi-pill{flex:1;min-width:calc(50% - 8px);}

  /* Dashboard grid — 2 col */
  #dashboard-grid{grid-template-columns:repeat(2,1fr)!important;padding:0 14px 20px!important;}

  /* Form grid — 1 col */
  .form-grid{grid-template-columns:1fr!important;}
  .form-grid .ig[style*="grid-column"]{grid-column:1!important;}

  /* Filter bars */
  #it-main .gi[style*="max-width"]{max-width:100%!important;width:100%;}
}

/* ════════════════════ PHONE ≤ 600px ════════════════════ */
@media(max-width:600px){
  /* Ultra-compact header */
  #it-header{padding:0 10px;}
  .back-btn{padding:7px 10px;font-size:9px;gap:5px;letter-spacing:1px;}
  .back-btn span{display:none;}
  #hdr-name{display:none;}
  .hdr-user-chip{padding:5px 9px;gap:6px;}
  .brand-sub{display:none;}
  .hdr-role-badge{display:none;}

  /* KPI pills — 2 per row always */
  .kpi-pill{min-width:calc(50% - 6px);padding:14px 13px;}
  .kpi-val{font-size:24px;}

  /* Dashboard single column */
  #dashboard-grid{grid-template-columns:1fr!important;}

  /* Section title smaller */
  .sec-title{font-size:16px;letter-spacing:2px;}
  .sec-desc{font-size:12px;}

  /* Modal full width */
  .modal-box{padding:22px 16px;border-radius:16px;max-height:95vh;}
  .modal-actions{flex-direction:column;}
  .modal-actions .btn{width:100%;justify-content:center;}

  /* ITR cards */
  .glass{padding:16px;}

  /* Tabs scroll */
  .tab-bar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:10px;}
  .tab-bar::-webkit-scrollbar{height:3px;}
  .tab-bar::-webkit-scrollbar-thumb{background:rgba(59,130,246,.3);border-radius:2px;}
  .tab-btn{white-space:nowrap;flex-shrink:0;}

  /* Reduce form input size */
  .gi{font-size:14px;padding:10px 11px;}
  .btn{padding:11px 18px;font-size:10px;}
  .btn-sm{padding:7px 12px;font-size:9px;}
}
/* ── LIGHT THEME ── */
[data-theme="light"]{--void:#ffffff;--deep:#f4f6f4;--base:#e8ede8;--lift:#dce4dc;--panel:rgba(4,80,30,0.05);--panel2:rgba(4,80,30,0.09);--border:rgba(4,80,30,0.16);--bord2:rgba(4,80,30,0.26);--gold:#04501e;--gold2:#065a23;--gdim:rgba(4,80,30,0.10);--gglow:rgba(4,80,30,0.22);--gsoft:rgba(4,80,30,0.04);--green:#43b14b;--gndim:rgba(67,177,75,0.12);--gnsoft:rgba(67,177,75,0.05);--red:#c42020;--rdim:rgba(196,32,32,0.10);--text:#000000;--t2:rgba(0,0,0,0.80);--t3:rgba(0,0,0,0.52);}
[data-theme="light"] body{background:#ffffff;}[data-theme="light"] body::before{display:none;}
[data-theme="light"] #it-header{background:rgba(255,255,255,0.96)!important;border-color:rgba(4,80,30,0.14)!important;}
[data-theme="light"] #it-nav-outer{background:rgba(240,243,240,0.98)!important;border-color:rgba(4,80,30,0.12)!important;}
[data-theme="light"] .glass,[data-theme="light"] .it-section,[data-theme="light"] .kpi-pill{background:rgba(255,255,255,0.88)!important;border-color:rgba(4,80,30,0.13)!important;}
[data-theme="light"] input.gi,[data-theme="light"] textarea.gi,[data-theme="light"] select.gi{background:rgba(255,255,255,0.85)!important;border-color:rgba(4,80,30,0.20)!important;color:#000!important;}
[data-theme="light"] .btn-green{background:#43b14b;}[data-theme="light"] .btn-gold{background:#04501e;color:#fff;}
[data-theme="browser"]{--void:#ececec;--deep:#e4e4e4;--base:#ffffff;--lift:#f8f8f8;--panel:rgba(0,0,0,0.05);--panel2:rgba(0,0,0,0.09);--border:rgba(0,0,0,0.15);--bord2:rgba(0,0,0,0.25);--gold:#0066cc;--gold2:#0080ff;--gdim:rgba(0,102,204,0.10);--gglow:rgba(0,102,204,0.22);--gsoft:rgba(0,102,204,0.05);--green:#188a44;--gndim:rgba(24,138,68,0.12);--gnsoft:rgba(24,138,68,0.05);--red:#c00000;--rdim:rgba(192,0,0,0.10);--text:#000000;--t2:rgba(0,0,0,0.80);--t3:rgba(0,0,0,0.55);}
[data-theme="browser"] body{background:#ececec;}[data-theme="browser"] body::before{display:none;}
[data-theme="browser"] #it-header{background:rgba(236,236,236,0.97)!important;border-color:rgba(0,0,0,0.14)!important;}
[data-theme="browser"] #it-nav-outer{background:rgba(232,232,232,0.99)!important;border-color:rgba(0,0,0,0.10)!important;}
[data-theme="browser"] .glass,[data-theme="browser"] .it-section,[data-theme="browser"] .kpi-pill{background:rgba(255,255,255,0.92)!important;border-color:rgba(0,0,0,0.12)!important;}
[data-theme="browser"] input.gi,[data-theme="browser"] textarea.gi,[data-theme="browser"] select.gi{background:rgba(255,255,255,0.9)!important;border-color:rgba(0,0,0,0.18)!important;color:#000!important;}
[data-theme="browser"] .btn-green{background:#188a44;}[data-theme="browser"] .btn-gold{background:#0066cc;color:#fff;}

#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:2px;color:#fff;text-transform:uppercase;-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
#test-mode-banner.show{display:flex;animation:tmBIn .45s cubic-bezier(.16,1,.3,1) both;}
@keyframes tmBIn{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
.test-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: 11px;font-weight:900;letter-spacing:1.5px;white-space:nowrap;transition:background .2s,transform .2s;}
.test-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:2px;color:#fff;text-transform:uppercase;-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
#maint-banner.show{display:flex;animation:tmBIn .45s cubic-bezier(.16,1,.3,1) both;}
.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: 11px;font-weight:900;letter-spacing:1.5px;white-space:nowrap;transition:background .2s,transform .2s;}
.maint-toggle-btn:hover{background:rgba(255,255,255,.32);transform:scale(1.05);}
#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;animation:fadeIn .3s cubic-bezier(.16,1,.3,1) both;}/* full-screen takeover — fade in instead of instant pop */
#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;}

/* ── NOTIFICATION BELL ── */
.notif-bell-wrap{position:relative;display:flex;align-items:center;}
.notif-bell-btn{width:38px;height:38px;border-radius:50%;background:var(--panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:var(--t2);font-size:16px;position:relative;}
.notif-bell-btn:hover{background:var(--bdim);border-color:rgba(59,130,246,.4);color:var(--blue);}
.notif-bell-btn.has-alerts{color:var(--gold);animation:bellShake 2s cubic-bezier(.16,1,.3,1) 0s infinite;}
@keyframes bellShake{0%,100%{transform:rotate(0);}10%{transform:rotate(-15deg);}20%{transform:rotate(15deg);}30%{transform:rotate(-10deg);}40%{transform:rotate(10deg);}50%{transform:rotate(0);}}
.notif-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-size: 11px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--void);pointer-events:none;}
.notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:320px;background:var(--base);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.55);z-index:9999;display:none;overflow:hidden;}
.notif-panel.open{display:block;animation:npIn .2s cubic-bezier(.16,1,.3,1) both;}
@keyframes npIn{from{opacity:0;transform:translateY(-8px) scale(.97);}to{opacity:1;transform:none;}}
.notif-panel-hdr{padding:14px 16px 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);}
.notif-panel-hdr span{font-size:11px;font-weight:900;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;}
.notif-panel-hdr button{background:none;border:none;color:var(--t3);font-size:11px;cursor:pointer;font-weight:700;padding:2px 8px;border-radius:5px;}
.notif-panel-hdr button:hover{background:var(--panel);color:var(--text);}
.notif-panel-body{max-height:380px;overflow-y:auto;padding:8px 0;}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;cursor:pointer;transition:background .15s;border-left:3px solid transparent;}
.notif-item:hover{background:var(--panel);}
.notif-item.notif-red{border-left-color:var(--red);}
.notif-item.notif-amber{border-left-color:var(--amber);}
.notif-item.notif-blue{border-left-color:var(--blue);}
.notif-item.notif-green{border-left-color:var(--green);}
.notif-item.notif-gold{border-left-color:var(--gold);}
.notif-item-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;}
.notif-item-body{flex:1;min-width:0;}
.notif-item-title{font-size:13px;font-weight:700;margin-bottom:2px;line-height:1.3;}
.notif-item-sub{font-size:11px;color:var(--t3);}
.notif-empty{padding:28px 16px;text-align:center;color:var(--t3);font-size:13px;}

/* ── DOC BLOCKS section — Phase J animations ── */
@keyframes dbCardIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
#doc-blocks-body .glass{animation:dbCardIn .32s cubic-bezier(.16,1,.3,1) both;}
#doc-blocks-body .glass:nth-child(2){animation-delay:.05s;}
#doc-blocks-body .glass:nth-child(3){animation-delay:.1s;}
#doc-blocks-body .glass:nth-child(4){animation-delay:.15s;}
#doc-blocks-body .glass:nth-child(5){animation-delay:.2s;}

/* ── IT BOARD — extra mobile fixes ── */
@media(max-width:820px){
  #it-header{padding:0 18px;}
  .kpi-row{flex-wrap:wrap;}
  .kpi-pill{flex:1 1 calc(50% - 8px);}
}
@media(max-width:640px){
  #it-header{padding:0 14px;}
  .page-pill{display:none;}
  .modal-box{max-width:calc(100vw - 24px)!important;padding:20px 16px!important;border-radius:14px;}
  .form-grid,.two-col{grid-template-columns:1fr!important;}
  .glass{padding:16px;}
  .btn,.gi{min-height:44px;}
  .it-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* Doc block cards — stack action buttons below info on small screens */
  #doc-blocks-body .glass > div:first-child{flex-direction:column!important;align-items:flex-start!important;}
  #doc-blocks-body .glass > div:first-child > div:last-child{margin-top:12px;width:100%;}
  #doc-blocks-body .glass > div:first-child > div:last-child .btn{width:100%;justify-content:center;}
}
@media(max-width:540px){
  #it-header{padding:0 12px;gap:8px;}
  .hdr-name{display:none;}
  .kpi-pill{flex:1 1 100%;}
}
/* Notification panel: on mobile widths the bell is mid-header (clock to its
   left, user chip + sign-out to its right), so absolute-positioning to the
   bell's right edge pushes the 320px panel offscreen left. Switch to
   fixed-position anchored to the viewport's right edge with a viewport-
   wide max so it never overflows. */
@media(max-width:820px){
  .notif-panel{
    position:fixed!important;
    top:calc(var(--hdh, 70px) + 8px)!important;
    right:12px!important;
    left:12px!important;
    width:auto!important;
    max-width:calc(100vw - 24px)!important;
  }
}
@media(max-width:400px){
  #it-header{padding:0 10px;gap:5px;}
  #hdr-back-btn span,#hdr-back-btn .back-label{display:none;}
  .glass{padding:12px;}
  .dtbl th,.dtbl td{padding:7px 8px;font-size:11px;}
}
/* ── REGISTER PREVIEW PANEL ── */
@media(max-width:900px){#reg-preview-panel{display:none;}}

/* ── IT BOARD GUIDE ── */
.guide-chip{display:inline-flex;align-items:center;padding:5px 14px;border-radius:20px;background:var(--panel2);border:1px solid var(--border);color:var(--t2);font-size:11px;font-weight:700;text-decoration:none;letter-spacing:.5px;transition:border-color .2s,color .2s;}
.guide-chip:hover{border-color:var(--gold);color:var(--gold);}
.guide-chip-new{border-color:rgba(212,175,55,.3);color:var(--gold);background:var(--gdim);}
.guide-part{margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid var(--border);}
.guide-part:last-of-type{border-bottom:none;}
.guide-part-new{background:rgba(212,175,55,.03);border:1px solid rgba(212,175,55,.1);border-radius:14px;padding:20px 24px;margin-bottom:20px;}
.guide-part-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.guide-part-num{background:var(--bdim);color:var(--blue);font-family:var(--mono);font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;letter-spacing:1px;white-space:nowrap;}
.guide-part-num-new{background:var(--gdim);color:var(--gold);}
.guide-part-title{font-size:16px;font-weight:700;color:var(--text);}
.guide-sub-head{font-size:12px;font-weight:800;letter-spacing:1.5px;color:var(--gold);text-transform:uppercase;margin:18px 0 8px;display:flex;align-items:center;gap:6px;}
.guide-sub-head::after{content:'';flex:1;height:1px;background:var(--gdim);}
.guide-p{font-size:13px;color:var(--t2);line-height:1.7;margin-bottom:10px;}
.guide-note{background:var(--gdim);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:10px 14px;font-size:12px;color:var(--t2);margin:12px 0;line-height:1.6;}
.guide-warn{background:var(--rdim);border-left:3px solid var(--red);border-radius:0 8px 8px 0;padding:10px 14px;font-size:12px;color:var(--t2);margin:12px 0;line-height:1.6;}
.guide-row-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0;}
.guide-row-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px;}
.guide-row-label{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--t2);margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.guide-table-wrap{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:10px 0;}
.guide-table{width:100%;border-collapse:collapse;}
.guide-table thead th{background:rgba(0,0,0,.3);color:var(--t3);font-size: 11px;font-weight:800;letter-spacing:1px;padding:9px 12px;text-align:left;text-transform:uppercase;}
.guide-table tbody tr{border-bottom:1px solid rgba(255,255,255,.04);}
.guide-table tbody tr:last-child{border-bottom:none;}
.guide-table tbody td{padding:9px 12px;font-size:12px;color:var(--t2);vertical-align:top;}
.guide-steps{list-style:none;margin:10px 0 14px;display:flex;flex-direction:column;gap:8px;}
.guide-steps li{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--t2);line-height:1.6;counter-increment:guide-step;}
.guide-steps li::before{content:counter(guide-step);background:var(--panel2);border:1px solid var(--border);color:var(--blue);font-family:var(--mono);font-size: 11px;font-weight:700;min-width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.guide-steps{counter-reset:guide-step;}
.guide-btn{display:inline-flex;align-items:center;gap:4px;background:var(--panel2);border:1px solid var(--border);color:var(--t2);font-size:11px;font-weight:700;padding:2px 9px;border-radius:6px;}
.guide-btn-green{border-color:rgba(67,177,75,.3);color:var(--green);background:var(--gndim);}
.guide-btn-blue{border-color:rgba(59,130,246,.3);color:var(--blue);background:var(--bdim);}
.guide-btn-gold{border-color:rgba(212,175,55,.3);color:var(--gold);background:var(--gdim);}
.guide-code{font-family:var(--mono);font-size:11px;background:var(--panel2);border:1px solid var(--border);padding:1px 6px;border-radius:4px;color:var(--t2);}
@media(max-width:820px){.guide-row-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.guide-row-grid{grid-template-columns:1fr;}}

/* ── IT GUIDE CARD LISTING ── */
.it-guides-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.it-guide-card { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:14px; transition:border-color .2s,transform .2s; animation:fadeIn .4s cubic-bezier(.16,1,.3,1) both; }
.it-guide-card:hover { border-color:var(--gold); transform:translateY(-2px); }
.it-guide-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.it-guide-body { flex:1; display:flex; flex-direction:column; gap:6px; }
.it-guide-title { font-size:14px; font-weight:700; color:var(--text); line-height:1.3; }
.it-guide-desc { font-size:12px; color:var(--t2); line-height:1.6; }
.it-guide-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.it-guide-tag { font-size:11px; font-weight:600; letter-spacing:.5px; background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--t3); padding:2px 9px; border-radius:8px; }
.it-guide-group-label { font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--t3); margin:28px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--border); font-family:var(--mono); }
.it-guide-actions { display:flex; gap:8px; }
@media(max-width:640px) { .it-guides-grid{grid-template-columns:1fr;} .it-guide-group-label{margin-top:20px;} }

/* ── SOC MONITOR ── */
.soc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:24px;}
.soc-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px;position:relative;overflow:hidden;transition:border-color .25s,transform .25s;animation:scIn .4s cubic-bezier(.16,1,.3,1) both;}
.soc-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;border-radius:0 0 0 14px;}
.soc-card.soc-ok::before{background:var(--green);}
.soc-card.soc-warn::before{background:var(--amber);}
.soc-card.soc-crit::before{background:var(--red);}
.soc-card:hover{border-color:var(--bord2);transform:translateY(-2px);}
.soc-card-title{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.soc-card-val{font-family:var(--mono);font-size:30px;font-weight:700;line-height:1;}
.soc-card.soc-ok .soc-card-val{color:var(--green);}
.soc-card.soc-warn .soc-card-val{color:var(--amber);}
.soc-card.soc-crit .soc-card-val{color:var(--red);}
.soc-card-sub{font-size:12px;color:var(--t3);margin-top:5px;}
.soc-event-feed{border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.soc-event-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s;}
.soc-event-item:last-child{border-bottom:none;}
.soc-event-item:hover{background:var(--panel);}
.soc-event-ico{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;}
.soc-ev-red{background:var(--rdim);color:var(--red);}
.soc-ev-amber{background:var(--adim);color:var(--amber);}
.soc-ev-green{background:var(--gndim);color:var(--green);}
.soc-ev-blue{background:var(--bdim);color:var(--blue);}
.soc-event-body{flex:1;min-width:0;}
.soc-event-title{font-size:13px;font-weight:600;margin-bottom:2px;}
.soc-event-meta{font-size:11px;color:var(--t3);}
.soc-event-time{font-size: 11px;color:var(--t3);font-family:var(--mono);flex-shrink:0;}

/* ── ASSET REGISTER ── */
.asset-stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.asset-stat{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 18px;flex:1;min-width:120px;text-align:center;}
.asset-stat-val{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--blue);}
.asset-stat-lbl{font-size: 11px;font-weight:800;letter-spacing:1px;color:var(--t3);text-transform:uppercase;margin-top:4px;}
.asset-filter-bar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.asset-cat-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.asset-cat-pill{font-size:11px;font-weight:700;padding:4px 11px;border-radius:7px;background:var(--panel);border:1px solid var(--border);color:var(--t3);cursor:pointer;transition:.2s cubic-bezier(.16,1,.3,1);display:inline-flex;align-items:center;gap:5px;}
.asset-cat-pill:hover,.asset-cat-pill.active{background:var(--panel2);color:var(--text);border-color:var(--bord2);}
.asset-cat-pill-cnt{background:rgba(255,255,255,.1);border-radius:4px;padding:1px 5px;font-size: 11px;}
.asset-tag{font-family:var(--mono);font-size: 11px;font-weight:700;padding:2px 7px;border-radius:5px;background:rgba(59,130,246,.1);color:var(--blue);border:1px solid rgba(59,130,246,.22);letter-spacing:.3px;display:inline-block;margin-top:2px;}
.asset-warn-row td{background:rgba(245,158,11,.04);}
.asset-warn-badge{font-size: 11px;font-weight:700;padding:2px 8px;border-radius:5px;background:rgba(232,64,64,.1);color:var(--red);border:1px solid rgba(232,64,64,.22);}
.asset-quick-sel{background:var(--panel);border:1px solid var(--border);border-radius:7px;padding:5px 8px;font-size:11px;color:var(--text);font-family:var(--body);cursor:pointer;outline:none;width:100%;}
.asset-quick-sel:disabled{opacity:.5;cursor:not-allowed;}
@media(max-width:640px){.asset-cat-pills{gap:4px;}.asset-cat-pill{font-size: 11px;padding:3px 8px;}.asset-filter-bar{flex-direction:column;}}

/* ── PROFILE CHANGES ── */
.pc-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;animation:fadeIn .3s cubic-bezier(.16,1,.3,1);}
.pc-card:hover{border-color:var(--bord2);}

/* ── ONBOARDING ENHANCEMENTS ── */
.ob-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}

/* ── AUDIT LOG ENHANCEMENTS ── */
.audit-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:stretch;}
.badge-blue{background:rgba(59,130,246,.12);color:var(--blue);border:1px solid rgba(59,130,246,.25);}

/* ── MAIL QUEUE ENHANCEMENTS ── */
.mq-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.mq-stat{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 16px;flex:1;min-width:90px;display:flex;align-items:center;gap:10px;}
.mq-stat-val{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--blue);}
.mq-stat-lbl{font-size: 11px;font-weight:800;letter-spacing:1px;color:var(--t3);text-transform:uppercase;}
.mail-high-att-row td{background:rgba(245,158,11,.035);}
.mail-pinned-row td{ background:rgba(232,64,64,.06); border-top:1px dashed rgba(232,64,64,.30); }
.mail-pinned-tag{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:4px;
  background:rgba(232,64,64,.16); color:#ff7878;
  font-size:8px; margin-left:5px;
  border:1px solid rgba(232,64,64,.32);
  vertical-align:middle;
}
@media(max-width:640px){.mq-stats{gap:6px;}.mq-stat{padding:8px 12px;min-width:70px;}.mq-stat-val{font-size:16px;}}

/* ── IT ANNOUNCEMENTS ── */
.it-ann-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:12px;transition:border-color .25s;animation:cvIn .4s cubic-bezier(.16,1,.3,1) both;}
.it-ann-card:hover{border-color:var(--bord2);}
.it-ann-card.ann-urgent{border-left:4px solid var(--amber);}
.it-ann-card.ann-critical{border-left:4px solid var(--red);}
.it-ann-card.ann-normal{border-left:4px solid var(--blue);}
.it-ann-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px;}
.it-ann-body{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:10px;}
.it-ann-meta{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--t3);flex-wrap:wrap;}
.it-ann-priority-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:10px;font-size: 11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;}
.ann-pri-normal{background:var(--bdim);color:var(--blue);border:1px solid rgba(59,130,246,.25);}
.ann-pri-urgent{background:var(--adim);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.ann-pri-critical{background:var(--rdim);color:var(--red);border:1px solid rgba(255,72,72,.25);}

/* ── SECURITY SCORE ── */
#soc-score-val.score-high{color:var(--green);}
#soc-score-val.score-mid{color:var(--amber);}
#soc-score-val.score-low{color:var(--red);}

/* ── Touch targets + table scroll ── */
@media(max-width:640px){
  .btn,.btn-green,.btn-gold,.btn-red,.btn-outline{min-height:44px;}
  .rota-scroll,.table-scroll,.dtbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* ── Governance Availability widget (shared card design) ── */
.gov-av-grid{display:flex;flex-direction:column;gap:12px;}
.gav-card{display:flex;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--panel);animation:fadeIn .35s cubic-bezier(.16,1,.3,1) both;}
.gav-stripe{width:5px;flex-shrink:0;}
.gav-available .gav-stripe{background:var(--green);}
.gav-on-leave  .gav-stripe{background:var(--gold);}
.gav-unavailable .gav-stripe{background:var(--red);}
.gav-card-body{flex:1;min-width:0;}
.gav-card-top{display:flex;align-items:center;gap:14px;padding:16px 18px;}
.gav-av{width:52px;height:52px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:2px solid rgba(212,175,55,.3);background:rgba(212,175,55,.1);font-size:16px;font-weight:700;color:var(--gold);font-family:var(--mono);}
.gav-meta{flex:1;min-width:0;}
.gav-name{font-size:14px;font-weight:700;color:var(--text);}
.gav-role{font-size: 11px;font-weight:800;letter-spacing:1.2px;color:var(--t3);text-transform:uppercase;margin-top:2px;}
.gav-status-col{text-align:right;flex-shrink:0;}
.gav-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size: 11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;}
.gav-badge-available{background:rgba(67,177,75,.1);color:var(--green);border:1px solid rgba(67,177,75,.3);}
.gav-badge-on-leave{background:rgba(212,175,55,.1);color:var(--gold);border:1px solid rgba(212,175,55,.3);}
.gav-badge-unavailable{background:rgba(255,72,72,.1);color:var(--red);border:1px solid rgba(255,72,72,.3);}
.gav-period{font-size: 11px;color:var(--t4);margin-top:4px;display:flex;align-items:center;gap:3px;justify-content:flex-end;}
.gav-arrow{opacity:.5;}
.gav-note-disp{font-size: 11px;color:var(--t3);font-style:italic;margin-top:3px;text-align:right;}
.gav-empty{display:flex;align-items:center;gap:10px;padding:28px;color:var(--t4);font-size:13px;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:540px){.gav-card-top{flex-wrap:wrap;}.gav-status-col{text-align:left;width:100%;}.gav-period,.gav-note-disp{justify-content:flex-start;text-align:left;}}

/* ── Skeleton shimmer ── */
.skel{background:linear-gradient(90deg,var(--panel) 25%,var(--panel2) 50%,var(--panel) 75%);background-size:400% 100%;animation:shim 1.4s cubic-bezier(.16,1,.3,1) infinite;border-radius:8px;}
@keyframes shim{0%{background-position:100% 0}100%{background-position:-100% 0}}
/* ── Status pip ── */
.pip{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.pip-green{background:var(--green);box-shadow:0 0 6px rgba(76,214,87,.5);animation:blink 2s cubic-bezier(.16,1,.3,1) infinite;}
.pip-gold{background:var(--gold);box-shadow:0 0 6px rgba(212,175,55,.5);animation:blink 2s cubic-bezier(.16,1,.3,1) infinite;}
.pip-red{background:var(--red);box-shadow:0 0 6px rgba(255,72,72,.5);animation:blink 2s cubic-bezier(.16,1,.3,1) infinite;}
.pip-grey{background:rgba(255,255,255,.3);}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
/* ── Card/section entrance animations ── */
@keyframes wgIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cvIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes scIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

/* ── Touch target compliance (min 44px) ── */
.hdr-icon-btn{width:44px;height:44px;}
.back-btn{min-height:44px;padding:0 14px;}
@media(max-width:640px){.btn,.btn-green,.btn-gold,.btn-red,.btn-outline{min-height:44px;}.btn-sm{min-height:36px;}}
/* ── Missing 1100px breakpoint ── */
@media(max-width:1100px){
  .two-col{grid-template-columns:1fr 1fr;}
  .three-col{grid-template-columns:1fr 1fr;}
}

/* ══════════════════════════════════════════════════════════════════
   HELP DESK
   ══════════════════════════════════════════════════════════════════ */
.hd-stat{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px 18px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:100px;}
.hd-stat-val{font-family:var(--mono);font-size:22px;font-weight:700;}
.hd-stat-val.amber{color:var(--amber);}
.hd-stat-val.blue{color:var(--blue);}
.hd-stat-val.gold{color:var(--gold);}
.hd-stat-val.green{color:var(--green);}
.hd-stat-val.red{color:var(--red);}
.hd-stat-lbl{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;}

.hd-ticket-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:8px;cursor:pointer;transition:border-color .25s cubic-bezier(.16,1,.3,1),background .25s cubic-bezier(.16,1,.3,1);}
.hd-ticket-card:hover{border-color:var(--gold);background:rgba(240,200,50,.04);}
.hd-ticket-card.hd-drawer-open{border-color:var(--blue);border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0;}
.hd-ticket-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.hd-ref{font-family:var(--mono);font-size:12px;color:var(--t3);}
.hd-priority-badge,.hd-status-badge,.hd-sla-badge{font-size:11px;padding:2px 8px;border-radius:20px;font-family:var(--mono);font-weight:600;}
.hd-sla-badge{padding:0;border:none;background:transparent;font-weight:700;}
.hd-ticket-subject{font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px;word-break:break-word;line-height:1.3;}
.hd-ticket-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--t2);}

.hd-drawer{background:rgba(30,46,27,.95);border:1px solid var(--blue);border-top:none;border-bottom-left-radius:12px;border-bottom-right-radius:12px;padding:20px;margin-bottom:12px;}
.hd-drawer-section{margin-bottom:16px;}
.hd-drawer-label{font-family:var(--disp);font-size:11px;color:var(--t3);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;}
.hd-desc-text{font-size:14px;color:var(--t2);line-height:1.6;background:var(--panel);border-radius:8px;padding:10px 14px;}

.hd-thread{display:flex;flex-direction:column;gap:8px;}
.hd-msg{border-radius:10px;padding:10px 14px;}
.hd-msg-it{background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);}
.hd-msg-staff{background:var(--panel);border:1px solid var(--border);}
.hd-msg-internal{background:rgba(240,200,50,.08);border:1px solid rgba(240,200,50,.25);}
.hd-msg-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap;}
.hd-internal-badge{font-size: 11px;background:rgba(240,200,50,.2);color:var(--gold);padding:2px 6px;border-radius:4px;font-family:var(--mono);letter-spacing:.5px;}
.hd-msg-body{font-size:13px;color:var(--t2);line-height:1.5;}
.hd-reply-ta{width:100%;box-sizing:border-box;resize:vertical;}

/* ══════════════════════════════════════════════════════════════════
   LIVE CHAT
   ══════════════════════════════════════════════════════════════════ */
.lc-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin-bottom:8px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.lc-waiting{border-left:3px solid var(--gold);}
.lc-active{border-left:3px solid var(--green);}

.lc-chat-window{background:var(--lift);border:1px solid var(--blue);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;max-height:480px;}
.lc-chat-hdr{background:rgba(59,130,246,.12);border-bottom:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.lc-msgs{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px;}
.lc-input-row{border-top:1px solid var(--border);padding:10px 14px;display:flex;gap:8px;align-items:center;}
.lc-input{flex:1;margin:0 !important;}

.lc-bubble{max-width:78%;border-radius:10px;padding:8px 12px;}
.lc-bubble-it{align-self:flex-end;background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.3);}
.lc-bubble-staff{align-self:flex-start;background:var(--panel);border:1px solid var(--border);}
.lc-bubble-name{font-size: 11px;color:var(--t3);margin-bottom:3px;font-family:var(--mono);}
.lc-bubble-text{font-size:13px;color:var(--t2);line-height:1.5;word-break:break-word;}
.lc-bubble-time{font-size: 11px;color:var(--t3);margin-top:3px;text-align:right;}

@media(max-width:640px){
  .hd-stat{min-width:80px;padding:10px 12px;}
  .hd-stat-val{font-size:18px;}
  .lc-chat-window{max-height:360px;}
  .lc-bubble{max-width:90%;}
}

/* ── MAINTENANCE WINDOWS ── */
.maint-card{border-radius:12px;padding:16px 18px;margin-bottom:10px;border:1px solid var(--border);background:var(--panel);}
.maint-active{border-left:3px solid var(--green);background:rgba(76,214,87,.04);}
.maint-scheduled{border-left:3px solid var(--amber);}
.maint-completed{border-left:3px solid rgba(255,255,255,.15);opacity:.7;}
.maint-cancelled{border-left:3px solid var(--red);opacity:.6;}
.maint-overdue{border-left:3px solid var(--red);background:rgba(232,64,64,.04);}
.maint-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.maint-s-active{background:rgba(76,214,87,.1);color:var(--green);border:1px solid rgba(76,214,87,.25);}
.maint-s-sched{background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.maint-s-done{background:rgba(255,255,255,.07);color:var(--t3);border:1px solid var(--border);}
.maint-s-cancel{background:rgba(232,64,64,.08);color:var(--red);border:1px solid rgba(232,64,64,.2);}
.maint-s-overdue{background:rgba(232,64,64,.12);color:var(--red);border:1px solid rgba(232,64,64,.3);}

/* ── IT METRICS DASHBOARD ── */
.met-kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px;}
.met-kpi{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px;text-align:center;}
.met-kpi-val{font-family:var(--mono);font-size:28px;font-weight:700;margin-bottom:4px;}
.met-kpi-lbl{font-size: 11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;}
.met-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.met-panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px 18px;}
.met-sla-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.met-bar-track{flex:1;height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;}
.met-bar{height:100%;border-radius:4px;transition:width .4s cubic-bezier(.16,1,.3,1);}
.bar-green{background:var(--green);}
.bar-amber{background:var(--amber);}
.bar-red{background:var(--red);}
.met-sla-pct{font-family:var(--mono);font-size:13px;font-weight:700;min-width:38px;text-align:right;}
.met-sla-meta{font-size:11px;color:var(--t3);min-width:130px;}
.met-inc-cell{display:flex;align-items:center;gap:7px;padding:7px 10px;background:var(--panel2);border:1px solid var(--border);border-radius:8px;}
.met-inc-cnt{font-size:12px;font-weight:700;}
.met-inc-alert{border-color:rgba(232,64,64,.3);background:rgba(232,64,64,.05);}
.met-vol-chart{display:flex;gap:8px;align-items:flex-end;height:100px;}
.met-vol-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;}
.met-vol-bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end;}
.met-vol-bar{width:100%;background:rgba(240,200,50,.4);border-radius:4px 4px 0 0;min-height:2px;transition:height .4s cubic-bezier(.16,1,.3,1);}
.met-vol-cnt{font-size:11px;font-weight:700;color:var(--t2);}
.met-vol-lbl{font-size: 11px;color:var(--t3);}
.met-resolver-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.met-resolver-row:last-child{border-bottom:none;}
.met-resolver-rank{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--gold);min-width:18px;}
.met-resolver-name{flex:1;font-size:13px;font-weight:600;}
.met-resolver-cnt{font-size:11px;color:var(--green);font-weight:700;}
@media(max-width:1100px){.met-kpi-row{grid-template-columns:repeat(3,1fr);}.met-2col{grid-template-columns:1fr;}}
@media(max-width:640px){.met-kpi-row{grid-template-columns:1fr 1fr;}.met-sla-meta{display:none;}.met-sla-pct{min-width:28px;}}

/* ── INCIDENT MANAGEMENT ── */
.inc-filter-bar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:18px;}
.inc-card{border-radius:12px;padding:16px 18px;margin-bottom:10px;border:1px solid var(--border);background:var(--panel);}
.inc-p1-card{border-left:3px solid var(--red);}
.inc-p2-card{border-left:3px solid var(--amber);}
.inc-p3-card{border-left:3px solid var(--blue);}
.inc-p4-card{border-left:3px solid var(--border);}
.inc-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.inc-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px;}
.inc-desc{font-size:12px;color:var(--t3);line-height:1.6;margin-bottom:8px;}
.inc-systems{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px;}
.inc-sys-tag{font-size: 11px;font-weight:700;padding:2px 7px;border-radius:4px;background:rgba(59,130,246,.1);color:var(--blue);border:1px solid rgba(59,130,246,.2);}
.inc-sev-badge{font-size: 11px;font-weight:800;padding:3px 9px;border-radius:5px;letter-spacing:.3px;display:inline-flex;align-items:center;gap:5px;}
.inc-status-badge{font-size: 11px;font-weight:700;padding:3px 9px;border-radius:5px;}
.inc-p1{background:rgba(232,64,64,.12);color:var(--red);border:1px solid rgba(232,64,64,.3);}
.inc-p2{background:rgba(245,158,11,.12);color:var(--amber);border:1px solid rgba(245,158,11,.3);}
.inc-p3{background:rgba(59,130,246,.1);color:var(--blue);border:1px solid rgba(59,130,246,.25);}
.inc-p4{background:rgba(255,255,255,.07);color:var(--t3);border:1px solid var(--border);}
.inc-s-open{background:rgba(232,64,64,.1);color:var(--red);border:1px solid rgba(232,64,64,.2);}
.inc-s-inv{background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.2);}
.inc-s-mit{background:rgba(99,102,241,.1);color:#818cf8;border:1px solid rgba(99,102,241,.2);}
.inc-s-res{background:rgba(76,214,87,.1);color:var(--green);border:1px solid rgba(76,214,87,.2);}
.inc-timeline{border-left:2px solid var(--border);margin:8px 0;padding-left:12px;display:flex;flex-direction:column;gap:5px;}
.inc-tl-entry{font-size:11px;color:var(--t3);line-height:1.5;}
.inc-tl-author{font-weight:700;color:var(--t2);}
.inc-tl-sep{margin:0 4px;opacity:.4;}
.inc-tl-time{float:right;opacity:.6;}
.inc-resolution{font-size:12px;color:var(--green);background:rgba(76,214,87,.07);border:1px solid rgba(76,214,87,.18);border-radius:7px;padding:7px 11px;margin:8px 0;}
.inc-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);}
.inc-status-sel{background:var(--panel);border:1px solid var(--border);border-radius:7px;padding:5px 10px;font-size:11px;color:var(--text);font-family:var(--body);cursor:pointer;outline:none;}
.inc-status-sel:disabled{opacity:.5;cursor:not-allowed;}
@media(max-width:640px){.inc-actions{flex-direction:column;align-items:flex-start;}.inc-tl-time{float:none;display:block;margin-top:2px;}}

/* ── ACCESS CONTROL MATRIX ── */
.acm-summary{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.acm-summary-pill{font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;letter-spacing:.3px;}
.acm-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.acm-select{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:7px 12px;font-size:12px;color:var(--text);font-family:var(--body);cursor:pointer;outline:none;}
.acm-table th,.acm-table td{white-space:nowrap;}
.acm-table td:first-child{white-space:normal;}
.acm-level-badge{font-size: 11px;font-weight:800;padding:3px 9px;border-radius:5px;letter-spacing:.4px;display:inline-block;}
.acm-level-select{background:var(--panel2);border:1px solid var(--border);border-radius:7px;padding:5px 8px;font-size:11px;color:var(--text);font-family:var(--body);cursor:pointer;outline:none;min-width:140px;}
.acm-level-select:disabled{opacity:.5;cursor:not-allowed;}
.acm-status-badge{font-size: 11px;font-weight:700;padding:3px 9px;border-radius:5px;}
.acm-active{background:rgba(76,214,87,.1);color:var(--green);border:1px solid rgba(76,214,87,.2);}
.acm-susp{background:rgba(232,64,64,.1);color:var(--red);border:1px solid rgba(232,64,64,.2);}
/* Level colour coding */
.acm-lv1{background:rgba(255,255,255,.07);color:var(--t3);border:1px solid var(--border);}
.acm-lv2{background:rgba(99,102,241,.1);color:#818cf8;border:1px solid rgba(99,102,241,.25);}
.acm-lv3{background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.25);}
.acm-lv4{background:rgba(59,130,246,.1);color:var(--blue);border:1px solid rgba(59,130,246,.25);}
.acm-lv5{background:rgba(240,200,50,.1);color:var(--gold);border:1px solid rgba(240,200,50,.25);}
@media(max-width:640px){.acm-filters{flex-direction:column;align-items:flex-start;}.acm-level-select{min-width:120px;}}

/* ── SOC ENHANCEMENTS ── */
.soc-filter-tabs{display:flex;gap:3px;flex-wrap:wrap;}
.soc-filter-tab{padding:5px 11px;border-radius:7px;border:none;background:var(--panel);color:var(--t3);font-size:11px;font-weight:600;cursor:pointer;transition:.2s cubic-bezier(.16,1,.3,1);font-family:var(--body);display:inline-flex;align-items:center;gap:5px;}
.soc-filter-tab.active{background:var(--panel2);color:var(--text);}
.soc-ftab-cnt{background:rgba(255,255,255,.1);border-radius:4px;padding:1px 5px;font-size: 11px;}
.soc-act-btn{border:none;border-radius:7px;padding:5px 10px;font-size: 11px;font-weight:700;cursor:pointer;font-family:var(--body);letter-spacing:.3px;transition:.2s cubic-bezier(.16,1,.3,1);white-space:nowrap;}
.soc-act-red{background:rgba(232,64,64,.12);color:var(--red);border:1px solid rgba(232,64,64,.25);}
.soc-act-red:hover{background:rgba(232,64,64,.22);}
.soc-act-amber{background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.22);}
.soc-act-amber:hover{background:rgba(245,158,11,.2);}
.soc-act-blue{background:rgba(59,130,246,.1);color:var(--blue);border:1px solid rgba(59,130,246,.22);}
.soc-act-blue:hover{background:rgba(59,130,246,.2);}
.soc-score-breakdown{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.soc-score-pill{font-size: 11px;font-weight:700;padding:3px 9px;border-radius:5px;letter-spacing:.3px;}
.soc-pill-red{background:rgba(232,64,64,.1);color:var(--red);border:1px solid rgba(232,64,64,.2);}
.soc-pill-amber{background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.2);}
.soc-pill-blue{background:rgba(59,130,246,.1);color:var(--blue);border:1px solid rgba(59,130,246,.2);}
@media(max-width:640px){.soc-filter-tabs{gap:2px;}.soc-filter-tab{padding:4px 8px;font-size: 11px;}.soc-act-btn{padding:4px 8px;font-size: 11px;}}

/* ── BULK OPS ── */
.bo-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:20px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:5px;}
.bo-tab{padding:8px 16px;border-radius:8px;border:none;background:transparent;color:var(--t3);font-size:12px;font-weight:600;cursor:pointer;transition:.25s cubic-bezier(.16,1,.3,1);font-family:var(--body);display:inline-flex;align-items:center;gap:6px;}
.bo-tab.active{background:var(--panel2);color:var(--text);}
.bo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:12px 16px;background:var(--panel);border:1px solid var(--border);border-radius:12px;}
.bo-list{display:flex;flex-direction:column;gap:6px;}
.bo-row{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--panel2);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:.2s cubic-bezier(.16,1,.3,1);user-select:none;}
.bo-row:hover{background:rgba(255,255,255,.16);}
.bo-cb{width:16px;height:16px;accent-color:var(--gold);cursor:pointer;flex-shrink:0;}
.bo-type-badge{font-size: 11px;font-weight:800;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;}
.bo-type-badge.pw{background:rgba(96,165,250,.1);color:#60a5fa;border:1px solid rgba(96,165,250,.25);}
.bo-type-badge.pin{background:rgba(240,200,50,.1);color:var(--gold);border:1px solid rgba(240,200,50,.25);}
.bo-type-badge.pc{background:rgba(76,214,87,.1);color:var(--green);border:1px solid rgba(76,214,87,.25);}
.bo-field-lbl{font-size:11px;font-weight:800;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;}
@media(max-width:640px){.bo-toolbar{flex-direction:column;align-items:flex-start;}.bo-tabs{gap:3px;}.bo-tab{padding:6px 10px;font-size:11px;}}

/* ── Portal Presence section ── */
.pres-card{background:var(--lift);border:1px solid var(--border);border-radius:12px;padding:14px 16px;transition:border-color .25s ease;}
.pres-card--active{border-color:rgba(76,214,87,.35);background:rgba(76,214,87,.04);}
.pres-card--active:hover{border-color:rgba(76,214,87,.6);}
.pres-card:hover{border-color:var(--gold);}
.cmp-filter-btn.cmp-filter-active{background:rgba(240,200,50,.12);border-color:var(--gold);color:var(--gold);}
.sa-filter-btn.sa-filter-active{background:rgba(240,200,50,.12);border-color:var(--gold);color:var(--gold);}
#cmp-drawer.open{right:0;}

/* ───── iPhone-width mobile patches (≤414px) ───── */
@media (max-width:540px){
  .modal-box{max-width:calc(100vw - 24px)!important;padding:20px 14px!important;}
  #cmp-drawer{width:100vw!important;right:-100vw;}
}

/* ════════════════════════════════════════════════════════════
   IT registration UX — iOS / mobile fixes
   ════════════════════════════════════════════════════════════ */

/* Working-day + shift-type pills: native checkboxes are tiny on iOS, so
   highlight the whole label pill when its input is :checked. */
.reg-day-cb,
#reg-shift-morning,#reg-shift-afternoon,#reg-shift-evening,
#reg-shift-flexible,#reg-shift-permanent{
  accent-color:var(--gold)!important;
  width:18px;height:18px;
}
.s-dg9r9sv:has(input:checked),
.s-gk5eyp4:has(input:checked){
  background:var(--gdim)!important;
  border-color:var(--gold)!important;
  color:var(--gold)!important;
  font-weight:700!important;
}

/* "Mark as Registered" modal checkbox rows — make the tick + selected
   state unmistakable. iOS native checkboxes render too small at 16px. */
.gi-check-row input[type=checkbox]{
  width:22px!important;height:22px!important;
  accent-color:var(--green)!important;
}
.gi-check-row:has(input:checked){
  border-color:var(--green)!important;
  background:rgba(76,214,87,.10)!important;
}

/* HR float on mobile — dock to bottom edge, respect safe area, never wider
   than the viewport. Combined with auto-minimise on open (see it-board.js
   openHRFloat) this stops the panel from covering the registration form. */
@media (max-width:640px){
  #hr-info-float{
    left:8px!important;right:8px!important;
    bottom:env(safe-area-inset-bottom,0)!important;
    width:auto!important;
    max-width:calc(100vw - 16px)!important;
    max-height:50vh!important;
  }
  #hr-info-float-tab{
    right:12px!important;
    bottom:calc(env(safe-area-inset-bottom,0) + 12px)!important;
    z-index:9999!important;
  }
}

/* ══════════════ TODAY · IT DAILY OPERATIONS PANEL ══════════════ */
.it-today{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-left:3px solid var(--gold);
  border-radius:18px;
  padding:18px 20px;
  /* 2026-05-28 — horizontal margin matches the 28px gutter the rest of the
     section bodies use (.s-w2alqtx / .s-mbelgty). Without this the Today
     panel rendered flush to the section's left edge while the Dashboard
     title sat indented 28px → visible overflow on the left. */
  margin:0 28px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 32px rgba(0,0,0,.28);
}
@media (max-width:820px){
  .it-today{margin:0 14px 16px;}
}
.it-today-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.it-today-hd-l{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:.5px;color:var(--text);}
.it-today-hd-l i{color:var(--gold);font-size:14px;}
.it-today-hd-r{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--t3);background:rgba(255,255,255,.06);border:1px solid var(--border);padding:5px 11px;border-radius:20px;}
.it-today-body{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;}
.it-today-work{display:flex;flex-direction:column;gap:6px;}
.it-today-row{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:11px;
  padding:11px 13px;cursor:pointer;color:var(--t2);font-family:var(--body);font-size:13px;
  transition:background .2s,border-color .2s,transform .15s;min-height:46px;
}
.it-today-row:hover{background:rgba(240,200,50,.08);border-color:rgba(240,200,50,.32);transform:translateX(2px);}
.it-today-pip{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--t3);}
.it-today-pip.green{background:var(--green);box-shadow:0 0 8px rgba(76,214,87,.5);}
.it-today-pip.amber{background:var(--amber);box-shadow:0 0 8px rgba(245,158,11,.5);}
.it-today-pip.red{background:var(--red);box-shadow:0 0 8px rgba(255,72,72,.55);animation:itTodayPulse 1.7s ease-in-out infinite;}
.it-today-pip.grey{background:var(--t3);opacity:.5;}
@keyframes itTodayPulse{50%{opacity:.45;}}
.it-today-row-ic{color:var(--t3);font-size:13px;width:16px;text-align:center;flex-shrink:0;}
.it-today-row-lbl{flex:1;min-width:0;}
.it-today-row-n{font-family:var(--mono);font-weight:800;font-size:14px;color:var(--t2);min-width:20px;text-align:right;}
.it-today-row-n.is-amber{color:var(--amber);}
.it-today-row-n.is-red{color:var(--red);}
.it-today-row-go{color:var(--t3);font-size:10px;opacity:.6;flex-shrink:0;}
.it-today-checks{display:flex;flex-direction:column;gap:6px;}
.it-today-checks-hd{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3);margin-bottom:2px;}
.it-today-check{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:11px;
  padding:10px 12px;color:var(--t2);font-family:var(--body);font-size:12.5px;
  transition:background .2s,border-color .2s;min-height:44px;
}
button.it-today-check{ cursor:pointer; }
button.it-today-check:hover{background:rgba(255,255,255,.06);border-color:var(--bord2);}
div.it-today-check{ flex-wrap:wrap; }
.it-today-check.headline{border-color:rgba(240,200,50,.3);background:rgba(240,200,50,.05);}
.it-today-check-box{
  width:20px;height:20px;border-radius:6px;flex-shrink:0;
  border:1.5px solid var(--bord2);display:flex;align-items:center;justify-content:center;
  color:#0c1109;font-size:11px;transition:all .2s;
}
.it-today-check.done .it-today-check-box{background:var(--green);border-color:var(--green);}
.it-today-check.done{color:var(--t3);}
.it-today-check.done .it-today-check-lbl{text-decoration:line-through;text-decoration-color:rgba(244,249,240,.35);}
.it-today-check-ic{color:var(--t3);font-size:12px;width:15px;text-align:center;flex-shrink:0;}
.it-today-check.headline .it-today-check-ic{color:var(--gold);}
.it-today-check-lbl{flex:1;min-width:0;}
.it-today-foot{margin-top:6px;font-size:11.5px;line-height:1.4;}
.it-today-foot-ok{color:var(--green);display:inline-flex;align-items:center;gap:6px;}
.it-today-foot-pending{color:var(--amber);display:inline-flex;align-items:center;gap:6px;}
@media(max-width:820px){
  .it-today-body{grid-template-columns:1fr;gap:14px;}
}
@media(max-width:540px){
  .it-today{padding:14px 14px;}
  .it-today-hd-l{font-size:14px;}
}

/* ══════════════ APPLICANT PORTAL ACTIVITY — table fit + pager ══════════════ */
/* The 7-column table crammed on mobile made headers look misaligned with the
   data. Make the wrapper scroll horizontally with a sensible min-width so
   columns keep readable widths and line up with their headers. */
.s-qtrfdal{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.s-vgeucd2{min-width:760px;}
.s-vgeucd2 th,.s-vgeucd2 td{vertical-align:middle;text-align:left;white-space:nowrap;}
.aa-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;flex-wrap:wrap;}
.aa-pg-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--t2);border-radius:9px;padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--body);transition:background .2s,border-color .2s;min-height:38px;}
.aa-pg-btn:hover:not([disabled]){background:var(--gdim,rgba(240,200,50,.08));border-color:rgba(240,200,50,.32);color:var(--gold);}
.aa-pg-btn[disabled]{opacity:.4;cursor:not-allowed;}
.aa-pg-info{font-size:12px;font-weight:700;color:var(--t3);font-variant-numeric:tabular-nums;}

/* ── WS1 Phase 1 · per-user tagged tasks, stale state, activation control ── */
.it-today-assignee{color:var(--gold);font-weight:800;}
.it-today-stale-card{display:flex;align-items:flex-start;gap:11px;background:rgba(255,255,255,.03);border:1px dashed var(--border);border-radius:11px;padding:14px 15px;color:var(--t3);font-size:12.5px;line-height:1.5;}
.it-today-stale-card i{color:var(--t3);font-size:15px;margin-top:1px;flex-shrink:0;}
.it-today-stale-card strong{color:var(--t2);}
.it-dops-ctrl{margin-top:18px;padding:14px;border-radius:12px;background:rgba(240,200,50,.05);border:1px solid rgba(240,200,50,.22);}
.it-dops-ctrl-hd{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;}
.it-dops-ctrl-state{font-size:12px;color:var(--t3);margin-bottom:10px;}
.it-dops-ctrl-state.on{color:var(--green);}
.it-dops-ctrl-btn{display:inline-flex;align-items:center;gap:7px;width:100%;justify-content:center;padding:10px 14px;border-radius:9px;font-size:12px;font-weight:800;letter-spacing:.5px;cursor:pointer;border:1px solid;font-family:var(--body);transition:all .2s;min-height:42px;}
.it-dops-ctrl-btn.is-on{background:rgba(76,214,87,.12);border-color:rgba(76,214,87,.4);color:var(--green);}
.it-dops-ctrl-btn.is-on:hover{background:rgba(76,214,87,.2);}
.it-dops-ctrl-btn.is-off{background:rgba(255,72,72,.1);border-color:rgba(255,72,72,.35);color:var(--red);}
.it-dops-ctrl-btn.is-off:hover{background:rgba(255,72,72,.18);}

/* ── WS1 Phase 3 · shift countdown, submit, report summary ── */
.it-today-cd{margin-left:8px;font-weight:700;color:var(--amber);font-size:11px;white-space:nowrap;}
.it-today-cd.ended{color:var(--t3);}
.it-today-cd i{margin-right:4px;}
.it-today-submit{display:inline-flex;align-items:center;gap:8px;margin-top:10px;width:100%;justify-content:center;padding:11px 16px;border-radius:10px;background:var(--gold);color:#0c1109;border:none;font-family:var(--body);font-size:13px;font-weight:800;letter-spacing:.5px;cursor:pointer;transition:filter .2s,transform .15s;min-height:44px;}
.it-today-submit:hover{filter:brightness(1.08);transform:translateY(-1px);}
.it-today-submitted-tag{color:var(--green);font-weight:800;}
.it-today-locked-note{display:flex;align-items:center;gap:8px;color:var(--t3);font-size:12px;font-style:italic;padding:10px 2px;}
.it-today-report{font-size:12px;line-height:1.5;}
.it-today-rep-row{color:var(--green);font-weight:700;margin-bottom:4px;}
.it-today-rep-stats{color:var(--t2);font-family:var(--mono);font-size:11.5px;margin-bottom:6px;}
.it-today-rep-flag{display:flex;align-items:flex-start;gap:7px;border-radius:8px;padding:8px 10px;margin-top:5px;font-size:11.5px;line-height:1.45;}
.it-today-rep-flag.warn{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:#ffd9a0;}
.it-today-rep-flag.miss{background:rgba(255,72,72,.08);border:1px solid rgba(255,72,72,.28);color:#ff9aa6;}

/* ── WS3 · off-shift access banner ── */
.it-offshift-banner{display:flex;align-items:center;gap:9px;background:linear-gradient(90deg,rgba(255,72,72,.14),rgba(255,72,72,.04));border:1px solid rgba(255,72,72,.35);border-left:3px solid var(--red,#ff4848);color:#ffb3bd;border-radius:10px;padding:11px 16px;margin:0 0 14px;font-size:12.5px;font-weight:600;}
.it-offshift-banner i{color:var(--red,#ff4848);}
.it-offshift-banner strong{color:#fff;}
.it-offshift-cd{color:var(--gold,#f0c832);font-weight:800;font-variant-numeric:tabular-nums;}

/* ── WS1 Phase 1.5 — Daily Task Evidence Banner (top of each mapped section) ─ */
.it-task-banner{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-radius:14px;
  margin:0 0 18px;
  border:1px solid rgba(240,200,50,.3);
  background:rgba(240,200,50,.08);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:taskBannerIn .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes taskBannerIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.it-task-banner > i:first-child{
  font-size:22px; color:#f0c832; flex-shrink:0;
  width:42px; height:42px; border-radius:50%;
  background:rgba(240,200,50,.12); display:flex; align-items:center; justify-content:center;
}
.it-task-banner.verified{ border-color:rgba(76,214,87,.32); background:rgba(76,214,87,.06); }
.it-task-banner.verified > i:first-child{ color:#4cd657; background:rgba(76,214,87,.12); }
.it-task-banner.clear{ border-color:rgba(76,214,87,.30); background:rgba(76,214,87,.05); }
.it-task-banner.clear > i:first-child{ color:#4cd657; background:rgba(76,214,87,.12); }
.it-task-banner.pending > i:first-child{ color:#ffb74d; background:rgba(245,158,11,.14); }
.it-task-banner-count{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:18px; font-weight:800; color:#ffb74d;
  padding:1px 8px; border-radius:6px;
  background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.32);
  margin-right:2px;
}
.it-task-banner-text{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.it-task-banner-text strong{ font-size:14px; color:#f2f7ee; font-weight:700; }
.it-task-banner-sub{ font-size:12px; color:rgba(242,247,238,.72); line-height:1.5; }
.it-task-banner-sub em{ color:#f0c832; font-style:normal; font-weight:600; }
.it-task-banner-sub-meta{ font-size:11px; color:rgba(242,247,238,.55); }
.it-task-banner-btn{ flex-shrink:0; }
@media (max-width:640px){
  .it-task-banner{ flex-wrap:wrap; }
  .it-task-banner-btn{ width:100%; justify-content:center; }
}

/* ── Today panel — section-mapped task row deep-link style ── */
.it-today-check.pending-section{
  border:1px dashed rgba(240,200,50,.32);
  background:rgba(240,200,50,.04);
}
.it-today-check.pending-section:hover{ background:rgba(240,200,50,.10); }
.it-today-check.pending-section.has-pending{
  border-color:rgba(245,158,11,.42);
  background:rgba(245,158,11,.06);
}
.it-today-check.pending-section.is-clear{
  border-color:rgba(76,214,87,.30);
  background:rgba(76,214,87,.04);
}
.it-today-check.verified-note{
  border:1px solid rgba(76,214,87,.28);
  background:rgba(76,214,87,.04);
}
/* When another IT user completed the task — green left border + faded body */
.it-today-check.done-by-other{
  border:1px solid rgba(76,214,87,.24);
  background:rgba(76,214,87,.03);
  opacity:.88;
}
.it-today-check.done-by-other .it-today-check-lbl{ text-decoration:none; }
.it-today-check.done-by-other .it-today-check-box{ background:rgba(76,214,87,.18); color:#4cd657; border-color:rgba(76,214,87,.36); }
.it-today-check-sub{
  display:block; font-size:11px; font-weight:500;
  color:rgba(242,247,238,.62); margin-top:3px; line-height:1.45;
}
.it-today-check-sub strong{ color:#f0c832; font-weight:700; }

/* ── Today panel — pending count pill (live) ── */
.it-today-pending-pill{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.6px;
  padding:2px 8px; border-radius:5px; text-transform:uppercase;
  margin-right:4px;
}
.it-today-pending-pill.amber{ background:rgba(245,158,11,.16); color:#ffb74d; border:1px solid rgba(245,158,11,.34); }
.it-today-pending-pill.green{ background:rgba(76,214,87,.14); color:#4cd657; border:1px solid rgba(76,214,87,.32); }

/* ── Today panel — diagnostics inline pills (escalated/resolved/clean) ── */
.it-diag-pill{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:700;
  padding:2px 8px; border-radius:5px;
  margin-right:6px;
}
.it-diag-pill i{ font-size:9px; }
.it-diag-pill.amber{ background:rgba(245,158,11,.15); color:#ffb74d; border:1px solid rgba(245,158,11,.32); }
.it-diag-pill.green{ background:rgba(76,214,87,.14); color:#4cd657; border:1px solid rgba(76,214,87,.32); }
.it-diag-pill.red{   background:rgba(232,64,64,.14);  color:#ff7878; border:1px solid rgba(232,64,64,.32); }

/* ── Today panel — per-row action buttons ── */
.it-today-row-actions{
  display:inline-flex; gap:6px; flex-shrink:0;
  margin-left:8px;
}
.it-today-row-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:8px;
  font-size:12px; font-weight:700; cursor:pointer;
  font-family:'DM Sans', sans-serif;
  transition:.2s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
}
.it-today-row-btn.outline{
  background:transparent; border:1px solid rgba(255,255,255,.22);
  color:rgba(242,247,238,.82);
}
.it-today-row-btn.outline:hover{
  background:rgba(255,255,255,.06); border-color:#f0c832; color:#f0c832;
}
.it-today-row-btn.gold{
  background:rgba(240,200,50,.16); border:1px solid rgba(240,200,50,.38);
  color:#f0c832;
}
.it-today-row-btn.gold:hover{
  background:rgba(240,200,50,.28); border-color:#f0c832;
}
@media (max-width:640px){
  .it-today-row-actions{ width:100%; margin:6px 0 0; }
  .it-today-row-btn{ flex:1; justify-content:center; }
}

/* ── Pre-flight Submit modal ── */
.it-pf-modal{
  position:fixed; inset:0; z-index:99998;
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.it-pf-modal.show{ display:flex; animation:fadeIn .25s ease both; }
.it-pf-backdrop{
  position:absolute; inset:0;
  background:rgba(5,9,5,.86);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.it-pf-box{
  position:relative; z-index:1;
  width:100%; max-width:640px; max-height:88vh; overflow-y:auto;
  background:rgba(15,22,12,.98);
  border:1px solid rgba(240,200,50,.22);
  border-radius:18px;
  padding:24px 24px 18px;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  animation:mIn .35s cubic-bezier(.16,1,.3,1) both;
  font-family:'DM Sans', sans-serif;
}
.it-pf-head{
  display:flex; align-items:center; gap:14px; margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.10);
}
.it-pf-head > i{
  font-size:24px;
  width:44px; height:44px; border-radius:11px;
  background:rgba(240,200,50,.12); border:1px solid rgba(240,200,50,.26);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.it-pf-head > div{ flex:1; min-width:0; }
.it-pf-title{
  font-family:'Cinzel', serif; font-size:17px; font-weight:600;
  color:#f2f7ee; line-height:1.3;
}
.it-pf-sub{ margin-top:3px; }
.it-pf-close{
  background:transparent; border:none;
  color:rgba(242,247,238,.6); font-size:18px; cursor:pointer;
  width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.it-pf-close:hover{ background:rgba(255,255,255,.08); color:#f2f7ee; }
.it-pf-body{ margin-bottom:18px; }
.it-pf-clean{ text-align:center; padding:8px 4px; }
.it-pf-clean-ic{ font-size:42px; margin-bottom:14px; display:block; }
.it-pf-clean h3{
  font-family:'Cinzel', serif; font-size:18px; font-weight:600;
  color:#f2f7ee; margin-bottom:10px;
}
.it-pf-clean p{ font-size:13px; color:rgba(242,247,238,.72); line-height:1.65; margin-bottom:10px; }
.it-pf-issues-hd{
  display:flex; gap:14px; align-items:flex-start;
  margin-bottom:14px;
  padding:14px;
  background:rgba(232,64,64,.06);
  border:1px solid rgba(232,64,64,.24);
  border-radius:10px;
}
.it-pf-issues-hd > i{
  font-size:22px; color:#ff7878; flex-shrink:0;
  width:36px; height:36px; border-radius:8px;
  background:rgba(232,64,64,.14); border:1px solid rgba(232,64,64,.28);
  display:flex; align-items:center; justify-content:center;
}
.it-pf-issues-hd h3{
  font-family:'Cinzel', serif; font-size:15px; font-weight:600;
  color:#f2f7ee; margin-bottom:4px;
}
.it-pf-issues-hd p{ font-size:12px; color:rgba(242,247,238,.68); line-height:1.55; margin:0; }
.it-pf-issue-list{ list-style:none; padding:0; margin:0; }
.it-pf-issue{
  display:flex; gap:12px; align-items:flex-start;
  padding:11px 14px; border-radius:9px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  margin-bottom:6px;
}
.it-pf-issue.missed   { border-color:rgba(232,64,64,.30); background:rgba(232,64,64,.05); }
.it-pf-issue.neglected{ border-color:rgba(232,64,64,.42); background:rgba(232,64,64,.08); }
.it-pf-issue.unverified{ border-color:rgba(245,158,11,.34); background:rgba(245,158,11,.05); }
.it-pf-issue-main{ flex:1; min-width:0; }
.it-pf-task{ display:block; font-size:13px; font-weight:700; color:#f2f7ee; }
.it-pf-sub{ display:block; font-size:11.5px; color:rgba(242,247,238,.68); margin-top:3px; line-height:1.5; }
.it-pf-kind{
  font-size:9.5px; font-weight:800; letter-spacing:.7px;
  padding:3px 8px; border-radius:5px; flex-shrink:0;
}
.it-pf-kind.miss { background:rgba(232,64,64,.16); color:#ff7878; border:1px solid rgba(232,64,64,.34); }
.it-pf-kind.neg  { background:rgba(232,64,64,.22); color:#ff5973; border:1px solid rgba(232,64,64,.46); }
.it-pf-kind.warn { background:rgba(245,158,11,.16); color:#ffb74d; border:1px solid rgba(245,158,11,.34); }
.it-pf-foot{
  display:flex; justify-content:flex-end; gap:10px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:14px;
}
@media (max-width:540px){
  .it-pf-box{ padding:20px 18px 14px; }
  .it-pf-foot{ flex-direction:column-reverse; }
  .it-pf-foot .btn{ width:100%; justify-content:center; }
}

/* ── Daily task evidence note modal ── */
.it-tn-modal{
  position:fixed; inset:0; z-index:99998;
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.it-tn-modal.show{ display:flex; animation:fadeIn .25s ease both; }
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.it-tn-backdrop{
  position:absolute; inset:0;
  background:rgba(5,9,5,.86);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.it-tn-box{
  position:relative; z-index:1;
  width:100%; max-width:560px;
  background:rgba(15,22,12,.98);
  border:1px solid rgba(240,200,50,.22);
  border-radius:18px;
  padding:24px 24px 18px;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  animation:mIn .35s cubic-bezier(.16,1,.3,1) both;
  font-family:'DM Sans',sans-serif;
}
@keyframes mIn{from{opacity:0;transform:scale(.96) translateY(8px);}to{opacity:1;transform:none;}}
.it-tn-head{
  display:flex; align-items:center; gap:14px; margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.10);
}
.it-tn-head > i{
  font-size:24px;
  width:44px; height:44px; border-radius:11px;
  background:rgba(240,200,50,.12); border:1px solid rgba(240,200,50,.26);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.it-tn-head > div{ flex:1; min-width:0; }
.it-tn-task-title{
  font-family:'Cinzel',serif; font-size:17px; font-weight:600;
  color:#f2f7ee; line-height:1.3;
}
.it-tn-task-sub{ margin-top:3px; }
.it-tn-close{
  background:transparent; border:none;
  color:rgba(242,247,238,.6); font-size:18px; cursor:pointer;
  width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.it-tn-close:hover{ background:rgba(255,255,255,.08); color:#f2f7ee; }
.it-tn-body{ margin-bottom:18px; }
.it-tn-label{ display:block; font-size:13px; font-weight:700; color:#f2f7ee; margin-bottom:6px; }
.it-tn-help{ font-size:12px; color:rgba(242,247,238,.55); line-height:1.55; margin-bottom:10px; }
#it-tn-note{
  width:100%;
  padding:12px 14px;
  border-radius:11px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.18);
  color:#f2f7ee; font-size:14px; line-height:1.6;
  font-family:'DM Sans',sans-serif;
  resize:vertical; min-height:120px;
  transition:border-color .2s;
}
#it-tn-note:focus{ outline:none; border-color:#f0c832; }
#it-tn-note.is-error{
  border-color:#ff5973;
  box-shadow:0 0 0 3px rgba(232,64,64,.18);
  animation:tnShake .35s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes tnShake{
  10%, 90%   { transform:translateX(-1px); }
  20%, 80%   { transform:translateX( 2px); }
  30%, 50%, 70% { transform:translateX(-4px); }
  40%, 60%   { transform:translateX( 4px); }
}
.it-tn-err{
  display:flex; align-items:center; gap:8px;
  background:rgba(232,64,64,.10);
  border:1px solid rgba(232,64,64,.35);
  color:#ff5973;
  padding:9px 13px;
  border-radius:8px;
  font-size:12.5px; font-weight:600;
  margin-top:10px;
  animation:fadeIn .22s ease both;
}
.it-tn-err i{ font-size:14px; flex-shrink:0; }
.it-tn-meta-row{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:8px; gap:12px; flex-wrap:wrap;
}
.it-tn-char-count{ font-variant-numeric:tabular-nums; }
.it-tn-foot{
  display:flex; justify-content:flex-end; gap:10px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:14px;
}
@media (max-width:540px){
  .it-tn-box{ padding:20px 18px 14px; }
  .it-tn-foot{ flex-direction:column-reverse; }
  .it-tn-foot .btn{ width:100%; justify-content:center; }
}

/* ════════ MOBILE-FIT HARDENING (2026-06-06) ════════
   Stops IT section content (texts, tables, wide rows, long codes) overflowing
   the viewport — #it-main clips horizontal overflow, so anything wider than the
   screen was getting cut off. Mobile-only; desktop untouched. */
@media(max-width:900px){
  .s-w2alqtx{padding:0 14px 20px !important;}
}
@media(max-width:600px){
  #it-main{overflow-x:hidden;}
  .s-w2alqtx{padding:0 12px 18px !important;}
  /* long unbreakable strings (DATN, emails, tokens, IDs) wrap instead of overflowing */
  .it-section, .it-section .glass, .sec-desc, .renew-row-name{overflow-wrap:break-word;word-break:break-word;}
  /* any table (incl. ones not wrapped in .it-table-wrap) scrolls instead of clipping */
  .it-section table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
  .it-section img{max-width:100%;height:auto;}
  /* wide flex rows in section bodies wrap rather than overflow */
  .s-w2alqtx > div[style*="display:flex"]{flex-wrap:wrap;}
  /* section heading + description never exceed the screen */
  .sec-title{word-break:break-word;}
}

/* ── Premium pass (2026-06-08) — appended last; CSS-only, no logic touched ── */
.glass,.kpi-pill,.it-guide-card,.soc-card,.asset-stat,.pc-card,.mq-stat,.it-ann-card,.gav-card,.hd-stat,.hd-ticket-card,.lc-card,.maint-card,.met-kpi,.met-panel,.inc-card,.pres-card{
  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,.kpi-pill:hover,.it-guide-card:hover,.soc-card:hover,.asset-stat:hover,.pc-card:hover,.mq-stat:hover,.it-ann-card:hover,.hd-stat:hover,.hd-ticket-card:hover,.lc-card:hover,.maint-card:hover,.met-kpi:hover,.inc-card:hover,.pres-card:hover{transform:translateY(-3px);border-color:var(--gglow) !important;box-shadow:0 18px 44px -12px rgba(0,0,0,.5) !important;}
.it-table th{color:var(--gold) !important;}
.it-table tbody tr:hover{background:rgba(212,175,55,.06) !important;}
.guide-table th{color:var(--gold) !important;}
.guide-table tbody tr:hover{background:rgba(212,175,55,.06) !important;}


/* ════ Premium HR Candidate Data float (2026-06-10) ════
   Readability only — no structural/behavioural change. The float sat on the
   translucent --panel background, so its text washed out against whatever the
   form behind it showed. Solid dark glass + strong text wins over the hashed
   s-* classes via id+class specificity + !important. */
#hr-info-float{
  background: linear-gradient(165deg, rgba(22,32,17,.97), rgba(10,15,8,.985)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;
  border: 1px solid var(--gglow) !important;
  box-shadow: 0 22px 54px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(212,175,55,.12) inset, inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#hr-info-float .s-efeonkg{
  color: var(--gold) !important; font-weight: 700 !important;
  letter-spacing: 2px !important; text-shadow: 0 0 10px var(--gglow);
}
#hr-info-float .s-kjtid8u{
  color: var(--gold) !important; font-weight: 700 !important;
  opacity: .92; text-shadow: 0 0 8px var(--gglow);
}
#hr-info-float .s-vdxf8k8{
  color: #f5f9f2 !important; font-size: 12.5px !important; font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
#hr-info-float-tab{
  background: linear-gradient(165deg, rgba(22,32,17,.97), rgba(10,15,8,.985)) !important;
  border: 1px solid var(--gglow) !important;
  color: var(--gold) !important; font-weight: 700 !important;
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,.7) !important;
}


/* ════ Premium registration-success overlay (2026-06-10) ════
   The success card had NO background — its text sat on the near-transparent
   centre of the radial overlay, washing out against the form behind. Solid
   dark glass (same kit as the HR float) keeps the glass aesthetic readable. */
#reg-success-overlay{
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
}
#reg-success-overlay .s-j5luiww{
  background: linear-gradient(165deg, rgba(22,32,17,.96), rgba(8,13,7,.98)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgba(76,214,87,.35);
  border-radius: 18px;
  box-shadow: 0 26px 64px -16px rgba(0,0,0,.85), 0 0 0 1px rgba(76,214,87,.12) inset, inset 0 1px 0 rgba(255,255,255,.08);
  max-width: min(560px, calc(100vw - 40px));
}
#reg-success-overlay .s-twgz0rb{
  color: #f5f9f2 !important;
  text-shadow: 0 0 14px rgba(76,214,87,.45), 0 2px 4px rgba(0,0,0,.6);
}
#reg-success-overlay .s-suj2mv4{
  color: var(--t2) !important; font-size: 13.5px !important; font-weight: 600;
}
#reg-success-overlay .s-is2blsd{
  color: var(--t2) !important;
}


/* ════ Section-body left alignment (2026-06-10) ════
   Every section header/body is inset 28px (.sec-header / .s-w2alqtx), but a
   handful of bodies were appended flush to the section edge — their cards and
   labels started further left than every other section (VP report: Mail
   Engine cards, Idealist Postings, Limited/Suspended sub-header, renewal
   status, Document Handover). One rule aligns them all, mirroring the
   responsive values of .s-w2alqtx. */
#mail-engine-panel, #doc-handover-list, #it-renewal-status, .sec-body-pad{
  padding-left:28px; padding-right:28px;
}
#sec-idealist-feed > .glass{ margin-left:28px; margin-right:28px; }
@media(max-width:900px){
  #mail-engine-panel, #doc-handover-list, #it-renewal-status, .sec-body-pad{ padding-left:14px; padding-right:14px; }
  #sec-idealist-feed > .glass{ margin-left:14px; margin-right:14px; }
}
@media(max-width:600px){
  #mail-engine-panel, #doc-handover-list, #it-renewal-status, .sec-body-pad{ padding-left:12px; padding-right:12px; }
  #sec-idealist-feed > .glass{ margin-left:12px; margin-right:12px; }
}

/* Consent & Location table — columns align cleanly under their headers
   (VP 2026-06-12: values were wrapping/drifting across columns). */
#compliance-table{table-layout:auto;min-width:980px;}
#compliance-table th{white-space:nowrap;}
#compliance-table td{vertical-align:top;padding-top:12px;padding-bottom:12px;}
#compliance-table td:nth-child(2){white-space:nowrap;}
#compliance-table td:nth-child(3),#compliance-table td:nth-child(4),#compliance-table td:nth-child(5){min-width:110px;}
#compliance-table td:nth-child(6){min-width:130px;}
#compliance-table td:nth-child(7){min-width:120px;}
#compliance-table td:nth-child(8){white-space:nowrap;}
#compliance-table td:nth-child(9){white-space:nowrap;}

/* ── Internal Job Roles (department side) ──────────────────────────────
   The department half of the internal recruitment publisher. Hidden by the
   controller unless the Secretary General has granted this department.
   NOTE the overlays are hidden HERE and shown by adding .show. They must not
   carry an inline style="display:none", because an inline style outranks any
   stylesheet rule that is not !important and the class could never win. */
#it-role-picker,#it-role-form{position:fixed;inset:0;z-index:760;background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;}
#it-role-picker.show,#it-role-form.show{display:flex;}
#it-role-picker>.modal-card,#it-role-form>.modal-card{width:100%;max-height:calc(100vh - 40px);
  overflow-y:auto;overscroll-behavior:contain;padding:26px 24px;border-radius:16px;position:relative;
  border:1px solid rgba(255,255,255,.20);background:linear-gradient(165deg,var(--base),var(--deep));}
.itrp-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border);background:transparent;color:var(--t2);cursor:pointer;}
.itrp-x:hover{border-color:var(--gglow);color:var(--gold);}
.itrp-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);}
.itrp-t{font-family:var(--disp);margin:9px 0 0;font-size:21px;font-weight:700;line-height:1.26;padding-right:46px;}
.itrp-sub{margin:8px 0 14px;font-size:13px;line-height:1.6;color:var(--t2);}
.itrp-acts{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;justify-content:flex-end;}
.itrp-results{margin-top:14px;max-height:52vh;overflow-y:auto;overscroll-behavior:contain;}
.itrp-grp{margin-bottom:16px;}
.itrp-grp-h{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;}
.itrp-grp-n{color:var(--t3);letter-spacing:1px;}
.itrp-grp-note{font-size:11.5px;line-height:1.5;color:var(--t3);margin-bottom:9px;max-width:70ch;}
.itrp-r{display:flex;align-items:center;gap:11px;width:100%;min-height:44px;padding:10px 12px;
  margin-bottom:6px;border-radius:10px;border:1px solid var(--border);background:var(--deep);
  color:inherit;text-align:left;cursor:pointer;}
.itrp-r:hover{border-color:var(--gglow);background:var(--gdim);}
.itrp-r-main{flex:1 1 auto;min-width:0;}
.itrp-r-t{display:block;font-weight:600;word-break:break-word;}
.itrp-r-m{display:block;margin-top:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.8px;color:var(--t3);}
.itrp-tag{font-family:var(--mono);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;
  padding:3px 7px;border-radius:6px;border:1px solid var(--border);color:var(--t3);}
.itrp-tag.is-senior{border-color:var(--gglow);background:var(--gdim);color:var(--gold);}

.itrf-f{margin-bottom:16px;}
.itrf-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.itrf-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.itrf-l{display:block;font-family:var(--mono);font-size:10px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--t3);margin-bottom:6px;}
.itrf-h{margin:0 0 8px;font-size:12px;line-height:1.55;color:var(--t3);}
.itrf-rep{display:flex;gap:8px;margin-bottom:7px;}
.itrf-rep-x{flex:0 0 auto;width:40px;border-radius:9px;border:1px solid var(--border);
  background:transparent;color:var(--t3);cursor:pointer;}
.itrf-rep-x:hover{border-color:var(--red);color:var(--red);}
.itrf-add{margin-top:4px;}
.itrf-note{display:flex;gap:10px;padding:12px 14px;border-radius:11px;border:1px solid var(--border);
  background:var(--deep);font-size:12.5px;line-height:1.6;color:var(--t2);}
.itrf-note i{color:var(--gold);margin-top:2px;}

.itr-instruction{display:flex;gap:12px;padding:14px 16px;margin:0 0 16px;border-radius:12px;
  border:1px solid var(--gglow);background:var(--gdim);}
.itr-instruction i{color:var(--gold);margin-top:3px;}
.itr-instruction-main{min-width:0;}
.itr-instruction-k{font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--gold);}
.itr-instruction-v{margin:6px 0 0;font-size:13.5px;line-height:1.6;}
.itr-instruction-by{margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.8px;color:var(--t3);}

.itr-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px;}
.itr-stat{padding:14px;border-radius:12px;border:1px solid var(--border);background:var(--deep);}
.itr-stat-v{font-family:var(--disp);font-size:24px;font-weight:700;line-height:1;}
.itr-stat-k{margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--t3);}
.itr-row{display:flex;align-items:center;gap:12px;padding:13px 15px;margin-bottom:8px;
  border-radius:12px;border:1px solid var(--border);background:var(--deep);flex-wrap:wrap;}
.itr-row-main{flex:1 1 260px;min-width:0;}
.itr-row-t{font-weight:600;word-break:break-word;}
.itr-row-m{margin-top:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.7px;color:var(--t3);}
.itr-badge{font-family:var(--mono);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;
  padding:4px 8px;border-radius:6px;border:1px solid var(--border);color:var(--t3);}
.itr-badge.is-published{border-color:rgba(76,214,87,.4);background:rgba(76,214,87,.10);color:var(--green);}
.itr-badge.is-draft{border-color:var(--gglow);background:var(--gdim);color:var(--gold);}
.itr-apps{font-family:var(--mono);font-size:11px;color:var(--t3);min-width:22px;text-align:right;}
.itr-empty{display:flex;align-items:center;gap:12px;padding:26px;border-radius:12px;
  border:1px dashed var(--border);color:var(--t3);font-size:13px;line-height:1.6;}
.itr-empty i{font-size:20px;color:var(--gold);}

@media(max-width:900px){
  .itr-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .itrf-g2,.itrf-g3{grid-template-columns:1fr;}
}
@media(max-width:640px){
  #it-role-picker,#it-role-form{padding:0;align-items:flex-end;}
  #it-role-picker>.modal-card,#it-role-form>.modal-card{max-width:100% !important;
    max-height:92vh;border-radius:16px 16px 0 0;}
  .itrp-t{padding-right:0;}
  .itrp-x{position:static;margin:0 0 12px auto;}
  .itrp-acts{flex-direction:column-reverse;}
  .itrp-acts>*{width:100%;}
  .itr-row>.btn{flex:1 1 auto;}
}

/* Same phone treatment as My Desk: these are the same component on the
   department side, so they must behave identically under a thumb. */
@media(max-width:640px){
  #it-role-picker .btn, #it-role-form .btn,
  #it-role-picker button, #it-role-form button{ min-height:44px; }
  #it-role-form .gi{ min-height:44px; }
  #it-role-form textarea.gi{ min-height:96px; }
  .itrf-rep-x{ min-height:44px; }
  .itrp-results{ max-height:none; overflow:visible; }
  #it-role-picker > .modal-card, #it-role-form > .modal-card{
    padding-bottom:calc(22px + env(safe-area-inset-bottom)) !important; }
}