/* BookCounting brand layer: self-hosted type, brand tokens, focus ring. Loaded after every other stylesheet. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/brand-assets/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/brand-assets/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/brand-assets/plus-jakarta-sans-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --bc-font: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --bc-ink: #101d42;
  --bc-blue-900: #15295a;
  --bc-blue-700: #2350c8;
  --bc-blue-600: #316bfe;
  --bc-blue-100: #dde6ff;
  --bc-blue-50: #f0f4ff;
  --bc-orange-600: #d9730a;
  --bc-orange-500: #f38906;
  --bc-orange-100: #ffe8cc;
  --bc-slate-500: #697089;
  --bc-line: #d6dae6;
  --font-family: var(--bc-font);
}

body, button, input, select, textarea {
  font-family: var(--bc-font);
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}

:focus-visible {
  outline: 2px solid var(--bc-orange-500);
  outline-offset: 1px;
}

::selection {
  background: var(--bc-orange-100);
  color: var(--bc-ink);
}

/* Shell: white header ruled like a ledger page, ink rail with an orange "posted" marker. */
#header {
  background: #fff;
  border-bottom: 1px solid var(--bc-line);
  box-shadow: 0 1px 0 rgba(16, 29, 66, 0.04);
}
#header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 55px;
  height: 2px;
  background: var(--bc-orange-500);
}
.brand img {
  width: 184px;
}
.header-actions,
.header-actions button,
.header-actions .company b {
  color: var(--bc-ink);
}
.header-actions .company small {
  color: var(--bc-slate-500);
}
.header-actions button:hover {
  background: var(--bc-blue-50);
  color: var(--bc-blue-700);
}
#rail {
  background: linear-gradient(180deg, var(--bc-blue-900), #1b3577);
}
#rail button {
  border-left: 3px solid transparent;
}
#rail button:hover,
#rail button:focus-visible,
#rail button.active {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: var(--bc-orange-500);
}
/* Active tab: orange carries the selection, ink text keeps it readable (white on orange fails contrast). */
#module-tabs button.active,
#module-tabs button.active .close {
  color: var(--bc-ink);
}
#module-tabs button.active .close:hover {
  color: #fff;
}
#rail button > img {
  width: 30px;
  height: 30px;
}

/* ==== Modern layer: soft surfaces, rounded controls, light chrome, quick transitions ==== */
:root {
  --bc-canvas: #f4f6fb;
  --bc-radius: 8px;
  --bc-radius-lg: 12px;
  --bc-shadow-sm: 0 1px 2px rgba(16, 29, 66, 0.06), 0 2px 8px rgba(16, 29, 66, 0.06);
  --bc-shadow-lg: 0 12px 32px rgba(16, 29, 66, 0.16), 0 2px 6px rgba(16, 29, 66, 0.08);
  --bc-ring: 0 0 0 3px rgba(49, 107, 254, 0.18);
}
html,
body {
  background: var(--bc-canvas);
  color: var(--bc-ink);
}
button {
  border-color: #d5dae6;
  border-radius: var(--bc-radius);
  color: var(--bc-ink);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
button:hover {
  background: #f1f4fb;
}
.primary,
button.primary {
  background: var(--bc-blue-700);
  border-color: var(--bc-blue-700);
  color: #fff;
}
.dialog-foot button.primary {
  background: var(--bc-blue-700);
  border-color: var(--bc-blue-700);
}
.primary:hover,
button.primary:hover,
.dialog-foot button.primary:hover {
  background: #1c43ab;
  border-color: #1c43ab;
}
input,
select,
textarea {
  border-color: #d5dae6;
  border-radius: var(--bc-radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:hover,
select:hover,
textarea:hover {
  border-color: #b9c1d6;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--bc-blue-600);
  box-shadow: var(--bc-ring);
}
input[readonly] {
  background: #f4f6fb;
}

/* Module tabs: light strip, active tab white with orange underline. */
.module-tab-strip,
#module-tabs,
.modulebar {
  background: #fff;
  border-bottom-color: var(--bc-line);
}
#module-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  color: var(--bc-slate-500);
}
#module-tabs button:hover {
  background: var(--bc-canvas);
  color: var(--bc-ink);
}
#module-tabs button.active {
  background: var(--bc-blue-50);
  border: 0;
  border-bottom: 2px solid var(--bc-orange-500);
  color: var(--bc-ink);
  font-weight: 600;
}

/* Document tabs (New Data / open records): quiet inactive tabs, white active card. */
.document-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  color: var(--bc-slate-500);
  font-size: 14px;
  font-weight: 500;
}
.document-tab:hover {
  background: #eef1f8;
  color: var(--bc-ink);
}
.document-tab.active {
  background: #fff;
  border-color: var(--bc-line);
  border-top: 2px solid var(--bc-orange-500);
  color: var(--bc-ink);
  font-weight: 600;
}
.close-document:hover {
  color: var(--bc-orange-600);
}
.list-toggle,
.list-toggle[aria-pressed='true'] {
  background: var(--bc-blue-700);
  border-color: var(--bc-blue-700);
  color: #fff;
}
.modulebar {
  background: var(--bc-canvas);
}

/* In-form tabs (General / Balance / …): underline tabs instead of grey boxes. */
.horizontal-tabs {
  border-bottom-color: var(--bc-line);
}
.horizontal-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--bc-slate-500);
  font-weight: 500;
}
.horizontal-tabs button:hover {
  background: transparent;
  color: var(--bc-ink);
}
.coa-section h2,
.form-section h2 {
  color: var(--bc-ink);
  font-weight: 600;
  border-bottom-color: #eef1f6;
}

/* List toolbar: one primary blue, quiet record counter. */
.history-tools .history-add,
.history-add {
  background: var(--bc-blue-700);
  border-color: var(--bc-blue-700);
  color: #fff;
}
.history-tools .history-add:hover {
  background: #1c43ab;
}
.history-tools .outline,
.history-tools .history-refresh,
.history-tools .history-import {
  color: var(--bc-blue-700);
  border-color: #c9d4f2;
  background: #fff;
}
.history-count,
.history-tools .history-count {
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  min-width: 36px;
  text-align: center;
  background: #e9edf6;
  color: var(--bc-slate-500);
  font-weight: 500;
}
.history-tools input[type='search'] {
  border-radius: 999px;
  padding-left: 16px;
}

/* Header controls. */
.language-switch {
  border-radius: 999px;
  border-color: var(--bc-line);
  background: var(--bc-canvas);
  color: var(--bc-ink);
  font-weight: 500;
  padding: 4px 12px;
  min-height: 30px;
}
#profile i,
#help i,
#global-search i {
  font-size: 20px;
}

/* Dialogs: white header bar instead of a navy band. */
#modal {
  border-radius: 14px;
  overflow: hidden;
  border: 0;
  box-shadow: var(--bc-shadow-lg);
}
#modal::backdrop {
  background: rgba(16, 29, 66, 0.35);
  backdrop-filter: blur(2px);
}
.dialog-head,
#modal .dialog-head {
  background: #fff !important;
  color: var(--bc-ink) !important;
  border-bottom: 1px solid var(--bc-line);
  font-weight: 600;
}
.dialog-head button,
#modal .dialog-head button {
  color: var(--bc-slate-500) !important;
  border-radius: 8px;
}
.dialog-head button:hover,
#modal .dialog-head button:hover {
  background: var(--bc-canvas);
  color: var(--bc-ink) !important;
}
#modal .dialog-head > span::before {
  color: var(--bc-blue-700);
}
.dialog-foot,
#modal .dialog-foot {
  background: #fafbfe;
  border-top: 1px solid var(--bc-line);
}

/* Cards, widgets, flyout. */
.widget {
  border-color: #e6e9f2;
  border-radius: var(--bc-radius-lg);
  box-shadow: var(--bc-shadow-sm);
}
.widget h3 {
  color: var(--bc-ink);
  font-weight: 600;
  border-bottom-color: #eef1f7;
}
#flyout {
  background: #fff;
  border: 0;
  border-radius: 0 16px 16px 0;
  box-shadow: var(--bc-shadow-lg);
}
/* Menu tiles: white card, the role colour lives in the icon chip and the hover border. */
#flyout .module-menu-tile {
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: var(--bc-radius-lg);
  box-shadow: none;
  color: var(--bc-ink);
  font-weight: 500;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
#flyout .module-menu-tile:hover {
  background: #fff;
  border-color: var(--tile-accent, var(--bc-blue-600));
  transform: translateY(-2px);
  box-shadow: var(--bc-shadow-sm);
}
#flyout .module-menu-tile img {
  width: 48px;
  height: 48px;
  padding: 7px;
  border-radius: 14px;
  background: var(--tile-bg, var(--bc-blue-50));
}
#flyout > input {
  border-radius: 999px;
  padding-left: 16px;
}

/* Action tiles (Save, Print…): rounded, flat, soft. */
.action-tile {
  border-radius: var(--bc-radius-lg);
  box-shadow: var(--bc-shadow-sm);
}
/* Reconciliation uses the same cards, controls and table surfaces as other forms. */
.bank-reconcile-page { padding: 16px; gap: 16px; background: var(--bc-canvas); }
.bank-reconcile-page .reconcile-header { padding: 16px; background: #fff; border: 1px solid #e6e9f2; border-radius: 12px; box-shadow: var(--bc-shadow-sm); gap: 12px; }
.bank-reconcile-page .reconcile-header .field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; min-width: 150px; }
.bank-reconcile-page .reconcile-header .field:has(.lookup) { flex: 1 1 280px; max-width: 430px; }
.bank-reconcile-page .reconcile-header label { color: #4b5570; font-size: 12px; font-weight: 600; }
.bank-reconcile-page .reconcile-header button { min-height: 34px; }
.bank-reconcile-page .reconcile-pane { min-width: 0; padding: 16px; background: #fff; border: 1px solid #e6e9f2; border-radius: 12px; box-shadow: var(--bc-shadow-sm); }
.bank-reconcile-page .reconcile-pane h2 { margin: 0 0 14px; font-size: 15px; font-weight: 600; letter-spacing: normal; color: var(--bc-ink); }
.bank-reconcile-page .reconcile-panes { grid-template-columns: repeat(2,minmax(0,1fr)); }
.bank-reconcile-page .grid-scroll { overflow-x: auto; }
.bank-reconcile-page .data-grid { min-width: 620px; }
.bank-reconcile-page .data-grid th { white-space: normal; text-overflow: clip; line-height: 1.4; height: auto; padding-top: 8px; padding-bottom: 8px; }
.view[data-module='glaccount'] .coa-history-grid .data-grid td.coa-indent {
  padding-left: calc(12px + var(--account-depth,0) * 28px);
  white-space: nowrap;
}
@media(max-width:999px) {
  .view[data-module='vendor'] .master-page > .partner-general { grid-template-columns: minmax(0,1fr); }
}
.bank-reconcile-page .reconcile-footer { display: flex; justify-content: space-between; gap: 16px; margin: 14px 0 0; padding: 12px; background: #f5f7fb; border: 1px solid #e6e9f2; border-radius: 8px; font-weight: 400; }
.bank-reconcile-page .reconcile-footer strong { text-align: right; white-space: nowrap; }
.bank-reconcile-page .reconcile-hint { margin: 0; padding: 18px; background: #fff; border: 1px solid #e6e9f2; border-radius: 12px; }
.bank-reconcile-page .reconcile-hint[hidden] { display: none; }
@media(max-width:1100px) { .bank-reconcile-page .reconcile-panes { grid-template-columns: 1fr; } }
@media(max-width:520px) { .bank-reconcile-page { padding: 10px; } .bank-reconcile-page .reconcile-header .field { flex: 1 1 100%; } }

/* Rail: rounded active pill instead of a full-width bar. */
#rail button {
  width: 46px;
  margin: 2px 5px;
  border-radius: 10px;
}

/* List filters read as chips. */
.history-filter,
.history-add-filter {
  border-radius: 999px;
}
.history-filter-popup,
.history-import-menu,
.history-anchored-popup,
.smart-lookup-list,
.lookup-list {
  border: 1px solid #e3e7f0;
  border-radius: var(--bc-radius-lg);
  box-shadow: var(--bc-shadow-lg);
}
.smart-lookup-list button[aria-selected='true'],
.smart-lookup-list button:hover {
  background: var(--bc-blue-50);
}

/* ---- List pages: the grid sits in one rounded card, rows separated by hairlines only ---- */
.history-grid {
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: var(--bc-radius-lg);
  box-shadow: var(--bc-shadow-sm);
  margin: 0 6px;
}
.history-grid .data-grid th,
.history-grid .data-grid td {
  border-right: 0;
}
.history-grid .data-grid th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 8px 26px 8px 14px;
  border-bottom: 1px solid #e3e7f0;
}
.history-grid .data-grid td {
  padding: 8px 14px;
  font-size: 14px;
}
/* Sort carets sit at the right of the label, not under it. */
.history-grid .data-grid th[aria-sort]::before,
.history-grid .data-grid th[aria-sort]::after {
  left: auto;
  right: 10px;
  border-bottom-color: #b5bdd0;
}
.history-grid .data-grid th[aria-sort]::after {
  border-top-color: #b5bdd0;
}

/* ---- Dashboard panels ---- */
.dashboard-view .dashboard-administration-panel {
  background: transparent;
  border: 0;
  padding: 2px 0 6px;
}
.dashboard-view button.dashboard-add-widget {
  background: var(--bc-blue-700);
  border: 0;
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
}
.dashboard-view button.dashboard-add-widget:hover {
  background: #1c43ab;
}
.dashboard-view .dashboard-administration-panel .input-control.select {
  border-color: var(--bc-line);
  border-radius: 999px;
  padding: 0 10px;
}
.dashboard-view .dashboard-administration-panel select {
  font-size: 14px;
  font-weight: 500;
  color: var(--bc-ink);
}
.dashboard-view .dashboard.accurate-dashboard {
  gap: 16px;
}
.dashboard-view .widget-container {
  container-type: inline-size;
  height: 248px;
  border: 1px solid #e6e9f2;
  border-radius: 14px;
  box-shadow: var(--bc-shadow-sm);
}
.dashboard-view .widget-header {
  height: 44px;
  padding: 0 10px 0 12px;
  border-bottom: 1px solid #f0f2f7;
  border-radius: 14px 14px 0 0;
}
.dashboard-view .widget-header-title,
.dashboard-view .widget-header-title .fs-medium {
  color: var(--bc-ink);
  font-size: 14px;
  font-weight: 600;
}
.dashboard-view .widget-button-container .dashboard-refresh,
.dashboard-view .dashboard-card-kebab,
.dashboard-view .dashboard-kebab {
  color: var(--bc-slate-500);
  border-radius: 6px;
}
.dashboard-view .dashboard-chart .axis-label {
  fill: #8a93a8;
}
.dashboard-view .dashboard-activity-row:hover,
.dashboard-view .dashboard-compare-row:hover,
.dashboard-view .dasboard-top-data-row:hover {
  background: var(--bc-blue-50);
}
/* Widget bodies: one consistent inner gutter for every widget type (lists, amounts, bars, buttons). */
.dashboard-view .widget-content {
  padding: 10px 14px 12px;
}
/* Charts and donuts are sized to the card: keep their gutter slim so nothing is clipped. */
.dashboard-view .widget-content:has(svg, .widget-chart, .dashboard-donut-total, .dashboard-circle-column) {
  padding: 4px 10px 6px;
}
.dashboard-view .widget-content > .widget-chart {
  padding: 0;
}
.dashboard-view .widget-content .no-margin.row,
.dashboard-view .widget-content .dashboard-compare-row,
.dashboard-view .widget-content .dashboard-amount-row,
.dashboard-view .widget-content .dasboard-top-data-row,
.dashboard-view .widget-content .dashboard-activity-row {
  padding-top: 8px;
  padding-bottom: 8px;
  border-color: #eef1f6;
}
.dashboard-view .widget-content .fs-small,
.dashboard-view .widget-content .fs-smaller {
  color: var(--bc-slate-500);
  font-size: 12px;
}
.dashboard-view .widget-content .fs-large,
.dashboard-view .widget-content .fs-bold.fs-large {
  display: block;
  margin: 2px 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--bc-ink);
}
.dashboard-view .widget-content button:not(.dashboard-refresh):not(.dashboard-card-kebab) {
  margin-top: 10px;
  border-radius: 999px;
  color: var(--bc-blue-700);
  border-color: #c9d4f2;
  font-weight: 600;
}
.dashboard-view .widget-content .line-progress-container {
  border-radius: 999px;
  overflow: hidden;
}

/* Keep dashboard currency and value together on a shared baseline. */
.dashboard-view .widget-content .dashboard-money {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  margin: 0 0 0 auto;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dashboard-view .widget-content .dashboard-money > span {
  display: inline;
  margin: 0;
}
.dashboard-view .widget-content .dashboard-money-total > span:first-child {
  font-size: 13px;
}
.dashboard-view .widget-content .dashboard-line-top,
.dashboard-view .widget-content .dashboard-line-bottom {
  gap: 8px;
  padding: 0;
}
.dashboard-view .widget-content .dashboard-line-top > label,
.dashboard-view .widget-content .dashboard-line-bottom > label {
  margin-top: 0;
  margin-bottom: 0;
}
.dashboard-view .widget-content .dashboard-widget-split,
.dashboard-view .widget-content .dashboard-compare-list,
.dashboard-view .widget-content .dashboard-compare-row {
  padding-top: 0;
  padding-bottom: 0;
}
.dashboard-view .dashboard-compare-value { flex: 0 0 auto; }
.dashboard-view .dashboard-compare-name { flex: 1; padding-right: 8px; }
.dashboard-view .widget-content .dashboard-range-step { margin-top: 0; }
.dashboard-view .widget-content > .dashboard-cash-chart {
  height: 100%;
}
.dashboard-view .widget-content.dashboard-cash-content {
  padding: 4px 10px 6px;
}
.dashboard-view .dashboard-cash-chart svg.dashboard-chart {
  display: block;
  height: 100%;
  width: 100%;
}
@media (min-width: 651px) and (max-width: 1200px) {
  .dashboard-view .dashboard.accurate-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 380px) {
  .dashboard-view .dashboard-circle-column { width: 76px; }
  .dashboard-view .circle { width: 72px; height: 72px; }
  .dashboard-view .circle.inner { width: 54px; height: 54px; }
  .dashboard-view .widget-content .dashboard-money-total > .fs-large { font-size: 18px; }
  .dashboard-view .widget-content .dashboard-line-top > .fs-large,
  .dashboard-view .widget-content .dashboard-line-bottom > .fs-large { font-size: 16px; }
}

/* Scrolling widget bodies fade at the bottom edge instead of cutting a row in half. */
.dashboard-view .widget-content:has(.dashboard-activity-row) {
  -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent);
  mask-image: linear-gradient(to bottom, #000 85%, transparent);
}
.dashboard-donut-chart .donut-track {
  stroke: #eef1f8;
}
.dashboard-chart .axis-label {
  fill: #8a93a8;
  font-size: 11px;
}
.dashboard-chart .axis-zero {
  stroke: #d5dae6;
}
/* Long activity feeds fade out instead of being cut mid-line. */
.dashboard-panel-body.dashboard-recent-activities {
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}

/* Save tile while nothing has changed: tinted, not grey. */
.action-tile.save:disabled {
  opacity: 1;
  background: #e3eaff;
  border-color: #c9d6fb;
  color: #8ea4e4;
  box-shadow: none;
}

/* Empty states: roomy, muted, centred, with a soft icon — never text jammed against a border. */
.bc-empty,
.data-grid tr.empty td,
.data-grid .empty td,
.item-empty-detail,
.empty-state {
  padding: 22px 16px !important;
  margin: 0;
  color: #8a93a8 !important;
  font-size: 13px !important;
  font-style: normal;
  text-align: center !important;
  line-height: 1.4;
}
.bc-empty::before,
.smart-lookup-list > p::before,
.data-grid tr.empty td::before,
.empty-state::before {
  content: '\ea01';
  display: block;
  margin: 0 auto 6px;
  font-family: 'bc-icons';
  font-size: 22px;
  line-height: 1;
  color: #c3cad9;
}
td.bc-empty::before {
  display: block;
}

/* Rail icons (inline duotone): white line, accent layer turns orange on hover/active. */
#rail .rail-icon {
  display: grid;
  place-items: center;
}
#rail .rail-icon svg {
  width: 25px;
  height: 25px;
  color: #fff;
}
#rail .rail-icon .duo {
  fill: #9db8ff;
  opacity: 0.6;
  transition: fill 0.15s, opacity 0.15s;
}
#rail button:hover .rail-icon .duo,
#rail button.active .rail-icon .duo,
#rail button[aria-expanded='true'] .rail-icon .duo {
  fill: var(--bc-orange-500);
  opacity: 0.95;
}

/* Toasts: ink pill with an orange edge; errors get a red edge and stay readable. */
#toast {
  background: var(--bc-ink);
  border-left: 4px solid var(--bc-orange-500);
  font-weight: 500;
}
#toast.error {
  background: #fff;
  color: #9b1c1c;
  border: 1px solid #f5c2c2;
  border-left: 4px solid #d92d2d;
}
#loading {
  background: rgba(16, 29, 66, 0.9);
  border-radius: 999px;
}

/* ---- Data tables: light header with small caps labels, hairline rows ---- */
.data-grid th,
.history-grid .data-grid th,
.customer-page .data-grid th,
.return-page .data-grid th,
.source-inquiry-grid .data-grid th,
.view[data-module='glaccount'] .coa-history-grid .data-grid th {
  background: #f1f4fa;
  color: #4b5570;
  border-color: #e3e7f0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.history-grid .data-grid th[aria-sort]:before {
  color: #a9b2c8;
}
.history-grid .data-grid th[aria-sort='ascending']::before {
  border-bottom-color: var(--bc-blue-700);
}
.history-grid .data-grid th[aria-sort='descending']::after {
  border-top-color: var(--bc-blue-700);
}
/* Row lines: one clear hairline under every row so long lists stay easy to follow. */
.data-grid td,
.history-grid .data-grid td {
  border-color: #e9edf4;
  border-bottom: 1px solid #dde2ec;
}
.data-grid thead th,
.history-grid .data-grid thead th {
  border-bottom: 1px solid #cfd6e4;
}
.data-grid tbody tr:last-child td {
  border-bottom-color: #dde2ec;
}
.data-grid tr:nth-child(even),
.history-grid .data-grid tbody tr:nth-child(even) {
  background: #fafbfe;
}
.data-grid tbody tr:hover,
.history-grid .data-grid tbody tr:hover {
  background: #fff4e5;
}
.data-grid tbody tr.selected,
.data-grid tbody tr[aria-selected='true'],
.bank-reconcile-page tr.selected td {
  background: #ffe8cc;
  box-shadow: inset 3px 0 0 var(--bc-orange-500);
}

/* ---- Report catalogue ---- */
.report-browser {
  background: #eef1f9;
}
.report-groups,
.report-list {
  border-color: var(--bc-line);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(16, 29, 66, 0.06);
  background: #fff;
}
.report-groups img,
.report-groups .active img {
  filter: none;
  width: 30px;
  height: 30px;
}
.report-groups button.active img {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
  border-radius: 9px;
}
/* Report viewer: light desk around the paper instead of a dark grey canvas. */
.form-page:has(> .report-paper) {
  background: #e9edf6;
}
.form-page:has(> .report-paper) > .report-toolbar {
  background: #fff;
  border-bottom: 1px solid var(--bc-line);
}
.report-paper {
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(16, 29, 66, 0.06), 0 8px 24px rgba(16, 29, 66, 0.08);
}
.report-footer {
  border-top-color: var(--bc-line) !important;
  color: #4b5570 !important;
}
.report-groups button {
  color: var(--bc-ink);
}
.report-groups button:hover {
  background: var(--bc-blue-50);
}
.report-groups button.active {
  background: var(--bc-blue-900);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--bc-orange-500);
}
.report-list > h2 {
  color: var(--bc-ink);
  font-weight: 600;
}
.report-card {
  border-radius: 8px;
}
.report-card:hover {
  background: var(--bc-blue-50);
}
.report-card b {
  color: var(--bc-ink);
  font-weight: 500;
}
.report-icon {
  --tone-bg: #eef0f5;
  --tone-fg: #4b5570;
  width: 46px;
  min-width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--tone-bg);
  color: var(--tone-fg);
}
.report-icon > i {
  font-size: 24px;
  line-height: 1;
}
.report-icon[data-tone='blue'] { --tone-bg: #e3eaff; --tone-fg: #2350c8; }
.report-icon[data-tone='orange'] { --tone-bg: #fff0dc; --tone-fg: #b85c05; }
.report-icon[data-tone='violet'] { --tone-bg: #eee9ff; --tone-fg: #5a3ad6; }

/* ---- Report parameters ---- */
.accurate-report-parameters .horizontal-tabs button.active,
.item-detail-dialog .horizontal-tabs button.active,
.horizontal-tabs button.active {
  color: var(--bc-blue-700);
  border-bottom-color: var(--bc-orange-500);
}

/* ---- Report paper: brand header, cobalt column rules, emphasised totals ---- */
.report-paper > h3 {
  font-family: var(--bc-font);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bc-ink);
}
.report-paper > h2 {
  color: var(--bc-blue-700);
}
.report-paper > .period {
  font-family: var(--bc-font);
  color: var(--bc-slate-500);
}
.report-paper .data-grid th,
.report-ledger .data-grid th {
  color: var(--bc-blue-900);
  background: #fff;
  font-weight: 600;
  border-bottom: 2px solid var(--bc-blue-700);
}
.report-ledger .data-grid tbody tr:nth-child(even) td {
  background: #f7f9ff;
}
.report-ledger .data-grid tbody tr:hover td {
  background: #fff4e5;
}
.report-ledger .report-link:hover,
.report-paper .statement-table .report-link:hover {
  color: var(--bc-blue-700);
}
/* ---- Receivable / Payable: ruled table with merged partner column ---- */
.report-paper .data-grid.report-boxed {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #9fb0d6;
  font-size: 12px;
  white-space: normal;
}
.report-paper .data-grid.report-boxed th,
.report-paper .data-grid.report-boxed td {
  border: 1px solid #c4cfe8;
  padding: 6px 9px;
  height: auto;
}
.report-paper .data-grid.report-boxed th {
  background: #dce6fb;
  color: var(--bc-blue-900);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  border-bottom: 1px solid #9fb0d6;
}
.report-paper .data-grid.report-boxed tbody tr td {
  background: #fff;
}
.report-paper .data-grid.report-boxed tbody tr:hover td:not(.report-box-partner) {
  background: #fff4e5;
}
.report-paper .data-grid.report-boxed td.report-box-partner {
  background: #f3f6fd;
  color: var(--bc-ink);
  font-weight: 600;
  vertical-align: middle;
}
.report-paper .data-grid.report-boxed tbody tr.report-box-total td,
.report-paper .data-grid.report-boxed tr.report-box-total td {
  background: #e8eefc;
  color: var(--bc-ink);
  font-weight: 700;
}
.report-paper .data-grid.report-boxed tfoot tr.report-box-total td {
  background: #cfdcfa;
  border-top: 2px solid #8ea2d3;
}

/* ---- Financial statements (P&L, Balance Sheet, statement layouts) ----
   Section heading caps + bold, parent accounts bold, children indented, "Total …" bold with a
   rule above the amount, key results (Gross/Operating/Net) spaced out, net result double-ruled. */
.report-paper .statement-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  color: var(--bc-ink);
}
.report-paper .statement-table td,
.report-paper .statement-table .report-link {
  font-size: 12px;
  font-weight: inherit;
  color: inherit;
}
.report-paper .statement-table th {
  padding: 6px 8px;
  color: var(--bc-blue-900);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  border-bottom: 1.5px solid var(--bc-ink);
}
.report-paper .statement-table th.num,
.report-paper .statement-table th:last-child {
  text-align: right;
}
.report-paper .statement-table th + th {
  border-left: 18px solid #fff;
}
.report-paper .statement-table td {
  padding: 3px 8px;
  vertical-align: bottom;
}
/* Figure columns: fixed width, gap kept as left padding so rules (drawn on the content box)
   start at the same x on every row. */
.report-paper .statement-table td.num {
  width: 150px;
  padding-left: 26px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.report-paper .statement-table .report-link {
  padding: 0;
  border: 0;
  background: none;
  line-height: inherit;
  vertical-align: baseline;
  text-decoration: none;
}
.report-paper .statement-table .report-link:hover {
  text-decoration: underline;
}
.statement-table .statement-heading td {
  padding-top: 18px;
  padding-bottom: 4px;
  color: var(--bc-ink);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.statement-table .statement-parent td {
  font-weight: 700;
}
.statement-table .statement-account td:first-child {
  color: #2b3655;
}
/* Rules are drawn as a 1px background line on the padding box, so they sit right on top of the
   figure and never run into the transparent column gap. */
.statement-table .statement-total td.num,
.statement-table .statement-net td.num {
  background: linear-gradient(var(--bc-ink), var(--bc-ink)) left top / 100% 1px no-repeat;
  background-origin: content-box;
  background-clip: content-box;
}
.statement-table .statement-total td {
  font-weight: 700;
  padding-top: 5px;
  padding-bottom: 6px;
}
.statement-table .statement-net td {
  border-top: 16px solid transparent;
  padding-top: 5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--bc-ink);
}
/* Same vertical box for label and figure so both sit on one baseline. */
.statement-table .statement-total td {
  border-top: 5px solid transparent;
  padding-top: 0;
  padding-bottom: 6px;
}
.statement-table .statement-net td {
  border-top: 16px solid transparent;
  padding-top: 0;
  padding-bottom: 4px;
}
/* Net result: rule above, double rule below. */
.statement-table .statement-net:last-child td.num {
  background:
    linear-gradient(var(--bc-ink), var(--bc-ink)) left top / 100% 1px no-repeat,
    linear-gradient(var(--bc-ink), var(--bc-ink)) left bottom / 100% 1px no-repeat,
    linear-gradient(var(--bc-ink), var(--bc-ink)) left calc(100% - 3px) / 100% 1px no-repeat;
  background-origin: content-box;
  background-clip: content-box;
  padding-bottom: 0;
  border-bottom: 2px solid transparent;
}
.statement-table .statement-net:last-child td.num .report-link {
  display: inline-block;
  padding-bottom: 6px;
}
.statement-table .statement-net:last-child td {
  color: var(--bc-blue-700);
  padding-bottom: 4px;
}

/* Lookup dropdown empty state: compact, fits the 64px list the lookup reserves. */
.smart-lookup-list > p,
.smart-lookup-list > p.bc-empty {
  margin: 0;
  padding: 12px 14px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #8a93a8 !important;
  font-size: 13px !important;
}
.smart-lookup-list > p::before {
  content: '\ea01';
  font-family: 'bc-icons';
  font-size: 18px;
  line-height: 1;
  color: #c3cad9;
  display: inline-block;
  margin: 0;
}

/* Override the legacy statement borders (higher specificity) so each figure shows only our rule. */
.report-paper .statement-table th {
  white-space: nowrap;
}
.report-paper .statement-table .statement-total td.num,
.report-paper .statement-table .statement-total td {
  border-top: 5px solid transparent;
}
.report-paper .statement-table .statement-net td.num,
.report-paper .statement-table .statement-net td {
  border-top: 16px solid transparent;
  border-bottom: 2px solid transparent;
}
.report-paper .data-grid.report-boxed th.num {
  text-align: right;
}
/* Balance-sheet tree: headings by level, grand totals double-ruled. */
.report-paper .statement-table .statement-heading[data-level='0'] td {
  padding-top: 18px;
  letter-spacing: 0.06em;
}
.report-paper .statement-table .statement-heading[data-level='1'] td {
  padding-top: 6px;
}
.report-paper .statement-table .statement-heading[data-level='2'] td,
.report-paper .statement-table .statement-heading[data-level='3'] td {
  padding-top: 14px;
  text-transform: none;
  letter-spacing: 0;
}

/* Grand totals (TOTAL ASSETS, Total LIABILITIES and EQUITIES): same geometry as the P&L net result. */
.report-paper .statement-table .statement-grand td {
  border-top: 16px solid transparent;
  border-bottom: 2px solid transparent;
  padding-top: 0;
  padding-bottom: 4px;
  font-weight: 800;
  color: var(--bc-ink);
}
.report-paper .statement-table .statement-grand td.num {
  padding-bottom: 0;
  background:
    linear-gradient(var(--bc-ink), var(--bc-ink)) left top / 100% 1px no-repeat,
    linear-gradient(var(--bc-ink), var(--bc-ink)) left bottom / 100% 1px no-repeat,
    linear-gradient(var(--bc-ink), var(--bc-ink)) left calc(100% - 3px) / 100% 1px no-repeat;
  background-origin: content-box;
  background-clip: content-box;
}
.report-paper .statement-table .statement-grand td.num .report-link,
.report-paper .statement-table .statement-grand td.num .statement-figure {
  display: inline-block;
  padding-top: 2px;
  padding-bottom: 6px;
}
/* A class heading that follows a Total gets a blank line, as in the printed statement. */
.report-paper .statement-table .statement-total + .statement-heading td,
.report-paper .statement-table .statement-grand + .statement-heading td {
  padding-top: 18px;
}
/* Multi-period statements: compact figure columns and horizontal scroll instead of clipping. */
.report-paper:has(.statement-periods) {
  overflow-x: auto;
}
.report-paper .statement-periods .statement-table td.num {
  width: auto;
  min-width: 92px;
  padding-left: 12px;
}
.report-paper .statement-periods .statement-table .report-link {
  color: inherit;
}
/* Language picker: room for the full name and the arrow. */
.language-switch {
  flex: none;
  width: auto;
  min-width: 172px;
  padding-right: 30px;
}
/* Legacy rules shrink the last header and colour some figure links; statements keep one style. */
.report-paper .statement-table th:last-child {
  font-size: 12px;
}
.report-paper .statement-table tr .report-link,
.report-paper .statement-table tr .report-link:visited {
  color: inherit;
}
/* Partner reports (AR/AP per currency/partner): BookCounting type, light header, ruled rows. */
.report-paper.report-partners,
.report-partners > h3,
.report-partners > .period,
.report-partners .partner-report-table {
  font-family: var(--bc-font);
}
.report-partners > h2 {
  color: var(--bc-blue-700);
}
.report-partners .partner-report-table th {
  background: #f1f4fa;
  color: #4b5570;
  font-weight: 600;
  border-bottom: 1px solid #cfd6e4;
  padding: 6px 8px;
}
.report-partners .partner-report-table td {
  border-bottom: 1px solid #e1e6ef;
  padding: 5px 8px;
}
.report-partners .partner-report-table tbody tr:hover td {
  background: #fff4e5;
}
.report-partners .partner-report-table .partner-subtotal td,
.report-partners .partner-report-table tfoot td {
  background: #f3f6fd;
  font-weight: 700;
  border-bottom: 1px solid #cfd6e4;
}
.report-partners .report-partner-section h5,
.report-partners .report-currency-heading {
  color: var(--bc-ink);
}
.report-partners .currency-summary-table th,
.report-partners .currency-summary-table td {
  border: 1px solid #c4cfe8;
}
.report-partners .currency-summary-table th {
  background: #dce6fb;
  color: var(--bc-blue-900);
}
/* Currency / grand totals stand apart from the per-partner subtotals. */
.report-partners .currency-subtotal-table td,
.report-partners .currency-summary-table tfoot td,
.report-partners .report-currency-section > .partner-report-table:last-child tfoot td {
  background: #dce6fb;
  border-top: 2px solid #8ea2d3;
  color: var(--bc-blue-900);
  font-weight: 800;
}
/* Column lines: thin vertical rules between columns in every data table (lists, details, lookups). */
.data-grid th,
.data-grid td,
.history-grid .data-grid th,
.history-grid .data-grid td {
  border-right: 1px solid #e3e8f1;
}
.data-grid th:last-child,
.data-grid td:last-child,
.history-grid .data-grid th:last-child,
.history-grid .data-grid td:last-child {
  border-right: 0;
}
.data-grid thead th,
.history-grid .data-grid thead th {
  border-right-color: #d6dce8;
}
/* Document tabs: calm inactive tabs, an obvious hover, a white active tab with a thin cobalt rule. */
.document-tabs {
  gap: 4px;
}
.document-tab {
  background: #e6ebf5;
  border: 1px solid #dbe1ee;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  color: #4b5570;
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s;
}
.document-tab:hover {
  background: #d6def0;
  color: var(--bc-ink);
}
.document-tab.active,
.document-tab.active:hover {
  background: #fff;
  border-color: #d6dce8;
  border-top: 2px solid var(--bc-blue-600);
  color: var(--bc-ink);
  font-weight: 600;
  box-shadow: 0 -1px 4px rgba(16, 29, 66, 0.05);
}
.document-tab .close-document {
  color: #8a93a8;
  border-radius: 4px;
  padding: 0 3px;
}
.document-tab .close-document:hover {
  background: rgba(16, 29, 66, 0.08);
  color: var(--bc-ink);
}

/* Document stamps: centred in the detail container and faint, so they never compete with the figures. */
.paid-stamp,
.invoice-stamp,
.outstanding-stamp,
.workflow-stamp {
  top: 50% !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  opacity: 0.32 !important;
}

/* Icon centring: icon-only buttons centre their glyph with flexbox instead of text baselines. */
button:has(> i[class*='icn-']:only-child),
button:has(> i.acc-metro-icon:only-child),
.action-tile,
.history-tools .history-import,
.history-tools .history-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button > i[class*='icn-'],
button > i.acc-metro-icon {
  display: block;
  line-height: 1;
  vertical-align: middle;
}
/* Three equal dots centred as a group, independent of the font's glyph bearings. */
.action-tile > .icn-navigation-others {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.action-tile > .icn-navigation-others::before {
  content: '';
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 -7px currentColor, 0 7px currentColor;
}
.tile-menu[role='menu'] > button[role='menuitem'] {
  display: flex;
  justify-content: flex-start;
  text-align: left;
}
/* Text "+" and "⋮" sit low in the UI font; draw them with the icon font instead. */
.dashboard-view .dashboard-kebab,
.dashboard-view .dashboard-card-kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
}
.dashboard-view .dashboard-kebab::before,
.dashboard-view .dashboard-card-kebab::before {
  content: '\e934';
  font-family: 'bc-icons';
  font-size: 18px;
  line-height: 1;
}
/* Save / delete motion (brand-ui.js BCMotion): a solid snapshot of the form flies into the List button
   (save) or the trash button (delete), animated with the Web Animations API on transform/opacity. */
.bc-ghost {
  position: fixed;
  z-index: 25000;
  overflow: hidden;
  pointer-events: none;
  border-radius: 12px;
  background: var(--bc-canvas);
  box-shadow: 0 8px 24px rgba(16, 29, 66, 0.12);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.bc-ghost > * {
  pointer-events: none;
}
/* Landing feedback on the target button. */
.bc-fly-pulse {
  position: fixed;
  z-index: 25001;
  pointer-events: none;
  border-radius: 12px;
  animation: bc-fly-pulse 0.6s ease-out forwards;
}
.bc-fly-pulse-save { box-shadow: 0 0 0 0 rgba(49, 107, 254, 0.45); }
.bc-fly-pulse-delete { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
@keyframes bc-fly-pulse {
  from { box-shadow: 0 0 0 0 var(--pulse, rgba(49, 107, 254, 0.45)); }
  to { box-shadow: 0 0 0 14px rgba(49, 107, 254, 0); }
}
.bc-fly-pulse-delete { --pulse: rgba(220, 38, 38, 0.4); }
.bc-fly-badge {
  position: fixed;
  z-index: 25002;
  pointer-events: none;
  min-width: 26px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--bc-orange-500);
  box-shadow: 0 2px 6px rgba(16, 29, 66, 0.2);
  animation: bc-fly-badge 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes bc-fly-badge {
  0% { opacity: 0; transform: translateY(4px) scale(0.7); }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  75% { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(0.95); }
}/* Header note shown after the motion. */
.bc-note {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(16, 29, 66, 0.12);
  transform: translateX(-50%);
  animation: bc-note-in 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.bc-note i {
  font-size: 16px;
  line-height: 1;
}
.bc-note-saved { background: #ecfdf3; border-color: #b4e7c5; color: #15803d; }
.bc-note-deleted { background: #fef2f2; border-color: #f5c2c2; color: #b91c1c; }
.bc-note-out {
  animation: bc-note-out 0.28s ease-in forwards;
}
@keyframes bc-note-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes bc-note-out { to { opacity: 0; transform: translate(-50%, -4px); } }
@media (prefers-reduced-motion: reduce) {
  .bc-note, .bc-note-out { animation-duration: 0.01s !important; }
}
/* Lookup quick create: "Could not find any match" + "Save "x" as new data?". */
.lookup-no-match { margin: 0; padding: 10px 14px 6px; text-align: center; font-style: italic; font-size: 13px; color: #4b5570; border-bottom: 1px solid #e3e7f0; }
.smart-lookup-list .lookup-quick-create, .lookup-list .lookup-quick-create { display: block; width: auto; margin: 8px auto 10px; padding: 7px 16px; border: 0; border-radius: 6px; background: var(--bc-blue-700); color: #fff; font-weight: 600; text-align: center; cursor: pointer; }
.smart-lookup-list .lookup-quick-create:hover { filter: brightness(1.08); }

/* Chart of Accounts: account type as a square coloured tag, one distinct colour per type
   (assets cool hues, liabilities warm, equity purple, revenue green, cost and expenses red/pink). */
.coa-type-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 22px;
  padding: 0 8px;
  border-radius: 0;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #eef1f6;
  color: #4b5570;
}
.coa-type-tag[data-account-type='CASH_BANK'] { background: #e0f2fe; border-color: #7dd3fc; color: #0369a1; }
.coa-type-tag[data-account-type='ACCOUNT_RECEIVABLE'] { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.coa-type-tag[data-account-type='INVENTORY'] { background: #ede9fe; border-color: #c4b5fd; color: #6d28d9; }
.coa-type-tag[data-account-type='OTHER_CURRENT_ASSET'] { background: #e0e7ff; border-color: #a5b4fc; color: #4338ca; }
.coa-type-tag[data-account-type='FIXED_ASSET'] { background: #ccfbf1; border-color: #5eead4; color: #0f766e; }
.coa-type-tag[data-account-type='ACCUMULATED_DEPRECIATION'] { background: #cbd5e1; border-color: #64748b; color: #0f172a; }
.coa-type-tag[data-account-type='OTHER_ASSET'] { background: #cffafe; border-color: #67e8f9; color: #0e7490; }
.coa-type-tag[data-account-type='ACCOUNT_PAYABLE'] { background: #ffedd5; border-color: #fdba74; color: #c2410c; }
.coa-type-tag[data-account-type='OTHER_CURRENT_LIABILITY'] { background: #fef3c7; border-color: #fcd34d; color: #b45309; }
.coa-type-tag[data-account-type='LONG_TERM_LIABILITY'] { background: #fef9c3; border-color: #fde047; color: #854d0e; }
.coa-type-tag[data-account-type='EQUITY'] { background: #f3e8ff; border-color: #d8b4fe; color: #7e22ce; }
.coa-type-tag[data-account-type='REVENUE'] { background: #dcfce7; border-color: #86efac; color: #15803d; }
.coa-type-tag[data-account-type='OTHER_INCOME'] { background: #ecfccb; border-color: #bef264; color: #4d7c0f; }
.coa-type-tag[data-account-type='COGS'] { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.coa-type-tag[data-account-type='EXPENSE'] { background: #ffe4e6; border-color: #fda4af; color: #be123c; }
.coa-type-tag[data-account-type='OTHER_EXPENSE'] { background: #fae8ff; border-color: #f0abfc; color: #a21caf; }
/* Item Detail > Additional Info: source documents (Order No, Receive No, Delivery No) as clickable fields. */
.source-reference-field .source-reference-link { display: block; width: 100%; min-height: 32px; padding: 6px 10px; text-align: left; font-weight: 700; background: #e8f7ee; border: 1px solid #b4e7c5; color: #15803d; cursor: pointer; }
.source-reference-field .source-reference-link:hover:not(:disabled) { text-decoration: underline; filter: brightness(0.98); }
.source-reference-field .source-reference-link:disabled { cursor: default; opacity: 0.7; }

/* One table style everywhere: page-specific legacy rules (sales receipt, payment, payroll, …) used larger
   type, dark headers and fixed row heights. Reports keep their own layouts. */
.view .data-grid:not(.report-paper .data-grid) {
  font-size: 13px;
}
.view .data-grid:not(.report-paper .data-grid) > thead > tr > th {
  height: auto !important;
  padding: 8px 12px !important;
  background: #f1f4fa !important;
  color: #4b5570 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid #cfd6e4 !important;
}
.view .data-grid:not(.report-paper .data-grid) > tbody > tr > td {
  height: auto;
  min-height: 36px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 13px !important;
  color: var(--bc-ink);
}
/* Empty action menu (new, unsaved record). */
.tile-menu .tile-menu-empty { margin: 0; padding: 10px 14px; max-width: 220px; font-size: 13px; color: #6b7280; white-space: normal; }
/* Action / tile menus: rounded panel, soft shadow, clear hover. */
.tile-menu {
  padding: 6px;
  border: 1px solid #e3e7f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--bc-shadow-lg);
  min-width: 190px;
}
.tile-menu > button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--bc-ink);
  text-align: left;
  font-weight: 500;
}
.tile-menu > button:hover:not(:disabled),
.tile-menu > button:focus-visible {
  background: var(--bc-blue-50);
  color: var(--bc-blue-700);
}
.tile-menu > button > i {
  font-size: 18px;
  color: var(--bc-slate-500);
}
/* Save split-button: draw the dropdown chevron with the icon font (the text glyph sat low). */
.bank-save-menu { font-size: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; }
.bank-save-menu::before { content: '\e977'; font-family: 'bc-icons'; font-size: 16px; line-height: 1; }

/* Send Email / Send WhatsApp: form on the left, real PDF preview on the right. */
#modal:has(.send-dialog) { width: 980px; max-width: calc(100vw - 24px); }
.send-dialog { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; min-height: 440px; }
.send-dialog .send-form .field { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 0 12px; }
.send-dialog .send-form .field > label { padding-top: 8px; font-weight: 600; color: var(--bc-ink, #1f2a44); }
.send-dialog textarea, .send-dialog input, .send-dialog select { width: 100%; }
.send-dialog textarea[name="to"] { min-height: 38px; resize: vertical; }
.send-dialog textarea[name="body"] { min-height: 170px; }
.send-editor-wrap { border: 1px solid var(--bc-line, #d6dce8); border-radius: 8px; overflow: hidden; background: #fff; }
.send-editor-tools { display: flex; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--bc-line, #d6dce8); background: #f6f8fc; }
.send-editor-tools button { min-width: 30px; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; font-weight: 700; cursor: pointer; }
.send-editor-tools button:hover { background: #e6ecf8; }
.send-editor-tools button[data-command="italic"] { font-style: italic; }
.send-editor-tools button[data-command="underline"] { text-decoration: underline; }
.send-editor { min-height: 190px; max-height: 300px; overflow: auto; padding: 10px 12px; line-height: 1.5; outline: none; }
.send-preview { display: flex; flex-direction: column; gap: 8px; }
.send-preview h3 { margin: 0; font-size: 14px; text-align: center; }
.send-preview iframe { flex: 1; min-height: 360px; border: 1px solid var(--bc-line, #d6dce8); border-radius: 8px; background: #f1f4fa; }
.send-preview .send-note { margin: 0; font-size: 12px; color: #6b7280; }
@media (max-width: 760px) { .send-dialog { grid-template-columns: 1fr; } .send-preview iframe { min-height: 260px; } }

/* Profit/Loss widget total: green for profit, red for loss (amount and its label). */
.dashboard-view .widget-content .dashboard-line-top:not(.dashboard-extra-total) .dashboard-money-total,
.dashboard-view .widget-content .dashboard-line-top:not(.dashboard-extra-total) .dashboard-money-total span,
.dashboard-view .widget-content .dashboard-line-top:not(.dashboard-extra-total) > label.fs-bold { color: #15803d !important; }
.dashboard-view .widget-content .dashboard-line-top.loss .dashboard-money-total,
.dashboard-view .widget-content .dashboard-line-top.loss .dashboard-money-total span,
.dashboard-view .widget-content .dashboard-line-top.loss > label.fs-bold { color: #dc2626 !important; }

/* Expandable rail: collapsed (icons only) by default, expanded shows group names. */
#rail { transition: width .18s ease; overflow: hidden; }
#rail .rail-label { display: none; }
#rail button.rail-toggle { position: absolute; left: 0; bottom: 12px; display: flex; align-items: center; justify-content: center; height: 36px; color: rgba(255, 255, 255, .75); border-left-color: transparent; }
#rail button.rail-toggle svg { width: 18px; height: 18px; transition: transform .18s ease; }
#rail button.rail-toggle:hover { color: #fff; }
#workspace, #flyout { transition: left .18s ease; }
@media (min-width: 901px) {
  body.rail-expanded #rail { width: 212px; }
  body.rail-expanded #workspace, body.rail-expanded #flyout { left: 212px; }
  body.rail-expanded #rail button { width: calc(100% - 10px); display: flex; align-items: center; gap: 12px; padding: 0 10px; text-align: left; }
  body.rail-expanded #rail .rail-label { display: block; font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.rail-expanded #rail button.rail-toggle { justify-content: flex-end; padding-right: 14px; }
  body.rail-expanded #rail button.rail-toggle svg { transform: rotate(180deg); }
}
@media (max-width: 900px) { #rail button.rail-toggle { display: none; } }
@media (prefers-reduced-motion: reduce) { #rail, #workspace, #flyout, #rail button.rail-toggle svg { transition: none; } }@media (min-width: 901px) { #header::after { transition: width .18s ease; } body.rail-expanded #header::after { width: 212px; } }

/* X icon replacing the "×" text glyph on close/remove buttons. */
.bc-x-host { display: inline-flex !important; align-items: center; justify-content: center; line-height: 1 !important; }
.bc-x { display: block; width: 0.8em; height: 0.8em; flex: none; pointer-events: none; }
.dialog-head .bc-x-host .bc-x, .error-close .bc-x { width: 16px; height: 16px; }
#module-tabs .bc-x, .document-tab .bc-x { width: 11px; height: 11px; }.bc-x-host { justify-content: center !important; text-align: center; } .bc-x-host > .bc-x { margin: 0 !important; position: static !important; }
.dialog-head .bc-x-host { width: 28px; height: 28px; padding: 0 !important; border-radius: 8px; } .dialog-head .bc-x-host .bc-x { width: 14px; height: 14px; } .dialog-head .bc-x-host:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* Menu tiles: the whole card carries its role colour (tinted fill + coloured border), square corners. */
#flyout .module-menu-tile { background: var(--tile-bg, var(--bc-blue-50)); border: 1px solid var(--tile-accent, var(--bc-blue-600)); border-radius: 0; }
#flyout .module-menu-tile:hover { background: var(--tile-bg, var(--bc-blue-50)); filter: brightness(0.97); border-color: var(--tile-accent, var(--bc-blue-600)); box-shadow: inset 0 0 0 1px var(--tile-accent, var(--bc-blue-600)); transform: none; }
#flyout .module-menu-tile img { background: transparent; border-radius: 0; padding: 4px; }.bc-x-host > .bc-plus { width: 14px; height: 14px; }

/* Dropdown menus (Import, list actions): as wide as their longest item, items left-aligned. */
.history-import-menu, .history-action-popup { width: max-content !important; min-width: 180px; max-width: min(360px, calc(100vw - 16px)); padding: 6px !important; }
.history-import-menu > button, .history-action-popup > button { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 10px; width: 100%; min-width: 0 !important; padding: 8px 12px !important; text-align: left; border-radius: 8px; }
/* Newly added dashboard widget: brief highlight after it scrolls into view. */
.dashboard-widget-new { animation: bc-widget-new 1.6s ease-out; }
@keyframes bc-widget-new { 0%, 35% { box-shadow: 0 0 0 3px var(--bc-orange-500, #f38906); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .dashboard-widget-new { animation: none; outline: 2px solid var(--bc-orange-500, #f38906); } }

/* Discount: one field with an [Rp | %] switch in front, the unit shown inside the input, the equivalent below. */
.discount-mode-control { display: flex; align-items: stretch; gap: 8px; max-width: 100%; }
.discount-mode { display: inline-flex; flex: none; padding: 3px; gap: 2px; background: #eef1f7; border: 1px solid var(--bc-line, #d6dce8); border-radius: 8px; }
.discount-mode .discount-mode-option { min-width: 38px; height: 28px; padding: 0 10px; border: 0 !important; border-radius: 6px; background: transparent; color: #5b6475; font-weight: 700; font-size: 13px; box-shadow: none; cursor: pointer; }
.discount-mode .discount-mode-option:hover:not(.active) { color: var(--bc-blue-700, #1e3ea0); }
.discount-mode .discount-mode-option.active { background: #fff; color: var(--bc-blue-700, #1e3ea0); box-shadow: 0 1px 2px rgba(16, 29, 66, .12); }
.discount-mode-input { position: relative; flex: 1; min-width: 0; }
.discount-mode-input::before { content: attr(data-affix); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: #8a93a5; pointer-events: none; }
.discount-mode-input[data-affix='%']::before { left: auto; right: 10px; }
.discount-mode-input input { width: 100%; text-align: right; }
.discount-mode-input[data-affix='Rp'] input { padding-left: 34px; }
.discount-mode-input[data-affix='%'] input { padding-right: 30px; }
.discount-mode-input input[hidden] { display: none; }
.discount-mode-hint { grid-column: 2; display: block; min-height: 16px; margin-top: -4px; font-size: 12px; color: #6b7280; text-align: right; }
/* Extra dashboard widgets: same layout language as the main six (donut + coloured rows + total line). */
.dashboard-extra .dashboard-donut-figure { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; color: var(--bc-ink, #1f2a44); }
.dashboard-extra .dashboard-donut-figure small { font-size: 11px; font-weight: 600; color: #6b7280; }
.dashboard-extra .dashboard-stat-value { font-size: 13px; font-weight: 700; color: var(--bc-ink, #1f2a44); white-space: nowrap; }
.dashboard-extra .dashboard-stat-value.bad { color: #dc2626; }
.dashboard-extra .dashboard-stat-note { min-width: 44px; }
.dashboard-extra .dashboard-extra-total { gap: 10px; }
.dashboard-extra .dashboard-extra-total > label:first-child { flex: 1; }
.dashboard-extra .dashboard-extra-total.loss .dashboard-money-total, .dashboard-extra .dashboard-extra-total.loss .dashboard-money-total span { color: #dc2626 !important; }
.dashboard-extra .dashboard-extra-total > label.fs-bold { color: var(--bc-ink, #1f2a44) !important; }
.dashboard-count-total { font-size: 22px; font-weight: 800; color: var(--bc-blue-700, #1e3ea0); }
.dashboard-count-total.bad { color: #dc2626; }
.dashboard-widget-link { flex: none; height: 26px; padding: 0 10px; border: 1px solid var(--bc-line, #d6dce8); border-radius: 999px; background: #fff; color: var(--bc-blue-700, #1e3ea0); font-size: 12px; font-weight: 700; cursor: pointer; }
.dashboard-widget-link:hover { background: var(--bc-blue-50, #eef3ff); border-color: var(--bc-blue-600, #316bfe); }
.dashboard-user-list .dashboard-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; }
.dashboard-role-chip { padding: 2px 8px; border-radius: 999px; background: #eef1f7; color: #4b5563; font-size: 11px; font-weight: 700; text-transform: capitalize; }
.dashboard-more { margin: 2px 0 0; font-size: 12px; color: #6b7280; }
.dashboard-stock-list { display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.dashboard-stock-row { display: flex; flex-direction: column; gap: 4px; }
.dashboard-stock-head { display: flex; justify-content: space-between; gap: 10px; }
.dashboard-stock-head label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dashboard-stock-head b { font-size: 12px; color: #dc2626; white-space: nowrap; }
.dashboard-stock-bar { height: 6px; border-radius: 999px; background: #eef1f7; overflow: hidden; }
.dashboard-stock-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff5530, #fda753); transition: width .6s ease; }
.dashboard-extra-empty .dashboard-all-clear { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 130px; color: #4b5563; }
.dashboard-all-clear-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #e5f6e8; color: #2b7a35; font-size: 20px; font-weight: 800; }
.dashboard-all-clear p { margin: 0; font-size: 13px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .dashboard-stock-bar i { transition: none; } }.dashboard-extra .dashboard-extra-total > label:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Extra widgets: neutral totals, single-line count pills; discount unit inside the field. */
.dashboard-extra .dashboard-extra-total .dashboard-money-total, .dashboard-extra .dashboard-extra-total .dashboard-money-total span { color: var(--bc-ink, #1f2a44); }
.dashboard-extra .dashboard-count-total:not(.bad) { color: var(--bc-ink, #1f2a44); }
.dashboard-extra .dashboard-stat-note { width: auto !important; min-width: 28px; padding: 1px 7px !important; white-space: nowrap; text-align: center; }
.discount-mode-input input { max-width: none !important; }
.discount-mode-hint { font-size: 12.5px; color: #4b5563; font-weight: 600; }
/* Supplier Payable Balance / Others: same layout as the customer's; Total Owing block below Initial Owing. */
.customer-page [data-section='balance'] > .partner-group:not(:first-child) > h2,
.vendor-page [data-section='balance'] > .partner-group:not(:first-child) > h2 { display: block !important; }
.vendor-page [data-section='balance'] > .partner-group:first-child > h2 { display: none; }
.vendor-page .customer-content[data-section='balance'], .vendor-page .customer-content[data-section='other'] { display: flex; flex-direction: column; gap: 22px; }
.vendor-page .customer-content[data-section='other'] > .partner-group { width: 49%; }
.vendor-page .customer-content .partner-group { max-width: none; min-width: 0; margin: 0; }
.vendor-page .customer-content .partner-group > h2 { margin: 0 0 10px; border-bottom: 1px solid #c9cdd5; padding-bottom: 6px; font-size: 22px; font-weight: 400; color: #316bfe; }
.vendor-page .customer-content .partner-group > .field { display: grid; grid-template-columns: 32.4% minmax(0,1fr); gap: 0; align-items: center; padding-left: 20px; margin: 9px 0; min-height: 34px; font-size: 15px; }
.vendor-page .partner-grid-toolbar { display: flex; align-items: center; gap: 10px; height: 34px; }
.vendor-page .partner-grid-toolbar h3 { min-width: 256px; margin: 0; font-size: 23px; font-weight: 400; color: #000; }
.vendor-page .partner-rows .partner-add { display: inline-flex; align-items: center; justify-content: center; align-self: auto; padding: 0; min-width: 55px; height: 34px; background: #fff; color: #204bb5; border: 1px solid #2b62fe; }
.vendor-page .partner-rows .grid-scroll { min-height: 170px; background: #fff; border-bottom: 1px solid #d9dde5; }
.vendor-page .partner-rows .data-grid { width: 100%; }
.partner-total-owing strong { font-weight: 800; text-align: right; max-width: 260px; }
.customer-page .customer-content[data-section='balance'] > .partner-group:not(:first-child),
.vendor-page .customer-content[data-section='balance'] > .partner-group:not(:first-child) { width: 49%; }
@media (max-width: 900px) { .vendor-page .customer-content[data-section='other'] > .partner-group, .customer-page .customer-content[data-section='balance'] > .partner-group:not(:first-child), .vendor-page .customer-content[data-section='balance'] > .partner-group:not(:first-child) { width: 100%; } }
/* Widget refresh: only that widget dims with a loading overlay; hover shows when it was last updated. */
.dashboard-view .widget-container { position: relative; }
.dashboard-view .widget-content.loading { position: relative; pointer-events: none; }
.dashboard-view .widget-content.loading > * { opacity: .35; transition: opacity .15s; }
.dashboard-view .widget-content.loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 3px solid var(--bc-blue-100, #dbe5ff); border-top-color: var(--bc-blue-600, #316bfe); animation: bc-spin .8s linear infinite; }
@keyframes bc-spin { to { transform: rotate(360deg); } }
.widget-updated { position: absolute; right: 8px; bottom: 6px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .96); box-shadow: 0 1px 4px rgba(16, 29, 66, .14); font-size: 11.5px; font-style: italic; color: #4b5563; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none; }
.widget-updated i { font-size: 13px; font-style: normal; }
.widget-container:hover .widget-updated, .widget-container:focus-within .widget-updated { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dashboard-view .widget-content.loading::after { animation: none; } .widget-updated { transition: none; } }

/* Extra widget visuals: hero figure, aging bar, bank bars, stat cards, gauge, avatar stack. */
.dashboard-hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 10px; }
.dashboard-hero-number { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--bc-ink, #1f2a44); line-height: 1.1; }
.dashboard-hero-number.bad { color: #dc2626; }
.dashboard-hero > span { font-size: 12.5px; color: #6b7280; }
.dashboard-hero .dashboard-widget-link { margin-left: auto; align-self: center; }
.dashboard-aging-bar { display: flex; height: 12px; gap: 2px; border-radius: 999px; overflow: hidden; background: #eef1f7; }
.dashboard-aging-bar i { display: block; min-width: 4px; }
.dashboard-aging-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.dashboard-aging-item { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 6px; align-items: center; padding: 6px 8px; border-radius: 8px; background: #f6f8fc; }
.dashboard-aging-item .widget-dot { grid-row: 1; }
.dashboard-aging-item small { font-size: 11.5px; color: #6b7280; }
.dashboard-aging-item b, .dashboard-aging-item > span:last-child { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-aging-item b { font-size: 13px; color: var(--bc-ink, #1f2a44); margin-top: 2px; }
.dashboard-aging-item > span:last-child { font-size: 11px; color: #6b7280; }
.dashboard-bank-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.dashboard-bank-bar-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.dashboard-bank-bar-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #374151; }
.dashboard-bank-bar-head b { white-space: nowrap; color: var(--bc-ink, #1f2a44); }
.dashboard-bank-bar-head b.bad { color: #dc2626; }
.dashboard-bank-bar-track { height: 6px; margin-top: 3px; border-radius: 999px; background: #eef1f7; overflow: hidden; }
.dashboard-bank-bar-track i { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .6s ease; }
.dashboard-bank-bar-track i.negative { background: #f87171; }
.dashboard-stat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.dashboard-stat-card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 9px; border-radius: 10px; background: #f6f8fc; overflow: hidden; }
.dashboard-stat-card-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.dashboard-stat-card small { font-size: 11.5px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-stat-card strong { font-size: 22px; font-weight: 800; color: var(--bc-ink, #1f2a44); line-height: 1.1; }
.dashboard-stat-card > span:last-child { font-size: 11.5px; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-gauge-row { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.dashboard-gauge { --gauge: 0; position: relative; flex: none; width: 150px; height: 82px; overflow: hidden; }
.dashboard-gauge::before { content: ''; position: absolute; inset: 0 0 -75px 0; border-radius: 50%; background: conic-gradient(from -90deg, rgb(253, 167, 83) calc(var(--gauge) * 1.8deg), rgb(49, 107, 254) 0 180deg, transparent 0); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 52px, #000 53px); mask: radial-gradient(circle at 50% 50%, transparent 52px, #000 53px); }
.dashboard-gauge-face { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; flex-direction: column; align-items: center; }
.dashboard-gauge-face strong { font-size: 22px; font-weight: 800; color: var(--bc-ink, #1f2a44); line-height: 1; }
.dashboard-gauge-face small { font-size: 10.5px; color: #6b7280; }
.dashboard-gauge-facts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dashboard-gauge-facts > div { display: flex; align-items: center; gap: 8px; }
.dashboard-gauge-facts small { flex: 1; font-size: 12px; color: #6b7280; }
.dashboard-gauge-facts b { font-size: 13.5px; color: var(--bc-ink, #1f2a44); white-space: nowrap; }
.dashboard-gauge-facts b.good { color: #15803d; }
.dashboard-avatar-stack { display: flex; padding-left: 8px; margin-bottom: 10px; }
.dashboard-avatar-stack .dashboard-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; border: 2px solid #fff; color: #fff; font-size: 13px; font-weight: 800; }
.dashboard-avatar-stack .dashboard-avatar.more { background: #e5e9f2; color: #4b5563; }
.dashboard-user-names { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.dashboard-user-name { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: #374151; }
.dashboard-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dashboard-role-chip.bad { background: #fde8e8; color: #b91c1c; }
.dashboard-role-chip.warn { background: #fff1dc; color: #b45309; }/* Widget review fixes: true half gauge, one-line hero (total + count + View), compact aging cards, stock rows. */
.dashboard-gauge { width: 150px; height: 75px; }
.dashboard-gauge::before { inset: auto; left: 0; top: 0; width: 150px; height: 150px; -webkit-mask: radial-gradient(circle at 50% 50%, transparent 50px, #000 51px); mask: radial-gradient(circle at 50% 50%, transparent 50px, #000 51px); }
.dashboard-gauge-face { bottom: 0; }
.dashboard-gauge-face strong { font-size: 24px; }
.dashboard-gauge-row { margin-top: 14px; }
.dashboard-hero { flex-wrap: nowrap; align-items: center; margin: 0 0 8px; }
.dashboard-hero-number { font-size: 22px; white-space: nowrap; }
.dashboard-hero > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-aging-legend { gap: 6px; margin-top: 9px; }
.dashboard-aging-item { padding: 4px 7px; }
.dashboard-aging-item b { font-size: 12.5px; margin-top: 0; }
.dashboard-stock-row { gap: 1px; padding: 6px 0; border-bottom: 1px solid #eef1f7; }
.dashboard-stock-row:last-child { border-bottom: 0; }
.dashboard-stock-head { align-items: center; }
.dashboard-stock-sub { font-size: 11.5px; color: #6b7280; }
.dashboard-stock-list { gap: 0; padding-top: 0; }
.dashboard-pill.neutral { background: #eef1f7; color: #4b5563; }
.dashboard-avatar-stack .dashboard-avatar { width: 40px; height: 40px; font-size: 15px; }.dashboard-stock-row { padding: 3px 0; } .dashboard-extra .dashboard-chip-row { margin-bottom: 6px; }
/* Widget layout: drag by the header; the target widget shows where it will land. */
.dashboard-view .widget-header[draggable='true'] { cursor: grab; }
.dashboard-view .widget-header[draggable='true']:active { cursor: grabbing; }
.dashboard-view .widget-container.dragging { opacity: .45; }
.dashboard-view .widget-container.drop-target { outline: 2px dashed var(--bc-blue-600, #316bfe); outline-offset: 3px; }
.dashboard-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.dashboard-gauge-wrap > small { font-size: 11px; color: #6b7280; }.dashboard-extra-wait { min-height: 160px; }