/* ==========================================================================
   DashView — Theme final pass  (load LAST, after liquid-glass.css)

   Found by a WCAG contrast audit of the real tokens (dark + light):
     1. Light theme: brand amber text was 3.4–3.8 : 1  (needs 4.5 : 1).
     2. Light theme: good / bad / flat / warn chips were 3.5–4.4 : 1 on their own tint.
     3. Dark theme: pro-detail.css (loaded after exec-unify.css) silently replaced the
        amber-first chart palette with violet/cyan/green, so CSS-coloured KPI accents and
        company dots no longer matched the charts, and green/red leaked into categories.
     4. visual-polish.css still painted focus rings, text selection, table hover and
        scrollbars in the old violet inside the amber theme.
     5. Native controls (scrollbars, date pickers, checkboxes) ignored the theme.

   Rules kept:  categories = --dv-c1..10 (iOS system colours, orange first, no red/green)
                verdicts   = --st-*      (green good, red bad, orange warn, blue info, grey flat)
   v2.17:       verdict / danger / success colours are the iOS system colours (--ios-*), see section 2.
   Every pair below is >= 4.5 : 1 for text and >= 3 : 1 for graphics.
   ========================================================================== */

/* ── 1. Native controls follow the theme ─────────────────────────────────── */
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
:root { accent-color: var(--signal); }

/* ── 2. One category palette: Apple system colours (same values as DVFmt.PALETTE in odoo-client.js) ─ */
:root {
  --dv-c1: #ff9f0a; --dv-c2: #0a84ff; --dv-c3: #bf5af2; --dv-c4: #63e6e2; --dv-c5: #ffd60a;
  --dv-c6: #7d7aff; --dv-c7: #40c8e0; --dv-c8: #ac8e68; --dv-c9: #64d2ff; --dv-c10: #98989d;
  /* iOS system colours (dark values). Verdicts, danger and success now use them, so a green/red/orange/blue chip
     looks the same here as in iOS. >= 4.9 : 1 on the dark surfaces. */
  --ios-blue: #0a84ff; --ios-indigo: #7d7aff; --ios-purple: #bf5af2; --ios-pink: #ff375f; --ios-red: #ff453a;
  --ios-orange: #ff9f0a; --ios-yellow: #ffd60a; --ios-green: #30d158; --ios-mint: #63e6e2; --ios-teal: #40c8e0;
  --ios-cyan: #64d2ff; --ios-brown: #ac8e68; --ios-gray: #98989d;
  --st-good: var(--ios-green); --st-bad: var(--ios-red); --st-warn: var(--ios-orange); --st-info: var(--ios-blue); --st-flat: var(--ios-gray);
  --danger: var(--ios-red); --danger-10: rgba(255, 69, 58, .12);
  --emerald: var(--ios-green); --emerald-10: rgba(48, 209, 88, .12);
  --accent2: var(--ios-blue); --accent2-10: rgba(10, 132, 255, .14);
  --dv-pos: var(--st-good); --dv-neg: var(--st-bad); --dv-warn: var(--st-warn);
  --cp-c1: var(--dv-c1); --cp-c2: var(--dv-c2); --cp-c3: var(--dv-c3); --cp-c4: var(--dv-c4); --cp-c5: var(--dv-c5); --cp-c6: var(--dv-c6);
}

/* ── 3. Light theme: AA-safe brand + verdict colours ─────────────────────── */
html[data-theme="light"] {
  --signal: #9a5b0a;                       /* was #b87316 : 3.4 → 4.9 : 1 on the soft surface */
  --signal-bright: #8f5509;                /* was #a9640f : 4.2 → 5.4 : 1 */
  --signal-10: rgba(154, 91, 10, .08);
  --signal-20: rgba(154, 91, 10, .15);
  --line: rgba(154, 91, 10, .14);
  --line-strong: rgba(154, 91, 10, .28);
  --beacon: #8f5509;
  /* iOS system colours, light theme: Apple's light values darkened just enough for text (>= 4.6 : 1 on the soft surface) */
  --ios-blue: #0069db; --ios-indigo: #5856d6; --ios-purple: #9a48c3; --ios-pink: #d12546; --ios-red: #cc2f26;
  --ios-orange: #b05000; --ios-yellow: #856a00; --ios-green: #217d38; --ios-mint: #007b76; --ios-teal: #207685;
  --ios-cyan: #22749a; --ios-brown: #7f6545; --ios-gray: #6d6d71;
  --emerald: #18702e;                      /* iOS green, AA on white, soft and on its own 12% tint */
  --emerald-10: rgba(24, 112, 46, .10);
  --danger: #b8241a;
  --danger-10: rgba(184, 36, 26, .09);
  --accent2: #005ec4;
  --accent2-10: rgba(0, 94, 196, .10);

  --dv-c1: #cc7700; --dv-c2: #007aff; --dv-c3: #af52de; --dv-c4: #009d96; --dv-c5: #a88700;
  --dv-c6: #5856d6; --dv-c7: #2a99ad; --dv-c8: #a2845e; --dv-c9: #2b95c6; --dv-c10: #8b8b90;
  --st-good: #18702e; --st-bad: #b8241a; --st-warn: #964800; --st-info: #005ec4; --st-flat: #5e5e63;   /* iOS green / red / orange / blue / gray, each >= 4.5 : 1 on white, soft and its own chip tint */
}

/* Chips: tint stays light, text gets the darker verdict colour (>= 4.7 : 1 on white and on soft) */
.olx-delta.good, .olx-sbadge.is-good { color: var(--st-good); }
.olx-delta.bad,  .olx-sbadge.is-bad  { color: var(--st-bad); }
.olx-delta.flat, .olx-sbadge.is-flat { color: var(--st-flat); }
html[data-theme="light"] .olx-delta.good { background: color-mix(in srgb, var(--st-good) 12%, transparent); }
html[data-theme="light"] .olx-delta.bad  { background: color-mix(in srgb, var(--st-bad) 12%, transparent); }
html[data-theme="light"] .olx-delta.flat { background: color-mix(in srgb, var(--st-flat) 12%, transparent); }
html[data-theme="light"] .olx-sbadge.is-good { background: color-mix(in srgb, var(--st-good) 12%, transparent); }

/* White text on brand-amber buttons stays readable in light (5.4 : 1 now, was 3.8 : 1) */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] #view-overview .date-range button.active { color: #fff; }

/* ── 4. One accent everywhere: amber focus, selection, hover, scrollbars ──── */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-20); }
::selection { background: var(--signal-20); color: inherit; }
html[data-theme="dark"] ::selection, html:not([data-theme]) ::selection { background: rgba(var(--sg,232,163,61), .38); }
tbody tr:hover { background: var(--signal-10); }
* { scrollbar-color: color-mix(in srgb, var(--signal) 45%, transparent) transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--signal) 40%, transparent); background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--signal) 65%, transparent); background-clip: content-box; }
.kpi-card.c-purple .kpi-icon { background: color-mix(in srgb, var(--dv-c3) 14%, transparent); color: var(--dv-c3); }
.odoo-icon-badge { background: var(--signal-10); color: var(--signal); }

/* ── 5. Text that must always be readable ────────────────────────────────── */
::placeholder { color: var(--ink-50); opacity: 1; }
:disabled { opacity: .55; }
a:not([class]) { color: var(--signal); text-underline-offset: 2px; }

/* ── 6. Accessibility modes ──────────────────────────────────────────────── */
@media (prefers-contrast: more) {
  :root { --line: rgba(232, 237, 232, .32); --line-strong: rgba(232, 237, 232, .55); }
  html[data-theme="light"] { --line: rgba(20, 24, 19, .35); --line-strong: rgba(20, 24, 19, .6); }
  :focus-visible { outline-width: 3px; }
}
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
  .olx-delta, .olx-sbadge { border: 1px solid CanvasText; }
}
@media print {
  :root, html[data-theme="dark"] { color-scheme: light; }
  ::selection { background: transparent; }
}

/* ==========================================================================
   Phone / app (Capacitor) fixes - keep at the very end of the stack
   ========================================================================== */
/* no grey flash and no 300 ms delay on taps */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary, select, label, [role="button"], [role="tab"], input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }

/* an empty company bar rendered as a blank pill while Odoo was not connected */
#view-overview .ov-company-filter:empty { display: none; }
/* the Data tab badge showed as an empty circle until rows were counted */
.studio-tab .badge:empty { display: none; }

/* 100vh is taller than the visible screen on phones (address bar / app chrome), which pushed the bottom of the
   side menu and full-height panels off screen. dvh follows the real visible height. */
@supports (height: 100dvh) {
  .dash-shell { min-height: 100dvh; }
  .dash-side { height: 100dvh; }
  .ai-shell, body.ai-body { height: 100dvh; }
  .studio-empty { min-height: calc(100dvh - 56px); }
  .studio-main { min-height: calc(100dvh - 56px); }
  .ws-modal .modal-card { max-height: calc(100dvh - 32px); }
}

@media (max-width: 900px) {
  /* iOS zooms the whole page when a field under 16px gets focus and never zooms back */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]),
  select, textarea { font-size: 16px; }
  /* comfortable tap targets */
  .dash-icon-btn, .studio-icon-btn, #fieldsToggleBtn { min-width: 44px; min-height: 44px; }
  .studio-tab { min-height: 44px; }
  /* keep content clear of the home indicator / gesture bar and off the notch */
  #toastStack, .back-to-top { margin-bottom: env(safe-area-inset-bottom, 0px); }
  .dash-topbar { padding-left: max(var(--sp-3, 12px), env(safe-area-inset-left, 0px)); padding-right: max(var(--sp-3, 12px), env(safe-area-inset-right, 0px)); }
  /* rubber-band overscroll was dragging the whole app shell */
  body { overscroll-behavior-y: none; }
}

@media (max-width: 760px) {
  /* a lone vertical divider floated between the Hierarchy selectors once they wrapped */
  #view-studio .hierarchy-controls .studio-divider-v { display: none; }
}

@media (max-width: 600px) {
  /* "Saved / No changes yet" sat 12px left of the workbook name above it */
  #view-studio .studio-save-state { padding-left: 12px; }
  /* tab strips scroll sideways - show that more is there instead of cutting a label in half */
  .studio-tabs, .dv-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .studio-tabs { scroll-padding-inline: 12px; }
}

/* ==========================================================================
   Layout system - one scale for desktop, tablet and phone / app
   --------------------------------------------------------------------------
   Before: page titles ranged 22-38px at weight 400 AND 600 depending on the page, the content gutter was 32px
   even on a 390px phone, and the 232px sidebar stayed open on a tablet. Now every page shares:
     gutter   32px desktop · 24px tablet · 16px phone      (topbar uses the same value, so edges line up)
     gap      20px · 16px · 12px                            card padding 20px · 18px · 16px
     title    24-32px fluid, weight 600, one line-height    subtitle 14px muted
     targets  44px on touch, 36px with a mouse
   ========================================================================== */
:root { --lx-gutter: 32px; --lx-gap: 20px; --lx-card: 20px; }
@media (max-width: 1100px) { :root { --lx-gutter: 24px; --lx-gap: 16px; --lx-card: 18px; } }
@media (max-width: 600px)  { :root { --lx-gutter: 16px; --lx-gap: 12px; --lx-card: 16px; } }

.dash-content { padding-left: var(--lx-gutter); padding-right: var(--lx-gutter); }
.dash-topbar { padding-left: var(--lx-gutter); padding-right: var(--lx-gutter); }
.dash-content .kpi-grid, .dash-content .dash-grid, .dash-content .widget-grid { gap: var(--lx-gap); }

/* page titles: identical on every page */
.dash-content h1:not(.aiw-title) {
  font-size: clamp(24px, 1.1vw + 19px, 32px) !important; font-weight: 600 !important; letter-spacing: -0.022em !important; line-height: 1.15 !important; margin: 0 !important;
}
.dash-content h1:not(.aiw-title) + p, .dash-content .ov-head p:not(.eyebrow), .dash-content .studio-page-head p:not(.studio-eyebrow) { font-size: 14px; line-height: 1.5; margin-top: 6px; }
/* same vertical rhythm under every page head */
.dash-content .ov-head, .dash-content .studio-page-head, .dash-content .hr-head { margin-bottom: var(--lx-gap); }

/* tablet: the sidebar becomes an icon rail (tap the arrow to open it), so content gets the width */
@media (min-width: 801px) and (max-width: 1100px) {
  .dash-shell:not(.collapsed) { grid-template-columns: 68px minmax(0, 1fr); }
  .dash-shell:not(.collapsed) .dash-side-brand span,
  .dash-shell:not(.collapsed) .dash-nav-label,
  .dash-shell:not(.collapsed) .dash-nav-link span:not(.badge),
  .dash-shell:not(.collapsed) .dash-side-user-info,
  .dash-shell:not(.collapsed) .dash-nav-link .badge { display: none; }
  .dash-shell:not(.collapsed) .dash-nav-link { justify-content: center; }
  .dash-shell:not(.collapsed) .dash-side-brand { padding: 0; justify-content: center; }
  .dash-shell:not(.collapsed) .dash-side-collapse-btn { display: none; }
  .dash-shell:not(.collapsed) .dash-side-foot { justify-content: center; padding: var(--sp-3); }
  /* .collapsed here means "opened by the user": back to the full 232px menu */
  .dash-shell.collapsed { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .dash-shell.collapsed .dash-side-brand span, .dash-shell.collapsed .dash-nav-label, .dash-shell.collapsed .dash-nav-link span:not(.badge),
  .dash-shell.collapsed .dash-side-user-info { display: revert; }
  .dash-shell.collapsed .dash-nav-link .badge { display: inline-block; }
  .dash-shell.collapsed .dash-nav-link { justify-content: flex-start; }
}

/* phone: stacked page heads with full-width, evenly sized actions */
@media (max-width: 600px) {
  .dash-content .ov-head, .dash-content .studio-page-head { align-items: flex-start !important; gap: 12px; }
  #view-overview .ov-head-actions { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; }
  #view-overview .ov-head-actions > * { min-width: 0; min-height: 44px; }
  #view-overview .ov-head-actions > :first-child, #view-overview .ov-head-actions > .ov-period, #view-overview .ov-head-actions > [role="group"] { grid-column: 1 / -1; }
  #view-overview .ov-head-actions .btn { width: 100%; justify-content: center; }
  .btn { min-height: 44px; } .btn-sm { min-height: 40px; }
  /* settings health cards: two even columns, an odd last card spans the row, values never wrap */
  .stgo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stgo-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stgo-card b { display: block; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* cards breathe the same everywhere */
  .widget-card, .kpi-card, .dash-card { padding: var(--lx-card); }
}
@media (max-width: 400px) { .dash-search { width: auto; flex: 1 1 0; min-width: 0; } .dash-search kbd { display: none; } }

/* wide screens: keep line lengths readable and centre the workspace */
@media (min-width: 1920px) { .dash-content { margin-inline: auto; } }

/* Settings rail turns into a wrapping row on tablets/phones with position:static, so its sliding pill was positioned against the page
   and floated over the header. A positioned rail keeps the pill inside it. */
@media (max-width: 900px) { .stg-rail.dv-tabs { position: relative; top: auto; } }
/* period switch fills its row evenly instead of leaving a gap on the right */
@media (max-width: 600px) {
  #view-overview .date-range { display: grid !important; grid-template-columns: repeat(3, 1fr); width: 100%; text-align: center; }
  #view-overview #ovStatus { width: 100%; justify-content: flex-start; box-sizing: border-box; }
}