/* STITCHFLOW-THEME-CONSISTENCY-V3
   Shared presentation layer for database-backed per-user appearance.
   Semantic success, warning, error and status colors remain module-owned. */
:root {
  --sf-theme: var(--green, #164b3b);
  --sf-page: var(--paper, #f5f7f5);
  --sf-text: var(--ink, #17221e);
  --sf-theme-soft: color-mix(in srgb, var(--sf-theme) 9%, white);
  --sf-theme-line: color-mix(in srgb, var(--sf-theme) 28%, white);
  --sf-card: color-mix(in srgb, var(--sf-page) 18%, white);
}

html, body, .main, .content, .workspace, .workspace-page {
  background-color: var(--sf-page);
  color: var(--sf-text);
}

.title h1, .title h2, .title h3,
.workspace-title, .page-title,
.card h1, .card h2, .card h3,
.edit-card h1, .edit-card h2, .edit-card h3 {
  color: var(--sf-text);
}

.eyebrow, a:not(.danger),
.back, .outline,
button.back, button.outline,
[class*="back-to"], [data-back] {
  color: var(--sf-theme);
}

.primary,
button.primary,
.tools button,
button[class*="primary"],
[class*="primary-action"] {
  background-color: var(--sf-theme);
  border-color: var(--sf-theme);
  color: #fff;
}

input:focus, select:focus, textarea:focus,
button:focus-visible, a:focus-visible {
  border-color: var(--sf-theme);
  outline: 2px solid color-mix(in srgb, var(--sf-theme) 28%, transparent);
  outline-offset: 1px;
}

.card, .edit-card, .detail-head, .detail-section,
.metric, .table-wrap, .panel, [class*="workspace-card"] {
  border-color: var(--sf-theme-line);
}

table thead th,
.table thead th,
[role="columnheader"] {
  background-color: var(--sf-theme);
  border-color: var(--sf-theme);
  color: #fff;
}

table tbody tr:hover td,
.table tbody tr:hover td,
.click-row:hover {
  background-color: var(--sf-theme-soft);
}

.detail-section > h2,
.card > h2,
.panel > header,
[class*="section-head"],
[class*="panel-head"] {
  border-color: var(--sf-theme-line);
}

/* Administrative hierarchy cards use a soft theme header without changing controls. */
[class*="organization"] section > header,
[class*="organization"] .card > header,
[class*="org-"] section > header,
[class*="org-"] .card > header {
  background: var(--sf-theme-soft);
  border-top: 3px solid var(--sf-theme);
}

/* Keep form and data surfaces readable when a strong page color is selected. */
.card, .edit-card, .detail-head, .detail-section,
.metric, .table-wrap, .panel,
input, select, textarea {
  color: var(--sf-text);
}

@media print {
  table thead th, .table thead th, [role="columnheader"] {
    background: #eee !important;
    color: #000 !important;
  }
}