/* CRM2 shared chrome
   Keeps every workspace route on the same slate / mist / ochre system as the
   dashboard. This file intentionally sits after the legacy styles so route
   specific rules cannot make the sidebar or controls unreadable. */
:root { color-scheme: light; }

/* Geometry contract: every workspace route uses the same frame and content rail.
   Route-specific legacy styles still provide component details, but cannot
   change the outer width, sidebar column, or main padding. */
.app-shell,
.app-shell.crew-shell,
.app-shell.calendar-shell,
.app-shell.projects-shell,
.app-shell.costing-shell,
.app-shell.team-shell,
.app-shell.editor-shell,
.app-shell.assignment-shell,
.app-shell.team-view-shell,
.app-shell.saved-documents-shell {
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  display: grid !important;
  grid-template-columns: 288px minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--crm2-surface) !important;
}

/* Final CRM2 palette normalization: keeps every route, including legacy
   document/auth surfaces, aligned with the teal + ochre system. */
:root {
  --green: var(--crm2-teal-deep) !important;
  --green-2: var(--crm2-teal) !important;
  --evergreen: var(--crm2-teal-deep) !important;
  --moss: var(--crm2-slate) !important;
  --accent: var(--crm2-teal-deep) !important;
  --accent-2: var(--crm2-teal) !important;
  --indigo: var(--crm2-teal-deep) !important;
  --purple: var(--crm2-teal-deep) !important;
}

html[data-theme="dark"] {
  --green: #8bd9cb !important;
  --green-2: #4fb7aa !important;
  --evergreen: #8bd9cb !important;
  --moss: #b7cbc5 !important;
  --accent: #8bd9cb !important;
  --accent-2: #4fb7aa !important;
  --indigo: #8bd9cb !important;
  --purple: #8bd9cb !important;
}

.activity-card,
.event-focus-card,
.metric-card:first-child,
.landing-page .preview-card-dark,
.landing-page .quote-panel,
.auth-art {
  background: linear-gradient(135deg, var(--crm2-teal-deep), var(--crm2-teal)) !important;
  color: #fff !important;
}

.landing-page .landing-kicker,
.landing-page .auth-field,
.landing-page .setup-note,
.auth-field,
.setup-note { color: var(--crm2-muted) !important; }

.landing-page .logo-glyph,
.landing-page .landing-links a:hover,
.landing-page .emphasis,
.landing-page .preview-active,
.landing-page .workflow-step.active,
.landing-page .calendar-date,
.landing-page .price-card.recommended,
.auth-field:focus {
  color: var(--crm2-teal-deep) !important;
  border-color: var(--crm2-teal-deep) !important;
}

.landing-page .landing-button-dark,
.landing-page .final-cta,
.landing-page .setup-step.active,
.auth-primary {
  background: var(--crm2-teal-deep) !important;
  border-color: var(--crm2-teal-deep) !important;
  color: #fff !important;
}

.landing-page .landing-button-dark:hover,
.landing-page .final-cta:hover,
.auth-primary:hover {
  background: var(--crm2-teal) !important;
  border-color: var(--crm2-teal) !important;
}

.style-journal b,
.document-preview .preview-rule,
.document-preview .preview-accent,
.brand-preview .preview-rule {
  background: var(--crm2-teal-deep) !important;
  border-color: var(--crm2-teal-deep) !important;
}

.document-preview .preview-highlight,
.brand-preview .preview-highlight { background: var(--crm2-ochre-soft) !important; }

html[data-theme="dark"] .financial-year-plus,
html[data-theme="dark"] .role-filter button.active,
html[data-theme="dark"] .assign-role-button,
html[data-theme="dark"] .detail-actions a,
html[data-theme="dark"] .costing-privacy-toggle.revealed,
html[data-theme="dark"] .switch input:checked + i {
  background: #214b47 !important;
  border-color: var(--crm2-teal) !important;
  color: #e8f8f4 !important;
}

html[data-theme="dark"] .costing-privacy-toggle,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .role-filter button,
html[data-theme="dark"] .detail-actions,
html[data-theme="dark"] .member-card,
html[data-theme="dark"] .calendar-day {
  background: #182926 !important;
  border-color: #38534e !important;
  color: #bfe8df !important;
}

html[data-theme="dark"] .member-card:hover,
html[data-theme="dark"] .member-card.active,
html[data-theme="dark"] .calendar-day.assigned {
  background: #214b47 !important;
  border-color: var(--crm2-teal) !important;
}

.app-shell > .main h1,
.app-shell > .main h2,
.app-shell > .main h3,
.document-app h1,
.document-app h2,
.document-app h3,
.brand-studio h1,
.brand-studio h2 { color: var(--crm2-ink) !important; }

html[data-theme="dark"] .app-shell > .main h1,
html[data-theme="dark"] .app-shell > .main h2,
html[data-theme="dark"] .app-shell > .main h3,
html[data-theme="dark"] .document-app h1,
html[data-theme="dark"] .document-app h2,
html[data-theme="dark"] .document-app h3,
html[data-theme="dark"] .brand-studio h1,
html[data-theme="dark"] .brand-studio h2 { color: #edf7f4 !important; }

/* Literal legacy indigo selectors kept here as a final cascade guard. */
.event-tag.corporate {
  color: var(--crm2-teal-deep) !important;
  background: var(--crm2-teal-soft) !important;
}
.landing-page .hero-copy h1 em,
.landing-page .section-intro h2 em,
.landing-page .feature-copy h2 em,
.landing-page .emphasis { color: var(--crm2-teal-deep) !important; }
.landing-page .preview-active {
  color: var(--crm2-teal-deep) !important;
  background: var(--crm2-teal-soft) !important;
}
.landing-page .workflow-step.active:before,
.landing-page .calendar-dates > b { background: var(--crm2-teal-deep) !important; }
.landing-page .price-card.recommended {
  color: #fff !important;
  background: var(--crm2-teal-deep) !important;
  border-color: var(--crm2-teal-deep) !important;
}
.setup-note {
  color: var(--crm2-muted) !important;
  border-color: var(--crm2-teal) !important;
  background: var(--crm2-teal-soft) !important;
}

html[data-theme="dark"] .notification-head button,
html[data-theme="dark"] .notification-item,
html[data-theme="dark"] .assign-role-button,
html[data-theme="dark"] .role-filter button.active,
html[data-theme="dark"] .detail-actions a {
  color: #e8f8f4 !important;
}
html[data-theme="dark"] .notification-head button:hover,
html[data-theme="dark"] .assign-role-button:hover { color: var(--crm2-ochre) !important; }
html[data-theme="dark"] .inquiry-panel button {
  background: #182926 !important;
  border-color: #38534e !important;
  color: #e8f8f4 !important;
}
.app-shell > .sidebar {
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100dvh !important;
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  border-radius: 0 !important;
}
.app-shell > .main {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 28px 48px !important;
}
.app-shell > .main.calendar-main,
.app-shell > .main.projects-main,
.app-shell > .main.crew-main,
.app-shell > .main.costing-main,
.app-shell > .main.workflow-main,
.app-shell > .main.editor-main,
.app-shell > .main.assignment-main,
.app-shell > .main.team-view-main,
.app-shell > .main.settings-main,
.app-shell > .saved-documents-main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 28px 48px !important;
}

/* Shared workspace chrome */
.app-shell > .sidebar {
  color: #eef7f4 !important;
  background: var(--crm2-slate) !important;
  border-right: 1px solid color-mix(in srgb, var(--crm2-slate) 72%, #fff) !important;
}
.app-shell > .sidebar .brand,
.app-shell > .sidebar .brand span,
.app-shell > .sidebar .nav-item,
.app-shell > .sidebar .sidebar-create-trigger { color: rgba(244,251,248,.82) !important; }
.app-shell > .sidebar .brand { color: #f4fbf8 !important; }
.app-shell > .sidebar .brand-mark { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; }
.app-shell > .sidebar .brand-mark svg,
.app-shell > .sidebar .nav-item svg,
.app-shell > .sidebar .sidebar-create-menu svg,
.app-shell > .sidebar [data-icon] svg { stroke: currentColor !important; }
.app-shell > .sidebar .brand-wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1; }
.app-shell > .sidebar .brand-beta { color: var(--crm2-ochre) !important; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.app-shell > .sidebar .nav-label { color: rgba(244,251,248,.54) !important; }
.app-shell > .sidebar .nav-item:hover,
.app-shell > .sidebar .sidebar-create-trigger:hover { color: #fff !important; background: rgba(255,255,255,.10) !important; }
.app-shell > .sidebar .nav-item.active { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; }
.app-shell > .sidebar .nav-item.active::before { background: var(--crm2-ochre) !important; }
.app-shell > .sidebar .nav-item b { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; }
.app-shell > .sidebar .sidebar-footer { border-color: rgba(244,251,248,.16) !important; }
.app-shell > .sidebar .profile-card { background: rgba(0,0,0,.16) !important; border-color: rgba(244,251,248,.12) !important; }
.app-shell > .sidebar .profile-card strong { color: #f4fbf8 !important; }
.app-shell > .sidebar .profile-card span { color: rgba(244,251,248,.58) !important; }
.app-shell > .sidebar .profile-card .avatar { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; }
.app-shell > .sidebar .profile-card .icon-button { color: rgba(244,251,248,.72) !important; background: transparent !important; border-color: transparent !important; }
.app-shell > .sidebar .sidebar-create-menu { background: var(--crm2-surface) !important; border-color: var(--crm2-line) !important; box-shadow: var(--crm2-shadow) !important; }
.app-shell > .sidebar .sidebar-create-menu a { color: var(--crm2-ink) !important; }
.app-shell > .sidebar .sidebar-create-menu a:hover { color: var(--crm2-teal-deep) !important; background: var(--crm2-teal-soft) !important; }

/* Calendar, projects, crew and costing surfaces */
.app-shell > .main { color: var(--crm2-ink) !important; background: var(--crm2-cloud) !important; }
.app-shell > .saved-documents-main { color: var(--crm2-ink) !important; background: var(--crm2-cloud) !important; min-width: 0 !important; padding: 0 28px 48px !important; }
.app-shell > .saved-documents-main .document-topbar { background: var(--crm2-cloud) !important; border-color: var(--crm2-line) !important; }
.app-shell > .main .topbar { background: var(--crm2-cloud) !important; border-color: var(--crm2-line) !important; }
.app-shell > .main .search,
.app-shell > .main .icon-button,
.app-shell > .main .round-button { color: var(--crm2-ink) !important; background: var(--crm2-surface) !important; border-color: var(--crm2-line) !important; }
.app-shell > .main .search input { color: var(--crm2-ink) !important; }
.app-shell > .main .search input::placeholder { color: var(--crm2-muted) !important; }
.app-shell > .main .search kbd { color: var(--crm2-muted) !important; background: var(--crm2-mist) !important; border-color: var(--crm2-line) !important; }
.app-shell > .main .icon-button:hover,
.app-shell > .main .round-button:hover { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; border-color: var(--crm2-ochre) !important; }
.app-shell > .main .top-actions .avatar-button { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; }
.app-shell > .main h1,
.app-shell > .main h2,
.app-shell > .main h3,
.app-shell > .main .calendar-heading h1,
.app-shell > .main .projects-heading h1,
.app-shell > .main .crew-heading h1,
.app-shell > .main .costing-heading h1,
.app-shell > .main .year-calendar-head h2,
.app-shell > .main .project-list-head h2,
.app-shell > .main .crew-list-head h2,
.app-shell > .main .financial-years-head h2 { color: var(--crm2-ink) !important; }
.app-shell > .main p,
.app-shell > .main small,
.app-shell > .main .calendar-summary article span,
.app-shell > .main .project-summary article span { color: var(--crm2-muted) !important; }
.app-shell > .main .primary-button,
.app-shell > .main .add-project-button,
.app-shell > .main .save-button { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; border-color: var(--crm2-ochre) !important; }
.app-shell > .main .primary-button:hover,
.app-shell > .main .add-project-button:hover,
.app-shell > .main .save-button:hover { background: var(--crm2-teal) !important; border-color: var(--crm2-teal) !important; }
.app-shell > .main input,
.app-shell > .main select,
.app-shell > .main textarea { color: var(--crm2-ink) !important; background: var(--crm2-mist) !important; border-color: var(--crm2-line) !important; }
.app-shell > .main input::placeholder,
.app-shell > .main textarea::placeholder { color: var(--crm2-muted) !important; }
.app-shell > .main .calendar-summary article,
.app-shell > .main .project-summary article,
.app-shell > .main .year-calendar,
.app-shell > .main .calendar-month,
.app-shell > .main .calendar-detail,
.app-shell > .main .project-list-panel,
.app-shell > .main .project-detail,
.app-shell > .main .crew-form-card,
.app-shell > .main .crew-list-card,
.app-shell > .main .financial-controls,
.app-shell > .main .financial-years-card,
.app-shell > .main .costing-summary article,
.app-shell > .main .financial-chart,
.app-shell > .main .financial-ledger { color: var(--crm2-ink) !important; background: var(--crm2-surface) !important; border-color: var(--crm2-line) !important; }
.app-shell > .main .calendar-detail,
.app-shell > .main .project-detail { background: var(--crm2-slate) !important; color: #f4fbf8 !important; border-color: var(--crm2-slate) !important; }
.app-shell > .main .calendar-detail h2,
.app-shell > .main .project-detail h2,
.app-shell > .main .calendar-detail strong,
.app-shell > .main .project-detail strong { color: #f4fbf8 !important; }
.app-shell > .main .calendar-detail a,
.app-shell > .main .project-detail a { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; }
.app-shell > .main .event-row,
.app-shell > .main .project-row,
.app-shell > .main .crew-row,
.app-shell > .main .financial-year { border-color: var(--crm2-line) !important; }
.app-shell > .main .date-tile { color: var(--crm2-teal-deep) !important; background: var(--crm2-teal-soft) !important; }
.app-shell > .main .event-info h3,
.app-shell > .main .project-row h3,
.app-shell > .main .crew-row strong { color: var(--crm2-ink) !important; }
.app-shell > .main .team-stack span { color: var(--crm2-teal-deep) !important; background: var(--crm2-teal-soft) !important; }
.app-shell > .main .status.confirmed { color: var(--crm2-teal-deep) !important; background: var(--crm2-teal-soft) !important; }
.app-shell > .main .status.pending,
.app-shell > .main .status.planning { color: var(--crm2-slate) !important; background: var(--crm2-ochre-soft) !important; }
.app-shell > .main .event-filters,
.app-shell > .main .year-select { background: var(--crm2-mist) !important; border-color: var(--crm2-line) !important; }
.app-shell > .main .event-filters button { color: var(--crm2-muted) !important; }
.app-shell > .main .event-filters button.active { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; }
.app-shell > .main .financial-bar { background: var(--crm2-teal) !important; }
.app-shell > .main .financial-year-plus { color: var(--crm2-slate) !important; border-color: var(--crm2-ochre) !important; background: var(--crm2-ochre) !important; }

/* Typography and numerals: override the older indigo/blue scale everywhere
   in the application chrome. Numbers use the same teal signal as the
   dashboard, while labels stay ink/muted for a clear reading order. */
.app-shell > .main .metric-card strong,
.app-shell > .main .calendar-summary strong,
.app-shell > .main .project-summary strong,
.app-shell > .main .financial-amount,
.app-shell > .main .financial-year strong,
.app-shell > .main .financial-year h3,
.app-shell > .main .financial-year-picker strong,
.app-shell > .main .summary-value,
.app-shell > .main .stat-value,
.app-shell > .main .count,
.app-shell > .main .total,
.app-shell > .main .number,
.app-shell > .main .usage-meter-top strong { color: var(--crm2-teal-deep) !important; font-variant-numeric: tabular-nums; }
.app-shell > .main .metric-card:first-child strong,
.app-shell > .main .activity-total strong,
.app-shell > .main .activity-total .number { color: #f4fbf8 !important; }
.app-shell > .main .page-heading h1,
.app-shell > .main .calendar-heading h1,
.app-shell > .main .projects-heading h1,
.app-shell > .main .crew-heading h1,
.app-shell > .main .costing-heading h1,
.app-shell > .main .panel-heading h2,
.app-shell > .main .year-calendar-head h2,
.app-shell > .main .project-list-head h2,
.app-shell > .main .crew-list-head h2,
.app-shell > .main .financial-years-head h2 { letter-spacing: -0.035em !important; }

/* Document lists and document studio chrome (paper previews remain white). */
.document-app,
.brand-studio { color: var(--crm2-ink) !important; background: var(--crm2-cloud) !important; }
.document-topbar,
.studio-topbar { color: var(--crm2-ink) !important; background: var(--crm2-cloud) !important; border-color: var(--crm2-line) !important; }
.document-topbar .document-switcher,
.studio-topbar .studio-tabs { background: var(--crm2-mist) !important; border-color: var(--crm2-line) !important; }
.document-topbar .document-switcher a,
.studio-topbar .studio-tabs button { color: var(--crm2-muted) !important; }
.document-topbar .document-switcher a.active,
.studio-topbar .studio-tabs button.active { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; }
.document-app h1,
.document-app h2,
.brand-studio h1,
.brand-studio h2 { color: var(--crm2-ink) !important; }
.document-app p,
.brand-studio p { color: var(--crm2-muted) !important; }
.document-app .usage-rail,
.document-app .saved-layout,
.document-app .saved-card,
.document-app .saved-empty,
.brand-studio .branding-layout,
.brand-studio .branding-card,
.brand-studio .branding-section { color: var(--crm2-ink) !important; background: var(--crm2-surface) !important; border-color: var(--crm2-line) !important; }
.document-app .saved-card:hover { border-color: var(--crm2-teal) !important; }
.document-app button.primary,
.document-app .primary-button,
.brand-studio button.primary,
.brand-studio .save-button { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; border-color: var(--crm2-ochre) !important; }
.document-app button.secondary,
.brand-studio button.secondary { color: var(--crm2-ink) !important; background: var(--crm2-mist) !important; border-color: var(--crm2-line) !important; }
.document-app input,
.document-app select,
.brand-studio input,
.brand-studio select { color: var(--crm2-ink) !important; background: var(--crm2-mist) !important; border-color: var(--crm2-line) !important; }
.studio-app .studio-sidebar { color: #eef7f4 !important; background: var(--crm2-slate) !important; border-color: var(--crm2-slate) !important; }
.studio-app .studio-sidebar nav a { color: rgba(244,251,248,.72) !important; }
.studio-app .studio-sidebar nav a.is-active { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; }
.document-app .saved-card h2,
.document-app .saved-card .saved-date,
.document-app .saved-card .saved-byline,
.document-app .saved-card p,
.document-app .saved-card .saved-action,
.document-app .saved-card .saved-status,
.document-app .usage-meter-top strong,
.document-app .usage-rail-heading strong,
.document-app .saved-heading h1,
.document-app .document-heading h1,
.brand-studio .system-summary strong,
.brand-studio .control-heading h2,
.brand-studio .rail-heading h2 { color: var(--crm2-ink) !important; }
.document-app .saved-card .saved-date,
.document-app .saved-card .saved-byline,
.document-app .saved-card p { color: var(--crm2-muted) !important; }
.document-app .saved-card .saved-status { color: var(--crm2-teal-deep) !important; background: var(--crm2-teal-soft) !important; }
.document-app .saved-card .saved-action.primary { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; border-color: var(--crm2-ochre) !important; }
.document-app .saved-filter,
.document-app .saved-filters { color: var(--crm2-muted) !important; background: var(--crm2-surface) !important; border-color: var(--crm2-line) !important; }
.document-app .saved-filter.active,
.document-app .saved-filter:hover { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; border-color: var(--crm2-ochre) !important; }

/* Settings and owner console use the same workspace chrome even though they
   have their own shell class names. */
.settings-shell .sidebar,
.owner-shell .owner-sidebar { color: #eef7f4 !important; background: var(--crm2-slate) !important; border-color: rgba(255,255,255,.14) !important; }
.settings-shell .sidebar .nav-item,
.owner-shell .owner-nav a { color: rgba(244,251,248,.78) !important; }
.settings-shell .sidebar .nav-item.active,
.owner-shell .owner-nav a.active { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; }
.settings-shell .sidebar .brand,
.owner-shell .owner-brand { color: #f4fbf8 !important; }
.settings-shell .main,
.owner-shell .owner-main { color: var(--crm2-ink) !important; background: var(--crm2-cloud) !important; }
.settings-shell .settings-panel,
.settings-shell .settings-nav,
.owner-shell .owner-card,
.owner-shell .owner-panel,
.owner-shell .owner-table-wrap { color: var(--crm2-ink) !important; background: var(--crm2-surface) !important; border-color: var(--crm2-line) !important; }
.settings-shell .settings-panel input,
.settings-shell .settings-panel select,
.settings-shell .settings-panel textarea,
.owner-shell input,
.owner-shell select,
.owner-shell textarea { color: var(--crm2-ink) !important; background: var(--crm2-mist) !important; border-color: var(--crm2-line) !important; }
.settings-shell .settings-nav button.active,
.owner-shell .owner-tab.active { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; }
.settings-shell .switch input:checked + i { background: var(--crm2-teal) !important; }
.owner-shell .owner-button,
.owner-shell .owner-actions .primary { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; border-color: var(--crm2-ochre) !important; }

/* Dark mode keeps the same hierarchy instead of reverting to white legacy cards. */
html[data-theme="dark"] .app-shell > .sidebar { background: #1a302d !important; }
html[data-theme="dark"] .app-shell > .main .calendar-summary article,
html[data-theme="dark"] .app-shell > .main .project-summary article,
html[data-theme="dark"] .app-shell > .main .year-calendar,
html[data-theme="dark"] .app-shell > .main .calendar-month,
html[data-theme="dark"] .app-shell > .main .project-list-panel,
html[data-theme="dark"] .app-shell > .main .crew-form-card,
html[data-theme="dark"] .app-shell > .main .crew-list-card,
html[data-theme="dark"] .app-shell > .main .financial-controls,
html[data-theme="dark"] .app-shell > .main .financial-years-card,
html[data-theme="dark"] .app-shell > .main .costing-summary article,
html[data-theme="dark"] .app-shell > .main .financial-chart,
html[data-theme="dark"] .app-shell > .main .financial-ledger,
html[data-theme="dark"] .document-app .saved-card,
html[data-theme="dark"] .document-app .saved-layout,
html[data-theme="dark"] .document-app .saved-empty,
html[data-theme="dark"] .brand-studio .branding-layout,
html[data-theme="dark"] .brand-studio .branding-card,
html[data-theme="dark"] .brand-studio .branding-section { background: #1b302d !important; color: #edf7f4 !important; border-color: #38534e !important; }
html[data-theme="dark"] .document-app,
html[data-theme="dark"] .brand-studio,
html[data-theme="dark"] .document-topbar,
html[data-theme="dark"] .studio-topbar { background: #101d1c !important; color: #edf7f4 !important; }
html[data-theme="dark"] .settings-shell .settings-panel,
html[data-theme="dark"] .settings-shell .settings-nav,
html[data-theme="dark"] .owner-shell .owner-card,
html[data-theme="dark"] .owner-shell .owner-panel,
html[data-theme="dark"] .owner-shell .owner-table-wrap { background: #1b302d !important; color: #edf7f4 !important; border-color: #38534e !important; }
html[data-theme="dark"] .settings-shell .main,
html[data-theme="dark"] .owner-shell .owner-main { background: #101d1c !important; color: #edf7f4 !important; }
html[data-theme="dark"] .app-shell > .main .calendar-detail,
html[data-theme="dark"] .app-shell > .main .project-detail { background: #1a302d !important; }
html[data-theme="dark"] .document-app .saved-card h2,
html[data-theme="dark"] .document-app .saved-heading h1,
html[data-theme="dark"] .document-app .document-heading h1,
html[data-theme="dark"] .brand-studio .system-summary strong,
html[data-theme="dark"] .brand-studio .control-heading h2,
html[data-theme="dark"] .brand-studio .rail-heading h2 { color: #edf7f4 !important; }

/* Dark workspace finish: saved documents establishes the reference treatment
   for every workspace route — slate canvas, blue-slate panels, and mist rows.
   Keep route-specific legacy gradients from turning calendar/project cards
   into a separate green theme. */
html[data-theme="dark"] .app-shell > .main .calendar-summary article,
html[data-theme="dark"] .app-shell > .main .year-calendar,
html[data-theme="dark"] .app-shell > .main .calendar-month,
html[data-theme="dark"] .app-shell > .main .project-summary article,
html[data-theme="dark"] .app-shell > .main .project-list-panel,
html[data-theme="dark"] .app-shell > .main .panel,
html[data-theme="dark"] .app-shell > .main .next-event-card {
  background: var(--crm2-surface) !important;
  background-image: none !important;
  color: var(--crm2-ink) !important;
  border-color: var(--crm2-line) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .app-shell > .main .calendar-month,
html[data-theme="dark"] .app-shell > .main .project-row,
html[data-theme="dark"] .app-shell > .main .event-row,
html[data-theme="dark"] .app-shell > .main .event-details {
  background: var(--crm2-mist) !important;
  background-image: none !important;
  color: var(--crm2-ink) !important;
  border-color: var(--crm2-line) !important;
}

html[data-theme="dark"] .app-shell > .main .project-row:hover,
html[data-theme="dark"] .app-shell > .main .project-row.active,
html[data-theme="dark"] .app-shell > .main .calendar-day.assigned {
  background: var(--crm2-teal-soft) !important;
}

html[data-theme="dark"] .app-shell > .main .project-summary > a {
  background: linear-gradient(135deg, #1c4a46, #237b75) !important;
  color: #edf7f4 !important;
}

html[data-theme="dark"] .app-shell > .main .project-detail,
html[data-theme="dark"] .app-shell > .main .calendar-detail {
  background: var(--crm2-surface) !important;
  background-image: none !important;
  color: var(--crm2-ink) !important;
  border-color: var(--crm2-line) !important;
}

html[data-theme="dark"] .app-shell > .main .project-detail h2,
html[data-theme="dark"] .app-shell > .main .calendar-detail h2,
html[data-theme="dark"] .app-shell > .main .project-detail strong,
html[data-theme="dark"] .app-shell > .main .calendar-detail strong {
  color: var(--crm2-ink) !important;
}

html[data-theme="dark"] .app-shell > .main .calendar-disclaimer {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 16px 40px 20px !important;
  border-top: 1px solid var(--crm2-line);
  color: var(--crm2-muted) !important;
}

.app-shell > .main .year-calendar {
  overflow: hidden !important;
}

/* Calendar uses the same full-viewport workspace geometry as Dashboard. */
.app-shell.calendar-shell {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: 288px minmax(0, 1fr) !important;
}

.app-shell.calendar-shell > .calendar-main {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 28px 48px !important;
  box-sizing: border-box !important;
}

.app-shell.calendar-shell > .calendar-main > .topbar,
.app-shell.calendar-shell > .calendar-main > .calendar-heading,
.app-shell.calendar-shell > .calendar-main > .calendar-summary,
.app-shell.calendar-shell > .calendar-main > .year-calendar {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.auth-art .auth-logo,
.auth-art .auth-logo span,
.auth-art .auth-logo span:first-child {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Keep the same contract on smaller screens while allowing the existing
   sidebar drawer behavior to remain usable. */
@media (max-width: 1100px) {
  .app-shell,
  .app-shell.crew-shell,
  .app-shell.calendar-shell,
  .app-shell.projects-shell,
  .app-shell.costing-shell,
  .app-shell.team-shell,
  .app-shell.editor-shell,
  .app-shell.assignment-shell,
  .app-shell.team-view-shell,
  .app-shell.saved-documents-shell {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
}
@media (max-width: 820px) {
  .app-shell {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .app-shell > .sidebar {
    position: fixed !important;
    z-index: 60 !important;
    width: 260px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    transform: translateX(-105%) !important;
    transition: transform .25s ease !important;
  }
  .app-shell > .sidebar.open { transform: none !important; }
  .app-shell > .main {
    width: 100% !important;
    padding: 0 18px 34px !important;
  }
  .app-shell > .main.calendar-main,
  .app-shell > .main.projects-main,
  .app-shell > .main.crew-main,
  .app-shell > .main.costing-main,
  .app-shell > .main.workflow-main,
  .app-shell > .main.editor-main,
  .app-shell > .main.assignment-main,
  .app-shell > .main.team-view-main,
  .app-shell > .main.settings-main {
    padding: 0 18px 34px !important;
  }
  .app-shell > .sidebar { background: var(--crm2-slate) !important; }
  .app-shell > .main { background: var(--crm2-cloud) !important; }
  .app-shell > .saved-documents-main { background: var(--crm2-cloud) !important; padding: 0 18px 34px !important; }
}
@media (max-width: 560px) {
  .app-shell > .main { padding-inline: 14px !important; }
  .app-shell > .saved-documents-main { padding: 0 14px 34px !important; }
  .app-shell > .main.calendar-main,
  .app-shell > .main.projects-main,
  .app-shell > .main.crew-main,
  .app-shell > .main.costing-main,
  .app-shell > .main.workflow-main,
  .app-shell > .main.editor-main,
  .app-shell > .main.assignment-main,
  .app-shell > .main.team-view-main,
  .app-shell > .main.settings-main { padding: 0 14px 34px !important; }
}

/* Final palette guard: older page bundles use indigo literals. Keep those
   components in the same teal/ochre language as the CRM2 dashboard. */
.create-menu a:nth-child(3) > span {
  color: var(--crm2-teal-deep) !important;
  background: var(--crm2-ochre-soft) !important;
}
.landing-page .final-cta,
.auth-primary,
.setup-step.active {
  background: var(--crm2-teal-deep) !important;
  color: #fff !important;
  border-color: var(--crm2-teal-deep) !important;
}
.landing-page .final-cta:hover,
.auth-primary:hover,
.setup-step.active:hover {
  background: var(--crm2-teal) !important;
}
.landing-v2 {
  --v2-indigo: var(--crm2-teal-deep) !important;
  --v2-indigo-dark: var(--crm2-teal) !important;
  --v2-lilac: var(--crm2-teal-soft) !important;
}
.landing-v2 .landing-button-dark,
.landing-v2 .scene-add,
.landing-v2 .flow-quote {
  background: var(--crm2-teal-deep) !important;
  border-color: var(--crm2-teal-deep) !important;
}
.landing-v2 .landing-links a:hover,
.landing-v2 .flow-card-top b,
.landing-v2 .scene-bottom span strong {
  color: var(--crm2-teal-deep) !important;
}

/* Shared chrome normalization: keep every workspace header on the same
   surface as its page in light and dark mode. */
.app-shell > .main,
.app-shell > .saved-documents-main,
.document-app,
.brand-studio {
  background: var(--crm2-cloud) !important;
  color: var(--crm2-ink) !important;
}

.app-shell > .main .topbar,
.app-shell > .saved-documents-main .document-topbar,
.document-app .document-topbar,
.brand-studio .studio-topbar,
.document-topbar,
.studio-topbar {
  background: var(--crm2-cloud) !important;
  color: var(--crm2-ink) !important;
  border-color: var(--crm2-line) !important;
  box-shadow: none !important;
}

.app-shell > .main .topbar .search-box,
.app-shell > .main .topbar .search,
.app-shell > .main .topbar input,
.document-topbar .document-switcher,
.studio-topbar .studio-tabs {
  background: var(--crm2-mist) !important;
  color: var(--crm2-ink) !important;
  border-color: var(--crm2-line) !important;
}

.app-shell > .main .topbar input::placeholder,
.document-topbar input::placeholder,
.studio-topbar input::placeholder {
  color: var(--crm2-muted) !important;
}

.app-shell > .main .topbar a,
.app-shell > .main .topbar button:not(.btn-primary):not(.primary),
.document-topbar a,
.document-topbar button:not(.btn-primary):not(.primary),
.studio-topbar a,
.studio-topbar button:not(.btn-primary):not(.primary) {
  color: var(--crm2-ink) !important;
  border-color: var(--crm2-line) !important;
}

/* Final canvas normalization. Legacy bundles give body/app-shell and the
   topbar different surfaces, which creates a visible rectangular "patch"
   when the theme changes. Every workspace page now inherits one canvas and
   reserves the slate treatment only for the sidebar. */
html,
body {
  background: var(--crm2-cloud) !important;
}

body {
  min-width: 0 !important;
}

.app-shell,
.app-shell > .main,
.app-shell > .saved-documents-main,
.document-app,
.brand-studio {
  background: var(--crm2-cloud) !important;
}

.app-shell {
  min-height: 100vh !important;
}

.app-shell > .main,
.app-shell > .saved-documents-main {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.topbar,
.document-topbar,
.studio-topbar {
  width: 100% !important;
  margin: 0 !important;
  background: var(--crm2-cloud) !important;
}

.topbar::before,
.topbar::after,
.document-topbar::before,
.document-topbar::after,
.studio-topbar::before,
.studio-topbar::after {
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .landing-page .final-cta,
html[data-theme="dark"] .auth-primary,
html[data-theme="dark"] .setup-step.active,
html[data-theme="dark"] .landing-v2 .landing-button-dark,
html[data-theme="dark"] .landing-v2 .scene-add,
html[data-theme="dark"] .landing-v2 .flow-quote {
  background: var(--crm2-teal) !important;
  border-color: var(--crm2-teal) !important;
}

/* Dark-mode surface invariant: keep the canvas and topbar on one neutral
   navy surface; reserve green for the sidebar and intentional accent cards. */
html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .app-shell > .main,
html[data-theme="dark"] .app-shell > .saved-documents-main,
html[data-theme="dark"] .document-app,
html[data-theme="dark"] .brand-studio,
html[data-theme="dark"] #dashboard {
  background: var(--crm2-cloud) !important;
  background-image: none !important;
  color: var(--crm2-ink) !important;
}

html[data-theme="dark"] .app-shell > .main .topbar,
html[data-theme="dark"] .app-shell > .saved-documents-main .document-topbar,
html[data-theme="dark"] .document-topbar,
html[data-theme="dark"] .studio-topbar,
html[data-theme="dark"] .topbar {
  background: var(--crm2-cloud) !important;
  background-image: none !important;
  color: var(--crm2-ink) !important;
  border-color: var(--crm2-line) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .app-shell > .sidebar {
  background: var(--crm2-slate) !important;
}

html[data-theme="dark"] .app-shell::before,
html[data-theme="dark"] .app-shell::after,
html[data-theme="dark"] .app-shell > .main::before,
html[data-theme="dark"] .app-shell > .main::after,
html[data-theme="dark"] #dashboard::before,
html[data-theme="dark"] #dashboard::after,
html[data-theme="dark"] .topbar::before,
html[data-theme="dark"] .topbar::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .topbar .search,
html[data-theme="dark"] .topbar .search-box,
html[data-theme="dark"] .topbar input {
  background: var(--crm2-mist) !important;
  color: var(--crm2-ink) !important;
  border-color: var(--crm2-line) !important;
}

/* Shared internal-page header rhythm. Dashboard is the source of truth:
   78px utility row followed by 34px/22px heading padding. */
.crm2-utility-bar {
  height: 78px !important;
  min-height: 78px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.crm2-page-heading {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 34px 0 22px !important;
  box-sizing: border-box !important;
}

@media (max-width: 600px) {
  .crm2-utility-bar {
    height: 70px !important;
    min-height: 70px !important;
  }

  .crm2-page-heading {
    padding: 25px 0 22px !important;
  }
}

/* Internal pages use the same compact masthead structure as Dashboard.
   Dashboard's desktop state removes the standalone utility row and places
   its actions in the page heading. Keep the other internal pages on that
   same structural rhythm instead of reserving a second 78px header row. */
@media (min-width: 901px) {
  .app-shell > .main:not(#dashboard) > .crm2-utility-bar,
  .app-shell > .saved-documents-main > .crm2-utility-bar {
    display: none !important;
  }
}

/* Canonical workspace sidebar — Costing is the visual reference. */
.app-shell > .sidebar,
.settings-shell > .sidebar,
.dashboard-shell > .sidebar {
  --crm2-workspace-sidebar-width: 288px;
  width: var(--crm2-workspace-sidebar-width) !important;
  min-width: var(--crm2-workspace-sidebar-width) !important;
  max-width: var(--crm2-workspace-sidebar-width) !important;
  flex: 0 0 var(--crm2-workspace-sidebar-width) !important;
  align-self: stretch !important;
  border-radius: 0 !important;
  background: var(--crm2-slate) !important;
}

.app-shell > .sidebar .sidebar-footer,
.settings-shell > .sidebar .sidebar-footer,
.dashboard-shell > .sidebar .sidebar-footer {
  margin-top: auto !important;
}
/* Shared sidebar geometry: keep every internal page aligned with the costing reference. */
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 28px 22px 24px;
  border-radius: 24px;
}

.crm2-sidebar * {
  box-sizing: border-box;
}
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}

.crm2-sidebar * {
  box-sizing: border-box;
}
/* Shared sidebar shell: one restrained geometry for every page. */
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
/* Shared sidebar shell: one restrained geometry for every page. */
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
/* Shared sidebar shell: consistent geometry across every internal page. */
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
/* Shared sidebar shell: consistent geometry across every page. */
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
/* Shared sidebar shell: consistent geometry across every page. */
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
/* Shared sidebar shell: consistent geometry across every page. */
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
/* Shared sidebar shell: consistent geometry across every page. */
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
/* Shared sidebar shell: consistent geometry across every page. */
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
/* Shared sidebar shell: consistent, restrained geometry across every page. */
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
/* Shared sidebar shell: consistent, restrained geometry across every page. */
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
.crm2-sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}
.crm2-sidebar,
.app-sidebar,
.sidebar {
  box-sizing: border-box !important;
  flex: 0 0 318px !important;
  width: 318px !important;
  min-width: 318px !important;
  max-width: 318px !important;
  padding: 24px 20px 22px !important;
  border-radius: 24px !important;
}
.crm2-sidebar,
.app-sidebar,
.sidebar {
  box-sizing: border-box;
  width: 318px;
  min-width: 318px;
  padding: 24px 20px 22px;
  border-radius: 24px;
}

/* Canonical workspace sidebar: every page uses the same column, spacing, and
   navigation rhythm. Page-specific component styles may still set colors, but
   they cannot change the sidebar's visual geometry. */
.app-shell,
.app-shell.crew-shell,
.app-shell.calendar-shell,
.app-shell.projects-shell,
.app-shell.costing-shell,
.app-shell.team-shell,
.app-shell.editor-shell,
.app-shell.assignment-shell,
.app-shell.team-view-shell,
.app-shell.saved-documents-shell {
  grid-template-columns: 288px minmax(0, 1fr) !important;
}

.app-shell > .sidebar,
.settings-shell > .sidebar,
.dashboard-shell > .sidebar {
  box-sizing: border-box !important;
  width: 288px !important;
  min-width: 288px !important;
  max-width: 288px !important;
  flex: 0 0 288px !important;
  padding: 24px 20px 22px !important;
  border-radius: 0 !important;
}

.app-shell > .sidebar .brand,
.settings-shell > .sidebar .brand,
.dashboard-shell > .sidebar .brand {
  margin: 0 10px 48px !important;
  font-size: 20px !important;
}

.app-shell > .sidebar .nav-group,
.settings-shell > .sidebar .nav-group,
.dashboard-shell > .sidebar .nav-group {
  margin-top: 38px !important;
}

.app-shell > .sidebar .nav-item,
.settings-shell > .sidebar .nav-item,
.dashboard-shell > .sidebar .nav-item {
  min-height: 43px !important;
  margin: 2px 0 !important;
  padding: 0 12px !important;
  font-size: 13px !important;
}

.app-shell > .sidebar .nav-label,
.settings-shell > .sidebar .nav-label,
.dashboard-shell > .sidebar .nav-label {
  margin: 0 12px 10px !important;
  font-size: 10px !important;
}

.app-shell > .sidebar .sidebar-footer,
.settings-shell > .sidebar .sidebar-footer,
.dashboard-shell > .sidebar .sidebar-footer {
  padding-top: 18px !important;
}

.app-shell > .sidebar .profile-card,
.settings-shell > .sidebar .profile-card,
.dashboard-shell > .sidebar .profile-card {
  margin-top: 14px !important;
  padding: 11px !important;
}