/* Storyboard Canvas — Unified App Design Tokens & Components */

/* §17.358 — scrollable-but-chromeless strips (the budget sub-menu
   et al). overflow-x:auto on Windows paints scrollbar arrow buttons
   (the "chevron shape" the user flagged); this keeps wheel/trackpad/
   drag scrolling while hiding the scrollbar chrome entirely. */
.sb-hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.sb-hide-scrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; }

:root {
  /* Producer Suite — Ice Blue */
  --producer-accent: #60A5FA;
  --producer-accent-hover: #3B82F6;
  --producer-accent-active: #1D4ED8;
  --producer-bg: #EBF4FF;
  --producer-bg-soft: #F0F7FF;
  --producer-text: #1E40AF;

  /* Director Suite — Soft Coral/Orange */
  --director-accent: #F97316;
  --director-accent-hover: #EA580C;
  --director-accent-active: #C2410C;
  --director-bg: #FFF7ED;
  --director-bg-soft: #FFF3E8;
  --director-text: #9A3412;

  /* Shared neutrals — brand-aligned per CLAUDE.md §4.3 (off-white
     #FAFAF9 body / canvas grey #ECEDF0 / white surface #FFFFFF).
     2026-04-28: --app-bg fixed from #F8F9FA → brand #FAFAF9 so app
     surfaces stop showing the slightly-cooler "random hue" the user
     flagged. White cards (#FFFFFF) sit on this off-white body, with
     #ECEDF0 reserved for canvas regions (drop zones, neutral fills). */
  --app-bg: #FAFAF9;
  --app-bg-alt: #FFFFFF;
  --app-canvas: #ECEDF0;
  --app-surface: #FFFFFF;
  --app-border: #E8E4E0;
  --app-divider: #F3F4F6;
  --app-text: #111827;
  --app-text-secondary: #374151;
  --app-text-muted: #6B7280;
  --app-text-light: #6B7280;
  --app-text-very-light: #D1D5DB;

  /* Per-app accent palette — keep in lockstep with the canonical
     TS registry at lib/canon/suite-accents.ts AND APP_ACCENTS in
     components/app/project-hero.tsx. Each app surface highlights
     using its own accent so the suite reads as one product but
     each app keeps its identity. Coral (#E07850) stays as the
     global brand accent for dashboard, sign-in, marketing, and
     any cross-app element. Adding a new app: add to all three
     files (this CSS, suite-accents.ts, project-hero.tsx). */
  /* ── Brand (universal coral) ── */
  --accent-brand:     #E07850;  /* Coral — dashboard / global brand */
  /* ── Production-planning apps ── */
  --accent-producer:  #EC4899;  /* Pink */
  --accent-breakdown: #74C6D4;  /* §17.457 — teal per user swatch (was §17.77 orange #E58754) */
  --accent-budget:    #C8841C;  /* sienna brown — user swatch 2026-06-01 (was dusty salmon #E2A28A) */
  --accent-calendar:  #9466F6;  /* §17.84 — vibrant violet per user swatch */
  --accent-diary:     #F08CA8;  /* §17.82 — vibrant fuchsia per user swatch (was §17.75 muted mauve #B884A8) */
  --accent-callsheet: #85ADF4;  /* §17.122 — cornflower blue (was teal #14B8A6) */
  --accent-cast:      #E23232;  /* §17.479 — vivid red per user swatch (was §17.80 goldenrod #F2C538) */
  --accent-characters:#E23232;  /* §17.479 — characters share cast vivid red */
  --accent-location:  #7AC943;  /* §17.77 — vibrant grass green per user swatch (was sage #A8C9AC) */
  --accent-locations: #7AC943;  /* §17.77 — vibrant grass green */
  --accent-props:     #A40562;  /* §17.77 — deep magenta per user swatch (was §17.74 soft mint #A3D5C8) */
  --accent-vehicles:  #C8412A;  /* §17.77 — brick red per user swatch (was §17.60 aqua #7CD3DC) */
  --accent-shoot:     #1F47FF;  /* §17.122 — electric royal blue (was #2563EB) */
  --accent-shoot-day: #1F47FF;  /* §17.122 — same suite, day lens */
  --accent-crew:      #1F47FF;  /* §17.122 — shares shoot canon */
  --accent-equipment: #1F47FF;  /* §17.122 — shares shoot canon */
  /* ── Director / creative apps ── */
  --accent-script:    #F97316;  /* §17.157 Batch 7 — orange canon per nav-bar IcScript + app-colors.ts:40 (was stale blue #3B82F6) */
  --accent-shotlist:  #06B6D4;  /* §17.x: Cyan — nav source-of-truth (was sky #0EA5E9) */
  --accent-editor:    #6366F1;  /* Indigo — Storyboard editor */
  --accent-draw:      #7C3AED;  /* Purple — Canvas Draw (was sky, moved 2026-05-01) */
  --accent-artist:    #E83E8C;  /* §17.157 Batch 7 — magenta canon per §17.42 flip + nav-bar IcArtist + app-colors.ts:64 (was stale violet #A855F7) */
  --accent-animate:   #14B8A6;  /* §17.130 MEGA-ANI-A teal — restored from coral drift; matches nav-bar IcAnimate */
  /* ── Coordination + admin apps ── */
  --accent-review:    #0891B2;  /* Cyan-700 — Editorial Review */
  --accent-team:      #16A34A;  /* Green-600 */
  --accent-team-chat: #16A34A;  /* Green-600 */
  --accent-files:     #E07850;  /* §17.468b — brand coral (was slate #475569; the §17.86 coral migration missed the theme var) */
  --accent-assets:    #0F766E;  /* Teal-700 */
  --accent-asset-library: #0F766E; /* Teal-700 */
  --accent-billing:   #E07850;  /* Coral — global surface */
  --accent-account:   #E07850;  /* Coral — global surface */

  /* Typography scale */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 28px;

  /* Font weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 1px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.12);
  --shadow-xl: 0 8px 32px rgba(0,0,0,0.16);

  /* Transitions */
  --transition-fast: 100ms ease-out;
  --transition-normal: 200ms ease-out;
  --transition-slow: 300ms ease-out;
}

/* ── Suite context color system ───────────────────────── */
.suite-producer {
  --suite-accent: var(--producer-accent);
  --suite-accent-hover: var(--producer-accent-hover);
  --suite-accent-active: var(--producer-accent-active);
  --suite-bg: var(--producer-bg);
  --suite-bg-soft: var(--producer-bg-soft);
  --suite-text: var(--producer-text);
}

.suite-director {
  --suite-accent: var(--director-accent);
  --suite-accent-hover: var(--director-accent-hover);
  --suite-accent-active: var(--director-accent-active);
  --suite-bg: var(--director-bg);
  --suite-bg-soft: var(--director-bg-soft);
  --suite-text: var(--director-text);
}

/* Default to producer if no suite specified */
:root {
  --suite-accent: var(--producer-accent);
  --suite-accent-hover: var(--producer-accent-hover);
  --suite-accent-active: var(--producer-accent-active);
  --suite-bg: var(--producer-bg);
  --suite-bg-soft: var(--producer-bg-soft);
  --suite-text: var(--producer-text);
}

/* ── Shared app page layout ───────────────────────────── */
.app-page {
  padding: 24px 32px 48px;
  max-width: 1400px;
  margin: 0 auto;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.app-page-sm {
  padding: 20px 24px 48px;
}

.app-page-lg {
  padding: 32px 40px 48px;
}

/* ── Consistent page title ────────────────────────────── */
.app-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--app-text);
  margin: 0 0 4px;
  letter-spacing: -0.3px;
  line-height: 1.3;
}

.app-subtitle {
  font-size: var(--text-base);
  color: var(--app-text-muted);
  margin: 0 0 24px;
  font-weight: var(--font-normal);
}

/* ── Section header ───────────────────────────────────── */
.section-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--app-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
  display: block;
}

.section-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--app-text);
  margin: 0 0 12px;
}

/* ── Shared button system ─────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: background var(--transition-fast), color var(--transition-fast), transform 100ms ease-out, box-shadow var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  outline: none;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button variants */
.btn-primary {
  background: var(--suite-accent);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled) {
  background: var(--suite-accent-hover);
  box-shadow: var(--shadow-md);
}

.btn-primary:focus-visible {
  outline: 2px solid #E07850;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(224, 120, 80, 0.18);
}

.btn-secondary {
  background: var(--app-surface);
  color: var(--app-text);
  border: 1px solid var(--app-border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--app-bg);
  border-color: var(--app-text-light);
}

.btn-secondary:focus-visible {
  border-color: var(--suite-accent);
  outline: 2px solid #E07850;
  outline-offset: 2px;
}

.btn-ghost {
  background: transparent;
  color: var(--app-text-muted);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--app-bg);
  color: var(--app-text);
}

.btn-ghost:focus-visible {
  outline: 2px solid #E07850;
  outline-offset: 2px;
}

.btn-danger {
  background: #FEE2E2;
  color: #DC2626;
}

.btn-danger:hover:not(:disabled) {
  background: #FECACA;
}

.btn-success {
  background: #DCFCE7;
  color: #16A34A;
}

.btn-success:hover:not(:disabled) {
  background: #BBDDE7;
}

/* Button sizes */
.btn-xs {
  padding: 4px 8px;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.btn-sm {
  padding: 6px 10px;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: 10px 18px;
  font-size: var(--text-md);
  border-radius: var(--radius-lg);
}

.btn-xl {
  padding: 12px 24px;
  font-size: var(--text-lg);
  border-radius: var(--radius-lg);
}

/* Full width button */
.btn-block {
  width: 100%;
}

/* ── Shared card/panel ────────────────────────────────── */
.app-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal);
}

.app-card:hover {
  box-shadow: var(--shadow-md);
}

.app-card-header {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--app-text);
  margin: 0 0 12px;
}

.app-card-body {
  color: var(--app-text-secondary);
  font-size: var(--text-base);
  line-height: 1.5;
}

.app-card-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--app-divider);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Panel with suite accent ──────────────────────────── */
.app-panel {
  background: var(--suite-bg-soft);
  border: 1px solid color-mix(in srgb, var(--suite-accent) 20%, transparent);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.app-panel-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--suite-text);
  margin: 0 0 12px;
}

/* ── Table styles ─────────────────────────────────────── */
.app-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.app-table th {
  padding: 10px 12px;
  background: var(--app-bg);
  border-bottom: 2px solid var(--app-border);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--app-text-muted);
  text-align: left;
  white-space: nowrap;
  vertical-align: bottom;
}

.app-table td {
  padding: 12px;
  border-bottom: 1px solid var(--app-border);
  color: var(--app-text);
  vertical-align: middle;
}

.app-table tr:hover td {
  background: var(--app-bg);
}

.app-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Form input styles ─────────────────────────────────── */
.app-input,
.app-textarea,
.app-select {
  padding: 8px 12px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--app-text);
  background: var(--app-surface);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-input:focus,
.app-textarea:focus,
.app-select:focus {
  border-color: var(--suite-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--suite-accent) 15%, transparent);
}

.app-input:disabled,
.app-textarea:disabled,
.app-select:disabled {
  background: var(--app-bg);
  color: var(--app-text-muted);
  cursor: not-allowed;
}

.app-input::placeholder {
  color: var(--app-text-light);
}

.app-textarea {
  min-height: 100px;
  resize: vertical;
}

/* ── Input group ──────────────────────────────────────── */
.app-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-input-group > * {
  flex: 1;
}

.app-input-icon {
  color: var(--app-text-muted);
  font-size: var(--text-lg);
}

/* ── Label ────────────────────────────────────────────── */
.app-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--app-text);
  margin-bottom: 4px;
}

.app-label-required::after {
  content: ' *';
  color: #DC2626;
}

.app-label-hint {
  font-size: var(--text-xs);
  color: var(--app-text-muted);
  margin-top: 4px;
  display: block;
}

.app-label-error {
  font-size: var(--text-xs);
  color: #DC2626;
  margin-top: 4px;
  display: block;
}

/* ── Tab bar ──────────────────────────────────────────── */
.app-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--app-border);
  margin-bottom: 20px;
  overflow-x: auto;
}

.app-tab {
  padding: 10px 16px;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--app-text-muted);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  font-family: inherit;
  white-space: nowrap;
}

.app-tab:hover {
  color: var(--app-text);
}

.app-tab.active {
  color: var(--suite-accent);
  border-bottom-color: var(--suite-accent);
  font-weight: var(--font-semibold);
}

/* ── Badge/tag ─────────────────────────────────────────── */
.app-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.app-badge-blue {
  background: #DBEAFE;
  color: #1D4ED8;
}

.app-badge-coral {
  background: #FFEDD5;
  color: #C2410C;
}

.app-badge-green {
  background: #DCFCE7;
  color: #16A34A;
}

.app-badge-amber {
  background: #FEF3C7;
  color: #D97706;
}

.app-badge-red {
  background: #FEE2E2;
  color: #DC2626;
}

.app-badge-purple {
  background: #E9D5FF;
  color: #7E22CE;
}

.app-badge-grey {
  background: #F3F4F6;
  color: #6B7280;
}

.app-badge-lg {
  padding: 4px 10px;
  font-size: var(--text-sm);
}

/* ── Toolbar strip ────────────────────────────────────– */
.app-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.app-toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--app-border);
  margin: 0 4px;
}

.app-toolbar-spacer {
  flex: 1;
}

/* ── List ─────────────────────────────────────────────── */
.app-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.app-list-item {
  padding: 12px;
  border-bottom: 1px solid var(--app-border);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.app-list-item:hover {
  background: var(--app-bg);
}

.app-list-item.active {
  background: var(--suite-bg);
  border-left: 3px solid var(--suite-accent);
  padding-left: 9px;
}

.app-list-item:last-child {
  border-bottom: none;
}

/* ── Grid layout ──────────────────────────────────────– */
.app-grid {
  display: grid;
  gap: 16px;
}

.app-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.app-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.app-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ── Flex utilities ───────────────────────────────────── */
.app-flex {
  display: flex;
  gap: 8px;
}

.app-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.app-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.app-flex-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Empty state ──────────────────────────────────────── */
.app-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--app-text-muted);
}

.app-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
  line-height: 1;
}

.app-empty-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--app-text);
  margin: 0 0 8px;
}

.app-empty-desc {
  font-size: var(--text-base);
  margin: 0 0 20px;
}

.app-empty-action {
  margin-top: 12px;
}

/* ── Alert/notification ───────────────────────────────– */
.app-alert {
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border-left: 4px solid;
  font-size: var(--text-base);
  margin-bottom: 12px;
}

.app-alert-info {
  background: #EFF6FF;
  border-left-color: #0284C7;
  color: #0C4A6E;
}

.app-alert-success {
  background: #F0FDF4;
  border-left-color: #16A34A;
  color: #15803D;
}

.app-alert-warning {
  background: #FEFCE8;
  border-left-color: #EAB308;
  color: #713F12;
}

.app-alert-error {
  background: #FEF2F2;
  border-left-color: #DC2626;
  color: #7F1D1D;
}

/* ── Modal overlay ────────────────────────────────────– */
.app-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  backdrop-filter: blur(2px);
}

.app-modal {
  background: var(--app-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 200ms ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app-modal-header {
  padding: 20px 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-modal-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--app-text);
  margin: 0;
  flex: 1;
}

.app-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--app-text-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.app-modal-close:hover {
  background: var(--app-bg);
  color: var(--app-text);
}

.app-modal-body {
  padding: 16px 24px;
  color: var(--app-text-secondary);
}

.app-modal-footer {
  padding: 12px 24px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--app-divider);
}

/* ── Divider ──────────────────────────────────────────── */
.app-divider {
  height: 1px;
  background: var(--app-border);
  margin: 12px 0;
}

.app-divider-vertical {
  width: 1px;
  height: 100%;
  background: var(--app-border);
}

/* ── Utility spacing classes ──────────────────────────– */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* ── Responsive tweaks ────────────────────────────────– */
@media (max-width: 768px) {
  .app-page {
    padding: 16px 20px 32px;
  }

  .app-page-sm {
    padding: 16px 16px 32px;
  }

  .app-title {
    font-size: var(--text-xl);
  }

  .app-grid-2,
  .app-grid-3,
  .app-grid-4 {
    grid-template-columns: 1fr;
  }

  .app-modal {
    max-width: 90vw;
  }
}

/* ── Print styles ─────────────────────────────────────– */
@media print {
  .app-toolbar,
  .btn,
  [role="navigation"] {
    display: none;
  }

  body {
    background: white;
    color: black;
  }

  .app-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* ============================================================
   2026-04-28 — Suite cohesion pass
   ============================================================
   Added per-app suite-context classes so any app shell can opt
   into its own accent by setting `class="suite-<app>"` on the
   wrapper. CSS variables resolve through `var(--suite-accent)`
   so existing `.btn-primary` / `.app-tab` / focus rings auto-
   tint to the right colour without per-component overrides.

   Brand dashed-card utility mirrors the welcome-screen drop-zone
   styling — coral 2px dashed border, soft off-white fill, slight
   hover lift. Use for empty-state callouts, "drop file here"
   surfaces, "Try sample data" tiles, etc.
   ============================================================ */

/* Production-planning suite */
.suite-brand     { --suite-accent: var(--accent-brand);     --suite-accent-hover: #D06840; }
.suite-producer  { --suite-accent: var(--accent-producer);  --suite-accent-hover: #DB2777; }
.suite-breakdown { --suite-accent: var(--accent-breakdown); --suite-accent-hover: #4FA7B6; }
.suite-budget    { --suite-accent: var(--accent-budget);    --suite-accent-hover: #9C6810; }
.suite-calendar  { --suite-accent: var(--accent-calendar);  --suite-accent-hover: #7C3AED; }
.suite-diary     { --suite-accent: var(--accent-diary);     --suite-accent-hover: #D87391; }
.suite-callsheet { --suite-accent: var(--accent-callsheet); --suite-accent-hover: #5B8FE0; }
.suite-cast      { --suite-accent: var(--accent-cast);      --suite-accent-hover: #C42626; }
.suite-characters { --suite-accent: var(--accent-characters); --suite-accent-hover: #C42626; }
.suite-location  { --suite-accent: var(--accent-location);  --suite-accent-hover: #5FA82B; }
.suite-locations { --suite-accent: var(--accent-locations); --suite-accent-hover: #5FA82B; }
.suite-props     { --suite-accent: var(--accent-props);     --suite-accent-hover: #7E0349; }
.suite-vehicles  { --suite-accent: var(--accent-vehicles);  --suite-accent-hover: #A6321F; }
.suite-shoot     { --suite-accent: var(--accent-shoot);     --suite-accent-hover: #1538D1; }
.suite-shoot-day { --suite-accent: var(--accent-shoot-day); --suite-accent-hover: #1538D1; }
.suite-crew      { --suite-accent: var(--accent-crew);      --suite-accent-hover: #1538D1; }
.suite-equipment { --suite-accent: var(--accent-equipment); --suite-accent-hover: #1538D1; }
/* Director / creative suite */
.suite-script    { --suite-accent: var(--accent-script);    --suite-accent-hover: #EA580C; } /* §17.157 Batch 7 — orange hover per nav-bar canon */
.suite-shotlist  { --suite-accent: var(--accent-shotlist);  --suite-accent-hover: #0891B2; }
.suite-editor    { --suite-accent: var(--accent-editor);    --suite-accent-hover: #4F46E5; }
.suite-draw      { --suite-accent: var(--accent-draw);      --suite-accent-hover: #6D28D9; }
.suite-artist    { --suite-accent: var(--accent-artist);    --suite-accent-hover: #DB2777; } /* §17.157 Batch 7 — magenta hover per §17.42 + nav-bar canon */
.suite-animate   { --suite-accent: var(--accent-animate);   --suite-accent-hover: #0F9488; } /* §17.130 ANI-P0-4: teal hover */
/* Coordination + admin suite */
.suite-review    { --suite-accent: var(--accent-review);    --suite-accent-hover: #0E7490; }
.suite-team      { --suite-accent: var(--accent-team);      --suite-accent-hover: #15803D; }
.suite-team-chat { --suite-accent: var(--accent-team-chat); --suite-accent-hover: #15803D; }
.suite-files     { --suite-accent: var(--accent-files);     --suite-accent-hover: #D06840; }
.suite-assets    { --suite-accent: var(--accent-assets);    --suite-accent-hover: #115E59; }
.suite-asset-library { --suite-accent: var(--accent-asset-library); --suite-accent-hover: #115E59; }
.suite-billing   { --suite-accent: var(--accent-billing);   --suite-accent-hover: #D06840; }
.suite-account   { --suite-accent: var(--accent-account);   --suite-accent-hover: #D06840; }

/* Per-app tonal scale — every .suite-* wrapper auto-derives a
   9-step monotone palette from its base accent via color-mix().
   Use these when an app needs multiple distinct shades within
   the same surface (status pills, category bars, chip series,
   sparklines, etc.) so the colours read as one family rather than
   collapsing to the single base accent or reaching for unrelated
   hues.

   Tints (50-400) lighten toward white; shades (600-900) darken
   toward the brand text colour. 500 is the base accent itself.

   Example use in a per-app component:
     background: var(--suite-accent-100);   // very soft tint chip
     border:     1px solid var(--suite-accent-300);
     color:      var(--suite-accent-700);   // legible text
*/
[class*="suite-"] {
  --suite-accent-50:  color-mix(in srgb, var(--suite-accent) 6%,  #fff);
  --suite-accent-100: color-mix(in srgb, var(--suite-accent) 12%, #fff);
  --suite-accent-200: color-mix(in srgb, var(--suite-accent) 22%, #fff);
  --suite-accent-300: color-mix(in srgb, var(--suite-accent) 38%, #fff);
  --suite-accent-400: color-mix(in srgb, var(--suite-accent) 58%, #fff);
  --suite-accent-500: var(--suite-accent);
  --suite-accent-600: color-mix(in srgb, var(--suite-accent) 88%, #1a1818);
  --suite-accent-700: color-mix(in srgb, var(--suite-accent) 70%, #1a1818);
  --suite-accent-800: color-mix(in srgb, var(--suite-accent) 55%, #1a1818);
  --suite-accent-900: color-mix(in srgb, var(--suite-accent) 38%, #1a1818);

  /* Convenience aliases for the most-common roles. */
  --suite-accent-bg:        var(--suite-accent-50);   /* card / pill background tint */
  --suite-accent-bg-strong: var(--suite-accent-100);  /* hover / active background */
  --suite-accent-border:    var(--suite-accent-200);  /* subtle border */
  --suite-accent-border-strong: var(--suite-accent-400);
  --suite-accent-text:      var(--suite-accent-700);  /* legible text on tint bg */
  --suite-accent-text-mute: var(--suite-accent-600);
}

/* Brand dashed-card utility — matches the welcome-screen drop-zone
   look. Use for empty-state callouts and any surface that should
   read as "drop / pick / start fresh". The hover state shifts the
   border to the suite accent so each app's empty states feel
   consistent with its identity. */
.brand-dashed-card {
  border: 2px dashed #E8E4E0;
  background: var(--app-bg, #FAFAF9);
  border-radius: 16px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.brand-dashed-card:hover {
  border-color: var(--suite-accent, var(--accent-brand));
  background: #fff;
  transform: translateY(-1px);
}

.brand-dashed-card.is-dragging {
  border-color: var(--suite-accent, var(--accent-brand));
  background: color-mix(in srgb, var(--suite-accent, var(--accent-brand)) 6%, #fff);
}

.brand-dashed-card .brand-dashed-card-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--app-text, #1a1818);
  margin: 0;
}

.brand-dashed-card .brand-dashed-card-sub {
  font-size: 12.5px;
  color: var(--app-text-muted, #6B7280);
  margin: 0;
}

/* Body baseline — every (app) route under app/(app)/* gets the
   off-white brand background unless it explicitly overrides. The
   user flagged some app surfaces showing a slightly cooler hue
   than the welcome-screen background; this normalises them. */
body {
  background: var(--app-bg);
}