/* ==========================================================================
   POS CRM · Console design system
   Ported 1:1 from the delivered MasterLayout / Foundation design (palette()).
   :root                    → LIGHT palette
   :root[data-theme="dark"] → DARK palette (.dark kept as a safety alias)
   ========================================================================== */

:root {
  --canvas: oklch(0.982 0.004 75);
  --card: #ffffff;
  --card-2: oklch(0.992 0.003 75);
  --fg: oklch(0.17 0.005 60);
  --muted-fg: oklch(0.52 0.008 60);
  --faint-fg: oklch(0.63 0.006 60);
  --border: oklch(0.915 0.004 70);
  --border-soft: oklch(0.945 0.003 70);
  --muted-bg: oklch(0.965 0.004 75);
  --hover: oklch(0.955 0.005 75);
  --sidebar-bg: oklch(0.996 0.002 75);
  --header-bg: rgba(255, 255, 255, 0.82);
  --nav-fg: oklch(0.44 0.008 60);
  --shadow: 0 1px 2px rgba(20, 14, 8, 0.05), 0 1px 3px rgba(20, 14, 8, 0.04);
  --primary: #5c7358;
  --primary-fg: #ffffff;
  --primary-soft: rgba(255, 140, 75, 0.12);
  --won: oklch(0.6 0.16 152);
  --lost: oklch(0.575 0.21 25);
  --new: oklch(0.58 0.14 250);
  --at-risk: oklch(0.76 0.16 75);
  --violet: oklch(0.55 0.15 300);
}

:root[data-theme="dark"],
.dark {
  --canvas: oklch(0.15 0.004 60);
  --card: oklch(0.205 0.004 60);
  --card-2: oklch(0.235 0.004 60);
  --fg: oklch(0.97 0 0);
  --muted-fg: oklch(0.68 0.006 60);
  --faint-fg: oklch(0.56 0.006 60);
  --border: oklch(1 0 0 / 0.09);
  --border-soft: oklch(1 0 0 / 0.055);
  --muted-bg: oklch(0.26 0.004 60);
  --hover: oklch(0.25 0.004 60);
  --sidebar-bg: oklch(0.185 0.004 60);
  --header-bg: rgba(30, 28, 27, 0.72);
  --nav-fg: oklch(0.7 0.006 60);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --primary: #5c7358;
  --primary-fg: #ffffff;
  --primary-soft: rgba(255, 140, 75, 0.16);
  --won: oklch(0.72 0.16 152);
  --lost: oklch(0.68 0.2 25);
  --new: oklch(0.7 0.14 250);
  --at-risk: oklch(0.8 0.16 75);
  --violet: oklch(0.7 0.14 300);
}

/* ---- base ---- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.console-shell a { color: var(--primary); text-decoration: none; }
.console-shell a:hover { color: var(--primary); }
.console-shell input::placeholder { color: var(--faint-fg); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

@keyframes dc-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dc-toast {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* ---- nav item ---- */
.nav-item:hover { background: var(--hover); }

.nav-item.active {
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: inset 2.5px 0 0 var(--primary);
}
.nav-item.active svg { color: var(--primary); }

/* ---- profile menu rows ---- */
.menu-link:hover { background: var(--hover); }
.menu-signout:hover { background: color-mix(in oklch, var(--lost) 12%, transparent); }
.pref-btn:hover { border-color: var(--primary); }
.profile-trigger:hover { background: var(--hover); }

/* appearance + language toggle buttons: default = inactive, .is-active = selected */
.pref-btn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-fg);
}
.pref-btn.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}