:root {
  color-scheme: light;
  --page-bg: #fafafa;
  --surface: #ffffff;
  --sidebar-bg: #ffffff;
  --text-primary: #171717;
  --text-secondary: #525252;
  --text-placeholder: #666666;
  --section-bg: #fff0e0;
  --selected-bg: #fff0e0;
  --hover-bg: #fff7ef;
  --accent: #f97316;
  --accent-text: #9a3412;
  --border: #d4d4d4;
  --control-border: #a3a3a3;
  --divider: #e5e5e5;
  --primary-bg: #191919;
  --primary-text: #ffffff;
  --primary-hover: #303030;
  --focus-ring: #c2410c;
  --error-text: #b91c1c;
  --error-bg: #fef2f2;
  --disabled-bg: #f5f5f5;
  --disabled-text: #737373;
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border);
  --canvas: var(--page-bg);
  font-family: Inter, system-ui, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-size: 13px; }
button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 10; inset: 0 auto 0 0; display: flex; width: 248px; flex-direction: column; padding: 16px 12px 14px; border-right: 1px solid var(--divider); color: var(--text-primary); background: var(--sidebar-bg); transition: width .24s ease, transform .24s ease; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 8px; color: inherit; text-decoration: none; }
.brand-mark { display: flex; align-items: end; gap: 3px; width: 27px; height: 26px; }
.brand-mark i { display: block; width: 5px; border-radius: 2px 2px 0 0; background: var(--accent); }
.brand-mark i:nth-child(1) { height: 10px; }.brand-mark i:nth-child(2) { height: 17px; }.brand-mark i:nth-child(3) { height: 13px; }.brand-mark i:nth-child(4) { height: 24px; }
.brand-name { font: 700 24px/1 Inter, system-ui, sans-serif; letter-spacing: 0; }
.brand-name small { display: block; margin-top: 4px; color: var(--accent-text); font: 700 9px/1 Inter, system-ui, sans-serif; letter-spacing: 1px; }
.workspace-tag { display: flex; min-height: 40px; align-items: center; gap: 9px; margin: 18px 2px 12px; padding: 0 9px; border: 1px solid var(--control-border); border-radius: 5px; color: var(--text-primary); background: var(--surface); font-size: 14px; font-weight: 500; }
.workspace-icon { color: #525963; font-size: 16px; }
.workspace-chevron { margin-left: auto; color: #555d66; }
.primary-nav { display: grid; gap: 3px; margin-top: 8px; }
.nav-item { position: relative; display: flex; min-height: 40px; align-items: center; gap: 11px; padding: 0 10px; border-radius: 4px; color: var(--text-primary); text-decoration: none; font-size: 14px; font-weight: 500; transition: background .18s, color .18s; }
.nav-item:hover { color: var(--text-primary); background: var(--hover-bg); }
.nav-item.is-active { color: var(--accent-text); background: var(--selected-bg); }
.nav-item.is-active::before { position: absolute; top: 0; bottom: 0; left: -12px; width: 3px; border-radius: 0 2px 2px 0; background: var(--accent); content: ""; }
.nav-icon { display: grid; width: 18px; place-items: center; font-size: 19px; font-weight: 500; line-height: 1; }
.sidebar-bottom { margin-top: auto; }
.workspace-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.collapse-button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px; border: 0; color: #636a72; background: transparent; text-align: left; font-size: 11px; cursor: pointer; }
.collapse-button span:first-child { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #d9dcdf; border-radius: 50%; font-size: 17px; }
.main-area { min-height: 100vh; margin-left: 248px; transition: margin-left .24s ease; }
.topbar { position: sticky; z-index: 5; top: 0; display: flex; height: 64px; align-items: center; gap: 18px; padding: 0 24px; border-bottom: 1px solid var(--divider); background: var(--surface); }
.topbar-search { display: flex; width: min(480px, 52vw); height: 40px; align-items: center; gap: 9px; padding: 0 10px; border: 1px solid var(--control-border); border-radius: 5px; color: var(--text-secondary); background: var(--surface); }
.topbar-search > span { font-size: 17px; transform: rotate(-25deg); }
.topbar-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text-primary); background: transparent; font-size: 14px; }
.topbar-search input:focus { box-shadow: none; }
.topbar-search kbd { padding: 2px 5px; border: 1px solid var(--divider); border-radius: 3px; color: var(--text-secondary); background: var(--disabled-bg); font: 10px Inter, system-ui, sans-serif; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.fiscal-year select { height: 32px; min-width: 108px; padding: 0 9px; border: 1px solid #dedfe1; border-radius: 5px; color: #26282b; background: white; font-size: 11px; font-weight: 600; }
.company-label { color: #25445d; font-size: 10px; font-weight: 700; letter-spacing: .85px; }
.topbar-divider { color: #bac4cd; }
.period-label { color: #68798a; }
.topbar-actions { gap: 14px; }
.icon-button { position: relative; display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 50%; color: #333840; background: transparent; font-size: 17px; cursor: pointer; }
.icon-button:hover, .profile-button:hover { background: #f3f3f3; }
.help-button { border: 1px solid #dce4e9; font-size: 12px; font-weight: 700; }
.notification-dot { position: absolute; top: 1px; right: 1px; display: grid; width: 15px; height: 15px; place-items: center; border: 2px solid white; border-radius: 50%; color: white; background: #e45c58; font-size: 8px; font-weight: 700; }
.profile-button { display: flex; align-items: center; gap: 9px; padding: 4px 5px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.avatar { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #333; background: #eee; font-size: 10px; font-weight: 700; }
.profile-name { font-size: 11px; font-weight: 600; }
.chevron { color: #8292a0; font-size: 13px; }
.mobile-menu { display: none; }
.page-content { width: min(100%, 1600px); margin: 0 auto; padding: 16px 24px 24px; }
h1, h2, p { margin: 0; }
.page-heading { display: grid; gap: 5px; margin-bottom: 12px; }
.breadcrumbs { display: flex; gap: 9px; color: #737982; font-size: 10px; }
.breadcrumbs span:last-child { color: #282a2d; }
.heading-title-row { display: flex; align-items: center; gap: 10px; }
.page-heading h1 { color: var(--text-primary); font: 700 28px/34px Inter, system-ui, sans-serif; letter-spacing: 0; }
.demo-badge { padding: 4px 7px; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent-text); background: var(--section-bg); font-size: 11px; font-weight: 600; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 13px; border: 1px solid var(--control-border); border-radius: 5px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { border-color: var(--primary-bg); color: var(--primary-text); background: var(--primary-bg); }
.button-primary:hover { border-color: var(--primary-hover); background: var(--primary-hover); }
.button-plus { font-size: 17px; font-weight: 400; line-height: 1; }
.filter-bar { display: grid; grid-template-columns: 1fr .9fr .95fr .9fr 1.1fr auto auto; align-items: end; gap: 10px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.filter-field { display: grid; gap: 6px; min-width: 0; }
.filter-field > span { color: var(--text-secondary); font-size: 12px; line-height: 18px; font-weight: 500; }
.filter-field select, .chart-heading select, .page-size select { width: 100%; height: 40px; padding: 0 28px 0 10px; border: 1px solid var(--control-border); border-radius: 5px; outline: none; color: var(--text-primary); background-color: var(--surface); font-size: 14px; cursor: pointer; }
.filter-search-control { display: flex; height: 40px; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--control-border); border-radius: 5px; color: var(--text-secondary); }
.filter-search-control > span { font-size: 17px; transform: rotate(-25deg); }
.filter-search-control input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text-primary); background: transparent; font-size: 14px; }
.filter-search-control input:focus { box-shadow: none; }
select:focus, input:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 2px var(--focus-ring); }
.button-filter { min-width: 118px; border-color: var(--primary-bg); color: var(--primary-text); background: var(--primary-bg); }
.button-filter span { font-size: 17px; transform: rotate(-30deg); }
.button-quiet { min-width: 64px; color: var(--text-primary); background: var(--surface); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 17px; }
.metric-card { position: relative; min-height: 132px; overflow: hidden; padding: 17px 17px 15px; border: 1px solid var(--line); border-radius: 5px; background: #fff; animation: rise-in .5s both; }
.metric-card:nth-child(2) { animation-delay: .06s; }.metric-card:nth-child(3) { animation-delay: .12s; }.metric-card:nth-child(4) { animation-delay: .18s; }
.metric-top { display: flex; align-items: center; justify-content: space-between; }
.metric-label { color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.metric-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; font-size: 17px; font-weight: 600; }
.metric-teal .metric-icon, .metric-coral .metric-icon, .metric-blue .metric-icon, .metric-amber .metric-icon { color: var(--accent-text); background: var(--section-bg); }
.metric-value { position: relative; z-index: 1; margin-top: 8px; font: 700 24px/1.2 Inter, system-ui, sans-serif; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.metric-value span { font-size: 15px; }
.metric-teal .metric-value, .metric-coral .metric-value, .metric-blue .metric-value, .metric-amber .metric-value { color: var(--text-primary); }
.metric-foot { position: relative; z-index: 1; display: flex; gap: 6px; margin-top: 8px; color: var(--text-secondary); font-size: 12px; }
.trend-up, .pending-note { color: var(--accent-text); font-weight: 700; }
.metric-spark { position: absolute; right: 8px; bottom: 5px; width: 92px; height: 34px; opacity: .2; }
.metric-spark svg { width: 100%; height: 100%; overflow: visible; }.metric-spark path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }.spark-teal, .spark-coral, .spark-blue, .spark-amber { color: var(--accent); }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.transactions-panel { margin-bottom: 17px; }
.panel-heading { display: flex; min-height: 35px; align-items: center; justify-content: space-between; gap: 15px; padding: 8px 14px; }
.transactions-panel > .panel-heading, .chart-heading { border-bottom: 1px solid #f1dfce; background: #fff0e3; }
h2 { color: var(--text-primary); font: 600 16px/22px Inter, system-ui, sans-serif; letter-spacing: 0; }
.panel-tools { display: flex; align-items: center; gap: 8px; }
.search-box { display: flex; width: 190px; height: 34px; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid #e0e7eb; border-radius: 5px; color: #83919e; }
.search-box span { font-size: 17px; transform: rotate(-25deg); }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: #33495c; background: transparent; font-size: 10px; }
.search-box input:focus { box-shadow: none; }
.button-outline { min-height: 36px; color: var(--text-primary); background: var(--surface); }
.button-outline span { color: var(--accent-text); font-size: 18px; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; min-width: 930px; border-collapse: collapse; text-align: left; }
thead { background: var(--section-bg); }
th, td { padding: 8px 12px; border: 1px solid var(--border); white-space: nowrap; }
th { color: var(--text-primary); background: var(--section-bg); font-size: 13px; line-height: 20px; font-weight: 600; }
td { color: var(--text-primary); font-size: 13px; line-height: 20px; }
.sort-button { padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.sort-button::after { margin-left: 4px; color: var(--text-secondary); content: "↕"; font-size: 11px; }
.voucher-code { color: var(--accent-text); font-weight: 600; }
tbody tr { transition: background .15s; }tbody tr:hover { background: var(--hover-bg); }
td:first-child { color: var(--text-secondary); }td a { color: var(--accent-text); font-weight: 600; text-decoration: none; }td a:hover { text-decoration: underline; }
.number-cell { text-align: right; font-variant-numeric: tabular-nums; }
.status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.status-complete, .status-completed, .status-reconciled { color: var(--text-primary); background: var(--section-bg); }.status-pending { border: 1px solid var(--control-border); color: var(--text-primary); background: var(--surface); }
.row-menu { width: 28px; height: 28px; border: 0; border-radius: 4px; color: var(--text-secondary); background: transparent; font-size: 17px; cursor: pointer; }.row-menu:hover { color: var(--accent-text); background: var(--hover-bg); }
.row-action-cell { position: relative; width: 44px; }
.row-action-menu { position: fixed; z-index: 20; width: 184px; padding: 4px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); box-shadow: 0 8px 24px #17171720; }
.row-action-menu button { display: block; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 3px; color: var(--text-primary); background: transparent; text-align: left; font-size: 13px; cursor: pointer; }
.row-action-menu button:hover, .row-action-menu button:focus-visible { outline: none; background: var(--hover-bg); }
.transaction-details-dialog { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 680px); padding: 0; border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); background: var(--surface); }
.transaction-details-dialog::backdrop { background: #17171766; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--section-bg); }
.dialog-close { width: 32px; height: 32px; border: 1px solid var(--control-border); border-radius: 4px; color: var(--text-primary); background: var(--surface); font-size: 20px; cursor: pointer; }
.transaction-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 16px; }
.transaction-detail-grid > div { min-width: 0; }
.transaction-detail-grid dt { margin-bottom: 3px; color: var(--text-secondary); font-size: 12px; }
.transaction-detail-grid dd { margin: 0; overflow-wrap: anywhere; color: var(--text-primary); font-size: 14px; font-weight: 500; }
.transaction-detail-grid > div:nth-child(5) { grid-column: 1 / -1; }
.journal-detail-table-wrap { max-height: 260px; overflow: auto; padding: 0 16px 14px; }
.journal-detail-table { width: 100%; min-width: 0; table-layout: fixed; }
.journal-detail-table th, .journal-detail-table td { padding: 7px 8px; white-space: normal; overflow-wrap: anywhere; }
.journal-detail-table th:first-child { width: 27%; }
.journal-detail-table th:nth-child(2) { width: 31%; }
.journal-detail-table th:nth-child(3), .journal-detail-table th:nth-child(4) { width: 21%; }
.journal-detail-table td.number-cell, .journal-detail-table th.number-cell { text-align: right; font-variant-numeric: tabular-nums; }
.journal-detail-table tfoot th, .journal-detail-table tfoot td { background: var(--section-bg); font-weight: 700; }
.dialog-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--divider); color: var(--text-secondary); font-size: 12px; }
@media (max-width: 520px) { .transaction-detail-grid { grid-template-columns: 1fr; }.transaction-detail-grid > div:nth-child(5) { grid-column: auto; } }
.empty-state { padding: 38px 12px; color: #768697; text-align: center; font-size: 11px; }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; color: var(--text-secondary); font-size: 12px; }
.pagination { display: flex; align-items: center; gap: 5px; }
.pagination > button { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--control-border); border-radius: 4px; color: var(--text-primary); background: var(--surface); font-size: 14px; cursor: pointer; }.pagination > button:hover { border-color: var(--accent); color: var(--accent-text); }
.pagination > button:disabled { border-color: var(--divider); color: var(--disabled-text); background: var(--disabled-bg); cursor: not-allowed; }
.pagination > .page-current, .page-number { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--primary-bg); border-radius: 4px; color: var(--primary-text); background: var(--primary-bg); font-size: 13px; font-weight: 600; }
.filter-bar.account-filter-bar { grid-template-columns: minmax(240px, 1.5fr) 1fr 1fr auto; }
.account-list-panel table { min-width: 850px; }
.account-row.account-header td { background: #f5f5f5; font-weight: 700; }
.account-row.account-group td { background: #fafafa; font-weight: 600; }
.account-name { display: flex; align-items: center; gap: 7px; padding-left: calc(var(--depth) * 20px); }
.account-toggle { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border: 1px solid var(--control-border); border-radius: 3px; color: var(--text-primary); background: var(--surface); font-size: 16px; cursor: pointer; }
.account-leaf { display: grid; width: 24px; flex: 0 0 24px; place-items: center; color: var(--text-secondary); }
.status-active, .status-posted { color: var(--text-primary); background: var(--section-bg); }
.status-checked { border: 1px solid var(--accent); color: var(--text-primary); background: var(--surface); }
.profile-summary { cursor: default; }
.profile-name small { display: block; color: var(--text-secondary); font-size: 11px; font-weight: 400; }
.topbar-actions form { margin: 0; }
.login-shell { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: var(--section-bg); }
.login-card { width: min(400px, 100%); }
.login-card .brand { margin-bottom: 18px; justify-content: center; text-decoration: none; }
.login-form { display: grid; gap: 14px; padding: 20px; }
.login-form .button { width: 100%; min-height: 40px; }
.status-draft, .status-inactive { border: 1px dashed var(--control-border); color: var(--text-secondary); background: var(--surface); }
.flash-message { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-primary); background: var(--section-bg); font-size: 13px; }
.flash-message ul { margin: 0; padding-left: 18px; }
.flash-error { border-color: #f1b7b7; color: var(--error-text); background: var(--error-bg); }
.row-action-menu form { margin: 0; }
.row-action-menu a { display: flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 3px; color: var(--text-primary); font-size: 13px; font-weight: 400; text-decoration: none; }
.row-action-menu a:hover, .row-action-menu a:focus-visible { outline: none; background: var(--hover-bg); text-decoration: none; }
.status-cancelled { border: 1px solid #f1b7b7; color: var(--error-text); background: var(--error-bg); text-decoration: line-through; }
.table-input { width: 100%; min-width: 120px; height: 32px; padding: 0 8px; border: 1px solid var(--control-border); border-radius: 4px; color: var(--text-primary); background: var(--surface); font: inherit; font-size: 13px; }
.account-alias { color: var(--text-secondary); font-size: 12px; font-weight: 400; }
.report-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
a.button { text-decoration: none; }
.heading-title-row { flex-wrap: wrap; row-gap: 8px; }
.heading-actions { display: flex; align-items: center; margin-left: auto; }
.heading-actions .button { height: 36px; min-height: 36px; font-size: 13px; text-decoration: none; }
.calendar-switch { display: inline-flex; overflow: hidden; border: 1px solid var(--control-border); border-radius: 5px; }
.calendar-switch button { height: 30px; padding: 0 10px; border: 0; color: var(--text-secondary); background: var(--surface); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.calendar-switch button.is-active { color: var(--primary-text); background: var(--primary-bg); }
.bs-date-field { position: relative; display: block; width: 100%; font-weight: 400; }
.bs-date-field input, .form-field .bs-date-field input { display: block; width: 100%; padding-right: 40px; font-variant-numeric: tabular-nums; }
.bs-date-button { position: absolute; top: 1px; right: 1px; bottom: 1px; display: grid; width: 36px; place-items: center; padding: 0; border: 0; border-left: 1px solid var(--divider); border-radius: 0 3px 3px 0; color: var(--text-secondary); background: transparent; font-size: 15px; line-height: 1; cursor: pointer; }
.bs-date-button:hover, .bs-date-button[aria-expanded="true"] { color: var(--accent-text); background: var(--hover-bg); }
.bs-date-popup { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 252px; padding: 8px; border: 1px solid var(--border); border-radius: 5px; color: var(--text-primary); background: var(--surface); box-shadow: 0 8px 24px #17171720; }
.bs-date-popup-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.bs-date-popup-header button { width: 28px; height: 28px; border: 1px solid var(--control-border); border-radius: 4px; color: var(--text-primary); background: var(--surface); cursor: pointer; }
.bs-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 12px; }
.bs-date-grid > span { padding: 4px 0; color: var(--text-secondary); font-weight: 600; }
.bs-date-grid button { height: 30px; border: 0; border-radius: 4px; color: var(--text-primary); background: transparent; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.bs-date-grid button:hover { background: var(--hover-bg); }
.bs-date-grid button.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.bs-date-grid button.is-selected { color: var(--primary-text); background: var(--primary-bg); }
.report-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 14px; color: var(--text-secondary); font-size: 12px; }
.report-header > div { display: grid; gap: 2px; }
.report-company { color: var(--text-primary); font-size: 16px; }
.report-title { color: var(--text-primary); font-size: 13px; font-weight: 600; }
.report-balance-status { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 10px; font-size: 13px; }
.bill-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--divider); border-radius: 3px; color: var(--text-secondary); font-size: 11px; }
.section-note { color: var(--text-secondary); font-size: 12px; }
.bill-fields { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bill-fields[hidden] { display: none; }
.journal-line .bill-fields select, .journal-line .bill-fields input { flex: 1 1 110px; width: auto; min-height: 30px; font-size: 12px; }
.page-size select { min-width: 72px; }
.page-number[data-page-number] { width: auto; min-width: 32px; padding: 0 8px; white-space: nowrap; }
.report-panel + .report-panel { margin-top: 12px; }
.report-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.report-toolbar .filter-search-control { flex: 1 1 260px; max-width: 420px; margin-left: auto; }
.report-toolbar .button { height: 36px; min-height: 36px; font-size: 13px; }
.summary-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.summary-card { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.summary-card span { color: var(--text-secondary); font-size: 12px; }
.summary-card strong { color: var(--text-primary); font-size: 17px; font-variant-numeric: tabular-nums; }
.summary-card.is-warning { border-color: var(--accent); }
.summary-card.is-warning strong { color: var(--accent-text); }
.summary-card.is-result { background: var(--section-bg); }
.equation-cards { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; }
.equation-sign { color: var(--text-secondary); font-size: 20px; font-weight: 600; }
.aging-detail-row td { color: var(--text-secondary); font-size: 12px; }
@media (max-width: 760px) { .summary-cards, .equation-cards { grid-template-columns: 1fr; }.equation-sign { text-align: center; } }
.report-note { padding: 8px 14px; border-bottom: 1px solid var(--divider); color: var(--text-secondary); font-size: 12px; }
.print-only { display: none !important; }
@media (max-width: 760px) { .report-actions { justify-content: flex-start; } }
@media print {
  .report-header.print-only { display: flex !important; }
  .sidebar, .topbar, .heading-actions, .report-filter-toolbar, .report-toolbar, .pagination, .breadcrumbs, .toast, .flash-message, .demo-badge { display: none !important; }
  .main-area { margin-left: 0 !important; }
  .page-content { padding: 0 !important; }
  .table-wrap { overflow: visible !important; }
  .report-panel a { color: inherit; text-decoration: none; }
}
.report-difference-row th, .report-difference-row td { color: var(--error-text); background: var(--error-bg); font-weight: 700; }
.form-field-wide { grid-column: 1 / -1; }
.form-field textarea { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--control-border); border-radius: 4px; color: var(--text-primary); background: var(--surface); font: inherit; font-size: 13px; resize: vertical; }
.checkbox-field { display: flex; align-items: center; gap: 8px; align-self: end; min-height: 40px; font-size: 13px; }
.button:disabled { border-color: var(--divider); color: var(--disabled-text); background: var(--disabled-bg); cursor: not-allowed; }
@media (max-width: 1180px) { .filter-bar.account-filter-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .filter-bar.account-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }.account-filter-bar .filter-search { grid-column: span 2; } }
.journal-panel { margin-bottom: 14px; }
.section-band { min-height: 40px; border-bottom: 1px solid #e7d7c7; background: var(--section-bg); }
.section-band > span { color: var(--text-secondary); font-size: 12px; }
.voucher-details-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.form-field, .narration-field, .attachment-field { display: grid; min-width: 0; gap: 6px; }
.form-field > span, .narration-field > span, .attachment-field > span:first-child { color: var(--text-primary); font-size: 12px; line-height: 18px; font-weight: 500; }
.form-field b, .journal-table th b { color: var(--error-text); font-weight: 600; }
.form-field input, .form-field select, .narration-field textarea, .journal-line input, .journal-line select { width: 100%; min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid var(--control-border); border-radius: 4px; color: var(--text-primary); background: var(--surface); font: inherit; font-size: 13px; }
.form-field input[readonly] { border-color: var(--divider); color: var(--text-secondary); background: var(--disabled-bg); }
.journal-table { min-width: 980px; }
.journal-table th:first-child, .journal-row-number { width: 40px; text-align: center; }
.journal-table td { padding: 4px; }
.journal-line input, .journal-line select { min-height: 36px; }
.journal-line .number-cell { text-align: right; font-variant-numeric: tabular-nums; }
.journal-line.has-error input, .journal-line.has-error select { border-color: var(--error-text); }
.line-error { display: block; max-width: 170px; color: var(--error-text); font-size: 11px; line-height: 15px; }
.journal-total-row th, .journal-total-row td { border-color: var(--border); background: var(--section-bg); font-weight: 700; }
.journal-tools { padding: 10px 12px 0; }
.button-add-row { min-height: 40px; border-color: var(--accent); color: var(--text-primary); background: var(--surface); }
.button-add-row span { color: var(--accent-text); font-size: 18px; }
.journal-balance-summary { display: flex; min-height: 44px; align-items: center; justify-content: flex-end; gap: 20px; padding: 8px 12px; color: var(--text-primary); font-size: 13px; }
.journal-balance-status { min-width: 110px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); background: var(--disabled-bg); text-align: center; font-weight: 600; }
.journal-balance-status.is-balanced { border-color: #d7c5b4; color: var(--text-primary); background: var(--section-bg); }
.journal-balance-status.is-invalid { border-color: #f1b7b7; color: var(--error-text); background: var(--error-bg); }
.journal-support-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin-bottom: 14px; }
.narration-field, .attachment-field { padding: 12px; }
.narration-field textarea { min-height: 96px; padding: 9px 10px; resize: vertical; }
.attachment-field input[type="file"] { width: 100%; min-height: 40px; color: var(--text-secondary); font-size: 12px; }
.attachment-field > span:last-child { color: var(--text-secondary); font-size: 12px; overflow-wrap: anywhere; }
.journal-demo-note { margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); background: var(--disabled-bg); font-size: 12px; }
.journal-action-footer { position: sticky; z-index: 4; bottom: 0; display: flex; align-items: center; gap: 10px; margin: 0 -24px; padding: 12px 24px; border-top: 1px solid var(--divider); background: #fffffffa; }
.journal-footer-spacer { flex: 1; }
@media (max-width: 1180px) { .voucher-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .voucher-details-grid { grid-template-columns: 1fr; padding: 12px; }.journal-support-grid { grid-template-columns: 1fr; }.journal-action-footer { flex-wrap: wrap; margin: 0 -12px; padding: 10px 12px; }.journal-footer-spacer { display: none; }.journal-action-footer .button { flex: 1; min-width: 125px; }.journal-balance-summary { justify-content: space-between; gap: 8px; }.journal-balance-status { min-width: 95px; } }
.page-size { display: flex; align-items: center; gap: 6px; margin-right: 10px; }.page-size span { color: var(--text-secondary); }.page-size select { width: 64px; height: 36px; padding-left: 8px; font-size: 12px; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chart-panel { min-height: 297px; padding-bottom: 12px; }
.chart-heading { padding-bottom: 8px; }.chart-heading select { width: auto; min-width: 106px; height: 36px; padding-left: 9px; font-size: 12px; }
.chart-legend { display: flex; gap: 16px; padding: 0 18px 8px; color: var(--text-secondary); font-size: 12px; }.chart-legend span { display: flex; align-items: center; gap: 6px; }.chart-legend i { width: 7px; height: 7px; border-radius: 50%; }.legend-teal { background: var(--accent); }.legend-blue { background: var(--text-primary); }.legend-coral { background: var(--text-secondary); }
.line-chart { position: relative; height: 197px; margin: 0 15px 0 13px; padding: 4px 0 19px 39px; }
.line-chart svg { width: 100%; height: 158px; overflow: visible; }
.chart-y-labels, .bar-y-labels { position: absolute; inset: 0 auto 23px 0; display: flex; flex-direction: column; justify-content: space-between; color: var(--text-secondary); font-size: 11px; }
.gridline { fill: none; stroke: var(--divider); stroke-dasharray: 3 4; stroke-width: 1; }.cash-in-area { fill: var(--section-bg); opacity: .9; }.cash-in-line, .cash-out-line { fill: none; stroke-width: 2.3; stroke-linejoin: round; stroke-linecap: round; }.cash-in-line { stroke: var(--accent); }.cash-out-line { stroke: var(--text-primary); }
.chart-x-labels { position: absolute; right: 0; bottom: 3px; left: 39px; display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 11px; }
.bar-chart { position: relative; height: 197px; margin: 0 15px 0 13px; padding: 7px 3px 21px 39px; }.bar-y-labels { bottom: 25px; }
.bar-plot { position: relative; display: flex; height: 169px; align-items: end; justify-content: space-around; }
.bar-gridlines { position: absolute; inset: 0 0 19px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }.bar-gridlines i { border-top: 1px dashed var(--divider); }
.bar-pair { position: relative; z-index: 1; display: flex; width: 6.5%; height: 100%; align-items: end; justify-content: center; gap: 3px; padding-bottom: 20px; }.bar-pair i, .bar-pair b { display: block; width: 8px; height: var(--bar); border-radius: 2px 2px 0 0; animation: bar-rise .8s both; transform-origin: bottom; }.bar-pair i { background: var(--accent); }.bar-pair b { background: var(--text-secondary); animation-delay: .08s; }.bar-pair span { position: absolute; bottom: 2px; color: var(--text-secondary); font-size: 10px; }
.page-footer { display: flex; justify-content: space-between; margin-top: 18px; padding: 0 2px; color: #94a0aa; font-size: 9px; }
.toast { position: fixed; z-index: 30; right: 24px; bottom: 24px; padding: 12px 16px; border: 1px solid #f2c49f; border-radius: 5px; color: #98440d; background: #fff6ee; box-shadow: 0 10px 30px #34261a1a; font-size: 11px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; }.toast.is-visible { opacity: 1; transform: translateY(0); }
.sidebar-collapsed .sidebar { width: 74px; padding-right: 10px; padding-left: 10px; }.sidebar-collapsed .main-area { margin-left: 74px; }.sidebar-collapsed .brand { justify-content: center; padding: 0; }.sidebar-collapsed .brand-name, .sidebar-collapsed .nav-item > span:last-child, .sidebar-collapsed .workspace-tag span:not(.workspace-dot), .sidebar-collapsed .collapse-button span:last-child { display: none; }.sidebar-collapsed .primary-nav { margin-top: 50px; }.sidebar-collapsed .nav-item { justify-content: center; padding: 0; }.sidebar-collapsed .nav-item.is-active::before { left: -10px; }.sidebar-collapsed .workspace-tag { justify-content: center; padding: 12px 5px; }.sidebar-collapsed .collapse-button { justify-content: center; }.sidebar-collapsed .collapse-button span:first-child { transform: rotate(180deg); }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bar-rise { from { transform: scaleY(.1); opacity: .3; } to { transform: scaleY(1); opacity: 1; } }

@media (min-width: 1500px) { .page-content { padding-right: 48px; padding-left: 48px; }.metric-card { min-height: 145px; padding: 20px; }.metric-value { font-size: 26px; }.chart-panel { min-height: 320px; }.line-chart, .bar-chart { height: 218px; }.line-chart svg { height: 178px; }.bar-plot { height: 190px; } }
@media (max-width: 1180px) { .sidebar { width: clamp(115px, 15vw, 210px); padding-right: 8px; padding-left: 8px; }.main-area { margin-left: clamp(115px, 15vw, 210px); }.brand { gap: 6px; padding: 0 2px; }.brand-mark { width: 22px; flex-shrink: 0; }.brand-mark i { width: 4px; }.brand-name { font-size: 15px; }.nav-item { gap: 8px; padding: 0 7px; font-size: 10px; }.nav-icon { width: 16px; font-size: 17px; }.workspace-tag { display: none; }.collapse-button { gap: 6px; padding: 8px 4px; font-size: 10px; }.topbar { padding-right: 12px; padding-left: 12px; }.page-content { padding-right: 12px; padding-left: 12px; }.filter-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }.filter-search { grid-column: auto; }.button-filter { grid-column: 4; grid-row: 2; }.button-quiet { grid-column: 5; grid-row: 2; }.metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }.metric-card { min-height: 122px; padding: 12px; }.metric-value { font-size: 18px; }.metric-value span { font-size: 12px; }.metric-foot { flex-wrap: wrap; gap: 4px; font-size: 8px; }.metric-spark { width: 66px; } }
@media (max-width: 760px) { .sidebar { width: 238px; transform: translateX(-100%); }.sidebar.mobile-open { transform: translateX(0); box-shadow: 18px 0 36px #33261b30; }.brand { gap: 10px; padding: 0 8px; }.brand-mark { width: 27px; }.brand-mark i { width: 5px; }.brand-name { font-size: 18px; }.nav-item { gap: 13px; padding: 0 12px; font-size: 12px; }.nav-icon { width: 18px; font-size: 19px; }.main-area, .sidebar-collapsed .main-area { margin-left: 0; }.topbar { height: 58px; gap: 8px; padding: 0 10px; }.mobile-menu { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 0; border-radius: 5px; color: #34383d; background: transparent; font-size: 17px; }.topbar-search { width: auto; min-width: 0; flex: 1; gap: 5px; padding: 0 7px; }.topbar-search kbd { display: none; }.topbar-search input { font-size: 10px; }.fiscal-year { display: none; }.topbar-actions { gap: 3px; margin-left: 0; }.page-content { padding: 12px 12px 18px; }.page-heading h1 { font-size: 20px; }.filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }.filter-search { grid-column: span 2; }.button-filter, .button-quiet { grid-column: auto; grid-row: auto; }.button-filter { min-width: 0; }.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.metric-card { min-height: 120px; padding: 13px; }.metric-value { font-size: 19px; }.metric-value span { font-size: 12px; }.metric-foot { flex-wrap: wrap; gap: 3px 5px; font-size: 8px; }.panel-heading { padding: 10px 12px; }.table-footer { align-items: flex-start; flex-direction: column; }.pagination { width: 100%; justify-content: flex-end; }.page-size { margin-right: auto; }.chart-grid { grid-template-columns: 1fr; gap: 12px; }.chart-panel { min-height: 285px; }.line-chart, .bar-chart { height: 190px; }.line-chart svg { height: 151px; }.bar-plot { height: 163px; } }
@media (max-width: 420px) { .page-content { padding-right: 12px; padding-left: 12px; }.metric-grid { gap: 8px; }.metric-card { padding: 11px; }.metric-label { font-size: 10px; }.metric-icon { width: 24px; height: 24px; }.metric-value { font-size: 17px; }.metric-value span { font-size: 11px; }.metric-spark { width: 66px; }.filter-bar { gap: 8px; padding: 10px; }.filter-field select { padding-left: 7px; font-size: 9px; }.filter-field > span { font-size: 9px; }.filter-search-control input { font-size: 9px; }.button-filter, .button-quiet { padding: 0 7px; font-size: 10px; }.profile-button { padding: 3px; }.chart-panel { min-height: 270px; }.chart-heading { flex-direction: row; align-items: center; }.chart-heading select { min-width: 90px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ==========================================================================
   Report pages: compact shared layout.
   Everything here is scoped to .report-page (set by each report view) so the
   rest of the app keeps its own spacing. Sizes come from the tokens below.
   ========================================================================== */
.report-page {
  --report-control-height: 36px;
  --report-gap: 10px;
  --report-text: 13px;
  --report-label: 12px;
  padding: 16px;
}
.report-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Header: breadcrumb, then title + currency badge + export actions on one row. */
.report-page .page-heading { gap: 4px; margin-bottom: var(--report-gap); }
.report-page .breadcrumbs { align-items: center; font-size: 12px; line-height: 18px; }
.report-switcher { height: 22px; max-width: 100%; padding: 0 20px 0 6px; border: 1px solid var(--control-border); border-radius: 4px; color: var(--text-primary); background-color: var(--surface); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.report-page .page-heading h1 { font: 700 24px/32px Inter, system-ui, sans-serif; }
.report-page .heading-actions .button { height: var(--report-control-height); min-height: var(--report-control-height); }
.report-page .flash-message { margin-bottom: var(--report-gap); }

/* Filter toolbar: one bordered row of labelled controls, collapsible to a summary. */
.report-filter-toolbar { margin-bottom: var(--report-gap); border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.report-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0; padding: 8px 12px; border: 0; background: transparent; }
.report-filter-bar[hidden], .report-filter-summary[hidden] { display: none; }
.report-filter-bar .filter-field { flex: 1 1 124px; min-width: 124px; max-width: 200px; gap: 4px; }
.report-filter-bar .filter-field.is-wide { flex-grow: 6; max-width: 280px; }
.report-filter-bar .filter-field.is-date { flex-basis: 132px; min-width: 132px; max-width: 180px; }
.report-filter-bar .filter-field > span:first-child { font-size: var(--report-label); line-height: 18px; white-space: nowrap; }
.report-filter-bar .filter-field select,
.report-filter-bar .filter-field input { width: 100%; height: var(--report-control-height); padding: 0 10px; border: 1px solid var(--control-border); border-radius: 5px; color: var(--text-primary); background-color: var(--surface); font: inherit; font-size: var(--report-text); }
.report-filter-bar .filter-field select { padding: 0 2px 0 8px; }
.report-filter-bar .filter-field .bs-date-field input { padding-right: 38px; }
.report-filter-bar .checkbox-field { height: var(--report-control-height); min-height: var(--report-control-height); align-self: flex-end; font-size: var(--report-text); white-space: nowrap; }
.report-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.report-filter-bar .button, .report-filter-summary .button { height: var(--report-control-height); min-height: var(--report-control-height); font-size: var(--report-text); }
.report-filter-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 44px; padding: 4px 12px; color: var(--text-primary); font-size: var(--report-text); }
.report-filter-summary [data-filters-summary-text] { flex: 1 1 240px; min-width: 0; }
.report-filter-dirty { padding: 2px 8px; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent-text); background: var(--section-bg); font-size: var(--report-label); font-weight: 600; white-space: nowrap; }
.report-filter-dirty[hidden] { display: none; }
.report-page .breadcrumbs a { color: inherit; text-decoration: none; }
.report-page .breadcrumbs a:hover { color: var(--accent-text); text-decoration: underline; }
.report-directory { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--report-gap); align-items: start; }
.report-page .report-directory .report-panel + .report-panel { margin-top: 0; }
.report-directory-list { margin: 0; padding: 4px 0; list-style: none; }
.report-directory-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 6px 14px; color: var(--text-primary); font-size: 14px; font-weight: 500; text-decoration: none; }
.report-directory-list a:hover, .report-directory-list a:focus-visible { color: var(--accent-text); background: var(--hover-bg); }
.report-directory-list li + li { border-top: 1px solid var(--divider); }
.report-page tr.is-selected-row td { background: var(--hover-bg); font-weight: 600; }
.exception-count { color: var(--accent-text); border: 1px solid var(--accent); background: var(--section-bg); }
.report-filter-collapse { width: var(--report-control-height); min-width: var(--report-control-height); padding: 0; font-size: 16px; }

/* Report body: table starts one gap below the toolbar; rows are 32-36px and grow when text wraps. */
.report-page .report-panel + .report-panel { margin-top: var(--report-gap); }
.report-page table { min-width: 720px; }
.report-page th, .report-page td { padding: 6px 10px; border: 1px solid var(--border); font-size: var(--report-text); line-height: 20px; white-space: normal; overflow-wrap: break-word; }
.report-page td:first-child, .report-page .number-cell, .report-page .voucher-code { white-space: nowrap; overflow-wrap: normal; }
.report-page .number-cell { text-align: right; font-variant-numeric: tabular-nums; }
.report-page .account-toggle { width: 20px; height: 20px; flex-basis: 20px; font-size: 14px; }
.report-page .account-leaf { width: 20px; flex-basis: 20px; }
.report-page .panel-heading { min-height: var(--report-control-height); padding: 6px 12px; }
.report-page .panel-heading h2 { font-size: 15px; }
.report-page .report-toolbar { padding: 6px 12px; }
.report-page .report-toolbar .filter-search-control { height: var(--report-control-height); }
.report-page .table-footer { padding: 8px 12px; }
.report-page .report-balance-status { margin-top: var(--report-gap); }
.report-page .summary-cards { gap: 8px; padding: 8px 12px; }
.report-page .summary-card { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 6px 12px; }
.report-page .summary-card strong { font-size: 15px; }

@media (max-width: 760px) {
  .report-filter-bar .filter-field, .report-filter-bar .filter-field.is-date { flex: 1 1 calc(50% - 6px); max-width: none; }
  .report-filter-actions { flex: 1 1 100%; margin-left: 0; }
  .report-page .summary-cards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .report-filter-bar .filter-field, .report-filter-bar .filter-field.is-date { flex-basis: 100%; }
  .report-page .heading-actions { margin-left: 0; }
}
@media print {
  .report-page thead { display: table-header-group; }
  .report-page tr { break-inside: avoid; }
  .report-page .report-panel { border: 0; }
  html, body, .main-area, .report-page { background: #fff !important; }
  .report-page .summary-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-page .equation-cards { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; }
  .report-page td a { color: inherit; font-weight: inherit; }
}
.report-page td a + a { margin-left: 10px; }

/* ==========================================================================
   Voucher entry page: compact chrome so the ledger entries are the focus.
   Scoped to .voucher-page; sizes come from the tokens below.
   ========================================================================== */
.voucher-page {
  --voucher-control-height: 36px;
  --voucher-gap: 10px;
  padding: 16px 16px 0;
}
.voucher-page .page-heading { gap: 4px; margin-bottom: var(--voucher-gap); }
.voucher-page .breadcrumbs { font-size: 12px; line-height: 18px; }
.voucher-page .page-heading h1 { font: 700 24px/32px Inter, system-ui, sans-serif; }
.voucher-page .journal-panel { margin-bottom: var(--voucher-gap); }

/* Voucher details: one row of six fields. */
.voucher-page .voucher-details-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 12px; padding: 8px 12px 10px; }
.voucher-page .form-field, .voucher-page .narration-field, .voucher-page .attachment-field { gap: 4px; }
.voucher-page .form-field > span { white-space: nowrap; }
.voucher-page .form-field input, .voucher-page .form-field select { height: var(--voucher-control-height); min-height: var(--voucher-control-height); }

/* Ledger entries: the working area, marked out with the accent colour. */
.voucher-page .ledger-panel { border-color: var(--accent); border-top-width: 3px; }
.voucher-page .ledger-panel .section-band { min-height: 40px; padding: 4px 12px; }
.voucher-page .ledger-panel .section-band h2 { font-size: 16px; }
.voucher-page .journal-balance-summary { flex-wrap: wrap; min-height: 0; gap: 4px 16px; padding: 0; }
.voucher-page .journal-balance-summary > span:first-child { color: var(--text-secondary); font-size: 12px; }
.voucher-page .journal-balance-status { min-width: 96px; padding: 3px 10px; font-size: 12px; }
.voucher-page .journal-line input, .voucher-page .journal-line select { font-size: 14px; }
.voucher-page .journal-line .bill-fields select, .voucher-page .journal-line .bill-fields input { font-size: 12px; }
.voucher-page .journal-tools { padding: 8px 12px; }
.voucher-page .button-add-row { height: 34px; min-height: 34px; font-size: 13px; }

/* Narration and documents share one short row. */
.voucher-notes { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; padding: 8px 12px 10px; }
.voucher-page .narration-field, .voucher-page .attachment-field { padding: 0; }
.voucher-page .narration-field textarea { height: 52px; min-height: 52px; padding: 6px 10px; }
.voucher-page .attachment-field input[type="file"] { min-height: 28px; }

/* Footer: actions with the hint beside them instead of in its own box. */
.voucher-page .journal-action-footer { margin: 0 -16px; padding: 8px 16px; }
.voucher-page .journal-action-footer .button { height: var(--voucher-control-height); min-height: var(--voucher-control-height); font-size: 13px; }
.voucher-page .journal-demo-note { flex: 1; min-width: 0; margin: 0; padding: 0 4px; border: 0; background: transparent; font-size: 12px; }

@media (max-width: 1180px) { .voucher-page .voucher-details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .voucher-page .voucher-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voucher-notes { grid-template-columns: 1fr; }
  .voucher-page .journal-action-footer { flex-wrap: wrap; margin: 0 -16px; }
  .voucher-page .journal-demo-note { flex: 1 1 100%; order: 3; }
}
.voucher-page .journal-table th:nth-child(2) { width: 24%; }
.voucher-page .journal-table th:nth-child(4), .voucher-page .journal-table th:nth-child(5) { width: 14%; }
.voucher-page .journal-table th:nth-child(6) { width: 150px; }
.voucher-page .journal-table td:last-child { white-space: normal; }
.voucher-page .line-error { max-width: none; white-space: normal; }

/* Bill details: a summary button on the voucher line and the dialog it opens. */
.voucher-page .bill-summary { min-height: 26px; padding: 2px 10px; border: 1px solid var(--control-border); border-radius: 4px; color: var(--text-primary); background: var(--section-bg); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.voucher-page .bill-summary:hover { border-color: var(--accent); }
.voucher-page .bill-summary.is-missing { border-color: #f1b7b7; color: var(--error-text); background: var(--error-bg); }
.bill-dialog { width: min(420px, calc(100vw - 32px)); }
.bill-dialog-body { display: grid; gap: 10px; padding: 14px 16px; }
.bill-dialog-ledger { font-size: 14px; }
.bill-dialog .form-field[hidden], .bill-open-list[hidden] { display: none; }
.bill-dialog .form-field input, .bill-dialog .form-field select { height: 36px; min-height: 36px; }
.bill-open-list { display: grid; gap: 6px; }
.bill-open-list > span { color: var(--text-secondary); font-size: 12px; font-weight: 500; }
.bill-open-list > div { display: flex; flex-wrap: wrap; gap: 6px; max-height: 132px; overflow-y: auto; }
.bill-open-item { padding: 4px 10px; border: 1px solid var(--control-border); border-radius: 4px; color: var(--text-primary); background: var(--surface); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
.bill-open-item:hover, .bill-open-item:focus-visible { border-color: var(--accent); background: var(--hover-bg); }
.bill-dialog .flash-message { margin: 0; }
.bill-dialog .dialog-footer { justify-content: flex-end; gap: 8px; }
.voucher-page .journal-demo-note:empty { visibility: hidden; }
.voucher-page .journal-demo-note { color: var(--error-text); font-weight: 600; }

/* Type-ahead ledger picker. */
.ledger-picker { position: relative; display: block; width: 100%; }
.ledger-picker [data-picker-input] { display: block; width: 100%; }
.ledger-picker-list { position: fixed; z-index: 40; display: grid; max-height: 280px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); box-shadow: 0 8px 24px #17171720; }
.ledger-picker-list[hidden] { display: none; }
.ledger-picker-option { min-height: 32px; padding: 4px 10px; border: 0; border-radius: 3px; color: var(--text-primary); background: transparent; font: inherit; font-size: 13px; font-weight: 400; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ledger-picker-option:hover, .ledger-picker-option.is-active { background: var(--section-bg); }
.ledger-picker-note { padding: 6px 10px; color: var(--text-secondary); font-size: 12px; font-weight: 400; }

/* Stock purchase and sales entry */
.form-field-double { grid-column: span 2; }
.voucher-page .stock-table th:nth-child(3) { width: 80px; }
.voucher-page .stock-table th:nth-child(4), .voucher-page .stock-table th:nth-child(5), .voucher-page .stock-table th:nth-child(6) { width: 14%; }
.voucher-page .stock-table th:nth-child(7) { width: 150px; }
.stock-table .line-unit { color: var(--text-secondary); font-size: 13px; padding-left: 10px; }
.stock-table .line-amount { padding-right: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .form-field-double { grid-column: auto; } }

/* Assembly / manufacturing voucher */
.form-field-triple { grid-column: span 3; }
.form-readout { display: flex; align-items: center; min-height: 36px; padding: 0 10px; border: 1px solid var(--divider); border-radius: 4px; color: var(--text-secondary); background: var(--hover-bg); font-size: 13px; }
.voucher-page .journal-table.component-table th:nth-child(3) { width: 70px; }
.voucher-page .journal-table.component-table th:nth-child(4), .voucher-page .journal-table.component-table th:nth-child(5), .voucher-page .journal-table.component-table th:nth-child(6) { width: 12%; }
.voucher-page .journal-table.component-table th:nth-child(7) { width: 14%; }
.voucher-page .journal-table.component-table th:nth-child(8) { width: 150px; }
.voucher-page .journal-table.cost-table th:nth-child(2) { width: 32%; }
.voucher-page .journal-table.cost-table th:nth-child(4) { width: 16%; }
.voucher-page .journal-table.cost-table th:nth-child(5) { width: 150px; }
.component-table .line-unit, .component-table .line-on-hand, .component-table .line-rate { color: var(--text-secondary); font-size: 13px; padding: 4px 12px; font-variant-numeric: tabular-nums; }
.component-table .line-amount { padding-right: 12px; font-variant-numeric: tabular-nums; }
.voucher-page .assembly-cost-tools { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.assembly-cost-tools .form-field { width: min(420px, 100%); }
.cost-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.cost-summary > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-left: 1px solid var(--divider); }
.cost-summary > div:first-child { border-left: 0; }
.cost-summary dt { color: var(--text-secondary); font-size: 12px; }
.cost-summary dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cost-summary .is-total dd { font-size: 17px; font-weight: 700; }
@media (max-width: 760px) { .form-field-triple { grid-column: auto; } .cost-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .voucher-page .assembly-cost-tools { flex-direction: column; align-items: stretch; } }
/* Settings: read-only facts above the links of a section */
.settings-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--divider); }
.settings-facts > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 14px; }
.settings-facts dt { color: var(--text-secondary); font-size: 12px; }
.settings-facts dd { margin: 0; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
/* Top bar search results */
.topbar-search { position: relative; }
.topbar-search > .global-search-list { transform: none; font-size: 13px; }
.global-search-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); box-shadow: 0 8px 24px #17171720; }
.global-search-list[hidden] { display: none; }
.global-search-group { padding: 6px 10px 2px; color: var(--text-secondary); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.global-search-list a { padding: 6px 10px; overflow: hidden; border-radius: 3px; color: var(--text-primary); font-size: 13px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.global-search-list a:hover, .global-search-list a.is-active { background: var(--hover-bg); }
a.icon-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
form.fiscal-year { margin: 0; }

/* Supporting documents on a voucher */
.attachment-existing { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; grid-column: 1 / -1; font-size: 13px; }
.attachment-existing > span { color: var(--text-secondary); }
.attachment-existing .checkbox-field { min-height: 28px; }
.transaction-attachments { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 16px 0; font-size: 13px; }
.transaction-attachments[hidden] { display: none; }
.transaction-attachments > span:first-child { color: var(--text-secondary); }
.transaction-attachments a { margin-right: 12px; }

/* Dashboard charts drawn from the books */
.bar-pair i, .bar-pair b { min-height: 1px; }
.chart-empty { padding: 28px 16px; color: var(--text-secondary); font-size: 13px; text-align: center; }
/* Platform: companies list */
.platform-actions { display: flex; gap: 6px; }
.platform-actions form { margin: 0; }

/* Sales and purchase reports */
.report-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: var(--report-gap); border-bottom: 1px solid var(--border); }
.report-tabs a { padding: 7px 12px; border-bottom: 2px solid transparent; color: var(--text-secondary); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.report-tabs a:hover { color: var(--text-primary); }
.report-tabs a.is-active { border-bottom-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.report-more-filters { flex: 1 1 100%; order: 10; }
.report-more-filters > summary { width: max-content; color: var(--text-secondary); font-size: var(--report-label); cursor: pointer; }
.report-more-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding-top: 6px; }
.report-filter-bar .report-filter-actions { order: 5; }
.statutory-heading { display: grid; justify-items: center; gap: 2px; padding: 10px 14px 0; text-align: center; }
.statutory-heading strong { font-size: 18px; }
.statutory-heading > span { color: var(--text-secondary); font-size: 12px; }
.statutory-heading dl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; width: 100%; margin: 8px 0 0; padding: 8px 0; border-top: 1px solid var(--divider); font-size: 13px; }
.statutory-heading dl div { display: flex; gap: 6px; }
.statutory-heading dt { font-weight: 600; }
.statutory-heading dd { margin: 0; }
.statutory-table th { text-align: center; white-space: normal; vertical-align: middle; }
.statutory-table th, .statutory-table td { border: 1px solid var(--border); }

/* Purchase, sales and return vouchers with VAT */
.voucher-page .voucher-tax-grid { padding-top: 0; }
.voucher-tax-grid [hidden] { display: none; }
.voucher-page .stock-table.has-vat th:nth-child(6) { width: 13%; }
.voucher-page .stock-table.has-vat th:nth-child(7) { width: 130px; }
.voucher-page .stock-table.has-vat th:nth-child(8) { width: 11%; }
.voucher-page .stock-table.has-vat th:nth-child(9) { width: 150px; }
.stock-table .line-tax { width: 100%; height: 32px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--surface); font: inherit; font-size: 13px; }
.stock-table .line-vat { padding-right: 12px; font-variant-numeric: tabular-nums; }
.voucher-page .journal-table.return-table th { width: auto; }
.voucher-page .journal-table.return-table th:first-child { width: 40px; }
.return-table .line-text { padding: 4px 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.return-table input:disabled, .return-table input[readonly] { color: var(--text-secondary); background: var(--hover-bg); }
.cost-summary.return-original { border-top: 1px solid var(--divider); }
.cost-summary.return-original dd { font-size: 14px; }
@media print { .report-tabs { display: none; } .statutory-table { font-size: 9px; } .statutory-table thead { display: table-header-group; } }.statutory-table { font-size: 12px; }
.statutory-table th, .statutory-table td { padding: 5px 7px; }
.statutory-table td.number-cell { white-space: nowrap; }
.voucher-page .stock-table.has-vat th:nth-child(7) { width: 150px; }
.voucher-page .stock-table.has-vat th:nth-child(8) { width: 10%; }
/* Tax invoice details on a journal voucher */
#tax-invoice [hidden] { display: none; }
.vat-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 0; padding: 8px 10px; border: 1px solid var(--divider); border-radius: 5px; background: var(--hover-bg); }
.vat-facts div { display: flex; flex-direction: column; min-width: 0; }
.vat-facts dt { color: var(--text-secondary); font-size: 12px; }
.vat-facts dd { margin: 0; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
#vat-dialog [hidden] { display: none; }
#vat-details-button.is-missing { color: var(--error-text); }
/* Printed voucher */
.voucher-print-page { background: var(--page-bg, #f5f5f5); }
.voucher-print-actions { display: flex; justify-content: space-between; max-width: 820px; margin: 16px auto 0; padding: 0 16px; }
.voucher-print { max-width: 820px; margin: 12px auto 32px; padding: 28px 32px; border: 1px solid var(--border); background: #fff; color: #111; font-size: 13px; }
.voucher-print-head { display: grid; justify-items: center; gap: 2px; text-align: center; }
.voucher-print-head strong { font-size: 18px; }
.voucher-print-head span { color: #444; font-size: 12px; }
.voucher-print-head h1 { margin: 10px 0 0; padding: 4px 18px; border: 1px solid #111; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.voucher-print-status { margin-top: 10px; color: #b42318; font-weight: 700; text-align: center; letter-spacing: .08em; }
.voucher-print-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; margin: 16px 0 12px; }
.voucher-print-facts div { display: flex; gap: 6px; }
.voucher-print-facts dt { min-width: 150px; color: #444; }
.voucher-print-facts dd { margin: 0; font-weight: 600; }
.voucher-print-table { width: 100%; min-width: 0; margin-bottom: 12px; border-collapse: collapse; }
.voucher-print-table th, .voucher-print-table td { padding: 6px 8px; border: 1px solid #111; background: #fff; color: #111; font-size: 12px; text-align: left; white-space: normal; }
.voucher-print-table th.number-cell, .voucher-print-table td.number-cell { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.voucher-print-table tfoot th, .voucher-print-table tfoot td { font-weight: 700; }
.voucher-print-narration { margin: 0 0 8px; }
.voucher-print-signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 64px; break-inside: avoid; }
.voucher-print-signatures div { display: grid; justify-items: center; gap: 2px; text-align: center; }
.voucher-print-signature { width: 100%; border-top: 1px solid #111; margin-bottom: 4px; }
.voucher-print-signatures strong { min-height: 18px; }
.voucher-print-signatures span:not(.voucher-print-signature) { min-height: 16px; color: #444; font-size: 12px; }
@media print {
  .voucher-print-actions { display: none; }
  .voucher-print-page { background: #fff; }
  .voucher-print { max-width: none; margin: 0; padding: 0; border: 0; }
}
/* Printing lists and working screens: the table only, without controls */
@media print {
  .filter-bar, .panel-tools, .row-action-cell, .row-menu, .table-footer .pagination, .report-filter-bar, .journal-action-footer, .sidebar-bottom { display: none !important; }
  th[aria-label="Actions"] { display: none !important; }
  .panel { border: 0 !important; box-shadow: none !important; }
  .page-heading { margin-bottom: 4px; }
  .table-input { border: 0 !important; padding: 0 !important; background: transparent !important; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
  html, body, .main-area, .page-content { background: #fff !important; }
}
/* A voucher number that opens its entry */
.voucher-open { padding: 0; border: 0; background: transparent; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; }
.voucher-open.voucher-code { color: var(--accent-text); }
.voucher-open:hover, .voucher-open:focus-visible { text-decoration: underline; }

/* One printed style for everything: the printed voucher's. White paper, black rules, centred heading. */
.print-heading { display: none; }
.voucher-print-buttons { display: flex; gap: 8px; }
@media print {
  .print-heading.print-only { display: grid !important; justify-items: center; gap: 2px; margin: 0 0 12px; text-align: center; color: #111; }
  .print-heading strong { font-size: 18px; }
  .print-heading span { color: #444; font-size: 12px; }
  .print-heading .print-heading-title { margin: 8px 0 4px; padding: 4px 18px; border: 1px solid #111; color: #111; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .page-heading, .report-tabs, .report-note:not(.print-only), .summary-cards, .equation-cards, .report-balance-status { display: none !important; }
  .page-content table { width: 100%; min-width: 0 !important; border-collapse: collapse; }
  .page-content table th, .page-content table td { padding: 5px 7px !important; border: 1px solid #111 !important; background: #fff !important; color: #111 !important; font-size: 11px; white-space: normal; }
  .page-content table td.number-cell, .page-content table th.number-cell { white-space: nowrap; }
  .page-content table tfoot td, .page-content table tfoot th, .page-content .journal-total-row td, .page-content .journal-total-row th, .page-content .account-group td, .page-content .account-header td { font-weight: 700; }
  .page-content .panel-heading, .page-content .section-band { padding: 10px 0 4px !important; border: 0 !important; background: #fff !important; }
  .page-content .panel-heading h2 { font-size: 13px; }
  .page-content .status { padding: 0; border: 0; background: transparent !important; color: #111 !important; }
  .page-content .voucher-code, .page-content .voucher-open { color: #111 !important; }
  .statutory-heading { color: #111; }
  .empty-state { border: 1px solid #111; }
  @page { margin: 14mm 12mm; }
}
@media print { .sort-button::after { content: none; } .page-content .table-footer { display: none !important; } }

/* Tables fit their space: text wraps instead of pushing the table wider than the page.
   Amounts, dates and codes have no spaces and stay on one line. */
th, td { white-space: normal; }
td.number-cell, th.number-cell, .row-action-cell, .sort-button { white-space: nowrap; }
.row-action-cell { width: 1%; }
.status { white-space: nowrap; }

/* The entry dialog: wide enough for a stock voucher, one scroll for the whole entry. */
.transaction-details-dialog:not(.bill-dialog) { width: min(820px, calc(100vw - 32px)); max-height: min(88vh, 860px); }
.transaction-details-dialog .journal-detail-table-wrap { max-height: none; overflow: visible; }
.journal-detail-table.stock-detail-table th:first-child { width: 36%; }
.journal-detail-table.stock-detail-table th:nth-child(2) { width: 10%; }
.journal-detail-table.stock-detail-table th:nth-child(3) { width: 16%; }
.journal-detail-table.stock-detail-table th:nth-child(4) { width: 17%; }
.journal-detail-table.stock-detail-table th:nth-child(5) { width: 21%; }
.journal-detail-table th { overflow-wrap: normal; }
/* Tables with many columns (registers, invoice-wise reports) tighten up to fit the screen. */
table.is-dense { min-width: 0; }
table.is-dense th, table.is-dense td { padding: 6px 6px; font-size: 12px; line-height: 16px; }
table.is-dense th { overflow-wrap: normal; hyphens: auto; }
table.is-dense td a { white-space: nowrap; }table.is-dense th.number-cell { white-space: normal; }
table.is-dense td { overflow-wrap: normal; }

/* Identifiers (invoice and voucher numbers, codes) never break across lines. */
.nowrap, .voucher-code { white-space: nowrap; }

/* On a phone, tables become cards instead of scrolling sideways. Entry forms keep their grid. */
@media (max-width: 760px) {
  .page-content table.has-card-labels { min-width: 0 !important; border: 0; }
  .page-content table.has-card-labels thead { display: none; }
  .page-content table.has-card-labels, .page-content table.has-card-labels tbody, .page-content table.has-card-labels tfoot { display: block; }
  .page-content table.has-card-labels tr { display: block; margin: 0 0 10px; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
  .page-content table.has-card-labels tr[hidden] { display: none; }
  .page-content table.has-card-labels td, .page-content table.has-card-labels th { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: auto !important; padding: 7px 12px; border: 0; border-bottom: 1px solid var(--divider); text-align: right; white-space: normal; }
  .page-content table.has-card-labels tr > :last-child { border-bottom: 0; }
  .page-content table.has-card-labels td[data-label]::before, .page-content table.has-card-labels th[data-label]::before { flex: 0 0 40%; color: var(--text-secondary); font-size: 12px; font-weight: 600; text-align: left; content: attr(data-label); }
  .page-content table.has-card-labels td:empty { display: none; }
  .page-content table.has-card-labels .row-action-cell { justify-content: flex-end; }
  .page-content .table-wrap { overflow-x: visible; }
}
/* Reports: groups pack into columns with no gaps; search and recent reports at the top. */
.report-centre-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: var(--report-gap); }
.report-centre-search { width: min(360px, 100%); }
.report-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.report-recent[hidden] { display: none; }
.report-recent > span { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.report-recent a { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-primary); background: var(--surface); font-size: 13px; text-decoration: none; }
.report-recent a:hover { border-color: var(--accent); color: var(--accent-text); }
.report-directory.report-directory-packed { display: block; column-width: 300px; column-gap: var(--report-gap); }
.report-directory-packed .report-panel { display: inline-block; width: 100%; margin: 0 0 var(--report-gap) !important; break-inside: avoid; }
.report-directory-packed .report-panel[hidden] { display: none; }
.report-directory-packed .panel-heading { display: flex; align-items: center; justify-content: space-between; }
.report-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; color: var(--text-secondary); background: var(--surface); font-size: 12px; text-align: center; }
.report-directory-list li[hidden] { display: none; }

/* Settings: one tile per setting, each showing what it is set to now. */
.settings-section + .settings-section { margin-top: 20px; }
.settings-section h2 { margin: 0 0 8px; color: var(--text-secondary); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.settings-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.settings-tile { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); background: var(--surface); text-decoration: none; }
a.settings-tile:hover, a.settings-tile:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.settings-tile-icon { display: grid; flex: 0 0 34px; height: 34px; place-items: center; border-radius: 6px; color: var(--accent-text); background: var(--section-bg); font-size: 16px; }
.settings-tile-text { display: grid; flex: 1; min-width: 0; gap: 2px; }
.settings-tile-text strong { font-size: 14px; }
.settings-tile-text span { color: var(--text-secondary); font-size: 13px; overflow-wrap: anywhere; }
.settings-tile-go { color: var(--text-secondary); font-size: 18px; }
.settings-tile form { margin: 0; }
.settings-switch { position: relative; width: 42px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: #c9c9c9; cursor: pointer; }
.settings-switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.settings-switch.is-on { background: var(--accent); }
.settings-switch.is-on span { left: 21px; }
/* Server-paged lists: page links look like the page buttons, sort links show their direction. */
.server-pager .pagination { margin: 0; }
.pagination > .page-link { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--control-border); border-radius: 4px; color: var(--text-primary); background: var(--surface); font-size: 14px; text-decoration: none; }
.pagination > a.page-link:hover { border-color: var(--accent); color: var(--accent-text); }
.pagination > .page-link.is-disabled { border-color: var(--divider); color: var(--disabled-text); background: var(--disabled-bg); }
.server-pager .page-number { width: auto; min-width: 32px; padding: 0 8px; white-space: nowrap; }
a.sort-button { display: inline; color: inherit; font-weight: inherit; text-decoration: none; }
th[aria-sort="ascending"] .sort-button::after { content: "↑"; color: var(--accent-text); }
th[aria-sort="descending"] .sort-button::after { content: "↓"; color: var(--accent-text); }