/* ════════════════════════════════════════════════════════════
   SOFTWARE ENGINEERING PORTAL  ·  styles.css
   BYUI brand · CSS custom properties · light + dark theme
   ════════════════════════════════════════════════════════════ */

/* ─── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

img, svg {
  display: block;
}

/* ─── Design Tokens ──────────────────────────────────────────
   Light theme (default)
   ──────────────────────────────────────────────────────────── */
:root {
  /* BYUI brand */
  --brand-primary: #006eb6;
  --brand-primary-dark: #005a94;
  --brand-black: #000000;
  --brand-white: #ffffff;
  --brand-gray: #949598;
  /* Surface */
  --bg-page: #f3f4f6;
  --bg-card: #ffffff;
  --bg-card-elevated: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-subsection: #f8f9fb;
  --bg-inset: #eef1f5;
  --bg-header: #000000;
  --bg-hero: linear-gradient(135deg, #006eb6 0%, #0089dc 60%, #00aaff 100%);
  /* Text */
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #9ca3af;
  --text-on-dark: #ffffff;
  /* Borders */
  --border-color: #e5e7eb;
  --border-default: rgba(128, 128, 128, 0.15);
  --border-accent: rgba(128, 128, 128, 0.25);
  --border-radius: 10px;
  --border-radius-sm: 6px;
  --border-radius-lg: 16px;
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  /* Sidebar */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 60px;
  /* Header */
  --header-height: 58px;
  /* Badge (solid pill) */
  --badge-solid-bg: #dc2626;
  --badge-solid-text: #ffffff;
  /* Severity colors */
  --clr-critical-bg: #ef4444;
  --clr-critical-border: #fca5a5;
  --clr-critical-text: #fffbbd;
  --clr-over-capacity: #ef4444;
  --clr-warning-bg: #fffbeb;
  --clr-warning-border: #fcd34d;
  --clr-warning-text: #92400e;
  --clr-info-bg: #eff6ff;
  --clr-info-border: #93c5fd;
  --clr-info-text: #1d4ed8;
  /* Blazor error banner */
  --clr-warning-surface: #fefce8;
  /* Progress */
  --clr-progress-default: #006eb6;
  --clr-progress-warning: #f59e0b;
  --clr-progress-track: #e5e7eb;
  /* Nav active */
  --nav-active-bg: #eff6ff;
  --nav-active-text: #006eb6;
  --nav-hover-bg: #f9fafb;
  --nav-group-bg: #f0f4f8;
  --nav-group-border: #e2e8f0;
  --nav-group-header-bg: #ccdde8;
  /* Links */
  --link-color: #006eb6;
  --link-color-hover: #005a94;
  /* Transitions */
  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;
  /* Form validation */
  --clr-valid: #26b050;
  --clr-invalid: #e50000;
  --clr-error-bg: #b32121;
  /* Success */
  --clr-success-bg: #dcfce7;
  --clr-success-border: #bbf7d0;
  --clr-success-text: #15803d;
  --clr-success-icon: #16a34a;
  /* Needs Review (purple) */
  --clr-needs-review-bg: #faf5ff;
  --clr-needs-review-border: #7c3aed;
  --clr-needs-review-text: #7c3aed;
  /* Activity (pink/magenta) — celebratory accent for Team Activities and All Hands */
  --clr-activity-bg: #fce7f3;
  --clr-activity-border: #ec4899;
  --clr-activity-text: #be185d;
  /* Ignored (gray) */
  --clr-ignored-bg: #f3f4f6;
  --clr-ignored-text: #6b7280;
  --clr-ignored-border: #9ca3af;
  /* Active / green phase */
  --clr-active-bg: #f0fdf4;
  --clr-active-border: #16a34a;
  --clr-active-text: #16a34a;
  /* Header / search (always dark surface) */
  --header-divider-color: #555555;
  --search-bg: #1c1c1c;
  --search-bg-focus: #222222;
  --search-border: #333333;
  --search-placeholder: #666666;
  --search-hint-bg: #333333;
  --search-hint-color: #999999;
  --search-icon-color: #6b7280;
  /* Icon button — theme-aware. Header override sits in .app-header .icon-btn below. */
  --icon-btn-color: var(--text-secondary);
  --icon-btn-hover-bg: rgba(0, 0, 0, 0.06);
  --icon-btn-hover-color: var(--text-primary);
  /* Danger icon buttons need a solid red, not the pale "text-on-red-banner" token. */
  --icon-btn-danger-color: #dc2626;
  --icon-btn-danger-hover-bg: rgba(220, 38, 38, 0.12);
  /* Danger dropdown */
  --dropdown-danger-color: #ef4444;
  /* Notice accent stripes */
  --notice-critical-accent: #ef4444;
  --notice-warning-accent: #f59e0b;
  /* Event calendar dots */
  --event-dot-blue: #3b82f6;
  --event-dot-green: #10b981;
  --event-dot-purple: #8b5cf6;
  /* Toast */
  --toast-bg: #1f2937;
  /* Alert banner urgent (dark-red) */
  --alert-urgent-bg-from: #7f1d1d;
  --alert-urgent-bg-to: #991b1b;
  --alert-urgent-border: #fca5a5;
  --alert-urgent-color: #fef2f2;
  --alert-urgent-accent: #fca5a5;
  --alert-urgent-label-color: #7f1d1d;
  /* Login page */
  --login-gradient-from: #667eea;
  --login-gradient-to: #764ba2;
  --login-card-bg: rgba(255, 255, 255, 0.95);
  --login-header-from: #4f46e5;
  --login-header-to: #7c3aed;
  --login-accent-pink: #ec4899;
  --login-spinner-track: #e5e7eb;
  --login-spinner-accent: #4f46e5;
  /* Unauthorized page */
  --unauth-bg: #0d0d0d;
  --unauth-border: #8b0000;
  --unauth-border-dark: #3d0000;
  --unauth-glow: rgba(180, 0, 0, 0.4);
  --unauth-glow-soft: rgba(180, 0, 0, 0.15);
  --unauth-accent: #cc2222;
  --unauth-text: #e0e0e0;
  --unauth-text-muted: #888888;
  --unauth-btn-bg: #1a0505;
  --unauth-btn-bg-hover: #2a0909;
  --unauth-btn-border-hover: #b30000;
  --unauth-btn-text: #f2dada;
  /* Reconnect modal */
  --reconnect-btn-bg: #6b9ed2;
  --reconnect-btn-bg-hover: #3b6ea2;
  --reconnect-ring-color: #0087ff;
  /* Scrum/dark-theme specific overrides */
  --scrum-textarea-border-dark: #374151;
  --scrum-btn-hover-border: #d1d5db;
  /* Ambient glow */
  --glow-primary: rgba(0, 110, 182, 0.06);
  --glow-accent: rgba(0, 170, 255, 0.04);
  --glow-card-shadow: none;
  --glow-card-bg: var(--bg-card);
  --glow-card-border: var(--border-color);
}

/* ─── Dark theme ─────────────────────────────────────────────── */
.dark-theme {
  --bg-page: #0f1117;
  --bg-card: #101319;
  --bg-card-elevated: #343841;
  --bg-sidebar: #13151f;
  --bg-subsection: #202632;
  --bg-inset: #181c25;
  --bg-header: #0a0a0a;
  --bg-hero: linear-gradient(135deg, #004f83 0%, #005da0 60%, #007acc 100%);
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --text-tertiary: #6b7280;
  --border-color: #2d3143;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.2);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.3);
  --badge-solid-bg: #ef4444;
  --badge-solid-text: #ffffff;
  --clr-critical-bg: #ef4444;
  --clr-critical-border: #7f1d1d;
  --clr-critical-text: #ffe9e9;
  --clr-over-capacity: #f87171;
  --clr-warning-bg: #2d2108;
  --clr-warning-border: #78350f;
  --clr-warning-text: #fcd34d;
  --clr-info-bg: #172033;
  --clr-info-border: #1e3a5f;
  --clr-info-text: #93c5fd;
  --nav-active-bg: #172033;
  --nav-active-text: #60b4ff;
  --nav-hover-bg: #1e2130;
  --nav-group-bg: #1a1e2d;
  --nav-group-border: #2a2f45;
  --nav-group-header-bg: #00558f;
  /* Links */
  --link-color: #60b4ff;
  --link-color-hover: #7ec8ff;
  --clr-progress-track: #2d3143;
  /* Success (dark) */
  --clr-success-bg: rgba(21,128,61,.2);
  --clr-success-border: #16a34a;
  --clr-success-text: #4ade80;
  --clr-success-icon: #16a34a;
  --clr-warning-surface: #2d2108;
  /* Needs Review (purple, dark) */
  --clr-needs-review-bg: #2d1f3d;
  --clr-needs-review-border: #a78bfa;
  --clr-needs-review-text: #c4b5fd;
  /* Activity (pink/magenta, dark) — Team Activities and All Hands */
  --clr-activity-bg: #3b1424;
  --clr-activity-border: #f472b6;
  --clr-activity-text: #f9a8d4;
  /* Ignored (gray, dark) */
  --clr-ignored-bg: #1f2937;
  --clr-ignored-text: #9ca3af;
  --clr-ignored-border: #6b7280;
  /* Active / green phase (dark) */
  --clr-active-bg: rgba(21,128,61,.2);
  --clr-active-border: #16a34a;
  --clr-active-text: #4ade80;
  /* Alert banner urgent (dark) */
  --alert-urgent-bg-from: #450a0a;
  --alert-urgent-bg-to: #7f1d1d;
  --alert-urgent-border: #b91c1c;
  /* Ambient glow (dark) */
  --glow-primary: rgba(0, 110, 182, 0.12);
  --glow-accent: rgba(0, 170, 255, 0.08);
  --glow-card-shadow: 0 0 20px rgba(0, 110, 182, 0.06), 0 0 40px rgba(0, 110, 182, 0.03);
  --glow-card-bg: rgba(26, 29, 39, 0.7);
  --glow-card-border: rgba(45, 49, 67, 0.7);
  /* Icon button (dark theme) */
  --icon-btn-color: #cccccc;
  --icon-btn-hover-bg: rgba(255, 255, 255, 0.08);
  --icon-btn-hover-color: var(--brand-white);
  --icon-btn-danger-color: #f87171;
  --icon-btn-danger-hover-bg: rgba(248, 113, 113, 0.18);
}

/* ════════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════════ */

body {
  background: var(--bg-page);
  color: var(--text-primary);
}

/* Fixed Header */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--bg-header);
  color: var(--text-on-dark);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 1rem;
  z-index: 9995;
  box-shadow: 0 1px 4px rgba(0,0,0,.4), 0 4px 15px rgba(160, 120, 220, 0.15);
  outline: none;
}

/* Shell: sidebar + main side-by-side below header */
.layout-shell {
  display: flex;
  min-height: 100vh;
  padding-top: var(--header-height);
}

/* Extra padding when the impersonation banner is visible */
.layout-shell--impersonating {
  padding-top: calc(var(--header-height) + 38px);
}

.layout-shell--impersonating .sidebar-wrap {
  top: calc(var(--header-height) + 38px);
  height: calc(100vh - var(--header-height) - 38px);
}


/* ════════════════════════════════════════════════════════════
   BLAZOR DEFAULTS
   ════════════════════════════════════════════════════════════ */

.valid.modified:not([type=checkbox]) {
  border-color: var(--clr-valid) !important;
}

.invalid {
  border-color: var(--clr-invalid) !important;
  box-shadow: 0 0 0 3px rgba(229, 0, 0, 0.1) !important;
}

.validation-message {
  color: var(--clr-invalid);
  font-size: 0.75rem;
  margin-top: 0.15rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--clr-error-bg);
  padding: 1rem 1rem 1rem 3.7rem;
  color: var(--brand-white);
}

  .blazor-error-boundary::after {
    content: "An error has occurred."
  }

.darker-border-checkbox.form-check-input {
  border-color: var(--brand-gray);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ════════════════════════════════════════════════════════════
   PAGE LAYOUT UTILITIES
   ════════════════════════════════════════════════════════════ */

/* Wrap any page content that needs a contained max-width */
.page-wrap {
  padding: 1rem;
  /* max-width: 900px; */
}

/*
  Sticky page header — sits just below the fixed app header.
  Use on any page or section that has a title + action button row
  that should stay visible while scrolling.

  Requires the parent to have padding: 1.5rem for the negative
  margin trick to stretch the bar edge-to-edge.
*/
.page-header {
  position: sticky;
  top: var(--header-height);
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  margin: -1.5rem -1.5rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(to right, transparent, var(--bg-page) 2rem, var(--bg-page) calc(100% - 2rem), transparent);
  border-image: linear-gradient(to right, transparent, var(--border-color) 2rem, var(--border-color) calc(100% - 2rem), transparent) 1;
}

.page-header__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.page-header__count {
  font-weight: 400;
  color: var(--text-secondary);
  font-size: 1rem;
}

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

/* Highlights a nav button representing the page the user is currently on.
   Standard accessible signal — screen readers announce "current page" — and
   styled to give a clear visual cue without needing a separate class. */
.btn[aria-current="page"] {
  background: var(--brand-primary);
  color: var(--brand-white);
  border-color: var(--brand-primary);
}

.btn[aria-current="page"]:hover {
  background: var(--brand-primary-dark);
}

/* ════════════════════════════════════════════════════════════
   FORMS
   ════════════════════════════════════════════════════════════ */

/* Link utility — use on any button or element that should look like a link */
.text-link {
  color: var(--link-color);
  background: none;
  border: none;
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.text-link:hover {
  color: var(--link-color-hover);
  text-decoration: underline;
}

/* Input / select / textarea appearance */
.form-control {
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--bg-page);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}

.form-control:hover {
  border-color: var(--brand-primary);
}

.form-control:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0, 110, 182, 0.15);
}

/* Disabled / read-only inputs need to read as "you can see this but can't
   change it" at a glance — muted background, faded text, dashed-ish border,
   and a no-edit cursor. Hover/focus styles are suppressed so the field
   doesn't tease an interaction it won't respond to. */
.form-control:disabled,
.form-control[readonly] {
  background: color-mix(in srgb, var(--bg-inset, var(--bg-page)) 60%, transparent);
  color: var(--text-tertiary);
  border-color: var(--border-color);
  border-style: dashed;
  cursor: not-allowed;
  opacity: 0.85;
}

.form-control:disabled:hover,
.form-control[readonly]:hover {
  border-color: var(--border-color);
}

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  padding-right: 2rem;
  cursor: pointer;
}

/* Number input with custom spin buttons
   Wrap an <input type="number"> in .number-input to get styled
   up/down arrows overlaid on the right edge of the input.
   ─────────────────────────────────────────────────────────── */
.number-input {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.number-input input {
  -moz-appearance: textfield;
  padding-right: 1.75rem;
}

.number-input input::-webkit-inner-spin-button,
.number-input input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-input__controls {
  position: absolute;
  right: 2px;
  top: 2px;
  bottom: 2px;
  display: flex;
  flex-direction: column;
}

.number-input__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 1.25rem;
  border: none;
  background: var(--bg-page);
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 0;
  font-size: 0.5rem;
  line-height: 1;
  transition: background 0.1s ease, color 0.1s ease;
}

.number-input__btn:first-child {
  border-radius: 2px 2px 0 0;
}

.number-input__btn:last-child {
  border-radius: 0 0 2px 2px;
}

.number-input__btn:hover {
  background: var(--brand-primary);
  color: var(--brand-white);
}

/* Form layout utilities */
.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

fieldset.form-field {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 0.75rem;
  margin: 0;
}

fieldset.form-field legend {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0 0.375rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.3rem;
}

.form-field label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.form-field--check {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
}

.form-field--check label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-primary);
}

.form-field--check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--brand-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.form-required {
  color: var(--clr-invalid);
  font-weight: 700;
}

.form-hint {
  font-size: 0.75rem;
  margin-top: 0.25rem;
  display: block;
}

.form-hint--error {
  color: var(--clr-invalid);
}

.form-error {
  background: color-mix(in srgb, var(--clr-invalid) 10%, var(--bg-card));
  border: 1px solid var(--clr-invalid);
  color: var(--clr-invalid);
  padding: 0.625rem 0.875rem;
  border-radius: 6px;
  margin: 1rem 0;
  font-size: 0.9rem;
}

/* File-picker pattern — replaces the native <input type="file"> chrome with
   a styled label-button + a sibling span showing the selected filename. The
   underlying <InputFile> is rendered with `hidden` so clicks bubble through
   the wrapping label to trigger the OS file picker. */
.file-picker {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.file-picker__button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.file-picker__name {
  font-size: 0.875rem;
  color: var(--text-primary);
  word-break: break-all;
}

/* Inline horizontal radio cluster — used wherever a small set of mutually-
   exclusive options sit under a form field label (e.g., the template Category
   picker on the admin page). Wraps on narrow widths instead of overflowing.
   Trailing margin gives the cluster breathing room from whatever form field
   sits below it. */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
  font-size: 0.875rem;
}

.radio-option input[type="radio"] {
  margin: 0;
}

/* Inline edit panel that expands under a list row. Used by the document
   template admin to surface rename / re-categorize / replace-file controls
   without leaving the page. Stacked form fields with a subtle inset so the
   panel reads as belonging to the row above it. */
.hb-item-edit-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 0 0 0.5rem 1.5rem;
  background: var(--bg-page);
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

/* ════════════════════════════════════════════════════════════
   COLLAPSIBLE SECTION
   Reusable disclosure pattern: header with count badge + body.
   Use .collapsible-section.is-collapsed to hide the body.
   ════════════════════════════════════════════════════════════ */

.collapsible-section {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-card);
  overflow: visible;
  position: relative;
}

.collapsible-section:has(.lp-dropdown__backdrop),
.collapsible-section:has(.cw-dropdown__backdrop),
.collapsible-section:has(.pri-dropdown__backdrop) {
  z-index: 9989;
}

.collapsible-section + .collapsible-section {
  margin-top: 0.75rem;
}

.collapsible-section__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: var(--text-primary);
  text-align: left;
}

.collapsible-section__header:hover {
  background: var(--bg-page);
}

.collapsible-section__title {
  font-size: 0.875rem;
  font-weight: 600;
}

.collapsible-section__count {
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.375rem;
  text-align: center;
  white-space: nowrap;
  background: var(--bg-page);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.collapsible-section__count--emphasis {
  background: var(--badge-solid-bg);
  color: var(--badge-solid-text);
  border-color: transparent;
}

.collapsible-section__capacity {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-tertiary);
}

.collapsible-section__chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
  color: var(--text-tertiary);
}

.collapsible-section.is-collapsed .collapsible-section__chevron {
  transform: rotate(-90deg);
}

.collapsible-section__body {
  border-top: 1px solid var(--border-color);
  padding: 0.5rem;
  background: color-mix(in srgb, var(--bg-card) 40%, transparent);
}

.collapsible-section.is-collapsed .collapsible-section__body {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   LOADING SPINNER
   ════════════════════════════════════════════════════════════ */
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}

#app-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-page);
}

/* Reusable in-page busy overlay. Add to any page during a long-running
   operation; reuses the same spinner used by #app-loading so the visual
   language is consistent. Translucent backdrop blocks pointer events on
   the underlying UI so the user can't double-click during the wait.
   z-index matches #app-loading (9999) so the overlay sits above ALL
   layout chrome — sticky app header (9995), sticky page header (9990),
   and the sidebar (9989). At a lower z-index those would poke through. */
.busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  color: var(--brand-white);
  font-weight: 500;
}

.busy-overlay .loading-spinner__svg {
  width: 3rem;
  height: 3rem;
}

.busy-overlay .loading-spinner__track {
  stroke: rgba(255, 255, 255, 0.2);
}

.busy-overlay .loading-spinner__arc {
  stroke: var(--brand-white);
}

/* Dismiss button — top-right corner of the overlay. Mainly useful for the
   dev/test toggle so the overlay can be cleared without reaching the icon
   that's now covered. Real workflow actions clear the overlay automatically
   when they complete; the dismiss is a safety valve for either case. */
.busy-overlay__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--brand-white);
  transition: background var(--transition);
}

.busy-overlay__close:hover {
  background: rgba(255, 255, 255, 0.25);
}

#app-loading .loading-spinner {
  padding: 0;
}

#app-loading .loading-spinner__svg {
  width: 3rem;
  height: 3rem;
}

.loading-spinner__svg {
  width: 2rem;
  height: 2rem;
  animation: spin 0.9s linear infinite;
}

.loading-spinner__track {
  stroke: var(--border-color);
}

.loading-spinner__arc {
  stroke: var(--brand-primary);
  stroke-linecap: round;
  animation: dash 1.4s ease-in-out infinite;
}

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

@keyframes dash {
  0%   { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD CARD (shared chrome — page-specific content stays scoped)
   ════════════════════════════════════════════════════════════ */

.dash-card {
  position: relative;
  background: var(--bg-card-elevated);
  border: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04));
  display: flex;
  flex-direction: column;
}

/* Action strip — only one of these classes is added at a time. The default card
   has no strip ("all good" / nothing to do). Discipline matters: if every card
   lights up the signal disappears. */
.dash-card--action::before,
.dash-card--warning::before,
.dash-card--alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.dash-card--action::before {
  background: var(--clr-info-text);
}

.dash-card--warning::before {
  background: var(--clr-warning-text);
}

.dash-card--alert::before {
  background: var(--clr-critical-text);
}

.dash-card__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dash-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.dash-card__footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

.dash-card__footer a,
.dash-card__footer button.btn-secondary {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.dash-card__footer a:hover,
.dash-card__footer button.btn-secondary:hover {
  background: var(--bg-page);
  border-color: var(--border-default, rgba(128, 128, 128, 0.15));
  color: var(--text-primary);
}

.dash-card__empty {
  color: var(--text-tertiary);
  font-size: 0.875rem;
  margin: 0;
}

.dash-card__empty a {
  color: var(--brand-primary);
  text-decoration: none;
}

.dash-card__empty a:hover {
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════
   DATA TABLE
   ════════════════════════════════════════════════════════════ */

.data-table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.data-table th {
  text-align: left;
  padding: 0.35rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-color);
  background: var(--bg-page);
  white-space: nowrap;
}

.data-table td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

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

.data-table tbody tr:hover td {
  background: var(--nav-hover-bg);
}

.data-table__actions {
  width: 44px;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}

.confirm-delete {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.list-empty {
  color: var(--text-tertiary);
  font-size: 0.875rem;
  padding: 1rem 0;
}

/* ── Sortable column headers ────────────────────────────────── */

.sort-header {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
  white-space: nowrap;
}

.sort-header:hover {
  color: var(--text-primary);
}

.sort-header__icon {
  transition: transform 0.15s, opacity 0.15s;
  flex-shrink: 0;
}

.sort-header__icon.sort-none {
  opacity: 0.25;
}

.sort-header__icon.sort-asc {
  transform: rotate(180deg);
  opacity: 1;
}

.sort-header__icon.sort-desc {
  transform: rotate(0deg);
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════
   FILTER PILLS
   Reusable toggle-pill bar for filtering lists by category.
   Usage:  .filter-pills  >  .filter-pill  (.is-active)
   ════════════════════════════════════════════════════════════ */

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1rem;
}

.filter-pill {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.filter-pill:hover {
  border-color: var(--brand-primary);
  color: var(--text-primary);
}

.filter-pill.is-active {
  background: var(--pill-bg, var(--brand-primary));
  border-color: var(--pill-bg, var(--brand-primary));
  color: var(--pill-text, var(--brand-white));
}

/* Segmented toggle — two-option view switcher with a sliding active indicator.
   Use for binary view modes (Calendar/Agenda, Table/Calendar). The number of
   options is fixed at two; the indicator slides via translateX. */
.seg-toggle {
  position: relative;
  display: inline-flex;
  background: var(--bg-inset);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0.15rem;
}

.seg-toggle__indicator {
  position: absolute;
  top: 0.15rem;
  bottom: 0.15rem;
  left: 0.15rem;
  width: calc(50% - 0.15rem);
  background: var(--brand-primary);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.seg-toggle__indicator--right {
  transform: translateX(100%);
}

/* 3-option variant — scales the sliding indicator to one-third width and
   provides position modifiers for the three slots. Used by the New Handbook
   Item dialog's Kind picker (Word / File / Link). The options flex to equal
   thirds so the indicator's translate(100% / 200%) lands on each button's
   center column regardless of label length. */
.seg-toggle--3 {
  display: flex;
  width: 100%;
}

.seg-toggle--3 .seg-toggle__indicator {
  width: calc(33.333% - 0.1rem);
}

.seg-toggle--3 .seg-toggle__option {
  flex: 1 1 0;
  justify-content: center;
}

.seg-toggle__indicator--pos-1 { transform: translateX(100%); }
.seg-toggle__indicator--pos-2 { transform: translateX(200%); }

.seg-toggle__option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.85rem;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s;
  white-space: nowrap;
}

.seg-toggle__option:hover {
  color: var(--text-primary);
}

.seg-toggle__option.is-active,
.seg-toggle__option.is-active:hover {
  color: var(--brand-white);
  font-weight: 600;
}

.seg-toggle__option svg {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════ */

/* Environment Testing Banner */
#se-portal-testing-overlay {
  cursor: default;
  display: grid;
  justify-content: center;
  align-items: center;
  color: black;
  height: 20px;
  width: 40vw;
  font-size: 0.8rem;
  font-weight: 600;
  position: fixed;
  top: 0;
  background: darkorange;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  z-index: 30000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


.header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  min-width: 0;
}

.hamburger-btn {
  display: none; /* visible only on mobile */
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  border-radius: var(--border-radius-sm);
  color: var(--text-on-dark);
  flex-shrink: 0;
}

  .hamburger-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
    pointer-events: none;
  }

.header-logo-link {
  display: flex;
  align-items: center;
  border-radius: var(--border-radius-sm);
  transition: opacity var(--transition);
}

  .header-logo-link:hover {
    opacity: 0.85;
  }

.header-logo-bg {
  background: var(--brand-black);
  border-radius: 4px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
}

.byui-logo {
  color: var(--brand-white);
}

.header-title-block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
}

.header-app-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-on-dark);
  letter-spacing: 0.01em;
}

.header-divider {
  color: var(--header-divider-color);
  font-size: 0.85rem;
}

.header-dept {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Center search */
.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 480px;
}

/* The bar's visibility is driven by SearchBarController + MainLayout: when
   no searchable page is active, the wrapper carries `--inactive` and is
   hidden. Both the class and the input's placeholder are part of MainLayout's
   markup, so Blazor's render diff manages them — no JS-vs-Blazor races. */
.search-wrapper--inactive {
  display: none;
}

.search-clear {
  display: none;
}

/* Clear button visibility tracks whether the input has a value. Set via
   a body class because the button itself can be re-rendered by Blazor;
   body lives outside Blazor's render tree, so JS owns this state. */
body.has-search-value .search-clear {
  display: flex;
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--search-icon-color);
  pointer-events: none;
}

.search-input {
  width: 100%;
  height: 36px;
  padding: 0 2.5rem 0 2.2rem;
  background: var(--search-bg);
  border: 1px solid var(--search-border);
  border-radius: 20px;
  color: var(--text-on-dark);
  font-size: 0.85rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

  .search-input::placeholder {
    color: var(--search-placeholder);
  }

  .search-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(0,110,182,.25);
    background: var(--search-bg-focus);
  }

  .search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
  }

.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--search-icon-color);
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 50%;
  transition: color 0.15s ease, background 0.15s ease;
}

.search-clear:hover {
  color: var(--text-on-dark);
  background: rgba(255, 255, 255, 0.1);
}

.search-hint {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.68rem;
  background: var(--search-hint-bg);
  color: var(--search-hint-color);
  padding: 1px 5px;
  border-radius: 4px;
  pointer-events: none;
}

/* Right header cluster */
.header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 20px;
  font-size: 0.83rem;
  font-weight: 600;
  padding: 0 14px;
  height: 34px;
  transition: background var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--brand-primary);
  color: var(--brand-white);
}

  .btn-primary:hover {
    background: var(--brand-primary-dark);
    box-shadow: 0 2px 8px rgba(0,110,182,.35);
  }

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1.5px solid var(--border-color);
}

  .btn-secondary:hover {
    background: var(--nav-hover-bg);
    border-color: var(--text-secondary);
  }

.icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-btn-color);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}

  .icon-btn:hover {
    background: var(--icon-btn-hover-bg);
    color: var(--icon-btn-hover-color);
  }

/* Header always has a dark background, so icon buttons in it stay light regardless of theme. */
.app-header .icon-btn {
    color: #cccccc;
}

    .app-header .icon-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--brand-white);
    }

.icon-btn--sm {
  width: 28px;
  height: 28px;
}

.icon-btn--danger {
  color: var(--icon-btn-danger-color);
}

  .icon-btn--danger:hover {
    background: var(--icon-btn-danger-hover-bg);
    color: var(--icon-btn-danger-color);
  }

.badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--badge-solid-bg);
  color: var(--badge-solid-text);
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1.5px solid var(--bg-header);
}

/* User avatar / dropdown */
.user-menu-wrapper {
  position: relative;
}

.user-avatar-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 20px;
  padding: 3px 10px 3px 3px;
  color: var(--text-on-dark);
  transition: background var(--transition);
}

  .user-avatar-btn:hover {
    background: rgba(255,255,255,.08);
  }

.avatar-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--brand-white);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

.avatar-circle--lg {
  width: 40px;
  height: 40px;
  font-size: 0.9rem;
}

.avatar-name {
  font-size: 0.82rem;
  font-weight: 500;
}

.chevron {
  transition: transform var(--transition);
}

.user-avatar-btn[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 2000;
}

  .user-dropdown.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

.dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.dropdown-user-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.dropdown-user-email {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 1px;
}

.dropdown-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 0;
}

.dropdown-menu-list {
  padding: 4px 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 1rem;
  font-size: 0.84rem;
  color: var(--text-primary);
  transition: background var(--transition);
}

  .dropdown-item:hover {
    background: var(--nav-hover-bg);
  }

.dropdown-item--danger {
  color: var(--dropdown-danger-color);
}

  .dropdown-item--danger:hover {
    background: var(--clr-critical-bg);
    color: var(--clr-critical-text);
  }

.dark-theme .dropdown-item--danger:hover {
  background: var(--clr-critical-bg);
  color: var(--clr-critical-text);
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════════ */
/* Wrapper keeps sidebar + tab sticky together */
.sidebar-wrap {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  z-index: 100;
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  transition: width var(--transition-slow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

  /* Scrollbar for sidebar */
  .sidebar::-webkit-scrollbar {
    width: 4px;
  }

  .sidebar::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
  }

.sidebar-nav {
  padding: 0.5rem 0 1.5rem;
}

/* Sidebar collapse tab — floats on the right edge of the sidebar */
.sidebar-collapse-btn {
  position: sticky;
  top: 0.75rem;
  align-self: flex-start;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 40px;
  margin-left: -1px;
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-left: none;
  border-radius: 0 8px 8px 0;
  color: var(--text-tertiary);
  box-shadow: 3px 0 8px rgba(0,0,0,.08);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  z-index: 1;
}

  .sidebar-collapse-btn:hover {
    background: var(--brand-primary);
    color: var(--brand-white);
    box-shadow: 3px 0 12px rgba(0,110,182,.3);
  }

/* Nav lists */
.nav-list {
  padding: 0 0.5rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 7px 10px;
  border-radius: var(--border-radius-sm);
  font-size: 0.84rem;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  overflow: hidden;
}

  .nav-item:hover {
    background: var(--nav-hover-bg);
    color: var(--text-primary);
  }

  .nav-item.active {
    background: var(--nav-active-bg);
    color: var(--nav-active-text);
    font-weight: 600;
  }

/* Nav icon / label */
.nav-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

  .nav-icon svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

.nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--transition-slow), max-width var(--transition-slow);
}

/* Nav groups — bubble style */
.nav-group {
  margin: 0.45rem 0.5rem 0;
  background: var(--nav-group-bg);
  border: 1px solid var(--nav-group-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  padding-bottom: 0.3rem;
}

/* Hide admin-only nav groups when impersonating a non-admin */
.nav-group.is-impersonate-hidden {
  display: none;
}

.nav-group-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 8px 10px;
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  color: var(--text-secondary);
  background: var(--nav-group-header-bg);
  border-bottom: 1px solid var(--nav-group-border);
  transition: background var(--transition), color var(--transition);
}

  .nav-group-header:hover {
    background: var(--brand-primary);
    color: var(--brand-white);
  }

  .nav-group-header .nav-icon {
    font-size: 0.9rem;
  }

.group-chevron {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.nav-group-header[aria-expanded="false"] .group-chevron {
  transform: rotate(-90deg);
}

.nav-group-items {
  overflow: hidden;
  max-height: 400px;
  transition: max-height var(--transition-slow), opacity var(--transition-slow);
  opacity: 1;
}

  .nav-group-items.is-collapsed {
    max-height: 0;
    opacity: 0;
  }

/* ── Nested sub-groups (level 2 inside Admin etc.) ──────── */
.nav-group--sub {
  border-bottom: none;
}

  .nav-group--sub > .nav-group-header {
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-bottom: none;
    padding: 6px 10px 6px 18px;
  }

  .nav-group--sub > .nav-group-header:hover {
    background: var(--nav-hover-bg);
    color: var(--text-primary);
  }

  .nav-group--sub > .nav-group-items .nav-item {
    padding-left: 28px;
  }

  .sidebar.is-collapsed .nav-group--sub > .nav-group-header {
    padding: 6px 8px;
  }

  .sidebar.is-collapsed .nav-group--sub > .nav-group-items .nav-item {
    padding-left: 8px;
  }

/* ── Collapsed desktop sidebar ─────────────────────────── */
.sidebar.is-collapsed {
  width: var(--sidebar-collapsed-width);
}

  .sidebar.is-collapsed .nav-label,
  .sidebar.is-collapsed .nav-group-header .nav-label,
  .sidebar.is-collapsed .group-chevron,
  .sidebar.is-collapsed .header-dept {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
  }

  .sidebar.is-collapsed .nav-group {
    margin: 0.3rem 0.25rem 0;
    border-radius: var(--border-radius-sm);
    padding-bottom: 0.15rem;
  }

  .sidebar.is-collapsed .nav-group-header {
    justify-content: center;
    border-bottom: none;
    padding: 8px;
    gap: 0;
  }

  .sidebar.is-collapsed .group-chevron {
    margin-left: 0;
  }

  .sidebar.is-collapsed .nav-group-header .nav-icon,
  .sidebar.is-collapsed .nav-item .nav-icon {
    width: 16px;
    height: 16px;
  }

  .sidebar.is-collapsed .nav-group-items {
    padding-left: 0;
    padding-right: 0;
  }

  .sidebar.is-collapsed .nav-list:not(.nav-group-items) {
    padding: 0.3rem 0.25rem 0;
  }

  .sidebar.is-collapsed ~ .sidebar-collapse-btn svg {
    transform: rotate(180deg);
  }

  .sidebar.is-collapsed .nav-item {
    justify-content: center;
    padding: 8px;
    gap: 0;
  }

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 90;
  transition: opacity var(--transition);
}

  .sidebar-overlay.is-visible {
    display: block;
  }

/* ════════════════════════════════════════════════════════════
   MAIN CONTENT
   ════════════════════════════════════════════════════════════ */
.main-content {
  flex: 1;
  min-width: 0;
  /*padding: 0rem 1.5rem 2rem;*/
  position: relative;
}

/* ── Fullscreen toggle button ── */
.fullscreen-btn {
  position: sticky;
  top: calc(var(--header-height) + 0.5rem);
  float: right;
  z-index: 11;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}

.main-content:hover .fullscreen-btn,
.fullscreen-btn:focus-visible {
  opacity: 1;
}

.fullscreen-btn:hover {
  background: var(--border-color);
  color: var(--text-primary);
}

/* Icon toggle for fullscreen button */
.fullscreen-icon--exit { display: none; }
.fullscreen-icon--enter { display: block; }

/* ── Fullscreen state ── */
.is-fullscreen .app-header,
.is-fullscreen .sidebar-wrap,
.is-fullscreen .sidebar-overlay,
.is-fullscreen .impersonation-banner {
  display: none !important;
}

.is-fullscreen .layout-shell {
  padding-top: 0;
}

.is-fullscreen .main-content {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg-page);
  overflow-y: auto;
  padding-top: 1rem;
}

.is-fullscreen .fullscreen-btn {
  top: 0.5rem;
  opacity: 0;
}

.is-fullscreen .main-content:hover .fullscreen-btn,
.is-fullscreen .fullscreen-btn:focus-visible {
  opacity: 1;
}

.is-fullscreen .fullscreen-icon--enter { display: none; }
.is-fullscreen .fullscreen-icon--exit { display: block; }

.is-fullscreen .page-header {
  top: 0;
}

/* Breadcrumb */
.breadcrumb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--text-tertiary);
}

.breadcrumb-item a:hover {
  color: var(--brand-primary);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  margin-right: 0.3rem;
  color: var(--border-color);
}

.breadcrumb-item--active {
  color: var(--text-secondary);
  font-weight: 500;
}

.page-date {
  font-size: 0.78rem;
  color: var(--text-tertiary);
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

/* ─── Hero section ──────────────────────────────────────────── */
.hero-section {
  background: var(--bg-hero);
  border-radius: var(--border-radius-lg);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

  /* Subtle decorative circles */
  .hero-section::before,
  .hero-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    pointer-events: none;
  }

  .hero-section::before {
    width: 260px;
    height: 260px;
    top: -80px;
    right: 120px;
  }

  .hero-section::after {
    width: 180px;
    height: 180px;
    bottom: -60px;
    right: 30px;
  }

.hero-text {
  position: relative;
  z-index: 1;
}

.hero-headline {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-white);
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.hero-sub {
  font-size: 0.88rem;
  color: rgba(255,255,255,.8);
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}

.quick-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  color: var(--brand-white);
  font-size: 0.8rem;
  font-weight: 500;
  backdrop-filter: blur(4px);
  transition: background var(--transition), box-shadow var(--transition);
}

  .quick-action-btn:hover {
    background: rgba(255,255,255,.25);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
  }

.qa-icon {
  font-size: 1rem;
}

/* ─── Hero Daily variant (check-in + standup) ───────────────── */
.hero-section--daily {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  align-items: start;
  gap: 1.25rem;
  padding: 1.5rem;
}

.hero-card {
  background: rgba(255,255,255,.13);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--border-radius);
  padding: 1.1rem 1.25rem;
  position: relative;
  z-index: 1;
}

.hero-card__header {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}

.hero-card__icon {
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.hero-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--brand-white);
  margin: 0 0 0.2rem;
  letter-spacing: -0.01em;
}

.hero-card__sub {
  font-size: 0.72rem;
  color: rgba(255,255,255,.65);
  margin: 0;
}

.hero-card__prompt {
  font-size: 0.8rem;
  color: rgba(255,255,255,.8);
  margin-bottom: 0.7rem;
}

/* Check-in buttons inside hero */
.hero-card--checkin .checkin-btn {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.85);
}

  .hero-card--checkin .checkin-btn:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.45);
    color: var(--brand-white);
  }

.hero-card--checkin .checkin-btn--active {
  background: rgba(255,255,255,.92);
  border-color: var(--brand-white);
  color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}

.hero-card--checkin .checkin-confirmed {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.25);
  color: var(--brand-white);
}

/* Scrum fields inside hero */
.hero-card--scrum .badge-status--info {
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.2);
}

.hero-card--scrum .badge-status--success {
  background: rgba(134,239,172,.2);
  color: var(--clr-success-border);
  border-color: rgba(134,239,172,.35);
}

.hero-card--scrum .scrum-field {
  margin-bottom: 0.6rem;
}

.hero-card--scrum .scrum-label {
  color: rgba(255,255,255,.75);
}

.hero-card--scrum .scrum-q-num {
  background: rgba(255,255,255,.2);
  color: var(--brand-white);
}

.hero-card--scrum .scrum-textarea {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.18);
  color: var(--brand-white);
}

  .hero-card--scrum .scrum-textarea::placeholder {
    color: rgba(255,255,255,.4);
  }

  .hero-card--scrum .scrum-textarea:focus {
    border-color: rgba(255,255,255,.55);
    box-shadow: 0 0 0 3px rgba(255,255,255,.12);
  }

.hero-card--scrum .scrum-no-blocker-btn {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.65);
}

  .hero-card--scrum .scrum-no-blocker-btn:hover {
    background: rgba(255,255,255,.2);
    color: var(--brand-white);
    border-color: rgba(255,255,255,.35);
  }

.hero-card--scrum .scrum-submit-btn {
  background: var(--brand-white);
  color: var(--brand-primary);
  border: 2px solid var(--brand-white);
  font-weight: 700;
}

  .hero-card--scrum .scrum-submit-btn:hover {
    background: rgba(255,255,255,.88);
  }

.hero-card--scrum .scrum-success svg {
  color: var(--clr-success-icon);
}

.hero-card--scrum .scrum-success strong {
  color: var(--clr-success-border);
  font-size: 0.875rem;
}

.hero-card--scrum .scrum-success span {
  color: rgba(255,255,255,.7);
}

.hero-card--scrum .scrum-edit-btn {
  border-color: rgba(255,255,255,.5);
  color: rgba(255,255,255,.85);
}

  .hero-card--scrum .scrum-edit-btn:hover {
    background: rgba(255,255,255,.15);
    color: var(--brand-white);
  }

/* ─── Content body (2-col) ───────────────────────────────────── */
.content-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.25rem;
  align-items: start;
}

/* ── Section title ─────────────────────────────────────────── */
.section-title {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 0.75rem;
}

/* ── Module grid ───────────────────────────────────────────── */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.module-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
  cursor: pointer;
}

  .module-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--brand-primary);
    transform: translateY(-1px);
  }

  .module-card.is-selected {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(0,110,182,.15), var(--shadow-md);
    background: var(--nav-active-bg);
  }

.module-card-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1;
}

.module-card-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.module-card-desc {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 2px;
  line-height: 1.3;
}

/* ════════════════════════════════════════════════════════════
   PANELS (Aside)
   ════════════════════════════════════════════════════════════ */
.side-panels {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

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

.panel-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.panel-link {
  font-size: 0.75rem;
  color: var(--brand-primary);
  font-weight: 500;
}

  .panel-link:hover {
    text-decoration: underline;
  }

.panel-body {
  padding: 0.5rem 0;
}

/* ─── Notices ─────────────────────────────────────────────── */
.notice-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  border-left: 3px solid transparent;
  transition: background var(--transition);
}

  .notice-item + .notice-item {
    border-top: 1px solid var(--border-color);
  }

  .notice-item:hover {
    background: var(--bg-page);
  }

.notice-critical {
  border-left-color: var(--notice-critical-accent);
}

.notice-warning {
  border-left-color: var(--notice-warning-accent);
}

.notice-info {
  border-left-color: var(--brand-primary);
}

.notice-severity {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.6;
}

.notice-critical .notice-severity {
  background: var(--clr-critical-bg);
  color: var(--clr-critical-text);
  border: 1px solid var(--clr-critical-border);
}

.notice-warning .notice-severity {
  background: var(--clr-warning-bg);
  color: var(--clr-warning-text);
  border: 1px solid var(--clr-warning-border);
}

.notice-info .notice-severity {
  background: var(--clr-info-bg);
  color: var(--clr-info-text);
  border: 1px solid var(--clr-info-border);
}

.notice-content {
  min-width: 0;
}

.notice-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}

.notice-meta {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ─── My Week ─────────────────────────────────────────────── */
.my-week-item {
  padding: 0.75rem 1rem;
}

  .my-week-item + .my-week-item {
    border-top: 1px solid var(--border-color);
  }

.my-week-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.my-week-meta {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  font-weight: 400;
}

/* Progress bars */
.progress-bar-track {
  height: 7px;
  background: var(--clr-progress-track);
  border-radius: 99px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--clr-progress-default);
  border-radius: 99px;
  transition: width 0.6s ease;
}

.progress-bar-fill--warning {
  background: var(--clr-progress-warning);
}

.progress-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

.progress-bar-pct {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.progress-bar-sub {
  font-size: 0.72rem;
  color: var(--text-tertiary);
}

/* Inline mini-badges */
.badge-status {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 600;
}

.badge-status--warning {
  background: var(--clr-warning-bg);
  color: var(--clr-warning-text);
  border: 1px solid var(--clr-warning-border);
}

.badge-status--info {
  background: var(--clr-info-bg);
  color: var(--clr-info-text);
  border: 1px solid var(--clr-info-border);
}

.my-week-body-text {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Events list */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.1rem;
}

.event-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.event-dot--blue {
  background: var(--event-dot-blue);
}

.event-dot--green {
  background: var(--event-dot-green);
}

.event-dot--purple {
  background: var(--event-dot-purple);
}

.event-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
}

.event-date {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* ════════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--toast-bg);
  color: var(--brand-white);
  padding: 10px 20px;
  border-radius: 99px;
  font-size: 0.83rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 9999;
  white-space: nowrap;
}

  .toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* Medium screens: collapse right panel */
@media (max-width: 1100px) {
  .content-body {
    grid-template-columns: 1fr;
  }

  .side-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .side-panels {
    grid-template-columns: 1fr;
  }

  .hero-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-section--daily {
    grid-template-columns: 1fr;
  }

  .quick-actions {
    width: 100%;
  }
}

/* Mobile: sidebar becomes drawer */
@media (max-width: 640px) {
  .app-header {
    flex-wrap: wrap;
    height: auto;
    padding: 0.5rem 1rem;
    row-gap: 0.375rem;
  }

  /* Push right cluster to the far right on the first row */
  .header-right {
    margin-left: auto;
  }

  /* Drop search to its own full-width second row */
  .header-center {
    order: 3;
    flex: 0 0 100%;
    padding-bottom: 0.25rem;
  }

  .search-wrapper {
    max-width: 100%;
  }

  .hamburger-btn {
    display: flex;
  }

  .header-dept,
  .header-divider {
    display: none;
  }

  .sidebar-wrap {
    position: static;
  }

  .sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    height: auto;
    transform: translateX(-100%);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
    z-index: 200;
    box-shadow: none;
  }

    .sidebar.is-mobile-open {
      transform: translateX(0);
      box-shadow: var(--shadow-lg);
    }

  .sidebar-collapse-btn {
    display: none;
  }

  .main-content {
    padding: 1rem;
    padding-top: 0;
  }

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

  .search-hint {
    display: none;
  }
}

@media (max-width: 400px) {
  .module-grid {
    grid-template-columns: 1fr;
  }

  .header-app-name {
    font-size: 0.8rem;
  }
}

/* ─── Action-Required Alert Banner ──────────────────────────── */
.alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  position: relative;
  box-shadow: var(--shadow-md);
  animation: alertSlideIn 0.35s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes alertSlideIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Urgent / high-priority variant */
.alert-banner--urgent {
  background: linear-gradient(135deg, var(--alert-urgent-bg-from) 0%, var(--alert-urgent-bg-to) 100%);
  border: 2px solid var(--alert-urgent-border);
  color: var(--alert-urgent-color);
}

  /* Pulsing left accent stripe */
  .alert-banner--urgent::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    background: var(--alert-urgent-accent);
    animation: alertPulse 1.8s ease-in-out infinite;
  }

@keyframes alertPulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

.alert-banner__icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--alert-urgent-accent);
  filter: drop-shadow(0 0 6px rgba(252,165,165,.6));
}

.alert-banner__body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.alert-banner__label {
  display: inline-block;
  background: var(--alert-urgent-accent);
  color: var(--alert-urgent-label-color);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  vertical-align: middle;
  flex-shrink: 0;
}

.alert-banner__message {
  color: var(--alert-urgent-color);
}

  .alert-banner__message strong {
    color: var(--brand-white);
    font-weight: 700;
  }

.alert-banner__link {
  display: inline-block;
  margin-left: 0.25rem;
  color: var(--brand-white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .15s;
}

  .alert-banner__link:hover {
    opacity: 0.75;
  }

.alert-banner__dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: var(--alert-urgent-color);
  transition: background .15s, color .15s;
  margin-top: -2px;
}

  .alert-banner__dismiss:hover {
    background: rgba(255,255,255,.25);
    color: var(--brand-white);
  }

/* Dark-theme adjustments — tokens are overridden in .dark-theme block above */
.dark-theme .alert-banner--urgent {
  background: linear-gradient(135deg, var(--alert-urgent-bg-from) 0%, var(--alert-urgent-bg-to) 100%);
  border-color: var(--alert-urgent-border);
}

.dark-theme select.form-control {
  background-color: var(--bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

.dark-theme select.form-control option {
  background: var(--bg-card);
  color: var(--text-primary);
}

.dark-theme select.form-control option:checked {
  background: var(--brand-primary);
  color: var(--brand-white);
}

/* Date input calendar icon — inherit text color so it's visible in dark theme */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
}

.dark-theme input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
}

/* ─── Work Mode Check-in Panel ──────────────────────────────── */
.checkin-date {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-weight: 500;
}

.checkin-prompt {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.checkin-options {
  display: flex;
  gap: 0.5rem;
}

.checkin-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.65rem 0.4rem;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-page);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
  cursor: pointer;
}

  .checkin-btn:hover {
    border-color: var(--brand-primary);
    background: var(--bg-card);
    color: var(--text-primary);
  }

.checkin-btn__icon {
  font-size: 1.25rem;
}

.checkin-btn__label {
  line-height: 1.2;
}

.checkin-btn--active {
  border-color: var(--brand-primary);
  background: var(--nav-active-bg);
  color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0,110,182,.15);
}

.dark-theme .checkin-btn--active {
  background: rgba(0,110,182,.2);
}

.checkin-confirmed {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--clr-success-icon);
  background: var(--clr-success-bg);
  border: 1px solid var(--clr-success-border);
  border-radius: var(--border-radius-sm);
  padding: 0.45rem 0.65rem;
  animation: alertSlideIn .25s ease both;
}

.dark-theme .checkin-confirmed {
  background: var(--clr-success-bg);
  border-color: var(--clr-success-icon);
}

/* ─── Daily Scrum / Standup Panel ───────────────────────────── */
.panel--scrum .panel-header {
  align-items: center;
}

.scrum-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}

.scrum-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.scrum-q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--brand-white);
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.scrum-textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--bg-page);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.5;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}

  .scrum-textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(0,110,182,.12);
  }

.dark-theme .scrum-textarea {
  background: var(--bg-card);
  border-color: var(--scrum-textarea-border-dark);
  color: var(--text-primary);
}

.scrum-no-blocker-btn {
  align-self: flex-start;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0.2em 0.7em;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

  .scrum-no-blocker-btn:hover {
    background: var(--border-color);
    color: var(--text-primary);
    border-color: var(--scrum-btn-hover-border);
  }

.scrum-submit-btn {
  width: 100%;
  justify-content: center;
  margin-top: 0.25rem;
  font-size: 0.875rem;
}

.scrum-success {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  animation: alertSlideIn .3s ease both;
}

  .scrum-success svg {
    color: var(--clr-success-icon);
    flex-shrink: 0;
  }

  .scrum-success div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8125rem;
  }

  .scrum-success strong {
    color: var(--clr-success-text);
    font-size: 0.875rem;
  }

  .scrum-success span {
    color: var(--text-secondary);
  }

.scrum-edit-btn {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-primary);
  background: none;
  border: 1.5px solid var(--brand-primary);
  border-radius: 999px;
  padding: 0.25em 0.75em;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}

  .scrum-edit-btn:hover {
    background: var(--brand-primary);
    color: var(--brand-white);
  }

/* success badge variant */
.badge-status--success {
  background: var(--clr-success-bg);
  color: var(--clr-success-text);
  border: 1px solid var(--clr-success-border);
  border-radius: 999px;
  padding: 0.15em 0.6em;
  font-weight: 600;
}

.dark-theme .badge-status--success {
  background: var(--clr-success-bg);
  border-color: var(--clr-success-icon);
  color: var(--clr-success-text);
}

/* ════════════════════════════════════════════════════════════
   UTILITY: Visually Hidden (screen-reader only)
   ════════════════════════════════════════════════════════════ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════
   BUTTON VARIANTS: Success, Danger & Small
   ════════════════════════════════════════════════════════════ */
.btn-success {
  background: var(--clr-success-icon);
  color: var(--brand-white);
  border: none;
}

.btn-success:hover {
  background: #15803d;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35);
}

.btn-danger {
  background: var(--clr-critical-bg);
  color: var(--brand-white);
  border: none;
}

.btn-danger:hover {
  background: var(--clr-critical-bg, #b91c1c);
}

.btn-sm {
  padding: 0.8rem;
  font-size: 0.75rem;
}

/* Small count chip rendered inside a nav button — e.g. "My drafts (3)".
   Subtle by default; inverts on the active button so it stays legible against
   the brand-primary aria-current background. */
.btn-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  padding: 0 0.4em;
  margin-left: 0.4em;
  height: 1.4em;
  border-radius: 999px;
  background: var(--bg-page);
  color: var(--text-secondary);
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1;
}

.btn[aria-current="page"] .btn-count {
  background: rgba(255, 255, 255, 0.25);
  color: var(--brand-white);
}

/* Dashed-outline pill button used to invite adding a new chip/tag/label/etc.
   to a list. Use anywhere a "+ New X" affordance sits below a list of pills.
   align-self + width: fit-content keep it shrink-to-content even inside a
   flex-column parent (e.g. .form-field) which would otherwise stretch it. */
.btn-add-pill {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0.625rem;
  border: 1px dashed var(--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.btn-add-pill:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* Chip wrapper + reveal-on-hover edit affordance.
   Wrap any pill/chip in <span class="chip-wrap"> and add a small
   <button class="chip-edit-btn"> sibling — it floats at the top-right
   corner of the chip, hidden until the wrap is hovered/focused. */
.chip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.chip-edit-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chip-wrap:hover .chip-edit-btn,
.chip-wrap:focus-within .chip-edit-btn {
  opacity: 1;
  transform: scale(1);
}

.chip-edit-btn:hover {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* ════════════════════════════════════════════════════════════
   DIALOG: Shared modal backdrop + panel pattern
   ════════════════════════════════════════════════════════════ */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-panel {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

.dialog-panel--sm {
  width: 480px;
}

.dialog-panel--md {
  width: 560px;
}

.dialog-panel--lg {
  width: 760px;
}

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

.dialog__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.dialog__body {
  padding: 1rem 1.25rem 1.25rem;
}

/* ════════════════════════════════════════════════════════════
   PHASE BADGES
   ════════════════════════════════════════════════════════════ */

.phase-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--bg-page);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.phase-badge--new { background: var(--clr-info-bg, #eff6ff); color: var(--clr-info-text, #2563eb); border-color: var(--clr-info-text, #2563eb); }
.phase-badge--needs-review { background: var(--clr-needs-review-bg); color: var(--clr-needs-review-text); border-color: var(--clr-needs-review-border); }
.phase-badge--active { background: var(--clr-active-bg); color: var(--clr-active-text); border-color: var(--clr-active-border); }
.phase-badge--maintenance { background: var(--clr-warning-bg, #fffbeb); color: var(--clr-warning-text, #d97706); border-color: var(--clr-warning-text, #d97706); }
.phase-badge--retiring { background: var(--clr-critical-bg, #fef2f2); color: var(--clr-critical-text, #dc2626); border-color: var(--clr-critical-text, #dc2626); }
.phase-badge--retired { background: var(--bg-page); color: var(--text-tertiary); border-color: var(--text-tertiary); }
.phase-badge--ignored { background: var(--clr-ignored-bg); color: var(--clr-ignored-text); border-color: var(--clr-ignored-border); }

/* ════════════════════════════════════════════════════════════
   LABEL PILLS
   ════════════════════════════════════════════════════════════ */

.label-pill {
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 500;
  margin-right: 0.25rem;
  background: var(--bg-page);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

/* Color picker input (shared) */
.form-control--color {
  width: 2rem;
  height: 2rem;
  padding: 0.125rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-card);
  cursor: pointer;
}

/* ════════════════════════════════════════════════════════════
   AMBIENT GLOW EFFECTS
   Background glow orbs + glass card treatment
   ════════════════════════════════════════════════════════════ */

/* Ambient glow orbs behind main content */
.main-content {
  position: relative;
  overflow: clip;
}

.main-content::before,
.main-content::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: -1;
}

.main-content::before {
  width: 500px;
  height: 500px;
  top: -5%;
  right: -8%;
  background: var(--glow-primary);
}

.main-content::after {
  width: 400px;
  height: 400px;
  bottom: -5%;
  left: 5%;
  background: var(--glow-accent);
}

/* Glass card treatment for elevated surfaces */
.dark-theme .panel,
.dark-theme .collapsible-section,
.dark-theme .dialog-panel {
  background: var(--glow-card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--glow-card-border);
  box-shadow: var(--glow-card-shadow);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.dark-theme .panel:hover,
.dark-theme .collapsible-section:hover {
  box-shadow: 0 0 24px rgba(0, 110, 182, 0.08), 0 0 48px rgba(0, 110, 182, 0.04);
  border-color: rgba(0, 110, 182, 0.15);
}

/* Subtle glow on the sidebar in dark mode */
.dark-theme .sidebar-wrap {
  box-shadow: none;
}

/* Stronger header glow in dark mode — ::after spreads beneath sidebar */
.dark-theme .app-header {
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* Header glow — on layout-shell so it covers collapse btn + main content */
.layout-shell {
  background-image: linear-gradient(to bottom, rgba(38, 24, 58, 0.03) 0%, transparent 30px);
  background-repeat: no-repeat;
}

.dark-theme .layout-shell {
  background-image: linear-gradient(to bottom, rgba(80, 80, 131, 0.274) 0%, transparent 100px);
}

/* ════════════════════════════════════════════════════════════
   GLOBAL TREE CONTROL
   Reusable hierarchical-list style with optional expand/collapse
   toggles. Used by the Handbook folder navigator and intended for
   any future nested-list UI (e.g., admin folder editors,
   org-chart-style pickers). All sizing inherits the body font so
   trees match surrounding body text by default.
   ════════════════════════════════════════════════════════════ */

/* Toolbar above a tree — expand-all / collapse-all icon buttons. */
.tree-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nested level — slight indent, no bullet, no extra margin. */
.tree .tree {
  padding-left: 1.25rem;
}

/* Virtual "Archived" tree sits below the real folder tree (approver/admin only).
   A thin top border + a bit of margin separates it visually so it doesn't read
   like another real top-level folder. */
.hb-archived-tree {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
}

/* Folder-picker chip — one location assignment. Used inside the New Item
   dialog and the Item-edit dialog. The "primary" variant gets a slightly
   stronger border to reinforce the star indicator. */
.hb-folder-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-page);
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1;
}

.hb-folder-chip--primary {
  border-color: var(--brand-primary);
  background: var(--bg-card);
}

.hb-folder-chip__star {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 0.875rem;
  line-height: 1;
}

.hb-folder-chip--primary .hb-folder-chip__star {
  color: var(--brand-primary);
}

.hb-folder-chip__path {
  white-space: nowrap;
}

.hb-folder-chip__remove {
  background: none;
  border: 0;
  padding: 0 0 0 0.15rem;
  cursor: pointer;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
}

.hb-folder-chip__remove:hover {
  color: var(--clr-critical-text, var(--text-primary));
}

/* "(Proposed)" badge — shown on chips and tree rows for folders that haven't
   been materialized yet. Reuses the same neutral-secondary look as other
   small status tags in the app. */
.hb-proposed-badge {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  line-height: 1.2;
}

.tree-node {
  margin: 0.125rem 0;
}

/* Row that holds a toggle (or spacer) plus the label. */
.tree-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--border-radius);
  padding: 0.125rem 0.25rem;
}

.tree-row:hover { background: var(--bg-page); }

.tree-row--selected,
.tree-row--selected:hover {
  background: var(--brand-primary);
  color: var(--brand-white);
}

.tree-row--selected .tree-row__label,
.tree-row--selected .tree-row__count { color: var(--brand-white); }

/* Square +/- toggle button. Kept on its own class so non-tree
   contexts can reuse it for any expand/collapse affordance. */
.tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-secondary);
  border-radius: 3px;
  transition: color var(--transition), background var(--transition);
}

.tree-toggle:hover {
  color: var(--text-primary);
  background: var(--nav-hover-bg);
}

.tree-row--selected .tree-toggle { color: var(--brand-white); }

/* Spacer that occupies the same width as a toggle so leaf rows
   stay vertically aligned with parent rows. */
.tree-toggle-spacer {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* The clickable label part of a row. <button> styled as text. */
.tree-row__label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
  min-width: 0;
  text-align: left;
  color: inherit;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.tree-row__label-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Count chip after a folder name — shows item count. */
.tree-row__count {
  color: var(--text-tertiary);
  font-size: 0.85em;
  margin-left: 0.25rem;
  flex-shrink: 0;
}

/* Quick-add "+" button at the end of a tree row. Hidden until the row is
   hovered or focused (or the row itself is selected) so the tree stays
   visually quiet. Click jumps the user into the New Item dialog with the
   folder pre-selected. */
.tree-row__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-left: 0.25rem;
  color: var(--text-secondary);
  border-radius: 3px;
  opacity: 0;
  transition: opacity var(--transition), color var(--transition), background var(--transition);
}
.tree-row:hover .tree-row__add,
.tree-row:focus-within .tree-row__add,
.tree-row--selected .tree-row__add {
  opacity: 1;
}
.tree-row__add:hover {
  color: var(--brand-primary);
  background: var(--nav-hover-bg);
}
.tree-row--selected .tree-row__add { color: var(--brand-white); }
.tree-row--selected .tree-row__add:hover { background: rgba(255, 255, 255, 0.15); }

/* ── Team Handbook ────────────────────────────────────────── */
.hb-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.5rem;
}

@media (max-width: 720px) {
  .hb-grid { grid-template-columns: 1fr; }
}

.hb-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1rem;
  font-size: 0.875rem;
}

.hb-main {
  min-width: 0;
  font-size: 0.875rem;
}

.hb-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1rem 0 0.5rem;
  color: var(--text-secondary);
}

.hb-section-title:first-child { margin-top: 0; }

/* When the section title sits next to the tree toolbar buttons. */
.hb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.hb-section-head .hb-section-title { margin: 0; }

.hb-empty {
  color: var(--text-secondary);
  padding: 1rem;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-card);
}

.hb-tree {
  list-style: none;
  padding-left: 1rem;
  margin: 0;
}

.hb-tree__node { margin: 0.25rem 0; }

.hb-tree__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--text-primary);
  padding: 0.125rem 0.25rem;
  border-radius: var(--border-radius);
}

.hb-tree__link:hover { background: var(--bg-page); }

/* Roll-up count pill rendered next to each sub-folder name on the folder page.
   Shows the total published items in that branch (direct + descendants) so
   readers can gauge depth before drilling in. Hidden at zero. */
.hb-tree__count {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--text-secondary);
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  min-width: 1.25rem;
  text-align: center;
}

.hb-item-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.hb-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

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

/* Title takes natural width and shrinks-with-ellipsis when the row is narrow.
   It does NOT flex-grow — leaving that job to the .hb-row-spacer immediately
   after the copy-link icon. Result: copy-link stays snug against the title
   text, and the spacer absorbs the rest of the row so the right-cluster
   (meta, badges, actions) aligns in a consistent column across rows. */
.hb-item-title {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hb-item-title:hover { text-decoration: underline; }

/* Title rendered as a <button> when the row supports an inline action
   (clicking opens an edit panel, etc.). Strip the default browser button
   chrome so it reads like the anchor variant of .hb-item-title. */
.hb-item-title--clickable {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.hb-item-title--clickable:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--border-radius);
}

/* Empty flex-grow filler that pins everything after it to the right edge.
   Sits between the title's copy-link button and the right-cluster chips. */
.hb-row-spacer {
  flex: 1 1 0;
  min-width: 0;
}

.hb-item-meta {
  color: var(--text-secondary);
  font-size: 0.875rem;
  flex-shrink: 0;
  margin: 0;
}

/* Summary preview inside an item-row — single line with ellipsis. Allowed
   to shrink so badges / actions on the right keep their natural width;
   the title attribute on the span shows the full text on hover. */
.hb-item-row__summary {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 36rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-style: italic;
}

/* Search-results "locations" inline list: shows every folder breadcrumb the
   item lives under, separated by middle dots. Single-line with ellipsis so a
   heavily cross-listed item doesn't break the row layout; the full list shows
   on the native hover tooltip via the parent span's title attribute. */
.hb-item-row__locations {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 36rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hb-item-row__locations-sep {
  color: var(--text-tertiary);
  margin: 0 0.25rem;
}

/* Folder-path anchors — pick up the surrounding meta color so the list stays
   visually quiet, but reveal themselves as links on hover. */
.hb-item-row__location-link {
  color: inherit;
  text-decoration: none;
}

.hb-item-row__location-link:hover,
.hb-item-row__location-link:focus-visible {
  color: var(--brand-primary);
  text-decoration: underline;
}

/* Em-dash between locations and summary when both render in the same row. */
.hb-item-row__meta-sep {
  color: var(--text-tertiary);
  flex: 0 0 auto;
}

/* Item-detail header: kind icon sits to the left and visually spans both
   the title+badge row and the owner/meta row. Used in /handbook/item/{slug}. */
.hb-item-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
}

.hb-item-head__icon {
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* Wraps the kind icon plus its content-type pill (e.g., "Microsoft Word") so
   they stack as a single column to the left of the title + meta rows. */
.hb-item-head__icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.hb-content-type-pill {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.hb-item-head__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.hb-item-head__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hb-item-summary {
  color: var(--text-secondary);
  margin: 0.5rem 0 1rem;
}

.hb-breadcrumb {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0 0 0.25rem;
}

.hb-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.hb-breadcrumb a:hover { text-decoration: underline; }

.hb-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0 0 1rem;
}

/* Per-section grouping on the Handbook item page (e.g. Technology). Section
   title nestles up to the chips with a tight gap, and the whole block gets a
   bit of vertical breathing room from neighboring sections. */
.hb-tech-section {
  margin: 0.5rem 0 1rem;
}
.hb-tech-section .hb-section-title {
  margin: 0 0 0.5rem;
}

/* Inline strip of selected tag pills inside the Technology section's
   collapsible header — lets users see their picks without expanding.
   Sits between the section title and the right-aligned chevron. */
.hb-tech-section__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-left: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

.hb-tech-section__empty {
  margin-left: 0.5rem;
  flex: 1 1 auto;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  font-style: italic;
}

/* Inline "Edit Details" panel on the item page. Uses the shared
   .collapsible-section / .collapsible-section__header / .collapsible-section__body
   classes (same look as /admin/users grouping) so the disclosure styling stays
   consistent across the app. These rules are just the inner-layout bits that
   .collapsible-section__body doesn't cover — the field column gap, max-width
   so labels stay readable, and a vertical margin around the whole block. */
.hb-edit-details {
  margin: 1.25rem 0;
}

/* Single-column stack by default. On wide viewports the body switches to a
   two-column grid: text fields flow down the left column, the locations
   field (containing the folder tree picker) sits in the right column,
   row-spanning so the tree can grow tall without pushing the left-column
   text fields down. The actions row at the bottom spans both columns. */
.hb-edit-details__body {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1.25rem;
  row-gap: 0.875rem;
  align-items: start;
}

@media (min-width: 56rem) {
  .hb-edit-details__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .hb-edit-details__body > .form-field:has(.hb-folder-picker) {
    grid-column: 2;
    /* "1 / -1" spans from the first explicit row to the implicit last row —
       i.e., as many rows as the left column actually has, no more. The
       earlier "1 / span 99" forced 99 implicit rows; combined with the
       0.875rem row-gap between each, that produced ~85rem of phantom empty
       space below the panel. */
    grid-row: 1 / -1;
    align-self: start;
  }
}

.hb-edit-details__body > .hb-edit-details__actions {
  grid-column: 1 / -1;
}

/* Sticky action row inside Edit Details — keeps Save / Revert glued to the
   viewport bottom while the user scrolls through the field list. Lives in
   normal flow with no negative margins so the panel's natural height stays
   honest; sticking only activates when the bar would otherwise scroll out
   of view. */
.hb-edit-details__actions {
  position: sticky;
  bottom: 0;
  background: var(--bg-card);
  padding: 0.75rem 0;
  border-top: 1px solid var(--border-color);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Inline error rendered inside the sticky bar — keeps the default
   .form-error box look but tightens the margin so the buttons sit
   right below the message without extra whitespace. */
.hb-edit-details__error {
  margin: 0;
}

/* Inline warning banner used when an item is missing something needed to
   submit/publish (e.g., no folder yet). Sits at the top of the page body
   above the action row. Distinct from .form-error which is for form
   submission failures. */
.form-warning {
  background: var(--clr-warning-bg, var(--bg-card));
  border: 1px solid var(--clr-warning-border, var(--border-color));
  color: var(--clr-warning-text, var(--text-primary));
  padding: 0.625rem 0.875rem;
  border-radius: 6px;
  margin: 1rem 0;
  font-size: 0.9rem;
}

/* Inline info banner — same shape as .form-warning but in the info palette.
   Used for transient status messages on the item page (e.g., "Opening in
   Word…" auto-launch banner). Generous margin keeps the box from butting
   up against the action row above or other content below. */
.form-info {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  background: var(--clr-info-bg, var(--bg-card));
  border: 1px solid var(--clr-info-border, var(--border-color));
  color: var(--clr-info-text, var(--text-primary));
  padding: 0.625rem 0.875rem;
  border-radius: 6px;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.form-info a {
  color: var(--clr-info-text, var(--brand-primary));
  text-decoration: underline;
}

/* Version-history disclosure section on the item page. Section sits below
   the action buttons. Toggle button reads like a heading; expanded list
   indents each row and uses the existing hb-status-badge variants for
   Current / Working / Approved markers. */
.hb-versions {
  margin: 1.25rem 0;
}

.hb-versions__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hb-versions__row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--border-color);
}

.hb-versions__row:last-child {
  border-bottom: 1px solid var(--border-color);
}

.hb-versions__num {
  flex-shrink: 0;
  min-width: 2.5rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding-top: 0.125rem;
}

.hb-versions__meta {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hb-versions__meta > div { line-height: 1.4; }

.hb-versions__notes {
  font-style: italic;
}

.hb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.hb-status-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 0.5rem;
  border: 1px solid transparent;
}

/* All variants pair *-bg with *-text (and a matching *-border for definition).
   Earlier the rules referenced non-existent *-fg variables and fell back to
   hardcoded light-theme colors, which produced dark-on-dark text in dark mode. */

.hb-status-badge--draft {
  background: var(--bg-page);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

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

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

.hb-status-badge--declined {
  background: var(--clr-critical-bg);
  color: var(--clr-critical-text);
  border-color: var(--clr-critical-border);
}

.hb-status-badge--archived {
  background: var(--bg-page);
  color: var(--text-tertiary, var(--text-secondary));
  border-color: var(--border-color);
}

.hb-presence-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  background: var(--clr-info-bg);
  color: var(--clr-info-text);
  border: 1px solid var(--clr-info-border);
  font-size: 0.75rem;
  font-weight: 500;
}

.hb-pivot-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.hb-pivot-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.hb-browse-group { margin: 1rem 0; }

.hb-kind-toggle { display: flex; gap: 0.375rem; }

.hb-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1rem;
  margin-top: 1rem;
}