:root {
  --teal-50: #E1F5EE;
  --teal-100: #9FE1CB;
  --teal-200: #5DCAA5;
  --teal-400: #1D9E75;
  --teal-600: #0F6E56;
  --teal-800: #085041;
  --teal-900: #0A2E29;
  --gold: #C99A3D;
  --gold-light: #F5E8CC;
  --surface-0: #F4F6F5;
  --surface-1: #FFFFFF;
  --surface-2: #FFFFFF;
  --border: #E2E8E5;
  --border-strong: #CFC9BA;
  --text-primary: #16231F;
  --text-secondary: #5C6B65;
  --text-muted: #94A29C;
  --danger: #C0392B;
  --danger-bg: #FBECEA;
  --warning: #B8860B;
  --warning-bg: #FBF3DD;
  --success: #0F6E56;
  --success-bg: #E1F5EE;
  --radius: 12px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --shadow-sm: 0 1px 2px rgba(20, 35, 30, 0.06), 0 1px 1px rgba(20, 35, 30, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 35, 30, 0.08), 0 2px 4px rgba(20, 35, 30, 0.05);
  --shadow-lg: 0 12px 32px rgba(20, 35, 30, 0.14), 0 4px 10px rgba(20, 35, 30, 0.07);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); background: var(--surface-0); color: var(--text-primary); font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal-600); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-shell { display: flex; height: 100vh; overflow: hidden; }

/* Sidebar */
.sidebar { width: 232px; background: var(--teal-900); color: #EAF6F1; padding: 20px 0; flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.sidebar-brand { padding: 16px 20px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 12px; }
.sidebar-brand-inner { background: #fff; border-radius: 12px; padding: 10px 12px; }
.sidebar-brand img { width: 100%; max-width: 210px; height: auto; display: block; margin: 0 auto; }
.nav-section {
  padding: 10px 20px 6px; font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #FFD37A; margin-top: 10px; cursor: pointer; font-family: var(--font-display);
  display: flex; align-items: center; gap: 6px; list-style: none;
}
.nav-section::-webkit-details-marker { display: none; }
.nav-section::before { content: '▶'; font-size: 8px; transition: transform 0.15s ease; }
details[open] > .nav-section::before { transform: rotate(90deg); }

.sidebar-search-input {
  width: 100%; padding: 10px 16px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, var(--teal-400), var(--teal-600));
  color: #fff; font-size: 13px; font-weight: 500;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.15);
  transition: box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
}
.sidebar-search-input::placeholder { color: rgba(255,255,255,0.85); }
.sidebar-search-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(93, 202, 165, 0.4), 0 2px 8px rgba(0,0,0,0.2); transform: translateY(-1px); }
.nav-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: #D7ECE4; font-size: 13.5px;
  touch-action: manipulation; -webkit-tap-highlight-color: rgba(255,255,255,0.15);
  position: relative; margin: 0 8px; border-radius: 8px; width: calc(100% - 16px);
  transition: color 0.18s var(--ease);
  overflow: hidden;
}
/* A soft glow that follows the mouse cursor, faded in slowly on hover —
   position is set via --mx/--my custom properties updated on mousemove
   (see the script in footer.ejs). Pure CSS fallback (no JS/no hover
   support, e.g. touch devices) still gets a plain, centered highlight. */
.nav-link::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.16), transparent 70%);
  opacity: 0; transition: opacity 0.5s ease;
}
.nav-link:hover::before { opacity: 1; }
.nav-link .nav-icon { flex-shrink: 0; opacity: 0.7; transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); position: relative; }
.nav-link:hover .nav-icon { opacity: 1; transform: scale(1.08); }
.nav-link.active .nav-icon { opacity: 1; }
.nav-link > * { position: relative; }
.nav-link.active { background: var(--teal-600); color: #fff; font-weight: 500; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.sidebar-footer { margin-top: auto; padding: 16px 20px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.sidebar-footer form { margin: 0; }
.sidebar-footer button { background: none; border: none; color: var(--teal-100); font-size: 13px; cursor: pointer; padding: 0; }

/* Main content */
.main { flex: 1; padding: 28px 36px; max-width: 1200px; overflow-y: auto; min-height: 0; }
.main.wide { max-width: 1560px; }

.dashboard-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; }
.dashboard-rail { display: flex; flex-direction: column; gap: 16px; }
.dashboard-rail .card { margin-bottom: 0; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.page-header h1 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.page-header p.subtitle { color: var(--text-secondary); margin: 4px 0 0; font-size: 13px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: #fff; color: var(--text-primary); font-size: 13.5px;
  font-weight: 500; cursor: pointer; transition: transform 0.12s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.btn:hover { background: var(--surface-0); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.btn-primary:hover { background: var(--teal-800); box-shadow: 0 4px 14px rgba(15, 110, 86, 0.35); }
.btn-danger { color: var(--danger); border-color: var(--danger); background: #fff; }
.btn-sm { padding: 5px 12px; font-size: 12.5px; }

/* Cards */
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s var(--ease); }

/* Collapsible cards — used on pages like Case detail where many sections
   would otherwise be shown at once. Native <details>/<summary> needs no JS. */
details.card > summary { list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: '▶'; display: inline-block; font-size: 10px; margin-right: 8px; transition: transform 0.15s ease; color: var(--text-secondary); }
details.card[open] > summary::before { transform: rotate(90deg); }
details.card > summary:hover { opacity: 0.75; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px;
  box-shadow: var(--shadow-sm); transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
  position: relative; overflow: hidden;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card .stat-icon {
  position: absolute; top: 14px; right: 14px; opacity: 0.35; color: var(--teal-600);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.stat-card:hover .stat-icon { opacity: 0.55; transform: scale(1.1) rotate(-4deg); }
.stat-card.stat-card-gradient .stat-icon { color: #fff; opacity: 0.5; }
.stat-card.stat-card-gradient:hover .stat-icon { opacity: 0.75; }
.stat-card .label { font-size: 12px; color: var(--text-secondary); margin: 0 0 6px; font-weight: 500; padding-right: 24px; }
.stat-card .value { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin: 0; color: var(--teal-800); }

/* Gradient stat cards — used for the first couple of highlighted dashboard
   stats when "Use gradient cards" is enabled in Settings > Appearance. */
body.gradient-cards .stat-card.stat-card-gradient {
  background: linear-gradient(135deg, var(--teal-400), var(--teal-800));
  border: none; color: #fff;
}
body.gradient-cards .stat-card.stat-card-gradient .label { color: rgba(255,255,255,0.85); }
body.gradient-cards .stat-card.stat-card-gradient .value { color: #fff; }

/* Vivid, distinct accent colors for dashboard highlight cards — each one a
   different saturated gradient so a row of stat cards reads at a glance,
   rather than every "important" number looking the same shade of teal. */
body.gradient-cards .stat-card.accent-1 { background: linear-gradient(135deg, #FF7A6E, #E8493C); }
body.gradient-cards .stat-card.accent-2 { background: linear-gradient(135deg, #2FBF8F, #0E8F68); }
body.gradient-cards .stat-card.accent-3 { background: linear-gradient(135deg, #FFB648, #F08A1F); }
body.gradient-cards .stat-card.accent-4 { background: linear-gradient(135deg, #A78BFA, #7C4DE0); }
body.gradient-cards .stat-card.accent-5 { background: linear-gradient(135deg, #4FC3E8, #1C8CC7); }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); padding: 10px 12px; border-bottom: 1px solid var(--border); }
td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; transition: background 0.15s var(--ease); }
tr:hover td { background: var(--surface-0); }
.table-wrap { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

/* Badges */
.badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 500; }
.badge-teal { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-gray { background: #EEF1EF; color: var(--text-secondary); }

/* Forms */
label { display: block; font-size: 13px; font-weight: 500; margin: 14px 0 5px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local],
input[type=number], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  font-size: 13.5px; font-family: var(--font); background: #fff; color: var(--text-primary);
}
textarea { min-height: 90px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; }
.checkbox-group label { display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; font-size: 13px; }
.checkbox-group input { width: auto; }
.form-actions { margin-top: 24px; display: flex; gap: 10px; }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--teal-900); }
.login-card { background: #fff; border-radius: 16px; padding: 40px 36px; width: 480px; }
.login-card h1 { font-size: 20px; margin: 0 0 4px; color: var(--teal-800); }
.login-card p { color: var(--text-secondary); font-size: 13px; margin: 0 0 24px; }
.error-msg { background: var(--danger-bg); color: var(--danger); padding: 10px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 16px; }
.success-msg { background: var(--success-bg); color: var(--success); padding: 10px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 16px; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab { padding: 9px 16px; font-size: 13.5px; color: var(--text-secondary); border-bottom: 2px solid transparent; }
.tab.active { color: var(--teal-600); border-bottom-color: var(--teal-600); font-weight: 500; }

.filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filter-bar select, .filter-bar input { width: auto; }
.muted { color: var(--text-muted); }
.empty-state { text-align: center; padding: 50px 20px; color: var(--text-secondary); }

/* ==================== Mobile / responsive ==================== */

.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }
.mobile-menu-toggle-input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.mobile-menu-btn {
  width: 40px; height: 40px; border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  flex-shrink: 0;
}
.mobile-menu-btn span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; }

@media (max-width: 860px) {
  .mobile-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: var(--teal-900); position: sticky; top: 0; z-index: 40;
  }
  .mobile-topbar-logo { width: 32px; height: 32px; }

  .app-shell { display: block; height: auto; overflow: visible; }
  .sidebar { overflow-y: auto; } /* mobile sidebar is a fixed-position overlay handled separately below — this just avoids inheriting the desktop min-height:0 flex-scroll trick */
  .main { overflow-y: visible; height: auto; min-height: 0; } /* let the page scroll normally on mobile instead of an internal scroll pane */
  .main.wide { max-width: 100%; }
  .dashboard-layout { display: block; }
  .dashboard-rail { margin-top: 20px; }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    transform: translateX(-100%); transition: transform 0.2s ease;
    width: 260px; max-width: 82vw; box-shadow: 4px 0 24px rgba(0,0,0,0.25);
    isolation: isolate; pointer-events: auto; -webkit-overflow-scrolling: touch;
  }
  .sidebar.open, .mobile-menu-toggle-input:checked ~ .app-shell .sidebar { transform: translateX(0); }

  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    z-index: 45; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  }
  .sidebar-backdrop.open, .mobile-menu-toggle-input:checked ~ .sidebar-backdrop { opacity: 1; }
  /* Deliberately NOT setting pointer-events:auto here even when open — the
     backdrop is purely a visual dimming effect now, never interactive.
     "Tap outside to close" is a nice-to-have; it is not worth the risk of
     this element ever intercepting a touch meant for the sidebar itself,
     which real devices have shown can happen even when z-index looks
     correct on paper. Closing via the hamburger button (or navigating to
     a new page, which always starts unchecked) still works fully. */

  .main { padding: 18px 16px 40px; max-width: 100%; }

  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header > div:last-child, .page-header > form { width: 100%; }
  .page-header > div:last-child { flex-wrap: wrap; }
  .page-header > div:last-child form { flex-wrap: wrap; }
  .page-header > div:last-child .btn, .page-header > div:last-child select,
  .page-header > div:last-child button { flex: 1 1 auto; min-width: fit-content; }

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

  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 560px; }

  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); }

  .login-card { width: 92vw; max-width: 480px; padding: 32px 24px; }

  /* Two-column layouts used on dashboard/reports/case detail collapse to one column */
  div[style*="grid-template-columns:1.3fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .main { padding: 14px 12px 32px; }
  .page-header h1 { font-size: 17px; }
  .stat-card .value { font-size: 20px; }
  .card { padding: 14px 16px; }
  /* Portal pages use inline max-width on their wrapper div — this override
     keeps them from ever exceeding the viewport on very small phones. */
  div[style*="max-width:720px"], div[style*="max-width:560px"],
  div[style*="max-width:480px"], div[style*="max-width:520px"] { max-width: 100% !important; padding-left: 16px; padding-right: 16px; }
}

/* ==================== Print ==================== */
@media print {
  .sidebar, .mobile-topbar, .sidebar-backdrop, .btn, form button, .page-header form,
  .no-print { display: none !important; }
  .app-shell { display: block !important; }
  .main { padding: 0 !important; max-width: 100% !important; }
  body { background: #fff !important; }
  .card, .table-wrap, .stat-card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* ==================== Accessibility ==================== */
/* Font size scaling uses CSS zoom rather than overriding font-size — most
   of this app's text is set with fixed pixel values in inline styles
   throughout the templates (not rem units), so a body-level font-size
   change wouldn't cascade to them. zoom scales the whole rendered layout
   (text, spacing, buttons) proportionally regardless of how each element's
   size was originally declared. Applied to .main only, NOT .app-shell or
   the sidebar — zoom creates a new containing block for any position:fixed
   descendants in some Chromium versions, which broke the mobile sidebar's
   fixed-position/full-height scrolling behavior when it was applied higher
   up the tree. Keeping the sidebar outside the zoomed element avoids that.
   (zoom isn't in the CSS spec but is supported in Chrome, Edge, and Safari,
   which covers the browsers this app is actually used in.) */
body.font-small .main { zoom: 0.9; }
body.font-medium .main { zoom: 1; }
body.font-large .main { zoom: 1.15; }
body.font-xlarge .main { zoom: 1.3; }

body.high-contrast {
  --border: #000; --border-strong: #000;
  --text-secondary: #1a1a1a; --text-muted: #333;
}
body.high-contrast .card, body.high-contrast .stat-card, body.high-contrast .table-wrap {
  border: 2px solid #000 !important;
}
body.high-contrast a { text-decoration: underline; }
body.high-contrast .btn { border-width: 2px; font-weight: 600; }
body.high-contrast .sidebar { background: #000; }
body.high-contrast input, body.high-contrast select, body.high-contrast textarea {
  border: 2px solid #000 !important;
}

/* ==================== Team carousel ==================== */
.team-carousel {
  display: flex; gap: 20px; overflow-x: auto; padding: 8px 4px 20px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.team-card {
  flex: 0 0 240px; scroll-snap-align: start; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.1); }
.team-card-photo {
  width: 100%; height: 200px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.team-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card-initials { font-size: 56px; font-weight: 700; color: rgba(255,255,255,0.9); text-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.team-card-body { padding: 14px 16px 18px; }
.team-card-name { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.team-card-role-badge {
  display: inline-block; font-size: 11px; font-weight: 600; text-transform: capitalize;
  padding: 3px 10px; border-radius: 20px; margin-bottom: 10px;
}
.team-card-facts { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin: 0; white-space: pre-wrap; }
.team-card { cursor: pointer; }
.team-card:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 2px; }

/* ==================== Staff profile modal (FLIP-animated) ==================== */
.staff-modal-backdrop {
  position: fixed; inset: 0; background: rgba(10, 20, 18, 0.5); z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity 0.28s ease;
}
.staff-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.staff-modal {
  position: fixed; z-index: 201; background: var(--surface-1); overflow: hidden;
  box-shadow: var(--shadow-lg); display: none;
}
.staff-modal.open { display: block; }
.staff-modal-photo {
  width: 100%; height: 42%; display: flex; align-items: center; justify-content: center; position: relative;
}
.staff-modal-photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 5; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.35); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease, background 0.15s ease;
}
.staff-modal.expanded .staff-modal-close { opacity: 1; }
.staff-modal-close:hover { background: rgba(0,0,0,0.55); }
.staff-modal-body { padding: 22px 26px; opacity: 0; transition: opacity 0.25s ease 0.05s; overflow-y: auto; max-height: 58%; }
.staff-modal.expanded .staff-modal-body { opacity: 1; }
.staff-modal-body h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 22px; }

/* Simple centered popup for the Dashboard's "what's behind this number"
   stat card detail — reuses the staff-modal's look but with fixed
   positioning instead of the FLIP-from-card-position animation, since this
   one isn't tied to a specific on-screen card. */
.stat-detail-modal {
  top: 50% !important; left: 50% !important; transform: translate(-50%, -50%);
  width: min(480px, 90vw) !important; height: min(70vh, 560px) !important;
  border-radius: 16px !important; padding: 24px 26px;
}
.stat-detail-modal .staff-modal-body { padding: 0; }
.stat-card-clickable { cursor: pointer; }
.stat-card-clickable:focus-visible { outline: 3px solid rgba(255,255,255,0.7); outline-offset: 2px; }

/* Full-size announcement image viewer */
.image-lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(10,20,18,0.9);
  display: none; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out;
}
.image-lightbox.open { display: flex; }
.image-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: var(--shadow-lg); }

.announcement-zoom-hint {
  position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.6); color: #fff;
  font-size: 11.5px; padding: 5px 10px; border-radius: 20px; pointer-events: none;
  opacity: 0; transition: opacity 0.2s ease;
}
div:hover > .announcement-zoom-hint { opacity: 1; }
@media (hover: none) {
  .announcement-zoom-hint { opacity: 1; }
}
.staff-modal-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; font-size: 13px; }
.staff-modal-facts-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.staff-modal-facts { font-size: 14px; line-height: 1.6; white-space: pre-wrap; margin: 0; font-style: italic; color: var(--text-primary); }

@media (max-width: 640px) {
  .staff-modal-meta { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .team-card { flex: 0 0 200px; }
  .team-card-photo { height: 170px; }
}

/* ==================== Knowledge Base category browsing ==================== */
.kb-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kb-category-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; color: var(--text-primary);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}
.kb-category-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.kb-category-card.active { border-color: var(--teal-600); background: var(--teal-50); }
.kb-category-card .nav-icon { color: var(--teal-600); }
.kb-category-name { font-weight: 600; font-size: 13.5px; }
.kb-category-count { font-size: 11.5px; color: var(--text-muted); }

/* ==================== KPI Dashboard ==================== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; }
.kpi-widget-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--shadow-sm); transition: box-shadow 0.18s var(--ease);
}
.kpi-widget-card:hover { box-shadow: var(--shadow-md); }
.kpi-widget-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.kpi-widget-title { font-size: 13.5px; font-weight: 600; }
.kpi-widget-controls { display: flex; align-items: center; gap: 4px; }
.kpi-widget-controls select { font-size: 11.5px; padding: 4px 6px; width: auto; border-radius: 6px; }
.kpi-icon-btn {
  border: 1px solid var(--border); background: var(--surface-0); border-radius: 6px; width: 26px; height: 26px;
  cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.kpi-icon-btn:hover { background: var(--teal-50); }
.kpi-widget-body { position: relative; height: 240px; }
.kpi-widget-body canvas { max-height: 240px; }
.kpi-big-number {
  height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 42px; font-weight: 700; color: var(--teal-700);
}
.kpi-metric-option {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 6px; cursor: pointer; font-size: 13px; font-weight: 400;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.kpi-metric-option:hover { border-color: var(--teal-400); background: var(--teal-50); }