/* ColeebriTrack v3.0 — Modern Healthcare Compliance Platform
   v2 design language applied to v1 codebase (CSS-only update)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ────────────────────────────────────────────────────── */
:root{
  /* Primary - Coleebri Teal */
  --vc:#00889a;--vcd:#006d7a;--vc2:#00a8be;--vc4:rgba(0,136,154,0.08);--vc5:rgba(0,136,154,0.04);
  /* Surfaces - Light */
  --bg0:#f4f8f9;--bg1:#ffffff;--bg2:#f0f5f7;
  /* Text */
  --tx0:#0f2027;--tx1:#3d6068;--tx2:#6a9099;
  /* Border */
  --bdr:rgba(0,136,154,0.12);
  /* Semantic */
  --gn:#22c55e;--gnB:rgba(34,197,94,0.1);
  --or:#f59e0b;--orB:rgba(245,158,11,0.1);
  --rd:#ef4444;--rdB:rgba(239,68,68,0.1);
  --bl:#3b82f6;--blB:rgba(59,130,246,0.1);
  /* Shadows */
  --sh1:0 1px 3px rgba(0,136,154,0.06);
  --sh2:0 4px 12px rgba(0,136,154,0.08);
  --sh3:0 12px 40px rgba(0,136,154,0.1);
  --glow:0 0 30px rgba(0,136,154,0.08);
  /* Radii */
  --r:8px;--rL:16px;--rXL:20px;--rFull:9999px;
  /* Transitions */
  --tr:.2s cubic-bezier(.4,0,.2,1);
  /* Glass */
  --glass-bg:rgba(255,255,255,0.8);--glass-bdr:rgba(0,136,154,0.08);--glass-blur:20px;
  /* Typography — system UI first (readable if webfonts blocked) */
  --font-sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-display:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ── Dark Theme ───────────────────────────────────────────────────────── */
.dark{
  --vc:#00a8be;--vcd:#008fa3;--vc2:#4acfd1;--vc4:rgba(0,136,154,0.15);--vc5:rgba(0,136,154,0.06);
  --bg0:#0a1215;--bg1:#111d22;--bg2:#1a2a31;
  --tx0:#e8f4f6;--tx1:#8badb5;--tx2:#5a7d86;
  --bdr:rgba(255,255,255,0.06);
  --sh1:0 1px 2px rgba(0,0,0,0.3);--sh2:0 4px 12px rgba(0,0,0,0.35);--sh3:0 12px 40px rgba(0,0,0,0.4);
  --glow:0 0 30px rgba(0,136,154,0.25);
  --glass-bg:rgba(17,29,34,0.75);--glass-bdr:rgba(255,255,255,0.06);
}

/* ── RESET ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--bg0);color:var(--tx0);min-height:100vh;min-height:100dvh;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:var(--vc);text-decoration:none;transition:color var(--tr);touch-action:manipulation}
a:hover{color:var(--vc2)}
button,input,select,textarea{font-family:inherit}
button{touch-action:manipulation}
:focus-visible{outline:2px solid var(--vc);outline-offset:2px;border-radius:4px}
::selection{background:rgba(0,136,154,0.25);color:var(--tx0)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--tx2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--tx1)}

/* ══════════════════════════════════════════════════════════════════════════
   LOGIN SCREEN
   ══════════════════════════════════════════════════════════════════════════ */
.login-screen{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(ellipse 80% 60% at 20% 80%,rgba(0,136,154,0.15),transparent),radial-gradient(ellipse 60% 50% at 80% 20%,rgba(74,207,209,0.1),transparent),var(--bg0);position:relative;overflow:hidden}
.login-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;display:none;z-index:0}
.login-bg.active{display:block}
.login-bg::after{content:'';position:absolute;inset:0;background:rgba(10,18,21,0.75);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.login-screen .login-box{position:relative;z-index:1}
.login-box{background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--rXL);box-shadow:var(--sh3);width:100%;max-width:440px;padding:40px 36px;animation:fadeUp .6s cubic-bezier(.4,0,.2,1);border-top:3px solid var(--vc)}
.login-logo{text-align:center;margin-bottom:32px}
.logo-circle{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,var(--vc),var(--vcd));display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:30px;margin-bottom:16px;box-shadow:0 8px 24px rgba(0,136,154,0.25);position:relative;overflow:hidden;flex-shrink:0}
.logo-circle .logo-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-1px;color:#fff;line-height:1}
.logo-circle .logo-circle-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.logo-sm{position:relative;overflow:hidden}
.logo-sm .logo-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:-0.5px;color:#fff}
.logo-sm .logo-circle-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.login-logo h1{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.5px}
.login-logo h1 span{color:var(--vc2)}
.login-logo p{font-size:14px;color:var(--tx2);margin-top:4px;font-weight:400}
.login-tabs{display:flex;gap:4px;margin-bottom:24px;background:var(--bg0);border-radius:var(--r);padding:4px}
.login-tab{flex:1;padding:10px;border:none;background:transparent;color:var(--tx1);border-radius:var(--r);cursor:pointer;font-size:14px;font-weight:600;transition:all var(--tr);font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px}
.login-tab.active{background:var(--vc);color:#fff;box-shadow:0 2px 8px rgba(0,136,154,0.25)}
.login-tab:not(.active):hover{background:var(--vc5);color:var(--tx0)}
.login-error{background:var(--rdB);color:var(--rd);padding:12px 16px;border-radius:var(--r);font-size:13px;font-weight:500;margin-bottom:16px;display:none;border:1px solid rgba(239,68,68,0.2);animation:shakeX .4s ease}
.login-error.show{display:flex;align-items:center;gap:8px}
@keyframes shakeX{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ══════════════════════════════════════════════════════════════════════════
   APP SHELL
   ══════════════════════════════════════════════════════════════════════════ */
.app-shell{display:none;flex-direction:column;min-height:100vh;min-height:100dvh}
.app-shell.visible{display:flex}

/* ── TOPBAR ───────────────────────────────────────────────────────────── */
.topbar{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-bottom:1px solid var(--glass-bdr);padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--sh1)}
.topbar-brand{display:flex;align-items:center;gap:12px}
.logo-sm{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--vc),var(--vcd));display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;box-shadow:0 4px 12px rgba(0,136,154,0.25);flex-shrink:0}
.topbar-brand h1{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.3px}
.topbar-brand h1 span{color:var(--vc2)}
.topbar-nav{display:flex;gap:2px;margin:0 16px;flex:1;justify-content:center;align-items:center}
.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-user{font-size:13px;color:var(--tx1);display:flex;align-items:center;gap:6px;white-space:nowrap;font-weight:500}
.main-content{flex:1;padding:24px;max-width:1280px;width:100%;margin:0 auto}

/* ── NAV BUTTONS ──────────────────────────────────────────────────────── */
.nav-btn{background:none;border:none;padding:8px 14px;border-radius:var(--r);font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--tx1);cursor:pointer;transition:all var(--tr);display:flex;align-items:center;gap:6px;white-space:nowrap;position:relative}
.nav-btn:hover{background:var(--vc5);color:var(--vc)}
.nav-btn.active{background:var(--vc4);color:var(--vc)}
.nav-btn.active::after{content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:60%;height:2px;background:var(--vc);border-radius:1px}
.nav-drop{position:relative}
.nav-drop-btn{background:none;border:none;padding:8px 14px;border-radius:var(--r);font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--tx1);cursor:pointer;transition:all var(--tr);display:flex;align-items:center;gap:6px}
.nav-drop-btn:hover{background:var(--vc5);color:var(--vc)}
.nav-drop-btn.active{background:var(--vc4);color:var(--vc)}
.nav-drop-btn .caret{font-size:10px;transition:transform var(--tr)}
.nav-drop.open .caret{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r);box-shadow:var(--sh3);min-width:200px;max-width:calc(100vw - 24px);padding:6px;z-index:200;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .2s ease}
.nav-drop.open .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop-menu button{width:100%;text-align:left;background:none;border:none;padding:10px 14px;border-radius:var(--r);font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--tx0);cursor:pointer;transition:all var(--tr);display:flex;align-items:center;gap:10px}
.nav-drop-menu button:hover{background:var(--vc5)}
.nav-drop-menu button.active{background:var(--vc4);color:var(--vc)}
.nav-drop-menu button i{width:18px;text-align:center;color:var(--tx2)}
.nav-drop-menu button.active i{color:var(--vc)}
.nav-drop-sep{height:1px;background:var(--bdr);margin:4px 8px}

/* ══════════════════════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════════════════════ */
.fg{margin-bottom:18px}
.fg label{display:block;font-size:12px;font-weight:600;color:var(--tx1);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.fi,.fs{font-family:var(--font-sans);font-size:14px;padding:11px 14px;border:1.5px solid var(--bdr);border-radius:var(--r);background:var(--bg0);color:var(--tx0);width:100%;transition:all var(--tr)}
.fi:focus,.fs:focus{outline:none;border-color:var(--vc);box-shadow:0 0 0 3px rgba(0,136,154,0.15);background:var(--bg1)}
.fi::placeholder{color:var(--tx2)}
.fs{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236a9099' d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px}
textarea.fi{resize:vertical;min-height:80px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chk-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r);transition:background var(--tr);cursor:pointer}
.chk-row:hover{background:var(--vc5)}
.chk-row input[type="checkbox"]{width:18px;height:18px;accent-color:var(--vc);cursor:pointer;flex-shrink:0;margin:0}
.chk-row span{font-size:14px;line-height:1.4}
.chk-grid{max-height:220px;overflow-y:auto;border:1.5px solid var(--bdr);border-radius:var(--r);padding:4px}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */
.btn{border:none;font-family:var(--font-sans);font-size:14px;font-weight:600;padding:10px 20px;border-radius:var(--r);cursor:pointer;transition:all var(--tr);display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,0.1),transparent);opacity:0;transition:opacity var(--tr)}
.btn:hover::after{opacity:1}
.btn-p{background:linear-gradient(135deg,var(--vc),var(--vcd));color:#fff;box-shadow:0 2px 8px rgba(0,136,154,0.25)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,136,154,0.3)}
.btn-p:active{transform:translateY(0)}
.btn-s{background:var(--bg2);color:var(--tx0);border:1.5px solid var(--bdr)}
.btn-s:hover{background:var(--vc5);border-color:var(--vc)}
.btn-g{background:transparent;color:var(--tx1);padding:8px 14px}
.btn-g:hover{background:var(--vc5);color:var(--tx0)}
.btn-d{background:var(--rdB);color:var(--rd);border:1px solid rgba(239,68,68,0.2)}
.btn-d:hover{background:var(--rd);color:#fff}
.btn-sm{padding:6px 12px;font-size:13px}
.btn-i{padding:8px;width:36px;height:36px;justify-content:center}
.btn-block{width:100%;justify-content:center;padding:13px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.btn.loading{pointer-events:none;color:transparent}
.btn.loading::before{content:'';position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════════════════════════════════
   STAT CARDS
   ══════════════════════════════════════════════════════════════════════════ */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-bdr);border-radius:var(--rL);padding:20px;display:flex;align-items:center;gap:16px;box-shadow:var(--sh1);transition:all var(--tr);position:relative;overflow:hidden}
.stat-card:hover{box-shadow:var(--sh2);transform:translateY(-2px);border-color:var(--bdr)}
.stat-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,0.02));pointer-events:none}
.stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.si-teal{background:var(--vc4);color:var(--vc2)}.si-green{background:var(--gnB);color:var(--gn)}.si-yellow{background:var(--orB);color:var(--or)}.si-red{background:var(--rdB);color:var(--rd)}
.stat-info h3{font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.5px}
.stat-info p{font-size:12px;color:var(--tx2);font-weight:500;margin-top:2px}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION HEADERS
   ══════════════════════════════════════════════════════════════════════════ */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.sec-title{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.3px}
.sec-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sec-card{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-bdr);border-radius:var(--rL);padding:24px;box-shadow:var(--sh1);margin-bottom:20px}

/* ══════════════════════════════════════════════════════════════════════════
   SEARCH
   ══════════════════════════════════════════════════════════════════════════ */
.srch{position:relative}
.srch i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--tx2);font-size:13px}
.srch input{font-family:var(--font-sans);font-size:14px;padding:9px 14px 9px 36px;border:1.5px solid var(--bdr);border-radius:var(--r);background:var(--bg0);color:var(--tx0);width:240px;transition:all var(--tr)}
.srch input:focus{outline:none;border-color:var(--vc);box-shadow:0 0 0 3px rgba(0,136,154,0.15)}
.srch input::placeholder{color:var(--tx2)}

/* ══════════════════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════════════════ */
.tw{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-bdr);border-radius:var(--rL);overflow:hidden;box-shadow:var(--sh1)}
.ts{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
table{width:100%;border-collapse:collapse;font-size:14px}
thead{background:rgba(0,136,154,0.04)}
th{padding:12px 16px;text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--tx2);border-bottom:1px solid var(--bdr);white-space:nowrap;cursor:pointer;user-select:none;transition:color var(--tr)}
th:hover{color:var(--vc)}
th .sort-ico{opacity:.3;margin-left:4px;font-size:10px}
th.sorted .sort-ico{opacity:1;color:var(--vc)}
td{padding:12px 16px;border-bottom:1px solid var(--bdr);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--tr)}
tbody tr:hover{background:var(--vc5)}

/* ══════════════════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════════════════ */
.bdg{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--rFull);font-size:12px;font-weight:600;white-space:nowrap}
.bdg-ok{background:var(--gnB);color:var(--gn)}.bdg-warn{background:var(--orB);color:var(--or)}.bdg-over{background:var(--rdB);color:var(--rd)}.bdg-pend{background:var(--blB);color:var(--bl)}
.bdg-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.bdg-ok .bdg-dot{background:var(--gn)}.bdg-warn .bdg-dot{background:var(--or)}.bdg-over .bdg-dot{background:var(--rd)}
.bdg-pending{background:var(--orB);color:var(--or)}
.dl{font-weight:600;font-size:13px}.dl.pos{color:var(--gn)}.dl.wrn{color:var(--or)}.dl.neg{color:var(--rd)}
.ptag{display:inline-block;padding:2px 8px;border-radius:var(--rFull);font-size:11px;font-weight:600;background:var(--bg2);color:var(--tx1);margin:1px}

/* ══════════════════════════════════════════════════════════════════════════
   AVATARS
   ══════════════════════════════════════════════════════════════════════════ */
.av{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.emp-cell{display:flex;align-items:center;gap:10px}

/* ══════════════════════════════════════════════════════════════════════════
   COMPLIANCE BAR
   ══════════════════════════════════════════════════════════════════════════ */
.comp-cell{display:flex;align-items:center;gap:10px}
.comp-bar{height:8px;min-height:8px;border-radius:4px;background:var(--bg2);overflow:hidden;flex:1;min-width:72px}
.comp-fill{display:block;height:100%;min-height:8px;border-radius:4px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.comp-val{font-size:13px;font-weight:700;min-width:40px;text-align:right}

/* ══════════════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════════════ */
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:20px}
.card{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-bdr);border-radius:var(--rL);padding:20px;box-shadow:var(--sh1);transition:all var(--tr);position:relative}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--bdr)}
.card h4{font-size:15px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-m{font-size:13px;color:var(--tx1)}.card-m span{display:flex;align-items:center;gap:6px;margin-top:4px}
.card-m i{color:var(--vc);width:16px;text-align:center;font-size:12px}
.card-a{margin-top:16px;display:flex;gap:6px;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════════════════════
   FILE DROP
   ══════════════════════════════════════════════════════════════════════════ */
.fdz{border:2px dashed var(--bdr);border-radius:12px;padding:24px;text-align:center;cursor:pointer;transition:all var(--tr);background:var(--bg0);position:relative}
.fdz:hover,.fdz.drag{border-color:var(--vc);background:var(--vc4)}
.fdz i{font-size:28px;color:var(--tx2);margin-bottom:8px;display:block}
.fdz:hover i{color:var(--vc)}
.fdz p{font-size:13px;color:var(--tx1)}.fdz small{font-size:11px;color:var(--tx2);display:block;margin-top:4px}
.fdz input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.fsel{margin-top:8px;padding:10px 14px;background:var(--bg2);border-radius:var(--r);display:flex;align-items:center;gap:10px;font-size:13px}
.fsel i{color:var(--vc);font-size:18px}.fsel .fn{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsel .fsz{color:var(--tx2);font-size:12px}.fsel .frm{background:none;border:none;color:var(--rd);cursor:pointer;font-size:16px;padding:4px}

/* ══════════════════════════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════════════════════════ */
.mo{position:fixed;inset:0;background:rgba(0,10,15,0.6);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all .25s cubic-bezier(.4,0,.2,1);padding:16px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.mo.open{opacity:1;visibility:visible}
.mo.open .md{transform:translateY(0) scale(1)}
.md{background:var(--bg1);border:1px solid var(--glass-bdr);border-radius:var(--rXL);box-shadow:var(--sh3);width:100%;max-width:520px;max-height:92vh;overflow-y:auto;transform:translateY(20px) scale(.97);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.md.w{max-width:700px}
.md-h{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg1);z-index:10;border-bottom:1px solid var(--bdr)}
.md-h h2{font-family:var(--font-display);font-size:18px;font-weight:700}
.md-x{background:var(--bg2);border:none;font-size:16px;color:var(--tx1);cursor:pointer;padding:6px 10px;border-radius:var(--r);transition:all var(--tr)}
.md-x:hover{background:var(--rdB);color:var(--rd)}
.md-b{padding:20px 24px}
.md-f{padding:16px 24px;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--bdr)}

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════════════════════ */
.empty{padding:60px 20px;text-align:center;color:var(--tx2)}
.empty i{font-size:48px;margin-bottom:16px;opacity:.2;display:block}
.empty h3{font-size:16px;font-weight:600;margin-bottom:6px;color:var(--tx1)}.empty p{font-size:14px}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════════════════════════════════════════ */
.set-section{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-bdr);border-radius:var(--rL);padding:24px;margin-bottom:16px;box-shadow:var(--sh1)}
.set-section h3{font-size:15px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.set-section h3 i{color:var(--vc)}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--bdr);gap:12px;flex-wrap:wrap}
.set-row:last-child{border-bottom:none}
.set-row label{font-size:14px;font-weight:500;min-width:160px;color:var(--tx1)}
.set-row .fi,.set-row .fs{max-width:300px;font-size:14px;padding:8px 12px}

/* ══════════════════════════════════════════════════════════════════════════
   NOTIFICATIONS
   ══════════════════════════════════════════════════════════════════════════ */
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:12px;border:1px solid var(--bdr);margin-bottom:8px;background:var(--bg1);transition:background var(--tr)}
.notif-item:hover{background:var(--vc5)}
.notif-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.notif-icon.em{background:var(--vc4);color:var(--vc2)}.notif-icon.wa{background:rgba(37,211,102,.12);color:#25d366}

/* ══════════════════════════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════════════════════════ */
.tc{position:fixed;bottom:20px;right:20px;z-index:3000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--bg1);border:1px solid var(--bdr);border-radius:12px;padding:14px 18px;box-shadow:var(--sh3);display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;max-width:360px;pointer-events:all;animation:slR .3s cubic-bezier(.4,0,.2,1)}
.toast.s{border-left:3px solid var(--gn)}.toast.er{border-left:3px solid var(--rd)}.toast.i{border-left:3px solid var(--vc)}

/* ══════════════════════════════════════════════════════════════════════════
   CONFIRM DIALOG
   ══════════════════════════════════════════════════════════════════════════ */
.conf-overlay{position:fixed;inset:0;background:rgba(0,10,15,0.6);display:flex;align-items:center;justify-content:center;z-index:4000;padding:20px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.conf-box{background:var(--bg1);border:1px solid var(--glass-bdr);border-radius:var(--rXL);padding:32px;max-width:380px;width:100%;box-shadow:var(--sh3);text-align:center;animation:fadeUp .25s cubic-bezier(.4,0,.2,1)}
.conf-box i{font-size:36px;color:var(--rd);margin-bottom:14px;display:block}
.conf-box h3{font-size:17px;font-weight:700;margin-bottom:8px}
.conf-box p{font-size:14px;color:var(--tx1);margin-bottom:24px}
.conf-box .conf-btns{display:flex;gap:8px;justify-content:center}

/* ══════════════════════════════════════════════════════════════════════════
   DARK TOGGLE
   ══════════════════════════════════════════════════════════════════════════ */
.dark-toggle{background:var(--bg2);border:1px solid var(--bdr);width:36px;height:36px;border-radius:var(--r);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--tx1);transition:all var(--tr)}
.dark-toggle:hover{background:var(--vc5);color:var(--or);border-color:var(--or)}
.dark .dark-toggle{color:#f59e0b}
.dark .dark-toggle:hover{background:rgba(245,158,11,.15);color:#fbbf24}

/* ══════════════════════════════════════════════════════════════════════════
   CATEGORIES & DIVIDERS
   ══════════════════════════════════════════════════════════════════════════ */
.cat-hr{background:var(--blB);color:var(--bl)}
.cat-training{background:var(--gnB);color:var(--gn)}
.cat-other{background:var(--bg2);color:var(--tx2)}
.cat-divider{display:flex;align-items:center;gap:10px;margin:24px 0 14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--tx2)}
.cat-divider::after{content:'';flex:1;height:1px;background:var(--bdr)}

/* ══════════════════════════════════════════════════════════════════════════
   PROGRESS
   ══════════════════════════════════════════════════════════════════════════ */
.prog-bar{height:6px;background:var(--bg2);border-radius:3px;overflow:hidden;margin-top:8px}
.prog-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--vc),#4acfd1);transition:width .5s cubic-bezier(.4,0,.2,1)}

/* ── VIEWS ────────────────────────────────────────────────────────────── */
.view{display:none}.view.active{display:block;animation:fadeUp .3s cubic-bezier(.4,0,.2,1)}

/* ══════════════════════════════════════════════════════════════════════════
   ATTACHMENT BUTTON
   ══════════════════════════════════════════════════════════════════════════ */
.att{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--rFull);font-size:11px;font-weight:700;cursor:pointer;background:var(--blB);color:var(--bl);transition:all var(--tr);border:none;text-decoration:none}
.att:hover{background:var(--bl);color:#fff}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.app-footer{text-align:center;padding:16px 20px;font-size:12px;color:var(--tx2);border-top:1px solid var(--bdr);letter-spacing:.2px}
.app-footer strong{color:var(--vc)}

/* ══════════════════════════════════════════════════════════════════════════
   SECURITY BANNER
   ══════════════════════════════════════════════════════════════════════════ */
.sec-banner{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--rdB);border:1px solid rgba(239,68,68,0.2);border-radius:12px;margin-bottom:20px;font-size:14px;flex-wrap:wrap}
.sec-banner i{color:var(--rd);font-size:18px;flex-shrink:0}
.sec-banner .sb-txt{flex:1;min-width:200px}
.sec-banner .sb-txt strong{color:var(--rd)}

/* ══════════════════════════════════════════════════════════════════════════
   NOTIFICATION BELL
   ══════════════════════════════════════════════════════════════════════════ */
.notif-bell-wrap{position:fixed;right:24px;bottom:24px;z-index:500;display:none}
.notif-bell{background:linear-gradient(135deg,var(--vc),var(--vcd));color:#fff;width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;box-shadow:0 8px 24px rgba(0,136,154,0.25);border:none;transition:all var(--tr);position:relative}
.notif-bell:hover{transform:scale(1.05);box-shadow:0 12px 32px rgba(0,136,154,0.3)}
.notif-bell-badge{position:absolute;top:-4px;right:-4px;background:var(--rd);color:#fff;border-radius:var(--rFull);min-width:20px;height:20px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--bg0);line-height:1}

/* ══════════════════════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════════════════════ */
@media print{
  @page{margin:18mm 14mm}
  .topbar,.sec-acts,.btn,.att,.card-a,.nav-btn,.nav-drop,.dark-toggle,.app-shell>.topbar,.sec-hdr{display:none!important}
  .main-content{max-width:100%!important;padding:0!important;margin:0!important}
  .tw,.card{box-shadow:none!important;border:1px solid #ccc!important;backdrop-filter:none!important}
  .print-only{display:flex!important}
  body,html{background:#fff!important;color:#000!important}
  .sec-card{border:1px solid #ccc!important;box-shadow:none!important;backdrop-filter:none!important;margin-bottom:14px!important;padding:14px!important;break-inside:avoid;page-break-inside:avoid}
  .comp-fill{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .comp-bar{border:1px solid #ccc!important}
  .cat-divider{color:#333!important;border-color:#ccc!important;background:#f5f5f5!important}
  .dl.neg{color:#c23b22!important}.dl.wrn{color:#b87a1e!important}.dl.pos{color:#2d7d46!important}
  table{border-collapse:collapse!important;width:100%!important}
  th,td{border:1px solid #ddd!important;padding:6px 8px!important;font-size:11px!important}
  th{background:#f5f5f5!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ts{overflow:visible!important;width:100%!important}
  .bdg{border:1px solid #ccc!important;background:#f5f5f5!important;color:#333!important;padding:1px 4px!important;border-radius:3px!important;font-size:10px!important}
  .bdg.bdg-valid,.bdg-ok{background:#e8f5e9!important;color:#2d7d46!important;border-color:#c8e6c9!important}
  .bdg.bdg-exp{background:#fff3e0!important;color:#b87a1e!important;border-color:#ffe0b2!important}
  .bdg.bdg-over{background:#ffebee!important;color:#c23b22!important;border-color:#ffcdd2!important}
  .comp-cell{display:flex!important;align-items:center!important;gap:6px!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE MENU
   ══════════════════════════════════════════════════════════════════════════ */
.mob-menu-btn{display:none;background:none;border:none;font-size:20px;color:var(--tx0);padding:8px;border-radius:var(--r);cursor:pointer;line-height:1;transition:background var(--tr)}
.mob-menu-btn:hover{background:var(--vc5)}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (max 768px)
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .topbar{padding:0 16px;height:56px;gap:8px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .topbar-brand h1{font-size:16px}
  .topbar-nav{
    display:none;flex-direction:column;position:fixed;top:56px;left:0;right:0;
    background:var(--bg1);border-bottom:1px solid var(--bdr);
    padding:8px 16px 16px;gap:4px;z-index:200;box-shadow:var(--sh3);
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
    max-height:calc(100vh - 56px);overflow-y:auto
  }
  .topbar-nav.mob-open{display:flex}
  .mob-menu-btn{display:flex;align-items:center;justify-content:center;min-width:40px;min-height:40px}
  .nav-btn{width:100%;justify-content:flex-start;padding:12px 14px;font-size:14px;border-radius:var(--r);min-height:44px}
  .nav-btn.active::after{display:none}
  .nav-btn span.nl{display:inline}
  .main-content{padding:16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .stats-row{grid-template-columns:1fr 1fr;gap:10px}
  .stat-card{padding:14px;gap:12px}
  .stat-icon{width:40px;height:40px;font-size:16px}
  .stat-info h3{font-size:22px}
  .sec-hdr{flex-direction:column;align-items:flex-start;gap:10px}
  .sec-acts{width:100%;flex-wrap:wrap;gap:6px}
  .sec-acts .btn{font-size:13px}
  .srch{width:100%}
  .srch input{width:100%}
  .fr{grid-template-columns:1fr}
  .cg{grid-template-columns:1fr}
  /* Modal slides up from bottom on mobile */
  .md{max-width:100%;margin:0;border-radius:var(--rXL) var(--rXL) 0 0;padding-bottom:max(0px,env(safe-area-inset-bottom))}
  .mo{align-items:flex-end;padding:0}
  .mo.open .md{transform:translateY(0) scale(1)}
  .md-b{padding:16px 20px}
  .md-f{padding:12px 20px max(16px,calc(12px + env(safe-area-inset-bottom)));flex-wrap:wrap;gap:8px}
  .md-f .btn{flex:1;justify-content:center;min-width:100px;min-height:44px}
  td,th{padding:10px 12px;font-size:13px}
  .tw{border-radius:var(--r);overflow:visible}
  .ts{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;display:block;width:100%;max-width:100%}
  .ts table{min-width:500px}
  .set-row{flex-direction:column;align-items:flex-start;gap:8px}
  .set-row label{min-width:unset;font-weight:600}
  .set-row .fi,.set-row .fs{max-width:100%;width:100%}
  .set-section{margin-bottom:16px}
  .notif-bell-wrap{right:max(16px,env(safe-area-inset-right));bottom:max(80px,calc(70px + env(safe-area-inset-bottom)))}
  .tc{right:max(12px,env(safe-area-inset-right));bottom:max(16px,calc(12px + env(safe-area-inset-bottom)))}
  .toast{max-width:calc(100vw - 24px)}
  .md-h{padding:16px 20px}
  .md-h h2{font-size:16px}
  .sec-card{margin-bottom:14px}
  .comp-cell{gap:6px}
  .fr.fr-3{grid-template-columns:1fr 1fr}
  .nav-drop-menu{position:static;box-shadow:none;opacity:1;visibility:visible;transform:none;border:none;background:var(--bg2);margin:4px 0;border-radius:var(--r);padding:4px 8px;display:none}
  .nav-drop.open .nav-drop-menu{display:block}
  .conf-box{max-width:90vw}
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (max 480px)
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:480px){
  .stats-row{grid-template-columns:1fr}
  .topbar-user{display:none}
  .topbar-brand h1{font-size:14px}
  .logo-sm{width:32px;height:32px;font-size:14px;border-radius:10px}
  .sec-acts .btn span{display:none}
  .sec-acts .btn{padding:8px 10px;min-width:36px;min-height:44px}
  .sec-title{font-size:18px}
  .emp-cell{flex-direction:row;gap:6px}
  .comp-cell{gap:4px}
  .comp-bar{width:60px!important}
  .chk-grid{grid-template-columns:1fr}
  .cat-divider{font-size:11px;padding:6px 10px}
  .sec-card{padding:14px}
  .set-section{padding:14px 16px}
  .bdg{font-size:11px;padding:3px 8px}
  .att{font-size:10px;padding:3px 8px}
  td,th{padding:8px 10px;font-size:12px}
  .ts table{min-width:380px}
  .btn-sm{font-size:11px;padding:4px 9px}
  .topbar{gap:6px}
  .topbar-right{gap:6px}
  .md-f{flex-direction:column}
  .md-f .btn{min-width:unset;width:100%;min-height:44px}
  .nav-btn{padding:12px 14px;min-height:44px}
  .set-row{gap:4px}
  .set-row .fi,.set-row .fs,.set-row textarea{font-size:13px}
  .stat-info h3{font-size:20px}
  .stat-info p{font-size:11px}
  .app-footer{font-size:11px;padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .fr.fr-3{grid-template-columns:1fr}
  .login-box{padding:28px 20px}
  .login-logo h1{font-size:24px}
  .conf-box{max-width:100%;width:calc(100vw - 32px)}
  .conf-box .conf-btns{flex-direction:column}
  .conf-box .conf-btns .btn{width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   PULSE ANIMATION
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.pulse{animation:pulse 2s ease-in-out infinite}

/* ══════════════════════════════════════════════════════════════════════════
   MODAL TABS (Edit Staff tabbed layout)
   ══════════════════════════════════════════════════════════════════════════ */
.mo-tabs{display:flex;gap:4px;margin-bottom:20px;background:var(--bg0);border-radius:var(--r);padding:4px}
.mo-tab{flex:1;padding:10px 8px;border:none;background:transparent;color:var(--tx1);border-radius:var(--r);cursor:pointer;font-size:13px;font-weight:600;transition:all var(--tr);font-family:var(--font-sans);display:flex;align-items:center;justify-content:center;gap:6px}
.mo-tab.active{background:var(--vc);color:#fff;box-shadow:0 2px 8px rgba(0,136,154,0.25)}
.mo-tab:not(.active):hover{background:var(--vc5);color:var(--tx0)}
.mo-tab-content{display:none;animation:fadeUp .2s cubic-bezier(.4,0,.2,1)}
.mo-tab-content.active{display:block}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE TABLE — card layout for dashboard on small screens
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  .ts table{min-width:0!important}
  .ts table thead{display:none}
  .ts table tbody tr{display:flex;flex-direction:column;padding:14px 16px;border-bottom:1px solid var(--bdr);gap:6px}
  .ts table tbody tr:last-child{border-bottom:none}
  .ts table tbody td{display:flex;align-items:center;justify-content:space-between;padding:3px 0;border-bottom:none;font-size:13px}
  .ts table tbody td::before{content:attr(data-label);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--tx2);margin-right:8px;flex-shrink:0}
  .ts table tbody td:first-child{font-weight:600;font-size:14px;margin-bottom:2px}
  .ts table tbody td:first-child::before{display:none}
}