/* Larder V4.22 — authoritative Steel & Sage visual contract. */
:root {
  --ink: #20292a;
  --muted: #5c6968;
  --line: #cbd2cf;
  --paper: #fafbf9;
  --surface: #fafbf9;
  --surface-muted: #eef1ef;
  --wash: #f3f5f3;
  --body: #eef0ee;
  --field: #ffffff;
  --subtle: #f5f7f5;
  --raised: #e6ebe8;
  --button: #edf1ef;
  --button-active: #dce9e5;
  --accent: #39766b;
  --accent-dark: #28574f;
  --gold: #95661f;
  --danger: #a33f38;
  --sidebar: #20292b;
  --sidebar-line: #3a4649;
  --sidebar-ink: #eef3f2;
  --sidebar-muted: #bcc6c4;
  --sidebar-active: #91d5c8;
  --sage-action: #31665e;
  --sage-action-ink: #ffffff;
  --sage-selected: #dce9e5;
  --sage-selected-ink: #28574f;
  --sage-focus: rgba(57, 118, 107, 0.24);
  --sage-warning: #95661f;
  --sage-warning-soft: #f4ead8;
  --sage-danger-soft: #f5e2e0;
  --sage-success-soft: #e0eee9;
  --ui-line: #cbd2cf;
  --larder-hairline: #d4d9d6;
  --border: #cbd2cf;
  --focus-ring: 0 0 0 3px var(--sage-focus);
  color-scheme: light;
}

html.dark-mode {
  --ink: #ecf1f0;
  --muted: #b3bfbd;
  --line: #3f4b4e;
  --paper: #1a2123;
  --surface: #1a2123;
  --surface-muted: #222c2f;
  --wash: #0f1416;
  --body: #101517;
  --field: #141a1c;
  --subtle: #171f20;
  --raised: #222c2f;
  --button: #273034;
  --button-active: #29413e;
  --accent: #58a99a;
  --accent-dark: #b6e5dc;
  --gold: #e1b866;
  --danger: #ef8a7f;
  --sidebar: #151b1d;
  --sidebar-line: #394448;
  --sidebar-ink: #eef3f2;
  --sidebar-muted: #b5c0be;
  --sidebar-active: #91d5c8;
  --sage-action: #91d5c8;
  --sage-action-ink: #10201e;
  --sage-selected: #29413e;
  --sage-selected-ink: #c8eee6;
  --sage-focus: rgba(145, 213, 200, 0.26);
  --sage-warning: #e1b866;
  --sage-warning-soft: #3d321f;
  --sage-danger-soft: #412725;
  --sage-success-soft: #203d37;
  --ui-line: #3f4b4e;
  --larder-hairline: #354044;
  --border: #3f4b4e;
  color-scheme: dark;
}

body {
  color: var(--ink) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--raised) 42%, var(--body)) 0, var(--body) 280px) !important;
}

body .sidebar,
body .topbar,
body .panel,
body .metric,
body .month-card,
body .global-search,
body .global-search-panel,
body .staff-card,
body .staff-admin-section,
body .staff-admin-form,
body .staff-admin-preview {
  border-color: var(--larder-hairline) !important;
}

body .panel,
body .metric,
body .month-card,
body .global-search,
body .global-search-panel,
body .staff-card,
body .staff-admin-section,
body .staff-admin-form,
body .staff-admin-preview {
  color: var(--ink) !important;
  background: var(--paper) !important;
}

body .panel-header,
body .compact-panel-header,
body .dashboard-details-panel > summary,
body .drive-finder-toolbar,
body .drive-browser-toolbar,
body .drive-inspector-header,
body .staff-card-header,
body th {
  border-color: var(--larder-hairline) !important;
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--raised) 64%, var(--paper)) !important;
}

body input,
body select,
body textarea,
body .quick-invoice-input {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--field) !important;
  caret-color: var(--accent) !important;
}

body input::placeholder,
body textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, transparent) !important;
  opacity: 1 !important;
}

body input:hover,
body select:hover,
body textarea:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line)) !important;
}

body input:focus,
body select:focus,
body textarea:focus,
body button:focus-visible,
body summary:focus-visible,
body .tab:focus-visible {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  box-shadow: var(--focus-ring) !important;
}

body .primary-button,
body button.primary-button,
body a.primary-button,
body .shell-actions .primary-button {
  border-color: var(--sage-action) !important;
  color: var(--sage-action-ink) !important;
  background: var(--sage-action) !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 16%, transparent) !important;
}

body .primary-button:hover,
body button.primary-button:hover,
body a.primary-button:hover {
  filter: brightness(0.94);
}

body .secondary-button,
body button.secondary-button,
body a.secondary-button {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
}

body .secondary-button:hover,
body button.secondary-button:hover,
body a.secondary-button:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line)) !important;
  color: var(--sage-selected-ink) !important;
  background: var(--sage-selected) !important;
}

body .danger-button,
body button.danger-button {
  border-color: var(--danger) !important;
  color: #ffffff !important;
  background: #a33f38 !important;
}

html.dark-mode body .danger-button,
html.dark-mode body button.danger-button {
  color: #fff5f3 !important;
  background: #8f3e38 !important;
}

body button:disabled,
body input:disabled,
body select:disabled,
body textarea:disabled {
  opacity: 0.58 !important;
  cursor: not-allowed !important;
}

body .sidebar .tabs.simple-tabs,
body .tabs.simple-tabs,
body .tabs {
  border-color: var(--larder-hairline) !important;
  background: color-mix(in srgb, var(--paper) 88%, var(--body)) !important;
}

body .sidebar .tabs.simple-tabs > .tab,
body .sidebar .nav-parent-link,
body .sidebar .nav-menu-toggle {
  color: color-mix(in srgb, var(--ink) 88%, var(--muted)) !important;
}

body .sidebar .tabs.simple-tabs > .tab:hover,
body .sidebar .nav-menu-controls:hover,
body .sidebar .nav-menu:focus-within > .nav-menu-controls {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--raised) 62%, var(--paper)) !important;
}

body .sidebar .tabs.simple-tabs > .tab.is-active,
body .sidebar .nav-menu.is-active > .nav-menu-controls {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line)) !important;
  color: var(--sage-selected-ink) !important;
  background: var(--sage-selected) !important;
  box-shadow: inset 0 -2px 0 var(--accent) !important;
}

body .sidebar .nav-menu.is-active .nav-parent-link,
body .sidebar .nav-menu.is-active .nav-menu-toggle {
  color: var(--sage-selected-ink) !important;
}

body .sidebar .nav-menu-toggle {
  border-left: 1px solid transparent !important;
}

body .sidebar .nav-menu-controls:hover .nav-menu-toggle,
body .sidebar .nav-menu.is-active .nav-menu-toggle {
  border-left-color: color-mix(in srgb, currentColor 22%, transparent) !important;
}

body .sidebar .nav-menu-panel {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  box-shadow: 0 18px 48px color-mix(in srgb, #0b1110 24%, transparent) !important;
}

body .sidebar .nav-menu-panel .nav-subtab {
  color: var(--ink) !important;
}

body .sidebar .nav-menu-panel .nav-subtab:hover,
body .sidebar .nav-menu-panel .nav-subtab:focus-visible,
body .sidebar .nav-menu-panel .nav-subtab.is-active {
  color: var(--sage-selected-ink) !important;
  background: var(--sage-selected) !important;
}

body .invoice-direction-card.is-active,
body .ordering-space-tab.is-active,
body .operations-section-tabs button.is-active,
body .workspace-tab.active,
body .recipe-type-filters button.is-active,
body .command-work-tabs button.is-active {
  border-color: var(--sage-action) !important;
  color: var(--sage-action-ink) !important;
  background: var(--sage-action) !important;
  box-shadow: none !important;
}

body .task-workspace-backdrop {
  z-index: 15000 !important;
  background: color-mix(in srgb, #07100d 68%, transparent) !important;
}

body .task-workspace-window {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--body) !important;
  box-shadow: 0 30px 90px color-mix(in srgb, #050908 48%, transparent) !important;
}

body .task-workspace-header {
  position: relative;
  z-index: 2;
  border-color: var(--larder-hairline) !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
}

body .task-workspace-close {
  min-width: 74px;
}

body .icon-button,
body .compact-button,
body .page-preview-tools button,
body .invoice-work-page-preview-head > span {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--raised) 62%, var(--paper)) !important;
}

body .icon-button,
body .page-preview-tools button {
  min-width: 32px;
  min-height: 32px;
}

body .invoice-work-page-preview-head > span {
  min-width: 28px;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 7px;
  text-align: center;
}

body details > summary {
  color: var(--ink);
}

body details > summary small,
body .hint,
body .status-line,
body .cell-note,
body .month-status {
  color: var(--muted) !important;
}

body .status-chip.is-good,
body .ingredient-status-badge.good,
body .invoice-detail-ok {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line)) !important;
  color: var(--sage-selected-ink) !important;
  background: var(--sage-success-soft) !important;
}

body .status-chip.is-waiting,
body .ingredient-status-badge.warning,
body .invoice-review-summary-card.warning {
  border-color: color-mix(in srgb, var(--sage-warning) 56%, var(--line)) !important;
  color: var(--ink) !important;
  background: var(--sage-warning-soft) !important;
}

body .status-chip.is-bad,
body .invoice-detail-alert,
body .invoice-review-summary-card.credit {
  border-color: color-mix(in srgb, var(--danger) 52%, var(--line)) !important;
  color: var(--ink) !important;
  background: var(--sage-danger-soft) !important;
}

body .table-wrap,
body table,
body td {
  border-color: var(--larder-hairline) !important;
}

body tbody tr:hover td {
  background: color-mix(in srgb, var(--sage-selected) 62%, var(--paper)) !important;
}

@media (max-width: 760px) {
  body .task-workspace-backdrop {
    inset: 0 !important;
    padding: 0 !important;
  }

  body .task-workspace-header {
    position: sticky;
    top: 0;
  }

  body .primary-button,
  body .secondary-button,
  body .danger-button,
  body .tab,
  body button,
  body select,
  body input {
    min-height: 42px;
  }
}