/* ========================================================================== 
   JuriBooks Premium Human v4
   Premium legal-practice character across the application.
   One blue accent, deep navy structure, warm neutrals, expressive hierarchy.
   ========================================================================== */

html body.jb-human-layer {
  --jh-navy: #102b4c;
  --jh-navy-deep: #0b223e;
  --jh-blue: #1672e8;
  --jh-blue-hover: #0f63ce;
  --jh-blue-soft: #eaf3ff;
  --jh-blue-wash: #f3f8ff;
  --jh-canvas: #f5f7fa;
  --jh-paper: #fffefa;
  --jh-surface: #ffffff;
  --jh-soft: #f8fafc;
  --jh-line: #dce5ee;
  --jh-line-soft: #eaf0f5;
  --jh-ink: #172236;
  --jh-ink-soft: #4f5e72;
  --jh-muted: #69768a;
  --jh-shadow: 0 1px 2px rgba(16,43,76,.035), 0 10px 28px -22px rgba(16,43,76,.45);
  --jh-shadow-hover: 0 2px 5px rgba(16,43,76,.06), 0 18px 36px -24px rgba(16,43,76,.42);
  background: var(--jh-canvas);
  color: var(--jh-ink);
}

/* Shell ------------------------------------------------------------------- */
html body.jb-human-layer .xs-side {
  background:
    radial-gradient(circle at 18% -4%, rgba(73,151,255,.22), transparent 28%),
    linear-gradient(180deg, #112f52 0%, var(--jh-navy) 44%, var(--jh-navy-deep) 100%);
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow: 10px 0 30px -28px rgba(9,28,51,.8);
}
html body.jb-human-layer .xs-brand {
  position: relative;
  min-height: 64px;
  border-bottom-color: rgba(255,255,255,.09);
}
html body.jb-human-layer .xs-brand::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: 10px;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(116,177,255,.72));
}
html body.jb-human-layer .xs-nav-h {
  color: rgba(218,231,246,.58);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .105em;
}
html body.jb-human-layer .xs-nav-item,
html body.jb-human-layer .xs-sub-item {
  transition: background-color .14s ease, color .14s ease, transform .14s ease;
}
html body.jb-human-layer .xs-nav-item:hover,
html body.jb-human-layer .xs-sub-item:hover {
  background: rgba(255,255,255,.075);
  color: #fff;
}
html body.jb-human-layer .xs-nav-item:active,
html body.jb-human-layer .xs-sub-item:active { transform: translateY(1px); }
html body.jb-human-layer .xs-nav-item.on,
html body.jb-human-layer .xs-sub-item.on,
html body.jb-human-layer .xs-nav-li.on > .xs-nav-item {
  background: linear-gradient(90deg, rgba(22,114,232,.34), rgba(22,114,232,.14));
  color: #fff;
  box-shadow: inset 3px 0 0 #67a9ff;
}
html body.jb-human-layer .xs-cmdbar {
  background: rgba(255,255,255,.96);
  border-bottom-color: var(--jh-line);
  box-shadow: 0 5px 18px -18px rgba(16,43,76,.55);
  backdrop-filter: blur(10px);
}
html body.jb-human-layer .xs-search {
  border-color: var(--jh-line);
  background: #f7f9fc;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
html body.jb-human-layer .xs-search:focus-within {
  border-color: var(--jh-blue);
  background: #fff;
  box-shadow: 0 0 0 3px var(--jh-blue-soft);
}
html body.jb-human-layer .xs-avatar {
  background: linear-gradient(145deg, #315c8b, #183b61);
  box-shadow: 0 0 0 3px #eaf3ff;
}

/* Human page identity ----------------------------------------------------- */
html body.jb-human-layer .main > header.topbar {
  position: relative;
  min-height: 78px;
  padding-top: 10px;
  padding-bottom: 11px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% -45%, rgba(22,114,232,.10), transparent 35%),
    linear-gradient(90deg, #fff 0%, #fff 65%, #f8fbff 100%);
  border-bottom: 1px solid var(--jh-line);
}
html body.jb-human-layer .main > header.topbar::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--jh-blue), rgba(22,114,232,.08) 28%, transparent 70%);
}
html body.jb-human-layer .main > header.topbar .tb-title {
  position: relative;
  padding-left: 15px;
}
html body.jb-human-layer .main > header.topbar .tb-title::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 3px;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--jh-blue), #62a7ff);
}
html body.jb-human-layer .jh-page-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 13px;
  margin-bottom: 3px;
  color: #3974b5;
  font-family: var(--font-exec, var(--font-ui));
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .085em;
  line-height: 1;
  text-transform: uppercase;
}
html body.jb-human-layer .jh-page-kicker::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--jh-blue);
  box-shadow: 0 0 0 3px var(--jh-blue-soft);
}
html body.jb-human-layer .main > header.topbar #vTitle {
  color: var(--jh-ink);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.016em;
}
html body.jb-human-layer .main > header.topbar #vSub {
  max-width: 82ch;
  margin-top: 3px;
  color: var(--jh-ink-soft);
  font-size: 12px;
  line-height: 1.35;
}

/* Page canvas: a quiet legal-paper motif, never behind print documents. */
html body.jb-human-layer .main > .view.jh-page {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 96% 1%, rgba(22,114,232,.055), transparent 210px),
    linear-gradient(180deg, #f7f9fc 0, var(--jh-canvas) 210px);
}
html body.jb-human-layer .main > .view.jh-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 20px;
  right: 28px;
  width: 112px;
  height: 72px;
  opacity: .34;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, transparent 48%, rgba(22,114,232,.10) 49%, rgba(22,114,232,.10) 51%, transparent 52%),
    linear-gradient(rgba(22,114,232,.09) 1px, transparent 1px);
  background-size: 100% 100%, 100% 12px;
  mask-image: linear-gradient(135deg, #000, transparent 80%);
}
html body.jb-human-layer .main > .view.jh-enter {
  animation: jhPageIn .18s ease-out both;
}
@keyframes jhPageIn {
  from { opacity: .72; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Cards: less machine-like, still dense ---------------------------------- */
html body.jb-human-layer .main .view .card:not(#feeNote),
html body.jb-human-layer .xs-card {
  border-color: var(--jh-line);
  background: linear-gradient(180deg, #fff 0%, var(--jh-paper) 100%);
  box-shadow: var(--jh-shadow);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
html body.jb-human-layer .main .view .card:not(#feeNote):hover {
  border-color: #cedbe8;
  box-shadow: var(--jh-shadow-hover);
}
html body.jb-human-layer .main .view .card .card { background: #fff; box-shadow: none; }
html body.jb-human-layer .main .view .eyebrow {
  color: #254d77;
  font-weight: 700;
}
html body.jb-human-layer .main .view .eyebrow::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 2px;
  margin-right: 7px;
  border-radius: 2px;
  background: var(--jh-blue);
  vertical-align: middle;
}
html body.jb-human-layer .main .view :is(.stmt-entity,.stmt-title,.stmt-sub) .eyebrow::before,
html body.jb-human-layer #feeNote .eyebrow::before { display: none; }

/* Control panels and tabs ------------------------------------------------- */
html body.jb-human-layer .main .view :is(.period-bar,.coa-toolbar,.jb-control-row,.jb-ledger-cp,.jb-coa-subbar) {
  border-color: var(--jh-line);
  background: rgba(255,255,255,.94);
  box-shadow: 0 1px 2px rgba(16,43,76,.025), 0 12px 26px -26px rgba(16,43,76,.55);
}
html body.jb-human-layer .main .view :is(.rtabs,.seg) {
  border-color: var(--jh-line);
  background: rgba(255,255,255,.92);
}
html body.jb-human-layer .main .view :is(.rtab,.seg button,.seg-btn) {
  transition: background-color .14s ease, color .14s ease, transform .14s ease;
}
html body.jb-human-layer .main .view :is(.rtab,.seg button,.seg-btn):active { transform: translateY(1px); }
html body.jb-human-layer .main .view :is(.rtab.on,.seg button.on,.seg-btn.on) {
  background: linear-gradient(180deg, #f0f6ff, #e8f2ff);
  color: var(--jh-blue);
}

/* Buttons feel tactile without becoming decorative. */
html body.jb-human-layer .main .btn,
html body.jb-human-layer .modal .btn,
html body.jb-human-layer #drillBox .btn {
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .1s ease;
}
html body.jb-human-layer .main .btn:hover:not(:disabled),
html body.jb-human-layer .modal .btn:hover:not(:disabled),
html body.jb-human-layer #drillBox .btn:hover:not(:disabled) {
  box-shadow: 0 5px 14px -11px rgba(16,43,76,.72);
}
html body.jb-human-layer .main .btn:active:not(:disabled),
html body.jb-human-layer .modal .btn:active:not(:disabled),
html body.jb-human-layer #drillBox .btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
html body.jb-human-layer .main .btn.primary,
html body.jb-human-layer .modal .btn.primary,
html body.jb-human-layer #drillBox .btn.primary {
  background: linear-gradient(180deg, #2380f1, var(--jh-blue));
  border-color: var(--jh-blue);
  box-shadow: 0 6px 14px -9px rgba(22,114,232,.8);
}
html body.jb-human-layer .main .btn.primary:hover:not(:disabled),
html body.jb-human-layer .modal .btn.primary:hover:not(:disabled),
html body.jb-human-layer #drillBox .btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #1c74df, var(--jh-blue-hover));
}

/* Forms ------------------------------------------------------------------- */
html body.jb-human-layer .main .view :is(input,select,textarea,.inp),
html body.jb-human-layer .modal :is(input,select,textarea,.inp),
html body.jb-human-layer #drillBox :is(input,select,textarea,.inp) {
  border-color: #c9d5e2;
  background: #fffefa;
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
html body.jb-human-layer .main .view :is(input,select,textarea,.inp):hover,
html body.jb-human-layer .modal :is(input,select,textarea,.inp):hover,
html body.jb-human-layer #drillBox :is(input,select,textarea,.inp):hover { border-color: #abbcce; }
html body.jb-human-layer .main .view :is(input,select,textarea,.inp):focus,
html body.jb-human-layer .modal :is(input,select,textarea,.inp):focus,
html body.jb-human-layer #drillBox :is(input,select,textarea,.inp):focus {
  border-color: var(--jh-blue);
  background: #fff;
  box-shadow: 0 0 0 3px var(--jh-blue-soft);
}
html body.jb-human-layer .main .view :is(.pf,.f) > label,
html body.jb-human-layer .main .view .fld {
  color: #536277;
  font-weight: 600;
}
html body.jb-human-layer .main .view :is(input,textarea)::placeholder { color: #778397; opacity: 1; }

/* Data tables: calm scanning, positive feedback on interaction. */
html body.jb-human-layer .main .view table thead th {
  background: linear-gradient(180deg, #f5f8fb, #eff4f8);
  border-bottom-color: #d6e0ea;
}
html body.jb-human-layer .main .view table tbody tr {
  transition: background-color .1s ease, box-shadow .1s ease;
}
html body.jb-human-layer .main .view table tbody tr:hover > td {
  background: #f2f7ff;
  box-shadow: inset 0 1px rgba(22,114,232,.035), inset 0 -1px rgba(22,114,232,.035);
}
html body.jb-human-layer .main .view table tbody tr.drill-row:hover > td:first-child,
html body.jb-human-layer .main .view table tbody tr.drillable:hover > td:first-child {
  box-shadow: inset 3px 0 0 var(--jh-blue);
}
html body.jb-human-layer .main .view table tfoot td,
html body.jb-human-layer .main .view table tr.tot > td {
  background: linear-gradient(180deg, #f7f9fb, #f1f5f8);
}

/* Operational summaries -------------------------------------------------- */
html body.jb-human-layer .main .view :is(.mx,.kpi,.dkpi) {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #fff 0%, #fffefa 74%, #f3f8ff 100%);
}
html body.jb-human-layer .main .view :is(.mx,.kpi,.dkpi)::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -18px;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(22,114,232,.09);
  border-radius: 50%;
}
html body.jb-human-layer .main .view :is(.mx,.kpi,.dkpi) .v {
  color: var(--jh-ink);
  letter-spacing: -.018em;
}

/* Empty states: warm reassurance rather than a dead white box. */
html body.jb-human-layer .main .view .empty {
  position: relative;
  min-height: 148px;
  justify-content: center;
  border-color: #cad8e6;
  background:
    radial-gradient(circle at 50% 10%, rgba(22,114,232,.08), transparent 110px),
    linear-gradient(180deg, #fff, #fbfdff);
  color: var(--jh-ink-soft);
}
html body.jb-human-layer .main .view .empty::before {
  width: 48px;
  height: 48px;
  border: 1px solid #cfe0f3;
  background-color: #eef6ff;
  box-shadow: 0 7px 18px -14px rgba(22,114,232,.75);
}
html body.jb-human-layer .main .view .empty > :first-child { color: var(--jh-ink); font-weight: 600; }

/* Notices and status: straightforward, calm language gets a calm surface. */
html body.jb-human-layer .main .view :is(.imp-note,.fmt-note) {
  border-color: #cadcf0;
  background: linear-gradient(90deg, #f2f8ff, #f8fbff);
}
html body.jb-human-layer .main .view .balrow {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}
html body.jb-human-layer .main .view :is(.tag,.badge,.cat-badge,.chip) { letter-spacing: .005em; }

/* Home: more welcoming, still entirely data-led. */
html body.jb-human-layer .xs-home {
  position: relative;
  background:
    radial-gradient(circle at 11% -8%, rgba(22,114,232,.09), transparent 320px),
    linear-gradient(180deg, #f8fbff 0, var(--jh-canvas) 340px);
}
html body.jb-human-layer .xs-home .xs-b-head {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #fff 0%, #fffefa 62%, #f0f6ff 100%);
}
html body.jb-human-layer .xs-home .xs-b-head::after {
  content: "";
  position: absolute;
  top: -36px;
  right: -24px;
  width: 126px;
  height: 126px;
  border: 1px solid rgba(22,114,232,.10);
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgba(22,114,232,.025), 0 0 0 42px rgba(22,114,232,.018);
}
html body.jb-human-layer .xs-h1 { color: var(--jh-ink); letter-spacing: -.022em; }
html body.jb-human-layer .xs-kpi,
html body.jb-human-layer .xs-ws,
html body.jb-human-layer .xs-qa {
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
html body.jb-human-layer .xs-kpi:hover,
html body.jb-human-layer .xs-ws:hover {
  transform: translateY(-2px);
  border-color: #cbd9e8;
  box-shadow: var(--jh-shadow-hover);
}
html body.jb-human-layer .xs-qa:hover { transform: translateY(-1px); }
html body.jb-human-layer .xs-kpi-v { letter-spacing: -.022em; }
html body.jb-human-layer .xs-b-head,
html body.jb-human-layer .xs-card,
html body.jb-human-layer .xs-b-kpis,
html body.jb-human-layer .xs-b-ws,
html body.jb-human-layer .xs-b-charts { border-color: var(--jh-line); }

/* Modal and drawer craft -------------------------------------------------- */
html body.jb-human-layer .modal,
html body.jb-human-layer #drillBox,
html body.jb-human-layer .palette {
  border-color: var(--jh-line);
  background: #fff;
  box-shadow: 0 24px 70px rgba(11,34,62,.24);
}
html body.jb-human-layer .modal-head,
html body.jb-human-layer .drill-head {
  background:
    radial-gradient(circle at 88% -50%, rgba(22,114,232,.10), transparent 38%),
    linear-gradient(90deg, #fff, #fbfdff);
}
html body.jb-human-layer .modal-head h3,
html body.jb-human-layer .drill-title { color: var(--jh-ink); }
html body.jb-human-layer .modal-foot,
html body.jb-human-layer .drill-foot { background: var(--surface-soft, #f7f9fc); }   /* one footer band colour (design system) */
html body.jb-human-layer .toast {
  background: linear-gradient(135deg, #173a61, var(--jh-navy-deep));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 16px 36px -18px rgba(7,25,46,.8);
}

/* Specialist sheets keep their accounting ergonomics. */
html body.jb-human-layer #view-batch .jrnwin,
html body.jb-human-layer #view-ledger .jb-ledger-cp,
html body.jb-human-layer #view-coa > .card {
  box-shadow: var(--jh-shadow);
}
html body.jb-human-layer #view-batch .sw-title,
html body.jb-human-layer #view-ledger .jb-ledger-cp-top {
  background: linear-gradient(90deg, #fff, #fbfdff);
}

/* Formal reports and fee notes are documents, not app cards. */
html body.jb-human-layer #feeNote,
html body.jb-human-layer .rbody,
html body.jb-human-layer .afs-sheet,
html body.jb-human-layer .rep-sheet {
  background: #fff;
}
html body.jb-human-layer #feeNote .eyebrow::before,
html body.jb-human-layer .rbody .eyebrow::before,
html body.jb-human-layer .afs-sheet .eyebrow::before { display: none; }

@media (max-width: 767px) {
  html body.jb-human-layer .main > header.topbar { min-height: 84px; }
  html body.jb-human-layer .main > header.topbar .tb-title { padding-left: 12px; }
  html body.jb-human-layer .main > header.topbar #vTitle { font-size: 20px; }
  html body.jb-human-layer .main > .view.jh-page::before { display: none; }
  html body.jb-human-layer .xs-kpi:hover,
  html body.jb-human-layer .xs-ws:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body.jb-human-layer *,
  html body.jb-human-layer *::before,
  html body.jb-human-layer *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  html body.jb-human-layer .main > .view::before,
  html body.jb-human-layer .jh-page-kicker { display: none !important; }
  html body.jb-human-layer .main .view .card { box-shadow: none; }
}