/* =====================================================
   HR Management System — Premium Classic Edition
   Palette: Black · White · Gold (#F5C400)
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* ── Brand / accent (Black + White + Gold) ── */
  --gold:        #F5C400;   /* primary accent */
  --gold-dark:   #C9A100;   /* primary hover/active */
  --gold-light:  rgba(245,196,0,.14);   /* primary tint bg */
  --gold-muted:  rgba(245,196,0,.14);

  --primary:        #F5C400;
  --primary-dark:   #C9A100;
  --primary-light:  rgba(245,196,0,.14);
  --primary-muted:  rgba(245,196,0,.14);

  --success:       #16A34A;
  --success-dark:  #15803D;
  --success-light: rgba(22,163,74,.12);

  --danger:        #DC2626;
  --danger-dark:   #B91C1C;
  --danger-light:  rgba(220,38,38,.12);

  --warning:       #EA8C00;
  --warning-dark:  #B36A00;
  --warning-light: rgba(234,140,0,.12);

  --purple:        #7C3AED;
  --purple-dark:   #5B21B6;
  --purple-light:  rgba(124,58,237,.12);

  /* ── Core neutrals ── */
  --black:       #000000;   /* primary text */
  --dark:        #000000;   /* dark UI surfaces (tooltips, dark buttons) */
  --dark2:       #1A1A1A;   /* dark surface hover */
  --dark3:       #262626;
  --white:       #ffffff;

  --bg:          #ffffff;

  --gray-50:     #FAFAFA;
  --gray-100:    #F2F2F2;
  --gray-200:    #E6E6E6;
  --gray-300:    #CCCCCC;
  --gray-400:    #999999;
  --gray-500:    #737373;
  --gray-600:    #595959;
  --gray-700:    #3D3D3D;
  --gray-800:    #262626;

  /* ── Borders ── */
  --border:      #E6E6E6;
  --border-dark: #CCCCCC;

  /* ── Layout ── */
  --sidebar-w:   264px;
  --topbar-h:    64px;
  --radius:      18px;
  --radius-lg:   20px;
  --radius-sm:   12px;
  --radius-xs:   8px;
  --transition:  .18s cubic-bezier(.4,0,.2,1);

  /* ── Shadows (soft, layered) ── */
  --shadow-xs:    0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 14px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:    0 12px 28px -8px rgba(0,0,0,.14), 0 4px 10px rgba(0,0,0,.05);
  --shadow-hover: 0 18px 34px -14px rgba(0,0,0,.22), 0 6px 12px rgba(0,0,0,.06);
  --shadow-focus: 0 0 0 4px rgba(245,196,0,.25);

  --font: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: #ffffff;
  color: var(--black);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; }

/* Accessible focus rings — WCAG AA */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ── SCROLLBAR (beautiful, minimal) ─────────────────── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 99px;
  border: 2px solid var(--bg);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }

/* ─────────────────────────────────────────────────────
   LOGIN
───────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  background: var(--white);
  overflow: hidden;
}

.login-wrap-centered {
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(245,196,0,.10) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(146,159,19,.08) 0%, transparent 50%),
    radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 24px 24px, auto;
}

.login-wrap-centered .login-right {
  width: 100%;
  min-height: auto;
  background: transparent;
}

.login-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 48px;
  background:
    radial-gradient(circle at 15% 15%, rgba(245,196,0,.22) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(245,196,0,.10) 0%, transparent 50%),
    linear-gradient(160deg, #000000 0%, #1A1A1A 55%, #000000 100%);
  border-right: 1px solid rgba(255,255,255,.06);
  position: relative;
}

.login-left::before {
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(245,196,0,.18) 0%, transparent 65%);
  pointer-events: none;
}

.login-left::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(245,196,0,.13) 0%, transparent 65%);
  pointer-events: none;
}

.login-brand {
  text-align: center;
  position: relative; z-index: 1;
}

.login-brand img {
  max-width: 200px;
  filter: brightness(0) invert(1);
  margin-bottom: 36px;
  opacity: .92;
}

.login-brand h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: -.6px;
}

.login-brand p { color: rgba(255,255,255,.55); font-size: 14.5px; font-weight: 500; }

.login-features {
  margin-top: 52px;
  list-style: none;
  width: 100%;
  max-width: 320px;
}

.login-features li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,.75);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 13.5px;
  font-weight: 500;
  transition: color var(--transition), padding-left var(--transition);
}

.login-features li:hover { color: var(--white); padding-left: 4px; }

.login-features li i {
  color: var(--black);
  background: var(--gold);
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(245,196,0,.35);
}

.login-right {
  width: 480px;
  min-height: 100vh;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.login-card {
  width: 100%;
  max-width: 370px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 44px 34px 38px;
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 50%, var(--gold) 100%);
}

.login-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; color: var(--black);
  margin-bottom: 20px;
  box-shadow: 0 10px 22px -8px rgba(245,196,0,.6);
}

.login-card h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 5px;
  letter-spacing: -.4px;
}

.login-card .subtitle { color: var(--gray-500); margin-bottom: 30px; font-size: 13.5px; font-weight: 500; }

.form-group { margin-bottom: 18px; }

.form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
  letter-spacing: .2px;
}

.form-control, .form-select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  font-family: inherit;
  background: var(--gray-50);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  outline: none;
  appearance: none;
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  background: var(--white);
  box-shadow: var(--shadow-focus);
}

.form-control::placeholder { color: var(--gray-400); font-weight: 400; }

.input-icon { position: relative; }
.input-icon > i {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400); font-size: 15px;
  pointer-events: none;
}
.input-icon .form-control { padding-left: 42px; }
.input-icon .form-control.has-toggle { padding-right: 42px; }
.input-icon .toggle-pw {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--gray-400);
  background: none; border: none; outline: none; font-size: 15px;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-xs);
  transition: color .15s, background .15s;
}
.input-icon .toggle-pw:hover { color: var(--black); background: var(--gray-100); }

.btn-login {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--black);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--transition), transform var(--transition), box-shadow var(--transition);
  font-family: inherit;
  letter-spacing: .2px;
  margin-top: 6px;
  box-shadow: 0 8px 20px -6px rgba(245,196,0,.55);
}

.btn-login:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 14px 26px -6px rgba(245,196,0,.6); }
.btn-login:active { transform: translateY(0); filter: brightness(.98); }
.btn-login.loading { opacity: .65; cursor: not-allowed; transform: none; }

.login-error {
  background: var(--danger-light);
  color: var(--danger-dark);
  border: 1px solid #F5B5B5;
  border-radius: var(--radius-xs);
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 14px;
  display: none;
}
.login-error.show { display: flex; align-items: center; gap: 8px; }

@keyframes loginFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.login-card { animation: loginFadeUp .5s cubic-bezier(.4,0,.2,1) both; }

/* ─────────────────────────────────────────────────────
   APP LAYOUT
───────────────────────────────────────────────────── */
#app { display: flex; min-height: 100vh; }

/* ── SIDEBAR ───────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  /* No filter/backdrop-filter/transform here — those establish a containing
     block for fixed-position descendants (like .sidebar-toggle-btn), which
     would break its "escape the sidebar's overflow clipping" trick below. */
  background: #fafafa;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 200;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), width var(--transition);
  box-shadow: var(--shadow-xs);
}

/* ── COLLAPSE TOGGLE ─────────────────────────────────── */
button.sidebar-toggle-btn {
  /* position:fixed (not absolute) so it escapes .sidebar's overflow-y:auto,
     which otherwise clips anything poking past the sidebar's right edge */
  position: fixed;
  top: 38px;
  left: calc(var(--sidebar-w) - 13px);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--gray-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  cursor: pointer;
  z-index: 210;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), left var(--transition);
}
.sidebar-toggle-btn:hover { background: var(--primary); color: var(--black); border-color: var(--primary); transform: scale(1.08); }
.sidebar-toggle-btn i { transition: transform var(--transition); }

.sidebar.collapsed { width: 78px; }
.sidebar.collapsed .sidebar-toggle-btn i { transform: rotate(180deg); }

.sidebar.collapsed .sidebar-logo { justify-content: center; padding: 18px 0; }
.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .sidebar-help-card {
  display: none;
}

.sidebar.collapsed .nav-link {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
  font-size: 0;
}
.sidebar.collapsed .nav-link i { font-size: 17px; }

.sidebar.collapsed .btn-logout {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
  font-size: 0;
}
.sidebar.collapsed .btn-logout i { font-size: 15px; }

.sidebar.collapsed .sidebar-nav,
.sidebar.collapsed .sidebar-footer {
  padding-left: 12px;
  padding-right: 12px;
}

@media (max-width: 992px) {
  .sidebar-toggle-btn { display: none; }
}

.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: transparent; border: none; border-radius: 99px; }
.sidebar:hover::-webkit-scrollbar-thumb { background: var(--gray-200); }
.sidebar { scrollbar-width: none; }
.sidebar:hover { scrollbar-width: thin; scrollbar-color: var(--gray-200) transparent; }

.sidebar-logo {
  position: relative;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.sidebar-logo-text {
  color: var(--black);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16.5px;
  letter-spacing: -.2px;
}

.sidebar-logo img,
.sidebar-logo-img {
  max-width: 130px;
  height: 40px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.sidebar-profile-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 4px 14px 10px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  background: var(--gray-50);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
  width: calc(100% - 28px);
}
.sidebar-profile-inline:hover { background: var(--gray-100); }

.user-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--black);
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(245,196,0,.3);
  position: relative;
}

.user-info { flex: 1; min-width: 0; }

.user-info .user-name {
  color: var(--black);
  font-weight: 700; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 130px;
}

.user-info .user-role {
  font-size: 11.5px;
  color: var(--gray-500);
  font-weight: 500;
  margin-top: 1px;
}

.user-info .user-online {
  font-size: 11px;
  color: var(--success-dark);
  font-weight: 600;
  margin-top: 2px;
  display: flex; align-items: center; gap: 5px;
}
.user-info .user-online .status-dot { width: 6px; height: 6px; background: var(--success); border-radius: 50%; }

.sidebar-profile-inline .bi-chevron-down { color: var(--gray-400); font-size: 11px; flex-shrink: 0; }

.sidebar-nav { padding: 8px 12px; flex: 1; }

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 1.1px;
  padding: 14px 10px 6px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  color: var(--gray-600);
  text-decoration: none;
  font-weight: 500;
  font-size: 13.5px;
  margin-bottom: 2px;
  transition: background var(--transition), color var(--transition), transform var(--transition);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
}

.nav-link i { width: 16px; text-align: center; font-size: 15px; flex-shrink: 0; }

.nav-link:hover {
  background: var(--gray-100);
  color: var(--black);
  transform: translateX(1px);
}

.nav-link.active {
  background: var(--gold-light);
  color: var(--gold-dark);
  font-weight: 600;
  border-radius: 10px;
}

.nav-link.active i { color: var(--gold-dark); }

.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 2.5px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar.collapsed .nav-link .nav-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  margin-left: 0;
  padding: 1px 5px;
  font-size: 9.5px;
}

.sidebar-footer {
  padding: 14px 12px;
  border-top: 1px solid var(--border);
}

.sidebar-help-card {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  background: var(--gray-50);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}
.sidebar-help-card:hover { background: var(--gray-100); }
.sidebar-help-card i { font-size: 16px; color: var(--gold-dark); flex-shrink: 0; }
.sidebar-help-card .t { font-size: 12.5px; font-weight: 700; color: var(--black); }
.sidebar-help-card .s { font-size: 11px; color: var(--gray-500); margin-top: 1px; }

.btn-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--gray-600);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

.btn-logout:hover {
  background: var(--danger-light);
  border-color: #F5B5B5;
  color: var(--danger-dark);
}

/* ── MAIN CONTENT ──────────────────────────────────── */
.main-wrap {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition);
}

.main-wrap.sidebar-collapsed { margin-left: 78px; }
@media (max-width: 992px) {
  .main-wrap.sidebar-collapsed { margin-left: 0; }
}

/* ── TOPBAR ────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 26px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--black);
  flex: 1;
  letter-spacing: -.3px;
}

.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.topbar-time {
  font-size: 12.5px;
  color: var(--gray-600);
  background: var(--gray-50);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.topbar-notif {
  position: relative;
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-600); font-size: 16px;
  transition: all var(--transition);
}

.topbar-notif:hover { background: var(--gray-50); border-color: var(--border-dark); color: var(--gold-dark); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.notif-badge {
  position: absolute;
  top: -5px; right: -5px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
  border: 1.5px solid var(--white);
}

/* ── NOTIFICATIONS DROPDOWN ──────────────────────────── */
.notif-wrap { position: relative; }
.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
}
.notif-panel-header {
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  border-bottom: 1px solid var(--gray-100);
}
.notif-panel-body { max-height: 400px; overflow-y: auto; }

.notif-row {
  display: flex;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--gray-100);
}
.notif-row:last-child { border-bottom: none; }
.notif-row-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.notif-row-icon.info    { background: rgba(37,99,235,.1);  color: #2563EB; }
.notif-row-icon.success { background: var(--success-light, rgba(22,163,74,.1)); color: var(--success); }
.notif-row-icon.warning { background: var(--gold-light); color: var(--gold-dark); }
.notif-row-icon.danger  { background: rgba(220,38,38,.1); color: var(--danger); }

.notif-row-body { flex: 1; min-width: 0; }
.notif-row-title { font-size: 13.5px; font-weight: 700; color: var(--black); }
.notif-row-msg { font-size: 12.5px; color: var(--gray-500); margin-top: 2px; line-height: 1.4; }
.notif-row-time { font-size: 11px; color: var(--gray-400); margin-top: 4px; }

.notif-row.is-unread { background: rgba(245,196,0,.06); border-left: 3px solid var(--gold); padding-left: 15px; }

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  color: var(--black);
  font-size: 21px;
}

.topbar-search {
  flex: 1;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 16px;
  height: 40px;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.topbar-search:focus-within { border-color: var(--primary); box-shadow: var(--shadow-focus); background: var(--white); }
.topbar-search i { color: var(--gray-400); font-size: 14px; flex-shrink: 0; }
.topbar-search input {
  border: none; outline: none; background: transparent;
  font-size: 13.5px; font-family: inherit; color: var(--black);
  width: 100%;
}
.topbar-search input::placeholder { color: var(--gray-400); }

.topbar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition);
}
.topbar-user:hover { background: var(--gray-50); }
.topbar-user img,
.topbar-user-initials {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.topbar-user-initials {
  background: var(--gold);
  color: var(--black); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase;
}
.topbar-user-info { display: none; }
.topbar-user-info .n { font-size: 13px; font-weight: 700; color: var(--black); line-height: 1.2; }
.topbar-user-info .r { font-size: 11px; color: var(--gray-500); margin-top: 1px; }
.topbar-user > i { color: var(--gray-400); font-size: 11px; }

@media (min-width: 640px) {
  .topbar-user-info { display: block; }
}

/* ── PAGE CONTENT ──────────────────────────────────── */
.page-content { padding: 28px; flex: 1; }

.page { display: none; }
.page.active { display: block; animation: fadeUp .25s ease; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-header h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -.4px;
}

.page-header p { font-size: 13px; color: var(--gray-500); margin-top: 3px; font-weight: 500; }

/* ── CARDS ─────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-sm);
}

.card-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--gray-50);
}

.card-header h5 {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--black);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -.2px;
}

.card-body { padding: 22px; }

/* ── STAT CARDS ────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.stat-card.wide { grid-column: span 2; }

.stat-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-accent, var(--border-dark));
  opacity: .85;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 90px; height: 90px;
  background: radial-gradient(circle at top right, rgba(255,255,255,.10) 0%, transparent 70%);
  pointer-events: none;
}

.stat-card:hover {
  border-color: var(--border-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.stat-top { display: flex; align-items: center; justify-content: space-between; }

.stat-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.stat-card:hover .stat-icon { transform: scale(1.08); }

/* KPI cards — plain flat cards, no glass, no colored backgrounds.
   Every icon carries the same accent so the row reads as one system. */
.stat-card.gold, .stat-card.blue, .stat-card.green,
.stat-card.red, .stat-card.purple, .stat-card.black, .stat-card.orange {
  background: var(--white);
}

.stat-icon,
.stat-icon.gold, .stat-icon.black, .stat-icon.green,
.stat-icon.red, .stat-icon.blue, .stat-icon.purple, .stat-icon.orange {
  background: #000000;
  color: #F5C400;
}

/* Dashboard KPI row (admin + employee) — first two tiles get the accent
   treatment, every other tile stays a plain white card. */
#dashStats.stat-grid .stat-card:nth-child(1),
#dashStats.stat-grid .stat-card:nth-child(1)::before {
  background: #000000;
}
#dashStats.stat-grid .stat-card:nth-child(1) .stat-val,
#dashStats.stat-grid .stat-card:nth-child(1) .stat-label,
#dashStats.stat-grid .stat-card:nth-child(1) .stat-sub {
  color: #ffffff;
}
#dashStats.stat-grid .stat-card:nth-child(1) .stat-icon {
  background: #F5C400;
  color: #000000;
}

#dashStats.stat-grid .stat-card:nth-child(2),
#dashStats.stat-grid .stat-card:nth-child(2)::before {
  background: #F5C400;
}
#dashStats.stat-grid .stat-card:nth-child(2) .stat-val,
#dashStats.stat-grid .stat-card:nth-child(2) .stat-label,
#dashStats.stat-grid .stat-card:nth-child(2) .stat-sub {
  color: #000000;
}
#dashStats.stat-grid .stat-card:nth-child(2) .stat-icon {
  background: #000000;
  color: #F5C400;
}

/* ── DASHBOARD GRID ROWS (celeb-trend-grid, dash-bottom) ────────── */
.celeb-trend-grid, .dash-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
.celeb-trend-grid.cols-2, .dash-bottom.cols-2 { grid-template-columns: 1fr 1fr; }
.celeb-trend-grid.cols-37 { grid-template-columns: 3fr 7fr; }
.celeb-trend-grid.cols-343 { grid-template-columns: 3fr 4fr 3fr; }

.stat-val {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
  color: var(--black);
  line-height: 1;
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 11.5px;
  color: var(--gray-500);
  font-weight: 600;
  letter-spacing: .2px;
  text-transform: uppercase;
}

.stat-sub {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 500;
  margin-top: -8px;
}

.stat-spark {
  width: 100%;
  height: 22px;
  display: block;
  margin-top: -4px;
}

.stat-spark path { stroke: #000000; }

#dashStats.stat-grid .stat-card:nth-child(1) .stat-spark path { stroke: rgba(255,255,255,.6); }

/* ── PUNCH CARD ────────────────────────────────────── */
.punch-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  color: var(--black);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.punch-date {
  font-size: 15px;
  color: var(--black);
  font-weight: 800;
  letter-spacing: -.1px;
}

.punch-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

.punch-status-badge.checked-in  { background: var(--success-light); color: var(--success-dark); border-color: #A9EDC9; }
.punch-status-badge.checked-out { background: var(--gold-light); color: var(--gold-dark); border-color: #F0D680; }
.punch-status-badge.not-checked  { background: var(--danger-light); color: var(--danger-dark); border-color: #F5B5B5; }

.punch-times { display: flex; gap: 24px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-100); }

.punch-time-box { flex: 1; }

.punch-time-box label {
  font-size: 10.5px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .9px;
  font-weight: 700;
  display: block;
  margin-bottom: 5px;
}

.punch-time-box .time { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--black); font-variant-numeric: tabular-nums; }
.punch-time-box .time.gold { color: var(--gold); }

.punch-hours {
  font-size: 12.5px;
  color: var(--gray-700);
  font-weight: 500;
  margin-bottom: 18px;
  padding: 10px 13px;
  background: var(--gold-light);
  border: 1px solid #F0D680;
  border-radius: var(--radius-xs);
  display: flex; align-items: center; gap: 8px;
}
.punch-hours i { color: var(--gold); font-size: 12px; }

.punch-hours span { color: var(--gold-dark); font-weight: 700; }

.punch-btns { display: flex; gap: 10px; }

.btn-checkin, .btn-checkout {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  gap: 7px;
  transition: all var(--transition);
}

.btn-checkin { background: var(--primary); color: var(--black); border-color: var(--primary); box-shadow: 0 6px 16px -4px rgba(245,196,0,.4); }
.btn-checkin:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-1px); }
.btn-checkin:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-checkout { background: var(--white); color: var(--gold-dark); border-color: var(--primary); }
.btn-checkout:hover:not(:disabled) { background: var(--gold-light); transform: translateY(-1px); }
.btn-checkout:disabled { opacity: .4; cursor: not-allowed; transform: none; color: var(--gray-400); border-color: var(--border); }

.geo-status {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  display: flex; align-items: center; gap: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  border: 1px solid transparent;
}
.geo-status i { font-size: 14px; flex-shrink: 0; }

.geo-status.loading { background: var(--gray-50); border-color: var(--border); color: var(--gray-500); }
.geo-status.loading i { animation: pulse 1.2s ease-in-out infinite; }
.geo-status.ok  { background: var(--success-light); border-color: #A9EDC9; color: var(--success-dark); }
.geo-status.far { background: var(--warning-light); border-color: rgba(234,140,0,.35); color: var(--warning-dark); }

@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.35} }

/* ── TABLES ────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

table thead th {
  background: var(--gray-50);
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: left;
}

table tbody td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--black);
  vertical-align: middle;
}

table tbody tr { transition: background var(--transition); }
table tbody tr:hover { background: var(--gray-50); }
table tbody tr:last-child td { border-bottom: none; }

/* Zebra striping (opt-in, does not alter markup) */
table.zebra tbody tr:nth-child(even) { background: var(--gray-50); }
table.zebra tbody tr:nth-child(even):hover { background: var(--gray-100); }

.emp-avatar-sm {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #ffffff;
  color: var(--gold-dark);
  font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid #CCCCCC;
}

/* ── BADGES (pill-shaped) ─────────────────────────────── */
.badge {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  letter-spacing: .1px;
  border: 1px solid transparent;
}

.badge-present  { background: var(--success-light); color: var(--success-dark); border-color: #A9EDC9; }
.badge-absent   { background: var(--danger-light); color: var(--danger-dark); border-color: #F5B5B5; }
.badge-late     { background: var(--warning-light); color: var(--warning-dark); border-color: rgba(234,140,0,.35); }
.badge-holiday  { background: var(--primary-light); color: var(--primary-dark); border-color: #F0D680; }
.badge-on-leave { background: var(--purple-light); color: var(--purple); border-color: #D9C2F5; }
.badge-on_leave { background: var(--purple-light); color: var(--purple); border-color: #D9C2F5; }
.badge-wfh      { background: var(--primary-light); color: var(--primary-dark); border-color: #F0D680; }
.badge-half_day { background: var(--warning-light); color: var(--warning-dark); border-color: rgba(234,140,0,.35); }
.badge-gold     { background: var(--primary-light); color: var(--primary-dark); border-color: #F0D680; }
.badge-black    { background: var(--dark); color: var(--white); border-color: var(--dark2); }
.badge-active   { background: var(--success-light); color: var(--success-dark); border-color: #A9EDC9; }
.badge-inactive { background: var(--gray-100); color: var(--gray-500); border-color: var(--border); }
.badge-pending  { background: var(--warning-light); color: var(--warning-dark); border-color: rgba(234,140,0,.35); }
.badge-approved { background: var(--primary-light); color: var(--primary-dark); border-color: #F0D680; }
.badge-rejected { background: var(--gray-100); color: var(--gray-600); border-color: var(--border); }
.badge-cancelled { background: var(--gray-100); color: var(--gray-500); border-color: var(--border); text-decoration: line-through; }
.badge-draft    { background: var(--gray-100); color: var(--gray-600); border-color: var(--border); }
.badge-paid     { background: var(--success-light); color: var(--success-dark); border-color: #A9EDC9; }
.badge-admin    { background: var(--purple-light); color: var(--purple); border-color: #D9C2F5; }
.badge-hr       { background: var(--primary-light); color: var(--primary-dark); border-color: #F0D680; }
.badge-manager  { background: var(--primary-light); color: var(--primary-dark); border-color: #F0D680; }
.badge-employee { background: var(--gray-100); color: var(--gray-600); border-color: var(--border); }
.badge-green    { background: var(--success-light); color: var(--success-dark); border-color: #A9EDC9; }
.badge-red      { background: var(--danger-light); color: var(--danger-dark); border-color: #F5B5B5; }
.badge-blue     { background: var(--primary-light); color: var(--primary-dark); border-color: #F0D680; }

/* ── CATEGORY FILTER CARDS (Inventory) ──────────────────── */
.cat-card-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.cat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: center;
  flex: 1 0 100px;
  min-width: 100px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.cat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-dark);
}

.cat-card.active {
  border-color: var(--primary-dark);
  background: var(--primary-light);
}

.cat-card-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  background: var(--gray-100);
  color: var(--gray-600);
}

.cat-card.active .cat-card-icon { background: var(--primary-dark); color: var(--white); }

.cat-card-count { font-size: 18px; font-weight: 800; color: var(--dark); line-height: 1; }
.cat-card-label { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .3px; }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: .1px;
}

.btn:active { transform: translateY(1px); }

.btn-sm  { padding: 7px 14px; font-size: 12.5px; }
.btn-xs  { padding: 4px 10px; font-size: 12px; border-radius: var(--radius-xs); }

.btn-primary { background: var(--black); color: var(--white); border-color: var(--black); box-shadow: 0 4px 12px -3px rgba(0,0,0,.35); }
.btn-primary:hover { background: var(--dark2); border-color: var(--dark2); transform: translateY(-1px); box-shadow: 0 8px 18px -4px rgba(0,0,0,.4); }

.btn-dark {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}
.btn-dark:hover { background: var(--dark2); border-color: var(--dark2); transform: translateY(-1px); }

.btn-outline { background: var(--white); color: var(--black); border-color: var(--border-dark); }
.btn-outline:hover { background: var(--gray-50); border-color: var(--gray-400); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.leave-type-btn.active { background: var(--black); color: var(--white); border-color: var(--black); }
.leave-type-btn.active:hover { background: var(--gray-800); border-color: var(--gray-800); }

.btn-ghost { background: transparent; color: var(--gray-600); border-color: transparent; }
.btn-ghost:hover { background: var(--gray-100); color: var(--black); }

.btn-danger { background: var(--danger); color: var(--white); border-color: var(--danger); box-shadow: 0 4px 12px -3px rgba(220,38,38,.4); }
.btn-danger:hover { background: var(--danger-dark); border-color: var(--danger-dark); transform: translateY(-1px); }

.btn-success { background: var(--success); color: var(--white); border-color: var(--success); box-shadow: 0 4px 12px -3px rgba(22,163,74,.4); }
.btn-success:hover { background: var(--success-dark); border-color: var(--success-dark); transform: translateY(-1px); }

.btn-icon {
  width: 34px; height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-500);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
  transition: all var(--transition);
}

.btn-icon:hover { background: var(--black); color: var(--white); border-color: var(--black); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-icon.danger:hover { background: var(--danger); border-color: var(--danger); color: var(--white); }
.btn-icon.success:hover { background: var(--success); border-color: var(--success); color: var(--white); }

/* Click-feedback loader: applied automatically (see common.js) to any
   button whose click triggers a server call, for the duration of that
   call, so a click always visibly registers and can't double-fire. */
.btn-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
  opacity: .8;
  transform: none !important;
}
.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border: 2px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.6);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
.btn-primary.btn-loading::after,
.btn-dark.btn-loading::after,
.btn-danger.btn-loading::after,
.btn-success.btn-loading::after,
.btn-checkin.btn-loading::after,
.leave-type-btn.active.btn-loading::after {
  border-color: rgba(255,255,255,.35);
  border-top-color: #fff;
}

/* ── ACTION DROPDOWN MENU (table row actions) ─────────────── */
.action-menu {
  display: none;
  position: fixed;
  min-width: 190px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover, 0 8px 24px rgba(0,0,0,.15));
  padding: 6px;
  z-index: 1200;
  visibility: hidden;
}
.action-menu.show { display: block; }
.action-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--dark);
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
}
.action-menu-item i { width: 16px; text-align: center; color: var(--gray-500); }
.action-menu-item:hover { background: var(--gray-100); }
.action-menu-item.danger { color: var(--danger); }
.action-menu-item.danger i { color: var(--danger); }
.action-menu-item.danger:hover { background: rgba(220,38,38,.08); }

/* ── SEARCHABLE SELECT (type-to-search employee combobox) ─── */
.searchable-select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover);
  z-index: 1100;
  padding: 4px;
}
.searchable-select-item {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  cursor: pointer;
}
.searchable-select-item:hover { background: var(--gray-100); }
.searchable-select-empty {
  padding: 8px 10px;
  font-size: 13px;
  color: var(--gray-500);
}

/* ── COLLAPSIBLE CARD SECTION (My Documents) ──────────────── */
.doc-section-chevron { color: var(--gray-400); font-size: 15px; transition: transform var(--transition); }
.doc-section-chevron.open { transform: rotate(90deg); }

/* ── MANAGE ASSETS BUTTON ──────────────────────────────── */
.btn-manage-assets {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn-manage-assets:hover { background: var(--gray-800); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-manage-assets:active { transform: translateY(0); }
.btn-manage-assets .ama-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.btn-manage-assets .ama-count {
  background: var(--primary);
  color: #fff;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── MODALS ─────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(5px);
}

.modal-overlay.show { display: flex; animation: fadeIn .18s ease; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp .24s cubic-bezier(.16,1,.3,1);
  box-shadow: var(--shadow-lg);
}

.modal-box.modal-lg { max-width: 760px; }
.modal-box.modal-xl { max-width: 960px; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  padding: 21px 26px 17px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3, .modal-header h4 {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -.2px;
}

.modal-close {
  width: 32px; height: 32px;
  background: var(--gray-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-500); font-size: 17px;
  transition: all var(--transition);
}

.modal-close:hover { background: var(--danger-light); border-color: #F5B5B5; color: var(--danger-dark); transform: rotate(90deg); }

.modal-body { padding: 24px 26px; }
.modal-footer { padding: 17px 26px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* ── FORM GRID ──────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-group { margin-bottom: 0; }

textarea.form-control { resize: vertical; min-height: 90px; }

/* ── FILTERS ─────────────────────────────────────────── */
.filters {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.filter-select {
  padding: 8px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 500;
  color: var(--black);
  background: var(--white);
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.filter-select:focus { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.filter-select:hover { border-color: var(--border-dark); }

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0 13px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-box:focus-within { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.search-box i { color: var(--gray-400); font-size: 14px; }

.search-box input {
  border: none;
  outline: none;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 500;
  width: 190px;
  font-family: inherit;
  background: transparent;
  color: var(--black);
}

/* ── TOAST ──────────────────────────────────────────── */
.toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  pointer-events: all;
  animation: slideToast .28s cubic-bezier(.16,1,.3,1);
  border-left: 3px solid transparent;
  box-shadow: var(--shadow-lg);
  background: var(--white);
}

@keyframes slideToast {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

.toast.toast-success { background: var(--success-light); color: var(--success-dark); border-color: #A9EDC9; border-left-color: var(--success); }
.toast.toast-error   { background: var(--danger-light); color: var(--danger-dark); border-color: #F5B5B5; border-left-color: var(--danger); }
.toast.toast-info    { background: var(--primary-light); color: var(--primary-dark); border-color: #F0D680; border-left-color: var(--primary); }
.toast.toast-warn    { background: var(--warning-light); color: var(--warning-dark); border-color: rgba(234,140,0,.35); border-left-color: var(--warning); }
.toast.toast-hide    { animation: slideToastOut .25s ease forwards; }

@keyframes slideToastOut { to { opacity: 0; transform: translateX(30px); } }

/* ── EMPTY STATE ─────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray-400);
}

.empty-state i {
  font-size: 42px;
  color: var(--gray-300);
  margin-bottom: 16px;
  display: block;
  background: var(--gray-50);
  width: 84px; height: 84px;
  line-height: 84px;
  border-radius: 50%;
  margin-left: auto; margin-right: auto;
}

.empty-state h4 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-600);
  margin-bottom: 5px;
}

.empty-state p { font-size: 13px; color: var(--gray-400); font-weight: 500; }

/* ── LOADING ─────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2.5px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  display: inline-block;
}

.spinner-sm { width: 15px; height: 15px; border-width: 2px; }

@keyframes spin { to { transform: rotate(360deg); } }

.page-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

/* Skeleton loader utility (additive — safe to use anywhere) */
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
  background-size: 400% 100%;
  animation: skeletonPulse 1.4s ease infinite;
  border-radius: var(--radius-xs);
}
@keyframes skeletonPulse { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── STATUS DOTS ─────────────────────────────────────── */
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.dot-present { background: var(--success); }
.dot-absent  { background: var(--danger); }
.dot-late    { background: var(--warning); }
.dot-holiday { background: var(--primary); }
.dot-leave   { background: var(--purple); }

/* ── CALENDAR STRIP ─────────────────────────────────── */
.cal-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }

.cal-day {
  flex-shrink: 0;
  width: 44px;
  text-align: center;
  padding: 8px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: default;
  background: var(--white);
  transition: transform var(--transition), box-shadow var(--transition);
}

.cal-day:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.cal-day .day-name { font-size: 10px; color: var(--gray-500); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.cal-day .day-num  { font-size: 14px; font-weight: 700; color: var(--black); margin: 3px 0; }
.cal-day .day-dot  { height: 5px; width: 5px; border-radius: 50%; margin: 0 auto; }

.cal-day.present { background: var(--success-light); border-color: #A9EDC9; }
.cal-day.present .day-num { color: var(--success-dark); }
.cal-day.absent  { background: var(--danger-light); border-color: #F5B5B5; }
.cal-day.absent  .day-num { color: var(--danger-dark); }
.cal-day.late    { background: var(--warning-light); border-color: rgba(234,140,0,.35); }
.cal-day.late    .day-num { color: var(--warning-dark); }
.cal-day.today   { border-color: var(--primary); background: var(--primary-light); }
.cal-day.today   .day-num { color: var(--primary-dark); font-weight: 800; }
.cal-day.weekend { background: var(--gray-50); }
.cal-day.weekend .day-num { color: var(--gray-400); }

/* ── PROGRESS BAR ───────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--gray-200);
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--primary);
  transition: width .5s ease;
}

.progress-fill.green { background: var(--success); }
.progress-fill.red   { background: var(--danger); }
.progress-fill.blue  { background: var(--primary); }
.progress-fill.gold  { background: var(--gold); }

/* ── PROFILE BANNER ─────────────────────────────────── */
.profile-banner {
    background: var(--black);
    border-radius: var(--radius) var(--radius) 0 0;
    height: 112px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    position: relative;
}

.profile-avatar-lg {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--black);
  font-weight: 800; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  bottom: -40px; left: 24px;
  border: 3px solid var(--white);
  text-transform: uppercase;
  box-shadow: var(--shadow-md);
}

/* ── LIVE INDICATOR ─────────────────────────────────── */
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--success);
  border-radius: 50%;
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .6; transform: scale(.85); }
}

/* ── SIDEBAR MOBILE OVERLAY ─────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 199;
  backdrop-filter: blur(3px);
}

.sidebar-overlay.show { display: block; }

/* ── TOOLTIPS ───────────────────────────────────────── */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark);
  color: rgba(255,255,255,.92);
  padding: 6px 11px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 500;
  box-shadow: var(--shadow-md);
}

/* Topbar sits at the very top of the viewport — show tooltips below instead of above so they don't get clipped */
.topbar [data-tip]:hover::after {
  bottom: auto;
  top: calc(100% + 7px);
}

/* Fixed-width "View Reason" trigger for table cells holding long free-text
   (e.g. leave reason) — a constant-length label so the column can never
   widen no matter how long the underlying text is. */
.reason-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  font-weight: 500;
  cursor: default;
  white-space: nowrap;
}

/* Full reason text on hover, JS-positioned and appended to <body> (see
   bindReasonPopups in common.js) — same approach as .sb-float-tip, needed
   because .table-wrap's overflow-x:auto also makes overflow-y effectively
   "auto", which would clip a plain absolutely-positioned popup. */
.reason-float-tip {
  display: none;
  position: fixed;
  width: 260px;
  background: var(--dark);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  white-space: pre-wrap;
  text-align: left;
  z-index: 9999;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

/* Sidebar nav-link tooltips use a JS-rendered floating tip (see .sb-float-tip) since
   the sidebar's overflow-y:auto clips any ::after tooltip that tries to escape its bounds. */
.sidebar .nav-link:hover::after,
.sidebar .btn-logout:hover::after {
  display: none;
}

.sb-float-tip {
  position: fixed;
  transform: translateY(-50%);
  background: var(--dark);
  color: rgba(255,255,255,.92);
  padding: 6px 11px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  box-shadow: var(--shadow-md);
}

/* ── CHART ──────────────────────────────────────────── */
.chart-container { position: relative; height: 220px; }

/* ── MINI LIST ROW (birthdays / anniversaries) ──────── */
.mini-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition);
}
.mini-list-row:last-child { border-bottom: none; }
.mini-list-row:hover { background: var(--gray-50); }

.mini-list-info { flex: 1; min-width: 0; }
.mini-list-name {
  font-weight: 700; font-size: 13.5px; color: var(--black);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-list-sub {
  font-size: 11.5px; color: var(--gray-500); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-belated-tag {
  display: inline-block; vertical-align: middle;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: var(--gold-dark); background: var(--gold-light);
  border: 1px solid rgba(245,196,0,.35); border-radius: 20px;
  padding: 1px 7px; margin-left: 4px;
}

.mini-list-date {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 20px;
}
.mini-list-date.pink    { color: var(--black); background: rgba(0,0,0,.06); }
.mini-list-date.gold    { color: var(--gold-dark); background: var(--gold-light); }
.mini-list-date.warning { color: var(--warning-dark); background: var(--warning-light); }
.mini-list-date.purple  { color: var(--purple); background: var(--purple-light); }

/* ── TODAY'S CELEBRATION ROW (highlighted birthday/anniversary) ── */
.mini-list-row.today-celeb {
  background: linear-gradient(90deg, rgba(245,196,0,.14), rgba(245,196,0,.03));
  border-left: 3px solid #F5C400;
  border-bottom: 1px solid rgba(245,196,0,.25);
}
.mini-list-row.today-celeb:hover { background: linear-gradient(90deg, rgba(245,196,0,.2), rgba(245,196,0,.06)); }
.mini-list-row.today-celeb .mini-list-name { color: var(--black); }

.btn-send-wish {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(90deg, #F5C400, #EA8C00);
  color: #14141a;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.btn-send-wish:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,196,0,.4); }
.btn-send-wish:disabled { opacity: .75; cursor: default; }
.btn-send-wish .spinner-sm { width: 11px; height: 11px; border-width: 2px; }
.btn-send-wish.is-sent {
  background: rgba(22,163,74,.12);
  color: var(--success);
  opacity: 1;
}

/* ── TODAY'S CELEBRATIONS BANNER (employee dashboard, inside HR Announcements) ── */
.today-celeb-banner {
  margin: 14px 20px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff8e1 0%, #fdf0cf 100%);
  border: 1px solid rgba(245,196,0,.35);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.today-celeb-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.today-celeb-item {
  display: flex; align-items: center; gap: 12px;
  background: #ffffff;
  border: 1px solid rgba(245,196,0,.4);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 3px 10px rgba(245,196,0,.14);
}
.today-celeb-text { flex: 1; min-width: 0; }
.today-celeb-heading {
  font-size: 14px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -.1px;
}
.today-celeb-wish {
  font-size: 12.5px;
  color: var(--gray-500);
  line-height: 1.4;
  margin-top: 2px;
}

/* ── PENDING LEAVES (premium, paired 30% next to Leave Balance) ── */
.pending-leaves-premium {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 24px 14px;
  border-radius: 14px;
  background: linear-gradient(150deg, #14141a 0%, #000000 100%);
  box-shadow: var(--shadow-sm);
}
.plp-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,196,0,.14);
  border: 1px solid rgba(245,196,0,.3);
  color: var(--gold);
  font-size: 19px;
  margin-bottom: 4px;
}
.plp-num { font-size: 32px; font-weight: 800; color: #ffffff; line-height: 1; letter-spacing: -.5px; }
.plp-label { font-size: 12.5px; font-weight: 700; color: #ffffff; margin-top: 6px; }
.plp-sub { font-size: 11px; color: rgba(255,255,255,.55); }

/* ── LEAVE BALANCE (premium, compact single-row layout) ── */
.leave-bal-card { overflow: hidden; }
.leave-bal-compact { display: flex; align-items: stretch; border-bottom: 1px solid var(--gray-100); }

.leave-bal-hero {
  flex: 0 0 34%;
  text-align: center;
  display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 5px;
  padding: 7px 8px;
  background: linear-gradient(135deg, #fff8e1 0%, #fdf0cf 100%);
  border-right: 1px solid var(--gray-100);
}
.leave-bal-hero .num { font-size: 15px; font-weight: 800; color: var(--gold-dark); line-height: 1; letter-spacing: -.3px; }
.leave-bal-hero .lbl { font-size: 9px; font-weight: 700; color: var(--gray-500); }

.leave-bal-cells { flex: 1; display: flex; }
.leave-bal-cell {
  flex: 1;
  text-align: center;
  display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 4px;
  padding: 7px 4px;
  border-right: 1px solid var(--gray-100);
}
.leave-bal-cell:last-child { border-right: none; }
.leave-bal-cell .n { font-size: 15px; font-weight: 800; color: var(--black); line-height: 1; }
.leave-bal-cell .n.red { color: var(--danger); }
.leave-bal-cell .n.blue { color: #2563EB; }
.leave-bal-cell .l { font-size: 10px; color: var(--gray-500); }

.leave-bal-progress { padding: 8px 20px; }
.leave-bal-notice {
  margin: 0 20px 10px;
  font-size: 11px;
  background: var(--gold-light);
  border: 1px solid rgba(234,140,0,.25);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--gold-dark);
  display: flex; align-items: center; gap: 6px;
}
.leave-bal-foot { padding: 0 20px 12px; }

/* ── DEPARTMENT ATTENDANCE ROWS ──────────────────────── */
.dept-row { padding: 12px 20px; border-bottom: 1px solid var(--gray-100); }
.dept-row:last-child { border-bottom: none; }
.dept-row-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.dept-name { font-size: 13px; font-weight: 700; color: var(--black); }
.dept-frac { font-size: 12px; font-weight: 700; color: var(--gray-500); font-variant-numeric: tabular-nums; }

/* ── CARD HEADER ICON BADGE (premium) ─────────────────── */
.card-header-icon {
  width: 30px; height: 30px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  background: #f5c40000;
  color: var(--black);
}

/* ── LEAVE TREND (horizontal bars) ──────────────────── */
.trend-rows { display: flex; flex-direction: column; gap: 6px; }

.trend-row {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  transition: background var(--transition);
}
.trend-row:hover { background: var(--gray-50); }

.trend-row.is-recent {
  background: rgb(245 196 0);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}
.trend-row.is-recent:hover { background: rgba(0,0,0,.2); }

.trend-month {
  width: 32px; flex-shrink: 0;
  font-size: 12px; font-weight: 700; color: var(--gray-600);
}
.trend-row.is-recent .trend-month { color: #000000; font-weight: 800; }

.trend-bar-track {
  flex: 1; height: 9px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}

.trend-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .7s cubic-bezier(.16,1,.3,1);
}
.trend-bar-fill.past   { background: linear-gradient(90deg, #F5C400, #F5C400); opacity: .8; }
.trend-bar-fill.recent {
    background: #000000;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}

.trend-val {
  width: 28px; flex-shrink: 0;
  text-align: right;
  font-size: 12.5px; font-weight: 800; color: var(--black);
  font-variant-numeric: tabular-nums;
}
.trend-row.is-recent .trend-val { color: #000000; }

.trend-legend {
  display: flex; gap: 18px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(245,196,0,.14);
  font-size: 11.5px; font-weight: 600; color: var(--gray-500);
}

.trend-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.trend-dot.past   { background: #F5C400; }
.trend-dot.recent { background: #000000; }

/* ── FLATICON ───────────────────────────────────────── */
.fi { font-size: 1.1em; vertical-align: middle; }

/* ── PRINT ──────────────────────────────────────────── */
@media print {
  /* margin:0 removes Chrome's own print header/footer (the URL, date and
     "HR Management" title lines). We add our own breathing room as padding on
     the printed modal instead, so the form isn't edge-to-edge. */
  @page { size: A4; margin: 0; }
  html, body { height: auto !important; }

  .sidebar, .topbar, .hamburger, .page-header .btn, .filters { display: none !important; }
  .main-wrap { margin-left: 0 !important; }
  .page-content { padding: 0 !important; }

  /* Keep design colours (the review form's dark header bar, badges) on paper */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* ── Printing a modal (e.g. Confirmation Review "Print / Save PDF") ──
     Without this the fixed, blurred overlay plus the whole page behind it
     printed across ~10 A4 sheets. When a modal is open we drop everything
     else and lay the modal out as one normal, single-flow document. */
  /* #app wraps the sidebar + main content and carries min-height:100vh; with
     @page margin:0 that 100vh is exactly one sheet, so it printed as a blank
     first page ahead of the modal (which is a sibling after #app). Hide the
     whole app chrome when a modal is being printed, and drop the 100vh so it
     can never reserve an empty page. */
  #app { min-height: 0 !important; }
  body:has(.modal-overlay.show) #app,
  body:has(.modal-overlay.show) .toast-wrap,
  body.printing-modal #app,
  body.printing-modal .toast-wrap { display: none !important; }

  .modal-overlay:not(.show) { display: none !important; }
  .modal-overlay.show {
    display: block !important;
    position: static !important;
    inset: auto !important;
    padding: 10mm 8mm !important;   /* our own page margins (replaces @page margin) */
    background: none !important;
    backdrop-filter: none !important;
  }
  .modal-overlay.show .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
  }
  /* Interactive chrome inside the modal shouldn't appear on paper */
  .modal-overlay.show .modal-header .btn,
  .modal-overlay.show .modal-close,
  .modal-overlay.show .modal-footer { display: none !important; }

  /* NOTE: do NOT put break-inside/page-break-inside:avoid on the modal-box.
     If the box lays out even a hair over one page, "avoid" shoves the whole
     thing onto a fresh sheet, leaving page 1 blank. The JS auto-fit already
     scales it under one page; we only guard small units from splitting. */
  .modal-overlay.show tr { page-break-inside: avoid; }
}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 992px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .main-wrap { margin-left: 0; }
  .hamburger { display: flex; }
  .form-grid { grid-template-columns: 1fr; }
  .login-left { display: none; }
  .login-right { width: 100%; }
  .celeb-trend-grid, .dash-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .page-content { padding: 16px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .punch-times { gap: 12px; }
  .punch-time-box .time { font-size: 18px; }
  .filters { gap: 7px; }
  .login-card { padding: 30px 22px; box-shadow: none; border: none; }
}

/* ── Document upload control (My Documents) ──────────── */
.doc-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--border-dark);
  background: var(--gray-50);
  color: var(--gray-600);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition);
  margin-left: 6px;
}
.doc-upload-btn i { font-size: 13px; color: var(--gray-500); transition: color var(--transition); }
.doc-upload-btn:hover {
  border-style: solid;
  border-color: var(--gold);
  background: var(--gold-light);
  color: var(--gold-dark);
}
.doc-upload-btn:hover i { color: var(--gold-dark); }
.doc-upload-btn input[type="file"] { display: none; }

/* Format + size rules shown above the document tables (My Documents, HR detail) */
.doc-format-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  margin: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--gold-light);
  border: 1px solid var(--gold);
  color: var(--gray-700);
  font-size: 12.5px;
  line-height: 1.5;
}
.doc-format-note i { color: var(--gold-dark); font-size: 14px; flex-shrink: 0; }

/* ════════════════════════════════════════════════
   MESSAGES — chat UI (HR/Admin/IT inbox + employee chat)
   ════════════════════════════════════════════════ */
.chat-shell {
  display: flex;
  height: min(640px, 75vh);
}
.chat-list-pane {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
}
.chat-list-filter { padding: 12px; border-bottom: 1px solid var(--gray-200); }
.chat-list-filter .filter-select { width: 100%; }
.chat-list {
  flex: 1;
  overflow-y: auto;
}
.chat-list-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition);
}
.chat-list-item:hover { background: var(--gray-50); }
.chat-list-item.active { background: var(--gold-light); }
.chat-list-item-body { min-width: 0; flex: 1; }
.chat-list-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.chat-list-item-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-item-time { font-size: 11px; color: var(--gray-500); flex-shrink: 0; }
.chat-list-item-bottom { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 2px; }
.chat-list-item-preview { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-item.unread .chat-list-item-preview { color: var(--black); font-weight: 600; }
.chat-unread-dot {
  background: var(--gold);
  color: var(--black);
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
}

.chat-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.chat-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.chat-bubble-list {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-bubble {
  max-width: 70%;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.5;
}
.chat-bubble.theirs {
  align-self: flex-start;
  background: var(--gray-100);
  border-bottom-left-radius: 4px;
}
.chat-bubble.mine {
  align-self: flex-end;
  background: var(--gold-light);
  border: 1px solid rgba(245,196,0,.3);
  border-bottom-right-radius: 4px;
}
.chat-bubble-sender { font-size: 11px; font-weight: 700; color: var(--gray-500); margin-bottom: 3px; }
.chat-bubble-text { white-space: pre-wrap; word-break: break-word; }
.chat-bubble-time { font-size: 10.5px; color: var(--gray-500); margin-top: 4px; text-align: right; }

.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.chat-input-bar textarea {
  flex: 1;
  resize: none;
  max-height: 100px;
}
.chat-input-closed {
  justify-content: center;
  color: var(--gray-500);
  font-size: 13px;
  gap: 6px;
}
.chat-empty-composer { display: flex; flex-direction: column; height: 100%; overflow-y: auto; }

/* Employee "My Messages" topic switcher — shown when there's more than one conversation */
.chat-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-200);
  overflow-x: auto;
}
.chat-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--gray-100);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition);
}
.chat-tab:hover { background: var(--gray-200); }
.chat-tab.active { background: var(--gold); color: var(--black); }
.chat-tab.closed { opacity: .6; }
.chat-tab .chat-unread-dot { width: 18px; height: 18px; min-width: 18px; }

/* Employee picker (New Chat modal) */
.picker-results {
  margin-top: 6px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}
.picker-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
.picker-result-item:hover { background: var(--gray-50); }
.picker-result-empty { padding: 12px; font-size: 12.5px; color: var(--gray-500); text-align: center; }
.picker-selected-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .chat-shell { flex-direction: column; height: auto; }
  .chat-list-pane { width: 100%; border-right: none; border-bottom: 1px solid var(--gray-200); max-height: 240px; }
  .chat-pane { height: min(480px, 70vh); }
}


/* ════════════════════════════════════════════════
   EMPLOYEE / MANAGER DASHBOARD
   Main column + right sidebar, punch cards, announcements,
   celebration lists and the leave balance gauge.
   ════════════════════════════════════════════════ */

.emp-dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
  margin-top: 20px;
}
.emp-dash-main, .emp-dash-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.emp-dash-split {
  display: grid;
  grid-template-columns: 43fr 57fr;
  gap: 16px;
  align-items: start;
}

/* "View All" / "Apply Leave" links in card headers */
.card-link {
  font-size: 12.5px;
  color: var(--gray-500);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition);
}
.card-link:hover { color: var(--black); }

/* Shared black pill button (profile card + leave balance footer) */
.btn-dash-primary {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--black);
  color: #ffffff;
  border: 1px solid var(--black);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-dash-primary:hover { background: var(--dark2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-dash-primary i { font-size: 13px; }

/* ── PUNCH / BALANCE CARDS (top row) ────────────────── */
.punch-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.punch-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px 18px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.punch-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--psc-bar, var(--gold));
}
.punch-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-dark);
}

.psc-head { display: flex; align-items: center; gap: 12px; }
.psc-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--gold-light);
  border: 1px solid rgba(245,196,0,.3);
  color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.psc-headings { min-width: 0; }
.psc-title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -.2px;
}
.psc-sub { font-size: 12px; color: var(--gray-500); font-weight: 500; margin-top: 1px; }
/* The day the times belong to, under the card's label — only the last working
   day card carries one, since "Today" needs no explaining. */
.psc-when { display: block; font-size: 11px; color: var(--gray-400); font-weight: 600; margin-top: 1px; }

.psc-times { flex: 1; display: flex; align-items: center; gap: 10px; }
.psc-time { flex: 1; text-align: center; padding: 2px 4px; }
.psc-time + .psc-time { border-left: 1px solid var(--gray-100); }
.psc-time-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .5px;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
}
.psc-time-val {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.psc-ampm { font-size: 11.5px; font-weight: 700; color: var(--gray-500); margin-left: 3px; }
.psc-empty { color: var(--gray-300); }

.psc-balance {
  flex: 1;
  display: flex; align-items: baseline; justify-content: center;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.psc-unit { font-size: 13px; font-weight: 700; color: var(--gray-500); margin-left: 6px; letter-spacing: 0; }

.psc-btn {
  align-self: center;
  padding: 8px 22px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gray-700);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}
.psc-btn:hover { background: var(--black); border-color: var(--black); color: #ffffff; }

/* ── HR ANNOUNCEMENTS ───────────────────────────────── */
.annc-list { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 8px; }

.annc-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.annc-item:hover { border-color: var(--border-dark); box-shadow: var(--shadow-xs); }
.annc-item.annc-latest {
  background: #FFFDF4;
  border-color: rgba(245,196,0,.45);
  border-left: 3px solid var(--gold);
  box-shadow: 0 2px 10px rgba(245,196,0,.10);
}

.annc-icon-chip {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--gray-100);
  color: var(--gray-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.annc-latest .annc-icon-chip {
  background: var(--gold-light);
  color: var(--gold-dark);
  border: 1px solid rgba(245,196,0,.35);
}

.annc-content { flex: 1; min-width: 0; }
.annc-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.annc-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -.2px;
}
.annc-new-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--gold-dark);
  background: var(--gold-light);
  border: 1px solid rgba(245,196,0,.4);
  border-radius: 20px;
  padding: 2px 8px;
}
.annc-body { font-size: 12.8px; color: var(--gray-600); line-height: 1.55; }
.annc-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.annc-meta {
  font-size: 11px;
  color: var(--gray-400);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}

.badge.annc-badge-normal, .badge.annc-badge-important, .badge.annc-badge-urgent {
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 9.5px;
}
.badge.annc-badge-normal    { background: var(--gray-50); color: var(--gray-600); border-color: var(--border); }
.badge.annc-badge-important { background: var(--warning-light); color: var(--warning-dark); border-color: rgba(234,140,0,.35); }
.badge.annc-badge-urgent    { background: var(--danger-light); color: var(--danger-dark); border-color: rgba(220,38,38,.3); }

/* ── UPCOMING BIRTHDAYS / ANNIVERSARIES (sidebar) ───── */
.emp-event-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition);
}
.emp-event-row:last-child { border-bottom: none; }
.emp-event-row:hover { background: var(--gray-50); }

.emp-event-info { flex: 1; min-width: 0; }
.emp-event-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--black);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.emp-event-dept {
  font-size: 11.5px;
  color: var(--gray-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.emp-event-when { text-align: right; flex-shrink: 0; line-height: 1.35; }
.emp-event-date { font-size: 11.5px; color: var(--gray-600); font-weight: 600; white-space: nowrap; }
.emp-event-years { font-size: 11px; color: var(--gray-400); white-space: nowrap; }
.emp-event-days {
  flex-shrink: 0;
  min-width: 34px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold-dark);
  background: var(--gold-light);
  border: 1px solid rgba(245,196,0,.35);
  border-radius: 20px;
  padding: 3px 8px;
}

/* ── TEAM LEAVE BALANCE (manager sidebar) ───────────── */
.tlb-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--gray-200);
  border-bottom: 1px solid var(--gray-100);
}
.tlb-sum { background: var(--gray-50); padding: 11px 6px; text-align: center; }
.tlb-sum-n {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--black);
  line-height: 1.1;
}
.tlb-sum-n.red  { color: var(--danger); }
.tlb-sum-n.gold { color: var(--gold-dark); }
.tlb-sum-l {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-top: 3px;
}

.tlb-list { max-height: 330px; overflow-y: auto; }
.tlb-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition);
}
.tlb-row:last-child { border-bottom: none; }
.tlb-row:hover { background: var(--gray-50); }

.tlb-info { flex: 1; min-width: 0; }
.tlb-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tlb-bar {
  height: 4px;
  border-radius: 4px;
  background: var(--gray-200);
  margin: 5px 0 4px;
  overflow: hidden;
}
.tlb-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--gold); }
.tlb-bar-fill.is-low { background: var(--warning); }
.tlb-bar-fill.is-neg { background: var(--danger); }
.tlb-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 10.5px;
  color: var(--gray-500);
  font-weight: 500;
}
.tlb-used { white-space: nowrap; }
.tlb-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}
.tlb-chip b { font-weight: 800; color: var(--gray-700); }
.tlb-chip.has-val { background: var(--gold-light); color: var(--gold-dark); }
.tlb-chip.has-val b { color: var(--gold-dark); }
.tlb-chip.is-prob { background: var(--purple-light); color: var(--purple-dark); }

.tlb-bal {
  flex-shrink: 0;
  min-width: 46px;
  text-align: center;
  padding: 4px 7px;
  border-radius: 10px;
  background: var(--success-light);
  border: 1px solid rgba(22,163,74,.25);
}
.tlb-bal.is-low { background: var(--warning-light); border-color: rgba(234,140,0,.3); }
.tlb-bal.is-neg { background: var(--danger-light);  border-color: rgba(220,38,38,.3); }
.tlb-bal-n {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--success-dark);
}
.tlb-bal.is-low .tlb-bal-n { color: var(--warning-dark); }
.tlb-bal.is-neg .tlb-bal-n { color: var(--danger-dark); }
.tlb-bal-l {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* ── UPCOMING HOLIDAYS ──────────────────────────────── */
.emp-holiday-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition);
}
.emp-holiday-row:last-child { border-bottom: none; }
.emp-holiday-row:hover { background: var(--gray-50); }

.emp-holiday-date {
  flex-shrink: 0;
  width: 54px;
  text-align: center;
  padding-right: 10px;
  border-right: 1px solid var(--gray-200);
}
.emp-holiday-day {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.emp-holiday-dt {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--black);
  white-space: nowrap;
}
.emp-holiday-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.emp-holiday-tag {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: capitalize;
  border-radius: 20px;
  padding: 3px 10px;
  border: 1px solid transparent;
}
.emp-holiday-tag.is-national { background: var(--success-light); color: var(--success-dark); border-color: #A9EDC9; }
.emp-holiday-tag.is-festival { background: var(--gold-light); color: var(--gold-dark); border-color: #F0D680; }

/* ── PROFILE CARD (sidebar) ─────────────────────────── */
.emp-profile-card { position: relative; padding: 22px 20px 20px; }

.emp-profile-menu-btn {
  position: absolute;
  top: 14px; right: 14px;
  width: 28px; height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  transition: all var(--transition);
}
.emp-profile-menu-btn:hover { background: var(--gray-100); color: var(--black); }

.emp-profile-top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.emp-profile-avatar-wrap { position: relative; flex-shrink: 0; width: 76px; height: 76px; }
.emp-profile-avatar-wrap img, .emp-profile-initials {
  width: 76px; height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
}
.emp-profile-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--black);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
}
.emp-profile-online-dot {
  position: absolute;
  right: 3px; bottom: 3px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--success);
  border: 2.5px solid var(--white);
}

.emp-profile-meta { min-width: 0; }
.emp-profile-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -.3px;
  line-height: 1.25;
}
.emp-profile-role { font-size: 12.8px; color: var(--gray-500); font-weight: 600; margin-top: 2px; }
.emp-profile-sep { color: var(--gray-300); }
.emp-profile-status {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 9px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 20px;
  padding: 4px 11px;
  border: 1px solid transparent;
}
.emp-profile-status.is-active   { background: var(--success-light); color: var(--success-dark); border-color: #A9EDC9; }
.emp-profile-status.is-inactive { background: var(--gray-100); color: var(--gray-600); border-color: var(--border); }
.emp-profile-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── LEAVE BALANCE OVERVIEW (compact: gauge beside the breakdown) ── */
.lb-body { display: flex; align-items: center; gap: 14px; padding: 8px 16px; }

.lb-gauge { position: relative; width: 92px; flex-shrink: 0; }
.lb-gauge-svg { width: 100%; height: auto; display: block; overflow: visible; }
.lb-gauge-track { fill: none; stroke: var(--gray-200); stroke-width: 14; stroke-linecap: round; }
.lb-gauge-fill {
  fill: none;
  stroke: var(--gold);
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dasharray .7s cubic-bezier(.4,0,.2,1);
}
.lb-gauge-center { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; }
.lb-gauge-num {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--black);
  line-height: 1;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.lb-gauge-lbl { font-size: 9px; color: var(--gray-500); font-weight: 600; margin-top: 1px; }

.lb-stats { flex: 1; min-width: 0; }
.lb-stat {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px solid var(--gray-100);
}
.lb-stat:last-child { border-bottom: none; }
.lb-stat .l { font-size: 11px; color: var(--gray-500); font-weight: 600; }
.lb-stat .n {
  font-size: 13.5px; font-weight: 800; color: var(--black);
  font-variant-numeric: tabular-nums;
}
.lb-stat .n.red  { color: var(--danger); }
.lb-stat .n.blue { color: #2563EB; }

.lb-note {
  margin: 0 16px;
  padding: 4px 9px;
  border-radius: var(--radius-xs);
  background: var(--gold-light);
  border: 1px solid rgba(245,196,0,.3);
  color: var(--gold-dark);
  font-size: 10px;
  font-weight: 600;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.lb-note-sep { color: rgba(201,161,0,.5); margin: 0 2px; }

.lb-foot { padding: 8px 16px 10px; }
.lb-btn { padding: 8px 12px; font-size: 12px; border-radius: var(--radius-xs); }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1250px) {
  .emp-dash { grid-template-columns: minmax(0, 1fr); }
  .emp-dash-side { flex-direction: row; flex-wrap: wrap; }
  .emp-dash-side > * { flex: 1 1 300px; }
}
@media (max-width: 992px) {
  .emp-dash-split { grid-template-columns: 1fr; }
  .punch-stat-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .punch-stat-row { grid-template-columns: 1fr; }
  .emp-profile-top { gap: 13px; }
}

/* Optional "View Details" button on a stat card (statCard's `page` argument) */
.stat-card-btn {
  align-self: center;
  margin-top: 2px;
  padding: 7px 18px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gray-700);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all var(--transition);
}
.stat-card-btn:hover { background: var(--black); border-color: var(--black); color: #ffffff; }
.stat-card-btn i { font-size: 11px; }

/* ════════════════════════════════════════════════
   DASHBOARD WIDGETS — month attendance, assets,
   recent leaves, team today, approvals
   ════════════════════════════════════════════════ */

/* Small grey note next to a card title ("September 2026", "next 7 days") */
.card-header-note {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--gray-400);
  letter-spacing: 0;
}

/* Manager's team row: attendance list gets the wider half */
.emp-dash-split.cols-team { grid-template-columns: 55fr 45fr; }

/* ── MY ATTENDANCE THIS MONTH ───────────────────────── */
.mon-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 16px 18px 6px;
}
.mon-tile {
  text-align: center;
  padding: 12px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.mon-tile .n {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  color: var(--black);
  font-variant-numeric: tabular-nums;
}
.mon-tile .n.green { color: var(--success-dark); }
.mon-tile .n.gold  { color: var(--gold-dark); }
.mon-tile .n.red   { color: var(--danger); }
.mon-tile .l { font-size: 11px; color: var(--gray-500); font-weight: 600; margin-top: 5px; }

.mon-strip-wrap { padding: 10px 18px 18px; }
.mon-strip-head {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.mon-strip { display: flex; gap: 5px; }
.mon-day {
  flex: 1;
  min-width: 0;
  height: 34px;
  border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: default;
  transition: transform var(--transition);
}
.mon-day:hover { transform: translateY(-2px); }
.mon-day.is-present  { background: var(--success-light); color: var(--success-dark); border-color: #A9EDC9; }
.mon-day.is-late     { background: var(--warning-light); color: var(--warning-dark); border-color: rgba(234,140,0,.35); }
.mon-day.is-half_day { background: var(--warning-light); color: var(--warning-dark); border-color: rgba(234,140,0,.35); }
.mon-day.is-absent   { background: var(--danger-light);  color: var(--danger-dark);  border-color: #F5B5B5; }
.mon-day.is-on_leave { background: var(--purple-light);  color: var(--purple);       border-color: #D9C2F5; }
.mon-day.is-wfh      { background: var(--gold-light);    color: var(--gold-dark);    border-color: #F0D680; }
.mon-day.is-none     { background: var(--gray-50);       color: var(--gray-300);     border-color: var(--border); }

.mon-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--gray-500);
  font-weight: 500;
}
.mon-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mon-legend .dot {
  width: 9px; height: 9px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid transparent;
}
.mon-legend .dot.is-present  { background: var(--success-light); border-color: #A9EDC9; }
.mon-legend .dot.is-late     { background: var(--warning-light); border-color: rgba(234,140,0,.35); }
.mon-legend .dot.is-absent   { background: var(--danger-light);  border-color: #F5B5B5; }
.mon-legend .dot.is-on_leave { background: var(--purple-light);  border-color: #D9C2F5; }
.mon-legend .dot.is-wfh      { background: var(--gold-light);    border-color: #F0D680; }

/* ── MY ASSETS ──────────────────────────────────────── */
.asset-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition);
}
.asset-row:last-child { border-bottom: none; }
.asset-row:hover { background: var(--gray-50); }
.asset-icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--gray-100);
  color: var(--gray-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.asset-info { flex: 1; min-width: 0; }
.asset-name {
  font-size: 13px; font-weight: 700; color: var(--black);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asset-sub {
  font-size: 11.5px; color: var(--gray-500); text-transform: capitalize;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asset-date { font-size: 11px; color: var(--gray-400); white-space: nowrap; flex-shrink: 0; }

/* ── RECENT LEAVE APPLICATIONS ──────────────────────── */
.rl-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition);
}
.rl-row:last-child { border-bottom: none; }
.rl-row:hover { background: var(--gray-50); }
.rl-icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--purple-light);
  color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.rl-icon.is-wfh { background: var(--gold-light); color: var(--gold-dark); }
.rl-info { flex: 1; min-width: 0; }
.rl-type { font-size: 13px; font-weight: 700; color: var(--black); }
.rl-days { font-size: 11px; font-weight: 700; color: var(--gray-400); margin-left: 4px; }
.rl-range { font-size: 11.5px; color: var(--gray-500); }

/* ── TEAM ATTENDANCE TODAY (manager) ────────────────── */
.team-today-list { max-height: 296px; overflow-y: auto; }
.team-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition);
}
.team-row:last-child { border-bottom: none; }
.team-row:hover { background: var(--gray-50); }
.team-info { flex: 1; min-width: 0; }
.team-name {
  font-size: 13px; font-weight: 700; color: var(--black);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.team-sub {
  font-size: 11.5px; color: var(--gray-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── PENDING APPROVALS (manager) ────────────────────── */
/* Same cap as the team list beside it, so the two cards stay level */
.appr-list { max-height: 296px; overflow-y: auto; }

.appr-row {
  padding: 13px 18px;
  border-bottom: 1px solid var(--gray-100);
}
.appr-row:last-child { border-bottom: none; }
.appr-top { display: flex; align-items: center; gap: 10px; }
.appr-info { flex: 1; min-width: 0; }
.appr-name {
  font-size: 13px; font-weight: 700; color: var(--black);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appr-meta { font-size: 11.5px; color: var(--gray-500); }
.appr-reason {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--gray-600);
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 7px 10px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.appr-actions { display: flex; gap: 8px; margin-top: 10px; }
.appr-actions .btn { flex: 1; justify-content: center; }

@media (max-width: 992px) {
  .emp-dash-split.cols-team { grid-template-columns: 1fr; }
  .mon-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mon-day span { display: none; }
  .mon-day { height: 26px; }
}

/* ════════════════════════════════════════════════
   TOPBAR USER MENU (Profile / Sign Out)
   ════════════════════════════════════════════════ */
.topbar-user-wrap { position: relative; }
.topbar-user.is-open { background: var(--gray-100); }
.topbar-user.is-open > i { transform: rotate(180deg); }
.topbar-user > i { transition: transform var(--transition); }

.user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 250px;
  max-width: calc(100vw - 32px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
  padding: 6px;
}

.user-menu-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 10px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--gray-100);
}
.user-menu-head img, .user-menu-initials {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--gold);
}
.user-menu-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--black);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}
.user-menu-meta { min-width: 0; }
.user-menu-meta .n {
  font-size: 13.5px; font-weight: 700; color: var(--black); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-menu-meta .r {
  font-size: 11.5px; color: var(--gray-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.user-menu-item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--gray-700);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition);
}
.user-menu-item i { font-size: 15px; color: var(--gray-400); transition: color var(--transition); }
.user-menu-item:hover { background: var(--gray-50); color: var(--black); }
.user-menu-item:hover i { color: var(--gold-dark); }
.user-menu-item.is-danger:hover { background: var(--danger-light); color: var(--danger-dark); }
.user-menu-item.is-danger:hover i { color: var(--danger); }

/* ════════════════════════════════════════════════
   PROFILE PAGE — full employee record
   ════════════════════════════════════════════════ */
.profile-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.profile-side, .profile-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.profile-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

/* Identity card */
.profile-id-card { padding: 0; overflow: hidden; }
.profile-id-top { padding: 26px 20px 20px; text-align: center; }
.profile-id-avatar { width: 92px; height: 92px; margin: 0 auto 14px; }
.profile-id-avatar img, .profile-id-initials {
  width: 92px; height: 92px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
}
.profile-id-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--black);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
}
.profile-id-name {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800; color: var(--black);
  letter-spacing: -.3px;
}
.profile-id-role { font-size: 12.8px; color: var(--gray-500); font-weight: 600; margin-top: 3px; }
.profile-id-sep { color: var(--gray-300); }
.profile-id-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.profile-id-foot { padding: 0 20px 20px; }

/* Detail rows */
.profile-rows { padding: 6px 0; }
.profile-row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 14px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--gray-100);
}
.profile-row:last-child { border-bottom: none; }
.profile-row-label { font-size: 12.5px; color: var(--gray-500); font-weight: 600; }
.profile-row-value {
  font-size: 13.5px; color: var(--black); font-weight: 600;
  word-break: break-word;
  display: flex; align-items: center; gap: 8px;
}
.profile-masked { font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.profile-eye {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gray-500);
  width: 26px; height: 26px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: all var(--transition);
}
.profile-eye:hover { background: var(--black); border-color: var(--black); color: #ffffff; }

.profile-empty {
  padding: 20px;
  font-size: 12.5px;
  color: var(--gray-400);
  text-align: center;
}
.profile-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--gray-500);
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
}
.profile-note i { color: var(--gold-dark); }

@media (max-width: 1100px) {
  .profile-layout { grid-template-columns: minmax(0, 1fr); }
  .profile-side { flex-direction: row; flex-wrap: wrap; }
  .profile-side > * { flex: 1 1 280px; }
}
@media (max-width: 700px) {
  .profile-two { grid-template-columns: 1fr; }
  .profile-row { grid-template-columns: 1fr; gap: 3px; }
}

/* =====================================================
   DAILY CELEBRATION POPUP  (assets/js/daily-popup.js)
   Greets every user once a day with today's birthdays,
   work anniversaries and fresh announcements.
   Wide two-panel layout: black hero panel on the left
   (face + full name), white detail panel on the right.
   ===================================================== */
.dp-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: radial-gradient(120% 120% at 50% 40%, rgba(20,16,0,.72), rgba(0,0,0,.82));
  backdrop-filter: blur(8px) saturate(.9); -webkit-backdrop-filter: blur(8px) saturate(.9);
  opacity: 0; transition: opacity .3s ease;
}
.dp-overlay.dp-in { opacity: 1; }

.dp-card {
  position: relative;
  display: flex; align-items: stretch;
  width: 100%; max-width: 920px; max-height: calc(100vh - 48px);
  background: var(--white);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 60px 120px -20px rgba(0,0,0,.6),
    0 0 0 1px rgba(245,196,0,.22),
    0 0 60px -12px rgba(245,196,0,.25);
  transform: translateY(28px) scale(.955);
  opacity: 0;
  transition: transform .42s cubic-bezier(.2,.9,.28,1), opacity .42s ease;
}
.dp-overlay.dp-in .dp-card { transform: none; opacity: 1; }

/* Hairline gold accent along the very top of the card */
.dp-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 7;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, #FFF0B0 50%, var(--gold) 75%, transparent);
}

/* ── Left hero panel: deep black canvas with a gold aura ── */
.dp-head {
  position: relative;
  flex: 0 0 340px; max-width: 340px;
  padding: 44px 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(245,196,0,.30), transparent 62%),
    radial-gradient(80% 60% at 50% 100%, rgba(245,196,0,.14), transparent 60%),
    linear-gradient(160deg, #000000 0%, #191408 52%, #000000 100%);
  color: var(--white);
  text-align: center;
  overflow: hidden;
}
/* Subtle diagonal sheen across the hero */
.dp-head::before {
  content: ''; position: absolute; inset: -40% -60%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.055) 50%, transparent 58%);
  pointer-events: none;
}
/* Gold seam between the two panels */
.dp-head::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
}
.dp-eyebrow {
  font-size: 10.5px; font-weight: 800; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px; position: relative; z-index: 2;
}

/* ── The face ── */
.dp-emblem {
  width: 124px; height: 124px; margin: 0 auto 20px; position: relative; z-index: 2;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 46px;
  background: linear-gradient(135deg, var(--gold), #FFE477);
  color: #000;
  box-shadow: 0 0 0 5px rgba(245,196,0,.18), 0 0 0 11px rgba(245,196,0,.07), 0 18px 40px rgba(245,196,0,.32);
  animation: dp-pulse 3s ease-in-out infinite;
}
.dp-emblem.dp-emblem-plain { width: 104px; height: 104px; font-size: 42px; }
.dp-emblem img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(0,0,0,.88);
}
/* Fallback when neither a celebration nor a passport-size photo exists */
.dp-emblem .dp-initials {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 42px; font-weight: 800; letter-spacing: 1px;
  color: #000; background: linear-gradient(135deg, #FFE477, var(--gold));
  border: 3px solid rgba(0,0,0,.88);
}
/* Occasion badge on the corner of the face */
.dp-emblem-badge {
  position: absolute; right: -2px; bottom: 3px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  background: #000; border: 2px solid var(--gold);
  box-shadow: 0 6px 16px rgba(0,0,0,.55);
}
@keyframes dp-pulse {
  0%,100% { box-shadow: 0 0 0 5px rgba(245,196,0,.18), 0 0 0 11px rgba(245,196,0,.07), 0 18px 40px rgba(245,196,0,.32); }
  50%     { box-shadow: 0 0 0 9px rgba(245,196,0,.10), 0 0 0 18px rgba(245,196,0,.04), 0 22px 48px rgba(245,196,0,.46); }
}

/* ── Identity under the face ── */
.dp-name {
  position: relative; z-index: 2;
  font-family: var(--font-display);
  font-size: 21px; font-weight: 800; line-height: 1.3; letter-spacing: .2px;
  color: var(--white);
}
.dp-empid {
  position: relative; z-index: 2;
  margin-top: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px;
  color: rgba(255,255,255,.42);
}
.dp-hero-role {
  position: relative; z-index: 2;
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
}
.dp-hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.12);
}
.dp-hero-pill.dp-hero-dept {
  background: rgba(245,196,0,.14); color: var(--gold);
  border-color: rgba(245,196,0,.34);
}
.dp-hero-pill i { font-size: 11.5px; }

.dp-chip {
  display: inline-block; margin-top: 18px; position: relative; z-index: 2;
  padding: 6px 15px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  background: rgba(245,196,0,.16); color: var(--gold);
  border: 1px solid rgba(245,196,0,.38);
}
.dp-chip.dp-chip-urgent    { background: rgba(220,38,38,.18);  color: #FF8A8A; border-color: rgba(220,38,38,.45); }
.dp-chip.dp-chip-important { background: rgba(234,140,0,.18);  color: #FFC46B; border-color: rgba(234,140,0,.45); }

/* ── Right detail panel ── */
.dp-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FFFDF6 0%, var(--white) 40%);
}
.dp-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 44px 40px 16px;
}
.dp-headline {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 800; line-height: 1.24; letter-spacing: -.4px;
  color: var(--black);
}
.dp-headline .dp-gold {
  background: linear-gradient(100deg, #C9A100, #F5C400 45%, #A88400);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-dark);
}
.dp-sub {
  margin-top: 12px;
  font-size: 14.5px; line-height: 1.65; color: var(--gray-500);
}
.dp-meta {
  margin-top: 16px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .2px;
  background: var(--gray-50); color: var(--gray-700);
  border: 1px solid var(--border);
}
.dp-pill i { font-size: 12.5px; color: var(--gray-400); }

/* Announcement body copy */
.dp-message {
  margin-top: 18px; font-size: 14.5px; line-height: 1.78; color: var(--gray-700);
  white-space: pre-wrap;
}

/* The wishing note */
.dp-note {
  position: relative;
  margin-top: 24px; padding: 20px 22px 20px 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(245,196,0,.07), rgba(245,196,0,.02));
  border: 1px solid rgba(245,196,0,.28);
  font-size: 14px; line-height: 1.75; color: var(--gray-700); font-style: italic;
}
.dp-note-mark {
  position: absolute; left: 18px; top: 17px;
  font-size: 20px; font-style: normal; color: var(--gold);
  opacity: .9;
}

/* Wish-by-email panel (birthdays & anniversaries only) */
.dp-wish {
  margin-top: 22px; padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0A0A0A, #1C1808);
  border: 1px solid rgba(245,196,0,.3);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
}
.dp-wish-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold); line-height: 1.5;
}
.dp-wish-label b {
  display: block; margin-top: 4px;
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: rgba(255,255,255,.72);
}
.dp-wish-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dp-mail {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 24px; border-radius: 11px; white-space: nowrap;
  background: linear-gradient(135deg, var(--gold), #FFD84D);
  color: #000;
  font-size: 13.5px; font-weight: 800; letter-spacing: .2px; text-decoration: none;
  box-shadow: 0 8px 22px rgba(245,196,0,.32);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.dp-mail:hover {
  color: #000; filter: brightness(1.06);
  transform: translateY(-2px); box-shadow: 0 12px 28px rgba(245,196,0,.45);
}
.dp-mail i { font-size: 15px; }

/* ── Footer ── */
.dp-foot {
  flex-shrink: 0;
  padding: 18px 40px 26px;
  display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}
.dp-dots { display: flex; gap: 7px; }
.dp-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gray-300);
  transition: background .2s, width .2s;
}
.dp-dots i.on   { background: var(--gold); width: 20px; border-radius: 4px; }
.dp-dots i.done { background: var(--gold-dark); opacity: .45; }
.dp-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.dp-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 22px; border-radius: 11px; cursor: pointer;
  font-size: 13px; font-weight: 700; border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.dp-btn-ghost { background: var(--white); color: var(--gray-600); border-color: var(--border-dark); }
.dp-btn-ghost:hover { color: var(--black); border-color: var(--gray-400); }
.dp-btn-primary { background: var(--black); color: var(--gold); }
.dp-btn-primary:hover { background: var(--dark2); transform: translateY(-1px); }

/* Close sits on the card (not a panel) so it stays top-right in both layouts */
.dp-close {
  position: absolute; top: 16px; right: 16px; z-index: 8;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-100); color: var(--gray-600);
  border: 1px solid var(--border); font-size: 14px;
  transition: background .15s, color .15s;
}
.dp-close:hover { background: var(--gray-200); color: var(--black); }

/* ── Sparkles / confetti (birthdays & anniversaries) ──
   Sits at card level and floats above every layer so the confetti falls
   across the whole popup, both panels alike. pointer-events:none keeps
   the buttons underneath fully clickable. */
.dp-sparkles {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 6; border-radius: 24px;
}
.dp-spark {
  position: absolute; top: -14px;
  width: 8px; height: 8px; border-radius: 2px;
  opacity: 0;
  animation: dp-fall linear infinite;
  --dp-travel: 480px;
  --dp-drift: 0px;
}
.dp-spark.round { border-radius: 50%; }
@keyframes dp-fall {
  0%   { opacity: 0; transform: translate3d(0, -14px, 0) rotate(0deg); }
  8%   { opacity: .95; }
  85%  { opacity: .8; }
  100% { opacity: 0; transform: translate3d(var(--dp-drift), var(--dp-travel), 0) rotate(600deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dp-spark, .dp-emblem { animation: none; }
  .dp-overlay, .dp-card { transition: none; }
}

/* ── Narrow screens: fall back to the stacked layout ── */
@media (max-width: 860px) {
  .dp-card { flex-direction: column; max-width: 540px; }
  .dp-head {
    flex: 0 0 auto; max-width: none; width: 100%;
    padding: 32px 26px 28px;
  }
  .dp-head::after {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
  }
  .dp-emblem { width: 100px; height: 100px; font-size: 40px; }
  .dp-emblem .dp-initials { font-size: 35px; }
  .dp-emblem-badge { width: 34px; height: 34px; font-size: 17px; }
  .dp-body { padding: 28px 26px 12px; text-align: center; }
  .dp-meta { justify-content: center; }
  .dp-headline { font-size: 25px; }
  .dp-note { text-align: left; }
  .dp-wish { justify-content: center; text-align: center; flex-direction: column; gap: 14px; }
  .dp-foot { padding: 16px 26px 22px; }
}
@media (max-width: 560px) {
  .dp-overlay { padding: 14px; }
  .dp-head  { padding: 28px 20px 24px; }
  .dp-body  { padding: 24px 20px 10px; }
  .dp-foot  { padding: 16px 20px 20px; flex-wrap: wrap; }
  .dp-headline { font-size: 22px; }
  .dp-name { font-size: 19px; }
}

/* =====================================================
   WE'RE HIRING WIDGET — internal job board (Dashboard sidebar)
   Sits above the profile card for employee / manager / IT and shows
   ONE opening at a time, sliding to the next every few seconds and
   pausing while the pointer is on it. Each opening carries its own
   soft tint so consecutive slides read as different roles.
   ===================================================== */

.hiring-band {
  position: relative;
  padding: 14px 14px 12px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* Gold hairline along the top edge — the one "highlighted" cue. */
.hiring-band::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), #FFDE59 55%, transparent);
}

.hiring-band-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.hiring-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--gold-dark);
  background: var(--gold-light);
  border: 1px solid rgba(245,196,0,.4);
  padding: 4px 9px; border-radius: 999px;
}
.hiring-title {
  margin: 7px 0 10px;
  font-size: 11.5px; font-weight: 600; color: var(--gray-500);
}
.hiring-all-btn {
  font-size: 11.5px; font-weight: 700; color: var(--gold-dark);
  cursor: pointer; white-space: nowrap;
  background: none; border: none; padding: 0;
  transition: color .18s;
}
.hiring-all-btn:hover { color: var(--black); text-decoration: underline; }

/* One slide at a time here; the All Openings modal still wraps a grid. */
.hiring-strip { display: block; }
.job-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.job-grid.count-1 { grid-template-columns: 1fr; }

/* Each slide is a fresh node, so this replays on every change. */
.hiring-strip .job-card.is-entering { animation: jobSlideIn .34s ease both; }
@keyframes jobSlideIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

/* In a 340px sidebar the two-column profile grid gets too cramped —
   one fact per line reads far better. */
.hiring-strip .job-card { gap: 8px; }
.hiring-strip .job-card:hover { transform: none; box-shadow: none; }

.job-dots { display: flex; justify-content: center; gap: 6px; margin-top: 11px; }
.job-dot {
  width: 6px; height: 6px; padding: 0; border-radius: 50%;
  background: var(--gray-300); border: none; cursor: pointer;
  transition: background .2s, width .2s;
}
.job-dot:hover { background: var(--gray-400); }
.job-dot.is-on { width: 18px; border-radius: 999px; background: var(--gold); }

/* ── Card ───────────────────────────────────────────────────────
   A compact "spec sheet" for one opening: tinted surface, a colour
   rail down the left, the four facts in a white inset panel, and a
   single gold action. Each opening carries its own tint so one slide
   is visibly a different role from the last.
   ---------------------------------------------------------------- */
.job-card {
  --tone-bg:     #FBF8F1;
  --tone-border: #EADFC9;
  --tone-ink:    #8A6A1F;
  --tone-accent: #C9A227;

  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 14px 13px 17px;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.85), transparent 60%),
    linear-gradient(158deg, var(--tone-bg) 0%, #FFFFFF 82%);
  border: 1px solid var(--tone-border);
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 10px 22px -18px rgba(0,0,0,.45);
  transition: box-shadow .22s, transform .22s;
}
/* Colour rail — fades out downward so it reads as a highlight, not a block. */
.job-card::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--tone-accent), rgba(0,0,0,0) 92%);
}
.job-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Tints rotate by position — see Jobs._cardHtml() in assets/js/jobs.js. */
.job-card.tone-2 { --tone-bg: #F5F7FA; --tone-border: #DCE3EC; --tone-ink: #3B4A63; --tone-accent: #5B7396; }
.job-card.tone-3 { --tone-bg: #F3F7F3; --tone-border: #D9E6DB; --tone-ink: #3C6247; --tone-accent: #5C8A6B; }
.job-card.tone-4 { --tone-bg: #FAF5F6; --tone-border: #ECDDE1; --tone-ink: #77455A; --tone-accent: #9C6B80; }

/* Oversized glyph bled into the top-right corner — the one decorative
   flourish, kept faint enough to never fight the text. */
.job-watermark {
  position: absolute; top: -14px; right: -12px;
  font-size: 84px; line-height: 1; color: var(--tone-accent);
  opacity: .07; pointer-events: none;
}

.job-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.job-card-role {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 15px; font-weight: 800; color: var(--black);
  line-height: 1.25; letter-spacing: -.25px;
}
.job-card-seats {
  flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--white); background: var(--tone-accent);
  border: none; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 3px 8px -4px var(--tone-accent);
}
.job-card-dept {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 7px; font-size: 10.5px; font-weight: 600; color: var(--tone-ink);
  background: rgba(255,255,255,.75); border: 1px solid var(--tone-border);
  padding: 3px 9px; border-radius: 999px; align-self: flex-start;
}

/* Profile — a white inset panel, one fact per line, value right-aligned. */
.job-spec-grid {
  display: grid; grid-template-columns: 1fr; gap: 0;
  padding: 2px 11px;
  background: rgba(255,255,255,.8);
  border: 1px solid var(--tone-border);
  border-radius: var(--radius-xs);
}
.job-spec {
  display: grid; grid-template-columns: 15px minmax(0, 1fr);
  align-items: center; gap: 8px; padding: 7px 0; min-width: 0;
}
.job-spec + .job-spec { border-top: 1px dashed var(--tone-border); }
.job-spec i { font-size: 11px; color: var(--tone-accent); text-align: center; }
.job-spec > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; min-width: 0;
}
.job-spec span {
  flex-shrink: 0;
  font-size: 8.5px; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: var(--gray-400);
}
.job-spec b {
  font-size: 11.5px; font-weight: 700; color: var(--gray-800);
  line-height: 1.3; text-align: right; overflow-wrap: anywhere;
}

.job-skills-label {
  display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: 6px;
}
.job-skill-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.job-skill {
  font-size: 10.5px; font-weight: 500; color: var(--gray-600);
  background: rgba(255,255,255,.85); border: 1px solid var(--tone-border);
  border-radius: 999px; padding: 3px 9px;
}
.job-skill.is-empty { color: var(--gray-400); font-style: italic; border-style: dashed; background: transparent; }

.job-refer-btn {
  position: relative; overflow: hidden;
  margin-top: auto; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 12px; border-radius: var(--radius-xs);
  background: linear-gradient(135deg, #FFD84D 0%, var(--gold) 48%, #E0B400 100%);
  color: var(--black); border: none;
  font-size: 12px; font-weight: 800; letter-spacing: .2px; cursor: pointer;
  box-shadow: 0 6px 16px -9px rgba(201,162,0,.95);
  transition: transform .18s, box-shadow .18s;
}
.job-refer-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(201,162,0,1); }
.job-refer-btn .bi-arrow-right { transition: transform .18s; font-size: 11px; }
.job-refer-btn:hover .bi-arrow-right { transform: translateX(3px); }
/* A slow light sweep across the button — catches the eye once, then rests. */
.job-refer-btn::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  animation: jobShine 4.5s ease-in-out infinite;
}
@keyframes jobShine {
  0%, 62% { left: -60%; }
  86%     { left: 120%; }
  100%    { left: 120%; }
}
@media (prefers-reduced-motion: reduce) {
  .job-refer-btn::after { animation: none; }
  .hiring-strip .job-card.is-entering { animation: none; }
}

/* ── Featured (single opening) ──────────────────────────────────
   Profile on the left across three columns, its own call to action
   on the right, so one job fills the band as deliberately as three. */
.job-card.is-featured {
  flex-direction: row; align-items: stretch; gap: 20px; padding: 16px 18px 16px 21px;
}
.job-card.is-featured:hover { transform: none; }
.job-feat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.job-card.is-featured .job-card-role { font-size: 17px; }
.job-feat-side {
  width: 214px; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  padding-left: 20px; border-left: 1px dashed var(--tone-border);
}
.job-feat-cta-title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 700; color: var(--black);
}
.job-feat-cta-sub { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--gray-500); }
.job-card.is-featured .job-refer-btn { margin-top: 3px; }

.job-search-wrap { position: relative; margin-bottom: 16px; }
.job-search-wrap i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--gray-400); font-size: 14px; pointer-events: none;
}
.job-search-wrap .form-control { padding-left: 38px; }

/* Refer a Friend — which job this referral is against. */
.refer-job-pill {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 14px; margin-bottom: 18px;
  border-radius: var(--radius-xs);
  background: var(--gold-light); border: 1px solid rgba(245,196,0,.35);
  font-size: 13px; color: var(--black);
}
.refer-job-pill i { color: var(--gold-dark); }
.refer-job-pill span { color: var(--gray-500); font-size: 12px; }

.form-hint { font-size: 12px; color: var(--gray-500); margin-top: 5px; }

/* Referral rows in My Requests / Request Management. */
.referral-flag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--gold-dark); background: var(--gold-light);
  border: 1px solid rgba(245,196,0,.35);
  padding: 3px 8px; border-radius: 999px;
}
.referral-detail { font-size: 12.5px; color: var(--gray-600); line-height: 1.6; }
.referral-detail b { color: var(--black); font-weight: 600; }

/* The featured card (a single search hit in the All Openings modal) has no
   room for its side panel here — stack it under the profile instead. */
@media (max-width: 900px) {
  .job-card.is-featured { flex-direction: column; gap: 14px; }
  .job-feat-side {
    width: auto; padding-left: 0; padding-top: 12px;
    border-left: none; border-top: 1px dashed var(--tone-border);
  }
  .job-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .hiring-band { padding: 13px 12px 11px; }
  .job-card.is-featured .job-card-role { font-size: 15px; }
}

/* ════════════════════════════════════════════════
   EMPLOYEE DASHBOARD — PHONE (iOS-style, theme colours only)
   Only the employee / manager / IT dashboard (#page-dashboard.is-emp-dash,
   set in includes/pages/dashboard.php) and only below 640px. Desktop,
   tablet and the admin / HR dashboard never match any rule in here.
   Palette is the app theme — black, white, gold — with green kept only
   for "checked in" and red only for "absent". No shadows anywhere.
   ════════════════════════════════════════════════ */

/* Phone-only pieces the markup / JS always render — hidden everywhere else */
.dash-head-dept,
.ios-quick,
.ios-tabbar,
.psc-status,
.psc-btn-chev { display: none; }

@media (max-width: 640px) {
  #page-dashboard.is-emp-dash {
    --ink:        #0A0A0A;
    --ink-2:      #6E6E73;                  /* secondary text */
    --ink-3:      #AEAEB2;
    --line:       #EAEAEA;                  /* card borders */
    --sep:        rgba(0,0,0,.07);          /* hairlines inside cards */
    --fill:       #F4F4F5;                  /* neutral chip / icon background */
    --gold-soft:  rgba(245,196,0,.14);
    --gold-line:  rgba(245,196,0,.45);
    --gold-ink:   #7A5E00;                  /* gold-toned text that still reads on white */
    --radius-ios: 20px;
    /* SF Pro on iPhone, Inter everywhere else — every component that asks
       for --font / --font-display inside this page picks it up. */
    --font:         -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;

    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    padding-top: 2px;
  }
  #page-dashboard.is-emp-dash h2,
  #page-dashboard.is-emp-dash h5 { font-family: var(--font-display); }
  /* Flat design on the phone: no shadows at all. A widget added to this
     dashboard later will be flat here too — that's this line, on purpose. */
  #page-dashboard.is-emp-dash * { box-shadow: none; }

  /* ── Large-title greeting ─────────────────────────── */
  #page-dashboard.is-emp-dash .page-header {
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 14px;
    margin: 4px 2px 18px;
  }
  #page-dashboard.is-emp-dash .dash-greeting {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
  }
  #page-dashboard.is-emp-dash .dash-greeting p {
    order: -1;
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  #page-dashboard.is-emp-dash .page-header h2 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.2px;
    line-height: 1.2;
    color: var(--ink-2);
  }
  #page-dashboard.is-emp-dash .dash-greet-name {
    display: block;
    margin-top: 2px;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1.12;
    color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #page-dashboard.is-emp-dash .page-header h2 .bi-emoji-smile { display: none; }

  /* Department badge, level with the name; long names end in "…" */
  #page-dashboard.is-emp-dash .dash-head-dept:not([hidden]) {
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 1;
    min-width: 0;
    max-width: 48%;
    margin-bottom: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -.1px;
    white-space: nowrap;
  }
  #page-dashboard.is-emp-dash .dash-head-dept i { flex-shrink: 0; font-size: 12px; color: var(--gold-ink); }
  #page-dashboard.is-emp-dash .dash-head-dept span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* ── Quick actions: 3 × 2 KPI-style tiles ─────────── */
  /* Icon top-left, ↗ top-right, label bottom-left. Each tile takes one of
     four theme finishes from its is-* class — black, gold, light grey, white
     — laid out diagonally in the markup so no two neighbours match. */
  #page-dashboard.is-emp-dash .ios-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  #page-dashboard.is-emp-dash .ios-quick-item {
    position: relative;
    min-width: 0;
    min-height: 104px;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 12px 12px 13px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease;
  }
  #page-dashboard.is-emp-dash .ios-quick-item:active { transform: scale(.96); opacity: .92; }
  #page-dashboard.is-emp-dash .ios-quick-icon {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--ink);
    font-size: 16px;
  }
  #page-dashboard.is-emp-dash .ios-quick-go {
    position: absolute;
    top: 13px; right: 12px;
    font-size: 13px;
    line-height: 1;
    color: var(--ink-3);
  }
  #page-dashboard.is-emp-dash .ios-quick-lbl {
    max-width: 100%;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.2px;
    line-height: 1.2;
    color: inherit;
  }

  /* Black — gold glow in the corner, gold icon */
  #page-dashboard.is-emp-dash .ios-quick-item.is-black {
    border-color: var(--ink);
    background: radial-gradient(120% 90% at 100% 0%, rgba(245,196,0,.22), rgba(245,196,0,0) 60%), var(--ink);
    color: #fff;
  }
  #page-dashboard.is-emp-dash .is-black .ios-quick-icon { background: rgba(255,255,255,.1); color: var(--gold); }
  #page-dashboard.is-emp-dash .is-black .ios-quick-go   { color: rgba(255,255,255,.5); }

  /* Theme yellow — black icon disc */
  #page-dashboard.is-emp-dash .ios-quick-item.is-gold {
    border-color: #E9BB00;
    background: linear-gradient(145deg, #FFD83A 0%, var(--gold) 60%);
    color: var(--ink);
  }
  #page-dashboard.is-emp-dash .is-gold .ios-quick-icon { background: var(--ink); color: var(--gold); }
  #page-dashboard.is-emp-dash .is-gold .ios-quick-go   { color: rgba(0,0,0,.45); }

  /* Light grey — white icon disc */
  #page-dashboard.is-emp-dash .ios-quick-item.is-gray {
    border-color: #E8E8EA;
    background: #F2F2F4;
  }
  #page-dashboard.is-emp-dash .is-gray .ios-quick-icon { background: #fff; }

  /* White — soft gold icon disc (the default above) */
  #page-dashboard.is-emp-dash .ios-quick-item.is-white { background: #fff; }

  /* ── Layout: one column, iOS spacing ──────────────── */
  #page-dashboard.is-emp-dash .emp-dash { margin-top: 0; gap: 14px; }
  #page-dashboard.is-emp-dash .emp-dash-main,
  #page-dashboard.is-emp-dash .emp-dash-side,
  #page-dashboard.is-emp-dash .emp-dash-split { gap: 14px; }
  #page-dashboard.is-emp-dash .emp-dash-side { flex-direction: column; }
  #page-dashboard.is-emp-dash .emp-dash-side > * { flex: none; }

  /* ── Cards: white, thin grey border ───────────────── */
  #page-dashboard.is-emp-dash .card,
  #page-dashboard.is-emp-dash .card:hover {
    border: 1px solid var(--line);
    border-radius: var(--radius-ios);
    background: #fff;
  }
  #page-dashboard.is-emp-dash .card-header {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 16px 16px 8px;
    background: transparent;
    border-bottom: 0;
  }
  /* Icon + title, with any note ("September 2026") dropped under the title
     as a subtitle (it's pinned to the title's column, so it takes row 2). */
  #page-dashboard.is-emp-dash .card-header h5 {
    display: grid;
    grid-template-columns: 30px minmax(0, auto);
    align-items: center;
    column-gap: 11px;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.35px;
    line-height: 1.25;
    color: var(--ink);
  }
  #page-dashboard.is-emp-dash .card-header h5 .card-header-note { grid-column: 2; margin-top: 1px; }
  #page-dashboard.is-emp-dash .card-header-note {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink-2);
  }
  /* One icon style for every card: black squircle, gold glyph */
  #page-dashboard.is-emp-dash .card-header-icon {
    width: 30px; height: 30px;
    border-radius: 9px;
    font-size: 14px;
    background: var(--ink);
    color: var(--gold);
  }
  #page-dashboard.is-emp-dash .card-link,
  #page-dashboard.is-emp-dash .card-link:hover {
    flex-shrink: 0;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
  }
  #page-dashboard.is-emp-dash .annc-from { display: none; }
  #page-dashboard.is-emp-dash .empty-state { color: var(--ink-2); }

  /* ── Punch widgets ────────────────────────────────── */
  /* Today = full-width card on top (the one gold-tinted card on the page);
     last working day + leave balance = two tiles side by side under it. */
  #page-dashboard.is-emp-dash .punch-stat-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  #page-dashboard.is-emp-dash .punch-stat-card,
  #page-dashboard.is-emp-dash .punch-stat-card:hover {
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-ios);
    background: #fff;
    transform: none;
    transition: transform .18s ease;
  }
  #page-dashboard.is-emp-dash .punch-stat-card::before { display: none; }
  #page-dashboard.is-emp-dash .punch-stat-card:active { transform: scale(.98); }
  #page-dashboard.is-emp-dash .psc-icon {
    border: 0;
    background: var(--ink);
    color: var(--gold);
  }

  /* Today */
  #page-dashboard.is-emp-dash .punch-stat-card.is-today,
  #page-dashboard.is-emp-dash .punch-stat-card.is-today:hover {
    grid-column: 1 / -1;
    order: -1;
    padding: 18px 16px 16px;
    background: #FFFCF0;
    border-color: var(--gold-line);
  }
  #page-dashboard.is-emp-dash .is-today .psc-icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: var(--gold);
    color: var(--ink);
    font-size: 17px;
  }
  #page-dashboard.is-emp-dash .is-today .psc-headings { display: flex; flex-direction: column; }
  #page-dashboard.is-emp-dash .is-today .psc-sub {
    order: -1;
    margin: 0 0 1px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-ink);
  }
  #page-dashboard.is-emp-dash .is-today .psc-title { font-size: 17px; font-weight: 700; color: var(--ink); }

  /* Status: neutral grey pill; only "Checked in" gets the green highlight */
  #page-dashboard.is-emp-dash .psc-status {
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-start;
    flex-shrink: 0;
    margin-left: auto;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: #fff;
    color: var(--ink);
  }
  #page-dashboard.is-emp-dash .psc-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
  #page-dashboard.is-emp-dash .psc-status.is-live .psc-status-dot { background: #22A447; animation: iosLivePulse 1.8s ease-out infinite; }
  #page-dashboard.is-emp-dash .psc-status.is-leave .psc-status-dot { background: var(--gold); }

  #page-dashboard.is-emp-dash .is-today .psc-times {
    gap: 0;
    padding: 14px 4px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
  }
  #page-dashboard.is-emp-dash .is-today .psc-time + .psc-time { border-left: 1px solid var(--sep); }
  #page-dashboard.is-emp-dash .is-today .psc-time-lbl {
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--ink-2);
  }
  #page-dashboard.is-emp-dash .is-today .psc-time-val {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--ink);
  }
  #page-dashboard.is-emp-dash .is-today .psc-ampm  { font-size: 13px; font-weight: 600; color: var(--ink-2); }
  #page-dashboard.is-emp-dash .is-today .psc-empty { color: #C7C7CC; }

  #page-dashboard.is-emp-dash .is-today .psc-btn,
  #page-dashboard.is-emp-dash .is-today .psc-btn:hover {
    align-self: stretch;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    background: var(--ink);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
  }
  #page-dashboard.is-emp-dash .is-today .psc-btn-chev { display: inline; font-size: 12px; color: var(--gold); }

  /* Small tiles (last working day, leave balance) — whole tile is the tap target */
  #page-dashboard.is-emp-dash .punch-stat-card.is-last,
  #page-dashboard.is-emp-dash .punch-stat-card.is-balance {
    min-height: 158px;
    padding: 14px 14px 15px;
  }
  #page-dashboard.is-emp-dash .is-last .psc-head,
  #page-dashboard.is-emp-dash .is-balance .psc-head {
    flex-direction: column; align-items: flex-start; gap: 10px;
  }
  #page-dashboard.is-emp-dash .is-last .psc-icon,
  #page-dashboard.is-emp-dash .is-balance .psc-icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    font-size: 15px;
  }
  #page-dashboard.is-emp-dash .is-last .psc-title { display: none; }
  #page-dashboard.is-emp-dash .is-last .psc-sub,
  #page-dashboard.is-emp-dash .is-balance .psc-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.2px;
    line-height: 1.25;
    color: var(--ink);
  }
  #page-dashboard.is-emp-dash .is-last .psc-when,
  #page-dashboard.is-emp-dash .is-balance .psc-sub {
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
  }
  #page-dashboard.is-emp-dash .is-last .psc-times {
    flex: 0 0 auto;
    flex-direction: column; align-items: stretch;
    gap: 0;
    margin-top: auto;
  }
  #page-dashboard.is-emp-dash .is-last .psc-time {
    display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
    padding: 5px 0;
    text-align: left;
  }
  #page-dashboard.is-emp-dash .is-last .psc-time + .psc-time { border-left: 0; border-top: 1px solid var(--sep); }
  #page-dashboard.is-emp-dash .is-last .psc-time-lbl {
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-2);
  }
  #page-dashboard.is-emp-dash .is-last .psc-time-lbl i { display: none; }
  #page-dashboard.is-emp-dash .is-last .psc-time-val { font-size: 16px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
  #page-dashboard.is-emp-dash .is-last .psc-ampm { font-size: 10.5px; margin-left: 2px; color: var(--ink-2); }

  #page-dashboard.is-emp-dash .is-balance .psc-balance {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: auto;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -1.2px;
  }
  #page-dashboard.is-emp-dash .is-balance .psc-unit { font-size: 14px; font-weight: 600; margin-left: 5px; color: var(--ink-2); }

  #page-dashboard.is-emp-dash .is-last .psc-btn,
  #page-dashboard.is-emp-dash .is-balance .psc-btn,
  #page-dashboard.is-emp-dash .is-last .psc-btn:hover,
  #page-dashboard.is-emp-dash .is-balance .psc-btn:hover {
    /* explicit size — an absolutely positioned <button> does not stretch
       from inset:0 alone (Chrome shrinks it to its content) */
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--ink-3);
  }
  #page-dashboard.is-emp-dash .is-last .psc-btn-txt,
  #page-dashboard.is-emp-dash .is-balance .psc-btn-txt {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #page-dashboard.is-emp-dash .is-last .psc-btn-chev,
  #page-dashboard.is-emp-dash .is-balance .psc-btn-chev {
    display: block;
    position: absolute;
    top: 21px; right: 14px;
    font-size: 14px;
  }

  /* ── HR announcements as an inset list ────────────── */
  #page-dashboard.is-emp-dash .annc-list { padding: 2px 0 6px; gap: 0; }
  #page-dashboard.is-emp-dash .annc-item,
  #page-dashboard.is-emp-dash .annc-item:hover {
    margin: 0 8px;
    padding: 12px 10px 12px 8px;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    transform: none;
  }
  #page-dashboard.is-emp-dash .annc-item.annc-latest,
  #page-dashboard.is-emp-dash .annc-item.annc-latest:hover {
    background: #FFFCF0;
    border-color: var(--gold-line);
  }
  #page-dashboard.is-emp-dash .annc-item::before { display: none; }
  /* chips: neutral by default, gold for new / important, red only for urgent */
  #page-dashboard.is-emp-dash .annc-icon-chip {
    width: 36px; height: 36px;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    background: var(--fill);
    color: var(--ink-2);
  }
  #page-dashboard.is-emp-dash .annc-item.annc-latest .annc-icon-chip,
  #page-dashboard.is-emp-dash .annc-item.annc-important .annc-icon-chip { background: var(--gold); color: var(--ink); }
  #page-dashboard.is-emp-dash .annc-item.annc-urgent .annc-icon-chip    { background: #FDECEC; color: #C4161C; }
  #page-dashboard.is-emp-dash .annc-new-badge {
    animation: none;
    border: 0;
    background: var(--ink);
    color: var(--gold);
  }
  #page-dashboard.is-emp-dash .badge.annc-badge-normal,
  #page-dashboard.is-emp-dash .badge.annc-badge-important {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-2);
  }
  #page-dashboard.is-emp-dash .annc-title { font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); }
  #page-dashboard.is-emp-dash .annc-body  { font-size: 14px; line-height: 1.45; color: #3C3C43; margin-top: 3px; }
  #page-dashboard.is-emp-dash .annc-footer { margin-top: 8px; padding-top: 0; }
  #page-dashboard.is-emp-dash .annc-footer::before { display: none; }
  #page-dashboard.is-emp-dash .annc-meta { font-size: 12px; font-weight: 500; color: var(--ink-2); }
  /* hairline between rows, starting under the text like iOS */
  #page-dashboard.is-emp-dash .annc-item + .annc-item:not(.annc-latest) {
    background-image: linear-gradient(var(--sep), var(--sep));
    background-size: calc(100% - 56px) 1px;   /* 8px pad + 36px icon + 12px gap */
    background-position: 56px 0;
    background-repeat: no-repeat;
  }
  #page-dashboard.is-emp-dash #announcementsBody > .btn {
    width: calc(100% - 32px) !important;
    height: 46px;
    margin: 6px 16px 16px !important;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
  }

  #page-dashboard.is-emp-dash .today-celeb-banner {
    margin: 4px 16px 6px;
    padding: 14px;
    border: 1px solid var(--gold-line);
    border-radius: 18px;
    background: #FFFCF0;
  }
  #page-dashboard.is-emp-dash .today-celeb-title { color: var(--gold-ink); }
  #page-dashboard.is-emp-dash .today-celeb-item { border: 1px solid var(--line); border-radius: 14px; }

  /* ── My attendance: summary + 14-day strip ────────── */
  #page-dashboard.is-emp-dash .mon-tiles {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 6px 16px 0;
    padding: 12px 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
  }
  #page-dashboard.is-emp-dash .mon-tile { padding: 2px 4px; border: 0; border-radius: 0; }
  #page-dashboard.is-emp-dash .mon-tile + .mon-tile { border-left: 1px solid var(--sep); }
  #page-dashboard.is-emp-dash .mon-tile .n,
  #page-dashboard.is-emp-dash .mon-tile .n.green,
  #page-dashboard.is-emp-dash .mon-tile .n.gold { font-size: 22px; font-weight: 700; letter-spacing: -.5px; color: var(--ink); }
  #page-dashboard.is-emp-dash .mon-tile .n.red { font-size: 22px; font-weight: 700; letter-spacing: -.5px; color: #C4161C; }
  #page-dashboard.is-emp-dash .mon-tile .l { margin-top: 4px; font-size: 11.5px; font-weight: 500; color: var(--ink-2); }

  #page-dashboard.is-emp-dash .mon-strip-wrap { padding: 14px 16px 16px; }
  #page-dashboard.is-emp-dash .mon-strip-head {
    font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink-2);
  }
  #page-dashboard.is-emp-dash .mon-strip { gap: 4px; }
  #page-dashboard.is-emp-dash .mon-day,
  #page-dashboard.is-emp-dash .mon-day:hover {
    height: 34px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 600;
    transform: none;
  }
  #page-dashboard.is-emp-dash .mon-day span { display: inline; }
  /* Theme-only day colours: black = present, gold = late / half day,
     soft gold = WFH, grey = leave, red outline = absent, white = no record */
  #page-dashboard.is-emp-dash .mon-day.is-present  { background: var(--ink);       color: #fff; }
  #page-dashboard.is-emp-dash .mon-day.is-late,
  #page-dashboard.is-emp-dash .mon-day.is-half_day { background: var(--gold);      color: var(--ink); }
  #page-dashboard.is-emp-dash .mon-day.is-wfh      { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); }
  #page-dashboard.is-emp-dash .mon-day.is-on_leave { background: #E4E4E7;          color: #3C3C43; }
  #page-dashboard.is-emp-dash .mon-day.is-absent   { background: #fff;             color: #C4161C; border-color: rgba(196,22,28,.45); }
  #page-dashboard.is-emp-dash .mon-day.is-none     { background: #fff;             color: var(--ink-3); border-color: var(--line); }
  #page-dashboard.is-emp-dash .mon-legend { gap: 6px 12px; font-size: 12px; color: var(--ink-2); }
  #page-dashboard.is-emp-dash .mon-legend .dot { width: 9px; height: 9px; border: 1px solid transparent; border-radius: 3px; }
  #page-dashboard.is-emp-dash .mon-legend .dot.is-present  { background: var(--ink); }
  #page-dashboard.is-emp-dash .mon-legend .dot.is-late     { background: var(--gold); }
  #page-dashboard.is-emp-dash .mon-legend .dot.is-absent   { background: #fff; border-color: #C4161C; }
  #page-dashboard.is-emp-dash .mon-legend .dot.is-on_leave { background: #E4E4E7; }
  #page-dashboard.is-emp-dash .mon-legend .dot.is-wfh      { background: var(--gold-soft); border-color: var(--gold-line); }

  /* ── List rows: inset hairlines, no hover tint ────── */
  #page-dashboard.is-emp-dash .emp-event-row,
  #page-dashboard.is-emp-dash .emp-holiday-row,
  #page-dashboard.is-emp-dash .rl-row,
  #page-dashboard.is-emp-dash .asset-row,
  #page-dashboard.is-emp-dash .team-row,
  #page-dashboard.is-emp-dash .appr-row,
  #page-dashboard.is-emp-dash .tlb-row {
    position: relative;
    padding: 11px 16px;
    border-bottom: 0;
    background: transparent;
  }
  #page-dashboard.is-emp-dash .emp-event-row:hover,
  #page-dashboard.is-emp-dash .emp-holiday-row:hover,
  #page-dashboard.is-emp-dash .rl-row:hover,
  #page-dashboard.is-emp-dash .asset-row:hover,
  #page-dashboard.is-emp-dash .team-row:hover { background: transparent; }
  #page-dashboard.is-emp-dash .emp-event-row:not(:last-child)::after,
  #page-dashboard.is-emp-dash .emp-holiday-row:not(:last-child)::after,
  #page-dashboard.is-emp-dash .rl-row:not(:last-child)::after,
  #page-dashboard.is-emp-dash .asset-row:not(:last-child)::after,
  #page-dashboard.is-emp-dash .team-row:not(:last-child)::after,
  #page-dashboard.is-emp-dash .appr-row:not(:last-child)::after,
  #page-dashboard.is-emp-dash .tlb-row:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    left: var(--row-inset, 16px);
    height: 1px;
    background: var(--sep);
  }
  #page-dashboard.is-emp-dash .emp-event-row   { --row-inset: 65px; }
  #page-dashboard.is-emp-dash .emp-holiday-row { --row-inset: 76px; }
  #page-dashboard.is-emp-dash .rl-row,
  #page-dashboard.is-emp-dash .asset-row       { --row-inset: 61px; }
  #page-dashboard.is-emp-dash .team-row        { --row-inset: 61px; }
  /* the last row sits on the card's rounded bottom — give it a little room */
  #page-dashboard.is-emp-dash #empHolidayBody,
  #page-dashboard.is-emp-dash #recentLeavesBody,
  #page-dashboard.is-emp-dash #myAssetsBody,
  #page-dashboard.is-emp-dash #empBirthdayBody,
  #page-dashboard.is-emp-dash #empAnnivBody,
  #page-dashboard.is-emp-dash #teamUpcomingBody { padding-bottom: 6px !important; }

  #page-dashboard.is-emp-dash .emp-event-name,
  #page-dashboard.is-emp-dash .rl-type,
  #page-dashboard.is-emp-dash .asset-name,
  #page-dashboard.is-emp-dash .team-name,
  #page-dashboard.is-emp-dash .appr-name { font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); }
  #page-dashboard.is-emp-dash .emp-event-dept,
  #page-dashboard.is-emp-dash .rl-range,
  #page-dashboard.is-emp-dash .asset-sub,
  #page-dashboard.is-emp-dash .team-sub,
  #page-dashboard.is-emp-dash .appr-meta { margin-top: 1px; font-size: 13px; color: var(--ink-2); }
  #page-dashboard.is-emp-dash .emp-event-date { font-size: 13px; font-weight: 500; color: var(--ink); }
  #page-dashboard.is-emp-dash .emp-event-years,
  #page-dashboard.is-emp-dash .asset-date,
  #page-dashboard.is-emp-dash .rl-days { font-size: 12px; color: var(--ink-2); }
  #page-dashboard.is-emp-dash .emp-event-days {
    padding: 4px 9px;
    border: 0;
    font-size: 12px;
    font-weight: 700;
    background: var(--gold-soft);
    color: var(--gold-ink);
  }

  #page-dashboard.is-emp-dash .rl-icon,
  #page-dashboard.is-emp-dash .rl-icon.is-wfh,
  #page-dashboard.is-emp-dash .asset-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    font-size: 15px;
    background: var(--fill);
    color: var(--ink);
  }

  /* Leave status: gold = approved, outline = pending, grey = rejected */
  #page-dashboard.is-emp-dash .badge {
    border: 1px solid transparent;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
  }
  #page-dashboard.is-emp-dash .badge-approved  { background: var(--gold-soft); color: var(--gold-ink); }
  #page-dashboard.is-emp-dash .badge-pending   { background: #fff; color: var(--ink); border-color: var(--line); }
  #page-dashboard.is-emp-dash .badge-rejected,
  #page-dashboard.is-emp-dash .badge-cancelled { background: var(--fill); color: var(--ink-2); }

  /* Holidays: date as a calendar icon, black header */
  #page-dashboard.is-emp-dash .emp-holiday-row { gap: 12px; }
  #page-dashboard.is-emp-dash .emp-holiday-date {
    width: 48px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    overflow: hidden;
    background: #fff;
  }
  #page-dashboard.is-emp-dash .emp-holiday-day {
    padding: 2px 0 1px;
    background: var(--ink);
    color: var(--gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
  }
  #page-dashboard.is-emp-dash .emp-holiday-dt { padding: 5px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
  #page-dashboard.is-emp-dash .emp-holiday-name { font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); }
  #page-dashboard.is-emp-dash .emp-holiday-tag,
  #page-dashboard.is-emp-dash .emp-holiday-tag.is-national,
  #page-dashboard.is-emp-dash .emp-holiday-tag.is-festival {
    padding: 4px 9px;
    border: 0;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--fill);
    color: var(--ink-2);
  }

  /* ── Leave balance overview ───────────────────────── */
  #page-dashboard.is-emp-dash .lb-body { gap: 18px; padding: 10px 16px 6px; }
  #page-dashboard.is-emp-dash .lb-gauge { width: 124px; }
  #page-dashboard.is-emp-dash .lb-gauge-track { stroke: #EFEFF0; stroke-width: 13; }
  #page-dashboard.is-emp-dash .lb-gauge-fill  { stroke-width: 13; }
  #page-dashboard.is-emp-dash .lb-gauge-num { font-size: 26px; font-weight: 700; letter-spacing: -.8px; }
  #page-dashboard.is-emp-dash .lb-gauge-lbl { font-size: 11px; color: var(--ink-2); }
  #page-dashboard.is-emp-dash .lb-stat { padding: 8px 0; border-bottom-color: var(--sep); }
  #page-dashboard.is-emp-dash .lb-stat .l { font-size: 13px; font-weight: 500; color: var(--ink-2); }
  #page-dashboard.is-emp-dash .lb-stat .n,
  #page-dashboard.is-emp-dash .lb-stat .n.red,
  #page-dashboard.is-emp-dash .lb-stat .n.blue { font-size: 16px; font-weight: 700; color: var(--ink); }
  #page-dashboard.is-emp-dash .lb-note {
    margin: 6px 16px 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px;
    background: var(--gold-soft);
    color: var(--gold-ink);
    font-size: 12.5px;
    font-weight: 500;
  }
  #page-dashboard.is-emp-dash .lb-foot { padding: 12px 16px 16px; }

  /* Shared black buttons (leave balance footer, profile card) */
  #page-dashboard.is-emp-dash .btn-dash-primary,
  #page-dashboard.is-emp-dash .btn-dash-primary:hover {
    height: 50px;
    padding: 0 16px;
    border-radius: 14px;
    background: var(--ink);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
    transform: none;
  }
  #page-dashboard.is-emp-dash .btn-dash-primary:active { opacity: .8; }
  #page-dashboard.is-emp-dash .btn-dash-primary i:last-child { color: var(--gold); }

  /* ── Profile card ─────────────────────────────────── */
  #page-dashboard.is-emp-dash .emp-profile-card { padding: 18px 16px 16px; }
  #page-dashboard.is-emp-dash .emp-profile-top { gap: 14px; margin-bottom: 16px; }
  #page-dashboard.is-emp-dash .emp-profile-card .emp-profile-avatar-wrap,
  #page-dashboard.is-emp-dash .emp-profile-card .emp-profile-avatar-wrap img,
  #page-dashboard.is-emp-dash .emp-profile-card .emp-profile-initials { width: 64px; height: 64px; }
  /* app.php paints a gold→green strip and gold→green initials; theme only here */
  #page-dashboard.is-emp-dash .emp-profile-card::before { display: none; }
  #page-dashboard.is-emp-dash .emp-profile-avatar-wrap .emp-profile-initials { background: var(--ink); color: var(--gold); }
  #page-dashboard.is-emp-dash .emp-profile-name { font-size: 20px; font-weight: 700; letter-spacing: -.4px; color: var(--ink); }
  #page-dashboard.is-emp-dash .emp-profile-role { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
  #page-dashboard.is-emp-dash .emp-profile-status,
  #page-dashboard.is-emp-dash .emp-profile-status.is-active {
    padding: 4px 10px;
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: var(--ink);
  }
  #page-dashboard.is-emp-dash .emp-profile-status.is-active .emp-profile-status-dot { background: #22A447; }
  #page-dashboard.is-emp-dash .emp-profile-menu-btn {
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--ink-2);
  }

  /* ── Hiring band ──────────────────────────────────── */
  #page-dashboard.is-emp-dash .hiring-band {
    padding: 16px 14px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-ios);
  }
}

@keyframes iosLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,164,71,.45); }
  100% { box-shadow: 0 0 0 6px rgba(34,164,71,0); }
}

/* Small phones (iPhone SE 1st gen, 320px): keep the widgets from crowding */
@media (max-width: 360px) {
  #page-dashboard.is-emp-dash .dash-greet-name { font-size: 28px; }
  #page-dashboard.is-emp-dash .ios-quick { gap: 8px; }
  #page-dashboard.is-emp-dash .ios-quick-lbl { font-size: 11.5px; }
  #page-dashboard.is-emp-dash .is-today .psc-time-val { font-size: 26px; }
  #page-dashboard.is-emp-dash .is-last .psc-time-val { font-size: 14.5px; }
  #page-dashboard.is-emp-dash .is-balance .psc-balance { font-size: 30px; }
  #page-dashboard.is-emp-dash .lb-gauge { width: 104px; }
  #page-dashboard.is-emp-dash .mon-day { font-size: 9.5px; border-radius: 7px; }
  /* body.has-tabbar: outranks the tab bar block below, which comes later */
  body.has-tabbar .ios-tab { font-size: 9.5px; letter-spacing: 0; }
}

/* ════════════════════════════════════════════════
   BOTTOM TAB BAR — employee / manager / IT, phones only
   Markup in app.php (body.has-tabbar + nav.ios-tabbar); Nav.go() in
   common.js moves .is-active. Shows on every page, not just the dashboard.
   A floating black capsule; the active tab is picked out in gold.
   ════════════════════════════════════════════════ */
@media (max-width: 640px) {
  body.has-tabbar .page-content { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  body.has-tabbar .toast-wrap   { bottom: calc(96px + env(safe-area-inset-bottom)); }

  .ios-tabbar {
    display: flex;
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 150;                 /* over the page, under the sidebar (199/200) and modals */
    padding: 6px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    background: rgba(12,12,12,.94);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
  }
  .ios-tab {
    flex: 1;
    min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 0 7px;
    border: 0;
    border-radius: 20px;
    background: none;
    color: rgba(255,255,255,.52);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .1px;
    line-height: 1.1;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .ios-tab i { font-size: 20px; line-height: 1; transition: transform .15s ease; }
  .ios-tab i + i { display: none; }                         /* filled icon: active only */
  .ios-tab.is-active {
    background: rgba(245,196,0,.14);
    color: var(--gold);
    font-weight: 600;
  }
  .ios-tab.is-active i:first-child { display: none; }
  .ios-tab.is-active i + i { display: block; }
  .ios-tab:active i { transform: scale(.88); }
  .ios-tab span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  #page-dashboard.is-emp-dash .psc-status.is-live .psc-status-dot { animation: none; }
  #page-dashboard.is-emp-dash .punch-stat-card:active,
  #page-dashboard.is-emp-dash .ios-quick-item:active,
  .ios-tab:active i { transform: none; }
}