/* ============================================================================
   juribooks-sections-v2.css — cross-section craft elevation.

   Every screen renders inside `.view` and shares one component vocabulary
   (`.eyebrow`, `.card`, `.mx`, `.tb-tbl`, `.rtabs/.rtab`, `.period-bar`, `.pf`,
   `.empty`). Raising that shared vocabulary lifts all ~40 sections at once,
   consistently, instead of hand-restyling each screen. This layer refines
   hierarchy, spacing rhythm, table craft, tab and empty-state treatment, and
   swaps the per-card entrance storm for one calm view reveal (Operate mode:
   a daily-use tool, motion must not become noise).

   Emerald & Brass tokens only — theme-aware by construction. Loaded LAST so it
   wins over the skins. Presentation only: no markup, engine or print changes.
   Scoped to `.view` / `#drillBox` so the rail, topbar and print docs are
   untouched. Report/statement INTERNALS (.stmt-*) are deliberately left to the
   print pipeline and the user's report-typography scope.
   ========================================================================== */

/* ---- 1. Section header (`.eyebrow`) — one treatment everywhere ----
   A small brass tick + emerald label gives every section the same "letterhead"
   opening, so a screen with 24 cards and a screen with one both read as the
   same product. */
.view .eyebrow{
  position:relative;
  display:flex; align-items:center; gap:9px;
  font-weight:700 !important; letter-spacing:.09em; text-transform:uppercase;
  color:var(--navy) !important;
  margin:2px 0 14px;
}
.view .eyebrow::before{
  content:""; flex:0 0 auto;
  width:14px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

/* ---- 2. KPI / metric tiles (`.mx`) — clear value-over-label hierarchy ----
   The value carries its own inline font-size in the markup, so lift it with a
   token !important; the label recedes to a quiet uppercase caption. Internal
   padding stays <= the grid gap between tiles (spacing contract). */
.view .mx{
  padding:16px 18px !important;
  display:flex; flex-direction:column; gap:6px;
  background:var(--surface) !important;
}
.view .mx .l{
  font-size:var(--f-2xs) !important; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mute) !important; font-weight:600; line-height:1.2;
}
.view .mx .v{
  font-size:var(--f-2xl) !important; line-height:1.1; font-weight:700;
  color:var(--ink) !important;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* ---- 3. Data tables (`.tb-tbl`) — numeric discipline + calmer rows ----
   odoo-skin already sets the muted header and hairline rows; this adds the
   craft details that separate a real ledger from a styled table: right-aligned
   figures are tabular so digits line up column-to-column, and the total row
   reads as a conclusion, not just another row. */
.view .tb-tbl td.r, .view .tb-tbl td.num, .view .tb-tbl th.r,
#drillBox .tb-tbl td.r, #drillBox .tb-tbl td.num{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  text-align:right;
}
.view .tb-tbl tfoot td, .view .tb-tbl tr.tot td, #drillBox .tb-tbl tr.tot td{
  font-weight:700 !important; color:var(--ink) !important;
}
.view .tb-tbl tbody tr{ transition:background-color .12s ease; }

/* ---- 4. Section tabs (`.rtab`) — comfortable, legible underline ----
   Refines odoo-skin's underline: a real hit target, a quiet hover, an active
   tab that reads as selected by weight + emerald underline, not a fill. */
.view .rtabs{ gap:2px; margin-bottom:16px; }
.view .rtab{
  padding:9px 14px !important; font-weight:600;
  color:var(--mute) !important; background:transparent !important;
  border:0 !important; border-bottom:2px solid transparent !important;
  border-radius:8px 8px 0 0 !important; transition:color .12s ease, border-color .12s ease;
}
.view .rtab:hover{ color:var(--ink) !important; background:color-mix(in oklch,var(--navy) 5%,transparent) !important; }
.view .rtab.on{
  color:var(--navy) !important; background:transparent !important;
  border-bottom-color:var(--navy) !important; box-shadow:none !important;
}

/* ---- 5. Empty states (`.empty`) — a designed absence, not a gap ----
   Centered, generous, with a sized outline icon in a soft emerald wash so an
   empty screen looks intentional rather than broken. */
.view .empty, #drillBox .empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center;
  padding:48px 24px; color:var(--mute) !important;
  font-size:var(--f-sm);
}
.view .empty svg, #drillBox .empty svg{
  width:40px; height:40px; padding:10px; box-sizing:content-box;
  color:var(--navy); opacity:.9;
  background:color-mix(in oklch,var(--navy) 8%,transparent);
  border-radius:50%;
  stroke:currentColor; fill:none; stroke-width:1.6;
}

/* ---- 6. Form fields (`.pf`) — one focus signature ----
   A single emerald focus ring across every input/select/textarea so tabbing
   through a form (settings has 66 fields) feels like one system. */
.view .pf input:focus, .view .pf select:focus, .view .pf textarea:focus,
.view input.inp:focus, .view select.inp:focus{
  outline:none;
  border-color:var(--navy) !important;
  box-shadow:0 0 0 3px color-mix(in oklch,var(--navy) 16%,transparent) !important;
}

/* ---- 7. Card rhythm ---- keep a card's own padding <= the gap to its
   neighbour, and give stacked cards a consistent breath. Content cards get a
   real floor so nothing reads as cramped. */
.view .card{ padding:22px 24px; }
.view .card + .card{ margin-top:18px; }

/* ---- 8. Focus-visible — a visible, on-brand keyboard ring everywhere ---- */
.view :focus-visible, #drillBox :focus-visible{
  outline:2px solid var(--navy); outline-offset:2px; border-radius:6px;
}

/* ---- 9. App-shell motion — ONE calm reveal per view switch ----
   Views toggle via display:none->block, which restarts the animation on each
   switch. A single 180ms fade+rise on the container makes navigation feel
   responsive without the busyness of every card animating independently.
   Reduced-motion users get none of it. */
@keyframes jbViewIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference){
  .view{ animation:jbViewIn .18s cubic-bezier(.16,1,.3,1) both; }
  .view .card{ animation:none; } /* supersede brand-v2's per-card storm */
}