/* lib/juribooks-sharp-v1.css  "Sharp" accent layer (2026-10-04).
   Dark navy hero with glass cards for the Home banner, and glowing numbered
   step bars (payroll, bank reconciliation, payment voucher). Ledgers, tables
   and reports are deliberately NOT touched: they stay light for reading and
   printing. Active only with body.jb-sharp (rollback JB_FEATURES.sharpUI=false). */

html body.jb-sharp {
  --sh-navy: #14284A; --sh-navy-2: #1F3864; --sh-blue: #2F6BFF; --sh-blue-2: #5B8CFF;
  --sh-violet: #8B5CF6; --sh-ink: #F4F7FF; --sh-ink-2: #A9B4CC;
  --sh-glass: rgba(255,255,255,.06); --sh-edge: rgba(140,170,255,.28);
}

/* ---------- Home hero: greeting + KPIs on one dark panel ---------- */
html body.jb-sharp.jb-sharp .xs-home .xs-b-head {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 85% 0%, rgba(47,107,255,.35) 0%, rgba(47,107,255,0) 55%),
              radial-gradient(80% 120% at 10% 120%, rgba(139,92,246,.10) 0%, rgba(139,92,246,0) 60%),
              linear-gradient(160deg, var(--sh-navy-2), var(--sh-navy)) !important;
  border: 0 !important; border-radius: 12px 12px 0 0 !important; box-shadow: none !important;
  padding: 26px 28px 8px !important; margin: 0 !important;
}
html body.jb-sharp.jb-sharp .xs-home .xs-b-head .xs-h1 {
  color: var(--sh-ink) !important; font-size: clamp(26px, 3vw, 36px) !important; font-weight: 700 !important;
  letter-spacing: -.035em !important; line-height: 1.05 !important;
}
html body.jb-sharp.jb-sharp .xs-home .xs-b-head .xs-h1 .sh-accent { color: var(--sh-blue-2) !important; font: inherit !important; letter-spacing: inherit !important; display: inline !important; }
html body.jb-sharp.jb-sharp .xs-home .xs-b-head :is(.xs-lead, .xs-lead strong, .xs-when, .xs-where) { color: var(--sh-ink-2) !important; }
html body.jb-sharp.jb-sharp .xs-home .xs-b-head .xs-lead { font-size: 13px !important; margin-top: 8px !important; }

html body.jb-sharp.jb-sharp .xs-home .xs-b-kpis {
  position: relative;
  background: linear-gradient(180deg, var(--sh-navy), #12233F) !important;
  border-radius: 0 0 12px 12px !important; padding: 14px 28px 26px !important; margin-top: 0 !important;
  box-shadow: 0 24px 48px -28px rgba(11,18,32,.65) !important;
}
html body.jb-sharp.jb-sharp .xs-home .xs-kpi {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)) !important;
  border: 1px solid var(--sh-edge) !important; border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px -12px rgba(47,107,255,.55) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .18s ease, box-shadow .18s ease;
}
html body.jb-sharp.jb-sharp .xs-home .xs-kpi:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 36px -12px rgba(47,107,255,.75) !important;
}
html body.jb-sharp.jb-sharp .xs-home .xs-kpi :is(.xs-kpi-l) { color: var(--sh-ink-2) !important; }
html body.jb-sharp.jb-sharp .xs-home .xs-kpi :is(.xs-kpi-v) { color: var(--sh-ink) !important; font-weight: 800 !important; letter-spacing: -.03em !important; }
html body.jb-sharp.jb-sharp .xs-home .xs-kpi a { color: var(--sh-blue-2) !important; }
html body.jb-sharp.jb-sharp .xs-home .xs-kpi .xs-kpi-d--good { color: #5BE0A6 !important; }
html body.jb-sharp.jb-sharp .xs-home .xs-kpi .xs-kpi-d--bad { color: #FF8A8A !important; }
html body.jb-sharp.jb-sharp .xs-home .xs-kpi .xs-kpi-ic {
  background: rgba(47,107,255,.18) !important; color: var(--sh-blue-2) !important;
  box-shadow: inset 0 0 0 1px rgba(91,140,255,.35);
}

/* ---------- step bars: numbered glass steps joined by a line ---------- */
html body.jb-sharp :is(.ps-steps, .br-steps) { position: relative; }
html body.jb-sharp :is(.ps-step, .br-step) {
  border-radius: 14px !important; transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
html body.jb-sharp :is(.ps-step:hover) { transform: translateY(-1px); }
html body.jb-sharp :is(.ps-n, .br-num, .pv-step .n) {
  background: linear-gradient(160deg, var(--sh-navy-2), var(--sh-navy)) !important; color: #fff !important;
  box-shadow: 0 0 0 3px rgba(47,107,255,.14), 0 6px 14px -6px rgba(47,107,255,.8);
  font-weight: 800 !important;
}
html body.jb-sharp .ps-step.on {
  background: linear-gradient(160deg, var(--sh-navy-2), var(--sh-navy)) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 1px var(--sh-edge) inset, 0 14px 30px -14px rgba(47,107,255,.85) !important;
}
html body.jb-sharp .ps-step.on :is(.ps-t) { color: var(--sh-ink) !important; }
html body.jb-sharp .ps-step.on :is(.ps-s) { color: var(--sh-ink-2) !important; }
html body.jb-sharp .ps-step.on .ps-n { background: var(--sh-blue) !important; }
html body.jb-sharp .ps-step.done:not(.on) .ps-n { background: linear-gradient(160deg, #0F7A52, #0B5E3F) !important; box-shadow: 0 0 0 3px rgba(15,122,82,.14) !important; }
/* the connecting line with violet nodes, behind the steps (desktop only) */
@media (min-width: 768px) {
  html body.jb-sharp .ps-steps::before {
    content: ""; position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; z-index: 0;
    background: linear-gradient(90deg, rgba(139,92,246,0), rgba(139,92,246,.55) 12%, rgba(47,107,255,.55) 88%, rgba(47,107,255,0));
  }
  html body.jb-sharp .ps-steps > * { position: relative; z-index: 1; }
}
html body.jb-sharp .pv-step { font-weight: 700 !important; letter-spacing: -.01em; }

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  html body.jb-sharp :is(.xs-kpi, .ps-step, .br-step) { transition: none !important; transform: none !important; }
}
/* ---------- print: never print the dark panel ---------- */
@media print {
  html body.jb-sharp.jb-sharp .xs-home :is(.xs-b-head, .xs-b-kpis, .xs-kpi) { background: #fff !important; box-shadow: none !important; color: #000 !important; }
}

/* join the greeting and the KPI panel into one block (the column has a gap) */
html body.jb-sharp.jb-sharp .xs-home .xs-b-head + .xs-b-kpis { margin-top: calc(-1 * var(--xs-gap, 16px)) !important; }
/* the small lines under each figure: readable on the dark panel */
html body.jb-sharp.jb-sharp .xs-home .xs-kpi .xs-kpi-b > :not(.xs-kpi-l):not(.xs-kpi-v):not(.xs-kpi-d--good):not(.xs-kpi-d--bad) { color: #C3CCE0 !important; }
html body.jb-sharp.jb-sharp .xs-home .xs-kpi .xs-kpi-b a { color: var(--sh-blue-2) !important; }

/* ---------- page heading on every screen (2026-10-04) ----------
   The screen title area (kicker, title, one-line description, action
   buttons) becomes a dark navy band, matching the Home banner. */
@media screen {
  html body.jb-sharp.jb-sharp .main > header.topbar {
    background: radial-gradient(70% 220% at 100% 0%, rgba(47,107,255,.30), rgba(47,107,255,0) 60%),
                radial-gradient(50% 200% at 0% 100%, rgba(139,92,246,.20), rgba(139,92,246,0) 60%),
                linear-gradient(160deg, #111A2E, #0B1220) !important;
    border: 0 !important; border-radius: 16px !important; margin: 14px 18px 10px !important;
    padding-top: 16px !important; padding-bottom: 16px !important;
    box-shadow: 0 18px 36px -24px rgba(11,18,32,.75) !important;
  }
  html body.jb-sharp.jb-sharp .main > header.topbar .tb-title { border-left-color: var(--sh-blue) !important; }
  html body.jb-sharp.jb-sharp .main > header.topbar #vTitle { color: #F4F7FF !important; }
  html body.jb-sharp.jb-sharp .main > header.topbar .jh-page-kicker { color: #8FB0FF !important; }
  html body.jb-sharp.jb-sharp .main > header.topbar .jh-page-kicker::before { background: var(--sh-violet) !important; }
  html body.jb-sharp.jb-sharp .main > header.topbar #vSub { color: #B4C0D8 !important; }
  html body.jb-sharp.jb-sharp .main > header.topbar :is(.tb-actions, .tb-stats) .btn {
    background: rgba(255,255,255,.07) !important; color: #E6ECFA !important;
    border: 1px solid rgba(140,170,255,.30) !important; box-shadow: none !important;
  }
  html body.jb-sharp.jb-sharp .main > header.topbar :is(.tb-actions, .tb-stats) .btn:hover { background: rgba(255,255,255,.14) !important; }
  html body.jb-sharp.jb-sharp .main > header.topbar :is(.tb-actions, .tb-stats) .btn svg { stroke: currentColor !important; color: #E6ECFA !important; }
  html body.jb-sharp.jb-sharp .main > header.topbar .tb-stats,
  html body.jb-sharp.jb-sharp .main > header.topbar .tb-stats * { color: #B4C0D8 !important; border-color: rgba(140,170,255,.30) !important; background-color: transparent !important; }
}

@media screen {
  html body.jb-sharp.jb-sharp.jb-sharp .main > header.topbar #vTitle { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
}
/* Report and sheet bodies (titles, table headings, figures) stay in the
   standard light house style: the dark accent is for the page frame only. */

/* the budget body is a page section, not a control row (an older adapter
   tagged it jb-control-row, which laid the whole screen out as one row) */
@media screen {
  html body.jb-odoo-suite .jb-odoo-page :is(#budBody, #rentTabBody).jb-control-row { display: block !important; }
}

/* firm logo at the top of every screen (page heading); on-screen copies above
   each sheet are hidden, printed sheets keep theirs */
@media screen {
  html body.jb-sharp .main > header.topbar .jb-top-logo {
    flex: none; display: flex; align-items: center; justify-content: center; align-self: center;
    background: #FFFFFF; border-radius: 12px; padding: 4px 10px; margin-right: 14px; height: 42px; order: -1;
    box-shadow: 0 6px 18px -8px rgba(0,0,0,.6);
  }
  html body.jb-sharp .main > header.topbar .jb-top-logo img { display: block; max-height: 30px; max-width: 110px; width: auto; height: auto; object-fit: contain; }
  html body.jb-sharp.jb-has-toplogo .main .view .rep-logo { display: none !important; }
}
@media screen and (max-width: 767px) {
  html body.jb-sharp .main > header.topbar .jb-top-logo { height: 34px; padding: 3px 8px; margin: 0 0 8px; }
  html body.jb-sharp .main > header.topbar .jb-top-logo img { max-height: 24px; }
}
@media screen {
  html body.jb-sharp:not(#jb-x1) .main > header.topbar > #jbTopLogo { order: -10 !important; }
}

/* the ledger reconciliation message reads as one sentence (another layer
   made it a flex row, which scattered its words into columns) */
html body .main .view .balrow { display: block !important; line-height: 1.6 !important; }
html body .main .view .balrow > * { display: inline !important; }