:root {
  --primary: #1c3d54;
  --primary-dark: #122a3b;
  --primary-light: #2a5573;
  --sidebar-bg: #1c3d54;
  --accent: #b98a5e;
  --accent-dark: #9a6f45;
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --text: #111827;
  --muted: #64748B;
  --border: #E5E7EB;
  --success: #1e7e34;
  --success-bg: #e6f4ea;
  --error: #b02a37;
  --error-bg: #fbeaec;
  --warn: #8a5a00;
  --warn-bg: #fff4e0;
  --highlight-bg: #F1F5F9;

  /* Canonical status language - Active/Pending/Inactive/Critical, used
     consistently everywhere a status is shown. Don't introduce new
     one-off status colors on individual pages - reuse these four. */
  --status-active: #22C55E;
  --status-active-bg: #DCFCE7;
  --status-pending: #EAB308;
  --status-pending-bg: #FEF9C3;
  --status-inactive: #A78BFA;
  --status-inactive-bg: #F3F0FF;
  --status-critical: #EF4444;
  --status-critical-bg: #FEE2E2;
  --radius: 8px;
  --radius-sm: 6px;
  --sidebar-w: 240px;
  --font-sans: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

/* Dark mode - a genuinely separate palette, not an inverted light theme:
   cooler near-black surfaces with their own contrast relationships, not
   light colors run through a filter. */
[data-theme="dark"] {
  --primary: #5B9BD5;
  --primary-dark: #8AC4F0;
  --primary-light: #6FB0E8;
  --sidebar-bg: #122a3b;
  --accent: #c99a66;
  --accent-dark: #b98a5e;
  --bg: #09090B;
  --card: #111113;
  --text: #FAFAFA;
  --muted: #A1A1AA;
  --border: #5C5C66;
  --success: #4caf50;
  --success-bg: #17301c;
  --error: #e5626d;
  --error-bg: #3a1c20;
  --warn: #e2b458;
  --warn-bg: #3a2f16;
  --highlight-bg: #1C1C1F;
  --status-active: #4ADE80;
  --status-active-bg: #14291C;
  --status-pending: #FACC15;
  --status-pending-bg: #2E2810;
  --status-inactive: #C4B5FD;
  --status-inactive-bg: #241E38;
  --status-critical: #F87171;
  --status-critical-bg: #351619;
}
/* System mode: follow the OS preference. Falls through to the :root
   (light) defaults automatically when the OS prefers light, or when the
   browser doesn't support prefers-color-scheme at all. */
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --primary: #5B9BD5;
    --primary-dark: #8AC4F0;
    --primary-light: #6FB0E8;
    --sidebar-bg: #122a3b;
    --accent: #c99a66;
    --accent-dark: #b98a5e;
    --bg: #09090B;
    --card: #111113;
    --text: #FAFAFA;
    --muted: #A1A1AA;
    --border: #5C5C66;
    --success: #4caf50;
    --success-bg: #17301c;
    --error: #e5626d;
    --error-bg: #3a1c20;
    --warn: #e2b458;
    --warn-bg: #3a2f16;
    --highlight-bg: #1C1C1F;
    --status-active: #4ADE80;
    --status-active-bg: #14291C;
    --status-pending: #FACC15;
    --status-pending-bg: #2E2810;
    --status-inactive: #C4B5FD;
    --status-inactive-bg: #241E38;
    --status-critical: #F87171;
    --status-critical-bg: #351619;
  }

  /* Belongs inside this same OS-preference gate as the variables above -
     previously this selector matched data-theme="system" unconditionally,
     so the navy logo silently inverted to white-on-white (invisible) for
     any visitor on a light-mode OS who hadn't explicitly picked a theme -
     e.g. most first-time visitors landing on the Login page. */
  [data-theme="system"] img[src*="alada_logo.png"] {
    filter: brightness(0) invert(1);
  }
}

[data-theme="dark"] img[src*="alada_logo.png"] {
  filter: brightness(0) invert(1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.card, .stat, .top-header, .sidebar, .notif-dropdown, input, select, textarea {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Visible keyboard focus everywhere - accessibility quality floor */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Tabular figures for anything numeric - stats, table numbers, badges */
.stat .value, .kv-table td, table td, .bar-chart .bar-count, .nav-badge, .bell-count {
  font-variant-numeric: tabular-nums;
}

/* ---------- Watermark (single large contour-ring image, centered, whole page) ---------- */
body {
  background-image: url("../img/contour_watermark_single.png");
  background-repeat: no-repeat;
  background-position: center 60vh;
  background-size: min(85vw, 1000px);
  background-attachment: fixed;
}

/* ---------- App shell: sidebar + content ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 10;
  transition: width 0.18s ease;
}

.sidebar .brand {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 56px;
  box-sizing: border-box;
}
.sidebar .brand .brand-logo { max-height: 30px; width: auto; max-width: 92px; display: inline-block; object-fit: contain; }

.sidebar-collapse-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  flex-shrink: 0;
  border-radius: 5px;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.1); }
.hamburger-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 17px;
}
.hamburger-bars span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 1px;
}

.sidebar nav { flex: 1; padding: 6px 8px; overflow-y: auto; }
.sidebar nav a {
  display: block;
  color: #dbe4ea;
  text-decoration: none;
  padding: 6px 12px 6px 28px;
  border-radius: 7px;
  font-size: 0.83rem;
  margin-bottom: 1px;
  position: relative;
  line-height: 1.3;
}
.sidebar nav a::before {
  content: "\2514";
  position: absolute;
  left: 11px;
  top: 5px;
  color: rgba(255,255,255,0.35);
  font-size: 0.75rem;
}
.sidebar nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar nav a.active { background: var(--accent); color: #fff; font-weight: 600; }
.sidebar nav a.active::before { color: rgba(255,255,255,0.7); }
.sidebar nav .nav-folder {
  margin: 3px 6px 0;
  font-size: 0.76rem;
  color: #eef2f5;
  font-weight: 600;
  padding: 5px 6px;
  line-height: 1.25;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  user-select: none;
  border-radius: 6px;
}
.sidebar nav .nav-folder:hover { background: rgba(255,255,255,0.06); }
/* Every folder icon renders uniformly, regardless of the underlying
   emoji's native color - grayscale + brighten forces a single flat
   tone matching the sidebar's light text, so icons differ only by
   shape, never by color. */
.sidebar nav .nav-folder-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.lucide-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.sidebar nav .nav-folder-label { flex: 1; }
.sidebar nav .nav-folder:first-child { margin-top: 0; }
.sidebar nav .nav-folder .nav-toggle { font-size: 0.6rem; color: #9fb0bd; transition: transform 0.15s; flex-shrink: 0; }
.sidebar nav .nav-folder.collapsed .nav-toggle { transform: rotate(180deg); }
.sidebar nav .nav-group { display: flex; flex-direction: column; }
.sidebar nav .nav-group.collapsed { display: none; }
.sidebar nav .nav-badge {
  float: right;
  background: #fff;
  color: var(--primary);
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 0.72rem;
  font-weight: 700;
}


.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

.topbar-mobile {
  display: none;
  background: var(--sidebar-bg);
  color: #fff;
  padding: 12px 16px;
  align-items: center;
  justify-content: space-between;
}
.topbar-mobile img { height: 28px; }
.hamburger-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,25,35,0.5);
  z-index: 15;
}
.sidebar-overlay.visible { display: block; }

.top-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  height: 56px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  position: relative;
}
/* Back / Forward arrows - at the left of the top bar on every page */
.app-nav { margin-right: auto; display: inline-flex; align-items: center; gap: 2px; }
.app-nav-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.app-nav-btn:hover:not(:disabled), .app-nav-btn:focus-visible { background: rgba(127,127,127,.18); }
.app-nav-btn:disabled { opacity: .35; cursor: default; }
.app-nav.app-nav-m { margin-right: 0; color: #fff; gap: 0; }
.app-nav.app-nav-m .app-nav-btn { width: 30px; height: 30px; font-size: 1.25rem; }
.top-header-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primary);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 1200px) {
  .top-header-title { display: none; }
}
.top-header .bell-wrap { position: relative; }
.top-header .bell {
  font-size: 1.25rem;
  color: var(--primary);
  text-decoration: none;
}
.top-header .bell-count {
  position: absolute;
  top: -6px; right: -10px;
  background: var(--error);
  color: #fff;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 16px;
  text-align: center;
}

.bell-dropdown-wrap { position: relative; }
.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
}
.theme-toggle-btn:hover { opacity: 0.7; }
/* Company Policy - opens the read-only policy reader (header, left of the theme button) */
.policy-link { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; line-height: 1; }
.policy-link:hover { border-color: var(--accent); color: var(--accent); }
/* with the Policy button and Timesheet icon in the row, the centred title would sit under the buttons on mid-width screens */
@media (max-width: 1500px) { .top-header:has(.policy-link) .top-header-title { display: none; } }
button.bell-wrap {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
}
.notif-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-width: 88vw;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(20,40,55,0.16);
  z-index: 60;
  overflow: hidden;
}
.notif-dropdown.open { display: block; animation: notifFadeIn 0.15s ease-out; }
@keyframes notifFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.notif-dropdown-header {
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 18px 10px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notif-clear-all {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--primary);
  padding: 0;
}
.notif-clear-all:hover { text-decoration: underline; }
.notif-dropdown-list { max-height: 380px; overflow-y: auto; }
.notif-item-actions { display: flex; gap: 8px; margin-top: 8px; }
.notif-action-btn {
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}
.notif-action-btn.notif-approve { background: var(--status-active-bg); color: var(--status-active); }
.notif-action-btn.notif-approve:hover { background: var(--status-active); color: #fff; }
.notif-action-btn.notif-reject { background: var(--status-critical-bg); color: var(--status-critical); }
.notif-action-btn.notif-reject:hover { background: var(--status-critical); color: #fff; }
.notif-item {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
}
.notif-item.unread { background: rgba(185,138,94,0.07); }
.notif-item.notif-clickable { cursor: pointer; }
.notif-item.notif-clickable:hover { background: var(--highlight-bg); }
.notif-item-title { font-weight: 600; font-size: 0.85rem; color: var(--text); }
.notif-item-message { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.notif-item-time { font-size: 0.7rem; color: var(--muted); margin-top: 4px; }
.notif-empty {
  text-align: center;
  padding: 34px 18px;
  color: var(--muted);
}
.notif-empty-icon { font-size: 1.6rem; opacity: 0.35; display: block; margin-bottom: 8px; }
.notif-empty p { margin: 0; font-size: 0.85rem; }
.notif-dropdown-footer {
  display: block;
  text-align: center;
  padding: 11px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.notif-dropdown-footer:hover { background: var(--bg); }

#appToastContainer {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 500;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}
.app-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 320px;
  max-width: calc(100vw - 40px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(20,40,55,0.22);
  padding: 14px 14px 14px 16px;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.app-toast.app-toast-in { opacity: 1; transform: translateX(0); }
.app-toast.app-toast-leaving { opacity: 0; transform: translateX(24px); }
.app-toast.app-toast-clickable { cursor: pointer; }
.app-toast.app-toast-clickable:hover { border-color: var(--primary); }
.app-toast-icon { font-size: 1.15rem; line-height: 1; margin-top: 1px; }
.app-toast-body { flex: 1; min-width: 0; }
.app-toast-title { font-weight: 700; font-size: 0.86rem; color: var(--text); }
.app-toast-message { font-size: 0.8rem; color: var(--muted); margin-top: 3px; overflow-wrap: break-word; }
.app-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--muted);
  padding: 0 0 0 6px;
  flex-shrink: 0;
}
.app-toast-close:hover { color: var(--text); }
@media (max-width: 640px) {
  #appToastContainer { right: 12px; bottom: 12px; left: 12px; }
  .app-toast { width: auto; }
}

.top-header .profile-box {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
  padding: 4px 6px;
  border-radius: 8px;
}
.top-header .profile-box:hover { background: var(--highlight-bg); }
.top-header .profile-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}
.top-header .profile-avatar-img {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.top-header .profile-chevron {
  font-size: 0.6rem;
  color: var(--muted);
  transition: transform 0.15s;
}
.top-header .profile-box.open .profile-chevron { transform: rotate(180deg); }
.profile-dropdown {
  position: absolute;
  top: 100%;
  right: 24px;
  margin-top: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 28px rgba(20,40,55,0.18);
  min-width: 180px;
  padding: 8px;
  z-index: 50;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.profile-dropdown.open { visibility: visible; opacity: 1; pointer-events: auto; }
.profile-dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.86rem;
}
.profile-dropdown a:hover { background: var(--highlight-bg); }
.top-header .profile-text { text-align: right; line-height: 1.2; }
.top-header .profile-text .p-name { font-weight: 600; font-size: 0.88rem; color: var(--text); }
.top-header .profile-text .p-role { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
/* the Timesheet icon - in the top bar beside the bell (it takes no room on the page), pulsing so it is easy to find;
   the top bar stays on screen while the page scrolls */
.top-header, .topbar-mobile { position: sticky; top: 0; z-index: 100; }
.ts-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  font-size: 1.15rem; line-height: 1; color: #fff; background: var(--accent); text-decoration: none;
  animation: tsPing 1.6s ease-out infinite; }
.ts-icon:hover { color: #fff; filter: brightness(1.1); }
.ts-icon-m { width: 28px; height: 28px; font-size: 0.95rem; }
@keyframes tsPing {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent); }
  70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

.container {
  max-width: 1120px;
  margin: 28px auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
  animation: pageEnter 0.25s ease-out;
}
/* Signed-in pages use the whole width of the screen beside the sidebar (the
   1120px column above still centres the pages shown without it - the
   application form, visitor forms and so on). min-width:0 lets a wide table
   or chart scroll inside its own box instead of widening the page. */
.main-content { min-width: 0; }
.main-content .container { max-width: none; }

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .container { animation: none; }
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(20,40,55,0.04);
  overflow-x: auto;
}

table { table-layout: auto; }
th { white-space: nowrap; }
td { overflow-wrap: break-word; }

h1 { font-size: 1.5rem; font-weight: 600; margin-top: 0; margin-bottom: 4px; color: var(--primary); letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; font-weight: 600; color: var(--primary-dark); }
h3 { font-size: 0.92rem; font-weight: 600; }

.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* Text-column-next-to-a-photo layout (Company Portfolio's What We Do /
   Technology sections, when that section has a second image) - a plain
   inline "display:grid;grid-template-columns:1fr 1fr" doesn't collapse on
   its own, so it needs this named class to pick up the same small-screen
   breakpoint every other .grid-N gets below. */
.split-with-image { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* ---------- Collapsible sidebar (icon-rail mode for experienced users) ---------- */
.sidebar.collapsed { width: 68px; }
.sidebar.collapsed ~ .main-content { margin-left: 68px; }

.sidebar.collapsed .brand { padding: 10px 8px; justify-content: center; }
.sidebar.collapsed .brand .brand-logo { display: none; }

.sidebar.collapsed .nav-folder-label,
.sidebar.collapsed .nav-folder .nav-toggle,
.sidebar.collapsed .nav-badge { display: none; }
.sidebar.collapsed .nav-folder {
  justify-content: center;
  padding: 10px 4px;
  margin: 4px 0 0;
}
.sidebar.collapsed .lucide-icon { width: 22px; height: 22px; }
.sidebar.collapsed .nav-group { display: none; }

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.2s; z-index: 20; }
  .sidebar.open { transform: translateX(0); }
  .sidebar.collapsed { width: var(--sidebar-w); }
  .sidebar.collapsed ~ .main-content { margin-left: 0; }
  .sidebar-collapse-btn { display: none; }
  .main-content { margin-left: 0; }
  .topbar-mobile { display: flex; }
  .top-header { display: none; }
  .grid-3, .grid-2, .grid-4, .grid-5, .split-with-image { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .container { padding: 0 14px; margin: 16px auto; }
  .card { padding: 16px; }
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.05rem; }
  .btn { padding: 10px 14px; font-size: 0.9rem; }
  input, select, textarea { font-size: 16px; } /* prevents iOS auto-zoom on focus */
  .stat .value { font-size: 1.4rem; }
}

.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-align: center;
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
a.stat:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20,40,55,0.08); }
.stat .value { font-size: 1.6rem; font-weight: 700; color: var(--primary); letter-spacing: -0.01em; }
.stat .label { color: var(--muted); font-size: 0.76rem; margin-top: 4px; font-weight: 500; }

.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 140px; margin-top: 14px; }
.bar-chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar-chart .bar { width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; }
.bar-chart .bar-label { font-size: 0.72rem; color: var(--muted); margin-top: 6px; text-align: center; }
.bar-chart .bar-count { font-size: 0.78rem; font-weight: 700; color: var(--primary); }

table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
th {
  background: var(--highlight-bg);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
tr { transition: background-color 0.1s ease; }
tbody tr:hover { background: var(--highlight-bg); }

label { display: block; margin: 12px 0 4px; font-weight: 500; font-size: 0.85rem; color: var(--text); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=tel], input[type=file],
select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
}
textarea { resize: vertical; min-height: 70px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
  border: 1px solid transparent;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  margin-top: 14px;
  transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { background: var(--primary-light); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(20,40,55,0.14); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.accent { background: var(--accent); }
.btn.accent:hover { background: var(--accent-dark); }
.btn.secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn.secondary:hover { background: var(--highlight-bg); border-color: var(--muted); }
.push-toggle-btn[data-subscribed="1"] { background: var(--status-active-bg); color: var(--status-active); border-color: transparent; }
.btn.small { padding: 5px 12px; font-size: 0.8rem; margin-top: 0; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Neutral tag - for role/module/category labels that aren't a status
   at all (e.g. "ADMIN", "Recruitment", "Auto-detected"). Kept visually
   distinct from the 4 canonical status colors so it never reads as a
   status by accident. */
.badge.tag { background: var(--highlight-bg); color: var(--muted); }
.badge.pass, .badge.select, .badge.selected { background: var(--status-active-bg); color: var(--status-active); }
.badge.fail, .badge.reject, .badge.rejected, .badge.hr_rejected, .badge.technical_rejected, .badge.failed_test, .badge.failed_aptitude, .badge.application_rejected { background: var(--status-critical-bg); color: var(--status-critical); }
.badge.maybe, .badge.hold, .badge.on_hold { background: var(--status-pending-bg); color: var(--status-pending); }
.badge.pending, .badge.hr_pending, .badge.technical_pending, .badge.cxo_pending, .badge.test2_pending, .badge.awaiting_cutoff, .badge.awaiting_aptitude_cutoff, .badge.pending_hr_review, .badge.pending_aptitude_test, .badge.open, .badge.office_pending_collective { background: var(--status-pending-bg); color: var(--status-pending); }
.badge.in_progress, .badge.deadline_updated { background: #e6f0fb; color: #1c5aa8; }
.badge.deadline_change_requested { background: var(--warn-bg); color: var(--warn); }
.badge.completed { background: var(--success-bg); color: var(--success); }
.badge.overdue { background: var(--error-bg); color: var(--error); }
.badge.priority-high { background: var(--error-bg); color: var(--error); }
.badge.priority-medium { background: var(--warn-bg); color: var(--warn); }
.badge.priority-low { background: #eef1f5; color: var(--muted); }

.flash { padding: 11px 15px; border-radius: 6px; margin-bottom: 14px; font-size: 0.95rem; }
.flash.success { background: var(--success-bg); color: var(--success); }
.flash.error { background: var(--error-bg); color: var(--error); }
.flash.pending { background: var(--warn-bg); color: var(--warn); }

.search-box { display: flex; gap: 10px; margin-bottom: 16px; }
.search-box input { flex: 1; }

.muted { color: var(--muted); font-size: 0.85rem; }
.section-title { margin-top: 28px; margin-bottom: 8px; border-bottom: 2px solid var(--accent); padding-bottom: 5px; display: inline-block; font-size: 1.05rem; font-weight: 600; color: var(--primary-dark); }

.photo-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

.resume-card { padding: 24px; }
.resume-header { display: flex; gap: 18px; align-items: center; padding-bottom: 16px; border-bottom: 2px solid var(--accent); margin-bottom: 18px; }
.photo-thumb-lg { width: 96px; height: 96px; border-radius: 10px; }
.photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: 2rem; font-weight: 700;
}
.resume-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .resume-grid { grid-template-columns: 1fr; } }
.resume-section h3 {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent-dark); margin: 0 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.kv-table { width: 100%; }
.kv-table td { border: none; padding: 4px 0; font-size: 0.85rem; vertical-align: top; }
.kv-table td:first-child { color: var(--muted); width: 46%; }
.kv-table td:last-child { font-weight: 500; }

.history-block { background: var(--highlight-bg); border: 1px dashed var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px; }

.decision-line {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--card);
  border-left: 4px solid var(--accent);
  font-size: 0.9rem;
}
.decision-line.decision-pass { border-left-color: var(--success); background: var(--success-bg); }
.decision-line.decision-reject { border-left-color: var(--error); background: var(--error-bg); }

.donut-row { display: flex; gap: 32px; justify-content: center; padding: 10px 0; }

.round-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 10px; }
@media (max-width: 900px) { .round-grid { grid-template-columns: 1fr; } }
.round-col h4 {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-dark); margin: 0 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 5px;
}
.round-col .kv-table td:first-child { width: 42%; }
.round-full { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ---------- Excel-style table column filter ---------- */
.cf-th { position: relative; padding-right: 24px !important; cursor: default; }
.cf-icon {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
}
.cf-icon:hover { color: var(--primary); }
.cf-th.cf-active .cf-icon { color: var(--accent); }

.col-filter-popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(20,40,55,0.15);
  padding: 10px;
  width: 220px;
  text-transform: none;
  font-weight: 400;
  color: var(--text);
}
.col-filter-popover .cf-sort-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 6px 4px;
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: 4px;
}
.col-filter-popover .cf-sort-btn:hover { background: var(--bg); }
.col-filter-popover .cf-search {
  width: 100%;
  margin: 6px 0;
  padding: 5px 8px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.col-filter-popover .cf-list {
  max-height: 160px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
  margin-bottom: 8px;
}
.col-filter-popover .cf-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  padding: 3px 2px;
  cursor: pointer;
}
.col-filter-popover .cf-item input { width: auto; margin: 0; }
.col-filter-popover .cf-select-all {
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 3px;
}
.col-filter-popover .cf-actions { display: flex; gap: 6px; }
.col-filter-popover .cf-actions .btn { margin-top: 0; flex: 1; text-align: center; }

/* ---------- Pagination bar, added under every table.filterable by
   static/js/table_filter.js - one place styles every data table's rows-
   per-page selector + page-number bar app-wide, no per-page markup. ---------- */
.table-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 4px 4px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}
.table-page-size label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
}
.table-page-size select {
  width: auto;
  padding: 4px 26px 4px 10px;
  margin: 0;
  font-size: 0.85rem;
}
.table-pagination-pages { display: flex; align-items: center; gap: 4px; }
.table-page-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--card);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}
.table-page-btn:hover:not(:disabled):not(.active) { border-color: var(--primary); }
.table-page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; cursor: default; }
.table-page-btn:disabled { opacity: 0.4; cursor: default; }
.table-page-ellipsis { color: var(--muted); padding: 0 2px; }

/* ---------- Searchable user picker (Assign To / CC) ---------- */
.user-picker { border: 1px solid var(--border); border-radius: 8px; }
.user-picker-search {
  border: none !important;
  border-radius: 8px !important;
  width: 100%;
  padding: 9px 10px;
  font-size: 0.9rem;
}
.user-picker-source { display: none; }

/* Suggestions dropdown - only present in the DOM (and only visible) while
   the search box has matching text in it. */
.user-picker-results {
  display: none;
  max-height: 220px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}
.user-picker-result { padding: 8px 12px; font-size: 0.88rem; cursor: pointer; }
.user-picker-result:hover { background: var(--bg); }
.user-picker-empty { padding: 8px 12px; font-size: 0.85rem; color: var(--muted); }

/* Picked users, shown as removable chips instead of a checked row buried
   in a long list. */
.user-picker-selected { display: flex; flex-wrap: wrap; gap: 6px; }
.user-picker-selected:empty { display: none; }
.user-picker-selected:not(:empty) { padding: 8px 10px; border-top: 1px solid var(--border); }
.user-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eef4fb;
  color: var(--primary);
  border-radius: 20px;
  padding: 4px 4px 4px 12px;
  font-size: 0.82rem;
  font-weight: 500;
}
.user-picker-chip-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 50%;
}
.user-picker-chip-remove:hover { background: rgba(0, 0, 0, 0.08); color: var(--error); }

/* ---------- Rich dashboard page pattern (stat cards w/ icon badges, avatar
   badges, filter toolbar, status pills, pagination, detail side-panel) ---------- */

.page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-header-row .page-header-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ---------- Compact stat list - one card, stacked rows, no per-stat
   boxes/icons/borders. Use this instead of stat-icon-card grids. ---------- */
.stat-list { padding: 4px 0; }
.stat-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
}
.stat-list-row:last-child { border-bottom: none; }
.stat-list-row .stat-list-label { font-size: 0.85rem; color: var(--text); font-weight: 500; }
.stat-list-row .stat-list-value-wrap { display: flex; align-items: center; gap: 8px; }
.stat-list-row .stat-list-value { font-size: 1rem; font-weight: 700; color: var(--text); }
.stat-list-trend { font-size: 0.76rem; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.stat-list-trend.trend-up { color: var(--success); }
.stat-list-trend.trend-down { color: var(--error); }

.toolbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.toolbar-row .toolbar-search { flex: 1; min-width: 200px; margin: 0; }
.toolbar-row select { width: auto; margin: 0; padding: 8px 12px; font-size: 0.82rem; }

.avatar-badge {
  width: 38px; height: 38px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--primary-dark);
  background: #e5eefc;
  flex-shrink: 0;
}
.avatar-badge.tone-1 { background: #efe7fb; color: #6b3fa0; }
.avatar-badge.tone-2 { background: var(--success-bg); color: var(--success); }
.avatar-badge.tone-3 { background: #e5eefc; color: #1c5aa8; }
.avatar-badge.tone-4 { background: var(--warn-bg); color: var(--warn); }
.avatar-badge.tone-5 { background: var(--error-bg); color: var(--error); }
.avatar-badge-round {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.72rem;
  background: var(--highlight-bg);
  color: var(--primary);
  flex-shrink: 0;
}

.cell-with-avatar { display: flex; align-items: center; gap: 10px; }
.cell-with-avatar .cell-title { font-weight: 600; font-size: 0.88rem; color: var(--text); }
.cell-with-avatar .cell-subtitle { font-size: 0.76rem; color: var(--muted); }

.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.status-pill.is-active { background: var(--status-active-bg); color: var(--status-active); }
.status-pill.is-active .dot { background: var(--status-active); }
.status-pill.is-pending { background: var(--status-pending-bg); color: var(--status-pending); }
.status-pill.is-pending .dot { background: var(--status-pending); }
.status-pill.is-inactive { background: var(--status-inactive-bg); color: var(--status-inactive); }
.status-pill.is-inactive .dot { background: var(--status-inactive); }
.status-pill.is-critical { background: var(--status-critical-bg); color: var(--status-critical); }
.status-pill.is-critical .dot { background: var(--status-critical); }

.pagination-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; gap: 10px; }
.pagination-row .pagination-info { font-size: 0.8rem; color: var(--muted); }
.pagination-controls { display: flex; align-items: center; gap: 6px; }
.pagination-controls a, .pagination-controls span.page-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--text);
}
.pagination-controls a:hover { background: var(--highlight-bg); }
.pagination-controls .page-num.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.pagination-controls .page-disabled { opacity: 0.4; pointer-events: none; }

.detail-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  align-self: flex-start;
  position: sticky;
  top: 20px;
}
.detail-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.detail-panel-head .avatar-badge { width: 46px; height: 46px; font-size: 1rem; }
.detail-panel-name { font-weight: 700; font-size: 1.05rem; }
.detail-panel-subtitle { font-size: 0.78rem; color: var(--muted); }
.detail-fact-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.detail-fact-row .detail-fact-icon { font-size: 1rem; margin-top: 1px; }
.detail-fact-row .detail-fact-label { font-size: 0.74rem; color: var(--muted); }
.detail-fact-row .detail-fact-value { font-size: 0.9rem; font-weight: 600; color: var(--text); }

.dashboard-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .dashboard-layout { grid-template-columns: 1fr; } .detail-panel { position: static; } }

/* ---------- Toggle switch (settings on/off) ---------- */
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-switch .slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--border);
  border-radius: 24px;
  transition: background-color 0.15s ease;
}
.toggle-switch .slider::before {
  content: "";
  position: absolute;
  height: 18px; width: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .slider { background: var(--success); }
.toggle-switch input:checked + .slider::before { transform: translateX(18px); }
.toggle-switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Global search (Cmd/Ctrl+K) ---------- */
.global-search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.85rem;
  margin-right: auto;
  width: 280px;
  max-width: 40vw;
}
.global-search-trigger:hover { border-color: var(--accent); }
.global-search-trigger .gs-icon { font-size: 0.85rem; }
.global-search-trigger .gs-placeholder { flex: 1; text-align: left; }
.global-search-trigger .gs-shortcut {
  font-size: 0.7rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--muted);
}

.gs-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,25,35,0.5);
  z-index: 90;
  padding-top: 12vh;
}
.gs-overlay.open { display: block; }
.gs-modal {
  background: var(--card);
  border-radius: 12px;
  max-width: 600px;
  width: 92%;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: hidden;
  animation: notifFadeIn 0.15s ease-out;
}
.gs-modal-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.gs-modal-input-row .gs-icon { color: var(--muted); }
.gs-modal-input {
  flex: 1;
  border: none !important;
  outline: none;
  font-size: 1rem;
  padding: 4px 0 !important;
  background: transparent !important;
}
.gs-modal-esc { font-size: 0.7rem; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; }
.gs-results { max-height: 60vh; overflow-y: auto; padding: 8px; }
.gs-group-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 10px 10px 4px; }
.gs-item {
  display: flex;
  flex-direction: column;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
}
.gs-item:hover, .gs-item.gs-active { background: var(--highlight-bg); }
.gs-item-label { font-weight: 600; font-size: 0.88rem; }
.gs-item-sublabel { font-size: 0.75rem; color: var(--muted); }
.gs-empty { padding: 30px 18px; text-align: center; color: var(--muted); font-size: 0.85rem; }

@media (max-width: 900px) {
  .global-search-trigger { display: none; }
}

/* ---------- Contextual confirmation modal (replaces native confirm()) ---------- */
.confirm-modal {
  background: var(--card);
  border-radius: 12px;
  max-width: 420px;
  width: 92%;
  margin: 0 auto;
  padding: 22px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: notifFadeIn 0.15s ease-out;
}
.confirm-modal-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.confirm-modal-message { font-size: 0.88rem; color: var(--text); line-height: 1.5; margin: 0 0 4px; white-space: pre-line; }
.confirm-modal-warning { font-size: 0.8rem; color: var(--error); font-weight: 600; margin: 12px 0 0; }
.confirm-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.confirm-modal-actions .btn { margin-top: 0; }

/* ---------- "View" overlay on My Approvals (Technical Round Assignments) -
   shows a candidate's full application on top of the page, not a separate
   page - reuses .gs-overlay for the backdrop/open toggle, same pattern as
   the confirmation modal above, just a wider box since the content inside
   (partials/candidate_history.html) is a full profile, not a short message. ---------- */
.view-app-modal {
  position: relative;
  background: var(--card);
  border-radius: 12px;
  max-width: 900px;
  width: 94%;
  max-height: 82vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: notifFadeIn 0.15s ease-out;
}
.view-app-body { overflow-y: auto; padding: 22px 24px 26px; }
.view-app-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.view-app-close:hover { background: var(--border); }

/* Organization Structure - a horizontal branching chart, positioned and
   drawn by static/js/org_chart.js (not hand-built with nth-child CSS
   tricks, which is fragile for a tree this uneven - JS computes exact
   pixel positions from the live reporting data and an SVG layer draws
   the connector lines to match). This block is just the visual skin:
   toolbar, sidebar, card, and connector-line styling. */
/* An author-stylesheet display rule on the same element beats the
   browser's default [hidden]{display:none} even at equal specificity
   (author origin always outranks user-agent origin), so the tab switcher
   in org_chrome.js needs this spelled out explicitly or a "hidden" view
   stays visible underneath the active one. */
.oc-toolbar[hidden], .oc-shell[hidden] { display: none !important; }
.oc-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 14px;
}
.oc-tool-group { display: flex; align-items: center; gap: 8px; }
.oc-tool-group label { font-size: 0.78rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.oc-tool-group select { margin: 0; padding: 7px 10px; font-size: 0.82rem; width: auto; }
.oc-search { position: relative; }
.oc-search input { margin: 0; padding: 7px 12px; font-size: 0.82rem; width: 220px; }
.oc-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 280px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20,40,55,0.16);
  z-index: 20;
}
.oc-search-results.oc-open { display: block; }
.oc-search-item { padding: 8px 12px; font-size: 0.82rem; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.oc-search-item:hover { background: var(--highlight-bg); }
.oc-search-item-sub { font-size: 0.72rem; color: var(--muted); }
.oc-search-empty { color: var(--muted); cursor: default; }
.oc-search-empty:hover { background: none; }
.oc-zoom { gap: 6px; }
.oc-zoom .btn { padding: 4px 10px; }
.oc-zoom span { font-size: 0.78rem; color: var(--muted); min-width: 38px; text-align: center; }
.oc-count-label { margin-left: auto; font-size: 0.76rem; color: var(--muted); }

.oc-shell {
  display: flex;
  gap: 0;
  padding: 0;
  overflow: hidden;
  height: 640px;
}
.oc-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px 10px;
}
.oc-sidebar-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 4px 6px 10px;
}
.oc-sidebar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: default;
}
.oc-sidebar-row:hover { background: var(--highlight-bg); }
.oc-sidebar-toggle {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.oc-sidebar-toggle-spacer { width: 16px; flex-shrink: 0; display: inline-block; }
.oc-sidebar-name {
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oc-sidebar-name:hover { color: var(--accent-dark); text-decoration: underline; }

.oc-canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
  cursor: grab;
}
.oc-canvas-wrap.oc-dragging { cursor: grabbing; }
.oc-root-marker { display: none; }
.oc-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}
.oc-lines { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.oc-line { stroke: var(--border); stroke-width: 2; }
.oc-line-stack { stroke-dasharray: 3 3; opacity: 0.8; }
.oc-nodes { position: absolute; top: 0; left: 0; }

.oc-card {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(20,40,55,0.06);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.oc-card:hover { box-shadow: 0 6px 16px rgba(20,40,55,0.14); border-color: var(--accent); z-index: 5; }
.oc-card-standalone { border-style: dashed; }
/* Stacked-column cards (everyone below the branch depth, flattened into
   one column under their anchor) are deliberately more compact than a
   branch-row card - the whole point of the stack is to fit a long chain
   of reports into a readable column instead of branching ever wider.
   static/js/org_chart.js's STACK_ROW_H must be kept in sync with the
   real rendered height this produces (checked against a live render, not
   just the numbers below) or rows start overlapping. */
.oc-card-stacked { border-radius: 8px; }
.oc-card-stacked .oc-card-top-row { padding: 3px 6px 0; min-height: 12px; }
.oc-card-stacked .oc-card-body { padding: 3px 8px 6px; gap: 7px; }
.oc-card-stacked .oc-avatar { width: 22px; height: 22px; font-size: 0.64rem; }
.oc-card-stacked .oc-name { font-size: 0.74rem; }
.oc-card-stacked .oc-title { font-size: 0.66rem; }
.oc-card-stacked .oc-meta { display: none; }
.oc-card-stacked .oc-badge, .oc-card-stacked .oc-counts { font-size: 0.58rem; padding: 0 4px; }
.oc-card-stacked .oc-toggle { width: 14px; height: 14px; font-size: 0.6rem; }
.oc-card-highlight { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(197,140,60,0.28); }
.oc-card-top-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 0;
  min-height: 16px;
}
.oc-badge {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent-dark);
  background: var(--highlight-bg);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0.02em;
}
.oc-counts {
  font-size: 0.66rem;
  color: var(--muted);
  background: var(--highlight-bg);
  border-radius: 4px;
  padding: 1px 6px;
  cursor: pointer;
  white-space: nowrap;
}
.oc-counts:hover { color: var(--accent-dark); }
.oc-toggle {
  margin-left: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.oc-toggle:hover { border-color: var(--accent); color: var(--accent-dark); }
.oc-card-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 10px;
  text-decoration: none;
  color: var(--text);
}
.oc-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.86rem;
  flex-shrink: 0;
}
/* Deterministic per-department color, cycled by department-name length -
   no extra lookups, just enough variety to visually cluster departments
   at a glance. Index 8 is the neutral fallback for "no department set". */
.oc-dept-0 { background: #b98a5e; }
.oc-dept-1 { background: #4c8577; }
.oc-dept-2 { background: #6a6fb0; }
.oc-dept-3 { background: #b0637a; }
.oc-dept-4 { background: #5b9bd5; }
.oc-dept-5 { background: #8a7ab8; }
.oc-dept-6 { background: #4c9a7d; }
.oc-dept-7 { background: #c17a4a; }
.oc-dept-8 { background: var(--primary); }
.oc-card-text { min-width: 0; }
.oc-name { font-weight: 600; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-title { font-size: 0.72rem; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.oc-years { font-size: 0.68rem; color: var(--accent-dark); font-weight: 600; white-space: nowrap; }
.oc-tag { font-size: 0.64rem; color: var(--muted); font-style: italic; white-space: nowrap; }

/* Org Chart / Sunburst / Network tab bar, and the Print + Export group
   that sits beside it and acts on whichever tab is currently active. */
.oc-tabbar {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.oc-tab {
  border: none;
  background: none;
  padding: 9px 16px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.oc-tab:hover { color: var(--text); }
.oc-tab.active { color: var(--accent-dark); border-bottom-color: var(--accent); }
.oc-tabbar-spacer { flex: 1; }
.oc-print-export { padding-bottom: 8px; }
.oc-print-export label { font-size: 0.72rem; color: var(--muted); font-weight: 600; }

.oc-shell-single { display: block; padding: 0; }
.oc-shell-single .oc-canvas-wrap { width: 100%; height: 100%; }

/* Shared hover tooltip used by the Sunburst and Network views (the Org
   Chart view doesn't need one - its cards show everything inline). */
.oc-tooltip {
  display: none;
  position: absolute;
  z-index: 30;
  pointer-events: none;
  background: var(--text);
  color: #fff;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  line-height: 1.4;
  max-width: 220px;
  box-shadow: 0 6px 18px rgba(20,40,55,0.22);
}
.oc-tooltip.oc-open { display: block; }
.oc-tooltip-sub { color: rgba(255,255,255,0.72); }

/* SVG fill equivalents of the .oc-dept-N background palette above, for
   the Sunburst wedges and Network node circles. */
.oc-dept-fill-0 { fill: #b98a5e; }
.oc-dept-fill-1 { fill: #4c8577; }
.oc-dept-fill-2 { fill: #6a6fb0; }
.oc-dept-fill-3 { fill: #b0637a; }
.oc-dept-fill-4 { fill: #5b9bd5; }
.oc-dept-fill-5 { fill: #8a7ab8; }
.oc-dept-fill-6 { fill: #4c9a7d; }
.oc-dept-fill-7 { fill: #c17a4a; }
.oc-dept-fill-8 { fill: var(--primary); }

/* Sunburst */
.sb-svg { width: 100%; height: 100%; display: block; }
.sb-wedge {
  stroke: var(--card);
  stroke-width: 1.5;
  cursor: pointer;
  opacity: 0.92;
  transition: opacity 0.12s ease;
}
.sb-wedge:hover { opacity: 1; }
.sb-label {
  font-size: 10px;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  font-weight: 600;
}
#sb-breadcrumb { font-size: 0.8rem; }
.sb-crumb { cursor: pointer; color: var(--accent-dark); }
.sb-crumb:hover { text-decoration: underline; }
.sb-crumb-active { color: var(--text); font-weight: 600; cursor: default; }
.sb-crumb-active:hover { text-decoration: none; }
.sb-crumb-sep { color: var(--muted); margin: 0 2px; }

/* Network */
.nw-svg { width: 100%; height: 100%; display: block; cursor: grab; }
#nw-canvas-wrap.oc-dragging .nw-svg { cursor: grabbing; }
.nw-edge { stroke: var(--border); stroke-width: 1.5; }
.nw-node { cursor: pointer; }
.nw-circle { stroke: var(--card); stroke-width: 2; }
.nw-node:hover .nw-circle { stroke: var(--accent); }
.nw-label {
  font-size: 10px;
  fill: var(--text);
  text-anchor: middle;
  pointer-events: none;
}

/* Print: show only the currently-active view, at full natural size
   (no pan/zoom transform, no scroll clipping), and drop everything that
   only makes sense on screen. */
@media print {
  .sidebar, .top-header, .oc-tabbar, .oc-toolbar, .oc-search-results, .oc-tooltip { display: none !important; }
  body:not([data-print-view="structure"]) #oc-view-structure,
  body:not([data-print-view="reporting"]) #oc-view-reporting,
  body:not([data-print-view="orgchart"]) #oc-view-orgchart,
  body:not([data-print-view="sunburst"]) #oc-view-sunburst,
  body:not([data-print-view="network"]) #oc-view-network {
    display: none !important;
  }
  .oc-shell { display: block !important; height: auto !important; border: none !important; box-shadow: none !important; }
  .oc-sidebar { display: none !important; }
  .oc-canvas-wrap { overflow: visible !important; height: auto !important; background: none !important; }
  .oc-canvas { transform: none !important; position: relative !important; }
}

/* Recurring task day-of-week picker - circular toggle buttons matching
   the Outlook-style reference (M T W T F S S) */
.day-of-week-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.day-of-week-circle:hover { border-color: var(--accent); }
.day-of-week-circle.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Inline edit/action popovers - the many <details><summary>...</summary>
   <div class="card" style="position:absolute..."> patterns used across
   the app (Client KRAs, Employee KRAs, Departments, Users, Offer
   Templates, Roles, etc). Targeting details[open] > .card catches every
   one of them from one place, since they all share this exact
   structure - no need to touch each template individually.
   Gives them a stronger, more deliberate "flyout panel" feel (so they
   read as connected to what opened them, not a stray floating box) and
   guarantees they never overflow the viewport, on any screen size. */
details[open] > .card {
  box-shadow: 0 8px 28px rgba(20, 40, 55, 0.18) !important;
  border: 1px solid var(--border) !important;
  border-top: 2px solid var(--accent) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(70vh, 480px) !important;
  overflow-y: auto !important;
  animation: popoverIn 0.1s ease-out;
}
@keyframes popoverIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Password strength checklist - matches the reference: a dot per rule
   that fills in as the requirement is met while typing */
.pw-rule { display: flex; align-items: center; gap: 8px; color: var(--muted); padding: 2px 0; }
.pw-rule-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--muted);
  flex-shrink: 0;
}
.pw-rule.pw-rule-met { color: var(--status-active); }
.pw-rule.pw-rule-met .pw-rule-dot { background: var(--status-active); border-color: var(--status-active); }

/* Business Development - square image tile galleries (Department >
   Project Types > Job Types browsing) */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.tile {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  background: var(--highlight-bg);
  border: 1px solid var(--border);
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--muted); background: var(--highlight-bg);
}
.tile-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  color: #fff;
  padding: 24px 12px 10px;
  font-weight: 600;
  font-size: 0.9rem;
}
.tile-add {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border: 2px dashed var(--border);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  text-align: center;
  padding: 12px;
}
.tile-add:hover { border-color: var(--accent); color: var(--accent); }
.case-study-thumb {
  display: flex; gap: 12px; align-items: center;
  padding: 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  text-decoration: none; color: var(--text);
  margin-bottom: 8px;
}
.case-study-thumb:hover { border-color: var(--accent); }
.case-study-thumb img { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.case-study-thumb .cs-thumb-placeholder { width: 64px; height: 64px; border-radius: 6px; background: var(--highlight-bg); flex-shrink: 0; }

/* Smooth page navigation - every normal link click and form submit is
   still a full page load (this is a server-rendered app, not a single-page
   app), but the browser's native View Transitions API lets it cross-fade
   the old page out and the new one in instead of the blank white flash a
   plain reload shows. This is pure progressive enhancement: browsers that
   don't support cross-document view transitions yet (anything older than
   Chrome/Edge 126) just silently keep the old instant-swap behavior - no
   JS, no fallback code needed either way. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation-duration: 0.18s;
    animation-timing-function: ease-out;
  }
  ::view-transition-new(root) {
    animation-duration: 0.22s;
    animation-timing-function: ease-in;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ==========================================================================
   Native App Mode (Android TWA)
   --------------------------------------------------------------------------
   Everything below is scoped to html[data-native-app="true"], which is only
   ever set by the detection script in base.html's <head> when the site is
   running inside the installed Android app - never in a desktop or mobile
   web browser. This is what turns the same server-rendered pages into
   something that feels like a purpose-built phone app instead of a resized
   website, without a single line of it touching the normal web experience.
   ========================================================================== */

[data-native-app] body { overscroll-behavior-y: contain; } /* no rubber-band "pull to refresh" bounce */

/* Bottom tab bar - hidden by default (desktop + normal mobile web keep the
   existing hamburger/top-header pattern); shown only in native-app mode. */
.native-tabbar { display: none; }
[data-native-app] .native-tabbar {
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 10px rgba(20, 40, 55, 0.06);
}
[data-native-app] .native-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 50px;
  padding: 6px 2px;
  background: none;
  border: none;
  text-decoration: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
}
[data-native-app] .native-tab .lucide-icon { width: 22px; height: 22px; }
[data-native-app] .native-tab.active { color: var(--primary); }
[data-native-app] .native-tab:active { opacity: 0.6; }
[data-native-app] .native-tab-icon { position: relative; display: inline-flex; }
[data-native-app] .native-tab-badge {
  position: absolute;
  top: -4px; right: -8px;
  background: var(--error);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.4;
  min-width: 15px;
  padding: 0 4px;
  border-radius: 20px;
  text-align: center;
}

/* Slim top bar: keep the logo/theme-toggle/logout row from .topbar-mobile,
   but drop the hamburger and bell now that Home/More and Alerts live in the
   bottom tab bar instead - avoids offering the same action two different
   ways in the same screen. */
[data-native-app] .topbar-mobile { padding-top: calc(10px + env(safe-area-inset-top)); }
[data-native-app] .topbar-mobile #sidebarToggle,
[data-native-app] .topbar-mobile .bell-wrap { display: none; }

/* Make room at the bottom of every page for the fixed tab bar, and never
   show the desktop header even at wider tablet widths inside the app. */
[data-native-app] .top-header { display: none !important; }
[data-native-app] .main-content { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
[data-native-app] #appToastContainer { bottom: calc(66px + env(safe-area-inset-bottom)) !important; }

/* "More" opens the same off-canvas menu the hamburger always opened, as a
   left-hand drawer with bigger, easier-to-tap rows. */
/* a drawer from the left - not the whole screen - with the page dimmed beside it; tapping the dimmed part closes it */
[data-native-app] .sidebar.open { width: min(84vw, 330px); max-width: 84vw; z-index: 70; box-shadow: 8px 0 28px rgba(0, 0, 0, .35); }
[data-native-app] .sidebar-overlay.visible { z-index: 65; }
[data-native-app] .nav-folder { padding: 15px 20px; font-size: 0.95rem; min-height: 50px; }
[data-native-app] .nav-group a { padding: 14px 20px 14px 44px; font-size: 0.95rem; min-height: 48px; display: flex; align-items: center; }
/* (the tab bar stays where it is, dimmed under the backdrop, while the drawer is open) */

/* Bigger touch targets everywhere: buttons, form fields, and cards get more
   breathing room than the mouse-sized web defaults. */
[data-native-app] .btn { min-height: 44px; padding: 11px 18px; font-size: 0.95rem; }
[data-native-app] .btn.small { min-height: 38px; padding: 8px 14px; }
[data-native-app] input[type=text], [data-native-app] input[type=email],
[data-native-app] input[type=password], [data-native-app] input[type=number],
[data-native-app] input[type=date], [data-native-app] input[type=datetime-local],
[data-native-app] input[type=tel], [data-native-app] input[type=file],
[data-native-app] select, [data-native-app] textarea {
  padding: 12px 14px;
  font-size: 16px; /* also prevents any zoom-on-focus */
  min-height: 46px;
}
[data-native-app] .card { border-radius: 14px; padding: 18px 16px; }
[data-native-app] .grid-2, [data-native-app] .grid-3,
[data-native-app] .grid-4, [data-native-app] .grid-5,
[data-native-app] .split-with-image { grid-template-columns: 1fr; }

/* Tables become stacked, card-style rows (each row its own bordered block,
   each cell shown as "Label: value") instead of a cramped horizontally-
   scrolling grid - the classic responsive-table pattern. The .native-stacked
   class and each cell's data-label attribute are added generically by the
   script at the bottom of base.html, so this applies to every table on
   every page without needing per-page template changes. Tables already
   built as label/value layouts (.kv-table) are left exactly as they are. */
[data-native-app] table.native-stacked { border-collapse: separate; border-spacing: 0 10px; margin-top: 4px; }
[data-native-app] table.native-stacked thead { display: none; }
[data-native-app] table.native-stacked tbody tr {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 14px;
}
[data-native-app] table.native-stacked tbody tr:hover { background: var(--bg); } /* no hover state on touch */
[data-native-app] table.native-stacked tbody td {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  font-size: 0.85rem;
  text-align: right;
}
[data-native-app] table.native-stacked tbody tr td:last-child { border-bottom: none; }
[data-native-app] table.native-stacked tbody td::before {
  content: attr(data-label);
  flex-shrink: 0;
  text-align: left;
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
[data-native-app] table.native-stacked tbody td:not([data-label])::before { content: none; }

/* ======================================================================
   Process Management - visual Process Builder (Drawflow-based canvas).
   Node type colors are defined once as variables and reused everywhere
   a node type needs color-coding (palette items, node dots, node
   borders) so adding a color for a future 10th node type is a one-line
   change here rather than a hunt through every rule below.
   ====================================================================== */
:root {
  --pb-start: var(--status-active);
  --pb-input: #3B82F6;
  --pb-review: var(--status-inactive);
  --pb-approval: var(--accent);
  --pb-decision: var(--status-pending);
  --pb-notification: #06B6D4;
  --pb-update: #64748B;
  --pb-wait: #94A3B8;
  --pb-end: var(--status-critical);
}

.pb-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  margin: -20px -24px;
}
.pb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pb-topbar-title { display: flex; align-items: center; gap: 10px; }
.pb-topbar-actions { display: flex; align-items: center; gap: 8px; }

.pb-body { display: flex; flex: 1; min-height: 0; }

.pb-palette {
  width: 190px;
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 14px 12px;
  overflow-y: auto;
}
.pb-palette-heading {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 8px;
}
.pb-palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: grab;
  font-size: 0.85rem;
  user-select: none;
}
.pb-palette-item:active { cursor: grabbing; }

.pb-node-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.pb-dot-start { background: var(--pb-start); }
.pb-dot-input { background: var(--pb-input); }
.pb-dot-review { background: var(--pb-review); }
.pb-dot-approval { background: var(--pb-approval); }
.pb-dot-decision { background: var(--pb-decision); }
.pb-dot-notification { background: var(--pb-notification); }
.pb-dot-update { background: var(--pb-update); }
.pb-dot-wait { background: var(--pb-wait); }
.pb-dot-end { background: var(--pb-end); }

.pb-canvas-wrap { position: relative; flex: 1; min-width: 0; background: var(--bg); }
#drawflowCanvas { width: 100%; height: 100%; background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 18px 18px; }

.pb-zoom-controls {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  gap: 4px;
  background: var(--card);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  z-index: 5;
}

.pb-validation-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  max-width: 360px;
  max-height: 45%;
  overflow-y: auto;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  z-index: 5;
}
.pb-validation-panel ul { margin: 6px 0 0; padding-left: 18px; }
.pb-validation-ok { background: var(--status-active-bg); color: var(--success); border: 1px solid var(--status-active); }
.pb-validation-errors { background: var(--error-bg); color: var(--error); border: 1px solid var(--error); }

.pb-props {
  width: 320px;
  flex-shrink: 0;
  background: var(--card);
  border-left: 1px solid var(--border);
  padding: 16px;
  overflow-y: auto;
}
.pb-props label { margin-top: 10px; }
.pb-props label:first-child { margin-top: 0; }
.pb-panel input[type="text"], .pb-panel input[type="number"], .pb-panel select, .pb-panel textarea { margin-bottom: 4px; }
.pb-props-actions { display: flex; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

.pb-branch-row, .pb-recipient-row, .pb-update-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.pb-branch-row input[type="text"], .pb-recipient-row select { margin: 0; flex: 1; }
.pb-branch-condbox { margin: -2px 0 10px; padding: 8px; background: var(--highlight-bg); border-radius: var(--radius-sm); }
.pb-rule-row { display: flex; gap: 6px; margin-bottom: 6px; }
.pb-rule-row input, .pb-rule-row select { margin: 0; }
.pb-rule-field { flex: 1.2; }
.pb-rule-value { flex: 1; }
.pb-update-row input { margin: 0; flex: 1; }

/* Drawflow node appearance - overrides Drawflow's own minimal default
   node chrome to match this app's card/border language. */
.drawflow .drawflow-node { background: transparent; border: none; padding: 0; min-width: 150px; box-shadow: none; }
.drawflow .drawflow-node.selected .pb-node { box-shadow: 0 0 0 2px var(--primary); }
.pb-node {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  font-size: 0.82rem;
}
.pb-node-start { border-left-color: var(--pb-start); }
.pb-node-input { border-left-color: var(--pb-input); }
.pb-node-review { border-left-color: var(--pb-review); }
.pb-node-approval { border-left-color: var(--pb-approval); }
.pb-node-decision { border-left-color: var(--pb-decision); }
.pb-node-notification { border-left-color: var(--pb-notification); }
.pb-node-update { border-left-color: var(--pb-update); }
.pb-node-wait { border-left-color: var(--pb-wait); }
.pb-node-end { border-left-color: var(--pb-end); }
.pb-node-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.pb-node-name { font-weight: 600; margin-top: 2px; }
.pb-node-summary { color: var(--muted); font-size: 0.76rem; margin-top: 1px; }
.pb-node-ports { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pb-node-ports span {
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--highlight-bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.drawflow .connection .main-path { stroke: var(--muted); stroke-width: 2px; }
.drawflow .connection .main-path:hover { stroke: var(--primary); }
.drawflow .output, .drawflow .input { background: var(--primary); height: 10px; width: 10px; }

@media (max-width: 900px) {
  .pb-shell { height: auto; margin: -12px; }
  .pb-body { flex-direction: column; }
  .pb-palette { width: auto; display: flex; overflow-x: auto; gap: 8px; }
  .pb-palette-item { margin-bottom: 0; white-space: nowrap; }
  .pb-canvas-wrap { height: 60vh; }
  .pb-props { width: auto; border-left: none; border-top: 1px solid var(--border); }
}

/* ======================================================================
   Recruitment Dashboard (admin.dashboard) - a normal, top-to-bottom
   scrolling page. Every panel sizes to its own content - no panel ever
   scrolls internally, and the page itself grows downward as far as the
   content needs (never sideways, never clipped). ====================== */
.rd-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.rd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.rd-header h1 { margin: 0; font-size: 1.5rem; }
.rd-header p.muted { margin: 2px 0 0; }

.rd-filters {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.rd-filter-group { display: flex; flex-direction: column; gap: 4px; }
.rd-filter-group label {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}
.rd-filter-group select, .rd-filter-group input[type="date"] {
  margin: 0;
  padding: 7px 30px 7px 10px;
  font-size: 0.84rem;
  min-width: 150px;
}
.rd-date-range { display: flex; align-items: center; gap: 6px; }
.rd-date-range input[type="date"] { min-width: 128px; }
.rd-date-range span { color: var(--muted); font-size: 0.8rem; }

/* Centered, single-line "Last Update" strip above the header row -
   previously a right-aligned two-line block tucked inside .rd-header,
   which read as buried/off to the side rather than a page-level fact. */
.rd-updated-top {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.rd-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  flex-shrink: 0;
  /* Lets each tile size to its own content instead of every tile in the
     row being stretched to match the tallest one (grid's default
     align-items: stretch) - without this, the tile with the longest
     wrapping label ("Office Interview Applicants") forced blank space
     into every shorter tile beneath its number. */
  align-items: start;
}
.rd-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 12px 14px;
  margin-bottom: 0;
}
.rd-stat-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rd-stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--highlight-bg);
  color: var(--primary);
  flex-shrink: 0;
}
.rd-stat-icon svg { width: 18px; height: 18px; }
.rd-stat .value { font-size: 1.5rem; }
.rd-stat .label { margin-top: 0; }
.rd-stat .label .rd-sublabel { display: block; color: var(--muted); font-size: 0.7rem; font-weight: 400; margin-top: 1px; }
.rd-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 1.05rem;
  font-weight: 700;
}
.rd-stat-pill::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rd-stat-pill.rd-open { color: var(--status-active); }
.rd-stat-pill.rd-open::before { background: var(--status-active); }
.rd-stat-pill.rd-closed { color: var(--status-critical); }
.rd-stat-pill.rd-closed::before { background: var(--status-critical); }

.rd-main {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 14px;
}
.rd-col { display: flex; flex-direction: column; gap: 14px; }

.rd-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}
.rd-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 10px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.rd-panel-header h2 { margin: 0; font-size: 0.95rem; }
.rd-panel-header .muted { font-size: 0.74rem; }
.rd-panel-body { padding: 12px 16px 14px; }
.rd-panel-body.rd-no-pad { padding: 0; }

/* Funnel: horizontal magnitude bars, one hue (sequential job per the
   dataviz procedure - these are ordered pipeline stages, not distinct
   identities, so length does the talking and color stays constant).
   Status-colored identity lives on the stage table's badges instead. */
.rd-funnel-row {
  display: grid;
  grid-template-columns: 168px 1fr 34px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.rd-funnel-label {
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-funnel-track {
  display: block;
  background: var(--highlight-bg);
  border-radius: 4px;
  height: 16px;
  overflow: hidden;
}
.rd-funnel-fill {
  display: block;
  height: 100%;
  min-width: 3px;
  background: var(--primary);
  border-radius: 4px;
}
.rd-funnel-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: right;
  color: var(--text);
}

.rd-stage-table { font-size: 0.82rem; }
.rd-stage-table th, .rd-stage-table td { padding: 7px 10px; }
.rd-stage-table .badge { white-space: nowrap; }
.rd-stage-table td:last-child, .rd-stage-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Donut: conic-gradient built from server-supplied percentages (see
   admin/dashboard.html), status-colored per slice (Selected=active,
   On Hold=pending, Rejected in Technical=critical, Others=inactive) -
   reusing the app's existing 4-state status language rather than a new
   categorical palette. A donut is a deliberate exception to "part-to-
   whole prefers a stacked bar": kept here to match the requested
   reference layout, at only 4 always-legend-labeled slices with counts
   and percentages, never color-only. */
.rd-donut-wrap { display: flex; align-items: center; gap: 16px; }
.rd-donut {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.rd-donut-hole {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rd-donut-hole .rd-donut-total { font-size: 1.3rem; font-weight: 700; color: var(--primary); line-height: 1; }
.rd-donut-hole .rd-donut-total-label { font-size: 0.6rem; color: var(--muted); margin-top: 3px; text-align: center; line-height: 1.2; }
.rd-legend { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.rd-legend-item { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; }
.rd-legend-swatch { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.rd-legend-label { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-legend-value { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.74rem; white-space: nowrap; }
.rd-swatch-status-active { background: var(--status-active); }
.rd-swatch-status-critical { background: var(--status-critical); }
.rd-swatch-status-pending { background: var(--status-pending); }
.rd-swatch-status-inactive { background: var(--status-inactive); }

.rd-drive-overview { display: flex; gap: 10px; }
.rd-drive-tile {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  border-radius: var(--radius-sm);
  background: var(--highlight-bg);
}
.rd-drive-tile .value { font-size: 1.3rem; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.rd-drive-tile .label { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.rd-drive-tile .sub { font-size: 0.66rem; color: var(--muted); margin-top: 1px; }

.rd-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  flex-shrink: 0;
}
.rd-bottom .rd-panel-body ul { margin: 0; padding-left: 18px; font-size: 0.8rem; line-height: 1.55; }
.rd-bottom .rd-panel-body ul li { margin-bottom: 4px; }
.rd-bottom .rd-panel-body ul li:last-child { margin-bottom: 0; }
.rd-empty-note { color: var(--muted); font-size: 0.8rem; margin: 0; }

.rd-activity-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.79rem;
}
.rd-activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.rd-activity-main { color: var(--text); }
.rd-activity-main strong { font-weight: 600; }
.rd-activity-time { color: var(--muted); font-size: 0.7rem; }

@media (max-width: 1150px) {
  .rd-stats { grid-template-columns: repeat(3, 1fr); }
  .rd-main { grid-template-columns: 1fr; }
  .rd-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .rd-stats { grid-template-columns: repeat(2, 1fr); }
  .rd-filters { width: 100%; }
  .rd-filter-group select, .rd-filter-group input[type="date"] { min-width: 0; width: 100%; }
}


/* (i) help icon - hover, keyboard focus or tap shows a how-it-works card.
   Used via macros.info_tip / the bd/_create_help.html partial. */
.info-tip { position: relative; display: inline-flex; vertical-align: middle; }
.info-tip-icon {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent);
  background: var(--card); font: italic 700 0.78rem/1 Georgia, serif; display: inline-flex; align-items: center;
  justify-content: center; cursor: help; padding: 0; margin: 0;
}
.info-tip-icon:hover, .info-tip-icon:focus { background: var(--accent); color: #fff; outline: none; }
.info-tip-card {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(420px, 86vw);
  background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.16); padding: 14px 16px; font-size: 0.84rem; font-weight: 400;
  line-height: 1.45; text-align: left; white-space: normal; text-transform: none; letter-spacing: 0;
}
.info-tip.align-right .info-tip-card { left: auto; right: 0; }
.info-tip:hover .info-tip-card, .info-tip:focus-within .info-tip-card { display: block; }
.info-tip-card h4 { margin: 0 0 8px; font-size: 0.92rem; }
.info-tip-card ol { margin: 0; padding-left: 18px; }
.info-tip-card li { margin: 0 0 8px; }
.info-tip-card li:last-child { margin-bottom: 0; }
.info-tip-card .info-tip-note { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--border); color: var(--muted, #6b7280); }

/* ======================================================================
   Phones (any browser, and the installed app): nothing may be wider than
   the screen. The app-style layout itself ([data-native-app]) is defined
   above; this is the safety net under it - boxes shrink to the screen,
   multi-column layouts become one column, and anything that truly cannot
   shrink (a wide chart, a table that is not stacked) scrolls inside its
   own box instead of pushing the whole page sideways.
   ====================================================================== */
@media (max-width: 820px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .main-content, .main-content .container { min-width: 0; max-width: 100%; }
  .main-content .container { padding-left: 12px; padding-right: 12px; }

  /* every box that lays out a page */
  .card, .ad-panel, .cd-panel, .cl-panel, .rd-panel, .rd-col, .rd-shell, .ad, .stat,
  .main-content .container > *, .main-content form, .main-content fieldset { min-width: 0; max-width: 100%; }
  /* (not .card: a card may hold a drop-down list that has to hang outside it) */
  .ad-panel, .cl-panel, .rd-panel-body, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll { max-width: 100%; }

  /* children of grids and flex rows may shrink below their content */
  .main-content [class*="grid"] > *, .main-content [class*="-two"] > *, .main-content [class*="-three"] > *,
  .main-content [class*="-stats"] > *, .main-content [class*="-main"] > *, .main-content [class*="-row"] > * { min-width: 0; }

  /* multi-column dashboard layouts: one column; figure cards: two across */
  .ad-two, .ad-three, .rd-main, .rd-bottom, .dashboard-layout,
  .main-content [class$="-two"], .main-content [class$="-three"], .main-content [class*="-two "], .main-content [class*="-three "] { grid-template-columns: minmax(0, 1fr) !important; }
  /* layouts whose columns ask for more than a phone is wide */
  .cl-grid2, .lc-two, .task-split, .main-content [class*="grid2"], .main-content [class*="-split"] { grid-template-columns: minmax(0, 1fr) !important; }
  .main-content table[style*="min-width"], .main-content div[style*="min-width"] { min-width: 0 !important; }
  .main-content [style*="position:absolute"] { max-width: calc(100vw - 24px); }
  .ad-stats, .ad-stats.three, .ad-stats.four, .ad-stats.five, .rd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ad-stat { padding: 14px; gap: 10px; }
  .ad-stat-value { font-size: 1.45rem; }

  /* headers, toolbars and filter rows wrap instead of running off the edge */
  .page-header-row, .page-header-actions, .ad-head, .ad-panel-head, .rd-header, .rd-filters, .rd-filter-group, .rd-date-range,
  .ad-quick, .os-head, .os-tools, .oc-tabbar { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .rd-filter-group select, .rd-filter-group input, .rd-date-range input { min-width: 0 !important; max-width: 100%; }
  .page-header-actions > *, .rd-filters > * { max-width: 100%; }
  .os-tools input, .os-tools select { min-width: 0 !important; flex: 1 1 140px; }

  /* fields never wider than their box, whatever width was written on them */
  .main-content input, .main-content select, .main-content textarea { max-width: 100%; }
  .main-content input[style*="width"], .main-content select[style*="width"] { min-width: 0 !important; }
  .main-content img, .main-content video, .main-content canvas { max-width: 100%; height: auto; }
  .main-content pre { white-space: pre-wrap; word-break: break-word; }

  /* a table that is not turned into cards scrolls sideways in its own box (.table-scroll, put round it by base.html) */
  /* in card rows, long values wrap and controls sit at the right */
  [data-native-app] table.native-stacked tbody td { flex-wrap: wrap; word-break: break-word; min-width: 0; }
  [data-native-app] table.native-stacked tbody td > * { max-width: 100%; }
  [data-native-app] table.native-stacked tbody td:empty { display: none; }
  [data-native-app] table.native-stacked tbody td[colspan] { justify-content: flex-start; text-align: left; }
  [data-native-app] table.native-stacked tbody td[colspan]::before { content: none; }
  [data-native-app] table.native-stacked tfoot { display: block; }
  [data-native-app] table.native-stacked tfoot tr { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 4px; }
  [data-native-app] table.native-stacked tfoot td { border: none; padding: 0; }
  [data-native-app] table.native-stacked tfoot td:empty { display: none; }

  /* pop-ups and the search box fit the screen */
  .confirm-modal, .gs-modal { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
  .confirm-modal-actions { flex-wrap: wrap; }
  .confirm-modal-actions .btn { flex: 1; }

  h1 { font-size: 1.3rem; }
  .section-title { font-size: 1rem; }
}


/* ---- Saving without a reload (static/js/live_forms.js) ---- */
.live-toasts { position: fixed; top: 74px; right: 18px; z-index: 3000; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.live-toast { pointer-events: auto; padding: 11px 16px; border-radius: 12px; font-size: 0.88rem; line-height: 1.35; box-shadow: 0 10px 28px rgba(0,0,0,.18);
  background: var(--status-active-bg, #e7f6ec); color: var(--status-active, #1e7a3c); border: 1px solid currentColor; animation: liveToastIn .18s ease-out; transition: opacity .5s, transform .5s; }
.live-toast.error { background: var(--status-critical-bg, #fdeaea); color: var(--status-critical, #b42318); }
.live-toast.is-going { opacity: 0; transform: translateY(-6px); }
@keyframes liveToastIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.live-busy { cursor: progress; }
.live-busy form button[type="submit"]:disabled, .live-busy form button:not([type]):disabled { opacity: .6; }
button.is-saving { position: relative; color: transparent !important; }
button.is-saving::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--muted, #888); border-top-color: transparent; animation: liveSpin .7s linear infinite; }
@keyframes liveSpin { to { transform: rotate(360deg); } }
@media (max-width: 820px) { .live-toasts { top: auto; bottom: 78px; right: 16px; left: 16px; max-width: none; } }


/* ---- A field that still needs filling in (static/js/form_errors.js) ---- */
.field-error, input.field-error, select.field-error, textarea.field-error {
  border-color: var(--error, #d92d20) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--error, #d92d20) 18%, transparent) !important;
  background-color: color-mix(in srgb, var(--error, #d92d20) 5%, var(--card, #fff));
}
input[type="checkbox"].field-error, input[type="radio"].field-error { outline: 2px solid var(--error, #d92d20); outline-offset: 2px; box-shadow: none !important; }
.field-error-msg { color: var(--error, #d92d20); font-size: 0.8rem; font-weight: 600; margin: 4px 0 10px; }
.field-error-msg::before { content: "⚠︎ "; }


/* one search box over a whole table (table_filter.js, <table data-search>) */
.table-search { width: 100%; max-width: 420px; margin: 0 0 10px; padding-left: 34px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center; }

/* Date / time fields: the whole field opens the calendar (static/js/date_picker.js), so show a
   hand pointer; in dark mode the calendar pop-up and its icon follow the dark theme, so the
   icon is visible instead of dark-on-dark */
input[type="date"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"] { cursor: pointer; }
input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"])::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.85; }
[data-theme="dark"] input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"]) { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"]) { color-scheme: dark; }
}

/* IT assets shown as pictures - the device (laptop, monitor, mouse ...) with its code below (partials/asset_icons.html) */
.asset-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.asset-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 10px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--card); text-align: center; text-decoration: none; color: var(--text); }
a.asset-tile:hover { border-color: var(--accent); }
.asset-tile-pic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 14px; margin-bottom: 4px;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.asset-tile-code { font-size: 0.85rem; letter-spacing: 0.02em; }
.asset-tile-sub { font-size: 0.74rem; color: var(--muted); line-height: 1.25; }
.asset-tile-pic .lucide-icon { width: 34px; height: 34px; }
/* narrow places (the employee profile's side column): smaller tiles, two to a row */
.asset-tiles.compact { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.asset-tiles.compact .asset-tile { padding: 10px 4px 8px; gap: 2px; }
.asset-tiles.compact .asset-tile-pic { width: 44px; height: 44px; border-radius: 11px; }
.asset-tiles.compact .asset-tile-pic .lucide-icon { width: 26px; height: 26px; }
.asset-tiles.compact .asset-tile-code { font-size: 0.72rem; word-break: break-word; }
.asset-tiles.compact .asset-tile-sub { display: none; }