/* Tenant identity uses accents; semantic warning/error/success colors stay intact. */
.app-body[data-skin]:not([data-skin="classic"]) {
  --color-brand-50: var(--tenant-soft); --color-brand-100: var(--tenant-soft);
  --color-brand-500: var(--tenant-accent); --color-brand-700: var(--tenant-accent);
  background: var(--tenant-soft);
}
.app-body[data-skin]:not([data-skin="classic"]) .app-shell-main { background: linear-gradient(160deg, var(--tenant-soft), #f8fafc 65%); }
.app-body[data-skin]:not([data-skin="classic"]) > div > aside { background: var(--tenant-dark); }
.app-body[data-skin]:not([data-skin="classic"]) .app-header { border-top: 3px solid var(--tenant-accent); }
.app-body[data-skin]:not([data-skin="classic"]) .module-action-button-primary { background: var(--tenant-accent); border-color: var(--tenant-accent); color: white; }
.app-body[data-skin]:not([data-skin="classic"]) .company-context summary { border-color: var(--tenant-accent); }
.app-body[data-skin]:not([data-skin="classic"]) .company-context [aria-current] { background: var(--tenant-soft); color: var(--tenant-accent); }
.app-body[data-skin]:not([data-skin="classic"]) :is(input, select, textarea, button):focus-visible { outline-color: var(--tenant-accent); }
html.theme-dark .app-body[data-skin]:not([data-skin="classic"]) { background: var(--tenant-dark) !important; }
html.theme-dark .app-body[data-skin]:not([data-skin="classic"]) .app-shell-main { background: linear-gradient(155deg, var(--tenant-dark), #0b1220 65%); }
html.theme-dark .app-body[data-skin]:not([data-skin="classic"]) .company-context [aria-current] { background: var(--tenant-dark); color: var(--tenant-bright); }
.app-body[data-font="modern"] { font-family: "Inter", "Segoe UI", system-ui, sans-serif; }
.app-body[data-font="modern"] :is(h1, h2, h3) { font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; }
.app-body[data-font="technical"] { font-family: "Segoe UI", system-ui, sans-serif; }
.app-body[data-font="technical"] :is(h1, h2, h3) { font-family: ui-monospace, "Cascadia Code", monospace; letter-spacing: -0.025em; }
.app-body[data-font]:not([data-font="classic"]) :is(td, dd) { font-variant-numeric: tabular-nums; }
.app-header-inner { min-width: 0; }
.app-header-actions { min-width: 0; }
.company-context { flex-shrink: 0; max-width: 100%; }
.company-context summary { min-height: 88px; }
.company-context summary::-webkit-details-marker { display: none; }
@media (min-width: 1536px) { .app-header-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.skin-swatch { display: inline-block; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; border: 1px solid #cbd5e1; }
.skin-swatch-classic { background: linear-gradient(135deg, #f97316 50%, #0f172a 50%); }
.skin-swatch-cyan { background: linear-gradient(135deg, #22d3ee 50%, #07232d 50%); }
.skin-swatch-emerald { background: linear-gradient(135deg, #34d399 50%, #092b25 50%); }
.skin-swatch-violet { background: linear-gradient(135deg, #c4b5fd 50%, #211438 50%); }
.skin-choice:has(input:checked) { border-color: #64748b; box-shadow: 0 0 0 1px #64748b; }
@media print { .app-header { display: none; } }
.company-context > .app-popover { left: 0; right: auto; max-width: calc(100vw - 2rem); }
@media (min-width: 1536px) { .company-context > .app-popover { left: auto; right: 0; } }
.app-body[data-skin]:not([data-skin="classic"]) .sidebar-link-active { border-color: var(--tenant-accent); background: var(--tenant-dark); color: var(--tenant-bright); }
.app-body[data-skin]:not([data-skin="classic"]) .company-hero-glow { background: var(--tenant-soft); }
html.theme-dark .app-body[data-skin]:not([data-skin="classic"]) .company-hero-glow { background: var(--tenant-accent); opacity: .15; }

/* Shared controls: recolor actions, never status badges or destructive actions. */
.app-body[data-skin]:not([data-skin="classic"]) :is(button, a, input[type="submit"]):is(.bg-slate-900, .bg-slate-950, .module-action-button-primary) {
  background: var(--tenant-accent) !important; border-color: var(--tenant-accent) !important; color: #fff !important;
}
.app-body[data-skin]:not([data-skin="classic"]) :is(button, a):is(.bg-sky-50, .module-action-button-soft) {
  background: var(--tenant-soft) !important; border-color: var(--tenant-accent) !important; color: var(--tenant-accent) !important;
}
.app-body[data-skin]:not([data-skin="classic"]) :is(button, a, input[type="submit"]):is(.bg-slate-900, .bg-slate-950, .module-action-button-primary):hover {
  background: color-mix(in srgb, var(--tenant-accent) 85%, black) !important;
}
.app-body[data-skin]:not([data-skin="classic"]) :is(.sidebar-group-open, .sidebar-group-summary-active, .sidebar-link-active) {
  background: color-mix(in srgb, var(--tenant-dark) 88%, var(--tenant-accent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tenant-bright) 25%, transparent);
}
.app-body[data-skin]:not([data-skin="classic"]) :is(.sidebar-group-summary-active, .sidebar-link-active, .sidebar-group[open] .sidebar-group-chevron) { color: var(--tenant-bright) !important; }
.app-body[data-skin]:not([data-skin="classic"]) :is(.search-select-option.is-selected, .keyboard-active-option) {
  background: var(--tenant-soft) !important; color: var(--tenant-accent) !important;
}
.app-body[data-skin]:not([data-skin="classic"]) input:is([type="checkbox"], [type="radio"]) { accent-color: var(--tenant-accent); }
html.theme-dark .app-body[data-skin]:not([data-skin="classic"]) :is(button, a):is(.bg-sky-50, .module-action-button-soft),
html.theme-dark .app-body[data-skin]:not([data-skin="classic"]) :is(.search-select-option.is-selected, .keyboard-active-option) {
  background: var(--tenant-dark) !important; color: var(--tenant-bright) !important; border-color: var(--tenant-accent) !important;
}
.skin-swatch-graphite { background: linear-gradient(135deg, #202127 50%, #2dd4bf 50%); }
.app-body[data-skin="graphite"] :is(.module-action-button, .sidebar-group, .sidebar-group-summary, .sidebar-link) { border-radius: .6rem; }

/* Base-layer importance bridges legacy dark utilities until views use semantic
   classes exclusively. Restricted to application UI; document/PDF layouts have no app-body. */
@layer base {
  .app-body[data-skin] .app-shell-content table { background: var(--ui-table-background) !important; color: var(--ui-table-text) !important; border-color: var(--ui-table-border) !important; }
  .app-body[data-skin] .app-shell-content table :is(thead, tfoot),
  .app-body[data-skin] .app-shell-content table thead :is(tr, th) { background: var(--ui-table-header) !important; color: var(--ui-table-text) !important; border-color: var(--ui-table-border) !important; }
  .app-body[data-skin] .app-shell-content table tbody { background: var(--ui-table-background) !important; }
  .app-body[data-skin] .app-shell-content table tbody > tr { border-color: var(--ui-table-border) !important; }
  .app-body[data-skin] .app-shell-content table tbody > tr:not([class*="bg-red"]):not([class*="bg-rose"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([aria-selected="true"]) { background: var(--ui-table-background) !important; }
  .app-body[data-skin] .app-shell-content table tbody > tr:nth-child(even):not([class*="bg-red"]):not([class*="bg-rose"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([aria-selected="true"]) { background: var(--ui-table-stripe) !important; }
  .app-body[data-skin] .app-shell-content table tbody > tr:not([class*="bg-red"]):not([class*="bg-rose"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):hover { background: var(--ui-table-hover) !important; }
  .app-body[data-skin] .app-shell-content table :is(th, td) { border-color: var(--ui-table-border) !important; font-variant-numeric: tabular-nums; }
  .app-body[data-skin] .app-shell-content table tbody :is(tr, td):not([class*="text-red"]):not([class*="text-rose"]):not([class*="text-emerald"]):not([class*="text-amber"]) { color: var(--ui-table-text) !important; }
  .app-body[data-skin] .app-shell-content table :is(.text-slate-400, .text-slate-500, .text-slate-600) { color: var(--ui-muted) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) :is(.app-shell-main, .app-shell-content) { background: var(--ui-canvas) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) :is(.app-header, .app-popover, .search-select-panel) { background: var(--ui-raised) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .app-shell-main :is(.bg-white, .bg-white\/70, .bg-white\/80, .sales-sheet, .purchases-table) { background: var(--ui-surface) !important; color: var(--ui-text) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .app-shell-main :is(.border-slate-200, .border-slate-300, .purchases-table) { border-color: var(--ui-border) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="color"]):not(.search-select-search):not(.bg-transparent):not(.ui-size-active), select, textarea, .search-select-trigger) { background: var(--ui-input) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) :is(input, textarea)::placeholder { color: var(--ui-muted) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .module-action-button:not(.module-action-button-primary):not(.module-action-button-soft):not(.module-action-button-warning):not(.module-action-button-success) { background: var(--ui-raised) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) :is(button, a, input[type="submit"]):is(.bg-slate-900, .bg-slate-950, .module-action-button-primary) { background: var(--ui-action) !important; color: var(--ui-on-action) !important; border-color: var(--ui-action) !important; }
  html.theme-dark .app-body[data-skin="graphite"] > div > aside { background: var(--tenant-dark) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) :is(.sidebar-group-summary-active, .sidebar-link-active) { background: color-mix(in srgb, var(--tenant-dark) 88%, var(--tenant-accent)) !important; color: var(--tenant-bright) !important; }
}
@layer base {
  .app-body[data-skin]:not([data-skin="classic"]) .app-shell-main :is(.bg-slate-50, .bg-slate-100):not(thead):not(tbody):not(tr):not(th):not(td) { background-color: var(--ui-raised) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .app-shell-main :is(.text-slate-400, .text-slate-500) { color: var(--ui-muted) !important; }
}
/* Sales uses a grid rather than a table: it consumes the same semantic palette. */
@layer base {
  .app-body[data-skin]:not([data-skin="classic"]) .ui-document-form :is(.text-slate-900, .text-slate-950, .text-slate-700, .text-slate-600) { color: var(--ui-text) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .ui-document-form :is(.text-slate-400, .text-slate-500) { color: var(--ui-muted) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .ui-document-form :is(.sales-pos-header, [data-sale-lines-target="paymentRow"]) { background: var(--ui-raised) !important; border-color: var(--ui-border) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .ui-document-form :is(.border-slate-100, .border-slate-200, .border-slate-300, .sales-line-row) { border-color: var(--ui-border) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .sales-size-field { background: var(--ui-hover) !important; border-color: var(--ui-border) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .ui-emphasis { background: var(--ui-emphasis) !important; border-color: var(--ui-emphasis) !important; color: var(--ui-on-emphasis) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .ui-emphasis :is(.text-slate-400, .text-slate-500) { color: var(--ui-emphasis-muted) !important; }
}
@layer base {
  .app-body[data-skin]:not([data-skin="classic"]) .ui-action-primary { background: var(--ui-action) !important; color: var(--ui-on-action) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .ui-accent-soft { background: var(--tenant-soft) !important; color: var(--tenant-accent) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .ui-document-form .ui-line-active { background: var(--ui-hover) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .ui-document-form .ui-line-active .sales-size-field { --tw-ring-color: var(--tenant-accent); }
  .app-body[data-skin]:not([data-skin="classic"]) .ui-document-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="color"]):not(.ui-size-active), textarea, select, .search-select-trigger):focus { border-color: var(--tenant-accent) !important; outline-color: var(--tenant-accent) !important; }
  html.theme-dark .app-body[data-skin]:not([data-skin="classic"]) .ui-accent-soft { background: var(--tenant-dark) !important; color: var(--tenant-bright) !important; }
}

/* Quick customer forms scroll inside the viewport, including mobile browser chrome. */
.quick-customer-dialog {
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.quick-customer-dialog .search-select-panel {
  position: relative;
  top: auto;
  margin-top: .5rem;
}
[data-search-select-target="list"] { overscroll-behavior: contain; }

/* Layout follows available space, including browser zoom, without shrinking controls. */
.app-header-inner { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.app-header-inner > :first-child { flex: 1 1 22rem; min-width: 0; }
.app-header-actions { flex: 0 1 auto; justify-content: flex-end; }
.dashboard-home { container-type: inline-size; }
.dashboard-overview { grid-template-columns: minmax(0, 1fr); align-items: start; }
.dashboard-overview > * { min-width: 0; }
.dashboard-welcome { container-type: inline-size; }
.dashboard-title { font-size: clamp(1.875rem, 5.5cqi, 3rem); line-height: 1.14; text-wrap: balance; }
.dashboard-actions, .dashboard-modules { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
@container (min-width: 72rem) { .dashboard-overview { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }
@media (max-width: 639px) {
  .app-header-actions { width: 100%; justify-content: flex-start; }
  .dashboard-home { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .dashboard-overview > * { padding: 1.25rem; }
}
@media (pointer: coarse) {
  .app-header-actions button, .company-context summary, .dashboard-home a { min-height: 44px; }
}

.dashboard-quick-card { position: relative; min-width: 0; }
.dashboard-quick-card > a { display: block; height: 100%; }
.dashboard-quick-card > .context-help { position: absolute; top: .65rem; right: .65rem; }

/* Shared interactive surfaces use the same roles in every module. Keep the
   classic skin intact; semantic status colors never inherit brand accents. */
@layer base {
  .app-body[data-skin]:not([data-skin="classic"]) :is(.search-select-panel, .date-picker-panel) {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
  }
  .app-body[data-skin]:not([data-skin="classic"]) .search-select-search-wrap {
    background: var(--ui-raised) !important;
    border-color: var(--ui-border) !important;
  }
  /* The wrapper owns the search field surface, not a second white rectangle. */
  .app-body[data-skin]:not([data-skin="classic"]) .search-select-panel input.search-select-search {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--ui-text) !important;
  }
  .app-body[data-skin]:not([data-skin="classic"]) .search-select-search-wrap:focus-within {
    border-color: var(--tenant-accent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tenant-accent) 15%, transparent);
  }
  .app-body[data-skin]:not([data-skin="classic"]) :is(.search-select-option, .date-picker-day-current, .date-picker-nav, .date-picker-footer-action, .date-picker-trigger) {
    color: var(--ui-text) !important;
  }
  .app-body[data-skin]:not([data-skin="classic"]) .date-picker-trigger {
    background: var(--ui-input) !important; border-color: var(--ui-border) !important;
  }
  .app-body[data-skin]:not([data-skin="classic"]) :is(.search-select-option, .date-picker-day, .date-picker-nav, .date-picker-footer-action):hover,
  .app-body[data-skin]:not([data-skin="classic"]) .search-select-option:is(.is-selected, .is-keyboard-active) {
    background: var(--ui-hover) !important;
    color: var(--tenant-accent) !important;
  }
  .app-body[data-skin]:not([data-skin="classic"]) .date-picker-day-muted { color: var(--ui-muted) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .date-picker-day-today { box-shadow: inset 0 0 0 1px var(--tenant-accent); }
  .app-body[data-skin]:not([data-skin="classic"]) .date-picker-day.date-picker-day-selected {
    background: var(--ui-action) !important; color: var(--ui-on-action) !important;
    box-shadow: none;
  }
  .app-body[data-skin]:not([data-skin="classic"]) .date-picker-panel :is([data-date-picker-target="monthLabel"], .date-picker-nav) { color: var(--ui-text) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .date-picker-panel :is(.border-slate-200, .date-picker-nav) { border-color: var(--ui-border) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) :is(.search-select-trigger, .date-picker-trigger, input:not([type="hidden"]), textarea, select):focus-visible {
    border-color: var(--tenant-accent) !important;
    outline-color: var(--tenant-accent) !important;
    --tw-ring-color: var(--tenant-accent);
  }
  .app-body[data-skin]:not([data-skin="classic"]) :is(.search-select-trigger, .date-picker-trigger):focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-accent) 18%, transparent);
  }
  .app-body[data-skin]:not([data-skin="classic"]) :is(.customer-check-chip, .form-check-chip):has(input:checked) {
    background: var(--ui-hover) !important; border-color: var(--tenant-accent) !important;
  }
  .app-body[data-skin]:not([data-skin="classic"]) :is(.customer-check-chip, .form-check-chip) input:checked {
    background-color: var(--tenant-accent) !important; border-color: var(--tenant-accent) !important;
  }
  html.theme-dark .app-body[data-skin]:not([data-skin="classic"]) :is(.search-select-option, .date-picker-day, .date-picker-nav, .date-picker-footer-action):hover,
  html.theme-dark .app-body[data-skin]:not([data-skin="classic"]) .search-select-option:is(.is-selected, .is-keyboard-active) { color: var(--tenant-bright) !important; }
  html.theme-dark .app-body[data-skin]:not([data-skin="classic"]) .date-picker-day.date-picker-day-selected { color: var(--ui-on-action) !important; }
}

@layer base {
  .app-body[data-skin]:not([data-skin="classic"]) .ui-emphasis input[readonly].bg-transparent {
    background: transparent !important; color: var(--ui-on-emphasis) !important;
    border-color: transparent !important;
  }
  .app-body[data-skin]:not([data-skin="classic"]) input[data-multi-search-select-target="search"] {
    background: transparent !important; color: var(--ui-text) !important;
    border: 0 !important; box-shadow: none !important;
  }
}

/* Both checkbox renderers share one color contract. Native-looking inputs
   already draw the tick as SVG: do not draw a second, differently colored tick. */
@layer base {
  .app-body input[type="checkbox"]:not(.sr-only)::after { content: none !important; }
  .app-body[data-skin]:not([data-skin="classic"]) input[type="checkbox"]:not(.sr-only) {
    background-color: var(--ui-input) !important; border-color: var(--ui-border) !important;
  }
  .app-body[data-skin]:not([data-skin="classic"]) input[type="checkbox"]:not(.sr-only):checked,
  .app-body[data-skin]:not([data-skin="classic"]) .peer:checked + :is(.customer-check-indicator, .form-check-indicator) {
    background-color: var(--ui-action) !important; border-color: var(--ui-action) !important;
    color: var(--ui-on-action) !important;
  }
  .app-body[data-skin]:not([data-skin="classic"]) input[type="checkbox"]:not(.sr-only):checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='m4 10 4 4 8-8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }
  .app-body[data-skin]:not([data-skin="classic"]) .peer:checked + :is(.customer-check-indicator, .form-check-indicator)::after {
    border-right-color: var(--ui-on-action) !important; border-bottom-color: var(--ui-on-action) !important;
  }
  .app-body[data-skin]:not([data-skin="classic"]) :is(.customer-check-indicator, .form-check-indicator) {
    background-color: var(--ui-input) !important; border-color: var(--ui-border) !important;
  }
  .app-body[data-skin]:not([data-skin="classic"]) .peer:focus-visible + :is(.customer-check-indicator, .form-check-indicator) {
    outline: 2px solid var(--tenant-accent); outline-offset: 2px;
  }
  .app-body[data-skin]:not([data-skin="classic"]) .ui-brand-label { color: var(--tenant-accent) !important; }
  html.theme-dark .app-body[data-skin]:not([data-skin="classic"]) .ui-brand-label { color: var(--tenant-bright) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .company-print-settings-dialog :is(.border-violet-100, .border-sky-100) { border-color: var(--ui-border) !important; }
  .app-body[data-skin]:not([data-skin="classic"]) .company-print-settings-dialog input[type="file"]::file-selector-button {
    background: var(--ui-action) !important; color: var(--ui-on-action) !important;
  }
  .app-body[data-skin]:not([data-skin="classic"]) .company-print-settings-dialog .ui-emphasis .ui-brand-label { color: var(--tenant-bright) !important; }
}

.company-feature-options { align-items: start; }
.company-feature-options > *, .company-feature-options .form-check-chip { min-width: 0; }
.company-feature-options .form-check-chip { min-height: 44px; }
@layer base {
  .app-body[data-skin]:not([data-skin="classic"]) input[type="file"]::file-selector-button {
    background: var(--ui-action) !important; color: var(--ui-on-action) !important;
  }
}

/* Shared import palette: SIRE, document imports and catalog uploads use the
   same roles. Keep warning/error colors independent from company identity. */
@layer base {
  .app-body[data-skin] .ui-import-modal {
    background-color: var(--ui-raised) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
  }
  .app-body[data-skin] .ui-import-modal :is(.module-action-button-primary, input[type="submit"]) {
    background: var(--ui-action) !important;
    color: var(--ui-on-action) !important;
    border-color: var(--ui-action) !important;
  }
  .app-body[data-skin] .ui-import-modal .module-action-button-soft {
    background: var(--tenant-soft) !important;
    color: var(--tenant-accent) !important;
    border-color: var(--tenant-accent) !important;
  }
  .app-body[data-skin] .ui-import-modal .ui-import-accent {
    color: var(--tenant-accent) !important;
  }
  .app-body[data-skin] .ui-import-modal .ui-import-soft {
    background: var(--tenant-soft) !important;
    color: var(--tenant-accent) !important;
    border-color: var(--ui-border) !important;
  }
  .app-body[data-skin] .ui-import-modal .sire-columns-button {
    color: var(--tenant-accent) !important;
    border-color: var(--ui-border) !important;
    background: var(--ui-surface) !important;
  }
  .app-body[data-skin] .ui-import-modal .sire-columns-button:hover:not(:disabled) {
    background: var(--tenant-soft) !important;
    border-color: var(--tenant-accent) !important;
  }
  .app-body[data-skin] .ui-import-modal :focus-visible {
    outline-color: var(--tenant-accent) !important;
  }
  .app-body[data-skin] .ui-import-modal input[type="file"]::file-selector-button {
    background: var(--ui-action) !important;
    color: var(--ui-on-action) !important;
    border: 0;
    border-radius: .65rem;
    padding: .5rem .75rem;
    margin-right: .75rem;
    font-weight: 600;
    cursor: pointer;
  }
  html.theme-dark .app-body[data-skin] .ui-import-modal :is(.ui-import-accent, .sire-columns-button) {
    color: var(--tenant-bright) !important;
  }
  html.theme-dark .app-body[data-skin] .ui-import-modal .ui-import-soft,
  html.theme-dark .app-body[data-skin] .ui-import-modal .sire-columns-button:hover:not(:disabled) {
    background: var(--tenant-dark) !important;
    color: var(--tenant-bright) !important;
  }
}

/* Active sizes are an editing cue, always amber regardless of tenant palette.
   The explicit state wins over the global input surface and focus colors. */
@layer base {
  .app-body[data-skin] .app-shell-main .ui-document-form input.ui-size-active {
    background: #fef3c7 !important;
    border-color: #fcd34d !important;
    color: #451a03 !important;
    font-weight: 900;
  }
  html.theme-dark .app-body[data-skin] .app-shell-main .ui-document-form input.ui-size-active {
    background: #57421d !important;
    border-color: #fcd34d !important;
    color: #fffbeb !important;
  }
  .app-body[data-skin]:not([data-skin="classic"]) .ui-document-form .ui-line-active [class~="ring-2"] {
    --tw-ring-color: var(--tenant-accent);
  }
}

/* Keyboard selection must override document text utilities as a pair. */
@layer base {
  .app-body[data-skin] .app-shell-main .ui-document-form button.keyboard-active-option,
  .app-body[data-skin] .app-shell-main .ui-document-form button.keyboard-active-option:hover {
    background: var(--ui-action) !important;
    color: var(--ui-on-action) !important;
  }
  .app-body[data-skin] .app-shell-main .ui-document-form button.keyboard-active-option * {
    color: var(--ui-on-action) !important;
  }
}
.purchase-detail-layout { grid-template-columns: minmax(0, 1fr); }
.purchase-detail-layout > * { min-width: 0; }
@media (min-width: 1280px) {
  .purchase-detail-layout { grid-template-columns: minmax(0, 1fr) 18rem; }
}
.purchase-detail-table { min-width: 760px; }
.purchase-detail-product { min-width: 240px; width: 100%; }
.purchase-size-chip {
  display: inline-flex; align-items: center; gap: .65rem; white-space: nowrap;
  border: 1px solid var(--ui-border); border-radius: .625rem;
  padding: .35rem .55rem; background: var(--ui-raised); color: var(--ui-text);
  font-size: .75rem;
}
.purchase-size-quantity { border-left: 1px solid var(--ui-border); padding-left: .65rem; font-weight: 700; }

.purchase-detail-table th { white-space: nowrap; }

.ui-related-documents {
  width: min(42rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 3rem);
  margin: auto;
  overflow-y: auto;
  white-space: normal;
  background: var(--ui-surface, white);
  color: var(--ui-text, #0f172a);
}
.ui-related-documents::backdrop { background: rgb(15 23 42 / 50%); backdrop-filter: blur(3px); }

/* Keep document actions on one centered baseline, including button_to forms
   and the related-documents trigger; never resize controls inside its dialog. */
.ui-document-index :is(th, td) { vertical-align: middle; }
.ui-document-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: .5rem;
  width: max-content;
  margin-left: auto;
}
.ui-document-row-actions > * { flex-shrink: 0; }
.ui-document-row-actions > form {
  display: flex;
  align-items: center;
  margin: 0;
}
.ui-document-row-actions > a,
.ui-document-row-actions > button,
.ui-document-row-actions > form > button,
.ui-document-row-actions > [data-controller="related-documents"] > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  box-sizing: border-box;
  height: 2rem;
  min-height: 2rem;
  padding: 0 .625rem;
  line-height: 1;
  white-space: nowrap;
}

/* Shared document list palette: tenant accents for actions, semantic status colors. */
.app-body[data-skin] .ui-document-index {
  --document-accent: var(--ui-action, #0369a1);
  --document-surface: var(--ui-surface, #fff);
}
html.theme-dark .app-body[data-skin] .ui-document-index {
  --document-accent: var(--tenant-bright, #7dd3fc);
}
.ui-document-index .ui-doc-action {
  display: inline-flex;
  border: 1px solid;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.app-body[data-skin] .app-shell-main .ui-document-index .ui-doc-action-accent,
.app-body[data-skin] .app-shell-main .ui-document-index .ui-doc-action-related {
  color: var(--document-accent) !important;
  background: color-mix(in srgb, var(--document-accent) 9%, var(--document-surface)) !important;
  border-color: color-mix(in srgb, var(--document-accent) 45%, var(--document-surface)) !important;
}
.app-body[data-skin] .app-shell-main .ui-document-index .ui-doc-action-related {
  background: color-mix(in srgb, var(--document-accent) 4%, var(--document-surface)) !important;
}
.app-body[data-skin] .app-shell-main .ui-document-index .ui-doc-action-view {
  color: var(--ui-text, #334155) !important;
  background: var(--document-surface) !important;
  border-color: var(--ui-border, #cbd5e1) !important;
}
.app-body[data-skin] .app-shell-main .ui-document-index .ui-doc-action-edit {
  color: #92400e !important;
  background: #fffbeb !important;
  border-color: #fcd34d !important;
}
html.theme-dark .app-body[data-skin] .app-shell-main .ui-document-index .ui-doc-action-edit {
  color: #fde68a !important;
  background: #392b16 !important;
  border-color: #80622c !important;
}
.app-body[data-skin] .app-shell-main .ui-document-index .ui-doc-action:hover {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--document-accent) 16%, transparent);
  border-color: var(--document-accent) !important;
}
.ui-doc-action:focus-visible { outline: 2px solid var(--document-accent); outline-offset: 3px; }
.ui-doc-status {
  display: inline-flex;
  align-items: center;
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  color: #475569 !important;
  background: #e2e8f0 !important;
}
.ui-doc-status:is([data-document-status="partial"], [data-document-status="sent"]) { color: #92400e; background: #fef3c7; }
.ui-doc-status:is([data-document-status="received"], [data-document-status="closed"], [data-document-status="accepted"], [data-document-status="approved"], [data-document-status="converted"]) { color: #065f46; background: #d1fae5; }
.ui-doc-status:is([data-document-status="canceled"], [data-document-status="rejected"], [data-document-status="expired"]) { color: #9f1239; background: #ffe4e6; }
html.theme-dark .ui-doc-status { color: #cbd5e1; background: #293548; }
html.theme-dark .ui-doc-status:is([data-document-status="partial"], [data-document-status="sent"]) { color: #fde68a; background: #493619; }
html.theme-dark .ui-doc-status:is([data-document-status="received"], [data-document-status="closed"], [data-document-status="accepted"], [data-document-status="approved"], [data-document-status="converted"]) { color: #a7f3d0; background: #123d32; }
html.theme-dark .ui-doc-status:is([data-document-status="canceled"], [data-document-status="rejected"], [data-document-status="expired"]) { color: #fecdd3; background: #4b2030; }

/* Distinguish roles across tenant themes, rather than tinting every action alike. */
.app-body[data-skin] .app-shell-main .ui-document-index .ui-doc-action-related {
  color: #1d4ed8 !important;
  background: #eff6ff !important;
  border-color: #93c5fd !important;
}
.app-body[data-skin] .app-shell-main .ui-document-index .ui-doc-action-duplicate {
  color: #7e22ce !important;
  background: #faf5ff !important;
  border-color: #d8b4fe !important;
}
html.theme-dark .app-body[data-skin] .app-shell-main .ui-document-index .ui-doc-action-related {
  color: #bfdbfe !important;
  background: #172d4c !important;
  border-color: #426a9d !important;
}
html.theme-dark .app-body[data-skin] .app-shell-main .ui-document-index .ui-doc-action-duplicate {
  color: #e9d5ff !important;
  background: #332044 !important;
  border-color: #8055a2 !important;
}
.app-body[data-skin] .app-shell-main .ui-document-index .ui-doc-action-accent {
  color: #047857 !important;
  background: #ecfdf5 !important;
  border-color: #6ee7b7 !important;
}
html.theme-dark .app-body[data-skin] .app-shell-main .ui-document-index .ui-doc-action-accent {
  color: #a7f3d0 !important;
  background: #123d32 !important;
  border-color: #38876e !important;
}

.search-select-option-detail { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.search-select-option-name { min-width: 0; white-space: normal; line-height: 1.4; }
.search-select-option-meta { flex-shrink: 0; white-space: nowrap; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }