/*
 * Shared cabinet visual adapter.
 *
 * The role styles remain the source of layout and behaviour. This last-loaded
 * layer aligns their visual tokens with the ORD cabinet and the restrained
 * card, control and navigation language used by Horizon UI.
 */

:root {
  color-scheme: light;
  --canvas-bg: #f4f7fe;
  --canvas-surface: #ffffff;
  --canvas-surface-soft: #f8faff;
  --canvas-surface-muted: #eef2f8;
  --canvas-ink: #1b2559;
  --canvas-text: #2b3674;
  --canvas-muted: #657095;
  --canvas-subtle: #8f9bba;
  --canvas-border: #e7ebf5;
  --canvas-border-strong: #d9dfec;
  --canvas-accent: #6f4ef2;
  --canvas-accent-strong: #5635db;
  --canvas-accent-soft: #eeeaff;
  --canvas-nav: #111026;
  --canvas-nav-soft: #201c47;
  --canvas-success: #16805d;
  --canvas-success-soft: #eaf8f2;
  --canvas-warning: #a15c05;
  --canvas-warning-soft: #fff6e7;
  --canvas-danger: #b42318;
  --canvas-danger-soft: #fff0ee;
  --canvas-info: #4055b5;
  --canvas-info-soft: #eef1ff;
  --canvas-radius-surface: 20px;
  --canvas-radius-panel: 16px;
  --canvas-radius-control: 12px;
  --canvas-sidebar-width: 252px;
  --canvas-shadow-card: 0 14px 36px rgb(35 47 99 / 7%);
  --canvas-shadow-raised: 0 22px 58px rgb(35 47 99 / 13%);
  --canvas-motion: 180ms cubic-bezier(.2, .8, .2, 1);
  --canvas-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

html {
  min-width: 320px !important;
  background: var(--canvas-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[data-cabinet-role] {
  min-width: 0 !important;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--canvas-bg) !important;
  background-image: none !important;
  color: var(--canvas-text);
  font-family: var(--canvas-font) !important;
  font-variant-numeric: tabular-nums;
}

body[data-cabinet-role] *,
body[data-cabinet-role] *::before,
body[data-cabinet-role] *::after {
  box-sizing: border-box;
}

body[data-cabinet-role] :where(img, svg, canvas, video) {
  max-width: 100%;
}

body[data-cabinet-role] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid rgb(111 78 242 / 22%) !important;
  outline-offset: 2px;
}

body[data-cabinet-role] :where(button, a, summary) {
  -webkit-tap-highlight-color: transparent;
}

body[data-cabinet-role] :where(button, .btn, .primary-btn, .soft-btn, .role-btn, .df-btn, .finance-button) {
  transition-duration: var(--canvas-motion) !important;
}

body[data-cabinet-role] :where(button, .btn, .primary-btn, .soft-btn, .role-btn, .df-btn, .finance-button):active {
  transform: scale(.97);
}

body[data-cabinet-role] :where(.btn, .primary-btn, .soft-btn, .role-btn) {
  min-height: 44px !important;
}

/* Shared aliases used by the older manager, admin and supervisor layers. */
body[data-cabinet-role="admin"],
body[data-cabinet-role="manager"],
body[data-cabinet-role="supervisor"] {
  --bg: var(--canvas-bg);
  --surface: var(--canvas-surface);
  --surface-2: var(--canvas-surface-soft);
  --surface-3: var(--canvas-surface-muted);
  --fg: var(--canvas-ink);
  --muted: var(--canvas-muted);
  --subtle: var(--canvas-subtle);
  --border: var(--canvas-border);
  --border-strong: var(--canvas-border-strong);
  --accent: var(--canvas-accent);
  --accent-strong: var(--canvas-accent-strong);
  --accent-soft: var(--canvas-accent-soft);
  --teal: var(--canvas-accent);
  --teal-soft: var(--canvas-accent-soft);
  --nav: var(--canvas-nav);
  --nav-2: var(--canvas-nav-soft);
  --success: var(--canvas-success);
  --success-soft: var(--canvas-success-soft);
  --warning: var(--canvas-warning);
  --warning-soft: var(--canvas-warning-soft);
  --danger: var(--canvas-danger);
  --danger-soft: var(--canvas-danger-soft);
  --info: var(--canvas-info);
  --info-soft: var(--canvas-info-soft);
  --radius: var(--canvas-radius-panel);
  --radius-sm: var(--canvas-radius-control);
  --shadow-pop: var(--canvas-shadow-raised);
  --font-display: var(--canvas-font);
  --font-body: var(--canvas-font);
}

/* Admin and the standalone manager mediaplan share canvas-system.css. */
body[data-cabinet-role="admin"] .app-shell,
body[data-cabinet-role="manager"] .app-shell {
  grid-template-columns: var(--canvas-sidebar-width) minmax(0, 1fr) !important;
  min-width: 0;
  background: var(--canvas-bg) !important;
}

body[data-cabinet-role="admin"] .app-shell > .sidebar,
body[data-cabinet-role="manager"] .app-shell > .sidebar {
  background: var(--canvas-nav) !important;
  background-image: none !important;
  border-right-color: rgb(255 255 255 / 8%) !important;
  box-shadow: none !important;
}

body[data-cabinet-role="admin"] .app-shell .brand-mark,
body[data-cabinet-role="manager"] .app-shell .brand-mark {
  border-radius: var(--canvas-radius-control) !important;
  background: var(--canvas-accent) !important;
  box-shadow: none !important;
}

body[data-cabinet-role="admin"] .app-shell .nav-link,
body[data-cabinet-role="manager"] .app-shell .nav-link {
  min-height: 44px;
  border-radius: var(--canvas-radius-control) !important;
}

body[data-cabinet-role="admin"] .app-shell .nav-link.active,
body[data-cabinet-role="manager"] .app-shell .nav-link.active {
  background: var(--canvas-nav-soft) !important;
  border-color: rgb(255 255 255 / 9%) !important;
}

body[data-cabinet-role="admin"] .app-shell .main,
body[data-cabinet-role="manager"] .app-shell .main,
body[data-cabinet-role="admin"] .app-shell .page,
body[data-cabinet-role="manager"] .app-shell .page,
body[data-cabinet-role="admin"] .app-shell .page > *,
body[data-cabinet-role="manager"] .app-shell .page > * {
  min-width: 0;
}

body[data-cabinet-role="admin"] .app-shell .topbar,
body[data-cabinet-role="manager"] .app-shell .topbar {
  background: var(--canvas-surface-soft) !important;
  border-bottom-color: var(--canvas-border) !important;
  backdrop-filter: none !important;
}

body[data-cabinet-role="admin"] .app-shell :is(.panel, .metric-tile),
body[data-cabinet-role="manager"] .app-shell :is(.panel, .metric-tile) {
  background: var(--canvas-surface) !important;
  background-image: none !important;
  border-color: var(--canvas-border) !important;
  box-shadow: var(--canvas-shadow-card) !important;
}

body[data-cabinet-role="admin"] .app-shell .panel,
body[data-cabinet-role="manager"] .app-shell .panel {
  border-radius: var(--canvas-radius-surface) !important;
  overflow: clip;
}

body[data-cabinet-role="admin"] .app-shell :is(.metric-tile, .sync-card, .summary-item),
body[data-cabinet-role="manager"] .app-shell :is(.metric-tile, .sync-card, .summary-item) {
  border-radius: var(--canvas-radius-panel) !important;
}

body[data-cabinet-role="admin"] .app-shell :is(.btn, .input, .search, .select, select, input, textarea, .tabs),
body[data-cabinet-role="manager"] .app-shell :is(.btn, .input, .search, .select, select, input, textarea, .tabs) {
  border-radius: var(--canvas-radius-control) !important;
}

body[data-cabinet-role="admin"] .app-shell .btn.primary,
body[data-cabinet-role="manager"] .app-shell .btn.primary {
  border-color: var(--canvas-accent) !important;
  background: var(--canvas-accent) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body[data-cabinet-role="admin"] .app-shell :is(.table-wrap, .split-grid, .grid-2, .grid-3),
body[data-cabinet-role="manager"] .app-shell :is(.table-wrap, .split-grid, .grid-2, .grid-3),
body[data-cabinet-role="admin"] .app-shell :is(.split-grid, .grid-2, .grid-3) > *,
body[data-cabinet-role="manager"] .app-shell :is(.split-grid, .grid-2, .grid-3) > * {
  min-width: 0;
}

body[data-cabinet-role="admin"] .app-shell .table-wrap,
body[data-cabinet-role="manager"] .app-shell .table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
}

body[data-cabinet-role="manager"] .app-shell .split-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-cabinet-role="admin"] .app-shell .grid-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-cabinet-role="admin"] :is(.modal, .drawer),
body[data-cabinet-role="manager"] .app-shell :is(.modal, .drawer) {
  max-width: calc(100vw - 24px);
  border-radius: var(--canvas-radius-surface) !important;
  background: var(--canvas-surface) !important;
  box-shadow: var(--canvas-shadow-raised) !important;
}

body[data-cabinet-role="admin"] .sidebar-footer {
  display: none !important;
}

/* Manager campaign cabinet: preserve flows, replace the legacy visual shell. */
body[data-cabinet-role="manager"] {
  --bs-blue: var(--canvas-accent);
  --bs-indigo: var(--canvas-accent);
  --bs-purple: var(--canvas-accent);
  --bs-primary: var(--canvas-accent);
  --bs-body-bg: var(--canvas-bg);
  --bs-body-color: var(--canvas-text);
  --bs-card-bg: var(--canvas-surface);
  --bs-border-color: var(--canvas-border);
  --bs-radius: var(--canvas-radius-control);
  --bs-radius-lg: var(--canvas-radius-panel);
  --bs-font-sans-serif: var(--canvas-font);
  --bs-card-shadow: var(--canvas-shadow-card);
  --bs-card-shadow-hover: var(--canvas-shadow-card);
  --bs-primary-shadow: none;
  --soft-primary: var(--canvas-accent-soft);
  --canvas-teal: var(--canvas-accent);
  --canvas-aqua: var(--canvas-accent);
  --canvas-mint: var(--canvas-accent-soft);
  --canvas-white: var(--canvas-surface);
  --surface-glass: var(--canvas-surface);
  --surface-strong: var(--canvas-surface);
  --surface-muted: var(--canvas-surface-soft);
  --sidebar-width: var(--canvas-sidebar-width);
  --concept-bg: var(--canvas-bg);
  --concept-surface: var(--canvas-surface);
  --concept-surface-soft: var(--canvas-surface-soft);
  --concept-soft: var(--canvas-surface-soft);
  --concept-text: var(--canvas-ink);
  --concept-muted: var(--canvas-muted);
  --concept-border: var(--canvas-border);
  --concept-border-soft: var(--canvas-border);
  --concept-sidebar: var(--canvas-nav);
  --concept-accent: var(--canvas-accent);
  --concept-shadow: var(--canvas-shadow-card);
  --concept-radius: var(--canvas-radius-control);
}

body[data-cabinet-role="manager"] [data-app] {
  min-width: 0;
  background: var(--canvas-bg) !important;
  background-image: none !important;
}

body[data-cabinet-role="manager"] [data-app] > .sidebar {
  background: var(--canvas-nav) !important;
  background-image: none !important;
  border-right: 1px solid rgb(255 255 255 / 8%) !important;
  box-shadow: none !important;
}

body[data-cabinet-role="manager"] [data-app] > .sidebar :is(.brand strong, .user-toggle strong) {
  color: #ffffff !important;
}

body[data-cabinet-role="manager"] [data-app] > .sidebar :is(.brand span, .user-toggle small) {
  color: rgb(255 255 255 / 62%) !important;
}

body[data-cabinet-role="manager"] [data-app] > .sidebar .brand-logo {
  color: #9a86ff !important;
}

body[data-cabinet-role="manager"] [data-app] > .sidebar .side-link {
  border-radius: var(--canvas-radius-control) !important;
  color: rgb(255 255 255 / 70%) !important;
}

body[data-cabinet-role="manager"] [data-app] > .sidebar .side-link:is(.active, [aria-current="page"]) {
  background: var(--canvas-nav-soft) !important;
  color: #ffffff !important;
}

body[data-cabinet-role="manager"] [data-app] :is(.content, .main-content, .page) {
  min-width: 0;
  background: var(--canvas-bg) !important;
  background-image: none !important;
}

@media (min-width: 1025px) {
  body[data-cabinet-role="manager"] [data-app] > .main-content {
    margin-left: var(--canvas-sidebar-width) !important;
  }
}

body[data-cabinet-role="manager"] > #placementDrawer {
  grid-template-columns: minmax(0, 1fr);
  overflow-x: hidden;
}

body[data-cabinet-role="manager"] > #placementDrawer {
  z-index: 160;
}

body[data-cabinet-role="manager"] > #placementDrawer > *,
body[data-cabinet-role="manager"] > #placementDrawer .drawer-header > div {
  min-width: 0;
}

body[data-cabinet-role="manager"] > #placementDrawer :is(.crumb, h2, .subhead) {
  overflow-wrap: anywhere;
}

body[data-cabinet-role="manager"] [data-app] :is(.topbar, .manager-topbar) {
  background: var(--canvas-surface-soft) !important;
  background-image: none !important;
  border-color: var(--canvas-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-cabinet-role="manager"] [data-app] :is(
  .card,
  .home-campaign-card,
  .home-kpi-card,
  .home-notifications-card,
  .channels-card,
  .channel-history-panel,
  .client-calc-panel,
  .dashboard-priority,
  .stat-card
) {
  background: var(--canvas-surface) !important;
  background-image: none !important;
  border: 1px solid var(--canvas-border) !important;
  border-radius: var(--canvas-radius-surface) !important;
  box-shadow: var(--canvas-shadow-card) !important;
  backdrop-filter: none !important;
}

body[data-cabinet-role="manager"] [data-app] :is(
  .concept-channel-row,
  .channel-card,
  .client-choice,
  .notice,
  .compact-detail,
  .filter-bar
) {
  background: var(--canvas-surface-soft) !important;
  background-image: none !important;
  border-color: var(--canvas-border) !important;
  border-radius: var(--canvas-radius-panel) !important;
  box-shadow: none !important;
}

body[data-cabinet-role="manager"] [data-app] :is(.modal, .channel-modal, .channel-modal-shell, .placement-modal) {
  border-radius: var(--canvas-radius-surface) !important;
  background: var(--canvas-surface) !important;
  background-image: none !important;
  box-shadow: var(--canvas-shadow-raised) !important;
  backdrop-filter: none !important;
}

body[data-cabinet-role="manager"] [data-app] :is(.primary-btn, .btn.primary) {
  border-color: var(--canvas-accent) !important;
  background: var(--canvas-accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body[data-cabinet-role="manager"] [data-app] :is(.soft-btn, .btn, input, select, textarea, summary) {
  border-radius: var(--canvas-radius-control) !important;
}

body[data-cabinet-role="manager"] [data-app] :is(.progress span, .progress-track span, .mini-progress i, .bar-track i, .kpi-bar span) {
  background: var(--canvas-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* The lead review keeps the working queue and review actions, in an ORD surface model. */
body[data-cabinet-role="manager"] [data-lead-app] {
  --role-panel: var(--canvas-surface);
  --role-panel-strong: var(--canvas-surface);
  --role-panel-soft: var(--canvas-surface-soft);
  --role-ring: var(--canvas-border);
  --role-ring-strong: var(--canvas-border-strong);
  --role-text: var(--canvas-text);
  --role-muted: var(--canvas-muted);
  --role-blue: var(--canvas-accent);
  --role-cyan: var(--canvas-accent);
  --role-green: var(--canvas-success);
  --role-orange: var(--canvas-warning);
  --role-red: var(--canvas-danger);
  --role-violet: var(--canvas-accent);
  --role-shadow: var(--canvas-shadow-card);
  background: var(--canvas-bg) !important;
  background-image: none !important;
  color: var(--canvas-text) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] > .sidebar {
  background: var(--canvas-nav) !important;
  background-image: none !important;
  border-right: 1px solid rgb(255 255 255 / 8%) !important;
  box-shadow: none !important;
}

body[data-cabinet-role="manager"] [data-lead-app] :is(.content, .main-content) {
  min-width: 0;
  background: var(--canvas-bg) !important;
  background-image: none !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .role-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100%;
  min-width: 0;
}

body[data-cabinet-role="manager"] [data-lead-app] .role-shell > *,
body[data-cabinet-role="manager"] [data-lead-app] .role-grid > *,
body[data-cabinet-role="manager"] [data-lead-app] .role-card > * {
  min-width: 0;
}

@media (min-width: 1025px) {
  body[data-cabinet-role="manager"] [data-lead-app] > :is(.content, .main-content) {
    width: calc(100% - 260px) !important;
    max-width: calc(100% - 260px) !important;
  }
}

body[data-cabinet-role="manager"] [data-lead-app] .role-topbar {
  background: var(--canvas-surface-soft) !important;
  background-image: none !important;
  border-color: var(--canvas-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .role-badge {
  color: var(--canvas-accent-strong) !important;
  background: var(--canvas-accent-soft) !important;
  box-shadow: inset 0 0 0 1px rgb(111 78 242 / 12%) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .global-search {
  background: var(--canvas-surface) !important;
  border-color: var(--canvas-border) !important;
  border-radius: var(--canvas-radius-control) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .global-search input {
  color: var(--canvas-text) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] :is(.role-hero, .role-metric, .role-card) {
  background: var(--canvas-surface) !important;
  background-image: none !important;
  border: 1px solid var(--canvas-border) !important;
  border-radius: var(--canvas-radius-surface) !important;
  box-shadow: var(--canvas-shadow-card) !important;
  backdrop-filter: none !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .role-hero {
  min-height: 0;
  padding: 20px;
}

body[data-cabinet-role="manager"] [data-lead-app] .role-hero h1 {
  max-width: 24ch;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.05;
}

body[data-cabinet-role="manager"] [data-lead-app] .role-hero::after {
  display: none !important;
}

body[data-cabinet-role="manager"] [data-lead-app] :is(
  .role-hero h1,
  .role-card-head h2,
  .role-metric strong,
  .review-item strong,
  .risk-row strong,
  .table-main,
  .detail-metric b,
  .mini-meta b
) {
  color: var(--canvas-ink) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] :is(
  .role-hero p,
  .role-eyebrow,
  .role-card-label,
  .role-card-head p,
  .role-metric span,
  .role-metric small,
  .review-item small,
  .table-muted,
  .detail-metric span,
  .mini-meta span
) {
  color: var(--canvas-muted) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] :is(.role-metric, .role-card)::before {
  box-shadow: inset 0 0 0 1px var(--canvas-border) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] :is(.role-metric .dash-icon, .role-stat-icon) {
  border-radius: var(--canvas-radius-control) !important;
  background: var(--canvas-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .role-metric.orange .dash-icon {
  background: var(--canvas-warning) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .role-metric.green .dash-icon {
  background: var(--canvas-success) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .role-metric.red .dash-icon {
  background: var(--canvas-danger) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] :is(
  .role-control-strip,
  .row-review-toolbar,
  .review-item,
  .problem-item,
  .event-item,
  .mini-meta div,
  .detail-metric,
  .risk-row
) {
  background: var(--canvas-surface-soft) !important;
  background-image: none !important;
  border: 1px solid var(--canvas-border) !important;
  border-radius: var(--canvas-radius-panel) !important;
  box-shadow: none !important;
}

body[data-cabinet-role="manager"] [data-lead-app] :is(.review-item, .problem-item).active {
  background: var(--canvas-accent-soft) !important;
  border-color: rgb(111 78 242 / 30%) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] :is(.role-input, .role-select, .role-textarea) {
  border: 1px solid var(--canvas-border-strong) !important;
  border-radius: var(--canvas-radius-control) !important;
  background-color: var(--canvas-surface) !important;
  color: var(--canvas-text) !important;
  box-shadow: none !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .role-select {
  background-image: none !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .role-btn,
body[data-cabinet-role="manager"] [data-lead-app] .primary-btn {
  border: 1px solid var(--canvas-accent) !important;
  border-radius: var(--canvas-radius-control) !important;
  background: var(--canvas-accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .role-btn.secondary,
body[data-cabinet-role="manager"] [data-lead-app] .soft-btn {
  border-color: var(--canvas-border-strong) !important;
  background: var(--canvas-surface) !important;
  color: var(--canvas-text) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .role-btn.danger {
  border-color: var(--canvas-danger) !important;
  background: var(--canvas-surface) !important;
  color: var(--canvas-danger) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .status-pill {
  color: var(--canvas-accent-strong) !important;
  background: var(--canvas-accent-soft) !important;
  box-shadow: inset 0 0 0 1px rgb(111 78 242 / 16%) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .status-pill.warn {
  color: var(--canvas-warning) !important;
  background: var(--canvas-warning-soft) !important;
  box-shadow: inset 0 0 0 1px rgb(161 92 5 / 16%) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .status-pill.error {
  color: var(--canvas-danger) !important;
  background: var(--canvas-danger-soft) !important;
  box-shadow: inset 0 0 0 1px rgb(180 35 24 / 16%) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .status-pill.success {
  color: var(--canvas-success) !important;
  background: var(--canvas-success-soft) !important;
  box-shadow: inset 0 0 0 1px rgb(22 128 93 / 16%) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .status-pill.neutral {
  color: var(--canvas-muted) !important;
  background: var(--canvas-surface-muted) !important;
  box-shadow: inset 0 0 0 1px var(--canvas-border) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .role-table-wrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--canvas-border);
  border-radius: var(--canvas-radius-panel);
  background: var(--canvas-surface);
}

body[data-cabinet-role="manager"] [data-lead-app] .role-table :is(th, td) {
  border-color: var(--canvas-border) !important;
  color: var(--canvas-text) !important;
  background: var(--canvas-surface) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .role-table th {
  color: var(--canvas-muted) !important;
  background: var(--canvas-surface-soft) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .lead-work-grid > .role-card:first-child .role-control-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .lead-work-grid > .role-card:first-child .role-control-strip > .role-input:first-child {
  grid-column: 1 / -1;
}

body[data-cabinet-role="manager"] [data-lead-app] :is(.flow-panel, .flow-inline),
body[data-cabinet-role="manager"] [data-lead-app] .role-topbar .topbar-actions,
body[data-cabinet-role="manager"] [data-lead-app] .role-hero-actions {
  display: none !important;
}

body[data-cabinet-role="manager"] [data-lead-app] .version-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

body[data-cabinet-role="manager"] [data-lead-app] .version-card {
  border: 1px solid var(--canvas-border) !important;
  border-radius: var(--canvas-radius-panel) !important;
  background: var(--canvas-surface-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Supervisor */
body[data-cabinet-role="supervisor"] {
  --radius: var(--canvas-radius-panel);
  --radius-sm: var(--canvas-radius-control);
}

body[data-cabinet-role="supervisor"] .ms-app {
  min-width: 0;
  background: var(--canvas-bg) !important;
  background-image: none !important;
}

body[data-cabinet-role="supervisor"] .ms-sidebar {
  background: var(--canvas-nav) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-cabinet-role="supervisor"].ms-light-shell .ms-sidebar {
  background: var(--canvas-nav) !important;
  background-image: none !important;
}

html.supervisor-nav-ready body[data-cabinet-role="supervisor"] .ms-sidebar,
html.supervisor-nav-ready body[data-cabinet-role="supervisor"]:has(.purchase-page) .ms-sidebar,
html.supervisor-nav-ready body[data-cabinet-role="supervisor"]:has(.offer-page) .ms-sidebar {
  background: var(--canvas-nav) !important;
  background-image: none !important;
}

body[data-cabinet-role="supervisor"] .ms-main {
  min-width: 0;
  background: var(--canvas-bg) !important;
  background-image: none !important;
}

body[data-cabinet-role="supervisor"] .topbar {
  background: var(--canvas-surface-soft) !important;
  background-image: none !important;
  border-color: var(--canvas-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-cabinet-role="supervisor"] .ms-main :is(
  .page-header,
  .filter-panel,
  .panel,
  .stat-card,
  .manager-card,
  .mediaplan-list-card,
  .purchase-card,
  .table-wrap
) {
  background: var(--canvas-surface) !important;
  background-image: none !important;
  border-color: var(--canvas-border) !important;
  border-radius: var(--canvas-radius-panel) !important;
  box-shadow: var(--canvas-shadow-card) !important;
  backdrop-filter: none !important;
}

body[data-cabinet-role="supervisor"] .ms-main :is(.page-header, .panel, .stat-card) {
  border-radius: var(--canvas-radius-surface) !important;
}

body[data-cabinet-role="supervisor"] .ms-main :is(h1, h2, h3, strong, .stat-card strong) {
  color: var(--canvas-ink);
}

body[data-cabinet-role="supervisor"] .ms-main :is(.muted, .hint, .page-header p, .stat-card span, .stat-card em) {
  color: var(--canvas-muted) !important;
}

body[data-cabinet-role="supervisor"] :is(.btn.primary, .primary-btn) {
  border-color: var(--canvas-accent) !important;
  background: var(--canvas-accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body[data-cabinet-role="supervisor"] :is(.btn, input, select, textarea, .nav-link) {
  border-radius: var(--canvas-radius-control) !important;
}

body[data-cabinet-role="supervisor"] :is(.drawer, .mediaplan-modal-shell) {
  border-radius: var(--canvas-radius-surface) !important;
  background: var(--canvas-surface) !important;
  background-image: none !important;
  box-shadow: var(--canvas-shadow-raised) !important;
}

@media (max-width: 600px) {
  body[data-cabinet-role="supervisor"] :is([data-open-channel-base], [data-save-supervisor-work-edit]) {
    min-height: 44px !important;
    padding-block: 8px !important;
  }
}

/* Director */
body[data-cabinet-role="director"] {
  --dir-bg: var(--canvas-bg);
  --dir-surface: var(--canvas-surface);
  --dir-surface-soft: var(--canvas-surface-soft);
  --dir-surface-muted: var(--canvas-surface-muted);
  --dir-fg: var(--canvas-ink);
  --dir-muted: var(--canvas-muted);
  --dir-subtle: var(--canvas-subtle);
  --dir-border: var(--canvas-border);
  --dir-border-strong: var(--canvas-border-strong);
  --dir-accent: var(--canvas-accent);
  --dir-accent-hover: var(--canvas-accent-strong);
  --dir-accent-soft: var(--canvas-accent-soft);
  --dir-nav: var(--canvas-nav);
  --dir-nav-soft: var(--canvas-nav-soft);
  --dir-radius: var(--canvas-radius-control);
  --dir-radius-sm: var(--canvas-radius-control);
  --dir-shadow: var(--canvas-shadow-card);
  --dir-fast: var(--canvas-motion);
  --dir-font: var(--canvas-font);
}

body[data-cabinet-role="director"] :is(.dir-app, .dir-main, .dir-workspace) {
  min-width: 0;
  background: var(--canvas-bg) !important;
  background-image: none !important;
}

body[data-cabinet-role="director"] .dir-sidebar {
  background: var(--canvas-nav) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-cabinet-role="director"] .dir-topbar {
  background: var(--canvas-surface-soft) !important;
  border-color: var(--canvas-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-cabinet-role="director"] :is(
  .dir-kpi-card,
  .dir-department-card,
  .dir-departments-card,
  .dir-employee-card,
  .dir-campaign-card,
  .dir-risk-card,
  .dir-dashboard-section,
  .dir-profile-editor
) {
  border-color: var(--canvas-border) !important;
  border-radius: var(--canvas-radius-surface) !important;
  background: var(--canvas-surface) !important;
  background-image: none !important;
  box-shadow: var(--canvas-shadow-card) !important;
}

body[data-cabinet-role="director"] :is(.dir-campaign-dialog-panel, .dir-analytics-dialog, .dir-profile-editor) {
  border-radius: var(--canvas-radius-surface) !important;
  background: var(--canvas-surface) !important;
  box-shadow: var(--canvas-shadow-raised) !important;
}

body[data-cabinet-role="director"] :is(button, input, select, textarea, .dir-filter, .dir-nav-link) {
  border-radius: var(--canvas-radius-control) !important;
}

/* Chief accountant */
body[data-cabinet-role="chief-accountant"] {
  --ca-bg: var(--canvas-bg);
  --ca-surface: var(--canvas-surface);
  --ca-surface-soft: var(--canvas-surface-soft);
  --ca-fg: var(--canvas-ink);
  --ca-muted: var(--canvas-muted);
  --ca-subtle: var(--canvas-subtle);
  --ca-border: var(--canvas-border);
  --ca-border-strong: var(--canvas-border-strong);
  --ca-accent: var(--canvas-accent);
  --ca-accent-soft: var(--canvas-accent-soft);
  --ca-nav: var(--canvas-nav);
  --ca-radius: var(--canvas-radius-control);
}

body[data-cabinet-role="chief-accountant"] :is(.ca-v2-app, .ca-v2-main, .ca-v2-page-root) {
  min-width: 0;
  background: var(--canvas-bg) !important;
  background-image: none !important;
}

body[data-cabinet-role="chief-accountant"] .ca-v2-sidebar {
  background: var(--canvas-nav) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-cabinet-role="chief-accountant"] .ca-v2-topbar {
  background: var(--canvas-surface-soft) !important;
  border-color: var(--canvas-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-cabinet-role="chief-accountant"] :is(
  .ca-v2-home-stat,
  .ca-v2-home-updates,
  .ca-v2-document-card,
  .ca-v2-reconciliation-card,
  .ca-v2-edo-action-card,
  .ca-v2-prepared-receipt-card,
  .ca-v2-manual-match-card,
  .ca-v2-correction-status-card,
  .ca-v2-profile-card,
  .ca-v2-profile-editor
) {
  border-color: var(--canvas-border) !important;
  border-radius: var(--canvas-radius-surface) !important;
  background: var(--canvas-surface) !important;
  background-image: none !important;
  box-shadow: var(--canvas-shadow-card) !important;
}

body[data-cabinet-role="chief-accountant"] :is(.ca-v2-document-dialog, .ca-v2-reconciliation-dialog, .ca-v2-dialog-package) {
  border-radius: var(--canvas-radius-surface) !important;
  background: var(--canvas-surface) !important;
  box-shadow: var(--canvas-shadow-raised) !important;
}

body[data-cabinet-role="chief-accountant"] :is(button, input, select, textarea, .ca-v2-nav-link) {
  border-radius: var(--canvas-radius-control) !important;
}

/* Document flow */
body[data-cabinet-role="docflow"] {
  --df-bg: var(--canvas-bg);
  --df-surface: var(--canvas-surface);
  --df-surface-2: var(--canvas-surface-soft);
  --df-surface-3: var(--canvas-surface-muted);
  --df-fg: var(--canvas-ink);
  --df-muted: var(--canvas-muted);
  --df-subtle: var(--canvas-subtle);
  --df-border: var(--canvas-border);
  --df-border-strong: var(--canvas-border-strong);
  --df-accent: var(--canvas-accent);
  --df-accent-hover: var(--canvas-accent-strong);
  --df-accent-soft: var(--canvas-accent-soft);
  --df-nav: var(--canvas-nav);
  --df-nav-2: var(--canvas-nav-soft);
  --df-radius: var(--canvas-radius-surface);
  --df-radius-panel: var(--canvas-radius-panel);
  --df-radius-sm: var(--canvas-radius-control);
  --df-shadow: var(--canvas-shadow-card);
  --df-shadow-card: var(--canvas-shadow-card);
  --df-shadow-raised: var(--canvas-shadow-raised);
}

body[data-cabinet-role="docflow"] :is(.df-app, .df-main, .df-page) {
  min-width: 0;
  background-color: var(--canvas-bg) !important;
  background-image: none !important;
}

body[data-cabinet-role="docflow"] .df-sidebar {
  background: var(--canvas-nav) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-cabinet-role="docflow"] .df-topbar {
  background: var(--canvas-surface-soft) !important;
  border-color: var(--canvas-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-cabinet-role="docflow"] :is(.df-brand, .df-brand-mark, .df-user-card, .df-nav-link, .df-nav-mark, .df-mobile-nav-toggle, .df-btn, .df-icon-btn) {
  border-radius: var(--canvas-radius-control) !important;
}

body[data-cabinet-role="docflow"] .df-nav-help {
  display: none !important;
}

body[data-cabinet-role="docflow"] .df-request-campaign-switcher {
  padding-right: 28px;
  scroll-padding-inline-end: 28px;
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: inset -18px 0 14px -16px rgb(111 78 242 / 42%);
}

/* One visible product mark in every desktop sidebar and responsive drawer. */
body[data-cabinet-role="admin"] .app-shell > .sidebar .brand-mark,
body[data-cabinet-role="manager"] :is(.app-shell, [data-app], [data-lead-app]) > .sidebar :is(.brand-mark, .brand-logo),
body[data-cabinet-role="supervisor"] .ms-sidebar .brand-mark,
body[data-cabinet-role="director"] .dir-sidebar .dir-brand-mark,
body[data-cabinet-role="chief-accountant"] .ca-v2-sidebar .ca-v2-brand-mark,
body[data-cabinet-role="docflow"] .df-sidebar .df-brand-mark,
body[data-cabinet-role="ord"] .ord-sidebar .ord-brand-mark,
body[data-cabinet-role="finance"] .finance-sidebar .finance-brand-mark {
  position: relative !important;
  display: grid !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  flex: 0 0 36px !important;
  place-items: center !important;
  border-radius: 11px !important;
  background: var(--canvas-accent) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-size: 0 !important;
}

body[data-cabinet-role="manager"] :is([data-app], [data-lead-app]) > .sidebar .brand-logo > svg,
body[data-cabinet-role="director"] .dir-sidebar .dir-brand-mark > svg {
  display: none !important;
}

body[data-cabinet-role="admin"] .app-shell > .sidebar .brand-mark::after,
body[data-cabinet-role="manager"] :is(.app-shell, [data-app], [data-lead-app]) > .sidebar :is(.brand-mark, .brand-logo)::after,
body[data-cabinet-role="supervisor"] .ms-sidebar .brand-mark::after,
body[data-cabinet-role="director"] .dir-sidebar .dir-brand-mark::after,
body[data-cabinet-role="chief-accountant"] .ca-v2-sidebar .ca-v2-brand-mark::after,
body[data-cabinet-role="docflow"] .df-sidebar .df-brand-mark::after,
body[data-cabinet-role="ord"] .ord-sidebar .ord-brand-mark::after,
body[data-cabinet-role="finance"] .finance-sidebar .finance-brand-mark::after {
  content: "CD";
  color: #ffffff;
  font: 750 10px/1 var(--canvas-font);
  letter-spacing: .04em;
}

/* Finance and ORD are already closest to the target; align tokens, not structure. */
body[data-cabinet-role="finance"] {
  --finance-bg: var(--canvas-bg);
  --finance-surface: var(--canvas-surface);
  --finance-surface-soft: var(--canvas-surface-soft);
  --finance-text: var(--canvas-ink);
  --finance-text-soft: var(--canvas-text);
  --finance-muted: var(--canvas-muted);
  --finance-border: var(--canvas-border);
  --finance-border-strong: var(--canvas-border-strong);
  --finance-nav: var(--canvas-nav);
  --finance-nav-soft: var(--canvas-nav-soft);
  --finance-accent: var(--canvas-accent);
  --finance-accent-strong: var(--canvas-accent-strong);
  --finance-accent-soft: var(--canvas-accent-soft);
  --finance-radius-control: var(--canvas-radius-control);
  --finance-radius-row: var(--canvas-radius-panel);
  --finance-radius-surface: var(--canvas-radius-surface);
  --finance-radius-modal: var(--canvas-radius-surface);
  --finance-shadow: var(--canvas-shadow-card);
  --finance-shadow-pop: var(--canvas-shadow-raised);
  --finance-sidebar-width: var(--canvas-sidebar-width);
}

body[data-cabinet-role="finance"] .finance-sidebar {
  background: var(--canvas-nav) !important;
  background-image: none !important;
}

body[data-cabinet-role="finance"] :is(.finance-shell, .finance-workspace) {
  min-width: 0;
  background: var(--canvas-bg) !important;
  background-image: none !important;
}

body[data-cabinet-role="ord"] {
  --ord-bg: var(--canvas-bg);
  --ord-surface: var(--canvas-surface);
  --ord-surface-soft: var(--canvas-surface-soft);
  --ord-ink: var(--canvas-ink);
  --ord-text: var(--canvas-text);
  --ord-muted: var(--canvas-muted);
  --ord-border: var(--canvas-border);
  --ord-border-strong: var(--canvas-border-strong);
  --ord-accent: var(--canvas-accent);
  --ord-accent-dark: var(--canvas-accent-strong);
  --ord-accent-soft: var(--canvas-accent-soft);
  --ord-nav: var(--canvas-nav);
  --ord-nav-soft: var(--canvas-nav-soft);
}

.canvas-mobile-header,
.canvas-nav-scrim {
  display: none;
}

.canvas-nav-scrim[hidden] {
  display: none !important;
}

/* Desktop sidebar widths. */
@media (min-width: 1181px) {
  body[data-cabinet-role="manager"] [data-app] {
    grid-template-columns: var(--canvas-sidebar-width) minmax(0, 1fr) !important;
  }

  body[data-cabinet-role="manager"] [data-app] > .sidebar {
    width: var(--canvas-sidebar-width) !important;
    min-width: var(--canvas-sidebar-width) !important;
  }
}

@media (min-width: 1101px) {
  body[data-cabinet-role="supervisor"] .ms-app {
    grid-template-columns: var(--canvas-sidebar-width) minmax(0, 1fr) !important;
  }
}

@media (min-width: 1280px) {
  body[data-cabinet-role="director"] .dir-app {
    grid-template-columns: var(--canvas-sidebar-width) minmax(0, 1fr) !important;
  }

  body[data-cabinet-role="director"] .dir-sidebar {
    width: var(--canvas-sidebar-width) !important;
  }
}

@media (min-width: 901px) {
  body[data-cabinet-role="chief-accountant"] .ca-v2-app {
    grid-template-columns: var(--canvas-sidebar-width) minmax(0, 1fr) !important;
  }

  body[data-cabinet-role="chief-accountant"] .ca-v2-sidebar,
  body[data-cabinet-role="docflow"] .df-sidebar {
    width: var(--canvas-sidebar-width) !important;
  }

  body[data-cabinet-role="docflow"] .df-app {
    grid-template-columns: var(--canvas-sidebar-width) minmax(0, 1fr) !important;
  }
}

/* Keep useful frozen columns on tablets without covering phone-sized tables. */
@media (min-width: 641px) and (max-width: 1024px) {
  body[data-cabinet-role="manager"] [data-manager-mediaplan-state] .data-table :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 7;
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    background: var(--canvas-surface);
  }

  body[data-cabinet-role="manager"] [data-manager-mediaplan-state] .data-table :is(th, td):nth-child(2) {
    position: sticky;
    left: 96px;
    z-index: 7;
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    background: var(--canvas-surface);
    box-shadow: 1px 0 0 var(--canvas-border);
  }

  body[data-cabinet-role="manager"] [data-manager-mediaplan-state] .data-table th:first-child,
  body[data-cabinet-role="manager"] [data-manager-mediaplan-state] .data-table th:nth-child(2) {
    z-index: 9;
  }
}

/* Responsive repair for the two canvas-system pages that previously forced 1180px. */
@media (max-width: 1024px) {
  body[data-cabinet-role="admin"] .app-shell,
  body[data-cabinet-role="manager"] .app-shell {
    display: block !important;
    width: 100%;
    min-width: 0;
  }

  body[data-cabinet-role="admin"] .app-shell > .sidebar,
  body[data-cabinet-role="manager"] .app-shell > .sidebar {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center;
    gap: 8px;
    width: 100% !important;
    max-width: 100vw;
    height: auto !important;
    min-height: 68px;
    padding: 10px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgb(255 255 255 / 8%);
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  body[data-cabinet-role="admin"] .app-shell > .sidebar .brand,
  body[data-cabinet-role="manager"] .app-shell > .sidebar .brand {
    flex: 0 0 auto;
    padding: 0 10px 0 0 !important;
  }

  body[data-cabinet-role="admin"] .app-shell > .sidebar :is(.nav-section, .sidebar-footer),
  body[data-cabinet-role="manager"] .app-shell > .sidebar :is(.nav-section, .sidebar-footer) {
    display: none !important;
  }

  body[data-cabinet-role="admin"] .app-shell > .sidebar .nav-link,
  body[data-cabinet-role="manager"] .app-shell > .sidebar .nav-link {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
  }

  body[data-cabinet-role="admin"] .app-shell .topbar,
  body[data-cabinet-role="manager"] .app-shell .topbar {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    min-height: 0;
    padding: 12px 16px;
  }

  body[data-cabinet-role="admin"] .app-shell .topbar :is(.search, .global-search),
  body[data-cabinet-role="manager"] .app-shell .topbar :is(.search, .global-search) {
    flex: 1 0 100%;
    width: 100%;
    max-width: none;
  }

  body[data-cabinet-role="admin"] .app-shell .page,
  body[data-cabinet-role="manager"] .app-shell .page {
    width: 100%;
    padding: 18px 16px;
  }

  body[data-cabinet-role="admin"] .app-shell :is(.page-header, .panel-header),
  body[data-cabinet-role="manager"] .app-shell :is(.page-header, .panel-header) {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-cabinet-role="admin"] .app-shell :is(.grid-2, .grid-3, .split-grid, .campaign-summary, .form-grid),
  body[data-cabinet-role="manager"] .app-shell :is(.grid-2, .grid-3, .split-grid, .campaign-summary, .form-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-cabinet-role="admin"] .app-shell .actions,
  body[data-cabinet-role="manager"] .app-shell .actions {
    justify-content: flex-start;
  }

  body[data-cabinet-role="manager"] [data-lead-app] .lead-work-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-cabinet-role="manager"] [data-lead-app] .version-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* One mobile header and drawer for cabinets that previously used clipped rails. */
@media (max-width: 1024px) {
  body.canvas-unified-nav .canvas-mobile-header {
    position: sticky;
    z-index: 140;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--canvas-border);
    background: var(--canvas-surface);
    box-shadow: 0 8px 24px rgb(35 47 99 / 7%);
  }

  body.canvas-unified-nav .canvas-mobile-identity {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
    color: var(--canvas-ink);
    text-decoration: none;
  }

  body.canvas-unified-nav .canvas-mobile-identity > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: var(--canvas-radius-control);
    background: var(--canvas-accent);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
  }

  body.canvas-unified-nav .canvas-mobile-identity strong {
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.canvas-unified-nav .canvas-mobile-menu {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px !important;
    flex: 0 0 44px;
    padding: 0;
    border: 1px solid var(--canvas-border);
    border-radius: var(--canvas-radius-control);
    background: var(--canvas-surface-soft);
    color: var(--canvas-ink);
    box-shadow: none;
  }

  body.canvas-unified-nav .canvas-mobile-menu svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  body.canvas-unified-nav .canvas-nav-scrim:not([hidden]) {
    position: fixed;
    z-index: 145;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgb(17 16 38 / 46%);
    box-shadow: none;
  }

  body.canvas-unified-nav.canvas-nav-open {
    overflow: hidden;
  }

  body.canvas-unified-nav :is(
    .app-shell,
    [data-app],
    [data-lead-app],
    .dir-app,
    .ca-v2-app
  ) {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.canvas-unified-nav :is(
    .app-shell > .sidebar,
    [data-app] > .sidebar,
    [data-lead-app] > .sidebar,
    .dir-sidebar,
    .ca-v2-sidebar
  ) {
    position: fixed !important;
    z-index: 150 !important;
    inset: 0 auto 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: min(82vw, 300px) !important;
    min-width: 0 !important;
    max-width: 300px !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    background: var(--canvas-nav) !important;
    background-image: none !important;
    box-shadow: var(--canvas-shadow-raised) !important;
    transform: translateX(-105%) !important;
    transition: transform var(--canvas-motion) !important;
    overscroll-behavior: contain;
  }

  body.canvas-unified-nav.canvas-nav-open :is(
    .app-shell > .sidebar,
    [data-app] > .sidebar,
    [data-lead-app] > .sidebar,
    .dir-sidebar,
    .ca-v2-sidebar
  ) {
    transform: translateX(0) !important;
  }

  body.canvas-unified-nav :is(.main, .content, .main-content, .dir-workspace, .ca-v2-main) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.canvas-unified-nav :is(.topbar, .role-topbar, .dir-topbar, .ca-v2-topbar) {
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.canvas-unified-nav .app-shell > .sidebar .brand {
    flex: 0 0 auto;
    width: 100%;
    min-height: 48px;
    padding: 4px !important;
  }

  body.canvas-unified-nav .app-shell > .sidebar .nav-section {
    display: block !important;
    margin: 10px 0 2px;
  }

  body.canvas-unified-nav .app-shell > .sidebar .nav-link {
    display: flex !important;
    width: 100%;
    min-height: 44px;
    flex: 0 0 auto;
    margin: 0;
  }

  body.canvas-unified-nav :is([data-app], [data-lead-app]) > .sidebar :is(.brand, .user-toggle) {
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  body.canvas-unified-nav :is([data-app], [data-lead-app]) > .sidebar .side-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 4px 0 !important;
    overflow: visible !important;
  }

  body.canvas-unified-nav :is([data-app], [data-lead-app]) > .sidebar .side-link {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    text-align: left !important;
  }

  body.canvas-unified-nav :is([data-app], [data-lead-app]) > .sidebar .side-link .side-icon {
    display: inline-grid !important;
  }

  body.canvas-unified-nav :is([data-app], [data-lead-app]) > .sidebar .nav-count {
    position: static !important;
    justify-self: end;
    margin: 0;
  }

  body.canvas-unified-nav .dir-sidebar,
  body.canvas-unified-nav .ca-v2-sidebar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  body.canvas-unified-nav :is(.dir-brand, .dir-user-card, .ca-v2-brand, .ca-v2-user-card) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body.canvas-unified-nav :is(.dir-nav, .ca-v2-nav) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-auto-rows: minmax(44px, auto) !important;
    align-content: start !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 4px 0 !important;
    overflow: visible !important;
  }

  body.canvas-unified-nav :is(.dir-nav-link, .ca-v2-nav-link) {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
  }
}

@media (max-width: 600px) {
  body[data-cabinet-role="admin"] .app-shell .brand-subtitle,
  body[data-cabinet-role="manager"] .app-shell .brand-subtitle {
    display: none;
  }

  body[data-cabinet-role="admin"] .app-shell :is(.role-chip, .sheet-chip),
  body[data-cabinet-role="manager"] .app-shell :is(.role-chip, .sheet-chip) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-cabinet-role="manager"] [data-lead-app] :is(.role-metrics, .detail-grid, .mini-meta) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-cabinet-role="manager"] [data-lead-app] .lead-work-grid > .role-card:first-child .role-control-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-cabinet-role="manager"] [data-lead-app] .sidebar :is(.user-toggle, .side-link) {
    min-height: 44px !important;
  }

  body[data-cabinet-role] :where(
    button,
    a.btn,
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    summary,
    [role="button"],
    .user-toggle
  ) {
    min-height: 44px !important;
  }
}

/* Entry point: the same restrained card and control language as the cabinets. */
body[data-cabinet-role="entry"] {
  --bg: var(--canvas-bg);
  --surface: var(--canvas-surface);
  --surface-2: var(--canvas-surface-soft);
  --fg: var(--canvas-ink);
  --muted: var(--canvas-muted);
  --border: var(--canvas-border);
  --border-strong: var(--canvas-border-strong);
  --accent: var(--canvas-accent);
  --accent-strong: var(--canvas-accent-strong);
  --radius: var(--canvas-radius-panel);
  --radius-sm: var(--canvas-radius-control);
}

body[data-cabinet-role="entry"] .login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 16px;
  background: var(--canvas-bg);
}

body[data-cabinet-role="entry"] .login-card {
  width: min(100%, 420px);
  padding: 24px;
  border-color: var(--canvas-border);
  border-radius: var(--canvas-radius-surface);
  background: var(--canvas-surface);
  box-shadow: var(--canvas-shadow-card);
}

body[data-cabinet-role="entry"] .login-card .brand {
  color: var(--canvas-ink);
}

body[data-cabinet-role="entry"] .login-card .brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: var(--canvas-radius-control);
  background: var(--canvas-accent);
  box-shadow: none;
  color: #ffffff;
  font-size: 11px;
  letter-spacing: .04em;
}

body[data-cabinet-role="entry"] .login-card :is(.input, #loginButton) {
  min-height: 44px;
  border-radius: var(--canvas-radius-control);
}

body[data-cabinet-role="entry"] .login-card .input {
  border-color: var(--canvas-border);
  background: var(--canvas-surface);
  color: var(--canvas-text);
}

body[data-cabinet-role="entry"] .login-card #loginButton {
  border-color: var(--canvas-accent);
  background: var(--canvas-accent);
  color: #ffffff;
}

body[data-cabinet-role="entry"] .login-card #loginButton:hover {
  border-color: var(--canvas-accent-strong);
  background: var(--canvas-accent-strong);
}

/* One compact, light responsive toolbar; existing role navigation stays intact. */
@media (max-width: 1200px) {
  body.canvas-unified-nav .canvas-mobile-header,
  body[data-cabinet-role="ord"] .ord-mobile-header,
  body[data-cabinet-role="finance"] .finance-mobile-header,
  html.supervisor-nav-ready body[data-cabinet-role="supervisor"] .supervisor-mobile-header:not([hidden]) {
    width: 100%;
    height: 64px !important;
    min-height: 64px !important;
    padding: 10px 18px !important;
    border-bottom: 1px solid var(--canvas-border) !important;
    background: var(--canvas-surface) !important;
    color: var(--canvas-ink) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html.supervisor-nav-loading:not(.supervisor-nav-ready) body[data-cabinet-role="supervisor"] .ms-app::before {
    height: 64px;
    padding: 10px 18px;
    border-bottom-color: var(--canvas-border);
    background: var(--canvas-surface);
    color: var(--canvas-ink);
  }

  body[data-cabinet-role="finance"] .finance-mobile-identity,
  body[data-cabinet-role="finance"] .finance-mobile-identity strong,
  body[data-cabinet-role="supervisor"] :is(.supervisor-mobile-identity, .supervisor-mobile-copy strong) {
    color: var(--canvas-ink) !important;
  }

  body[data-cabinet-role="finance"] .finance-mobile-identity small,
  body[data-cabinet-role="supervisor"] .supervisor-mobile-copy small {
    display: none !important;
  }

  body.canvas-unified-nav .canvas-mobile-identity > span,
  body[data-cabinet-role="ord"] .ord-mobile-header .ord-brand-mark,
  body[data-cabinet-role="finance"] .finance-mobile-header .finance-brand-mark,
  body[data-cabinet-role="supervisor"] .supervisor-mobile-brand-mark {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 11px !important;
    background: var(--canvas-accent) !important;
    box-shadow: none !important;
    color: #ffffff !important;
  }

  body.canvas-unified-nav .canvas-mobile-menu,
  body[data-cabinet-role="ord"] .ord-mobile-header [data-ord-nav-open],
  body[data-cabinet-role="finance"] .finance-menu-button,
  body[data-cabinet-role="supervisor"] .supervisor-mobile-menu-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid var(--canvas-border) !important;
    border-radius: var(--canvas-radius-control) !important;
    background: var(--canvas-surface-soft) !important;
    color: var(--canvas-ink) !important;
    box-shadow: none !important;
  }
}

@media (max-width: 900px) {
  body[data-cabinet-role="docflow"]:has(.df-nav.is-mobile-open) {
    overflow: hidden !important;
  }

  body[data-cabinet-role="docflow"]:has(.df-nav.is-mobile-open)::before {
    content: "";
    position: fixed;
    inset: 64px 0 0;
    z-index: 145;
    background: rgb(17 16 38 / 46%);
  }

  body[data-cabinet-role="docflow"] .df-sidebar {
    position: sticky !important;
    top: 0;
    z-index: 140;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    grid-template-rows: 44px !important;
    align-items: center;
    gap: 12px !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 10px 18px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid var(--canvas-border) !important;
    background: var(--canvas-surface) !important;
    color: var(--canvas-ink) !important;
    box-shadow: none !important;
  }

  body[data-cabinet-role="docflow"] .df-brand {
    grid-column: 1;
    grid-row: 1;
    min-height: 44px;
    padding: 0 !important;
  }

  body[data-cabinet-role="docflow"] .df-brand-mark {
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    background: var(--canvas-accent) !important;
    color: #ffffff !important;
  }

  body[data-cabinet-role="docflow"] .df-brand strong {
    color: var(--canvas-ink) !important;
  }

  body[data-cabinet-role="docflow"] :is(.df-brand small, .df-user-card) {
    display: none !important;
  }

  body[data-cabinet-role="docflow"] .df-mobile-nav-toggle {
    display: grid !important;
    grid-column: 2;
    grid-row: 1;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    place-items: center;
    border: 1px solid var(--canvas-border) !important;
    border-radius: var(--canvas-radius-control) !important;
    background: var(--canvas-surface-soft) !important;
    color: var(--canvas-ink) !important;
    box-shadow: none !important;
  }

  body[data-cabinet-role="docflow"] .df-nav {
    position: fixed !important;
    top: 64px !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 180;
    display: none !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    align-content: start !important;
    gap: 4px !important;
    width: min(320px, 84vw) !important;
    height: calc(100dvh - 64px) !important;
    max-height: none !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-right: 1px solid rgb(255 255 255 / 10%) !important;
    border-radius: 0 16px 0 0 !important;
    background: var(--canvas-nav) !important;
    box-shadow: var(--canvas-shadow-raised) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body[data-cabinet-role="docflow"] .df-nav.is-mobile-open {
    display: grid !important;
  }

  body[data-cabinet-role="docflow"] .df-sidebar:has(.df-nav.is-mobile-open) {
    z-index: 170;
  }

  body[data-cabinet-role="docflow"] .df-nav-link {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 6px 9px !important;
  }
}

@media (max-width: 520px) {
  body.canvas-unified-nav .canvas-mobile-header,
  body[data-cabinet-role="ord"] .ord-mobile-header,
  body[data-cabinet-role="finance"] .finance-mobile-header,
  html.supervisor-nav-ready body[data-cabinet-role="supervisor"] .supervisor-mobile-header:not([hidden]),
  body[data-cabinet-role="docflow"] .df-sidebar {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-cabinet-role] *,
  body[data-cabinet-role] *::before,
  body[data-cabinet-role] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}