/*
 * Dorsa unified product theme
 * Loaded last by every application shell. It aligns the Sales/BI and Materials
 * 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);
}

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 Materials 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 .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. */
body.dorsa-app .navbar .system-test-warning {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: min(680px, 50vw);
  margin-inline: auto;
  padding: 7px 14px;
  border: 1px solid #dc2626 !important;
  border-radius: 8px;
  background: #dc2626 !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
  animation: dorsa-test-warning-blink 1.2s steps(1, end) infinite !important;
}
body.dorsa-app .navbar .system-test-warning i,
body.dorsa-app .navbar .system-test-warning strong { color: inherit !important; }

@keyframes dorsa-test-warning-blink {
  0%, 49% {
    opacity: 1;
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
  }
  50%, 100% {
    opacity: .4;
    border-color: #ef4444;
    background: #fee2e2;
    color: #991b1b;
  }
}

@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; }
}