@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ===== Design tokens — RGS General Services Corp. ===== */
:root {
  --bg: #0b0c0d;
  --bg-soft: #101213;
  --sidebar-bg: #08090a;
  --surface: #17191b;
  --surface-2: #1d2022;
  --surface-hover: #262a2c;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);

  --ink: #f1f2ef;
  --ink-soft: #a9adac;
  --ink-mute: #868b8a;

  --accent: #1f9d55;
  --accent-2: #cf2a2a;
  --accent-grad: linear-gradient(128deg, #21b567 0%, #178a4d 100%);
  --brand-grad: linear-gradient(120deg, #21b567 0%, #2a9d5b 38%, #b62a2a 78%, #cf2a2a 100%);
  --accent-ink: #a7e8c3;
  --accent-tint: rgba(31,157,85,.15);

  --hr-color: #cf2a2a;
  --payroll-color: #1f9d55;
  --attendance-color: #2f7fd1;

  --success: #2fbf6c;
  --success-tint: rgba(47,191,108,.14);
  --warn: #e8a63c;
  --warn-tint: rgba(232,166,60,.14);
  --danger: #e0453f;
  --danger-tint: rgba(224,69,63,.14);
  --neutral-tint: rgba(255,255,255,.05);

  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 20px;

  --space-1: 4px; --space-2: 8px; --space-3: 13px; --space-4: 18px; --space-5: 27px; --space-6: 38px;

  --shadow-lift: 0 20px 45px -20px rgba(0,0,0,.55);

  /* Text colors used on tinted chips/badges (light mode swaps these for darker shades) */
  --danger-ink: #ffb3ae;
  --hr-ink: #ff9d9d;
  --payroll-ink: #6be0a0;
  --attendance-ink: #8fc0ff;
  --warn-ink: #e9c95a;
  --info-tint: rgba(47,127,209,.15);
  --hr-tint: rgba(207,42,42,.15);

  /* Sign-in page + misc surfaces */
  --login-bg: #08090a;
  --login-aside-end: #0b0c0d;
  --login-mute: #7B8190;
  --line-soft: rgba(255,255,255,.10);
  --grid-line: rgba(255,255,255,.028);
  --panel-tint: rgba(255,255,255,.02);
  --row-stripe: rgba(255,255,255,.015);
  --brand-name-grad: linear-gradient(180deg, #f4f5f3 0%, #c4c8c6 55%, #9a9f9d 100%);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Manrope', 'Inter', sans-serif; margin: 0; }
a { color: var(--accent-2); }
button { font-family: inherit; }
::selection { background: var(--accent-tint); }

/* Global keyboard focus ring — visible on every interactive element, mouse clicks stay clean */
a, button, input, select, textarea, [tabindex] {
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 8px; }

/* ===================== LOGIN PAGE ===================== */
/* Everything lives inside one big outlined panel ("login-shell") floating on
   a dark, softly-lit stage. Shared app tokens (--accent, --accent-grad, etc.)
   are left untouched for the rest of the product. */
body.login-page {
  background:
    radial-gradient(900px 500px at 14% -6%, rgba(33,181,103,.10), transparent 60%),
    radial-gradient(900px 520px at 104% 108%, rgba(207,42,42,.10), transparent 60%),
    var(--login-bg);
  --login-line: var(--line-soft);
  --login-ink-mute: var(--login-mute); /* AA-safe replacement for --ink-mute on the sign-in backgrounds */
  min-height: 100vh;
  position: relative;
}
.login-page, .login-page input, .login-page button {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Faint engineering-grid texture behind the panel, kept very subtle */
.login-bg-fx {
  position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 78%);
}
.login-bg-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; }
.login-bg-glow-a { width: 520px; height: 520px; top: -160px; left: -120px; background: radial-gradient(circle, rgba(33,181,103,.30), transparent 70%); }
.login-bg-glow-b { width: 560px; height: 560px; bottom: -200px; right: -140px; background: radial-gradient(circle, rgba(207,42,42,.24), transparent 70%); }

/* Stage centers the single big outline box and gives it breathing room.
   Fixed to the viewport height (not min-height) so the whole login screen
   always fits in one view — no page-level scrolling, on any monitor. */
.login-stage {
  position: relative; z-index: 1;
  height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 2.4vh, 40px) clamp(16px, 3vw, 48px);
  overflow: hidden;
}
body.login-page { overflow: hidden; }

/* THE big outline box — everything (brand info + login form) lives inside it.
   Sized to fill the viewport height (up to a comfortable cap) so the layout
   reads as intentionally full-scale rather than a small card floating in
   empty space, while every inner size below scales with vh so it never
   overflows and forces a scrollbar. */
.login-shell {
  position: relative; width: 100%; max-width: min(1280px, 94vw);
  height: 100%; max-height: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 26px;
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(255,255,255,.02), 0 60px 120px -50px rgba(0,0,0,.65);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.login-shell-topbar {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: clamp(8px, 1.4vh, 13px) 20px; border-bottom: 1px solid var(--login-line);
  background: linear-gradient(90deg, rgba(33,181,103,.07), rgba(207,42,42,.05));
}
.login-shell-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--login-line); }
.login-shell-topbar-label {
  margin-left: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--login-ink-mute); font-family: 'IBM Plex Mono', monospace;
}
.login-shell-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1.05fr 460px; }

.login-aside {
  position: relative; overflow-y: auto; min-height: 0;
  background: linear-gradient(165deg, var(--surface-2) 0%, var(--login-aside-end) 72%);
  padding: clamp(16px, 3vh, 38px) clamp(22px, 3vw, 38px) clamp(12px, 2vh, 27px);
  display: flex; flex-direction: column; justify-content: space-between;
  border-right: 1px solid var(--login-line);
}
.login-aside-blob {
  position: absolute; top: -140px; right: -140px; width: 380px; height: 380px; border-radius: 50%;
  background: var(--brand-grad); opacity: .10; filter: blur(60px); pointer-events: none;
}
.login-brand { position: relative; display: flex; align-items: center; gap: 10px; }
.login-brand .name { color: var(--ink); display: block; line-height: 1.1; }
.login-brand-tag {
  position: relative; display: inline-block; margin-top: 12px;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em; color: var(--accent-ink);
  background: var(--accent-tint); border: 1px solid rgba(33,181,103,.28);
  padding: 5px 11px; border-radius: 100px;
}

.login-aside-body { position: relative; max-width: 480px; margin: clamp(8px, 2.6vh, 38px) 0; }
.login-aside-eyebrow { display: block; color: var(--login-ink-mute); font-size: .86rem; font-weight: 500; margin-bottom: clamp(4px, 1vh, 13px); }
.login-aside-body h1 { font-size: clamp(1.3rem, 1.05rem + 2.4vh, 2.5rem); line-height: 1.18; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.login-aside-sub { color: var(--ink-soft); font-size: clamp(.82rem, .74rem + .35vh, .96rem); line-height: 1.6; margin-top: clamp(4px, 1vh, 13px); max-width: 42ch; }

/* Directory panel: reads like a real screen from the product, not a decorative widget */
.login-panel {
  position: relative; margin-top: clamp(8px, 1.8vh, 27px);
  background: var(--panel-tint); backdrop-filter: blur(6px);
  border: 1px solid var(--login-line); border-radius: var(--radius);
  box-shadow: 0 20px 40px -28px rgba(0,0,0,.6);
}
.login-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(7px, 1.2vh, 11px) 16px; border-bottom: 1px solid var(--login-line);
  font-size: .76rem; font-weight: 600; color: var(--login-ink-mute); text-transform: none;
}
.login-panel-head span:last-child { font-size: .72rem; }
.login-panel-rows { padding: clamp(2px, .6vh, 6px) 16px; }
.login-panel-row { display: flex; align-items: center; gap: 12px; padding: clamp(5px, 1.3vh, 10px) 0; border-bottom: 1px solid var(--login-line); }
.login-panel-row:last-child { border-bottom: none; }
.login-panel-name { font-size: .84rem; color: var(--ink); width: 92px; flex-shrink: 0; }
.login-panel-track { flex: 1; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.login-panel-track span { display: block; height: 100%; background: var(--accent-grad); opacity: .85; }
.login-panel-count { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .78rem; color: var(--ink-soft); width: 20px; text-align: right; }
.login-panel-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(7px, 1.2vh, 11px) 16px; border-top: 1px solid var(--login-line);
  font-size: .74rem; color: var(--login-ink-mute);
}
.login-panel-foot .live { display: inline-flex; align-items: center; gap: 6px; }
.login-panel-foot .live .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-tint); }

.login-aside-footer { position: relative; color: var(--login-ink-mute); font-size: .78rem; flex-shrink: 0; }

/* Right pane — the form */
.login-main { display: flex; align-items: center; justify-content: center; padding: clamp(16px, 3vh, 38px); background: var(--surface); overflow-y: auto; min-height: 0; }
.login-form-wrap { width: 100%; max-width: 400px; }
.login-mobile-brand { display: none; align-items: center; gap: 8px; margin-bottom: clamp(10px, 2vh, 27px); }
.login-form-wrap h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vh, 1.9rem); font-weight: 700; letter-spacing: -.01em; }
.login-form-sub { color: var(--ink-soft); margin-top: 8px; margin-bottom: clamp(10px, 2.2vh, 27px); font-size: 1rem; }

.portal-toggle {
  display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--login-line);
  border-radius: 999px; padding: 4px; margin-bottom: clamp(10px, 2.2vh, 27px);
}
.portal-toggle-btn {
  flex: 1 1 0; border: none; background: transparent; color: var(--ink-soft); font-weight: 700;
  font-size: .92rem; padding: clamp(8px, 1.5vh, 11px) 14px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.portal-toggle-btn:hover:not(.active) { color: var(--ink); }
.portal-toggle-btn.active {
  background: var(--accent-grad); color: #06210f; box-shadow: 0 4px 14px rgba(31,157,85,.35);
}

.error-msg { display: flex; gap: 8px; align-items: center; background: var(--danger-tint); color: var(--danger-ink); border: 1px solid rgba(224,69,63,.35); border-radius: var(--radius-sm); padding: 10px 12px; font-size: .85rem; margin-bottom: var(--space-3); }

.input-group { margin-bottom: clamp(10px, 2.2vh, 27px); }
.input-group label { display: block; font-size: .86rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 8px; }
.input-hint { font-size: .78rem; color: var(--ink-mute); margin: 6px 2px 0; line-height: 1.4; }
.input-icon-wrap { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; left: 14px; color: var(--login-ink-mute); display: flex; }
.input-group input {
  width: 100%; background: var(--bg); border: 1px solid var(--login-line); color: var(--ink);
  border-radius: var(--radius-sm); padding: clamp(10px, 1.7vh, 13px) 14px clamp(10px, 1.7vh, 13px) 42px; font-size: 1rem; outline: none;
  transition: border-color .12s, outline-color .12s, box-shadow .12s;
}
.input-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.input-toggle { position: absolute; right: 10px; background: none; border: none; color: var(--login-ink-mute); cursor: pointer; padding: 6px; display: flex; border-radius: 6px; }
.input-toggle:hover { color: var(--ink); background: var(--surface-2); }

.login-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(10px, 2.2vh, 27px); font-size: .88rem; }
.checkbox-label { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); cursor: pointer; }
.checkbox-label input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
.login-forgot { text-decoration: none; color: var(--login-ink-mute); border-bottom: 1px solid var(--login-line); padding-bottom: 1px; }
.login-forgot:hover { color: var(--ink-soft); }

.last-session-chip {
  display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--login-line);
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: .82rem; color: var(--login-ink-mute);
  margin-bottom: clamp(10px, 2vh, 20px);
}
.last-session-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-mute); flex-shrink: 0; }
.last-session-chip strong { color: var(--ink-soft); font-weight: 600; }

.idle-notice {
  display: flex; gap: 8px; align-items: center; background: rgba(233,179,26,.12); color: var(--warn-ink);
  border: 1px solid rgba(233,179,26,.3); border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: .85rem; margin-bottom: var(--space-3);
}

.login-submit {
  width: 100%; padding: clamp(11px, 1.8vh, 14px); border-radius: var(--radius-sm); border: 1px solid var(--accent);
  background: var(--accent-grad); color: #fff;
  font-weight: 600; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 14px 30px -14px rgba(33,181,103,.55);
  transition: filter .12s, opacity .12s, transform .12s;
}
.login-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.login-submit:active { opacity: .85; transform: translateY(0); }
.login-submit:disabled { opacity: .6; cursor: default; transform: none; }
.login-spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; margin-left: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.login-help { text-align: center; color: var(--login-ink-mute); font-size: .86rem; margin-top: clamp(10px, 2.2vh, 27px); }

@media (max-width: 980px) {
  .login-stage { height: auto; min-height: 100vh; overflow-y: auto; }
  body.login-page { overflow-y: auto; }
  .login-shell { max-width: 460px; height: auto; max-height: none; }
  .login-shell-body { grid-template-columns: 1fr; }
  .login-aside { display: none; }
  .login-mobile-brand { display: flex; }
  .login-main { padding: var(--space-5); overflow-y: visible; }
}
@media (max-width: 480px) {
  .login-stage { padding: 12px; }
  .login-shell { border-radius: 20px; }
}

/* ===================== APP SHELL ===================== */
body.app-page { display: flex; height: 100vh; overflow: hidden; }

.side-nav {
  width: 248px; flex-shrink: 0; background: var(--sidebar-bg); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: var(--space-4) var(--space-3);
  transition: transform .2s ease;
}
.side-nav-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 0; margin-bottom: var(--space-4); }
.side-nav-brand span.name { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.1rem; }
.side-nav-brand span.tag { display: block; font-size: .68rem; color: var(--ink-mute); font-weight: 500; }

/* Brand wordmark: mirrors the RGServe logo — metallic name + small-caps corp line */
.brand-mark .name { background: var(--brand-name-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-corp-line { display: block; font-family: 'Manrope', serif; font-weight: 800; font-size: .58rem; letter-spacing: .06em; color: var(--ink-mute); text-transform: uppercase; margin-top: 1px; }
.login-brand.brand-mark .name { font-size: 1.2rem; }
.login-brand-tag.corp { border-left: none; padding-left: 0; color: var(--ink-mute); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .68rem; }

/* RGServe logo image — transparent PNG, no background chip */
.brand-logo-img { display: block; width: auto; }
.side-nav-brand .brand-logo-img { height: 58px; }
.login-brand .brand-logo-img.login-brand-logo-img { height: 84px; }
.login-mobile-brand .brand-logo-img { height: 48px; }
.side-nav-scroll { flex: 1; overflow-y: auto; }
.nav-group-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); font-weight: 700; padding: 14px 10px 6px; }
.nav-group-label:first-child { padding-top: 4px; }
.tab-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: none;
  border-left: 3px solid transparent;
  color: var(--ink-soft); padding: 9px 10px 9px 7px; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 600; cursor: pointer;
  margin-bottom: 2px; transition: background .12s, color .12s, border-color .12s;
}
.tab-btn svg { flex-shrink: 0; opacity: .85; }
.tab-btn:hover { background: var(--surface); color: var(--ink); }
.tab-btn.active { background: var(--accent-tint); color: var(--accent-ink); border-left-color: var(--accent); font-weight: 700; }
.tab-btn.active svg { opacity: 1; color: var(--accent-ink); }
.side-nav-footer { border-top: 1px solid var(--border); padding-top: var(--space-3); margin-top: var(--space-2); }

.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-soft); }
.topbar {
  height: 62px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-5); border-bottom: 1px solid var(--border); background: var(--bg-soft);
}
.topbar-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
#pageTitle { font-size: 1.15rem; font-weight: 800; }
.sidebar-toggle-btn { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px; color: var(--ink); cursor: pointer; }
.topbar-right { display: flex; align-items: center; gap: var(--space-3); }
.icon-btn { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); cursor: pointer; }
.icon-btn:hover { color: var(--ink); background: var(--surface-hover); }
.admin-menu-wrap { position: relative; }
.admin-chip { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 100px; padding: 5px 12px 5px 5px; cursor: pointer; color: var(--ink); }
.admin-chip-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.admin-chip-role { font-size: .72rem; font-weight: 600; color: var(--ink-mute); }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .74rem; color: white; }
.dropdown-panel { position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-width: 190px; box-shadow: var(--shadow-lift); z-index: 40; padding: 6px; }
.dropdown-panel button, .dropdown-panel a { width: 100%; text-align: left; background: none; border: none; color: var(--ink); padding: 9px 10px; border-radius: 8px; font-size: .86rem; cursor: pointer; display: block; text-decoration: none; }
.dropdown-panel button:hover, .dropdown-panel a:hover { background: var(--surface-hover); }
.dropdown-panel hr { border: none; border-top: 1px solid var(--border); margin: 5px 2px; }
.dropdown-panel .danger { color: var(--danger-ink); }
.notif-panel { width: 280px; padding: 4px; }
.notif-item { padding: 10px; border-radius: 8px; }
.notif-item:hover { background: var(--surface-hover); }
.notif-empty { padding: 20px 10px; text-align: center; color: var(--ink-mute); font-size: .85rem; }

.content-scroll { flex: 1; overflow-y: auto; padding: var(--space-5); }
.tab-panel { display: none; }
.tab-panel-enter { animation: fadeUp .25s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 30; }
.sidebar-overlay.show { display: block; }

@media (max-width: 900px) {
  .side-nav { position: fixed; z-index: 35; top: 0; bottom: 0; left: 0; transform: translateX(-100%); }
  .side-nav.open { transform: translateX(0); }
  .sidebar-toggle-btn { display: flex; }
}

/* ===================== CARDS / GRID / KPI ===================== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.kpi-card .kpi-label { font-size: .78rem; color: var(--ink-mute); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kpi-card .kpi-value { font-size: 1.8rem; font-weight: 800; margin-top: 6px; font-family: 'Manrope', sans-serif; }
.kpi-card .kpi-sub { font-size: .78rem; color: var(--ink-soft); margin-top: 3px; }
.kpi-dot { width: 7px; height: 7px; border-radius: 50%; }

.grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-4); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 1000px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); }
.card h2 { font-size: 1rem; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--space-3); }
.card h2 .hint { font-size: .74rem; font-weight: 500; color: var(--ink-mute); }
.card-sub { color: var(--ink-soft); font-size: .85rem; margin-top: -8px; margin-bottom: var(--space-3); }

.section-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 2px; }
.section-sub { color: var(--ink-soft); font-size: .9rem; margin-bottom: var(--space-4); }

.bar-list { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.bar-row .bar-label { width: 100px; flex-shrink: 0; color: var(--ink-soft); }
.bar-track { flex: 1; height: 9px; background: var(--surface-2); border-radius: 100px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 100px; background: var(--accent-grad); }
.bar-row .bar-value { width: 26px; text-align: right; color: var(--ink-mute); }

/* ===================== TABLES ===================== */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
thead th {
  text-align: left; color: var(--ink-mute); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
  padding: 8px 10px; border-bottom: 1px solid var(--border-strong); white-space: nowrap;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--ink); }
thead th.sortable::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-left: 3px solid transparent; border-right: 3px solid transparent; opacity: .35; }
thead th.sortable[aria-sort="ascending"]::after { border-bottom: 5px solid var(--accent-ink); opacity: 1; }
thead th.sortable[aria-sort="descending"]::after { border-top: 5px solid var(--accent-ink); opacity: 1; }
tbody td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:nth-child(even) { background: var(--row-stripe); }
tbody tr:last-child td { border-bottom: none; }
tbody tr.row-clickable { cursor: pointer; }
tbody tr.row-clickable:hover { background: var(--surface-2); }
tbody tr.empty-state-row:nth-child(even) { background: none; }
tbody input, tbody select { background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); border-radius: 7px; padding: 6px 8px; font-size: .84rem; width: 100%; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 100px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.badge.connected, .badge.active, .badge.paid, .badge.approved { background: var(--success-tint); color: var(--success); }
.badge.disconnected, .badge.inactive { background: var(--neutral-tint); color: var(--ink-mute); }
.badge.pending, .badge.probationary, .badge.draft { background: var(--warn-tint); color: var(--warn); }
.badge.denied, .badge.on_leave { background: var(--danger-tint); color: var(--danger-ink); }
.badge.hr { background: var(--hr-tint); color: var(--hr-ink); }
.badge.payroll { background: rgba(31,157,85,.15); color: var(--payroll-ink); }
.badge.attendance { background: var(--info-tint); color: var(--attendance-ink); }
.badge.system { background: var(--neutral-tint); color: var(--ink-mute); }

.empty-state-row td { padding: var(--space-6) 10px; }

/* ===================== LEAVE REQUESTS TABLE ===================== */
.leave-table td { vertical-align: top; padding-top: 13px; padding-bottom: 13px; }
.leave-table tbody tr:hover { background: var(--surface-2); }
.leave-emp { display: flex; align-items: center; gap: 10px; }
.leave-emp .avatar { flex-shrink: 0; }
.leave-emp-name { font-weight: 650; }
.badge.leave-vacation { background: var(--success-tint); color: var(--success); }
.badge.leave-sick { background: var(--danger-tint); color: var(--danger-ink); }
.badge.leave-emergency { background: var(--warn-tint); color: var(--warn); }
.badge.leave-unpaid { background: var(--neutral-tint); color: var(--ink-mute); }
.leave-dates { white-space: nowrap; }
.leave-dates .leave-days-tag { display: block; color: var(--ink-mute); font-size: .78rem; margin-top: 2px; }
.leave-reason-text { color: var(--ink); max-width: 240px; }
.leave-reason-text.is-empty { color: var(--ink-mute); }
.leave-proof-chip {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 7px;
  padding: 3px 11px 3px 3px; border-radius: 100px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink-soft); font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.leave-proof-chip:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--ink); }
.leave-proof-chip img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; display: block; }
.leave-decided-meta { font-size: .8rem; color: var(--ink-mute); margin-top: 4px; }
.leave-actions-cell { display: flex; gap: 8px; white-space: nowrap; }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; color: var(--ink-mute); }
.empty-state-icon { color: var(--ink-mute); opacity: .6; }
.empty-state-title { font-weight: 700; color: var(--ink-soft); font-size: .9rem; }
.empty-state-subtitle { font-size: .8rem; max-width: 320px; }

/* ===================== FORMS / BUTTONS ===================== */
.toolbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); }
.search-wrap input { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--ink); border-radius: var(--radius-sm); padding: 9px 12px 9px 34px; font-size: .87rem; }
select.filter-select { background: var(--surface); border: 1px solid var(--border); color: var(--ink); border-radius: var(--radius-sm); padding: 9px 12px; font-size: .87rem; }

.btn-primary, .btn-secondary, .btn-danger, .btn-small {
  border-radius: var(--radius-sm); border: 1px solid transparent; padding: 9px 16px; font-size: .86rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: filter .12s, background .12s;
}
.btn-primary { background: var(--accent-grad); color: white; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-hover); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-small { padding: 6px 11px; font-size: .78rem; }
.btn-small-link { font-size: .78rem; font-weight: 700; text-decoration: none; }
button:disabled { opacity: .6; cursor: default; }

.field { margin-bottom: var(--space-3); }
.field-hidden { display: none; }
.field-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.field-row .field { margin-bottom: 0; min-width: 180px; }
.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); border-radius: var(--radius-sm);
  padding: 9px 11px; font-size: .88rem; outline: none; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field-checkbox { display: flex; align-items: center; }
.file-preview { margin-top: 8px; }
.file-preview img { max-width: 100%; max-height: 140px; border-radius: 8px; border: 1px solid var(--border); display: block; }
.photos-count { font-weight: 600; color: var(--ink-soft); font-size: .74rem; margin-left: 6px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 8px; }
.photo-grid:empty { display: none; }
.photo-tile { position: relative; aspect-ratio: 1; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.photo-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: none; cursor: pointer; background: var(--danger, #d64545); color: #fff; font-size: 14px; line-height: 20px; padding: 0; }
.doc-thumb-wrap { position: relative; display: inline-block; }
.doc-thumb-count { position: absolute; right: -6px; bottom: -6px; background: var(--brand, #1f9d55); color: #fff; font-size: .62rem; font-weight: 700; border-radius: 100px; padding: 1px 5px; }
.photo-viewer-main { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 10px; display: block; background: var(--neutral-tint); }
.photo-viewer-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0; }
.photo-viewer-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.photo-viewer-strip img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; cursor: pointer; }
.photo-viewer-strip img.active { border-color: var(--brand, #1f9d55); }
.file-hint { font-size: .74rem; color: var(--ink-soft); margin-top: 5px; }
.doc-thumb { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); cursor: pointer; display: block; }
.doc-thumb-empty { color: var(--ink-soft); font-size: .8rem; }
.modal-body-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
.field-wide { grid-column: 1 / -1; }

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }

/* ===================== MODALS / TOAST ===================== */
.modal-overlay { position: fixed; inset: 0; background: rgba(3,4,10,.65); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; transition: opacity .15s; padding: var(--space-4); }
.modal-overlay.show { opacity: 1; }
.modal { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); width: 480px; max-width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lift); transform: translateY(8px); transition: transform .15s; }
.modal-overlay.show .modal { transform: none; }
.modal-narrow { width: 380px; }
.modal-wide { width: 640px; }
.modal-wide .modal-body { display: block; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: 1.05rem; font-weight: 800; }
.modal-close { background: none; border: none; color: var(--ink-mute); font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 4px; }
.modal-close:hover { color: var(--ink); }
.modal-body { padding: var(--space-4); display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
.modal-narrow .modal-body { display: block; }
.modal-body-sectioned { display: block; }
.modal-body-sectioned .modal-body-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
.modal-section + .modal-section { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.modal-section-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-mute); margin-bottom: 10px; }
.modal-message { color: var(--ink-soft); font-size: .9rem; line-height: 1.6; margin: 0; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: var(--space-3) var(--space-4) var(--space-4); }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink); padding: 11px 18px; border-radius: 100px; font-size: .86rem; font-weight: 600; opacity: 0; pointer-events: none; transition: all .2s; z-index: 200; box-shadow: var(--shadow-lift); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { border-color: rgba(224,69,63,.4); color: var(--danger-ink); }
.toast.success { border-color: rgba(52,219,160,.4); }

/* ===================== ORG CHART ===================== */
.toolbar-end { justify-content: flex-end; }

.org-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5) var(--space-4);
  align-items: start;
}
@media (max-width: 980px) {
  .org-chart-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .org-chart-grid { grid-template-columns: 1fr; }
}

.soc-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease, background .15s ease;
}
.soc-box:hover { border-color: var(--border-strong); background: var(--surface-2); }

.soc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.soc-title-input {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.01em;
  padding: 3px 6px;
  margin: -3px -6px;
  min-width: 0;
  transition: background .15s ease;
}
.soc-title-input:hover { background: var(--surface-2); }
.soc-title-input:focus { outline: none; background: var(--surface-hover); box-shadow: 0 0 0 1px var(--accent); }
.soc-remove-unit {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-mute);
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
  display: flex; align-items: center; justify-content: center;
}
.soc-box:hover .soc-remove-unit { opacity: 1; }
.soc-remove-unit:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-tint); opacity: 1; }

.soc-diagram {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
}

.soc-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; color: var(--border-strong); overflow: visible; }

.pic-node { position: relative; z-index: 1; display: flex; justify-content: center; }
.pic-node-inner { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 82%; }
.pic-position-input {
  width: 100%;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--ink-soft);
  font-size: .66rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 4px;
  transition: background .15s ease, color .15s ease;
}
.pic-position-input:hover { background: var(--surface-2); color: var(--ink); }
.pic-position-input:focus { outline: none; background: var(--surface-hover); color: var(--ink); box-shadow: 0 0 0 1px var(--accent); }

.select-shell { position: relative; width: 100%; }
.select-shell::after {
  content: '';
  position: absolute; right: 10px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--ink-mute);
  border-bottom: 1.5px solid var(--ink-mute);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.pic-select, .coord-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.pic-select {
  font-weight: 700;
  font-size: .85rem;
  padding: 9px 24px 9px 12px;
  text-align: center;
}
.coord-select {
  font-size: .78rem;
  padding: 7px 20px 7px 10px;
  text-align: center;
}
.pic-select:hover, .coord-select:hover { border-color: var(--ink-mute); }
.pic-select:focus, .coord-select:focus { outline: none; border-color: var(--accent); background: var(--surface-hover); }

.role-hint { font-size: .68rem; color: var(--ink-mute); text-align: center; }

.coordinators-row { position: relative; z-index: 1; display: flex; justify-content: space-around; align-items: flex-start; gap: var(--space-3); }
.coord-node { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.coord-node-head { display: flex; align-items: center; gap: 2px; width: 100%; }
.coord-position-input {
  flex: 1;
  min-width: 0;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--ink-mute);
  font-size: .62rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 2px;
  transition: background .15s ease, color .15s ease;
}
.coord-position-input:hover { background: var(--surface-2); color: var(--ink-soft); }
.coord-position-input:focus { outline: none; background: var(--surface-hover); color: var(--ink); box-shadow: 0 0 0 1px var(--accent); }
.coord-remove {
  flex-shrink: 0;
  border: none; background: transparent; color: var(--ink-mute);
  font-size: .8rem; cursor: pointer; padding: 0; line-height: 1;
  width: 15px; height: 15px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  opacity: .5;
  transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.coord-node:hover .coord-remove { opacity: 1; }
.coord-remove:hover { color: var(--danger); background: var(--danger-tint); opacity: 1; }

.soc-add-coord {
  align-self: center;
  margin-top: var(--space-4);
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--ink-soft);
  border-radius: 100px;
  font-size: .74rem;
  font-weight: 600;
  padding: 6px 16px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.soc-add-coord:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-tint); border-style: solid; }

/* ===================== PAYSLIP ===================== */
.payslip { background: #fff; color: #111; border-radius: var(--radius); padding: var(--space-5); font-family: 'Inter', sans-serif; border-top: 4px solid; border-image: linear-gradient(90deg, #1f9d55, #cf2a2a) 1; }
.payslip h3 { color: #111; }
.payslip .payslip-brand { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #1f9d55; margin: 0 0 2px; }
.payslip-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; font-size: .9rem; }
.payslip-row.total { font-weight: 800; font-size: 1.05rem; border-bottom: none; padding-top: 14px; }

/* ===================== PAYSLIP SECTION ===================== */
.ps-toolbar-label { font-size: .82rem; color: var(--ink-soft); font-weight: 600; }
.ps-toolbar-spacer { flex: 1; }
.ps-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1000px) { .ps-layout { grid-template-columns: minmax(0, 1fr); } }
.ps-list-card { margin-bottom: 0; }
.ps-list { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; }
.ps-item { display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; padding: 11px 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.ps-item:hover { background: var(--surface-hover); }
.ps-item.active { border-color: var(--accent); background: var(--accent-tint); }
.ps-item-top, .ps-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ps-item-period { font-weight: 700; font-size: .86rem; }
.ps-item-bottom { font-size: .78rem; color: var(--ink-soft); }
.ps-item-bottom strong { color: var(--ink); font-size: .9rem; }

/* The payslip document itself — always a light "paper" sheet with explicit colours so it reads
   the same on screen, in the popup, and when printed. */
.ps-doc { background: #fff; color: #161a18; border-radius: var(--radius); padding: 28px 30px; font-family: 'Inter', sans-serif; border-top: 5px solid; border-image: linear-gradient(90deg, #1f9d55, #cf2a2a) 1; box-shadow: var(--shadow-lift); }
.ps-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ps-brand { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: #178a4d; }
.ps-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.6rem; color: #161a18; margin-top: 2px; }
.ps-status { padding: 4px 12px; border-radius: 100px; font-size: .74rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.ps-status-paid, .ps-status-approved { background: #e3f6ea; color: #146c3c; }
.ps-status-draft { background: #fdf0d5; color: #8a5a00; }
.ps-draft { background: #fdf0d5; color: #7a5000; border: 1px solid #f1d491; border-radius: 8px; padding: 9px 13px; font-size: .82rem; margin-bottom: 16px; }

.ps-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; padding: 16px 0; border-top: 1px solid #e8ebe9; border-bottom: 1px solid #e8ebe9; }
.ps-info div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-info span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #6b736f; font-weight: 600; }
.ps-info strong { font-size: .95rem; color: #161a18; overflow-wrap: anywhere; }

.ps-net { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0; padding: 16px 20px; border-radius: 12px; background: #eaf7ef; border: 1px solid #bfe6cd; }
.ps-net span { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; color: #146c3c; }
.ps-net strong { font-family: 'Manrope', sans-serif; font-size: 1.9rem; font-weight: 800; color: #0f5a31; }

.ps-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ps-col-title { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; color: #6b736f; padding-bottom: 8px; border-bottom: 2px solid #161a18; }
.ps-line { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #eef0ee; font-size: .9rem; color: #161a18; }
.ps-line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-line.ps-none { color: #8a918d; }
.ps-line.ps-subtotal { font-weight: 800; border-bottom: none; border-top: 2px solid #d9dedb; margin-top: 4px; }

.ps-attendance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.ps-attendance div { background: #f5f7f6; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ps-attendance span { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #6b736f; font-weight: 600; }
.ps-attendance strong { font-size: 1.15rem; color: #161a18; }
.ps-note { font-size: .8rem; color: #5b635f; margin-top: 16px; }
.ps-foot { font-size: .74rem; color: #8a918d; margin: 20px 0 0; text-align: center; }

.ps-check { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--ink-soft); cursor: pointer; }
.ps-check input { accent-color: var(--accent); }
.ps-list-note { font-size: .76rem; color: var(--ink-mute); margin: 4px 2px 0; }

.ps-doc { position: relative; overflow: hidden; }
.ps-doc-draft::after { content: 'DRAFT'; position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 7rem; letter-spacing: .1em; color: rgba(138, 90, 0, .08); pointer-events: none; }
.ps-section-title { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; color: #6b736f; padding-bottom: 8px; border-bottom: 2px solid #161a18; margin-bottom: 12px; }
.ps-section-title small { text-transform: none; letter-spacing: 0; font-weight: 500; color: #6b736f; margin-left: 6px; }

.ps-ytd { margin-top: 24px; }
.ps-ytd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ps-ytd-grid div { background: #f5f7f6; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ps-ytd-grid span { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #6b736f; font-weight: 600; }
.ps-ytd-grid strong { font-size: 1rem; color: #161a18; font-variant-numeric: tabular-nums; }

.ps-explain { margin-top: 26px; }
.ps-rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.ps-rates div { border: 1px solid #e3e7e5; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ps-rates span { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #6b736f; font-weight: 600; }
.ps-rates strong { font-size: 1rem; color: #161a18; }
.ps-rates small { font-size: .74rem; color: #6b736f; }
.ps-why { padding: 12px 0; border-bottom: 1px solid #eef0ee; }
.ps-why-head { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; color: #161a18; }
.ps-why p { font-size: .82rem; color: #4a524e; margin: 4px 0 0; }
.ps-why .ps-dates { color: #161a18; font-weight: 600; }
.ps-mini { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .82rem; }
.ps-mini th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #6b736f; padding: 5px 8px; background: #f5f7f6; }
.ps-mini td { padding: 6px 8px; color: #161a18; border-bottom: 1px solid #eef0ee; background: transparent; }
.ps-mini tbody tr:nth-child(even) { background: transparent; }
.ps-warn { font-size: .82rem; color: #7a5000; background: #fdf0d5; border: 1px solid #f1d491; border-radius: 8px; padding: 9px 13px; margin-top: 12px; }

@media (max-width: 640px) {
  .ps-doc { padding: 20px 16px; }
  .ps-info, .ps-cols { grid-template-columns: minmax(0, 1fr); }
  .ps-attendance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-ytd-grid, .ps-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-doc-draft::after { font-size: 4rem; }
  .ps-net strong { font-size: 1.5rem; }
}

/* ===================== PROFILE DRAWER ===================== */
.profile-header { display: flex; align-items: center; gap: 14px; margin-bottom: var(--space-4); }
.profile-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: white; flex-shrink: 0; }
.profile-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: .86rem; margin-bottom: var(--space-4); }
.profile-meta-grid .lbl { color: var(--ink-mute); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }

.link-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.link-toggle-row:last-child { border-bottom: none; }

.checklist-list { display: flex; flex-direction: column; }
.checklist-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.checklist-row:last-child { border-bottom: none; }
.checklist-check { display: flex; align-items: center; gap: 8px; font-size: .86rem; cursor: pointer; min-width: 0; }
.checklist-check input[type="checkbox"] { flex: none; }
.checklist-label { min-width: 0; }
.checklist-label.done { color: var(--ink-mute); text-decoration: line-through; }
.checklist-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.checklist-meta input[type="date"] { font-size: .74rem; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); }
.checklist-add-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.checklist-add-row input[type="text"] { flex: 1 1 160px; font-size: .84rem; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); }
.checklist-add-row input[type="date"] { font-size: .84rem; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); }
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track { position: absolute; inset: 0; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 100px; cursor: pointer; transition: background .15s; }
.switch-track::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: var(--ink-mute); border-radius: 50%; transition: transform .15s, background .15s; }
.switch input:checked + .switch-track { background: var(--accent-tint); border-color: var(--accent); }
.switch input:checked + .switch-track::before { transform: translateX(16px); background: var(--accent); }

.settings-toggle-card { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.settings-toggle-card:last-child { border-bottom: none; }
.settings-toggle-card .name { font-weight: 700; font-size: .9rem; }
.settings-toggle-card .desc { font-size: .8rem; color: var(--ink-mute); margin-top: 2px; }

.text-muted { color: var(--ink-mute); }
.mt-0 { margin-top: 0; }

/* ===================== REPORTS ===================== */
.rp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-2); }
.rp-head .section-sub { margin-bottom: var(--space-3); }
.rp-head-actions { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.rp-period { display: flex; flex-direction: column; gap: 5px; font-size: .76rem; font-weight: 600; color: var(--ink-mute); margin-bottom: var(--space-3); }
.rp-period input {
  color-scheme: dark; background: var(--surface); border: 1px solid var(--border); color: var(--ink);
  border-radius: var(--radius-sm); padding: 8px 12px; font: inherit; font-size: .87rem; min-width: 170px;
}
.rp-period input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }

/* KPI extras */
.rp-kpis { grid-template-columns: repeat(4, 1fr); margin-bottom: var(--space-4); }
@media (max-width: 1100px) { .rp-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .rp-kpis { grid-template-columns: 1fr; } }
.rp-kpis .kpi-card { display: flex; flex-direction: column; }
.rp-kpis .kpi-value { font-variant-numeric: tabular-nums; }
.rp-kpis .kpi-foot { margin-top: auto; padding-top: var(--space-3); }
.rp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 100px; font-size: .72rem; font-weight: 700; background: var(--neutral-tint); color: var(--ink-soft); }
.rp-chip.up { background: var(--success-tint); color: var(--success); }
.rp-chip.down { background: var(--warn-tint); color: var(--warn); }

/* Section switcher */
.rp-tabs {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--space-4); max-width: 100%; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.rp-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: none; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--ink-soft); font-size: .86rem; font-weight: 700; white-space: nowrap;
}
.rp-tab:hover { color: var(--ink); background: var(--surface-2); }
.rp-tab[aria-selected="true"] { background: var(--surface-hover); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-strong); }
.rp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.rp-panel { display: flex; flex-direction: column; gap: var(--space-4); }
.rp-panel[hidden] { display: none; }
.rp-panel .card { margin-bottom: 0; min-width: 0; }
.rp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1000px) { .rp-grid { grid-template-columns: minmax(0, 1fr); } }
.rp-card-actions { display: flex; align-items: center; gap: 10px; }

/* Stat strip: one card, cells divided by hairlines */
.card.rp-strip { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border); overflow: hidden; }
.rp-stat { background: var(--surface); padding: var(--space-4); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rp-stat-label { font-size: .76rem; font-weight: 600; color: var(--ink-mute); }
.rp-stat-value { font-family: 'Manrope', sans-serif; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rp-stat-note { font-size: .76rem; color: var(--ink-soft); }

/* Horizontal bars */
.rp-bars { display: flex; flex-direction: column; gap: 13px; }
.rp-bar { display: grid; grid-template-columns: var(--lbl, 96px) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: .85rem; }
.rp-bar-label { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-bar-track { height: 10px; background: var(--surface-2); border-radius: 100px; overflow: hidden; }
.rp-bar-fill { height: 100%; border-radius: 100px; min-width: 3px; }
.rp-bar-value { min-width: 92px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-bar-value em { font-style: normal; font-weight: 500; color: var(--ink-mute); margin-left: 8px; display: inline-block; min-width: 34px; }

/* Column chart */
.rp-cols { display: grid; gap: 10px; align-items: end; height: 190px; border-bottom: 1px solid var(--border-strong); }
.rp-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.rp-col-val { font-size: .72rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-col-bar { width: min(46px, 72%); border-radius: 6px 6px 0 0; min-height: 2px; opacity: .38; }
.rp-col.current .rp-col-bar { opacity: 1; }
.rp-col.current .rp-col-val { color: var(--ink); font-weight: 700; }
.rp-col-labels { display: grid; gap: 10px; margin-top: 8px; text-align: center; font-size: .76rem; color: var(--ink-mute); }
.rp-col-labels .current { color: var(--ink); font-weight: 700; }

/* Status stack + legend */
.rp-stack { display: flex; height: 12px; border-radius: 100px; overflow: hidden; background: var(--surface-2); gap: 2px; margin-bottom: var(--space-4); }
.rp-stack span { display: block; height: 100%; }
.rp-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rp-legend li { display: grid; grid-template-columns: 12px 1fr auto 44px; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .86rem; }
.rp-legend li:last-child { border-bottom: none; }
.rp-legend i { width: 10px; height: 10px; border-radius: 3px; }
.rp-legend b { font-variant-numeric: tabular-nums; }
.rp-legend span { text-align: right; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

/* Completeness rows */
.rp-checks { display: flex; flex-direction: column; gap: 14px; }
.rp-check-top { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; margin-bottom: 6px; }
.rp-check-top span:first-child { color: var(--ink-soft); }
.rp-check-top b { font-variant-numeric: tabular-nums; }
.rp-check-note { font-size: .76rem; color: var(--ink-mute); margin-top: 5px; }

/* Chips (names) */
.rp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip-name { padding: 4px 10px; border-radius: 100px; background: var(--surface-2); border: 1px solid var(--border); font-size: .78rem; color: var(--ink-soft); }
.rp-group + .rp-group { margin-top: var(--space-4); }
.rp-group-title { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; font-weight: 700; margin-bottom: 8px; }
.rp-group-title span { color: var(--ink-mute); font-weight: 600; }

/* Tables */
.rp-panel td.num, .rp-panel th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rp-panel td .sub { display: block; font-size: .74rem; color: var(--ink-mute); }
/* Generic "who/when" stamp — reused wherever we show who added or last
   edited a record (documents table, employee edit modal, profile). */
.cell-sub { display: block; font-size: .74rem; color: var(--ink-mute); margin-top: 2px; }
.modal-note { padding: 10px var(--space-4) 0; margin: 0; font-size: .78rem; color: var(--ink-mute); }
.rp-panel tfoot td { padding: 11px 10px; font-weight: 800; border-top: 1px solid var(--border-strong); background: var(--surface-2); }
.rp-bal b { font-variant-numeric: tabular-nums; }
.rp-bal small { color: var(--ink-mute); font-size: .76rem; }
.rp-mini { display: block; height: 4px; width: 120px; max-width: 100%; margin-top: 5px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.rp-mini i { display: block; height: 100%; background: var(--warn); border-radius: 4px; }
.rp-mini i.full { background: var(--danger); }
.rp-empty { color: var(--ink-mute); font-size: .86rem; margin: 0; }
.rp-note { font-size: .84rem; color: var(--ink-soft); margin: 0; }

/* ===================== DASHBOARD ===================== */
.dash-date { padding: 8px 14px; margin-bottom: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: 100px; font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.dash-body { display: flex; flex-direction: column; gap: var(--space-4); }
.dash-body .card { margin-bottom: 0; min-width: 0; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-4); }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }

button.kpi-link { font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
button.kpi-link:hover { border-color: var(--border-strong); background: var(--surface-2); }

/* Attention checklist */
.dash-tasks { list-style: none; margin: 0; padding: 0; }
.dash-task { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.dash-task:first-child { padding-top: 4px; }
.dash-task:last-child { border-bottom: none; padding-bottom: 0; }
.dash-count { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.dash-count.warn { background: var(--warn-tint); color: var(--warn); }
.dash-count.info { background: var(--info-tint); color: var(--attendance-ink); }
.dash-count.danger { background: var(--danger-tint); color: var(--danger-ink); }
.dash-count.ok { background: var(--success-tint); color: var(--success); }
.dash-task-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-task-body strong { font-size: .9rem; }
.dash-task-body span { font-size: .8rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.dash-task.clear .dash-task-body strong { color: var(--ink-soft); font-weight: 600; }
.dash-task.clear .dash-task-body span { color: var(--ink-mute); }
.dash-item-list { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.dash-item-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dash-item-label { font-size: .8rem; color: var(--ink-soft); }
.dash-item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-item-actions .btn-small { padding: 4px 9px; font-size: .74rem; }
.dash-item-more { font-size: .76rem; color: var(--ink-mute); }
@media (max-width: 560px) { .dash-task:has(.dash-item-list) { grid-template-columns: 40px minmax(0, 1fr); } }

/* Today / payroll cards */
.dash-progress-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.dash-progress-top b { font-family: 'Manrope', sans-serif; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dash-progress-top span { color: var(--ink-soft); font-size: .86rem; }
.dash-progress-top em { margin-left: auto; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-section { margin-top: var(--space-4); }
.dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-4); }
.dash-stats .rp-stat { padding: 13px 14px; }
.dash-stats .rp-stat-value { font-size: 1.05rem; }
.dash-kv { margin: var(--space-4) 0 0; display: flex; flex-direction: column; }
.dash-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: .85rem; }
.dash-kv dt { color: var(--ink-soft); }
.dash-kv dd { margin: 0; font-weight: 700; text-align: right; }
.dash-kv dd small { display: block; font-weight: 500; color: var(--ink-mute); font-size: .76rem; }

/* Activity table */
.dash-activity td:nth-child(1), .dash-activity td:nth-child(2) { white-space: nowrap; }
.dash-activity td:nth-child(1) { color: var(--ink-soft); }
.dash-head-tools { display: flex; align-items: center; gap: 10px; }
.dash-head-tools .filter-select { padding: 6px 10px; font-size: .8rem; }
@media (max-width: 560px) { .dash-stats { grid-template-columns: minmax(0, 1fr); } .dash-task { grid-template-columns: 40px minmax(0, 1fr); } .dash-task .btn-small { grid-column: 2; justify-self: start; } }

/* ===================== PRINT (Reports export to PDF via browser print) ===================== */
@media print {
  .side-nav, .sidebar-overlay, .topbar, #toast, #adminMenuPanel, #notifPanel,
  .rp-tabs, #repPrintBtn, [data-rp-export], .modal-overlay,
  .table-toolbar, .pagination, .data-search, .btn-primary, .btn-secondary, .btn-danger, .btn-small {
    display: none !important;
  }
  body.app-page, .content-scroll { background: #fff !important; }
  .content-scroll { margin: 0 !important; padding: 0 !important; }
  .tab-panel { display: block !important; }
  .rp-panel[hidden] { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; page-break-inside: avoid; }
  table { break-inside: auto; }
  tr { break-inside: avoid; }
  .kpi-card { border: 1px solid #ccc !important; box-shadow: none !important; }
}

/* ===================== PAGINATION (generic, used with renderPagedTable) ===================== */
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 0 2px; flex-wrap: wrap; }
.pagination-info { font-size: .8rem; color: var(--ink-mute); }
.data-search { max-width: 280px; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }


/* ===================== MOTION ===================== */
/* One place for every animation/transition added on top of the base styles.
   Rules of thumb: motion is short (<= .45s), enters use ease-out, nothing
   loops except the login background, and everything is switched off for
   people who ask for reduced motion (see the last block). Entrance animations
   use fill-mode "backwards" so no transform/opacity is left behind afterward
   (that would break sticky headers and fixed children). */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --dur-fast: .14s;
  --dur-med: .22s;
  --dur-slow: .4s;
}

@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rowIn    { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes popIn    { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes shake    { 0%, 100% { translate: 0; } 20% { translate: -6px; } 40% { translate: 5px; } 60% { translate: -4px; } 80% { translate: 2px; } }
@keyframes growBar  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drift    { from { translate: 0 0; } to { translate: 26px -20px; } }
@keyframes shellIn  { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Sign-in page ---------- */
.login-shell { animation: shellIn .55s var(--ease-out) backwards; }
.login-aside-body h1, .login-aside-sub, .login-panel { animation: riseIn .5s var(--ease-out) backwards; }
.login-aside-body h1 { animation-delay: .12s; }
.login-aside-sub     { animation-delay: .2s; }
.login-panel         { animation-delay: .28s; }
.login-form-wrap > * { animation: riseIn .45s var(--ease-out) backwards; }
.login-form-wrap > :nth-child(1) { animation-delay: .10s; }
.login-form-wrap > :nth-child(2) { animation-delay: .15s; }
.login-form-wrap > :nth-child(3) { animation-delay: .20s; }
.login-form-wrap > :nth-child(4) { animation-delay: .25s; }
.login-form-wrap > :nth-child(5) { animation-delay: .30s; }
.login-form-wrap > :nth-child(6) { animation-delay: .35s; }
.login-form-wrap > :nth-child(n+7) { animation-delay: .40s; }
.login-panel-track span { transform-origin: left center; animation: growBar .9s var(--ease-out) .5s backwards; }
.login-bg-glow-a { animation: drift 16s ease-in-out infinite alternate; }
.login-bg-glow-b { animation: drift 21s ease-in-out infinite alternate-reverse; }
/* Error / notices: slide in, and shake on a failed sign-in. */
.error-msg { animation: slideDown .25s var(--ease-out), shake .4s .05s; }
.idle-notice, .last-session-chip { animation: slideDown .3s var(--ease-out) backwards; }
.input-group input { transition: border-color var(--dur-fast), box-shadow var(--dur-med) var(--ease-out), background var(--dur-fast); }
.input-icon { transition: color var(--dur-fast); }
.input-icon-wrap:focus-within .input-icon { color: var(--accent); }
.portal-toggle-btn { transition: background var(--dur-med) var(--ease-out), color var(--dur-fast), box-shadow var(--dur-med); }
.login-submit:active:not(:disabled) { transform: scale(.985); }

/* ---------- App: page enter ---------- */
/* The panel itself only fades; its cards/rows do the moving (staggered). */
.tab-panel-enter { animation: fadeIn .2s ease; }
.tab-panel-enter .section-title, .tab-panel-enter .section-sub,
.tab-panel-enter .kpi-card, .tab-panel-enter .card, .tab-panel-enter .dash-date {
  animation: riseIn var(--dur-slow) var(--ease-out) backwards;
}
.tab-panel-enter .section-sub { animation-delay: .03s; }
.tab-panel-enter :is(.kpi-card, .card, .dash-date):nth-child(2) { animation-delay: .05s; }
.tab-panel-enter :is(.kpi-card, .card, .dash-date):nth-child(3) { animation-delay: .09s; }
.tab-panel-enter :is(.kpi-card, .card, .dash-date):nth-child(4) { animation-delay: .13s; }
.tab-panel-enter :is(.kpi-card, .card, .dash-date):nth-child(5) { animation-delay: .17s; }
.tab-panel-enter :is(.kpi-card, .card, .dash-date):nth-child(n+6) { animation-delay: .21s; }
/* Table rows cascade in on the first render after opening a tab. */
.tab-panel-enter tbody tr { animation: rowIn .3s var(--ease-out) backwards; }
.tab-panel-enter tbody tr:nth-child(1) { animation-delay: .10s; }
.tab-panel-enter tbody tr:nth-child(2) { animation-delay: .13s; }
.tab-panel-enter tbody tr:nth-child(3) { animation-delay: .16s; }
.tab-panel-enter tbody tr:nth-child(4) { animation-delay: .19s; }
.tab-panel-enter tbody tr:nth-child(5) { animation-delay: .22s; }
.tab-panel-enter tbody tr:nth-child(6) { animation-delay: .25s; }
.tab-panel-enter tbody tr:nth-child(7) { animation-delay: .28s; }
.tab-panel-enter tbody tr:nth-child(8) { animation-delay: .31s; }
.tab-panel-enter tbody tr:nth-child(n+9) { animation-delay: .34s; }

/* ---------- Hover / press feedback ---------- */
.kpi-card, button.kpi-link { transition: border-color var(--dur-med), background var(--dur-med), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med); }
button.kpi-link:hover, .kpi-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-lift); }
button.kpi-link:active { transform: translateY(0) scale(.99); }
tbody tr { transition: background var(--dur-fast); }
.tab-btn { transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-med), padding-left var(--dur-med) var(--ease-out); }
.tab-btn:hover:not(.active) { padding-left: 10px; }
.tab-btn svg { transition: transform var(--dur-med) var(--ease-spring), opacity var(--dur-fast), color var(--dur-fast); }
.tab-btn:hover svg { transform: scale(1.1); }
.btn-primary, .btn-secondary, .btn-small, .icon-btn, .admin-chip { transition: filter var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med); }
.btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .btn-small:hover:not(:disabled) { transform: translateY(-1px); }
.btn-primary:active:not(:disabled), .btn-secondary:active:not(:disabled), .btn-small:active:not(:disabled), .icon-btn:active { transform: scale(.96); }
.badge { transition: background var(--dur-med), color var(--dur-med); }
.switch-track::before { transition: transform var(--dur-med) var(--ease-spring), background var(--dur-fast); }
.switch-track { transition: background var(--dur-med), border-color var(--dur-med); }
:focus-visible { transition: outline-offset var(--dur-fast); }

/* ---------- Menus, modals, toast ---------- */
.dropdown-panel:not([hidden]) { animation: popIn var(--dur-med) var(--ease-out); transform-origin: top right; }
.modal-overlay { transition: opacity var(--dur-med) ease, backdrop-filter var(--dur-med) ease; }
.modal-overlay.show { backdrop-filter: blur(3px); }
.modal { transform: translateY(16px) scale(.97); transition: transform var(--dur-med) var(--ease-spring); }
.toast { transition: opacity var(--dur-med) ease, transform .3s var(--ease-spring); }

/* Mobile sidebar slides rather than snaps. */
@media (max-width: 980px) { .side-nav { transition: transform .28s var(--ease-out); } }

/* ---------- Reduced motion: honor the OS setting ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}


/* ===================== LOADING TRANSITIONS ===================== */
/* Full-screen loader: shown while signing in/out and as the app's boot
   splash, plus a thin progress bar that sweeps across the top on tab changes.
   The boot splash is plain HTML in app.html so it paints on the very first
   frame (before any script runs). A CSS failsafe hides it after 6s even if
   JavaScript never gets the chance to. */
.rg-loader {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background:
    radial-gradient(520px 520px at 12% 8%, rgba(33,181,103,.16), transparent 70%),
    radial-gradient(560px 560px at 90% 95%, rgba(207,42,42,.13), transparent 70%),
    var(--bg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.rg-loader.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .28s ease, visibility 0s; }
.rg-loader-logo { height: 84px; width: auto; display: block; animation: loaderLogoIn .5s var(--ease-out) backwards, loaderPulse 2s ease-in-out .5s infinite alternate; }
.rg-loader-bar { width: 184px; height: 3px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.rg-loader-bar span { display: block; width: 42%; height: 100%; border-radius: 3px; background: var(--brand-grad); animation: loaderSlide 1.15s cubic-bezier(.65, 0, .35, 1) infinite; }
.rg-loader-label { margin: 0; color: var(--ink-soft); font-size: .86rem; font-weight: 600; letter-spacing: .02em; animation: fadeIn .4s ease .15s backwards; }
.rg-loader--boot { animation: loaderFailsafe .01s linear 6s forwards; }

@keyframes loaderLogoIn  { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes loaderPulse   { from { opacity: 1; scale: 1; } to { opacity: .82; scale: 1.025; } }
@keyframes loaderSlide   { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.rg-topbar { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: var(--brand-grad); transform-origin: left center; transform: scaleX(0); opacity: 0; z-index: 300; pointer-events: none; }
.rg-topbar.run { animation: topbarRun .6s var(--ease-out) forwards; }
@keyframes topbarRun { 0% { transform: scaleX(0); opacity: 1; } 65% { transform: scaleX(.92); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* Sign-in page: the form fades and lifts away while the loader comes up. */
body.is-leaving .login-stage { opacity: 0; transform: scale(.985); transition: opacity .3s ease, transform .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .rg-loader-logo, .rg-loader-bar span { animation: none; }
  .rg-loader-bar span { width: 100%; }
}


/* ===================== SYSTEM OPEN (app reveal) ===================== */
/* Plays once when the app opens: the boot splash lifts away (logo swells and
   fades) while the sidebar slides in, its menu items cascade, the top bar
   drops down and the account controls pop in. loader.js adds body.app-opening
   at that moment and removes it again ~1.5s later. These use the independent
   `translate` / `scale` properties so they never fight the sidebar's own
   transform on mobile. */
@keyframes loaderLogoOut { to { opacity: 0; transform: scale(1.2); filter: blur(5px); } }
@keyframes loaderFadeOut { to { opacity: 0; } }
@keyframes shellSlideIn  { from { opacity: 0; translate: -30px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes navItemIn     { from { opacity: 0; translate: -16px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes popScale      { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }

.rg-loader.leaving { transition: opacity .6s ease .12s, visibility 0s linear .72s; }
.rg-loader.leaving .rg-loader-logo { animation: loaderLogoOut .55s var(--ease-out) forwards; }
.rg-loader.leaving .rg-loader-bar, .rg-loader.leaving .rg-loader-label { animation: loaderFadeOut .25s ease forwards; }

body.app-opening .side-nav { animation: shellSlideIn .7s var(--ease-out) .05s backwards; }
body.app-opening .side-nav-brand { animation: riseIn .6s var(--ease-out) .2s backwards; }
body.app-opening .side-nav .tab-btn, body.app-opening .side-nav .nav-group-label { animation: navItemIn .5s var(--ease-out) backwards; }
body.app-opening .side-nav-scroll > :nth-child(1)  { animation-delay: .25s; }
body.app-opening .side-nav-scroll > :nth-child(2)  { animation-delay: .29s; }
body.app-opening .side-nav-scroll > :nth-child(3)  { animation-delay: .33s; }
body.app-opening .side-nav-scroll > :nth-child(4)  { animation-delay: .37s; }
body.app-opening .side-nav-scroll > :nth-child(5)  { animation-delay: .41s; }
body.app-opening .side-nav-scroll > :nth-child(6)  { animation-delay: .45s; }
body.app-opening .side-nav-scroll > :nth-child(7)  { animation-delay: .49s; }
body.app-opening .side-nav-scroll > :nth-child(8)  { animation-delay: .53s; }
body.app-opening .side-nav-scroll > :nth-child(9)  { animation-delay: .57s; }
body.app-opening .side-nav-scroll > :nth-child(10) { animation-delay: .61s; }
body.app-opening .side-nav-scroll > :nth-child(11) { animation-delay: .65s; }
body.app-opening .side-nav-scroll > :nth-child(12) { animation-delay: .69s; }
body.app-opening .side-nav-scroll > :nth-child(n+13) { animation-delay: .73s; }
body.app-opening .side-nav-footer { animation: fadeIn .5s ease .6s backwards; }
body.app-opening .topbar { animation: slideDown .6s var(--ease-out) .12s backwards; }
body.app-opening .topbar-right > * { animation: popScale .5s var(--ease-spring) backwards; }
body.app-opening .topbar-right > :nth-child(1) { animation-delay: .45s; }
body.app-opening .topbar-right > :nth-child(2) { animation-delay: .52s; }
body.app-opening .topbar-right > :nth-child(3) { animation-delay: .59s; }
body.app-opening .topbar-right > :nth-child(n+4) { animation-delay: .66s; }


/* ===================== LIGHT THEME ===================== */
/* Toggled by <html data-theme="light"> (see js/theme.js). Only the design
   tokens change — components read the tokens, so there is no per-component
   light styling except where a color was hard-coded for dark. Payslips are
   already paper-white in both themes. */
html[data-theme="light"] {
  --bg: #eef1ef;
  --bg-soft: #f6f8f7;
  --sidebar-bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f4f2;
  --surface-hover: #e5eae7;
  --border: rgba(20,28,24,.10);
  --border-strong: rgba(20,28,24,.20);

  --ink: #151a17;
  --ink-soft: #424a46;
  --ink-mute: #5f6863;

  --accent: #1a8a4b;
  --accent-2: #b92222;
  --accent-ink: #12683a;
  --accent-tint: rgba(31,157,85,.12);

  --success: #1a8a4b;
  --success-tint: rgba(31,157,85,.12);
  --warn: #9a6200;
  --warn-tint: rgba(232,166,60,.20);
  --danger: #c62f2a;
  --danger-tint: rgba(198,47,42,.10);
  --neutral-tint: rgba(20,28,24,.06);

  --shadow-lift: 0 18px 40px -22px rgba(20,32,26,.28);

  --danger-ink: #b42318;
  --hr-ink: #b42318;
  --payroll-ink: #146c3c;
  --attendance-ink: #1b5fa8;
  --warn-ink: #8a5a00;
  --info-tint: rgba(47,127,209,.13);
  --hr-tint: rgba(207,42,42,.10);

  --login-bg: #e7ebe8;
  --login-aside-end: #f3f6f4;
  --login-mute: #59626d;
  --line-soft: rgba(20,28,24,.12);
  --grid-line: rgba(20,28,24,.05);
  --panel-tint: rgba(255,255,255,.65);
  --row-stripe: rgba(20,28,24,.025);
  --brand-name-grad: linear-gradient(180deg, #2b312e 0%, #161a18 100%);
}
html[data-theme="light"] body.login-page {
  background:
    radial-gradient(900px 500px at 14% -6%, rgba(33,181,103,.13), transparent 60%),
    radial-gradient(900px 520px at 104% 108%, rgba(207,42,42,.09), transparent 60%),
    var(--login-bg);
}
html[data-theme="light"] .login-shell { box-shadow: var(--shadow-lift), 0 0 0 1px rgba(20,28,24,.03), 0 50px 90px -50px rgba(20,32,26,.35); }
html[data-theme="light"] .login-bg-glow { opacity: .35; }
html[data-theme="light"] .login-panel { box-shadow: 0 16px 34px -26px rgba(20,32,26,.35); }
html[data-theme="light"] .rg-loader {
  background:
    radial-gradient(520px 520px at 12% 8%, rgba(33,181,103,.14), transparent 70%),
    radial-gradient(560px 560px at 90% 95%, rgba(207,42,42,.09), transparent 70%),
    var(--bg);
}
html[data-theme="light"] .modal-overlay { background: rgba(20,28,24,.42); }
html[data-theme="light"] .sidebar-overlay { background: rgba(20,28,24,.4); }
html[data-theme="light"] .toast { box-shadow: 0 12px 30px -14px rgba(20,32,26,.35); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(20,28,24,.22); }
html[data-theme="light"] .tab-btn:hover { background: var(--surface-2); }

/* Logos: each place has a dark-background and a light-background image; CSS picks one. */
.logo-light { display: none; }
html[data-theme="light"] .logo-dark { display: none; }
html[data-theme="light"] .logo-light { display: block; }

/* ---------- Theme toggle button ---------- */
.theme-toggle { position: relative; overflow: hidden; }
.theme-toggle svg { position: absolute; transition: transform .45s var(--ease-spring), opacity .25s ease; }
.theme-toggle .icon-sun  { transform: rotate(-90deg) scale(.4); opacity: 0; }
.theme-toggle .icon-moon { transform: none; opacity: 1; }
html[data-theme="light"] .theme-toggle .icon-sun  { transform: none; opacity: 1; }
html[data-theme="light"] .theme-toggle .icon-moon { transform: rotate(90deg) scale(.4); opacity: 0; }
.login-shell-topbar .theme-toggle { margin-left: auto; width: 30px; height: 30px; background: var(--surface-2); }

/* A brief cross-fade while switching themes (theme.js adds/removes this class). */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, fill .35s ease, stroke .35s ease !important;
}

/* ---- Encode Attendance: proof photos for time in / time out ---- */
.modal-att { width: 900px; }
.att-time-cell { display: flex; align-items: center; gap: 8px; }
.att-time-cell input[type="time"] { width: 148px; flex: none; }
.att-time-cell .att-photo { flex: none; }
.att-photo { display: inline-flex; align-items: center; min-width: 34px; }
.att-photo-add { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.att-photo-add:disabled { opacity: .45; cursor: not-allowed; }
.att-thumb-wrap { position: relative; display: inline-block; }
.att-thumb { padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: zoom-in; line-height: 0; overflow: hidden; }
.att-thumb img { width: 40px; height: 40px; object-fit: cover; display: block; }
.att-thumb-sm { margin-left: 6px; vertical-align: middle; }
.att-thumb-sm img { width: 28px; height: 28px; }


/* ===================== MOTION POLISH ===================== */
/* Refinements layered on the MOTION section above. Same rules of thumb: short,
   ease-out, nothing loops, and reduced-motion (global rule above) switches all
   of it off. Each block says what it fixes. */

/* Modals: leave faster than they arrive. js/ui.js removeOverlay() waits for
   this exit to finish; before, the overlay was deleted at 150ms, partway
   through a 220ms fade, so every close snapped. */
.modal-overlay:not(.show) { transition-duration: .16s; }
.modal-overlay:not(.show) .modal { transition: transform .16s ease-in; }

/* Admin and notification menus: animate closing as well as opening. They are
   toggled with the `hidden` attribute, which normally removes them instantly.
   `display ... allow-discrete` keeps them on screen while they fade out.
   Browsers without it keep the original pop-in (see @supports). */
@supports (transition-behavior: allow-discrete) {
  .dropdown-panel:not([hidden]) { animation: none; }
  .dropdown-panel {
    transform-origin: top right;
    transition: opacity var(--dur-med) ease, transform var(--dur-med) var(--ease-out), display var(--dur-med) allow-discrete;
  }
  .dropdown-panel[hidden] { display: none; opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none; }
}
@starting-style {
  .dropdown-panel:not([hidden]) { opacity: 0; transform: translateY(-6px) scale(.97); }
}

/* Mobile sidebar backdrop: fade with the .28s slide instead of popping.
   Invisible and click-through while closed, so desktop is unaffected. */
.sidebar-overlay { display: block; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility 0s linear .28s; }
.sidebar-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .28s ease, visibility 0s; }

/* Progress bars grow from empty when a tab opens, alongside the count-up
   numbers. Only while the tab-enter class is on, so re-renders don't replay. */
.tab-panel-enter .rp-bar-fill, .tab-panel-enter .rp-mini i {
  transform-origin: left center;
  animation: growBar .55s var(--ease-out) .25s backwards;
}

/* Changing tabs: the page being left fades out quickly (app.js gotoTab). */
@keyframes panelOut { to { opacity: 0; } }
.tab-panel-leave { animation: panelOut .1s ease-in forwards; pointer-events: none; }

/* The page title slides in when it changes. */
@keyframes titleSwap { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
#pageTitle.title-swap { animation: titleSwap .28s var(--ease-out); }

/* A new toast replacing one that is still showing re-pops so it is noticed. */
@keyframes toastBump { from { scale: .93; } to { scale: 1; } }
.toast.bump { animation: toastBump .3s var(--ease-spring); }

/* ---------- Save status (js/sync-status.js) ---------- */
#syncNotices { position: fixed; top: 0; left: 0; right: 0; z-index: 400; display: flex; flex-direction: column; }
.sync-notice { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 10px 18px; font-size: .88rem; line-height: 1.4; color: var(--ink); border-bottom: 1px solid var(--border-strong); box-shadow: var(--shadow-lift); }
.sync-notice.danger { background: #3a1513; border-bottom-color: rgba(224,69,63,.6); color: var(--danger-ink); }
.sync-notice.warn { background: #33270f; border-bottom-color: rgba(232,166,60,.55); color: #ffd9a0; }
.sync-notice strong { font-weight: 700; margin-right: 4px; }
.sync-notice-actions { display: flex; gap: 8px; flex-shrink: 0; }
.sync-btn { font: inherit; font-weight: 600; font-size: .82rem; padding: 6px 13px; border-radius: 100px; cursor: pointer; border: 1px solid currentColor; background: transparent; color: inherit; }
.sync-notice.danger .sync-btn.primary { background: #ffb3ae; border-color: #ffb3ae; color: #3a1513; }
.sync-notice.warn .sync-btn.primary { background: #ffd9a0; border-color: #ffd9a0; color: #33270f; }
#syncPill { position: fixed; left: 16px; bottom: 14px; z-index: 150; font-size: .76rem; font-weight: 600; padding: 5px 12px; border-radius: 100px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink-soft); opacity: 0; pointer-events: none; transition: opacity .25s; }
#syncPill.show { opacity: .9; }
#syncPill.saving { color: var(--warn); }
#syncPill.saved { color: var(--success); }
@media print { #syncNotices, #syncPill { display: none !important; } }