:root{
  --navy-900:#0a1230;
  --navy-800:#0f2557;
  --navy-700:#15316e;
  --indigo-600:#4338ca;
  --blue-600:#1d63e0;
  --blue-500:#2f7ef0;
  --blue-400:#5b9bf5;
  --accent:#4f6ef7;
  --bg:#f5f7fb;
  --bg-soft:#eef1f8;
  --card:#ffffff;
  --border:#e6e9f2;
  --text:#101828;
  --text-muted:#667085;
  --success:#12a150;
  --danger:#e3453a;
  --warning:#f0a83c;
  --radius:16px;
  --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(16,24,40,0.04);
  --shadow-md:0 4px 12px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-lg:0 20px 48px rgba(16,24,40,0.10), 0 4px 12px rgba(16,24,40,0.05);
  --shadow-glow:0 8px 24px rgba(79,110,247,0.25);
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Plus Jakarta Sans','Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
hr{border:none;border-top:1px solid var(--border);}

/* ================= LOGIN (light, premium, glassmorphic) - v2 ================= */
.login-wrap{
  min-height:100vh;display:flex;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 82% 6%, rgba(79,110,247,0.14), transparent 42%),
    radial-gradient(circle at 6% 90%, rgba(91,155,245,0.13), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(124,58,224,0.05), transparent 60%),
    linear-gradient(160deg,#f7f9fd 0%, #eef2fb 55%, #e8edfb 100%);
}
.login-wrap .abstract-shape{
  position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0;
  animation:driftShape 16s ease-in-out infinite;
}
.shape-1{width:420px;height:420px;background:radial-gradient(circle,rgba(79,110,247,0.22),transparent 70%);top:-140px;right:8%;}
.shape-2{width:340px;height:340px;background:radial-gradient(circle,rgba(124,58,224,0.16),transparent 70%);bottom:-100px;left:2%;animation-delay:4s;}
.shape-3{width:220px;height:220px;background:radial-gradient(circle,rgba(91,155,245,0.20),transparent 70%);top:42%;left:38%;animation-delay:8s;}
@keyframes driftShape{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-26px) scale(1.04);}}

.login-wrap .dot-grid{
  position:absolute;inset:0;z-index:0;opacity:0.5;pointer-events:none;
  background-image:radial-gradient(rgba(79,110,247,0.14) 1px, transparent 1.4px);
  background-size:26px 26px;
  mask-image:radial-gradient(circle at 20% 30%, rgba(0,0,0,0.9), transparent 60%);
}

/* Workflow lines + glowing nodes + floating dashboard cards - decorative, behind text, non-interactive */
.login-hero .workflow-layer{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.login-hero .workflow-layer svg{position:absolute;inset:0;width:100%;height:100%;opacity:0.20;}
.login-hero .workflow-layer .node{
  position:absolute;width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px 3px rgba(79,110,247,0.35);animation:nodePulse 3.4s ease-in-out infinite;
  opacity:0.75;
}
@keyframes nodePulse{0%,100%{opacity:0.35;transform:scale(1);}50%{opacity:0.75;transform:scale(1.3);}}

.login-hero .ghost-card{
  position:absolute;width:180px;border-radius:16px;background:rgba(255,255,255,0.4);
  border:1px solid rgba(255,255,255,0.7);box-shadow:0 20px 50px rgba(16,24,40,0.05);
  backdrop-filter:blur(6px);opacity:0.24;padding:14px 16px;z-index:0;pointer-events:none;
  animation:ghostFloat 9s ease-in-out infinite;
}
.login-hero .ghost-card .gc-bar{height:6px;border-radius:4px;background:rgba(79,110,247,0.35);margin-bottom:8px;}
.login-hero .ghost-card .gc-bar:nth-child(2){width:70%;}
.login-hero .ghost-card .gc-bar:nth-child(3){width:45%;background:rgba(124,58,224,0.28);}
.login-hero .ghost-card.gc-1{top:4%;right:2%;animation-delay:0s;}
.login-hero .ghost-card.gc-2{bottom:10%;right:4%;width:155px;animation-delay:2.5s;}
.login-hero .ghost-card.gc-3{top:44%;right:1%;width:130px;animation-delay:5s;}
@keyframes ghostFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

.login-hero{
  flex:1.15;display:flex;flex-direction:column;justify-content:center;
  padding:0 5% 0 8%;position:relative;z-index:1;
}
.login-hero .brand-row{display:flex;align-items:center;gap:12px;margin-bottom:28px;position:relative;z-index:1;}
.login-hero .brand-row .badge-icon{
  width:52px;height:52px;border-radius:16px;flex-shrink:0;
  background:linear-gradient(145deg,var(--accent),var(--indigo-600));
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 14px 30px rgba(79,110,247,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.login-hero .brand-row .badge-icon svg{width:26px;height:26px;}
.login-hero .eyebrow{
  font-size:12px;font-weight:800;letter-spacing:2.2px;color:var(--blue-600);
  padding:5px 13px;border-radius:20px;background:rgba(79,110,247,0.1);
  display:inline-block;
}
.login-hero h1{
  font-size:50px;font-weight:800;letter-spacing:-1.4px;line-height:1.1;margin:0 0 20px;color:var(--navy-900);
  position:relative;z-index:1;
}
.login-hero h1 .accent-line{display:block;color:var(--blue-600);background:linear-gradient(95deg,var(--blue-600),var(--indigo-600) 60%,#7c3ae0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.login-hero p{font-size:16.5px;color:#4b5670;line-height:1.75;max-width:440px;display:flex;align-items:flex-start;gap:10px;margin-bottom:0;position:relative;z-index:1;font-weight:500;}
.login-hero .shield-icon{width:20px;height:20px;flex-shrink:0;color:var(--blue-600);margin-top:3px;}
.login-hero .feature-strip{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap;position:relative;z-index:1;}
.login-hero .feature-strip span{
  font-size:11.5px;font-weight:700;color:var(--navy-800);background:rgba(255,255,255,0.65);
  border:1px solid rgba(79,110,247,0.15);padding:8px 14px;border-radius:20px;
  backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(16,24,40,0.04);
  display:inline-flex;align-items:center;gap:6px;transition:transform .25s, box-shadow .25s;
}
.login-hero .feature-strip span:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(79,110,247,0.14);}

.login-panel{flex:1;display:flex;align-items:center;justify-content:center;padding:40px;position:relative;z-index:1;}
.login-card{
  position:relative;
  background:linear-gradient(165deg, rgba(255,255,255,0.94), rgba(247,246,255,0.86));
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,0.75);
  border-radius:28px;
  padding:54px 48px;
  width:100%;max-width:465px;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(124,58,224,0.03);
}
.login-card::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.9),transparent);
}
.login-card::after{
  content:'';position:absolute;inset:-6px;border-radius:32px;z-index:-1;
  background:linear-gradient(140deg, rgba(79,110,247,0.30), rgba(124,58,224,0.20), transparent 62%);
  filter:blur(28px);opacity:0.9;
}
.login-card .logo-row{display:flex;justify-content:center;margin-bottom:30px;}
.login-card .logo-row img{height:64px;}
.login-card h2{text-align:center;margin:10px 0 7px;font-size:26px;font-weight:800;letter-spacing:-0.4px;color:var(--navy-900);}
.login-card .sub{text-align:center;color:var(--text-muted);font-size:13.5px;margin-bottom:32px;font-weight:500;}
.login-card .logo-row{display:flex;justify-content:center;margin-bottom:20px;}
.login-card .logo-row img{height:52px;}
.login-card h2{text-align:center;margin:0 0 6px;font-size:25px;font-weight:800;letter-spacing:-0.3px;color:var(--navy-900);}
.login-card .sub{text-align:center;color:var(--text-muted);font-size:13.5px;margin-bottom:30px;}

.field{margin-bottom:19px;}
.field label{display:block;font-size:11.5px;font-weight:700;letter-spacing:0.6px;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;transition:color .18s;}
.field:focus-within label{color:var(--blue-600);}
.input-icon{position:relative;}
.input-icon > svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#98a2b3;pointer-events:none;}
.input-icon input{padding-left:42px !important;}
.input-icon .toggle-pass{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;color:#98a2b3;background:none;border:none;padding:4px;display:flex;border-radius:8px;transition:color .15s, background .15s;z-index:2;}
.input-icon .toggle-pass svg{width:18px;height:18px;pointer-events:none;}
.input-icon .toggle-pass:hover{color:var(--accent);background:rgba(79,110,247,0.08);}
.field input:not([type=checkbox]):not([type=radio]){
  width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:13px;
  font-size:14.5px;background:#fbfcfe;transition:all 0.18s;color:var(--text);
}
.field input[type=checkbox],.field input[type=radio]{
  width:16px;height:16px;margin:0 6px 0 0;vertical-align:middle;accent-color:var(--accent);
}
.field input:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px rgba(79,110,247,0.12);}

/* Compact verification component (replaces old-style CAPTCHA look) */
.verify-row{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;
  background:rgba(79,110,247,0.05);border:1.5px solid rgba(79,110,247,0.12);margin-bottom:19px;
  transition:border-color .18s, box-shadow .18s;
}
.verify-row:focus-within{border-color:rgba(79,110,247,0.3);box-shadow:0 0 0 4px rgba(79,110,247,0.08);}
.verify-row .verify-label{font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:0.4px;text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:6px;flex-shrink:0;}
.verify-row .verify-label svg{width:14px;height:14px;color:var(--accent);flex-shrink:0;}
.verify-row .verify-eq{
  font-weight:800;font-size:14px;color:var(--navy-900);background:#fff;border-radius:9px;
  padding:8px 12px;white-space:nowrap;box-shadow:0 2px 6px rgba(16,24,40,0.06);
  display:flex;align-items:center;line-height:1;flex-shrink:0;
}
.verify-row input{
  flex:1;min-width:0;padding:8px 12px;border:1.5px solid var(--border);border-radius:10px;
  font-size:13.5px;background:#fff;transition:all .18s;height:36px;
}
.verify-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,110,247,0.14);transform:scale(1.01);}
.security-row{display:flex;gap:12px;align-items:flex-end;}
.security-row .field{flex:1;margin-bottom:0;}
.equation-box{
  background:linear-gradient(145deg,var(--navy-800),var(--accent));color:#fff;border-radius:13px;padding:13px 16px;
  font-weight:800;font-size:14px;text-align:center;min-width:104px;box-shadow:var(--shadow-glow);
  display:flex;flex-direction:column;justify-content:center;
}
.equation-box small{display:block;font-weight:600;font-size:9.5px;opacity:0.8;margin-top:3px;letter-spacing:0.6px;}

.remember-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 22px;font-size:13px;}
.remember-row label{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-weight:500;cursor:pointer;text-transform:none;}
.remember-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}
.remember-row .forgot-inline{color:#7b8aad;font-weight:600;transition:color .18s;}
.remember-row .forgot-inline:hover{color:var(--blue-600);}

.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;border:none;border-radius:13px;
  background:linear-gradient(120deg,var(--blue-600) 0%, var(--indigo-600) 100%);
  color:#fff;font-size:15.5px;font-weight:700;cursor:pointer;margin-top:4px;
  transition:transform .18s, box-shadow .18s, filter .18s;box-shadow:var(--shadow-glow);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(79,110,247,0.36);filter:brightness(1.04);}
.btn:active{transform:translateY(0);}
.login-card .forgot{display:block;text-align:center;margin-top:22px;color:#7b8aad;font-size:13.5px;font-weight:600;transition:color .18s;}
.login-card .forgot:hover{color:var(--blue-600);}
.login-card .footer-note{text-align:center;color:var(--text-muted);font-size:11px;margin-top:30px;letter-spacing:0.2px;}
.alert{padding:12px 15px;border-radius:13px;font-size:13px;margin-bottom:20px;font-weight:500;}
.alert-error{background:#fdecea;color:var(--danger);border:1px solid #f6c6c2;}
.alert-success{background:#e6f8ee;color:var(--success);border:1px solid #b7e8cc;}

@media (max-width: 900px){
  .login-wrap{flex-direction:column;}
  .login-hero{flex:none;padding:50px 30px 30px;text-align:center;align-items:center;}
  .login-hero p{max-width:none;justify-content:center;}
  .login-panel{width:100%;padding:30px 20px 50px;}
  .login-card{padding:40px 28px;}
}
@media (max-width:480px){
  .login-card{padding:32px 22px;border-radius:20px;}
  .security-row{flex-direction:column;align-items:stretch;}
  .equation-box{min-width:0;}
}

/* ================= APP SHELL (Admin + Workspace, shared) ================= */
.admin-shell{display:flex;min-height:100vh;}
.sidebar{
  width:252px;background:linear-gradient(180deg, #12284A 0%, #233A60 55%, #334D73 100%) !important;color:#fff;
  padding:24px 16px;flex-shrink:0;box-shadow:4px 0 28px rgba(0,0,0,0.14);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.sidebar .brand{display:flex;align-items:center;gap:12px;margin-bottom:30px;padding:4px 6px;}
.sidebar .brand .logo-chip{
  background:#fff;border-radius:12px;padding:8px 10px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.25);flex-shrink:0;
}
.sidebar .brand .logo-chip img{height:24px;width:auto;display:block;}
.sidebar .brand span{font-weight:800;font-size:13px;letter-spacing:0.6px;color:#fff;line-height:1.25;}

.sidebar nav{flex:1;overflow-y:auto;}
.sidebar nav a{
  display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:12px;
  color:#a9b8de;font-size:13.5px;font-weight:600;margin-bottom:3px;
  transition:all .15s;position:relative;
}
.sidebar nav a.active{
  background:linear-gradient(135deg,rgba(79,110,247,0.25),rgba(124,58,224,0.16));
  color:#fff;box-shadow:inset 0 0 0 1px rgba(91,155,245,0.28);
}
.sidebar nav a.active::before{
  content:'';position:absolute;left:-16px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:4px;background:var(--blue-400);
}
.sidebar nav a:hover:not(.active){background:rgba(255,255,255,0.06);color:#fff;transform:translateX(2px);}

.sidebar .profile-block{
  margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,0.08);
}
.sidebar .role-badge{
  padding:12px 14px;border-radius:14px;background:rgba(91,155,245,0.1);
  border:1px solid rgba(91,155,245,0.18);font-size:11.5px;color:#9db8ee;line-height:1.5;
}
.sidebar .logout-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:11px 14px;
  border-radius:13px;background:rgba(227,69,58,0.12);border:1px solid rgba(227,69,58,0.2);
  color:#ff9d97;font-size:13px;font-weight:700;text-align:center;transition:all .15s;
}
.sidebar .logout-btn:hover{background:rgba(227,69,58,0.22);transform:translateY(-1px);}

.main{
  flex:1;min-width:0;position:relative;
  background:
    radial-gradient(circle at 85% 8%, rgba(79,110,247,0.07), transparent 45%),
    radial-gradient(circle at 6% 90%, rgba(91,155,245,0.07), transparent 45%),
    linear-gradient(160deg,#f7f9fd 0%, #eef2fb 55%, #e9eefb 100%);
}
.main-inner{padding:30px 36px 60px;}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px;gap:20px;}
.topbar h1{font-size:24px;margin:0;font-weight:800;letter-spacing:-0.4px;color:var(--navy-900);}
.topbar .crumbs{color:var(--text-muted);font-size:12.5px;margin-top:5px;font-weight:500;}
.topbar .user-chip{
  display:flex;align-items:center;gap:10px;background:#fff;padding:9px 16px;border-radius:30px;
  box-shadow:var(--shadow-md);font-size:13px;font-weight:700;white-space:nowrap;
}
.topbar .user-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(18,161,80,0.15);}

/* Stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-bottom:26px;}
.stat-card{
  background:var(--card);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-md);
  border:1px solid rgba(16,24,40,0.03);transition:transform .18s, box-shadow .18s;position:relative;overflow:hidden;
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.stat-card .icon{
  width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:19px;margin-bottom:14px;box-shadow:0 6px 16px rgba(0,0,0,0.08);
}
.stat-card .icon.blue{background:linear-gradient(135deg,#4f6ef7,#2f7ef0);}
.stat-card .icon.green{background:linear-gradient(135deg,#1fbf75,#12a150);}
.stat-card .icon.amber{background:linear-gradient(135deg,#f7b955,#f0a83c);}
.stat-card .icon.purple{background:linear-gradient(135deg,#9b6ef3,#7c3ae0);}
.stat-card .label{font-size:12px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:6px;}
.stat-card .value{font-size:26px;font-weight:800;color:var(--navy-900);letter-spacing:-0.5px;}

.card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:26px 26px;margin-bottom:24px;
  border:1px solid rgba(16,24,40,0.03);
}
.card h3{margin:0 0 16px;font-size:15.5px;font-weight:800;letter-spacing:-0.1px;color:var(--navy-900);}

.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px;flex-wrap:wrap;}
.search-box{flex:1;max-width:340px;position:relative;}
.search-box svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:#98a2b3;}
.search-box input{width:100%;padding:11px 15px 11px 40px;border:1.5px solid var(--border);border-radius:12px;font-size:13px;background:#fbfcfe;transition:all .15s;}
.search-box input:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px rgba(79,110,247,0.08);}

.btn-primary{
  background:linear-gradient(120deg,var(--blue-600),var(--indigo-600));color:#fff;
  border:none;padding:11px 20px;border-radius:12px;font-weight:700;font-size:13px;cursor:pointer;
  box-shadow:0 8px 20px rgba(79,110,247,0.28);transition:all .18s;display:inline-flex;align-items:center;gap:6px;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(79,110,247,0.36);}
.btn-secondary{background:#fff;color:var(--text);border:1.5px solid var(--border);padding:10px 16px;border-radius:12px;font-weight:600;font-size:13px;cursor:pointer;transition:all .15s;}
.btn-secondary:hover{background:var(--bg-soft);border-color:#d0d5e2;}
.btn-danger{background:#fdecea;color:var(--danger);border:none;padding:7px 14px;border-radius:10px;font-weight:700;font-size:12px;cursor:pointer;transition:all .15s;}
.btn-danger:hover{background:#fbdad7;transform:translateY(-1px);}
.btn-success{background:#e6f8ee;color:var(--success);border:none;padding:7px 14px;border-radius:10px;font-weight:700;font-size:12px;cursor:pointer;transition:all .15s;}
.btn-success:hover{background:#d5f0e1;transform:translateY(-1px);}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
thead{position:sticky;top:0;background:#fff;z-index:2;}
thead th{text-align:left;color:var(--text-muted);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:0.5px;padding:13px 14px;border-bottom:1.5px solid var(--border);}
tbody td{padding:15px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
tbody tr{transition:background .12s;}
tbody tr:nth-child(even){background:#fbfcfe;}
tbody tr:hover{background:#f0f4fe;}
.badge{display:inline-block;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:0.2px;}
.badge-super{background:#f1e8fd;color:#7c3ae0;}
.badge-manager{background:#e3edfb;color:var(--blue-600);}
.badge-employee{background:#e6f8ee;color:var(--success);}
.badge-active{background:#e6f8ee;color:var(--success);}
.badge-disabled{background:#fdecea;color:var(--danger);}
.badge-role-super{background:#f1e8fd;color:#7c3ae0;}
.badge-role-ceo{background:#fde8ea;color:#c0355a;}
.badge-role-director{background:#fef3e2;color:#c17a12;}
.badge-role-manager{background:#e3edfb;color:var(--blue-600);}
.badge-role-field{background:#e0f7f5;color:#0f8a7f;}
.badge-role-employee{background:#e6f8ee;color:var(--success);}
.badge-role-default{background:var(--bg-soft);color:var(--text-muted);}

.avatar{
  width:36px;height:36px;border-radius:12px;color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;margin-right:10px;box-shadow:0 4px 10px rgba(0,0,0,0.12);flex-shrink:0;
}
.row-name{display:flex;align-items:center;}

.modal-overlay{
  position:fixed;inset:0;background:rgba(10,20,40,0.55);backdrop-filter:blur(3px);display:none;
  align-items:center;justify-content:center;z-index:100;
}
.modal-overlay.open{display:flex;}
.modal{background:#fff;border-radius:22px;padding:32px;width:490px;max-height:88vh;overflow-y:auto;box-shadow:0 30px 80px rgba(0,0,0,0.3);}
.modal h3{margin-top:0;font-weight:800;color:var(--navy-900);}
.modal .field{margin-bottom:15px;}
.checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-height:170px;overflow-y:auto;border:1.5px solid var(--border);border-radius:13px;padding:12px;background:#fbfcfe;}
.checkbox-grid label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;}

/* Fix unwanted horizontal scrollbar in left sidebar */
.sidebar{
  overflow-x:hidden;
}
.sidebar nav{
  overflow-x:hidden;
}

/* ===== SaaS UI POLISH IMPROVEMENTS ===== */
/* More breathing space in table rows */
tbody td{
  padding:18px 14px;
}
/* Premium hover effect for table rows */
tbody tr{
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
tbody tr:hover{
  background:#f4f7ff;
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(31,78,160,0.06);
}
tbody tr:active{
  background:#e8edfb;
  transform:translateY(0);
  box-shadow:inset 0 0 0 1px rgba(79,110,247,0.15);
  transition:background .08s ease, transform .08s ease;
}
/* Searchable Backup Employee picker (replaces native <datalist>) */
.be-suggest{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:40;
  margin-top:4px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(16,24,40,0.14);
  max-height:220px;
  overflow-y:auto;
  padding:6px;
}
.be-suggest-item{
  padding:9px 12px;
  border-radius:8px;
  font-size:13.5px;
  font-weight:500;
  color:var(--navy-900);
  cursor:pointer;
  transition:background .1s ease;
}
.be-suggest-item:hover{
  background:#eef2ff;
  color:#2f7ef0;
}
/* Premium lift effect on dashboard statistic cards */
.stat-card{
  cursor:pointer;
  user-select:none;
}
.stat-card:active,
.stat-card.is-pressed{
  transform:translateY(-1px) scale(0.98);
  box-shadow:0 4px 10px rgba(16,24,40,0.10);
  background:#f4f7ff;
  transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
}
/* Polished Manage Access button */
.btn-secondary{
  min-width:104px;
  text-align:center;
  justify-content:center;
  transition:all .18s ease;
}
.btn-secondary:hover{
  background:#edf3ff;
  border-color:#8eb5f8;
  color:#1d63e0;
  transform:translateY(-1px);
}
/* Polished Disable button */
.btn-danger{
  min-width:66px;
  text-align:center;
  justify-content:center;
  transition:all .18s ease;
}
.btn-danger:hover{
  background:#fee2e2;
  color:#c62828;
  transform:translateY(-1px);
}