/* CRM-wide color tokens. Default = light (no dark FOUC for new/unset users).
   Preference: html[data-crm-theme]=light|dark|system
   Resolved: html[data-crm-resolved]=light|dark
   Analytics --sa-* aliases reuse the same palette.

   Button inks (do not conflate):
   --crm-btn-ink  = text on yellow/brand CTAs — always dark
   --crm-on-ink   = text on ink-filled contrast buttons (bg=--crm-ink)
*/

:root {
  color-scheme: light;
  --crm-bg: #f4f5f7;
  --crm-paper: #ffffff;
  --crm-ink: #18212c;
  --crm-sub: #4b5563; /* AA muted on paper/soft; was #697584 (axe fail on receiving chrome) */
  --crm-line: #e6e9ee;
  --crm-yellow: #e6a800;
  --crm-blue: #486fe0;
  --crm-green: #168475;
  --crm-soft: #edf2ff;
  --crm-warn: #926012;
  --crm-warn-bg: #fff7e5;
  --crm-warn-line: #f0d9a8;
  --crm-warn-inline-bg: #fff7ed;
  --crm-danger: #991b1b;
  --crm-danger-bg: #fef2f2;
  --crm-danger-line: #fca5a5;
  --crm-success: #15803d;
  --crm-success-bg: #f0fdf4;
  --crm-plan: #9aa3af;
  --crm-axis: #c5cad3;
  --crm-btn-ink: #0f1419; /* crm-color-allow: brand — on yellow CTA */
  --crm-on-ink: #ffffff; /* text on ink-filled contrast buttons */
  --crm-header-bg: #151515;
  --crm-header-ink: #ffffff;
  --crm-bottom-nav-bg: #ffffff;
  --crm-tip-bg: #18212c;
  --crm-tip-ink: #ffffff;
  --crm-tip-muted: rgba(255, 255, 255, 0.82);
  --crm-tip-line: rgba(255, 255, 255, 0.18);
  --crm-tip-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  --crm-scroll-track: #f1f5f9;
  --crm-scroll-thumb: #FFB800;
  --crm-overlay: rgba(15, 20, 25, 0.45);
  --crm-focus: rgba(230, 168, 0, 0.35);
  --crm-disabled: #9aa3af;
  /* Disabled controls: keep label readable (AA ≥ 4.5:1 on soft bg); do not fade whole button. */
  --crm-btn-disabled-bg: #e8ebf0;
  --crm-btn-disabled-ink: #3d4654;
  --crm-btn-disabled-border: #c5cad3;
  --crm-btn-disabled-primary-bg: #f0e2a8;
  --crm-btn-disabled-primary-ink: #3a2f0a;
  --crm-btn-disabled-primary-border: #d4b84a;
  --sa-bg: var(--crm-bg);
  --sa-paper: var(--crm-paper);
  --sa-ink: var(--crm-ink);
  --sa-sub: var(--crm-sub);
  --sa-line: var(--crm-line);
  --sa-yellow: var(--crm-yellow);
  --sa-blue: var(--crm-blue);
  --sa-green: var(--crm-green);
  --sa-soft: var(--crm-soft);
  --sa-warn: var(--crm-warn);
  --sa-warn-bg: var(--crm-warn-bg);
  --sa-warn-line: var(--crm-warn-line);
  --sa-warn-inline-bg: var(--crm-warn-inline-bg);
  --sa-danger: var(--crm-danger);
  --sa-danger-bg: var(--crm-danger-bg);
  --sa-danger-line: var(--crm-danger-line);
  --sa-plan: var(--crm-plan);
  --sa-axis: var(--crm-axis);
  --sa-btn-ink: var(--crm-btn-ink);
  --sa-on-ink: var(--crm-on-ink);
  --sa-tip-bg: var(--crm-tip-bg);
  --sa-tip-ink: var(--crm-tip-ink);
  --sa-tip-muted: var(--crm-tip-muted);
  --sa-tip-line: var(--crm-tip-line);
  --sa-tip-shadow: var(--crm-tip-shadow);
  --sa-scroll-fade: linear-gradient(90deg, transparent, var(--crm-paper) 70%);
}

html[data-crm-resolved="dark"] {
  color-scheme: dark;
  --crm-bg: #0f1419;
  --crm-paper: #1a222d;
  --crm-ink: #e8eef6;
  --crm-sub: #9aa8b8;
  --crm-line: #2c3848;
  --crm-yellow: #ffc933;
  --crm-blue: #8aa4ff;
  --crm-green: #2bb8a0;
  --crm-soft: #243044;
  --crm-warn: #f0c674;
  --crm-warn-bg: #3a2e14;
  --crm-warn-line: #6b5420;
  --crm-warn-inline-bg: #3a2e14;
  --crm-danger: #fca5a5;
  --crm-danger-bg: #3a1c1c;
  --crm-danger-line: #7f1d1d;
  --crm-success: #86efac;
  --crm-success-bg: #14532d;
  --crm-plan: #8b95a5;
  --crm-axis: #4a5565;
  --crm-btn-ink: #0f1419; /* crm-color-allow: brand — on yellow CTA */
  --crm-on-ink: #0f1419; /* dark text on light ink fill in dark theme */
  --crm-header-bg: #151515;
  --crm-header-ink: #ffffff;
  --crm-bottom-nav-bg: #121820;
  --crm-tip-bg: #101820;
  --crm-tip-ink: #e8eef6;
  --crm-tip-muted: rgba(232, 238, 246, 0.78);
  --crm-tip-line: rgba(232, 238, 246, 0.16);
  --crm-tip-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  --crm-scroll-track: #1a222d;
  --crm-scroll-thumb: #ffc933;
  --crm-overlay: rgba(0, 0, 0, 0.55);
  --crm-focus: rgba(255, 201, 51, 0.45);
  --crm-disabled: #5a6573;
  --crm-btn-disabled-bg: #2a3340;
  --crm-btn-disabled-ink: #c5ced9;
  --crm-btn-disabled-border: #3d4654;
  --crm-btn-disabled-primary-bg: #4a3f1a;
  --crm-btn-disabled-primary-ink: #f5e6a8;
  --crm-btn-disabled-primary-border: #6b5a20;
}

/* Page shell — light default; pages use the same --crm-* tokens */
html, body {
  background: var(--crm-bg);
  color: var(--crm-ink);
}

/* Do not invert images / print / media */
img, video, svg, canvas, iframe {
  color-scheme: inherit;
}
@media print {
  /* Force light surface tokens so cards/tables print readable (PDF/images unchanged). */
  :root,
  html,
  html[data-crm-resolved],
  html[data-crm-resolved="dark"] {
    color-scheme: light !important;
    --crm-bg: #ffffff !important;
    --crm-paper: #ffffff !important;
    --crm-ink: #111827 !important;
    --crm-sub: #4b5563 !important;
    --crm-line: #e5e7eb !important;
    --crm-soft: #f9fafb !important;
    --crm-yellow: #e6a800 !important;
    --crm-blue: #486fe0 !important;
    --crm-green: #168475 !important;
    --crm-warn: #926012 !important;
    --crm-warn-bg: #fff7e5 !important;
    --crm-warn-line: #f0d9a8 !important;
    --crm-warn-inline-bg: #fff7ed !important;
    --crm-danger: #991b1b !important;
    --crm-danger-bg: #fef2f2 !important;
    --crm-danger-line: #fca5a5 !important;
    --crm-success: #15803d !important;
    --crm-success-bg: #f0fdf4 !important;
    --crm-plan: #9aa3af !important;
    --crm-axis: #c5cad3 !important;
    --crm-btn-ink: #0f1419 !important;
    --crm-on-ink: #ffffff !important;
    --crm-header-bg: #151515 !important;
    --crm-header-ink: #ffffff !important;
    --crm-bottom-nav-bg: #ffffff !important;
    --crm-tip-bg: #18212c !important;
    --crm-tip-ink: #ffffff !important;
    --crm-disabled: #9aa3af !important;
    --crm-overlay: rgba(15, 20, 25, 0.45) !important;
    --sa-bg: var(--crm-bg) !important;
    --sa-paper: var(--crm-paper) !important;
    --sa-ink: var(--crm-ink) !important;
    --sa-sub: var(--crm-sub) !important;
    --sa-line: var(--crm-line) !important;
    --sa-soft: var(--crm-soft) !important;
    --sa-btn-ink: var(--crm-btn-ink) !important;
    --sa-on-ink: var(--crm-on-ink) !important;
  }
  html, body {
    background: var(--crm-bg) !important;
    color: var(--crm-ink) !important;
  }
  .crm-paper, .card, .panel, .modal-content, .dropdown-menu,
  table, th, td, input, select, textarea {
    background: var(--crm-paper) !important;
    color: var(--crm-ink) !important;
    border-color: var(--crm-line) !important;
  }
}

/* Shared form/table/card surfaces when authors use tokens */
.crm-paper, .card, .panel, .modal-content, .dropdown-menu {
  background: var(--crm-paper);
  color: var(--crm-ink);
  border-color: var(--crm-line);
}

input:not([type="checkbox"]):not([type="radio"]),
select, textarea {
  background: var(--crm-paper);
  color: var(--crm-ink);
  border-color: var(--crm-line);
}
input:disabled, select:disabled, textarea:disabled {
  color: var(--crm-disabled);
  opacity: 0.85;
  cursor: not-allowed;
}

/* Buttons: disabled = unavailable action, but label stays readable (no whole-control fade). */
button:disabled,
.btn:disabled,
a.btn[aria-disabled="true"],
.btn[aria-disabled="true"] {
  opacity: 1;
  color: var(--crm-btn-disabled-ink);
  background-color: var(--crm-btn-disabled-bg);
  border: 1px solid var(--crm-btn-disabled-border);
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}

/* Brand / yellow primary CTAs when disabled — keep dark ink on muted gold, not gray-on-pale. */
button.btn-primary:disabled,
.btn-primary:disabled,
button.btn-save:disabled,
.btn-save:disabled,
button.btn-finish-primary:disabled,
.btn-finish-primary:disabled,
button.btn-finish:disabled,
.btn-finish:disabled,
.btn-finish-primary.rcv-finish-needs-invoice,
.btn-finish.rcv-finish-needs-invoice {
  opacity: 1;
  color: var(--crm-btn-disabled-primary-ink);
  background-color: var(--crm-btn-disabled-primary-bg);
  border-color: var(--crm-btn-disabled-primary-border);
}

table {
  color: var(--crm-ink);
}
th, td {
  border-color: var(--crm-line);
}

/* Theme menu in header */
.crm-theme-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.crm-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  padding: 0;
}
.crm-theme-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}
.crm-theme-btn:focus-visible {
  outline: 2px solid var(--crm-yellow);
  outline-offset: 2px;
  color: #fff;
}
.crm-theme-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.crm-theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--crm-paper);
  color: var(--crm-ink);
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  box-shadow: var(--crm-tip-shadow);
  padding: 6px;
  z-index: 96;
}
.crm-theme-menu[hidden] {
  display: none !important;
}
.crm-theme-menu-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--crm-sub);
  padding: 6px 10px 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.crm-theme-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--crm-ink);
  text-align: left;
  font: inherit;
  font-size: 13px;
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.crm-theme-option:hover {
  background: var(--crm-soft);
}
.crm-theme-option:focus-visible {
  outline: 2px solid var(--crm-yellow);
  outline-offset: 1px;
}
.crm-theme-option[aria-checked="true"] {
  font-weight: 650;
}
.crm-theme-option[aria-checked="true"]::after {
  content: "✓";
  color: var(--crm-yellow);
  font-weight: 700;
}
.crm-theme-status {
  font-size: 11px;
  color: var(--crm-sub);
  padding: 4px 10px 6px;
  min-height: 1.2em;
}
.crm-theme-status.is-error {
  color: var(--crm-danger);
}
.crm-theme-status.is-ok {
  color: var(--crm-green);
}
.crm-theme-status.is-pending {
  color: var(--crm-sub);
}
.crm-theme-btn.is-pending {
  opacity: 0.72;
}
.crm-theme-option:disabled {
  opacity: 0.55;
  cursor: wait;
}
.crm-theme-toast {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 97;
  min-width: 200px;
  max-width: min(280px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--crm-line);
  background: var(--crm-paper);
  color: var(--crm-ink);
  font-size: 12px;
  line-height: 1.35;
  box-shadow: var(--crm-tip-shadow);
}
.crm-theme-toast.is-visible {
  display: block;
}
.crm-theme-toast.is-error {
  border-color: var(--crm-danger-line);
  background: var(--crm-danger-bg);
  color: var(--crm-danger);
}
.crm-theme-toast.is-ok {
  border-color: var(--crm-line);
  color: var(--crm-success);
}
.crm-theme-toast.is-pending {
  color: var(--crm-sub);
}
/* When menu open, toast sits below menu to avoid overlap */
.crm-theme-menu:not([hidden]) ~ .crm-theme-toast.is-visible {
  top: calc(100% + 12px + 148px);
}

@media (max-width: 768px) {
  .crm-theme-wrap {
    margin-left: 4px;
  }
  .crm-theme-menu {
    right: -6px;
    width: min(220px, calc(100vw - 24px));
  }
}