/* ==========================================================================
   HRIS — Plunk-inspired design system
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --color-bg:              #ffffff;
  --color-bg-app:          #fafafa;
  --color-bg-muted:        #f9fafb;
  --color-bg-subtle:       #f3f4f6;
  --color-border:          #e5e7eb;
  --color-border-strong:   #d1d5db;
  --color-text:            #111827;
  --color-text-muted:      #6b7280;
  --color-text-subtle:     #9ca3af;

  /* Primary */
  --color-primary:         #111827;
  --color-primary-hover:   #1f2937;
  --color-primary-fg:      #ffffff;

  /* Accent */
  --color-accent:          #6366f1;
  --color-accent-hover:    #4f46e5;

  /* Semantic */
  --color-danger:          #ef4444;
  --color-danger-bg:       #fef2f2;
  --color-danger-border:   #fecaca;
  --color-danger-text:     #b91c1c;
  --color-success:         #22c55e;
  --color-success-bg:      #f0fdf4;
  --color-success-border:  #bbf7d0;
  --color-success-text:    #15803d;
  --color-warning:         #f59e0b;
  --color-warning-bg:      #fffbeb;
  --color-warning-border:  #fde68a;
  --color-warning-text:    #b45309;

  /* Sidebar — light, matches app background */
  --color-sidebar-bg:          #ffffff;
  --color-sidebar-border:      #e5e7eb;
  --color-sidebar-text:        #4b5563;
  --color-sidebar-text-muted:  #9ca3af;
  --color-sidebar-active-bg:   color-mix(in srgb, var(--color-accent) 5%, transparent);
  --color-sidebar-active-text: #4f46e5;
  --color-sidebar-hover-bg:    rgba(0,0,0,0.04);

  /* Dimensions */
  --sidebar-width:   260px;
  --header-height:   60px;
  --page-inset:      3rem; /* default for very wide displays */

  /* Border radius */
  --radius-sm:  0.25rem;
  --radius:     0.375rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-full:9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;

  /* Transitions */
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; }
button, input, select, textarea { font: inherit; }
ul, ol { list-style: none; }

/* --------------------------------------------------------------------------
   3. App shell — sidebar + main
   -------------------------------------------------------------------------- */
.hris-app {
  display: flex;
  min-height: 100vh;
}

#hris-planner {
  height: 100vh;
  overflow: hidden;
}

#hris-planner .hris-main {
  height: 100vh;
  overflow: hidden;
}

#hris-settings {
  height: 100vh;
  overflow: hidden;
}

#hris-settings .hris-main {
  height: 100vh;
  overflow-y: auto;
}

/* ---- Sidebar ---- */
.hris-sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  height: 100dvh; /* Fixed height so .hris-sidebar__nav scrolls on short screens. */
  background: var(--color-sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  border-right: 1px solid var(--color-sidebar-border);
  transition: width 0.22s ease;
}

/* Minimal collapse / expand control, sat to the right of the ⌘K hint. */
.hris-sidebar__collapse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--color-sidebar-text-muted);
  cursor: pointer; flex-shrink: 0;
  transition: color var(--transition), background var(--transition);
}
.hris-sidebar__collapse:hover { color: var(--color-text); background: var(--color-sidebar-hover-bg); }
.hris-sidebar__collapse svg { transition: transform 0.22s ease; }

/* Icon-only rail (desktop only — the mobile sidebar is an off-canvas drawer). */
@media (min-width: 769px) {
  .hris-app.is-rail { --sidebar-width: 72px; }

  /* In the rail the brand shrinks to just the site icon; the label, ⌘K hint and
     collapse control are hidden until the logo is hovered (see below). */
  .hris-app.is-rail .hris-sidebar__logo-text,
  .hris-app.is-rail .hris-sidebar__logo-kbd,
  .hris-app.is-rail .hris-nav-item__label,
  .hris-app.is-rail .hris-user-chip__info,
  .hris-app.is-rail .hris-user-chip__action,
  .hris-app.is-rail .hris-nav-item__badge {
    display: none;
  }

  .hris-app.is-rail .hris-sidebar__logo { justify-content: center; padding-left: 0; padding-right: 0; cursor: pointer; }

  /* Collapsed: show the site icon by default, and swap to the expand control on
     hover so the user can grow the sidebar again. Both occupy the same centred
     slot, so only one is visible at a time. */
  .hris-app.is-rail .hris-sidebar__logo-mark { display: flex; }
  .hris-app.is-rail .hris-sidebar__collapse { display: none; width: 28px; height: 28px; }
  .hris-app.is-rail .hris-sidebar__logo:hover .hris-sidebar__logo-mark,
  .hris-app.is-rail .hris-sidebar__logo:focus-within .hris-sidebar__logo-mark { display: none; }
  .hris-app.is-rail .hris-sidebar__logo:hover .hris-sidebar__collapse,
  .hris-app.is-rail .hris-sidebar__logo:focus-within .hris-sidebar__collapse { display: inline-flex; }
  /* Only horizontal spacing changes — vertical padding is untouched so every
     icon keeps the same size and vertical position as when expanded. */
  .hris-app.is-rail .hris-nav-item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; position: relative; }
  .hris-app.is-rail .hris-user-chip { justify-content: center; gap: 0; }

  /* Section headings become dividers rather than disappearing, so the icons
     below keep exactly the vertical rhythm they have when expanded. The text
     stays laid out (transparent) to preserve the heading's height. */
  .hris-app.is-rail .hris-nav-heading {
    color: transparent;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }
  .hris-app.is-rail .hris-nav-heading::after {
    content: "";
    position: absolute;
    left: 0.75rem; right: 0.75rem; top: 50%;
    height: 1px;
    background: var(--color-sidebar-border);
  }

  /* A pending-count badge becomes a small dot on the icon's corner. */
  .hris-app.is-rail .hris-nav-item__badge--count {
    display: block;
    position: absolute; top: 4px; right: 14px;
    min-width: 0; width: 8px; height: 8px; padding: 0;
    font-size: 0; line-height: 0; border-radius: 50%;
  }

  /* Chevron points right (expand) when collapsed. */
  .hris-app.is-rail .hris-sidebar__collapse svg { transform: rotate(180deg); }
}

/* Mobile navigation chrome (shown only <=768px) */
.hris-mobile-topbar { display: none; }
.hris-sidebar-backdrop { display: none; }

/* ---- Logo ---- */
.hris-sidebar__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.25rem 1.25rem 1.125rem;
  border-bottom: 1px solid var(--color-sidebar-border, rgba(255,255,255,.08));
}

.hris-sidebar__logo-mark {
  width: 28px; height: 28px;
  border-radius: var(--radius);
  background: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

.hris-sidebar__logo-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  flex: 1;
}

.hris-sidebar__logo-kbd {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius-sm);
  padding: 0.0625rem 0.3125rem;
  font-size: 0.625rem;
  color: var(--color-sidebar-text);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ---- Workspace selector ---- */
.hris-workspace {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 0.5rem 0.5rem;
}

.hris-workspace__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition);
  flex: 1;
  min-width: 0;
}

.hris-workspace__inner:hover { background: var(--color-sidebar-hover-bg); }

.hris-workspace__avatar {
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  background: #6366f1;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}

.hris-workspace__sep {
  width: 1px; height: 14px;
  background: var(--color-border);
  flex-shrink: 0;
}

.hris-workspace__name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.hris-workspace__chevron { color: var(--color-sidebar-text); flex-shrink: 0; }

/* ---- Nav ---- */
.hris-sidebar__nav {
  flex: 1;
  padding: 0.625rem 0.75rem;
  overflow-y: auto;
}

.hris-sidebar__section { margin-bottom: 0.125rem; }

.hris-sidebar__section-label,
.hris-nav-heading {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-sidebar-text-muted);
  padding: 0.75rem 0.5rem 0.25rem;
}

.hris-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
  border-radius: var(--radius-md);
  color: var(--color-sidebar-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
  width: 100%;
}

.hris-nav-item:hover {
  background: var(--color-sidebar-hover-bg);
  color: var(--color-text);
  text-decoration: none;
}

.hris-nav-item.is-active {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-active-text);
}

/* Settings sidebar items are <button>s — reset native button chrome so they
   match the anchor-based nav items. */
.settings-nav-item {
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
}

.hris-nav-item__icon { flex-shrink: 0; opacity: 0.6; }
.hris-nav-item:hover .hris-nav-item__icon { opacity: 0.85; }
.hris-nav-item.is-active .hris-nav-item__icon { opacity: 1; }
.hris-nav-item__label { flex: 1; }

.hris-nav-item__badge {
  font-size: 0.625rem;
  font-weight: 600;
  background: rgba(0,0,0,0.06);
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  padding: 0.0625rem 0.375rem;
}

/* Numeric count badge (documents to sign, pending approvals). */
.hris-nav-item__badge--count {
  margin-left: auto;
  min-width: 1.25rem;
  text-align: center;
  background: var(--color-accent);
  color: #fff;
}

.hris-sidebar__divider {
  height: 1px;
  background: var(--color-sidebar-border);
  margin: 0.375rem 0;
}

/* ---- Footer nav (Documentation, Settings — above user) ---- */
.hris-sidebar__footer-nav {
  padding: 0.25rem 0.5rem;
  border-top: 1px solid var(--color-sidebar-border);
}

/* ---- User chip — very bottom ---- */
.hris-sidebar__footer {
  padding: 0.5rem;
  border-top: 1px solid var(--color-sidebar-border);
}

.hris-user-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  color: inherit;
}

.hris-user-chip:hover { background: var(--color-sidebar-hover-bg); }

.hris-avatar {
  width: 26px; height: 26px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

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

.hris-user-chip__name {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
  min-width: 0;
}

.hris-user-chip__name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.hris-user-chip__role {
  flex-shrink: 0;
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 0.1875rem 0.375rem;
  border-radius: 0.25rem;
  color: #fff;
  background: var(--color-accent, #2563eb);
}

/* Per-role accent colours (match the employee-page role selector). */
.hris-user-chip__role[data-role="administrator"]     { background: #7c3aed; }
.hris-user-chip__role[data-role="hris_admin"]        { background: #2563eb; }
.hris-user-chip__role[data-role="hris_manager"]      { background: #16a34a; }
.hris-user-chip__role[data-role="hris_employee"]     { background: #6b7280; }

.hris-user-chip__email {
  font-size: 0.6875rem;
  color: var(--color-sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.hris-user-chip__action { color: var(--color-sidebar-text); flex-shrink: 0; }

/* ---- User chip submenu ---- */
.hris-user-chip-wrap {
  position: relative;
}

.hris-user-chip-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  z-index: 300;
  overflow: hidden;
}

.hris-user-chip-menu.is-open { display: block; }

.hris-user-chip-menu__name {
  padding: 0.625rem 0.875rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hris-user-chip-menu__divider {
  height: 1px;
  background: var(--color-border);
  margin: 0;
}

.hris-user-chip-menu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--color-text-muted);
  text-decoration: none;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.hris-user-chip-menu__item:hover {
  background: var(--color-bg-muted);
  color: var(--color-text);
  text-decoration: none;
}

/* "Soon" nav items — grayed out, no click */
.hris-nav-item.is-soon {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ---- Main content ---- */
.hris-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-app);
  transition: margin-left 0.22s ease;
}

/* Sticky page header — used on Employees, Documents, Settings */
.hris-page-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 0 1.5rem;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.hris-page-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.hris-page-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hris-content {
  padding: 1.5rem var(--page-inset);
  flex: 1;
}

/* ---- Dashboard greeting (replaces page header on dashboard) ---- */
.hris-greeting {
  padding: 2rem var(--page-inset) 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.hris-greeting__title {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.hris-greeting__sub {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: 0.125rem;
}

.hris-quiet-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.3125rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  box-shadow: var(--shadow-xs);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.hris-quiet-pill__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-text-subtle);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  text-decoration: none;
  color: #fff;
}

.btn--secondary {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-xs);
}

.btn--secondary:hover {
  background: var(--color-bg-subtle);
  text-decoration: none;
  color: var(--color-text);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}

.btn--ghost:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
  text-decoration: none;
}

.btn--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}

.btn--danger:hover {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
  text-decoration: none;
}

.btn--sm {
  padding: 0.3125rem 0.625rem;
  font-size: 0.8125rem;
  border-radius: var(--radius);
}

.btn--lg {
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  border-radius: var(--radius-lg);
}

.btn--icon {
  padding: 0.4375rem;
  border-radius: var(--radius-md);
}

.btn--loading { pointer-events: none; }

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

/* The Contact Details card hosts an inline custom dropdown whose menu must
   escape the card's overflow:hidden clipping when open. */
#contact-details-card { overflow: visible; }

/* Same clipping issue on the Planner's employee-picker bar — the "Add Team"
   dropdown menu must escape the card's overflow:hidden when open. */
#planner-team-card { overflow: visible; }

/* Same clipping issue on the "Leave Remaining" stat card — the allowance
   breakdown popover (.hris-info-popover) must escape the card's
   overflow:hidden when open. */
#leave-remaining-card { overflow: visible; }

/* Same clipping issue on the Diary Event Types card — each row's kebab actions
   menu (.hris-kebab__menu) must escape the card's overflow:hidden when open. */
#det-card { overflow: visible; }

.card__header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.card__desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 0.125rem;
}

.card__body  { padding: 1.5rem; }
.card__footer {
  padding: 0.875rem 1.5rem;
  background: var(--color-bg-muted);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Stat cards — Plunk style */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--shadow-xs);
}

.stat-card {
  padding: 1.25rem 1.5rem;
  border-right: 1px solid var(--color-border);
  position: relative;
}

.stat-card:last-child { border-right: none; }

.stat-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}

.stat-card__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.stat-card__icon { color: var(--color-text-subtle); }

.stat-card__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.625rem;
}

.stat-card__sub {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.stat-card__sub-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.0625rem 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text);
}

.stat-card__sub-pill--success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}

.stat-card__sub-pill--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}

.stat-card__sub-pill--danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

/* Legacy compat shims */
.stat-card--primary .stat-card__value { color: var(--color-text); }
.stat-card--success .stat-card__value { color: var(--color-text); }
.stat-card--danger  .stat-card__value { color: var(--color-text); }
.stat-card--warning .stat-card__value { color: var(--color-text); }

/* --------------------------------------------------------------------------
   6. Badges
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge--neutral {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.badge--primary {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.badge--success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

.badge--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}

.badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-color: var(--color-warning-border);
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.form-group { display: flex; flex-direction: column; gap: 0.375rem; }

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.form-label--required::after {
  content: ' *';
  color: var(--color-danger);
}

.form-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.form-error {
  font-size: 0.8125rem;
  color: var(--color-danger-text);
}

.input,
.select,
.textarea {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.15);
}

.input::placeholder,
.textarea::placeholder { color: var(--color-text-subtle); }

.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--color-bg-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.input--error,
.select--error,
.textarea--error {
  border-color: var(--color-danger);
}

.input--error:focus { box-shadow: 0 0 0 3px rgb(239 68 68 / 0.15); }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
  padding-right: 2rem;
  cursor: pointer;
}

.textarea { resize: vertical; min-height: 80px; }

/* ─────────────────────────────────────────────────────
   Custom non-native dropdown
   All <select class="select"> are replaced by this
   component via initCustomSelects() in app.js.
───────────────────────────────────────────────────── */
.hris-dropdown {
  position: relative;
  display: block;
}

.hris-dropdown--auto {
  display: inline-flex;
  align-items: stretch;
}

.hris-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.625rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.hris-dropdown__trigger:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.15);
}

.hris-dropdown__trigger:disabled {
  background: var(--color-bg-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.hris-dropdown__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hris-dropdown__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.hris-dropdown--open .hris-dropdown__chevron {
  transform: rotate(180deg);
}

.hris-dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.10), 0 2px 6px rgb(0 0 0 / 0.06);
  /* Above drawers (1000) and modal dialogs (1100); portaled to <body> when open. */
  z-index: 1200;
  padding: 0.25rem;
  max-height: 260px;
  overflow-y: auto;
  display: none;
}

.hris-dropdown--open .hris-dropdown__menu {
  display: block;
}

.hris-dropdown__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4375rem 0.625rem;
  font-size: 0.875rem;
  color: var(--color-text);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.4;
}

.hris-dropdown__option:hover,
.hris-dropdown__option:focus-visible {
  background: var(--color-bg-subtle);
  outline: none;
}

.hris-dropdown__option[aria-selected="true"] {
  color: var(--color-accent);
  font-weight: 500;
}

.hris-dropdown__option[aria-selected="true"]::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 0.5rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.hris-dropdown__option:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.hris-dropdown--error .hris-dropdown__trigger {
  border-color: var(--color-danger);
}

.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .input {
  border-radius: 0;
  flex: 1;
}

.input-group .input:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.input-group .input:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.input-group .btn:last-child     { border-radius: 0 var(--radius-md) var(--radius-md) 0; border-left: none; }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* --------------------------------------------------------------------------
   8. Table
   -------------------------------------------------------------------------- */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-xs);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

thead {
  background: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border);
}

/* border-collapse keeps the thead background square — round the band's top
   corners to match the .table-wrapper radius. */
.table-wrapper thead th:first-child { border-top-left-radius: var(--radius-lg); }
.table-wrapper thead th:last-child  { border-top-right-radius: var(--radius-lg); }

th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

td {
  padding: 0.875rem 1rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr:hover { background: var(--color-bg-muted); }

tbody tr[data-employee-id] { cursor: pointer; }

.table-cell--actions {
  text-align: right;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. Alerts / Toast notifications
   -------------------------------------------------------------------------- */
.alert {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: 0.875rem;
}

.alert[hidden] { display: none; }

.alert__icon { flex-shrink: 0; margin-top: 0.0625rem; }
.alert__body { flex: 1; }
.alert__title { font-weight: 600; margin-bottom: 0.125rem; }

.alert--info    { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.alert--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-text); }
.alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.alert--danger  { background: var(--color-danger-bg);  border-color: var(--color-danger-border);  color: var(--color-danger-text); }

/* Toast stack */
#hris-toast-stack {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  max-width: 360px;
  animation: toast-in 200ms ease;
}

.toast__icon { flex-shrink: 0; margin-top: 0.0625rem; }
.toast__body { flex: 1; }
.toast__title { font-weight: 600; font-size: 0.875rem; color: var(--color-text); }
.toast__msg   { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 0.125rem; }
.toast__close { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: 0; }

.toast--success .toast__icon { color: var(--color-success-text); }
.toast--danger  .toast__icon { color: var(--color-danger-text); }
.toast--warning .toast__icon { color: var(--color-warning-text); }
.toast--info    .toast__icon { color: var(--color-accent); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(0.5rem) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   10. Empty states
   -------------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  gap: 0.75rem;
}

.empty-state__icon { color: var(--color-text-subtle); margin-bottom: 0.25rem; }
.empty-state__title { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.empty-state__desc  { font-size: 0.875rem; color: var(--color-text-muted); max-width: 360px; }

/* --------------------------------------------------------------------------
   11. Loading / skeleton
   -------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg-subtle) 25%, var(--color-border) 50%, var(--color-bg-subtle) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius);
}

@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.spinner {
  display: inline-block;
  width: 1rem; height: 1rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}

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

/* --------------------------------------------------------------------------
   12. Search bar
   -------------------------------------------------------------------------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0.4375rem 0.75rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-bar:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.15);
}

.search-bar__icon { color: var(--color-text-subtle); flex-shrink: 0; }

.search-bar__input {
  border: none;
  background: none;
  outline: none;
  flex: 1;
  font-size: 0.875rem;
  color: var(--color-text);
  min-width: 0;
}

.search-bar__input::placeholder { color: var(--color-text-subtle); }

/* --------------------------------------------------------------------------
   13. Employee / record row
   -------------------------------------------------------------------------- */
.employee-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.employee-row__avatar {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}

/* Login suspended / turned off: flag the avatar with a red border. */
.employee-row__avatar--login-off {
  border: 2px solid var(--color-danger);
}

.employee-row__name {
  font-weight: 500;
  color: var(--color-text);
  font-size: 0.875rem;
}

.employee-row__role {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   14. Dialog / Modal
   -------------------------------------------------------------------------- */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: overlay-in 150ms ease;
}

@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.dialog {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: dialog-in 150ms ease;
}

@keyframes dialog-in {
  from { opacity: 0; transform: scale(0.97) translateY(0.5rem); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.dialog__header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dialog__title { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.dialog__body  { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.dialog__footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   15. Tabs
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 3px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
.tab-btn svg { flex-shrink: 0; opacity: 0.7; transition: opacity 0.12s; }
.tab-btn:hover svg { opacity: 0.9; }
.tab-btn.is-active svg { opacity: 1; }

.tab-btn:hover { color: var(--color-text); }

.tab-btn.is-active {
  background: #fff;
  color: var(--color-text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
}

/* --------------------------------------------------------------------------
   16. Divider / separator
   -------------------------------------------------------------------------- */
.divider {
  height: 1px;
  background: var(--color-border);
  margin: 1.25rem 0;
}

/* --------------------------------------------------------------------------
   17. Login page
   -------------------------------------------------------------------------- */
.hris-login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-muted);
  padding: 2rem 1rem;
}

.hris-login-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 2rem;
}

.hris-login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.hris-login-logo__mark {
  width: 40px; height: 40px;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.hris-login-logo__text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.hris-login-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
}

.hris-login-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: 1.5rem;
}

.hris-login-form { display: flex; flex-direction: column; gap: 1rem; }

.hris-login-form .btn--primary {
  width: 100%;
  height: 2.5rem;
  font-size: 0.9375rem;
}

.hris-sso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  height: 2.5rem;
  font-size: 0.9375rem;
  text-decoration: none;
}

.hris-login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.hris-login-divider::before,
.hris-login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* --------------------------------------------------------------------------
   18. Section headers
   -------------------------------------------------------------------------- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}

.section-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.section-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 0.125rem;
}

/* --------------------------------------------------------------------------
   19. Activity / audit log
   -------------------------------------------------------------------------- */
.activity-list { display: flex; flex-direction: column; }

.activity-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--color-border);
}

.activity-item:last-child { border-bottom: none; }

.activity-item__dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  flex-shrink: 0;
  margin-top: 0.375rem;
}

.activity-item__body { flex: 1; min-width: 0; }

.activity-item__action {
  font-size: 0.875rem;
  color: var(--color-text);
}

.activity-item__meta {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 0.125rem;
}

/* --------------------------------------------------------------------------
   20. Toolbar / filter bar
   -------------------------------------------------------------------------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.toolbar__spacer { flex: 1; }

/* --------------------------------------------------------------------------
   21. Utility classes
   -------------------------------------------------------------------------- */
.text-muted   { color: var(--color-text-muted); }
.text-subtle  { color: var(--color-text-subtle); }
.text-sm      { font-size: 0.8125rem; }
.text-xs      { font-size: 0.75rem; }
.text-base    { font-size: 0.875rem; }
.text-lg      { font-size: 1rem; }
.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold    { font-weight: 700; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only      { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.mt-1   { margin-top: 0.25rem; }
.mt-2   { margin-top: 0.5rem; }
.mt-4   { margin-top: 1rem; }
.mb-4   { margin-bottom: 1rem; }
.mb-6   { margin-bottom: 1.5rem; }
.w-full { width: 100%; }

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  :root { --page-inset: 2rem; }
}

@media (max-width: 1200px) {
  :root { --page-inset: 1.5rem; }
}

@media (max-width: 1024px) {
  :root { --page-inset: 1.25rem; }
}

@media (max-width: 768px) {
  :root { --page-inset: 1.25rem; }

  .hris-sidebar {
    transform: translateX(-100%);
    transition: transform 200ms ease;
  }

  .hris-sidebar.is-open {
    transform: translateX(0);
  }

  .hris-main {
    margin-left: 0;
    /* Allow the flex item to shrink below its content's intrinsic width so wide
       children (e.g. the planner month grid) can't push the page past the
       viewport. */
    min-width: 0;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  /* Native time/date inputs render with a cramped tap target/text (or, for
     date, a collapsed control height — appearance: none on .input strips
     the native chrome mobile browsers size the control by) at the default
     .input size — size them up specifically on mobile. */
  input[type="time"].input,
  input[type="date"].input {
    font-size: 1.125rem;
    padding: 0.75rem;
    min-height: 48px;
  }

  /* Employee summary card (My Info header): stack into two full-width rows
     instead of squeezing avatar/name into whatever's left after the
     Employee No. and Edit button claim their fixed widths. */
  .emp-header-card__body {
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
  }
  .emp-header-card__top {
    width: 100%;
  }
  .emp-header-card__meta {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* Planner employee-picker bar: full-width search on its own row, with the
     All Employees toggle / Add Team / Clear / Subscribe controls wrapping
     onto a second row instead of squeezing beside the search input. */
  .planner-search-row {
    flex-wrap: wrap;
    row-gap: 0.625rem;
  }
  #planner-emp-picker {
    flex: 1 1 100% !important;
  }

  /* Fixed mobile top bar with the hamburger */
  .hris-mobile-topbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    padding: 0 0.5rem;
    background: var(--color-sidebar-bg);
    border-bottom: 1px solid var(--color-sidebar-border);
    z-index: 90;
  }
  .hris-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    color: var(--color-sidebar-text);
    border-radius: 8px;
    cursor: pointer;
  }
  .hris-mobile-toggle:active { background: rgba(0, 0, 0, 0.06); }
  .hris-mobile-topbar__brand { color: var(--color-text); font-weight: 700; letter-spacing: 0.02em; }

  /* Content clears the fixed bar */
  .hris-main { padding-top: 52px; }

  /* Drawer sits above the backdrop; backdrop above content */
  .hris-sidebar { z-index: 110; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3); }
  .hris-sidebar-backdrop.is-open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 105;
  }
  body.hris-nav-open { overflow: hidden; }

  /* Stack detail "bento" grids (label + value) and the dashboard split into a
     single column on phones. Scoped to those exact inline patterns so nothing
     else (e.g. the compact stat cards) is affected. */
  [style*="minmax(160px"],
  [style*="1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Full-height pages (Planner, Settings) scroll normally on mobile */
  #hris-planner, #hris-settings,
  #hris-planner .hris-main, #hris-settings .hris-main {
    height: auto;
    overflow: visible;
  }

  /* Toggle-button nav bars use the full width (no desktop sidebar to subtract) */
  .emp-tab-bar { max-width: calc(100vw - 2 * var(--page-inset)); }

  /* Header / greeting tighten up and wrap */
  .hris-greeting { padding-top: 1.25rem; flex-wrap: wrap; }
  .hris-greeting__title { font-size: 1.35rem; }
  .hris-page-header {
    position: static;
    height: auto;
    padding: 0.75rem var(--page-inset);
    flex-wrap: wrap;
  }

  /* Dialogs never exceed the viewport */
  .dialog { max-width: calc(100vw - 1.5rem) !important; }
}

/* ==========================================================================
   Employee tabs
   ========================================================================== */

.emp-tab-bar {
  display: inline-flex;
  align-self: flex-start;   /* prevent flex container from stretching this to full width */
  flex-shrink: 0;
  gap: 3px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 3px;
  max-width: calc(100vw - var(--sidebar-width) - 2 * var(--page-inset) - 2px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.emp-tab-bar::-webkit-scrollbar { display: none; }

@media (max-width: 768px) {
  /* Full-width scrolling toggle bar (defined after the base rule so it wins) */
  .emp-tab-bar { max-width: calc(100vw - 2 * var(--page-inset)); }
}

@media (max-width: 768px) {
  /* Toggle tab bar -> collapsible dropdown */
  .emp-tab-bar--mobile {
    display: block;
    align-self: stretch;    /* fill the width (match the card) instead of hugging content */
    width: auto;            /* fill between existing margins, never 100% + margin */
    max-width: 100%;
    overflow: visible;
    padding: 4px;
    box-sizing: border-box;
  }
  /* The employee bar aligns via margin-left; give it a matching right inset */
  #emp-tab-bar.emp-tab-bar--mobile {
    margin-right: var(--page-inset);
    margin-top: -0.5rem !important;     /* tighten gap above (from the card) */
    margin-bottom: 0.5rem !important;   /* tighten gap below (was 1.5rem) */
  }
  /* No "pill" shadow on the collapsed dropdown header */
  .emp-tab-bar--mobile .emp-tab-btn.is-active { box-shadow: none; }
  .emp-tab-bar--mobile .emp-tab-btn {
    display: none;
    width: 100%;
    justify-content: flex-start;
    border-radius: 6px;
  }
  .emp-tab-bar--mobile:not(.is-open) .emp-tab-btn.is-active { display: flex; }
  .emp-tab-bar--mobile.is-open .emp-tab-btn { display: flex; margin-bottom: 2px; }
  .emp-tab-bar--mobile.is-open .emp-tab-btn:last-child { margin-bottom: 0; }
  /* chevron on the active (acts as the dropdown affordance) */
  .emp-tab-bar--mobile .emp-tab-btn.is-active::after {
    content: "";
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.5;
  }
  .emp-tab-bar--mobile.is-open .emp-tab-btn.is-active::after {
    transform: translateY(2px) rotate(-135deg);
  }
}

.emp-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s, box-shadow 0.12s;
}

.emp-tab-btn svg { flex-shrink: 0; opacity: 0.7; transition: opacity 0.12s; }

.emp-tab-btn:hover { color: var(--color-text); }
.emp-tab-btn:hover svg { opacity: 0.9; }

.emp-tab-btn.is-active {
  background: #fff;
  color: var(--color-text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
}
.emp-tab-btn.is-active svg { opacity: 1; }

.emp-tab-panel {
  animation: fadeIn 0.15s ease;
}

/* Diary panel stretches to fill remaining viewport */
.emp-tab-panel[data-panel="diary"] {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 230px);
}

.emp-tab-panel[data-panel="diary"] > .card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#cal-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#cal-container > .cal-grid--month,
#planner-container > .cal-grid--month {
  flex: 1;
}

#cal-container > .cal-grid--week-time,
#planner-container > .cal-grid--week-time {
  flex: 1;
  overflow: auto;
  min-height: 400px;
}

/* Short (laptop) viewports: the desktop layout locks the Planner/Diary to the
   viewport height and clips the month grid with overflow:hidden. On screens
   too short to fit 6 full rows, unlock the height and let the page/card grow
   with content and scroll — the same treatment the mobile query applies, but
   keyed off viewport HEIGHT so wide-but-short laptops get it too. Tall desktop
   monitors (height > 900px) keep the full-height, non-scrolling layout. */
@media (max-height: 900px) {
  /* Planner page scrolls normally instead of being pinned to 100vh. */
  #hris-planner,
  #hris-planner .hris-main {
    height: auto;
    overflow: visible;
  }
  /* Stop the nested flex containers (Planner inline styles + Diary card)
     clipping the grid; !important is needed to beat the inline overflow. */
  #hris-employee .emp-tab-panel[data-panel="diary"] > .card,
  #hris-employee #cal-container,
  #hris-planner #planner-content,
  #hris-planner #planner-cal-card,
  #hris-planner #planner-container {
    overflow: visible !important;
    flex: none !important;
  }
  /* Let the month grid take its natural height (cells are min-height:90px) so
     all 6 rows are visible and the page scrolls to reach them. */
  #hris-employee #cal-container > .cal-grid--month,
  #hris-planner #planner-container > .cal-grid--month {
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   Calendar / Diary
   ========================================================================== */

.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.cal-toolbar__nav {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
}

.cal-toolbar__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  min-width: 160px;
  text-align: center;
}

.cal-toolbar__title-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border: none;
  background: transparent;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.cal-toolbar__title-btn:hover {
  background: var(--color-bg-muted, #f3f4f6);
}

.cal-toolbar__title-btn svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.cal-month-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 200;
  padding: 0.75rem;
}

.cal-month-picker__year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.cal-month-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.375rem;
}

.cal-month-picker__btn {
  padding: 0.375rem 0.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 0.8125rem;
  cursor: pointer;
  color: var(--color-text);
}

.cal-month-picker__btn:hover {
  background: var(--color-bg-muted, #f3f4f6);
}

.cal-month-picker__btn.is-active {
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
}

.cal-toolbar__views {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cal-view-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--color-border);
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.cal-view-btn:last-child {
  border-right: none;
}

.cal-view-btn:hover {
  background: var(--color-bg-muted);
  color: var(--color-text);
}

.cal-view-btn.is-active {
  background: var(--color-accent);
  color: #fff;
}

/* Month grid */
.cal-grid--month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: auto;
  gap: 0;
  border: 1px solid #e9eaec;
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 100%;
}

.cal-grid__day-header {
  background: var(--color-bg-muted);
  padding: 0.375rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  text-align: center;
  border-bottom: 1px solid #e9eaec;
}

/* Weekend day headers (columns 6 & 7 = Saturday & Sunday) */
.cal-grid--month > .cal-grid__day-header:nth-child(6),
.cal-grid--month > .cal-grid__day-header:nth-child(7) {
  background: #f1f2f4;
}

.cal-cell {
  background: #ffffff;
  min-height: 90px;
  padding: 0.375rem 0.5rem;
  vertical-align: top;
  position: relative;
  border-right: 1px solid #e9eaec;
  border-bottom: 1px solid #e9eaec;
}

/* Last column — no right border */
.cal-grid--month > .cal-cell:nth-child(7n) {
  border-right: none;
}

/* Saturday column (col 6 in a Mon-start grid) */
.cal-grid--month > .cal-cell:nth-child(7n+6) {
  background: #f8f9fb;
}

/* Sunday column (col 7) */
.cal-grid--month > .cal-cell:nth-child(7n) {
  background: #f8f9fb;
}

.cal-cell--other-month {
  background: #f4f5f7 !important;
  opacity: 0.7;
}

/* Bank holiday cells */
.cal-cell--holiday {
  background: var(--color-warning-bg) !important;
  box-shadow: inset 3px 0 0 var(--color-warning);
}

.cal-cell__holiday {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-warning-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

/* Non-working day inside a booked event's span — not deducted from leave */
.cal-cell--nonworking {
  background: var(--color-bg-muted) !important;
  box-shadow: inset 3px 0 0 var(--color-border);
}

.cal-cell__nonworking {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px; /* sits below the event pill(s), not above */
}

.cal-cell--today .cal-cell__num {
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cal-cell__num {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.25rem;
  display: inline-flex;
}

.cal-cell:hover {
  background: #eef0f5 !important;
  cursor: pointer;
}

/* Event pills */
.cal-evt {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  background: var(--color-accent);
  color: #fff;
}

.cal-evt--leave { background: #e8a020; }
.cal-evt--leave-annual { background: #2563eb; }

/* Month calendar: coloured dots + agenda on mobile, full pills on desktop */
.cal-cell__dots { display: none; }
.cal-mobile-agenda { display: none; }
.cal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
@media (max-width: 768px) {
  #hris-employee .cal-cell .cal-evt,
  #hris-planner .cal-cell .cal-evt { display: none; }
  .cal-cell__dots { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin-top: 2px; }
  .cal-mobile-agenda { display: block; border-top: 1px solid var(--color-border); }

  /* Days are always square on mobile — a fixed grid of taps, not variable-height
     boxes stuffed with pills (those are hidden here; a dot + the agenda below
     carry the detail instead). */
  #hris-employee .cal-cell,
  #hris-planner .cal-cell {
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 0.25rem 0.125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1px;
  }
  #hris-employee .cal-cell__num,
  #hris-planner .cal-cell__num { margin-bottom: 0; }
  /* Long text labels don't fit a square cell — the tinted background
     (cal-cell--holiday / cal-cell--nonworking) is the mobile signal instead. */
  #hris-employee .cal-cell__holiday,
  #hris-planner .cal-cell__holiday,
  #hris-employee .cal-cell__nonworking,
  #hris-planner .cal-cell__nonworking { display: none; }

  #hris-employee .cal-cell--selected,
  #hris-planner .cal-cell--selected {
    box-shadow: inset 0 0 0 2px var(--color-accent, #2563eb);
    background: #eff6ff !important;
  }

  /* Let the calendar grow with content and the page scroll, instead of
     clipping inside the desktop full-height flex containers. */
  #hris-employee .emp-tab-panel[data-panel="diary"] > .card,
  #hris-employee #cal-container,
  #hris-planner #planner-content,
  #hris-planner #planner-cal-card,
  #hris-planner #planner-container { overflow: visible !important; flex: none !important; }
  #hris-employee #cal-container > .cal-grid--month,
  #hris-planner #planner-container > .cal-grid--month {
    flex: none !important;
    /* Let columns shrink to the viewport (pills are hidden on mobile). */
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  /* Employee picker row wraps instead of squeezing. */
  #hris-planner #planner-team-card .card__body > div:first-child { flex-wrap: wrap; }
  /* Calendar toolbar nav wraps so the date picker / title don't overflow. */
  .cal-toolbar__nav { flex-wrap: wrap; }
  .cal-toolbar__title { min-width: auto; }
  #planner-date-picker { min-width: 0; }
}
.cal-evt--leave-sick { background: #dc2626; }
.cal-evt--leave-other { background: #7c3aed; }
.cal-evt--wfh { background: #0891b2; }
.cal-evt--pending { opacity: 0.7; }
.cal-evt--rejected { opacity: 0.4; text-decoration: line-through; }

/* Week grid */
.cal-grid--week {
  display: grid;
  grid-template-columns: 50px repeat(7, 1fr);
  gap: 0;
  border: 1px solid #e9eaec;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cal-week-header {
  background: var(--color-bg-muted);
  padding: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-text-muted);
  border-right: 1px solid #e9eaec;
  border-bottom: 1px solid #e9eaec;
}

.cal-week-header:last-child { border-right: none; }

.cal-week-header--today {
  color: var(--color-accent);
}

/* Weekend headers (col 7 = Saturday, col 8 = Sunday in 8-col grid) */
.cal-grid--week > .cal-week-header:nth-child(7),
.cal-grid--week > .cal-week-header:nth-child(8) {
  background: #f1f2f4;
}

.cal-week-allday {
  background: #ffffff;
  min-height: 48px;
  padding: 0.25rem 0.375rem;
  border-right: 1px solid #e9eaec;
  border-bottom: 1px solid #e9eaec;
}

.cal-week-allday:last-child { border-right: none; }

/* Weekend all-day cells */
.cal-grid--week > .cal-week-allday:nth-child(8n+7),
.cal-grid--week > .cal-week-allday:nth-child(8n) {
  background: #f8f9fb;
}

.cal-week-allday--label {
  background: var(--color-bg-muted);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.5rem;
  font-size: 0.6875rem;
  color: var(--color-text-subtle);
}

/* Agenda */
.cal-agenda__group {
  margin-bottom: 1.5rem;
}

.cal-agenda__date {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.cal-agenda__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}

.cal-agenda__item:hover {
  background: var(--color-bg-muted);
  padding-left: 0.5rem;
}

.cal-agenda__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-accent);
}

.cal-agenda__dot--leave { background: #e8a020; }
.cal-agenda__dot--leave-annual { background: #2563eb; }
.cal-agenda__dot--leave-sick { background: #dc2626; }
.cal-agenda__dot--wfh { background: #0891b2; }

.cal-agenda__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.cal-agenda__meta {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-left: auto;
}

/* ==========================================================================
   Organisation chart
   ========================================================================== */

/* Keep the page at viewport width: without min-width:0 the flex main column
   grows to fit a wide tree, dragging the search/controls card with it. The
   chart scrolls inside #org-tree-container instead. */
#hris-organisation .hris-main {
  min-width: 0;
}

.org-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.org-level {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 0;
}

.org-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.org-connector-v {
  width: 2px;
  height: 24px;
  background: var(--color-border);
  flex-shrink: 0;
}

.org-connector-h-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

.org-connector-h-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--color-border);
}

.org-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
  min-width: 160px;
  max-width: 220px;
}

.org-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

/* Employees outside the viewer's reporting chain: shown but not clickable. */
.org-card--static,
.org-card--static:hover {
  cursor: default;
  border-color: var(--color-border);
  box-shadow: none;
}

.org-list-link--static { cursor: default; }

.org-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.org-card__info {
  min-width: 0;
}

.org-card__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-card__role {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-children {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  position: relative;
  padding-top: 24px;
}

.org-children::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 24px;
  background: var(--color-border);
  transform: translateX(-50%);
}

.org-children::after {
  content: '';
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border);
}

.org-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 24px;
}

.org-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 24px;
  background: var(--color-border);
  transform: translateX(-50%);
}

/* Compact leaf stacking (vertical chart): employees with no reports render as
   a single narrow column under their manager, connected by a left rail with
   elbow connectors, instead of fanning out side-by-side. */
.org-child--leafgroup {
  align-items: stretch;
}

.org-child--leafgroup::before {
  left: 20px;
  transform: none;
}

.org-leaf {
  display: flex;
  position: relative;
  padding: 10px 0 0 44px;
}

.org-leaf::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--color-border);
}

.org-leaf:last-child::before { height: 36px; }

.org-leaf::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 36px;
  width: 24px;
  height: 2px;
  background: var(--color-border);
}

.org-team-badge {
  display: inline-block;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Organisation — view toggle (Vertical chart / List) */
.org-view-toggle {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.org-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--color-bg);
  border: none;
  border-right: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.org-view-btn:last-child { border-right: none; }
.org-view-btn:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.org-view-btn.is-active { background: var(--color-accent); color: #fff; }

/* Zoomable chart wrapper — sized to its content so the shareholder band
   centres over the full tree width and scrollbars track the scaled size. */
#org-zoom-wrap {
  width: max-content;
  min-width: 100%;
}

/* Organisation — zoom controls */
.org-zoom-controls {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.org-zoom-level {
  min-width: 48px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: none;
  border-right: 1px solid var(--color-border);
  cursor: pointer;
  padding: 0 0.375rem;
}

.org-zoom-level:hover { background: var(--color-bg-subtle); color: var(--color-text); }

/* Organisation — horizontal (left-to-right) chart.
   Same DOM as the vertical chart; the modifier flips the flow so the tree
   grows downward (tall) instead of sideways (wide). */
.org-tree--horizontal {
  display: inline-flex;
  align-items: center;
}

.org-tree--horizontal .org-children {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.875rem;
  padding-top: 0;
  padding-left: 24px;
}

.org-tree--horizontal .org-children::before {
  top: 50%;
  left: 0;
  width: 24px;
  height: 2px;
  transform: translateY(-50%);
}

.org-tree--horizontal .org-children::after {
  top: 0;
  bottom: 0;
  left: 24px;
  right: auto;
  width: 2px;
  height: auto;
}

.org-tree--horizontal .org-child {
  flex-direction: row;
  align-items: center;
  padding-top: 0;
  padding-left: 24px;
}

.org-tree--horizontal .org-child::before {
  top: 50%;
  left: 0;
  width: 24px;
  height: 2px;
  transform: translateY(-50%);
}

/* Root level of the horizontal chart has no parent to connect to. */
.org-tree--horizontal .org-children--root { padding-left: 0; }
.org-tree--horizontal .org-children--root::before,
.org-tree--horizontal .org-children--root::after { display: none; }
.org-tree--horizontal .org-children--root > .org-child { padding-left: 0; }
.org-tree--horizontal .org-children--root > .org-child::before { display: none; }

/* Organisation — shareholders band (above the tree roots) */
.org-shareholders {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  position: relative;
  padding-bottom: 24px;
}

.org-shareholders::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 24px;
  background: var(--color-border);
  transform: translateX(-50%);
}

/* Column variant used to the left of the horizontal chart. */
.org-shareholders--column {
  flex-direction: column;
  flex-wrap: nowrap;
  padding-bottom: 0;
  padding-right: 24px;
}

.org-shareholders--column::after {
  bottom: auto;
  left: auto;
  right: 0;
  top: 50%;
  width: 24px;
  height: 2px;
  transform: translateY(-50%);
}

.org-shareholder-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border: 1px dashed color-mix(in srgb, #b45309 55%, var(--color-border));
  border-radius: var(--radius);
  background: color-mix(in srgb, #f59e0b 8%, var(--color-bg));
  min-width: 160px;
  max-width: 220px;
}

.org-shareholder-card .org-card__avatar { background: #b45309; }

.org-sh-percent {
  margin-left: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #b45309;
}

/* Organisation — list (folder-tree) view */
.org-list-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 6px;
}

.org-list-row:hover { background: var(--color-bg-subtle); }

.org-list-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-text-muted);
}

.org-list-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.org-list-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.org-list-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 40px;
  flex-shrink: 1;
}

.org-list-role {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 2;
}

/* Modal */
.hris-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hris-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  cursor: pointer;
}

.hris-modal__panel {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  margin: 1rem;
}

.hris-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.5rem 0.875rem;
  border-bottom: 1px solid var(--color-border);
}

.hris-modal__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.hris-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  transition: color 0.12s;
}

.hris-modal__close:hover { color: var(--color-text); }

.hris-modal__body {
  padding: 1.25rem 1.5rem;
  flex: 1;
}

.hris-modal__footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.875rem 1.5rem 1.125rem;
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   Emergency contacts bento
   ========================================================================== */

.ec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.875rem;
}

.ec-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ec-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.ec-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e8a020;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 0.25rem;
}

.ec-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.ec-card__rel {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: var(--color-bg-muted);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  display: inline-block;
  width: fit-content;
}

.ec-card__detail {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ec-card__detail a {
  color: var(--color-accent);
  text-decoration: none;
}

.ec-card--add {
  border-style: dashed;
  background: transparent;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  gap: 0.375rem;
  flex-direction: row;
  min-height: 100px;
}

.ec-card--add:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
  box-shadow: none;
}

/* ==========================================================================
   Employee search picker (Reports To + Planner)
   ========================================================================== */

.emp-picker {
  position: relative;
}

.emp-picker__dropdown {
  /* Positioned and shown by JS via position:fixed + display — no base styles needed here */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 240px;
  overflow-y: auto;
}

.emp-picker__option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background 0.1s;
}

.emp-picker__option:hover,
.emp-picker__option.is-focused {
  background: var(--color-bg-muted);
}

.emp-picker__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.emp-picker__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.2;
}

.emp-picker__role {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.emp-picker__empty {
  padding: 0.875rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* ==========================================================================
   Planner chips + legend
   ========================================================================== */

.planner-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
}

.planner-chip__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.75;
  padding: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  border-radius: 50%;
  transition: opacity 0.1s;
}

.planner-chip__remove:hover { opacity: 1; }

.planner-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.planner-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---- Role select (WP Account) ---- */
.hris-role-select { position: relative; display: inline-block; }
.hris-role-select__trigger {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.75rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: #fff; cursor: pointer;
  font-size: 0.875rem; color: var(--color-text);
}
.hris-role-select__trigger:hover { border-color: var(--color-accent); }
.hris-role-select__dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.hris-role-select__dot--admin    { background: #2563eb; }
.hris-role-select__dot--manager  { background: #16a34a; }
.hris-role-select__dot--employee { background: #9ca3af; }
.hris-role-select__chevron { color: var(--color-text-muted); }
.hris-role-select__menu {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 140px;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(0,0,0,.12);
  z-index: 200; padding: 0.25rem 0;
}
.hris-role-select__opt {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.5rem 0.875rem; border: none; background: transparent;
  font-size: 0.875rem; color: var(--color-text); cursor: pointer; text-align: left;
}
.hris-role-select__opt:hover { background: var(--color-bg-subtle); }

/* ---- Command palette ---- */
.cmd-palette-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 9000; display: flex; align-items: flex-start;
  justify-content: center; padding-top: 15vh;
}
.cmd-palette {
  background: #fff; border-radius: var(--radius); width: 520px; max-width: 92vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden;
}
.cmd-palette__input-wrap {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.875rem 1rem; border-bottom: 1px solid var(--color-border);
}
.cmd-palette__input {
  flex: 1; border: none; outline: none; font-size: 1rem;
  color: var(--color-text); background: transparent;
}
.cmd-palette__list { max-height: 360px; overflow-y: auto; }
.cmd-palette__item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 1rem; cursor: pointer; font-size: 0.875rem;
  color: var(--color-text);
}
.cmd-palette__item.is-focused, .cmd-palette__item:hover { background: var(--color-bg-subtle); }
.cmd-palette__item-icon { color: var(--color-text-muted); flex-shrink: 0; }
.cmd-palette__empty { padding: 2rem; text-align: center; color: var(--color-text-muted); font-size: 0.875rem; }
.cmd-palette__kbd {
  margin-left: auto; font-size: 0.6875rem; color: var(--color-text-subtle);
  background: var(--color-bg-muted); border: 1px solid var(--color-border);
  border-radius: 3px; padding: 0.125rem 0.375rem; white-space: nowrap;
}

/* ---- Planner: dot+name selected employees ---- */
.planner-member {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.8125rem; color: var(--color-text);
  background: var(--color-bg-subtle); border-radius: 100px;
  padding: 0.25rem 0.625rem 0.25rem 0.375rem; cursor: default;
}
.planner-member__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.planner-member__remove {
  background: none; border: none; cursor: pointer; padding: 0; margin-left: 0.25rem;
  color: var(--color-text-muted); display: flex; align-items: center;
  opacity: 0.6; line-height: 1;
}
.planner-member__remove:hover { opacity: 1; }

/* ---- Agenda view scroll ---- */
.cal-agenda { padding: 0.5rem 0; }

/* ---- Leave heatmap ---- */
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.heatmap-day-hdr {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  text-align: center;
  padding-bottom: 4px;
}
.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  cursor: default;
  position: relative;
  transition: transform .1s;
  min-width: 0;
}
.heatmap-cell:hover { transform: scale(1.15); z-index: 1; }
.heatmap-cell--clickable { cursor: pointer; }
.heatmap-cell--empty { background: transparent; pointer-events: none; }
.heatmap-cell--today { box-shadow: inset 0 0 0 2px #000; }
.heatmap-cell--today .heatmap-num { font-weight: 700; }
.heatmap-num { line-height: 1; font-size: 0.6875rem; }
.heatmap-count {
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1;
  margin-top: 2px;
  opacity: .8;
}
/* Tooltip */
.heatmap-cell[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  font-size: 0.6875rem;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 10;
}

/* Click/tap-to-toggle info popover (e.g. "Leave Remaining" allowance
   breakdown) — unlike the heatmap tooltip above, this is real dismissible
   DOM/JS (see initInfoTooltips() in app.js), not CSS :hover, so it also
   works on touch devices and via keyboard. */
.hris-info-icon {
  position: relative;
}
.hris-info-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.45;
  white-space: pre-line;
  text-align: left;
  padding: 0.5rem 0.625rem;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  z-index: 50;
  width: max-content;
  max-width: 220px;
}
.hris-info-popover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2937;
}
/* Color scale (0–5+) */
.heatmap-cell--0 { background: #f3f4f6; color: #9ca3af; }
.heatmap-cell--1 { background: #d1fae5; color: #065f46; }
.heatmap-cell--2 { background: #6ee7b7; color: #064e3b; }
.heatmap-cell--3 { background: #34d399; color: #064e3b; }
.heatmap-cell--4 { background: #10b981; color: #fff; }
.heatmap-cell--5 { background: #059669; color: #fff; }
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1rem;
  justify-content: flex-end;
}
.heatmap-legend-label { font-size: 0.6875rem; color: var(--color-text-muted); }
.heatmap-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Form description — WYSIWYG editor + rendered output
   -------------------------------------------------------------------------- */
[contenteditable][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-subtle);
  pointer-events: none;
}
.form-description p  { margin: 0 0 0.5rem; }
.form-description ul,
.form-description ol,
#fb-desc ul,
#fb-desc ol { margin: 0.5rem 0; padding-left: 1.25rem; }
/* The global reset strips list-style — restore bullets/numbers here. */
.form-description ul, #fb-desc ul { list-style: disc; }
.form-description ol, #fb-desc ol { list-style: decimal; }
.form-description a, #fb-desc a { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   Toggle switch
   -------------------------------------------------------------------------- */
.hris-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.hris-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.hris-toggle__track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--color-border-strong);
  transition: background 0.15s;
  flex-shrink: 0;
}
.hris-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform 0.15s;
}
.hris-toggle input:checked ~ .hris-toggle__track { background: var(--color-accent); }
.hris-toggle input:checked ~ .hris-toggle__track .hris-toggle__thumb { transform: translateX(16px); }

/* --------------------------------------------------------------------------
   Week view (time-based grid)
   -------------------------------------------------------------------------- */
.cal-grid--week-time {
  display: grid;
  grid-template-columns: 52px repeat(7, 1fr);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  min-width: 640px;
}
.cal-week-time-corner,
.cal-week-time-header {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.25rem;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.cal-week-time-corner { border-right: 1px solid var(--color-border); }
.cal-week-time-header--today { color: var(--color-accent); }
.cal-week-time-label {
  border-right: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2px 6px 0 0;
  box-sizing: border-box;
  min-height: 48px;
  font-size: 0.6875rem;
}
.cal-week-time-cell {
  position: relative;
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  min-height: 48px;
  box-sizing: border-box;
  cursor: pointer;
}
.cal-week-time-cell:hover { background: var(--color-bg-subtle); }
.cal-week-time-cell--off { background: var(--color-bg-muted); cursor: not-allowed; }
.cal-week-time-header--holiday { background: var(--color-warning-bg); color: var(--color-warning-text); }
.cal-week-time-cell--holiday { background: var(--color-warning-bg); }
.cal-week-time-cell--today { background: #eff6ff; }
.cal-week-time-evt {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 0;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.6875rem;
  font-weight: 500;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  z-index: 1;
  cursor: pointer;
  line-height: 1.3;
  color: #fff;
}

/* All-day strip row */
.cal-week-time-allday-label {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 4px 6px 4px 0;
  box-sizing: border-box;
  min-height: 24px;
  font-size: 0.6875rem;
}
.cal-week-time-allday-cell {
  border-bottom: 2px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  min-height: 24px;
  padding: 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-sizing: border-box;
}
.cal-week-allday-evt {
  display: block;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.6875rem;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  line-height: 1.4;
}

/* Segmented control (Whole Day / Hours toggle) */
.hris-seg-ctrl {
  display: inline-flex;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}
.hris-seg-ctrl__btn {
  background: none;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  padding: 0.3125rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.hris-seg-ctrl__btn.is-active {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}


/* Guides page card grid — multi-column on desktop, single column on mobile */
.hris-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1rem;
}
.hris-guide-grid > * { min-width: 0; }
@media (max-width: 768px) {
  .hris-guide-grid { grid-template-columns: minmax(0, 1fr); }
}


/* Dashboard bento row: WFH/On-leave stack | Leave heatmap | Birthdays.
   Three equal columns on desktop, two on tablet, one on mobile. */
.dash-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
  align-items: start;
}
.dash-bento > * { min-width: 0; }
@media (max-width: 1100px) {
  .dash-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .dash-bento { grid-template-columns: minmax(0, 1fr); }
}

/* Leave heatmap: at 1/3 width the month picker sits below the heading */
#leave-heatmap-card .card__header {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
#leave-heatmap-card .card__header > div:last-child {
  width: 100%;
  justify-content: space-between;
}
#leave-heatmap-card .card__header > div:last-child #heatmap-title {
  flex: 1;
  min-width: 0;
}


/* Employee diary: drop the Week view on mobile (month + agenda only) */
@media (max-width: 768px) {
  #hris-employee .cal-view-btn[data-view="week"] { display: none; }
}


/* Mobile quick-action FAB (request leave) */
.hris-fab { display: none; }
@media (max-width: 768px) {
  .hris-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    z-index: 80;
    cursor: pointer;
  }
  .hris-fab:active { transform: scale(0.94); }
}


/* Mobile: let card grids shrink below content (prevents horizontal overflow),
   and drop the contact card's overflow:visible hack (dropdowns portal to <body>) */
@media (max-width: 768px) {
  [style*="minmax(160px"] > * { min-width: 0; }
  #contact-details-card { overflow: hidden; }
}


/* Employee Notes tab — list on the left, selected note on the right */
.notes-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 360px; }
.notes-list { border-right: 1px solid var(--color-border); overflow-y: auto; max-height: 480px; }
.notes-detail { padding: 1.25rem 1.5rem; overflow-y: auto; max-height: 480px; }
.notes-list__item { display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--color-border); background: transparent; padding: 0.75rem 1rem; cursor: pointer; }
.notes-list__item:hover { background: var(--color-bg-muted); }
.notes-list__item.is-active { background: var(--color-bg-muted); }
@media (max-width: 768px) {
  .notes-layout { grid-template-columns: 1fr; }
  .notes-list { border-right: none; border-bottom: 1px solid var(--color-border); max-height: 220px; }
}

/* Diary event approval status dot (green = approved, red = awaiting/declined) */
.cal-evt__status {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
  flex-shrink: 0;
  vertical-align: 1px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75);
}
.cal-evt__status--approved { background: #22c55e; }
.cal-evt__status--unapproved { background: #ef4444; }
.cal-agenda__title .cal-evt__status { box-shadow: 0 0 0 1px var(--color-border); }

/* Guide walkthrough (spotlight tour) — see initGuideTours in app.js */
.hris-tour-spot {
  position: fixed;
  z-index: 9500;
  pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--color-accent), 0 0 0 9999px rgba(15, 23, 42, 0.55);
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}

.hris-tour-tip {
  position: fixed;
  z-index: 9501;
  width: min(340px, calc(100vw - 2rem));
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.3);
  padding: 1rem 1.15rem;
}

.hris-tour-tip--floating {
  top: auto;
  left: auto;
  right: 1.25rem;
  bottom: 1.25rem;
}

.hris-tour-tip__title {
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.35rem;
}

.hris-tour-tip__text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.hris-tour-tip__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

/* ==========================================================================
   Kebab (⋮) row-action menu
   ========================================================================== */
.hris-kebab { position: relative; display: inline-block; }
.hris-kebab__trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: none; border: none; border-radius: 6px;
  color: var(--color-text-muted); cursor: pointer;
}
.hris-kebab__trigger:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.hris-kebab__menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 1200;
  min-width: 160px; padding: 0.25rem;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.10), 0 2px 6px rgb(0 0 0 / 0.06);
  display: none; text-align: left;
}
.hris-kebab.is-open .hris-kebab__menu { display: block; }
.hris-kebab__item {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; padding: 0.4375rem 0.625rem;
  background: none; border: none; border-radius: 6px;
  font-size: 0.875rem; color: var(--color-text); text-align: left; cursor: pointer;
}
.hris-kebab__item:hover, .hris-kebab__item:focus-visible { background: var(--color-bg-subtle); }
.hris-kebab__item svg { flex-shrink: 0; }
.hris-kebab__item--danger { color: var(--color-danger); }
.hris-kebab__item--danger:hover, .hris-kebab__item--danger:focus-visible { background: var(--color-danger-bg); }
.hris-kebab__item:disabled { opacity: 0.45; cursor: not-allowed; }
.hris-kebab__item:disabled:hover { background: none; }
.hris-kebab__item.is-active { font-weight: 600; color: var(--color-accent); }
.hris-kebab__sep { height: 1px; background: var(--color-border); margin: 0.25rem 0.375rem; }

/* Labelled kebab trigger — an "add" menu that reads as a button (Resources page). */
.hris-kebab__trigger--label {
  width: auto; height: 36px; padding: 0 0.625rem 0 0.875rem; gap: 0.4rem;
  border: 1px solid var(--color-border); color: var(--color-text);
  font-size: 0.875rem; font-weight: 500;
}
.hris-kebab__trigger--label:hover { background: var(--color-bg-subtle); color: var(--color-text); }
/* Anchor a menu to the trigger's left edge (for left-hand toolbar triggers). */
.hris-kebab__menu--left { left: 0; right: auto; }

/* Groups / Resources tables sit in a bare .table-wrapper (no card) to match the
   Employees page; let each row's kebab menu escape the wrapper when open. */
#gm-body .table-wrapper, #rm-body .table-wrapper, #st-body .table-wrapper { overflow: visible; }

/* ==========================================================================
   Right-hand drawer — form CRUD (e.g. Diary Event Types)
   Slides in from the right; dismissable via its own controls only.
   ========================================================================== */
.hris-drawer { position: fixed; inset: 0; z-index: 1000; }
.hris-drawer[hidden] { display: none; }
.hris-drawer__overlay {
  position: absolute; inset: 0;
  background: rgb(0 0 0 / 0.4);
  opacity: 0; transition: opacity 0.2s ease;
}
.hris-drawer.is-open .hris-drawer__overlay { opacity: 1; }
.hris-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(460px, 100%);
  display: flex; flex-direction: column;
  background: var(--color-bg);
  box-shadow: -4px 0 24px rgb(0 0 0 / 0.15);
  transform: translateX(100%);
  transition: transform 0.2s ease;
}
.hris-drawer.is-open .hris-drawer__panel { transform: translateX(0); }
.hris-drawer__header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.125rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.hris-drawer__title { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--color-text); }
.hris-drawer__body {
  flex: 1; overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex; flex-direction: column; gap: 1.125rem;
}
.hris-drawer__body .form-group { margin: 0; }
.hris-drawer__footer {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
}
.hris-drawer__toggle {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-subtle);
}
.hris-drawer__toggle-text { display: flex; flex-direction: column; gap: 0.15rem; cursor: pointer; }
.hris-drawer__toggle-title { font-size: 0.875rem; font-weight: 500; color: var(--color-text); }
.hris-drawer__toggle-desc { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.4; }
@media (max-width: 640px) { .hris-drawer__panel { width: 100%; } }

/* --------------------------------------------------------------------------
   Working-remotely week drawer (dashboard) — week picker + per-day lists
   -------------------------------------------------------------------------- */
.wfh-week-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-subtle);
}
.wfh-week-nav__label {
  flex: 1; text-align: center;
  font-size: 0.875rem; font-weight: 600; color: var(--color-text);
}
.wfh-week-days { display: flex; flex-direction: column; gap: 1rem; }
.wfh-week-day {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}
.wfh-week-day.is-today { border-color: var(--color-accent); }
.wfh-week-day__head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
}
.wfh-week-day__date { font-size: 0.8125rem; font-weight: 600; color: var(--color-text); }
.wfh-week-day__today {
  margin-left: 0.375rem;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--color-accent); background: rgba(99, 102, 241, .1);
  border-radius: 4px; padding: 1px 5px;
}
.wfh-week-day__empty {
  padding: 0.75rem 0.875rem;
  font-size: 0.8125rem; color: var(--color-text-muted);
}
.wfh-week-day__list { list-style: none; margin: 0; padding: 0.25rem 0; }
.wfh-week-day__list li {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.4375rem 0.875rem;
}
.wfh-week-day__list li + li { border-top: 1px solid var(--color-border); }
.wfh-week-day__avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.625rem; font-weight: 600;
}
.wfh-week-day__who { flex: 1; min-width: 0; }
.wfh-week-day__who a {
  font-size: 0.8125rem; font-weight: 500; color: var(--color-text); text-decoration: none;
}
.wfh-week-day__who a:hover { text-decoration: underline; }
.wfh-week-day__title { font-size: 0.6875rem; color: var(--color-text-muted); }
.wfh-week-day__pill {
  flex-shrink: 0;
  font-size: 0.625rem; font-weight: 500;
  color: var(--color-accent); background: rgba(99, 102, 241, .08);
  border-radius: 4px; padding: 2px 6px;
}

/* ==========================================================================
   Step-by-step guide viewer — full-screen sandboxed iframe host
   ========================================================================== */
.guide-viewer { position: fixed; inset: 0; z-index: 1300; display: flex; flex-direction: column; background: var(--color-bg); }
.guide-viewer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.guide-viewer__title { font-size: 0.95rem; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-viewer__frame { flex: 1; width: 100%; border: 0; background: #fff; }
.hris-guide-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* The top-right kebab menu must escape the card's overflow:hidden. */
.hris-guide-card { overflow: visible; }
/* Darker ⋮ dots than the default muted kebab trigger. */
.hris-guide-card .hris-kebab__trigger { color: var(--color-text); }

/* ==========================================================================
   Timesheets (attendance clock)
   ========================================================================== */

/* Week navigator */
.ts-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.ts-toolbar__label {
  font-weight: 600;
  color: var(--color-text);
  margin-left: 0.25rem;
}
.ts-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.ts-muted { color: var(--color-text-muted); }

/* Report table */
.ts-table-wrap { overflow-x: auto; }
.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.ts-table th,
.ts-table td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  vertical-align: middle;
}
.ts-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.ts-table .ts-num { text-align: center; white-space: nowrap; }
/* Employee (first) column stays left-aligned. */
.ts-table th:first-child, .ts-table td:first-child { text-align: left; }
/* Table sits flush to the card edges (no outer padding). */
#ts-report-body { padding: 0; }
#ts-report-card { overflow: hidden; }
.ts-col-date { display: block; font-weight: 400; font-size: 0.72rem; color: var(--color-text-muted); }
.ts-col-total { font-weight: 600; }
/* Week picker on the left, search + filters pushed to the right, inline on
   desktop and wrapping to their own row on narrow screens. */
.ts-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ts-controls__filters { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; flex-wrap: wrap; }
@media (max-width: 640px) {
  .ts-controls__filters { margin-left: 0; width: 100%; }
  .ts-controls__filters .search-bar { flex: 1; width: auto !important; }
}

/* ==========================================================================
   Scheduling — Day view
   ========================================================================== */
.sched-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sched-controls__filters { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; flex-wrap: wrap; }

.sched-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.625rem; }
.sched-kpi {
  border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px);
  background: var(--color-bg); padding: 0.625rem 0.75rem; text-align: left;
}
.sched-kpi__n { font-size: 1.25rem; font-weight: 700; color: var(--color-text); line-height: 1.1; }
.sched-kpi__l { font-size: 0.72rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 0.15rem; }
.sched-kpi--alert { border-color: var(--color-danger); cursor: pointer; }
.sched-kpi--alert .sched-kpi__n { color: var(--color-danger); }
.sched-kpi.is-on { outline: 2px solid var(--color-danger); outline-offset: -1px; }

.sched-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.75rem; color: var(--color-text-muted); }
.sched-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.sched-key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sched-key--onshift { background: var(--color-accent); }
.sched-key--late { background: #B76E00; }
.sched-key--nologin { background: #fff; border: 1.5px dashed #C2362B; }
.sched-key--leave { background: repeating-linear-gradient(45deg, #EAE3F7, #EAE3F7 3px, #F6F2FC 3px, #F6F2FC 6px); border: 1px solid #CFC2EA; }
.sched-key--sick { background: repeating-linear-gradient(45deg, #F8DDD3, #F8DDD3 3px, #FDF1ED 3px, #FDF1ED 6px); border: 1px solid #EDB9A9; }
.sched-key--now { background: #C2362B; width: 3px; }

.sched-group { border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); background: var(--color-bg); margin-bottom: 0.75rem; overflow: hidden; }
.sched-group__head {
  display: flex; align-items: center; gap: 0.625rem; width: 100%;
  padding: 0.625rem 0.875rem; background: var(--color-bg-subtle);
  border: none; cursor: pointer; text-align: left; font: inherit;
}
.sched-group__chev { transition: transform 0.15s ease; color: var(--color-text-muted); display: inline-flex; }
.sched-group.is-open .sched-group__chev { transform: rotate(90deg); }
.sched-group__name { font-weight: 600; font-size: 0.875rem; color: var(--color-text); }
.sched-group__count { font-size: 0.75rem; color: var(--color-text-muted); }
.sched-group__summary { font-size: 0.75rem; color: var(--color-text-muted); margin-left: auto; }
.sched-group__body { display: none; }
.sched-group.is-open .sched-group__body { display: block; }

.sched-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 0.875rem; border-top: 1px solid var(--color-border); }
.sched-row__who { display: flex; align-items: center; gap: 0.5rem; width: 232px; flex-shrink: 0; min-width: 0; }
.sched-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 600; flex-shrink: 0; }
.sched-row__meta { min-width: 0; }
.sched-row__name { font-size: 0.8125rem; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-row__role { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #C2362B; margin-left: 0.25rem; vertical-align: middle; }

.sched-track { position: relative; flex: 1; height: 26px; min-width: 200px; background: linear-gradient(to right, var(--color-bg-subtle), var(--color-bg-subtle)) no-repeat; border-radius: 5px; overflow: hidden; }
.sched-now { position: absolute; top: 0; bottom: 0; width: 2px; background: #C2362B; z-index: 3; }
.sbar { position: absolute; top: 2px; bottom: 2px; display: flex; align-items: center; padding: 0 0.375rem; font-family: var(--font-mono); font-size: 0.6875rem; white-space: nowrap; border-radius: 5px; overflow: hidden; z-index: 2; }
.sbar--onshift { background: color-mix(in srgb, var(--color-accent) 16%, #fff); border: 1px solid var(--color-accent); color: var(--color-text); }
.sbar--completed { background: var(--color-bg-subtle); border: 1px solid var(--color-border); color: var(--color-text-muted); }
.sbar--upcoming { background: #fff; border: 1px dashed var(--color-border); color: var(--color-text-muted); }
.sbar--late { background: #FBEAD0; border: 1px solid #B76E00; color: #8A5300; }
.sbar--nologin { background: repeating-linear-gradient(45deg, #F8DDD3, #F8DDD3 4px, #FDECE7 4px, #FDECE7 8px); border: 1.5px dashed #C2362B; color: #A82C22; }
.sbar--leave { left: 0; right: 0; width: auto; background: repeating-linear-gradient(45deg, #EAE3F7, #EAE3F7 4px, #F6F2FC 4px, #F6F2FC 8px); border: 1px solid #CFC2EA; color: #4E3A86; }
.sbar--sick { left: 0; right: 0; width: auto; background: repeating-linear-gradient(45deg, #F8DDD3, #F8DDD3 4px, #FDF1ED 4px, #FDF1ED 8px); border: 1px solid #EDB9A9; color: #9A3417; }
.sched-acts { display: flex; gap: 0.25rem; flex-shrink: 0; }
.sched-act { border: 1px solid var(--color-border); background: var(--color-bg); border-radius: 5px; font-size: 0.7rem; padding: 0.15rem 0.4rem; cursor: pointer; color: var(--color-text); white-space: nowrap; }
.sched-act:hover { background: var(--color-bg-subtle); }
@media (max-width: 640px) { .sched-row { flex-wrap: wrap; } .sched-track { order: 3; width: 100%; flex-basis: 100%; } }

/* View toggle (Day / Week). */
.sched-viewtoggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); overflow: hidden; }
.sched-viewtoggle__btn { appearance: none; background: var(--color-bg); border: none; padding: 0.4375rem 0.875rem; font: inherit; font-size: 0.8125rem; color: var(--color-text-muted); cursor: pointer; }
.sched-viewtoggle__btn + .sched-viewtoggle__btn { border-left: 1px solid var(--color-border); }
.sched-viewtoggle__btn.is-active { background: var(--color-accent); color: #fff; font-weight: 600; }

/* Scheduling — in-viewport fullscreen: hide the sidebar, greeting and KPI cards
   and let the grid fill the whole viewport (not the OS/F11 fullscreen). */
.hris-app.is-sched-fullscreen .hris-sidebar { display: none; }
.hris-app.is-sched-fullscreen .hris-main { margin-left: 0; }
.hris-app.is-sched-fullscreen #sched-greeting,
.hris-app.is-sched-fullscreen #sched-kpis { display: none !important; }
.hris-app.is-sched-fullscreen #hris-schedule { padding-top: 1rem; }
#sched-fullscreen.is-active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* Scheduling — interactive allocation affordances. */
.sched-bulk { display: inline-flex; gap: 0.5rem; align-items: center; }
/* Avatar doubles as a selection checkbox for bulk assignment. */
.sched-avatar--select { border: none; cursor: pointer; padding: 0; position: relative; transition: box-shadow .12s; }
.sched-avatar--select:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.sched-avatar--select.is-selected { background: #0d7a35; }
.sched-avatar--select.is-selected::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #0d7a35; border-radius: 50%; font-size: 0.8em; color: #fff; }
/* + beside a name: green when the person belongs to a site, red when not. */
.sched-plus--green { border-color: var(--color-success, #16a34a); color: var(--color-success, #16a34a); opacity: 1; }
.sched-plus--green:hover { border-color: var(--color-success, #16a34a); color: #fff; background: var(--color-success, #16a34a); }
.sched-plus--red { border-color: var(--color-danger); color: var(--color-danger); opacity: 1; }
.sched-plus--red:hover { border-color: var(--color-danger); color: #fff; background: var(--color-danger); }
.sched-selcount { font-size: 0.8125rem; font-weight: 600; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-radius: 999px; padding: 0.2rem 0.6rem; cursor: pointer; white-space: nowrap; }
.drawer-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }
.hris-kebab__label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); padding: 0.35rem 0.625rem 0.15rem; }
/* Hover-to-delete X on an allocated shift pill. */
.wpill--hasdel { position: relative; }
.wpill__del { display: none; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 0.25rem; border: none; border-radius: 50%; background: rgba(0,0,0,0.18); color: #fff; font-size: 0.7rem; line-height: 1; cursor: pointer; vertical-align: middle; }
.wpill__del:hover { background: var(--color-danger); }
.sched-cell:hover .wpill__del, .cal-cell:hover .wpill__del { display: inline-flex; }
/* Week-view: pin the delete X to the right edge of the cell. */
.sched-cell .wpill__del { position: absolute; top: 3px; right: 3px; margin-left: 0; }

/* Employee schedule page — shift pills inside the shared calendar grid. */
#empsched-container .cal-cell { min-height: 92px; }
.empsched-shift { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.6875rem; font-weight: 600; background: color-mix(in srgb, var(--color-accent) 15%, transparent); color: var(--color-accent); border-radius: 4px; padding: 1px 4px; margin-top: 2px; white-space: nowrap; }
.empsched-worked { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; color: var(--color-success, #2e7d32); margin-top: 2px; }
.empsched-add { display: none; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 2px; border: 1px dashed var(--color-border); border-radius: 6px; background: none; color: var(--color-text-muted); cursor: pointer; line-height: 0; }
.cal-cell:hover .empsched-add { display: inline-flex; }
.empsched-add:hover { border-color: var(--color-accent); color: var(--color-accent); border-style: solid; }

.sched-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--color-border); border-radius: 5px;
  background: var(--color-bg); color: var(--color-text-muted);
  cursor: pointer; line-height: 0; opacity: 0.55; transition: opacity .12s, border-color .12s, color .12s;
}
.sched-plus svg { width: 12px; height: 12px; }
.sched-row:hover .sched-plus, .sched-wrow:hover .sched-plus, .sched-plus:hover { opacity: 1; }
.sched-plus:hover { border-color: var(--color-accent); color: var(--color-accent); }
.sched-cell__add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; margin: 0 auto;
  border: 1px dashed var(--color-border); border-radius: 6px;
  background: none; color: var(--color-text-muted);
  cursor: pointer; line-height: 0; opacity: 0.5; transition: opacity .12s, border-color .12s, color .12s;
}
.sched-cell__add svg { width: 13px; height: 13px; }
.sched-cell:hover .sched-cell__add { opacity: 1; }
.sched-cell__add:hover { opacity: 1; border-color: var(--color-accent); color: var(--color-accent); border-style: solid; }
/* Past days (and today) can't be scheduled — grey them and drop the add affordance. */
.sched-cell.is-past { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.sched-week__hcell.is-past { color: var(--color-text-muted); opacity: 0.75; }
.sched-cell__na { color: var(--color-text-muted); opacity: 0.4; }
.sched-cell__worked { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; color: var(--color-success, #2e7d32); margin-left: 0.3rem; white-space: nowrap; }
/* The + beside a name pinned to the right edge of the staff column. */
.sched-plus--right { margin-left: auto; }
/* Clickable employee name (opens the month view). */
.sched-emp-open { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sched-emp-open:hover { text-decoration: underline; }
.sched-wrow__name.sched-emp-open { font-size: 0.8125rem; font-weight: 500; flex: 1; }

/* Per-employee month view (opened from the scheduling grid). */
.emonth__row--head { display: grid; grid-template-columns: repeat(7, 1fr); }
.emonth__head { text-align: center; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); padding: 0.25rem 0; }
.emonth__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.emonth__cell { min-height: 62px; border: 1px solid var(--color-border); border-radius: 6px; padding: 0.25rem 0.3rem; display: flex; flex-direction: column; gap: 2px; background: var(--color-bg); }
.emonth__cell--empty { border: none; background: none; }
.emonth__cell.is-today { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.emonth__date { font-size: 0.6875rem; font-weight: 600; color: var(--color-text-muted); }
.emonth__shift { font-size: 0.6875rem; font-weight: 600; background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent); border-radius: 4px; padding: 1px 4px; white-space: nowrap; }
.emonth__worked { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; color: var(--color-success, #2e7d32); margin-top: auto; }

/* Scheduling settings sub-panels (Sites / Groups / Resources / Shifts / Working week). */
.sched-subhead { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; }
.sched-subhead__title { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.sched-subhead__desc { margin: 0 0 1.25rem; font-size: 0.875rem; color: var(--color-text-muted); }

/* Scheduling — working-week day picker (Settings ▸ Scheduling). */
.sched-days-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sched-day-toggle { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer; font-size: 0.875rem; user-select: none; transition: background .12s, border-color .12s, color .12s; }
.sched-day-toggle:hover { border-color: var(--color-accent); }
.sched-day-toggle input { accent-color: var(--color-accent); width: 15px; height: 15px; cursor: pointer; }
.sched-day-toggle:has(input:checked) { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.sched-day-toggle:has(input:disabled) { opacity: .6; cursor: default; }

/* Select-all control shown in scheduling group headers. */
.sched-selectall { margin-left: auto; font-size: 0.7rem; font-weight: 600; color: var(--color-accent); padding: 0.1rem 0.45rem; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.sched-selectall:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }

/* Scheduling — Month view (staff × every day of the month, status matrix). */
.mgrid { border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); overflow-x: auto; background: var(--color-bg); }
.mgrid__head, .mrow { display: grid; grid-template-columns: var(--month-cols); }
.mgrid__head { position: sticky; top: 0; z-index: 2; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); }
.mgrid__staff { display: flex; align-items: center; padding: 0 0.75rem; font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); }
.mgrid__dh { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 0; border-left: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); }
.mgrid__dh small { font-size: 0.55rem; color: var(--color-text-muted); line-height: 1.1; text-transform: uppercase; }
.mgrid__dh strong { font-size: 0.7rem; font-weight: 600; min-width: 18px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.mgrid__dh.is-today strong { background: var(--color-accent); color: #fff; }
.mgrid__dh.is-weekend { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.mgrid__dh.is-past { opacity: 0.7; }
.mgrid__hours { display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; color: var(--color-text-muted); border-left: 1px solid var(--color-border); }
.mrow { border-top: 1px solid var(--color-border); min-height: 26px; }
.mrow__who { display: flex; align-items: center; gap: 0.35rem; padding: 0 0.6rem; min-width: 0; }
.mrow__name { flex: 1; min-width: 0; background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: 0.75rem; font-weight: 500; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; }
.mrow__name:hover { text-decoration: underline; }
.mrow__hours { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; border-left: 1px solid var(--color-border); color: var(--color-text); }
.mcell { display: flex; align-items: center; justify-content: center; padding: 3px 2px; border-left: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent); position: relative; }
.mcell.is-weekend { background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.mcell.is-today { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.mk { min-width: 18px; height: 17px; padding: 0 2px; border-radius: 4px; border: 1px solid transparent; display: flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700; line-height: 1; }
.mk--sh { background: var(--color-accent); color: #fff; }
.mk--fut { background: var(--color-bg); border-style: dashed; }
.mk--al { background: #e6def6; color: #4e3a86; }
.mk--sk { background: #f8ddd3; color: #9a3417; }
.mk--miss { border-color: var(--color-danger); box-shadow: inset 0 0 0 1px var(--color-danger); }
.mk--late::after { content: ""; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-warning, #b76e00); box-shadow: 0 0 0 1.5px var(--color-bg); }
.mk--off { background: none; border: none; }
.mk--add { background: none; border: 1px dashed var(--color-border); color: var(--color-text-muted); cursor: pointer; opacity: 0; transition: opacity .12s; }
.mcell:hover .mk--add { opacity: 0.65; }
.mk--add:hover { opacity: 1; border-color: var(--color-accent); color: var(--color-accent); border-style: solid; }

/* Scheduling — Week view (staff × working days). */
.sched-week { --sched-week-cols: 220px repeat(7, minmax(92px, 1fr)) 76px; border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); overflow-x: auto; background: var(--color-bg); }
.sched-week__grid { min-width: 860px; }
.sched-week__head, .sched-wrow { display: grid; grid-template-columns: var(--sched-week-cols); }
.sched-week__head { position: sticky; top: 0; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); z-index: 2; }
.sched-week__hcell { padding: 0.5rem 0.625rem; border-left: 1px solid var(--color-border); }
.sched-week__hcell:first-child { border-left: none; }
.sched-week__hday { font-size: 0.75rem; font-weight: 600; color: var(--color-text); }
.sched-week__hcounts { font-size: 0.68rem; color: var(--color-text-muted); margin-top: 0.1rem; white-space: nowrap; }
.sched-week__hcell.is-today { box-shadow: inset 0 -2px 0 var(--color-accent); }
.sched-week__hcell.is-weekend { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

.sched-wgroup__head { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.5rem 0.75rem; background: var(--color-bg-subtle); border: none; border-top: 1px solid var(--color-border); font: inherit; font-size: 0.8125rem; font-weight: 600; text-align: left; color: var(--color-text); cursor: pointer; }
.sched-wgroup__head:hover { background: var(--color-border); }
.sched-wgroup__chev { display: inline-flex; color: var(--color-text-muted); transition: transform 0.15s ease; }
.sched-wgroup.is-open .sched-wgroup__chev { transform: rotate(90deg); }
.sched-wgroup__n { color: var(--color-text-muted); font-weight: 500; }
.sched-wgroup:not(.is-open) .sched-wgroup__rows { display: none; }
.sched-wrow { border-top: 1px solid var(--color-border); align-items: stretch; }
.sched-wrow__who { display: flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.625rem; min-width: 0; }
.sched-wrow__name { font-size: 0.8125rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-wrow__role { font-size: 0.68rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-cell { border-left: 1px solid var(--color-border); padding: 0.3125rem; display: flex; align-items: center; justify-content: center; position: relative; }
.sched-cell.is-weekend { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.sched-cell.is-today { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.sched-whours { border-left: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; padding: 0 0.625rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; color: var(--color-text); }

.wpill { width: 100%; text-align: center; font-family: var(--font-mono); font-size: 0.66rem; padding: 0.125rem 0.25rem; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpill--past { background: color-mix(in srgb, var(--color-accent) 14%, #fff); border: 1px solid var(--color-accent); color: var(--color-text); }
.wpill--planned { background: #fff; border: 1px dashed var(--color-border); color: var(--color-text-muted); }
.wpill--missed { background: #FDECE7; border: 1.5px solid #C2362B; color: #A82C22; }
.wpill--leave { background: #EAE3F7; border: 1px solid #CFC2EA; color: #4E3A86; }
.wpill--sick { background: #F8DDD3; border: 1px solid #EDB9A9; color: #9A3417; }
.wpill--rest { color: var(--color-text-muted); font-family: inherit; font-size: 0.7rem; }

/* Density: compact rows. */
.sched-week.is-compact .sched-wrow__who, .sched-week.is-compact .sched-cell { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.sched-week.is-compact .wpill { font-size: 0.62rem; }
.sched-week.is-compact .sched-wrow__role { display: none; }

/* Scheduling — Planner (full-screen board). */
/* Below the dialog layer (1100) so the planner's own edit/confirm/prompt dialogs sit on top of it. */
.planner { position: fixed; inset: 0; z-index: 1050; background: var(--color-bg); display: flex; flex-direction: column; }
/* On its own page the planner flows inline in the main panel (no overlay). */
.planner--inline { position: static; inset: auto; height: auto; z-index: auto; background: transparent; }
.planner--inline .planner__head { padding-left: 0; padding-right: 0; }
.planner--inline .planner__banner { margin-left: 0; margin-right: 0; }
.planner--inline .planner__body { overflow: visible; padding-left: 0; padding-right: 0; }
.planner--inline #pl-close { display: none; }
.planner__head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--color-border); }
.planner__title { font-size: 1rem; font-weight: 600; }
.planner__spacer { flex: 1; }
.planner__banner { display: flex; align-items: center; gap: 0.75rem; margin: 0.75rem 1.25rem 0; padding: 0.625rem 0.875rem; border: 1px solid #B76E00; background: #FBEAD0; color: #8A5300; border-radius: 8px; font-size: 0.8125rem; }
.planner__body { flex: 1; overflow: auto; padding: 1rem 1.25rem 2rem; }
.planner-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.75rem; }
.planner-chip { border: 1px dashed var(--color-border); border-radius: 6px; padding: 0.3rem 0.6rem; cursor: pointer; font-size: 0.75rem; background: var(--color-bg); font-family: var(--font-mono); }
.planner-chip.is-active { border-style: solid; border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, #fff); }
.planner-openlane { border: 1px dashed var(--color-border); border-radius: 8px; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; }
.planner-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0; border-top: 1px solid var(--color-border); }
.planner-row__who { display: flex; align-items: center; gap: 0.5rem; width: 210px; flex-shrink: 0; }
.planner-row__shifts { display: flex; gap: 0.375rem; flex-wrap: wrap; flex: 1; align-items: center; }
.pshift { border-radius: 5px; padding: 0.15rem 0.45rem; font-family: var(--font-mono); font-size: 0.7rem; cursor: pointer; border: 1px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, #fff); color: var(--color-text); }
.pshift--draft { border-style: dashed; background: #fff; color: var(--color-text-muted); }
.pshift-add { border: 1px dashed var(--color-border); border-radius: 5px; background: none; cursor: pointer; color: var(--color-text-muted); font-size: 0.72rem; padding: 0.15rem 0.45rem; }

/* Service Length card: abbreviate "years/months" → "yrs/mths" where the card
   gets tight on smaller laptop screens. */
.svc-len-abbr { display: none; }
@media (max-width: 1366px) {
  .svc-len-full { display: none; }
  .svc-len-abbr { display: inline; }
}
.ts-row { cursor: pointer; }
.ts-row:hover { background: var(--color-bg-subtle); }
.ts-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ts-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.5rem; vertical-align: middle; flex-shrink: 0; }
.ts-live-dot--in { background: var(--color-success); }
.ts-live-dot--out { background: var(--color-danger); }
.ts-row__sub { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.125rem; }

/* Daily breakdown (drill-down + My Info tab) */
.ts-week-total {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}
.ts-day { margin-bottom: 0.5rem; }
.ts-day__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--color-border);
}
.ts-day__total { font-variant-numeric: tabular-nums; }
.ts-detail-table td:nth-child(-n+4), .ts-detail-table .ts-entry__src { white-space: nowrap; }
.ts-activity {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: start;
}
@media (max-width: 1360px) { .ts-activity { grid-template-columns: minmax(0, 1fr); } }
#ts-activity-show-all[hidden], #ts-activity-map[hidden], #ts-activity-map-note[hidden] { display: none; }
.ts-activity__row { cursor: pointer; }
.ts-activity__row:hover { background: var(--color-surface-hover, #f8f9fb); }
.ts-activity__row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ts-activity__row.is-selected { background: var(--color-accent-subtle, #eef0ff); box-shadow: inset 3px 0 0 var(--color-accent); }
.ts-activity__map { height: min(60vh, 520px); min-height: 320px; border-radius: 8px; overflow: hidden; }
.ts-activity__map-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; min-height: 2rem; margin-bottom: 0.625rem; }
.ts-activity__legend { display: flex; gap: 1rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.ts-activity__legend > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.ts-activity__pin { width: 0.75rem; height: 0.75rem; display: inline-block; }
.ts-activity__pin--in { background: #167a55; border-radius: 50%; }
.ts-activity__pin--out { background: #b3372f; }
.ts-entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--color-bg-subtle);
}
.ts-entry__times { flex: 1; font-variant-numeric: tabular-nums; }
.ts-entry__arrow { color: var(--color-text-muted); }
.ts-entry__mins {
  min-width: 4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.ts-entry__meta { display: flex; align-items: center; gap: 0.375rem; }
.ts-entry__src {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0 0.25rem;
}
.ts-edit { padding: 0.25rem 0.5rem; font-size: 0.75rem; }

/* NFC landing page */
.hris-main--centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 1.5rem;
}
.ts-clock-card { max-width: 380px; width: 100%; }
.ts-clock-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
}
.ts-clock-card.is-in .ts-clock-card__icon { background: var(--color-success-bg); color: var(--color-success-text); }
.ts-clock-card.is-out .ts-clock-card__icon { background: var(--color-bg-muted); color: var(--color-text); }
.ts-clock-card.is-error .ts-clock-card__icon { background: var(--color-danger-bg); color: var(--color-danger-text); }
.ts-clock-card__title { font-size: 1.25rem; margin: 0 0 0.375rem; }
.ts-clock-card__msg { color: var(--color-text-muted); margin: 0; }

/* Check-in / check-out bar. Hidden until initTimesheetBar shows it; mobile = a
   fixed bar under the top bar, desktop = a bar across the top of the main panel. */
.hris-clock-bar { display: none; }

@media (min-width: 769px) {
  /* In-flow bar at the very top of the main panel (avoids clashing with the
     sticky page headers used on Employees / Documents / Settings). */
  .hris-clock-bar.is-visible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Match the sidebar logo bar exactly (67px incl. its 1px bottom border) so
       the check-in eyebrow lines up with the brand across the top. */
    height: 67px;
    box-sizing: border-box;
    padding: 0 var(--page-inset);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
  }
  .hris-clock-bar.is-in { border-left: 3px solid var(--color-success); }
}

.hris-clock-bar__info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.hris-clock-bar__status { font-weight: 700; font-size: 0.9rem; }
.hris-clock-bar__meta { font-size: 0.75rem; color: var(--color-text-muted); }
.hris-clock-bar__action { white-space: nowrap; flex-shrink: 0; }

@media (max-width: 768px) {
  .hris-clock-bar.is-visible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    position: fixed;
    top: calc(52px + env(safe-area-inset-top, 0px));
    left: 0; right: 0;
    z-index: 89;
    padding: 0.5rem 0.875rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  .hris-clock-bar.is-in { border-left: 4px solid var(--color-success); }
  /* Push page content below the fixed clock bar when it is shown. */
  body.ts-clock-bar-on .hris-main { padding-top: 112px; }
}

/* Simple Check In / Check Out dashboard (per-employee "checkin_only_dashboard"
   setting). Replaces the whole main panel with one big round button. */
.hris-main--checkin {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hris-checkin-dashboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  padding: 2rem;
}

.hris-checkin-dashboard__greeting {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
}

.hris-checkin-dashboard__btn {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: none;
  background: var(--color-accent);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--color-accent) 50%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hris-checkin-dashboard__btn:hover:not(:disabled) { transform: scale(1.03); }
.hris-checkin-dashboard__btn:active:not(:disabled) { transform: scale(0.97); }

.hris-checkin-dashboard__btn:disabled {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  box-shadow: none;
  cursor: default;
}

.hris-checkin-dashboard__btn.is-in {
  background: var(--color-danger);
  box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--color-danger) 50%, transparent);
}

.hris-checkin-dashboard__status {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
}

.hris-checkin-dashboard__meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

@media (max-width: 480px) {
  .hris-checkin-dashboard__btn { width: 190px; height: 190px; font-size: 1.25rem; }
}

/* Platform migration — progress bar */
.hris-progress { height: 8px; border-radius: 999px; background: var(--color-bg-muted); overflow: hidden; }
.hris-progress__bar { height: 100%; width: 0; background: var(--color-primary); transition: width 0.3s ease; }

/* Employee Settings tab: two equal-width columns of equal-height cards. */
.emp-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}
@media (max-width: 768px) {
  .emp-settings-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
}

/* 8-digit login code: one box per digit. */
.hris-code-boxes {
  position: relative;
  display: flex;
  gap: 0.375rem;
}
.hris-code-boxes__real {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.hris-code-box {
  flex: 1 1 0;
  min-width: 0;
  height: 2.75rem;
  padding: 0;
  text-align: center;
  font-size: 1.125rem;
}

/* Client logo on the sign-in pages (and its Settings preview). */
.hris-login-logo__img {
  max-width: 220px;
  max-height: 72px;
  object-fit: contain;
}
.hris-login-logo__img[hidden] { display: none; }
.hris-login-logo__img.has-bg { padding: 0.5rem 0.75rem; border-radius: var(--radius-lg); }

/* Colour field: swatch and hex value in one input-styled control. */
.hris-color-field {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 0.625rem 0 0.4375rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md, 0.5rem);
}
.hris-color-field:focus-within {
  border-color: var(--color-primary);
}
.hris-color-field__swatch {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 1.625rem;
  height: 1.625rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.hris-color-field__swatch::-webkit-color-swatch-wrapper { padding: 0; }
.hris-color-field__swatch::-webkit-color-swatch {
  border: 1px solid var(--color-border-strong);
  border-radius: 0.3125rem;
}
.hris-color-field__swatch::-moz-color-swatch {
  border: 1px solid var(--color-border-strong);
  border-radius: 0.3125rem;
}
.hris-color-field__hex {
  width: 5.5rem;
  padding: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--color-text);
  font: inherit;
  font-size: 0.875rem;
}