:root {
  color-scheme: light;
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --text: #1e293b;
  --muted: #64748b;
  --border: #e2e8f0;
  --accent: #0f1f38;
  --accent-dark: #0a1628;
  --active-module-accent: #e8a020;
  --gold: #b45309;
  --red: #b42318;
  --shadow: 0 12px 30px rgba(15, 31, 56, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  overflow-wrap: break-word;
}

.skip-link {
  background: #ffffff;
  border: 2px solid var(--accent);
  border-radius: 6px;
  color: var(--accent-dark);
  font-weight: 900;
  left: 1rem;
  padding: 0.65rem 0.85rem;
  position: fixed;
  top: 0.75rem;
  transform: translateY(-160%);
  transition: transform 0.16s ease;
  z-index: 30;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
  padding: 0.72rem 1rem;
}

button:hover {
  background: var(--accent-dark);
}

button.secondary {
  background: #f1f5f9;
  color: #1e293b;
}

button.secondary:hover {
  background: #e2e8f0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

#app {
  display: grid;
  grid-template-columns: 232px 1fr;
  max-width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
}

.sidebar {
  background: #0f1f38;
  color: #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  min-width: 0;
  overflow-y: auto;
}

.brand {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 1rem;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #e8a020;
  color: #ffffff;
  font-weight: 900;
}

.brand span,
.tenant-switcher,
.quick-module-switcher,
.module-nav span,
.eyebrow,
.panel-heading > span,
.form-status {
  color: var(--muted);
  font-size: 0.82rem;
}

.sidebar .brand span,
.sidebar .tenant-switcher,
.sidebar .quick-module-switcher,
.sidebar .module-nav span {
  color: #94a3b8;
}

.tenant-switcher,
.quick-module-switcher {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
  min-width: 0;
}

.quick-module-switcher {
  display: none;
}

/* Context switcher — collapsed at sidebar bottom */
.sidebar-context-switcher {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-context-switcher summary {
  color: #64748b;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  list-style: none;
  padding: 0.35rem 0;
  text-transform: uppercase;
  user-select: none;
}

.sidebar-context-switcher summary::-webkit-details-marker {
  display: none;
}

.sidebar-context-switcher summary::after {
  content: " ▸";
  opacity: 0.5;
}

.sidebar-context-switcher[open] summary::after {
  content: " ▾";
}

.sidebar-context-switcher .tenant-switcher {
  margin-top: 0.6rem;
}

/* Hide non-workspace sections — tabs removed, workspace is always active */
.workbench-section:not([data-workbench-section="workspace"]) {
  display: none !important;
}

.tenant-switcher select,
.quick-module-switcher select,
input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  min-height: 44px;
  min-width: 0;
  padding: 0.66rem 0.72rem;
}

textarea {
  resize: vertical;
}

.required-field::after {
  color: var(--red);
  content: " *";
  font-weight: 900;
}

.module-nav {
  display: grid;
  flex: 1 1 auto;
  gap: 0.7rem;
  min-width: 0;
  overflow-y: auto;
}

.module-nav-group {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.module-nav-heading {
  display: grid;
  gap: 0.05rem;
  padding: 0 0.15rem 0.12rem;
}

.module-nav-heading strong {
  color: #f1f5f9;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.module-nav-heading span {
  color: #64748b;
  font-size: 0.7rem;
}

.module-item {
  position: relative;
  border-radius: 6px;
  padding: 0.52rem 0.62rem 0.52rem 0.86rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  color: #f1f5f9;
  text-align: left;
  width: 100%;
  min-width: 0;
}

.module-accent {
  position: absolute;
  inset: 0.52rem auto 0.52rem 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
}

.module-item strong {
  display: block;
  font-size: 0.88rem;
  line-height: 1.15;
}

.module-item small {
  color: #94a3b8;
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 0.16rem;
}

.module-item > span:not(.module-accent) {
  display: none;
}

.module-item.active {
  background: #fef3c7;
  border-color: #fde68a;
  color: #0f1f38;
}

.module-item.active span {
  color: #92400e;
}

.module-item.active small {
  color: #92400e;
}

.workbench-section[hidden] {
  display: none;
}

main {
  padding: 1.4rem;
  display: grid;
  gap: 1rem;
  align-content: start;
  min-width: 0;
}

.topbar,
.panel,
.metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  max-width: 100%;
  min-width: 0;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  border-radius: 8px;
  padding: 1.1rem;
}

.topbar-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: end;
  min-width: 0;
}

.topbar > *,
.panel-heading > * {
  min-width: 0;
}

.view-mode-toggle {
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.2rem;
}

.view-mode-toggle button {
  background: transparent;
  color: #1e3a5c;
  font-size: 0.78rem;
  min-width: 0;
  padding: 0.42rem 0.62rem;
}

.view-mode-toggle button:hover {
  background: #e2e8f0;
  color: var(--text);
}

.view-mode-toggle button.active {
  background: var(--accent);
  color: #fff;
}

/* ── Breadcrumb bar (Phase 1 Session 2) ────────────────────────────────────── */
.breadcrumb-bar {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  color: var(--muted);
  gap: 0;
  flex-wrap: wrap;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
}

.breadcrumb-item a {
  color: var(--muted);
  text-decoration: none;
  border-radius: 3px;
  padding: 0.1rem 0.2rem;
  transition: color 0.15s, background 0.15s;
}

.breadcrumb-item a:hover {
  color: var(--text);
  background: var(--surface-2);
}

.breadcrumb-item a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.breadcrumb-current {
  color: var(--text);
  font-weight: 500;
  padding: 0.1rem 0.2rem;
}

.breadcrumb-sep {
  margin: 0 0.3rem;
  color: var(--border);
  font-size: 0.85rem;
  user-select: none;
}

body.focus-mode .metrics,
body.focus-mode #moduleMetrics,
body.focus-mode .start-here,
body.focus-mode .demo-story-grid,
body.focus-mode .guide-snapshot,
body.focus-mode .module-guide {
  display: none;
}

/* Legacy UI elements that the Phase 2 unified sidebar + per-app progressive
   disclosure replaced. They were previously hidden with inline
   `style="display:none"` in index.html, but the app's CSP (`style-src 'self'`,
   no `'unsafe-inline'`) blocks inline style attributes — so they rendered
   stacked on top of the new UI. Hide them here, in the stylesheet, instead.
   `!important` keeps them hidden regardless of mode. */
.quick-module-switcher,
.module-nav,
#viewModeToggle,
.focus-strip,
.legacy-ops-ghost {
  display: none !important;
}

body.focus-mode .workbench-tabs,
body.details-mode .workbench-tabs,
body.focus-mode .module-workbench > .panel-heading {
  display: none;
}

body.details-mode .calm-shell {
  display: none;
}

body.details-mode .metrics,
body.details-mode .focus-strip,
body.details-mode .start-here,
body.details-mode .global-ops-drawer,
body.details-mode .module-workbench > .panel-heading,
body.details-mode .module-guide,
body.details-mode .mini-metrics {
  display: none;
}

body.details-mode .module-workbench {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.calm-shell {
  display: block;
}

.calm-layout {
  display: grid;
  gap: 0.8rem;
  margin-inline: auto;
  max-width: 1180px;
  padding-bottom: 5rem;
  width: 100%;
}

.calm-header {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(15, 31, 56, 0.05);
  display: flex;
  gap: 0.85rem;
  justify-content: space-between;
  padding: 0.9rem 1rem;
}

.calm-header h2 {
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  line-height: 1.05;
  margin: 0.08rem 0 0.25rem;
}

.calm-header p:last-child {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}

.calm-utility-action {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0.52rem 0.75rem;
}

.calm-top-nav {
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.28rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 0.28rem;
  position: sticky;
  top: 0.5rem;
  z-index: 10;
}

.calm-top-nav button {
  background: transparent;
  color: #1e293b;
  min-height: 40px;
  min-width: 0;
  padding: 0.5rem 0.45rem;
}

.calm-top-nav button.active {
  background: var(--accent);
  color: #fff;
}

.calm-home,
.calm-app-surface,
.calm-more {
  display: grid;
  gap: 0.8rem;
}

.calm-card-queue {
  display: grid;
  gap: 0.75rem;
}

.calm-card-queue.compact {
  gap: 0.65rem;
}

.calm-priority-panel {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 31, 56, 0.06);
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem);
  padding: 1rem;
}

.calm-priority-copy h3 {
  font-size: clamp(1.55rem, 3.2vw, 2.55rem);
  line-height: 1.04;
  margin: 0.08rem 0 0.4rem;
}

.calm-priority-copy > p {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.4;
  margin: 0 0 0.75rem;
}

.calm-priority-side {
  align-content: start;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.55rem;
  justify-items: stretch;
  padding: 0.8rem;
}

.calm-priority-side small {
  color: var(--muted);
  font-weight: 900;
  text-align: center;
}

.calm-count.large {
  font-size: 1.55rem;
  height: 3.1rem;
  justify-self: center;
  min-width: 3.1rem;
}

.calm-explainer {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calm-explainer div {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.65rem;
}

.calm-explainer strong {
  font-size: 0.82rem;
}

.calm-explainer span,
.calm-route-kicker {
  color: var(--muted);
  line-height: 1.45;
}

.calm-explainer.compact {
  grid-template-columns: 1fr;
}

.calm-day-stats,
.calm-day-plan {
  display: grid;
  gap: 0.5rem;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.calm-day-stats article,
.calm-day-plan article {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.62rem 0.7rem;
}

.calm-day-stats span,
.calm-day-plan article > span {
  color: var(--accent-dark);
  font-size: 1.1rem;
  font-weight: 900;
}

.calm-day-stats strong,
.calm-day-plan strong {
  color: var(--text);
}

.calm-day-plan small {
  color: var(--muted);
  line-height: 1.35;
}

.calm-secondary-queue {
  display: grid;
  gap: 0.7rem;
}

.calm-work-card,
.calm-review-card,
.calm-native-surface,
.calm-clear-state,
.calm-hub-card,
.calm-action-card,
.calm-app-heading,
.calm-more-picker button,
.calm-restore-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 31, 56, 0.04), 0 6px 16px rgba(15, 31, 56, 0.05);
}

/* Subtle hover elevation for clickable cards — lifts the surface from "flat"
   without changing layout (transform only). */
.calm-hub-card,
.calm-action-card,
.calm-work-card,
.approval-card {
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.calm-hub-card:hover,
.calm-action-card:hover,
.calm-work-card:not(.compact):hover {
  box-shadow: 0 2px 4px rgba(15, 31, 56, 0.06), 0 14px 30px rgba(15, 31, 56, 0.10);
  transform: translateY(-1px);
  border-color: #cbd5e1;
}

.calm-work-card {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.9rem;
}

.calm-work-card.compact {
  box-shadow: none;
  padding: 0.78rem;
}

.calm-work-card.urgent {
  border-color: #f59e0b;
  box-shadow: inset 4px 0 0 #f59e0b, 0 10px 24px rgba(15, 31, 56, 0.07);
}

.calm-work-card h3,
.calm-review-card h4,
.calm-app-heading h3 {
  font-size: 1.25rem;
  line-height: 1.1;
  margin: 0.1rem 0 0.3rem;
}

.calm-work-card p,
.calm-review-card p,
.calm-app-heading p,
.calm-action-card span,
.calm-hub-card small,
.calm-more-picker span {
  color: var(--muted);
}

.calm-count {
  align-items: center;
  background: #fef3c7;
  border-radius: 999px;
  color: #0f1f38;
  display: inline-flex;
  font-weight: 900;
  height: 2.4rem;
  justify-content: center;
  margin-bottom: 0.5rem;
  min-width: 2.4rem;
}

.calm-card-actions,
.calm-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.calm-hub-grid,
.calm-action-grid,
.calm-more-picker {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calm-hub-card,
.calm-action-card,
.calm-more-picker button {
  color: var(--text);
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 1rem;
  text-align: left;
}

.calm-more-heading {
  display: grid;
  gap: 0.25rem;
}

.calm-more-heading h3 {
  font-size: 1.2rem;
  margin: 0;
}

.calm-hub-card {
  background: #fff;
}

.calm-hub-card span {
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.calm-hub-card:hover,
.calm-action-card:hover,
.calm-more-picker button:hover,
.calm-more-picker button.active {
  background: #fef3c7;
  color: #0f1f38;
}

.calm-app-heading {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem;
}

.calm-heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.calm-review-card {
  display: grid;
  gap: 0.85rem;
  padding: 1.35rem;
}

.calm-native-surface {
  display: grid;
  gap: 1rem;
  padding: 1.35rem;
}

.calm-triage-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.6fr) minmax(15rem, 0.8fr);
}

.calm-triage-main {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.calm-triage-main h4 {
  font-size: 1.55rem;
  line-height: 1.1;
  margin: 0;
}

.calm-triage-main p {
  color: var(--muted);
  margin: 0;
}

.calm-decision-panel {
  align-content: start;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
}

.calm-decision-panel div,
.calm-money-amount {
  display: grid;
  gap: 0.15rem;
}

.calm-decision-panel span,
.calm-money-amount span,
.calm-money-amount small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.calm-decision-panel strong {
  color: var(--text);
  line-height: 1.2;
}

.calm-evidence-strip {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calm-evidence-strip article {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem;
}

.calm-evidence-strip span {
  color: var(--muted);
  line-height: 1.45;
}

.calm-money-amount {
  background: #0f1f38;
  border-radius: 8px;
  color: #fff;
  padding: 1rem;
}

.calm-money-amount strong {
  font-size: 2.25rem;
  line-height: 1;
}

.calm-money-amount span,
.calm-money-amount small {
  color: #e2e8f0;
}

.calm-restore-panel {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.85rem 1rem;
}

.calm-restore-panel strong {
  display: block;
}

.calm-restore-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.calm-review-status {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.calm-review-subtitle {
  font-weight: 800;
}

.calm-clear-state {
  display: grid;
  gap: 0.35rem;
  min-height: 13rem;
  place-items: center;
  padding: 2rem;
  text-align: center;
}

.calm-clear-state strong {
  font-size: 2rem;
}

.calm-clear-state.compact {
  min-height: 9rem;
}

/* In calm/focus mode the app's content is rendered into the calm shell
   (renderCalmShell → renderCalmAppSurface). The deep module workbench is the
   "full view" surface and must stay hidden, or it stacks under the calm view. */
body.focus-mode .module-workbench {
  display: none;
}

body.focus-mode .global-ops-drawer {
  margin-top: 0.15rem;
}

.global-ops-drawer {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.global-ops-drawer > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0.9rem 1rem;
}

.global-ops-drawer > summary::-webkit-details-marker {
  display: none;
}

.global-ops-drawer > summary::after {
  color: var(--muted);
  content: "Open";
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.global-ops-drawer[open] > summary {
  border-bottom: 1px solid var(--border);
}

.global-ops-drawer[open] > summary::after {
  content: "Close";
}

.global-ops-drawer small {
  color: var(--muted);
  display: block;
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

.global-ops-drawer .workspace,
.global-ops-drawer .audit-panel {
  box-shadow: none;
  margin: 1rem;
}

.dense-work-groups {
  display: grid;
  gap: 0.85rem;
}

.app-secondary-groups {
  margin-top: 0.85rem;
}

.dense-work-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.dense-work-group > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  list-style: none;
  padding: 0.9rem 1rem;
}

.dense-work-group > summary::-webkit-details-marker {
  display: none;
}

.dense-work-group > summary::after {
  color: var(--muted);
  content: "+";
  font-weight: 900;
}

.dense-work-group[open] > summary {
  border-bottom: 1px solid var(--border);
}

.dense-work-group[open] > summary::after {
  content: "-";
}

.dense-work-group > summary span {
  color: var(--accent-dark);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.dense-work-group > summary strong {
  color: var(--text);
}

.dense-work-group > .app-view-card,
.dense-work-group > .split-workspace,
.dense-work-group > .provider-registry-card,
.dense-work-group > .integration-checklist-card,
.dense-work-group > .provider-diagnostics-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

.app-secondary-work > .vault-collection-grid,
.app-secondary-work > .vault-ops-grid,
.app-secondary-work > .knowledge-grid,
.app-secondary-work > .crm-command-grid {
  padding: 0.85rem;
}

.product-app-shell {
  background: #ffffff;
  border: 1px solid var(--border);
  border-left: 5px solid var(--active-module-accent);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 31, 56, 0.07);
  display: grid;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  padding: 0.85rem;
}

.product-shell-support {
  display: none;
}

.product-shell-hero {
  align-items: center;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.product-shell-hero h2 {
  font-size: 1.18rem;
  margin: 0.05rem 0;
}

.product-shell-hero p:not(.eyebrow) {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
  max-width: 860px;
}

.product-shell-nav {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.product-shell-nav button {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: 0.12rem;
  min-height: 82px;
  min-width: 0;
  padding: 0.62rem;
  text-align: left;
}

.product-shell-nav button:hover {
  background: #f1f5f9;
  border-color: var(--border);
}

.product-shell-nav button.active {
  background: #fffbeb;
  border-color: var(--active-module-accent);
  border-bottom: 3px solid var(--active-module-accent);
}

.product-shell-nav span {
  color: var(--accent-dark);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.product-shell-nav strong {
  font-size: 0.9rem;
  line-height: 1.15;
}

.product-shell-nav small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.product-shell-metrics {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-shell-metrics article {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  min-width: 0;
  padding: 0.55rem 0.65rem;
}

.product-shell-metrics span {
  color: var(--muted);
  display: block;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.product-shell-metrics strong {
  display: block;
  font-size: 1rem;
  margin-top: 0.1rem;
  overflow-wrap: anywhere;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 1.55rem;
  line-height: 1.15;
}

h2 {
  font-size: 1.15rem;
  line-height: 1.2;
  margin: 0;
}

h3 {
  font-size: 0.95rem;
  line-height: 1.3;
  margin: 0 0 0.55rem;
}

h4 {
  font-size: 0.88rem;
  margin: 0;
}

.eyebrow {
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 800;
}

.policy-chip {
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0a1628;
  max-width: 100%;
  padding: 0.45rem 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.metrics,
.workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem;
  max-width: 100%;
  min-width: 0;
}

.metric-card {
  border-radius: 7px;
  padding: 0.65rem;
}

.metric-card strong {
  font-size: 1rem;
}

.metric-card span {
  font-size: 0.72rem;
}

.focus-strip {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 100%;
  min-width: 0;
}

.focus-item {
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--active-module-accent);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 31, 56, 0.06);
  color: var(--text);
  display: grid;
  gap: 0.1rem;
  grid-template-columns: auto 1fr;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  text-align: left;
}

.focus-item:hover {
  background: #f8fafc;
}

.focus-item.primary-focus {
  background: #0f1f38;
  border-color: #1a3a5c;
  color: #fff;
}

.focus-item.primary-focus span,
.focus-item.primary-focus small {
  color: rgba(255, 255, 255, 0.72);
}

.focus-item span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.focus-item strong {
  font-size: 1.15rem;
  grid-row: span 2;
}

.focus-item small {
  color: var(--muted);
  font-size: 0.78rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.start-here {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
}

.start-here-heading {
  align-items: start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.start-here-actions,
.demo-story-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: end;
}

.demo-story-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.active-beta-path {
  background: #f6faf8;
  border: 1px solid #fde68a;
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
}

.active-beta-path h3 {
  margin-bottom: 0.25rem;
}

.active-beta-path p {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.active-beta-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: end;
}

.active-beta-actions .compact-action,
.active-beta-actions button {
  margin-top: 0;
}

.beta-path-steps {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.beta-path-steps article {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: auto 1fr;
  min-width: 0;
  padding: 0.65rem;
}

.beta-path-steps article.current {
  border-color: var(--active-module-accent);
  box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.12);
}

.beta-path-steps article.done {
  background: #eef9f3;
  border-color: #b7dac6;
}

.beta-path-steps article > span {
  background: #1e293b;
  border-radius: 999px;
  color: #fff;
  display: inline-grid;
  font-size: 0.72rem;
  font-weight: 900;
  height: 1.45rem;
  place-items: center;
  width: 1.45rem;
}

.beta-path-steps article.done > span {
  background: var(--accent);
}

.beta-path-steps strong,
.beta-path-steps small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.beta-path-steps small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
  margin-top: 0.12rem;
}

.demo-story-card,
.daily-work-panel {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.75rem;
}

.demo-story-card.active {
  border-color: var(--active-module-accent);
  box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.12);
}

.demo-story-card p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.demo-success-state,
.active-success-state,
.scenario-success-state,
.beta-command-success {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #1e3a5c;
  display: grid;
  gap: 0.18rem;
  padding: 0.55rem;
}

.active-success-state {
  margin-top: 0.5rem;
}

.scenario-success-state.pending {
  background: #fff8e8;
  border-color: #e6bd75;
}

.demo-success-state strong,
.active-success-state strong,
.scenario-success-state strong,
.beta-command-success strong {
  font-size: 0.76rem;
  text-transform: uppercase;
}

.demo-success-state span,
.active-success-state span,
.scenario-success-state span,
.beta-command-success span {
  font-size: 0.78rem;
  line-height: 1.3;
}

.beta-completion-criteria {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.beta-completion-criteria span {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.28rem 0.45rem;
}

.scenario-criteria {
  margin-top: 0.65rem;
}

.demo-progress-list {
  display: grid;
  gap: 0.32rem;
}

.demo-progress-list span {
  align-items: center;
  background: #f4f7f5;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  display: flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 0.3rem;
  line-height: 1.2;
  padding: 0.28rem 0.45rem;
}

.demo-progress-list span::before {
  background: #cbd5d1;
  border-radius: 999px;
  content: "";
  display: inline-block;
  height: 0.45rem;
  width: 0.45rem;
}

.demo-progress-list span.done {
  background: #eef9f3;
  border-color: #b7dac6;
  color: #0a1628;
}

.demo-progress-list span.done::before {
  background: var(--accent);
}

.demo-script-steps {
  color: #334155;
  display: grid;
  font-size: 0.78rem;
  gap: 0.2rem;
  line-height: 1.3;
  margin: 0;
  padding-left: 1.15rem;
}

.story-number {
  background: #1e293b;
  border-radius: 999px;
  color: #fff;
  display: inline-grid;
  font-size: 0.75rem;
  height: 1.45rem;
  margin-right: 0.35rem;
  place-items: center;
  width: 1.45rem;
}

.module-workbench {
  display: grid;
  gap: 0.75rem;
}

.mini-metrics,
.module-columns,
.app-blueprint,
.template-grid,
.starter-module-grid {
  display: grid;
  gap: 0.75rem;
}

.mini-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 100%;
  min-width: 0;
}

.module-guide {
  display: grid;
  gap: 0.65rem;
}

.guide-card {
  align-items: stretch;
  background: #0f1f38;
  border: 1px solid #1a3a5c;
  border-radius: 8px;
  color: #fff;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(220px, 0.9fr) minmax(300px, 1.3fr) auto;
  padding: 0.9rem;
}

.guide-card .eyebrow,
.guide-card p,
.guide-card small {
  color: rgba(255, 255, 255, 0.72);
}

.guide-copy {
  display: grid;
  gap: 0.25rem;
  align-content: center;
  min-width: 0;
}

.guide-copy h3 {
  font-size: 1.05rem;
  margin: 0;
}

.guide-copy p {
  font-size: 0.86rem;
  line-height: 1.4;
}

.guide-steps {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-steps article {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: auto 1fr;
  min-width: 0;
  padding: 0.6rem;
}

.guide-steps article > span {
  background: #fef3c7;
  border-radius: 999px;
  color: #0f1f38;
  display: inline-grid;
  font-size: 0.72rem;
  font-weight: 900;
  height: 1.45rem;
  place-items: center;
  width: 1.45rem;
}

.guide-steps strong,
.guide-steps small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.guide-steps small {
  font-size: 0.75rem;
  line-height: 1.3;
  margin-top: 0.12rem;
}

.guide-actions {
  align-content: center;
  display: grid;
  gap: 0.45rem;
  min-width: 150px;
}

.guide-actions .compact-action {
  margin-top: 0;
}

.guide-snapshot {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-snapshot article {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem;
}

.guide-snapshot strong {
  display: block;
  font-size: 1rem;
}

.guide-snapshot span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  margin-top: 0.15rem;
  text-transform: uppercase;
}

.module-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-blueprint {
  grid-template-columns: 1.25fr 1fr 1fr;
}

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

.starter-module-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.port-candidate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.mini-metric {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  padding: 0.55rem 0.65rem;
}

.mini-metric strong {
  display: block;
  font-size: 0.96rem;
}

.mini-metric span,
.compact-item span {
  color: var(--muted);
  font-size: 0.78rem;
}

.compact-list {
  display: grid;
  gap: 0.5rem;
}

.blueprint-copy {
  color: #1e293b;
  font-size: 0.9rem;
  line-height: 1.45;
}

.muted-copy {
  color: var(--muted);
  margin-top: 0.4rem;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.chip {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #1e293b;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.28rem 0.55rem;
}

.template-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fafafa;
  padding: 0.75rem;
}

.starter-module-card,
.port-candidate-card {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafafa;
  padding: 0.85rem;
}

.port-candidate-card {
  border-top: 4px solid var(--active-module-accent);
}

.starter-module-card p,
.starter-module-card span,
.port-candidate-card p,
.port-candidate-card span,
.starter-module-detail dd {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.starter-module-detail {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.starter-module-detail div {
  display: grid;
  gap: 0.15rem;
}

.starter-module-detail dt {
  color: #1e293b;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.template-card p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
  margin-top: 0.3rem;
}

.template-library-card {
  align-items: start;
}

.ported-feature-panel {
  display: grid;
  gap: 0.75rem;
}

.ported-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.ported-feature-card {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  border-left: 4px solid var(--active-module-accent);
  padding: 0.85rem;
}

.ported-feature-card p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.template-action-stack {
  display: grid;
  gap: 0.45rem;
  justify-items: end;
}

.compact-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  padding: 0.54rem 0.6rem;
}

.compact-item strong,
.compact-item span {
  display: block;
}

.compact-button {
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.compact-button:hover,
.compact-button.selected {
  background: #f1f5f9;
  border-color: #fde68a;
}

.compact-action {
  margin-top: 0.55rem;
  min-height: 44px;
  padding: 0.55rem 0.72rem;
}

.transition-pending {
  display: inline-block;
  margin-top: 0.65rem;
}

.app-workspace {
  display: grid;
  gap: 0.75rem;
}

body.focus-mode .app-workspace {
  align-content: start;
}

.ux-task-header {
  align-items: center;
  background: #0f1f38;
  border: 1px solid #1a3a5c;
  border-left: 5px solid var(--active-module-accent);
  border-radius: 8px;
  color: #fff;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.9rem;
}

.ux-task-header .eyebrow,
.ux-task-header p,
.ux-task-header small {
  color: rgba(255, 255, 255, 0.72);
}

.ux-task-header h2,
.ux-task-header h3,
.ux-task-header p {
  margin: 0;
}

.ux-task-header h2,
.ux-task-header h3 {
  font-size: 1.12rem;
}

.ux-task-header small {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  margin-top: 0.28rem;
}

.dense-orientation-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.dense-orientation-strip span {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.28rem 0.55rem;
  text-transform: capitalize;
}

.ux-task-actions {
  align-items: end;
  display: grid;
  gap: 0.45rem;
  justify-items: end;
  min-width: 160px;
}

.ux-task-actions .tag {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.app-section-tabs {
  align-items: center;
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  padding: 0.25rem;
  position: sticky;
  top: 0.6rem;
  z-index: 4;
}

.app-section-tabs button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  text-align: center;
}

.app-section-tabs button:hover {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 2px 6px rgba(15, 31, 56, 0.04);
  color: var(--text);
}

.app-section-tabs button.active {
  background: #fff;
  border-color: var(--active-module-accent);
  border-bottom: 3px solid var(--active-module-accent);
  box-shadow: 0 4px 10px rgba(15, 31, 56, 0.06);
  color: var(--accent);
}

.app-section-tabs strong,
.app-section-tabs span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-section-tabs span {
  color: var(--muted);
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  margin-top: 0.12rem;
}

.app-section-tabs small {
  color: var(--active-module-accent);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.app-section-tabs button.active small {
  color: #fff;
}

.app-section-tabs::-webkit-scrollbar {
  display: none;
}

body.focus-mode .app-section-tabs span,
body.focus-mode .app-section-tabs small,
body.details-mode .app-section-tabs span,
body.details-mode .app-section-tabs small {
  display: none;
}

body.focus-mode .app-section-tabs button,
body.details-mode .app-section-tabs button {
  min-height: 38px;
  padding: 0.46rem 0.55rem;
}

body.focus-mode .olivia-focus-secondary,
body.details-mode .olivia-focus-secondary,
body.focus-mode .compact-callback-board,
body.details-mode .compact-callback-board,
body.focus-mode .olivia-live-workbench .olivia-bridge-panel,
body.details-mode .olivia-live-workbench .olivia-bridge-panel,
body.focus-mode .olivia-live-workbench .olivia-outbound-panel,
body.details-mode .olivia-live-workbench .olivia-outbound-panel {
  display: none;
}

.app-view-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafafa;
  padding: 0.9rem;
}

.app-view-card .app-view-card {
  background: #fff;
  box-shadow: none;
}

.dense-app-summary {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0.8rem;
}

.dense-app-summary article {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.14rem;
  min-width: 0;
  padding: 0.68rem 0.75rem;
}

.dense-app-summary span,
.dense-app-summary small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.dense-app-summary strong {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.12;
}

.mailroom-focus-toolbar {
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #fde68a;
  border-radius: 8px;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.75rem;
}

.mailroom-focus-toolbar strong,
.mailroom-focus-toolbar span {
  display: block;
}

.mailroom-focus-toolbar span {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 0.12rem;
}

.mailroom-command-card.mailroom-focused {
  padding: 0.75rem;
}

.mailroom-command-card.mailroom-focused > .section-title-row {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  margin-bottom: 0.75rem;
}

.queue-list {
  display: grid;
  gap: 0.55rem;
}

.queue-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  padding: 0.75rem;
}

.queue-button {
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.queue-button:hover,
.queue-button.selected {
  background: #f1f5f9;
  border-color: #fde68a;
}

.queue-item p,
.pipeline-card p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
  margin-top: 0.25rem;
}

.queue-item span,
.pipeline-card span {
  color: var(--muted);
  display: inline-block;
  font-size: 0.78rem;
  margin-top: 0.28rem;
}

.queue-status {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: end;
}

.pipeline-grid,
.split-workspace,
.filing-grid,
.docs-folder-grid,
.scribe-summary-grid,
.scribe-route-grid,
.scribe-lifecycle-grid,
.source-mix-grid,
.insider-calendar-grid,
.insider-channel-grid,
.vault-collection-grid,
.vault-ops-grid,
.crm-command-grid,
.ledger-grid,
.knowledge-grid,
.template-library-grid,
.inventory-grid,
.campaign-grid {
  display: grid;
  gap: 0.75rem;
}

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

.pipeline-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.docs-folder-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scribe-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scribe-route-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scribe-lifecycle-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.source-mix-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.75rem;
}

.insider-calendar-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.insider-channel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.insider-brief-editor,
.insider-campaign-detail {
  margin: 0.85rem 0;
}

.insider-campaign-lifecycle,
.campaign-detail-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.75rem;
}

.insider-campaign-lifecycle article {
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #f8fafc;
  padding: 0.65rem;
}

.insider-campaign-lifecycle article.pending {
  border-color: #e4c56d;
  background: #fff8df;
}

.insider-campaign-lifecycle article.ready {
  border-color: #96b7dc;
  background: #eef6ff;
}

.insider-campaign-lifecycle article.complete {
  border-color: #9dc6b0;
  background: #f0fbf4;
}

.insider-campaign-lifecycle span,
.campaign-detail-grid span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.insider-campaign-lifecycle strong,
.campaign-detail-grid strong {
  color: #0f1f38;
  display: block;
  font-size: 0.86rem;
  line-height: 1.25;
  margin-top: 0.18rem;
}

.insider-campaign-lifecycle small {
  color: #475569;
  display: block;
  font-size: 0.76rem;
  line-height: 1.35;
  margin-top: 0.28rem;
}

/* ── Shared work packet (insider / vault / docs / flow) ── */
.insider-schedule-packet,
.vault-publish-packet,
.docs-filing-packet,
.flow-activation-packet {
  background: #fafafa;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--active-module-accent);
  border-radius: 8px;
  display: grid;
  gap: 0.65rem;
  margin: 0.7rem 0;
  min-width: 0;
  padding: 0.75rem;
}

.insider-schedule-packet .section-title-row span,
.vault-publish-packet .section-title-row span,
.docs-filing-packet .section-title-row span,
.flow-activation-packet .section-title-row span,
.insider-packet-actions span, .insider-packet-evidence span, .insider-packet-evidence li,
.vault-packet-actions span, .vault-packet-evidence span, .vault-packet-evidence li,
.docs-packet-actions span, .docs-packet-evidence span, .docs-packet-evidence li,
.flow-packet-actions span, .flow-packet-steps span, .flow-packet-steps li {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.insider-packet-readiness, .insider-packet-actions, .insider-packet-evidence,
.vault-packet-readiness, .vault-packet-actions, .vault-packet-evidence,
.flow-packet-readiness, .flow-packet-actions, .flow-packet-steps {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.docs-packet-destination, .docs-packet-actions, .docs-packet-evidence {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.insider-packet-actions, .insider-packet-evidence,
.vault-packet-actions, .vault-packet-evidence,
.docs-packet-actions, .docs-packet-evidence,
.flow-packet-actions, .flow-packet-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.insider-packet-readiness article, .insider-packet-actions article, .insider-packet-evidence > div,
.vault-packet-readiness article, .vault-packet-actions article, .vault-packet-evidence > div,
.docs-packet-destination article, .docs-packet-actions article, .docs-packet-evidence > div,
.flow-packet-readiness article, .flow-packet-actions article, .flow-packet-steps > div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.6rem;
}

.insider-packet-readiness span, .insider-packet-evidence h5,
.vault-packet-readiness span, .vault-packet-evidence h5,
.docs-packet-destination span, .docs-packet-evidence h5,
.flow-packet-readiness span, .flow-packet-steps h5 {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.insider-packet-readiness article.complete, .insider-packet-actions article.ready, .insider-packet-actions article.done,
.vault-packet-readiness article.complete, .vault-packet-actions article.ready, .vault-packet-actions article.done,
.docs-packet-actions article.ready, .docs-packet-actions article.done,
.flow-packet-readiness article.complete, .flow-packet-actions article.ready, .flow-packet-actions article.done {
  border-color: var(--active-module-accent);
}

.insider-packet-actions article.pending, .vault-packet-actions article.pending,
.docs-packet-actions article.pending, .flow-packet-actions article.pending {
  border-color: #b26a00;
}

.insider-packet-actions article.blocked, .vault-packet-actions article.blocked,
.docs-packet-actions article.blocked, .flow-packet-actions article.blocked {
  opacity: 0.72;
}

.insider-packet-evidence p, .insider-packet-evidence ul,
.vault-packet-evidence p, .vault-packet-evidence ul,
.docs-packet-evidence p, .docs-packet-evidence ul,
.flow-packet-steps p, .flow-packet-steps ul {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
}

.insider-packet-evidence li, .vault-packet-evidence li,
.docs-packet-evidence li, .flow-packet-steps li {
  margin-left: 1rem;
}
/* ── End shared work packet ── */

.vault-collection-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0.75rem;
}

.vault-draft-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 0.85rem;
  padding: 0.8rem;
}

.vault-ops-grid,
.crm-command-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0.75rem;
}

.vault-review-grid,
.vault-review-lifecycle {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vault-review-lifecycle {
  margin: 0.75rem 0;
}

.vault-review-lifecycle article {
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #f8fafc;
  padding: 0.65rem;
}

.vault-review-lifecycle article.pending {
  border-color: #e4c56d;
  background: #fff8df;
}

.vault-review-lifecycle article.ready {
  border-color: #96b7dc;
  background: #eef6ff;
}

.vault-review-lifecycle article.complete {
  border-color: #9dc6b0;
  background: #f0fbf4;
}

.vault-review-lifecycle span,
.vault-review-grid span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.vault-review-lifecycle strong,
.vault-review-grid strong {
  color: #0f1f38;
  display: block;
  font-size: 0.88rem;
  margin-top: 0.18rem;
}

.vault-review-lifecycle small {
  color: #475569;
  display: block;
  font-size: 0.76rem;
  line-height: 1.35;
  margin-top: 0.28rem;
}

.vault-review-detail {
  margin-bottom: 0.85rem;
}


.crm-account-plan-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0.85rem 0;
}

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

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

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

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

.readiness-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.beta-readiness-panel,
.beta-scenario-panel,
.beta-feedback-panel {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.beta-scenario-panel,
.beta-feedback-panel {
  margin-top: 1rem;
  margin-bottom: 0;
}

.beta-feedback-queue {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 0.85rem;
}

.beta-gate-grid,
.beta-scenario-grid {
  display: grid;
  gap: 0.65rem;
}

.beta-gate-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.beta-scenario-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.front-desk-board,
.channel-mix-grid {
  display: grid;
  gap: 0.65rem;
}

.front-desk-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0.75rem;
}

.front-desk-script-desk .front-desk-board {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

.channel-mix-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.provider-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.integration-checklist-grid,
.provider-diagnostics-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split-workspace {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pipeline-column {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #f8fafc;
  padding: 0.65rem;
}

.pipeline-card {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  padding: 0.65rem;
}

.filing-card,
.ledger-card,
.folder-card,
.scribe-summary-card,
.scribe-route-card,
.scribe-lifecycle-card,
.source-mix-card,
.channel-plan-card,
.vault-collection-card,
.vault-ops-panel,
.crm-command-panel,
.crm-account-plan-panel,
.inventory-card,
.campaign-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 0.8rem;
}

.inventory-card.out_of_stock {
  border-color: #fca5a5;
}

.inventory-card.reorder {
  border-color: #fcd34d;
}

.inventory-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 0.75rem;
  margin: 0.6rem 0 0;
}

.inventory-card dt {
  color: var(--muted, #64748b);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.inventory-card dd {
  margin: 0;
  font-weight: 600;
}

.ledger-reorder-alerts {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fffbeb;
  padding: 0.7rem 0.85rem;
  margin: 0.75rem 0;
  display: grid;
  gap: 0.5rem;
}

.ledger-reorder-alerts.ledger-reorder-clear {
  background: #f0fdf4;
  color: #166534;
}

.crm-account-plan-panel h4 {
  margin-bottom: 0.55rem;
}

.front-desk-board-card,
.channel-mix-card {
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #fafafa;
  min-width: 0;
  padding: 0.65rem;
}

.front-desk-board-card .section-title-row {
  margin-bottom: 0.45rem;
}

.mailroom-summary-grid,
.mailbox-grid {
  display: grid;
  gap: 0.75rem;
}

.mailroom-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0.75rem;
}

.mailbox-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mailroom-summary-card,
.mailbox-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  min-width: 0;
  padding: 0.75rem;
}

.mailroom-summary-card span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mailroom-summary-card strong {
  display: block;
  font-size: 1.35rem;
  margin-top: 0.2rem;
}

.mailroom-summary-card p,
.mailbox-card p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
  margin-top: 0.35rem;
}

.channel-mix-card {
  background: #f8fafc;
}

.channel-mix-card span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.channel-mix-card strong {
  color: #0f1f38;
  display: block;
  font-size: 1.15rem;
  margin-top: 0.3rem;
}

.channel-mix-card p {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.25rem;
}

.scribe-summary-card {
  background: #f8fafc;
}

.scribe-summary-card span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.scribe-summary-card strong {
  color: #0f1f38;
  display: block;
  font-size: 1.05rem;
  margin-top: 0.3rem;
}

.calendar-slot {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.75rem;
  text-align: left;
  width: 100%;
}

.calendar-slot:hover {
  background: #f1f5f9;
  border-color: #fde68a;
}

.calendar-slot span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.calendar-slot strong {
  color: #0f1f38;
}

.calendar-slot p,
.calendar-slot small {
  color: var(--muted);
  line-height: 1.3;
}

.calendar-slot p {
  font-size: 0.82rem;
}

.calendar-slot small {
  font-size: 0.74rem;
}

.ledger-summary-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 0.8rem;
}

.ledger-product-home {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.ledger-product-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ledger-product-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #0f1f38;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.75rem;
  text-align: left;
}

.ledger-product-card:hover {
  border-color: #fde68a;
  box-shadow: 0 8px 20px rgba(15, 31, 56, 0.08);
}

.ledger-product-card span,
.ledger-product-card small,
.ledger-product-card em,
.ledger-account-row span,
.ledger-account-row small {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.ledger-product-card strong {
  font-size: 1.15rem;
}

.ledger-product-card p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.32;
  margin: 0;
}

.ledger-product-card em {
  color: #1d6b4f;
}

.ledger-books-layout {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.ledger-profile-forms {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ledger-profile-form {
  align-items: end;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(145px, 0.9fr) repeat(3, minmax(0, 1fr)) auto;
  min-width: 0;
  padding: 0.7rem;
}

.ledger-profile-form h4 {
  margin: 0.1rem 0 0;
}

.ledger-invoice-editor {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.8rem;
}

.ledger-product-task-form,
.ledger-profile-edit-form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.75rem;
}

.ledger-product-task-form {
  background: #f8fafc;
}

.ledger-payment-target,
.ledger-document-preview {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.6rem;
}

.ledger-document-preview {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
}

.ledger-document-preview small {
  color: var(--muted);
  grid-column: 1 / -1;
}

.ledger-vendor-profile-card {
  display: grid;
  gap: 0.55rem;
}

.ledger-close-center,
.ledger-bank-import-shape {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.8rem;
}

.ledger-close-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ledger-close-status {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #e8a020;
  border-radius: 7px;
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.62rem;
}

.ledger-close-status.needs_review,
.ledger-close-status.needs_evidence,
.ledger-close-status.pending {
  border-left-color: #b26a00;
}

.ledger-close-status span,
.ledger-close-status small,
.ledger-import-columns span,
.ledger-bank-preview-row small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ledger-close-status strong {
  color: #0f1f38;
  font-size: 1.05rem;
}

.ledger-close-lists,
.ledger-import-guardrails {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ledger-close-lists div,
.ledger-import-next-step,
.ledger-close-packet {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.65rem;
}

.ledger-close-lists span,
.ledger-import-next-step span,
.ledger-import-guardrails span,
.ledger-close-packet span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.32;
}

.ledger-close-packet {
  gap: 0.6rem;
}

.ledger-close-packet h4 {
  margin: 0.1rem 0;
}

.ledger-close-packet-reports {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ledger-close-packet-reports span {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 0.28rem 0.48rem;
  text-transform: uppercase;
}

.ledger-import-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ledger-import-columns span {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0.28rem 0.48rem;
}

.ledger-bank-preview-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.ledger-bank-preview-row {
  align-items: center;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  display: grid;
  gap: 0.45rem;
  grid-template-columns: 105px minmax(150px, 1.3fr) minmax(115px, 0.9fr) minmax(90px, 0.7fr) 95px 110px;
  min-width: 0;
  padding: 0.58rem 0.65rem;
  text-align: left;
  width: 100%;
}

.ledger-bank-preview-row:last-child {
  border-bottom: 0;
}

.ledger-bank-preview-row:hover {
  background: #f1f5f9;
}

.ledger-bank-preview-row span,
.ledger-bank-preview-row strong,
.ledger-bank-preview-row em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ledger-bank-preview-row em {
  color: #0f1f38;
  font-style: normal;
  font-weight: 800;
}

.ledger-import-guardrails {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ledger-import-guardrails span {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 0.55rem;
}

.ledger-books-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  min-width: 0;
  padding: 0.75rem;
}

.ledger-account-list {
  display: grid;
  gap: 0.4rem;
}

.ledger-posting-rules {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.5rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
}

.ledger-account-row {
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: 58px minmax(0, 1fr) 82px 98px;
  min-width: 0;
  padding: 0.52rem 0.6rem;
}

.ledger-account-row strong {
  min-width: 0;
}

.ledger-account-row em {
  color: #0f1f38;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.ledger-check-register {
  overflow: hidden;
}

.mini-register {
  max-height: 310px;
  overflow: auto;
}

.ledger-print-packet {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  margin-top: 0.6rem;
  padding: 0.6rem;
}

.ledger-print-packet span {
  color: var(--muted);
  font-size: 0.8rem;
}

.daily-work-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.operator-workspace {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  margin-bottom: 0.85rem;
}

.operator-workspace.olivia-console,
.operator-workspace.crm-next-touch-workspace {
  grid-template-columns: minmax(0, 1.35fr) minmax(230px, 0.85fr) minmax(230px, 0.85fr);
}

.olivia-product-console {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding: 0.8rem;
}

.olivia-console-hero {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
}

.olivia-console-hero h4 {
  margin: 0.1rem 0;
}

.olivia-console-hero span,
.olivia-console-grid span,
.olivia-console-grid p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.olivia-console-status,
.olivia-console-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.olivia-console-status article,
.olivia-console-grid article,
.olivia-console-lower section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  min-width: 0;
  padding: 0.62rem;
}

.olivia-console-status span,
.olivia-console-grid span {
  display: block;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.olivia-console-status strong,
.olivia-console-grid strong {
  color: #0f1f38;
  display: block;
  margin-top: 0.15rem;
}

.olivia-console-lower {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.olivia-admin-knowledge {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.olivia-admin-knowledge section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  min-width: 0;
  padding: 0.62rem;
}

.olivia-settings-editor {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.75rem;
}

.olivia-settings-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.olivia-settings-grid.hours {
  grid-template-columns: minmax(160px, 0.5fr) minmax(220px, 0.8fr) minmax(0, 1.2fr);
}

.olivia-settings-grid.admin {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.olivia-appointment-board {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
  padding: 0.75rem;
}

.olivia-appointment-grid {
  align-items: start;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(260px, 0.9fr) minmax(220px, 0.75fr) minmax(220px, 0.75fr);
}

.olivia-appointment-form,
.olivia-appointment-list {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.65rem;
}

.olivia-appointment-list h5 {
  margin: 0.1rem 0 0;
}

.olivia-appointment-guardrails {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.olivia-appointment-guardrails span {
  background: #fef9c3;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #0f1f38;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.45rem;
}

.olivia-call-log-board,
.call-disposition-form {
  display: grid;
  gap: 0.65rem;
}

.olivia-call-log-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.olivia-call-log-grid section,
.call-disposition-form {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  min-width: 0;
  padding: 0.65rem;
}

.olivia-call-log-guardrails {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.olivia-call-log-guardrails span {
  background: #f1f5f9;
  border: 1px solid #dbe4ee;
  border-radius: 999px;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.45rem;
}

.olivia-handoff-packet {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.65rem;
  padding: 0.72rem;
}

.olivia-handoff-packet h4 {
  margin: 0.08rem 0;
}

.olivia-handoff-grid,
.olivia-handoff-paths,
.olivia-handoff-actions {
  display: grid;
  gap: 0.5rem;
}

.olivia-handoff-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.olivia-handoff-paths,
.olivia-handoff-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.olivia-handoff-grid article,
.olivia-handoff-paths article,
.olivia-handoff-actions > div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.55rem;
}

.olivia-handoff-grid span,
.olivia-handoff-paths span,
.olivia-handoff-actions span,
.olivia-handoff-grid small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.olivia-handoff-grid span {
  font-weight: 900;
  text-transform: uppercase;
}

.operator-workspace.scribe-capture-workspace,
.operator-workspace.ledger-create-workspace,
.operator-workspace.crm-create-workspace,
.operator-workspace.vault-create-workspace {
  align-items: start;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
}

.operator-workspace.full-feature-workspace {
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
}

.operator-workspace.insider-workspace,
.operator-workspace.flow-workspace,
.operator-workspace.vault-workspace,
.operator-workspace.docs-workspace,
.operator-workspace.control-workspace {
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.9fr) minmax(240px, 0.9fr);
}

.operator-panel,
.thread-detail-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 0;
  padding: 0.85rem;
}

.operator-panel {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.operator-list-panel {
  padding: 0.75rem;
}

.operator-scroll-list {
  max-height: 520px;
  overflow: auto;
  padding-right: 0.15rem;
}

.operator-scroll-list.mini {
  max-height: 275px;
}

.operator-hero-line,
.capture-meter,
.caller-profile,
.accounting-workflow-strip,
.work-path-list {
  display: grid;
  gap: 0.5rem;
}

.operator-hero-line {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.65rem;
}

.operator-hero-line span,
.thread-body-preview,
.work-path-list span,
.accounting-workflow-strip span,
.capture-meter span,
.caller-profile span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.thread-body-preview {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem;
}

.operator-action-strip {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.caller-profile {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.caller-profile div,
.work-path-list article,
.accounting-workflow-strip article {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  min-width: 0;
  padding: 0.65rem;
}

.scribe-template-studio,
.olivia-scenario-picker,
.olivia-answer-console {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem;
}

.template-picker-row {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.template-search-row {
  align-items: end;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: minmax(190px, 1fr) minmax(0, auto);
}

.template-search-row label {
  display: grid;
  gap: 0.25rem;
}

.template-search-row label span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.template-category-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: end;
}

.template-pick-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 0.25rem;
  min-height: 92px;
  min-width: 0;
  padding: 0.7rem;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.template-pick-card:hover,
.template-pick-card:focus-visible {
  border-color: var(--active-module-accent);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.template-pick-card.active {
  border-color: var(--active-module-accent);
  box-shadow: inset 0 0 0 1px var(--active-module-accent), 0 10px 22px rgba(15, 23, 42, 0.08);
}

.template-pick-card strong {
  color: #0f1f38;
  font-size: 0.9rem;
}

.template-pick-card span,
.template-pick-card em,
.template-pick-card small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.template-pick-card small {
  color: var(--active-module-accent);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.template-pick-card em {
  font-style: normal;
  font-weight: 800;
}

.caller-profile strong,
.work-path-list strong,
.accounting-workflow-strip strong {
  color: #0f1f38;
  display: block;
  overflow-wrap: anywhere;
}

.capture-meter {
  align-items: center;
  background: #0f1f38;
  border-radius: 8px;
  color: #fff;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr);
  padding: 0.75rem;
}

.capture-meter.compact {
  background: #f8fafc;
  color: var(--text);
}

.capture-meter span {
  color: rgba(255, 255, 255, 0.72);
}

.capture-meter.compact span {
  color: var(--muted);
}

.record-dot {
  background: #ef4444;
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.16);
  display: inline-block;
  height: 0.68rem;
  width: 0.68rem;
}

.record-dot.idle {
  background: #16a34a;
  box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.14);
}

.recording-control-row,
.phone-control-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.phone-control-row .compact-action {
  min-height: 44px;
}

.scribe-product-session {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.65rem;
  margin: 0.75rem 0;
  padding: 0.75rem;
}

.scribe-session-primary {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
}

.scribe-session-primary h4 {
  margin: 0.1rem 0;
}

.scribe-session-primary span,
.scribe-product-grid span,
.scribe-product-grid p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.scribe-session-metrics,
.scribe-product-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.scribe-session-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scribe-session-metrics article,
.scribe-product-grid article {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  min-width: 0;
  padding: 0.58rem;
}

.scribe-session-metrics span,
.scribe-product-grid span {
  display: block;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.scribe-session-metrics strong,
.scribe-product-grid strong {
  color: #0f1f38;
  display: block;
  margin-top: 0.14rem;
}

.scribe-output-command-center {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
}

.scribe-output-command-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.scribe-output-command {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #e8a020;
  border-radius: 7px;
  color: var(--text);
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.58rem;
  text-align: left;
}

.scribe-output-command.needs_transcript,
.scribe-output-command.needs_actions,
.scribe-output-command.save_first {
  border-left-color: #b26a00;
}

.scribe-output-command:hover {
  background: #f1f5f9;
}

.scribe-output-command span,
.scribe-output-command small,
.scribe-usage-settings-grid span,
.scribe-output-settings-strip span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.scribe-output-command strong,
.scribe-usage-settings-grid strong,
.scribe-output-settings-strip strong {
  color: #0f1f38;
  font-size: 0.86rem;
}

.scribe-output-command p,
.scribe-usage-settings-grid p,
.scribe-output-settings-strip small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
  margin: 0;
}

.scribe-usage-settings-grid,
.scribe-output-settings-strip {
  display: grid;
  gap: 0.5rem;
}

.scribe-usage-settings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scribe-output-settings-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.scribe-usage-settings-grid article,
.scribe-output-settings-strip article,
.scribe-output-history article {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.58rem;
}

.scribe-output-history {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.45rem;
  padding-top: 0.6rem;
}

.scribe-output-history > strong {
  color: #0f1f38;
  font-size: 0.86rem;
}

.scribe-output-history span,
.scribe-output-history small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

.scribe-output-history span {
  font-weight: 900;
  text-transform: uppercase;
}

.scribe-final-note-packet {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.6rem;
  padding: 0.7rem;
}

.scribe-final-note-packet h5 {
  margin: 0.08rem 0;
}

.scribe-final-note-packet .section-title-row span {
  color: var(--muted);
  font-size: 0.78rem;
}

.scribe-final-sections {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scribe-final-sections article {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.55rem;
}

.scribe-final-sections span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.scribe-import-workbench {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
  padding: 0.75rem;
}

.scribe-import-mode-grid,
.scribe-import-storage-strip {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.scribe-import-mode-grid article,
.scribe-import-storage-strip article,
.scribe-audio-upload-form,
.scribe-import-layout section {
  background: #fff;
  border: 1px solid #dfe7ef;
  border-radius: 7px;
  min-width: 0;
  padding: 0.6rem;
}

.scribe-import-mode-grid span,
.scribe-import-storage-strip span {
  color: var(--muted);
  display: block;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.scribe-import-mode-grid p,
.scribe-import-storage-strip small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.scribe-import-layout {
  align-items: start;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.8fr) minmax(220px, 0.8fr);
}

.scribe-audio-upload-form {
  display: grid;
  gap: 0.55rem;
}

.scribe-import-guardrails {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.scribe-import-guardrails span {
  background: #eef6ff;
  border: 1px solid #d7e8fb;
  border-radius: 999px;
  color: #1d4f7a;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.45rem;
}

input[type="checkbox"],
input[type="radio"] {
  min-height: 44px;
  min-width: 44px;
}

.recording-preview {
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--active-module-accent);
  border-radius: 8px;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
  padding: 0.75rem;
}

.recording-preview strong,
.recording-preview span {
  display: block;
}

.recording-preview span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.recording-preview audio {
  min-width: 0;
  width: 100%;
}

.recording-level-bars {
  align-items: end;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: flex;
  gap: 0.18rem;
  height: 46px;
  justify-content: center;
  padding: 0.55rem;
}

.recording-level-bars span {
  background: linear-gradient(180deg, var(--active-module-accent), #16a34a);
  border-radius: 999px;
  height: var(--bar);
  opacity: 0.82;
  width: 0.28rem;
}

.scribe-review-console,
.structured-note-preview,
.scribe-quality-grid,
.scribe-gap-strip,
.action-item-editor-grid,
.scribe-output-actions {
  display: grid;
  gap: 0.6rem;
}

.action-item-editor-grid {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.65fr);
}

.scribe-output-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scribe-history-panel,
.scribe-template-manager {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.55rem;
  padding-top: 0.75rem;
}

.template-pref-list {
  display: grid;
  gap: 0.5rem;
}

.template-manager-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.55rem;
}

.template-manager-card.selected {
  border-color: var(--active-module-accent);
  box-shadow: inset 3px 0 0 var(--active-module-accent);
}

.template-manager-card .compact-button {
  border: 0;
  padding: 0.25rem;
}

.template-manager-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.template-manager-actions .compact-action {
  margin-top: 0;
}

.template-manager-layout {
  display: grid;
  gap: 0.75rem;
}

.template-authoring-grid,
.front-desk-detail-workspace {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scribe-template-form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
}

.operational-provider-card .provider-meta span:first-child {
  line-height: 1.35;
}

.scribe-gap-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gap-chip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem;
  text-align: left;
}

.gap-chip.active,
.gap-chip:focus-visible,
.gap-chip:hover {
  border-color: var(--active-module-accent);
  outline: none;
}

.gap-chip.critical {
  border-left: 3px solid #dc2626;
}

.gap-chip.watch {
  border-left: 3px solid #f59e0b;
}

.gap-chip span,
.structured-note-preview span,
.quality-card span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.gap-dictation-banner {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #7c2d12;
  display: grid;
  gap: 0.2rem;
  padding: 0.65rem;
}

.gap-dictation-banner span {
  font-size: 0.82rem;
  line-height: 1.35;
}

.structured-note-preview article,
.quality-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.25rem;
  padding: 0.7rem;
}

.structured-note-preview p,
.quality-card p {
  color: #1e293b;
  font-size: 0.85rem;
  line-height: 1.42;
}

.scribe-quality-grid,
.olivia-scorecard {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quality-card {
  border-left: 3px solid #f59e0b;
}

.quality-card.pass {
  border-left-color: #16a34a;
}

.quality-card.missing,
.quality-card.critical {
  border-left-color: #dc2626;
}

.quality-card strong {
  color: #0f1f38;
  font-size: 0.82rem;
  text-transform: capitalize;
}

.phone-status-line {
  align-items: center;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.phone-status-line strong,
.phone-status-line small {
  display: block;
  overflow-wrap: anywhere;
}

.phone-status-line small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.phone-pulse {
  background: #f97316;
  border-radius: 999px;
  box-shadow: 0 0 0 7px rgba(249, 115, 22, 0.13);
  display: inline-block;
  height: 0.78rem;
  width: 0.78rem;
}

.phone-pulse.answered {
  background: #16a34a;
  box-shadow: 0 0 0 7px rgba(22, 163, 74, 0.14);
}

.phone-pulse.hold {
  background: #f59e0b;
  box-shadow: 0 0 0 7px rgba(245, 158, 11, 0.14);
}

.phone-pulse.ended {
  background: #64748b;
  box-shadow: 0 0 0 7px rgba(100, 116, 139, 0.14);
}

.olivia-live-workbench {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
}

.olivia-focus-primary {
  grid-row: span 4;
}

.olivia-operator-summary-strip,
.compact-callback-grid {
  display: grid;
  gap: 0.55rem;
}

.olivia-operator-summary-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.olivia-operator-summary-strip article,
.compact-callback-board {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  min-width: 0;
  padding: 0.7rem;
}

.olivia-operator-summary-strip article {
  display: grid;
  gap: 0.16rem;
}

.olivia-operator-summary-strip span,
.compact-callback-card span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.olivia-operator-summary-strip strong,
.compact-callback-card strong {
  color: #0f1f38;
  display: block;
  font-size: 0.88rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.olivia-operator-summary-strip small,
.compact-callback-card small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.compact-callback-board {
  display: grid;
  gap: 0.55rem;
}

.compact-callback-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-callback-card {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--active-module-accent);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.6rem;
  text-align: left;
}

.compact-callback-card:hover,
.compact-callback-card:focus-visible {
  background: #f1f5f9;
  outline: none;
}

.olivia-whisper-box,
.olivia-bridge-panel,
.olivia-outbound-panel,
.olivia-transcript-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.6rem;
  padding: 0.75rem;
}

.olivia-outbound-panel {
  grid-column: 1 / -1;
}

.olivia-outbound-panel label {
  display: grid;
  gap: 0.25rem;
}

.olivia-outbound-panel label,
.outbound-field-grid label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.outbound-field-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.olivia-whisper-box strong,
.olivia-whisper-box span {
  display: block;
}

.olivia-whisper-box span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.whisper-input-row {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.whisper-suggestions,
.phone-control-row,
.template-category-strip {
  min-width: 0;
}

.whisper-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.bridge-target-row select {
  width: 100%;
}

.bridge-action-grid {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bridge-action {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 0.18rem;
  padding: 0.65rem;
  text-align: left;
}

.bridge-action.primary {
  background: color-mix(in srgb, var(--active-module-accent) 12%, #fff);
  border-color: var(--active-module-accent);
}

.bridge-action span {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.olivia-transcript-panel {
  grid-column: 1 / -1;
}

.call-turn-list {
  display: grid;
  gap: 0.55rem;
}

.call-turn-list article {
  border-radius: 8px;
  display: grid;
  gap: 0.25rem;
  max-width: 86%;
  padding: 0.7rem;
}

.call-turn-list article.olivia {
  background: #fff;
  border: 1px solid var(--border);
  justify-self: start;
}

.call-turn-list article.caller {
  background: #10251e;
  color: #fff;
  justify-self: end;
}

.call-turn-list span {
  color: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  opacity: 0.68;
  text-transform: uppercase;
}

.call-turn-list p {
  font-size: 0.86rem;
  line-height: 1.42;
}

.olivia-scorecard {
  grid-column: 1 / -1;
}

.accounting-workflow-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0.8rem;
}

.work-path-list article {
  display: grid;
  gap: 0.22rem;
}

.guided-empty-state {
  background: #f8fafc;
  border: 1px dashed #c9d7d1;
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem;
}

.guided-empty-state.warning {
  background: #fff9ed;
  border-color: #e9cf99;
}

.guided-empty-state.warning strong {
  color: #7a4a0a;
}

.guided-empty-state.success {
  background: #eef9f3;
  border-color: #b7dac6;
}

.guided-empty-state.success strong {
  color: var(--accent-dark);
}

.guided-empty-state.compact {
  padding: 0.65rem;
}

.guided-empty-state strong {
  color: var(--text);
}

.guided-empty-state span,
.guided-empty-state small {
  font-size: 0.82rem;
  line-height: 1.35;
}

.guided-empty-state small {
  color: #0a1628;
  font-weight: 800;
}

.ledger-daily-grid {
  align-items: start;
}

body.focus-mode .ledger-daily-grid,
body.details-mode .ledger-daily-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
}

:is(body.focus-mode, body.details-mode) .ledger-focus-secondary,
:is(body.focus-mode, body.details-mode) .olivia-focus-secondary,
:is(body.focus-mode, body.details-mode) .scribe-focus-secondary,
:is(body.focus-mode, body.details-mode) .crm-focus-secondary,
:is(body.focus-mode, body.details-mode) .mailroom-focus-secondary {
  display: none;
}

:is(body.focus-mode, body.details-mode) .operator-workspace:is(.olivia-console, .scribe-capture-workspace, .crm-next-touch-workspace, .docs-workspace, .vault-workspace, .flow-workspace, .insider-workspace, .control-workspace) {
  grid-template-columns: minmax(0, 1fr);
}

body.focus-mode .operator-workspace,
body.focus-mode .operator-workspace.control-workspace {
  /* Expanded as single-column in focus mode via :is() rule above */
}

:is(body.focus-mode, body.details-mode) .operator-workspace.mailroom-triage-workspace {
  grid-template-columns: minmax(300px, 0.95fr) minmax(320px, 1.05fr);
}

:is(body.focus-mode, body.details-mode) .operator-workspace:is(.docs-workspace, .vault-workspace, .flow-workspace, .insider-workspace, .control-workspace) > .operator-panel:not(:first-child) {
  display: none;
}

:is(body.focus-mode, body.details-mode) :is(.mailroom-focus-toolbar, .crm-shell-heading),
:is(body.focus-mode, body.details-mode) .mailroom-command-card > .section-title-row {
  display: none;
}

:is(body.focus-mode, body.details-mode) :is(.scribe-summary-grid, .scribe-lifecycle-grid, .source-mix-grid),
:is(body.focus-mode, body.details-mode) .crm-workspace-shell > :is(.docs-filter-form, .pipeline-grid) {
  display: none;
}

:is(body.focus-mode, body.details-mode) :is(.scribe-template-manager, .scribe-history-panel, [data-scribe-audio-metadata-panel], .scribe-quality-grid, .work-path-list.compact-path) {
  display: none;
}

:is(body.focus-mode, body.details-mode) .scribe-capture-workspace.full-feature-workspace {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
}

:is(body.focus-mode, body.details-mode) .scribe-template-studio .template-search-row {
  display: none;
}

:is(body.focus-mode, body.details-mode) .crm-next-touch-workspace .next-touch-row:nth-of-type(n + 3) {
  display: none;
}

:is(body.focus-mode, body.details-mode) .operator-workspace.crm-next-touch-workspace {
  grid-template-columns: minmax(300px, 0.9fr) minmax(320px, 1.1fr);
}

:is(body.focus-mode, body.details-mode) .crm-next-touch-workspace .crm-focus-secondary {
  display: grid;
}

:is(body.focus-mode, body.details-mode) .docs-app-shell > :is(.section-title-row .chip-list, .docs-filter-form, .filing-grid),
:is(body.focus-mode, body.details-mode) .insider-app-shell > :is(.section-title-row .chip-list, .insider-brief-editor, .docs-filter-form, .app-view-card, .insider-channel-grid, .campaign-grid),
:is(body.focus-mode, body.details-mode) .flow-app-shell > :is(.section-title-row .chip-list, .flow-stage-strip, .flow-template-editor, .docs-filter-form, .queue-list),
:is(body.focus-mode, body.details-mode) .vault-app-shell > :is(.section-title-row .chip-list, .vault-collection-grid, .vault-ops-grid, .knowledge-grid) {
  display: none;
}

.operator-shortcut-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel-action-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: end;
}

.finance-focus-list,
.next-touch-list {
  display: grid;
  gap: 0.5rem;
}

.finance-focus-row,
.next-touch-row {
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--active-module-accent);
  color: var(--text);
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.7rem;
  text-align: left;
}

.finance-focus-row:hover,
.next-touch-row:hover {
  background: #f8fafc;
}

.finance-type {
  background: #f1f5f9;
  border-radius: 999px;
  color: #1e293b;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0.25rem 0.45rem;
  text-transform: uppercase;
}

.finance-main,
.finance-meta,
.next-touch-main,
.next-touch-meta,
.mailroom-route-summary {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.mail-draft-editor {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem;
}

.mail-draft-edit-form {
  display: grid;
  gap: 0.65rem;
}

.mail-send-status-strip {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mail-send-status-strip article {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.6rem;
}

.mail-send-status-strip span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mail-send-status-strip strong {
  overflow-wrap: anywhere;
}

.connector-readiness-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.55rem;
  margin-top: 0.55rem;
  padding: 0.65rem;
}

.connector-readiness-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  justify-content: space-between;
}

.connector-readiness-summary span,
.connector-checklist span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.connector-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.connector-checklist span {
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  padding: 0.28rem 0.48rem;
  text-transform: none;
}

.connector-checklist span.missing {
  border-color: #e6bd75;
  background: #fff7e5;
}

.connector-checklist span.configured {
  border-color: #9dc6b0;
  background: #f0fbf4;
}

.docs-filing-editor {
  display: grid;
  gap: 0.75rem;
}

.docs-filing-lifecycle {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.docs-filing-lifecycle article {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #94a3b8;
  border-radius: 8px;
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.6rem;
}

.docs-filing-lifecycle article.complete,
.docs-filing-lifecycle article.ready {
  border-left-color: #e8a020;
}

.docs-filing-lifecycle article.pending {
  border-left-color: #b26a00;
}

.docs-filing-lifecycle span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.docs-filing-lifecycle strong,
.docs-filing-lifecycle small {
  overflow-wrap: anywhere;
}

.docs-filing-lifecycle small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
}


.finance-main small,
.finance-meta small,
.next-touch-main small,
.next-touch-meta small,
.mailroom-route-summary small,
.olivia-call-summary small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.finance-main strong,
.next-touch-main strong {
  overflow-wrap: anywhere;
}

.finance-meta,
.next-touch-meta {
  justify-items: end;
  text-align: right;
}

.crm-next-action-rail {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crm-next-action-rail article,
.crm-mini-timeline,
.crm-contact-profile {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.7rem;
}

.crm-next-action-rail span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-next-action-rail strong {
  color: #1e293b;
  font-size: 0.88rem;
}

.crm-contact-profile {
  margin: 0.75rem 0;
}

.crm-relationship-brief {
  background: #fafafa;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--active-module-accent);
  border-radius: 8px;
  display: grid;
  gap: 0.7rem;
  margin: 0.75rem 0;
  min-width: 0;
  padding: 0.8rem;
}

.crm-relationship-brief .section-title-row span,
.crm-brief-grid small,
.crm-brief-actions span,
.crm-brief-lower li {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.36;
}

.crm-brief-grid,
.crm-brief-actions,
.crm-brief-lower {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crm-brief-actions,
.crm-brief-lower {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-brief-grid article,
.crm-brief-actions article,
.crm-brief-lower > div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.65rem;
}

.crm-brief-grid span,
.crm-brief-lower h5 {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-brief-actions article.ready {
  border-color: var(--active-module-accent);
}

.crm-brief-actions article.needed {
  border-color: #b26a00;
}

.crm-brief-actions article.blocked {
  opacity: 0.72;
}

.crm-brief-lower ul {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}

.crm-brief-lower li {
  margin-left: 1rem;
}


.crm-next-touch-lifecycle,
.crm-account-follow-up-form {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.6rem;
  margin: 0.75rem 0;
  padding: 0.75rem;
}

.crm-next-touch-lifecycle {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crm-next-touch-lifecycle article {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid #94a3b8;
  border-radius: 8px;
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.6rem;
}

.crm-next-touch-lifecycle article.complete {
  border-left-color: #e8a020;
}

.crm-next-touch-lifecycle article.pending {
  border-left-color: #b26a00;
}

.crm-next-touch-lifecycle article.blocked {
  opacity: 0.72;
}

.crm-contact-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crm-contact-grid article {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.65rem;
}

.crm-contact-grid span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-next-touch-lifecycle span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-contact-grid strong,
.crm-contact-grid small,
.crm-next-touch-lifecycle strong,
.crm-next-touch-lifecycle small {
  overflow-wrap: anywhere;
}

.crm-contact-grid small,
.crm-next-touch-lifecycle small,
.compact-item small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

.do-work-strip {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0.75rem;
}

.do-work-strip article {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid var(--active-module-accent);
  border-radius: 8px;
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.65rem;
}

.do-work-strip span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.do-work-strip strong {
  color: #0f1f38;
  font-size: 0.9rem;
}

.do-work-strip small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.olivia-call-summary {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.olivia-call-summary div,
.transcript-focus-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  min-width: 0;
  padding: 0.75rem;
}

.olivia-call-summary span,
.mailroom-route-summary span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.olivia-call-summary strong {
  display: block;
  overflow-wrap: anywhere;
}

.olivia-capture-workspace {
  align-items: start;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
}

.call-flow-strip {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.call-flow-strip article,
.handoff-preview {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.7rem;
}

.call-flow-strip span,
.handoff-preview span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.call-flow-strip strong {
  color: #0f1f38;
}

.call-flow-strip small,
.handoff-preview p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.transcript-focus-card {
  display: grid;
  gap: 0.65rem;
}

.transcript-focus-card p {
  color: #1e293b;
  font-size: 0.9rem;
  line-height: 1.42;
}

.action-item-list {
  display: grid;
  gap: 0.35rem;
}

.action-item-list span {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: #1e293b;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.35rem 0.55rem;
}

.action-item-list.stacked span {
  border-radius: 7px;
  line-height: 1.35;
}

.review-workbench {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
}

.review-pane {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.8rem;
}

.transcript-review-pane p {
  color: #1e293b;
  font-size: 0.95rem;
  line-height: 1.52;
}

.mailroom-message-row {
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.28fr) auto;
}

.mailroom-message-main {
  min-width: 0;
}

.mailroom-route-summary {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.55rem;
}

.scribe-transcript-editor,
.mailroom-draft-flow {
  border-left: 4px solid var(--active-module-accent);
}

.scribe-editor-shell {
  display: grid;
  gap: 0.75rem;
}

.scribe-editor-shell > .section-title-row {
  order: -3;
}

.scribe-transcript-editor {
  order: -2;
}

.mailroom-draft-flow {
  order: -2;
}

.mailroom-selected-email {
  order: -1;
}

.mailroom-flow-card {
  order: -3;
}

.mailroom-route-workspace {
  align-items: start;
}

.mailroom-flow-strip {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mailroom-flow-strip article {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.65rem;
}

.mailroom-flow-strip article.active {
  border-color: var(--active-module-accent);
}

.mailroom-flow-strip article.done {
  background: #f1f5f9;
  border-color: #fde68a;
}

.mailroom-flow-strip span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mailroom-flow-strip small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.mailroom-action-packet {
  background: #fafafa;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--active-module-accent);
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.85rem;
}

.mailroom-action-packet .section-title-row span,
.mailroom-action-summary small,
.mailroom-packet-next,
.mailroom-packet-evidence span,
.mailroom-packet-evidence li {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.38;
}

.mailroom-action-summary,
.mailroom-action-grid,
.mailroom-packet-evidence {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mailroom-action-summary article,
.mailroom-action-grid article,
.mailroom-packet-evidence > div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.65rem;
}

.mailroom-action-summary article:first-child {
  grid-column: 1 / -1;
}

.mailroom-action-summary span,
.mailroom-packet-evidence h5 {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mailroom-action-grid article.ready {
  border-color: var(--active-module-accent);
}

.mailroom-action-grid article.done {
  background: #f1f5f9;
  border-color: #fde68a;
}

.mailroom-action-grid article.blocked {
  background: #f8f2ed;
  border-color: #ead5c2;
}

.mailroom-packet-next {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin: 0;
  padding: 0.65rem;
}

.mailroom-packet-evidence p,
.mailroom-packet-evidence ul {
  display: grid;
  gap: 0.18rem;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.mailroom-packet-evidence li {
  margin-left: 1rem;
}

.ledger-accounting-panel {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.ledger-reports-workspace {
  align-items: start;
  margin-bottom: 0.8rem;
}

.ledger-report-grid {
  display: grid;
  gap: 0.65rem;
}

.ledger-report-panel,
.ledger-report-card,
.ledger-statement-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 0.75rem;
}

.ledger-report-card p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.ledger-report-packet {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
  padding: 0.7rem;
}

.ledger-report-packet-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ledger-report-packet-rows span {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: #27465f;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.25rem 0.45rem;
}

.accounting-tab-grid,
.ledger-operating-grid,
.aging-grid {
  display: grid;
  gap: 0.55rem;
}

.accounting-tab-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ledger-operating-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.aging-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.accounting-tab,
.ledger-mode-card,
.aging-bucket,
.ledger-mini-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  min-width: 0;
  padding: 0.75rem;
}

.accounting-tab {
  display: grid;
  gap: 0.25rem;
  text-align: left;
}

.ledger-mode-card {
  color: var(--text);
  display: grid;
  gap: 0.25rem;
  text-align: left;
}

.accounting-tab:hover,
.ledger-mode-card:hover,
.ledger-mode-card.active {
  background: #f1f5f9;
  border-color: #fde68a;
}

.accounting-tab span,
.ledger-mode-card span,
.aging-bucket span {
  color: var(--muted);
  display: block;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.accounting-tab strong,
.ledger-mode-card strong,
.aging-bucket strong {
  color: #0f1f38;
  display: block;
  font-size: 1rem;
}

.accounting-tab small,
.ledger-mode-card small,
.aging-bucket p {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

.ledger-approval-strip {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0.7rem;
}

.ledger-approval-strip article {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.ledger-approval-strip span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ledger-approval-strip strong {
  color: #1e293b;
  font-size: 0.88rem;
}

.ledger-lifecycle-strip {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ledger-lifecycle-strip article {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #94a3b8;
  border-radius: 8px;
  display: grid;
  gap: 0.14rem;
  min-width: 0;
  padding: 0.55rem;
}

.ledger-lifecycle-strip article.complete {
  border-left-color: #e8a020;
}

.ledger-lifecycle-strip article.pending,
.ledger-lifecycle-strip article.ready {
  border-left-color: #b26a00;
}

.ledger-lifecycle-strip article.blocked {
  opacity: 0.72;
}

.ledger-lifecycle-strip span,
.ledger-line-item-head span,
.ledger-line-item-editor-head span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ledger-lifecycle-strip strong {
  color: #0f1f38;
  font-size: 0.78rem;
}

.ledger-lifecycle-strip small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.25;
}

.ledger-line-items-panel,
.ledger-line-item-editor {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem;
}

.ledger-line-item-table,
.ledger-line-item-editor {
  overflow: hidden;
}

.ledger-line-item-row,
.ledger-line-item-editor-head,
.ledger-line-item-input-row {
  align-items: center;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(170px, 1fr) 80px 95px 95px;
}

.ledger-line-item-editor-head,
.ledger-line-item-input-row {
  grid-template-columns: minmax(170px, 1fr) 80px 110px;
}

.ledger-line-item-row {
  border-top: 1px solid var(--border);
  padding: 0.45rem 0;
}

.ledger-line-item-head {
  border-top: 0;
}

.ledger-line-item-row strong,
.ledger-line-item-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ledger-payment-evidence-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ledger-vendor-field-grid,
.ledger-vendor-layout {
  display: grid;
  gap: 0.65rem;
}

.ledger-vendor-field-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ledger-vendor-layout {
  align-items: start;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
}

.ledger-vendor-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.75rem;
}

.bill-review-row small,
.ledger-vendor-panel small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.ledger-summary-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  min-width: 0;
  padding: 0.75rem;
}

.ledger-summary-card span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ledger-summary-card strong {
  color: #0f1f38;
  display: block;
  font-size: 1.05rem;
  margin-top: 0.32rem;
}

.ledger-summary-card p {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
  margin-top: 0.28rem;
}

.ledger-financial-snapshot {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.ledger-status-card-grid,
.ledger-ar-ap-strip {
  display: grid;
  gap: 0.65rem;
}

.ledger-status-card-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ledger-ar-ap-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ledger-status-card,
.ledger-ar-ap-strip article {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid #e8a020;
  border-radius: 8px;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.75rem;
}

.ledger-status-card.collect,
.ledger-status-card.review,
.ledger-status-card.watch {
  border-left-color: #b26a00;
}

.ledger-status-card.positive,
.ledger-status-card.clear,
.ledger-status-card.active,
.ledger-status-card.matching {
  border-left-color: #e8a020;
}

.ledger-status-card span,
.ledger-ar-ap-strip span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ledger-status-card strong,
.ledger-ar-ap-strip strong {
  color: #0f1f38;
  font-size: 1rem;
}

.ledger-status-card p,
.ledger-ar-ap-strip small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.ledger-customer-layout {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
}

.ledger-customer-detail {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  min-width: 0;
  padding: 0.8rem;
}

.account-metrics-grid,
.ledger-customer-columns {
  display: grid;
  gap: 0.65rem;
}

.account-metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0.75rem 0;
}

.account-metrics-grid div {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #f8fafc;
  min-width: 0;
  padding: 0.65rem;
}

.account-metrics-grid span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.account-metrics-grid strong {
  display: block;
  margin-top: 0.28rem;
}

.ledger-customer-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ledger-customer-action-center,
.ledger-subledger-panel,
.ledger-vendor-payment-plan {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

.ledger-subledger-grid,
.ledger-vendor-plan-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ledger-subledger-grid article {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.6rem;
}

.ledger-subledger-grid article > strong,
.ledger-vendor-payment-plan h5 {
  margin: 0;
}

.ledger-vendor-payment-plan {
  border-top-color: #e2e8f0;
}

.ledger-register {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.ledger-register-row,
.ledger-statement-row {
  align-items: center;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 110px 95px minmax(150px, 1.4fr) minmax(120px, 1fr) 110px 95px;
  min-width: 0;
  padding: 0.62rem 0.7rem;
  text-align: left;
  width: 100%;
}

.ledger-statement-panel {
  margin-top: 0.85rem;
}

.ledger-statement-table {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 0.65rem;
  overflow: hidden;
}

.ledger-statement-row {
  grid-template-columns: 110px minmax(160px, 1.5fr) 110px 95px 95px;
}

.ledger-register-row:last-child {
  border-bottom: 0;
}

.ledger-register-row:not(.ledger-register-head):hover,
.ledger-statement-row:not(.ledger-statement-head):hover {
  background: #f1f5f9;
}

.ledger-register-row span,
.ledger-register-row strong,
.ledger-statement-row span,
.ledger-statement-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ledger-register-head,
.ledger-statement-head {
  background: #f8fafc;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.scribe-detail-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.85rem;
}

.filing-card p,
.ledger-card p,
.folder-card p,
.scribe-summary-card p,
.scribe-route-card p,
.scribe-lifecycle-card p,
.source-mix-card p,
.channel-plan-card p,
.vault-collection-card p,
.campaign-card p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
  margin-top: 0.25rem;
}

.ledger-card {
  align-items: start;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(220px, 1.2fr) minmax(360px, 2fr) auto;
}

.ledger-card .section-title-row {
  margin-bottom: 0;
}

.ledger-card .compact-action {
  margin-top: 0;
  white-space: nowrap;
}

.filing-card dl,
.ledger-card dl,
.campaign-card dl {
  display: grid;
  gap: 0.45rem;
  margin: 0.75rem 0 0;
}

.filing-card dl div,
.ledger-card dl div,
.campaign-card dl div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0.5rem;
}

.ledger-card dl {
  grid-template-columns: repeat(6, minmax(70px, 1fr));
  margin: 0;
}

.ledger-card dl div {
  gap: 0.1rem;
  grid-template-columns: 1fr;
}

.filing-card dt,
.ledger-card dt,
.campaign-card dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.filing-card dd,
.ledger-card dd,
.campaign-card dd {
  margin: 0;
  font-size: 0.84rem;
}

.knowledge-card {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  padding: 0.75rem;
}

.knowledge-card strong,
.knowledge-card span {
  display: block;
}

.knowledge-card span {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.25rem;
}

.knowledge-card p {
  color: #1e293b;
  font-size: 0.84rem;
  line-height: 1.4;
  margin-top: 0.45rem;
}

.flow-stage-strip {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 0.75rem;
}

.flow-stage-strip span {
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #f8fafc;
  color: #1e293b;
  font-size: 0.74rem;
  font-weight: 900;
  padding: 0.45rem 0.35rem;
  text-align: center;
}

.flow-secondary-panel {
  display: grid;
  gap: 0.75rem;
}

.flow-template-editor,
.flow-template-detail {
  margin-top: 0.85rem;
}

.flow-template-lifecycle,
.flow-template-detail-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.75rem;
}

.flow-template-lifecycle article {
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #f8fafc;
  padding: 0.65rem;
}

.flow-template-lifecycle article.pending {
  border-color: #e4c56d;
  background: #fff8df;
}

.flow-template-lifecycle article.ready {
  border-color: #96b7dc;
  background: #eef6ff;
}

.flow-template-lifecycle article.complete {
  border-color: #9dc6b0;
  background: #f0fbf4;
}

.flow-template-lifecycle span,
.flow-template-detail-grid span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.flow-template-lifecycle strong,
.flow-template-detail-grid strong {
  color: #0f1f38;
  display: block;
  font-size: 0.86rem;
  line-height: 1.25;
  margin-top: 0.18rem;
}

.flow-template-lifecycle small {
  color: #475569;
  display: block;
  font-size: 0.76rem;
  line-height: 1.35;
  margin-top: 0.28rem;
}

.flow-activation-focus,
.flow-template-summary,
.readiness-summary-strip {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.launch-activation-packet {
  background: #fafafa;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--active-module-accent);
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
  padding: 0.85rem;
}

.launch-activation-packet p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
  margin-top: 0.2rem;
}

.launch-packet-metrics {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.launch-packet-metrics article,
.launch-packet-grid section,
.launch-validation-grid section,
.launch-app-readiness-strip article {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  min-width: 0;
  padding: 0.65rem;
}

.launch-packet-metrics span,
.launch-packet-grid > section > strong,
.launch-validation-grid strong,
.launch-app-readiness-strip span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.launch-packet-metrics strong,
.launch-app-readiness-strip strong {
  color: #0f1f38;
  display: block;
  font-size: 0.95rem;
}

.launch-packet-metrics small {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  line-height: 1.3;
  margin-top: 0.15rem;
}

.launch-packet-grid,
.launch-validation-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.launch-blocker-list article.high {
  border-left-color: #b94c42;
}

.launch-blocker-list article.medium {
  border-left-color: #d39b3b;
}

.launch-blocker-list small {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  line-height: 1.35;
  margin-top: 0.25rem;
}

.launch-validation-drawer {
  margin-top: 0;
}

.launch-command-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.launch-command-list code {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #0f1f38;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.3rem 0.45rem;
}

.launch-app-readiness-strip {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 0.65rem;
}

.launch-app-readiness-strip article.ready {
  border-color: #b7dac6;
}

.launch-app-readiness-strip article.needs-work {
  border-color: #e9cf99;
}

.flow-activation-focus {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--active-module-accent);
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.75rem;
}

.flow-activation-focus span,
.flow-template-summary span,
.readiness-summary-strip span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.flow-activation-focus strong,
.flow-template-summary strong,
.readiness-summary-strip strong {
  color: #0f1f38;
  display: block;
}

.flow-activation-focus p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  margin-top: 0.2rem;
}

.flow-template-summary article,
.readiness-summary-strip article {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  min-width: 0;
  padding: 0.65rem;
}

.readiness-card,
.beta-gate-card,
.beta-scenario-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 0.75rem;
}

.provider-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 0.75rem;
}

.integration-checklist-grid article,
.provider-diagnostics-grid article {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 0.75rem;
}

.integration-checklist-grid article.ready,
.provider-diagnostics-grid article.ready {
  border-color: #9dc6b0;
  background: #f0fbf4;
}

.integration-checklist-grid article.needs_credentials,
.provider-diagnostics-grid article.blocked {
  border-color: #e6bd75;
  background: #fff8e8;
}

.readiness-card.ready {
  border-color: #b7dac6;
}

.beta-gate-card.passed,
.beta-scenario-card.ready {
  border-color: #b7dac6;
}

.provider-card.implemented {
  border-color: #b7dac6;
}

.readiness-card.needs-work {
  border-color: #e9cf99;
}

.beta-gate-card.failed,
.beta-scenario-card.needs-seed {
  border-color: #e9cf99;
}

.provider-card.planned {
  border-color: #e9cf99;
}

.provider-card.blocked {
  background: #fffdf8;
}

.provider-card .guided-empty-state {
  margin-top: 0.65rem;
}

.readiness-card p,
.beta-gate-card p,
.beta-scenario-card p,
.provider-card p,
.integration-checklist-grid p,
.provider-diagnostics-grid small {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.2rem;
}

.integration-checklist-grid small,
.provider-diagnostics-grid span {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  margin-top: 0.3rem;
}

.readiness-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.readiness-metrics span {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.24rem 0.45rem;
}

.compact-readiness-grid .readiness-card {
  display: grid;
  gap: 0.55rem;
}

.readiness-meter {
  background: #f1f5f9;
  border-radius: 999px;
  height: 0.42rem;
  overflow: hidden;
}

.readiness-meter span {
  background: var(--active-module-accent);
  display: block;
  height: 100%;
}

.provider-meta {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.provider-meta span {
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.35rem 0.45rem;
}

.beta-primary-strip,
.feedback-review-metrics {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0.75rem;
}

.feedback-review-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.beta-primary-strip article,
.feedback-review-metrics article {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  min-width: 0;
  padding: 0.65rem;
}

.beta-primary-strip span,
.feedback-review-metrics span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.beta-primary-strip strong,
.feedback-review-metrics strong {
  color: #0f1f38;
  display: block;
  font-size: 1.1rem;
  margin-top: 0.12rem;
}

.beta-primary-strip small {
  color: var(--muted);
  display: block;
  font-size: 0.74rem;
  margin-top: 0.15rem;
}

.test-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.test-action-row .compact-action {
  margin-top: 0;
}

.control-command-card {
  grid-column: 1 / -1;
}

.control-detail-drawer {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
}

.control-detail-drawer summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  list-style: none;
}

.control-detail-drawer summary::-webkit-details-marker {
  display: none;
}

.control-detail-drawer summary span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.control-detail-drawer summary strong {
  color: #0f1f38;
}

.control-detail-drawer summary::after {
  color: var(--muted);
  content: "Open";
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.control-detail-drawer[open] summary::after {
  content: "Close";
}

.control-feedback-panel {
  margin-top: 0.75rem;
}

.beta-feedback-review {
  display: grid;
  gap: 0.75rem;
}

.feedback-review-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feedback-review-grid section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
}

.feedback-review-grid h4 {
  font-size: 0.86rem;
  margin-bottom: 0.5rem;
}

.beta-review-checklist {
  display: grid;
  gap: 0.45rem;
}

.beta-review-checklist article {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.18rem;
  padding: 0.55rem;
}

.beta-review-checklist span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.beta-review-checklist strong,
.beta-review-checklist small {
  color: #1e2d28;
  display: block;
  font-size: 0.78rem;
  line-height: 1.3;
}

.beta-feedback-queue .compact-item small {
  color: var(--muted);
  display: block;
  font-size: 0.74rem;
  margin-top: 0.2rem;
}

.beta-task-checklist {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.beta-task-checklist article {
  align-items: start;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: auto 1fr;
  padding: 0.55rem;
}

.beta-task-checklist article.done {
  background: #eef9f3;
  border-color: #b7dac6;
}

.beta-task-checklist article > span {
  background: #1e293b;
  border-radius: 999px;
  color: #fff;
  display: inline-grid;
  font-size: 0.72rem;
  font-weight: 900;
  height: 1.45rem;
  place-items: center;
  width: 1.45rem;
}

.beta-task-checklist strong,
.beta-task-checklist small {
  display: block;
}

.beta-task-checklist small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
  margin-top: 0.12rem;
}

.compact-heading {
  margin-bottom: 0.35rem;
}

.record-editor form {
  display: grid;
  gap: 0.75rem;
}

.structured-form {
  display: grid;
  gap: 0.75rem;
}

.record-detail-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0.8rem 0;
}

.record-detail-grid div {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  padding: 0.6rem;
}

.record-detail-grid dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.record-detail-grid dd {
  font-size: 0.86rem;
  margin: 0;
}

.record-activity {
  border-top: 1px solid var(--border);
  margin-top: 0.85rem;
  padding-top: 0.85rem;
}

.export-packet-panel {
  align-items: start;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr auto;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
}

.export-packet-panel.expanded {
  grid-template-columns: 1fr;
}

.export-packet-panel h4 {
  margin-top: 0.1rem;
}

.export-packet-panel p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
  margin-top: 0.25rem;
}

.export-packet-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.export-packet-grid div {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  min-width: 0;
  padding: 0.65rem;
}

.export-packet-grid span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.export-packet-grid strong {
  display: block;
  margin-top: 0.25rem;
}

.guardrail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.guardrail-list span {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #1e293b;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.32rem 0.55rem;
}

.activity-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.activity-grid section {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

.related-work-rail {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 2fr);
  margin: 0.75rem 0;
  padding: 0.75rem;
}

.related-work-rail h4 {
  margin: 0.15rem 0 0;
}

.related-work-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.related-work-actions button {
  display: grid;
  gap: 0.18rem;
  text-align: left;
}

.related-work-actions span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.extraction-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.extraction-grid p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
  margin-top: 0.35rem;
}

.role-change-form,
.audit-filter-form,
.approval-filters,
.docs-filter-form {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.role-change-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

.audit-filter-form {
  grid-template-columns: minmax(0, 1fr) 180px auto;
}

.approval-filters {
  align-items: end;
  grid-template-columns: minmax(180px, 1.5fr) repeat(3, minmax(120px, 1fr)) auto;
  margin-bottom: 0.75rem;
}

.docs-filter-form {
  align-items: end;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, 220px) auto;
  margin-bottom: 0.75rem;
}

.segmented-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.segmented-tabs button {
  border-color: var(--border);
  background: #fff;
  color: var(--muted);
  padding: 0.42rem 0.62rem;
}

.segmented-tabs button.active {
  border-color: #fde68a;
  background: #f1f5f9;
  color: var(--accent-dark);
}

.approval-card {
  display: grid;
  gap: 0.65rem;
}

.approval-batch-toolbar {
  display: grid;
  grid-template-columns: minmax(130px, auto) minmax(220px, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  margin-bottom: 0.8rem;
  padding: 0.65rem;
}

.approval-selector {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.approval-selector input {
  height: 16px;
  width: 16px;
}

.batch-actions {
  justify-content: end;
  margin-top: 0;
}

.approval-summary {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.approval-summary div {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  padding: 0.55rem;
}

.approval-summary span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.approval-summary strong {
  display: block;
  font-size: 0.84rem;
  line-height: 1.35;
}

.approval-reject-row input {
  width: 100%;
}

.audit-filter-card {
  grid-column: 1 / -1;
}

.compact-audit {
  margin-top: 0.75rem;
  max-height: 360px;
  overflow: auto;
}

.danger-zone {
  border-top: 1px solid var(--border);
  margin-top: 0.9rem;
  padding-top: 0.9rem;
}

.danger-action {
  margin-top: 0.65rem;
}

.metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.metric-card {
  border-radius: 8px;
  padding: 0.9rem;
}

.metric-card strong {
  display: block;
  font-size: 1.35rem;
}

.metric-card span {
  color: var(--muted);
  font-size: 0.78rem;
}

.panel {
  border-radius: 8px;
  padding: 1rem;
  min-width: 0;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  margin-bottom: 0.9rem;
}

form,
.list,
.audit-log {
  display: grid;
  gap: 0.75rem;
}

.approval-group {
  display: grid;
  gap: 0.55rem;
}

.approval-group-heading {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.35rem;
}

.approval-group-heading strong {
  text-transform: uppercase;
  font-size: 0.78rem;
}

.approval-group-heading span {
  color: var(--muted);
  font-size: 0.78rem;
}

.button-row {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.change-set {
  display: grid;
  gap: 0.45rem;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #f7fbf9;
  margin-top: 0.75rem;
  padding: 0.65rem;
}

.change-set > span {
  color: var(--muted);
  font-size: 0.8rem;
}

.change-row {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 0.5rem;
  align-items: start;
  font-size: 0.82rem;
}

.change-row span {
  color: var(--muted);
  font-weight: 800;
}

.change-row del,
.change-row ins {
  border-radius: 6px;
  padding: 0.35rem;
  text-decoration: none;
}

.change-row del {
  background: #fff2f0;
  color: #8a1f16;
}

.change-row ins {
  background: #f1f5f9;
  color: #0a1628;
}

label {
  display: grid;
  gap: 0.35rem;
  color: #1e293b;
  font-size: 0.86rem;
  font-weight: 800;
}

.inline-filter {
  align-items: center;
  grid-template-columns: auto minmax(140px, 190px);
  white-space: nowrap;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.item {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.8rem;
  background: #fafafa;
}

.item-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  min-width: 0;
}

.item p {
  color: var(--muted);
  font-size: 0.86rem;
  margin-top: 0.35rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0.2rem 0.52rem;
  background: var(--surface-2);
  color: #475569;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.tag.pending {
  background: #fff4df;
  color: var(--gold);
}

.tag.done {
  background: #f1f5f9;
  color: var(--accent-dark);
}

.tag.ready_to_port {
  background: #e7f0ff;
  color: #1e40af;
}

.tag.ported_foundation {
  background: #f1f5f9;
  color: var(--accent-dark);
}

.tag.needs_review {
  background: #fff4df;
  color: var(--gold);
}

.tag.reference_only {
  background: #f1f5f9;
  color: #334155;
}

.tag.active {
  background: #f1f5f9;
  color: var(--accent-dark);
}

.tag.seeded {
  background: #eef6ff;
  color: #234f7d;
}

.tag.planned {
  background: #fff4df;
  color: var(--gold);
}

.tag.rejected {
  background: #fff2f0;
  color: var(--red);
}

.tag.urgency-high {
  background: #fff2f0;
  color: var(--red);
}

.tag.urgency-medium {
  background: #fff4df;
  color: var(--gold);
}

.tag.urgency-normal,
.tag.urgency-low {
  background: #eef6ff;
  color: #234f7d;
}

.rejection-note {
  border-left: 3px solid #f3b7b0;
  color: #8a1f16;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 0.45rem;
  padding-left: 0.55rem;
}

.audit-row {
  display: grid;
  grid-template-columns: 160px 180px 1fr;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
  padding: 0.55rem 0;
  font-size: 0.86rem;
}

.audit-row:last-child {
  border-bottom: 0;
}

.audit-row span {
  color: var(--muted);
}

.empty {
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 7px;
  padding: 1rem;
}

.compact-empty {
  padding: 0.65rem;
}

.list-overflow-note {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  margin-top: 0.55rem;
  padding: 0.55rem 0.65rem;
}

.loading-panel {
  color: var(--muted);
  min-height: 4.5rem;
}

.loading-skeleton {
  animation: skeletonPulse 1.1s ease-in-out infinite alternate;
  background: linear-gradient(90deg, #f1f5f9, #f7faf8, #f1f5f9);
  background-size: 220% 100%;
}

.loading-skeleton strong {
  color: #64748b;
}

@keyframes skeletonPulse {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

/* ── Shimmer skeleton loader (renderSkeleton) ────────────────────────────── */
.skeleton-loader {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.25rem;
}

.skeleton-bar,
.skeleton-card {
  background: linear-gradient(
    100deg,
    var(--skeleton-base, #eef2f7) 30%,
    var(--skeleton-shine, #f8fafc) 50%,
    var(--skeleton-base, #eef2f7) 70%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: 7px;
}

.skeleton-bar { height: 0.85rem; width: 100%; }
.skeleton-bar-title { height: 1.5rem; width: 42%; margin-bottom: 0.35rem; }
.skeleton-bar-wide { width: 88%; }
.skeleton-bar-short { width: 60%; }

.skeleton-card-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.skeleton-card { height: 5.5rem; }

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-bar,
  .skeleton-card { animation: none; }
}

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
  max-width: min(380px, calc(100vw - 2rem));
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #1e293b;
  color: #fff;
  box-shadow: var(--shadow);
  padding: 0.85rem 1rem;
  font-weight: 800;
}

.toast[data-tone="success"] {
  background: var(--accent-dark);
}

.toast[data-tone="error"],
.error-panel {
  border-color: #f3b7b0;
}

.toast[data-tone="error"] {
  background: var(--red);
}

.error-panel p {
  margin-top: 0.35rem;
  color: var(--muted);
}

@media (max-width: 1080px) {
  #app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    position: sticky;
    top: 0;
    z-index: 12;
    height: auto;
    max-width: 100vw;
    width: 100%;
  }

  .brand {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .tenant-switcher,
  .quick-module-switcher {
    margin-bottom: 0;
  }

  .quick-module-switcher {
    display: grid;
  }

  .module-nav {
    display: none;
  }

  .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .focus-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .demo-story-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .beta-path-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-card {
    grid-template-columns: 1fr;
  }

  .guide-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .product-shell-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-shell-hero .compact-action {
    justify-self: start;
  }

  .product-shell-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-shell-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operator-workspace,
  .operator-workspace.olivia-console,
  .operator-workspace.crm-next-touch-workspace,
  .operator-workspace.scribe-capture-workspace,
  body.details-mode .scribe-capture-workspace.full-feature-workspace,
  body.focus-mode .scribe-capture-workspace.full-feature-workspace,
  .operator-workspace.ledger-create-workspace,
  .operator-workspace.crm-create-workspace,
  .operator-workspace.vault-create-workspace,
  body.details-mode .operator-workspace.scribe-capture-workspace.full-feature-workspace,
  body.focus-mode .operator-workspace.scribe-capture-workspace.full-feature-workspace,
  body.details-mode .ledger-daily-grid,
  body.focus-mode .ledger-daily-grid,
  body.details-mode .operator-workspace.mailroom-triage-workspace,
  body.focus-mode .operator-workspace.mailroom-triage-workspace,
  .operator-workspace.insider-workspace,
  .operator-workspace.flow-workspace,
  .operator-workspace.vault-workspace,
  .operator-workspace.docs-workspace,
  .operator-workspace.control-workspace {
    grid-template-columns: 1fr;
  }

  .scribe-session-metrics span,
  .dense-app-summary span,
  .dense-app-summary small {
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .olivia-focus-primary {
    grid-row: auto;
  }

  .olivia-operator-summary-strip,
  .olivia-console-hero,
  .olivia-console-status,
  .olivia-console-grid,
  .olivia-console-lower,
  .olivia-admin-knowledge,
  .olivia-appointment-grid,
  .olivia-call-log-grid,
  .olivia-handoff-grid,
  .olivia-handoff-paths,
  .olivia-handoff-actions,
  .olivia-settings-grid,
  .compact-callback-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mailroom-summary-grid,
  .mailbox-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mini-metrics,
  .module-columns,
  .app-blueprint,
  .template-grid,
  .starter-module-grid,
  .daily-work-grid,
  .dense-app-summary,
  .port-candidate-grid,
  .ported-feature-grid,
  .ledger-summary-grid,
  .ledger-product-grid,
  .ledger-profile-forms,
  .ledger-books-layout,
  .ledger-document-preview,
  .ledger-close-grid,
  .ledger-close-lists,
  .ledger-import-guardrails,
  .ledger-subledger-grid,
  .ledger-vendor-plan-grid,
  .accounting-tab-grid,
  .ledger-operating-grid,
  .aging-grid,
  .front-desk-board,
  .channel-mix-grid,
  .pipeline-grid,
  .split-workspace,
  .provider-grid,
  .integration-checklist-grid,
  .provider-diagnostics-grid,
  .launch-packet-metrics,
  .launch-packet-grid,
  .launch-validation-grid,
  .launch-app-readiness-strip,
  .beta-primary-strip,
  .feedback-review-metrics,
  .feedback-review-grid,
  .beta-gate-grid,
  .beta-scenario-grid,
  .filing-grid,
  .docs-folder-grid,
  .scribe-summary-grid,
  .scribe-route-grid,
  .scribe-lifecycle-grid,
  .scribe-session-primary,
  .scribe-product-grid,
  .scribe-output-command-grid,
  .scribe-usage-settings-grid,
  .scribe-output-settings-strip,
  .scribe-final-sections,
  .scribe-import-mode-grid,
  .scribe-import-layout,
  .scribe-import-storage-strip,
  .source-mix-grid,
  .insider-calendar-grid,
  .insider-channel-grid,
  .insider-campaign-lifecycle,
  .insider-packet-readiness,
  .insider-packet-actions,
  .insider-packet-evidence,
  .campaign-detail-grid,
  .vault-collection-grid,
  .vault-ops-grid,
  .vault-review-grid,
  .vault-review-lifecycle,
  .vault-packet-readiness,
  .vault-packet-actions,
  .vault-packet-evidence,
  .flow-template-lifecycle,
  .flow-template-detail-grid,
  .crm-command-grid,
  .crm-account-plan-grid,
  .account-metrics-grid,
  .ledger-status-card-grid,
  .ledger-ar-ap-strip,
  .ledger-grid,
  .ledger-subledger-grid,
  .ledger-vendor-plan-grid,
  .knowledge-grid,
  .template-library-grid,
  .campaign-grid,
  .readiness-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ledger-card {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .ledger-card dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ledger-lifecycle-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ledger-bank-preview-row {
    grid-template-columns: 95px minmax(140px, 1fr) minmax(105px, 0.8fr) 95px;
  }

  .ledger-bank-preview-row span:nth-child(4),
  .ledger-bank-preview-row small {
    display: none;
  }
}

@media (max-width: 760px) {
  .product-app-shell {
    gap: 0.6rem;
    padding: 0.7rem;
  }

  .product-shell-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-shell-nav button {
    min-height: 72px;
    padding: 0.55rem;
  }

  .calm-header,
  .calm-priority-panel,
  .calm-work-card,
  .calm-app-heading {
    display: grid;
    grid-template-columns: 1fr;
  }

  .calm-header {
    align-items: start;
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
    padding: 0.75rem;
  }

  .calm-header h2 {
    font-size: 1.55rem;
  }

  .calm-header p:last-child {
    font-size: 0.88rem;
  }

  .calm-utility-action {
    align-self: start;
    justify-self: start;
    white-space: nowrap;
  }

  .calm-top-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
    position: static;
  }

  .calm-top-nav button {
    font-size: 0.86rem;
    min-height: 38px;
    min-width: 0;
    padding: 0.42rem 0.35rem;
  }

  .calm-priority-panel {
    gap: 0.65rem;
    padding: 0.78rem;
  }

  .calm-priority-copy h3 {
    font-size: 1.45rem;
  }

  .calm-priority-copy > p {
    font-size: 0.92rem;
    margin-bottom: 0.55rem;
  }

  .calm-priority-side {
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: stretch;
  }

  .calm-priority-side small {
    text-align: left;
  }

  .calm-priority-side button {
    grid-column: 1 / -1;
  }

  .calm-priority-side button.secondary {
    background: transparent;
  }

  .calm-count.large {
    font-size: 1.25rem;
    height: 2.7rem;
    margin-bottom: 0;
    min-width: 2.7rem;
  }

  .calm-explainer div {
    padding: 0.55rem;
  }

  .calm-hub-grid,
  .calm-action-grid,
  .calm-more-picker,
  .calm-explainer,
  .calm-triage-grid,
  .calm-evidence-strip,
  .calm-day-plan {
    grid-template-columns: 1fr;
  }

  .calm-day-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calm-day-stats article {
    align-items: center;
    grid-template-columns: auto 1fr;
    padding: 0.52rem 0.6rem;
  }

  .calm-day-stats span {
    font-size: 1rem;
  }

  .calm-day-stats strong {
    font-size: 0.88rem;
  }

  .calm-day-plan {
    gap: 0.42rem;
  }

  .calm-day-plan article {
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0.55rem 0.65rem;
  }

  .calm-heading-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calm-restore-panel {
    align-items: stretch;
    display: grid;
  }

  .calm-restore-actions {
    display: grid;
    justify-content: stretch;
  }

  .calm-card-actions,
  .calm-primary-actions {
    background: var(--surface);
    border-top: 1px solid var(--border);
    bottom: 0;
    box-shadow: 0 -8px 20px rgba(23, 33, 29, 0.08);
    display: grid;
    grid-template-columns: 1fr;
    inset-inline: 0;
    justify-content: stretch;
    padding: 0.75rem;
    position: sticky;
    z-index: 15;
  }

  .calm-card-actions button,
  .calm-primary-actions button {
    width: 100%;
  }

  main {
    padding: 0.85rem;
  }

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

  .quick-module-switcher {
    grid-column: 1 / -1;
  }

  .topbar,
  .workspace,
  .field-grid {
    grid-template-columns: 1fr;
  }

  .topbar {
    display: grid;
  }

  .topbar-actions {
    justify-content: stretch;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  button,
  .compact-action,
  .view-mode-toggle button,
  body.focus-mode .app-section-tabs button {
    min-height: 44px;
  }

  .view-mode-toggle,
  .policy-chip {
    width: 100%;
  }

  .ux-task-header {
    grid-template-columns: 1fr;
  }

  .ux-task-actions {
    justify-items: stretch;
    min-width: 0;
  }

  .policy-chip {
    border-radius: 7px;
    white-space: normal;
  }

  .panel-heading,
  .section-title-row,
  .start-here-heading {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .panel-action-group,
  .finance-meta,
  .next-touch-meta {
    justify-items: start;
    justify-content: start;
    text-align: left;
  }

  .finance-focus-row,
  .next-touch-row,
  .mailroom-message-row,
  .olivia-call-summary,
  .olivia-capture-workspace,
  .olivia-live-workbench,
  .olivia-operator-summary-strip,
  .olivia-console-hero,
  .olivia-console-status,
  .olivia-console-grid,
  .olivia-console-lower,
  .olivia-admin-knowledge,
  .olivia-appointment-grid,
  .olivia-call-log-grid,
  .olivia-handoff-grid,
  .olivia-handoff-paths,
  .olivia-handoff-actions,
  .olivia-settings-grid,
  .compact-callback-grid,
  .bridge-action-grid,
  .olivia-scorecard,
  .call-flow-strip,
  .do-work-strip,
  .template-picker-row,
  .template-search-row,
  .scribe-gap-strip,
  .scribe-quality-grid,
  .action-item-editor-grid,
  .scribe-output-actions,
  .scribe-output-command-grid,
  .scribe-usage-settings-grid,
  .scribe-output-settings-strip,
  .scribe-import-mode-grid,
  .scribe-import-layout,
  .scribe-import-storage-strip,
  .template-authoring-grid,
  .front-desk-detail-workspace,
  .outbound-field-grid,
  .review-workbench,
  .mailroom-flow-strip,
  .mailroom-action-summary,
  .mailroom-action-grid,
  .mailroom-packet-evidence,
  .mail-send-status-strip,
  .docs-filing-lifecycle,
  .docs-packet-destination,
  .docs-packet-actions,
  .docs-packet-evidence,
  .crm-next-action-rail,
  .crm-contact-grid,
  .crm-brief-grid,
  .crm-brief-actions,
  .crm-brief-lower,
  .crm-next-touch-lifecycle,
  .flow-activation-focus,
  .flow-packet-readiness,
  .flow-packet-actions,
  .flow-packet-steps,
  .flow-template-summary,
  .beta-primary-strip,
  .feedback-review-metrics,
  .feedback-review-grid,
  .readiness-summary-strip,
  .ledger-approval-strip {
    grid-template-columns: 1fr;
  }

  .ledger-lifecycle-strip,
  .ledger-line-item-row,
  .ledger-line-item-editor-head,
  .ledger-line-item-input-row,
  .ledger-payment-evidence-grid,
  .ledger-vendor-field-grid,
  .ledger-vendor-layout,
  .ledger-profile-form,
  .ledger-invoice-editor,
  .ledger-books-layout,
  .ledger-product-grid,
  .ledger-account-row,
  .ledger-close-grid,
  .ledger-close-lists,
  .ledger-import-guardrails,
  .ledger-status-card-grid,
  .ledger-ar-ap-strip {
    grid-template-columns: 1fr;
  }

  .ledger-bank-preview-row {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .ledger-bank-preview-row span:nth-child(4),
  .ledger-bank-preview-row small {
    display: block;
  }

  .recording-control-row .compact-action,
  .phone-control-row .compact-action {
    flex: 1 1 145px;
    justify-content: center;
  }

  .recording-preview {
    grid-template-columns: 1fr;
  }

  .template-category-strip {
    justify-content: start;
  }

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

  .call-turn-list article {
    max-width: 100%;
  }

  .start-here-actions,
  .demo-story-actions,
  .active-beta-actions {
    justify-content: start;
  }

  body.focus-mode .guide-card {
    gap: 0.55rem;
    padding: 0.7rem;
  }

  body.focus-mode .module-workbench > .panel-heading,
  body.focus-mode .module-guide {
    display: none;
  }

  body.focus-mode .topbar .eyebrow,
  body.focus-mode .policy-chip {
    display: none;
  }

  body.focus-mode .topbar {
    align-items: center;
    display: flex;
    padding: 0.65rem;
  }

  body.focus-mode .topbar h1 {
    font-size: 1rem;
  }

  body.focus-mode .topbar-actions {
    flex: 0 0 auto;
    justify-content: end;
  }

  body.focus-mode .view-mode-toggle {
    width: auto;
  }

  body.focus-mode .guide-copy p,
  body.focus-mode .guide-steps {
    display: none;
  }

  body.focus-mode .guide-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-section-tabs {
    -ms-overflow-style: none;
    border-radius: 10px;
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding: 0.3rem;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .app-section-tabs::-webkit-scrollbar {
    display: none;
  }

  .app-section-tabs button {
    flex: 0 0 auto;
    min-width: 6.1rem;
    padding: 0.5rem 0.6rem;
    scroll-snap-align: start;
  }

  .app-section-tabs span {
    display: none;
  }

  .app-section-tabs small {
    font-size: 0.58rem;
  }

  .metrics,
  .focus-strip,
  .demo-story-grid,
  .beta-path-steps,
  .guide-steps,
  .guide-snapshot,
  .caller-profile,
  .accounting-workflow-strip,
  .mailroom-summary-grid,
  .mailbox-grid,
  .module-nav,
  .mini-metrics,
  .daily-work-grid,
  .dense-app-summary,
  .ledger-summary-grid,
  .accounting-tab-grid,
  .ledger-operating-grid,
  .aging-grid,
  .front-desk-board,
  .channel-mix-grid,
  .module-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ledger-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .pipeline-grid,
  .split-workspace,
  .filing-grid,
  .docs-folder-grid,
  .scribe-summary-grid,
  .scribe-route-grid,
  .scribe-lifecycle-grid,
  .scribe-session-primary,
  .scribe-product-grid,
  .scribe-final-sections,
  .source-mix-grid,
  .insider-calendar-grid,
  .insider-channel-grid,
  .insider-campaign-lifecycle,
  .insider-packet-readiness,
  .insider-packet-actions,
  .insider-packet-evidence,
  .campaign-detail-grid,
  .vault-collection-grid,
  .vault-ops-grid,
  .vault-review-grid,
  .vault-review-lifecycle,
  .vault-packet-readiness,
  .vault-packet-actions,
  .vault-packet-evidence,
  .flow-template-lifecycle,
  .flow-template-detail-grid,
  .crm-command-grid,
  .crm-account-plan-grid,
  .starter-module-grid,
  .port-candidate-grid,
  .ported-feature-grid,
  .ledger-grid,
  .knowledge-grid,
  .template-library-grid,
  .campaign-grid,
  .provider-grid,
  .integration-checklist-grid,
  .provider-diagnostics-grid,
  .launch-packet-metrics,
  .launch-packet-grid,
  .launch-validation-grid,
  .launch-app-readiness-strip,
  .beta-gate-grid,
  .beta-scenario-grid,
  .readiness-grid,
  .queue-item,
  .export-packet-panel,
  .extraction-grid,
  .scribe-detail-grid,
  .record-detail-grid,
  .activity-grid,
  .related-work-rail,
  .audit-filter-form,
  .docs-filter-form,
  .role-change-form,
  .approval-batch-toolbar,
  .approval-filters,
  .approval-summary {
    grid-template-columns: 1fr;
  }

  .ledger-customer-layout,
  .ledger-customer-columns {
    grid-template-columns: 1fr;
  }

  .ledger-register-row,
  .ledger-statement-row {
    grid-template-columns: 1fr;
  }

  .ledger-register-head,
  .ledger-statement-head {
    display: none;
  }

  .batch-actions {
    justify-content: stretch;
  }

  .queue-status {
    justify-content: start;
  }

  .inline-filter {
    align-items: stretch;
    grid-template-columns: 1fr;
    white-space: normal;
  }

  .operator-scroll-list {
    max-height: none;
  }
}

@media (max-width: 1080px) {
  body.details-mode .ux-task-header,
  body.focus-mode .ux-task-header {
    overflow: hidden;
  }

  body.details-mode .ux-task-header p,
  body.focus-mode .ux-task-header p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 820px) {
  body.focus-mode .focus-strip {
    grid-template-columns: 1fr;
  }

  body.focus-mode .focus-strip .focus-item:not(.primary-focus),
  body.focus-mode .app-section-tabs {
    display: none;
  }
}

@media (max-width: 420px) {
  .metrics,
  .focus-strip,
  .guide-steps,
  .guide-snapshot,
  .guide-actions,
  .beta-path-steps,
  .caller-profile,
  .accounting-workflow-strip,
  .operator-workspace,
  .mailroom-summary-grid,
  .mailbox-grid,
  .module-nav,
  .mini-metrics,
  .module-columns,
  .app-blueprint,
  .template-grid,
  .starter-module-grid,
  .port-candidate-grid,
  .ported-feature-grid,
  .ledger-summary-grid,
  .accounting-tab-grid,
  .ledger-operating-grid,
  .aging-grid,
  .front-desk-board,
  .channel-mix-grid,
  .account-metrics-grid,
  .pipeline-grid,
  .split-workspace,
  .filing-grid,
  .docs-folder-grid,
  .scribe-summary-grid,
  .scribe-route-grid,
  .scribe-lifecycle-grid,
  .source-mix-grid,
  .insider-calendar-grid,
  .insider-channel-grid,
  .vault-collection-grid,
  .vault-ops-grid,
  .crm-command-grid,
  .starter-module-grid,
  .port-candidate-grid,
  .ported-feature-grid,
  .ledger-grid,
  .knowledge-grid,
  .template-library-grid,
  .campaign-grid,
  .beta-gate-grid,
  .beta-scenario-grid,
  .readiness-grid {
    grid-template-columns: 1fr;
  }

  .ledger-card dl {
    grid-template-columns: 1fr;
  }

  .flow-stage-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filing-card dl div,
  .ledger-card dl div,
  .export-packet-grid,
  .campaign-card dl div {
    grid-template-columns: 1fr;
  }

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

  h1 {
    font-size: 1.35rem;
  }
}

/* ── Login Screen ─────────────────────────────────────────────────────────── */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  padding: 1rem;
}

.login-screen[hidden] {
  display: none !important;
}

.login-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
  max-width: 440px;
  padding: 2.5rem;
  width: 100%;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.login-brand-mark {
  background: var(--accent);
  border-radius: 10px;
  color: var(--active-module-accent);
  font-size: 1.4rem;
  height: 42px;
  line-height: 42px;
  text-align: center;
  width: 42px;
}

.login-brand strong {
  display: block;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
}

.login-brand span {
  color: var(--muted);
  font-size: 0.82rem;
}

.login-heading {
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
}

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

.login-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  gap: 0.4rem;
}

.login-form input {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  height: 2.6rem;
  padding: 0 0.85rem;
  transition: border-color 0.15s;
  width: 100%;
}

.login-form input:focus {
  border-color: var(--accent);
  outline: none;
}

.login-form button[type="submit"] {
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  height: 2.8rem;
  margin-top: 0.5rem;
  transition: opacity 0.15s;
}

.login-form button[type="submit"]:hover { opacity: 0.9; }
.login-form button[type="submit"]:disabled { opacity: 0.55; cursor: default; }

.login-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  color: #dc2626;
  font-size: 0.85rem;
  padding: 0.6rem 0.85rem;
  margin: 0;
}

.login-demo-hint {
  border-top: 1px solid var(--border);
  margin-top: 1.75rem;
  padding-top: 1.25rem;
}

.login-demo-hint strong {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.65rem;
  text-transform: uppercase;
}

.login-demo-accounts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.login-demo-fill {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.83rem;
  padding: 0.5rem 0.75rem;
  text-align: left;
  transition: border-color 0.12s;
}

.login-demo-fill:hover {
  border-color: var(--active-module-accent);
  background: #fffbeb;
}

.login-demo-note {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 0;
}

.login-demo-note code {
  background: #f1f5f9;
  border-radius: 3px;
  font-family: monospace;
  padding: 0.1em 0.35em;
}

/* ── User menu in topbar ─────────────────────────────────────────────────── */
.topbar-user {
  align-items: center;
  display: flex;
  gap: 0.6rem;
}

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

.topbar-user-role {
  color: var(--muted);
  font-size: 0.78rem;
}

.topbar-logout {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
}

.topbar-logout:hover {
  border-color: #dc2626;
  color: #dc2626;
}

/* ── v2 Panel Styles ─────────────────────────────────────────────────────── */
.v2-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.v2-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.v2-panel-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.v2-stats-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.v2-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 900px) {
  .v2-grid-2 {
    grid-template-columns: 1fr;
  }
}

.v2-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.v2-section h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.v2-item {
  cursor: default;
}

.v2-item-main {
  flex: 1;
  min-width: 0;
}

.v2-item-main strong {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v2-item-main span {
  font-size: 0.82rem;
  color: var(--muted);
}

.v2-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.v2-stat-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.v2-stat-card {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  min-width: 120px;
  flex: 1;
}

.v2-stat-card span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.v2-stat-card strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.v2-stat-card p {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
}

.v2-subfolder-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.v2-form {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.v2-form form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.v2-ai-result {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 1rem;
  border-left: 3px solid var(--active-module-accent);
  white-space: pre-wrap;
  font-size: 0.88rem;
  line-height: 1.6;
}

/* Tag states used in v2 panels */
.tag.overdue {
  background: #fef2f2;
  color: var(--red);
  border-color: #fecaca;
}

/* v2 section inside app-view-card (scoped wrapper) */
.app-view-card .v2-panel {
  margin-top: 0;
}
/* ── End v2 Panel Styles ─────────────────────────────────────────────────── */

.scribe-ai-action-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }

/* ── Placeholder routes (Calendar, Tasks, Reports, Team) ─────────────────── */
.placeholder-route-card {
  max-width: 540px;
  margin: 2rem auto;
  background: var(--surface);
  border: 1px solid var(--border);
}

.placeholder-route-card h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.placeholder-route-desc {
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.placeholder-coming-soon {
  font-size: 0.88rem;
  color: var(--text-muted);
  background: var(--surface-alt, #f8fafc);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}

/* ── Unified Sidebar Navigation ─────────────────────────────────────────── */
.unified-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.unified-nav-group {
  margin-bottom: 1.25rem;
}

.unified-nav-group-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sidebar-label, #94a3b8);
  padding: 0 0.75rem 0.35rem;
  margin: 0;
}

.unified-nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  color: var(--sidebar-text, #cbd5e1);
  font-size: 0.875rem;
  transition: background 0.12s, color 0.12s;
}

.unified-nav-icon {
  flex: 0 0 auto;
  width: 1.35rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1;
  filter: grayscale(0.15);
}

.unified-nav-label {
  flex: 1 1 auto;
  min-width: 0;
}

.unified-nav-item:hover {
  background: var(--sidebar-hover, rgba(255,255,255,0.07));
  color: #fff;
}

.unified-nav-item.active {
  background: var(--sidebar-active, rgba(255,255,255,0.12));
  color: #fff;
  font-weight: 600;
}

.unified-nav-item.placeholder {
  opacity: 0.55;
  cursor: default;
}

.unified-nav-item.placeholder:hover {
  background: none;
}

.unified-nav-label {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  gap: 1px;
}

.unified-nav-label strong {
  font-weight: inherit;
}

.unified-nav-label small {
  font-size: 0.72rem;
  color: var(--sidebar-label, #94a3b8);
  font-weight: 400;
}

.unified-nav-badge {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.12);
  color: var(--sidebar-label, #94a3b8);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ── Sidebar Approvals Badge ──────────────────────────────────────────────── */
.sidebar-approvals-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-amber-500, #f59e0b);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0.25rem 0.5rem 0.5rem;
  width: calc(100% - 1rem);
  text-align: left;
  transition: background 0.12s;
}

.sidebar-approvals-badge:hover {
  background: var(--color-amber-600, #d97706);
}

#sidebarApprovalsCount {
  font-size: 1rem;
  font-weight: 700;
}

/* ── Page Route Cards ────────────────────────────────────────────────────── */
.page-route-card {
  padding: 1.5rem;
}

.page-route-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.page-route-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.page-route-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 1rem 0 0.35rem;
}

/* Rich approval cards on the #/approvals page */
.approval-page-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.audit-log-ts {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  min-width: 11ch;
}

/* ── Global Search Overlay ───────────────────────────────────────────────── */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.search-overlay[hidden] {
  display: none;
}

.search-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

.search-overlay-panel {
  position: relative;
  z-index: 1;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  width: min(640px, calc(100vw - 2rem));
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-size: 1rem;
  color: var(--text);
}

.search-esc-hint {
  font-size: 0.7rem;
  background: var(--surface-alt, #f1f5f9);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-kbd {
  font-size: 0.7rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  padding: 1px 5px;
  color: inherit;
  margin-left: 0.25rem;
}

.topbar-search-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  color: var(--muted, #64748b);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.topbar-search-btn:hover {
  background: #e8edf3;
  border-color: #cbd5e1;
  color: var(--text, #1e293b);
}

.topbar-search-btn .search-kbd {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-size: 0.72rem;
  color: var(--muted, #64748b);
}

.search-results {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.search-empty {
  padding: 1rem 1.25rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.search-error {
  color: var(--color-red-500, #ef4444);
}

.search-result-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.1rem 0.5rem;
  align-items: baseline;
  width: 100%;
  background: none;
  border: none;
  padding: 0.55rem 1.25rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.search-result-item:hover {
  background: var(--surface-alt, #f8fafc);
}

.search-result-badge {
  grid-row: 1;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--color-blue-100, #dbeafe);
  color: var(--color-blue-700, #1d4ed8);
}

.search-result-badge--crm    { background: #d1fae5; color: #065f46; }
.search-result-badge--ledger { background: #fef3c7; color: #92400e; }
.search-result-badge--mailroom { background: #ede9fe; color: #5b21b6; }
.search-result-badge--front-desk { background: #fee2e2; color: #991b1b; }

.search-result-title {
  grid-row: 1;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

.search-result-excerpt {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Mobile Bottom Tab Bar ───────────────────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border);
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 0.5rem 0 0.4rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s;
}

.mobile-nav-item.active {
  color: var(--color-primary, #2563eb);
  font-weight: 600;
}

.mobile-nav-icon {
  font-size: 1.25rem;
  line-height: 1;
}

/* ── Mobile More Panel ───────────────────────────────────────────────────── */
.mobile-more-panel {
  position: fixed;
  inset: 0;
  z-index: 300;
}

.mobile-more-panel[hidden] {
  display: none;
}

.mobile-more-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.mobile-more-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface, #fff);
  border-radius: 16px 16px 0 0;
  padding: 0.5rem 1rem 2rem;
  max-height: 80vh;
  overflow-y: auto;
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 1rem);
}

.mobile-more-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0.5rem auto 1rem;
}

.mobile-more-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.mobile-more-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.mobile-more-group {
  grid-column: 1 / -1;
}

.mobile-more-group-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.35rem;
}

.mobile-more-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--surface-alt, #f8fafc);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: background 0.1s;
  margin-bottom: 0.35rem;
}

.mobile-more-nav-item.active {
  background: var(--color-primary-light, #eff6ff);
  border-color: var(--color-primary, #2563eb);
  color: var(--color-primary, #2563eb);
  font-weight: 600;
}

.mobile-more-nav-item.placeholder {
  opacity: 0.5;
  cursor: default;
}

.mobile-more-badge {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-alt, #e2e8f0);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ── Responsive: show mobile nav ≤760px ──────────────────────────────────── */
@media (max-width: 760px) {
  .sidebar {
    display: none;
  }

  .mobile-bottom-nav {
    display: flex;
  }

  #app {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
  }

  .search-overlay {
    padding-top: 5vh;
    align-items: flex-end;
  }

  .search-overlay-panel {
    width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
  }
}

/* ── Cross-Module Handoffs (Phase 3) ─────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--surface-2, #e2e8f0);
  color: var(--text, #1e293b);
}
.badge-green { background: #d1fae5; color: #065f46; }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-red   { background: #fee2e2; color: #991b1b; }

.handoff-actions {
  margin: 0.85rem 0;
  padding: 0.75rem 0.9rem;
  border: 1px dashed var(--border, #cbd5e1);
  border-radius: 12px;
  background: var(--surface-2, #f8fafc);
}

.handoff-actions-label {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #64748b);
}

.handoff-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.handoff-button {
  font-weight: 600;
}

.recent-handoffs {
  margin: 0.85rem 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: var(--surface, #ffffff);
}

.recent-handoffs-label {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #64748b);
}

.recent-handoffs-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted, #64748b);
}

.recent-handoffs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.recent-handoff-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 9px;
  background: var(--surface-2, #f1f5f9);
}

.recent-handoff-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.recent-handoff-meta {
  font-size: 0.75rem;
  color: var(--muted, #64748b);
}

.recent-handoff-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.handoff-arrival-card {
  padding: 1.5rem;
}

.handoff-arrival-header {
  margin-bottom: 1.25rem;
}

.handoff-arrival-header h2 {
  margin: 0.15rem 0 0.4rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.handoff-arrival-source {
  margin: 0;
  color: var(--muted, #64748b);
  font-size: 0.9rem;
}

.handoff-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.handoff-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text, #334155);
}

.handoff-field input,
.handoff-field textarea {
  font-weight: 400;
}

.handoff-context-grid {
  margin-bottom: 1rem;
}

.handoff-arrival-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

/* ── New apps: Calendar / Tasks / Reports / Team (Phase 4) ────────────────── */
.special-app-card { padding: 1.5rem; }

.special-app-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.special-app-header h2 { margin: 0.15rem 0 0; font-size: 1.3rem; font-weight: 600; }

.special-app-governance {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  color: var(--muted, #64748b);
  background: var(--surface-2, #f1f5f9);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
}

.special-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.special-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--surface, #fff);
}
.special-metric strong { font-size: 1.4rem; font-weight: 700; }
.special-metric span { font-size: 0.75rem; color: var(--muted, #64748b); text-transform: uppercase; letter-spacing: 0.04em; }

/* Calendar */
.calendar-agenda { display: flex; flex-direction: column; gap: 1rem; }
.calendar-day-label { font-size: 0.85rem; font-weight: 600; color: var(--muted, #64748b); margin: 0 0 0.4rem; }
.calendar-event {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border, #e2e8f0);
  border-left: 3px solid var(--accent, #2563eb);
  border-radius: 9px;
  background: var(--surface, #fff);
  margin-bottom: 0.5rem;
}
.calendar-event.pending_confirmation { border-left-color: #d97706; }
.calendar-event-time { font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--muted, #64748b); min-width: 92px; }
.calendar-event-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

/* Tasks board */
.task-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.task-column { background: var(--surface-2, #f8fafc); border-radius: 12px; padding: 0.75rem; }
.task-column-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.task-column-cards { display: flex; flex-direction: column; gap: 0.5rem; }
.task-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 9px;
  background: var(--surface, #fff);
}
.task-card-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 2px; }
.task-column-empty { font-size: 0.8rem; padding: 0.4rem; }

/* Reports */
.report-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.report-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 1rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.report-card strong { font-size: 1.8rem; font-weight: 700; }
.report-card span { font-size: 0.8rem; color: var(--muted, #64748b); }
.report-app-list { list-style: none; margin: 0; padding: 0; }
.report-app-row { display: flex; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px solid var(--border, #eef2f7); }

/* Team */
.team-directory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.85rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.team-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.team-card-meta { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--muted, #64748b); margin-top: 4px; }
.team-pto-list { list-style: none; margin: 0; padding: 0; }
.team-pto-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border, #eef2f7); }

.special-app-header-actions { display: flex; align-items: center; gap: 0.5rem; }
.help-button {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border, #cbd5e1);
  background: var(--surface-2, #f1f5f9);
  color: var(--muted, #475569);
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.help-button:hover { background: var(--accent, #2563eb); color: #fff; border-color: var(--accent, #2563eb); }

/* ── New-app CRUD surfaces (Calendar / Tasks / Reports / Team) ─────────────── */
.special-app-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.special-app-form {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
  background: var(--surface-2, #f8fafc);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.special-app-form[hidden] { display: none; }
.special-app-form-title { margin: 0; font-size: 1.05rem; }
.special-app-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; color: var(--muted, #475569); }
.special-app-form input,
.special-app-form select,
.special-app-form textarea {
  font-size: 16px;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 8px;
  font-weight: 400;
}
.special-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
}

.calendar-event-actions,
.task-card-actions,
.team-card-actions,
.team-pto-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.calendar-event-actions { margin-left: auto; }
.task-card-actions { margin-top: 0.4rem; }
.team-card-actions { margin-top: 0.5rem; }

.report-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.25rem;
  background: var(--surface-2, #f8fafc);
}
.report-controls label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; color: var(--muted, #475569); }
.report-controls input,
.report-controls select { font-size: 16px; padding: 0.5rem 0.6rem; border: 1px solid var(--border, #cbd5e1); border-radius: 8px; }
.report-detail {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
  background: var(--surface, #fff);
}
.report-detail[hidden] { display: none; }
.report-detail-title { margin: 0 0 0.75rem; font-size: 1.1rem; }

/* ── Activity feed (Phase 5) ─────────────────────────────────────────────── */
.activity-feed { list-style: none; margin: 0.5rem 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.activity-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 9px;
  background: var(--surface, #fff);
}
.activity-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.activity-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.activity-badge--audit { background: #e2e8f0; color: #334155; }
.activity-badge--approval { background: #fef3c7; color: #92400e; }
.activity-badge--workflow { background: #dbeafe; color: #1e40af; }
.activity-badge--handoff { background: #d1fae5; color: #065f46; }

/* ── Today welcome: since-away + onboarding (Phase 5) ────────────────────── */
.today-welcome { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.today-onboarding {
  border: 1px solid var(--accent, #2563eb);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, rgba(37,99,235,0.06), rgba(37,99,235,0.02));
}
.today-onboarding-progress { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent, #2563eb); }
.today-onboarding h3 { margin: 0.3rem 0 0.25rem; font-size: 1.05rem; }
.today-onboarding p { margin: 0 0 0.75rem; color: var(--muted, #475569); }
.today-onboarding-actions { display: flex; gap: 0.5rem; }
.today-since-away {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: var(--surface, #fff);
}
.today-since-label { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #64748b); }
.today-since-stats { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 0.6rem; }
.today-since-stats strong { font-size: 1.15rem; }

/* ── Sidebar operations footer (Phase 5) — collapsible <details> drawer ──── */
.unified-nav-ops { margin-top: auto; margin-bottom: 0.5rem; }
.unified-nav-ops-item { font-size: 0.85rem; }

.unified-nav-ops-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.2rem 0.75rem 0.35rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
/* Hide the native disclosure triangle (Safari/Chrome) */
.unified-nav-ops-summary::-webkit-details-marker { display: none; }
.unified-nav-ops-summary::marker { content: ""; }
.unified-nav-ops-summary:hover .unified-nav-group-label { color: #fff; }
.unified-nav-ops-summary:focus-visible {
  outline: 2px solid var(--sidebar-active, rgba(255,255,255,0.4));
  outline-offset: 2px;
  border-radius: 6px;
}
.unified-nav-ops-caret {
  font-size: 0.7rem;
  color: var(--sidebar-label, #94a3b8);
  transition: transform 0.15s ease;
}
.unified-nav-ops[open] .unified-nav-ops-caret { transform: rotate(90deg); }

/* ── Launch hardening: a11y, error boundary, loading, offline ────────────── */

/* Visually-hidden but screen-reader-available content. Referenced by the
   topbar mode labels, the a11y live region, and inline spinner labels. */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Per-app error boundary panel — friendly, recoverable, scoped to one app. */
.app-error-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.5rem;
  border: 1px solid #fca5a5;
  border-radius: 12px;
  background: #fef2f2;
  color: #7f1d1d;
}
.app-error-state .app-error-icon { font-size: 1.6rem; }
.app-error-state strong { font-size: 1.05rem; }
.app-error-state p { margin: 0; color: #991b1b; }
.app-error-detail { font-size: 0.85rem; color: #b91c1c; }
.app-error-detail summary { cursor: pointer; }
.app-error-detail code {
  display: block;
  margin-top: 0.4rem;
  padding: 0.5rem 0.65rem;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #fecaca;
  white-space: pre-wrap;
  word-break: break-word;
}
.app-error-state button {
  margin-top: 0.3rem;
  min-height: 44px;
}

/* Inline spinner used for in-flight states inside buttons/containers. */
.inline-spinner { display: inline-flex; align-items: center; gap: 0.4rem; }
.spinner-dot {
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinnerRotate 0.7s linear infinite;
}
@keyframes spinnerRotate {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .spinner-dot,
  .loading-skeleton { animation: none; }
}

/* Busy containers and in-flight buttons. */
[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"],
button:disabled { opacity: 0.65; cursor: not-allowed; }

/* Invalid form field marker from validateForm(). */
[aria-invalid="true"] {
  border-color: #dc2626 !important;
  outline: 1px solid #dc2626;
}

/* Offline state: subtle persistent banner so the user knows why writes pause. */
body.app-offline::before {
  content: "Offline — changes are paused until you reconnect.";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  color: #7f1d1d;
  background: #fde68a;
}

/* Keyboard focus for search results (roving focus via Arrow keys). */
.search-result-item:focus-visible,
.search-result-item.active {
  background: var(--surface-alt, #f1f5f9);
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

/* Legacy JS-compat nav (#moduleSelect / #moduleNav) is now hidden via CSS rather
   than an inline style (the CSP blocks inline style attributes). These are
   aria-hidden ghost elements kept only for event-delegation compatibility, so
   they stay hidden in every mode. Placed at end-of-file so this wins the cascade
   over the legacy `.module-nav { display: grid }` rule above. The focus-mode
   selectors are retained for the UX focus guardrail. */
.quick-module-switcher,
.module-nav {
  display: none;
}
body.focus-mode .module-nav,
body.focus-mode .quick-module-switcher {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   UI POLISH PASS — June 6, 2026
   Append-only refinement layer (placed at end-of-file so it wins the cascade for
   these specific touches without disturbing the established component rules).
   Scope: card elevation, stat-card framing, button hierarchy, breadcrumb
   distinctiveness, sidebar active prominence, approvals badge, empty-state warmth.
   Uses the existing navy/amber tokens; no inline styles (CSP style-src 'self').
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Layered soft shadows — warmer and more defined than the single flat --shadow. */
  --polish-shadow-sm: 0 1px 2px rgba(15, 31, 56, 0.05), 0 2px 6px rgba(15, 31, 56, 0.05);
  --polish-shadow-md: 0 4px 14px rgba(15, 31, 56, 0.08), 0 1px 3px rgba(15, 31, 56, 0.05);
  --polish-shadow-hover: 0 12px 28px rgba(15, 31, 56, 0.13), 0 3px 8px rgba(15, 31, 56, 0.07);
  --amber: #e8a020;
  --amber-strong: #c97e0a;
  --amber-soft: rgba(232, 160, 32, 0.13);
}

/* — Content surfaces: lift them off the page with soft elevation + softer corners — */
.calm-app-surface,
.special-app-card,
.v2-panel,
.page-route-card,
.placeholder-route-card,
.guide-card {
  box-shadow: var(--polish-shadow-md);
  border-radius: 12px;
}

/* Top-level app cards gain a clean white surface + gentle shadow; nested
   .app-view-card children stay flat (handled by the existing nested rule). */
.app-workspace > .app-view-card,
.calm-native-surface > .app-view-card,
.calm-app-surface > .app-view-card {
  background: var(--surface);
  border-radius: 11px;
  box-shadow: var(--polish-shadow-sm);
  transition: box-shadow 0.16s ease;
}
.app-workspace > .app-view-card:hover,
.calm-app-surface > .app-view-card:hover {
  box-shadow: var(--polish-shadow-md);
}

/* — Stat / metric cards: frame the bare numbers and tint them with the brand navy.
   A thin amber top-rule and hover lift give the otherwise-plain tiles some life. — */
.report-card,
.metric-card,
.mini-metric {
  position: relative;
  box-shadow: var(--polish-shadow-sm);
  transition: box-shadow 0.16s ease, transform 0.16s ease;
  overflow: hidden;
}
.report-card::before,
.metric-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--amber), var(--amber-strong));
  opacity: 0.85;
}
.report-card:hover,
.metric-card:hover {
  box-shadow: var(--polish-shadow-md);
  transform: translateY(-1px);
}
.report-card strong,
.metric-card strong {
  color: var(--accent);
  letter-spacing: -0.01em;
}

/* — Button hierarchy: primary stays the filled navy but reads as raised; secondary
   gains a visible border so outline actions are clearly the lighter-weight choice.
   Elevation is scoped to content actions so it never touches the sidebar nav,
   breadcrumb, or tab chrome (those are flat by design). — */
.app-workspace button:not(.secondary):not(.compact-action):not(:disabled),
.calm-shell button:not(.secondary):not(.compact-action):not(:disabled),
.special-app-card button:not(.secondary):not(.compact-action):not(:disabled) {
  box-shadow: var(--polish-shadow-sm);
}
.app-workspace button:not(.secondary):not(.compact-action):not(:disabled):hover,
.calm-shell button:not(.secondary):not(.compact-action):not(:disabled):hover,
.special-app-card button:not(.secondary):not(.compact-action):not(:disabled):hover {
  box-shadow: var(--polish-shadow-md);
}
button.secondary {
  border: 1px solid var(--border);
}
button.secondary:hover {
  border-color: #cbd5e1;
}

/* — Breadcrumb: a distinct inset rail rather than loose text, so it reads as chrome
   and separates cleanly from the page body below it. — */
.breadcrumb-bar {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  padding-block: 0.5rem;
}
.breadcrumb-current {
  font-weight: 600;
  color: var(--accent);
}
.breadcrumb-item:first-child a {
  font-weight: 600;
}

/* — Active sidebar item: an amber accent bar + stronger fill makes the current app
   unmistakable against the navy rail. — */
.unified-nav-item.active {
  position: relative;
  background: var(--sidebar-active, rgba(255, 255, 255, 0.14));
  box-shadow: inset 2px 0 0 var(--amber);
}
.unified-nav-item.active .unified-nav-icon {
  filter: none;
}

/* — Pending-approvals badge: warm it and give it a little lift so it pops. — */
.sidebar-approvals-badge {
  box-shadow: 0 2px 8px rgba(232, 160, 32, 0.28);
}

/* — Empty / "all clear" states: a soft amber halo behind the headline turns a bare
   line of text into a calmer, more intentional resting state. — */
.calm-clear-state strong {
  position: relative;
  display: inline-grid;
  place-items: center;
}
.calm-clear-state strong::before {
  content: "";
  position: absolute;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--amber-soft);
  z-index: -1;
}
.empty {
  background: var(--surface-2);
}

/* ════════════════════════════════════════════════════════════════════════════
   Phase 0 — Unified App Page & Navigation Rebuild
   ONE render path: every app paints through renderAppPage(config) into #appPage.
   The three legacy render surfaces (calm shell / module workbench / page list)
   are retained in the DOM for event-delegation but hidden here.
   ════════════════════════════════════════════════════════════════════════════ */

/* Retire the legacy render surfaces — the unified #appPage replaces them. */
.legacy-shell-hidden {
  display: none !important;
}

/* ── App page shell ───────────────────────────────────────────────────────── */
.app-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.75rem 2.5rem;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* Header: icon + title + subtitle, with actions pushed to the right. */
.app-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.app-page-id {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.app-page-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 12px;
  font-size: 1.5rem;
  line-height: 1;
  background: var(--amber-soft);
  box-shadow: inset 0 0 0 1px rgba(232, 160, 32, 0.25);
}

.app-page-titles {
  min-width: 0;
}

.app-page-title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent-dark);
  line-height: 1.15;
}

.app-page-subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

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

.app-page-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, transform 0.05s;
}

.app-page-action:hover {
  background: var(--accent-dark);
}

.app-page-action:active {
  transform: translateY(1px);
}

.app-page-action.secondary {
  background: var(--surface-2);
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px var(--border);
}

.app-page-action.secondary:hover {
  background: #e7edf5;
}

/* ── Tab bar ───────────────────────────────────────────────────────────────── */
.app-page-tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-top: -0.25rem;
}

.app-page-tab {
  appearance: none;
  border: none;
  background: none;
  padding: 0.6rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}

.app-page-tab:hover {
  color: var(--accent-dark);
}

.app-page-tab.active {
  color: var(--accent-dark);
  border-bottom-color: var(--amber);
}

/* ── Inline approval banner ───────────────────────────────────────────────── */
.app-page-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: var(--amber-soft);
  box-shadow: inset 0 0 0 1px rgba(232, 160, 32, 0.3);
  font-size: 0.9rem;
  color: var(--accent-dark);
}

.app-page-banner-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.app-page-banner-text {
  flex: 1 1 auto;
}

.app-page-banner-action {
  appearance: none;
  border: none;
  background: var(--amber-strong);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem 0.85rem;
  border-radius: 7px;
  cursor: pointer;
}

.app-page-banner-action:hover {
  background: var(--gold);
}

/* ── Content host ─────────────────────────────────────────────────────────── */
.app-page-content {
  display: block;
}

/* ── Sidebar active item (Phase 0 refinement) ─────────────────────────────────
   The current app reads as filled navy + an amber left border + white bold. */
.unified-nav-item.active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--amber);
}
.unified-nav-item.active .unified-nav-label strong {
  color: #fff;
}

@media (max-width: 760px) {
  .app-page {
    padding: 1rem 1rem 5rem;
  }
  .app-page-header {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   FRONT DESK — Agent Olivia Operator Dashboard (UX Overhaul Phase 1)
   Two-panel queue, sortable call log, caller directory, Olivia console, settings.
   All .fd- prefixed. No inline styles anywhere (strict CSP: style-src 'self').
   ════════════════════════════════════════════════════════════════════════════ */

/* Shared primitives */
.fd-section-label {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.fd-section-label-spaced { margin-top: 1.1rem; }
.fd-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 700;
}
.fd-empty,
.fd-empty-row {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 1rem;
  text-align: center;
}
.fd-empty-row {
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.fd-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--muted);
}
.fd-status-dot.ringing { background: var(--red); animation: fd-pulse 1.1s ease-in-out infinite; }
.fd-status-dot.hold    { background: #d97706; }
.fd-status-dot.active  { background: #16a34a; }
.fd-status-dot.ended   { background: #94a3b8; }
.fd-status-dot.blocked { background: #475569; }

@keyframes fd-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(180, 35, 24, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fd-status-dot.ringing { animation: none; }
}

.fd-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-dark);
}

.fd-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent-dark);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.fd-btn:hover { background: var(--surface-2); border-color: #cbd5e1; }
.fd-btn:active { transform: translateY(1px); }
.fd-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.fd-btn.primary:hover { background: var(--accent-dark); }
.fd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tab 1: Live Queue */
.fd-queue-layout,
.fd-callers-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) 1fr;
  gap: 1rem;
  align-items: start;
}

.fd-call-list,
.fd-caller-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.9rem;
  box-shadow: var(--shadow);
}

.fd-call-card,
.fd-caller-card {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  font: inherit;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.fd-call-card:hover,
.fd-caller-card:hover { background: var(--surface-2); }
.fd-call-card.selected,
.fd-caller-card.selected {
  border-left-color: var(--active-module-accent);
  background: #fffaf0;
  box-shadow: 0 2px 8px rgba(15, 31, 56, 0.06);
}
.fd-call-card:focus-visible,
.fd-caller-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.fd-call-card .fd-status-dot { margin-top: 0.35rem; }
.fd-call-card-body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; min-width: 0; }
.fd-call-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.fd-call-card-top strong { color: var(--accent-dark); font-size: 0.95rem; }
.fd-call-time { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fd-call-card-sub { font-size: 0.82rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-call-status { font-size: 0.75rem; color: var(--muted); }

/* Detail panel (shared by Live Queue + Callers) */
.fd-detail-panel,
.fd-caller-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.2rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fd-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.fd-detail-header h2 { margin: 0.35rem 0 0.1rem; font-size: 1.25rem; color: var(--accent-dark); }
.fd-detail-sub { margin: 0; color: var(--muted); font-size: 0.88rem; }
.fd-call-time-lg { font-size: 1.1rem; font-weight: 700; color: var(--accent-dark); font-variant-numeric: tabular-nums; }

.fd-call-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fd-detail-section { display: flex; flex-direction: column; }

.fd-context-block { margin: 0; display: grid; gap: 0.55rem; }
.fd-context-block > div { display: grid; grid-template-columns: 96px 1fr; gap: 0.6rem; align-items: baseline; }
.fd-context-block dt { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.fd-context-block dd { margin: 0; font-size: 0.9rem; color: var(--text); }

.fd-olivia-suggestion {
  display: flex;
  gap: 0.7rem;
  background: #f0f6ff;
  border: 1px solid #d6e4f7;
  border-radius: 12px;
  padding: 0.85rem 1rem;
}
.fd-olivia-suggestion p { margin: 0; font-size: 0.92rem; color: #1e3a5f; line-height: 1.45; }
.fd-olivia-avatar { font-size: 1.2rem; flex: 0 0 auto; }

.fd-transcript { display: flex; flex-direction: column; gap: 0.4rem; }
.fd-transcript-line { margin: 0; font-size: 0.88rem; line-height: 1.4; padding: 0.4rem 0.6rem; border-radius: 8px; background: var(--surface-2); }
.fd-transcript-line span { font-weight: 700; color: var(--accent-dark); margin-right: 0.4rem; }
.fd-transcript-line.caller { background: #f1f5f9; }
.fd-transcript-line.olivia { background: #f0f6ff; }

.fd-detail-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.fd-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1rem;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--muted);
}
.fd-status-bar strong { color: var(--accent-dark); }
.fd-status-pill.online { color: #16a34a; }
.fd-status-pill.offline { color: var(--muted); }

/* Tab 2: Call Log */
.fd-log { display: flex; flex-direction: column; gap: 0.9rem; }
.fd-log-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}
.fd-search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  max-width: 420px;
}
.fd-search-icon { position: absolute; left: 0.7rem; font-size: 0.85rem; pointer-events: none; opacity: 0.6; }
.fd-search {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.55rem 0.8rem 0.55rem 2.1rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}
.fd-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.fd-filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fd-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fd-chip:hover { background: var(--surface-2); }
.fd-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.fd-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fd-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.fd-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.fd-table thead th {
  text-align: left;
  padding: 0;
  border-bottom: 2px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}
.fd-sort-btn {
  appearance: none;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.fd-sort-btn:hover { color: var(--accent-dark); }
.fd-sort-btn.active { color: var(--accent-dark); }
.fd-sort-mark { font-size: 0.65rem; }
.fd-table tbody td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.fd-table tbody tr:last-child td { border-bottom: none; }
.fd-table tbody tr:hover { background: var(--surface-2); }
.fd-cell-sub { display: block; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.fd-outcome-badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: capitalize;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.fd-outcome-badge.answered  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.fd-outcome-badge.missed    { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.fd-outcome-badge.voicemail { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.fd-outcome-badge.blocked   { background: #e2e8f0; color: #475569; border-color: #cbd5e1; }

.fd-handler-tag { font-size: 0.78rem; font-weight: 600; }
.fd-handler-tag.olivia { color: #2563eb; }
.fd-handler-tag.human  { color: var(--accent-dark); }

.fd-table-foot { margin: 0; font-size: 0.8rem; color: var(--muted); }

/* Tab 3: Callers */
.fd-caller-card { align-items: center; }
.fd-caller-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fd-caller-card-body { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 auto; min-width: 0; }
.fd-caller-card-body strong { color: var(--accent-dark); font-size: 0.92rem; }
.fd-caller-card-sub { font-size: 0.82rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-caller-card-meta { font-size: 0.74rem; color: var(--muted); }

.fd-rel-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  flex: 0 0 auto;
}
.fd-rel-badge.known   { background: #e0f2fe; color: #075985; }
.fd-rel-badge.vip     { background: #fef3c7; color: #92400e; }
.fd-rel-badge.new     { background: #dcfce7; color: #166534; }
.fd-rel-badge.blocked { background: #fee2e2; color: #991b1b; }

.fd-caller-notes { margin: 0; font-size: 0.9rem; color: var(--text); line-height: 1.5; }
.fd-history-list { display: flex; flex-direction: column; gap: 0.4rem; }
.fd-history-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  font-size: 0.85rem;
}
.fd-history-main { color: var(--accent-dark); }
.fd-history-sub { margin-left: auto; color: var(--muted); font-size: 0.8rem; text-align: right; }

/* Tab 4: Olivia */
.fd-olivia-grid,
.fd-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: start;
}
.fd-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow);
}
.fd-card-wide { grid-column: 1 / -1; }

.fd-mode-switch { display: flex; flex-direction: column; gap: 0.5rem; }
.fd-mode-btn {
  appearance: none;
  text-align: left;
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  background: var(--surface);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  transition: background 0.15s, border-color 0.15s;
}
.fd-mode-btn:hover { background: var(--surface-2); }
.fd-mode-btn strong { color: var(--accent-dark); font-size: 0.92rem; }
.fd-mode-btn span { font-size: 0.8rem; color: var(--muted); }
.fd-mode-btn.active { border-left-color: var(--active-module-accent); background: #fffaf0; }
.fd-mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.fd-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; }
.fd-stat-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 2px solid var(--active-module-accent);
  border-radius: 10px;
  padding: 0.7rem 0.6rem;
  text-align: center;
}
.fd-stat-card strong { display: block; font-size: 1.4rem; color: var(--accent-dark); line-height: 1.1; }
.fd-stat-card span { font-size: 0.74rem; color: var(--muted); }

.fd-greeting-preview {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--active-module-accent);
  background: var(--surface-2);
  border-radius: 0 10px 10px 0;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--accent-dark);
}

.fd-kb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.fd-kb-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--text);
}
.fd-kb-status { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }
.fd-kb-status.current { background: #dcfce7; color: #166534; }
.fd-kb-status.review { background: #fef3c7; color: #92400e; }

.fd-decision-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.fd-decision-item { display: flex; gap: 0.8rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.fd-decision-item:last-child { border-bottom: none; }
.fd-decision-time { flex: 0 0 5.5rem; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.fd-decision-body { display: flex; flex-direction: column; gap: 0.1rem; }
.fd-decision-body strong { color: var(--accent-dark); font-size: 0.9rem; }
.fd-decision-body span { font-size: 0.84rem; color: var(--text); }

/* Tab 5: Settings */
.fd-hours-list,
.fd-rules-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.fd-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.88rem;
}
.fd-hours-row strong { color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.fd-rule-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
}
.fd-rule-match { color: var(--text); }
.fd-rule-arrow { color: var(--muted); font-weight: 700; }
.fd-rule-route { color: var(--accent-dark); font-weight: 600; }

.fd-field { display: flex; flex-direction: column; gap: 0.35rem; }
.fd-field > span { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.fd-textarea,
.fd-input {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}
.fd-textarea:focus-visible,
.fd-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.fd-toggle-row { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.75rem; font-size: 0.86rem; color: var(--text); }
.fd-settings-save { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fd-save-hint { font-size: 0.82rem; color: var(--muted); }

/* Responsive */
@media (max-width: 900px) {
  .fd-queue-layout,
  .fd-callers-layout,
  .fd-olivia-grid,
  .fd-settings-grid { grid-template-columns: 1fr; }
  .fd-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .fd-context-block > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .fd-history-sub { margin-left: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mailroom (Phase 2) — Outlook-style email client.
   Three-panel Inbox (folder tree | message list | reading pane), plus Drafts,
   Sent, Archive, and Rules tabs, and a compose modal. CSP-clean: all visual
   styling lives here, never inline. Prefixed `.mr-` to avoid collisions with the
   legacy `.mailroom-*` classes (kept for the older workspace view + QA gates).
   ───────────────────────────────────────────────────────────────────────────── */

.mr-inbox {
  display: grid;
  grid-template-columns: 200px 330px 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 560px;
  box-shadow: var(--polish-shadow-sm);
}
.mr-archive {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 560px;
  box-shadow: var(--polish-shadow-sm);
}

/* — Folder tree (left rail) — */
.mr-folder-tree {
  background: var(--surface-2);
  padding: 0.6rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow-y: auto;
}
.mr-tree-section { display: flex; flex-direction: column; gap: 0.1rem; }
.mr-tree-label {
  margin: 0.4rem 0.5rem 0.2rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.mr-folder,
.mr-label-row,
.mr-shared-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.mr-folder:hover,
.mr-label-row:hover,
.mr-shared-row:hover { background: rgba(15, 31, 56, 0.06); }
.mr-folder.active,
.mr-label-row.active,
.mr-shared-row.active {
  background: var(--accent);
  color: #fff;
}
.mr-folder-icon, .mr-shared-icon { font-size: 0.95rem; }
.mr-folder-name { flex: 1; }
.mr-folder-badge {
  min-width: 1.3rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--amber);
  color: #1a1206;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}
.mr-folder.active .mr-folder-badge { background: #fff; color: var(--accent); }

.mr-label-dot {
  width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none;
}
.mr-label-dot.red, .mr-row-label.red { background: #b42318; }
.mr-label-dot.yellow, .mr-row-label.yellow { background: #d97706; }
.mr-label-dot.green, .mr-row-label.green { background: #15803d; }
.mr-label-dot.blue, .mr-row-label.blue { background: #2563eb; }

/* — Message list (center) — */
.mr-list-pane {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mr-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--border);
}
.mr-list-head h2 { margin: 0; font-size: 0.98rem; font-weight: 800; color: var(--accent); }
.mr-list-count { font-size: 0.74rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.mr-archive-head { gap: 0.6rem; }
.mr-search {
  flex: 1;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
}
.mr-search:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

.mr-list { overflow-y: auto; flex: 1; }
.mr-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease;
}
.mr-row:hover { background: var(--surface-2); }
.mr-row.selected {
  background: rgba(232, 160, 32, 0.1);
  border-left-color: var(--amber);
}
.mr-pri {
  width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-top: 0.32rem; flex: none;
}
.mr-pri.urgent { background: #b42318; }
.mr-pri.high { background: var(--amber); }
.mr-pri.medium { background: #2563eb; }
.mr-pri.low { background: #cbd5e1; }
.mr-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.mr-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.mr-row-from { font-size: 0.86rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-row-date { font-size: 0.72rem; color: var(--muted); white-space: nowrap; flex: none; }
.mr-row-subject { font-size: 0.85rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-row-preview { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-row.unread .mr-row-from,
.mr-row.unread .mr-row-subject { font-weight: 800; }
.mr-row.unread .mr-pri { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.mr-row-labels { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.15rem; }
.mr-row-label {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
}
.mr-row-attach { font-size: 0.85rem; color: var(--muted); flex: none; }
.mr-star { color: var(--amber); }

/* — Reading pane (right) — */
.mr-read-pane {
  background: var(--surface);
  padding: 1.1rem 1.25rem;
  overflow-y: auto;
}
.mr-read-empty { display: flex; align-items: center; justify-content: center; }
.mr-read-head { border-bottom: 1px solid var(--border); padding-bottom: 0.85rem; margin-bottom: 0.9rem; }
.mr-read-subjectline { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.mr-read-subjectline h2 { margin: 0; font-size: 1.18rem; font-weight: 800; color: var(--accent); }
.mr-star-btn {
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.2rem; color: #cbd5e1; line-height: 1;
}
.mr-star-btn.on { color: var(--amber); }
.mr-read-labels { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.55rem; }
.mr-read-meta { margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.25rem; }
.mr-read-meta div { display: flex; gap: 0.5rem; font-size: 0.82rem; }
.mr-read-meta dt { color: var(--muted); font-weight: 700; min-width: 3rem; }
.mr-read-meta dd { margin: 0; color: var(--text); }
.mr-read-body {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
  white-space: normal;
  margin-bottom: 1rem;
}
.mr-attachments {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  margin-bottom: 1rem;
  background: var(--surface-2);
}
.mr-attachments-label { margin: 0 0 0.45rem; font-size: 0.74rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mr-attachment-chip {
  display: inline-block;
  margin: 0.15rem 0.35rem 0.15rem 0;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.8rem;
  color: var(--text);
}
.mr-read-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.mr-routing { border-top: 1px dashed var(--border); padding-top: 0.85rem; }
.mr-routing-label { margin: 0 0 0.4rem; font-size: 0.74rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* — Buttons — */
.mr-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.mr-btn:hover { background: var(--surface-2); }
.mr-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.mr-btn.primary:hover { background: var(--accent-dark); }
.mr-btn.danger { color: #b42318; border-color: #f3c7c2; }
.mr-btn.danger:hover { background: #fef2f2; }

/* — Simple tabs (Drafts / Sent / Rules) — */
.mr-simple { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 1rem 1.15rem; box-shadow: var(--polish-shadow-sm); min-height: 400px; }
.mr-simple-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.mr-simple-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--accent); }

.mr-card-list { display: flex; flex-direction: column; gap: 0.65rem; }
.mr-draft-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
}
.mr-draft-main { min-width: 0; flex: 1; }
.mr-draft-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.mr-draft-top strong { font-size: 0.92rem; color: var(--text); }
.mr-draft-to { margin: 0.2rem 0; font-size: 0.78rem; color: var(--muted); }
.mr-draft-actions { display: flex; gap: 0.45rem; flex: none; }

.mr-sent-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.mr-sent-table th {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 2px solid var(--border);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.mr-sent-table td { padding: 0.6rem; border-bottom: 1px solid var(--border); color: var(--text); }
.mr-status { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.mr-status.delivered { background: #dcfce7; color: #15803d; }
.mr-status.pending { background: #fef3c7; color: #b45309; }
.mr-status.sent { background: #e0e7ff; color: #3730a3; }

/* — Rules — */
.mr-rule-list { display: flex; flex-direction: column; gap: 0.65rem; }
.mr-rule-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.mr-rule-card.disabled { opacity: 0.62; }
.mr-rule-main { min-width: 0; flex: 1; }
.mr-rule-main strong { font-size: 0.92rem; color: var(--accent); }
.mr-rule-line { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--text); }
.mr-rule-tag {
  display: inline-block;
  min-width: 2.7rem;
  margin-right: 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.mr-toggle { display: flex; align-items: center; gap: 0.5rem; flex: none; cursor: pointer; }
.mr-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.mr-toggle-track {
  position: relative;
  width: 2.4rem; height: 1.3rem;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.15s ease;
}
.mr-toggle-track::after {
  content: "";
  position: absolute;
  top: 0.15rem; left: 0.15rem;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.mr-toggle input:checked + .mr-toggle-track { background: var(--amber); }
.mr-toggle input:checked + .mr-toggle-track::after { transform: translateX(1.1rem); }
.mr-toggle input:focus-visible + .mr-toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.mr-toggle-text { font-size: 0.78rem; font-weight: 700; color: var(--muted); }

.mr-rule-builder {
  border: 1px solid var(--amber);
  background: rgba(232, 160, 32, 0.06);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.mr-rule-builder h3 { margin: 0; font-size: 0.95rem; color: var(--accent); }
.mr-rule-builder label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; color: var(--text); }
.mr-rule-builder input {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 400;
}
.mr-rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.mr-rule-builder-actions { display: flex; gap: 0.5rem; }

/* — Empty states — */
.mr-empty { padding: 1.25rem; color: var(--muted); font-size: 0.86rem; text-align: center; }
.mr-empty-lg { padding: 3rem 1.25rem; }

/* — Compose modal — */
.mr-compose-overlay { position: fixed; inset: 0; z-index: 1200; }
.mr-compose-overlay[hidden] { display: none; }
.mr-compose-backdrop { position: absolute; inset: 0; background: rgba(10, 22, 40, 0.45); }
.mr-compose {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  width: min(560px, calc(100vw - 3rem));
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(10, 22, 40, 0.35);
  overflow: hidden;
}
.mr-compose-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  background: var(--accent);
  color: #fff;
}
.mr-compose-head h3 { margin: 0; font-size: 0.98rem; font-weight: 800; }
.mr-compose-x { border: 0; background: transparent; color: #fff; font-size: 1rem; cursor: pointer; }
.mr-compose-form { padding: 0.9rem 1.1rem 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; }
.mr-compose-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.76rem; font-weight: 700; color: var(--muted); }
.mr-compose-field input,
.mr-compose-field textarea {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 400;
}
.mr-compose-field textarea { resize: vertical; min-height: 8rem; }
.mr-compose-bodyfield { flex: 1; }
.mr-compose-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}
.mr-approval-toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--text); }
.mr-compose-attach { font-size: 0.8rem; color: var(--muted); }
.mr-compose-footer .mr-btn.primary { margin-left: auto; }

/* — Responsive — */
@media (max-width: 1100px) {
  .mr-inbox { grid-template-columns: 170px 1fr; }
  .mr-inbox .mr-read-pane { grid-column: 1 / -1; border-top: 1px solid var(--border); }
}
@media (max-width: 760px) {
  .mr-inbox { grid-template-columns: 1fr; }
  .mr-inbox .mr-folder-tree { flex-direction: row; flex-wrap: wrap; }
  .mr-archive { grid-template-columns: 1fr; }
  .mr-rule-grid { grid-template-columns: 1fr; }
  .mr-draft-card, .mr-rule-card { flex-direction: column; align-items: stretch; }
  .mr-compose { right: 0.75rem; left: 0.75rem; bottom: 0.75rem; width: auto; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Scribe (Phase 3, UX Overhaul) — KindrScribe-style dictation & notes.
   CSP-clean (no inline styles). All classes prefixed .sc-
   ─────────────────────────────────────────────────────────────────────────── */

/* Buttons */
.sc-btn {
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sc-btn:hover { background: var(--surface-2); }
.sc-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.sc-btn.primary:hover { background: var(--accent-dark); }
.sc-btn.secondary { background: var(--surface-2); }
.sc-btn.ghost { background: transparent; border-color: transparent; }
.sc-btn.ghost:hover { background: var(--surface-2); }
.sc-btn.danger { color: var(--red); }
.sc-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Tags */
.sc-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.sc-tag.recording { background: #fde8e8; color: var(--red); }
.sc-tag.draft { background: #fef3e2; color: var(--gold); }
.sc-tag.filed { background: #e6f4ea; color: #15803d; }
.sc-tag.required { background: #fef3e2; color: var(--gold); }
.sc-tag.muted { background: var(--surface-2); color: var(--muted); }

.sc-list-heading {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1rem 0 0.4rem;
}
.sc-section-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 1rem 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sc-count {
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-size: 0.72rem;
}
.sc-empty, .sc-empty-panel p {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 1rem;
  text-align: center;
}
.sc-empty-panel { display: grid; place-items: center; }

/* Captures: two-panel layout */
.sc-captures-layout,
.sc-templates-layout,
.sc-filed-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 1rem;
  align-items: start;
}
.sc-capture-list,
.sc-template-grid-wrap,
.sc-filed-list-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem;
  box-shadow: var(--shadow);
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
.sc-list-actions { margin-bottom: 0.5rem; }
.sc-list-actions-row { display: flex; align-items: center; justify-content: space-between; }
.sc-list-actions .sc-btn { width: 100%; }
.sc-list-actions-row .sc-btn { width: auto; }

.sc-capture-card {
  display: flex;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.sc-capture-card:hover { background: var(--surface-2); }
.sc-capture-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sc-capture-card.recording { border-color: var(--red); background: #fef6f6; }

.sc-capture-status { flex-shrink: 0; padding-top: 0.1rem; }
.sc-capture-icon { font-size: 1rem; }
.sc-capture-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.sc-capture-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.sc-capture-top strong { font-size: 0.92rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-capture-dur { font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.sc-capture-sub { font-size: 0.76rem; color: var(--muted); }
.sc-capture-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }

/* Recording pulse dot */
.sc-rec-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  animation: sc-pulse 1.4s ease-out infinite;
}
@keyframes sc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(180, 35, 24, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(180, 35, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, 0); }
}

/* Waveform (pure CSS animation) */
.sc-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  margin-top: 0.4rem;
}
.sc-wave-bar {
  flex: 1;
  min-width: 2px;
  max-width: 5px;
  height: 20%;
  background: var(--muted);
  border-radius: 2px;
  opacity: 0.55;
}
.sc-waveform.active .sc-wave-bar {
  background: var(--red);
  opacity: 1;
  animation: sc-wave 1s ease-in-out infinite;
}
.sc-waveform.active .sc-wave-bar:nth-child(3n) { animation-delay: 0.1s; }
.sc-waveform.active .sc-wave-bar:nth-child(3n+1) { animation-delay: 0.25s; }
.sc-waveform.active .sc-wave-bar:nth-child(3n+2) { animation-delay: 0.4s; }
.sc-waveform.active .sc-wave-bar:nth-child(4n) { animation-delay: 0.55s; }
.sc-waveform.active .sc-wave-bar:nth-child(5n) { animation-delay: 0.7s; }
@keyframes sc-wave {
  0%, 100% { height: 18%; }
  50% { height: 92%; }
}

/* Capture detail panel */
.sc-detail,
.sc-template-detail,
.sc-filed-reader {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: var(--shadow);
  min-height: 320px;
}
.sc-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
}
.sc-detail-header h2 { margin: 0.15rem 0; font-size: 1.15rem; color: var(--accent-dark); }
.sc-detail-meta { margin: 0; font-size: 0.82rem; color: var(--muted); }

.sc-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.sc-view-btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  background: var(--surface);
  color: var(--muted);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  border-right: 1px solid var(--border);
}
.sc-view-btn:last-child { border-right: none; }
.sc-view-btn:hover { background: var(--surface-2); }
.sc-view-btn.active { background: var(--accent); color: #fff; }

.sc-detail-body { min-height: 80px; }
.sc-transcript-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  margin: 0;
}
.sc-structured { display: flex; flex-direction: column; gap: 0.9rem; }
.sc-structured-section {
  background: var(--surface-2);
  border-left: 3px solid var(--active-module-accent);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
}
.sc-structured-section h4 {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
}
.sc-structured-section p { margin: 0; font-size: 0.9rem; line-height: 1.55; }

/* Live transcript (active recording detail) */
.sc-live-transcript { padding: 0.5rem 0; }
.sc-live-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--red);
  margin: 0.6rem 0 0.4rem;
}
.sc-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--red);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: sc-blink 1s step-start infinite;
}
@keyframes sc-blink { 50% { opacity: 0; } }

/* Action items */
.sc-detail-section { margin-top: 0.5rem; }
.sc-action-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.sc-action-item { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; }
.sc-action-item.done span { text-decoration: line-through; color: var(--muted); }
.sc-check {
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--accent);
  padding: 0;
}

.sc-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
.sc-filed-note { font-size: 0.85rem; font-weight: 600; color: #15803d; }

/* Recording studio */
.sc-studio {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.sc-studio-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.sc-studio-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1.5rem 2.5rem;
  max-width: 540px;
  margin: 0 auto;
}
.sc-studio-title-field,
.sc-studio-template-field { width: 100%; display: flex; flex-direction: column; gap: 0.3rem; }
.sc-studio-title-field span,
.sc-studio-template-field span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.sc-studio-title-field input,
.sc-studio-template-field select {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.sc-record-orb-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin: 0.5rem 0; }
.sc-record-orb {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--red);
  background: var(--red);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sc-record-orb:hover { transform: scale(1.04); }
.sc-record-orb.recording { animation: sc-pulse 1.4s ease-out infinite; }
.sc-record-orb-inner { line-height: 1; }
.sc-record-timer {
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-dark);
  margin: 0;
}
.sc-record-hint { font-size: 0.85rem; color: var(--muted); margin: 0; }
.sc-record-controls { display: flex; gap: 0.6rem; }
.sc-studio-stage .sc-waveform { width: 100%; max-width: 360px; height: 44px; }

/* Templates */
.sc-template-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.sc-template-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: left;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sc-template-card:hover { background: var(--surface-2); }
.sc-template-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sc-template-card strong { font-size: 0.95rem; color: var(--text); }
.sc-template-cat {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--active-module-accent);
}
.sc-template-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
.sc-template-meta { font-size: 0.74rem; color: var(--muted); font-style: normal; }
.sc-template-detail-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.sc-template-sections { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.sc-template-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
}
.sc-template-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sc-template-section-head strong { font-size: 0.9rem; }
.sc-template-hint { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--muted); }
.sc-template-preview {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--surface-2);
}
.sc-preview-row { display: flex; flex-direction: column; gap: 0.3rem; }
.sc-preview-head { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; color: var(--accent); }
.sc-preview-line { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--border), transparent); }

/* Filed notes */
.sc-filed-search { margin-bottom: 0.75rem; }
.sc-filed-search input {
  font: inherit;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.sc-filed-table { display: flex; flex-direction: column; }
.sc-filed-head,
.sc-filed-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.8fr;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.5rem;
}
.sc-filed-head {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.sc-filed-row {
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font: inherit;
}
.sc-filed-row:hover { background: var(--surface-2); }
.sc-filed-row.selected { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.sc-filed-title { font-weight: 600; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-filed-cell { font-size: 0.8rem; color: var(--muted); }
.sc-filed-doclink { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--muted); }

/* Settings */
.sc-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  align-items: start;
}
.sc-settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.sc-settings-card h3 { margin: 0 0 1rem; font-size: 1rem; color: var(--accent-dark); }
.sc-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; }
.sc-field span { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.sc-field input, .sc-field select {
  font: inherit;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
.sc-toggle-field { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; margin-bottom: 0.9rem; }
.sc-toggle-field input { width: 16px; height: 16px; }
.sc-settings-note { font-size: 0.8rem; color: var(--muted); line-height: 1.5; margin: 0.5rem 0 0; }

/* Responsive */
@media (max-width: 900px) {
  .sc-captures-layout,
  .sc-templates-layout,
  .sc-filed-layout { grid-template-columns: 1fr; }
  .sc-capture-list,
  .sc-template-grid-wrap,
  .sc-filed-list-wrap { max-height: none; }
  .sc-filed-head, .sc-filed-row { grid-template-columns: 1.4fr 1fr; }
  .sc-filed-head span:nth-child(3),
  .sc-filed-head span:nth-child(4),
  .sc-filed-row .sc-filed-cell:nth-child(3),
  .sc-filed-row .sc-filed-cell:nth-child(4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-rec-dot,
  .sc-record-orb.recording,
  .sc-waveform.active .sc-wave-bar,
  .sc-caret { animation: none; }
}



/* ===== Calendar grid utility classes (Phase 4) — grid-row/col placement, CSP-clean ===== */
.cal-rs-1{grid-row-start:1}
.cal-rs-2{grid-row-start:2}
.cal-rs-3{grid-row-start:3}
.cal-rs-4{grid-row-start:4}
.cal-rs-5{grid-row-start:5}
.cal-rs-6{grid-row-start:6}
.cal-rs-7{grid-row-start:7}
.cal-rs-8{grid-row-start:8}
.cal-rs-9{grid-row-start:9}
.cal-rs-10{grid-row-start:10}
.cal-rs-11{grid-row-start:11}
.cal-rs-12{grid-row-start:12}
.cal-rs-13{grid-row-start:13}
.cal-rs-14{grid-row-start:14}
.cal-rs-15{grid-row-start:15}
.cal-rs-16{grid-row-start:16}
.cal-rs-17{grid-row-start:17}
.cal-rs-18{grid-row-start:18}
.cal-rs-19{grid-row-start:19}
.cal-rs-20{grid-row-start:20}
.cal-rs-21{grid-row-start:21}
.cal-rs-22{grid-row-start:22}
.cal-rs-23{grid-row-start:23}
.cal-rs-24{grid-row-start:24}
.cal-rs-25{grid-row-start:25}
.cal-rs-26{grid-row-start:26}
.cal-rs-27{grid-row-start:27}
.cal-rs-28{grid-row-start:28}
.cal-rs-29{grid-row-start:29}
.cal-rs-30{grid-row-start:30}
.cal-rs-31{grid-row-start:31}
.cal-rs-32{grid-row-start:32}
.cal-rs-33{grid-row-start:33}
.cal-rs-34{grid-row-start:34}
.cal-rs-35{grid-row-start:35}
.cal-rs-36{grid-row-start:36}
.cal-rs-37{grid-row-start:37}
.cal-rs-38{grid-row-start:38}
.cal-rs-39{grid-row-start:39}
.cal-rs-40{grid-row-start:40}
.cal-rs-41{grid-row-start:41}
.cal-rs-42{grid-row-start:42}
.cal-rs-43{grid-row-start:43}
.cal-rs-44{grid-row-start:44}
.cal-rs-45{grid-row-start:45}
.cal-rs-46{grid-row-start:46}
.cal-rs-47{grid-row-start:47}
.cal-rs-48{grid-row-start:48}
.cal-rs-49{grid-row-start:49}
.cal-re-1{grid-row-end:1}
.cal-re-2{grid-row-end:2}
.cal-re-3{grid-row-end:3}
.cal-re-4{grid-row-end:4}
.cal-re-5{grid-row-end:5}
.cal-re-6{grid-row-end:6}
.cal-re-7{grid-row-end:7}
.cal-re-8{grid-row-end:8}
.cal-re-9{grid-row-end:9}
.cal-re-10{grid-row-end:10}
.cal-re-11{grid-row-end:11}
.cal-re-12{grid-row-end:12}
.cal-re-13{grid-row-end:13}
.cal-re-14{grid-row-end:14}
.cal-re-15{grid-row-end:15}
.cal-re-16{grid-row-end:16}
.cal-re-17{grid-row-end:17}
.cal-re-18{grid-row-end:18}
.cal-re-19{grid-row-end:19}
.cal-re-20{grid-row-end:20}
.cal-re-21{grid-row-end:21}
.cal-re-22{grid-row-end:22}
.cal-re-23{grid-row-end:23}
.cal-re-24{grid-row-end:24}
.cal-re-25{grid-row-end:25}
.cal-re-26{grid-row-end:26}
.cal-re-27{grid-row-end:27}
.cal-re-28{grid-row-end:28}
.cal-re-29{grid-row-end:29}
.cal-re-30{grid-row-end:30}
.cal-re-31{grid-row-end:31}
.cal-re-32{grid-row-end:32}
.cal-re-33{grid-row-end:33}
.cal-re-34{grid-row-end:34}
.cal-re-35{grid-row-end:35}
.cal-re-36{grid-row-end:36}
.cal-re-37{grid-row-end:37}
.cal-re-38{grid-row-end:38}
.cal-re-39{grid-row-end:39}
.cal-re-40{grid-row-end:40}
.cal-re-41{grid-row-end:41}
.cal-re-42{grid-row-end:42}
.cal-re-43{grid-row-end:43}
.cal-re-44{grid-row-end:44}
.cal-re-45{grid-row-end:45}
.cal-re-46{grid-row-end:46}
.cal-re-47{grid-row-end:47}
.cal-re-48{grid-row-end:48}
.cal-re-49{grid-row-end:49}
.cal-col-1{grid-column:2}
.cal-col-2{grid-column:3}
.cal-col-3{grid-column:4}
.cal-col-4{grid-column:5}
.cal-col-5{grid-column:6}
.cal-col-6{grid-column:7}
.cal-col-7{grid-column:8}

/* ───────────────────────────────────────────────────────────────────────────
   Phase 4 (UX Overhaul): Outlook-style Calendar.
   Real CSS-grid week/day views with grid-row-positioned, color-coded event
   blocks; month grid; list view; agenda strip; event-detail + new-event modals.
   CSP-clean: positioning uses the cal-rs / cal-re / cal-col grid utility
   classes above (no inline styles). Type colors: meeting=blue, call=green,
   appointment=amber, block/pto=gray.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --cal-blue: #2563eb;
  --cal-blue-soft: #eff4ff;
  --cal-green: #15803d;
  --cal-green-soft: #ecfdf3;
  --cal-amber: #b45309;
  --cal-amber-soft: #fff7ed;
  --cal-gray: #64748b;
  --cal-gray-soft: #f1f5f9;
  --cal-today: #fef6e3;
  --cal-line: #e8edf3;
  --cal-row-h: 15px;       /* week quarter-hour row height */
  --cal-day-row-h: 26px;   /* day quarter-hour row height */
}

.cal-app { display: flex; flex-direction: column; gap: 1rem; }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem;
}
.cal-nav { display: flex; align-items: center; gap: 0.5rem; }
.cal-navbtn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--accent); font-size: 0.85rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.cal-navbtn:hover { background: var(--surface-2); }
.cal-range { font-weight: 700; color: var(--accent-dark); min-width: 12ch; text-align: center; font-size: 1rem; }
.cal-today-pill { font-size: 0.7rem; font-weight: 700; color: var(--cal-amber); background: var(--cal-today); border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.4rem; }
.cal-today-btn {
  margin-left: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff; font-weight: 600; font-size: 0.82rem;
}
.cal-today-btn:hover { background: var(--accent-dark); }

.cal-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.cal-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--muted); font-weight: 600; }
.cal-legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-legend-dot.meeting, .cal-agenda-dot.meeting { background: var(--cal-blue); }
.cal-legend-dot.call, .cal-agenda-dot.call { background: var(--cal-green); }
.cal-legend-dot.appointment, .cal-agenda-dot.appointment { background: var(--cal-amber); }
.cal-legend-dot.block, .cal-agenda-dot.block,
.cal-legend-dot.pto, .cal-agenda-dot.pto { background: var(--cal-gray); }

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.cal-grid-scroll { overflow: auto; max-height: 64vh; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }

/* ── Week view ───────────────────────────────────────────────────────────── */
.cal-week { min-width: 720px; }
.cal-week-head {
  display: grid; grid-template-columns: 56px repeat(7, 1fr);
  position: sticky; top: 0; z-index: 5; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.cal-corner { border-right: 1px solid var(--cal-line); }
.cal-dayhead {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: 0.5rem 0.25rem; border-right: 1px solid var(--cal-line);
  background: transparent; cursor: pointer; font: inherit; color: var(--muted);
}
.cal-dayhead:hover { background: var(--surface-2); }
.cal-dayhead-wd { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.cal-daynum { font-size: 1.15rem; font-weight: 700; color: var(--accent-dark); width: 1.7em; height: 1.7em; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.cal-dayhead.today .cal-daynum { background: var(--accent); color: #fff; }
.cal-dayhead.today { color: var(--accent-dark); }

.cal-week-body {
  display: grid; grid-template-columns: 56px repeat(7, 1fr);
  grid-template-rows: repeat(48, var(--cal-row-h));
}

/* ── Day view ────────────────────────────────────────────────────────────── */
.cal-day { min-width: 320px; }
.cal-day-body {
  display: grid; grid-template-columns: 64px 1fr;
  grid-template-rows: repeat(48, var(--cal-day-row-h));
}
.cal-dcol { grid-column: 2; }

/* ── Hour labels (gutter) ────────────────────────────────────────────────── */
.cal-hourlabel {
  grid-column: 1; border-right: 1px solid var(--cal-line); border-top: 1px solid var(--cal-line);
  font-size: 0.68rem; color: var(--muted); padding: 2px 6px 0 0; text-align: right; font-weight: 600;
}

/* ── Slots (hour lines + click-to-create targets) ────────────────────────── */
.cal-slot {
  border-top: 1px solid var(--cal-line); border-right: 1px solid var(--cal-line);
  background: transparent; cursor: pointer; padding: 0; z-index: 1; font: inherit;
}
.cal-slot:hover { background: var(--cal-blue-soft); }
.cal-slot.today { background: var(--cal-today); }
.cal-slot.today:hover { background: #fdeec8; }

/* ── Event blocks ────────────────────────────────────────────────────────── */
.cal-event {
  z-index: 2; margin: 1px; border-radius: 6px; padding: 2px 6px; overflow: hidden;
  display: flex; flex-direction: column; gap: 0; cursor: pointer; text-align: left;
  border-left: 3px solid var(--cal-gray); font: inherit; min-height: 0;
  background: var(--cal-gray-soft); color: var(--accent-dark); line-height: 1.15;
}
.cal-event:hover { filter: brightness(0.97); box-shadow: 0 2px 8px rgba(15,31,56,0.14); }
.cal-event.meeting { background: var(--cal-blue-soft); border-left-color: var(--cal-blue); }
.cal-event.call { background: var(--cal-green-soft); border-left-color: var(--cal-green); }
.cal-event.appointment { background: var(--cal-amber-soft); border-left-color: var(--cal-amber); }
.cal-event.block, .cal-event.pto { background: var(--cal-gray-soft); border-left-color: var(--cal-gray); }
.cal-event.pto { background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 6px, #e9eef4 6px, #e9eef4 12px); }
.cal-event.pending { border-left-style: dashed; }
.cal-event-time { font-size: 0.66rem; font-weight: 700; opacity: 0.85; }
.cal-event-title { font-size: 0.74rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event-loc { font-size: 0.66rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event.compact { flex-direction: row; align-items: baseline; gap: 4px; padding: 0 6px; }
.cal-event.compact .cal-event-loc { display: none; }
.cal-recur { font-size: 0.7em; opacity: 0.8; }

/* Overlap lanes — grid items sharing a cell inset via margins to sit side-by-side */
.cal-lane-1-0 {}
.cal-lane-2-0 { margin-right: 50%; }
.cal-lane-2-1 { margin-left: 50%; }
.cal-lane-3-0 { margin-right: 66.66%; }
.cal-lane-3-1 { margin-left: 33.33%; margin-right: 33.33%; }
.cal-lane-3-2 { margin-left: 66.66%; }

/* ── Month view ──────────────────────────────────────────────────────────── */
.cal-month { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.cal-month-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2); }
.cal-month-wd { padding: 0.5rem; text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: 0.03em; }
.cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-month-rows-5 { grid-template-rows: repeat(5, minmax(96px, 1fr)); }
.cal-month-rows-6 { grid-template-rows: repeat(6, minmax(92px, 1fr)); }
.cal-month-cell {
  border-top: 1px solid var(--cal-line); border-right: 1px solid var(--cal-line);
  background: var(--surface); text-align: left; cursor: pointer; font: inherit;
  padding: 4px; display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: hidden;
}
.cal-month-cell:hover { background: var(--surface-2); }
.cal-month-cell.other { background: #fbfcfe; }
.cal-month-cell.other .cal-month-num { color: #b8c2d0; }
.cal-month-cell.today { background: var(--cal-today); }
.cal-month-num { font-size: 0.82rem; font-weight: 700; color: var(--accent-dark); align-self: flex-start; padding: 0 4px; }
.cal-month-cell.today .cal-month-num { background: var(--accent); color: #fff; border-radius: 999px; width: 1.7em; height: 1.7em; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.cal-month-events { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-month-chip {
  font-size: 0.68rem; border-radius: 4px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid var(--cal-gray); background: var(--cal-gray-soft); color: var(--accent-dark);
}
.cal-month-chip.meeting { background: var(--cal-blue-soft); border-left-color: var(--cal-blue); }
.cal-month-chip.call { background: var(--cal-green-soft); border-left-color: var(--cal-green); }
.cal-month-chip.appointment { background: var(--cal-amber-soft); border-left-color: var(--cal-amber); }
.cal-month-chip.pending { border-left-style: dashed; }
.cal-chip-time { font-weight: 700; opacity: 0.8; }
.cal-month-more { font-size: 0.66rem; font-weight: 600; color: var(--muted); padding: 0 5px; }

/* ── List view ───────────────────────────────────────────────────────────── */
.cal-list { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; }
.cal-list-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.75rem; }
.cal-list-head h2 { margin: 0; font-size: 1.05rem; }
.cal-list-count { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.cal-list-group { margin-bottom: 1rem; }
.cal-list-day { font-size: 0.82rem; font-weight: 700; color: var(--accent-dark); margin: 0 0 0.4rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); }
.cal-list-row { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; background: transparent; border: 0; padding: 0.5rem 0.25rem; cursor: pointer; font: inherit; border-radius: 8px; }
.cal-list-row:hover { background: var(--surface-2); }
.cal-list-time { flex: 0 0 9.5rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.cal-list-bar { flex: 0 0 4px; align-self: stretch; border-radius: 3px; background: var(--cal-gray); }
.cal-list-bar.meeting { background: var(--cal-blue); }
.cal-list-bar.call { background: var(--cal-green); }
.cal-list-bar.appointment { background: var(--cal-amber); }
.cal-list-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.cal-list-title { font-weight: 600; color: var(--accent-dark); }
.cal-list-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.76rem; color: var(--muted); }
.cal-list-loc, .cal-list-dur, .cal-list-att { white-space: nowrap; }

/* ── Type badge + status ─────────────────────────────────────────────────── */
.cal-badge { font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 0.05rem 0.5rem; background: var(--cal-gray-soft); color: var(--cal-gray); text-transform: capitalize; }
.cal-badge.meeting { background: var(--cal-blue-soft); color: var(--cal-blue); }
.cal-badge.call { background: var(--cal-green-soft); color: var(--cal-green); }
.cal-badge.appointment { background: var(--cal-amber-soft); color: var(--cal-amber); }
.cal-status { font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 0.05rem 0.5rem; text-transform: capitalize; }
.cal-status.confirmed { background: var(--cal-green-soft); color: var(--cal-green); }
.cal-status.pending { background: var(--cal-amber-soft); color: var(--cal-amber); }
.cal-status.cancelled { background: #fef2f2; color: var(--red); }

/* ── Agenda strip ────────────────────────────────────────────────────────── */
.cal-agenda { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 0.75rem 1rem; }
.cal-agenda-label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 0.5rem; }
.cal-agenda-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cal-agenda-item { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.7rem; cursor: pointer; font: inherit; font-size: 0.78rem; }
.cal-agenda-item:hover { background: #fff; box-shadow: var(--shadow); }
.cal-agenda-dot { width: 9px; height: 9px; border-radius: 3px; }
.cal-agenda-time { font-weight: 700; color: var(--accent-dark); }
.cal-agenda-title { color: var(--text); }
.cal-agenda-empty { font-size: 0.8rem; color: var(--muted); }

/* ── Modals (event detail + new-event form) ──────────────────────────────── */
.cal-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.cal-overlay[hidden] { display: none; }
.cal-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 22, 40, 0.45); }
.cal-modal { position: relative; z-index: 1; width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(10,22,40,0.35); }
.cal-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.cal-modal-head.meeting { border-top: 4px solid var(--cal-blue); }
.cal-modal-head.call { border-top: 4px solid var(--cal-green); }
.cal-modal-head.appointment { border-top: 4px solid var(--cal-amber); }
.cal-modal-head.block, .cal-modal-head.pto { border-top: 4px solid var(--cal-gray); }
.cal-modal-headmain { display: flex; flex-direction: column; gap: 0.4rem; }
.cal-modal-head h3 { margin: 0; font-size: 1.1rem; }
.cal-modal-x { background: transparent; border: 0; font-size: 1rem; cursor: pointer; color: var(--muted); line-height: 1; padding: 0.2rem; }
.cal-modal-x:hover { color: var(--accent-dark); }
.cal-detail-body { padding: 1rem 1.25rem; }
.cal-detail-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 0; }
.cal-detail-grid dt { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 0.15rem; }
.cal-detail-grid dd { margin: 0; color: var(--text); font-size: 0.9rem; }
.cal-detail-dur { color: var(--muted); }
.cal-attendee { display: inline-block; background: var(--surface-2); border-radius: 999px; padding: 0.1rem 0.55rem; margin: 0 0.25rem 0.25rem 0; font-size: 0.78rem; }
.cal-detail-desc { margin: 0.75rem 0 0; color: var(--text); font-size: 0.9rem; line-height: 1.5; }
.cal-modal-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
.cal-btn { padding: 0.5rem 0.95rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--accent); font-weight: 600; font-size: 0.84rem; cursor: pointer; }
.cal-btn:hover { background: var(--surface-2); }
.cal-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.cal-btn.primary:hover { background: var(--accent-dark); }
.cal-btn.danger { color: var(--red); border-color: #f3c6c2; }
.cal-btn.danger:hover { background: #fef2f2; }

/* ── New / Edit event form ───────────────────────────────────────────────── */
.cal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; padding: 1rem 1.25rem; }
.cal-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.cal-field-wide { grid-column: 1 / -1; }
.cal-field input[type="text"], .cal-field input:not([type]), .cal-field input[type="date"],
.cal-field select, .cal-field textarea {
  font: inherit; font-weight: 400; color: var(--text); padding: 0.5rem 0.6rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.cal-field input:focus, .cal-field select:focus, .cal-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-allday { flex-direction: row; align-items: center; gap: 0.4rem; align-self: end; padding-bottom: 0.5rem; }
.cal-allday input { width: 1rem; height: 1rem; }
.cal-form .cal-modal-foot { grid-column: 1 / -1; padding: 0.5rem 0 0; border-top: 0; }
.cal-empty { padding: 2rem; text-align: center; color: var(--muted); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .cal-toolbar { flex-direction: column; align-items: stretch; }
  .cal-nav { justify-content: center; }
  .cal-grid-scroll { max-height: 70vh; }
  .cal-form { grid-template-columns: 1fr; }
  .cal-list-time { flex-basis: 7.5rem; }
  .cal-legend { justify-content: center; }
}

/* Let the unified app-page host clip wide content (Calendar week/day grid) into
   its own scroll on small screens instead of stretching the shell past the
   viewport. min-width:0 is the standard flex/grid overflow fix; harmless to apps
   whose content already fits. */
#appPage, #appWorkspace { min-width: 0; }
.cal-app, .cal-grid-scroll { min-width: 0; max-width: 100%; }

/* ════════════════════════════════════════════════════════════════════════════
   Tasks — Project Board (UX Overhaul Phase 5). Trello/Asana-style kanban,
   list table, and "My Tasks" grouping. CSP-clean; zero inline styles.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --tk-high: #b42318;
  --tk-high-soft: #fef3f2;
  --tk-medium: #b45309;
  --tk-medium-soft: #fff7ed;
  --tk-low: #15803d;
  --tk-low-soft: #ecfdf3;
}

.tk-app { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* ── Board (kanban) ───────────────────────────────────────────────────────── */
.tk-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.tk-column {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.tk-column-head {
  display: flex; align-items: center; justify-content: space-between;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem;
  color: var(--muted); font-weight: 800;
}
.tk-column-head strong { color: var(--accent-dark); }
.tk-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 0.45rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.75rem; font-weight: 800; color: var(--accent);
}
.tk-column-body { display: flex; flex-direction: column; gap: 0.6rem; min-height: 0.5rem; }
.tk-column-empty { color: var(--muted); font-size: 0.82rem; padding: 0.5rem 0.2rem; margin: 0; }

/* ── Task card ────────────────────────────────────────────────────────────── */
.tk-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--cal-gray);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  box-shadow: 0 1px 2px rgba(15, 31, 56, 0.05);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  text-align: left;
}
.tk-card:hover, .tk-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15, 31, 56, 0.12);
  outline: none;
}
.tk-card:focus-visible { border-color: var(--accent); }
.tk-card.priority-high { border-left-color: var(--tk-high); }
.tk-card.priority-medium { border-left-color: var(--tk-medium); }
.tk-card.priority-low { border-left-color: var(--tk-low); }
.tk-card.is-done { opacity: 0.86; }
.tk-card.is-done .tk-card-title { color: var(--muted); }

.tk-card-top { display: flex; align-items: flex-start; gap: 0.4rem; }
.tk-card-title { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--accent-dark); line-height: 1.3; }
.tk-card-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; flex: none; border-radius: 999px;
  background: var(--tk-low-soft); color: var(--tk-low); font-size: 0.72rem; font-weight: 900;
}
.tk-card-check.sm { width: 1rem; height: 1rem; font-size: 0.65rem; }

.tk-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.tk-meta-item { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; color: var(--muted); }
.tk-overdue { color: var(--tk-high); font-weight: 700; }

.tk-pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  border: 1px solid transparent; white-space: nowrap;
}
.tk-pill-high { background: var(--tk-high-soft); color: var(--tk-high); border-color: #fbd5cf; }
.tk-pill-medium { background: var(--tk-medium-soft); color: var(--tk-medium); border-color: #fcd9b6; }
.tk-pill-low { background: var(--tk-low-soft); color: var(--tk-low); border-color: #bbf0cf; }

.tk-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem; }
.tk-assignee { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--text); }
.tk-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.55rem; height: 1.55rem; flex: none; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em;
}
.tk-avatar.sm { width: 1.35rem; height: 1.35rem; font-size: 0.6rem; }
.tk-source { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: var(--muted); }
.tk-card-sub { font-size: 0.74rem; color: var(--muted); display: flex; align-items: center; gap: 0.3rem; }

.tk-add-btn {
  background: transparent; color: var(--accent); border: 1px dashed var(--border);
  border-radius: 10px; padding: 0.5rem; font-weight: 700; font-size: 0.82rem; cursor: pointer;
  width: 100%;
}
.tk-add-btn:hover { background: var(--surface); border-color: var(--accent); }

/* ── List (table) ─────────────────────────────────────────────────────────── */
.tk-list-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tk-list-filters label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.tk-list-filters select {
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  padding: 0.4rem 0.5rem; font-size: 0.85rem; color: var(--text); min-width: 9rem;
}
.tk-list-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.tk-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tk-table thead th { text-align: left; background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 0; }
.tk-th-btn {
  width: 100%; text-align: left; background: transparent; color: var(--accent-dark);
  font-weight: 800; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.6rem 0.8rem; cursor: pointer; border-radius: 0;
  display: flex; align-items: center; gap: 0.3rem;
}
.tk-th-btn:hover { background: var(--border); }
.tk-sort { color: var(--muted); font-size: 0.7rem; }
.tk-sort.active { color: var(--accent); }
.tk-table tbody td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tk-row { cursor: pointer; }
.tk-row:hover { background: var(--cal-today); }
.tk-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tk-row-title { font-weight: 600; color: var(--accent-dark); }

.tk-status-chip {
  display: inline-flex; align-items: center; padding: 0.12rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; border: 1px solid var(--border);
}
.tk-status-chip.todo { background: var(--surface-2); color: var(--muted); }
.tk-status-chip.in_progress { background: var(--cal-blue-soft); color: var(--cal-blue); border-color: #cfe0fd; }
.tk-status-chip.done { background: var(--tk-low-soft); color: var(--tk-low); border-color: #bbf0cf; }

/* ── My Tasks ─────────────────────────────────────────────────────────────── */
.tk-mine-intro { color: var(--muted); font-size: 0.88rem; margin: 0; }
.tk-mine { display: flex; flex-direction: column; gap: 1.1rem; }
.tk-mine-group { display: flex; flex-direction: column; gap: 0.6rem; }
.tk-mine-head {
  display: flex; align-items: center; gap: 0.5rem;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; color: var(--muted); font-weight: 800;
}
.tk-mine-head strong { color: var(--accent-dark); }
.tk-mine-cards { display: flex; flex-direction: column; gap: 0.6rem; max-width: 640px; }

/* ── Detail / create overlay ──────────────────────────────────────────────── */
.tk-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.tk-overlay[hidden] { display: none; }
.tk-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 22, 40, 0.45); }
.tk-modal {
  position: relative; z-index: 1; width: min(600px, 100%); max-height: 90vh; overflow: auto;
  background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(10, 22, 40, 0.35);
}
.tk-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); border-top: 4px solid var(--cal-gray);
  border-radius: 16px 16px 0 0;
}
.tk-modal-head.priority-high { border-top-color: var(--tk-high); }
.tk-modal-head.priority-medium { border-top-color: var(--tk-medium); }
.tk-modal-head.priority-low { border-top-color: var(--tk-low); }
.tk-modal-headmain { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.tk-modal-headmain h3 { margin: 0; font-size: 1.1rem; color: var(--accent-dark); }
.tk-modal-x { background: transparent; border: 0; font-size: 1rem; cursor: pointer; color: var(--muted); line-height: 1; padding: 0.2rem; }
.tk-modal-x:hover { color: var(--accent-dark); }

.tk-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem;
  padding: 1.1rem 1.25rem;
}
.tk-form-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.82rem; }
.tk-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.tk-field-wide { grid-column: 1 / -1; }
.tk-field input, .tk-field textarea, .tk-field select {
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  padding: 0.5rem 0.6rem; font-size: 0.88rem; font-weight: 500; color: var(--text); width: 100%;
}
.tk-field textarea { resize: vertical; }
.tk-field-label { font-size: 0.8rem; font-weight: 700; color: var(--muted); }

.tk-source-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tk-link-back { background: transparent; color: var(--accent); border: 1px solid var(--border); border-radius: 8px; padding: 0.3rem 0.6rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.tk-link-back:hover { background: var(--surface-2); }

.tk-subtasks, .tk-activity {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem; gap: 0.5rem;
}
.tk-subtask-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.tk-subtask label { display: flex; align-items: center; gap: 0.45rem; font-weight: 500; color: var(--text); font-size: 0.85rem; cursor: pointer; }
.tk-subtask.done span { text-decoration: line-through; color: var(--muted); }
.tk-subtask-add, .tk-comment-add { display: flex; gap: 0.4rem; margin-top: 0.2rem; }
.tk-subtask-add input, .tk-comment-add input {
  flex: 1; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  padding: 0.4rem 0.55rem; font-size: 0.82rem; font-weight: 500; color: var(--text);
}
.tk-empty-note { margin: 0; color: var(--muted); font-size: 0.8rem; }

.tk-comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.tk-comment { display: flex; gap: 0.5rem; }
.tk-comment-body { font-size: 0.84rem; color: var(--text); }
.tk-comment-body p { margin: 0.15rem 0 0; }
.tk-comment-time { color: var(--muted); font-size: 0.72rem; font-weight: 500; }

.tk-modal-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; padding-top: 0.4rem; border-top: 1px solid var(--border); margin-top: 0.3rem; }
.tk-btn { background: var(--surface); color: var(--accent); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.9rem; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.tk-btn:hover { background: var(--surface-2); }
.tk-btn.sm { padding: 0.4rem 0.7rem; font-size: 0.8rem; }
.tk-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.tk-btn.primary:hover { background: var(--accent-dark); }
.tk-btn.danger { color: var(--tk-high); border-color: #fbd5cf; }
.tk-btn.danger:hover { background: var(--tk-high-soft); }

@media (max-width: 900px) {
  .tk-board { grid-template-columns: 1fr; }
  .tk-form { grid-template-columns: 1fr; }
  .tk-modal-foot { justify-content: stretch; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Phase 6 (UX Overhaul): Professional CRM — Contacts / Deals / Activities /
   Campaigns. All classes are namespaced under .crm- with Phase-6-specific names
   that don't collide with the retained legacy .crm-* workspace classes above.
   CSP-clean: no inline styles; positioning via grid/flex utility classes here.
   ───────────────────────────────────────────────────────────────────────────── */
.crm-board { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.crm-empty { padding: 1.5rem; text-align: center; color: var(--muted); background: var(--surface-2); border-radius: 12px; }
.crm-empty.compact { padding: 0.75rem; text-align: left; font-size: 0.85rem; }

/* Toolbar (search + filter) */
.crm-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.crm-toolbar-note { margin: 0; color: var(--muted); font-size: 0.88rem; flex: 1 1 auto; }
.crm-search { flex: 1 1 240px; min-width: 0; padding: 0.6rem 0.85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font: inherit; color: var(--text); }
.crm-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.crm-filter { display: inline-flex; align-items: center; gap: 0.5rem; }
.crm-filter-label { color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.crm-filter select, .crm-activity-filter-controls select { padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font: inherit; color: var(--text); }

/* Status + stage badges */
.crm-status-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.01em; width: fit-content; }
.crm-status-badge.active { background: #dcfce7; color: #166534; }
.crm-status-badge.prospect { background: #fef9c3; color: #854d0e; }
.crm-status-badge.lead { background: #dbeafe; color: #1e40af; }
.crm-status-badge.inactive { background: var(--surface-2); color: var(--muted); }
.crm-stage-badge { display: inline-flex; align-items: center; padding: 0.12rem 0.5rem; border-radius: 6px; font-size: 0.72rem; font-weight: 800; background: var(--surface-2); color: var(--accent); }
.crm-stage-badge.lead { background: #dbeafe; color: #1e40af; }
.crm-stage-badge.qualification { background: #e0e7ff; color: #3730a3; }
.crm-stage-badge.proposal { background: #fef9c3; color: #854d0e; }
.crm-stage-badge.negotiation { background: #ffedd5; color: #9a3412; }
.crm-stage-badge.closed { background: #dcfce7; color: #166534; }
.crm-stage-badge.lost { background: #fee2e2; color: #991b1b; }

/* ── Contacts: two-panel ── */
.crm-split { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 1rem; align-items: start; min-width: 0; }
.crm-company-list { display: flex; flex-direction: column; gap: 0.6rem; max-height: 70vh; overflow-y: auto; padding-right: 0.25rem; }
.crm-company-card { display: flex; flex-direction: column; gap: 0.35rem; text-align: left; padding: 0.85rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease; }
.crm-company-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.crm-company-card.selected { border-color: var(--accent); border-left: 4px solid var(--active-module-accent); background: linear-gradient(0deg, var(--surface), var(--surface)); box-shadow: var(--shadow); }
.crm-company-card-top { display: flex; align-items: center; gap: 0.5rem; }
.crm-company-icon { font-size: 1.05rem; }
.crm-company-name { font-size: 0.98rem; color: var(--accent-dark); }
.crm-company-meta { color: var(--muted); font-size: 0.82rem; }
.crm-company-stats { display: flex; gap: 0.75rem; font-size: 0.8rem; color: var(--text); font-weight: 600; }

/* Detail panel */
.crm-detail { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; min-width: 0; box-shadow: var(--shadow); }
.crm-detail-empty { color: var(--muted); padding: 2rem; text-align: center; }
.crm-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border); }
.crm-detail-title { margin: 0; font-size: 1.3rem; color: var(--accent-dark); }
.crm-detail-sub { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.88rem; }
.crm-detail-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin: 1rem 0; }
.crm-detail-facts > div { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem; background: var(--surface-2); border-radius: 10px; border-top: 3px solid var(--active-module-accent); }
.crm-detail-facts span { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.crm-detail-facts strong { color: var(--accent-dark); font-size: 0.95rem; }
.crm-detail-notes { margin: 0 0 1rem; color: var(--text); font-size: 0.88rem; background: var(--surface-2); padding: 0.7rem 0.85rem; border-radius: 10px; }
.crm-detail-section { margin-top: 1.1rem; }
.crm-section-head { margin: 0 0 0.6rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 800; }
.crm-contacts-list { display: flex; flex-direction: column; gap: 0.5rem; }
.crm-contact-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); flex-wrap: wrap; }
.crm-contact-id { display: flex; flex-direction: column; gap: 0.1rem; }
.crm-contact-id strong { color: var(--accent-dark); font-size: 0.92rem; }
.crm-contact-id span { color: var(--muted); font-size: 0.8rem; }
.crm-contact-reach { display: flex; flex-direction: column; gap: 0.1rem; text-align: right; }
.crm-contact-email { color: var(--accent); font-size: 0.82rem; text-decoration: none; }
.crm-contact-email:hover { text-decoration: underline; }
.crm-contact-phone { color: var(--muted); font-size: 0.8rem; }
.crm-detail-deals { display: flex; flex-direction: column; gap: 0.5rem; }
.crm-deal-chip { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; }
.crm-deal-chip:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.crm-deal-chip-title { font-weight: 700; color: var(--accent-dark); font-size: 0.9rem; }
.crm-deal-chip-meta { color: var(--muted); font-size: 0.82rem; display: inline-flex; align-items: center; gap: 0.4rem; }

/* Timeline */
.crm-timeline { display: flex; flex-direction: column; gap: 0.1rem; border-left: 2px solid var(--border); padding-left: 0.9rem; margin-left: 0.4rem; }
.crm-timeline-item { display: flex; gap: 0.65rem; padding: 0.55rem 0; position: relative; }
.crm-timeline-icon { position: absolute; left: -1.55rem; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; font-size: 0.8rem; }
.crm-timeline-body { display: flex; flex-direction: column; gap: 0.15rem; }
.crm-timeline-desc { margin: 0; font-size: 0.87rem; color: var(--text); }
.crm-timeline-meta { color: var(--muted); font-size: 0.76rem; }

.crm-detail-actions { display: flex; gap: 0.5rem; margin-top: 1.25rem; flex-wrap: wrap; }

/* Buttons */
.crm-btn { padding: 0.55rem 0.95rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--accent-dark); font: inherit; font-weight: 700; cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease; }
.crm-btn:hover { background: var(--surface-2); border-color: var(--accent); }
.crm-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.crm-btn.primary:hover { background: var(--accent-dark); }

/* ── Deals: pipeline kanban ── */
.crm-pipeline { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 0.85rem; min-width: 0; overflow-x: auto; padding-bottom: 0.5rem; }
.crm-pipeline-col { display: flex; flex-direction: column; gap: 0.6rem; background: var(--surface-2); border-radius: 12px; padding: 0.7rem; min-width: 200px; }
.crm-pipeline-head { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.15rem 0.25rem; border-bottom: 2px solid var(--active-module-accent); padding-bottom: 0.5rem; }
.crm-pipeline-head h3 { margin: 0; font-size: 0.85rem; color: var(--accent-dark); }
.crm-pipeline-total { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.crm-pipeline-cards { display: flex; flex-direction: column; gap: 0.55rem; min-height: 40px; }
.crm-deal-card { display: flex; flex-direction: column; gap: 0.3rem; text-align: left; padding: 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: box-shadow 0.14s ease, transform 0.14s ease; }
.crm-deal-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.crm-deal-card.won { border-left: 4px solid #16a34a; }
.crm-deal-card.lost { border-left: 4px solid var(--red); }
.crm-deal-card-company { color: var(--muted); font-size: 0.76rem; font-weight: 700; }
.crm-deal-card-title { color: var(--accent-dark); font-size: 0.9rem; }
.crm-deal-card-value { color: var(--accent); font-size: 1.05rem; font-weight: 800; }
.crm-deal-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; color: var(--muted); font-size: 0.76rem; }
.crm-deal-card-owner { font-weight: 600; }

/* ── Activities: feed ── */
.crm-activity-filters { display: flex; flex-direction: column; gap: 0.6rem; }
.crm-chip-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.crm-chip { padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.crm-chip:hover { border-color: var(--accent); }
.crm-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.crm-activity-filter-controls { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.crm-activity-feed { display: flex; flex-direction: column; gap: 0.55rem; }
.crm-activity-row { display: flex; gap: 0.75rem; padding: 0.8rem 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.crm-activity-icon { flex: 0 0 2rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: 50%; font-size: 0.95rem; }
.crm-activity-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.crm-activity-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.crm-activity-top strong { color: var(--accent-dark); font-size: 0.9rem; }
.crm-activity-contact { color: var(--muted); font-size: 0.82rem; }
.crm-activity-type-tag { padding: 0.1rem 0.45rem; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.crm-activity-desc { margin: 0; color: var(--text); font-size: 0.87rem; }
.crm-activity-meta { color: var(--muted); font-size: 0.76rem; }

/* ── Campaigns ── */
.crm-campaigns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.85rem; }
.crm-campaign-card { display: flex; flex-direction: column; gap: 0.5rem; text-align: left; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; box-shadow: var(--shadow); transition: transform 0.14s ease, box-shadow 0.14s ease; }
.crm-campaign-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(15, 31, 56, 0.12); }
.crm-campaign-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.crm-campaign-name { color: var(--accent-dark); font-size: 1rem; }
.crm-campaign-status { padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.crm-campaign-status.active { background: #dcfce7; color: #166534; }
.crm-campaign-status.completed { background: #dbeafe; color: #1e40af; }
.crm-campaign-status.draft { background: var(--surface-2); color: var(--muted); }
.crm-campaign-type { color: var(--muted); font-size: 0.82rem; }
.crm-campaign-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.25rem; }
.crm-campaign-metrics > div { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem; background: var(--surface-2); border-radius: 8px; }
.crm-campaign-metrics span { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.crm-campaign-metrics strong { color: var(--accent-dark); font-size: 0.95rem; }
.crm-campaign-detail { display: flex; flex-direction: column; gap: 1rem; }
.crm-campaign-detail-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 0.6rem; }
.crm-campaign-detail-metrics > div { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem; background: var(--surface-2); border-radius: 10px; border-top: 3px solid var(--active-module-accent); }
.crm-campaign-detail-metrics span { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.crm-campaign-detail-metrics strong { color: var(--accent-dark); font-size: 1rem; }
.crm-campaign-preview h4 { margin: 0.5rem 0 0.25rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.crm-campaign-preview p { margin: 0; color: var(--text); font-size: 0.9rem; }
.crm-campaign-subject { font-weight: 700; color: var(--accent-dark); }

/* ── Modal overlay (forms + detail) ── */
.crm-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.crm-overlay[hidden] { display: none; }
.crm-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 22, 40, 0.45); }
.crm-modal { position: relative; z-index: 1; width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(10,22,40,0.35); }
.crm-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); border-top: 4px solid var(--active-module-accent); border-radius: 16px 16px 0 0; }
.crm-modal-head h3 { margin: 0; font-size: 1.05rem; color: var(--accent-dark); }
.crm-modal-x { background: transparent; border: none; font-size: 1.1rem; color: var(--muted); cursor: pointer; padding: 0.2rem; line-height: 1; }
.crm-modal-x:hover { color: var(--text); }
.crm-modal-body { padding: 1.25rem; }
.crm-form { display: flex; flex-direction: column; gap: 0.75rem; }
.crm-form-company { margin: 0; color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.crm-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; font-weight: 700; color: var(--accent-dark); }
.crm-form input, .crm-form select, .crm-form textarea { padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font: inherit; font-weight: 400; color: var(--text); }
.crm-form input:focus-visible, .crm-form select:focus-visible, .crm-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.crm-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.crm-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem; }

@media (max-width: 900px) {
  .crm-split { grid-template-columns: 1fr; }
  .crm-company-list { max-height: none; flex-direction: row; overflow-x: auto; }
  .crm-company-card { min-width: 220px; }
  .crm-detail-facts { grid-template-columns: repeat(2, 1fr); }
  .crm-form-grid { grid-template-columns: 1fr; }
  .crm-pipeline { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Ledger — Full single-company accounting system (UX Overhaul Phase 7).
   Dashboard / Invoices / Bills / Accounts / Inventory / Reconciliation / Reports
   for Northstar Dental Group. CSP-clean; zero inline styles. Accounting numbers
   are right-aligned (.lg-amount) and negatives render red in parentheses
   (.lg-neg). Bar widths use the .lg-w-* utility classes (no inline width).
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --lg-line: #e8edf3;
  --lg-pos: #15803d;
  --lg-neg: #b42318;
  --lg-blue: #2563eb;
  --lg-amber: #b45309;
}

.lg-app { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.lg-muted { color: var(--muted); font-size: 0.85rem; }

/* ── Shared numeric tables ────────────────────────────────────────────────── */
.lg-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.lg-th {
  text-align: left; font-weight: 600; color: var(--muted); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.lg-th-amount { text-align: right; }
.lg-th-status, .lg-th-num { text-align: left; }
.lg-th-amount.lg-th-status { text-align: left; }
.lg-td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--lg-line); color: var(--text); vertical-align: top; }
.lg-td-strong { font-weight: 600; color: var(--accent-dark); }
.lg-td-muted { color: var(--muted); }
.lg-td-date { color: var(--muted); white-space: nowrap; }
.lg-td-num { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.lg-td-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-td-status { white-space: nowrap; }
.lg-amount { font-variant-numeric: tabular-nums; }
.lg-neg { color: var(--lg-neg); }
.lg-empty { text-align: center; color: var(--muted); padding: 2rem; font-style: italic; }
.lg-table-rows tbody tr.lg-row { cursor: pointer; }
.lg-table-rows tbody tr.lg-row:hover { background: var(--surface-2); }
.lg-table-rows tbody tr:hover .lg-td-strong { color: var(--lg-blue); }

/* ── Status badges ────────────────────────────────────────────────────────── */
.lg-badge {
  display: inline-block; padding: 0.12rem 0.5rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  border: 1px solid transparent; white-space: nowrap;
}
.lg-badge-draft { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.lg-badge-sent { background: #eff4ff; color: #1d4ed8; }
.lg-badge-paid { background: #ecfdf3; color: var(--lg-pos); }
.lg-badge-overdue { background: #fef3f2; color: var(--lg-neg); }
.lg-badge-void { background: var(--surface-2); color: var(--muted); text-decoration: line-through; }
.lg-badge-pending { background: #fff7ed; color: var(--lg-amber); }
.lg-badge-approved { background: #eff4ff; color: #1d4ed8; }
.lg-badge-cleared, .lg-badge-in_stock { background: #ecfdf3; color: var(--lg-pos); }
.lg-badge-reorder { background: #fff7ed; color: var(--lg-amber); }
.lg-badge-out_of_stock { background: #fef3f2; color: var(--lg-neg); }

/* ── Buttons / pills / links ──────────────────────────────────────────────── */
.lg-btn {
  padding: 0.5rem 0.95rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--accent-dark); font-weight: 600; font-size: 0.84rem;
  cursor: pointer; line-height: 1;
}
.lg-btn:hover { background: var(--surface-2); }
.lg-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.lg-btn.primary:hover { background: var(--accent-dark); }
.lg-btn.secondary { color: var(--accent); }
.lg-btn.tiny { padding: 0.28rem 0.6rem; font-size: 0.75rem; border-radius: 6px; }
.lg-link { background: none; border: none; color: var(--lg-blue); font-weight: 600; font-size: 0.82rem; cursor: pointer; padding: 0; }
.lg-link:hover { text-decoration: underline; }
.lg-pill { background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.72rem; font-weight: 700; }

/* ── Section chrome ───────────────────────────────────────────────────────── */
.lg-section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.lg-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; }
.lg-section-head h3 { margin: 0; font-size: 0.98rem; color: var(--accent-dark); }

/* ── Dashboard: snapshot cards ────────────────────────────────────────────── */
.lg-dash-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.lg-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.25rem;
  box-shadow: var(--shadow); border-top: 3px solid var(--amber);
}
.lg-card-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.lg-card-value { font-size: 1.6rem; color: var(--accent-dark); font-variant-numeric: tabular-nums; line-height: 1.1; }
.lg-card-delta { font-size: 0.78rem; font-weight: 700; }
.lg-delta-up { color: var(--lg-pos); }
.lg-delta-down { color: var(--lg-neg); }
.lg-delta-neutral { color: var(--muted); }
.lg-card-note { font-size: 0.72rem; color: var(--muted); }

/* ── Dashboard: needs attention ───────────────────────────────────────────── */
.lg-attention { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.lg-attention-list { display: flex; flex-direction: column; gap: 0.5rem; }
.lg-attention-item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
  padding: 0.65rem 0.8rem; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-size: 0.86rem; color: var(--text);
}
.lg-attention-item:hover { background: var(--surface-2); }
.lg-tone-danger { border-left: 3px solid var(--lg-neg); }
.lg-tone-warn { border-left: 3px solid var(--lg-amber); }
.lg-tone-info { border-left: 3px solid var(--lg-blue); }
.lg-attention-icon { font-size: 1rem; }
.lg-attention-text { flex: 1; }
.lg-attention-go { color: var(--muted); }

/* ── Dashboard: split (recent + P&L) ──────────────────────────────────────── */
.lg-dash-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; align-items: start; }
.lg-txn-status { font-size: 0.78rem; font-weight: 600; }
.lg-txn-cleared { color: var(--lg-pos); }
.lg-txn-sent { color: var(--lg-blue); }
.lg-txn-pending { color: var(--lg-amber); }
.lg-txn-draft { color: var(--muted); }

.lg-pnl { display: flex; flex-direction: column; gap: 0.7rem; }
.lg-pnl-row { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: 0.6rem; }
.lg-pnl-label { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.lg-pnl-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-dark); text-align: right; }
.lg-bar { display: block; height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.lg-bar-fill { display: block; height: 100%; border-radius: 6px; }
.lg-bar-rev { background: var(--lg-pos); }
.lg-bar-exp { background: var(--lg-amber); }
.lg-pnl-net { border-top: 1px solid var(--border); padding-top: 0.6rem; }
.lg-pnl-net .lg-pnl-label, .lg-pnl-net .lg-pnl-val { color: var(--accent-dark); font-weight: 700; }
.lg-pnl-foot { margin: 0.8rem 0 0; font-size: 0.76rem; color: var(--muted); }

/* Bar width utilities (5% steps) — CSP-safe alternative to inline width. */
.lg-w-0{width:0}.lg-w-5{width:5%}.lg-w-10{width:10%}.lg-w-15{width:15%}.lg-w-20{width:20%}
.lg-w-25{width:25%}.lg-w-30{width:30%}.lg-w-35{width:35%}.lg-w-40{width:40%}.lg-w-45{width:45%}
.lg-w-50{width:50%}.lg-w-55{width:55%}.lg-w-60{width:60%}.lg-w-65{width:65%}.lg-w-70{width:70%}
.lg-w-75{width:75%}.lg-w-80{width:80%}.lg-w-85{width:85%}.lg-w-90{width:90%}.lg-w-95{width:95%}.lg-w-100{width:100%}

/* ── Toolbar / filters ────────────────────────────────────────────────────── */
.lg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.lg-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.lg-filter {
  padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); font-weight: 600; font-size: 0.8rem; cursor: pointer;
}
.lg-filter:hover { background: var(--surface-2); }
.lg-filter.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.lg-filter-count { opacity: 0.7; font-size: 0.72rem; }
.lg-filter.active .lg-filter-count { opacity: 0.85; }

/* ── Accounts (chart of accounts) ─────────────────────────────────────────── */
.lg-acct-summary { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.lg-acct-chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.3rem 0.6rem; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.lg-acct-chip em { font-style: normal; color: var(--muted); font-weight: 600; margin-right: 0.3rem; }
.lg-acct-tree { display: flex; flex-direction: column; gap: 1rem; }
.lg-acct-group { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.5rem 1rem 0.75rem; box-shadow: var(--shadow); }
.lg-acct-grouphead { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.2rem 0.4rem; border-bottom: 2px solid var(--accent); margin-bottom: 0.25rem; }
.lg-acct-grouphead h3 { margin: 0; font-size: 0.92rem; color: var(--accent-dark); }
.lg-acct-subtotal { font-weight: 700; color: var(--accent-dark); }

/* ── Inventory reorder banner ─────────────────────────────────────────────── */
.lg-reorder { background: #fff7ed; border: 1px solid #f6d8a8; border-radius: 10px; padding: 0.7rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.lg-reorder > strong { color: var(--lg-amber); font-size: 0.86rem; }
.lg-reorder-clear { background: #ecfdf3; border-color: #b7e4c7; color: var(--lg-pos); font-size: 0.86rem; font-weight: 600; }
.lg-reorder-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ── Reconciliation ───────────────────────────────────────────────────────── */
.lg-recon-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.lg-recon-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem; display: flex; flex-direction: column; gap: 0.2rem; box-shadow: var(--shadow); }
.lg-recon-stat span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; }
.lg-recon-stat strong { font-size: 1.15rem; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.lg-recon-ok { border-left: 3px solid var(--lg-pos); }
.lg-recon-off { border-left: 3px solid var(--lg-amber); }
.lg-recon { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.lg-recon-col { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 1rem; box-shadow: var(--shadow); }
.lg-recon-list { display: flex; flex-direction: column; gap: 0.4rem; }
.lg-recon-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.lg-recon-item.matched { background: #f6fbf7; border-color: #cdeed8; }
.lg-recon-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.lg-recon-date { font-size: 0.72rem; color: var(--muted); }
.lg-recon-desc { font-size: 0.84rem; color: var(--text); }
.lg-recon-contact { font-style: normal; color: var(--muted); font-size: 0.76rem; }
.lg-recon-amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.lg-recon-flag { font-size: 0.74rem; color: var(--lg-amber); font-weight: 600; white-space: nowrap; }
.lg-recon-ok-tag { font-size: 0.74rem; color: var(--lg-pos); font-weight: 700; white-space: nowrap; }

/* ── Reports ──────────────────────────────────────────────────────────────── */
.lg-report-controls { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.lg-report-surface { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem 1.75rem; box-shadow: var(--shadow); }
.lg-report-head { text-align: center; border-bottom: 2px solid var(--accent); padding-bottom: 0.75rem; margin-bottom: 1rem; }
.lg-report-head h2 { margin: 0; font-size: 1.15rem; color: var(--accent-dark); }
.lg-report-head h3 { margin: 0.1rem 0; font-size: 0.95rem; color: var(--text); font-weight: 600; }
.lg-report-period { margin: 0; font-size: 0.8rem; color: var(--muted); }
.lg-report-table { max-width: 640px; margin: 0 auto; }
.lg-rep-section td { font-weight: 700; color: var(--accent-dark); text-transform: uppercase; font-size: 0.74rem; letter-spacing: 0.04em; padding-top: 0.9rem; border-bottom: 1px solid var(--accent); }
.lg-rep-indent { padding-left: 1.5rem; color: var(--text); }
.lg-rep-strong td { font-weight: 600; }
.lg-rep-total td { font-weight: 700; color: var(--accent-dark); border-top: 1px solid var(--accent); border-bottom: 2px solid var(--accent); }

/* ── Overlay / modals ─────────────────────────────────────────────────────── */
.lg-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.lg-overlay[hidden] { display: none; }
.lg-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 31, 56, 0.45); }
.lg-modal { position: relative; z-index: 1; background: var(--surface); border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 31, 56, 0.28); width: min(680px, 100%); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.lg-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.lg-modal-headmain { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.lg-modal-headmain h3 { margin: 0; font-size: 1.05rem; color: var(--accent-dark); display: flex; align-items: center; gap: 0.5rem; }
.lg-doc-eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.lg-doc-sub { font-size: 0.8rem; color: var(--muted); }
.lg-modal-x { background: none; border: none; font-size: 1.05rem; color: var(--muted); cursor: pointer; line-height: 1; padding: 0.2rem; }
.lg-modal-x:hover { color: var(--accent-dark); }
.lg-doc-body { padding: 1rem 1.25rem; overflow-y: auto; }
.lg-doc-lines tfoot td { border-bottom: none; padding-top: 0.45rem; padding-bottom: 0.1rem; color: var(--muted); }
.lg-doc-lines tfoot tr.lg-doc-total td { font-weight: 700; color: var(--accent-dark); border-top: 1px solid var(--accent); }
.lg-doc-lines tfoot tr.lg-doc-balance td { font-weight: 700; color: var(--accent-dark); font-size: 0.95rem; }
.lg-doc-notes { font-size: 0.84rem; color: var(--text); margin: 0.8rem 0 0; }
.lg-doc-payments { margin-top: 1rem; }
.lg-doc-payments h4 { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--accent-dark); }
.lg-modal-foot { display: flex; gap: 0.6rem; justify-content: flex-end; padding: 0.9rem 1.25rem; border-top: 1px solid var(--border); flex-wrap: wrap; }

/* ── Forms (new invoice / bill) ───────────────────────────────────────────── */
.lg-form { display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem 1.25rem; overflow-y: auto; }
.lg-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.lg-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.lg-field-wide { grid-column: 1 / -1; }
.lg-field input, .lg-field select, .lg-field textarea {
  padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; color: var(--text); background: var(--surface);
}
.lg-field input:focus, .lg-field select:focus, .lg-field textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.lg-lineitems { border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.lg-lineitems-head, .lg-li-row { display: grid; grid-template-columns: 1fr 4rem 6rem 6rem; gap: 0.5rem; align-items: center; }
.lg-lineitems-head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; padding: 0 0.2rem; }
.lg-lineitems-head .lg-li-amount { text-align: right; }
.lg-li-row input { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 7px; font: inherit; }
.lg-li-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-dark); }
.lg-form-foot-row { display: flex; align-items: center; justify-content: space-between; }
.lg-li-total { font-size: 0.85rem; color: var(--muted); }
.lg-li-total strong { color: var(--accent-dark); font-variant-numeric: tabular-nums; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lg-dash-cards, .lg-recon-summary { grid-template-columns: repeat(2, 1fr); }
  .lg-dash-split, .lg-recon { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lg-dash-cards, .lg-recon-summary { grid-template-columns: 1fr; }
  .lg-form-grid { grid-template-columns: 1fr; }
  .lg-toolbar { flex-direction: column; align-items: stretch; }
  .lg-lineitems-head, .lg-li-row { grid-template-columns: 1fr 3rem 4.5rem 4.5rem; }
  .lg-table { font-size: 0.8rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Docs (Phase 8, UX Overhaul) — document management, markdown editor, SharePoint
   All hooks use the `.dc-` prefix to avoid collision with legacy `.docs-*`.
   ═══════════════════════════════════════════════════════════════════════════ */
.dc-app { display: flex; flex-direction: column; gap: 1rem; }
.dc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0.5rem 0.9rem; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text); font: inherit; font-weight: 600;
  font-size: 0.85rem; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.dc-btn:hover { background: var(--surface-2); border-color: var(--accent); }
.dc-btn:active { transform: translateY(1px); }
.dc-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.dc-btn.primary:hover { background: var(--accent-dark); }
.dc-btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.dc-btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.dc-btn.tiny { padding: 0.3rem 0.55rem; font-size: 0.75rem; border-radius: 7px; }
.dc-btn:focus-visible { outline: 2px solid var(--active-module-accent); outline-offset: 2px; }
.dc-empty, .dc-md-empty { padding: 1.5rem; text-align: center; color: var(--muted); font-size: 0.9rem; }
.dc-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.dc-field select, .dc-search, .dc-editor-title {
  padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; color: var(--text); background: var(--surface);
}
.dc-field select:focus, .dc-search:focus, .dc-editor-title:focus { outline: 2px solid var(--active-module-accent); outline-offset: 1px; border-color: var(--accent); }

/* Documents tab */
.dc-docs-layout { display: grid; grid-template-columns: 200px 1fr 320px; gap: 1rem; align-items: start; }
.dc-folders { display: flex; flex-direction: column; gap: 0.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem; }
.dc-folders-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; margin: 0.2rem 0.4rem 0.4rem; }
.dc-folder { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.55rem; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 0.85rem; cursor: pointer; text-align: left; width: 100%; }
.dc-folder:hover { background: var(--surface-2); }
.dc-folder.active { background: var(--accent); color: #fff; }
.dc-folder.active .dc-folder-count { background: rgba(255,255,255,0.22); color: #fff; }
.dc-folder-icon { font-size: 1rem; }
.dc-folder-name { flex: 1; }
.dc-folder-count { font-size: 0.72rem; font-weight: 700; background: var(--surface-2); color: var(--muted); border-radius: 20px; padding: 0.05rem 0.45rem; min-width: 1.4rem; text-align: center; }
.dc-docs-main { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.dc-docs-toolbar { display: flex; flex-direction: column; gap: 0.6rem; }
.dc-search { width: 100%; }
.dc-type-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dc-chip { padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--muted); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.dc-chip:hover { border-color: var(--accent); color: var(--text); }
.dc-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.dc-doc-list { display: flex; flex-direction: column; gap: 0.4rem; }
.dc-doc-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; width: 100%; font: inherit; transition: border-color 0.12s, box-shadow 0.12s; }
.dc-doc-row:hover { border-color: var(--accent); box-shadow: var(--polish-shadow-sm); }
.dc-doc-row.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.dc-doc-icon { font-size: 1.4rem; flex-shrink: 0; }
.dc-doc-main { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.dc-doc-name { font-size: 0.9rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-doc-meta { font-size: 0.74rem; color: var(--muted); }
.dc-doc-by { font-size: 0.76rem; color: var(--muted); flex-shrink: 0; white-space: nowrap; }
.dc-preview { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; position: sticky; top: 0.5rem; }
.dc-preview-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 1rem; color: var(--muted); text-align: center; }
.dc-preview-empty-icon { font-size: 2rem; opacity: 0.5; }
.dc-preview-head { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 0.7rem; }
.dc-preview-icon { font-size: 2rem; }
.dc-preview-title { font-size: 1rem; margin: 0; color: var(--text); word-break: break-word; }
.dc-preview-sub { font-size: 0.78rem; color: var(--muted); margin: 0.15rem 0 0; }
.dc-preview-summary { font-size: 0.85rem; color: var(--text); line-height: 1.5; margin: 0 0 0.8rem; }
.dc-preview-meta { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 1rem; }
.dc-preview-meta > div { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; }
.dc-preview-meta dt { color: var(--muted); margin: 0; }
.dc-preview-meta dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; }
.dc-preview-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }

/* Editor tab */
.dc-editor-app { gap: 0.7rem; }
.dc-editor-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dc-editor-title { flex: 1; min-width: 220px; font-size: 1.05rem; font-weight: 700; }
.dc-editor-bar-right { display: flex; align-items: center; gap: 0.8rem; }
.dc-save-indicator { font-size: 0.76rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.dc-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.dc-view-btn { padding: 0.35rem 0.7rem; border: 0; background: var(--surface); color: var(--muted); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.dc-view-btn + .dc-view-btn { border-left: 1px solid var(--border); }
.dc-view-btn.active { background: var(--accent); color: #fff; }
.dc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; padding: 0.4rem 0.5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.dc-tb-btn { min-width: 2rem; height: 2rem; padding: 0 0.45rem; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 0.85rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dc-tb-btn:hover { background: var(--surface); border-color: var(--border); }
.dc-tb-btn:focus-visible { outline: 2px solid var(--active-module-accent); outline-offset: 1px; }
.dc-tb-b { font-weight: 800; }
.dc-tb-i { font-style: italic; }
.dc-tb-u { text-decoration: underline; }
.dc-tb-sep { width: 1px; height: 1.3rem; background: var(--border); margin: 0 0.25rem; }
.dc-editor-grid { display: grid; gap: 0.8rem; min-height: 420px; }
.dc-editor-mode-split { grid-template-columns: 1fr 1fr; }
.dc-editor-mode-edit { grid-template-columns: 1fr; }
.dc-editor-mode-edit .dc-editor-preview { display: none; }
.dc-editor-mode-preview { grid-template-columns: 1fr; }
.dc-editor-mode-preview .dc-editor-pane { display: none; }
.dc-editor-pane { display: flex; }
.dc-editor-area { width: 100%; min-height: 420px; resize: vertical; padding: 1rem; border: 1px solid var(--border); border-radius: 10px; font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; font-size: 0.85rem; line-height: 1.6; color: var(--text); background: var(--surface); }
.dc-editor-area:focus { outline: 2px solid var(--active-module-accent); outline-offset: 1px; border-color: var(--accent); }
.dc-editor-preview { padding: 1rem 1.3rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow-y: auto; max-height: 620px; }
.dc-editor-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.2rem; }

/* Markdown rendered body */
.dc-md-body { color: var(--text); line-height: 1.6; font-size: 0.9rem; }
.dc-md-h { margin: 0.9rem 0 0.5rem; line-height: 1.25; color: var(--accent-dark); }
.dc-md-h1 { font-size: 1.5rem; border-bottom: 2px solid var(--border); padding-bottom: 0.3rem; }
.dc-md-h2 { font-size: 1.25rem; }
.dc-md-h3 { font-size: 1.08rem; }
.dc-md-h4, .dc-md-h5, .dc-md-h6 { font-size: 0.95rem; }
.dc-md-p { margin: 0.5rem 0; }
.dc-md-ul, .dc-md-ol { margin: 0.5rem 0; padding-left: 1.4rem; }
.dc-md-ul li, .dc-md-ol li { margin: 0.2rem 0; }
.dc-md-quote { margin: 0.6rem 0; padding: 0.4rem 0.9rem; border-left: 3px solid var(--active-module-accent); background: var(--surface-2); color: var(--muted); border-radius: 0 6px 6px 0; }
.dc-md-hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
.dc-md-code { font-family: ui-monospace, Consolas, monospace; font-size: 0.82em; background: var(--surface-2); padding: 0.1rem 0.35rem; border-radius: 5px; color: var(--red); }
.dc-md-pre { background: var(--accent-dark); color: #e8edf3; padding: 0.8rem 1rem; border-radius: 8px; overflow-x: auto; margin: 0.7rem 0; }
.dc-md-pre code { font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem; }
.dc-md-link { color: var(--cal-blue); text-decoration: underline; }
.dc-md-img { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; background: var(--surface-2); border: 1px dashed var(--border); border-radius: 6px; color: var(--muted); font-size: 0.8rem; }
.dc-md-table { border-collapse: collapse; width: 100%; margin: 0.7rem 0; font-size: 0.84rem; }
.dc-md-table th, .dc-md-table td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; text-align: left; }
.dc-md-table th { background: var(--surface-2); font-weight: 700; }

/* Templates tab */
.dc-tpl-intro h3 { margin: 0 0 0.2rem; }
.dc-tpl-intro p { margin: 0; color: var(--muted); font-size: 0.88rem; max-width: 60ch; }
.dc-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; margin-top: 0.4rem; }
.dc-tpl-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s; }
.dc-tpl-card:hover { border-color: var(--accent); box-shadow: var(--polish-shadow-md); transform: translateY(-2px); }
.dc-tpl-icon { font-size: 1.8rem; }
.dc-tpl-title { margin: 0; font-size: 1rem; color: var(--text); }
.dc-tpl-desc { margin: 0; flex: 1; font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.dc-tpl-use { align-self: flex-start; margin-top: 0.3rem; }

/* SharePoint tab */
.dc-sp-banner { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.dc-sp-banner.connected { background: var(--cal-green-soft); border-color: #bbf7d0; }
.dc-sp-status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.dc-sp-banner.connected .dc-sp-status-dot { background: var(--cal-green); box-shadow: 0 0 0 4px rgba(21,128,61,0.18); }
.dc-sp-banner-text { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.dc-sp-banner-text strong { font-size: 0.92rem; color: var(--text); }
.dc-sp-banner-text small { font-size: 0.78rem; color: var(--muted); }
.dc-sp-controls { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.dc-sp-url { font-size: 0.78rem; color: var(--muted); font-family: ui-monospace, Consolas, monospace; padding-bottom: 0.5rem; }
.dc-sp-library { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.dc-sp-head, .dc-sp-row { display: grid; grid-template-columns: 2.4fr 1fr 1.2fr 1fr 1.6fr; gap: 0.6rem; align-items: center; padding: 0.6rem 0.9rem; }
.dc-sp-head { background: var(--surface-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; }
.dc-sp-row { border-top: 1px solid var(--border); font-size: 0.84rem; }
.dc-sp-row:hover { background: var(--surface-2); }
.dc-sp-name { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.dc-sp-icon { font-size: 1.1rem; }
.dc-sp-name-text { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-sp-items { color: var(--muted); font-size: 0.72rem; }
.dc-sp-modified, .dc-sp-by { color: var(--muted); font-size: 0.8rem; }
.dc-sp-locked { color: var(--gold); font-weight: 600; font-size: 0.78rem; }
.dc-sp-available { color: var(--cal-green); font-size: 0.78rem; }
.dc-sp-actions { display: flex; gap: 0.3rem; justify-content: flex-end; flex-wrap: wrap; }
.dc-sp-settings, .dc-sp-connect { margin-top: 0.4rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.dc-sp-settings h4, .dc-sp-connect h4 { margin: 0 0 0.4rem; }
.dc-sp-settings p, .dc-sp-connect p { margin: 0 0 0.7rem; color: var(--muted); font-size: 0.84rem; }
.dc-sp-connect { text-align: center; }
.dc-sp-connect-icon { font-size: 2.2rem; display: block; margin-bottom: 0.4rem; }

/* Upload tab */
.dc-drop { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2.4rem 1.5rem; border: 2px dashed var(--border); border-radius: 16px; background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.dc-drop:hover, .dc-drop:focus-visible { border-color: var(--accent); background: var(--surface); outline: none; }
.dc-drop.dragover { border-color: var(--active-module-accent); background: var(--amber-soft); }
.dc-drop-icon { font-size: 2.4rem; }
.dc-drop-title { font-size: 1.05rem; color: var(--text); }
.dc-drop-sub { margin: 0; color: var(--muted); font-size: 0.85rem; max-width: 44ch; }
.dc-upload-recent h4, .dc-upload-history h4 { margin: 0 0 0.5rem; }
.dc-upload-list { display: flex; flex-direction: column; gap: 0.45rem; }
.dc-upload-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.dc-upload-file-icon { font-size: 1.3rem; }
.dc-upload-main { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dc-upload-main strong { font-size: 0.86rem; color: var(--text); }
.dc-upload-main small { font-size: 0.75rem; color: var(--muted); }
.dc-upload-status, .dc-uh-status { font-size: 0.74rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 20px; white-space: nowrap; }
.dc-uh-uploading { background: var(--cal-blue-soft); color: var(--cal-blue); }
.dc-uh-processing { background: var(--tk-medium-soft); color: var(--tk-medium); }
.dc-uh-filed { background: var(--cal-green-soft); color: var(--cal-green); }
.dc-uh-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.dc-uh-head, .dc-uh-row { display: grid; grid-template-columns: 2.2fr 0.8fr 0.8fr 1.1fr 1fr 1.2fr; gap: 0.6rem; align-items: center; padding: 0.55rem 0.9rem; font-size: 0.82rem; }
.dc-uh-head { background: var(--surface-2); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; }
.dc-uh-row { border-top: 1px solid var(--border); }
.dc-uh-file { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-uh-when { color: var(--muted); }
.dc-uh-row .dc-uh-status { justify-self: start; }

/* Responsive */
@media (max-width: 1100px) {
  .dc-docs-layout { grid-template-columns: 180px 1fr; }
  .dc-preview { grid-column: 1 / -1; position: static; }
}
@media (max-width: 900px) {
  .dc-editor-mode-split { grid-template-columns: 1fr; }
  .dc-editor-mode-split .dc-editor-preview { display: none; }
  .dc-sp-head, .dc-sp-row { grid-template-columns: 2fr 1.3fr 1fr; }
  .dc-sp-by, .dc-sp-checkout { display: none; }
  .dc-uh-head, .dc-uh-row { grid-template-columns: 2fr 1fr 1.2fr; }
  .dc-uh-row > span:nth-child(2), .dc-uh-head > span:nth-child(2),
  .dc-uh-row > span:nth-child(3), .dc-uh-head > span:nth-child(3),
  .dc-uh-row > span:nth-child(6), .dc-uh-head > span:nth-child(6) { display: none; }
}
@media (max-width: 640px) {
  .dc-docs-layout { grid-template-columns: 1fr; }
  .dc-folders { flex-direction: row; flex-wrap: wrap; }
  .dc-tpl-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   UX Overhaul Phase 9 — Reports analytics dashboard (.rp-*)
   CSP-clean: zero inline styles. Bar widths/heights use the .rp-w-* / .rp-h-*
   utility classes; the line chart and donut are inline SVG (geometry attributes,
   not style=, so they pass style-src 'self').
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --rp-blue: #2563eb;
  --rp-green: #16a34a;
  --rp-amber: #d97706;
  --rp-track: #eef2f7;
}

.rp-app { display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Width / height utilities (no inline width/height) ─────────────────────── */
.rp-w-0{width:0}.rp-w-5{width:5%}.rp-w-10{width:10%}.rp-w-15{width:15%}.rp-w-20{width:20%}
.rp-w-25{width:25%}.rp-w-30{width:30%}.rp-w-35{width:35%}.rp-w-40{width:40%}.rp-w-45{width:45%}
.rp-w-50{width:50%}.rp-w-55{width:55%}.rp-w-60{width:60%}.rp-w-65{width:65%}.rp-w-70{width:70%}
.rp-w-75{width:75%}.rp-w-80{width:80%}.rp-w-85{width:85%}.rp-w-90{width:90%}.rp-w-95{width:95%}.rp-w-100{width:100%}
.rp-h-0{height:0}.rp-h-5{height:5%}.rp-h-10{height:10%}.rp-h-15{height:15%}.rp-h-20{height:20%}
.rp-h-25{height:25%}.rp-h-30{height:30%}.rp-h-35{height:35%}.rp-h-40{height:40%}.rp-h-45{height:45%}
.rp-h-50{height:50%}.rp-h-55{height:55%}.rp-h-60{height:60%}.rp-h-65{height:65%}.rp-h-70{height:70%}
.rp-h-75{height:75%}.rp-h-80{height:80%}.rp-h-85{height:85%}.rp-h-90{height:90%}.rp-h-95{height:95%}.rp-h-100{height:100%}

/* ── KPI cards ─────────────────────────────────────────────────────────────── */
.rp-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.9rem; }
.rp-kpi {
  display: flex; flex-direction: column; gap: 0.25rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 0.9rem 1rem; box-shadow: var(--shadow);
}
.rp-kpi-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.rp-kpi-value { font-size: 1.5rem; color: var(--accent-dark); font-variant-numeric: tabular-nums; line-height: 1.1; }
.rp-kpi-delta { font-size: 0.78rem; font-weight: 700; }
.rp-delta-up { color: var(--rp-green); }
.rp-delta-down { color: var(--red); }
.rp-delta-neutral { color: var(--muted); }
.rp-kpi-note { font-size: 0.7rem; color: var(--muted); }

/* ── Chart cards ───────────────────────────────────────────────────────────── */
.rp-chart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.rp-chart-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 1rem 1.1rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.85rem;
}
.rp-chart-head { display: flex; flex-direction: column; gap: 0.1rem; }
.rp-chart-title { margin: 0; font-size: 0.95rem; color: var(--accent-dark); }
.rp-chart-sub { font-size: 0.72rem; color: var(--muted); }
.rp-chart-body { flex: 1; min-height: 0; }

/* ── Horizontal bars ───────────────────────────────────────────────────────── */
.rp-hbars { display: flex; flex-direction: column; gap: 0.5rem; }
.rp-hbar-row { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: 0.6rem; }
.rp-hbar-label { font-size: 0.78rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-hbar-track { display: block; height: 14px; background: var(--rp-track); border-radius: 7px; overflow: hidden; }
.rp-hbar-fill { display: block; height: 100%; background: var(--accent); border-radius: 7px; min-width: 2px; transition: width 0.4s ease; }
.rp-hbar-fill.rp-tone-blue { background: var(--rp-blue); }
.rp-hbar-fill.rp-tone-green { background: var(--rp-green); }
.rp-hbar-fill.rp-tone-amber { background: var(--rp-amber); }
.rp-hbar-value { font-size: 0.78rem; font-weight: 700; color: var(--accent-dark); font-variant-numeric: tabular-nums; }

/* ── Vertical columns (stacked + single) ───────────────────────────────────── */
.rp-columns { display: flex; align-items: flex-end; justify-content: space-around; gap: 0.5rem; height: 160px; }
.rp-col { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; flex: 1; height: 100%; justify-content: flex-end; }
.rp-col-stack { display: flex; flex-direction: column-reverse; width: 60%; max-width: 34px; height: 120px; border-radius: 6px 6px 0 0; overflow: hidden; background: var(--rp-track); }
.rp-col-fill { display: block; width: 100%; background: var(--accent); border-radius: 6px 6px 0 0; transition: height 0.4s ease; }
.rp-col-fill.rp-tone-amber { background: var(--rp-amber); }
.rp-col-fill.rp-tone-blue { background: var(--rp-blue); }
.rp-col-seg { display: block; width: 100%; transition: height 0.4s ease; }
.rp-col-seg.rp-seg-received { background: var(--rp-blue); }
.rp-col-seg.rp-seg-sent { background: var(--accent); }
.rp-col-label { font-size: 0.72rem; color: var(--muted); }
.rp-col-value { font-size: 0.72rem; font-weight: 700; color: var(--accent-dark); font-variant-numeric: tabular-nums; }

/* ── Inline legends ────────────────────────────────────────────────────────── */
.rp-inline-legend { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; gap: 1rem; font-size: 0.75rem; color: var(--muted); }
.rp-inline-legend li { display: flex; align-items: center; gap: 0.35rem; }
.rp-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.rp-legend-dot.rp-seg-received { background: var(--rp-blue); }
.rp-legend-dot.rp-seg-sent { background: var(--accent); }

/* ── Line chart (SVG) ──────────────────────────────────────────────────────── */
.rp-linechart { display: flex; flex-direction: column; gap: 0.25rem; }
.rp-line-svg { width: 100%; height: 150px; overflow: visible; }
.rp-line-axis { stroke: var(--border); stroke-width: 1; }
.rp-line-area { fill: rgba(37, 99, 235, 0.12); stroke: none; }
.rp-line-stroke { fill: none; stroke: var(--rp-blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rp-line-dot { fill: #fff; stroke: var(--rp-blue); stroke-width: 2; }
.rp-line-labels { display: flex; justify-content: space-between; }
.rp-line-label { font-size: 0.7rem; color: var(--muted); }

/* ── Donut chart (SVG) ─────────────────────────────────────────────────────── */
.rp-donut-wrap { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.rp-donut-svg { width: 150px; height: 150px; }
.rp-donut-track { stroke: var(--rp-track); }
.rp-donut-arc { transition: stroke-dasharray 0.5s ease; }
.rp-donut-seg-0 { stroke: var(--accent); fill: var(--accent); }
.rp-donut-seg-1 { stroke: var(--rp-blue); fill: var(--rp-blue); }
.rp-donut-seg-2 { stroke: var(--rp-amber); fill: var(--rp-amber); }
.rp-donut-seg-3 { stroke: var(--rp-green); fill: var(--rp-green); }
.rp-legend-dot.rp-donut-seg-0 { background: var(--accent); }
.rp-legend-dot.rp-donut-seg-1 { background: var(--rp-blue); }
.rp-legend-dot.rp-donut-seg-2 { background: var(--rp-amber); }
.rp-legend-dot.rp-donut-seg-3 { background: var(--rp-green); }
.rp-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.rp-donut-big { font-size: 1.5rem; color: var(--accent-dark); line-height: 1; }
.rp-donut-small { font-size: 0.68rem; color: var(--muted); }
.rp-donut-legend { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.rp-donut-legend-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
.rp-legend-label { color: var(--text); }
.rp-legend-value { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Buttons (shared within Reports) ───────────────────────────────────────── */
.rp-btn { padding: 0.5rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.rp-btn:hover { background: var(--surface-2); }
.rp-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.rp-btn-primary:hover { background: var(--accent-dark); }
.rp-btn-secondary { color: var(--accent); }
.rp-btn-ghost { background: none; border: none; color: var(--accent); padding: 0.35rem 0.4rem; }
.rp-btn-ghost:hover { background: var(--surface-2); }
.rp-btn-sm { font-size: 0.75rem; padding: 0.3rem 0.6rem; }

/* ── Section headers ───────────────────────────────────────────────────────── */
.rp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rp-section-title { margin: 0; font-size: 1.05rem; color: var(--accent-dark); }
.rp-help { margin: 0.1rem 0 0.6rem; font-size: 0.8rem; color: var(--muted); }

/* ── Reports library ───────────────────────────────────────────────────────── */
.rp-report-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.9rem; margin-top: 0.9rem; }
.rp-report-card { display: flex; flex-direction: column; gap: 0.5rem; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; box-shadow: var(--shadow); cursor: pointer; font: inherit; }
.rp-report-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.rp-report-type-chip { align-self: flex-start; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); background: var(--surface-2); padding: 0.18rem 0.5rem; border-radius: 999px; }
.rp-report-card-title { font-size: 0.95rem; font-weight: 700; color: var(--accent-dark); }
.rp-report-card-summary { font-size: 0.8rem; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rp-report-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.4rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--muted); }
.rp-report-by { display: flex; align-items: center; gap: 0.4rem; }
.rp-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.62rem; font-weight: 700; }

/* ── Report detail ─────────────────────────────────────────────────────────── */
.rp-report-detail { display: flex; flex-direction: column; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; box-shadow: var(--shadow); }
.rp-back { align-self: flex-start; }
.rp-report-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rp-report-detail-title { margin: 0.35rem 0 0.25rem; font-size: 1.3rem; color: var(--accent-dark); }
.rp-report-detail-meta { margin: 0; font-size: 0.8rem; color: var(--muted); }
.rp-report-summary { margin: 0; font-size: 0.9rem; color: var(--text); line-height: 1.55; }
.rp-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.rp-stat { background: var(--surface-2); border-radius: 10px; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; }
.rp-stat-value { font-size: 1.35rem; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.rp-stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; }
.rp-report-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rp-report-table th, .rp-report-table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); text-align: left; }
.rp-report-table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.rp-report-table .rp-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Panels (Exports + Settings) ───────────────────────────────────────────── */
.rp-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.25rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.75rem; }

/* ── Tables ────────────────────────────────────────────────────────────────── */
.rp-table-wrap { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rp-table th, .rp-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.rp-table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.rp-table .rp-num { text-align: right; font-variant-numeric: tabular-nums; }
.rp-format-chip { font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 6px; background: var(--surface-2); color: var(--accent-dark); }
.rp-format-pdf { background: #fee2e2; color: #991b1b; }
.rp-format-csv { background: #dcfce7; color: #166534; }
.rp-format-xlsx { background: #dbeafe; color: #1e40af; }
.rp-status-chip { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; }
.rp-status-complete { background: #dcfce7; color: #166534; }
.rp-status-processing { background: #fef3c7; color: #92400e; }
.rp-status-failed { background: #fee2e2; color: #991b1b; }

/* ── Scheduled exports ─────────────────────────────────────────────────────── */
.rp-schedule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.rp-schedule-item { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.6rem 0.75rem; background: var(--surface-2); border-radius: 8px; font-size: 0.85rem; }
.rp-schedule-main { color: var(--accent-dark); }
.rp-schedule-recipients { color: var(--muted); }
.rp-schedule-item .rp-btn { margin-left: auto; }
.rp-empty { color: var(--muted); font-size: 0.85rem; list-style: none; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.rp-form { display: flex; flex-direction: column; gap: 0.9rem; }
.rp-form-title { margin: 0; font-size: 0.95rem; color: var(--accent-dark); }
.rp-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
.rp-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--accent-dark); }
.rp-field-wide { grid-column: 1 / -1; }
.rp-field input, .rp-field select { padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-weight: 400; background: var(--surface); }
.rp-form-note { margin: 0; font-size: 0.78rem; color: var(--muted); line-height: 1.45; }
.rp-form-foot { display: flex; justify-content: flex-end; gap: 0.6rem; }
.rp-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text); cursor: pointer; }
.rp-check input { width: 16px; height: 16px; }
.rp-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }

/* ── Modal / overlay (Generate Report) ─────────────────────────────────────── */
.rp-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.rp-overlay[hidden] { display: none; }
.rp-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 31, 56, 0.45); }
.rp-modal { position: relative; z-index: 1; background: var(--surface); border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 31, 56, 0.28); width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.rp-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.rp-modal-title { margin: 0; font-size: 1.05rem; color: var(--accent-dark); }
.rp-modal-x { background: none; border: none; font-size: 1.05rem; color: var(--muted); cursor: pointer; line-height: 1; padding: 0.2rem; }
.rp-modal-x:hover { color: var(--accent-dark); }
.rp-modal .rp-form { padding: 1.1rem 1.25rem; overflow-y: auto; }
.rp-modal-foot { display: flex; gap: 0.6rem; justify-content: flex-end; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .rp-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .rp-chart-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .rp-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .rp-chart-grid { grid-template-columns: 1fr; }
  .rp-stat-row { grid-template-columns: repeat(2, 1fr); }
  .rp-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .rp-kpi-grid { grid-template-columns: 1fr; }
  .rp-hbar-row { grid-template-columns: 5rem 1fr auto; }
}

/* ════════════════════════════════════════════════════════════════════════════
   UX Overhaul Phase 10 — Team (.tm-*)
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --tm-green: #15803d; --tm-green-soft: #ecfdf3;
  --tm-blue: #2563eb;  --tm-blue-soft: #eff4ff;
  --tm-amber: #b45309; --tm-amber-soft: #fff7ed;
  --tm-gray: #64748b;  --tm-gray-soft: #f1f5f9;
  --tm-purple: #7c3aed; --tm-purple-soft: #f5f3ff;
}
.tm-app { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.tm-muted { color: var(--muted); font-size: 0.82rem; }
.tm-section-title { margin: 0 0 0.6rem; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.tm-empty { color: var(--muted); padding: 1.5rem; text-align: center; }

/* Avatars (dept-tinted) */
.tm-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; flex: none; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.02em;
}
.tm-avatar-lg { width: 3.6rem; height: 3.6rem; font-size: 1.15rem; }
.tm-avatar-sm { width: 1.8rem; height: 1.8rem; font-size: 0.62rem; }
.tm-dept-operations { background: var(--tm-blue); }
.tm-dept-sales { background: var(--tm-green); }
.tm-dept-engineering { background: var(--tm-purple); }
.tm-dept-admin { background: var(--accent); }

/* Status pills */
.tm-status { display: inline-flex; align-items: center; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.tm-status-active { background: var(--tm-green-soft); color: var(--tm-green); }
.tm-status-remote { background: var(--tm-blue-soft); color: var(--tm-blue); }
.tm-status-leave { background: var(--tm-amber-soft); color: var(--tm-amber); }
.tm-status-out { background: var(--tm-gray-soft); color: var(--tm-gray); }

/* ── Directory ─────────────────────────────────────────────────────────────── */
.tm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.tm-search {
  flex: 1 1 240px; min-width: 180px; padding: 0.55rem 0.8rem;
  border: 1px solid var(--border); border-radius: 10px; font-size: 0.9rem; background: var(--surface); color: var(--text);
}
.tm-filter { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.tm-select { padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 9px; font-size: 0.86rem; background: var(--surface); color: var(--text); }
.tm-result-count { font-size: 0.8rem; color: var(--muted); font-weight: 700; margin-left: auto; }

.tm-directory-layout { display: grid; grid-template-columns: 1fr; gap: 1.1rem; min-width: 0; }
.tm-directory-layout.tm-has-detail { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr); }
.tm-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.8rem; align-content: start; }

.tm-card {
  display: flex; align-items: center; gap: 0.7rem; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  padding: 0.85rem; cursor: pointer; box-shadow: var(--polish-shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.tm-card:hover, .tm-card:focus-visible { transform: translateY(-2px); box-shadow: var(--polish-shadow-hover); outline: none; border-color: var(--accent); }
.tm-card-selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(15, 31, 56, 0.12); }
.tm-card-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.tm-card-name { font-size: 0.92rem; color: var(--accent-dark); font-weight: 700; }
.tm-card-title { font-size: 0.78rem; color: var(--text); }
.tm-card-dept { font-size: 0.72rem; color: var(--muted); }

/* Directory detail panel */
.tm-detail {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.1rem; box-shadow: var(--polish-shadow-md);
  display: flex; flex-direction: column; gap: 1rem; align-self: start; min-width: 0;
}
.tm-detail-close { position: absolute; top: 0.7rem; right: 0.7rem; background: none; border: none; font-size: 0.9rem; color: var(--muted); cursor: pointer; padding: 0.2rem; }
.tm-detail-close:hover { color: var(--accent-dark); }
.tm-detail-head { display: flex; gap: 0.85rem; align-items: center; }
.tm-detail-name { margin: 0; font-size: 1.15rem; color: var(--accent-dark); }
.tm-detail-title { margin: 0.15rem 0 0.4rem; font-size: 0.82rem; color: var(--muted); }
.tm-detail-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0; }
.tm-detail-contact dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 800; }
.tm-detail-contact dd { margin: 0.1rem 0 0; font-size: 0.82rem; color: var(--text); word-break: break-word; }
.tm-detail-section h4 { margin: 0 0 0.45rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 800; }
.tm-skill-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tm-skill { display: inline-flex; padding: 0.18rem 0.55rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.74rem; color: var(--text); font-weight: 600; }
.tm-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.tm-chain-link { background: none; border: none; color: var(--tm-blue); font-size: 0.8rem; font-weight: 700; cursor: pointer; padding: 0.1rem 0.2rem; border-radius: 6px; }
.tm-chain-link:hover { background: var(--tm-blue-soft); }
.tm-chain-current { color: var(--accent-dark); cursor: default; }
.tm-chain-sep { color: var(--muted); font-size: 0.8rem; }
.tm-report-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tm-report-chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.25rem 0.55rem; font-size: 0.76rem; color: var(--text); font-weight: 600; cursor: pointer; }
.tm-report-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.tm-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.tm-activity-item { display: flex; gap: 0.55rem; font-size: 0.8rem; color: var(--text); }
.tm-activity-time { color: var(--muted); font-weight: 700; flex: none; min-width: 4rem; }

/* ── Schedule ──────────────────────────────────────────────────────────────── */
.tm-sched-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; }
.tm-week-nav { display: inline-flex; align-items: center; gap: 0.6rem; }
.tm-week-btn { width: 2rem; height: 2rem; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; font-size: 1rem; cursor: pointer; color: var(--accent); }
.tm-week-btn:hover { background: var(--surface-2); }
.tm-week-label { font-size: 0.88rem; font-weight: 800; color: var(--accent-dark); }
.tm-legend { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.tm-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; color: var(--muted); font-weight: 600; }
.tm-legend-dot { width: 0.8rem; height: 0.8rem; border-radius: 4px; display: inline-block; }
.tm-sched-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 13px; }
.tm-schedule { width: 100%; border-collapse: collapse; min-width: 620px; }
.tm-schedule th, .tm-schedule td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); text-align: left; }
.tm-sched-corner { background: var(--surface-2); font-size: 0.76rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.tm-sched-day { background: var(--surface-2); text-align: center; }
.tm-sched-dow { display: block; font-size: 0.82rem; font-weight: 800; color: var(--accent-dark); }
.tm-sched-date { display: block; font-size: 0.7rem; color: var(--muted); }
.tm-sched-today { background: var(--cal-today); }
.tm-sched-person { white-space: nowrap; }
.tm-sched-person { display: flex; align-items: center; gap: 0.5rem; }
.tm-sched-person-name { font-size: 0.84rem; font-weight: 700; color: var(--accent-dark); }
.tm-sched-cell { vertical-align: middle; }
.tm-shift { display: inline-flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid transparent; min-width: 5rem; }
.tm-shift-loc { font-size: 0.76rem; font-weight: 800; }
.tm-shift-time { font-size: 0.68rem; opacity: 0.85; }
.tm-shift-office { background: var(--tm-blue-soft); color: var(--tm-blue); border-color: #d6e4ff; }
.tm-shift-remote { background: var(--tm-green-soft); color: var(--tm-green); border-color: #bbf0cf; }
.tm-shift-client { background: var(--tm-amber-soft); color: var(--tm-amber); border-color: #fcd9b6; }
.tm-shift-off { background: var(--tm-gray-soft); color: var(--tm-gray); border-color: var(--border); }
.tm-legend-dot.tm-shift-office { background: var(--tm-blue); }
.tm-legend-dot.tm-shift-remote { background: var(--tm-green); }
.tm-legend-dot.tm-shift-client { background: var(--tm-amber); }
.tm-legend-dot.tm-shift-off { background: var(--tm-gray); }

/* ── PTO ───────────────────────────────────────────────────────────────────── */
.tm-pto-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.1rem; }
.tm-pto-col { min-width: 0; }
.tm-pto-balances { display: flex; flex-direction: column; gap: 0.7rem; max-height: 30rem; overflow-y: auto; padding-right: 0.2rem; }
.tm-pto-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem; box-shadow: var(--polish-shadow-sm); }
.tm-pto-card-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.tm-pto-card-head strong { font-size: 0.86rem; color: var(--accent-dark); }
.tm-pto-bar-row { display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: center; gap: 0.55rem; margin-bottom: 0.35rem; }
.tm-pto-bar-label { font-size: 0.74rem; color: var(--muted); font-weight: 700; }
.tm-pto-track { height: 0.5rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.tm-pto-fill { display: block; height: 100%; border-radius: 999px; }
.tm-pto-vacation { background: var(--tm-blue); }
.tm-pto-sick { background: var(--tm-amber); }
.tm-pto-personal { background: var(--tm-purple); }
.tm-pto-figure { font-size: 0.78rem; font-weight: 800; color: var(--accent-dark); white-space: nowrap; }

.tm-pto-upcoming { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.tm-pto-upcoming-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.tm-pto-upcoming-body { display: flex; flex-direction: column; gap: 0.1rem; }
.tm-pto-upcoming-body strong { font-size: 0.84rem; color: var(--accent-dark); }
.tm-pto-type { display: inline-flex; padding: 0.14rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; flex: none; }
.tm-pto-type-vacation { background: var(--tm-blue-soft); color: var(--tm-blue); }
.tm-pto-type-sick { background: var(--tm-amber-soft); color: var(--tm-amber); }
.tm-pto-type-personal { background: var(--tm-purple-soft); color: var(--tm-purple); }

.tm-pto-form { display: flex; flex-direction: column; gap: 0.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem; }
.tm-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.76rem; font-weight: 700; color: var(--muted); }
.tm-field input, .tm-field select { padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.86rem; background: var(--surface); color: var(--text); font-weight: 500; }
.tm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.tm-pto-history-section { min-width: 0; }
.tm-pto-history { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.tm-pto-history th, .tm-pto-history td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); text-align: left; }
.tm-pto-history thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.tm-pto-notes { color: var(--muted); }
.tm-pto-status { display: inline-flex; padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.tm-pto-status-approved { background: var(--tm-green-soft); color: var(--tm-green); }
.tm-pto-status-pending { background: var(--tm-amber-soft); color: var(--tm-amber); }
.tm-pto-status-denied { background: var(--tk-high-soft); color: var(--red); }

/* ── Org chart ─────────────────────────────────────────────────────────────── */
.tm-org-hint { font-size: 0.82rem; color: var(--muted); margin: 0 0 0.8rem; }
.tm-org-scroll { overflow-x: auto; padding: 0.5rem 0.2rem 1rem; }
.tm-org-tree, .tm-org-children { list-style: none; margin: 0; padding: 0; }
.tm-org-tree { display: flex; justify-content: center; }
.tm-org-node { display: flex; flex-direction: column; align-items: center; position: relative; }
.tm-org-children { display: flex; justify-content: center; gap: 1rem; padding-top: 1.4rem; position: relative; }
/* connector lines */
.tm-org-children::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 0.7rem; background: var(--border); }
.tm-org-node .tm-org-node::before { content: ""; position: absolute; top: -0.7rem; left: 50%; width: 2px; height: 0.7rem; background: var(--border); }
.tm-org-children > .tm-org-node::after { content: ""; position: absolute; top: -0.7rem; left: 0; right: 0; height: 2px; background: var(--border); }
.tm-org-children > .tm-org-node:first-child::after { left: 50%; }
.tm-org-children > .tm-org-node:last-child::after { right: 50%; }
.tm-org-children > .tm-org-node:only-child::after { display: none; }
.tm-org-card {
  display: flex; align-items: center; gap: 0.5rem; position: relative;
  background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: 11px; padding: 0.6rem 0.75rem; cursor: pointer; min-width: 11rem; box-shadow: var(--polish-shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tm-org-card:hover { transform: translateY(-2px); box-shadow: var(--polish-shadow-hover); }
.tm-dept-border-operations { border-top-color: var(--tm-blue); }
.tm-dept-border-sales { border-top-color: var(--tm-green); }
.tm-dept-border-engineering { border-top-color: var(--tm-purple); }
.tm-dept-border-admin { border-top-color: var(--accent); }
.tm-org-card-body { display: flex; flex-direction: column; gap: 0.05rem; text-align: left; }
.tm-org-card-body strong { font-size: 0.83rem; color: var(--accent-dark); }
.tm-org-card-title { font-size: 0.72rem; color: var(--muted); }
.tm-org-status { width: 0.65rem; height: 0.65rem; border-radius: 999px; margin-left: auto; flex: none; }
.tm-org-status.tm-status-active { background: var(--tm-green); }
.tm-org-status.tm-status-remote { background: var(--tm-blue); }
.tm-org-status.tm-status-leave { background: var(--tm-amber); }
.tm-org-status.tm-status-out { background: var(--tm-gray); }

/* ── Buttons + overlay (Team) ──────────────────────────────────────────────── */
.tm-btn { border: 1px solid var(--border); background: var(--surface); color: var(--accent); border-radius: 9px; padding: 0.55rem 0.95rem; font-weight: 700; font-size: 0.86rem; cursor: pointer; }
.tm-btn:hover { background: var(--surface-2); }
.tm-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.tm-btn-primary:hover { background: var(--accent-dark); }
.tm-btn-ghost { background: transparent; }
.tm-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(10, 22, 40, 0.45); }
.tm-overlay[hidden] { display: none; }
.tm-modal { position: relative; background: var(--surface); border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 31, 56, 0.28); width: min(560px, 100%); max-height: 90vh; overflow-y: auto; }
.tm-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.tm-modal-head h3 { margin: 0; font-size: 1.1rem; color: var(--accent-dark); }
.tm-modal-close { background: none; border: none; font-size: 1rem; color: var(--muted); cursor: pointer; padding: 0.2rem; }
.tm-modal-close:hover { color: var(--accent-dark); }
.tm-modal-form { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.1rem 1.25rem; }
.tm-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; padding-top: 0.4rem; }

@media (max-width: 900px) {
  .tm-directory-layout.tm-has-detail { grid-template-columns: 1fr; }
  .tm-pto-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tm-field-row { grid-template-columns: 1fr; }
  .tm-detail-contact { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   UX Overhaul Phase 10 — Flow (.fl-*)
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --fl-active: #15803d; --fl-active-soft: #ecfdf3;
  --fl-paused: #b45309; --fl-paused-soft: #fff7ed;
  --fl-draft: #64748b;  --fl-draft-soft: #f1f5f9;
  --fl-blue: #2563eb;   --fl-blue-soft: #eff4ff;
}
.fl-app { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.fl-muted { color: var(--muted); font-size: 0.8rem; }
.fl-section-title { margin: 0 0 0.6rem; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.fl-step-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; flex: none; border-radius: 9px; background: var(--surface-2); font-size: 0.95rem; }
.fl-trigger-badge { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; flex: none; border-radius: 10px; background: var(--accent); color: #fff; font-size: 1rem; }

/* Status pills */
.fl-status { display: inline-flex; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.fl-status-active { background: var(--fl-active-soft); color: var(--fl-active); }
.fl-status-paused { background: var(--fl-paused-soft); color: var(--fl-paused); }
.fl-status-draft { background: var(--fl-draft-soft); color: var(--fl-draft); }

/* ── Automations ───────────────────────────────────────────────────────────── */
.fl-summary-strip { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.fl-summary { display: flex; flex-direction: column; gap: 0.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 1.1rem; box-shadow: var(--polish-shadow-sm); }
.fl-summary strong { font-size: 1.4rem; color: var(--accent-dark); }
.fl-summary span { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }
.fl-auto-list { display: flex; flex-direction: column; gap: 0.7rem; }
.fl-auto-card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 0.9rem 1rem; box-shadow: var(--polish-shadow-sm); transition: box-shadow 0.12s ease; }
.fl-auto-card:hover { box-shadow: var(--polish-shadow-md); }
.fl-auto-card.fl-expanded { border-color: var(--accent); }
.fl-auto-head { display: flex; align-items: center; gap: 0.75rem; }
.fl-auto-titlebtn { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; text-align: left; background: none; border: none; cursor: pointer; padding: 0; min-width: 0; }
.fl-auto-name { font-size: 0.95rem; color: var(--accent-dark); font-weight: 700; }
.fl-auto-trigger { font-size: 0.78rem; color: var(--muted); }
.fl-auto-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.6rem; padding-left: 2.95rem; }
.fl-card-steps { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed var(--border); }
.fl-step-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.fl-step-mini { display: flex; align-items: center; gap: 0.6rem; }
.fl-step-mini-body { display: flex; flex-direction: column; gap: 0.05rem; }
.fl-step-mini-body strong { font-size: 0.82rem; color: var(--accent-dark); }
.fl-card-detail-actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; }

/* Toggle switch */
.fl-toggle { position: relative; display: inline-flex; align-items: center; flex: none; cursor: pointer; }
.fl-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.fl-toggle input:disabled { cursor: not-allowed; }
.fl-toggle-track { width: 2.5rem; height: 1.4rem; background: var(--border); border-radius: 999px; position: relative; transition: background 0.15s ease; }
.fl-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; background: #fff; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.15s ease; }
.fl-toggle input:checked + .fl-toggle-track { background: var(--fl-active); }
.fl-toggle input:checked + .fl-toggle-track .fl-toggle-thumb { transform: translateX(1.1rem); }
.fl-toggle input:disabled + .fl-toggle-track { opacity: 0.5; }

/* ── Builder ───────────────────────────────────────────────────────────────── */
.fl-builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.5fr); gap: 1.1rem; }
.fl-builder-main { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.fl-builder-section { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 1rem; }
.fl-build-h { margin: 0 0 0.3rem; font-size: 0.95rem; color: var(--accent-dark); }
.fl-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.fl-input { padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 9px; font-size: 0.9rem; background: var(--surface); color: var(--text); font-weight: 500; }
.fl-select { padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.86rem; background: var(--surface); color: var(--text); }
.fl-trigger-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; margin-top: 0.6rem; }
.fl-trigger-pick { display: flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; font-size: 0.84rem; font-weight: 600; color: var(--text); }
.fl-trigger-pick:hover { border-color: var(--accent); }
.fl-trigger-pick span:first-child { font-size: 1.05rem; }
.fl-trigger-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.fl-build-trigger-node { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem; background: var(--fl-blue-soft); border: 1px solid #d6e4ff; border-radius: 11px; }
.fl-build-step-body { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.fl-build-step-body strong { font-size: 0.85rem; color: var(--accent-dark); }
.fl-step-connector { display: flex; justify-content: center; padding: 0.3rem 0; }
.fl-step-add-inline { width: 1.7rem; height: 1.7rem; border-radius: 999px; border: 1px dashed var(--border); background: var(--surface); color: var(--accent); font-size: 1rem; line-height: 1; cursor: pointer; }
.fl-step-add-inline:hover { border-color: var(--accent); background: var(--surface-2); }
.fl-build-steps { display: flex; flex-direction: column; }
.fl-build-step-wrap { display: flex; flex-direction: column; }
.fl-build-step { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; }
.fl-step-remove { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; padding: 0.2rem; flex: none; }
.fl-step-remove:hover { color: var(--red); }
.fl-build-empty { font-size: 0.84rem; color: var(--muted); padding: 0.8rem; text-align: center; border: 1px dashed var(--border); border-radius: 10px; }
.fl-builder-actions { display: flex; gap: 0.6rem; }
.fl-builder-side { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 1rem; align-self: start; }
.fl-step-type-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
.fl-step-type-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--text); text-align: left; }
.fl-step-type-btn:hover { border-color: var(--accent); background: var(--surface-2); }

/* ── Templates ─────────────────────────────────────────────────────────────── */
.fl-tpl-gallery { display: flex; flex-direction: column; gap: 1.3rem; }
.fl-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.8rem; }
.fl-tpl-card { display: flex; flex-direction: column; gap: 0.55rem; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 1rem; box-shadow: var(--polish-shadow-sm); }
.fl-tpl-head { display: flex; align-items: center; gap: 0.6rem; }
.fl-tpl-name { font-size: 0.92rem; color: var(--accent-dark); }
.fl-tpl-desc { font-size: 0.82rem; color: var(--text); margin: 0; flex: 1; line-height: 1.45; }
.fl-tpl-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.fl-tpl-cat { display: inline-flex; padding: 0.14rem 0.55rem; border-radius: 999px; background: var(--fl-blue-soft); color: var(--fl-blue); font-size: 0.7rem; font-weight: 800; }
.fl-tpl-use { margin-top: 0.2rem; }

/* ── Activity log ──────────────────────────────────────────────────────────── */
.fl-log-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem; }
.fl-log-count { margin-left: auto; font-weight: 700; }
.fl-log-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.fl-log-table th, .fl-log-table td { padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--border); text-align: left; }
.fl-log-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.fl-log-row-open { background: var(--surface-2); }
.fl-log-name { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none; cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--accent-dark); padding: 0; text-align: left; }
.fl-log-caret { color: var(--muted); font-size: 0.7rem; }
.fl-run-status { display: inline-flex; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.fl-run-status-success { background: var(--fl-active-soft); color: var(--fl-active); }
.fl-run-status-failed { background: var(--tk-high-soft); color: var(--red); }
.fl-run-status-partial { background: var(--fl-paused-soft); color: var(--fl-paused); }
.fl-log-detail-row td { background: var(--surface-2); padding: 0.8rem 1rem; }
.fl-log-step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.fl-log-step { display: flex; align-items: center; gap: 0.6rem; }
.fl-log-step-body { display: flex; flex-direction: column; gap: 0.05rem; flex: 1; min-width: 0; }
.fl-log-step-body strong { font-size: 0.82rem; color: var(--accent-dark); }
.fl-log-step-status { font-size: 0.74rem; font-weight: 800; flex: none; }
.fl-log-step-ok .fl-log-step-status { color: var(--fl-active); }
.fl-log-step-fail .fl-log-step-status { color: var(--red); }
.fl-log-step-skip { opacity: 0.55; }
.fl-log-step-skip .fl-log-step-status { color: var(--muted); }

/* Buttons (Flow) */
.fl-btn { border: 1px solid var(--border); background: var(--surface); color: var(--accent); border-radius: 9px; padding: 0.5rem 0.9rem; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.fl-btn:hover { background: var(--surface-2); }
.fl-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.fl-btn-primary:hover { background: var(--accent-dark); }
.fl-btn-ghost { background: transparent; }

@media (max-width: 900px) {
  .fl-builder { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fl-summary-strip { gap: 0.5rem; }
  .fl-summary { flex: 1; padding: 0.6rem 0.7rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   UX Overhaul Phase 10 — Control Center (.cc-*)
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --cc-green: #15803d; --cc-green-soft: #ecfdf3;
  --cc-red: #b42318;   --cc-red-soft: #fef3f2;
  --cc-amber: #b45309; --cc-amber-soft: #fff7ed;
  --cc-blue: #2563eb;  --cc-blue-soft: #eff4ff;
  --cc-gray: #64748b;  --cc-gray-soft: #f1f5f9;
}
.cc-app { display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; }
.cc-muted { color: var(--muted); font-size: 0.8rem; }
.cc-section-title { margin: 0 0 0.6rem; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.cc-overview-section { min-width: 0; }
.cc-overview-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.3rem; }

/* System status */
.cc-system-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.7rem; }
.cc-system-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem; box-shadow: var(--polish-shadow-sm); }
.cc-system-head { display: flex; align-items: center; gap: 0.5rem; }
.cc-system-head strong { font-size: 0.9rem; color: var(--accent-dark); }
.cc-system-status { margin-left: auto; font-size: 0.74rem; font-weight: 800; color: var(--cc-green); }
.cc-system-detail { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--muted); }
.cc-system-dot { width: 0.7rem; height: 0.7rem; border-radius: 999px; flex: none; }
.cc-dot-online { background: var(--cc-green); box-shadow: 0 0 0 3px var(--cc-green-soft); }
.cc-dot-error { background: var(--cc-red); box-shadow: 0 0 0 3px var(--cc-red-soft); }

/* Usage */
.cc-usage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
.cc-usage-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.2rem; box-shadow: var(--polish-shadow-sm); }
.cc-usage-num { font-size: 1.55rem; font-weight: 800; color: var(--accent-dark); line-height: 1; }
.cc-usage-sub { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.cc-usage-label { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }
.cc-usage-track { height: 0.45rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: 0.3rem; }
.cc-usage-fill { display: block; height: 100%; background: var(--cc-blue); border-radius: 999px; }
.cc-usage-foot { font-size: 0.7rem; color: var(--muted); }

/* License */
.cc-license-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: 0.55rem; box-shadow: var(--polish-shadow-sm); }
.cc-license-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.84rem; color: var(--muted); }
.cc-license-row strong { color: var(--accent-dark); font-weight: 700; }
.cc-plan-badge { display: inline-flex; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--amber-soft); color: var(--amber-strong); font-size: 0.78rem; font-weight: 800; }
.cc-license-card .cc-btn { margin-top: 0.3rem; }

/* Events */
.cc-event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.cc-event { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-size: 0.82rem; }
.cc-event-time { color: var(--muted); font-weight: 700; flex: none; min-width: 4.5rem; }
.cc-event-kind { display: inline-flex; padding: 0.08rem 0.45rem; border-radius: 999px; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; flex: none; }
.cc-event-kind-login { background: var(--cc-blue-soft); color: var(--cc-blue); }
.cc-event-kind-config { background: var(--cc-gray-soft); color: var(--cc-gray); }
.cc-event-kind-error { background: var(--cc-amber-soft); color: var(--cc-amber); }
.cc-event-text { color: var(--text); }

/* ── Users & Roles ─────────────────────────────────────────────────────────── */
.cc-users-layout { display: grid; grid-template-columns: 1fr; gap: 1.1rem; min-width: 0; }
.cc-users-layout.cc-has-detail { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.85fr); }
.cc-users-main { min-width: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.cc-user-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.cc-user-table th, .cc-user-table td { padding: 0.6rem 0.65rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.cc-user-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.cc-user-row-selected { background: var(--surface-2); }
.cc-user-name { display: block; background: none; border: none; padding: 0; font-size: 0.86rem; font-weight: 700; color: var(--accent-dark); cursor: pointer; text-align: left; }
.cc-user-name:hover { color: var(--cc-blue); }
.cc-user-email { display: block; font-size: 0.74rem; color: var(--muted); }
.cc-user-login { color: var(--muted); font-size: 0.8rem; }
.cc-role-tag { display: inline-flex; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.cc-role-admin { background: var(--accent); color: #fff; }
.cc-role-manager { background: var(--cc-blue-soft); color: var(--cc-blue); }
.cc-role-staff { background: var(--cc-green-soft); color: var(--cc-green); }
.cc-role-viewer { background: var(--cc-gray-soft); color: var(--cc-gray); }
.cc-user-status { display: inline-flex; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.cc-user-status-active { background: var(--cc-green-soft); color: var(--cc-green); }
.cc-user-status-invited { background: var(--cc-amber-soft); color: var(--cc-amber); }
.cc-user-status-disabled { background: var(--cc-gray-soft); color: var(--cc-gray); }

.cc-user-detail { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem; box-shadow: var(--polish-shadow-md); align-self: start; display: flex; flex-direction: column; gap: 0.7rem; }
.cc-detail-close { position: absolute; top: 0.7rem; right: 0.7rem; background: none; border: none; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
.cc-detail-close:hover { color: var(--accent-dark); }
.cc-detail-name { margin: 0; font-size: 1.1rem; color: var(--accent-dark); }
.cc-detail-email { margin: 0; font-size: 0.8rem; color: var(--muted); }
.cc-detail-field { margin-top: 0.3rem; }
.cc-detail-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.3rem; }

/* Invite form */
.cc-invite-form { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.cc-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.76rem; font-weight: 700; color: var(--muted); }
.cc-field input, .cc-input, .cc-select { padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.86rem; background: var(--surface); color: var(--text); font-weight: 500; }
.cc-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.6rem; }
.cc-form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* Permission matrix */
.cc-matrix-section { min-width: 0; overflow-x: auto; }
.cc-matrix { width: 100%; border-collapse: collapse; font-size: 0.84rem; min-width: 420px; }
.cc-matrix th, .cc-matrix td { padding: 0.5rem 0.6rem; border: 1px solid var(--border); text-align: center; }
.cc-matrix thead th, .cc-matrix tbody th { background: var(--surface-2); color: var(--accent-dark); }
.cc-matrix tbody th { text-align: left; font-weight: 700; }
.cc-matrix-yes { color: var(--cc-green); font-weight: 900; }
.cc-matrix-no { color: var(--muted); }

/* ── Integrations ──────────────────────────────────────────────────────────── */
.cc-int-section { min-width: 0; }
.cc-int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.8rem; }
.cc-int-card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; box-shadow: var(--polish-shadow-sm); }
.cc-int-error { border-left: 3px solid var(--cc-red); }
.cc-int-head { display: flex; align-items: center; gap: 0.6rem; }
.cc-int-icon { font-size: 1.4rem; flex: none; }
.cc-int-id { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; flex: 1; }
.cc-int-id strong { font-size: 0.9rem; color: var(--accent-dark); }
.cc-int-desc { font-size: 0.74rem; color: var(--muted); }
.cc-int-status { display: inline-flex; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; flex: none; }
.cc-int-status-connected { background: var(--cc-green-soft); color: var(--cc-green); }
.cc-int-status-error { background: var(--cc-red-soft); color: var(--cc-red); }
.cc-int-status-off { background: var(--cc-gray-soft); color: var(--cc-gray); }
.cc-int-sync { margin: 0; font-size: 0.76rem; color: var(--muted); }
.cc-int-card .cc-int-error { margin: 0; font-size: 0.78rem; color: var(--cc-red); font-weight: 600; padding: 0; border: none; }
.cc-int-actions { display: flex; gap: 0.5rem; margin-top: auto; }
.cc-int-available-list { display: flex; flex-direction: column; gap: 0.5rem; }
.cc-int-available { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }

/* ── Security ──────────────────────────────────────────────────────────────── */
.cc-sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.cc-sec-card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; box-shadow: var(--polish-shadow-sm); }
.cc-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; font-size: 0.84rem; color: var(--text); font-weight: 600; }
.cc-switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-switch-track { width: 2.5rem; height: 1.4rem; background: var(--border); border-radius: 999px; position: relative; transition: background 0.15s ease; }
.cc-switch-thumb { position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; background: #fff; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.15s ease; }
.cc-switch input:checked + .cc-switch-track { background: var(--cc-green); }
.cc-switch input:checked + .cc-switch-track .cc-switch-thumb { transform: translateX(1.1rem); }
.cc-audit-card { margin-top: 0.2rem; }
.cc-audit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.cc-audit-item { display: grid; grid-template-columns: 9rem 11rem 1fr; gap: 0.6rem; padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 9px; font-size: 0.8rem; background: var(--surface); }
.cc-audit-item.cc-audit-fail { border-left: 3px solid var(--cc-red); }
.cc-audit-time { color: var(--muted); font-weight: 700; }
.cc-audit-actor { color: var(--accent-dark); font-weight: 600; }
.cc-audit-event { color: var(--text); }

/* ── Settings ──────────────────────────────────────────────────────────────── */
.cc-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.cc-set-card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; box-shadow: var(--polish-shadow-sm); }
.cc-logo-row { display: flex; align-items: center; gap: 0.7rem; }
.cc-logo-box { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 800; font-size: 0.85rem; }
.cc-alert-prefs { display: flex; flex-direction: column; gap: 0.4rem; }
.cc-check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; color: var(--text); font-weight: 500; }
.cc-check input { width: 16px; height: 16px; }
.cc-backup-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.84rem; color: var(--muted); }
.cc-backup-row strong { color: var(--accent-dark); }
.cc-flag-list { display: flex; flex-direction: column; gap: 0.55rem; }
.cc-flag-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.cc-flag-id { display: flex; flex-direction: column; gap: 0.1rem; }
.cc-flag-id strong { font-size: 0.84rem; color: var(--accent-dark); }
.cc-about-card { margin-top: 0.2rem; }
.cc-about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.8rem; }
.cc-about-grid dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 800; }
.cc-about-grid dd { margin: 0.15rem 0 0; font-size: 0.84rem; color: var(--accent-dark); font-weight: 600; }

/* Buttons (Control Center) */
.cc-btn { border: 1px solid var(--border); background: var(--surface); color: var(--accent); border-radius: 9px; padding: 0.5rem 0.9rem; font-weight: 700; font-size: 0.84rem; cursor: pointer; }
.cc-btn:hover { background: var(--surface-2); }
.cc-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.cc-btn-primary:hover { background: var(--accent-dark); }
.cc-btn-ghost { background: transparent; }
.cc-btn-danger { color: var(--cc-red); border-color: #fbd5cf; }
.cc-btn-danger:hover { background: var(--cc-red-soft); }

@media (max-width: 900px) {
  .cc-overview-cols { grid-template-columns: 1fr; }
  .cc-users-layout.cc-has-detail { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cc-audit-item { grid-template-columns: 1fr; gap: 0.2rem; }
  .cc-field-row { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Phase gap-fill — standalone containers referenced by module templates that
   relied on base/parent rules. Conservative layout helpers only; all visual
   styling (cards, sections, modals, cells) is provided by their base classes.
   ────────────────────────────────────────────────────────────────────────── */
.crm-campaigns-tab { display: flex; flex-direction: column; gap: 1rem; }
.dc-preview-card { display: flex; flex-direction: column; }
.rp-report-detail-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fl-tpl-section { display: flex; flex-direction: column; gap: 0.8rem; }
.tm-directory-main { min-width: 0; }