/*
 * Dorsa unified product theme
 * Loaded last by every application shell. It aligns the Sales/BI and Commercial
 * workspaces without replacing page-specific layout or JavaScript hooks.
 */
:root {
  --dorsa-primary: #315c91;
  --dorsa-primary-hover: #294f7d;
  --dorsa-primary-active: #203f65;
  --dorsa-primary-soft: #eaf1f8;
  --dorsa-secondary: #566579;
  --dorsa-accent: #2f7662;
  --dorsa-bg: #f4f6f8;
  --dorsa-surface: #fff;
  --dorsa-surface-secondary: #f8fafb;
  --dorsa-text-primary: #253142;
  --dorsa-text-secondary: #536071;
  --dorsa-text-muted: #6c7889;
  --dorsa-border: #dfe5ec;
  --dorsa-border-strong: #cbd4df;
  --dorsa-success: #2f7662;
  --dorsa-success-soft: #e8f3ef;
  --dorsa-warning: #9a6a24;
  --dorsa-warning-soft: #faf2e4;
  --dorsa-danger: #a84747;
  --dorsa-danger-soft: #f9ecec;
  --dorsa-info: #47788a;
  --dorsa-info-soft: #eaf3f5;
  --dorsa-radius-sm: 6px;
  --dorsa-radius-md: 8px;
  --dorsa-radius-lg: 12px;
  --dorsa-shadow-sm: 0 2px 8px rgba(23, 32, 44, .06);
  --dorsa-shadow-md: 0 8px 24px rgba(23, 32, 44, .09);
  --dorsa-focus: 0 0 0 3px rgba(49, 92, 145, .16);
  --dorsa-transition: 180ms cubic-bezier(.2, 0, 0, 1);
}

body.dorsa-app {
  --primary: var(--dorsa-primary);
  --primary-dark: var(--dorsa-primary-active);
  --primary-hover: var(--dorsa-primary-hover);
  --primary-light: var(--dorsa-primary-soft);
  --primary-soft: #f3f7fb;
  --secondary: var(--dorsa-secondary);
  --accent: var(--dorsa-accent);
  --success: var(--dorsa-success);
  --success-light: var(--dorsa-success-soft);
  --warning: var(--dorsa-warning);
  --warning-light: var(--dorsa-warning-soft);
  --danger: var(--dorsa-danger);
  --danger-light: var(--dorsa-danger-soft);
  --info: var(--dorsa-info);
  --info-light: var(--dorsa-info-soft);
  --background: var(--dorsa-bg);
  --surface: var(--dorsa-surface);
  --surface-muted: var(--dorsa-surface-secondary);
  --border: var(--dorsa-border);
  --border-strong: var(--dorsa-border-strong);
  --text: var(--dorsa-text-primary);
  --text-muted: var(--dorsa-text-muted);
  --ink-950: #17202c;
  --ink-900: var(--dorsa-text-primary);
  --ink-800: #344153;
  --ink-700: var(--dorsa-text-secondary);
  --ink-600: #637084;
  --ink-500: var(--dorsa-text-muted);
  --ink-400: #95a1b1;
  --ink-100: #eef2f6;
  --ink-50: var(--dorsa-surface-secondary);
  color: var(--dorsa-text-primary);
  background: var(--dorsa-bg);
}

body.dorsa-app :where(input, select, textarea, .form-control, .form-input, .form-select) {
  border-color: var(--dorsa-border-strong);
  border-radius: var(--dorsa-radius-md);
  background-color: var(--dorsa-surface);
  color: var(--dorsa-text-primary);
  font-family: inherit;
  transition: border-color var(--dorsa-transition), box-shadow var(--dorsa-transition), background var(--dorsa-transition);
}
body.dorsa-app :where(input, select, textarea, .form-control, .form-input, .form-select):focus {
  border-color: var(--dorsa-primary);
  box-shadow: var(--dorsa-focus);
  outline: 0;
}
body.dorsa-app :where(input, textarea)::placeholder { color: var(--dorsa-text-muted); opacity: .82; }
body.dorsa-app :where(input, select, textarea):disabled {
  cursor: not-allowed;
  background: #eef1f4;
  color: var(--dorsa-text-muted);
}

body.dorsa-app :where(.btn, .button, .primary-action, .secondary-action, .fd-btn, .review-btn) {
  min-height: 38px;
  border-radius: var(--dorsa-radius-md);
  font-family: inherit;
  font-weight: 700;
  transition: background var(--dorsa-transition), border-color var(--dorsa-transition), color var(--dorsa-transition), transform var(--dorsa-transition);
}
body.dorsa-app :where(.btn-primary, .primary-action, .fd-btn.primary) {
  border-color: var(--dorsa-primary);
  background: var(--dorsa-primary);
  color: #fff;
  box-shadow: none;
}
body.dorsa-app :where(.btn-primary, .primary-action, .fd-btn.primary):hover {
  border-color: var(--dorsa-primary-hover);
  background: var(--dorsa-primary-hover);
  transform: translateY(-1px);
}
body.dorsa-app :where(.btn-secondary, .secondary-action, .fd-btn:not(.primary):not(.success):not(.danger)) {
  border-color: var(--dorsa-border-strong);
  background: var(--dorsa-surface);
  color: var(--dorsa-text-secondary);
}

body.dorsa-app :where(.card, .panel, .glass-card, .stat-card, .campaign-card, .fd-card, .review-card, .form-card, .form-section) {
  border-color: var(--dorsa-border);
  border-radius: var(--dorsa-radius-lg);
  background: var(--dorsa-surface);
  box-shadow: var(--dorsa-shadow-sm);
}
body.dorsa-app :where(.card, .panel, .glass-card, .stat-card, .campaign-card, .fd-card, .review-card, .form-card, .form-section):hover {
  border-color: #d2dbe5;
}

body.dorsa-app :where(.table-responsive, .table-container, .review-table-wrap) {
  border-radius: var(--dorsa-radius-lg);
  scrollbar-color: var(--dorsa-border-strong) transparent;
}
body.dorsa-app :where(table, .data-table, .review-table, .tier-table) { color: var(--dorsa-text-primary); }
body.dorsa-app :where(table, .data-table, .review-table, .tier-table) th {
  border-color: var(--dorsa-border);
  background: var(--dorsa-surface-secondary);
  color: var(--dorsa-text-secondary);
  font-weight: 750;
}
body.dorsa-app :where(table, .data-table, .review-table, .tier-table) td { border-color: var(--dorsa-border); }
body.dorsa-app :where(table, .data-table, .review-table, .tier-table) tbody tr:hover { background: #f5f8fb; }

body.dorsa-app :where(.filter-bar, .filters-card, .filter-card, .toolbar, .table-toolbar) {
  border: 1px solid var(--dorsa-border);
  border-radius: var(--dorsa-radius-lg);
  background: var(--dorsa-surface);
  box-shadow: var(--dorsa-shadow-sm);
}

body.dorsa-app :where(.badge, .status, .status-badge, .chip) {
  border-radius: 999px;
  font-weight: 700;
}
body.dorsa-app :where(.badge-success, .status-success, .status.approved) { background: var(--dorsa-success-soft); color: var(--dorsa-success); }
body.dorsa-app :where(.badge-warning, .status-warning, .status.pending) { background: var(--dorsa-warning-soft); color: var(--dorsa-warning); }
body.dorsa-app :where(.badge-danger, .status-danger, .status.rejected) { background: var(--dorsa-danger-soft); color: var(--dorsa-danger); }
body.dorsa-app :where(.badge-info, .status-info) { background: var(--dorsa-info-soft); color: var(--dorsa-info); }

body.dorsa-app :where(.empty-state, .compact-empty-state, .no-data, .chart-empty) {
  border-color: var(--dorsa-border-strong);
  border-radius: var(--dorsa-radius-lg);
  background: var(--dorsa-surface-secondary);
  color: var(--dorsa-text-muted);
}

/* Shared task feedback: every page gets the same readable, dismissible messages. */
.dorsa-messages { display: grid; gap: 8px; margin: 0 0 18px; }
.dorsa-message {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--dorsa-border);
  border-inline-start-width: 4px;
  border-radius: var(--dorsa-radius-lg);
  background: var(--dorsa-surface);
  box-shadow: var(--dorsa-shadow-sm);
  transition: opacity var(--dorsa-transition), transform var(--dorsa-transition);
}
.dorsa-message--success { border-inline-start-color: var(--dorsa-success); background: var(--dorsa-success-soft); color: var(--dorsa-success); }
.dorsa-message--warning { border-inline-start-color: var(--dorsa-warning); background: var(--dorsa-warning-soft); color: var(--dorsa-warning); }
.dorsa-message--error, .dorsa-message--danger { border-inline-start-color: var(--dorsa-danger); background: var(--dorsa-danger-soft); color: var(--dorsa-danger); }
.dorsa-message--info { border-inline-start-color: var(--dorsa-info); background: var(--dorsa-info-soft); color: var(--dorsa-info); }
.dorsa-message__icon { display: inline-grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; }
.dorsa-message__text { flex: 1; color: var(--dorsa-text-primary); font-size: 13px; line-height: 1.8; }
.dorsa-message__close { display: inline-grid; width: 36px; min-height: 36px; place-items: center; flex: 0 0 auto; border: 0; border-radius: 8px; background: transparent; color: currentColor; cursor: pointer; }
.dorsa-message__close:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.dorsa-message.is-leaving { opacity: 0; transform: translateY(-4px); }

/* A visible state change reassures users after high-impact POST actions. */
body.dorsa-app :where(button, input[type="submit"], .btn).is-submitting {
  cursor: progress;
  opacity: .72;
  pointer-events: none;
}
body.dorsa-app :where(button, input[type="submit"], .btn).is-submitting::after {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-inline-start: 8px;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: dorsa-submit-spin .7s linear infinite;
  content: '';
  vertical-align: -2px;
}
@keyframes dorsa-submit-spin { to { transform: rotate(360deg); } }

body.dorsa-app :where(.modal-content, .dialog, [role="dialog"]) {
  border-color: var(--dorsa-border);
  border-radius: var(--dorsa-radius-lg);
  background: var(--dorsa-surface);
  color: var(--dorsa-text-primary);
  box-shadow: var(--dorsa-shadow-md);
}

/* Legacy FOC pages now use the same Dorsa surfaces and semantic colors. */
body.dorsa-app :where(.festival-builder, .festival-detail, .promotion-shell, .review-page) { color: var(--dorsa-text-primary); }
body.dorsa-app :where(.festival-builder .page-head, .fd-head, .campaign-card, .fd-card, .review-card, .product-plan, .chart-panel, .meta-item, .aggregate-stat, .festival-sales-stat, .approval-step) {
  border-color: var(--dorsa-border);
  border-radius: var(--dorsa-radius-lg);
  background: var(--dorsa-surface);
  box-shadow: var(--dorsa-shadow-sm);
}
body.dorsa-app :where(.section-number, .step-badge, .primary-action, .fd-btn.primary) { background: var(--dorsa-primary); }
body.dorsa-app :where(.product-name, .plan-title, .aggregate-stat strong, .festival-sales-stat strong, .export-status) { color: var(--dorsa-primary); }
body.dorsa-app :where(.product-plan-head, .calculated-field, .duration-box) { background: var(--dorsa-primary-soft) !important; color: var(--dorsa-primary-active) !important; }
body.dorsa-app :where(.meta-item, .chart-panel, .empty-products, .chart-empty) { background: var(--dorsa-surface-secondary); }
body.dorsa-app .approval-step.current { border-color: #e9cf9f; background: var(--dorsa-warning-soft); }
body.dorsa-app .approval-step.done { border-color: #acd5c7; background: var(--dorsa-success-soft); }

/* The Commercial workspace keeps its information architecture but shares the BI palette. */
body.dorsa-app .brand-mark,
body.dorsa-app .sidebar-brand-mark { background: var(--dorsa-primary); color: #fff; }
body.dorsa-app .nav-item.active,
body.dorsa-app .nav-link.active { background: var(--dorsa-primary-soft); color: var(--dorsa-primary-active); }
body.dorsa-app .nav-item.active i,
body.dorsa-app .nav-link.active i { color: var(--dorsa-primary); }
body.dorsa-app .navbar-context { min-width: 0; }
body.dorsa-app .navbar-context strong {
  max-width: min(28vw, 300px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.dorsa-app .page-eyebrow { color: var(--dorsa-primary); }
body.dorsa-app .page-eyebrow > span { background: var(--dorsa-primary); }

body.dorsa-app.dark-mode {
  color-scheme: dark;
  --dorsa-primary: #82acd8;
  --dorsa-primary-hover: #a4c3e3;
  --dorsa-primary-active: #c0d5ea;
  --dorsa-primary-soft: #182d43;
  --dorsa-secondary: #a8b6c8;
  --dorsa-accent: #70b9a5;
  --dorsa-bg: #0c131c;
  --dorsa-surface: #121c27;
  --dorsa-surface-secondary: #172330;
  --dorsa-text-primary: #e6edf5;
  --dorsa-text-secondary: #b8c4d2;
  --dorsa-text-muted: #8d9bad;
  --dorsa-border: #283746;
  --dorsa-border-strong: #3a4b5d;
  --dorsa-success: #72c4a8;
  --dorsa-success-soft: #15352e;
  --dorsa-warning: #e0b86f;
  --dorsa-warning-soft: #392e1c;
  --dorsa-danger: #ef9999;
  --dorsa-danger-soft: #3d2427;
  --dorsa-info: #83bdce;
  --dorsa-info-soft: #17313b;
  --dorsa-shadow-sm: 0 2px 10px rgba(0, 0, 0, .24);
  --dorsa-shadow-md: 0 12px 30px rgba(0, 0, 0, .34);
  --dorsa-focus: 0 0 0 3px rgba(130, 172, 216, .19);
  --ink-950: #f0f5fa;
  --ink-900: var(--dorsa-text-primary);
  --ink-800: #d1dce7;
  --ink-700: var(--dorsa-text-secondary);
  --ink-600: #a4b2c2;
  --ink-500: var(--dorsa-text-muted);
  --ink-400: #718094;
  --ink-100: #223140;
  --ink-50: var(--dorsa-surface-secondary);
}
body.dorsa-app.dark-mode :where(input, select, textarea):disabled { background: #1c2834; }
body.dorsa-app.dark-mode :where(table, .data-table, .review-table, .tier-table) tbody tr:hover { background: #192735; }

@media (max-width: 768px) {
  body.dorsa-app :where(.festival-builder, .festival-detail, .review-page) { padding-inline: 12px; }
  body.dorsa-app :where(.festival-builder .page-head, .fd-head) { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  body.dorsa-app *, body.dorsa-app *::before, body.dorsa-app *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Persistent test-environment warning in the primary navbar.
   Kept visible but intentionally restrained so it does not compete with BI content. */
body.dorsa-app .navbar .system-test-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: min(680px, 50vw);
  margin-inline: auto;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--dorsa-radius-md);
  background: transparent;
  color: #8b1111;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  box-shadow: none;
  animation: dorsa-test-warning-pulse 2.2s ease-in-out infinite;
}
body.dorsa-app .navbar .system-test-warning :where(i, span, strong) { color: inherit; }

@keyframes dorsa-test-warning-pulse {
  0%, 100% { filter: brightness(.58) saturate(1.08); text-shadow: 0 0 0 rgba(168, 71, 71, 0); }
  50% { filter: brightness(1.06) saturate(1); text-shadow: 0 0 7px rgba(168, 71, 71, .22); }
}

@media (max-width: 1100px) {
  body.dorsa-app .navbar .system-test-warning { max-width: 42vw; font-size: 11px; }
  body.dorsa-app .navbar .system-test-warning span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 760px) {
  body.dorsa-app .navbar .system-test-warning { max-width: 46vw; padding: 6px 9px; }
  body.dorsa-app .navbar .system-test-warning strong { display: none; }
}


/*
 * Dorsa Sales Theme Harmony
 * Scoped to Sales dashboard page roots only.
 * Purpose: remove page-level mini-brand palettes and make cards/hero surfaces
 * visually consistent with the main Sales dashboard without touching portal,
 * Commercial, Warehouse or Production shells.
 */

body.dorsa-app :where(
  .st-page,
  .cc-page,
  .month-report,
  .decline-page,
  .facility-analysis,
  .dr-page,
  .pharmacy-profiles,
  .opt-page,
  .bd-page
) {
  --sales-harmony-primary: var(--primary, #315c91);
  --sales-harmony-primary-dark: var(--primary-dark, #203f65);
  --sales-harmony-primary-soft: var(--primary-light, #eaf1f8);
  --sales-harmony-surface: var(--surface, #fff);
  --sales-harmony-surface-muted: var(--surface-muted, #f8fafb);
  --sales-harmony-border: var(--border, #dfe5ec);
  --sales-harmony-text: var(--text, #253142);
  --sales-harmony-muted: var(--text-muted, #6c7889);
  --sales-harmony-shadow: 0 4px 16px rgba(23, 32, 44, .055);
  --sales-harmony-shadow-hover: 0 8px 22px rgba(23, 32, 44, .075);
}

/* Remove decorative page washes that make individual pages feel like separate products. */
body.dorsa-app .month-report,
body.dorsa-app .decline-page,
body.dorsa-app .facility-analysis {
  background: transparent;
}

/* One restrained Sales hero treatment for the pages that use hero banners. */
body.dorsa-app :where(
  .cc-page .cc-hero,
  .month-report .month-hero,
  .decline-page .decline-hero,
  .facility-analysis .analysis-hero,
  .dr-page .dr-hero,
  .opt-page .opt-hero
) {
  background: linear-gradient(120deg, #173d67 0%, #264f7b 56%, #315c91 100%);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(23, 61, 103, .16);
}

body.dorsa-app :where(
  .month-report .month-eyebrow,
  .decline-page .eyebrow,
  .facility-analysis .eyebrow,
  .dr-page .dr-eyebrow,
  .bd-page .bd-kicker
) {
  color: #d7e5f3;
}

/* Core card language: same surface, border radius, border and shadow rhythm. */
body.dorsa-app :where(
  .st-page .st-card,
  .st-page .st-target-card,
  .cc-page .cc-stat,
  .cc-page .cc-panel,
  .cc-page .cc-directory,
  .month-report .month-kpis article,
  .month-report .report-panel,
  .decline-page .kpi-strip article,
  .decline-page .panel,
  .facility-analysis .kpi-grid article,
  .facility-analysis .panel,
  .dr-page .dr-stats article,
  .dr-page .dr-card,
  .pharmacy-profiles .pp-kpis article,
  .pharmacy-profiles .pp-workspace,
  .opt-page .kpi-grid article,
  .opt-page .filter-panel,
  .opt-page .recommendation-card,
  .bd-page .bd-kpis article,
  .bd-page .bd-card,
  .bd-page .bd-insights article
) {
  background: var(--sales-harmony-surface);
  border-color: var(--sales-harmony-border);
  border-radius: 14px;
  box-shadow: var(--sales-harmony-shadow);
}

body.dorsa-app :where(
  .st-page .st-card,
  .st-page .st-target-card,
  .cc-page .cc-stat,
  .cc-page .cc-panel,
  .cc-page .cc-directory,
  .month-report .month-kpis article,
  .month-report .report-panel,
  .decline-page .kpi-strip article,
  .decline-page .panel,
  .facility-analysis .kpi-grid article,
  .facility-analysis .panel,
  .dr-page .dr-stats article,
  .dr-page .dr-card,
  .pharmacy-profiles .pp-kpis article,
  .pharmacy-profiles .pp-workspace,
  .opt-page .kpi-grid article,
  .opt-page .recommendation-card,
  .bd-page .bd-kpis article,
  .bd-page .bd-card
) {
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.dorsa-app :where(
  .st-page .st-card,
  .cc-page .cc-stat,
  .month-report .month-kpis article,
  .facility-analysis .kpi-grid article,
  .dr-page .dr-stats article,
  .pharmacy-profiles .pp-kpis article,
  .opt-page .kpi-grid article,
  .bd-page .bd-kpis article
):hover {
  border-color: color-mix(in srgb, var(--sales-harmony-primary) 28%, var(--sales-harmony-border));
  box-shadow: var(--sales-harmony-shadow-hover);
  transform: translateY(-1px);
}

/* Sales Targets: remove blue/teal/amber mini-brand headers and action colors. */
body.dorsa-app .st-page {
  --st-blue: #315c91;
  --st-blue-dk: #294e7d;
  --st-teal: #315c91;
  --st-teal-lt: #eaf1f8;
  --st-amber: #315c91;
  --st-amber-lt: #eaf1f8;
  --st-indigo: #315c91;
}
body.dorsa-app .st-page :where(.st-card__header--blue, .st-card__header--teal, .st-card__header--amber) {
  background: linear-gradient(120deg, #315c91, #4777a6);
}
body.dorsa-app .st-page .st-page-header__icon {
  background: linear-gradient(135deg, #315c91, #4777a6);
  box-shadow: 0 4px 12px rgba(49, 92, 145, .20);
}
body.dorsa-app .st-page :where(.st-btn--primary, .st-btn--teal, .st-btn--amber) {
  background: #315c91;
  box-shadow: none;
}
body.dorsa-app .st-page :where(.st-btn--primary, .st-btn--teal, .st-btn--amber):hover {
  background: #294e7d;
  filter: none;
}
body.dorsa-app .st-page :where(.st-btn--blue-outline, .st-btn--indigo-outline) {
  background: #eef4fa;
  color: #315c91;
  border-color: #c8d7e7;
}

/* Center contacts: keep semantic green, remove decorative purple/amber accents. */
body.dorsa-app .cc-page .cc-hero {
  min-height: 154px;
}
body.dorsa-app .cc-page :where(.cc-stat-icon--blue, .cc-stat-icon--violet, .cc-stat-icon--amber) {
  color: #315c91;
  background: #eaf1f8;
}
body.dorsa-app .cc-page .cc-heading-icon {
  color: #315c91;
  background: #eaf1f8;
}

/* Monthly analysis: status text keeps green/red; structural cards stay blue-neutral. */
body.dorsa-app .month-report {
  --blue: #315c91;
  --navy: #173d67;
}
body.dorsa-app .month-report .month-kpis article {
  border-top-color: #c8d7e7;
}
body.dorsa-app .month-report .month-kpis article.primary {
  border-top-color: #315c91;
}
body.dorsa-app .month-report .panel-kicker {
  color: #315c91;
}

/* Growth / decline: red and green only communicate direction, not page identity. */
body.dorsa-app .decline-page {
  --navy: #173d67;
}
body.dorsa-app .decline-page .kpi-strip article {
  border-top-color: #c8d7e7;
}
body.dorsa-app .decline-page :where(.panel-kicker, .trend-footnotes i) {
  color: #315c91;
}

/* Facility analysis: replace teal/purple/amber category rainbow with blue-family accents. */
body.dorsa-app .facility-analysis .period-picker button {
  background: #315c91;
}
body.dorsa-app .facility-analysis .period-picker button:hover {
  background: #294e7d;
}
body.dorsa-app .facility-analysis .comparison-note {
  background: #f1f6fb;
  border-color: #c8d7e7;
  color: #294e7d;
}
body.dorsa-app .facility-analysis .kpi-sales { --accent: #315c91; }
body.dorsa-app .facility-analysis .kpi-bonus { --accent: #426f9f; }
body.dorsa-app .facility-analysis .kpi-discount { --accent: #547faa; }
body.dorsa-app .facility-analysis .kpi-products { --accent: #294e7d; }
body.dorsa-app .facility-analysis .table-panel tbody tr:hover {
  background: #f4f8fc;
}

/* Discount & rewards: this is part of Sales, not a separate teal product. */
body.dorsa-app .dr-page {
  --brand: #315c91;
}
body.dorsa-app .dr-page :where(.dr-btn-primary, .dr-stats article) {
  border-color: var(--sales-harmony-border);
}
body.dorsa-app .dr-page .dr-btn-primary {
  background: #315c91;
}
body.dorsa-app .dr-page .dr-stats article {
  border-top-color: #315c91;
}
body.dorsa-app .dr-page .dr-icon {
  background: #eaf1f8;
  color: #315c91;
}
body.dorsa-app .dr-page .dr-drop {
  border-color: #b9cce0;
  background: #f3f7fb;
}
body.dorsa-app .dr-page .dr-drop i {
  color: #315c91;
}
body.dorsa-app .dr-page :where(.dr-form input, .dr-filters input, .dr-filters select, .dr-form select):focus {
  outline-color: #c8d7e7;
  border-color: #315c91;
}

/* Pharmacy profile: blue for category identity; green/red remain semantic. */
body.dorsa-app .pharmacy-profiles {
  --pp-blue: #315c91;
  --pp-navy: #173d67;
}
body.dorsa-app .pharmacy-profiles .pp-kpis article.navy,
body.dorsa-app .pharmacy-profiles .pp-kpis article.blue,
body.dorsa-app .pharmacy-profiles .pp-kpis article.purple {
  --tone: #315c91;
  --pale: #eaf1f8;
}
body.dorsa-app .pharmacy-profiles .pp-toolbar {
  background: #f6f8fb;
  border-color: var(--sales-harmony-border);
}

/* Inventory optimization: remove the green tail from the page identity; keep semantic statuses. */
body.dorsa-app .opt-page {
  --blue: #315c91;
}
body.dorsa-app .opt-page .opt-hero {
  background: linear-gradient(120deg, #173d67 0%, #264f7b 58%, #315c91 100%);
}
body.dorsa-app .opt-page .kpi-grid article > i:not(.danger):not(.warning):not(.success) {
  color: #315c91;
  background: #eaf1f8;
}
body.dorsa-app .opt-page .filter-panel button {
  background: #315c91;
}

/* Board dashboard: keep success/risk colors meaningful, remove decorative violet identity. */
body.dorsa-app .bd-page {
  --blue: #315c91;
  --navy: #173d67;
}
body.dorsa-app .bd-page .bd-kpis .accent-violet {
  border-top-color: #315c91;
}
body.dorsa-app .bd-page .bd-insights article > i:not(.warning) {
  background: #eaf1f8;
  color: #315c91;
}

/* Dark mode: page-local pale blues should not become bright islands. */
body.dorsa-app.dark-mode :where(
  .facility-analysis .comparison-note,
  .dr-page .dr-drop,
  .pharmacy-profiles .pp-toolbar
) {
  background: var(--surface-muted, #111d2b);
  border-color: var(--border, #25364a);
  color: var(--text, #e5edf6);
}
body.dorsa-app.dark-mode :where(
  .cc-page .cc-stat-icon--blue,
  .cc-page .cc-stat-icon--violet,
  .cc-page .cc-stat-icon--amber,
  .cc-page .cc-heading-icon,
  .dr-page .dr-icon,
  .pharmacy-profiles .pp-kpis article.navy .pp-kpi-icon,
  .pharmacy-profiles .pp-kpis article.blue .pp-kpi-icon,
  .pharmacy-profiles .pp-kpis article.purple .pp-kpi-icon,
  .opt-page .kpi-grid article > i:not(.danger):not(.warning):not(.success),
  .bd-page .bd-insights article > i:not(.warning)
) {
  background: rgba(96, 165, 250, .12);
  color: #8cb9e8;
}

@media (prefers-reduced-motion: reduce) {
  body.dorsa-app :where(
    .st-page .st-card,
    .cc-page .cc-stat,
    .month-report .month-kpis article,
    .facility-analysis .kpi-grid article,
    .dr-page .dr-stats article,
    .pharmacy-profiles .pp-kpis article,
    .opt-page .kpi-grid article,
    .bd-page .bd-kpis article
  ) {
    transition: none;
  }
}

/*
 * Sales UI robustness v2 — 2026-09-17
 * - Keeps every Sales card inside the Dorsa blue/neutral visual language.
 * - Prevents long Persian labels, numbers, badges and helper text from escaping cards.
 * - Uses content-width-friendly auto-fit grids so the right sidebar cannot squeeze cards
 *   below a readable width while desktop media queries are still active.
 * Scoped to body.dorsa-app only; portal and other application shells are unaffected.
 */

body.dorsa-app {
  --sales-card-radius: 14px;
  --sales-card-border: var(--dorsa-border, #dfe5ec);
  --sales-card-surface: var(--dorsa-surface, #fff);
  --sales-card-muted: var(--dorsa-surface-secondary, #f8fafb);
  --sales-card-shadow: 0 3px 14px rgba(23, 32, 44, .05);
  --sales-card-shadow-hover: 0 7px 20px rgba(23, 32, 44, .075);
}

/* ---------- Universal Sales content-width safety ---------- */
body.dorsa-app :where(
  .main-content,
  .st-page,
  .cc-page,
  .month-report,
  .decline-page,
  .facility-analysis,
  .dr-page,
  .pharmacy-profiles,
  .opt-page,
  .bd-page,
  .reports-hub,
  .top-sales-page,
  .product-details-page,
  .roles-page,
  .dm-page
) {
  min-width: 0;
  max-width: 100%;
}

/* Cards and panels must be shrinkable inside grid/flex containers. */
body.dorsa-app :where(
  .dash-card,
  .product-card,
  .st-card,
  .st-target-card,
  .cc-stat,
  .cc-panel,
  .cc-directory,
  .report-panel,
  .panel,
  .dr-card,
  .pp-workspace,
  .recommendation-card,
  .bd-card,
  .sales-panel,
  .decision-strip,
  .report-card,
  .dm-card,
  .expiry-flow-step,
  .expiry-story-card,
  .expiry-risk-card,
  .expiry-kpi-card,
  .kpi-box,
  .bucket-card,
  .inventory-distributor,
  .competition-progress-item
) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Direct children of cards are the usual flex/grid overflow source. */
body.dorsa-app :where(
  .dash-card,
  .product-card,
  .st-card,
  .st-target-card,
  .cc-stat,
  .cc-panel,
  .cc-directory,
  .report-panel,
  .panel,
  .dr-card,
  .pp-workspace,
  .recommendation-card,
  .bd-card,
  .sales-panel,
  .decision-strip,
  .report-card,
  .dm-card,
  .expiry-flow-step,
  .expiry-story-card,
  .expiry-risk-card,
  .expiry-kpi-card,
  .kpi-box,
  .bucket-card,
  .inventory-distributor,
  .competition-progress-item
) > * {
  min-width: 0;
  max-width: 100%;
}

/* Text may wrap naturally instead of painting outside its surface. */
body.dorsa-app :where(
  .dash-card,
  .product-card,
  .st-card,
  .st-target-card,
  .cc-stat,
  .cc-panel,
  .cc-directory,
  .report-panel,
  .panel,
  .dr-card,
  .pp-workspace,
  .recommendation-card,
  .bd-card,
  .sales-panel,
  .decision-strip,
  .report-card,
  .dm-card,
  .expiry-flow-step,
  .expiry-story-card,
  .expiry-risk-card,
  .expiry-kpi-card,
  .kpi-box,
  .bucket-card,
  .inventory-distributor,
  .competition-progress-item
) :where(h1, h2, h3, h4, h5, h6, p, small, strong, span, label, dt, dd, em) {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Flex headers should wrap actions instead of forcing titles out of the card. */
body.dorsa-app :where(
  .dash-card-header,
  .panel-header,
  .section-heading,
  .table-header,
  .filter-heading,
  .decision-heading,
  .cc-panel-heading,
  .pp-section-heading,
  .bd-card header,
  .report-panel header,
  .profile-daily-header
) {
  min-width: 0;
  flex-wrap: wrap;
}

body.dorsa-app :where(
  .dash-card-header,
  .panel-header,
  .section-heading,
  .table-header,
  .filter-heading,
  .decision-heading,
  .cc-panel-heading,
  .pp-section-heading,
  .bd-card header,
  .report-panel header,
  .profile-daily-header
) > * {
  min-width: 0;
  max-width: 100%;
}

/* Large tables keep their intended nowrap behavior but scroll inside their panel. */
body.dorsa-app :where(
  .table-wrap,
  .table-scroll,
  .table-responsive,
  .bd-table-wrap,
  .dr-table-wrap,
  .competition-centers-table-wrap
) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Canvas/chart elements must not establish a minimum content width. */
body.dorsa-app :where(
  .chart-wrap,
  .canvas-wrap,
  .bd-canvas,
  .monthly-sales-line-chart,
  .profile-daily-chart,
  .competition-chart-wrap
) {
  min-width: 0;
  max-width: 100%;
}
body.dorsa-app :where(canvas, svg) { max-width: 100%; }

/* ---------- Container-friendly KPI/card grids ----------
   These respond to the actual content column width, not only the browser viewport. */
body.dorsa-app .cc-page .cc-stats {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}
body.dorsa-app .month-report .month-kpis,
body.dorsa-app .decline-page .kpi-strip {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
body.dorsa-app .facility-analysis .kpi-grid,
body.dorsa-app .dr-page .dr-stats,
body.dorsa-app .bd-page .bd-kpis {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}
body.dorsa-app .pharmacy-profiles .pp-kpis {
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}
body.dorsa-app .opt-page .kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 1fr));
}

/* ---------- Product / distributor profile cards ---------- */
body.dorsa-app .dash-card {
  border: 1px solid var(--sales-card-border);
  border-radius: var(--sales-card-radius);
  background: var(--sales-card-surface);
  box-shadow: var(--sales-card-shadow);
}
body.dorsa-app .dash-card:hover { box-shadow: var(--sales-card-shadow-hover); }
body.dorsa-app .dash-card-header {
  gap: 9px;
  border-bottom-color: var(--sales-card-border);
  background: #f7f9fc;
  color: var(--dorsa-text-primary, #253142);
  line-height: 1.75;
}
body.dorsa-app .dash-card-header .icon {
  flex: 0 0 30px;
  color: var(--dorsa-primary, #315c91) !important;
  background: var(--dorsa-primary-soft, #eaf1f8) !important;
}
body.dorsa-app .dash-card-title-hint {
  color: var(--dorsa-text-muted, #6c7889);
  white-space: normal;
}
body.dorsa-app .dash-card-body { min-width: 0; }

/* Product profile structural accents use Sales blue; risk/success colors remain semantic. */
body.dorsa-app .page-title-icon {
  background: linear-gradient(135deg, #315c91, #4777a6);
  box-shadow: 0 4px 12px rgba(49, 92, 145, .2);
}
body.dorsa-app .stat-pill-icon.purple {
  color: #315c91;
  background: #eaf1f8;
}
body.dorsa-app .kpi-hero {
  border-color: #c8d7e7;
  background: linear-gradient(135deg, #f4f8fc, #eaf1f8);
}
body.dorsa-app .tag-blue { color: #294f7d; background: #eaf1f8; }

/* Screenshot section: now -> sales pace -> future -> expiry. */
body.dorsa-app .expiry-flow-v3,
body.dorsa-app .expiry-flow-v3 * { min-width: 0; }
body.dorsa-app .expiry-flow-v3__steps {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
body.dorsa-app .expiry-flow-v3__strip {
  grid-template-columns: repeat(auto-fit, minmax(min(165px, 100%), 1fr));
}
body.dorsa-app .expiry-flow-step {
  border-color: var(--sales-card-border);
  border-radius: 14px;
  background: var(--sales-card-surface);
  box-shadow: 0 2px 10px rgba(23, 32, 44, .035);
}
body.dorsa-app .expiry-flow-step.speed,
body.dorsa-app .expiry-flow-step.future { border-top-color: #315c91; }
body.dorsa-app .expiry-flow-step__top { align-items: flex-start; }
body.dorsa-app .expiry-flow-step__title {
  flex: 1;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
body.dorsa-app .expiry-flow-step__value {
  font-size: clamp(1.35rem, 2.15vw, 1.7rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
body.dorsa-app .expiry-flow-step__rial,
body.dorsa-app .expiry-flow-step__hint,
body.dorsa-app .expiry-flow-step__submetric {
  white-space: normal;
  overflow-wrap: anywhere;
}
body.dorsa-app .expiry-flow-mini b,
body.dorsa-app .expiry-flow-mini small,
body.dorsa-app .expiry-flow-v3__assumption {
  white-space: normal;
  overflow-wrap: anywhere;
}
body.dorsa-app .expiry-flow-v3__assumption {
  max-width: min(100%, 440px);
  border-color: #d8e2ed;
  background: #f8fafc;
}
body.dorsa-app .expiry-flow-v3__future-picker button {
  max-width: 100%;
  white-space: normal;
}
body.dorsa-app .expiry-flow-v3__future-picker button.active {
  border-color: #b9cce0;
  background: #eaf1f8;
  color: #315c91;
}
body.dorsa-app .expiry-flow-v3__strip-item.has-entry {
  border-color: #c8d7e7;
  background: #f4f8fc;
}
body.dorsa-app .expiry-flow-v3__strip-item .entry { color: #315c91; }
body.dorsa-app .expiry-export-button {
  margin-inline-start: auto;
  margin-right: 0;
  max-width: 100%;
  border-color: #c8d7e7;
  background: #fff;
  color: #315c91;
  white-space: normal;
}
body.dorsa-app .expiry-export-button:hover {
  border-color: #9fb8d2;
  background: #f3f7fb;
  color: #294f7d;
  box-shadow: 0 5px 14px rgba(49, 92, 145, .1);
}
body.dorsa-app .expiry-insight-shell {
  border-color: rgba(49, 92, 145, .28);
  background: linear-gradient(135deg, #f5f8fc, #f8fafb);
}

/* Other known profile value rows that could force their parent wider. */
body.dorsa-app :where(
  .pc-mini-metric span,
  .pc-mini-metric strong,
  .kpi-box-quantity strong,
  .cumulative-summary-metrics dd,
  .inventory-distributor__totals > span
) {
  white-space: normal;
  overflow-wrap: anywhere;
}
body.dorsa-app .pc-sales-val {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.dorsa-app .pc-title,
body.dorsa-app .pc-meta,
body.dorsa-app .pc-badge {
  max-width: 100%;
}

/* ---------- Remaining non-semantic mini-brand accents ---------- */
/* Distribution profiles: structural competition controls are Sales blue. */
body.dorsa-app .distribution-competition :where(.competition-toggle button.active) {
  background: linear-gradient(135deg, #315c91, #294f7d);
  box-shadow: 0 5px 13px rgba(49, 92, 145, .2);
}
body.dorsa-app .distribution-competition .competition-more {
  border-color: #c8d7e7;
  color: #315c91;
  box-shadow: 0 4px 12px rgba(49, 92, 145, .07);
}
body.dorsa-app .distribution-competition .competition-more:hover {
  border-color: #9fb8d2;
  background: #f3f7fb;
}
body.dorsa-app .competition-centers-note,
body.dorsa-app .competition-center-percentage {
  border-color: #c8d7e7;
  background: #eef4fa;
  color: #315c91;
}
body.dorsa-app .competition-progress-item[role="button"]:focus-visible {
  outline-color: rgba(49, 92, 145, .28);
}

/* Existing pages that were already close to the theme: remove decorative purple only. */
body.dorsa-app .top-sales-page { --sales-purple: #315c91; }
body.dorsa-app .reports-hub { --reports-purple: #315c91; }
body.dorsa-app .product-details-page .smart-summary-heading h2 i {
  color: #315c91;
}
body.dorsa-app .product-details-page .chart-icon.distribution {
  color: #315c91;
  background: #eaf1f8;
}
body.dorsa-app .roles-page .group-icon {
  color: #315c91;
  background: #eaf1f8;
}
body.dorsa-app .roles-page .matrix-filters > span i { color: #315c91; }
body.dorsa-app .bd-page .bd-filter button {
  background: #315c91;
  color: #fff;
}
body.dorsa-app .bd-page .bd-share span { background: #4777a6; }

/* Data Management is already mostly aligned; keep any legacy decorative blobs blue-only. */
body.dorsa-app .dm-page :where(.blob-1, .blob-2) {
  background: linear-gradient(135deg, #315c91, #6d91b6);
}

/* ---------- Small-screen/card-width fallback ---------- */
@media (max-width: 680px) {
  body.dorsa-app .dash-card-header { align-items: flex-start; }
  body.dorsa-app .expiry-export-button { width: 100%; justify-content: center; }
  body.dorsa-app :where(.cc-page, .month-report, .decline-page, .facility-analysis, .dr-page, .pharmacy-profiles, .opt-page, .bd-page) {
    padding-inline: 12px;
  }
}

body.dorsa-app.dark-mode .dash-card-header {
  background: var(--dorsa-surface-secondary, #172330);
  border-bottom-color: var(--dorsa-border, #283746);
}
body.dorsa-app.dark-mode :where(
  .expiry-flow-v3__assumption,
  .expiry-flow-v3__strip-item.has-entry,
  .expiry-flow-v3__future-picker button.active,
  .competition-centers-note,
  .competition-center-percentage,
  .product-details-page .chart-icon.distribution,
  .roles-page .group-icon
) {
  border-color: var(--dorsa-border, #283746);
  background: var(--dorsa-primary-soft, #182d43);
  color: var(--dorsa-primary, #82acd8);
}


/* ==========================================================================
   Enterprise foundation v1
   Canonical cross-workspace primitives shared by Sales, Commercial,
   Warehouse and Production. Page-specific CSS may compose these primitives,
   but should not redefine the product-wide spacing, hierarchy or state model.
   ========================================================================== */
:root {
  --dorsa-space-1: 4px;
  --dorsa-space-2: 8px;
  --dorsa-space-3: 12px;
  --dorsa-space-4: 16px;
  --dorsa-space-5: 24px;
  --dorsa-space-6: 32px;
  --dorsa-space-7: 48px;

  --dorsa-font-xs: .75rem;
  --dorsa-font-sm: .8125rem;
  --dorsa-font-md: .875rem;
  --dorsa-font-lg: 1rem;
  --dorsa-font-xl: 1.25rem;
  --dorsa-font-2xl: clamp(1.45rem, 2vw, 1.8rem);

  --dorsa-control-height: 40px;
  --dorsa-table-row-height: 44px;
  --dorsa-content-max: 1600px;
}

/* Shared page composition */
body.dorsa-app .dorsa-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dorsa-space-5);
  margin-block: 0 var(--dorsa-space-5);
  padding: var(--dorsa-space-5);
  border: 1px solid var(--dorsa-border);
  border-radius: var(--dorsa-radius-lg);
  background: var(--dorsa-surface);
  box-shadow: var(--dorsa-shadow-sm);
}
body.dorsa-app .dorsa-page-header__main,
body.dorsa-app .dorsa-page-heading {
  display: flex;
  align-items: flex-start;
  gap: var(--dorsa-space-3);
  min-width: 0;
}
body.dorsa-app .dorsa-page-heading__icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--dorsa-primary) 18%, transparent);
  border-radius: var(--dorsa-radius-md);
  background: var(--dorsa-primary-soft);
  color: var(--dorsa-primary);
}
body.dorsa-app .dorsa-page-heading__copy { min-width: 0; }
body.dorsa-app .dorsa-page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-end: 4px;
  color: var(--dorsa-primary);
  font-size: var(--dorsa-font-xs);
  font-weight: 800;
}
body.dorsa-app .dorsa-page-heading h1 {
  margin: 0;
  color: var(--dorsa-text-primary);
  font-size: var(--dorsa-font-2xl);
  line-height: 1.45;
  letter-spacing: -.02em;
}
body.dorsa-app .dorsa-page-heading p {
  max-width: 72ch;
  margin: 6px 0 0;
  color: var(--dorsa-text-secondary);
  font-size: var(--dorsa-font-sm);
  line-height: 1.9;
}
body.dorsa-app .dorsa-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-block-start: 10px;
  color: var(--dorsa-text-muted);
  font-size: var(--dorsa-font-xs);
}
body.dorsa-app .dorsa-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--dorsa-space-2);
  min-width: 0;
}

/* Freshness is a business state, not decorative metadata. */
body.dorsa-app .dorsa-freshness {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--dorsa-border);
  border-radius: 999px;
  background: var(--dorsa-surface-secondary);
  color: var(--dorsa-text-secondary);
  font-size: var(--dorsa-font-xs);
  font-weight: 700;
  white-space: nowrap;
}
body.dorsa-app .dorsa-freshness::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}
body.dorsa-app .dorsa-freshness--fresh { color: var(--dorsa-success); }
body.dorsa-app .dorsa-freshness--stale { color: var(--dorsa-warning); }
body.dorsa-app .dorsa-freshness--error { color: var(--dorsa-danger); }

/* KPI primitives: consistent hierarchy without forcing one page layout. */
body.dorsa-app .dorsa-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--dorsa-space-3);
}
body.dorsa-app .dorsa-kpi {
  min-width: 0;
  padding: var(--dorsa-space-4);
  border: 1px solid var(--dorsa-border);
  border-radius: var(--dorsa-radius-lg);
  background: var(--dorsa-surface);
  box-shadow: var(--dorsa-shadow-sm);
}
body.dorsa-app .dorsa-kpi__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dorsa-space-2);
  margin-block-end: 10px;
}
body.dorsa-app .dorsa-kpi__label {
  color: var(--dorsa-text-secondary);
  font-size: var(--dorsa-font-sm);
  font-weight: 700;
}
body.dorsa-app .dorsa-kpi__value {
  display: block;
  margin-block: 5px 4px;
  color: var(--dorsa-text-primary);
  font-size: clamp(1.45rem, 2.35vw, 2rem);
  font-weight: 900;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
body.dorsa-app .dorsa-kpi__meta,
body.dorsa-app .dorsa-kpi__comparison {
  color: var(--dorsa-text-muted);
  font-size: var(--dorsa-font-xs);
  line-height: 1.7;
}

/* Status language. Text/icon remains meaningful when color cannot be perceived. */
body.dorsa-app .dorsa-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid var(--dorsa-border);
  border-radius: 999px;
  background: var(--dorsa-surface-secondary);
  color: var(--dorsa-text-secondary);
  font-size: var(--dorsa-font-xs);
  font-weight: 800;
  line-height: 1.5;
}
body.dorsa-app .dorsa-status--success { border-color: color-mix(in srgb, var(--dorsa-success) 28%, var(--dorsa-border)); background: var(--dorsa-success-soft); color: var(--dorsa-success); }
body.dorsa-app .dorsa-status--warning { border-color: color-mix(in srgb, var(--dorsa-warning) 32%, var(--dorsa-border)); background: var(--dorsa-warning-soft); color: var(--dorsa-warning); }
body.dorsa-app .dorsa-status--danger,
body.dorsa-app .dorsa-status--critical { border-color: color-mix(in srgb, var(--dorsa-danger) 30%, var(--dorsa-border)); background: var(--dorsa-danger-soft); color: var(--dorsa-danger); }
body.dorsa-app .dorsa-status--info { border-color: color-mix(in srgb, var(--dorsa-info) 28%, var(--dorsa-border)); background: var(--dorsa-info-soft); color: var(--dorsa-info); }
body.dorsa-app .dorsa-status--neutral { color: var(--dorsa-text-secondary); }

/* Empty, error and loading states share the same spatial language. */
body.dorsa-app .dorsa-state {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: var(--dorsa-space-6) var(--dorsa-space-5);
  border: 1px dashed var(--dorsa-border-strong);
  border-radius: var(--dorsa-radius-lg);
  background: var(--dorsa-surface-secondary);
  text-align: center;
}
body.dorsa-app .dorsa-state > div { max-width: 560px; }
body.dorsa-app .dorsa-state__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  border-radius: 14px;
  background: var(--dorsa-primary-soft);
  color: var(--dorsa-primary);
  font-size: 1.1rem;
}
body.dorsa-app .dorsa-state h3 { margin: 0 0 5px; font-size: var(--dorsa-font-lg); }
body.dorsa-app .dorsa-state p { margin: 0; color: var(--dorsa-text-muted); font-size: var(--dorsa-font-sm); line-height: 1.9; }
body.dorsa-app .dorsa-state__action { margin-block-start: var(--dorsa-space-3); }
body.dorsa-app .dorsa-skeleton {
  display: block;
  min-height: 1em;
  border-radius: var(--dorsa-radius-sm);
  background: linear-gradient(90deg, var(--dorsa-surface-secondary) 25%, color-mix(in srgb, var(--dorsa-border) 55%, var(--dorsa-surface)) 50%, var(--dorsa-surface-secondary) 75%);
  background-size: 200% 100%;
  animation: dorsa-skeleton-shimmer 1.35s ease-in-out infinite;
}
@keyframes dorsa-skeleton-shimmer { to { background-position: -200% 0; } }

/* Filter context: users should always know what is constraining the data. */
body.dorsa-app .dorsa-filter-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dorsa-space-2);
  min-height: var(--dorsa-control-height);
  padding: 8px 10px;
  border: 1px solid var(--dorsa-border);
  border-radius: var(--dorsa-radius-md);
  background: var(--dorsa-surface);
}
body.dorsa-app .dorsa-filter-summary__label {
  color: var(--dorsa-text-muted);
  font-size: var(--dorsa-font-xs);
  font-weight: 800;
}
body.dorsa-app .dorsa-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--dorsa-primary) 24%, var(--dorsa-border));
  border-radius: 999px;
  background: var(--dorsa-primary-soft);
  color: var(--dorsa-primary);
  font-size: var(--dorsa-font-xs);
  font-weight: 800;
}

/* Table utilities opt in explicitly; no existing table behaviour is changed. */
body.dorsa-app .dorsa-table-shell {
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--dorsa-border);
  border-radius: var(--dorsa-radius-lg);
  background: var(--dorsa-surface);
}
body.dorsa-app .dorsa-table-scroll { max-width: 100%; overflow: auto; overscroll-behavior-inline: contain; }
body.dorsa-app .dorsa-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--dorsa-font-sm);
}
body.dorsa-app .dorsa-table :where(th, td) { min-height: var(--dorsa-table-row-height); padding: 10px 12px; border-bottom: 1px solid var(--dorsa-border); }
body.dorsa-app .dorsa-table thead th { background: var(--dorsa-surface-secondary); color: var(--dorsa-text-secondary); font-size: var(--dorsa-font-xs); font-weight: 800; }
body.dorsa-app .dorsa-table--sticky thead th { position: sticky; top: 0; z-index: 2; }
body.dorsa-app .dorsa-number { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; text-align: left; white-space: nowrap; }

/* Keyboard focus must remain obvious in every department shell. */
body.dorsa-app :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--dorsa-primary) 34%, transparent);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  body.dorsa-app .dorsa-page-header { flex-direction: column; gap: var(--dorsa-space-4); padding: var(--dorsa-space-4); }
  body.dorsa-app .dorsa-page-actions { width: 100%; justify-content: flex-start; }
  body.dorsa-app .dorsa-page-actions > * { max-width: 100%; }
  body.dorsa-app .dorsa-freshness { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  body.dorsa-app .dorsa-skeleton { animation: none; }
}


/* ==========================================================================
   Enterprise foundation v2
   Shared composition, interaction and accessibility contract.
   These classes are intentionally opt-in so legacy pages can migrate safely
   without changing calculations, forms, chart hooks or JavaScript selectors.
   ========================================================================== */
:root {
  --dorsa-radius-xl: 16px;
  --dorsa-shadow-lg: 0 16px 42px rgba(23, 32, 44, .12);
  --dorsa-content-gutter: clamp(12px, 2vw, 24px);
  --dorsa-section-gap: clamp(20px, 2.4vw, 32px);
  --dorsa-reading-width: 72ch;
  --dorsa-z-sticky: 20;
  --dorsa-z-dropdown: 100;
  --dorsa-z-modal: 1000;
}

/* A reusable analytical section creates predictable vertical rhythm. */
body.dorsa-app .dorsa-section {
  display: grid;
  gap: var(--dorsa-space-4);
  min-width: 0;
  margin-block: 0 var(--dorsa-section-gap);
}
body.dorsa-app .dorsa-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--dorsa-space-3) var(--dorsa-space-5);
  min-width: 0;
}
body.dorsa-app .dorsa-section-header__copy { min-width: 0; }
body.dorsa-app .dorsa-section-kicker {
  display: block;
  margin-block-end: 3px;
  color: var(--dorsa-primary);
  font-size: var(--dorsa-font-xs);
  font-weight: 850;
}
body.dorsa-app .dorsa-section-title {
  margin: 0;
  color: var(--dorsa-text-primary);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
}
body.dorsa-app .dorsa-section-description {
  max-width: var(--dorsa-reading-width);
  margin: 4px 0 0;
  color: var(--dorsa-text-muted);
  font-size: var(--dorsa-font-sm);
  line-height: 1.85;
}
body.dorsa-app .dorsa-section-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dorsa-space-2);
}

/* Surface primitive for charts, tables, filters, forms and drill-down content. */
body.dorsa-app .dorsa-panel {
  min-width: 0;
  border: 1px solid var(--dorsa-border);
  border-radius: var(--dorsa-radius-lg);
  background: var(--dorsa-surface);
  box-shadow: var(--dorsa-shadow-sm);
}
body.dorsa-app .dorsa-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--dorsa-space-3);
  padding: var(--dorsa-space-4);
  border-bottom: 1px solid var(--dorsa-border);
}
body.dorsa-app .dorsa-panel__header h2,
body.dorsa-app .dorsa-panel__header h3 { margin: 0; }
body.dorsa-app .dorsa-panel__body { min-width: 0; padding: var(--dorsa-space-4); }
body.dorsa-app .dorsa-panel--flush .dorsa-panel__body { padding: 0; }

/* Standard toolbar/filter composition. Primary filters stay visible; extras can collapse. */
body.dorsa-app .dorsa-toolbar,
body.dorsa-app .dorsa-filter-bar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--dorsa-space-3);
  min-width: 0;
  padding: var(--dorsa-space-3);
  border: 1px solid var(--dorsa-border);
  border-radius: var(--dorsa-radius-lg);
  background: var(--dorsa-surface);
}
body.dorsa-app .dorsa-toolbar__group,
body.dorsa-app .dorsa-filter-bar__group {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--dorsa-space-2);
  min-width: 0;
}

/* Button hierarchy. Existing page classes remain supported by older compatibility rules. */
body.dorsa-app .dorsa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--dorsa-control-height);
  padding: 8px 13px;
  border: 1px solid var(--dorsa-border-strong);
  border-radius: var(--dorsa-radius-md);
  background: var(--dorsa-surface);
  color: var(--dorsa-text-primary);
  font: inherit;
  font-size: var(--dorsa-font-sm);
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dorsa-transition), border-color var(--dorsa-transition), color var(--dorsa-transition), box-shadow var(--dorsa-transition), transform var(--dorsa-transition);
}
body.dorsa-app .dorsa-btn:hover { border-color: color-mix(in srgb, var(--dorsa-primary) 34%, var(--dorsa-border-strong)); background: var(--dorsa-surface-secondary); }
body.dorsa-app .dorsa-btn:active { transform: translateY(1px); }
body.dorsa-app .dorsa-btn--primary { border-color: var(--dorsa-primary); background: var(--dorsa-primary); color: #fff; }
body.dorsa-app .dorsa-btn--primary:hover { border-color: var(--dorsa-primary-hover); background: var(--dorsa-primary-hover); color: #fff; }
body.dorsa-app .dorsa-btn--ghost { border-color: transparent; background: transparent; color: var(--dorsa-primary); }
body.dorsa-app .dorsa-btn--danger { border-color: color-mix(in srgb, var(--dorsa-danger) 35%, var(--dorsa-border)); background: var(--dorsa-danger-soft); color: var(--dorsa-danger); }
body.dorsa-app .dorsa-btn:disabled,
body.dorsa-app .dorsa-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; transform: none; }

/* Form primitives keep helper/error text attached to the related field. */
body.dorsa-app .dorsa-field { display: grid; gap: 6px; min-width: 0; }
body.dorsa-app .dorsa-field__label { color: var(--dorsa-text-secondary); font-size: var(--dorsa-font-sm); font-weight: 800; }
body.dorsa-app .dorsa-field__required { color: var(--dorsa-danger); }
body.dorsa-app .dorsa-field__help { color: var(--dorsa-text-muted); font-size: var(--dorsa-font-xs); line-height: 1.7; }
body.dorsa-app .dorsa-field__error { color: var(--dorsa-danger); font-size: var(--dorsa-font-xs); font-weight: 750; line-height: 1.7; }
body.dorsa-app .dorsa-field[aria-invalid="true"] :where(input, select, textarea),
body.dorsa-app :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--dorsa-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dorsa-danger) 12%, transparent); }

/* Insight and exception callouts are text-first; color supports rather than carries meaning. */
body.dorsa-app .dorsa-insight {
  display: flex;
  align-items: flex-start;
  gap: var(--dorsa-space-3);
  min-width: 0;
  padding: var(--dorsa-space-3) var(--dorsa-space-4);
  border: 1px solid var(--dorsa-border);
  border-inline-start: 3px solid var(--dorsa-info);
  border-radius: var(--dorsa-radius-md);
  background: var(--dorsa-info-soft);
  color: var(--dorsa-text-primary);
}
body.dorsa-app .dorsa-insight--success { border-inline-start-color: var(--dorsa-success); background: var(--dorsa-success-soft); }
body.dorsa-app .dorsa-insight--warning { border-inline-start-color: var(--dorsa-warning); background: var(--dorsa-warning-soft); }
body.dorsa-app .dorsa-insight--danger { border-inline-start-color: var(--dorsa-danger); background: var(--dorsa-danger-soft); }
body.dorsa-app .dorsa-insight__icon { flex: 0 0 auto; margin-block-start: 2px; }
body.dorsa-app .dorsa-insight__copy { min-width: 0; line-height: 1.85; }

/* Chart shell protects responsive sizing and gives every visualization a clear question. */
body.dorsa-app .dorsa-chart {
  min-width: 0;
  border: 1px solid var(--dorsa-border);
  border-radius: var(--dorsa-radius-lg);
  background: var(--dorsa-surface);
  box-shadow: var(--dorsa-shadow-sm);
}
body.dorsa-app .dorsa-chart__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--dorsa-space-3);
  padding: var(--dorsa-space-4) var(--dorsa-space-4) var(--dorsa-space-3);
}
body.dorsa-app .dorsa-chart__title { margin: 0; color: var(--dorsa-text-primary); font-size: var(--dorsa-font-lg); line-height: 1.6; }
body.dorsa-app .dorsa-chart__subtitle { margin: 4px 0 0; color: var(--dorsa-text-muted); font-size: var(--dorsa-font-xs); line-height: 1.75; }
body.dorsa-app .dorsa-chart__body { position: relative; min-width: 0; min-height: 280px; padding: 0 var(--dorsa-space-4) var(--dorsa-space-4); }
body.dorsa-app .dorsa-chart__body :where(canvas, svg) { display: block; max-width: 100%; }

/* Assistive text utility for custom controls outside Bootstrap. */
body.dorsa-app .dorsa-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 760px) {
  body.dorsa-app .dorsa-section-header { align-items: stretch; }
  body.dorsa-app .dorsa-section-actions,
  body.dorsa-app .dorsa-toolbar__group,
  body.dorsa-app .dorsa-filter-bar__group { width: 100%; }
  body.dorsa-app .dorsa-toolbar,
  body.dorsa-app .dorsa-filter-bar { align-items: stretch; }
  body.dorsa-app .dorsa-chart__body { min-height: 240px; padding-inline: var(--dorsa-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  body.dorsa-app .navbar .system-test-warning { animation: none; }
  body.dorsa-app .dorsa-btn { transition: none; }
}


/* === DORSA PREMIUM PROFILE & DIRECTORY WORKSPACE — 2026-09-18 === */
body.dorsa-app .dorsa-profile-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dorsa-space-5, 20px);
    margin-bottom: var(--dorsa-space-5, 20px);
    padding: clamp(18px, 2vw, 26px) clamp(18px, 2.4vw, 30px);
    border: 1px solid var(--dorsa-border, #dce3eb);
    border-radius: var(--dorsa-radius-xl, 22px);
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--dorsa-primary, #315c91) 11%, transparent) 0, transparent 35%),
        var(--dorsa-surface, #fff);
    box-shadow: var(--dorsa-shadow-sm, 0 8px 24px rgba(15, 23, 42, .06));
}
body.dorsa-app .dorsa-profile-header::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dorsa-primary, #315c91), color-mix(in srgb, var(--dorsa-primary, #315c91) 52%, #16a085), transparent 86%);
    pointer-events: none;
}
body.dorsa-app .dorsa-profile-header-copy { min-width: 0; }
body.dorsa-app .dorsa-page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin-bottom: 7px;
    color: var(--dorsa-primary, #315c91);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: -.01em;
}
body.dorsa-app .dorsa-page-kicker::before {
    content: '';
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    opacity: .55;
}
body.dorsa-app .dorsa-profile-header .page-title {
    margin: 0;
    color: var(--dorsa-text, #142334);
    font-size: clamp(1.35rem, 2vw, 1.78rem);
    line-height: 1.45;
    letter-spacing: -.025em;
}
body.dorsa-app .dorsa-profile-header .page-title-icon {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #fff;
    background: var(--dorsa-primary, #315c91);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--dorsa-primary, #315c91) 24%, transparent);
}
body.dorsa-app .dorsa-profile-header .page-subtitle {
    max-width: 760px;
    margin: 7px 58px 0 0;
    color: var(--dorsa-text-muted, #64748b);
    font-size: .86rem;
    line-height: 1.85;
}
body.dorsa-app .dorsa-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    flex: 0 0 auto;
}
body.dorsa-app .dorsa-header-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid var(--dorsa-border, #dce3eb);
    border-radius: 999px;
    background: color-mix(in srgb, var(--dorsa-primary-soft, #edf3f9) 68%, var(--dorsa-surface, #fff));
    color: var(--dorsa-text-muted, #64748b);
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}
body.dorsa-app .dorsa-header-note i { color: var(--dorsa-primary, #315c91); }
body.dorsa-app .dorsa-profile-header .btn-add {
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid color-mix(in srgb, var(--dorsa-primary, #315c91) 82%, #000 4%);
    border-radius: 12px;
    background: var(--dorsa-primary, #315c91);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--dorsa-primary, #315c91) 20%, transparent);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
body.dorsa-app .dorsa-profile-header .btn-add:hover {
    transform: translateY(-1px);
    background: var(--dorsa-primary-strong, #244d7d);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--dorsa-primary, #315c91) 25%, transparent);
}

body.dorsa-app .dorsa-stat-grid {
    gap: 12px;
    margin-bottom: 20px;
}
body.dorsa-app .dorsa-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 82px;
    padding: 15px 16px;
    border: 1px solid var(--dorsa-border, #dce3eb);
    border-radius: 16px;
    background: var(--dorsa-surface, #fff);
    box-shadow: 0 5px 18px rgba(15, 23, 42, .045);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.dorsa-app .dorsa-stat-card::after {
    content: '';
    position: absolute;
    inset-block: 14px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 999px;
    background: var(--dorsa-primary, #315c91);
    opacity: .72;
}
body.dorsa-app .dorsa-stat-card:nth-child(2)::after { background: var(--dorsa-success, #13795b); }
body.dorsa-app .dorsa-stat-card:nth-child(3)::after { background: #7c5da8; }
body.dorsa-app .dorsa-stat-card:nth-child(4)::after { background: var(--dorsa-success, #13795b); }
body.dorsa-app .dorsa-stat-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--dorsa-primary, #315c91) 22%, var(--dorsa-border, #dce3eb));
    box-shadow: 0 9px 24px rgba(15, 23, 42, .07);
}
body.dorsa-app .dorsa-stat-card .stat-pill-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 1rem;
}
body.dorsa-app .dorsa-stat-card .stat-pill-value {
    font-size: clamp(1.22rem, 1.6vw, 1.5rem);
    font-variant-numeric: tabular-nums;
}
body.dorsa-app .dorsa-stat-card .stat-pill-label { line-height: 1.65; }

body.dorsa-app .dorsa-directory-toolbar {
    position: sticky;
    top: 72px;
    z-index: 24;
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--dorsa-border, #dce3eb) 90%, transparent);
    border-radius: 15px;
    background: color-mix(in srgb, var(--dorsa-surface, #fff) 91%, transparent);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
}
body.dorsa-app .dorsa-directory-toolbar :where(input, select) {
    min-height: 40px;
}
body.dorsa-app .dorsa-directory-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid var(--dorsa-border, #dce3eb);
    border-radius: 10px;
    background: var(--dorsa-surface, #fff);
    color: var(--dorsa-text-muted, #64748b);
    font: inherit;
    font-size: .74rem;
    font-weight: 850;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}
body.dorsa-app .dorsa-directory-reset:hover {
    border-color: color-mix(in srgb, var(--dorsa-primary, #315c91) 36%, var(--dorsa-border, #dce3eb));
    background: var(--dorsa-primary-soft, #edf3f9);
    color: var(--dorsa-primary, #315c91);
}
body.dorsa-app .dorsa-directory-reset[hidden] { display: none !important; }

body.dorsa-app .dorsa-directory-card {
    content-visibility: auto;
    border-color: var(--dorsa-border, #dce3eb);
    background: var(--dorsa-surface, #fff);
    box-shadow: 0 4px 16px rgba(15, 23, 42, .05);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.dorsa-app .dorsa-directory-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--dorsa-primary, #315c91) 30%, var(--dorsa-border, #dce3eb));
    box-shadow: 0 14px 34px rgba(15, 23, 42, .09);
}
body.dorsa-app .dorsa-directory-card:focus-visible {
    outline: none;
    border-color: var(--dorsa-primary, #315c91);
    box-shadow: 0 0 0 3px var(--dorsa-focus, rgba(49, 92, 145, .22)), 0 12px 28px rgba(15, 23, 42, .08);
}
body.dorsa-app .dorsa-detail-panel {
    scroll-margin-top: 92px;
    border-color: var(--dorsa-border, #dce3eb);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
}

body.dorsa-app.dark-mode .dorsa-profile-header,
body.dorsa-app.dark-mode .dorsa-stat-card,
body.dorsa-app.dark-mode .dorsa-directory-reset {
    border-color: var(--dorsa-border);
    background-color: var(--dorsa-surface);
}
body.dorsa-app.dark-mode .dorsa-profile-header {
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--dorsa-primary) 15%, transparent) 0, transparent 38%),
        var(--dorsa-surface);
}
body.dorsa-app.dark-mode .dorsa-directory-toolbar {
    border-color: var(--dorsa-border);
    background: color-mix(in srgb, var(--dorsa-surface) 92%, transparent);
}
body.dorsa-app.dark-mode .dorsa-header-note {
    border-color: var(--dorsa-border);
    background: color-mix(in srgb, var(--dorsa-primary-soft) 72%, var(--dorsa-surface));
}

@media (max-width: 900px) {
    body.dorsa-app .dorsa-profile-header { align-items: flex-start; flex-direction: column; }
    body.dorsa-app .dorsa-header-actions { width: 100%; justify-content: space-between; }
    body.dorsa-app .dorsa-directory-toolbar { position: static; }
}
@media (max-width: 600px) {
    body.dorsa-app .dorsa-profile-header { padding: 16px; border-radius: 16px; }
    body.dorsa-app .dorsa-profile-header .page-title-icon { width: 40px; height: 40px; border-radius: 12px; }
    body.dorsa-app .dorsa-profile-header .page-subtitle { margin-right: 0; }
    body.dorsa-app .dorsa-header-actions { align-items: stretch; flex-direction: column; }
    body.dorsa-app .dorsa-header-note { justify-content: center; white-space: normal; text-align: center; }
    body.dorsa-app .dorsa-profile-header .btn-add { justify-content: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    body.dorsa-app .dorsa-profile-header .btn-add,
    body.dorsa-app .dorsa-stat-card,
    body.dorsa-app .dorsa-directory-card { transition: none; }
    body.dorsa-app .dorsa-stat-card:hover,
    body.dorsa-app .dorsa-directory-card:hover,
    body.dorsa-app .dorsa-profile-header .btn-add:hover { transform: none; }
}


/* DORSA SECTION NAV + NON-BLOCKING PAGE FEEDBACK — 2026-09-18 */
body.dorsa-app .dorsa-section-nav {
  position: sticky;
  top: calc(var(--navbar-height, 64px) + 10px);
  z-index: 42;
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: min(100%, 1120px);
  margin: 14px auto 18px;
  padding: 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  border: 1px solid color-mix(in srgb, var(--dorsa-border) 88%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--dorsa-surface) 92%, transparent);
  box-shadow: 0 10px 28px rgba(23, 32, 44, .08);
  backdrop-filter: blur(14px) saturate(1.15);
}
body.dorsa-app .dorsa-section-nav::-webkit-scrollbar { display: none; }
body.dorsa-app .dorsa-section-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--dorsa-text-secondary);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dorsa-transition), color var(--dorsa-transition), border-color var(--dorsa-transition), transform var(--dorsa-transition);
}
body.dorsa-app .dorsa-section-nav a i { color: var(--dorsa-text-muted); font-size: 11px; }
body.dorsa-app .dorsa-section-nav a:hover {
  border-color: var(--dorsa-border);
  background: var(--dorsa-surface-secondary);
  color: var(--dorsa-text-primary);
  transform: translateY(-1px);
}
body.dorsa-app .dorsa-section-nav a.is-active,
body.dorsa-app .dorsa-section-nav a[aria-current="location"] {
  border-color: color-mix(in srgb, var(--dorsa-primary) 18%, var(--dorsa-border));
  background: var(--dorsa-primary-soft);
  color: var(--dorsa-primary-active);
}
body.dorsa-app .dorsa-section-nav a.is-active i,
body.dorsa-app .dorsa-section-nav a[aria-current="location"] i { color: var(--dorsa-primary); }
body.dorsa-app .dorsa-section-anchor { scroll-margin-top: calc(var(--navbar-height, 64px) + 82px); }

/* The app already has local KPI/chart skeletons. Navigation feedback should not cover them. */
body.dorsa-app .loader-overlay {
  inset: 0 !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: calc(var(--navbar-height, 64px) + 10px) 12px 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}
body.dorsa-app .loader-content {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px);
  padding: 9px 14px !important;
  border: 1px solid color-mix(in srgb, var(--dorsa-border-strong) 82%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--dorsa-surface) 94%, transparent) !important;
  color: var(--dorsa-text-primary) !important;
  box-shadow: 0 12px 32px rgba(23, 32, 44, .14) !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;
}
body.dorsa-app .loader-content .spinner {
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  border-width: 2px !important;
  border-color: var(--dorsa-border-strong) !important;
  border-top-color: var(--dorsa-primary) !important;
}
body.dorsa-app .loader-text {
  color: var(--dorsa-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  white-space: nowrap;
}
body.dark-mode.dorsa-app .loader-overlay { background: transparent !important; }
body.dark-mode.dorsa-app .loader-content {
  border-color: var(--dorsa-border) !important;
  background: color-mix(in srgb, var(--dorsa-surface) 94%, transparent) !important;
}
body.has-ticker.dorsa-app .dorsa-section-nav { top: calc(var(--navbar-height, 64px) + 54px); }
body.has-ticker.dorsa-app .loader-overlay { padding-top: calc(var(--navbar-height, 64px) + 54px) !important; }
@media (max-width: 760px) {
  body.dorsa-app .dorsa-section-nav {
    top: calc(var(--navbar-height, 58px) + 7px);
    width: calc(100% - 20px);
    margin: 10px auto 14px;
    justify-content: flex-start;
  }
  body.dorsa-app .dorsa-section-nav a { min-height: 34px; padding-inline: 10px; font-size: 11px; }
  body.dorsa-app .dorsa-section-anchor { scroll-margin-top: calc(var(--navbar-height, 58px) + 74px); }
  body.has-ticker.dorsa-app .dorsa-section-nav { top: calc(var(--navbar-height, 58px) + 51px); }
}
@media (prefers-reduced-motion: reduce) {
  body.dorsa-app .dorsa-section-nav a { transition: none; }
}


/* DORSA PORTAL SHELL SEARCH — 2026-09-18 */
body.dorsa-app .dorsa-portal-sidebar-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px 12px;
  padding: 0 10px;
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--border, #dfe5ec) 86%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface, #fff) 94%, var(--primary-light, #eaf1f8));
  color: var(--text-muted, #6c7889);
  transition: border-color var(--dorsa-transition, 180ms ease), box-shadow var(--dorsa-transition, 180ms ease), background var(--dorsa-transition, 180ms ease);
}
body.dorsa-app .dorsa-portal-sidebar-search:focus-within {
  border-color: color-mix(in srgb, var(--primary, #315c91) 70%, var(--border, #dfe5ec));
  box-shadow: var(--dorsa-focus, 0 0 0 3px rgba(49,92,145,.16));
  background: var(--surface, #fff);
}
body.dorsa-app .dorsa-portal-sidebar-search > i { flex: 0 0 auto; font-size: .78rem; color: var(--text-muted, #6c7889); }
body.dorsa-app .dorsa-portal-sidebar-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--text, #253142);
  font: inherit;
  font-size: .76rem;
}
body.dorsa-app .dorsa-portal-sidebar-search input::placeholder { color: var(--text-muted, #6c7889); opacity: .84; }
body.dorsa-app .dorsa-portal-sidebar-search kbd {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 2px 6px;
  border: 1px solid var(--border, #dfe5ec);
  border-bottom-color: var(--border-strong, #cbd4df);
  border-radius: 6px;
  background: var(--surface-muted, #f8fafb);
  color: var(--text-muted, #6c7889);
  font: 700 10px/1.45 inherit;
  text-align: center;
}
body.dorsa-app .dorsa-portal-sidebar-search button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted, #6c7889);
  cursor: pointer;
}
body.dorsa-app .dorsa-portal-sidebar-search button:hover { background: var(--surface-muted, #f8fafb); color: var(--text, #253142); }
body.dorsa-app .dorsa-portal-sidebar-search button:focus-visible { outline: 2px solid var(--primary, #315c91); outline-offset: 1px; }
body.dorsa-app .dorsa-sidebar-search-empty {
  margin: 12px;
  padding: 18px 14px;
  border: 1px dashed var(--border, #dfe5ec);
  border-radius: 12px;
  color: var(--text-muted, #6c7889);
  background: color-mix(in srgb, var(--surface-muted, #f8fafb) 86%, transparent);
  text-align: center;
  font-size: .75rem;
  line-height: 1.8;
}
body.dorsa-app .dorsa-sidebar-search-empty i { display: block; margin-bottom: 7px; color: var(--primary, #315c91); font-size: 1rem; }
body.dorsa-app .sidebar-nav :is(.nav-item,.nav-link)[hidden],
body.dorsa-app .sidebar-nav :is(.nav-section-label,.sidebar-section-label)[hidden],
body.dorsa-app .dorsa-sidebar-search-empty[hidden] { display: none !important; }
body.dorsa-app :is([data-dorsa-section-nav] + section, [data-dorsa-section-nav] ~ section[id]) { scroll-margin-top: 132px; }
body.dark-mode .dorsa-portal-sidebar-search {
  border-color: var(--border, #334155);
  background: color-mix(in srgb, var(--surface, #111827) 92%, var(--primary, #315c91));
}
@media (max-width: 720px) {
  body.dorsa-app .dorsa-portal-sidebar-search { margin-inline: 10px; }
  body.dorsa-app .dorsa-portal-sidebar-search kbd { display: none; }
}