/* =====================================================================
   Ain Al Khaleej Hospital — CME Admin Panel
   Design language: "Clinical Credential" — the visual vocabulary of an
   official medical certificate rather than a generic SaaS dashboard.
   Ink navy + porcelain paper, one brand azure, one muted brass seal
   accent, deep emerald for success. Fraunces (display serif, carries
   the gravitas of a diploma) paired with Inter (body/UI) and JetBrains
   Mono (codes, IDs, timestamps — instrument-panel precision).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --ink:#0B1B2B;
  --panel:#122036;
  --panel-2:#182A44;
  --azure:#1C63D6;
  --violet:#0E6B4F;                 /* repurposed: secondary hue is emerald, not violet — see --gradient below */
  --brass:#A57F3F;                  /* signature seal / credential accent — use sparingly */
  --gradient: linear-gradient(135deg, var(--azure) 0%, #1447A0 100%);
  --success:#0E6B4F;
  --danger:#A23B3B;
  --warning:#A5772E;
  --mist:#F5F4EF;
  --paper:#FBFAF7;
  --slate:#8C93A0;
  --ink-soft:#3C4654;
  --border:rgba(255,255,255,.08);
  --border-light:#E6E2D8;
  --radius:9px;
  --radius-lg:14px;
  --shadow: 0 24px 60px rgba(11,27,43,.14);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--mist);
  color:#1B2432;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.01em}
code,.mono{font-family:'JetBrains Mono',monospace}
a{color:var(--azure);text-decoration:none}

/* ---------- App shell ---------- */
.app-shell{display:flex;min-height:100vh}

.sidebar{
  width:264px;
  flex-shrink:0;
  background:var(--ink);
  color:#fff;
  padding:26px 16px;
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.06);
}
.sidebar .brand{position:relative;display:flex;align-items:center;gap:11px;padding:4px 6px 22px;border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:18px}
.sidebar .brand img{height:30px}
.sidebar .brand .name{font-family:'Fraunces',serif;font-weight:600;font-size:14.5px;line-height:1.25;letter-spacing:-.01em}
.sidebar .brand .name small{display:block;font-family:'Inter';font-weight:600;font-size:9.5px;color:var(--brass);letter-spacing:.14em;text-transform:uppercase;margin-top:3px}

.nav-item{
  position:relative;
  display:flex;align-items:center;gap:12px;
  padding:11px 14px 11px 16px;border-radius:7px;color:#93A0B4;
  font-weight:600;font-size:13.5px;margin-bottom:2px;cursor:pointer;
  transition:.15s ease;
}
.nav-item svg{width:17px;height:17px;flex-shrink:0}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-item.active{background:rgba(28,99,214,.16);color:#fff}
.nav-item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--azure)}
.sidebar .spacer{flex:1}
.sidebar .logout{border-top:1px solid rgba(255,255,255,.09);padding-top:12px}

/* ---------- Topbar ---------- */
.main{flex:1;min-width:0}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;background:var(--paper);border-bottom:1px solid var(--border-light);
  position:sticky;top:0;z-index:20;
}
.topbar h1{font-size:20px;margin:0;font-weight:600}
.topbar .actions{display:flex;align-items:center;gap:20px}
.bell{position:relative;cursor:pointer;width:21px;height:21px;color:#2B3648}
.bell .dot{position:absolute;top:-2px;right:-2px;width:8px;height:8px;background:var(--danger);border-radius:50%;border:2px solid var(--paper)}
.user-chip{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13px}
.user-chip .avatar{width:33px;height:33px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Fraunces';font-weight:600;font-size:13px;border:1px solid var(--brass)}

.content{padding:28px 32px 60px}

/* ---------- Notification dropdown ---------- */
.notif-panel{position:absolute;right:32px;top:64px;width:340px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--border-light);display:none;overflow:hidden;z-index:50}
.notif-panel.open{display:block}
.notif-panel .head{padding:14px 18px;font-weight:700;border-bottom:1px solid var(--border-light);font-size:13.5px;font-family:'Inter'}
.notif-item{padding:12px 18px;border-bottom:1px solid #F1EFE8;font-size:13px;display:flex;gap:10px}
.notif-item:last-child{border-bottom:none}
.notif-item .ic{width:7px;height:7px;border-radius:50%;background:var(--azure);margin-top:5px;flex-shrink:0}
.notif-item .time{color:var(--slate);font-size:11px;margin-top:2px}
.notif-empty{padding:26px;text-align:center;color:var(--slate);font-size:13px}

/* ---------- Cards / KPIs ---------- */
.grid{display:grid;gap:18px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:2fr 1fr}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}}

.card{background:#fff;border-radius:var(--radius-lg);padding:22px;border:1px solid var(--border-light)}
.kpi{position:relative;overflow:hidden}
.kpi .icon{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:14px}
.kpi .icon svg{width:18px;height:18px}
.kpi .value{font-family:'Fraunces';font-size:28px;font-weight:600;line-height:1}
.kpi .label{color:var(--slate);font-size:12px;font-weight:600;margin-top:7px;text-transform:uppercase;letter-spacing:.05em}
.kpi.blue .icon{background:var(--ink)}
.kpi.green .icon{background:var(--success)}
.kpi.red .icon{background:var(--danger)}
.kpi.amber .icon{background:var(--warning)}

.card h3{margin:0 0 16px;font-size:16px;font-weight:600}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 18px;border-radius:var(--radius);font-weight:700;font-size:13px;
  border:none;cursor:pointer;transition:.15s;text-decoration:none;
  letter-spacing:.01em;
}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#152943}
.btn-outline{background:#fff;border:1.5px solid var(--border-light);color:#1B2432}
.btn-outline:hover{border-color:var(--azure);color:var(--azure)}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{filter:brightness(1.1)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(1.1)}
.btn-sm{padding:7px 12px;font-size:12px;border-radius:7px}
.btn-icon{width:34px;height:34px;padding:0;border-radius:7px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{text-align:left;color:var(--slate);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:12px 14px;border-bottom:2px solid var(--border-light)}
tbody td{padding:13px 14px;border-bottom:1px solid #F1EFE8;vertical-align:middle}
tbody tr{transition:.15s}
tbody tr:hover{background:#FBFAF6}
tbody tr.row-approved{background:linear-gradient(90deg,rgba(14,107,79,.07),transparent)}
tbody tr.row-rejected{background:linear-gradient(90deg,rgba(162,59,59,.07),transparent)}
tbody tr.row-confirmed{background:linear-gradient(90deg,rgba(14,107,79,.13),transparent);box-shadow:inset 3px 0 0 var(--success)}
tbody tr.row-declined{background:linear-gradient(90deg,rgba(162,59,59,.13),transparent);box-shadow:inset 3px 0 0 var(--danger)}

.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.02em}
.badge-pending{background:#F3E9D8;color:#8A5F1E}
.badge-approved{background:#DCEBE3;color:#0E6B4F}
.badge-rejected{background:#F0DEDE;color:#8A2E2E}
.badge-confirmed{background:#0E6B4F;color:#fff}
.badge-declined{background:#A23B3B;color:#fff}
.badge-notsent{background:#EEECE4;color:#6B7280}
.badge-neutral{background:#EEECE4;color:#4A5468}
.badge-active{background:#DCE6F7;color:#1447A0}
.badge-closed{background:#EEECE4;color:#6B7280}

/* ---------- Forms ---------- */
label{font-size:11.5px;font-weight:700;color:#586376;display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=date],input[type=datetime-local],input[type=time],input[type=tel],input[type=number],input[type=file],select,textarea{
  width:100%;padding:11px 14px;border:1.5px solid var(--border-light);border-radius:var(--radius);font-size:14px;font-family:'Inter';
  background:#fff;color:#1B2432;transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azure);box-shadow:0 0 0 4px rgba(28,99,214,.1)}
.field{margin-bottom:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}

/* ---------- Modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(11,27,43,.5);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-backdrop.open{display:flex}
.modal{background:#fff;border-radius:var(--radius-lg);max-width:560px;width:100%;max-height:88vh;overflow:auto;box-shadow:var(--shadow)}
.modal .modal-head{padding:20px 24px;border-bottom:1px solid var(--border-light);display:flex;justify-content:space-between;align-items:center}
.modal .modal-head h3{margin:0;font-size:17px;font-weight:600}
.modal .modal-body{padding:24px}
.modal .modal-foot{padding:16px 24px;border-top:1px solid var(--border-light);display:flex;justify-content:flex-end;gap:10px}
.modal-close{cursor:pointer;color:var(--slate);font-size:20px;background:none;border:none}

/* ---------- Auth pages (login / forgot / reset) — "credential" motif ---------- */
.auth-wrap{min-height:100vh;display:flex}
.auth-side{
  flex:1.05;position:relative;overflow:hidden;
  background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:64px;color:#fff;
}
.auth-side::before{
  /* engraved concentric seal, echoing a credential/certificate stamp */
  content:"";position:absolute;right:-140px;top:50%;transform:translateY(-50%);
  width:520px;height:520px;border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at center, transparent 0 178px, rgba(255,255,255,.055) 179px 181px, transparent 182px 214px, rgba(165,127,63,.16) 215px 217px, transparent 218px);
  pointer-events:none;
}
.auth-side::after{
  content:"";position:absolute;left:-120px;bottom:-160px;width:340px;height:340px;border-radius:50%;
  border:1px solid rgba(255,255,255,.06);pointer-events:none;
}
.auth-eyebrow{position:relative;z-index:2;display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:22px}
.auth-eyebrow .rule{width:28px;height:1px;background:var(--brass)}
.auth-side .tag{position:relative;z-index:2;font-family:'Fraunces',serif;font-size:34px;font-weight:600;line-height:1.22;max-width:440px;letter-spacing:-.01em}
.auth-side .sub{position:relative;z-index:2;color:#8C93A0;margin-top:14px;max-width:380px;font-size:14px;line-height:1.6}
.auth-side .credential-foot{position:relative;z-index:2;margin-top:48px;display:flex;gap:28px;font-family:'JetBrains Mono';font-size:10.5px;color:#5B6B7D;letter-spacing:.06em}
.auth-side .credential-foot b{color:#B9C2D0;font-weight:600}

/* --- Login page only: the "living credential" stage --- */
.login-stage{justify-content:space-between !important;overflow:hidden}
.login-stage::before,.login-stage::after{display:none}
.login-stage .stage-noise{position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.login-stage .ghost-mark{position:absolute;right:-9%;bottom:-14%;width:62%;max-width:640px;opacity:.05;pointer-events:none;z-index:1;transform:rotate(-4deg)}
.login-stage .stage-word{position:relative;z-index:3;font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#9AA6B8;display:flex;align-items:center;gap:12px}
.login-stage .stage-word .dot{width:5px;height:5px;border-radius:50%;background:var(--brass);box-shadow:0 0 8px var(--brass)}
.login-stage .stage-mid{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:center;gap:22px;min-height:0}
.login-stage .stage-title{font-family:'Fraunces',serif;font-weight:600;font-size:38px;line-height:1.12;letter-spacing:-.015em;color:#fff;max-width:480px}
.login-stage .stage-title em{font-style:italic;color:var(--brass)}

.pulse-wrap{position:relative;width:100%;height:120px;margin-top:6px}
.pulse-wrap svg{width:100%;height:100%;overflow:visible}
.pulse-line{fill:none;stroke:var(--azure);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:pulse-draw 6.5s cubic-bezier(.65,0,.35,1) infinite;filter:drop-shadow(0 0 6px rgba(28,99,214,.55))}
.pulse-line-ghost{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1.5}
.pulse-dot{fill:var(--brass);filter:drop-shadow(0 0 7px var(--brass));animation:pulse-dot-move 6.5s cubic-bezier(.65,0,.35,1) infinite}
@keyframes pulse-draw{
  0%{stroke-dashoffset:1400}
  55%{stroke-dashoffset:0}
  100%{stroke-dashoffset:0}
}
@keyframes pulse-dot-move{
  0%{offset-distance:0%;opacity:0}
  4%{opacity:1}
  55%{offset-distance:100%;opacity:1}
  62%{opacity:0}
  100%{opacity:0;offset-distance:100%}
}
.login-stage .stage-foot{position:relative;z-index:3;display:flex;align-items:baseline;justify-content:space-between;font-family:'JetBrains Mono';font-size:11px;color:#5B6B7D;letter-spacing:.04em;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.login-stage .stage-foot .clock{color:#B9C2D0;font-weight:500}
.login-stage .stage-foot .clock .sec{color:var(--brass)}

@media (max-width:900px){.login-stage{display:none !important}.auth-side{display:none}.auth-form-side{flex:1}}

.auth-form-side{flex:1;display:flex;align-items:center;justify-content:center;background:var(--paper);padding:40px}
.auth-box{width:100%;max-width:380px}
.auth-box .logo{display:flex;align-items:center;gap:10px;margin-bottom:30px}
.auth-box .logo img{height:34px}
.auth-box h2{font-size:25px;margin:0 0 6px;font-weight:600}
.auth-box p.hint{color:var(--slate);font-size:13.5px;margin-bottom:30px}
.alert{padding:12px 16px;border-radius:var(--radius);font-size:13.5px;font-weight:600;margin-bottom:18px}
.alert-error{background:#F0DEDE;color:#8A2E2E}
.alert-success{background:#DCEBE3;color:#0E6B4F}
.alert-info{background:#DCE6F7;color:#1447A0}

/* ---------- Public pages ---------- */
.public-wrap{min-height:100vh;background:linear-gradient(180deg,#EEF1F6 0%, var(--mist) 40%);display:flex;justify-content:center;padding:40px 16px}
.public-card{background:#fff;max-width:640px;width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--border-light)}
.public-hero{background:linear-gradient(160deg,#fff, #EEF1F6 70%);padding:36px 36px 26px;text-align:center}
.public-hero img.logo{height:44px;margin-bottom:8px}
.public-hero h1{font-size:30px;margin:14px 0 4px;color:var(--ink)}
.public-hero .event-name{font-weight:700;color:#1B2432;font-size:16px;margin-top:4px}
.public-body{padding:8px 36px 36px}
.section-title{font-size:12.5px;font-weight:800;color:var(--azure);text-transform:uppercase;letter-spacing:.06em;margin:22px 0 12px;display:flex;align-items:center;gap:8px}
.public-footer{background:var(--ink);color:var(--slate);text-align:center;padding:20px;font-size:12px}

/* ---------- misc ---------- */
.pill-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.pill{padding:8px 16px;border-radius:99px;background:#fff;border:1.5px solid var(--border-light);font-size:13px;font-weight:700;cursor:pointer;color:#3A4472}
.pill.active{background:var(--ink);color:#fff;border-color:transparent}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.search-box{position:relative}
.search-box input{padding-left:38px;min-width:240px}
.search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--slate)}
.empty-state{text-align:center;padding:60px 20px;color:var(--slate)}
.empty-state svg{width:56px;height:56px;margin-bottom:14px;opacity:.5}
.avatar-sm{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;font-family:'Fraunces'}
.qr-preview{width:120px;height:120px;border-radius:var(--radius);border:1px solid var(--border-light);object-fit:contain;background:#fff}

/* ---------- Split hero layout with glowing wave divider (public pages) ---------- */
.split{display:flex;min-height:100vh}
.split-left{flex:1;position:relative;overflow:visible;background:linear-gradient(180deg,rgba(11,27,43,.1),rgba(11,27,43,.75)),url('../images/hospital-building.png') center/cover;display:flex;flex-direction:column;justify-content:flex-end;padding:50px;color:#fff}
.split-right{flex:1.05;background:radial-gradient(120% 160% at 100% 0%, #16283f 0%, var(--ink) 55%),var(--ink);padding:50px;display:flex;align-items:center;position:relative;overflow:hidden}
.wave-overlay{position:absolute;top:0;right:-110px;width:220px;height:100%;z-index:5;pointer-events:none}
@media (max-width:900px){.split{flex-direction:column}.split-left{min-height:240px}.wave-overlay{display:none}}

.toggle{position:relative;display:inline-block;width:40px;height:22px}
.toggle input{opacity:0;width:0;height:0}
.toggle .slider{position:absolute;cursor:pointer;inset:0;background:#DFDBCC;border-radius:99px;transition:.2s}
.toggle .slider:before{content:"";position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
.toggle input:checked + .slider{background:var(--success)}
.toggle input:checked + .slider:before{transform:translateX(18px)}


/* =====================================================================
   AKH CME 2026 — exact blue hospital visual system overrides
   ===================================================================== */
:root{
  --ink:#051D38;
  --deep:#031B36;
  --azure:#075BFF;
  --azure2:#0048D9;
  --gold:#F2B852;
  --paper:#F8FBFF;
  --mist:#F2F7FF;
  --border-light:#E4ECFA;
  --shadow:0 24px 70px rgba(6,38,91,.12);
}
body{background:#F3F8FF;color:#071C3A}

/* LOGIN — matching split image */
.auth-wrap{min-height:100vh;background:#fff;display:grid;grid-template-columns:58.8% 41.2%;overflow:hidden}
.auth-side.login-stage{display:flex!important;min-height:100vh;background:#041F43 url('../images/hospital-building.png') center/cover no-repeat;padding:54px 58px 54px 58px;position:relative;border-radius:0 0 0 0;justify-content:space-between!important}
.auth-side.login-stage:before{content:"";display:block!important;position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,19,48,.96) 0%,rgba(3,38,97,.78) 42%,rgba(2,23,56,.35) 100%);z-index:0}
.auth-side.login-stage:after{content:"";display:block!important;position:absolute;left:-16%;top:18%;width:82%;height:72%;border-radius:0 0 100% 0;background:linear-gradient(145deg,rgba(0,64,168,.88),rgba(1,25,69,.96) 65%);box-shadow:inset -1px -1px 0 rgba(255,255,255,.12);z-index:1}
.login-stage .stage-noise{display:none}
.login-stage .ghost-mark{display:none}
.login-stage .stage-word{font-family:'JetBrains Mono',monospace;color:#EAF2FF;letter-spacing:.18em;font-size:11px;z-index:4;text-shadow:0 2px 8px rgba(0,0,0,.22)}
.login-stage .stage-word .dot{background:var(--gold);width:6px;height:6px;box-shadow:0 0 14px rgba(242,184,82,.7)}
.login-stage .stage-mid{z-index:4;justify-content:center;gap:30px;margin-top:30px}
.login-stage .stage-title{font-size:44px;line-height:1.12;max-width:640px;color:#fff;text-shadow:0 12px 26px rgba(0,0,0,.22)}
.login-stage .stage-title em{color:var(--gold);font-weight:700}
.pulse-wrap{height:120px;width:72%;min-width:560px;margin-top:8px}
.pulse-line{stroke:#0072FF;stroke-width:2.5;filter:drop-shadow(0 0 10px rgba(0,114,255,.75))}
.pulse-line-ghost{stroke:rgba(0,112,255,.28);stroke-width:2}
.pulse-dot{fill:var(--gold)}
.login-stage .stage-foot{display:none}
.auth-form-side{background:#fff;position:relative;padding:40px 76px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.auth-form-side:before,.auth-form-side:after{content:"";position:absolute;inset:auto -12% -20% -20%;height:42%;opacity:.7;background:repeating-radial-gradient(ellipse at 70% 120%, transparent 0 22px, rgba(7,91,255,.09) 23px 24px);pointer-events:none}
.auth-form-side:after{inset:-20% -24% auto auto;height:46%;width:70%;background:repeating-radial-gradient(ellipse at 100% 0%, transparent 0 20px, rgba(7,91,255,.08) 21px 22px)}
.auth-box{max-width:450px;position:relative;z-index:2}
.auth-box .logo{margin-bottom:34px;justify-content:flex-start}
.auth-box .logo img{height:45px;max-width:280px;object-fit:contain}
.auth-box h2{font-family:'Fraunces',serif;font-size:34px;font-weight:700;color:#071C3A;margin:0 0 9px}
.auth-box p.hint{font-size:15px;color:#6C7C99;margin:0 0 30px}
.auth-box label{color:#3F5A87;font-weight:800;font-size:12px;margin-bottom:9px}
.auth-box input[type=text],.auth-box input[type=password],.auth-box input[type=email]{height:56px;border-radius:8px;border:1.5px solid #CED9EA;background:#fff;font-size:15px;color:#09244B;padding-left:54px;box-shadow:0 10px 24px rgba(3,31,72,.04)}
.auth-box input:focus{border-color:#075BFF;box-shadow:0 0 0 3px rgba(7,91,255,.10)}
.auth-field{position:relative}.auth-field .auth-ic{position:absolute;left:18px;top:39px;width:22px;height:22px;color:#6D82AC}.auth-field .auth-eye{position:absolute;right:16px;top:39px;width:22px;height:22px;color:#6D82AC}
.auth-box .btn-primary{height:56px;border-radius:8px;background:linear-gradient(90deg,#075BFF,#0041D4);font-size:15px;box-shadow:0 18px 35px rgba(0,75,220,.25)}
.auth-box .btn-primary:after{content:'→';font-size:24px;font-weight:400;margin-left:auto;margin-right:10px}.auth-box .btn-primary{padding-left:0;padding-right:0}
.auth-forgot{display:flex;align-items:center;gap:18px;justify-content:center;margin-top:26px;font-size:14px}.auth-forgot:before,.auth-forgot:after{content:"";height:1px;background:#D8E1EF;flex:1}.auth-forgot a{font-weight:700;color:#075BFF}
@media(max-width:960px){.auth-wrap{grid-template-columns:1fr}.auth-side.login-stage{display:none!important}.auth-form-side{min-height:100vh;padding:32px 24px}.auth-box{max-width:420px}}

/* ADMIN SHELL — matching screenshot */
.app-shell{background:#F4F9FF;position:relative}.app-shell:after{content:"";position:fixed;right:-10%;bottom:-18%;width:70%;height:52%;opacity:.55;background:repeating-radial-gradient(ellipse at 100% 100%,transparent 0 23px,rgba(7,91,255,.09) 24px 25px);pointer-events:none;z-index:0}.main,.sidebar{position:relative;z-index:1}
.sidebar{width:282px;background:linear-gradient(180deg,#05203D 0%,#03182E 64%,#032E61 100%);padding:30px 22px;height:100vh;border-right:none;box-shadow:16px 0 44px rgba(3,31,72,.12);overflow:hidden}
.sidebar:before{content:"";position:absolute;right:-58px;top:-75px;width:220px;height:220px;border-radius:50%;background:#fff;z-index:0}.sidebar:after{content:"";position:absolute;left:-28px;top:164px;width:305px;height:60px;border-top:5px solid rgba(242,184,82,.95);border-radius:55% 0 0 0;transform:rotate(-3deg);z-index:0}.sidebar .brand,.sidebar nav,.sidebar .spacer,.sidebar .logout,.sidebar .side-photo,.sidebar .side-clock{position:relative;z-index:2}.sidebar .brand{display:block;padding:0 6px 28px;border:0;margin:0 0 40px}.sidebar .brand img{height:auto;width:200px;max-width:100%;display:block}.sidebar .brand .name{display:none}.nav-item{height:48px;border-radius:10px;color:#EEF5FF;font-size:14px;font-weight:700;margin:8px 0;padding:0 18px}.nav-item svg{width:20px;height:20px}.nav-item:hover{background:rgba(255,255,255,.08)}.nav-item.active{background:linear-gradient(90deg,rgba(7,91,255,.88),rgba(7,91,255,.18));box-shadow:0 14px 30px rgba(0,68,185,.18)}.nav-item.active:before{display:none}.sidebar .logout{border-top:0;padding-top:0;margin-top:18px}.side-photo{height:210px;border-radius:140px 140px 0 0;margin:36px -4px 14px;overflow:hidden;background:url('../images/akh-dark.png') center/cover no-repeat;box-shadow:0 18px 48px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.16)}.side-clock{font-size:12px;color:#B7C8E2;line-height:1.6;padding:4px 6px 0}
.main{background:linear-gradient(180deg,#F8FBFF 0%,#F2F8FF 100%);min-height:100vh}.topbar{position:relative;top:auto;background:transparent;border:0;padding:38px 38px 28px}.topbar:before{content:"";position:absolute;top:10px;left:40%;width:360px;height:96px;background:url('../images/akh.png') center/contain no-repeat;opacity:.09;filter:grayscale(1);pointer-events:none}.topbar h1{font-family:'Fraunces',serif;font-size:30px;color:#071C3A;font-weight:800}.topbar h1:after{content:'Welcome back, System Administrator';display:block;font-family:'Inter';font-weight:500;font-size:15px;color:#6C7C99;margin-top:9px}.topbar .actions{gap:22px}.bell{width:28px;height:28px;color:#29476F}.bell .dot{background:#075BFF;width:17px;height:17px;display:flex!important;right:-7px;top:-8px;border:2px solid #fff}.bell .dot:after{content:'3';color:#fff;font-size:10px;position:absolute;inset:0;display:grid;place-items:center}.user-chip{font-size:13px;color:#071C3A}.user-chip .avatar{width:44px;height:44px;background:#071C3A;border:0;font-family:'Inter';font-weight:800}.content{padding:0 38px 60px}.card{background:rgba(255,255,255,.92);border:1px solid #EAF0FA;border-radius:16px;box-shadow:0 16px 42px rgba(18,60,120,.08);padding:24px}.grid{gap:26px}.grid-4{gap:26px}.kpi{height:130px;border-radius:16px;display:grid;grid-template-columns:70px 1fr 86px;align-items:center;padding:22px}.kpi .icon{width:56px;height:56px;border-radius:50%;margin:0;color:#075BFF;background:#EEF5FF!important}.kpi.amber .icon{background:#FFF4E0!important;color:#C78315}.kpi.green .icon{background:#E5F7F1!important;color:#00976F}.kpi.red .icon{background:#FFE9EA!important;color:#E53535}.kpi .value{font-family:'Inter';font-size:30px;font-weight:800;color:#071C3A}.kpi .label{font-size:12px;color:#7182A2;margin:0 0 8px}.kpi small{font-size:12px;font-weight:800}.spark{height:44px;align-self:end}.spark svg{width:100%;height:100%}.spark path{fill:none;stroke:#075BFF;stroke-width:3}.spark rect{fill:#075BFF;opacity:.55}.kpi.amber .spark path,.kpi.amber .spark rect{stroke:#D8992C;fill:#D8992C}.kpi.green .spark path,.kpi.green .spark rect{stroke:#33B98F;fill:#33B98F}.kpi.red .spark path,.kpi.red .spark rect{stroke:#E84A4A;fill:#E84A4A}.card h3{font-family:'Inter';font-weight:800;color:#071C3A;font-size:16px}.table-wrap table{font-size:13px}thead th{color:#7182A2;border-bottom:0;padding:14px 16px}tbody td{border-bottom:1px solid #EEF2F8;padding:17px 16px}tbody tr:hover{background:#F9FBFF}.badge{border-radius:999px;padding:6px 12px;font-size:11px}.badge-pending{background:#FFF0D7;color:#BE7800}.badge-approved{background:#DDF5ED;color:#00976F}.badge-rejected{background:#FFE3E6;color:#D52C33}.badge-notsent,.badge-neutral{background:#EFF2F7;color:#5E6B82}.badge-active{background:#E7F0FF;color:#075BFF}.dashboard-layout{display:grid;grid-template-columns:minmax(0,2.05fr) minmax(330px,.95fr);gap:26px}.timeline-event{position:relative;padding:0 0 22px 31px;border-bottom:1px solid #EEF2F8}.timeline-event:before{content:"";position:absolute;left:8px;top:8px;width:10px;height:10px;border-radius:50%;background:#075BFF;box-shadow:0 0 0 4px #E4EFFF}.timeline-event:after{content:"";position:absolute;left:12px;top:18px;bottom:-1px;width:1px;background:#BFD5FF}.timeline-event:last-child:after{display:none}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.quick-card{background:#fff;border:1px solid #EAF0FA;border-radius:12px;min-height:110px;text-align:center;padding:16px 10px;font-weight:800;font-size:12px;color:#071C3A;box-shadow:0 12px 25px rgba(18,60,120,.06)}.quick-card .qic{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;margin:0 auto 12px;background:#EAF1FF;color:#075BFF}.quick-card svg{width:23px;height:23px}.overview-card{margin-top:26px}.overview-line{height:145px;position:relative}.overview-line svg{width:100%;height:100%}.donut{width:120px;height:120px;border-radius:50%;background:conic-gradient(#00976F 0 50%,#CE8B19 50% 75%,#DC3030 75% 100%);position:relative}.donut:after{content:"";position:absolute;inset:24px;border-radius:50%;background:#fff}.overview-grid{display:grid;grid-template-columns:1.7fr .8fr;gap:22px;align-items:center}@media(max-width:1200px){.dashboard-layout{grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.sidebar{display:none}.topbar,.content{padding-left:22px;padding-right:22px}.grid-4{grid-template-columns:1fr}.kpi{grid-template-columns:64px 1fr 80px}.quick-grid{grid-template-columns:1fr 1fr}}


/* 2026-08 dashboard visual alignment */
.sidebar{width:222px!important;padding:28px 20px!important;box-shadow:12px 0 30px rgba(3,31,72,.10)!important}
.sidebar:before,.sidebar:after{display:none!important}
.sidebar .brand{padding:0 2px 30px!important;margin:0 0 16px!important}
.sidebar .brand img{width:180px!important}
.nav-item{height:50px!important;margin:5px 0!important;padding:0 14px!important;border-radius:10px!important;font-size:13px!important}
.nav-item.active{background:linear-gradient(180deg,#1677F8,#075BFF)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 9px 24px rgba(0,91,255,.22)!important}
.side-photo{height:190px!important;border-radius:36px!important;margin:34px 0 10px!important;background-position:center!important}
.sidebar .logout{margin-top:8px!important}.side-clock{font-size:11.5px!important;padding-left:7px!important}
.topbar{padding:30px 40px 22px!important;min-height:102px!important;align-items:flex-start!important}
.topbar:before{left:41%!important;top:1px!important;width:390px!important;height:96px!important;opacity:.065!important}
.topbar h1{font-family:Inter,sans-serif!important;font-size:28px!important;font-weight:800!important;letter-spacing:-.02em!important;display:flex!important;align-items:center!important;gap:8px!important}
.topbar h1:after{display:none!important}.title-dot{width:8px;height:8px;border-radius:50%;background:#1677F8;display:inline-block}.welcome-line{font-size:14px;color:#7182A2;margin-top:8px;font-weight:500}.page-heading{position:relative;z-index:2}
.user-chip{padding-top:0!important}.content{padding:0 40px 50px!important}
@media(max-width:900px){.sidebar{display:none!important}.topbar,.content{padding-left:20px!important;padding-right:20px!important}}


/* ===== Personal profile + identity treatment ===== */
.user-chip{padding:6px 9px 6px 6px!important;border:1px solid #E4ECF8;border-radius:14px;background:rgba(255,255,255,.88);box-shadow:0 8px 24px rgba(24,65,120,.07);text-decoration:none!important;transition:.2s ease;color:#071C3A!important}
.user-chip:hover{transform:translateY(-1px);border-color:#C9DBF8;box-shadow:0 12px 30px rgba(20,88,180,.12)}
.user-chip .avatar{overflow:hidden;flex:0 0 44px}.user-chip .avatar img{width:100%;height:100%;object-fit:cover;display:block}.chip-name{display:block;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip-role{font-weight:600;color:#7A8AA5;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;margin-top:3px}.chip-arrow{width:16px;height:16px;color:#9AA9BF;margin-left:5px}
.welcome-line{display:none!important}.welcome-profile{display:flex;align-items:center;gap:12px;margin-top:10px}.welcome-avatar{width:43px;height:43px;border-radius:14px;background:linear-gradient(145deg,#071C3A,#0B66D8);color:#fff;display:grid;place-items:center;font-weight:800;overflow:hidden;box-shadow:0 8px 20px rgba(7,91,255,.18);border:2px solid #fff}.welcome-avatar img{width:100%;height:100%;object-fit:cover}.welcome-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:#8A99B0;margin-bottom:2px}.welcome-name{font-size:15px;font-weight:800;color:#17304F;letter-spacing:-.01em}
.notif-item{position:relative}.notif-item:has(.notif-unread){background:#F6FAFF}.notif-unread{width:7px;height:7px;border-radius:50%;background:#075BFF;margin-top:5px;box-shadow:0 0 0 4px #E8F1FF;flex-shrink:0}
.profile-shell{max-width:1120px;margin:0 auto}.profile-hero{min-height:174px;display:flex;align-items:center;gap:24px;padding:28px 32px!important;position:relative;overflow:hidden;background:linear-gradient(135deg,#FFFFFF 0%,#F5F9FF 70%,#EDF5FF 100%)!important}.profile-hero:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-100px;top:-150px;background:radial-gradient(circle,rgba(7,91,255,.11),transparent 68%)}.profile-orbit{position:relative;z-index:2}.profile-photo-xl{width:98px;height:98px;border-radius:28px;background:linear-gradient(145deg,#071C3A,#0A67E3);display:grid;place-items:center;color:#fff;font-size:34px;font-weight:900;overflow:hidden;border:4px solid #fff;box-shadow:0 16px 34px rgba(21,74,146,.18)}.profile-photo-xl img{width:100%;height:100%;object-fit:cover}.profile-online{position:absolute;width:18px;height:18px;border-radius:50%;background:#13B981;border:4px solid #fff;right:-2px;bottom:5px}.profile-identity{z-index:2}.profile-eyebrow{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#0B67DE;font-weight:900;margin-bottom:7px}.profile-identity h2{font-family:Inter,sans-serif;font-size:25px;margin:0 0 6px;color:#071C3A;letter-spacing:-.025em}.profile-identity p{margin:0;color:#7B8AA3;font-size:13px}.profile-lock{margin-left:auto;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:#EEF5FF;color:#2967B9;font-size:11px;font-weight:800;z-index:2}.profile-lock svg{width:15px;height:15px}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.profile-card{padding:28px!important}.profile-card-head{margin-bottom:22px}.profile-step{font-size:10px;color:#1677F8;font-weight:900;letter-spacing:.14em}.profile-card-head h3{margin:5px 0 7px!important;font-size:20px!important}.profile-card-head p{margin:0;color:#7A89A2;font-size:12px;line-height:1.6}.photo-drop{border:1.5px dashed #C9D8EE;background:#F8FBFF;border-radius:15px;min-height:175px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;text-align:center;padding:22px;transition:.2s}.photo-drop:hover{border-color:#1677F8;background:#F3F8FF}.photo-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}.photo-drop-icon{width:48px;height:48px;border-radius:14px;background:#E8F2FF;color:#1677F8;display:grid;place-items:center;margin-bottom:12px}.photo-drop-icon svg{width:23px;height:23px}.photo-drop strong{font-size:13px;color:#17304F}.photo-drop span{font-size:11px;color:#8A99AF;margin-top:5px}.profile-action{width:100%;margin-top:18px;min-height:44px;border-radius:11px!important}.password-note{font-size:11px;color:#7888A1;background:#F7F9FC;border-radius:10px;padding:10px 12px;border:1px solid #EEF2F7}@media(max-width:900px){.profile-grid{grid-template-columns:1fr}.profile-lock{display:none}.profile-hero{padding:22px!important}.profile-photo-xl{width:78px;height:78px;border-radius:22px}.profile-identity h2{font-size:20px}}

.bell .dot:after{content:attr(data-count)!important}.bell .dot:not([data-count]):after{content:''!important}

/* =====================================================================
   V6 visual enhancement — premium blue neon navigation + glass cards
   ===================================================================== */
:root{
  --radius:14px;
  --radius-lg:22px;
  --shadow:0 18px 45px rgba(12,50,110,.10);
}

.sidebar{
  width:272px;
  background:
    radial-gradient(circle at 15% 0%, rgba(63,143,255,.20), transparent 28%),
    radial-gradient(circle at 100% 100%, rgba(0,110,255,.14), transparent 25%),
    linear-gradient(180deg,#04173f 0%,#07265c 50%,#031535 100%) !important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.05), 18px 0 42px rgba(4,23,63,.18);
}
.sidebar:before{
  background:radial-gradient(circle, rgba(255,255,255,.22) 0%, rgba(255,255,255,.10) 32%, transparent 65%) !important;
  right:-74px !important;top:-78px !important;width:260px !important;height:260px !important;
}
.sidebar:after{
  border-top:4px solid rgba(116,188,255,.75) !important;
  opacity:.65;
}
.sidebar .brand{padding:2px 6px 26px !important;margin-bottom:24px !important}
.sidebar .brand img{width:205px}

.nav-item{
  min-height:52px;
  border-radius:18px !important;
  padding:12px 18px !important;
  background:transparent;
  border:1px solid transparent;
  transition:transform .24s ease, box-shadow .24s ease, background .24s ease, color .24s ease, border-color .24s ease;
  transform-origin:left center;
  overflow:visible;
}
.nav-item::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:20px;
  background:linear-gradient(90deg, rgba(39,129,255,.24), rgba(0,188,255,.12));
  filter:blur(12px);
  opacity:0;
  z-index:-1;
  transition:opacity .24s ease;
}
.nav-item svg{transition:transform .24s ease, filter .24s ease;color:currentColor}
.nav-item:hover{
  color:#fff !important;
  transform:scale(1.055) translateX(7px);
  background:linear-gradient(90deg, rgba(16,92,214,.35), rgba(32,121,255,.14)) !important;
  border-color:rgba(132,194,255,.50);
  box-shadow:0 0 0 1px rgba(97,170,255,.18), 0 0 18px rgba(24,124,255,.30), 0 0 34px rgba(24,124,255,.18), inset 0 0 18px rgba(255,255,255,.04);
}
.nav-item:hover::after{opacity:1}
.nav-item:hover svg,
.nav-item.active svg{transform:scale(1.12);filter:drop-shadow(0 0 10px rgba(98,181,255,.70))}
.nav-item.active{
  color:#fff !important;
  transform:scale(1.03) translateX(3px);
  background:linear-gradient(90deg,#0F6BFF 0%, #1979FF 55%, rgba(25,121,255,.24) 100%) !important;
  border-color:rgba(156,208,255,.75) !important;
  box-shadow:0 0 0 1px rgba(123,191,255,.20), 0 0 24px rgba(20,104,255,.40), 0 0 42px rgba(20,104,255,.24), inset 0 0 16px rgba(255,255,255,.16) !important;
}
.nav-item.active::after{opacity:1}
.side-photo{
  border-radius:34px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 22px 48px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
.side-clock{color:#D5E5FF !important;letter-spacing:.02em}

.topbar{
  padding:36px 40px 26px !important;
}
.topbar h1{
  font-family:'Inter',sans-serif !important;
  font-size:42px !important;
  letter-spacing:-.04em;
}
.topbar .actions{gap:18px !important}
.bell{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.88);
  border:1px solid #E6EEF9;
  box-shadow:0 10px 24px rgba(24,65,120,.08);
}
.bell:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(24,65,120,.12)}
.user-chip{
  border-radius:18px !important;
  padding:8px 12px 8px 8px !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid #E6EEF9 !important;
  box-shadow:0 12px 26px rgba(24,65,120,.08) !important;
}
.user-chip:hover{transform:translateY(-2px) !important;box-shadow:0 18px 36px rgba(20,88,180,.14) !important}
.user-chip .avatar{border-radius:15px !important;background:linear-gradient(145deg,#07224C,#0B67DE) !important}
.content{padding:0 40px 56px !important}
.card{
  border-radius:24px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(250,252,255,.96) 100%) !important;
  border:1px solid rgba(201,220,245,.62) !important;
  box-shadow:0 20px 46px rgba(18,60,120,.08), inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.card:hover{box-shadow:0 24px 50px rgba(18,60,120,.10), inset 0 1px 0 rgba(255,255,255,.9)}

.btn{
  border-radius:14px !important;
  min-height:42px;
  font-size:13px !important;
}
.btn-primary{
  background:linear-gradient(135deg,#07224C 0%, #0A67E3 100%) !important;
  box-shadow:0 12px 24px rgba(10,103,227,.22);
}
.btn-primary:hover{filter:none;background:linear-gradient(135deg,#082955 0%, #1A78F2 100%) !important;transform:translateY(-1px)}
.btn-outline{
  border:1px solid #D6E3F7 !important;
  background:rgba(255,255,255,.96) !important;
  color:#0A2B57 !important;
}
.btn-outline:hover{border-color:#8DB9FF !important;background:#F8FBFF !important;color:#075BFF !important;box-shadow:0 10px 22px rgba(7,91,255,.08)}
.btn-danger{box-shadow:0 10px 22px rgba(226,78,95,.16)}

.table-wrap,
table{border-collapse:separate;border-spacing:0}
.table-wrap{border-radius:20px;overflow:hidden;background:#fff;border:1px solid #EEF2F8}
thead th{background:#FBFDFF !important;color:#7285A3 !important;font-size:11px !important}
tbody tr:hover{background:#F7FAFF !important}
.badge{font-weight:800 !important;letter-spacing:.03em !important}

.toolbar{margin-bottom:22px !important}
.empty-state{padding:74px 24px !important;background:rgba(255,255,255,.72);border:1px dashed #D8E4F7;border-radius:22px}
select,input[type=text],input[type=email],input[type=password],input[type=date],input[type=datetime-local],input[type=time],input[type=tel],input[type=number],textarea{
  border-radius:14px !important;
  border-color:#D9E4F4 !important;
  background:#fff !important;
}
select:focus,input:focus,textarea:focus{box-shadow:0 0 0 4px rgba(7,91,255,.10) !important;border-color:#7FB0FF !important}

/* dashboard / section buttons */
.quick-card,
.mini-kpi,
.kpi,
.audit-ready,
.recon-panel,
.readiness-metric,
.check-box{border-radius:20px !important}

/* Generic helper pills */
.status-pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:11px;font-weight:800;background:#EAF1FF;color:#0A67E3;
}

@media(max-width:900px){
  .sidebar{display:none !important}
  .topbar,.content{padding-left:20px !important;padding-right:20px !important}
  .topbar h1{font-size:32px !important}
}

/* =====================================================================
   V7 Login — supplied AKH night / neon curve design
   ===================================================================== */
.login-premium-wrap{
  min-height:100vh;
  width:100%;
  position:relative;
  overflow:hidden;
  display:block;
  background:#fff url('../images/login-premium-bg.png') center center/cover no-repeat;
}
.login-premium-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 31% 44%, rgba(0,97,255,.11), transparent 30%),
    linear-gradient(90deg, rgba(0,11,43,.08) 0%, transparent 46%, rgba(255,255,255,.05) 100%);
}
.login-premium-copy{
  position:absolute;
  left:clamp(42px,5.4vw,92px);
  top:50%;
  transform:translateY(-50%);
  width:min(43vw,700px);
  z-index:4;
  color:#fff;
  text-shadow:0 5px 22px rgba(0,0,0,.28);
}
.login-premium-copy .stage-word{
  color:#D9E8FF;
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:24px;
}
.login-premium-copy .stage-word .dot{
  width:7px;height:7px;border-radius:50%;
  background:#4EB0FF;
  box-shadow:0 0 14px #4EB0FF,0 0 28px rgba(78,176,255,.55);
}
.login-premium-copy .stage-title{
  max-width:660px;
  font-family:'Inter',sans-serif;
  font-size:clamp(34px,3vw,58px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.045em;
  color:#fff;
}
.login-premium-copy .stage-title em{
  color:#8DCAFF;
  font-style:normal;
  text-shadow:0 0 18px rgba(52,153,255,.45);
}
.login-pulse{
  width:76%;
  max-width:580px;
  margin-top:18px;
  opacity:.9;
}
.login-pulse .pulse-line{stroke:#66C4FF;stroke-width:4.4;filter:drop-shadow(0 0 10px rgba(68,181,255,.98)) drop-shadow(0 0 22px rgba(38,138,255,.95)) drop-shadow(0 0 42px rgba(26,120,255,.70))}
.login-pulse .pulse-line-ghost{stroke:rgba(115,200,255,.42);stroke-width:3.1;filter:drop-shadow(0 0 18px rgba(71,176,255,.40))}
.login-pulse .pulse-dot{fill:#FFFFFF;filter:drop-shadow(0 0 10px #8FDAFF) drop-shadow(0 0 22px #49B6FF) drop-shadow(0 0 38px #1E84FF);animation:pulse-dot-move 5.2s cubic-bezier(.65,0,.35,1) infinite}

.login-premium-form-zone{
  position:absolute;
  z-index:5;
  top:0;
  right:0;
  width:42.5%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:50px clamp(44px,6vw,110px) 50px 40px;
}
.premium-auth-box{
  width:100%;
  max-width:470px;
  padding:42px 40px 38px;
  border-radius:28px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(215,228,247,.78);
  box-shadow:0 30px 70px rgba(18,58,110,.13), inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.premium-auth-box .logo{margin-bottom:34px!important}
.premium-auth-box .logo img{height:66px!important;width:auto;max-width:330px;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(7,91,255,.10))}
.premium-auth-box h2{
  font-family:'Inter',sans-serif!important;
  font-size:36px!important;
  line-height:1.08;
  font-weight:900!important;
  letter-spacing:-.04em;
  color:#071C3A;
  margin-bottom:10px!important;
}
.premium-auth-box p.hint{
  color:#7485A0;
  font-size:14px;
  margin-bottom:30px!important;
}
.premium-auth-box .auth-field{position:relative;margin-bottom:18px}
.premium-auth-box .auth-field label{
  font-size:11px;
  color:#38506F;
  letter-spacing:.08em;
  margin-bottom:8px;
}
.premium-auth-box .auth-field input{
  min-height:56px;
  padding-left:48px!important;
  padding-right:48px!important;
  border:1px solid #D8E4F4!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 7px 18px rgba(20,70,135,.04);
}
.premium-auth-box .auth-field input:focus{
  border-color:#6DAAFF!important;
  box-shadow:0 0 0 4px rgba(7,91,255,.09),0 10px 24px rgba(7,91,255,.08)!important;
}
.premium-auth-box .auth-ic{
  position:absolute;
  left:16px;
  bottom:17px;
  width:20px;height:20px;
  color:#6F83A2;
  z-index:2;
}
.premium-auth-box .auth-ic svg{width:20px;height:20px}
.premium-auth-box .auth-eye{
  position:absolute;
  right:14px;
  bottom:12px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#8A9BB3;
  cursor:pointer;
}
.premium-auth-box .auth-eye:hover{background:#F0F6FF;color:#075BFF}
.premium-auth-box .auth-eye svg{width:19px;height:19px}
.premium-login-btn{
  width:100%;
  min-height:56px;
  margin-top:4px;
  border-radius:16px!important;
  font-size:14px!important;
  font-weight:800!important;
  background:linear-gradient(100deg,#061E4A 0%,#075BFF 65%,#0C74FF 100%)!important;
  box-shadow:0 16px 30px rgba(7,91,255,.25)!important;
  justify-content:space-between!important;
  padding:0 22px!important;
}
.premium-login-btn:hover{transform:translateY(-2px);box-shadow:0 20px 38px rgba(7,91,255,.32)!important}
.premium-login-btn span{font-size:24px;font-weight:400;line-height:1}
.premium-auth-box .auth-forgot{margin-top:24px}
.premium-auth-box .auth-forgot a{color:#075BFF;font-weight:800}

@media(max-width:1120px){
  .login-premium-copy{width:46vw;left:36px}
  .login-premium-form-zone{width:45%;padding-right:32px;padding-left:24px}
  .premium-auth-box{padding:34px 28px}
}
@media(max-width:850px){
  .login-premium-wrap{background-position:34% center}
  .login-premium-copy{display:none}
  .login-premium-form-zone{width:100%;padding:28px}
  .premium-auth-box{max-width:480px;background:rgba(255,255,255,.94)}
}

/* =====================================================================
   V9 consistency pass — unified typography + overflow-safe evidence UI
   ===================================================================== */
body,
button,
input,
select,
textarea,
table,
label,
.badge,
.btn,
.nav-item,
.display,
h1,h2,h3,h4,h5,h6,
.card h1,.card h2,.card h3,.card h4,
.kpi .value,
.sidebar .brand .name,
.user-chip .avatar,
.avatar-sm,
.auth-side .tag,
.login-stage .stage-title,
.auth-box h2,
.premium-auth-box h2{
  font-family:'Inter',Arial,sans-serif !important;
}
h1,h2,h3,h4,h5,h6{letter-spacing:-.025em !important}
.card h3{font-weight:800 !important}

/* Never allow action rows or file names to break the page width */
.evidence-zone,
.evidence-files,
.evidence-card,
.document-row,
.document-main,
.evidence-main{min-width:0;max-width:100%}

.evidence-card{
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:12px !important;
  row-gap:10px !important;
  overflow:hidden;
}
.evidence-icon{grid-column:1;grid-row:1}
.evidence-main{grid-column:2;grid-row:1;overflow:hidden}
.evidence-main b,
.evidence-main span{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.evidence-actions{
  grid-column:1 / -1;
  grid-row:2;
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  gap:7px !important;
  width:100%;
  min-width:0;
  padding-top:10px;
  border-top:1px solid #EEF2F8;
}
.evidence-actions .btn{flex:0 0 auto;min-width:auto;white-space:nowrap}

/* DoH/TAMM document rows follow the same safe structure */
.document-row{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:12px !important;
  row-gap:10px !important;
  overflow:hidden;
}
.document-icon{grid-column:1;grid-row:1}
.document-main{grid-column:2;grid-row:1;overflow:hidden}
.document-main strong,
.document-main span,
.document-main small{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.document-actions{
  grid-column:1 / -1;
  grid-row:2;
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  gap:7px !important;
  width:100%;
  min-width:0;
  padding-top:10px;
  border-top:1px solid #EEF2F8;
}
.document-actions .doc-status{min-width:132px;max-width:190px}

@media(min-width:1500px){
  .evidence-card{grid-template-columns:42px minmax(0,1fr) auto !important}
  .evidence-actions{grid-column:3;grid-row:1;padding-top:0;border-top:0;width:auto;align-self:center}
  .document-row{grid-template-columns:44px minmax(0,1fr) auto !important}
  .document-actions{grid-column:3;grid-row:1;padding-top:0;border-top:0;width:auto;align-self:center}
}
@media(max-width:760px){
  .evidence-actions,.document-actions{justify-content:flex-start !important}
  .evidence-actions .btn,.document-actions .btn{flex:1 1 calc(50% - 7px);text-align:center}
  .document-actions .doc-status{flex:1 1 100%;max-width:none}
}


/* =====================================================================
   V10 structure, mobile navigation and attachment containment
   ===================================================================== */
.nav-group-separator{margin:15px 10px 6px;padding-top:12px;border-top:1px solid rgba(180,210,255,.13);color:#7897C2;font-size:8.5px;font-weight:900;letter-spacing:.16em;white-space:nowrap}
.nav-group-separator:first-of-type{margin-top:8px}
.nav-item span{min-width:0}
.mobile-menu-btn{display:none;position:fixed;left:16px;top:16px;z-index:1003;width:46px;height:46px;border:1px solid #D6E4F7;border-radius:14px;background:#fff;box-shadow:0 12px 30px rgba(4,38,90,.14);padding:11px;cursor:pointer}
.mobile-menu-btn span{display:block;height:2px;border-radius:4px;background:#082550;margin:5px 0}
.mobile-menu-overlay{display:none;position:fixed;inset:0;background:rgba(2,16,40,.52);backdrop-filter:blur(3px);z-index:1000}
.mobile-menu-overlay.open{display:block}

.evidence-zone,.evidence-files,.evidence-card,.evidence-main,.evidence-actions,.document-row,.document-main,.document-actions{min-width:0!important;max-width:100%!important}
.evidence-card{display:grid!important;grid-template-columns:42px minmax(0,1fr) minmax(220px,auto)!important;align-items:center!important;overflow:hidden!important}
.evidence-main b,.evidence-main span{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.evidence-actions{display:flex!important;justify-content:flex-end!important;gap:6px!important;flex-wrap:wrap!important;overflow:hidden!important}
.evidence-actions .btn{flex:0 0 auto!important;white-space:nowrap!important}
.document-row{display:grid!important;grid-template-columns:44px minmax(0,1fr) minmax(260px,auto)!important;overflow:hidden!important}
.document-main strong,.document-main span,.document-main small{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.document-actions{display:flex!important;justify-content:flex-end!important;gap:6px!important;flex-wrap:wrap!important;overflow:hidden!important}

@media(max-width:1100px){
 .evidence-card{grid-template-columns:42px minmax(0,1fr)!important}.evidence-actions{grid-column:1/-1;justify-content:flex-start!important;padding-left:52px}
 .document-row{grid-template-columns:44px minmax(0,1fr)!important}.document-actions{grid-column:1/-1;justify-content:flex-start!important;padding-left:54px}
}
@media(max-width:900px){
 .mobile-menu-btn{display:block}
 .sidebar{display:flex!important;position:fixed!important;left:0;top:0;bottom:0;z-index:1002!important;width:min(320px,86vw)!important;height:100dvh!important;transform:translateX(-105%);transition:transform .28s ease!important;overflow-y:auto!important;padding-bottom:24px!important}
 .sidebar.mobile-open{transform:translateX(0)}
 body.mobile-nav-open{overflow:hidden}
 .topbar{padding-left:76px!important;padding-top:18px!important;min-height:82px!important}
 .topbar h1{font-size:23px!important}
 .topbar .actions{gap:8px!important}
 .user-chip .chip-name,.user-chip .chip-role,.user-chip .chip-arrow{display:none!important}
 .user-chip{padding:5px!important}
 .content{padding:0 14px 40px!important}
 .toolbar{align-items:stretch!important}.toolbar>*{width:100%!important;min-width:0!important}.toolbar .field{min-width:0!important}.toolbar select{width:100%!important}
 .card{padding:16px!important;border-radius:18px!important}
}
@media(max-width:640px){
 .evidence-card{grid-template-columns:38px minmax(0,1fr)!important;padding:10px!important}.evidence-icon{width:36px!important;height:36px!important}.evidence-actions{padding-left:0!important;grid-column:1/-1}.evidence-actions .btn{font-size:10.5px!important;padding:6px 9px!important;min-height:34px!important}
 .document-row{grid-template-columns:38px minmax(0,1fr)!important}.document-actions{padding-left:0!important}.document-actions select{width:100%!important}.document-actions .btn{font-size:10.5px!important;min-height:34px!important}
}


/* V10.1 absolute containment: long filenames can never widen the page */
.evidence-card{grid-template-columns:42px minmax(0,1fr)!important;overflow:hidden!important}
.evidence-actions{grid-column:1/-1!important;padding-left:52px!important;justify-content:flex-start!important;width:100%!important}
.document-row{grid-template-columns:44px minmax(0,1fr)!important;overflow:hidden!important}
.document-actions{grid-column:1/-1!important;padding-left:54px!important;justify-content:flex-start!important;width:100%!important}
.evidence-main b,.evidence-main span,.document-main strong,.document-main span,.document-main small{overflow-wrap:anywhere!important;word-break:break-word!important;white-space:nowrap!important;text-overflow:ellipsis!important}
@media(max-width:640px){.evidence-actions,.document-actions{padding-left:0!important}}


/* v12 focused fixes */
@media(min-width:901px){
  .sidebar{position:fixed !important;left:0;top:0;bottom:0;overflow-y:auto !important;height:100vh !important}
  .main{margin-left:222px !important;width:calc(100% - 222px) !important}
}
.nav-group-separator span{display:block}
.readiness-metrics{grid-template-columns:repeat(3,minmax(0,1fr)) !important;align-items:stretch !important}
.readiness-metric{display:flex !important;flex-direction:column !important;justify-content:center !important;align-items:center !important;min-height:86px !important;overflow:hidden !important}
.readiness-metric .muted,.readiness-metric span{display:block !important;line-height:1.1 !important;font-size:12px !important;min-height:26px !important;word-break:break-word !important}
.readiness-metric b{line-height:1 !important;font-size:22px !important;margin-top:4px !important}
.event-hero-card{margin:0 0 18px;padding:18px 20px;border:1px solid rgba(255,255,255,.24);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.08));box-shadow:0 18px 44px rgba(1,13,44,.18);backdrop-filter:blur(10px)}
.event-hero-label{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:#B8D0FF;font-weight:800;margin-bottom:9px}
.event-hero-name{font-size:28px;line-height:1.18;font-weight:900;color:#fff;letter-spacing:-.02em}
.event-hero-meta{margin-top:8px;font-size:14px;color:#E5F0FF;font-weight:600}
.evidence-card{grid-template-columns:42px minmax(0,1fr) minmax(0,auto) !important}
.evidence-main b,.evidence-main span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evidence-actions{max-width:100%;overflow:hidden;flex-wrap:wrap !important}
@media(max-width:700px){
  .event-hero-name{font-size:21px}
}


/* =====================================================================
   V13 workflow/order/document polish
   ===================================================================== */
.review-save-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.save-state{font-size:12px;font-weight:800;min-height:18px;color:#6D7E99}
.save-state.success{color:#0B8D55}.save-state.error{color:#B12B3D}
.workflow-action-card{position:relative;overflow:hidden}
.workflow-action-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#075BFF,#59A1FF)}
.workflow-empty{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;padding:14px 16px!important}
.workflow-empty div{min-width:0}.workflow-empty b,.workflow-empty span{display:block}.workflow-empty span{font-size:11.5px;font-weight:500;margin-top:4px;color:#657A96}
.survey-empty{background:#F3F8FF;border:1px solid #CFE0FB;color:#164E91;border-radius:14px}

/* unified typography for accreditation + compliance workflow/modal areas */
.acc-card,.acc-card *,#reuseEvidenceModal,#reuseEvidenceModal *,.workflow-action-card,.workflow-action-card *,.modal .modal-head h3{font-family:'Inter',sans-serif!important}
.acc-card h3,.acc-card h4{font-family:'Inter',sans-serif!important;letter-spacing:-.02em}
#reuseEvidenceModal .modal-head h3{font-size:20px!important;font-weight:900!important;color:#071C3A!important}
.reuse-evidence-row,.reuse-evidence-row *{font-family:'Inter',sans-serif!important}

/* supporting document index */
.document-row-v13{display:grid!important;grid-template-columns:48px minmax(0,1fr) 165px auto!important;gap:14px!important;align-items:center!important;padding:15px!important;margin:10px 0!important;border:1px solid #E2EAF6!important;border-radius:17px!important;background:#fff!important;box-shadow:0 8px 22px rgba(18,60,120,.045)!important;overflow:hidden!important}
.document-row-v13.accepted{border-color:#B8E4CE!important;background:linear-gradient(135deg,#F5FFF9,#FFFFFF)!important}
.document-row-v13.rejected{border-color:#F3BEC4!important;background:linear-gradient(135deg,#FFF7F8,#FFFFFF)!important}
.document-row-v13 .document-icon{width:44px!important;height:44px!important;border-radius:13px!important}
.document-row-v13 .document-main{min-width:0!important;overflow:hidden!important}
.document-row-v13 .document-main strong{font-size:13px!important;color:#102848!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.document-row-v13 .document-main span{font-size:12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin-top:4px!important}
.document-row-v13 .document-main small{font-size:10.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin-top:4px!important}
.document-review{min-width:0}.document-review label{display:block;font-size:9px!important;font-weight:900!important;letter-spacing:.09em;text-transform:uppercase;color:#7A8AA5;margin-bottom:5px}.document-review select{width:100%;min-height:38px!important;font-size:11.5px!important;font-weight:800!important}
.document-row-v13 .document-actions{display:flex!important;gap:7px!important;justify-content:flex-end!important;flex-wrap:nowrap!important;padding:0!important;width:auto!important;grid-column:auto!important}
.document-row-v13 .document-actions .btn{min-height:38px!important;white-space:nowrap!important}

.focus-pulse{animation:focusPulse 1.1s ease-in-out 3;box-shadow:0 0 0 4px rgba(7,91,255,.14),0 0 28px rgba(7,91,255,.24)!important}
.focus-column{background:#EEF5FF!important;color:#075BFF!important}
@keyframes focusPulse{50%{transform:scale(1.04);box-shadow:0 0 0 7px rgba(7,91,255,.12),0 0 34px rgba(7,91,255,.32)}}

@media(max-width:1150px){.document-row-v13{grid-template-columns:44px minmax(0,1fr) 150px!important}.document-row-v13 .document-actions{grid-column:2/-1!important;justify-content:flex-start!important}}
@media(max-width:720px){.document-row-v13{grid-template-columns:40px minmax(0,1fr)!important}.document-review,.document-row-v13 .document-actions{grid-column:1/-1!important}.document-row-v13 .document-actions{justify-content:stretch!important}.document-row-v13 .document-actions .btn{flex:1}.workflow-empty{align-items:flex-start!important;flex-direction:column!important}}


/* v14 cinematic welcome card + cleaner compliance attachments */
.topbar .welcome-name span[aria-hidden="true"]{display:none!important}
.evidence-zone .evidence-card{grid-template-columns:44px minmax(0,1fr)!important;align-items:start!important}
.evidence-zone .evidence-main{min-width:0!important}
.evidence-zone .evidence-main b,.evidence-zone .evidence-main span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evidence-zone .evidence-actions{display:flex!important;flex-wrap:wrap!important;gap:7px!important;justify-content:flex-start!important}
.evidence-zone .evidence-card .btn{white-space:nowrap!important}
@media(max-width:900px){.evidence-zone .evidence-actions{padding-left:0!important}}