/* Shared page appearance and outer gutters. Preserve the layout and spacing
   inside workbenches, tables, forms and other business components. */
:root {
  --brand: #506947;
  --brand-dark: #3d5236;
  --nav: #fcfbf7;
  --nav-hover: #f0f2eb;
  --ink: #2e382e;
  --muted: #697366;
  --line: #e2e5dc;
  --canvas: #f6f6f1;
  --paper: #fffefa;
  --warning: #a56b26;
  --danger: #b34f3d;
  --shadow: 0 2px 8px rgba(43, 56, 35, .035);
  --merchant-font-display: var(--merchant-font-ui);
  --appearance-soft: #eef2e8;
  --appearance-selected: #e6eddd;
  --appearance-secondary: #f4f5ef;
  --appearance-input-line: #cbd3c3;
  --appearance-focus: rgba(80, 105, 71, .16);
  --page-gutter: 28px;
  --page-top: 24px;
}

body,
#app .workspace { color: var(--ink); }
.console-view,
.workspace { background-color: var(--canvas); }
.workspace { background-image: none; }
.sidebar { background-color: var(--nav); border-color: var(--line); }
/* The legacy toolbar has no visible actions. Remove its footprint as well as
   its glass surface; page spacing belongs to the workspace alone. */
#app .topbar { display: none; }
#app .workspace {
  padding: var(--page-top) var(--page-gutter) 36px;
}
#app :is(.dashboard, .module) {
  width: 100%;
  max-width: none;
  margin: 0;
}
@media (max-width: 760px) {
  :root { --page-gutter: 16px; --page-top: 20px; }
}

/* Preserve every navigation level, indent, badge and expand/collapse control. */
.sidebar-brand strong { color: var(--ink); }
.sidebar-brand span,
.sidebar-footer,
.sidebar .logout { color: var(--muted); }
.sidebar-footer { border-color: var(--line); }
.sidebar .nav-caption { color: #737d6a; }
.sidebar .nav-item,
.sidebar .nav-item.nav-subitem,
.sidebar .nav-item.nav-depth-2 { color: #52604d; }
.sidebar .nav-item i,
.sidebar .nav-parent-item i,
.sidebar .nav-chevron { color: #78866e; }
.sidebar .nav-item:hover,
.sidebar .nav-item.nav-subitem:hover { background-color: var(--nav-hover); color: var(--brand-dark); }
.sidebar .nav-item.active { background-color: var(--brand); color: #fffefa; }
.sidebar .nav-item.active i { color: inherit; }
.sidebar .nav-parent-item.active {
  border-color: #dce4d3;
  background-color: var(--appearance-soft);
  color: var(--brand-dark);
}
.sidebar .nav-item.nav-subitem.active {
  background-color: var(--appearance-selected);
  color: #354b2b;
  box-shadow: inset 3px 0 0 var(--brand);
}
.sidebar .logout:hover { background-color: var(--nav-hover); color: var(--ink); }

/* Fit vector artwork into the existing icon slots. Child icons keep the
   original hidden state; the existing parent rule still rotates the chevron. */
.sidebar .sidebar-icon { width: 1em; height: 1em; vertical-align: middle; }
.sidebar .nav-chevron svg { width: 8px; height: 12px; vertical-align: middle; }

/* Opaque, quiet paper surfaces; existing cards retain their exact footprints. */
#app :is(.content-card:not(.fulfillment-page), .editor-card, .detail-card, .dashboard-panel,
  .sales-ledger-card, .featured-product, .compact-ledger-card, .ledger-actions,
  .fulfillment-stage-board, .fulfillment-queue, .fulfillment-detail,
  .production-orders, .production-order-detail, .production-overview,
  .production-summary, .production-history, .settings-summary-group,
  .finance-kpi, .finance-trend-card, .finance-breakdown-card, .finance-ledger,
  .finance-after-sales, .finance-discount-details, .loyal-config-section,
  .coupon-grant-stats > div, .coupon-grant-audience-panel) {
  background-color: var(--paper);
  border-color: var(--line);
  box-shadow: none;
}
/* Reset only page shells: nested cards retain their own comfortable padding.
   This removes the second gutter on finance, profit, customer and settings
   pages, without changing the columns or controls inside those pages. */
#app .module > :is(.content-card, .editor-card, .production-page,
  .comeback-management, .product-list-page, .feedback-workspace,
  .product-review-stats-page) {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
/* Finance's legacy desktop and mobile rules both declare important padding. */
#app .module > .finance-workspace { padding: 0 !important; }
#app .dashboard > .ledger-greeting,
#app .module > :is(.content-card, .production-page, .comeback-management)
  > :is(.fulfillment-head, .production-head, .comeback-head) {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
/* The settings footer used negative margins to bleed into the old shell's
   padding; it must now stay within the shared page edges. */
#app .module > .settings-overview > .settings-overview-actions {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}
#app :is(.editor-top, .form-section, .detail-block, .detail-status,
  .fulfillment-detail > header, .queue-tools, .queue-footer,
  .settings-overview-head, .settings-summary-group dl > div,
  .sales-ledger-card footer, .ledger-actions article) { border-color: var(--line); }
#app :is(.repeat-card, .coupon-grant-form-section,
  .settings-overview-actions, .customer-membership-manager > footer,
  .loyal-customer-toolbar, .finance-after-sales-summary) {
  background-color: var(--appearance-secondary);
  border-color: var(--line);
}
#app :is(.module-head h2, .editor-top h2, .fulfillment-head h2,
  .production-head h2, .settings-overview-head h2, .ledger-greeting h2,
  .comeback-head h2, .finance-head h2) { color: var(--ink); }
#app :is(.crumb, .module-head p, .editor-top p, .ledger-greeting p,
  .ledger-date, .ledger-date small, .settings-overview-head p,
  .settings-overview-actions p, .settings-summary-group dt,
  .settings-summary-group dd small, .detail-block dt,
  .detail-status small, .chart-axis, .table-muted) { color: var(--muted); }

/* Unified action colors. Danger, disabled and business-specific states remain
   separate; keep button borders, padding and type sizes in their source rules. */
#app :is(.primary, .detail-action.primary):not(.danger) {
  background-color: var(--brand);
  color: #fffefa;
  box-shadow: none;
}
#app :is(.primary, .detail-action.primary):not(.danger):hover:not(:disabled) {
  background-color: var(--brand-dark);
}
#app :is(.quiet, .small-action):not(.danger):not(.primary-action) {
  background-color: var(--appearance-secondary);
  color: #53604c;
}
#app :is(.outline, .ghost, .detail-action.secondary, .detail-action.minor,
  .fulfillment-date, .batch-order-toggle, .outline.stock-action) {
  background-color: var(--paper);
  border-color: var(--appearance-input-line);
  color: var(--brand-dark);
  box-shadow: none;
}
#app :is(.outline, .ghost, .quiet):hover:not(:disabled) { background-color: var(--appearance-soft); }
#app :is(.text-button, .primary-action) { color: var(--brand-dark); }
#app .primary-action { background-color: var(--appearance-soft); }
#app :is(.primary, .quiet, .outline, .ghost, .small-action, .detail-action) { border-radius: 7px; }
#app :is(button, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
#app :is(.form-field input, .form-field textarea, .form-field select,
  .table-tools input, .fulfillment-search, .customer-membership-fields input,
  .customer-membership-fields textarea, .product-list-search input,
  .product-list-search select) {
  background-color: var(--paper);
  border-color: var(--appearance-input-line);
  color: var(--ink);
}
#app :is(input, textarea, select):focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--appearance-focus);
}
#app :is(input, textarea)::placeholder { color: #788170; }

/* Keep existing table density and order workbench structure. */
#app .data-table-wrap { border-color: var(--line); }
#app :is(.data-table th, .queue-column-labels) {
  background-color: var(--appearance-secondary);
  border-color: var(--line);
  color: #5c6754;
}
#app .data-table td { border-color: var(--line); }
#app .data-table tbody tr:hover { background-color: #f5f7f0; }
#app .data-table tbody tr.selected { background-color: var(--appearance-soft); }
#app .data-table small { color: var(--muted); }
#app .filter-tab { background-color: var(--appearance-secondary); color: #5b6655; }
#app .filter-tab.active {
  background-color: var(--appearance-selected);
  color: var(--brand-dark);
}
#app .queue-tabs button { color: var(--muted); }
#app .queue-tabs button.active { color: var(--brand-dark); border-color: var(--brand); }
#app .fulfillment-stage { border-color: var(--line); }
#app .fulfillment-stage.is-active { background-color: #f4f7ef; }
#app .unified-order-list .queue-date-group {
  background-color: var(--paper);
  border-color: var(--line);
  box-shadow: none;
}
#app .unified-order-list .queue-date-summary {
  background-color: var(--appearance-soft);
  border-color: var(--line);
}
#app .unified-order-list .queue-period-group > header {
  background-color: var(--appearance-secondary);
  border-color: var(--line);
}
#app .unified-order-list .queue-order-row { border-color: var(--line); }
#app .unified-order-list .queue-order-row:hover {
  background-color: #f5f7f0;
  box-shadow: inset 3px 0 0 #a3b393;
}
#app :is(.order-supply-toolbar, .production-supply-toolbar) {
  background-color: var(--appearance-secondary);
  border-color: var(--line);
}
#app :is(.order-supply-filter, .production-supply-filter) {
  background-color: var(--paper);
  border-color: var(--appearance-input-line);
}
#app .settings-overview-note,
#app .operational-health.is-healthy {
  background-color: #f3f6ef;
  border-color: #dde5d5;
  box-shadow: none;
}

/* Brand accents on the overview stay in place, with fewer competing reds.
   Alerts, refunds, inventory warnings and all status labels retain their colors. */
#app :is(.sales-ledger-card header strong, .goal-progress b,
  .featured-copy strong, .compact-ledger-card p b, .ledger-actions h3 b) {
  color: var(--brand-dark);
}
#app .featured-copy > span { background-color: var(--brand); color: #fffefa; }
#app .goal-progress i { color: var(--brand); }