/* Dana Compound — theme lock.
   Render the light "reference" palette ALWAYS, regardless of the device's
   prefers-color-scheme. This re-asserts app.css's own light design tokens in an
   unconditional :root{} loaded AFTER app.css, so it wins over app.css's
   @media (prefers-color-scheme:dark) block by cascade order (equal specificity,
   later source). Presentation-only — core/, app.css and app.js are untouched, so
   the app stays byte-identical to the product everywhere else. Values below are
   copied verbatim from the light :root in app.css. */
:root{
  color-scheme: light;
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#fbfbfc;
  --sunken:#edeff3; --sunken-line:#e0e3e9;
  --line:#e6e8ec; --line-strong:#d7dae1;
  --ink:#12141a; --ink-2:#5a6170; --ink-3:#8b919e;
  --accent:#1f6f4a; --accent-ink:#fff; --accent-soft:#e8f2ec; --accent-line:#cfe6da;
  --warn:#8a6100; --warn-soft:#fdf3de; --warn-line:#efe2c2;
  --danger:#9b2c2c; --danger-soft:#fbeaea; --danger-line:#efd2d2;
  --info:#31507f; --info-soft:#eef2fb; --info-line:#dde5f5;
  --note-bg:#fdfaf0; --note-line:#e3d3ab;
  --shadow:0 1px 2px rgba(18,20,26,.05);
  --tap-bg:rgba(18,20,26,.045);
}
body{ background:var(--bg); }

/* Slimmer notebook tab bar (Details / Internal / Chatter). app.css sets
   .o_notebook_tab min-height:var(--tap)=44px which made the pills too tall on
   the record view; trim the min-height and vertical padding. */
.o_notebook_headers{ padding-top:.1875rem; padding-bottom:.1875rem; }
.o_notebook_tab{ min-height:34px; padding-top:.25rem; padding-bottom:.25rem; }

/* Slimmer chatter COMPOSER mode strip (Send message / Log note / Activity). app.css
   gives .o-mail-Chatter_topbar button min-height:var(--tap)=44px + .625rem vertical
   padding, which is noticeably taller than the slimmed notebook tabs; trim it to
   match while keeping it tappable and preserving the active-tab underline. */
.o-mail-Chatter_topbar button{ min-height:34px; padding-top:.3125rem; padding-bottom:.3125rem; }

/* ── Pipeline KANBAN — fit + swipe cleanly on a phone ───────────────────────
   app.css §4 sizes each lane `flex:0 0 87%` and snaps it to CENTRE
   (`.o_kanban_group{scroll-snap-align:center}`). Centre-snapping parks every
   stage in the MIDDLE of the viewport, so BOTH neighbouring lanes bleed in and
   are clipped at the left AND right edges — which reads as "cards cut off on
   both sides" and makes the board feel wider than the screen. The `87%` basis
   also resolves against the padded content box, so on some widths the lane
   creeps toward the full viewport.
     Fix (presentation-only, loaded after app.css so it wins by source order):
   pin each lane to a fixed mobile width `min(86vw,340px)` and snap it to the
   START, so a stage lands FLUSH at the left edge with its full width visible
   and only the next stage peeks in — the standard swipe-carousel behaviour.
   Momentum scrolling on the lanes row; cards are hard-capped to their lane so
   long text ellipsizes/wraps instead of clipping past the edge. The page body
   still never scrolls sideways — only `.o_kanban_renderer` does. */
.o_kanban_renderer{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.o_kanban_group{ flex:0 0 min(86vw,340px); max-width:min(86vw,340px);
  scroll-snap-align:start; }
.o_kanban_record{ width:100%; max-width:100%; box-sizing:border-box; }

/* ══════════════════════════════════════════════════════════════════════════
   COLOR REVAMP — a richer, SEMANTIC palette layered on the light theme.
   Everything below is additive and presentation-only; it extends the existing
   --tone channel system with two new families (teal, violet) and colours the
   pipeline stages, priority, avatars, tags and hero. Fully reversible by
   deleting this block. Soft desaturated backgrounds + dark AA-legible ink.
   Stage map (set in models/crm.lead STAGE_TONE):
     New=slate-blue(info) · Qualified=teal · Proposition=amber(warn)
     Negotiation=violet   · Won=green(success) · Lost=red(danger)
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* two new tone families to complete the 6-stage spectrum */
  --teal:#0e6a6a;   --teal-soft:#e0f4f2;   --teal-line:#bfe7e2;
  --violet:#6a3fb0; --violet-soft:#f0eafb; --violet-line:#ddccf1;
  /* a restrained SECONDARY accent (slate-blue) for incidental icons/links */
  --accent-2:#31507f; --accent-2-soft:#eef2fb; --accent-2-line:#dde5f5;
}

/* --- tone channel: register the two new families (mirror of app.css) ------- */
.tone-teal  {--tone:var(--teal);  --toneSoft:var(--teal-soft);  --toneLine:var(--teal-line)}
.tone-violet{--tone:var(--violet);--toneSoft:var(--violet-soft);--toneLine:var(--violet-line)}

/* --- badges: new soft families + a couple existing ones the app now emits --- */
.o_badge--teal   {--bdg-bg:var(--teal-soft);  --bdg-fg:var(--teal)}
.o_badge--violet {--bdg-bg:var(--violet-soft);--bdg-fg:var(--violet)}
.o_badge--success{--bdg-bg:var(--accent-soft);--bdg-fg:var(--accent)}
.o_badge--info   {--bdg-bg:var(--info-soft);  --bdg-fg:var(--info)}

/* --- avatars: name-hashed soft palette (8 hues) so people aren't all-green.
   app.js swaps o_avatar--accent -> o_avatar--h<0..7> hashed on the initials. --- */
.o_avatar--success{--av-bg:var(--accent-soft);--av-fg:var(--accent);--av-border:transparent}
.o_avatar--teal   {--av-bg:var(--teal-soft);  --av-fg:var(--teal);  --av-border:transparent}
.o_avatar--violet {--av-bg:var(--violet-soft);--av-fg:var(--violet);--av-border:transparent}
.o_avatar--h0{--av-bg:#e8f2ec;--av-fg:#1f6f4a;--av-border:transparent}
.o_avatar--h1{--av-bg:#e0f4f2;--av-fg:#0e6a6a;--av-border:transparent}
.o_avatar--h2{--av-bg:#eef2fb;--av-fg:#31507f;--av-border:transparent}
.o_avatar--h3{--av-bg:#f0eafb;--av-fg:#6a3fb0;--av-border:transparent}
.o_avatar--h4{--av-bg:#fdf3de;--av-fg:#8a6100;--av-border:transparent}
.o_avatar--h5{--av-bg:#fbeaea;--av-fg:#9b2c2c;--av-border:transparent}
.o_avatar--h6{--av-bg:#e5f3fb;--av-fg:#17627f;--av-border:transparent}
.o_avatar--h7{--av-bg:#ececfb;--av-fg:#4646a3;--av-border:transparent}

/* --- FILTER CHIPS (All / New / Qualified / …): each stage chip wears its tone.
   Unselected = soft tint + coloured ink + hairline; selected = filled + white. --- */
.o_searchview_facet[class*="tone-"]{--btn-bg:var(--toneSoft);--btn-fg:var(--tone);
  --btn-border:var(--toneLine)}
.o_searchview_facet[class*="tone-"] .o_chip_count{color:var(--tone);opacity:.72}
.o_searchview_facet[class*="tone-"][aria-selected=true]{--btn-bg:var(--tone);
  --btn-fg:#fff;--btn-border:var(--tone)}
.o_searchview_facet[class*="tone-"][aria-selected=true] .o_chip_count{color:#fff;opacity:.78}

/* --- STATUSBAR RAIL: colour the done/current nodes + segments + active label by
   the current stage's tone instead of the flat green. Wrapper gets a tone-* class
   from app.js; falls back to green accent if a stage has no tone. --- */
.o_form_statusbar[class*="tone-"] .o_statusbar_node.done{background:var(--tone);border-color:var(--tone)}
.o_form_statusbar[class*="tone-"] .o_statusbar_node.cur{border-color:var(--tone);
  box-shadow:0 0 0 4px var(--toneSoft)}
.o_form_statusbar[class*="tone-"] .o_statusbar_node.cur::after{background:var(--tone)}
.o_form_statusbar[class*="tone-"] .o_statusbar_segment.done{background:var(--tone)}
.o_form_statusbar[class*="tone-"] .o_statusbar_labels span.on{color:var(--tone)}

/* --- PRIORITY stars: Low(none)→Medium blue→High orange→Very-High red --- */
.o_field_stars.lvl1 button.on{color:var(--info)}
.o_field_stars.lvl2 button.on{color:var(--warn)}
.o_field_stars.lvl3 button.on{color:var(--danger)}

/* --- KANBAN TAGS: name-hashed soft chips (app.js emits o_badge--h<0..7>) --- */
.o_badge--h0{--bdg-bg:#e8f2ec;--bdg-fg:#1f6f4a}
.o_badge--h1{--bdg-bg:#e0f4f2;--bdg-fg:#0e6a6a}
.o_badge--h2{--bdg-bg:#eef2fb;--bdg-fg:#31507f}
.o_badge--h3{--bdg-bg:#f0eafb;--bdg-fg:#6a3fb0}
.o_badge--h4{--bdg-bg:#fdf3de;--bdg-fg:#8a6100}
.o_badge--h5{--bdg-bg:#fbeaea;--bdg-fg:#9b2c2c}
.o_badge--h6{--bdg-bg:#e5f3fb;--bdg-fg:#17627f}
.o_badge--h7{--bdg-bg:#ececfb;--bdg-fg:#4646a3}

/* --- KANBAN LANE HEADER: give the whole lane header a soft tinted pill so each
   stage column reads as its own colour at a glance (title/dot already tone-driven). */
.o_kanban_group{background:color-mix(in srgb, var(--toneSoft) 55%, var(--sunken));
  border-color:var(--toneLine)}
.o_kanban_header{background:var(--toneSoft);border:1px solid var(--toneLine);
  border-radius:.625rem;padding:.375rem .5rem;margin:-.125rem -.0625rem .0625rem}
.o_kanban_group .o_column_total{color:var(--tone);opacity:.8}

/* --- HERO / KPI card: a gentle diagonal tint gradient instead of a flat fill,
   with a soft colour glow — numbers stay dark & legible. --- */
.o_monetary_summary{background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--toneSoft) 85%, #fff) 0%, transparent 60%),
    linear-gradient(135deg, var(--toneSoft) 0%, color-mix(in srgb, var(--toneSoft) 40%, var(--surface)) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--toneLine) 60%, transparent)}

/* --- META BAND: a whisper of the stage colour so it isn't dead grey --- */
.o_meta_group{background:color-mix(in srgb, var(--accent-2-soft) 22%, var(--sunken))}

/* --- CONTACT action icons (email/call): tinted with the secondary accent --- */
.o_field_contact .o_btn,.o_kv_value a{color:var(--accent-2)}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR — slide-in navigation drawer (the scalable full section list).
   Markup + logic are in app.js (ensureDrawer/openDrawer/syncDrawer); the drawer
   is data-driven off the SAME S.tabs the bottom bar uses, so every model added
   later appears automatically. Styled with the COLOR REVAMP tokens above so it
   sits in the same family as the rest of the app. Light-theme only (app is
   light-locked). Fully reversible by deleting this block + its app.js additions.
   ══════════════════════════════════════════════════════════════════════════ */

/* header hamburger — sits flush left, ghost until pressed, matches the o_cp_top
   icon buttons already defined in app.css (--btn-h / --btn-icon set there). */
.o_menu_btn{color:var(--ink-2)}
.o_menu_btn:active{background:var(--tap-bg)}

/* scrim behind the drawer — dim + blur, fades with the panel */
.dx-scrim{position:fixed;inset:0;z-index:60;background:rgba(18,20,26,.34);
  -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);
  opacity:0;transition:opacity .24s ease}
.dx-scrim.is-open{opacity:1}
body.dx-lock{overflow:hidden}

/* the panel — left-anchored, slides in from off-screen */
.dx-drawer{position:fixed;top:0;left:0;bottom:0;z-index:61;
  width:min(84vw,320px);display:flex;flex-direction:column;
  background:var(--surface);border-right:1px solid var(--line);
  box-shadow:0 0 40px rgba(18,20,26,.18);
  padding-top:var(--sat,0px);padding-bottom:var(--sab,0px);
  transform:translateX(-102%);transition:transform .26s cubic-bezier(.22,.61,.36,1);
  will-change:transform;overscroll-behavior:contain}
.dx-drawer.is-open{transform:translateX(0)}

/* brand band — a soft accent gradient, echoing the hero card treatment */
.dx-head{display:flex;align-items:center;gap:.5rem;
  padding:.875rem 1rem;min-height:3rem;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--accent-soft) 85%, #fff) 0%, transparent 62%),
    linear-gradient(135deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent-soft) 30%, var(--surface)) 100%)}
.dx-brand{font-size:1.0625rem;font-weight:680;letter-spacing:-.02em;color:var(--ink);flex:1}
.dx-close{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:2.125rem;height:2.125rem;border:0;border-radius:.625rem;
  background:transparent;color:var(--ink-2);cursor:pointer}
.dx-close:active{background:var(--tap-bg)}
.dx-close svg{width:1.125rem;height:1.125rem;stroke:currentColor;fill:none;stroke-width:1.9}

/* current user strip */
.dx-user{display:flex;align-items:center;gap:.625rem;
  padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.dx-uname{font-size:.875rem;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the section list */
.dx-nav{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:.5rem .5rem calc(.75rem + var(--sab,0px))}
.dx-group{font-size:.6875rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
  padding:.75rem .75rem .375rem}
.dx-item{display:flex;align-items:center;gap:.75rem;width:100%;
  min-height:max(var(--tap),2.875rem);
  padding:.5rem .75rem;margin:.0625rem 0;border:0;border-radius:.75rem;
  background:transparent;color:var(--ink-2);cursor:pointer;text-align:left;
  font-size:.9375rem;font-weight:550;transition:background .14s,color .14s}
.dx-item:active{background:var(--tap-bg)}
.dx-item-ico{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:2.125rem;height:2.125rem;border-radius:.625rem;
  background:var(--sunken);color:var(--ink-2);transition:background .14s,color .14s}
.dx-item-ico svg{width:1.1875rem;height:1.1875rem;stroke:currentColor;fill:none;stroke-width:1.8}
.dx-item-ico .dotmark{width:1.1875rem;height:1.1875rem;border-radius:.375rem;
  border:1.6px solid currentColor;opacity:.85}
.dx-item-lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-item-badge{flex:0 0 auto;min-width:1.25rem;height:1.25rem;padding:0 .375rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:.75rem;background:var(--danger-soft);color:var(--danger);
  font-size:.6875rem;font-weight:700}

/* active section — filled accent tile, matching the bottom bar's selected tone */
.dx-item[aria-current="true"]{background:var(--accent-soft);color:var(--accent);font-weight:650}
.dx-item[aria-current="true"] .dx-item-ico{background:var(--accent);color:var(--accent-ink)}

/* ══════════════════════════════════════════════════════════════════════════
   EFFECTS — depth, motion & micro-interactions (Amazon/Noon-tier polish).
   CSS-ONLY, additive, presentation-only, fully reversible by deleting this
   block. No app.js changes. Motion is short + eased; everything non-essential
   is disabled under prefers-reduced-motion (see the guard at the end).
   Cross-checked against the guardrails: light-lock, kanban width, slim
   tabs/composer, #id header and the stage colour system are untouched.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* layered elevation tokens — soft, cool-neutral, multi-stop (not one hard drop) */
  --elev-1:0 1px 2px rgba(18,20,26,.04), 0 2px 6px rgba(18,20,26,.05);
  --elev-2:0 2px 5px rgba(18,20,26,.05), 0 10px 24px -8px rgba(18,20,26,.12);
  --elev-hero:0 1px 3px rgba(18,20,26,.05), 0 8px 22px -8px rgba(18,20,26,.14);
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

/* --- LIST card: lift the whole table off the background + rounder corners.
   Rows get a smooth press (scale + tint) instead of a flat highlight. --- */
.o_list_table{box-shadow:var(--elev-1);border-radius:1rem}
.o_list_view .o_data_row{transition:background .15s ease, transform .12s var(--ease-out)}
.o_list_view .o_data_row:active{transform:scale(.99)}

/* --- KANBAN cards: real elevation at rest, press keeps the existing scale --- */
.o_kanban_record{box-shadow:var(--elev-1);border-radius:.9375rem;
  transition:transform .13s var(--ease-out), box-shadow .18s ease}
.o_kanban_record:active{box-shadow:var(--elev-2)}

/* --- HERO / KPI card: add drop elevation + a top sheen, keep the tint gradient
   and the inset colour ring from the COLOR REVAMP; numbers stay dark/legible. --- */
.o_monetary_summary{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px color-mix(in srgb, var(--toneLine) 60%, transparent),
    var(--elev-hero)}

/* --- STICKY HEADER DEPTH: the top control panels sit ABOVE the scroller and
   cast a soft shadow, so content reads as passing underneath (persistent, CSS
   -only). A true scroll-reactive shadow needs a JS scroll listener → DEFERRED
   (noted to coordinator; app.js is off-limits this round). --- */
.o_control_panel,.o_form_control_panel{position:relative;z-index:4;
  box-shadow:0 2px 10px -6px rgba(18,20,26,.14)}
/* floating bottom bar — lift it with an upward shadow */
.o_bottom_nav{position:relative;z-index:4;
  box-shadow:0 -2px 12px -6px rgba(18,20,26,.12)}
.o_bottom_nav button{transition:color .16s ease, transform .12s var(--ease-out)}
.o_bottom_nav button:active{transform:scale(.94)}

/* --- BUTTONS: subtle shadow on the emphasised ones + a crisp press --- */
.o_btn{transition:background .16s ease, color .16s ease, border-color .16s ease,
  box-shadow .16s ease, transform .12s var(--ease-out)}
.o_btn:active{transform:scale(.97)}
.o_btn--primary{box-shadow:0 1px 2px rgba(18,20,26,.08), 0 6px 16px -8px rgba(31,111,74,.5)}
.o_btn--primary:active{box-shadow:0 1px 2px rgba(18,20,26,.10)}
.o_btn--accent{box-shadow:0 1px 2px rgba(18,20,26,.05)}

/* --- CHIPS & TABS: smooth colour/press transitions so the active state glides --- */
.o_searchview_facet{transition:background .18s ease, color .18s ease,
  border-color .18s ease, transform .12s var(--ease-out)}
.o_searchview_facet:active{transform:scale(.95)}
.o_notebook_tab{transition:background .18s ease, color .18s ease, border-color .18s ease,
  transform .12s var(--ease-out)}
.o_notebook_tab:active{transform:scale(.97)}
/* chatter composer mode strip — animate the underline sweep under the active tab */
.o-mail-Chatter_topbar button{transition:color .16s ease}
.o-mail-Chatter_topbar button::after{transition:transform .2s var(--ease-out), opacity .2s ease}

/* --- ENTRANCE: list rows & kanban cards fade + rise with a light stagger.
   fill-mode `backwards` holds the hidden state only BEFORE the run, then hands
   back to normal styles — so :active transforms above still work. --- */
@keyframes dxRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.o_list_view .o_data_row{animation:dxRise .30s var(--ease-out) backwards}
.o_list_view .o_data_row:nth-child(2){animation-delay:.03s}
.o_list_view .o_data_row:nth-child(3){animation-delay:.06s}
.o_list_view .o_data_row:nth-child(4){animation-delay:.09s}
.o_list_view .o_data_row:nth-child(5){animation-delay:.11s}
.o_list_view .o_data_row:nth-child(6){animation-delay:.13s}
.o_list_view .o_data_row:nth-child(7){animation-delay:.15s}
.o_list_view .o_data_row:nth-child(n+8){animation-delay:.16s}
.o_kanban_record{animation:dxRise .34s var(--ease-out) backwards}
.o_kanban_record:nth-child(3){animation-delay:.04s}
.o_kanban_record:nth-child(4){animation-delay:.08s}
.o_kanban_record:nth-child(5){animation-delay:.11s}
.o_kanban_record:nth-child(n+6){animation-delay:.13s}
/* drawer items ride in on open */
.dx-drawer.is-open .dx-item{animation:dxRise .28s var(--ease-out) backwards}
.dx-drawer.is-open .dx-item:nth-child(3){animation-delay:.03s}
.dx-drawer.is-open .dx-item:nth-child(4){animation-delay:.05s}
.dx-drawer.is-open .dx-item:nth-child(n+5){animation-delay:.07s}

/* --- SKELETON: replace the opacity pulse with a moving light sweep --- */
.skel{opacity:1;animation:none;overflow:hidden;position:relative;
  background:var(--surface);border:1px solid var(--line)}
.skel::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg, transparent 25%,
    color-mix(in srgb, var(--sunken) 75%, #fff) 48%, transparent 72%);
  transform:translateX(-100%);animation:dxShimmer 1.4s ease-in-out infinite}
@keyframes dxShimmer{100%{transform:translateX(100%)}}

/* --- REDUCED MOTION: honour the OS setting — kill entrance, shimmer, drawer
   slide and press-scales; keep only instant, essential state changes. --- */
@media (prefers-reduced-motion: reduce){
  .o_list_view .o_data_row, .o_kanban_record, .dx-drawer.is-open .dx-item{animation:none !important}
  .skel::after{animation:none;opacity:.5}
  .dx-drawer, .dx-scrim{transition:none !important}
  .o_list_view .o_data_row:active, .o_kanban_record:active, .o_btn:active,
  .o_searchview_facet:active, .o_notebook_tab:active, .o_bottom_nav button:active{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   ICONS — colored, cohesive, premium. Reuses the semantic palette + tone
   families. Section (nav + drawer) icons get a distinct colour per section via
   a shared --sc/--scs channel keyed off the [data-tab] both surfaces already
   carry (NO app.js needed). Inline/field/header glyphs get accent or a soft
   semantic tone. CSS-only, additive, reversible by deleting this block.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* three more section hues to round out the map (soft tile + dark AA glyph) */
  --indigo:#4646a3; --indigo-soft:#ececfb;
  --cyan:#17627f;   --cyan-soft:#e5f3fb;
  --slate:#54607a;  --slate-soft:#eef0f4;
}

/* SECTION → colour. Attribute-only selector so it feeds BOTH the bottom-nav
   button and the drawer item that share this data-tab. --sc = glyph/ink,
   --scs = soft tile. Unmapped sections fall back to neutral. */
[data-tab="pipeline"]             {--sc:var(--accent);--scs:var(--accent-soft)}
[data-tab="contacts"]             {--sc:var(--info);  --scs:var(--info-soft)}
[data-tab="expenses"]             {--sc:var(--warn);  --scs:var(--warn-soft)}
[data-tab="chat"]                 {--sc:var(--slate); --scs:var(--slate-soft)}
[data-tab="petty_cash_funds"]     {--sc:var(--teal);  --scs:var(--teal-soft)}
[data-tab="petty_cash_closings"]  {--sc:var(--teal);  --scs:var(--teal-soft)}
[data-tab="petty_cash_settlements"]{--sc:var(--teal); --scs:var(--teal-soft)}
[data-tab="internal_transfer"]    {--sc:var(--indigo);--scs:var(--indigo-soft)}
[data-tab="poc_transfers"]        {--sc:var(--cyan);  --scs:var(--cyan-soft)}
[data-tab="employee_loans"]       {--sc:var(--violet);--scs:var(--violet-soft)}

/* --- BOTTOM NAV: colour each section's glyph; selected label+icon go full
   section colour (was a flat green for all). --- */
.o_bottom_nav button svg{color:var(--sc,var(--ink-3));transition:color .16s ease}
.o_bottom_nav button[aria-selected=true]{color:var(--sc,var(--accent))}

/* --- SIDEBAR DRAWER: upgrade the grey icon tiles to soft COLOURED tiles per
   section; the active item becomes a SOLID tile in its own colour + white glyph
   (overrides the earlier all-green active treatment). --- */
.dx-item .dx-item-ico{background:var(--scs,var(--sunken));color:var(--sc,var(--ink-2))}
.dx-item[aria-current="true"]{background:var(--scs,var(--accent-soft));color:var(--sc,var(--accent))}
.dx-item[aria-current="true"] .dx-item-ico{background:var(--sc,var(--accent));color:#fff}

/* --- HEADER icons: brand + semantic, not flat grey --- */
.o_menu_btn svg{color:var(--accent)}                        /* hamburger — brand green */
.o_cp_back svg,#back svg{color:var(--accent-2)}             /* back — slate-blue */
#del svg{color:var(--danger)}                               /* delete — red (semantic) */
.o_view_switcher button[aria-pressed=true] svg{color:var(--accent)} /* active view — green */
.o_searchview > svg{color:var(--accent-2)}                  /* search magnifier — slate-blue */

/* --- INLINE / BAND / field-meta glyphs: calm slate-blue accent --- */
.o_meta_group .o_kv_label svg{color:var(--accent-2)}

/* --- EMPTY-STATE icon: soft green tile instead of grey --- */
.o_nocontent_icon{background:var(--accent-soft);border-color:var(--accent-line)}
.o_nocontent_icon svg{stroke:var(--accent)}

/* ═══════════════════════ FORM-ACTIONS (power.project sidebar) ═══════════════════════
   The form-header "Actions" affordance + the right-anchored slide-in drawer that
   surfaces a form's whole sidebar() button set, grouped by separator. Mirrors the
   nav drawer (.dx-*) treatment but slides from the RIGHT, so on a 390px phone the
   full action surface of a big Odoo form (header + statusbar + smart buttons) is
   one tap away without ever spending width on an always-open rail. */

/* the header trigger — a compact accent chip that reads as the primary form verb */
.o_form_actions_btn{display:inline-flex;align-items:center;gap:.375rem;
  height:2rem;padding:0 .625rem;border:1px solid var(--accent-line);border-radius:.625rem;
  background:var(--accent-soft);color:var(--accent);font-size:.8125rem;font-weight:650;
  cursor:pointer;flex:0 0 auto}
.o_form_actions_btn:active{background:color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 12%)}
.o_form_actions_btn svg{width:1.0625rem;height:1.0625rem;stroke:currentColor;fill:none;stroke-width:1.9}
.o_form_actions_lbl{letter-spacing:-.01em}

/* scrim + panel (right-anchored) */
.fa-scrim{position:fixed;inset:0;z-index:62;background:rgba(18,20,26,.34);
  -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);
  opacity:0;transition:opacity .24s ease}
.fa-scrim.is-open{opacity:1}
.fa-drawer{position:fixed;top:0;right:0;bottom:0;z-index:63;
  width:min(90vw,360px);display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line);
  box-shadow:0 0 40px rgba(18,20,26,.20);
  padding-top:var(--sat,0px);padding-bottom:var(--sab,0px);
  transform:translateX(102%);transition:transform .26s cubic-bezier(.22,.61,.36,1);
  will-change:transform;overscroll-behavior:contain}
.fa-drawer.is-open{transform:translateX(0)}

/* header band — accent gradient echoing the nav drawer + hero card */
.fa-head{display:flex;align-items:center;gap:.5rem;
  padding:.875rem 1rem;min-height:3rem;border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--accent-soft) 85%, #fff) 0%, transparent 62%),
    linear-gradient(225deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent-soft) 30%, var(--surface)) 100%)}
.fa-title{display:flex;align-items:center;gap:.5rem;flex:1;
  font-size:1.0625rem;font-weight:680;letter-spacing:-.02em;color:var(--ink)}
.fa-title svg{width:1.125rem;height:1.125rem;stroke:var(--accent);fill:none;stroke-width:2}
.fa-close{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:2.125rem;height:2.125rem;border:0;border-radius:.625rem;
  background:transparent;color:var(--ink-2);cursor:pointer}
.fa-close:active{background:var(--tap-bg)}
.fa-close svg{width:1.125rem;height:1.125rem;stroke:currentColor;fill:none;stroke-width:1.9}

/* the button list */
.fa-nav{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:.5rem .5rem calc(.75rem + var(--sab,0px))}
.fa-group{font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);padding:.875rem .75rem .375rem}
.fa-group:first-child{padding-top:.375rem}
.fa-item{display:flex;align-items:center;gap:.75rem;width:100%;
  padding:.625rem .75rem;border:0;border-radius:.75rem;background:transparent;
  color:var(--ink);text-align:left;cursor:pointer}
.fa-item:active{background:var(--tap-bg)}
.fa-item-ico{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:.5rem;background:var(--sunken);color:var(--ink-2)}
.fa-item-ico svg{width:1.125rem;height:1.125rem;stroke:currentColor;fill:none;stroke-width:1.8}
.fa-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.0625rem}
.fa-item-lbl{font-size:.9375rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa-item-hint{font-size:.6875rem;font-weight:600;color:var(--accent-2);letter-spacing:.01em}
.fa-item-hint--run{color:var(--accent)}
.fa-item-chev{flex:0 0 auto;color:var(--line-strong);display:flex}
.fa-item-chev svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:2}
/* primary actions — the accent tile treatment, so the create verbs stand out */
.fa-item--primary .fa-item-ico{background:var(--accent);color:var(--accent-ink)}
.fa-item--primary .fa-item-lbl{color:var(--accent);font-weight:680}

/* staggered rise, matching the nav drawer's entrance */
.fa-drawer.is-open .fa-item{animation:dxRise .28s var(--ease-out,cubic-bezier(.22,.61,.36,1)) backwards}
.fa-drawer.is-open .fa-item:nth-child(3){animation-delay:.02s}
.fa-drawer.is-open .fa-item:nth-child(n+5){animation-delay:.04s}

/* transient toast — bottom-centre, above the pinned footer */
.dx-toast{position:fixed;left:50%;bottom:calc(4.75rem + var(--sab,0px));z-index:70;
  transform:translate(-50%,1.25rem);opacity:0;pointer-events:none;
  max-width:min(88vw,26rem);padding:.625rem 1rem;border-radius:.75rem;
  background:var(--ink,#16181d);color:#fff;font-size:.8125rem;font-weight:600;
  box-shadow:0 8px 30px rgba(18,20,26,.28);
  transition:opacity .22s ease,transform .22s var(--ease-out,cubic-bezier(.22,.61,.36,1))}
.dx-toast.is-open{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .fa-drawer,.fa-scrim,.dx-toast{transition:none !important}
  .fa-drawer.is-open .fa-item{animation:none !important}
}
/* ═══════════════════════ end FORM-ACTIONS ═══════════════════════ */