/* ============================================================
   QuickSell — Odoo 19 visual system (presentation layer only)

   Implements design.md: purple navigation, neutral surfaces,
   compact 13px type, tight spacing, 3-6px radii, flat borders.
   Loaded LAST (after theme.css) and works purely by:
     1. defining the design.md tokens (--odoo-*)
     2. remapping the app's existing CSS variables onto them
     3. restyling shared selectors (shell, buttons, inputs, tables,
        modals, badges)
   No markup, routes, or behaviour are touched. To roll back, remove
   the <link> to this file in index.html.
   ============================================================ */

/* ------------------------------------------------------------
   1. Design tokens (design.md §5)
   ------------------------------------------------------------ */
html:root {
  color-scheme: light dark;

  --odoo-primary: #714b67;
  --odoo-primary-hover: #5d3d54;
  --odoo-primary-active: #4f3348;
  --odoo-primary-subtle: #f2eaf0;

  --odoo-bg: #f9f9f9;
  --odoo-surface: #ffffff;
  --odoo-surface-muted: #f5f5f5;
  --odoo-border: #dee2e6;
  --odoo-border-strong: #ced4da;

  --odoo-text: #212529;
  --odoo-text-muted: #6c757d;
  --odoo-text-disabled: #adb5bd;

  --odoo-success: #198754;
  --odoo-warning: #ffc107;
  --odoo-danger: #dc3545;
  --odoo-info: #0d6efd;

  --odoo-font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  --odoo-font-size-xs: 12px;
  --odoo-font-size-sm: 13px;
  --odoo-font-size-base: 14px;
  --odoo-font-size-md: 15px;
  --odoo-font-size-lg: 22px;
  --odoo-font-size-title: 26px;

  --odoo-space-1: 4px;
  --odoo-space-2: 8px;
  --odoo-space-3: 12px;
  --odoo-space-4: 16px;
  --odoo-space-5: 20px;
  --odoo-space-6: 24px;

  --odoo-navbar-height: 46px;
  --odoo-control-height-sm: 28px;
  --odoo-control-height: 32px;
  --odoo-control-height-lg: 36px;

  --odoo-radius-sm: 3px;
  --odoo-radius-md: 4px;
  --odoo-radius-lg: 6px;

  --odoo-shadow-menu: 0 2px 8px rgb(0 0 0 / 12%);
  --odoo-shadow-dialog: 0 8px 28px rgb(0 0 0 / 18%);

  --odoo-focus-ring: 0 0 0 2px rgb(113 75 103 / 25%);

  /* ----------------------------------------------------------
     2. Remap the app's existing variables onto the tokens.
        Declared unconditionally (also beats the dark-mode blocks
        in dashboard.css / admin.css, which share this specificity
        but load earlier) so the Odoo light theme is consistent.
     ---------------------------------------------------------- */
  --color-primary: var(--odoo-primary);
  --color-primary-hover: var(--odoo-primary-hover);
  --color-primary-dark: var(--odoo-primary-active);
  --color-primary-light: var(--odoo-primary-subtle);
  --color-primary-soft: var(--odoo-primary-subtle);
  --color-primary-50: rgb(113 75 103 / 6%);
  --color-primary-100: rgb(113 75 103 / 10%);
  --color-primary-ring: rgb(113 75 103 / 25%);
  --color-accent: var(--odoo-primary);
  --color-accent-soft: var(--odoo-primary-subtle);
  --color-secondary: var(--odoo-text-muted);

  --color-success: var(--odoo-success);
  --color-success-light: #e8f3ee;
  --color-warning: #e0a800;
  --color-warning-light: #fff8e1;
  --color-warning-strong: #8a6d00;
  --color-danger: var(--odoo-danger);
  --color-danger-light: #fbeaec;
  --color-info: var(--odoo-info);
  --color-info-light: #e7f0ff;

  --color-white: var(--odoo-surface);
  --color-gray-50: var(--odoo-surface-muted);
  --color-gray-100: #eff1f3;
  --color-gray-200: var(--odoo-border);
  --color-gray-300: var(--odoo-border-strong);
  --color-gray-400: var(--odoo-text-disabled);
  --color-gray-500: var(--odoo-text-muted);
  --color-gray-600: #495057;
  --color-gray-700: #343a40;
  --color-gray-800: var(--odoo-text);
  --color-gray-900: var(--odoo-text);

  --font-family: var(--odoo-font-family);
  --font-size-xs: var(--odoo-font-size-xs);
  --font-size-sm: var(--odoo-font-size-sm);
  --font-size-base: var(--odoo-font-size-base);
  --font-size-lg: var(--odoo-font-size-md);
  --font-size-xl: 16px;
  --font-size-2xl: var(--odoo-font-size-lg);
  --font-size-3xl: var(--odoo-font-size-title);
  --tracking-tight: 0;

  --radius-xs: var(--odoo-radius-sm);
  --radius-sm: var(--odoo-radius-sm);
  --radius: var(--odoo-radius-md);
  --radius-md: var(--odoo-radius-md);
  --radius-lg: var(--odoo-radius-lg);
  --radius-xl: var(--odoo-radius-lg);
  --radius-2xl: var(--odoo-radius-lg);

  /* Flat, restrained elevation */
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
  --shadow: 0 1px 2px rgb(0 0 0 / 8%);
  --shadow-md: var(--odoo-shadow-menu);
  --shadow-lg: var(--odoo-shadow-menu);
  --shadow-xl: var(--odoo-shadow-dialog);
  --shadow-card: 0 0 0 1px var(--odoo-border);
  --shadow-card-hover: 0 0 0 1px var(--odoo-border-strong), 0 1px 4px rgb(0 0 0 / 10%);
  --shadow-modal: var(--odoo-shadow-dialog);
  --shadow-dropdown: var(--odoo-shadow-menu);

  --gradient-primary: linear-gradient(var(--odoo-primary), var(--odoo-primary));
  --gradient-primary-soft: linear-gradient(var(--odoo-primary-subtle), var(--odoo-primary-subtle));
  --gradient-glow: none;
  --gradient-card: none;

  --header-height: var(--odoo-navbar-height);
  --header-bg: var(--odoo-primary);
  --header-bg-mobile: var(--odoo-primary);
  --page-bg: var(--odoo-bg);
  --sidebar-width: 220px;
}

/* ------------------------------------------------------------
   Base typography
   ------------------------------------------------------------ */
body {
  font-family: var(--odoo-font-family);
  font-size: var(--odoo-font-size-base);
  color: var(--odoo-text);
  background-color: var(--odoo-bg) !important;
  font-feature-settings: normal;
  letter-spacing: 0;
}

input, select, textarea, button {
  font-family: var(--odoo-font-family);
  font-size: var(--odoo-font-size-base);
}

h1 { font-size: var(--odoo-font-size-title); }
h2 { font-size: var(--odoo-font-size-lg); }
h3 { font-size: var(--odoo-font-size-md); }

/* ------------------------------------------------------------
   Navbar (top bar) — Odoo purple, 46px
   ------------------------------------------------------------ */
.top-bar {
  background: var(--odoo-primary);
  color: #fff;
  height: var(--odoo-navbar-height);
  min-height: var(--odoo-navbar-height);
  border-bottom: 1px solid var(--odoo-primary-active);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.top-bar #viewTitle,
.top-bar .user-business,
.top-bar .user-info,
.top-bar #userEmail,
.top-bar button,
.top-bar svg {
  color: #fff;
}

.top-bar #viewTitle {
  font-size: var(--odoo-font-size-md);
  font-weight: 600;
  letter-spacing: 0;
}

.top-bar #userEmail { opacity: 0.8; }

.top-bar button:hover { background: rgb(255 255 255 / 12%); }

.top-bar input,
.top-bar select {
  color: var(--odoo-text);
}

/* ------------------------------------------------------------
   Sidebar — app navigation
   ------------------------------------------------------------ */
.sidebar {
  background: var(--odoo-surface);
  border-right: 1px solid var(--odoo-border);
}

.sidebar-header {
  min-height: var(--odoo-navbar-height);
  padding: 0 var(--odoo-space-4);
  display: flex;
  align-items: center;
  background: var(--odoo-primary);
  border-bottom: 1px solid var(--odoo-primary-active);
}

.brand h2 {
  font-size: var(--odoo-font-size-md);
  font-weight: 700;
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  letter-spacing: 0;
}

.brand-icon {
  color: #fff;
  filter: none;
}

.sidebar-close,
.sidebar-header button { color: #fff; }

.sidebar-nav {
  padding: var(--odoo-space-2);
  gap: 2px;
}

.nav-item {
  padding: 6px var(--odoo-space-3);
  border-radius: var(--odoo-radius-md);
  font-size: var(--odoo-font-size-base);
  font-weight: 400;
  color: var(--odoo-text);
  transition: background 120ms ease, color 120ms ease;
}

.nav-item:hover {
  background: var(--odoo-surface-muted);
  color: var(--odoo-text);
}

.nav-item.active {
  background: var(--odoo-primary-subtle);
  color: var(--odoo-primary);
  font-weight: 600;
}

.nav-item.active::before {
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--odoo-primary);
  border-radius: 0;
}

.nav-item .badge {
  background: var(--odoo-danger);
  color: #fff;
  box-shadow: none;
  font-size: var(--odoo-font-size-xs);
  padding: 1px 6px;
}

.sidebar-footer { border-top: 1px solid var(--odoo-border); }

.logout-btn { border-radius: var(--odoo-radius-md); font-weight: 400; }
.logout-btn:hover { background: var(--color-danger-light); color: var(--odoo-danger); }

/* ------------------------------------------------------------
   Buttons — primary / secondary / danger (design.md §6)
   ------------------------------------------------------------ */
.btn,
.btn-primary {
  background: var(--odoo-primary);
  color: #fff;
  border: 1px solid var(--odoo-primary);
  border-radius: var(--odoo-radius-md);
  min-height: var(--odoo-control-height);
  padding: 0 var(--odoo-space-3);
  font-size: var(--odoo-font-size-base);
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: none;
  filter: none;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.btn:hover,
.btn-primary:hover {
  background: var(--odoo-primary-hover);
  border-color: var(--odoo-primary-hover);
  transform: none;
  box-shadow: none;
  filter: none;
}

.btn:active,
.btn-primary:active {
  background: var(--odoo-primary-active);
  border-color: var(--odoo-primary-active);
}

.btn-secondary {
  background: var(--odoo-surface);
  color: var(--odoo-text);
  border: 1px solid var(--odoo-border-strong);
  border-radius: var(--odoo-radius-md);
  min-height: var(--odoo-control-height);
  font-size: var(--odoo-font-size-base);
  font-weight: 500;
  box-shadow: none;
}

.btn-secondary:hover {
  background: var(--odoo-surface-muted);
  border-color: var(--odoo-border-strong);
}

.btn-small {
  min-height: var(--odoo-control-height-sm);
  border-radius: var(--odoo-radius-md);
  font-size: var(--odoo-font-size-sm);
  font-weight: 500;
}

.btn-danger,
.btn-delete {
  background: var(--odoo-danger);
  border-color: var(--odoo-danger);
  color: #fff;
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ------------------------------------------------------------
   Inputs / selects / textareas
   ------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select {
  min-height: var(--odoo-control-height);
  border: 1px solid var(--odoo-border-strong);
  border-radius: var(--odoo-radius-md);
  background: var(--odoo-surface);
  color: var(--odoo-text);
  font-size: var(--odoo-font-size-base);
}

textarea {
  border: 1px solid var(--odoo-border-strong);
  border-radius: var(--odoo-radius-md);
  background: var(--odoo-surface);
  color: var(--odoo-text);
  font-size: var(--odoo-font-size-base);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
select:hover,
textarea:hover {
  border-color: var(--odoo-text-muted);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  border-color: var(--odoo-primary);
  box-shadow: var(--odoo-focus-ring);
  outline: none;
}

input::placeholder,
textarea::placeholder { color: var(--odoo-text-disabled); }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--odoo-primary); }

label,
.form-group label,
.choice-cards legend {
  font-size: var(--odoo-font-size-base);
  font-weight: 600;
  color: var(--odoo-text);
}

/* ------------------------------------------------------------
   Cards / panels — flat, bordered
   ------------------------------------------------------------ */
.card,
.metric-card,
.stat-card,
.product-card,
.order-card {
  background: var(--odoo-surface);
  border: 1px solid var(--odoo-border);
  border-radius: var(--odoo-radius-lg);
  box-shadow: none;
}

.card:hover,
.metric-card:hover,
.stat-card:hover,
.product-card:hover {
  transform: none;
  border-color: var(--odoo-border-strong);
  box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
}

.hover-lift:hover { transform: none; box-shadow: var(--shadow-md); }

/* ------------------------------------------------------------
   Tables — compact density
   ------------------------------------------------------------ */
table thead th {
  background: var(--odoo-surface);
  color: var(--odoo-text);
  font-size: var(--odoo-font-size-base);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 2px solid var(--odoo-border);
  padding: var(--odoo-space-2) var(--odoo-space-3);
}

table tbody td {
  padding: 6px var(--odoo-space-3);
  font-size: var(--odoo-font-size-base);
  border-bottom: 1px solid var(--odoo-border);
}

table tbody tr:hover { background: var(--odoo-surface-muted); }

/* ------------------------------------------------------------
   Badges / pills
   ------------------------------------------------------------ */
.badge,
.status-badge,
.tag {
  font-size: var(--odoo-font-size-xs);
  font-weight: 500;
  letter-spacing: 0;
  border-radius: var(--odoo-radius-sm);
}

/* ------------------------------------------------------------
   Modals / dialogs
   ------------------------------------------------------------ */
.modal-content {
  border: 1px solid var(--odoo-border);
  border-radius: var(--odoo-radius-lg);
  box-shadow: var(--odoo-shadow-dialog);
  background: var(--odoo-surface);
}

.modal-header {
  border-bottom: 1px solid var(--odoo-border);
  background: var(--odoo-surface);
}

.modal-header h2,
.modal-header h3 {
  font-size: var(--odoo-font-size-lg);
  font-weight: 500;
}

.modal-footer {
  border-top: 1px solid var(--odoo-border);
  background: var(--odoo-surface);
}

/* ------------------------------------------------------------
   Banners, mobile nav, scrollbars, focus
   ------------------------------------------------------------ */
.trial-banner {
  background: var(--odoo-primary-subtle);
  color: var(--odoo-primary-active);
  border-bottom: 1px solid var(--odoo-border);
  font-weight: 500;
  letter-spacing: 0;
}

.bottom-nav {
  background: var(--odoo-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid var(--odoo-border);
}

.bottom-nav-item.active { color: var(--odoo-primary); }

::-webkit-scrollbar-thumb {
  background: var(--odoo-border-strong);
  border-color: var(--odoo-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--odoo-text-disabled); }

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--odoo-focus-ring);
  border-radius: var(--odoo-radius-md);
}

a { color: var(--odoo-primary); }

/* Calm page swaps: no slide, fade only */
.view { animation: none; }

.text-gradient {
  background: none;
  -webkit-text-fill-color: var(--odoo-primary);
  color: var(--odoo-primary);
}

/* ============================================================
   Public surfaces: landing, legal (login is themed in LoginPage.css)
   These carry their own component-scoped CSS (bundled by Vite), so
   selectors are prefixed with `html body` to win on specificity
   regardless of stylesheet order. Light theme only (design.md).
   ============================================================ */

/* ---- Landing + legal (scoped under .qs-landing) ----------- */
html body .qs-landing {
  --land-bg: var(--odoo-surface);
  --land-fg: var(--odoo-text);
  --land-muted: #495057;
  --land-faint: var(--odoo-text-muted);
  --land-border: var(--odoo-border);
  --land-card: var(--odoo-surface);
  --land-card-2: var(--odoo-surface-muted);
  --land-primary: var(--odoo-primary);
  --land-primary-hover: var(--odoo-primary-hover);
  --land-accent: var(--odoo-primary);
  --land-glow-1: transparent;
  --land-glow-2: transparent;
  font-family: var(--odoo-font-family);
  letter-spacing: 0;
}

html body .legal-body h1 {
  background: none;
  -webkit-text-fill-color: var(--odoo-primary);
  color: var(--odoo-primary);
  letter-spacing: 0;
}

/* ---- Landing: replace hardcoded indigo/magenta gradients ---- */
html body .qs-landing .qs-btn-primary,
html body .qs-landing .qs-feature-icon,
html body .qs-landing .qs-step::before,
html body .qs-landing .qs-quote-avatar,
html body .qs-landing .qs-price-tag,
html body .qs-landing .qs-preview-chart::after {
  background: var(--odoo-primary);
  box-shadow: none;
}

html body .qs-landing .qs-btn-primary:hover { background: var(--odoo-primary-hover); }

html body .qs-landing .qs-brand-name,
html body .qs-landing .qs-hero-title .qs-grad,
html body .qs-landing .qs-stat-num {
  background: none;
  -webkit-text-fill-color: var(--odoo-primary);
  color: var(--odoo-primary);
}

html body .qs-landing .qs-feature::before,
html body .qs-landing .qs-preview-chart::before {
  background: var(--odoo-primary-subtle);
}

html body .qs-landing .qs-price.featured {
  background: var(--odoo-surface);
  border: 2px solid var(--odoo-primary);
  box-shadow: var(--odoo-shadow-menu);
}

/* ============================================================
   Contrast fixes inside the purple navbar and banners
   ============================================================ */

/* Business switcher keeps its white field + dark text on the purple bar */
html body .top-bar .business-switcher-trigger {
  background: var(--odoo-surface);
  color: var(--odoo-text);
  border: 1px solid var(--odoo-border-strong);
  min-height: var(--odoo-control-height);
  padding: 0 var(--odoo-space-3);
}
html body .top-bar .business-switcher-trigger:hover { background: var(--odoo-surface-muted); }
html body .top-bar .business-switcher-trigger .business-switcher-name { color: var(--odoo-text); }
html body .top-bar .business-switcher-trigger svg { color: var(--odoo-text-muted); }

/* Trial / plan banner: flat tinted bars with readable text */
html body .trial-banner {
  background: var(--odoo-primary-subtle);
  color: var(--odoo-primary-active);
  border-bottom: 1px solid var(--odoo-border);
  animation: none;
}
html body .trial-banner.warning { background: #fff3cd; color: #664d03; }
html body .trial-banner.expired { background: #f8d7da; color: #842029; }
html body .trial-banner.paid    { background: #d1e7dd; color: #0f5132; }
html body .trial-banner .trial-icon,
html body .trial-banner .trial-info { color: inherit; }
html body .trial-banner .trial-upgrade-btn {
  background: var(--odoo-primary);
  border: 1px solid var(--odoo-primary);
  color: #fff;
  border-radius: var(--odoo-radius-md);
  min-height: var(--odoo-control-height-sm);
  padding: 0 var(--odoo-space-3);
}
html body .trial-banner .trial-upgrade-btn:hover {
  background: var(--odoo-primary-hover);
  border-color: var(--odoo-primary-hover);
  color: #fff;
}

/* Sidebar brand icon sits on the purple header */
html body .sidebar .brand-icon,
html body .sidebar .brand svg { color: #fff; stroke: #fff; filter: none; }

/* Inline-styled indigo bits in page components (kept out of the TSX) */
html body [style*="rgb(99, 102, 241)"] { background: var(--odoo-primary) !important; }
html body [style*="rgb(224, 231, 255)"] { background: var(--odoo-primary-subtle) !important; color: var(--odoo-primary) !important; }
html body [style*="rgb(243, 232, 255)"] { background: var(--odoo-primary-subtle) !important; color: var(--odoo-primary) !important; }

/* .modal is the full-screen dimmed overlay; .modal-content is the dialog */
html body .modal { border: 0; border-radius: 0; box-shadow: none; background: rgb(0 0 0 / 40%); }
html body .modal:not(.active):not([style*="display: flex"]) { background: transparent; }

/* ---- Admin panel header (same purple navbar as the dashboard) ---- */
html body .admin-header {
  background: var(--odoo-primary);
  height: var(--odoo-navbar-height);
  border-bottom: 1px solid var(--odoo-primary-active);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html body .admin-header h1 { color: #fff; font-size: var(--odoo-font-size-md); font-weight: 600; letter-spacing: 0; }
html body .admin-header .admin-user #adminEmail { color: rgb(255 255 255 / 80%); }
html body .admin-header .role-badge {
  background: rgb(255 255 255 / 18%);
  color: #fff;
  border-radius: var(--odoo-radius-sm);
}
html body .admin-header button,
html body .admin-header svg { color: #fff; }
html body .admin-header #viewTitle { color: #fff; font-size: var(--odoo-font-size-md); font-weight: 600; letter-spacing: 0; }

/* Mobile bottom navs use a light surface (the purple is reserved for the top navbar) */
html body .mobile-bottom-nav,
html body .bottom-nav {
  background: var(--odoo-surface);
  border-top: 1px solid var(--odoo-border);
}
html body .mobile-bottom-nav .bottom-nav-item { color: var(--odoo-text-muted); }
html body .mobile-bottom-nav .bottom-nav-item.active { color: var(--odoo-primary); }

/* ============================================================
   Dark mode — follows the device (prefers-color-scheme).
   Same token names, dark values, so every component restyles
   from one block. Declared last, with the same `html:root`
   specificity as the light block, so it wins when the OS is dark.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  html:root {
    color-scheme: dark;

    --odoo-primary: #9a6c90;
    --odoo-primary-hover: #aa7da0;
    --odoo-primary-active: #b98db0;
    --odoo-primary-subtle: rgb(154 108 144 / 18%);

    --odoo-bg: #1c1e22;
    --odoo-surface: #2a2d33;
    --odoo-surface-muted: #33373e;
    --odoo-border: #41454d;
    --odoo-border-strong: #555a63;

    --odoo-text: #e6e8eb;
    --odoo-text-muted: #a2a8b0;
    --odoo-text-disabled: #6b7179;

    --odoo-success: #4cc38a;
    --odoo-warning: #ffca2c;
    --odoo-danger: #f0727f;
    --odoo-info: #6ea8fe;

    --odoo-shadow-menu: 0 2px 8px rgb(0 0 0 / 45%);
    --odoo-shadow-dialog: 0 8px 28px rgb(0 0 0 / 60%);
    --odoo-focus-ring: 0 0 0 2px rgb(154 108 144 / 45%);

    /* app variables follow the tokens */
    --color-primary-50: rgb(154 108 144 / 10%);
    --color-primary-100: rgb(154 108 144 / 16%);
    --color-primary-ring: rgb(154 108 144 / 40%);

    --color-success-light: rgb(76 195 138 / 14%);
    --color-warning: #ffca2c;
    --color-warning-light: rgb(255 202 44 / 14%);
    --color-warning-strong: #ffca2c;
    --color-danger-light: rgb(240 114 127 / 14%);
    --color-info-light: rgb(110 168 254 / 14%);

    --color-gray-100: #3a3e46;
    --color-gray-600: #b8bec6;
    --color-gray-700: #d0d5db;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow: 0 1px 2px rgb(0 0 0 / 50%);
    --shadow-card-hover: 0 0 0 1px var(--odoo-border-strong), 0 1px 4px rgb(0 0 0 / 50%);
  }

  /* Navbar stays a deep purple rather than the lighter accent */
  html body .top-bar,
  html body .sidebar-header,
  html body .admin-header,
  html body .admin-sidebar .sidebar-header { background: #4a3243; border-bottom-color: #3b2736; }

  html body .top-bar .business-switcher-trigger { background: var(--odoo-surface); }

  /* Banners */
  html body .trial-banner.warning { background: rgb(255 202 44 / 16%); color: #ffda6a; }
  html body .trial-banner.expired { background: rgb(240 114 127 / 18%); color: #f1aeb5; }
  html body .trial-banner.paid    { background: rgb(76 195 138 / 16%); color: #75b798; }
  html body .trial-banner { color: #e0c3d8; }

  /* Native form controls + overlay */
  html body input::placeholder,
  html body textarea::placeholder { color: var(--odoo-text-disabled); }
  html body .modal { background: rgb(0 0 0 / 60%); }

  html body .qs-landing { --land-muted: #b8bec6; }
  html body .qs-landing .qs-feature::before,
  html body .qs-landing .qs-preview-chart::before { background: var(--odoo-primary-subtle); }

  ::-webkit-scrollbar-thumb { background: var(--odoo-border-strong); }

  /* Status pills: light-tinted text on translucent tints */
  html body .status-pending   { color: #ffda6a; }
  html body .status-confirmed { color: #8bb9fe; }
  html body .status-delivered,
  html body .status-shipped   { color: #75b798; }
  html body .status-cancelled { color: #f1aeb5; }

  /* App-generated "No Image" placeholder is an SVG data URI with a light fill;
     real product photos (http/https URLs) are untouched. */
  html body img[src^="data:image/svg+xml"] { filter: invert(0.88) hue-rotate(180deg); }

  /* Inline-styled pastel icon tiles (Overview > Audience) */
  html body [style*="rgb(224, 242, 254)"] { background: var(--color-info-light) !important; color: var(--odoo-info) !important; }
}