/*
 * Valenzo POS v258 — real light/dark palette support for the v257 layout.
 * This layer changes colour only. Geometry and operational behaviour stay intact.
 */

@media screen {
  html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell {
    --v257-bg: #f2f5f8;
    --v257-surface: #ffffff;
    --v257-raised: #f7f9fc;
    --v257-elevated: #edf2f7;
    --v257-line: rgba(15, 23, 42, 0.13);
    --v257-line-strong: rgba(15, 23, 42, 0.24);
    --v257-text: #142033;
    --v257-muted: #526579;
    --v257-faint: #5b6f81;
    --v257-gold: #b7791f;
    --v257-gold-bright: #85570f;
    --v257-gold-soft: rgba(183, 121, 31, 0.12);
    --v257-cyan: #087f83;
    --v257-cyan-strong: #08727d;
    --v257-cyan-soft: rgba(8, 127, 131, 0.1);
    --v257-green: #12815c;
    --v257-green-soft: rgba(18, 129, 92, 0.1);
    --v257-orange: #a85706;
    --v257-orange-soft: rgba(184, 101, 9, 0.11);
    --v257-red: #c24141;
    --v257-red-soft: rgba(194, 65, 65, 0.1);
    --v257-shadow: 0 16px 42px rgba(15, 23, 42, 0.1);

    --v247-gold-ink: #201405;
    --v247-header-background: #ffffff;
    --v247-header-raised: #f7f9fc;
    --pos-v220-rail: #ffffff;
    --pos-v220-rail-raised: #f7f9fc;
    --pos-v220-rail-hover: #edf2f7;
    --pos-v220-active-ink: #201405;
    color-scheme: light !important;
  }

  html[data-valenzo-theme="light"] body.pos-active {
    background: #f2f5f8 !important;
    color: #142033 !important;
  }

  html[data-valenzo-theme="dark"] body.pos-active {
    background: #07111d !important;
    color: #f2f7f8 !important;
  }

  html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .pos-v220-rail {
    border-color: var(--v257-line) !important;
    background:
      radial-gradient(circle at 3% -50%, rgba(183, 121, 31, 0.11), transparent 36%),
      linear-gradient(180deg, #ffffff, #f8fafc) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  }

  html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .pos-v220-nav [data-pos-v220-target] {
    background: var(--v257-raised) !important;
    color: var(--v257-muted) !important;
  }

  html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .pos-v220-nav [data-pos-v220-target]:hover:not(:disabled) {
    background: var(--v257-gold-soft) !important;
    color: var(--v257-text) !important;
  }

  html[data-valenzo-theme="light"] body.pos-active .pos-v247-shell.pos-v220-shell .pos-v247-sales .resto-cats {
    background: linear-gradient(180deg, #ffffff, #f7f9fc) !important;
  }

  html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .table-workspace-v173 {
    --tv173-navy: #f7f9fc;
    --tv173-ink: #edf2f7;
    color-scheme: light !important;
  }

  html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell.pos-v253-package-active {
    color-scheme: light !important;
  }

  html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell :is(input), html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell :is(select), html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell :is(textarea), html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(input), html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(select), html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(textarea), html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell.pos-v253-package-active :is(input), html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell.pos-v253-package-active :is(select), html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell.pos-v253-package-active :is(textarea) {
    color-scheme: light !important;
  }

  html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell :is(input)::placeholder, html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell :is(textarea)::placeholder {
    color: var(--v257-faint) !important;
    opacity: 1 !important;
  }

  html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .pos-v257-menu-button,
  html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .pos-v247-global-search,
  html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .pos-v247-user-avatar {
    background: var(--v257-raised) !important;
  }
}

@media screen and (max-width: 699px) {
  html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .pos-v220-rail {
    border-top-color: var(--v257-line) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.11) !important;
  }
}