/* ===== Utilities ===== */
.hidden { display: none !important; }

/* ===== Style Guide ===== */
:root {
  --color-primary: #dce1e8;
  --color-secondary: #ffffff;
  --color-accent-light: #f5a623;
  --color-accent-dark: #d4791a;
  --accent-gradient: linear-gradient(to top, var(--color-accent-light), var(--color-accent-dark));

  /* Theme typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-heading: 32px;
  --font-size-subtitle: 20px;
  --font-size-body: 14px;
  --font-size-small: 12px;

  /* Theme text colors */
  --text-primary: #1a1a1a;
  --text-secondary: #444444;
  --text-muted: #666666;

  --sidebar-width: 260px;
  --sidebar-collapsed: 60px;
  --sidebar-transition: 0.25s ease;

  /* UI polish tokens (admin + shared). Borders, radii, spacing scale, edit hover.
     --border-color / --card-bg back the pre-existing var(--border-color,#e2e8f0)
     style fallbacks already scattered in this file, with zero selector churn. */
  --ui-border: #e5e7eb;
  --ui-border-soft: rgba(128, 128, 128, 0.1);
  --border-color: #e5e7eb;
  --card-bg: #ffffff;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --edit-hover: rgba(59, 130, 246, 0.08);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: var(--font-family);
  background: var(--color-primary);
  overflow: hidden;
}

/* ===== Layout ===== */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ===== Top Header ===== */
.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  min-height: 50px;
  padding: 0 20px;
  z-index: 100;
  margin-top: 10px;
}

.top-header .logo {
  margin-bottom: 0;
}

/* Groups the manual "run training" button with the avatar so .top-header's
   space-between sees exactly two items (logo, this group) — a third bare
   child would land in the visual middle instead of beside the avatar. */
.top-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pr-rerun-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-primary, #1e293b);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.pr-rerun-btn:hover {
  border-color: var(--color-accent-light);
  box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.2);
}

/* ===== User Menu ===== */
.user-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.user-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.06);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.user-avatar-btn:hover {
  border-color: var(--color-accent-light);
  box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.2);
}

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

.user-avatar-placeholder {
  color: #666;
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ===== User Dropdown ===== */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: var(--color-secondary);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px 20px;
  z-index: 200;
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

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

.user-dropdown-photo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.user-dropdown-photo {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.user-dropdown-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.user-dropdown-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.06);
  color: #aaa;
  border-radius: 50%;
}

.user-dropdown-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}

.user-dropdown-photo:hover .user-dropdown-photo-overlay {
  opacity: 1;
}

.user-dropdown-info {
  text-align: center;
  margin-bottom: 16px;
}

.user-dropdown-name {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.user-dropdown-username {
  font-size: 13px;
  color: #888;
  margin-bottom: 8px;
}

.user-dropdown-role {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(245, 166, 35, 0.15);
  color: var(--color-accent-dark);
}

.user-dropdown-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 12px 0;
}

.user-dropdown-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background 0.15s;
}

.user-dropdown-action:hover {
  background: rgba(0, 0, 0, 0.04);
}

.user-dropdown-action.signout {
  color: #d44;
}

/* ===== Sidebar ===== */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  padding: 16px 0 16px 12px;
  transition: width var(--sidebar-transition), min-width var(--sidebar-transition);
  overflow: hidden;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed);
  min-width: var(--sidebar-collapsed);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-right: 12px;
}

.sidebar-collapse-row {
  display: flex;
  justify-content: flex-end;
  padding-right: 12px;
  margin-bottom: 12px;
}

.sidebar.collapsed .sidebar-collapse-row {
  justify-content: center;
  padding-right: 0;
}

.logo {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
}

.logo-360 {
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Logo is now in top-header, no sidebar collapse rules needed */

.collapse-btn {
  background: rgba(0, 0, 0, 0.06);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #555;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s, background 0.15s;
}

.collapse-btn:hover {
  background: rgba(0, 0, 0, 0.12);
}

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

/* ===== Nav Items ===== */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Sticky back-button: when the sidebar is showing a department/docs sub-nav,
   the back link is rendered as a bare .nav-item (NOT wrapped in .nav-group)
   as the first child of .sidebar-nav. Pin it to the top so users can always
   escape the sub-nav even on short viewports where the sub-nav scrolls. */
.sidebar-nav > .nav-item:first-child {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-primary);
}

/* ===== Nav Groups ===== */
.nav-group {
  margin-bottom: 8px;
}

/* A group header IS a nav button, not a caption. It opens a menu, exactly like
   Sequences navigates to a page, so it carries the same weight: icon, label,
   padding, radius and hover. The old 10px uppercase grey caption read as a
   decorative section divider and gave no clue it was clickable. Values here are
   deliberately identical to .nav-item (above) — keep them in step. */
.nav-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 10px;
  color: #444;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}

.nav-group-header:hover {
  background: rgba(0, 0, 0, 0.06);
}

.nav-group-label {
  font-size: 14px;
  color: inherit;
  /* Pushes the chevron to the far edge now that gap (not space-between) drives
     the layout — space-between would strand the icon away from the label. */
  flex: 1 1 auto;
  min-width: 0;
}

/* ── Maturity pills ────────────────────────────────────────────────────────
   Every rail destination carries the stage it is currently at, so nobody has
   to ask whether a page is finished before trusting what it shows. Two hosts,
   one pill: `.nav-group-tag` sits on a group HEADER (the whole group is at one
   stage), `.nav-tag` sits on a single `.nav-item`.

   Sized off the label, not the rail, so it never forces the header wider than
   the collapsed sidebar allows. Stage colour is a `.stage-*` modifier — the
   ramp runs raw → stable: alpha (red) → building (amber) → in progress (cyan)
   → editing (blue) → beta (violet) → production (green). Green means "trust
   it", and nothing else in the ramp is green, on purpose. */
.nav-group-tag,
.nav-tag {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 9px;
  background: #e2e8f0;
  color: #475569;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* On an item the pill is pushed to the trailing edge; on a group header the
   label already carries `flex: 1 1 auto`, so it lands there on its own. */
.nav-tag {
  margin-left: auto;
  /* Tighter than the group pill: a 260px rail has to fit icon + a label as long
     as "Department Overview" + this, and at the header's 9px/7px the longest
     labels lost their tail to an ellipsis. */
  padding: 2px 4px;
  font-size: 8px;
  letter-spacing: 0.2px;
}

/* A tagged row buys back the last 12px the longest label needs — 4px off the
   icon gap, 6px off the trailing inset, 2px off the pill. Measured, not
   guessed: at the untagged 12px/12px "Department Overview" ran exactly 12px
   past its box. Scoped with :has() so untagged rows (the drill-back "Menu",
   department sub-items) keep the original rhythm; where :has() is unsupported
   the rule is skipped and the label simply ellipses, which is the fallback
   anyway. */
.nav-item:has(.nav-tag) {
  gap: 8px;
  padding-right: 6px;
}

/* A tagged item has less room for its label. Ellipsis is the fallback if a
   future label outgrows the rail — better a clipped word than a pill pushed
   out past the edge (`.nav-item` is nowrap + overflow visible, so without this
   a long label simply spills). */
.nav-item .nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-alpha      { background: #fee2e2; color: #b91c1c; }
.stage-building   { background: #fef3c7; color: #b45309; }
.stage-inprogress { background: #cffafe; color: #0e7490; }
.stage-editing    { background: #dbeafe; color: #1d4ed8; }
.stage-beta       { background: #ede9fe; color: #6d28d9; }
.stage-production { background: #dcfce7; color: #15803d; }

/* Icon-only rail: labels are already hidden, a pill there would be noise. */
.sidebar.collapsed .nav-tag { display: none; }

.nav-group-chevron {
  color: rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.nav-group.collapsed .nav-group-chevron {
  transform: rotate(-90deg);
}

.nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  max-height: 500px;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  opacity: 1;
}

/* ── Sidebar groups are DRILL-IN menus, not accordions (2026-08-11) ─────────
   Clicking a group header opens that group as its own menu — the rail replaces
   its contents rather than expanding a second level underneath. Rationale: with
   five groups open-in-place the rail became a long scrolling list where the
   thing you wanted was rarely on screen, and the collapse state was persisted
   per user so no two people saw the same menu.

   Driven entirely by state, not DOM surgery: `data-nav-drill` on the <nav> plus
   `.is-drilled` on the open group. Nothing is cloned or moved, so every listener
   bound to a .nav-item survives — which matters because rebindNavItems() only
   re-binds items with a data-page, and a clone/restore silently drops the rest.

   The legacy `.collapsed` class is no longer applied by app.js; the rule below
   is kept so an older cached bundle still hides items rather than showing every
   group expanded at once. */
.nav-group.collapsed .nav-group-items {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Top level: group HEADERS only (plus any top-level item such as Sequences). */
.sidebar-nav .nav-group-items { display: none; }

/* Chevron points RIGHT: this opens a new menu, it does not expand in place. */
.sidebar-nav .nav-group-chevron { transform: rotate(-90deg); }

/* The back row only exists while drilled. */
.sidebar-nav .nav-drill-back { display: none; }
.sidebar-nav[data-nav-drill] .nav-drill-back { display: flex; }

/* Drilled: hide every other group and any top-level item, show this group's
   items, and turn its header into a plain title. */
.sidebar-nav[data-nav-drill] .nav-group:not(.is-drilled) { display: none; }
.sidebar-nav[data-nav-drill] .nav-top-item { display: none; }

.sidebar-nav .nav-group.is-drilled .nav-group-items {
  display: flex;
  max-height: none;
  opacity: 1;
  pointer-events: auto;
}

.sidebar-nav .nav-group.is-drilled .nav-group-header {
  cursor: default;
  pointer-events: none;
}
.sidebar-nav .nav-group.is-drilled .nav-group-chevron { display: none; }

/* A top-level item is a PEER of the group headers, not a child of the last one.
   Without a rule it sat flush under TRAINING and read as belonging to it. */
.sidebar-nav .nav-top-item {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-border, rgba(0, 0, 0, 0.08));
}

/* Icon-only rail: headers are hidden there, so a drill has no visible title and
   no way back. Show every group's items instead, exactly as before. */
.sidebar.collapsed .sidebar-nav .nav-group-items { display: flex; }
.sidebar.collapsed .sidebar-nav[data-nav-drill] .nav-group:not(.is-drilled) { display: block; }
.sidebar.collapsed .sidebar-nav[data-nav-drill] .nav-top-item { display: flex; }
.sidebar.collapsed .sidebar-nav .nav-drill-back { display: none; }


/* When sidebar is collapsed (icon-only), hide group headers and show all items */
.sidebar.collapsed .nav-group-header {
  display: none;
}

.sidebar.collapsed .nav-group.collapsed .nav-group-items {
  max-height: 500px;
  opacity: 1;
  pointer-events: auto;
}

.sidebar.collapsed .nav-group {
  margin-bottom: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: #444;
  text-decoration: none;
  font-size: 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: visible;
  position: relative;
  margin-right: 0;
}

.nav-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* ── Training/Change Requests state ──────────────────────────────────────
   Orange = training is assigned to you, green = none is. The whole button
   carries the state, not a separate marker: the label is long enough that a
   trailing dot pushed it into an ellipsis, and "colour the menu button" is the
   ask. `color` drives the label AND the icon, whose SVG is fill="currentColor".

   Neither class is set until /cc-progress/my-training resolves, so the default
   render is the ordinary rail colour — an honest "not known yet" rather than a
   green that might be a lie.

   The tint is deliberately faint. This row sits in a rail of neutral items, so
   the text colour is what carries the signal and the background only keeps it
   from reading as an error state. */
.nav-item.has-training,
.nav-item.no-training { font-weight: 600; }

.nav-item.has-training { color: #ea580c; background: rgba(249, 115, 22, 0.10); }
.nav-item.has-training:hover { background: rgba(249, 115, 22, 0.18); }

.nav-item.no-training { color: #15803d; background: rgba(22, 163, 74, 0.10); }
.nav-item.no-training:hover { background: rgba(22, 163, 74, 0.18); }

/* The .active override lives further down the file, immediately after
   `.nav-item.active` — same specificity, so source order is what decides it. */

/* ── Training rollout notice ─────────────────────────────────────────────
   Fills a parked department dashboard. Centred in the content column, capped
   so the copy keeps a readable measure on a wide monitor. */
.rollout-notice {
  max-width: 460px;
  margin: 12vh auto 0;
  padding: 32px 28px;
  text-align: center;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  background: #f8fafc;
}
.rollout-notice-icon { font-size: 28px; line-height: 1; margin-bottom: 12px; }
.rollout-notice-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
}
.rollout-notice-body {
  font-size: 13px;
  line-height: 1.55;
  color: #64748b;
  margin: 0 0 10px;
}
.rollout-notice-hint {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
}

/* ===== Department Dashboard Layout ===== */
.dept-dashboard-layout {
  display: flex;
  gap: 16px;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.dept-dashboard-main {
  flex: 4;
  min-width: 0;
  display: flex;
}

.dept-dashboard-side {
  flex: 1;
  min-width: 0;
  display: flex;
}

/* Proposal dashboard: side column stacks two sheets vertically */
.proposal-side-col {
  flex-direction: column;
  gap: 16px;
}

.proposal-side-col .dept-sheet-card {
  flex: 1;
  min-height: 0;
}

/* ===== Department Sheet Cards ===== */
.dept-sheet-card {
  background: #ffffff;
  border: 0.5px solid #e1e1e1;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.dept-sheet-card-compact {
  padding: 14px 16px;
}

.dept-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.dept-sheet-card-compact .dept-sheet-header {
  margin-bottom: 10px;
}

.dept-sheet-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dept-sheet-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.dept-sheet-card-compact .dept-sheet-title {
  font-size: 13px;
}

.dept-sheet-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(245, 166, 35, 0.12);
  color: var(--color-accent-light);
  font-size: 10px;
  font-weight: 600;
}

/* Dept tab wrapper — stacks month selector above sheet content */
.dept-tab-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: 0;
}

/* Month selector above dept sheets */
.dept-month-selector {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-bottom: 12px;
  flex-shrink: 0;
  background: var(--card-bg, #fff);
  border: 1px solid rgba(128, 128, 128, 0.15);
  border-radius: 8px;
  overflow: hidden;
}

.dept-month-nav {
  background: none;
  border: none;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  font-size: 11px;
  padding: 8px 12px;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
  display: flex;
  align-items: center;
}

.dept-month-nav:hover {
  background: rgba(59, 130, 246, 0.08);
  color: var(--accent-color, #3b82f6);
}

.dept-month-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  min-width: 130px;
  text-align: center;
  white-space: nowrap;
  padding: 6px 4px;
  border-left: 1px solid rgba(128, 128, 128, 0.12);
  border-right: 1px solid rgba(128, 128, 128, 0.12);
}

.dept-sheet-search {
  padding: 6px 12px;
  border: 1px solid rgba(128, 128, 128, 0.15);
  border-radius: 8px;
  font-size: 12px;
  font-family: var(--font-family);
  background: var(--color-secondary);
  color: var(--text-primary);
  outline: none;
  width: 180px;
  transition: border-color 0.2s ease;
}

.dept-sheet-search:focus {
  border-color: var(--color-accent-light);
}

.dept-sheet-search::placeholder {
  color: var(--text-muted);
}

.dept-sheet-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
  .dept-dashboard-layout {
    flex-direction: column;
  }
  .dept-dashboard-side {
    flex: none;
  }
}

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

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

.nav-item.active {
  background: #ffffff;
  color: #1a1a1a;
  font-weight: 500;
  border-radius: 10px;
}

/* Training rollout: `.nav-item.active` above is the same specificity as
   `.nav-item.has-training`, so without this it would win on source order and
   the state colour would vanish exactly when the user is ON the page — which
   is when it matters most. Keep the white active background (that is what
   marks the current page) and put the state back on the text. */
.nav-item.active.has-training { color: #ea580c; font-weight: 600; }
.nav-item.active.no-training  { color: #15803d; font-weight: 600; }

.nav-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-label {
  transition: opacity 0.2s;
}

.sidebar.collapsed .nav-label {
  opacity: 0;
  width: 0;
}

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

/* ===== Sidebar Footer ===== */
.sidebar-footer {
  margin-top: auto;
  padding-right: 12px;
}

.sidebar.collapsed .sidebar-footer {
  padding-right: 0;
}

/* ===== Content Area ===== */
.content-area {
  flex: 1;
  padding: 10px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.card {
  width: 100%;
  height: 100%;
  background: var(--color-secondary);
  border-radius: 20px;
  padding: 0;
  overflow-y: auto;
  color: var(--text-primary);
  font-size: var(--font-size-body);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.dashboard-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px;
}

.dashboard-content:has(.page-placeholder) {
  align-items: center;
  justify-content: center;
}

/* Workflow / dashboards-manager pages are tall — let the card scroll */
.dashboard-content:has(.workflow-page) {
  overflow-y: auto;
}

/* Employees page grid can exceed viewport — let it scroll */
.dashboard-content:has(.employee-section) {
  overflow-y: auto;
}

.page-placeholder {
  color: var(--text-muted);
  font-size: var(--font-size-heading);
  font-weight: 300;
  font-style: italic;
}

/* ===== Animations ===== */
@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pageExit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Entrance animations */
.top-header {
  animation: slideUpFadeIn 0.4s ease backwards;
}

.sidebar {
  animation: slideUpFadeIn 0.5s ease backwards;
}

.card {
  animation: slideUpFadeIn 0.5s ease 0.1s backwards;
}

/* Page transition classes */
.dashboard-content.page-exit {
  animation: pageExit 0.2s ease forwards;
}

.dashboard-content.page-enter {
  animation: pageEnter 0.25s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .top-header,
  .sidebar,
  .card {
    animation: none;
  }
  .dashboard-content.page-exit,
  .dashboard-content.page-enter {
    animation-duration: 0.01ms;
  }
}

/* ===== Department Sidebar ===== */
.dept-sidebar {
  width: var(--sidebar-width);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 16px 0 16px 12px;
  overflow-y: auto;
  flex-shrink: 0;
  transition: width var(--sidebar-transition);
}

.dept-sidebar .msg-sidebar-title {
  color: #1a1a1a;
}

.dept-sidebar .msg-back-btn {
  color: #555;
  background: rgba(0, 0, 0, 0.06);
}

.dept-sidebar .msg-back-btn:hover {
  background: rgba(0, 0, 0, 0.12);
}

.dept-sidebar-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px 0 0;
}

.dept-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #444;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.dept-sidebar-item:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1a1a1a;
}

.dept-sidebar-item.active {
  background: var(--color-accent-light);
  color: #fff;
}

/* ===== Department Dashboard Layout ===== */
.dept-dashboard-layout {
  display: flex;
  gap: 16px;
  height: 100%;
  min-height: 0;
}

.dept-dashboard-main {
  flex: 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dept-dashboard-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dept-dashboard-half {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ===== Department Sheet Card ===== */
.dept-sheet-card {
  background: rgba(128, 128, 128, 0.06);
  border: 1px solid rgba(128, 128, 128, 0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.dept-sheet-card-compact {
  font-size: 13px;
}

.dept-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
  flex-shrink: 0;
}

.dept-sheet-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dept-sheet-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.dept-sheet-count {
  font-size: 11px;
  font-weight: 600;
  background: rgba(128, 128, 128, 0.1);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

/* Dept tab wrapper — stacks month selector above sheet content */
.dept-tab-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: 0;
}

/* Month selector above dept sheets */
.dept-month-selector {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-bottom: 12px;
  flex-shrink: 0;
  background: var(--card-bg, #fff);
  border: 1px solid rgba(128, 128, 128, 0.15);
  border-radius: 8px;
  overflow: hidden;
}

.dept-month-nav {
  background: none;
  border: none;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  font-size: 11px;
  padding: 8px 12px;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
  display: flex;
  align-items: center;
}

.dept-month-nav:hover {
  background: rgba(59, 130, 246, 0.08);
  color: var(--accent-color, #3b82f6);
}

.dept-month-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  min-width: 130px;
  text-align: center;
  white-space: nowrap;
  padding: 6px 4px;
  border-left: 1px solid rgba(128, 128, 128, 0.12);
  border-right: 1px solid rgba(128, 128, 128, 0.12);
}

.dept-sheet-search {
  padding: 6px 12px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 8px;
  font-size: 13px;
  background: rgba(128, 128, 128, 0.04);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
  width: 200px;
}

.dept-sheet-search::placeholder {
  color: var(--text-muted);
}

.dept-sheet-search:focus {
  border-color: var(--color-accent-light);
}

.dept-sheet-container {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

/* Proposal grid layout */
.proposal-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr;
  gap: 16px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* The Booking Form tab carries the widest sheet (8 document columns). On desktop
   give that table the FULL content width and stack the secondary rail (Sent to
   Client / Booking Form Review) beneath it, so no column is squeezed, overlapped,
   or cut off. (At <=1024px the whole tab reflows to stacked cards — see below.)
   Rows are 1fr (main table, internal-scroll) + auto (rail). */
.proposal-grid--booking {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}

.proposal-grid-left {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.proposal-grid-left .dept-sheet-card {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.proposal-grid-left .dept-sheet-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.proposal-grid-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.proposal-grid-right .dept-sheet-card {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.proposal-grid-right .dept-sheet-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Booking Form tab: two FULL-HEIGHT columns on desktop that fill the page — the
   Booking Form table on the LEFT, the rail (Sent to Client + Booking Form Review)
   on the RIGHT in a fixed side column. Both columns are independent and stretch
   to the viewport height (the page shell is height:100%; overflow:hidden), so a
   tall rail can no longer steal height from the table and collapse it — that bug
   came from the old SINGLE-column `1fr auto` rows (stacked), not side-by-side
   columns. Each card fills its column and scrolls internally (base
   .proposal-grid-left/right rules: card flex:1, container overflow auto). The
   left table also scrolls horizontally so its 8 document columns are never cut
   off. Below 1024px the existing single-column rule + <=768px card-flow take
   over. */
.proposal-grid--booking {
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: 1fr;
}
.proposal-grid--booking .proposal-grid-left .dept-sheet-container {
  overflow: auto;
}

/* Narrower desktops: tighten the fixed side column so the table keeps usable
   width before the tab reflows to stacked cards (<=1024px, handled by the
   existing single-column rule below). */
@media (max-width: 1280px) {
  .proposal-grid--booking {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

/* ===== Admin sheets skinned to the DEPARTMENT-sheet style =====
   The admin tabs (Proposal / Booking Form / Onboarding / Declined) render the
   proagri-sheet inside a boxed grey `dept-sheet-card`, which looked unlike the
   flat full-width department tables (`.prod-sheet-*`: no card, 22px title,
   sticky light header #f8f9fb, 14px rows, #f6f8fc row hover). These overrides —
   scoped to the admin tab containers ONLY (`.proposal-grid`, `.dept-dashboard-main`)
   so other dept-sheet users are untouched — flatten the card and bring the
   title/header/row chrome in line with the department sheets. */
.proposal-grid .dept-sheet-card,
.dept-dashboard-main .dept-sheet-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 20px 24px;
}
.proposal-grid .dept-sheet-header,
.dept-dashboard-main .dept-sheet-header {
  padding: 0;
  border-bottom: none;
  margin-bottom: var(--space-3);
}
/* A1 — subtle bordered scroll frame, mirroring the department .prod-sheet-scroll
   box. The container is the scroll parent in every admin tab (proposal/booking/
   onboarding flex columns + declined .dept-dashboard-main), so the frame + the
   sticky header below clip cleanly against it. */
.proposal-grid .dept-sheet-container,
.dept-dashboard-main .dept-sheet-container {
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  /* This bordered white frame is the SINGLE scroller for the admin sheet — both
     axes. The frame stays full-viewport-width (the table scrolls INSIDE it), so a
     table wider than the viewport no longer runs past the white card / grey bg and
     looks cut off. Mirrors the working Booking Form pattern (.proposal-grid--booking
     ... overflow:auto). The inner .proagri-sheet-wrap no longer owns overflow-x in
     .proposal-grid (see proagri-sheet.css) — one scroller, not two. */
  overflow: auto;
  min-height: 0;
}
.proposal-grid .dept-sheet-title,
.dept-dashboard-main .dept-sheet-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
/* proagri-sheet table chrome → department look */
.proposal-grid .proagri-sheet-header,
.dept-dashboard-main .proagri-sheet-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8f9fb;
  border-bottom: 1px solid var(--ui-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 10px 14px;
}
.proposal-grid .proagri-sheet-header-cell,
.dept-dashboard-main .proagri-sheet-header-cell {
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #6b7280;
}
.proposal-grid .proagri-sheet-row,
.dept-dashboard-main .proagri-sheet-row {
  padding: 11px 16px;
  border-bottom: 1px solid var(--ui-border-soft);
}
.proposal-grid .proagri-sheet-row:hover,
.dept-dashboard-main .proagri-sheet-row:hover {
  background: #f6f8fc;
}
.proposal-grid .proagri-sheet-cell,
.dept-dashboard-main .proagri-sheet-cell {
  font-size: 14px;
  color: var(--text-primary);
}
/* A4 — status pill parity with the department sheets: slightly larger, bolder,
   with a 1px ring in the pill's own color (currentColor) so every status tint
   gets a matching outline without touching the ~80 per-status color classes. */
.proposal-grid .proagri-sheet-status,
.dept-dashboard-main .proagri-sheet-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
/* A5 — neutral count badge (no orange); reads as a quiet inline tally. */
.proposal-grid .dept-sheet-count,
.dept-dashboard-main .dept-sheet-count {
  min-width: 24px;
  height: 22px;
  font-size: 12px;
  background: var(--ui-border-soft);
  color: var(--text-muted);
}
/* A6 — empty state as a quiet placeholder inside the framed box, not a big void. */
.proposal-grid .proagri-sheet-empty,
.dept-dashboard-main .proagri-sheet-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 28px 16px;
}

/* "Needs Revision" pill — flagged on booking-form rows that a reviewer
   sent back. The full reviewer note appears as a tooltip on hover (set
   via the cell renderer's title attribute). */
.bf-needs-revision-badge {
  display: inline-block;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  cursor: help;
}

/* Status pill colors for the new booking-form workflow statuses. The
   existing .proagri-sheet-status-* convention keys off the snake_case
   status; these two new statuses need their own visual treatment. */
.proagri-sheet-status-booking_form_review {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

.proagri-sheet-status-booking_form_changes {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

/* Tablet (<=1024px): admin tab grids collapse to a single column of full-width
   sheets. The sheets STAY fixed-height internal-scroll panels here (their tables
   scroll inside) — the cards only reflow at <=768px (the shared engine's
   breakpoint), so the height-unlock lives in the <=768px block below, not here. */
@media (max-width: 1024px) {
  .proposal-grid,
  .proposal-grid--booking {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dept-dashboard-layout {
    flex-direction: column;
  }
  /* Stacked dept dashboard: each split panel spans the full width so the
     4fr/1fr columns don't keep their flex ratio once the row wraps. */
  .dept-dashboard-main,
  .dept-dashboard-side,
  .dept-dashboard-half {
    flex: none;
    width: 100%;
  }
  .dept-month-selector {
    justify-content: center;
    width: fit-content;
  }

  /* THE outer shell is the real viewport-lock: .dashboard-content is
     height:100%; overflow:hidden so desktop panels can scroll internally. On
     phones the sheets reflow to cards that flow, so let the shell grow and the
     page scroll — without this the grid/panels stretch to fill the viewport and
     leave big empty gaps below short cards. Scoped to the tab views (which hold
     .proposal-grid); the client dashboard keeps its own internal scroll. */
  .dashboard-content:has(.proposal-grid) {
    height: auto;
    overflow: visible;
  }

  /* Card-flow unlock: at <=768px the shared sheets reflow to stacked cards, so
     release the viewport-locked panel heights — let each card grow to its
     content and the PAGE scroll, instead of trapping rows in a short
     internal-scroll panel (which would clip names/statuses). Moved here from the
     <=1024px block, where the sheets are still fixed-height tables.

     ROOT CAUSE of the dead-space gap: .proposal-grid stays display:grid, so even
     with grid-template-rows:none it still creates an implicit 1fr row and
     stretches every column (align-items:stretch) to the tallest column's height.
     A short panel (e.g. "Proposal" with one card) was force-grown to match the
     "In Design" column, leaving empty space below its last card. Collapsing the
     grid to a flex column removes row-stretch so each panel hugs its content. */
  .proposal-grid,
  .proposal-grid--booking {
    display: flex;
    flex-direction: column;
    grid-template-rows: none;
    gap: 10px;
    height: auto;
    overflow: visible;
  }
  /* Column wrappers were sized by the stretched grid row; unlock them so they
     are exactly as tall as the card(s) they hold (no reserved dead height). */
  .proposal-grid-left,
  .proposal-grid-right,
  .proposal-side-col {
    flex: none;
    height: auto;
    min-height: 0;
    gap: 10px;
    overflow: visible;
  }
  .dept-sheet-card,
  .proposal-grid-left .dept-sheet-card,
  .proposal-grid-right .dept-sheet-card,
  .proposal-grid--booking .dept-sheet-card,
  .proposal-side-col .dept-sheet-card {
    flex: none;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .dept-sheet-container,
  .proposal-grid-left .dept-sheet-container,
  .proposal-grid-right .dept-sheet-container,
  .proposal-grid--booking .dept-sheet-container {
    flex: none;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  /* Sheet shell spacing polish — trim padding so the stacked cards read as a
     compact, intentional list rather than sparse boxes with big dead gaps. The
     full-width search drops onto its own line below the title. */
  .dept-sheet-card { padding: 12px 14px; }
  .dept-sheet-card-compact { padding: 10px 12px; }
  .dept-sheet-header {
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 10px;
    padding: 12px 14px;
  }
  .dept-sheet-card-compact .dept-sheet-header { margin-bottom: 8px; }
  /* Keep the sub-sheet title + count on one line together (no awkward wrap
     between "In Design" and its badge). */
  .dept-sheet-title-wrap { flex: 1 1 auto; min-width: 0; }
  .dept-sheet-title { white-space: normal; word-break: break-word; }
  .dept-sheet-search {
    width: 100%;
    flex: 1 0 100%;
  }
}

/* ===== Client Dashboard ===== */

.client-dashboard {
  padding: 0 4px 24px;
  /* Client dashboard is the only admin view that should scroll internally.
     Tab sheets scroll inside their own .dept-sheet-container; the page shell
     (.dashboard-content) keeps overflow: hidden. This rule gives the client
     dashboard its own scroll so long content (form data cards + JSON block)
     doesn't get clipped. */
  height: 100%;
  overflow-y: auto;
}

/* Sidebar dashboard (shown when viewing a client) */
.sidebar-dashboard-section {
  padding: 4px 16px;
}

.sidebar-dashboard-sep {
  height: 1px;
  background: rgba(128, 128, 128, 0.12);
  margin: 6px 16px;
}

.sidebar-dashboard-section-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #94a3b8);
  padding: 4px 16px 4px;
}

.sidebar-dashboard-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  margin-bottom: 1px;
  word-break: break-word;
  line-height: 1.3;
}

.sidebar-dashboard-subtitle {
  font-size: 11px;
  color: var(--text-secondary, #64748b);
  margin-bottom: 4px;
}

.sidebar-dashboard-fields-wrap {
  padding: 0 16px;
}

.sidebar-dashboard-field {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 0;
  font-size: 11px;
  line-height: 1.4;
}

.sidebar-dashboard-label {
  color: var(--text-secondary, #64748b);
  flex-shrink: 0;
}

.sidebar-dashboard-value {
  color: var(--text-primary, #1e293b);
  text-align: right;
  word-break: break-word;
  font-weight: 500;
}

.sidebar-dashboard-contact {
  padding: 4px 16px 6px;
}

.sidebar-dashboard-contact-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 2px;
}

.sidebar-dashboard-contact-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}

.sidebar-dashboard-contact-detail {
  font-size: 11px;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
}

.sidebar-dashboard-status {
  padding: 4px 16px 2px;
}

.sidebar-dashboard-meta {
  font-size: 11px;
  color: var(--text-secondary, #64748b);
  padding: 1px 16px;
}

.sidebar-editable {
  cursor: pointer;
  border-radius: 3px;
  padding: 0 3px;
  transition: background 0.15s;
}

.sidebar-editable:hover {
  background: var(--edit-hover);
}

.sidebar-inline-input {
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  text-align: right;
  border: 1px solid var(--accent-color, #3b82f6);
  border-radius: 3px;
  padding: 0 3px;
  width: 100%;
  outline: none;
  background: var(--card-bg, #fff);
}

.client-dashboard-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.client-dashboard-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #222);
  margin: 0;
}

.client-dashboard-trash-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.client-dashboard-trash-btn:hover {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.08);
  border-color: rgba(231, 76, 60, 0.2);
}

.client-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  align-items: start;
}

.client-dashboard-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.client-dashboard-card-wide {
  grid-column: 1 / -1;
}

.client-dashboard-card-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #64748b);
  margin: 0 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-color);
}

.client-dashboard-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.client-dashboard-field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border-color-light, rgba(0,0,0,0.04));
}

.client-dashboard-field:last-child {
  border-bottom: none;
}

.client-dashboard-label {
  color: var(--text-secondary, #64748b);
  flex-shrink: 0;
  margin-right: 12px;
}

.client-dashboard-value {
  color: var(--text-primary, #1e293b);
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

.client-dashboard-editable {
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 4px;
  transition: background 0.15s;
}

.client-dashboard-editable:hover {
  background: var(--edit-hover);
}
/* B3 — doc-card empty state ("Not yet available"), formerly an inline cssText in
   proposal-page.js buildDocCard, now class-driven. */
.client-doc-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: var(--space-3) 0;
  text-align: center;
}

.client-dashboard-inline-input {
  font: inherit;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  text-align: right;
  border: 1px solid var(--accent-color, #3b82f6);
  border-radius: 4px;
  padding: 1px 4px;
  width: 100%;
  outline: none;
  background: var(--card-bg, #fff);
}

/* === Admin client-dashboard internals — mobile ===
   Completes the client-dashboard reflow (messenger height + field rows).
   Additive: only applies at <=768px; desktop rendering is unchanged. */
@media (max-width: 768px) {
  /* Cap the messenger ~60vh so it never dominates the stacked column or pushes
     the other dashboard cards off-screen; its message list scrolls internally. */
  .cd-messenger { max-height: 60vh; }
  .cd-messenger-messages {
    max-height: 40vh;
    overflow-y: auto;
  }

  /* Tighten card padding so the stacked dashboard reads compact, not sparse. */
  .client-dashboard-card,
  .cd-upload-card,
  .cd-team { padding: 14px 16px; }
  .client-dashboard-card-title,
  .cd-upload-card-title,
  .cd-team-title { margin-bottom: 10px; }
  .client-dashboard-title-row { margin-bottom: 14px; }
  .client-dashboard-grid { gap: 14px; }

  /* Stack each label over its value so long emails / addresses wrap to full
     width and are never crushed or cut off in a narrow card. */
  .client-dashboard-field,
  .sidebar-dashboard-field {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .client-dashboard-value,
  .sidebar-dashboard-value {
    text-align: left;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* The upload file name truncates with an ellipsis on desktop; on a narrow
     card let it wrap fully so the filename is never cut off. */
  .cd-upload-file-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
  }

  /* Team member names ellipsis-clip on desktop (max-width:80px); on mobile let
     them wrap so a long name is fully visible. Avatars stay inline-wrapping. */
  .cd-team-list { gap: 14px 16px; }
  .cd-team-name {
    max-width: 96px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
  }
}

.cell-saving {
  opacity: 0.6;
}

.client-dashboard-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

.client-dashboard-card-header .client-dashboard-card-title {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.client-dashboard-card-header + .client-dashboard-fields {
  padding-top: 10px;
  border-top: 1px solid var(--border-color, #e2e8f0);
  margin-top: 10px;
}

.client-dashboard-delete-btn {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.client-dashboard-delete-btn:hover {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
}

.client-dashboard-add-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg, #fff);
  border: 2px dashed var(--border-color, #e2e8f0);
  border-radius: 10px;
  padding: 24px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  min-height: 100px;
}

.client-dashboard-add-contact-btn:hover {
  border-color: var(--accent-color, #3b82f6);
  color: var(--accent-color, #3b82f6);
  background: rgba(59, 130, 246, 0.04);
}

/* Confirm modal */
.confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.confirm-modal {
  background: var(--card-bg, #fff);
  border-radius: 12px;
  padding: 24px;
  min-width: 320px;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.confirm-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  margin: 0 0 8px 0;
}

.confirm-modal-message {
  font-size: 13px;
  color: var(--text-secondary, #64748b);
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.confirm-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.confirm-modal-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
}

.confirm-modal-cancel {
  background: var(--hover-bg, #f1f5f9);
  color: var(--text-primary, #334155);
}

.confirm-modal-cancel:hover {
  background: #e2e8f0;
}

.confirm-modal-confirm {
  background: #e74c3c;
  color: #fff;
}

.confirm-modal-confirm:hover {
  background: #c0392b;
}

/* Confirm/Delete modal — tablet & phone height-safety. If a message is ever
   long, cap the modal at 90vh and scroll inside so the title and action buttons
   are never pushed off-screen. Scoped to <=1024px so desktop is unchanged. */
@media (max-width: 1024px) {
  .confirm-modal {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* Confirm/Delete modal — phone sizing. Desktop keeps min-width:320px/
   max-width:400px (shrink-to-content). On phones that 320px floor overflows a
   360px screen, so size it to the viewport and give the overlay breathing room. */
@media (max-width: 480px) {
  .confirm-modal-overlay {
    padding: 16px;
  }
  .confirm-modal {
    /* Subtract the overlay's 16px padding per side so the modal never
       overflows even at 360px (92vw alone + padding would exceed the
       viewport). Caps at 400px on larger phones. */
    width: min(400px, calc(100vw - 32px));
    min-width: 0;
  }
}

/* Dashboard month tabs */
.dashboard-tab-bar {
  display: flex;
  gap: 4px;
  padding: 0 0 10px 0;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.dashboard-tab {
  padding: 4px 12px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 16px;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.dashboard-tab:hover {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--text-primary, #334155);
}

.dashboard-tab.active {
  background: var(--accent-color, #3b82f6);
  border-color: var(--accent-color, #3b82f6);
  color: #fff;
}

.dashboard-tab-content {
  min-height: 40px;
}

.client-dashboard-json {
  background: var(--code-bg, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  padding: 16px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary, #334155);
  overflow-x: auto;
  max-height: 500px;
  overflow-y: auto;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.action-view {
  color: var(--accent-color, #3b82f6);
}

.action-view:hover {
  background: rgba(59, 130, 246, 0.1);
}

.action-delete {
  color: var(--text-secondary, #94a3b8);
}

.action-delete:hover {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.08);
}

/* === Dashboard Left Column === */
.client-dashboard-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* === Dashboard Right Column === */
.client-dashboard-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* === File Upload Card === */
.cd-upload-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cd-upload-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #64748b);
  margin: 0 0 12px 0;
}

.cd-upload-file-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(59, 130, 246, 0.04);
  border: 1px solid rgba(59, 130, 246, 0.12);
  border-radius: 8px;
  margin-bottom: 10px;
}

.cd-upload-file-icon {
  flex-shrink: 0;
  color: var(--accent-color, #3b82f6);
}

.cd-upload-file-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.cd-upload-file-download {
  flex-shrink: 0;
  color: var(--accent-color, #3b82f6);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.cd-upload-file-download:hover {
  background: rgba(59, 130, 246, 0.1);
}

.cd-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  border: 2px dashed var(--border-color, #e2e8f0);
  border-radius: 8px;
  background: none;
  color: var(--text-secondary, #94a3b8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  font-family: var(--font-family);
}

.cd-upload-btn:hover {
  border-color: var(--accent-color, #3b82f6);
  color: var(--accent-color, #3b82f6);
  background: rgba(59, 130, 246, 0.04);
}

.cd-upload-btn.uploading {
  opacity: 0.6;
  pointer-events: none;
}

/* === Dashboard Messenger === */
.cd-messenger {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cd-messenger-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.cd-messenger-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #64748b);
  margin: 0;
}

.cd-messenger-people-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
}

.cd-messenger-people-btn:hover {
  color: var(--text-primary, #1e293b);
  background: rgba(0, 0, 0, 0.04);
}

.cd-messenger-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 180px;
  max-height: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.015);
}

.cd-messenger-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, #94a3b8);
  font-size: 13px;
  min-height: 100px;
}

/* Bubbles — reuse messaging patterns */
.cd-bubble {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 82%;
  animation: slideUpFadeIn 0.2s ease backwards;
}

.cd-bubble-own {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.cd-bubble-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.cd-bubble-body {
  background: #e8ecf1;
  border-radius: 10px;
  padding: 7px 11px;
  min-width: 50px;
}

.cd-bubble-own .cd-bubble-body {
  background: #1e3a5f;
  color: #fff;
}

.cd-bubble-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1px;
}

.cd-bubble-sender {
  font-size: 11px;
  font-weight: 600;
  color: #333;
}

.cd-bubble-own .cd-bubble-sender {
  color: rgba(255, 255, 255, 0.85);
}

.cd-bubble-time {
  font-size: 10px;
  color: #999;
}

.cd-bubble-own .cd-bubble-time {
  color: rgba(255, 255, 255, 0.65);
}

.cd-bubble-content {
  font-size: 13px;
  color: #222;
  line-height: 1.4;
  word-break: break-word;
  white-space: pre-wrap;
}

.cd-bubble-own .cd-bubble-content {
  color: #fff;
}

.cd-bubble-attachment {
  margin-top: 4px;
}

.cd-bubble-attachment a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--accent-color, #3b82f6);
  text-decoration: none;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}

.cd-bubble-own .cd-bubble-attachment a {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

/* Messenger input bar */
.cd-messenger-input {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-color, #e2e8f0);
  background: var(--card-bg, #fff);
}

.cd-messenger-textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font-family);
  color: var(--text-primary, #1e293b);
  background: rgba(0, 0, 0, 0.02);
  outline: none;
  min-height: 36px;
  max-height: 100px;
  line-height: 1.4;
  transition: border-color 0.15s;
}

.cd-messenger-textarea:focus {
  border-color: var(--accent-color, #3b82f6);
}

.cd-messenger-textarea::placeholder {
  color: var(--text-secondary, #94a3b8);
}

.cd-messenger-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.cd-messenger-btn:hover {
  color: var(--accent-color, #3b82f6);
  background: rgba(59, 130, 246, 0.08);
}

.cd-messenger-btn.active {
  color: var(--accent-color, #3b82f6);
}

/* Mention dropdown inside messenger */
.cd-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-height: 200px;
  overflow-y: auto;
  z-index: 50;
}

.cd-mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary, #1e293b);
  transition: background 0.1s;
}

.cd-mention-item:hover {
  background: rgba(59, 130, 246, 0.06);
}

.cd-mention-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.cd-mention-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === Team List === */
.cd-team {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cd-team-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #64748b);
  margin: 0 0 14px 0;
}

.cd-team-list {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.cd-team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 60px;
}

.cd-team-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--border-color, #e2e8f0);
}

.cd-team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cd-team-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-team-role {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #94a3b8);
  text-align: center;
}

@media (max-width: 768px) {
  .client-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Responsive — 8 tiers ===== */

/* Tier 2: Desktop (1440px) */
@media (max-width: 1440px) {
  :root {
    --sidebar-width: 250px;
  }
}

/* Tier 3: Small desktop (1280px) */
@media (max-width: 1280px) {
  :root {
    --sidebar-width: 240px;
  }
  .card {
    padding: 0 10px 10px;
  }
}

/* Tier 4: Laptop (1024px) */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 220px;
  }
  .logo {
    font-size: 18px;
  }
  .card {
    padding: 0 30px 30px;
    border-radius: 18px;
  }
  .content-area {
    padding: 10px;
  }
}

/* Tier 5: Tablet landscape (900px) */
@media (max-width: 900px) {
  :root {
    --sidebar-width: 200px;
  }
  .logo {
    font-size: 17px;
  }
  .card {
    padding: 0 24px 24px;
    border-radius: 16px;
  }
  /* Drop the fixed 320px sidebar column on tablet: at 769-1024px it squeezed
     the main content, so collapse the client dashboard to one column here
     rather than waiting for the 768px breakpoint. */
  .client-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile hamburger button — hidden on desktop, shown on mobile */
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  margin-right: 6px;
  color: var(--text-primary, #1e293b);
  cursor: pointer;
  border-radius: 6px;
}
.mobile-menu-btn:hover { background: rgba(0,0,0,0.06); }

/* Mobile sidebar backdrop */
.mobile-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 998;
}
body.sidebar-open .mobile-sidebar-backdrop { display: block; }

/* Tier 6: Tablet portrait (768px) — slide-in drawer pattern.
   Replaces the prior icon-only collapsed strip, which silently
   disappeared on real mobile viewports because the collapse toggle
   was display:none and the sidebar parent had no explicit visibility. */
@media (max-width: 768px) {
  .top-header {
    padding: 0 12px;
    height: 44px;
    min-height: 44px;
  }
  .mobile-menu-btn { display: inline-flex; align-items: center; }

  .sidebar {
    position: fixed;
    top: 44px;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 80vw;
    min-width: 0;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 999;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    overflow-y: auto;
    /* The rail has no background of its own — on desktop it sits ON the page and
       inherits it, so transparent looks right. As a mobile drawer it floats OVER
       content, and page text showed straight through the nav labels. Paint it
       with the same token the page uses (theme.css calls this "page / sidebar
       background"), so it stays correct in both themes. */
    background: var(--color-primary);
  }
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* Inside the open drawer we want full labels back, not icon-only.
     Deliberately NOT re-showing `.nav-tag` here: `.sidebar.collapsed` outranks
     this single-class rule (2 classes vs 1), so a persisted desktop collapse
     leaves the drawer 44px wide with its labels still hidden. Forcing the pills
     back on in that state spills them straight out of the rail — they follow
     the labels instead, visible whenever the labels are. */
  .nav-label { opacity: 1; width: auto; }
  .nav-item { justify-content: flex-start; padding: 10px 16px; gap: 12px; }
  .nav-group-header { display: flex; }
  .sidebar-collapse-row { display: none; }
  .collapse-btn { display: none; }

  .logo-text { display: inline; }
  .logo-360 { font-size: 16px; }

  .card {
    padding: 0 20px 20px;
    border-radius: 14px;
  }
  .content-area {
    padding: 8px;
  }
}

/* Tier 7: Large phone (480px) */
@media (max-width: 480px) {
  :root {
    --sidebar-collapsed: 50px;
  }
  .top-header {
    padding: 0 10px;
    height: 40px;
    min-height: 40px;
  }
  .user-avatar-btn {
    width: 32px;
    height: 32px;
  }
  .user-dropdown {
    width: 260px;
  }
  .sidebar {
    padding: 10px 0 10px 6px;
  }
  .card {
    padding: 0 16px 16px;
    border-radius: 12px;
  }
  .content-area {
    padding: 6px;
  }
  .page-placeholder {
    font-size: 24px;
  }
}

/* Tier 8: Small phone (360px) */
@media (max-width: 360px) {
  :root {
    --sidebar-collapsed: 44px;
  }
  .top-header {
    padding: 0 8px;
  }
  .user-dropdown {
    width: 240px;
    right: -8px;
  }
  .sidebar {
    padding: 8px 0 8px 4px;
  }
  .card {
    padding: 0 12px 12px;
    border-radius: 10px;
  }
  .content-area {
    padding: 4px;
  }
  .nav-icon svg {
    width: 16px;
    height: 16px;
  }
  .page-placeholder {
    font-size: 20px;
  }
}

/* ============================================================
   Mobile Phase 1 — shell-level touch-target minimums.
   Applies below 768px. The 480px / 360px tiers above may shrink
   some controls further; that's intentional (smaller viewport ⇒
   tighter layout) but never below WCAG minimums.
   ============================================================ */
@media (max-width: 768px) {
  .collapse-btn {
    width: 36px;
    height: 36px;
  }
  .user-avatar-btn {
    width: 40px;
    height: 40px;
  }
}

/* ============================================================
   Tools menu — desktop "Book George" loading state lives inline
   (set by tools.js). Mobile bottom tab bar + Tools sheet below.
   The bottom bar is hidden on desktop and shown at ≤768px to
   match the slide-in drawer breakpoint.
   ============================================================ */

/* Mobile bottom bar (hidden on desktop) */
.mobile-bottom-bar {
  display: none;
}

.mobile-tools-backdrop,
.mobile-tools-sheet {
  display: none;
}

@media (max-width: 768px) {
  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--color-secondary, #fff);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-bottom-btn {
    flex: 1;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #555;
    font-size: 11px;
    font-weight: 500;
    padding: 6px 4px;
    transition: color 0.15s;
  }
  .mobile-bottom-btn svg {
    color: #777;
    transition: color 0.15s;
  }
  .mobile-bottom-btn:active,
  .mobile-bottom-btn[aria-expanded="true"] {
    color: var(--color-accent-dark, #d4791a);
  }
  .mobile-bottom-btn[aria-expanded="true"] svg,
  .mobile-bottom-btn:active svg {
    color: var(--color-accent-dark, #d4791a);
  }

  /* Keep page content clear of the fixed bottom bar */
  .content-area {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px);
  }

  /* Tools bottom sheet */
  .mobile-tools-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  body.tools-sheet-open .mobile-tools-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-tools-sheet {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
    background: var(--color-secondary, #fff);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.24s ease;
  }
  body.tools-sheet-open .mobile-tools-sheet {
    transform: translateY(0);
  }
  .mobile-tools-grabber {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.18);
    margin: 4px auto 8px;
  }
  .mobile-tools-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #1a1a1a;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
  }
  .mobile-tools-item:active {
    background: rgba(0, 0, 0, 0.06);
  }
  .mobile-tools-item .nav-icon {
    color: var(--color-accent-dark, #d4791a);
  }
}

/* ── Shared rich-text editor (rich-editor.js / window.mountRichEditor) ── */
.rte-host { display: block; }
.rte-host .ql-toolbar.ql-snow { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.rte-host .ql-container.ql-snow { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.rte-host .ql-editor { min-height: 96px; font: inherit; }
/* Custom emoji toolbar button face */
.rte-host .ql-toolbar .ql-emoji { font-size: 15px; line-height: 1; }
/* Dependency-free emoji picker popup (mirrors .dd-emoji-pop) */
.rte-emoji-pop {
  position: absolute;
  z-index: 9000;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-width: 280px;
}
.rte-emoji-pop button {
  border: none; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 4px; border-radius: 6px;
}
.rte-emoji-pop button:hover { background: #f3f4f6; }
/* Fallback contenteditable placeholder */
.rte-fallback-editor { min-height: 96px; padding: 8px; border: 1px solid var(--border-color,#ddd); border-radius: 8px; font: inherit; }
.rte-fallback-editor:empty:before { content: attr(data-ph); color: #9ca3af; }

/* ── #134 dark mode overrides ─────────────────────────────── */
/* Phase B (theme.css § 3) already flipped the shell chrome that could not wait:
   .nav-item and its hover/active states, .mobile-menu-btn:hover, .card's
   background, .user-avatar-btn, .user-avatar-placeholder, .dashboard-tab's
   hover/active, .confirm-modal-cancel:hover, and the shared scrims
   (.confirm-modal-overlay, .mobile-sidebar-backdrop, .mobile-tools-backdrop).
   None of those are repeated here. What is left is everything else in this file
   written with bare literals: the user dropdown, the sidebar furniture, the
   department sidebar, the whole client dashboard + messenger, the mobile tools
   sheet, and the rich-text emoji popup. */

/* ── User dropdown ─────────────────────────────────────────────────────── */
html[data-theme="dark"] .user-dropdown {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .user-dropdown-photo-placeholder {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}
html[data-theme="dark"] .user-dropdown-photo-overlay {
  background: rgba(0, 0, 0, 0.62);
}
html[data-theme="dark"] .user-dropdown-name { color: var(--text-primary); }
html[data-theme="dark"] .user-dropdown-username { color: var(--text-muted); }
/* The role pill uses --color-accent-dark as its foreground; on a 15% orange
   tint over slate that darker orange loses too much, so use the light one. */
html[data-theme="dark"] .user-dropdown-role {
  color: var(--color-accent-light);
}
html[data-theme="dark"] .user-dropdown-divider {
  background: rgba(148, 163, 184, 0.16);
}
html[data-theme="dark"] .user-dropdown-action { color: var(--text-primary); }
html[data-theme="dark"] .user-dropdown-action:hover {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .user-dropdown-action.signout { color: #f87171; }

/* ── Sidebar furniture ─────────────────────────────────────────────────── */
html[data-theme="dark"] .logo { color: var(--text-primary); }
html[data-theme="dark"] .collapse-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}
html[data-theme="dark"] .collapse-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
/* Group headers are buttons now, so they take the same ink and hover as any
   other nav item rather than the quiet-caption treatment they used to carry. */
html[data-theme="dark"] .nav-group-header {
  color: var(--text-secondary);
}
html[data-theme="dark"] .nav-group-header:hover {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .nav-group-label {
  color: inherit;
}
html[data-theme="dark"] .nav-group-chevron {
  color: rgba(226, 232, 240, 0.35);
}
/* Maturity pills: the light tints are near-white on a dark rail and the dark
   text vanishes into them. Invert the recipe — a low-alpha ground of the same
   hue, with the light 400-weight of that hue as the text. */
html[data-theme="dark"] .nav-group-tag,
html[data-theme="dark"] .nav-tag {
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
}
html[data-theme="dark"] .stage-alpha      { background: rgba(239, 68, 68, 0.18);  color: #f87171; }
html[data-theme="dark"] .stage-building   { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
html[data-theme="dark"] .stage-inprogress { background: rgba(6, 182, 212, 0.18);  color: #22d3ee; }
html[data-theme="dark"] .stage-editing    { background: rgba(59, 130, 246, 0.18); color: #60a5fa; }
html[data-theme="dark"] .stage-beta       { background: rgba(139, 92, 246, 0.18); color: #a78bfa; }
html[data-theme="dark"] .stage-production { background: rgba(34, 197, 94, 0.18);  color: #4ade80; }

/* Training rollout — the state colours lift a step on dark so they keep the
   same read against a near-black rail as they do against a white one. */
html[data-theme="dark"] .nav-item.has-training { color: #fdba74; background: rgba(249, 115, 22, 0.16); }
html[data-theme="dark"] .nav-item.has-training:hover { background: rgba(249, 115, 22, 0.26); }
html[data-theme="dark"] .nav-item.no-training  { color: #86efac; background: rgba(34, 197, 94, 0.16); }
html[data-theme="dark"] .nav-item.no-training:hover { background: rgba(34, 197, 94, 0.26); }
html[data-theme="dark"] .nav-item.active.has-training { color: #fdba74; }
html[data-theme="dark"] .nav-item.active.no-training  { color: #86efac; }

html[data-theme="dark"] .rollout-notice { background: #0b1220; border-color: #1e293b; }
html[data-theme="dark"] .rollout-notice-title { color: #e2e8f0; }
html[data-theme="dark"] .rollout-notice-body { color: #94a3b8; }
html[data-theme="dark"] .rollout-notice-hint { color: #64748b; }

/* ── Department sidebar ────────────────────────────────────────────────── */
html[data-theme="dark"] .dept-sidebar { background: var(--card-bg); }
html[data-theme="dark"] .dept-sidebar .msg-sidebar-title {
  color: var(--text-primary);
}
html[data-theme="dark"] .dept-sidebar .msg-back-btn {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .dept-sidebar .msg-back-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .dept-sidebar-item { color: var(--text-secondary); }
html[data-theme="dark"] .dept-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}
/* Active item sits on brand orange; white drops to ~2:1 there. */
html[data-theme="dark"] .dept-sidebar-item.active { color: #0b1220; }

/* ── Content card + month selector ─────────────────────────────────────── */
/* theme.css sets .card's background; its 8% black shadow still needs deepening
   or the card has no lift off the page at all. */
html[data-theme="dark"] .card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .dept-month-nav:hover {
  background: rgba(96, 165, 250, 0.14);
}

/* ── Admin sheets skinned to the department look ───────────────────────── */
/* The sticky header is a near-white slab (#f8f9fb) and the row hover is an even
   paler blue (#f6f8fc) — both are the single most jarring light patches left in
   the app, since they sit directly on top of every admin table. The header
   becomes the raised surface, the hover the standard hover slate. */
html[data-theme="dark"] .proposal-grid .proagri-sheet-header,
html[data-theme="dark"] .dept-dashboard-main .proagri-sheet-header {
  background: #273449;
}
html[data-theme="dark"] .proposal-grid .proagri-sheet-header-cell,
html[data-theme="dark"] .dept-dashboard-main .proagri-sheet-header-cell {
  color: var(--text-muted);
}
html[data-theme="dark"] .proposal-grid .proagri-sheet-row:hover,
html[data-theme="dark"] .dept-dashboard-main .proagri-sheet-row:hover {
  background: #334155;
}

/* The two booking-form pills are the only status classes defined in this file
   (the other ~80 live in proagri-sheet.css). Same treatment: keep the hue,
   flip to a translucent tint with a light foreground. */
html[data-theme="dark"] .proagri-sheet-status-booking_form_review {
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.42);
}
html[data-theme="dark"] .proagri-sheet-status-booking_form_changes {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.42);
}

/* ── Client dashboard ──────────────────────────────────────────────────── */
html[data-theme="dark"] .client-dashboard-card,
html[data-theme="dark"] .cd-upload-card,
html[data-theme="dark"] .cd-team,
html[data-theme="dark"] .cd-messenger {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* --border-color-light is declared nowhere, so this row divider always resolves
   to its 4% black fallback and disappears entirely on dark. */
html[data-theme="dark"] .client-dashboard-field {
  border-bottom-color: rgba(148, 163, 184, 0.12);
}
html[data-theme="dark"] .client-dashboard-trash-btn:hover,
html[data-theme="dark"] .client-dashboard-delete-btn:hover,
html[data-theme="dark"] .action-delete:hover {
  color: #f87171;
  background: rgba(239, 68, 68, 0.16);
}
html[data-theme="dark"] .client-dashboard-trash-btn:hover {
  border-color: rgba(239, 68, 68, 0.35);
}
html[data-theme="dark"] .client-dashboard-add-contact-btn:hover,
html[data-theme="dark"] .cd-upload-btn:hover {
  background: rgba(96, 165, 250, 0.12);
}
html[data-theme="dark"] .action-view:hover {
  background: rgba(96, 165, 250, 0.14);
}
/* --code-bg is declared nowhere either, so the raw-JSON block always resolves
   to #f8fafc — a full-width white slab in the middle of the dark dashboard.
   Matches the recessed well theme.css gives the Quill editor. */
html[data-theme="dark"] .client-dashboard-json {
  background: #111c2e;
}

/* ── Upload card ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .cd-upload-file-info {
  background: rgba(96, 165, 250, 0.10);
  border-color: rgba(96, 165, 250, 0.24);
}
html[data-theme="dark"] .cd-upload-file-download:hover {
  background: rgba(96, 165, 250, 0.14);
}

/* ── Messenger ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] .cd-messenger-people-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
/* The message list is a 1.5% black wash in light mode — a barely-there recess.
   Over a dark card that reads as nothing, so deepen it into a real well. */
html[data-theme="dark"] .cd-messenger-messages {
  background: rgba(0, 0, 0, 0.22);
}
html[data-theme="dark"] .cd-bubble-avatar {
  border-color: rgba(148, 163, 184, 0.2);
}
/* Incoming bubbles sit ON that well, so they take the raised surface. Own
   bubbles keep their navy identity but are lifted, because #1e3a5f against a
   dark well no longer separates from the incoming bubble. */
html[data-theme="dark"] .cd-bubble-body {
  background: #273449;
}
html[data-theme="dark"] .cd-bubble-own .cd-bubble-body {
  background: #2a4a72;
}
html[data-theme="dark"] .cd-bubble-sender { color: var(--text-secondary); }
html[data-theme="dark"] .cd-bubble-time { color: var(--text-muted); }
html[data-theme="dark"] .cd-bubble-content { color: var(--text-primary); }
html[data-theme="dark"] .cd-bubble-attachment a {
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .cd-messenger-textarea {
  background: rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .cd-messenger-btn:hover {
  background: rgba(96, 165, 250, 0.14);
}
html[data-theme="dark"] .cd-mention-dropdown {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .cd-mention-item:hover {
  background: rgba(96, 165, 250, 0.12);
}
html[data-theme="dark"] .cd-mention-avatar,
html[data-theme="dark"] .cd-team-avatar {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Mobile shell ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html[data-theme="dark"] .sidebar {
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.6);
  }
  html[data-theme="dark"] .mobile-bottom-bar {
    border-top-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
  }
  html[data-theme="dark"] .mobile-bottom-btn { color: var(--text-secondary); }
  html[data-theme="dark"] .mobile-bottom-btn svg { color: var(--text-muted); }
  /* The pressed/expanded state uses --color-accent-dark, which theme.css only
     lifts to #e08a2a — enough as a gradient stop, thin as a 11px label. */
  html[data-theme="dark"] .mobile-bottom-btn:active,
  html[data-theme="dark"] .mobile-bottom-btn[aria-expanded="true"],
  html[data-theme="dark"] .mobile-bottom-btn[aria-expanded="true"] svg,
  html[data-theme="dark"] .mobile-bottom-btn:active svg,
  html[data-theme="dark"] .mobile-tools-item .nav-icon {
    color: var(--color-accent-light);
  }
  html[data-theme="dark"] .mobile-tools-sheet {
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.6);
  }
  html[data-theme="dark"] .mobile-tools-grabber {
    background: rgba(148, 163, 184, 0.35);
  }
  html[data-theme="dark"] .mobile-tools-item { color: var(--text-primary); }
  html[data-theme="dark"] .mobile-tools-item:active {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* ── Shared rich-text editor popup ─────────────────────────────────────── */
/* theme.css covers Quill's own chrome; this emoji popup is ours. */
html[data-theme="dark"] .rte-emoji-pop {
  background: var(--card-bg);
  border-color: var(--ui-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .rte-emoji-pop button:hover {
  background: #334155;
}

/* Manual "run training" picker modal (ui/js/app.js, top-right button). */
.pr-rerun-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pr-rerun-card {
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1e293b);
  border-radius: 14px;
  padding: 24px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.pr-rerun-card h3 { margin: 0 0 6px; font-size: 17px; }
.pr-rerun-card p { margin: 0 0 16px; font-size: 13px; color: var(--text-secondary, #64748b); }
.pr-rerun-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pr-rerun-option {
  text-align: left;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.pr-rerun-option:hover:not(:disabled) { border-color: var(--color-accent-light); background: rgba(245, 166, 35, 0.08); }
.pr-rerun-option:disabled { opacity: .6; cursor: default; }
.pr-rerun-error { color: #dc2626; font-size: 12.5px; margin-bottom: 10px; }
.pr-rerun-cancel {
  border: none;
  background: transparent;
  color: var(--text-secondary, #64748b);
  font: inherit;
  cursor: pointer;
  padding: 6px 0;
}
.pr-rerun-cancel:hover { text-decoration: underline; }

html[data-theme="dark"] .pr-rerun-btn {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #e5e7eb);
}
html[data-theme="dark"] .pr-rerun-option {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}