:root {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --border: #e4e5ea;
  --text: #16161e;
  --text-2: #52526a;
  --text-3: #9595a8;
  --accent: #2d4fd6;
  --accent-soft: #eef1fc;
  --accent-dark: #1e38a8;
  --green: #167a4c;
  --green-soft: #e8f5ee;
  --amber: #98620c;
  --amber-soft: #fbf3e2;
  --red: #b3322e;
  --red-soft: #fceceb;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); font-size:14px; -webkit-font-smoothing:antialiased; }
a,button { cursor:pointer; font-family:inherit; }
input,select,textarea { font-family:inherit; }

/* ── Login ── */
@keyframes loginFadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
#login-screen {
  display:flex; min-height:100vh; align-items:center; justify-content:center;
  position:relative;
  background:url('bg.webp') center/cover no-repeat;
}
#login-screen::before {
  content:''; position:absolute; inset:0;
  background:rgba(6,10,28,0.68);
  pointer-events:none;
}
.login-right {
  position:relative; z-index:1;
  width:100%; max-width:380px;
  padding:40px 44px 44px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  animation:loginFadeUp .5s ease both;
  margin:24px;
}
/* Brand block */
.login-brand {
  text-align:center; margin-bottom:28px;
}
.login-logo {
  width:60px; height:60px; border-radius:50%;
  object-fit:contain; display:block; margin:0 auto 14px;
}
.login-company {
  font-size:13.5px; font-weight:700; color:#fff;
  white-space:nowrap; margin-bottom:6px; letter-spacing:0;
}
.login-subtitle {
  font-size:10px; font-weight:500; letter-spacing:2.5px;
  text-transform:uppercase; color:rgba(255,255,255,0.38);
}
/* Divider */
.login-brand::after {
  content:''; display:block; width:40px; height:1px;
  background:rgba(255,255,255,0.15); margin:20px auto 0;
}
.login-form-inner h2 {
  font-size:19px; font-weight:700; color:#fff;
  margin-bottom:4px; letter-spacing:-0.2px;
}
.login-form-inner > p {
  font-size:12.5px; color:rgba(255,255,255,0.45); margin-bottom:24px;
}
.login-field { margin-bottom:13px; }
.login-field label {
  display:block; font-size:11.5px; font-weight:600;
  color:rgba(255,255,255,0.6); margin-bottom:5px;
}
.login-field input {
  width:100%; padding:10px 13px;
  border:1.5px solid rgba(255,255,255,0.1); border-radius:var(--radius);
  font-size:13.5px; outline:none;
  background:rgba(255,255,255,0.07); color:#fff;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.login-field input::placeholder { color:rgba(255,255,255,0.25); }
.login-field input:focus {
  border-color:rgba(255,255,255,0.35); background:rgba(255,255,255,0.11);
  box-shadow:0 0 0 3px rgba(255,255,255,0.05);
}
.login-err { color:#f87171; font-size:12px; margin-bottom:8px; min-height:18px; }
.login-btn {
  width:100%; padding:11px; background:var(--accent);
  color:#fff; font-size:13.5px; font-weight:600;
  border:none; border-radius:var(--radius);
  transition:background .15s, transform .1s, box-shadow .15s;
  margin-top:4px; letter-spacing:0.1px;
}
.login-btn:hover { background:var(--accent-dark); box-shadow:0 4px 18px rgba(45,79,214,.45); }
.login-btn:active { transform:scale(.99); }
.login-btn:disabled { opacity:.6; cursor:default; box-shadow:none; }
.login-forgot { text-align:center; margin-top:14px; }
.login-forgot a { color:rgba(255,255,255,0.55); font-size:12px; text-decoration:none; }
.login-forgot a:hover { color:#fff; text-decoration:underline; }
@media (max-width:480px) {
  .login-right { padding:32px 24px 36px; margin:16px; }
  .login-company { font-size:15px; }
}

/* ── App shell ── */
#app { display:none; height:100vh; overflow:hidden; }
.sidebar {
  width:224px; flex-shrink:0;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
}
.logo { display:flex; align-items:center; gap:10px; padding:20px 18px 16px; }
.logo-mark {
  width:34px; height:34px; border-radius:50%;
  object-fit:contain; display:block; flex-shrink:0;
}
.logo-name { font-size:14px; font-weight:700; }
.logo-sub  { font-size:11px; color:var(--text-3); margin-top:1px; }
.nav { flex:1; padding:6px 10px; overflow-y:auto; }
.msearch-trigger {
  display:flex; align-items:center; gap:8px; width:calc(100% - 20px);
  margin:8px 10px 4px; padding:7px 11px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg);
  color:var(--text-3); font-size:13px; cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.msearch-trigger:hover { border-color:var(--accent); color:var(--text-2); box-shadow:0 0 0 3px var(--accent-soft); }
.msearch-trigger i { font-size:15px; }
.msearch-trigger span:nth-child(2) { flex:1; text-align:left; }
.msearch-trigger-kbd { font-size:10px; background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:1px 5px; color:var(--text-3); }

.nav-label {
  font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-3); padding:12px 10px 5px;
}
.nav-item {
  display:flex; align-items:center; gap:9px;
  padding:7px 10px; border-radius:6px;
  font-size:13.5px; color:var(--text-2); transition:background .1s;
  text-decoration:none;
}
.nav-item:hover { background:#f2f2f5; color:var(--text); }
.nav-item.active { background:var(--accent-soft); color:var(--accent); font-weight:500; }
.nav-item i { font-size:17px; }
.nav-count {
  margin-left:auto; font-size:11px; font-weight:600;
  background:var(--red-soft); color:var(--red);
  padding:1px 7px; border-radius:99px;
}
.nav-cake-icon { margin-left:auto; font-size:14px; color:#f59e0b; animation:navCakePulse 1.6s ease-in-out infinite; }
.nav-cake-icon + .nav-count { margin-left:6px; }
.nav-item--today { background:linear-gradient(90deg, rgba(245,158,11,.14), transparent 85%); }
.nav-item--today:hover { background:linear-gradient(90deg, rgba(245,158,11,.2), transparent 85%); }
@keyframes navCakePulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.18); opacity:.7; } }
.user-block {
  border-top:1px solid var(--border); padding:12px 14px;
  display:flex; align-items:center; gap:9px;
}
.user-avatar {
  width:30px; height:30px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; flex-shrink:0;
}
.user-name { font-size:12.5px; font-weight:500; }
.user-mail { font-size:11px; color:var(--text-3); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.logout-btn {
  margin-left:auto; border:none; background:none; color:var(--text-3);
  font-size:16px; padding:2px;
}
.logout-btn:hover { color:var(--red); }

/* ── Main ── */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.screen { display:none; flex-direction:column; height:100%; }
.screen.active { display:flex; }
.topbar {
  display:flex; align-items:center; gap:6px; padding:13px 22px;
  background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0;
  flex-wrap:wrap; row-gap:8px;
}
.topbar h1 { font-size:14.5px; font-weight:600; flex:0 0 auto; white-space:nowrap; margin-right:2px; }
.search-wrap-sm { flex:1 1 160px; min-width:130px; max-width:250px; }
.search-wrap-sm .inp { width:100%; padding:6px 26px 6px 30px; font-size:12.5px; }
select.dir-filter-sm { flex:0 1 auto; width:auto; min-width:0; max-width:165px; padding:5px 22px 5px 9px; font-size:11.5px; height:28px; text-overflow:ellipsis; }
#refresh-btn { margin-left:auto; }
.content { flex:1; overflow-y:auto; padding:22px 26px; }

.dir-tabs { display:flex; gap:4px; margin-bottom:14px; border-bottom:1px solid var(--border); }
.dir-tab {
  padding:8px 16px; font-size:13px; font-weight:500; color:var(--text-2);
  cursor:pointer; border-bottom:2px solid transparent; transition:color .12s, border-color .12s;
}
.dir-tab:hover { color:var(--text-1); }
.dir-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }

/* ── Controls ── */
.inp,.sel {
  font-size:13.5px; padding:7px 11px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--text); outline:none;
}
.inp:focus,.sel:focus { border-color:var(--accent); }
.inp::placeholder { color:var(--text-3); }
.search-wrap { position:relative; }
.search-wrap i { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:15px; pointer-events:none; }
.search-wrap .inp { padding-left:31px; width:220px; }
.search-clear-btn {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border:none; background:none; padding:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3); cursor:pointer; border-radius:50%;
}
.search-clear-btn:hover { background:var(--bg); color:var(--text-2); }
.search-clear-btn i { font-size:12.5px; pointer-events:none; }
.btn {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:500; padding:7px 12px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--text); transition:background .12s;
}
.btn:hover { background:#f4f4f6; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-dark); }
.btn-ghost { border-color:transparent; background:transparent; color:var(--text-2); }
.btn-ghost:hover { background:#f2f2f5; }
.btn-sm { padding:4px 9px; font-size:12.5px; }
.btn-danger { background:var(--red-soft); border-color:transparent; color:var(--red); }
.btn-danger:hover { background:#f8dada; }

/* ── Cards / stats ── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); }

/* ── Table (clean modern style) ── */
.sheet-card { padding:0; overflow:hidden; }
.sheet-scroll { overflow:auto; max-height:calc(100vh - 260px); }
table.sheet-table { width:100%; border-collapse:collapse; font-size:12.5px; table-layout:fixed; }
.sheet-table thead th {
  position:sticky; top:0; z-index:2;
  text-align:center; font-size:11.5px; font-weight:700;
  color:var(--text); padding:12px 14px;
  background:#f6f7fa; border-bottom:1px solid var(--border);
  text-transform:uppercase; letter-spacing:.04em;
}
.sheet-table tbody td {
  padding:7px 14px; border-bottom:1px solid var(--border);
  border-right:1px solid #f1f1f4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Class-based, not nth-child — column position shifts when the admin bulk-select column or the
   Location column toggles visibility, which broke centering for those roles/tabs before. */
.sheet-table .col-center {
  text-align:center;
}
.row-actions { display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.row-action-btn {
  width:26px; height:26px; border-radius:6px; border:1px solid var(--border);
  background:var(--surface); color:var(--text-2); font-size:13px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.row-action-btn:hover { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.sheet-table tbody td:last-child,
.sheet-table thead th:last-child { border-right:none; }
.sheet-table thead th { border-right:1px solid #ececf0; }
.sheet-table tbody tr { cursor:pointer; transition:background .08s; }
.sheet-table tbody tr:hover { background:#f9f9fb; }
.sheet-table tbody tr:last-child td { border-bottom:none; }
.sheet-rownum {
  text-align:center !important; color:var(--text-3);
  font-size:11.5px; background:#f6f7fa; position:sticky; left:0;
  padding-left:4px !important; padding-right:4px !important;
}
.sheet-table tbody .sheet-rownum { background:var(--surface); }
.sheet-table thead th.sheet-rownum { z-index:3; }
.sheet-checkbox-col { text-align:center !important; padding-left:6px !important; padding-right:6px !important; }
.sheet-table tbody tr.row-selected { background:var(--accent-soft); }
.sheet-table tbody tr.row-selected:hover { background:var(--accent-soft); }

.bulk-bar {
  display:flex; align-items:center; gap:12px; padding:9px 16px; margin-bottom:12px;
  background:var(--accent-soft); border:1px solid var(--accent); border-radius:10px;
  font-size:13px; font-weight:600; color:var(--accent);
}
.emp-cell { display:flex; align-items:center; gap:10px; }
.avatar {
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:600; flex-shrink:0;
  background:var(--accent-soft); color:var(--accent);
  overflow:hidden;
}
.emp-name { font-weight:500; }
.celebration-icon { margin-left:6px; font-size:13px; vertical-align:-1px; }
.celebration-icon--birthday    { color:#be185d; }
.celebration-icon--anniversary { color:#1d4ed8; }
img.avatar { background:none; padding:0; object-fit:cover; }
.profile-avatar img.avatar-img { width:100%; height:100%; object-fit:cover; display:block; }
.muted { color:var(--text-2); }
.table-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-top:1px solid var(--border);
  font-size:12.5px; color:var(--text-3);
}
.pagination { display:flex; align-items:center; gap:4px; }
.page-btn {
  min-width:26px; height:26px; padding:0 6px;
  border:1px solid var(--border); border-radius:6px;
  background:var(--surface); color:var(--text-2);
  font-size:12px; font-weight:500; display:flex; align-items:center; justify-content:center;
  transition:background .12s, border-color .12s;
}
.page-btn:hover:not(:disabled) { background:#f4f4f6; border-color:var(--text-3); }
.page-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.page-btn:disabled { opacity:.4; cursor:default; }
.page-ellipsis { color:var(--text-3); font-size:12px; padding:0 2px; }
.empty-state { text-align:center; padding:52px 20px; color:var(--text-3); }
.empty-state i { font-size:36px; display:block; margin-bottom:10px; }
.empty-state p { font-size:14px; font-weight:500; color:var(--text-2); }
.empty-state small { font-size:12.5px; }

.badge {
  display:inline-flex; align-items:center;
  font-size:11.5px; font-weight:500;
  padding:2px 9px; border-radius:99px;
}
.badge-green { background:var(--green-soft); color:var(--green); }
.badge-amber { background:var(--amber-soft); color:var(--amber); }
.badge-red   { background:var(--red-soft);   color:var(--red); }

/* ── Profile ── */
.profile-grid { display:grid; grid-template-columns:280px 1fr; gap:20px; max-width:1180px; }
.profile-grid > div { min-width:0; }
.profile-card { padding:0; text-align:center; overflow:hidden; }
.profile-banner {
  padding:24px 20px 18px;
  background:linear-gradient(120deg, var(--accent), #6366f1);
}
.profile-card-body { padding:0; }
.profile-avatar-wrap { position:relative; width:76px; margin:0 auto 12px; }
.profile-avatar {
  width:76px; height:76px; border-radius:50%; overflow:hidden;
  background:var(--surface); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:700;
  border:3px solid var(--surface); box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.profile-name { font-weight:700; font-size:16px; margin-top:2px; color:#fff; }
.profile-name .celebration-icon { color:#fff; font-size:14px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.profile-desig { color:rgba(255,255,255,.8); font-size:12.5px; margin-top:2px; }
.profile-codes { font-size:11.5px; color:rgba(255,255,255,.6); margin-top:3px; }
.profile-kv-panel { padding:18px 20px 22px; background:var(--surface); }
.kv-list { margin-top:0; text-align:left; }
.kv { display:flex; justify-content:space-between; gap:10px; padding:10px 4px; font-size:13px; border-top:1px solid #f1f1f4; }
.kv span:first-child { color:var(--text-2); flex-shrink:0; }
.kv span:last-child { font-weight:500; text-align:right; color:var(--text); }
.section { padding:18px 20px 22px; margin-bottom:14px; }
.section-title { font-size:13px; font-weight:700; margin-bottom:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); }
.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.detail-grid > div {
  background:#f8f9fb; border:1px solid #eef0f4; border-radius:10px;
  padding:11px 14px 12px; min-width:0;
  transition:border-color .12s, box-shadow .12s;
}
.detail-grid > div:hover { border-color:#dfe3ec; box-shadow:0 1px 4px rgba(30,40,80,.05); }
@media(max-width:1200px) { .detail-grid { grid-template-columns:1fr 1fr; } }
.detail-grid--2 { grid-template-columns:1fr 1fr; }
.field-label { font-size:10.5px; font-weight:600; color:var(--text-3); margin-bottom:5px; text-transform:uppercase; letter-spacing:.05em; }
.field-value { font-size:13.5px; font-weight:600; color:var(--text); overflow-wrap:anywhere; }
.field-value.empty { color:var(--text-3); font-weight:400; }
.profile-tabs { display:flex; flex-wrap:wrap; gap:2px; padding:6px 12px 0; background:var(--surface); border-bottom:1px solid var(--border); }
.ptab {
  display:flex; align-items:center; gap:7px;
  padding:11px 13px; font-size:12.5px; font-weight:600; color:var(--text-2);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  cursor:pointer; transition:all .12s;
  background:transparent;
}
.ptab i { font-size:15px; }
.ptab:hover { color:var(--text); }
.ptab.active { color:var(--accent); border-bottom-color:var(--accent); }
.ptab-pane { display:none; }
.ptab-pane.active { display:block; animation:tabIn .15s ease; }

/* ── Alerts ── */
.al-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1300px;
  margin:24px auto 0;
}
@media(max-width:1100px) { .al-grid { grid-template-columns:repeat(2,1fr); max-width:900px; } }
@media(max-width:780px)  { .al-grid { grid-template-columns:1fr; } }

.al-section {
  position:relative;
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(20,20,43,.04);
  transition:box-shadow .2s ease, transform .2s ease;
}
.al-section::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--al-accent-1), var(--al-accent-2));
}
.al-section--pink { --al-accent-1:#f472b6; --al-accent-2:#fbcfe8; }
.al-section--blue { --al-accent-1:#60a5fa; --al-accent-2:#bfdbfe; }
.al-section--red  { --al-accent-1:#f87171; --al-accent-2:#fecaca; }
.al-section:hover { box-shadow:0 10px 26px rgba(20,20,43,.09); transform:translateY(-2px); }
.al-header {
  display:flex; align-items:center; gap:14px;
  padding:22px 22px 20px; border-bottom:1px solid var(--border);
}
.al-icon {
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:21px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.03);
}
.al-icon--pink  { background:linear-gradient(155deg,#fce7f3,#fbcfe8); color:#be185d; }
.al-icon--blue  { background:linear-gradient(155deg,#dbeafe,#bfdbfe); color:#1d4ed8; }
.al-icon--amber { background:#fef3c7; color:#b45309; }
.al-icon--red   { background:linear-gradient(155deg,#fee2e2,#fecaca); color:#b91c1c; }
.al-title { font-size:15px; font-weight:700; color:var(--text); letter-spacing:-.1px; }
.al-desc  { font-size:11.5px; color:var(--text-3); margin-top:3px; }
.al-list  { padding:6px 0; max-height:502px; overflow-y:auto; min-height:180px; }
.al-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:46px 20px; min-height:180px; color:var(--text-3); text-align:center; font-size:13px;
}
.al-empty-icon {
  width:54px; height:54px; border-radius:50%; background:var(--bg);
  display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--text-3);
}

.al-row {
  display:flex; align-items:center; gap:13px;
  padding:11px 22px; transition:background .12s;
  border-bottom:1px solid var(--border);
}
.al-list .al-row:last-child { border-bottom:none; }
.al-row:hover { background:var(--bg); }
.al-row .avatar { box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
.al-row-info  { flex:1; min-width:0; }
.al-row-name  { font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.al-row-meta  { font-size:11.5px; color:var(--text-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.al-date-chip {
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:11px; line-height:1.05;
  background:var(--accent-soft); color:var(--accent);
}
.al-section--pink .al-date-chip { background:#fce7f3; color:#be185d; }
.al-section--blue .al-date-chip { background:#dbeafe; color:#1d4ed8; }

/* A day-count reads as "1"–"3+" digits plus a two-word label, unlike the day-chip's short
   day/month pair — a fixed 44×44 square either clips or forces an awkward wrap, so this sizes to
   its content (min-width floor, horizontal padding) instead. */
.al-overdue-chip {
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:46px; padding:6px 10px; border-radius:10px; line-height:1.05;
  background:#fee2e2; color:#b91c1c;
}
.al-overdue-days  { font-size:15.5px; font-weight:800; }
.al-overdue-label { font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; opacity:.85; white-space:nowrap; }
.al-date-day   { font-size:15.5px; font-weight:800; }
.al-date-month { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.85; }

.al-row--today { background:linear-gradient(90deg, rgba(245,158,11,.10), transparent 70%); }
.al-row--today:hover { background:linear-gradient(90deg, rgba(245,158,11,.16), transparent 70%); }
.al-today-tag {
  display:inline-block; margin-left:6px; vertical-align:middle;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:#b45309; background:#fef3c7; padding:2px 7px; border-radius:99px;
}
.al-date-chip--today {
  background:linear-gradient(155deg,#fbbf24,#f59e0b) !important;
  color:#fff !important; box-shadow:0 3px 10px rgba(245,158,11,.35);
}
.al-date-chip--today .al-date-day, .al-date-chip--today .al-date-month { color:#fff; opacity:1; }

/* ── Dashboard — fixed one-screen grid, no page scroll on desktop ── */
#screen-dashboard .content {
  display:grid; gap:10px; padding:12px 16px; overflow:hidden;
  grid-template-columns:minmax(0,1.5fr) repeat(4, minmax(0,1fr));
  grid-template-rows:auto minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:
    "stats stats stats  stats  stats"
    "hc    prob  tenure tenure gender"
    "hc    prob  trends trends gender"
    "age   age   edu    edu    edu";
}
.db-a-hc      { grid-area:hc; }
.db-a-gender  { grid-area:gender; }
.db-a-tenure  { grid-area:tenure; }
.db-a-prob    { grid-area:prob; }
.db-a-trends  { grid-area:trends; }
.db-trends-title2 { margin-top:10px; }
.db-a-age     { grid-area:age; }
.db-a-edu     { grid-area:edu; }
@media(max-width:1100px){
  #screen-dashboard .content { display:flex; flex-direction:column; overflow-y:auto; }
  #screen-dashboard .content > .card.db-widget { flex-shrink:0; }
}

.db-stat-row { grid-area:stats; display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
@media(max-width:1200px){ .db-stat-row { grid-template-columns:repeat(3,1fr); } }
@media(max-width:700px) { .db-stat-row { grid-template-columns:repeat(2,1fr); } }
.db-stat { display:flex; align-items:center; gap:11px; padding:11px 14px; }
.db-stat-icon { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.db-stat-val  { font-size:18px; font-weight:700; line-height:1; }
.db-stat-lbl  { font-size:10.5px; color:var(--text-3); margin-top:3px; }

.db-widget { padding:13px 16px; display:flex; flex-direction:column; min-height:0; }
.db-widget > :last-child { min-height:0; }
.db-widget-title { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); margin-bottom:11px; display:flex; align-items:center; gap:7px; }
.db-widget-title i { font-size:15px; color:var(--accent); }
.db-badge { margin-left:auto; font-size:11px; font-weight:600; background:var(--red-soft); color:var(--red); padding:1px 8px; border-radius:99px; }
.db-badge-amber { background:var(--amber-soft); color:var(--amber); }

.db-prob-toggle { display:flex; gap:2px; background:var(--bg); border-radius:8px; padding:3px; margin-bottom:12px; width:fit-content; }
.db-prob-toggle-btn {
  border:none; background:none; padding:5px 10px; border-radius:6px;
  font-size:11.5px; font-weight:600; color:var(--text-3); cursor:pointer; transition:background .15s, color .15s;
}
.db-prob-toggle-btn:hover { color:var(--text-2); }
.db-prob-toggle-btn.active { background:var(--surface); color:var(--accent); box-shadow:var(--shadow); }

.db-alert-list { display:flex; flex-direction:column; gap:0; flex:1; min-height:0; overflow-y:auto; }
@media(max-width:1100px){ .db-alert-list { max-height:200px; } }
.db-alert-row  { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.db-alert-row:last-child { border-bottom:none; }
.db-alert-avatar { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; }
.db-alert-name { font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.db-alert-meta { font-size:11.5px; color:var(--text-3); flex-shrink:0; }
.db-empty { color:var(--text-3); font-size:12.5px; padding:12px 0; text-align:center; }

.db-bar-chart  { display:flex; align-items:flex-end; gap:5px; flex:1; min-height:64px; padding-top:20px; position:relative; }
@media(max-width:1100px){ .db-bar-chart { flex:none; height:110px; } }
.db-col-wrap   { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; flex:1; height:100%; }
.db-col-bar    {
  width:100%; max-width:15px; background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  border-radius:3px 3px 0 0; transition:height .4s ease; min-height:2px; position:relative;
}
.db-col-bar--red { background:linear-gradient(180deg, var(--red), color-mix(in srgb, var(--red) 70%, #000)); }
.db-col-label  { font-size:9px; color:var(--text-3); white-space:nowrap; flex-shrink:0; }
.db-col-val    { position:absolute; top:-17px; left:50%; transform:translateX(-50%); font-size:9.5px; font-weight:600; color:var(--text-2); white-space:nowrap; }

.db-bar-row    { display:flex; align-items:center; gap:9px; padding:5.5px 0; font-size:11.5px; }
.db-bar-row--clickable { cursor:pointer; border-radius:4px; }
.db-bar-row--clickable:hover { background:var(--bg); }
.db-bar-label  { flex:0 0 100px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.db-bar-track  { flex:1; height:6px; background:var(--bg); border-radius:99px; overflow:hidden; }
.db-bar-fill   { height:100%; background:linear-gradient(90deg, color-mix(in srgb, var(--red) 75%, #fff), var(--red)); border-radius:99px; transition:width .4s ease; }
.db-bar-fill--accent { background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent)); }
.db-bar-count  { flex:0 0 34px; text-align:right; font-weight:600; font-size:11px; color:var(--text-2); }
.db-bar-label--wide { flex-basis:160px; }
.db-bar-list-scroll { flex:1; min-height:0; overflow-y:auto; }
@media(max-width:1100px){ .db-bar-list-scroll { max-height:300px; } }

#db-age-dist, #db-education-dist { flex:1; min-height:0; overflow-y:auto; }

.db-gender-diagram { flex:1; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center; gap:16px 28px; }
.db-donut { width:130px; height:130px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background 1s ease; }
.db-donut-hole { width:80px; height:80px; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px var(--border); }
.db-donut-total { font-size:19px; font-weight:700; color:var(--text); }
.db-donut-pcts { display:flex; flex-direction:column; align-items:center; line-height:1.2; font-size:15px; font-weight:700; }
.db-donut--sm { width:104px; height:104px; }
.db-donut-hole--sm { width:62px; height:62px; }
.db-donut-hole--sm .db-donut-total { font-size:15px; }
.db-gender-legend--sm { font-size:11.5px; gap:6px; }
.db-gender-legend { display:flex; flex-direction:column; gap:10px; font-size:13px; color:var(--text-2); }
.db-gender-legend-item { display:flex; align-items:center; gap:6px; }
.db-gender-legend-item b { color:var(--text); font-weight:700; margin-left:1px; }
.db-gender-legend-item .muted { color:var(--text-3); }

#db-gender-ratio { flex:1; display:flex; min-height:0; }
.db-gender-icons { flex:1; display:flex; align-items:center; justify-content:center; gap:36px; }
.db-gender-icon-item { display:flex; flex-direction:column; align-items:center; gap:8px; }
.db-gender-symbol { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700; line-height:1; }
.db-gender-avatar { width:58px; height:58px; border-radius:50%; box-shadow:0 0 0 1px var(--border); }
.db-gender-big-pct { font-size:22px; font-weight:800; line-height:1.2; }
.db-gender-icon-lbl { font-size:10.5px; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }

.db-tenure-legend { margin-left:auto; display:flex; gap:11px; font-size:10px; font-weight:600; color:var(--text-3); text-transform:none; letter-spacing:0; }
.db-tenure-legend span { display:flex; align-items:center; gap:5px; }
.db-legend-dot { display:inline-block; width:7px; height:7px; border-radius:50%; }

.db-tenure-chart { display:flex; align-items:flex-end; gap:0; flex:1; min-height:100px; padding-top:16px; overflow-x:auto; }
@media(max-width:1100px){ .db-tenure-chart { flex:none; height:120px; } }
.db-tenure-group {
  display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; min-width:0; max-width:80px;
  padding:0 3px; border-right:1px solid var(--border);
}
.db-tenure-group:last-child { border-right:none; }
.db-tenure-bars { display:flex; align-items:flex-end; gap:2px; height:80px; }
.db-tenure-bar { width:9px; border-radius:2px 2px 0 0; min-height:2px; transition:height .4s ease; position:relative; filter:brightness(1); }
.db-tenure-bar-val { position:absolute; top:-15px; left:50%; transform:translateX(-50%); font-size:9.5px; font-weight:700; color:var(--text-2); white-space:nowrap; }
.db-tenure-label { font-size:10.5px; font-weight:600; color:var(--text-2); white-space:nowrap; }

/* ── Form (Add / Edit) — tab layout ── */
#screen-add .content { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: 100%; }
.ftab-bar {
  display: flex; gap: 2px; padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto; flex-shrink: 0;
}
.ftab-bar::-webkit-scrollbar { height: 3px; }
.ftab-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.ftab {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px; border: none; background: none;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: 0; white-space: nowrap;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.ftab:hover { color: var(--text); }
.ftab.active { color: var(--accent); border-bottom-color: var(--accent); }
.ftab .ti { font-size: 15px; }
.ftab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-left: 2px; flex-shrink: 0; display: none; }
.ftab.has-data .ftab-dot { display: inline-block; }
.ftab-body { flex: 1; overflow-y: auto; padding: 20px 24px 32px; }
.ftab-pane { display: none; }
.ftab-pane.active {
  display: block; animation: tabIn .18s ease;
  max-width: 1500px; margin: 0 auto;
}
@keyframes tabIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* ── Form cards (inside tabs) ── */
.fcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px 22px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.fcard:last-child { margin-bottom: 0; }
.fcard-title {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accent);
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.fcard-title .ti { font-size: 15px; }
.fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px 28px;
}
@media (max-width: 800px) { .fgrid { grid-template-columns: 1fr; } }
.ff { display: flex; flex-direction: column; gap: 5px; }
.ff.ff-full { grid-column: 1 / -1; }
.ff label {
  font-size: 12px; font-weight: 500; color: var(--text-2);
}
.ff .inp {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 13.5px; outline: none;
  background: var(--surface); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.ff .inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ff textarea.inp { resize: vertical; min-height: 68px; }
.ff .inp.invalid { border-color: var(--red); background: #fff8f8; }
.ff .inp.invalid:focus { box-shadow: 0 0 0 3px rgba(179,50,46,.15); }
.ff .field-error { color: var(--red); font-size: 11px; font-weight: 500; margin-top: 2px; }
.req { color: var(--red); }

/* ── Toast ── */
#toast {
  position:fixed; bottom:28px; right:28px;
  background:#1a1a1e; color:#fff; padding:11px 18px;
  border-radius:var(--radius); font-size:13px; font-weight:500;
  transform:translateY(80px); opacity:0;
  transition:all .22s ease; z-index:999; max-width:320px;
  display:flex; align-items:center; gap:10px;
}
#toast.show { transform:translateY(0); opacity:1; }
#toast.error { background:var(--red); }
#toast.success { background:var(--green); }

/* ── Master Search ── */
.msearch-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.45); z-index:500;
  align-items:flex-start; justify-content:center;
  padding-top:80px;
}
.msearch-overlay.open { display:flex; }
.msearch-box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; width:620px; max-width:calc(100vw - 32px);
  box-shadow:0 24px 60px rgba(0,0,0,.22);
  overflow:hidden; display:flex; flex-direction:column;
  max-height:calc(100vh - 160px);
}
.msearch-input-wrap {
  display:flex; align-items:center; gap:10px;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.msearch-input-wrap i { font-size:20px; color:var(--text-3); flex-shrink:0; }
.msearch-input {
  flex:1; border:none; outline:none; font-size:15px;
  background:transparent; color:var(--text); font-family:inherit;
}
.msearch-input::placeholder { color:var(--text-3); }
.msearch-kbd { font-size:11px; color:var(--text-3); background:var(--bg);
  border:1px solid var(--border); border-radius:4px; padding:2px 6px; flex-shrink:0; }
.msearch-results { overflow-y:auto; flex:1; }
.msearch-section-label {
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-3); padding:10px 18px 4px;
}
.msearch-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 18px; cursor:pointer; transition:background .1s;
}
.msearch-item:hover, .msearch-item.focused { background:var(--accent-soft); }
.msearch-item .ms-avatar {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
}
.msearch-item .ms-main { flex:1; min-width:0; }
.msearch-item .ms-name { font-size:13.5px; font-weight:500; }
.msearch-item .ms-sub  { font-size:12px; color:var(--text-3); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msearch-item .ms-match { font-size:11px; color:var(--accent); background:var(--accent-soft); padding:1px 7px; border-radius:99px; flex-shrink:0; }
.msearch-empty { padding:40px 20px; text-align:center; color:var(--text-3); font-size:13.5px; }
.msearch-hint  { padding:10px 18px; font-size:11.5px; color:var(--text-3); border-top:1px solid var(--border); display:flex; gap:16px; }
.msearch-hint span { display:flex; align-items:center; gap:4px; }
mark { background:var(--accent-soft); color:var(--accent); border-radius:2px; padding:0 1px; font-style:normal; }

/* ── Export Modal ── */
.export-modal {
  background:var(--surface); border-radius:14px;
  padding:28px 30px; width:520px; max-width:calc(100vw - 32px);
  box-shadow:0 12px 40px rgba(0,0,0,.18); max-height:calc(100vh - 80px); overflow-y:auto;
}
.export-modal h3 { font-size:16px; font-weight:700; margin-bottom:4px; }
.export-modal .sub { font-size:12.5px; color:var(--text-3); margin-bottom:22px; }
.export-section { margin-bottom:20px; }
.export-section-title { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2); margin-bottom:10px; }
.export-chips { display:flex; flex-wrap:wrap; gap:8px; }
.export-chip {
  padding:5px 13px; border-radius:99px; font-size:12.5px; font-weight:500;
  border:1.5px solid var(--border); background:var(--surface); color:var(--text-2);
  cursor:pointer; transition:all .15s; user-select:none;
}
.export-chip.on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.export-field-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.export-field-item {
  display:flex; align-items:center; gap:7px; font-size:12.5px;
  padding:5px 8px; border-radius:6px; cursor:pointer; transition:background .1s;
}
.export-field-item:hover { background:var(--bg); }
.export-field-item input[type=checkbox] { accent-color:var(--accent); cursor:pointer; }
.export-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:24px; padding-top:16px; border-top:1px solid var(--border); }

.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.35); z-index:100;
  align-items:center; justify-content:center;
}
.modal-overlay.open { display:flex; }
.modal {
  background:var(--surface); border-radius:12px;
  padding:26px 28px; width:420px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
}
.modal h3 { font-size:16px; font-weight:700; margin-bottom:8px; }
.modal p  { font-size:13.5px; color:var(--text-2); margin-bottom:22px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; }

/* Loading */
.spinner { display:inline-block; width:16px; height:16px; border:2px solid #fff3; border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; }
.spinner-dark { display:inline-block; width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--text-2); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
#refresh-btn.spinning i { display:inline-block; animation:spin .7s linear infinite; }
.btn:disabled, .btn.btn-loading { opacity:.7; cursor:default; pointer-events:none; }

.sheet-loading-overlay {
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  background:var(--surface); opacity:0; pointer-events:none; transition:opacity .12s ease;
}
.sheet-loading-overlay.show { opacity:1; pointer-events:auto; }
.sheet-loading-spinner { width:26px; height:26px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .6s linear infinite; }

.main-loading-overlay {
  position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:var(--bg); opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.main-loading-overlay.show { opacity:1; pointer-events:auto; }

/* ── Processing Overlay ── */
@keyframes overlayFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes cardPop {
  0%   { opacity:0; transform:scale(.85) translateY(20px); }
  70%  { transform:scale(1.03) translateY(-2px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes dotBounce {
  0%, 80%, 100% { transform:scale(0); opacity:.3; }
  40%            { transform:scale(1); opacity:1; }
}
@keyframes progressBar {
  0%   { width:0%; }
  30%  { width:40%; }
  60%  { width:70%; }
  85%  { width:88%; }
  100% { width:100%; }
}
#processingOverlay {
  position:fixed; inset:0;
  background:rgba(15,15,40,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  animation:overlayFadeIn .25s ease;
}
.processing-card {
  background:#fff; border:1px solid #e2e8f0; border-radius:20px;
  padding:2.2rem 2.8rem; text-align:center;
  box-shadow:0 32px 64px rgba(0,0,0,.2);
  animation:cardPop .4s cubic-bezier(.34,1.56,.64,1);
  min-width:260px;
}
.overlay-title   { font-size:16px; font-weight:700; color:#1e293b; margin:0 0 4px; }
.overlay-subtitle{ font-size:12px; color:#94a3b8; margin:0 0 4px; }
.dot-loader { display:flex; gap:10px; justify-content:center; margin-bottom:1.25rem; }
.dot-loader span {
  width:11px; height:11px; border-radius:50%;
  background:var(--accent);
  animation:dotBounce 1.4s ease-in-out infinite;
}
.dot-loader span:nth-child(1){ animation-delay:0s; }
.dot-loader span:nth-child(2){ animation-delay:.2s; }
.dot-loader span:nth-child(3){ animation-delay:.4s; }
.progress-track {
  width:100%; height:3px; background:rgba(45,79,214,.1);
  border-radius:99px; margin-top:1.25rem; overflow:hidden;
}
.progress-fill {
  height:100%;
  background:linear-gradient(90deg, var(--accent), #6366f1);
  border-radius:99px;
  animation:progressBar 2.5s ease forwards;
}

/* Fresh-login loader — no card, no progress bar, just a spinner on a lightly frosted backdrop so
   the login screen stays faintly visible behind it instead of being fully hidden. */
#loginLoader {
  position:fixed; inset:0;
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  z-index:9999;
  animation:overlayFadeIn .2s ease;
}
.login-spinner {
  width:38px; height:38px; border-radius:50%;
  border:3px solid rgba(45,79,214,.15); border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
.login-loader-text { font-size:12.5px; font-weight:600; color:var(--text-2); }