:root {
  --bg: #f3f6f9;
  --panel: #ffffff;
  --text: #152238;
  --muted: #657386;
  --line: #dbe2ea;
  --brand: #1d4f7a;
  --brand-dark: #173957;
  --brand-2: #8a5b22;
  --good: #1f7a4d;
  --warn: #9b6413;
  --bad: #a83232;
  --soft: #edf3f8;
  --nav: #16283d;
  --nav-2: #0f1b2a;
  --shadow: 0 10px 24px rgba(21, 34, 56, .06);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(29,79,122,.08), transparent 260px),
    var(--bg);
}
button, input, select, textarea {
  font: inherit;
}
button {
  border: 1px solid var(--brand);
  background: var(--brand);
  color: white;
  border-radius: 4px;
  padding: 7px 11px;
  cursor: pointer;
  font-weight: 700;
  min-height: 34px;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
button:hover { filter: brightness(.98); }
button:active { transform: translateY(1px); }
button.secondary { background: white; color: var(--brand); }
button.ghost { background: transparent; color: var(--brand); border-color: var(--line); }
button.link-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.danger { background: var(--bad); border-color: var(--bad); }
button:disabled { opacity: .45; cursor: not-allowed; }
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(22,40,61,.94), rgba(29,79,122,.9)),
    var(--bg);
}
.login-panel {
  width: min(520px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 30px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}
.login-panel h1 { margin-top: 0; }
.login-mark {
  display: inline-block;
  background: var(--nav);
  color: white;
  padding: 7px 10px;
  border-radius: 4px;
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: .02em;
}
.shell {
  min-height: 100vh;
  height: 100vh;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  overflow: hidden;
  transition: grid-template-columns .18s ease;
}
.shell.sidebar-collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}
.shell.sidebar-collapsed .sidebar {
  padding: 10px 7px;
}
.shell.sidebar-collapsed .brand h1,
.shell.sidebar-collapsed .brand p,
.shell.sidebar-collapsed .mode-pill,
.shell.sidebar-collapsed .menu-group-title,
.shell.sidebar-collapsed .menu-section,
.shell.sidebar-collapsed .menu-item span {
  display: none;
}
.shell.sidebar-collapsed .brand {
  padding: 4px 6px 10px;
}
.shell.sidebar-collapsed .brand-lockup {
  justify-content: center;
}
.shell.sidebar-collapsed .menu-group-toggle {
  justify-content: center;
  padding: 8px 6px;
}
.shell.sidebar-collapsed .menu-chevron {
  font-size: 16px;
}
.shell.sidebar-collapsed .menu-items {
  padding: 4px 3px 7px;
}
.shell.sidebar-collapsed .menu-item {
  min-height: 28px;
  padding: 5px;
}
.sidebar {
  background: linear-gradient(180deg, var(--nav), var(--nav-2));
  color: white;
  padding: 12px 10px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}
.brand {
  padding: 5px 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  margin-bottom: 10px;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #eef4fb;
  color: var(--nav);
  border-radius: 5px;
  font-weight: 900;
}
.brand h1 { font-size: 18px; margin: 0 0 2px; letter-spacing: .2px; }
.brand p { color: #c7d3cf; margin: 0; font-size: 12px; }
.mode-pill {
  display: inline-flex;
  margin-top: 8px;
  padding: 3px 7px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  font-size: 11px;
  color: #dfe9e6;
}
.quick-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 3px 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 10px;
}
.quick-menu button {
  min-height: 31px;
  padding: 6px 7px;
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.16);
  color: white;
  font-size: 12px;
}
.nav-menu {
  display: grid;
  gap: 7px;
}
.menu-group {
  border: 1px solid transparent;
  border-radius: 6px;
  overflow: hidden;
}
.menu-group.active-group {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.menu-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  margin: 0;
  background: transparent;
  border-color: transparent;
  color: white;
  text-align: left;
  border-radius: 5px;
  padding: 9px 10px;
  min-height: 34px;
  font-weight: 800;
}
.menu-group-toggle:hover {
  background: rgba(255,255,255,.1);
}
.menu-group-title {
  flex: 1;
  font-size: 13px;
  letter-spacing: .02em;
}
.menu-chevron {
  color: #b8c9dc;
  font-weight: 900;
}
.menu-items {
  display: grid;
  max-height: 0;
  overflow: hidden;
  padding: 0 6px 8px;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  opacity: 0;
  transition: max-height .18s ease, opacity .18s ease;
}
.menu-group.open .menu-items {
  max-height: 720px;
  opacity: 1;
  gap: 2px;
}
.menu-item {
  width: 100%;
  min-height: 30px;
  padding: 6px 9px 6px 14px;
  justify-content: flex-start;
  text-align: left;
  color: #d8e4ef;
  background: transparent;
  border-color: transparent;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
}
.menu-section {
  display: block;
  padding: 10px 9px 4px;
  color: #9fb2c4;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.menu-item:hover {
  background: rgba(255,255,255,.09);
}
.menu-item.active {
  background: #eef4fb;
  color: var(--nav);
  border-color: #eef4fb;
}
.main {
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.topbar {
  min-height: 66px;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(8px);
}
.page-title strong { display: block; font-size: 21px; letter-spacing: .01em; }
.page-title { min-width: 0; }
.breadcrumbs {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 2px;
}
.page-title .muted {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}
.topbar .toolbar {
  margin-bottom: 0;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
}
.topbar .toolbar button {
  white-space: nowrap;
  min-height: 32px;
  padding: 6px 9px;
}
.enterprise-search {
  flex: 1 1 420px;
  max-width: 620px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 7px;
}
.enterprise-search input {
  min-height: 34px;
  border-radius: 4px;
  background: #f8fafc;
}
.quick-search {
  width: min(360px, 38vw);
  position: relative;
}
.quick-search input {
  padding-left: 46px;
  background: #f9fbfb;
}
.quick-search::before {
  content: "Find";
  position: absolute;
  left: 11px;
  top: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.content {
  width: min(100%, 1680px);
  margin: 0 auto;
  padding: 18px 22px 34px;
}
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(2, minmax(320px, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(240px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 15px;
  box-shadow: var(--shadow);
  min-width: 0;
}
.metric {
  position: relative;
  overflow: hidden;
  min-height: 86px;
  border-top: 3px solid var(--brand);
  text-align: left;
  color: var(--text);
}
.metric strong { display: block; font-size: 21px; margin-top: 6px; }
.metric .trend { margin-top: 7px; font-size: 11px; color: var(--muted); }
.clickable-card,
.workspace-card {
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.clickable-card:hover,
.workspace-card:hover {
  transform: translateY(-1px);
  border-color: #9bb7cf;
  box-shadow: 0 14px 30px rgba(21, 34, 56, .1);
}
.workspace-board,
.project-control-card {
  margin-top: 14px;
}
.workspace-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.workspace-card {
  display: grid;
  gap: 5px;
  min-height: 98px;
  padding: 13px;
  background: #fbfdff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  color: var(--text);
  text-align: left;
}
.workspace-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.workspace-card strong {
  font-size: 24px;
  color: var(--brand-dark);
}
.workspace-card small {
  color: var(--muted);
  line-height: 1.35;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.section-title h3 { margin: 0; font-size: 16px; letter-spacing: .01em; }
.subnav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.subnav button {
  background: white;
  color: var(--brand);
  border-color: var(--line);
  text-align: left;
  min-height: 52px;
}
.subnav button.active {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}
.muted { color: var(--muted); }
.note {
  padding: 12px;
  border: 1px solid #d9c49a;
  background: #fff8e8;
  border-radius: 4px;
  color: #594016;
  margin-bottom: 14px;
}
.note.bad {
  border-color: #e6b8b8;
  background: #fff0f0;
  color: var(--bad);
}
.note.ok {
  border-color: #b8dfca;
  background: #edf9f2;
  color: var(--good);
}
.ok { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  background: #f8fafc;
  border-radius: 5px;
}
.filter-panel {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  padding: 9px;
  margin: 0;
  border: 1px solid var(--line);
  border-top: 0;
  background: #f8fafc;
  border-radius: 0 0 5px 5px;
}
.filter-panel input,
.filter-panel select {
  max-width: 190px;
  min-height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.filter-shell {
  margin: 0 0 12px;
}
.filter-toggle {
  width: 100%;
  min-height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #eef3f8;
  color: var(--brand-dark);
  border-color: var(--line);
  border-radius: 5px;
  padding: 7px 10px;
}
.filter-shell:not(.collapsed) .filter-toggle {
  border-radius: 5px 5px 0 0;
}
.filter-shell.collapsed .filter-panel {
  display: none;
}
.filter-toggle-icon {
  font-weight: 900;
}
.report-filter-panel {
  margin-bottom: 0;
}
.report-filter-panel > div {
  min-width: 180px;
}
.report-filter-panel button {
  align-self: end;
}
.filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
}
.filter-chips span {
  border: 1px solid var(--line);
  background: white;
  border-radius: 999px;
  padding: 4px 8px;
}
.quick-filter-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.filter-chip-button {
  min-height: 28px;
  padding: 4px 9px;
  background: #f8fafc;
  color: var(--brand);
  border-color: var(--line);
  border-radius: 999px;
  font-size: 12px;
}
.toolbar .spacer { flex: 1; }
label { display: block; font-size: 11px; color: #536276; margin-bottom: 4px; font-weight: 700; }
.required-mark { color: var(--bad); }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 6px 9px;
  background: white;
  color: var(--text);
  min-height: 31px;
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #607086 50%), linear-gradient(135deg, #607086 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(17,91,95,.18);
  border-color: var(--brand);
}
.field-error input,
.field-error select,
.field-error textarea {
  border-color: var(--bad);
  background: #fffafa;
}
.field-message {
  margin-top: 5px;
  font-size: 11px;
  color: var(--bad);
}
.inline-status {
  margin-right: auto;
  align-self: center;
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 700;
}
.select-search {
  margin-bottom: 6px;
  min-height: 30px;
  background: #f8fafc;
}
input[type="checkbox"] { width: auto; }
.checkline {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
textarea { min-height: 64px; resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 10px; margin-bottom: 10px; }
.form-row.two { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
.form-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 12px -12px -12px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: #f6f8fb;
  justify-content: flex-end;
}
.form-actions button:not(.secondary):not(.ghost):not(.danger) {
  min-width: 132px;
}
.sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
}
.audit-panel {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  background: #fbfcfe;
  padding: 10px 12px;
  margin: 10px 0 12px;
  color: var(--muted);
  font-size: 12px;
}
.audit-panel strong {
  color: var(--brand-dark);
  font-size: 13px;
}
.form-panel {
  padding: 0;
  overflow: hidden;
}
.form-panel > form,
.form-panel > .form-body {
  padding: 12px;
}
.form-section {
  border: 1px solid var(--line);
  background: #fbfcfe;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 4px;
}
.form-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -12px -12px 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  background: #f3f6f9;
}
.form-section-title h4 {
  margin: 0;
  font-size: 12px;
  color: var(--brand-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.field-hint {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.inline-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}
table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  min-width: 680px;
  font-size: 13px;
}
.table-shell {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: white;
}
.table-pager {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 8px 2px 0;
  color: var(--muted);
  font-size: 12px;
}
.table-pager button {
  min-height: 28px;
  padding: 4px 8px;
}
th, td {
  border-bottom: 1px solid var(--line);
  padding: 8px 9px;
  text-align: left;
  vertical-align: top;
}
th {
  background: #f1f5f9;
  font-size: 12px;
  color: #34485e;
  position: sticky;
  top: 0;
  z-index: 1;
  cursor: pointer;
  user-select: none;
}
th[data-sort-direction="asc"]::after { content: " ▲"; color: var(--brand); }
th[data-sort-direction="desc"]::after { content: " ▼"; color: var(--brand); }
tbody tr:hover { background: #fbfcfc; }
.table-shell tbody tr:hover td { background: #f8fbfd; }
tr:last-child td { border-bottom: 0; }
.right { text-align: right; }
.amount-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.loading-card {
  min-height: 128px;
  display: grid;
  align-content: center;
  gap: 8px;
  border-left: 4px solid var(--brand);
}
.loading-card::after {
  content: "";
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), transparent);
  animation: loadingSweep 1.1s ease-in-out infinite;
}
@keyframes loadingSweep {
  0% { opacity: .35; transform: scaleX(.2); transform-origin: left; }
  50% { opacity: 1; transform: scaleX(1); transform-origin: left; }
  100% { opacity: .35; transform: scaleX(.2); transform-origin: right; }
}
.report-command {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.report-stat {
  padding: 13px 14px;
  border-left: 4px solid var(--brand);
}
.report-stat span,
.report-stat small {
  display: block;
  color: var(--muted);
}
.report-stat strong {
  display: block;
  font-size: 20px;
  margin: 5px 0;
}
.report-card {
  padding: 0;
  overflow: hidden;
}
.report-letterhead {
  display: none;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.report-header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}
.report-brand-block {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}
.report-logo,
.report-logo-placeholder {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 5px;
  object-fit: contain;
  background: white;
  flex: 0 0 auto;
}
.report-logo-placeholder {
  display: grid;
  place-items: center;
  background: var(--nav);
  color: white;
  font-weight: 900;
  font-size: 20px;
}
.report-brand-block h2 {
  margin: 0 0 4px;
  font-size: 20px;
}
.report-brand-block p,
.report-run-block span,
.report-titlebar p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.report-run-block {
  min-width: 220px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 5px;
}
.report-run-block strong,
.report-run-block span {
  display: block;
}
.report-run-block strong {
  margin-bottom: 5px;
  color: var(--brand-dark);
}
.report-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #f7fafc;
}
.report-titlebar h3 { margin: 0 0 3px; font-size: 18px; }
.report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
  color: var(--muted);
  font-size: 12px;
}
.report-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: white;
}
.report-card #reportPane {
  padding: 14px 16px 16px;
}
.report-card .table-shell {
  border-radius: 3px;
}
.statement-shell {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: white;
}
.statement-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
  gap: 16px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.statement-line:last-child { border-bottom: 0; }
.statement-line span {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-width: 0;
}
.statement-line small {
  min-width: 54px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.statement-line strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.statement-section {
  grid-template-columns: 1fr;
  background: #eaf0f6;
  color: #26384d;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.statement-total {
  background: #f8fafc;
  font-weight: 800;
}
.statement-grand {
  background: #eef7f5;
  border-top: 2px solid var(--brand);
  font-size: 15px;
  font-weight: 900;
}
.statement-grand.good strong { color: var(--good); }
.statement-grand.bad strong { color: var(--bad); }
.statement-note {
  color: var(--brand-dark);
  background: #fbfcfe;
}
.report-card th {
  color: #26384d;
  background: #eaf0f6;
  border-bottom: 1px solid #cbd6e2;
}
.report-card td {
  background: white;
}
.report-card tr:nth-child(even) td {
  background: #fbfcfe;
}
.report-footer {
  display: none;
  border-top: 1px solid var(--line);
  padding: 14px 16px 18px;
  background: #fbfcfe;
}
.report-terms {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.report-terms p {
  margin: 0 0 6px;
}
.report-signatures {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.report-signatures div {
  min-height: 46px;
  border-top: 1px solid #9aa8b8;
  padding-top: 7px;
  color: var(--muted);
  font-size: 12px;
}
.pill {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--soft);
  color: var(--brand);
  font-size: 12px;
}
.pill.good { color: var(--good); background: #eaf7f0; }
.pill.warn { color: var(--warn); background: #fff4dd; }
.pill.bad { color: var(--bad); background: #fdeeee; }
.kpi-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.kpi-strip span {
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 7px 10px;
  color: var(--muted);
  font-size: 12px;
}
.tree details { margin: 4px 0 4px 14px; }
.tree summary { cursor: pointer; padding: 6px; border-radius: 6px; }
.tree summary:hover { background: var(--soft); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding: 8px; border: 1px solid var(--line); background: white; border-radius: 5px; }
.tabs button { background: white; color: var(--brand); }
.tabs button.active { background: var(--brand); color: white; }
.master-workspace {
  display: grid;
  gap: 12px;
}
.master-tabs {
  padding: 8px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(21, 34, 56, .05);
}
.master-tabs button {
  min-width: 112px;
  text-align: center;
}
.master-kpis span:last-child {
  flex: 1;
  color: var(--brand-dark);
}
.master-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr);
  align-items: start;
}
.master-list {
  overflow-x: auto;
}
.master-list table {
  min-width: 880px;
}
.master-list .section-title,
.master-form-card > .section-title {
  margin: -14px -14px 14px;
  padding: 12px 14px;
  background: #f3f6f9;
  border-bottom: 1px solid var(--line);
}
.master-form-card form {
  padding: 0;
}
.master-form-card .form-section,
.master-form-card .form-row,
.master-form-card .form-row.two {
  min-width: 0;
}
.master-form-card .form-row,
.master-form-card .form-row.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.muted-row {
  color: var(--muted);
  background: #fbfcfd;
}
.action-cell {
  white-space: nowrap;
  min-width: 150px;
}
.action-cell button {
  margin-right: 5px;
  margin-bottom: 5px;
  min-height: 28px;
  padding: 4px 7px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 27, 42, .58);
  display: grid;
  place-items: center;
  z-index: 20;
  padding: 16px;
}
.modal {
  width: min(980px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: white;
  border-radius: 6px;
  padding: 0;
  border: 1px solid var(--line);
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
}
.search-modal {
  width: min(1080px, 100%);
}
.modal h3 {
  margin: 0;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  background: #f3f6f9;
}
.modal form { padding: 18px; }
.modal .form-actions { margin-left: -18px; margin-right: -18px; margin-bottom: -18px; }
.status-draft { color: var(--warn); }
.status-posted { color: var(--good); }
.status-reversed { color: var(--bad); }
.empty-state {
  border: 1px dashed var(--line);
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  color: var(--muted);
  background: #fbfcfc;
}
.empty-state.compact {
  margin-top: 12px;
  padding: 12px;
  text-align: left;
}
.bad-text {
  color: var(--bad);
  border-color: #f0bbbb;
  background: #fff7f7;
}
.danger-zone {
  border-color: #f2c6c6;
  background: #fffafa;
}
.action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.database-record-modal {
  max-width: 920px;
}

.database-json {
  background: #0f172a;
  color: #e5eefb;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 14px;
  max-height: 58vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font: 12px/1.55 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
}
.erp-band {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  padding: 12px;
  margin-bottom: 14px;
}
.status-cell {
  font-weight: 700;
}
.stock-ok { color: var(--good); }
.stock-low { color: var(--warn); }
.stock-out { color: var(--bad); }
.dense-card { padding: 12px; }
.dense-card h3 { margin-top: 0; }
.dialog-card {
  border: 1px solid var(--line);
  background: white;
}
.dialog-card .section-title {
  margin: -16px -16px 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #f3f6f9;
}
.dialog-card > form {
  margin: 0;
}
.dialog-card > form > .section-title {
  margin: -16px -16px 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #f3f6f9;
}
.journal-preview {
  border: 1px solid var(--line);
  background: #fbfcfe;
  padding: 12px;
  margin: 12px 0;
  border-radius: 5px;
}
.journal-preview .section-title {
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
  border-bottom: 0;
}
.monitoring-summary {
  margin-top: 14px;
}
.monitoring-area {
  margin-top: 14px;
}
.monitoring-area td:first-child {
  width: 92px;
}
.monitoring-area td:nth-child(2) {
  font-weight: 700;
  color: var(--brand-dark);
}
.login-panel .form-section {
  background: #f8fafc;
}
.dialog-card h3 {
  font-size: 15px;
  color: var(--brand-dark);
}
.input-table input,
.input-table select {
  min-width: 120px;
}
.input-table th,
.input-table td {
  padding: 7px;
}
@media print {
  .sidebar, .topbar, .toolbar, .tabs, .subnav, button, form { display: none !important; }
  .shell { display: block; }
  .content { padding: 0; }
  .card { box-shadow: none; border: 0; }
  .report-letterhead,
  .report-footer {
    display: block;
  }
  .report-card { overflow: visible; }
  .report-letterhead, .report-titlebar, .report-meta, .report-footer { padding-left: 0; padding-right: 0; }
  .report-header-grid { grid-template-columns: 1fr auto; }
  .report-run-block { border-color: #cfd8e3; }
  .report-card #reportPane { padding-left: 0; padding-right: 0; }
  .report-card th { background: #edf1f5 !important; color: #172238; }
  .report-card tr:nth-child(even) td { background: white !important; }
  .filter-chips { margin: 0 0 10px; }
  body { background: white; color: #111827; }
}
@media (max-width: 920px) {
  .shell { grid-template-columns: 1fr; height: auto; min-height: 100vh; overflow: visible; }
  .sidebar { position: sticky; height: auto; max-height: 45vh; }
  .main { height: auto; overflow: visible; }
  .grid.three, .grid.four, .grid.two, .grid.master-grid, .form-row, .subnav, .report-command { grid-template-columns: 1fr; }
  .report-header-grid, .report-signatures { grid-template-columns: 1fr; }
  .report-run-block { min-width: 0; }
  .report-titlebar { flex-direction: column; }
  .topbar { position: static; align-items: flex-start; gap: 10px; flex-direction: column; }
  .enterprise-search { width: 100%; max-width: none; grid-template-columns: 1fr auto; }
  .topbar .toolbar { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .page-title .muted { max-width: 92vw; }
  .quick-search { width: 100%; }
  .master-tabs button { min-width: 0; flex: 1 1 120px; }
  .table-shell { max-width: 100%; }
}

/* Horizon Enterprise UI 2026
   This layer intentionally overrides the older visual treatment through shared
   primitives. Most Horizon screens are generated from the same cards, forms,
   tables, tabs, badges and action bars, so centralizing the redesign here gives
   the ERP one coherent product language without touching accounting behavior. */
:root {
  --font-sans: "Inter", "Roboto", sans-serif;
  --bg: #f5f7fb;
  --bg-strong: #eef2f7;
  --panel: #ffffff;
  --panel-soft: #f9fafc;
  --text: #172033;
  --heading: #111827;
  --muted: #687385;
  --muted-2: #8792a3;
  --line: #dbe2ec;
  --line-strong: #c4ceda;
  --brand: #2563eb;
  --brand-dark: #173b8f;
  --brand-soft: #eaf1ff;
  --nav: #101828;
  --nav-2: #172033;
  --good: #147a4d;
  --good-soft: #e9f8f0;
  --warn: #a15c07;
  --warn-soft: #fff4df;
  --bad: #bb2d3b;
  --bad-soft: #fff0f2;
  --info: #0369a1;
  --info-soft: #e8f5ff;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, .08);
  --shadow-lg: 0 20px 50px rgba(16, 24, 40, .18);
}

* { box-sizing: border-box; }
html {
  font-size: 14px;
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background:
    radial-gradient(circle at 12% -10%, rgba(37, 99, 235, .08), transparent 280px),
    linear-gradient(180deg, #f8fafc 0, var(--bg) 340px);
  letter-spacing: 0;
}
button, input, select, textarea {
  font-family: var(--font-sans);
  letter-spacing: 0;
}

button {
  min-height: 34px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: var(--shadow-sm);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .08s ease;
}
button:hover {
  filter: none;
  background: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .18);
}
button:active { transform: translateY(1px); }
button.secondary {
  background: #fff;
  color: #27364f;
  border-color: var(--line-strong);
}
button.secondary:hover {
  background: #f8fafc;
  border-color: #9aa8bb;
  color: var(--heading);
  box-shadow: var(--shadow-sm);
}
button.ghost {
  background: transparent;
  color: var(--brand-dark);
  border-color: transparent;
  box-shadow: none;
}
button.ghost:hover {
  background: var(--brand-soft);
  border-color: #c7d7fe;
  box-shadow: none;
}
button.danger {
  background: var(--bad);
  border-color: var(--bad);
}
button.danger:hover {
  background: #a52734;
  border-color: #a52734;
}
button.link-button {
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}
button:disabled {
  opacity: .5;
  box-shadow: none;
  cursor: not-allowed;
}

.login {
  min-height: 100vh;
  padding: 32px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(16, 24, 40, .94), rgba(23, 42, 80, .94)),
    radial-gradient(circle at 80% 20%, rgba(37, 99, 235, .42), transparent 360px);
}
.login-panel {
  width: min(540px, 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  padding: 28px;
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--shadow-lg);
}
.login-mark {
  display: inline-grid;
  place-items: center;
  min-width: 92px;
  height: 34px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--nav);
  color: #fff;
  font-weight: 800;
}
.login-panel h1 {
  margin: 0 0 var(--space-2);
  color: var(--heading);
  font-size: 28px;
  letter-spacing: 0;
}

.shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  overflow: hidden;
  background: var(--bg);
}
.shell.sidebar-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
.sidebar {
  height: 100vh;
  position: sticky;
  top: 0;
  padding: 14px 12px;
  overflow-y: auto;
  background: linear-gradient(180deg, #111827 0, #0f172a 100%);
  color: #e5e7eb;
  border-right: 1px solid rgba(255, 255, 255, .08);
  scrollbar-gutter: stable;
}
.sidebar::-webkit-scrollbar,
.main::-webkit-scrollbar,
.table-shell::-webkit-scrollbar,
.database-json::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.sidebar::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.table-shell::-webkit-scrollbar-thumb,
.database-json::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .55);
  border-radius: 999px;
}
.brand {
  margin: 0 0 14px;
  padding: 8px 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.brand-lockup {
  display: flex;
  gap: 10px;
  align-items: center;
}
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  color: #fff;
  box-shadow: 0 10px 28px rgba(37, 99, 235, .28);
}
.brand h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.brand p {
  margin: 2px 0 0;
  color: #aeb9ca;
  font-size: 12px;
}
.mode-pill {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid rgba(96, 165, 250, .26);
  border-radius: 999px;
  background: rgba(37, 99, 235, .14);
  color: #bfdbfe;
  font-size: 11px;
  font-weight: 700;
}
.nav-menu { display: grid; gap: 8px; }
.menu-group {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  overflow: hidden;
}
.menu-group.active-group {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .08);
}
.menu-group-toggle {
  min-height: 38px;
  width: 100%;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border-color: transparent;
  color: #d8e0ea;
  box-shadow: none;
  border-radius: var(--radius-sm);
}
.menu-group-toggle:hover {
  background: rgba(255, 255, 255, .08);
  border-color: transparent;
  box-shadow: none;
}
.menu-group-title {
  font-size: 12px;
  font-weight: 800;
}
.menu-chevron {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #9ca3af;
  border-radius: 999px;
}
.menu-items {
  display: grid;
  gap: 2px;
  padding: 2px 6px 8px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  transition: max-height .2s ease, opacity .2s ease;
}
.menu-group.open .menu-items {
  max-height: 860px;
  opacity: 1;
}
.menu-section {
  padding: 10px 9px 5px;
  color: #7f8da1;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.menu-item {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #cdd6e4;
  box-shadow: none;
  text-align: left;
  font-size: 12px;
  font-weight: 650;
}
.menu-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, .07);
  color: #bfdbfe;
  font-size: 10px;
  font-weight: 800;
}
.menu-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-item:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  box-shadow: none;
}
.menu-item.active {
  background: #fff;
  color: #111827;
  border-color: rgba(255, 255, 255, .8);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}
.menu-item.active .menu-icon {
  background: var(--brand);
  color: #fff;
}
.shell.sidebar-collapsed .sidebar { padding: 12px 8px; }
.shell.sidebar-collapsed .brand h1,
.shell.sidebar-collapsed .brand p,
.shell.sidebar-collapsed .mode-pill,
.shell.sidebar-collapsed .menu-group-title,
.shell.sidebar-collapsed .menu-section,
.shell.sidebar-collapsed .menu-label {
  display: none;
}
.shell.sidebar-collapsed .brand-lockup,
.shell.sidebar-collapsed .menu-group-toggle,
.shell.sidebar-collapsed .menu-item {
  justify-content: center;
}
.shell.sidebar-collapsed .menu-item {
  padding: 7px;
}

.main {
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.topbar {
  min-height: 74px;
  padding: 12px 22px;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(340px, 560px) auto auto;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
}
.page-title { min-width: 0; }
.breadcrumbs {
  margin-bottom: 3px;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 700;
}
.page-title strong {
  display: block;
  color: var(--heading);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.15;
}
.page-title .muted {
  max-width: 52vw;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.company-chip {
  max-width: 210px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--heading);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.enterprise-search {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  max-width: none;
}
.enterprise-search input {
  min-height: 38px;
  border-radius: 999px;
  padding-left: 16px;
  background: #fff;
}
.topbar .toolbar {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  border: 0;
  background: transparent;
}
.topbar .toolbar button,
.enterprise-search button {
  min-height: 36px;
  white-space: nowrap;
}
.content {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 18px 22px 36px;
}

.grid { gap: var(--space-4); }
.grid.two { grid-template-columns: repeat(2, minmax(320px, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(240px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.card:hover {
  border-color: #cdd6e3;
}
.dense-card { padding: 14px; }
.dialog-card {
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.dialog-card > .section-title,
.dialog-card .section-title:first-child {
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.dialog-card > form {
  padding: 16px;
}
.dialog-card .form-actions {
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: -16px;
}
.section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.section-title h3,
.dense-card h3 {
  margin: 0;
  color: var(--heading);
  font-size: 15px;
  font-weight: 800;
}
.muted { color: var(--muted); }

.metric {
  min-height: 100px;
  padding: 16px;
  border-top: 0;
  border-left: 4px solid var(--brand);
  background: linear-gradient(180deg, #fff, #fbfdff);
}
.metric strong {
  display: block;
  margin-top: 8px;
  color: var(--heading);
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.metric .trend {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.workspace-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
}
.workspace-card {
  min-height: 116px;
  padding: 15px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.clickable-card:hover,
.workspace-card:hover {
  transform: translateY(-1px);
  border-color: #b6c5d8;
  box-shadow: var(--shadow-md);
}
.workspace-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.workspace-card strong {
  color: var(--heading);
  font-size: 26px;
  font-weight: 800;
}
.workspace-card small {
  color: var(--muted);
  line-height: 1.45;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #475467;
  font-size: 11px;
  font-weight: 750;
}
.required-mark { color: var(--bad); }
input, select, textarea {
  min-height: 36px;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background-color: #fff;
  color: var(--text);
  font-size: 13px;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
textarea {
  min-height: 76px;
  resize: vertical;
}
input::placeholder,
textarea::placeholder {
  color: #98a2b3;
}
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #667085 50%),
    linear-gradient(135deg, #667085 50%, transparent 50%);
  background-position: calc(100% - 17px) 16px, calc(100% - 12px) 16px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.select-search {
  min-height: 32px;
  margin-bottom: 6px;
  background: #f8fafc;
}
.field-hint,
.field-message {
  margin-top: 5px;
  font-size: 11px;
}
.field-hint { color: var(--muted); }
.field-error input,
.field-error select,
.field-error textarea {
  border-color: var(--bad);
  background: #fff8f9;
  box-shadow: 0 0 0 3px rgba(187, 45, 59, .08);
}
.field-message { color: var(--bad); }
.form-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.form-row.two {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
}
.form-section {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}
.form-section-title {
  margin: -14px -14px 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: #f8fafc;
}
.form-section-title h4 {
  margin: 0;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.form-actions {
  min-height: 56px;
  margin: 14px -14px -14px;
  padding: 12px 14px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid var(--line);
  background: #f8fafc;
}
.sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 6;
  box-shadow: 0 -8px 24px rgba(16, 24, 40, .06);
}
.inline-checks,
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.checkline {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--text);
}
input[type="checkbox"] {
  width: auto;
  min-height: auto;
  accent-color: var(--brand);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.quick-search {
  width: min(360px, 38vw);
}
.quick-search::before {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.quick-search input { padding-left: 48px; }
.filter-shell { margin: 0 0 14px; }
.filter-toggle {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--heading);
  font-weight: 800;
}
.filter-shell:not(.collapsed) .filter-toggle {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: #f8fafc;
}
.filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: #fff;
}
.filter-panel input,
.filter-panel select {
  max-width: 220px;
  min-height: 34px;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.filter-chips span,
.filter-chip-button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  background: #fff;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
}
.filter-chip-button:hover {
  background: var(--brand-soft);
  border-color: #bfcef9;
  color: var(--brand-dark);
}

.subnav,
.master-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.subnav button,
.master-tabs button {
  min-height: 40px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  text-align: left;
}
.subnav button:hover,
.master-tabs button:hover {
  background: #f8fafc;
  color: var(--heading);
  box-shadow: none;
}
.subnav button.active,
.master-tabs button.active {
  background: #fff;
  border-bottom-color: var(--brand);
  color: var(--brand-dark);
}

.table-shell {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  font-size: 12px;
}
th, td {
  padding: 9px 11px;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
  vertical-align: top;
}
th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  color: #475467;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
td {
  color: #27364f;
  line-height: 1.35;
}
tbody tr:nth-child(even) td { background: #fcfdff; }
tbody tr:hover td,
.table-shell tbody tr:hover td {
  background: #eef5ff;
}
tr:last-child td { border-bottom: 0; }
.right,
.amount-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.action-cell {
  white-space: nowrap;
}
.table-pager {
  padding: 9px 2px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.table-pager button {
  min-height: 30px;
  padding: 5px 9px;
}
th[data-sort-direction="asc"]::after { content: " ▲"; color: var(--brand); }
th[data-sort-direction="desc"]::after { content: " ▼"; color: var(--brand); }
.input-table {
  min-width: 840px;
}
.input-table th,
.input-table td {
  padding: 8px;
}
.input-table input,
.input-table select {
  min-width: 130px;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #f8fafc;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.pill.good,
.status-posted,
.status-approved,
.stock-ok {
  border-color: #b7e2cb;
  background: var(--good-soft);
  color: var(--good);
}
.pill.warn,
.status-draft,
.status-submitted,
.stock-low {
  border-color: #f4d8a8;
  background: var(--warn-soft);
  color: var(--warn);
}
.pill.bad,
.status-reversed,
.status-rejected,
.stock-out {
  border-color: #f4bcc4;
  background: var(--bad-soft);
  color: var(--bad);
}

.note {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #f3d59b;
  border-radius: var(--radius-md);
  background: var(--warn-soft);
  color: #713f12;
}
.note.ok {
  border-color: #b7e2cb;
  background: var(--good-soft);
  color: var(--good);
}
.note.bad {
  border-color: #f4bcc4;
  background: var(--bad-soft);
  color: var(--bad);
}
.empty-state {
  padding: 20px;
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius-md);
  background: #fbfdff;
  color: var(--muted);
  text-align: center;
}
.empty-state.compact {
  padding: 12px;
  text-align: left;
}
.loading-card {
  min-height: 150px;
  display: grid;
  align-content: center;
  gap: 8px;
  border-left: 4px solid var(--brand);
}

.erp-band {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.erp-band strong {
  display: block;
  margin-bottom: 3px;
  color: var(--heading);
  font-size: 15px;
}
.audit-panel {
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-md);
  background: #fbfdff;
}
.journal-preview {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.report-command {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.report-stat {
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-lg);
  background: #fff;
}
.report-stat strong {
  color: var(--heading);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.report-card {
  padding: 0;
  overflow: hidden;
}
.report-titlebar {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.report-titlebar h3 {
  margin: 0 0 4px;
  color: var(--heading);
  font-size: 18px;
  font-weight: 800;
}
.report-meta {
  padding: 10px 18px;
  background: #f8fafc;
}
.report-card #reportPane {
  padding: 16px 18px 18px;
}
.statement-shell {
  border-radius: var(--radius-md);
}
.statement-line {
  padding: 9px 12px;
}
.statement-section {
  background: #eef2f7;
}
.statement-grand {
  background: var(--brand-soft);
  border-top: 2px solid var(--brand);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(3px);
}
.modal {
  width: min(980px, 96vw);
  max-height: 88vh;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
}
.modal h3 {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--heading);
  font-size: 18px;
}
.modal .form-body {
  padding: 16px 18px;
}
.modal form { padding: 18px; }
.modal .form-actions {
  position: sticky;
  bottom: 0;
  margin: 0;
  padding: 12px 18px;
  background: #f8fafc;
}
.database-record-modal { max-width: 960px; }
.database-json {
  border-radius: var(--radius-md);
  background: #0b1220;
  color: #dbeafe;
  font: 12px/1.6 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
}

.section-spaced {
  margin-top: var(--space-4);
}

.kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.kpi-strip span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #475467;
  font-size: 12px;
  font-weight: 650;
}

.account-tree-card {
  overflow: hidden;
}
.tree {
  display: grid;
  gap: 4px;
  max-height: 70vh;
  overflow: auto;
  padding-right: 6px;
}
.tree details {
  margin: 0;
  padding-left: 16px;
  border-left: 1px solid #e4e9f1;
}
.tree summary,
.tree-leaf {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
}
.tree summary:hover,
.tree-leaf:hover {
  border-color: var(--line);
  background: #f8fafc;
}
.account-code {
  width: 58px;
  flex: 0 0 58px;
  color: var(--brand-dark);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.account-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--heading);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.tabs button {
  min-height: 38px;
  border-color: transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
.tabs button:hover {
  background: #f8fafc;
  color: var(--heading);
  box-shadow: none;
}
.tabs button.active {
  background: var(--brand);
  color: #fff;
}

.master-workspace {
  display: grid;
  gap: 14px;
}
.master-grid {
  grid-template-columns: minmax(0, 1.38fr) minmax(360px, .82fr);
  align-items: start;
}
.master-list {
  overflow: hidden;
}
.master-list .section-title,
.master-form-card > .section-title {
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.master-list > .table-shell,
.master-list > .table-pager {
  margin: 0 16px 16px;
}
.master-form-card {
  padding: 0;
  overflow: hidden;
}
.master-form-card form {
  padding: 16px;
}
.master-form-card .form-row,
.master-form-card .form-row.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.modal-section {
  margin-top: 12px;
}

.danger-zone {
  border-color: #fecdd3;
  background: #fff8f9;
}
.bad-text {
  border-color: #fecdd3;
  background: var(--bad-soft);
  color: var(--bad);
}
.inline-status {
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr);
  }
  .company-chip {
    display: none;
  }
  .topbar .toolbar {
    grid-column: 1 / -1;
    overflow-x: auto;
  }
}

@media (max-width: 1500px) and (min-width: 1181px) {
  .topbar {
    grid-template-columns: minmax(230px, 1fr) minmax(300px, 520px) auto;
  }
  .company-chip {
    display: none;
  }
}

@media (max-width: 920px) {
  .shell {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .shell.sidebar-collapsed {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: auto;
    max-height: 46vh;
  }
  .main {
    height: auto;
    overflow: visible;
  }
  .topbar {
    position: static;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .enterprise-search {
    grid-template-columns: 1fr auto;
  }
  .content {
    padding: 14px;
  }
  .grid.two,
  .grid.three,
  .grid.four,
  .grid.master-grid,
  .form-row,
  .form-row.two,
  .report-command {
    grid-template-columns: 1fr;
  }
  .filter-panel input,
  .filter-panel select,
  .quick-search {
    width: 100%;
    max-width: none;
  }
}

@media print {
  body {
    background: #fff;
    color: #111827;
  }
  .sidebar,
  .topbar,
  .toolbar,
  .tabs,
  .subnav,
  button,
  form {
    display: none !important;
  }
  .shell,
  .main {
    display: block;
    height: auto;
    overflow: visible;
  }
  .content {
    max-width: none;
    padding: 0;
  }
  .card,
  .report-card {
    border: 0;
    box-shadow: none;
  }
  .report-letterhead,
  .report-footer {
    display: block;
  }
  th {
    background: #edf1f5 !important;
    color: #172238;
  }
}

/* Horizon ERP Typography System
   This final layer is intentionally centralized. Older screens in Horizon were
   built over several iterations, so these selectors normalize typography across
   dashboards, forms, reports, listings, modals, and transaction grids without
   changing accounting or workflow behavior. */
:root {
  --font-sans: "Inter", "Roboto", sans-serif;

  --text-helper: 11px;
  --text-caption: 12px;
  --text-table: 13px;
  --text-body: 14px;
  --text-card-title: 15px;
  --text-section-title: 17px;
  --text-modal-title: 19px;
  --text-page-title: 24px;
  --text-app-title: 30px;
  --text-kpi: 30px;

  --leading-tight: 1.15;
  --leading-heading: 1.25;
  --leading-control: 1.35;
  --leading-body: 1.45;
  --leading-table: 1.35;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-ui: 0;
  --tracking-label: .02em;
}

html {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-ui);
}

body {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title strong,
.section-title h3,
.report-titlebar h3,
.modal h3,
.dialog-card h3,
.card > h3,
.dense-card h3 {
  color: var(--heading);
  letter-spacing: 0;
  line-height: var(--leading-heading);
}

.login-panel h1 {
  font-size: var(--text-app-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.brand h1 {
  font-size: 18px;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.brand p,
.topbar-meta,
.breadcrumbs,
.breadcrumb,
.page-title span,
.muted,
.helper,
.hint,
.field-hint,
.note,
.empty-state,
.report-description,
.toast,
.soft-note {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

.page-title strong,
.page-heading,
.view-title,
.screen-title {
  font-size: var(--text-page-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
}

.section-title h3,
.report-titlebar h3,
.form-section-title,
.panel-title,
.entry-form h3 {
  font-size: var(--text-section-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
}

.card > h3,
.dense-card h3,
.dialog-card h3,
.table-title,
.widget-title,
.workspace-card h3 {
  font-size: var(--text-card-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
}

.modal h3,
.modal-title,
.dialog-card h2,
.dialog-card h3 {
  font-size: var(--text-modal-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
}

label,
.form-label,
.filter-panel label,
.field label {
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-control);
}

input,
select,
textarea,
.input,
.select,
.textarea {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-control);
}

button,
.btn,
.action-button,
.icon-button,
.tabs button,
.subnav button,
.table-actions button,
.row-actions button {
  font-size: var(--text-table);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-control);
}

.menu-item,
.menu-link,
.menu-group-title,
.sidebar button,
.sidebar a {
  font-size: var(--text-table);
  font-weight: var(--weight-medium);
  line-height: var(--leading-control);
}

.menu-group-title,
.menu-section-title {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
}

table,
.data-table,
.erp-table,
.report-table,
.entry-table {
  font-size: var(--text-table);
  line-height: var(--leading-table);
}

th,
.table-header,
.grid-header {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-control);
}

td,
.table-cell,
.grid-cell {
  font-size: var(--text-table);
  font-weight: var(--weight-regular);
  line-height: var(--leading-table);
}

.pill,
.badge,
.status-badge,
.status-pill,
.tag,
.chip {
  font-size: var(--text-helper);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  line-height: 1;
}

.metric strong,
.kpi-number,
.workspace-card strong,
.report-stat strong,
.stat-value,
.summary-value {
  font-size: var(--text-kpi);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.amount-cell,
.currency,
.money,
.number,
.numeric,
.right,
td.right,
th.right,
input[type="number"],
.metric strong,
.kpi-number,
.workspace-card strong,
.report-stat strong,
.stat-value,
.summary-value,
.account-code,
.trial-balance td,
.ledger-table td,
.report-table td {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.amount-cell,
.currency,
.money,
.number,
.numeric,
.right,
td.right,
th.right,
.report-table .amount,
.data-table .amount,
.entry-table .amount {
  text-align: right;
}

.form-error,
.validation-message,
.error-message {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-control);
}

.report-letterhead h1,
.print-title {
  font-size: var(--text-page-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
}

.report-letterhead p,
.report-footer,
.print-meta {
  font-size: var(--text-caption);
  line-height: var(--leading-body);
}

@media (max-width: 920px) {
  :root {
    --text-page-title: 22px;
    --text-app-title: 28px;
    --text-kpi: 28px;
  }
}

/* Horizon Enterprise Interface System
   This is the UI identity layer for the ERP workspace. It deliberately uses
   common component selectors because Horizon renders most screens from shared
   helpers; changing this layer upgrades dashboards, masters, vouchers, reports,
   approvals and settings without changing business logic. */
:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --surface: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-muted: #f1f5f9;
  --heading: #101828;
  --text: #263346;
  --muted: #667085;
  --line: #d9e2ee;
  --line-strong: #c4d0df;
  --brand: #245bdb;
  --brand-dark: #173a8a;
  --brand-soft: #edf3ff;
  --accent: #0f766e;
  --accent-soft: #ecfdf9;
  --good: #087443;
  --good-soft: #ecfdf3;
  --warn: #a15c07;
  --warn-soft: #fff7e6;
  --bad: #b42318;
  --bad-soft: #fff1f0;
  --nav: #ffffff;
  --nav-2: #f7f9fc;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 6px 18px rgba(16, 24, 40, .06);
  --shadow-md: 0 14px 34px rgba(16, 24, 40, .10);
  --focus-ring: 0 0 0 3px rgba(36, 91, 219, .14);
}

body {
  color: var(--text);
  background:
    linear-gradient(180deg, #f8fbff 0, #f5f7fb 260px),
    var(--bg);
}

.login {
  background:
    radial-gradient(circle at 20% 15%, rgba(36, 91, 219, .20), transparent 34%),
    linear-gradient(135deg, #071733, #102a56 52%, #0f766e);
}

.login-panel {
  width: min(520px, calc(100vw - 32px));
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 28px 90px rgba(2, 6, 23, .30);
}

.login-mark,
.brand-mark {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff;
}

.shell {
  grid-template-columns: 292px minmax(0, 1fr);
  background: var(--bg);
}

.shell.sidebar-collapsed {
  grid-template-columns: 76px minmax(0, 1fr);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--nav), var(--nav-2));
  color: var(--text);
}

.sidebar::-webkit-scrollbar,
.main::-webkit-scrollbar,
.table-shell::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.sidebar::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.table-shell::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #cbd5e1;
  background-clip: content-box;
}

.brand {
  margin: 0;
  padding: 8px 8px 12px;
  border-bottom: 1px solid var(--line);
}

.brand-lockup {
  align-items: center;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: var(--shadow-xs);
}

.brand h1 {
  color: var(--heading);
}

.brand p {
  color: var(--muted);
}

.mode-pill {
  margin-top: 10px;
  min-height: 24px;
  border: 1px solid #c7d7fe;
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.sidebar-search {
  padding: 0 4px 4px;
}

.sidebar-search input {
  min-height: 34px;
  border-color: var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text);
}

.sidebar-search input:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}

.nav-menu {
  gap: 8px;
  padding-bottom: 12px;
}

.menu-group {
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
}

.menu-group.active-group {
  border-color: #c7d7fe;
  background: #f7faff;
  box-shadow: var(--shadow-xs);
}

.menu-group-toggle {
  min-height: 38px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--heading);
  box-shadow: none;
}

.menu-group-toggle:hover {
  background: #eef4ff;
  box-shadow: none;
}

.menu-group-icon,
.menu-icon {
  min-width: 26px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d6e1f2;
  border-radius: 7px;
  background: #fff;
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.menu-group-title {
  color: var(--heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-count {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.menu-chevron {
  color: var(--muted);
}

.menu-items {
  border-top: 0;
  padding: 0 6px 8px 42px;
}

.menu-group.open .menu-items {
  gap: 3px;
}

.menu-section {
  padding: 10px 8px 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

.menu-item {
  min-height: 32px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: #344054;
  box-shadow: none;
}

.menu-item:hover {
  border-color: #d6e1f2;
  background: #fff;
  color: var(--brand-dark);
  box-shadow: var(--shadow-xs);
}

.menu-item.active {
  border-color: #b8c9ff;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 18px rgba(36, 91, 219, .22);
}

.menu-item.active .menu-icon {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.menu-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell.sidebar-collapsed .sidebar-search,
.shell.sidebar-collapsed .mode-pill,
.shell.sidebar-collapsed .menu-count,
.shell.sidebar-collapsed .menu-group-title,
.shell.sidebar-collapsed .menu-label,
.shell.sidebar-collapsed .menu-section {
  display: none;
}

.shell.sidebar-collapsed .menu-group-toggle,
.shell.sidebar-collapsed .menu-item {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

.shell.sidebar-collapsed .menu-items {
  padding: 4px 4px 8px;
}

.main {
  background: var(--bg);
}

.topbar {
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(320px, 560px) auto auto;
  gap: 14px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-xs);
}

.page-title {
  min-width: 0;
}

.breadcrumbs {
  margin-bottom: 3px;
  color: var(--muted);
}

.enterprise-search {
  max-width: none;
}

.enterprise-search input,
.quick-search input {
  border-radius: var(--radius-md);
  border-color: var(--line);
  background: var(--surface-subtle);
}

.company-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--heading);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.topbar .toolbar {
  gap: 6px;
}

.topbar .toolbar button {
  min-height: 34px;
}

.content {
  max-width: 1640px;
  margin: 0 auto;
  padding: 22px;
}

.grid {
  gap: 16px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card,
.dense-card,
.dialog-card,
.report-card,
.workspace-card,
.metric,
.form-section,
.journal-preview,
.erp-band,
.audit-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.card,
.dense-card,
.dialog-card,
.workspace-card,
.metric {
  padding: 16px;
}

.card:hover,
.workspace-card:hover,
.metric:hover {
  border-color: var(--line-strong);
}

.section-title,
.form-section-title,
.report-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.section-title h3,
.form-section-title h4,
.report-titlebar h3 {
  margin: 0;
}

.metric,
.workspace-card {
  position: relative;
  overflow: hidden;
}

.metric::before,
.workspace-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brand);
}

.metric span,
.workspace-card span {
  color: var(--muted);
}

.metric strong,
.workspace-card strong,
.report-stat strong {
  margin-top: 7px;
  color: var(--heading);
}

button {
  min-height: 36px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-md);
  padding: 7px 12px;
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-xs);
}

button:hover {
  filter: none;
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

button.secondary,
button.ghost {
  border-color: var(--line);
  background: #fff;
  color: var(--heading);
}

button.secondary:hover,
button.ghost:hover {
  border-color: #b8c9ff;
  background: var(--brand-soft);
  color: var(--brand-dark);
}

button.danger {
  border-color: #fda29b;
  background: var(--bad);
  color: #fff;
}

button.danger:hover {
  border-color: #b42318;
  background: #912018;
}

button.link-button {
  color: var(--brand);
}

input,
select,
textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  background: #fff;
  color: var(--text);
  outline: 0;
}

textarea {
  min-height: 76px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}

label {
  margin-bottom: 5px;
  color: #475467;
}

.field-hint {
  margin-top: 4px;
  color: var(--muted);
}

.field-error input,
.field-error select,
.field-error textarea,
input.field-error {
  border-color: #f97066;
  background: #fffafa;
}

.field-message {
  margin-top: 5px;
  color: var(--bad);
  font-size: 12px;
}

.form-row {
  gap: 12px;
}

.form-row.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-section {
  margin-bottom: 14px;
  padding: 14px;
}

.form-actions,
.action-bar,
.page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.page-actions {
  margin-bottom: 16px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.form-actions {
  margin: 14px -14px -14px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-subtle);
}

.sticky-actions {
  box-shadow: 0 -10px 22px rgba(16, 24, 40, .08);
}

.filter-panel {
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.filter-shell .filter-panel {
  border-top: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.filter-toggle {
  border-radius: var(--radius-md);
}

.filter-chips {
  margin: 0 0 12px;
}

.filter-chips span,
.filter-chip-button,
.pill {
  border-radius: 999px;
}

.table-shell {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

table {
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
  color: #475467;
  text-transform: uppercase;
  cursor: pointer;
}

td {
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f6;
  color: var(--text);
}

tbody tr:nth-child(even) td {
  background: #fcfdff;
}

tbody tr:hover td {
  background: #eef4ff;
}

.input-table {
  min-width: 980px;
}

.input-table th,
.input-table td {
  padding: 8px;
}

.input-table input,
.input-table select {
  min-width: 126px;
}

.action-cell,
.table-actions {
  white-space: nowrap;
}

.action-cell button,
.table-actions button,
.row-actions button {
  min-height: 30px;
  padding: 5px 9px;
}

.table-pager {
  padding: 10px 2px 0;
}

.pill {
  min-height: 22px;
  padding: 4px 9px;
  border-color: #d0d5dd;
  background: #f8fafc;
  color: #344054;
}

.pill.good,
.status-approved,
.status-posted,
.status-paid,
.status-closed {
  border-color: #abefc6;
  background: var(--good-soft);
  color: var(--good);
}

.pill.warn,
.status-draft,
.status-submitted,
.status-pending,
.status-partially-paid {
  border-color: #fedf89;
  background: var(--warn-soft);
  color: var(--warn);
}

.pill.bad,
.status-rejected,
.status-cancelled,
.status-reversed {
  border-color: #fecdca;
  background: var(--bad-soft);
  color: var(--bad);
}

.tabs,
.subnav,
.master-tabs {
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.tabs button,
.subnav button,
.master-tabs button {
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
}

.tabs button.active,
.subnav button.active,
.master-tabs button.active {
  background: var(--brand);
  color: #fff;
}

.report-card {
  overflow: hidden;
}

.report-titlebar {
  margin: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.report-meta {
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.report-card #reportPane {
  padding: 16px 18px 18px;
}

.report-command,
.report-stats {
  gap: 14px;
}

.report-stat {
  padding: 15px;
}

.modal-backdrop {
  background: rgba(15, 23, 42, .52);
}

.modal {
  border-radius: 14px;
  box-shadow: 0 28px 90px rgba(2, 6, 23, .30);
}

.modal h3 {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.note,
.empty-state {
  border-radius: var(--radius-lg);
}

.note {
  border-color: #fedf89;
  background: var(--warn-soft);
}

.note.ok {
  border-color: #abefc6;
  background: var(--good-soft);
}

.note.bad {
  border-color: #fecdca;
  background: var(--bad-soft);
}

.empty-state {
  border: 1px dashed #cbd5e1;
  background: #fbfdff;
}

.kpi-strip {
  gap: 8px;
}

.kpi-strip span {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.master-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(370px, .85fr);
}

.master-list,
.master-form-card {
  border-radius: var(--radius-lg);
}

.tree summary,
.tree-leaf {
  border-radius: var(--radius-md);
}

@media (max-width: 1280px) {
  .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar {
    grid-template-columns: minmax(240px, 1fr) minmax(300px, 1fr);
  }

  .company-chip,
  .topbar .toolbar {
    grid-column: span 1;
  }
}

@media (max-width: 1500px) {
  .topbar {
    grid-template-columns: minmax(260px, 1fr) minmax(300px, 460px);
  }

  .company-chip {
    display: none;
  }

  .topbar .toolbar {
    grid-column: 1 / -1;
    justify-content: flex-end;
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: 1fr;
  }

  .enterprise-search,
  .topbar .toolbar {
    grid-column: 1 / -1;
  }

  .enterprise-search {
    max-width: none;
  }

  .topbar .toolbar {
    justify-content: flex-start;
  }
}

@media (max-width: 920px) {
  .shell,
  .shell.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    max-height: 52vh;
  }

  .topbar {
    grid-template-columns: 1fr;
    padding: 12px 14px;
  }

  .content {
    padding: 14px;
  }

  .grid.two,
  .grid.three,
  .grid.four,
  .grid.master-grid,
  .form-row,
  .form-row.two,
  .report-command {
    grid-template-columns: 1fr;
  }
}

@media print {
  .report-card,
  .table-shell {
    border: 0;
    box-shadow: none;
  }
}

/* Theme Options
   Themes override only design tokens. Components keep their same ERP layout and
   behavior, which keeps the interface consistent while letting users choose a
   comfortable workspace palette for long finance sessions. */
:root[data-theme="horizon"] {
  color-scheme: light;
}

:root[data-theme="slate"] {
  --bg: #f4f6f8;
  --surface-subtle: #f7f9fb;
  --surface-muted: #edf1f5;
  --heading: #111827;
  --text: #273449;
  --muted: #667085;
  --line: #d4dce7;
  --line-strong: #b7c3d0;
  --brand: #334155;
  --brand-dark: #1f2937;
  --brand-soft: #eef2f7;
  --accent: #2563eb;
  --accent-soft: #eff6ff;
}

:root[data-theme="emerald"] {
  --bg: #f4f8f7;
  --surface-subtle: #f8fbfa;
  --surface-muted: #edf7f3;
  --heading: #10201c;
  --text: #263b36;
  --muted: #62746f;
  --line: #d5e5df;
  --line-strong: #b5cec4;
  --brand: #0f766e;
  --brand-dark: #115e59;
  --brand-soft: #eaf7f4;
  --accent: #2563eb;
  --accent-soft: #eff6ff;
}

:root[data-theme="graphite"] {
  --bg: #f3f4f6;
  --surface-subtle: #f8fafc;
  --surface-muted: #eceff3;
  --heading: #18181b;
  --text: #27272a;
  --muted: #71717a;
  --line: #d9dde3;
  --line-strong: #bfc5cf;
  --brand: #27272a;
  --brand-dark: #09090b;
  --brand-soft: #f1f2f4;
  --accent: #7c3aed;
  --accent-soft: #f4f0ff;
}

:root[data-theme="royal"] {
  --bg: #f7f6fb;
  --surface-subtle: #faf9ff;
  --surface-muted: #f0eef8;
  --heading: #1f1b35;
  --text: #302b46;
  --muted: #6b667d;
  --line: #ddd7ef;
  --line-strong: #c4b8de;
  --brand: #4f46e5;
  --brand-dark: #3730a3;
  --brand-soft: #f0efff;
  --accent: #0f766e;
  --accent-soft: #ecfdf9;
}

.theme-button {
  min-width: 150px;
}

.theme-picker {
  min-height: 34px;
  display: inline-grid;
  grid-template-columns: auto minmax(126px, 156px);
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0 0 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--muted);
  box-shadow: var(--shadow-xs);
}

.theme-picker span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.theme-picker select {
  min-height: 32px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: transparent;
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

.theme-picker select:focus {
  border-color: var(--line);
  box-shadow: none;
}

:root[data-theme="slate"] .brand-mark,
:root[data-theme="graphite"] .brand-mark {
  background: linear-gradient(135deg, var(--brand), #475569);
}

:root[data-theme="emerald"] .brand-mark {
  background: linear-gradient(135deg, #0f766e, #16a34a);
}

:root[data-theme="royal"] .brand-mark {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

@media (max-width: 1180px) {
  .theme-picker {
    grid-template-columns: auto minmax(120px, 1fr);
  }
}

.theme-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.theme-choice {
  min-height: 118px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 4px 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--text);
  text-align: left;
}

.theme-choice:hover,
.theme-choice.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.theme-choice strong {
  align-self: end;
  color: var(--heading);
  font-size: 14px;
}

.theme-choice span:last-child {
  color: var(--muted);
  font-size: 12px;
}

.theme-swatch {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
}

.theme-swatch-horizon { background: linear-gradient(135deg, #245bdb 0 50%, #0f766e 50%); }
.theme-swatch-slate { background: linear-gradient(135deg, #334155 0 50%, #2563eb 50%); }
.theme-swatch-emerald { background: linear-gradient(135deg, #0f766e 0 50%, #16a34a 50%); }
.theme-swatch-graphite { background: linear-gradient(135deg, #27272a 0 50%, #7c3aed 50%); }
.theme-swatch-royal { background: linear-gradient(135deg, #4f46e5 0 50%, #7c3aed 50%); }

/* Theme Surface Enforcement
   The first theme implementation changed brand tokens, but several older
   component rules still used hard-coded whites. These final overrides bind the
   actual workspace surfaces to theme variables so the background, sidebar,
   cards, tables, forms, and menus all visibly move together with the selected
   theme while preserving ERP readability. */
:root {
  --app-bg-start: #f8fbff;
  --app-bg-end: #f5f7fb;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-muted: #f1f5f9;
  --sidebar-start: #ffffff;
  --sidebar-end: #f7f9fc;
  --topbar-bg: rgba(255, 255, 255, .94);
  --table-head-bg: #f8fafc;
  --table-alt-bg: #fcfdff;
  --row-hover-bg: #eef4ff;
  --input-bg: #ffffff;
  --input-muted-bg: #f8fafc;
  --text-strong: var(--heading);
}

:root[data-theme="slate"] {
  --app-bg-start: #eef2f6;
  --app-bg-end: #e7ecf2;
  --surface: #fbfcfe;
  --surface-raised: #ffffff;
  --surface-subtle: #f0f3f7;
  --surface-muted: #e6ebf1;
  --sidebar-start: #f8fafc;
  --sidebar-end: #e9eef5;
  --topbar-bg: rgba(248, 250, 252, .96);
  --table-head-bg: #e9eef5;
  --table-alt-bg: #f5f7fa;
  --row-hover-bg: #e6edf6;
  --input-bg: #ffffff;
  --input-muted-bg: #f3f6f9;
}

:root[data-theme="emerald"] {
  --app-bg-start: #edf8f4;
  --app-bg-end: #e2f1ec;
  --surface: #fbfffd;
  --surface-raised: #ffffff;
  --surface-subtle: #eef8f4;
  --surface-muted: #e1f0ea;
  --sidebar-start: #fbfffd;
  --sidebar-end: #eaf7f2;
  --topbar-bg: rgba(251, 255, 253, .96);
  --table-head-bg: #e8f5f1;
  --table-alt-bg: #f5fbf8;
  --row-hover-bg: #dff3ed;
  --input-bg: #ffffff;
  --input-muted-bg: #f2faf7;
}

:root[data-theme="graphite"] {
  --app-bg-start: #f1f2f4;
  --app-bg-end: #e7e9ed;
  --surface: #fbfbfc;
  --surface-raised: #ffffff;
  --surface-subtle: #f0f1f3;
  --surface-muted: #e5e7eb;
  --sidebar-start: #fbfbfc;
  --sidebar-end: #eceef1;
  --topbar-bg: rgba(251, 251, 252, .96);
  --table-head-bg: #eceef1;
  --table-alt-bg: #f6f7f8;
  --row-hover-bg: #e8e9ed;
  --input-bg: #ffffff;
  --input-muted-bg: #f3f4f6;
}

:root[data-theme="royal"] {
  --app-bg-start: #f2effc;
  --app-bg-end: #e9e5f7;
  --surface: #fefcff;
  --surface-raised: #ffffff;
  --surface-subtle: #f4f1fc;
  --surface-muted: #ebe6f7;
  --sidebar-start: #fefcff;
  --sidebar-end: #f1edfb;
  --topbar-bg: rgba(254, 252, 255, .96);
  --table-head-bg: #eee9fa;
  --table-alt-bg: #f8f6fd;
  --row-hover-bg: #e8e3fb;
  --input-bg: #ffffff;
  --input-muted-bg: #f8f6fd;
}

body {
  background:
    linear-gradient(180deg, var(--app-bg-start) 0, var(--app-bg-end) 310px),
    var(--bg) !important;
  color: var(--text);
}

.main {
  background:
    linear-gradient(180deg, var(--app-bg-start) 0, var(--app-bg-end) 360px),
    var(--bg) !important;
}

.sidebar {
  background: linear-gradient(180deg, var(--sidebar-start), var(--sidebar-end)) !important;
  color: var(--text);
}

.topbar {
  background: var(--topbar-bg) !important;
}

.card,
.dense-card,
.dialog-card,
.report-card,
.workspace-card,
.metric,
.form-section,
.journal-preview,
.erp-band,
.audit-panel,
.modal,
.table-shell,
.tabs,
.subnav,
.master-tabs,
.page-actions,
.toolbar,
.filter-panel,
.filter-shell .filter-panel,
.tree summary,
.tree-leaf,
.theme-choice,
.theme-picker,
.kpi-strip span,
.company-chip {
  background: var(--surface-raised) !important;
  color: var(--text);
  border-color: var(--line);
}

.report-titlebar,
.master-list .section-title,
.master-form-card > .section-title,
.form-actions,
.report-meta,
.filter-toggle,
th {
  background: var(--surface-subtle) !important;
  color: var(--text-strong);
}

input,
select,
textarea,
.enterprise-search input,
.quick-search input,
.sidebar-search input {
  background: var(--input-bg) !important;
  color: var(--text);
  border-color: var(--line);
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 74%, transparent);
}

.menu-group.active-group,
.menu-item:hover,
.tree summary:hover,
.tree-leaf:hover,
.tabs button:hover,
.subnav button:hover,
.master-tabs button:hover,
button.secondary:hover,
button.ghost:hover,
.theme-choice:hover,
.theme-choice.active {
  background: var(--brand-soft) !important;
  color: var(--brand-dark);
  border-color: var(--brand);
}

.menu-group-toggle:hover,
.menu-item:hover {
  background: var(--surface-subtle) !important;
}

.menu-item.active,
.tabs button.active,
.subnav button.active,
.master-tabs button.active {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

.menu-group-icon,
.menu-icon,
.account-code {
  background: var(--surface-raised) !important;
  color: var(--brand-dark);
  border-color: var(--line);
}

.menu-item.active .menu-icon {
  background: color-mix(in srgb, #ffffff 20%, var(--brand)) !important;
  color: #fff;
  border-color: color-mix(in srgb, #ffffff 30%, var(--brand));
}

.brand h1,
.page-title strong,
.section-title h3,
.form-section-title h4,
.report-titlebar h3,
.card > h3,
.workspace-card h3,
.metric strong,
.workspace-card strong,
.report-stat strong,
.theme-choice strong {
  color: var(--heading) !important;
}

.muted,
.field-hint,
.breadcrumbs,
.brand p,
.metric span,
.workspace-card span,
.theme-choice span:last-child,
label {
  color: var(--muted) !important;
}

table {
  background: var(--surface-raised) !important;
}

td {
  background: var(--surface-raised);
  color: var(--text);
}

tbody tr:nth-child(even) td {
  background: var(--table-alt-bg) !important;
}

tbody tr:hover td,
.table-shell tbody tr:hover td {
  background: var(--row-hover-bg) !important;
}

.empty-state {
  background: var(--surface-subtle) !important;
  color: var(--muted);
}

.note {
  background: var(--warn-soft) !important;
}

.note.ok {
  background: var(--good-soft) !important;
}

.note.bad,
.bad-text {
  background: var(--bad-soft) !important;
}

/* Phase 2 ERP Document Workspace
   Transaction forms need a consistent document control frame so users can see
   status, document number, editability, and the main actions without hunting
   through the page. These styles apply to all voucher entry forms that use the
   shared documentWorkspaceHeader/actionBar helpers. */
.transaction-workspace {
  padding: 16px;
}

.document-workspace-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(420px, .9fr) auto;
  gap: 14px;
  align-items: start;
  margin: -2px 0 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 80%, #fff), var(--surface-raised)) !important;
  box-shadow: var(--shadow-xs);
}

.document-kicker {
  margin-bottom: 5px;
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.document-workspace-header h2 {
  margin: 0;
  color: var(--heading);
  font-size: 22px;
  line-height: 1.2;
}

.document-workspace-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.document-header-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.document-header-grid span {
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 13px;
}

.document-header-grid strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.document-lock-note {
  grid-column: 1 / -1;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: 12px;
}

.document-back {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  width: auto;
  min-width: 108px;
  white-space: nowrap;
}

.read-only-document input:not([type="hidden"]),
.read-only-document select,
.read-only-document textarea {
  background: var(--surface-muted) !important;
  color: var(--muted);
  cursor: not-allowed;
}

.read-only-document .document-lock-note {
  border-color: #fedf89;
  background: var(--warn-soft) !important;
  color: var(--warn);
}

.sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 8;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin: 16px 0 0;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent) !important;
  backdrop-filter: blur(10px);
}

.sticky-actions button {
  min-width: 104px;
}

.sticky-actions button[id^="save"],
.sticky-actions .submit-action {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.sticky-actions button[id^="save"]:hover,
.sticky-actions .submit-action:hover {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
}

.allocation-summary {
  position: sticky;
  bottom: 66px;
  z-index: 5;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
}

@media (max-width: 1180px) {
  .document-workspace-header {
    grid-template-columns: 1fr;
  }

  .document-back {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .document-header-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .document-header-grid {
    grid-template-columns: 1fr;
  }

  .sticky-actions {
    justify-content: stretch;
  }

  .sticky-actions button {
    flex: 1 1 160px;
  }
}

/* Phase 3 ERP Command Center and Density Pass
   This layer reduces visual clutter in the operational shell while making the
   important workspace controls easier to scan. It is intentionally selector
   based because Horizon renders many screens from shared helpers; these rules
   upgrade the sidebar, topbar, tables, forms, and reports without changing the
   accounting or workflow code behind them. */
.topbar {
  grid-template-columns: minmax(250px, 1fr) minmax(340px, 540px) auto minmax(360px, auto) !important;
  align-items: center;
}

.page-title {
  display: grid;
  gap: 2px;
}

.page-title strong {
  font-size: 23px !important;
  letter-spacing: 0;
}

.enterprise-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.enterprise-search input {
  min-height: 38px !important;
  padding-left: 12px;
}

.command-center {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.command-button {
  min-width: auto !important;
  min-height: 38px !important;
  display: inline-grid;
  grid-template-columns: 24px auto;
  grid-template-areas:
    "icon label"
    "icon value";
  align-items: center;
  column-gap: 7px;
  row-gap: 0;
  padding: 5px 9px !important;
  white-space: nowrap;
}

.command-icon {
  grid-area: icon;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-subtle);
  color: var(--brand-dark);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
}

.command-label {
  grid-area: label;
  color: var(--heading);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
}

.command-value {
  grid-area: value;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
}

.logout-command {
  border-color: color-mix(in srgb, var(--bad) 34%, var(--line)) !important;
}

.logout-command .command-icon {
  color: var(--bad);
}

.sidebar {
  min-width: 0;
}

.nav-menu {
  padding-right: 2px;
}

.menu-group-toggle,
.menu-item {
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.menu-group.open .menu-group-toggle {
  background: color-mix(in srgb, var(--brand-soft) 72%, var(--surface-raised)) !important;
}

.menu-item {
  position: relative;
}

.menu-item.active::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 999px;
  background: #fff;
}

.shell.sidebar-collapsed .menu-group {
  overflow: visible;
}

.shell.sidebar-collapsed .menu-group-toggle,
.shell.sidebar-collapsed .menu-item {
  width: 42px;
  min-height: 38px;
  padding: 6px !important;
  margin-inline: auto;
}

.shell.sidebar-collapsed .menu-group-icon,
.shell.sidebar-collapsed .menu-icon {
  width: 26px;
  min-width: 26px;
}

.shell.sidebar-collapsed .menu-chevron {
  display: none;
}

.content > .card,
.content > .report-card,
.content > .dialog-card,
.content > .master-workspace,
.content > .transaction-workspace {
  animation: workspaceIn .16s ease-out both;
}

@keyframes workspaceIn {
  from { opacity: .72; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.card,
.dense-card,
.dialog-card,
.report-card,
.workspace-card,
.metric,
.form-section,
.journal-preview,
.erp-band,
.audit-panel,
.table-shell,
.filter-panel {
  border-color: color-mix(in srgb, var(--line) 82%, #fff) !important;
}

.form-section {
  padding: 12px !important;
}

.form-section-title {
  min-height: 28px;
  margin-bottom: 10px !important;
}

.form-row {
  gap: 10px !important;
  margin-bottom: 9px !important;
}

label {
  margin-bottom: 4px !important;
}

input,
select,
textarea {
  min-height: 34px !important;
  padding: 7px 9px !important;
}

textarea {
  min-height: 68px !important;
}

.filter-shell {
  border-radius: var(--radius-lg);
}

.filter-toggle {
  min-height: 34px !important;
  padding: 7px 11px !important;
}

.filter-panel {
  grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
  padding: 11px !important;
}

.filter-panel button {
  align-self: end;
}

.table-shell {
  overflow: auto;
  max-height: min(68vh, 760px);
}

th {
  top: 0;
  padding: 8px 10px !important;
}

td {
  padding: 8px 10px !important;
  vertical-align: middle;
}

.table-actions,
.action-cell,
.row-actions {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-end;
}

.table-actions button,
.action-cell button,
.row-actions button {
  min-height: 28px !important;
  padding: 4px 8px !important;
}

.table-pager {
  min-height: 38px;
  align-items: center;
}

.report-card {
  border-radius: 12px !important;
}

.report-titlebar {
  padding: 14px 16px !important;
}

.report-card #reportPane {
  padding: 14px 16px 16px !important;
}

.document-workspace-header {
  grid-template-columns: minmax(260px, 1.15fr) minmax(380px, .95fr) auto !important;
  padding: 14px !important;
}

.transaction-workspace {
  padding: 14px !important;
}

.document-header-grid span {
  min-height: 44px !important;
}

.sticky-actions {
  gap: 7px !important;
  padding: 9px !important;
}

.sticky-actions button {
  min-height: 34px !important;
}

.modal {
  width: min(920px, calc(100vw - 36px));
}

.modal h3 {
  min-height: 52px;
  display: flex;
  align-items: center;
}

.empty-state.compact {
  padding: 12px !important;
}

@media (max-width: 1500px) {
  .topbar {
    grid-template-columns: minmax(240px, 1fr) minmax(300px, 480px) !important;
  }

  .command-center {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1120px) {
  .topbar {
    grid-template-columns: 1fr !important;
  }

  .enterprise-search,
  .company-chip,
  .command-center {
    grid-column: 1 / -1;
  }

  .command-center {
    justify-content: flex-start !important;
  }

  .command-button {
    grid-template-columns: 24px auto;
  }
}

@media (max-width: 760px) {
  .command-button {
    grid-template-columns: 24px;
    grid-template-areas: "icon";
    padding: 6px !important;
  }

  .command-label,
  .command-value {
    display: none;
  }

  .enterprise-search {
    grid-template-columns: 1fr;
  }

  .table-shell {
    max-height: none;
  }
}

/* Phase 4 ERP Workspace Cards and Drill-Down Polish
   This pass upgrades high-frequency finance surfaces: dashboard KPIs,
   operational action cards, document registers, and voucher drill-down modals.
   It keeps the existing data bindings and click handlers intact while making
   the interface easier to scan during daily accounting work. */
.finance-kpi {
  min-height: 126px;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "value value"
    "trend trend";
  align-content: start;
  gap: 7px 10px;
  text-align: left;
}

.finance-kpi::before {
  width: 4px !important;
  background: var(--brand) !important;
}

.metric-icon {
  grid-area: icon;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}

.metric-label {
  grid-area: label;
  align-self: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.finance-kpi strong {
  grid-area: value;
  margin: 5px 0 0 !important;
  color: var(--heading);
  font-size: clamp(22px, 2.1vw, 31px) !important;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.finance-kpi .trend {
  grid-area: trend;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.finance-kpi.negative::before,
.finance-kpi.negative .metric-icon {
  border-color: #fecdca;
  background: var(--bad-soft);
  color: var(--bad);
}

.finance-kpi.positive .metric-icon {
  border-color: #abefc6;
  background: var(--good-soft);
  color: var(--good);
}

.workspace-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}

.workspace-card.action-card {
  min-height: 122px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "value value"
    "note note";
  align-content: start;
  gap: 8px 10px;
  text-align: left;
}

.workspace-card.action-card::before {
  width: 4px;
}

.workspace-card.action-card .metric-icon {
  grid-area: icon;
}

.workspace-card.action-card .metric-label {
  grid-area: label;
  align-self: center;
}

.workspace-card.action-card strong {
  grid-area: value;
  margin: 4px 0 0 !important;
  font-size: 26px !important;
  line-height: 1.1;
}

.workspace-card.action-card small {
  grid-area: note;
  color: var(--muted);
  line-height: 1.35;
}

.workspace-card.action-card.attention::before {
  background: var(--warn);
}

.workspace-card.action-card.attention .metric-icon {
  border-color: #fedf89;
  background: var(--warn-soft);
  color: var(--warn);
}

.workspace-card.action-card.clear::before {
  background: var(--good);
}

.workspace-card.action-card.clear .metric-icon {
  border-color: #abefc6;
  background: var(--good-soft);
  color: var(--good);
}

.list-command-strip {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) repeat(5, minmax(118px, auto));
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
}

.list-command-strip > div {
  display: grid;
  align-content: center;
  gap: 3px;
}

.list-command-strip > div strong {
  color: var(--heading);
  font-size: 15px;
}

.list-command-strip > div span {
  color: var(--muted);
  font-size: 12px;
}

.list-stat {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 10px !important;
  border-color: var(--line) !important;
  background: var(--surface-subtle) !important;
  color: var(--text) !important;
  text-align: left;
}

.list-stat:hover {
  border-color: var(--brand) !important;
  background: var(--brand-soft) !important;
}

.list-stat strong {
  color: var(--heading);
  font-size: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.list-stat span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.list-card .section-title {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: -16px -16px 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface-subtle);
}

.document-modal {
  width: min(1080px, calc(100vw - 36px));
}

.modal-document-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 17px 18px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 74%, #fff), var(--surface-raised));
}

.modal-document-header h3 {
  min-height: auto;
  margin: 0;
  padding: 0 !important;
  border: 0;
  background: transparent !important;
}

.modal-document-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.document-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.document-summary-grid span {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.document-summary-grid strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 1280px) {
  .list-command-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .list-command-strip > div {
    grid-column: 1 / -1;
  }

  .document-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .list-command-strip,
  .document-summary-grid {
    grid-template-columns: 1fr;
  }

  .finance-kpi,
  .workspace-card.action-card {
    min-height: 110px;
  }
}

/* Phase 5 ERP Density and Report Center
   Accountants often switch between dense entry work and review/presentation
   work. The density toggle changes spacing globally without changing data,
   validation, posting, or workflow behavior. The report navigator turns the
   reporting area into a proper ERP report center with clear groups. */
:root[data-density="compact"] {
  --density-field-height: 32px;
  --density-button-height: 32px;
  --density-cell-y: 7px;
  --density-card-pad: 12px;
  --density-section-gap: 10px;
}

:root[data-density="comfortable"] {
  --density-field-height: 40px;
  --density-button-height: 40px;
  --density-cell-y: 11px;
  --density-card-pad: 18px;
  --density-section-gap: 16px;
}

input,
select,
textarea {
  min-height: var(--density-field-height) !important;
}

button {
  min-height: var(--density-button-height) !important;
}

.command-button,
.company-chip,
.enterprise-search input {
  min-height: calc(var(--density-button-height) + 2px) !important;
}

.card,
.dense-card,
.dialog-card,
.workspace-card,
.metric {
  padding: var(--density-card-pad) !important;
}

.form-section {
  padding: var(--density-card-pad) !important;
  margin-bottom: var(--density-section-gap) !important;
}

.form-row {
  margin-bottom: var(--density-section-gap) !important;
}

td {
  padding-top: var(--density-cell-y) !important;
  padding-bottom: var(--density-cell-y) !important;
}

th {
  padding-top: calc(var(--density-cell-y) + 1px) !important;
  padding-bottom: calc(var(--density-cell-y) + 1px) !important;
}

:root[data-density="comfortable"] .content {
  padding: 26px;
}

:root[data-density="comfortable"] .table-shell {
  max-height: min(72vh, 820px);
}

:root[data-density="comfortable"] .finance-kpi {
  min-height: 142px;
}

:root[data-density="comfortable"] .workspace-card.action-card {
  min-height: 138px;
}

:root[data-density="compact"] .modal .form-body {
  padding: 14px;
}

:root[data-density="compact"] .document-workspace-header {
  padding: 12px !important;
}

.report-navigator {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  align-items: stretch;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
}

.report-navigator > div:first-child {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-soft), var(--surface-raised));
}

.report-navigator > div:first-child strong {
  color: var(--heading);
  font-size: 15px;
}

.report-navigator > div:first-child span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.report-navigator details {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  overflow: hidden;
}

.report-navigator summary {
  min-height: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.report-navigator summary::-webkit-details-marker {
  display: none;
}

.report-navigator summary span {
  min-width: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 11px;
}

.report-navigator details > div {
  display: grid;
  gap: 5px;
  padding: 0 8px 8px;
}

.report-nav-button {
  width: 100%;
  min-height: 30px !important;
  justify-content: flex-start;
  padding: 5px 8px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--text) !important;
  text-align: left;
  box-shadow: none !important;
}

.report-nav-button:hover {
  border-color: var(--line) !important;
  background: var(--surface-raised) !important;
  color: var(--brand-dark) !important;
}

.report-nav-button.active {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
  color: #fff !important;
}

.report-card {
  contain: layout paint;
}

.report-letterhead {
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}

.report-header-grid {
  padding: 14px 16px;
}

.statement-shell {
  max-width: 920px;
  margin: 0 auto;
}

.statement-line {
  grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
}

@media (max-width: 1180px) {
  .report-navigator {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .report-navigator {
    grid-template-columns: 1fr;
  }

  :root[data-density="comfortable"] .content {
    padding: 16px;
  }
}

/* Phase 6 Navigation Behavior Stabilization
   The shell is the most-used ERP surface. These overrides make scrolling and
   clicking predictable by giving the sidebar, main workspace, and topbar clear
   ownership of their own space. They also stop the command bar from creating
   very tall headers on laptop widths. */
.shell,
.shell.sidebar-collapsed {
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

.sidebar {
  position: relative !important;
  top: auto !important;
  height: 100dvh !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

.brand {
  position: sticky;
  top: 0;
  z-index: 12;
  background: linear-gradient(180deg, var(--sidebar-start), color-mix(in srgb, var(--sidebar-start) 82%, transparent)) !important;
  backdrop-filter: blur(10px);
}

.sidebar-search {
  position: sticky;
  top: 66px;
  z-index: 11;
  margin: 0 -2px;
  padding: 6px 4px 8px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sidebar-start) 94%, transparent), color-mix(in srgb, var(--sidebar-start) 74%, transparent));
  backdrop-filter: blur(10px);
}

.main {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}

.topbar {
  position: sticky !important;
  top: 0;
  z-index: 40;
  min-height: 64px !important;
  grid-template-columns: minmax(230px, .85fr) minmax(300px, 1fr) minmax(430px, auto) !important;
  gap: 10px !important;
  padding: 9px 16px !important;
}

.topbar .page-title .muted {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar .breadcrumbs {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-chip {
  display: none !important;
}

.command-center {
  grid-column: auto !important;
  justify-content: flex-end !important;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
}

.command-button {
  flex: 0 0 auto;
  scroll-snap-align: end;
}

.menu-group-toggle {
  position: relative;
}

.menu-group-toggle:focus-visible,
.menu-item:focus-visible,
.command-button:focus-visible,
.enterprise-search button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.menu-items {
  will-change: max-height, opacity;
}

.menu-item[hidden],
.menu-group[hidden] {
  display: none !important;
}

.shell.sidebar-collapsed .brand {
  position: static;
  backdrop-filter: none;
}

.shell.sidebar-collapsed .sidebar-search {
  display: none !important;
}

.shell.sidebar-collapsed .menu-items {
  max-height: none;
}

@media (max-width: 1500px) {
  .topbar {
    grid-template-columns: minmax(220px, .8fr) minmax(270px, 1fr) minmax(380px, auto) !important;
  }

  .command-center {
    grid-column: auto !important;
    justify-content: flex-end !important;
  }

  .command-button {
    grid-template-columns: 24px;
    grid-template-areas: "icon";
    padding: 6px !important;
  }

  .command-label,
  .command-value {
    display: none;
  }
}

@media (max-width: 1120px) {
  .topbar {
    grid-template-columns: minmax(230px, 1fr) minmax(280px, 1fr) !important;
    align-items: start;
  }

  .enterprise-search {
    grid-column: 2;
  }

  .command-center {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 980px) {
  .shell,
  .shell.sidebar-collapsed {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 50;
    height: auto !important;
    max-height: 36dvh !important;
    border-bottom: 1px solid var(--line);
  }

  .main {
    height: auto !important;
    min-height: 58dvh !important;
    overflow: visible !important;
  }

  .topbar {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .enterprise-search,
  .command-center {
    grid-column: 1 !important;
  }

  .topbar .page-title .muted {
    white-space: normal;
  }

  .brand,
  .sidebar-search {
    position: static;
  }

  .shell.sidebar-mobile-collapsed .sidebar {
    max-height: 58px !important;
    overflow: hidden !important;
  }

  .shell.sidebar-mobile-collapsed .sidebar-search,
  .shell.sidebar-mobile-collapsed .nav-menu,
  .shell.sidebar-mobile-collapsed .mode-pill {
    display: none !important;
  }

  .shell.sidebar-mobile-collapsed .brand {
    border-bottom: 0;
    padding-bottom: 6px;
  }
}

/* Final icon system cleanup
   All navigation, shell-command, brand, and dashboard icons now use the same
   SVG treatment. This removes the last text-badge leftovers and prevents older
   pseudo-element logo styles from drawing on top of the real Horizon mark. */
.brand-mark::before {
  display: none !important;
  content: none !important;
}

.brand-mark {
  display: inline-grid !important;
  place-items: center !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--brand), var(--accent)) !important;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--brand) 24%, transparent) !important;
}

.brand-mark .erp-icon {
  width: 19px !important;
  height: 19px !important;
  stroke-width: 2.05 !important;
}

.menu-group-icon,
.menu-icon,
.command-icon,
.metric-icon {
  line-height: 0 !important;
}

.menu-group-icon svg,
.menu-icon svg,
.command-icon svg,
.metric-icon svg {
  display: block !important;
  flex: 0 0 auto !important;
}

.menu-group-icon,
.menu-icon {
  background: color-mix(in srgb, var(--brand-soft) 78%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line)) !important;
}

.menu-item.active .menu-icon {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .24) !important;
  color: #fff !important;
}

.command-icon {
  background: transparent !important;
  border: 0 !important;
}

.command-icon .erp-icon {
  width: 16px !important;
  height: 16px !important;
}

.metric-icon {
  font-size: 0 !important;
}

.metric-icon .erp-icon {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 1.9 !important;
}

.finance-kpi.negative .metric-icon .erp-icon,
.finance-kpi.positive .metric-icon .erp-icon,
.workspace-card.action-card .metric-icon .erp-icon {
  color: currentColor !important;
}

.shell.sidebar-collapsed .menu-group-icon {
  background: transparent !important;
  border: 0 !important;
}

.shell.sidebar-collapsed .menu-group.active-group .menu-group-icon {
  color: #fff !important;
}

/* Phase 7 Fresh Shell UX Reset
   Final navigation override after QA: the topbar is for page context/search/actions,
   while the sidebar owns menu expansion. This prevents the previous confusing
   behavior where a "Menu" command lived in the topbar and collapsed navigation
   into a crowded icon rail. */
:root {
  --text-body: 13px;
  --text-table: 12px;
  --text-caption: 11px;
  --text-page-title: 20px;
  --text-section-title: 15px;
  --text-card-title: 13px;
  --text-kpi: 25px;
}

body,
button,
input,
select,
textarea {
  font-size: var(--text-body) !important;
}

.shell {
  grid-template-columns: 276px minmax(0, 1fr) !important;
}

.shell.sidebar-collapsed {
  grid-template-columns: 68px minmax(0, 1fr) !important;
}

.sidebar {
  padding: 10px 8px !important;
}

.brand {
  padding: 6px 6px 10px !important;
}

.brand-lockup {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  gap: 8px !important;
  align-items: center;
}

.brand-mark {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  font-size: 14px;
}

.brand h1 {
  font-size: 16px !important;
  line-height: 1.15;
}

.brand p {
  font-size: 11px !important;
}

.sidebar-toggle-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px !important;
  display: inline-grid;
  place-items: center;
  gap: 3px;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  background: var(--surface-raised) !important;
  box-shadow: var(--shadow-xs);
}

.sidebar-toggle-button span {
  width: 14px;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: var(--heading);
}

.sidebar-toggle-button:hover {
  border-color: var(--brand) !important;
  background: var(--brand-soft) !important;
}

.mode-pill {
  min-height: 20px !important;
  margin-top: 7px !important;
  padding: 2px 7px !important;
  font-size: 10px !important;
}

.sidebar-search {
  top: 58px !important;
}

.sidebar-search input {
  min-height: 30px !important;
  font-size: 12px !important;
}

.menu-group {
  border-radius: 9px !important;
}

.menu-group-toggle {
  min-height: 33px !important;
  grid-template-columns: 25px minmax(0, 1fr) auto auto !important;
  gap: 7px !important;
  padding: 5px 7px !important;
}

.menu-group-icon,
.menu-icon {
  min-width: 24px !important;
  width: 24px !important;
  height: 22px !important;
  border-radius: 6px !important;
  font-size: 9px !important;
}

.menu-group-title,
.menu-item,
.sidebar button,
.sidebar a {
  font-size: 12px !important;
}

.menu-count {
  min-width: 20px !important;
  height: 20px !important;
  font-size: 10px !important;
}

.menu-section {
  padding: 8px 7px 4px !important;
  font-size: 9px !important;
}

.menu-items {
  padding: 0 5px 7px 34px !important;
}

.menu-item {
  min-height: 29px !important;
  grid-template-columns: 25px minmax(0, 1fr) !important;
  gap: 7px !important;
  padding: 4px 7px !important;
}

.shell.sidebar-collapsed .sidebar {
  padding: 10px 7px !important;
}

.shell.sidebar-collapsed .brand-lockup {
  grid-template-columns: 1fr !important;
  justify-items: center;
}

.shell.sidebar-collapsed .brand h1,
.shell.sidebar-collapsed .brand p,
.shell.sidebar-collapsed .mode-pill,
.shell.sidebar-collapsed .sidebar-search,
.shell.sidebar-collapsed .menu-count,
.shell.sidebar-collapsed .menu-section,
.shell.sidebar-collapsed .menu-label,
.shell.sidebar-collapsed .menu-group-title,
.shell.sidebar-collapsed .menu-chevron {
  display: none !important;
}

.shell.sidebar-collapsed .brand-mark {
  width: 34px !important;
  height: 34px !important;
}

.shell.sidebar-collapsed .sidebar-toggle-button {
  width: 34px;
  min-width: 34px;
}

.shell.sidebar-collapsed .nav-menu {
  gap: 7px !important;
  align-items: center;
}

.shell.sidebar-collapsed .menu-group {
  width: 44px;
  border: 0 !important;
  background: transparent !important;
}

.shell.sidebar-collapsed .menu-group-toggle {
  width: 42px !important;
  min-height: 40px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center;
  padding: 6px !important;
  margin: 0 auto !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-raised) !important;
}

.shell.sidebar-collapsed .menu-group.active-group .menu-group-toggle {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
}

.shell.sidebar-collapsed .menu-group.active-group .menu-group-icon {
  color: #fff !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, .25) !important;
}

.shell.sidebar-collapsed .menu-items {
  display: none !important;
}

.topbar {
  min-height: 58px !important;
  grid-template-columns: minmax(240px, .82fr) minmax(320px, 1fr) auto !important;
  gap: 8px !important;
  padding: 8px 14px !important;
}

.page-title strong {
  font-size: var(--text-page-title) !important;
  line-height: 1.1 !important;
}

.breadcrumbs,
.page-title .muted {
  font-size: 11px !important;
}

.enterprise-search {
  grid-template-columns: minmax(220px, 1fr) 74px !important;
}

.enterprise-search input {
  min-height: 32px !important;
  font-size: 12px !important;
}

.enterprise-search button {
  min-height: 32px !important;
  padding: 5px 9px !important;
  font-size: 12px !important;
}

.command-center {
  gap: 5px !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

.command-button {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  grid-template-columns: 1fr !important;
  grid-template-areas: "icon" !important;
  padding: 4px !important;
  border-radius: 8px !important;
}

.command-icon {
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 9px !important;
}

.command-more {
  position: relative;
  display: inline-flex;
}

.command-more summary {
  list-style: none;
  cursor: pointer;
}

.command-more summary::-webkit-details-marker {
  display: none;
}

.command-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  width: 208px;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.command-menu-button {
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 34px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  gap: 8px !important;
  text-align: left;
}

.command-menu-button span:last-child {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.command-label,
.command-value {
  display: none !important;
}

.content {
  padding: 18px !important;
}

.section-title h3,
.form-section-title h4,
.report-titlebar h3 {
  font-size: var(--text-section-title) !important;
}

table,
.table-cell,
td,
th {
  font-size: var(--text-table) !important;
}

.finance-kpi strong,
.metric strong {
  font-size: var(--text-kpi) !important;
}

@media (max-width: 1120px) {
  .topbar {
    grid-template-columns: minmax(220px, 1fr) minmax(320px, 1fr) !important;
  }

  .command-center {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 980px) {
  .shell,
  .shell.sidebar-collapsed {
    grid-template-columns: 1fr !important;
  }

  .brand-lockup {
    grid-template-columns: 32px minmax(0, 1fr) 32px !important;
  }

  .topbar {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    padding: 7px 10px !important;
  }

  .page-title {
    grid-column: 1;
  }

  .page-title strong {
    font-size: 18px !important;
  }

  .breadcrumbs,
  .page-title .muted {
    display: none !important;
  }

  .enterprise-search {
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) 64px !important;
  }

  .enterprise-search input,
  .enterprise-search button {
    min-height: 30px !important;
  }

  .command-center {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-content: flex-end !important;
    max-width: max-content;
  }

  .command-button {
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
  }

  .command-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 8px !important;
  }
}

@media (max-width: 860px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .company-chip {
    display: none !important;
  }

  .command-center {
    gap: 4px !important;
  }

  .document-workspace-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 9px 10px !important;
  }

  .document-workspace-header p {
    display: none !important;
  }

  .document-header-grid {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .document-lock-note {
    grid-column: 1 / -1 !important;
  }

  .document-back {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    min-width: 84px !important;
  }

  .transaction-workspace .form-row,
  .transaction-workspace .form-row.two,
  .transaction-workspace .form-section:has(#sourceVoucherId) .form-row,
  .transaction-workspace .form-section:has(#sourceVoucherId) .form-row.two,
  .transaction-workspace .form-section:has(#purchaseSourceDoc) .form-row,
  .transaction-workspace .form-section:has(#purchaseSourceDoc) .form-row.two,
  .transaction-workspace .form-section:has(#linkedPo) .form-row,
  .transaction-workspace .form-section:has(#linkedPo) .form-row.two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .transaction-workspace .input-table {
    min-width: 720px !important;
  }
}

/* Phase 8 Entry Workspace Compression
   Measurements showed voucher headers and early form sections were consuming
   too much vertical space. This layer makes entry screens behave like dense ERP
   work areas: compact header, tighter sections, and readable line grids. */
.transaction-workspace {
  padding: 10px !important;
}

.document-workspace-header {
  grid-template-columns: minmax(280px, 1fr) minmax(420px, auto) auto !important;
  gap: 10px !important;
  align-items: stretch !important;
  margin: 0 0 10px !important;
  padding: 10px 12px !important;
}

.document-workspace-header h2 {
  font-size: 20px !important;
  line-height: 1.12 !important;
}

.document-workspace-header p {
  max-width: 680px;
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.35;
}

.document-kicker {
  margin-bottom: 4px !important;
  font-size: 10px !important;
}

.document-header-grid {
  grid-template-columns: repeat(4, minmax(96px, 1fr)) !important;
  gap: 7px !important;
}

.document-header-grid span {
  min-height: 42px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
}

.document-header-grid strong {
  font-size: 10px !important;
}

.document-lock-note {
  min-height: 30px;
  align-content: center;
  padding: 6px 8px !important;
  font-size: 11px !important;
}

.document-back {
  min-width: 96px !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
}

.transaction-workspace .form-section {
  margin-bottom: 9px !important;
  padding: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
}

.transaction-workspace .form-section-title {
  min-height: 36px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--line);
  background: var(--surface-subtle);
}

.transaction-workspace .form-section-title h4 {
  font-size: 13px !important;
  letter-spacing: .04em !important;
}

.transaction-workspace .form-section > :not(.form-section-title) {
  margin-left: 12px;
  margin-right: 12px;
}

.transaction-workspace .form-section > .form-row:first-of-type,
.transaction-workspace .form-section > .input-table:first-of-type,
.transaction-workspace .form-section > table:first-of-type,
.transaction-workspace .form-section > .toolbar:first-of-type,
.transaction-workspace .form-section > .audit-panel:first-of-type,
.transaction-workspace .form-section > .attachment-panel:first-of-type {
  margin-top: 10px;
}

.transaction-workspace .form-section > :last-child {
  margin-bottom: 10px;
}

.transaction-workspace .form-section:has(#sourceVoucherId) .form-row,
.transaction-workspace .form-section:has(#sourceVoucherId) .form-row.two,
.transaction-workspace .form-section:has(#purchaseSourceDoc) .form-row,
.transaction-workspace .form-section:has(#purchaseSourceDoc) .form-row.two,
.transaction-workspace .form-section:has(#linkedPo) .form-row,
.transaction-workspace .form-section:has(#linkedPo) .form-row.two {
  grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
}

.transaction-workspace .form-section:has(#sourceVoucherId) .field-hint,
.transaction-workspace .form-section:has(#purchaseSourceDoc) .field-hint,
.transaction-workspace .form-section:has(#linkedPo) .field-hint {
  margin-top: 2px !important;
  font-size: 10.5px !important;
  line-height: 1.25;
}

.transaction-workspace .form-section:first-of-type .form-row:not(.two) {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
}

.transaction-workspace .form-section:has(#purchaseSourceDoc) .form-row.two {
  grid-template-columns: minmax(240px, 1fr) auto !important;
  align-items: end;
}

.transaction-workspace .form-row,
.transaction-workspace .form-row.two {
  grid-template-columns: repeat(4, minmax(170px, 1fr)) !important;
  gap: 9px !important;
  margin-bottom: 9px !important;
}

.transaction-workspace label {
  font-size: 10.5px !important;
  margin-bottom: 3px !important;
}

.transaction-workspace input,
.transaction-workspace select,
.transaction-workspace textarea {
  min-height: 32px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
}

.transaction-workspace textarea {
  min-height: 58px !important;
}

.transaction-workspace .input-table {
  min-width: 780px !important;
}

.transaction-workspace .input-table th,
.transaction-workspace .input-table td {
  padding: 6px 8px !important;
}

.transaction-workspace .input-table input,
.transaction-workspace .input-table select {
  min-width: 110px !important;
  min-height: 31px !important;
}

.transaction-workspace .toolbar {
  min-height: 36px;
  gap: 6px !important;
}

.attachment-panel {
  display: grid;
  gap: 8px;
}

.audit-panel {
  padding: 10px !important;
  gap: 4px !important;
}

.sticky-actions {
  min-height: 46px;
  margin-top: 10px !important;
  padding: 7px 8px !important;
}

.sticky-actions button {
  min-width: 92px !important;
  min-height: 32px !important;
  padding: 5px 9px !important;
}

.allocation-summary {
  bottom: 56px !important;
  padding: 6px !important;
}

.page-actions {
  min-height: 42px;
  margin-bottom: 10px !important;
  padding: 7px 8px !important;
}

.page-actions .quick-search input {
  min-height: 31px !important;
}

.page-actions button,
.page-actions select {
  min-height: 31px !important;
  padding: 5px 9px !important;
}

@media (max-width: 1180px) {
  .document-workspace-header {
    grid-template-columns: 1fr !important;
  }

  .document-header-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .transaction-workspace .form-row,
  .transaction-workspace .form-row.two {
    grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .document-header-grid,
  .transaction-workspace .form-row,
  .transaction-workspace .form-row.two {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 861px) and (max-width: 980px) {
  .topbar {
    grid-template-columns: minmax(220px, .9fr) minmax(300px, 1fr) auto !important;
    min-height: 66px !important;
    align-items: center !important;
  }

  .enterprise-search {
    grid-column: auto !important;
  }

  .command-center {
    grid-column: auto !important;
    justify-content: flex-end !important;
  }

  .document-workspace-header {
    grid-template-columns: minmax(240px, 1fr) minmax(360px, .95fr) auto !important;
    align-items: start !important;
  }

  .document-header-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .document-back {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  .transaction-workspace .form-row,
  .transaction-workspace .form-row.two {
    grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
  }
}

/* Final UI QA overrides
   These rules live last because earlier historical layers contained several
   broad responsive overrides. Keeping the fixes here makes the cascade explicit:
   tablet gets a single clean topbar row, and smaller transaction headers avoid
   the tall stacked layout that made voucher entry feel oversized. */
@media (min-width: 861px) and (max-width: 980px) {
  .topbar {
    grid-template-columns: minmax(220px, .82fr) minmax(320px, 1fr) auto !important;
    min-height: 66px !important;
    align-items: center !important;
  }

  .page-title {
    grid-column: 1 !important;
  }

  .enterprise-search {
    grid-column: 2 !important;
  }

  .company-chip {
    display: none !important;
  }

  .command-center {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-content: flex-end !important;
  }

  .document-header-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .document-workspace-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 9px 10px !important;
  }

  .document-workspace-header p {
    display: none !important;
  }

  .document-header-grid {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .document-lock-note {
    grid-column: 1 / -1 !important;
  }

  .document-back {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
}

@media (max-width: 640px) {
  .document-header-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.quick-search::before {
  display: none !important;
}

.quick-search input,
.page-actions .quick-search input {
  padding-left: 12px !important;
}

/* Icon polish and collapsed-sidebar stabilization
   The old two-letter icon placeholders made the ERP shell look unfinished and
   caused the collapsed rail to feel noisy. Inline SVG icons keep the interface
   sharp at every density and make the collapsed menu behave like a real rail. */
.erp-icon {
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
}

.brand-mark {
  font-size: 0 !important;
  color: #fff;
}

.brand-mark::before {
  content: "";
  width: 17px;
  height: 17px;
  display: block;
  border: 2px solid currentColor;
  border-radius: 5px;
  box-shadow: inset 0 -6px 0 color-mix(in srgb, currentColor 18%, transparent);
}

.menu-group-icon,
.menu-icon,
.command-icon {
  display: inline-grid !important;
  place-items: center !important;
  color: var(--brand) !important;
}

.menu-group-icon .erp-icon,
.menu-icon .erp-icon {
  width: 15px;
  height: 15px;
}

.command-icon .erp-icon {
  width: 15px;
  height: 15px;
}

.menu-item.active .menu-icon {
  color: #fff !important;
}

.menu-group.active-group .menu-group-icon {
  color: var(--brand) !important;
}

.shell.sidebar-collapsed .menu-group.active-group .menu-group-icon {
  color: #fff !important;
}

.command-button:hover .command-icon,
.command-more[open] > summary .command-icon {
  color: var(--brand-strong, var(--brand)) !important;
}

.shell.sidebar-collapsed .sidebar {
  width: auto !important;
}

.shell.sidebar-collapsed {
  grid-template-columns: 68px minmax(0, 1fr) !important;
}

.shell.sidebar-collapsed .brand {
  padding: 6px 0 10px !important;
}

.shell.sidebar-collapsed .brand-lockup {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.shell.sidebar-collapsed .sidebar-toggle-button {
  order: -1;
  width: 36px !important;
  min-width: 36px !important;
  height: 34px !important;
  margin: 0 auto !important;
}

.shell.sidebar-collapsed .brand-mark {
  width: 36px !important;
  height: 36px !important;
  margin: 0 auto !important;
}

.shell.sidebar-collapsed .nav-menu {
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
}

.shell.sidebar-collapsed .menu-group {
  width: 44px !important;
  min-width: 44px !important;
  margin: 0 auto !important;
}

.shell.sidebar-collapsed .menu-group-toggle {
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 11px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
}

.shell.sidebar-collapsed .menu-group-toggle:hover {
  transform: none !important;
}

.shell.sidebar-collapsed .menu-group-icon {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  background: transparent !important;
  border: 0 !important;
}

.shell.sidebar-collapsed .menu-group-icon .erp-icon {
  width: 17px;
  height: 17px;
}

.shell.sidebar-collapsed .menu-group:not(.active-group) .menu-group-toggle:hover {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line)) !important;
  background: var(--brand-soft) !important;
}

.shell.sidebar-collapsed .menu-group:not(.active-group) .menu-group-toggle:hover .menu-group-icon {
  color: var(--brand) !important;
}

@media (max-width: 980px) {
  .sidebar-toggle-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  .shell.sidebar-mobile-collapsed .brand-lockup {
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  }

  .shell.sidebar-mobile-collapsed .brand {
    min-height: 48px !important;
  }
}

/* General ERP UI alignment pass
   This final layer is intentionally visual-only. It normalizes controls, tables,
   cards, badges, modals, and message states across the many legacy screen
   renderers without touching accounting or data flow. */
:root {
  --ui-control-h: 34px;
  --ui-radius: 9px;
  --ui-border: color-mix(in srgb, var(--line) 86%, var(--ink) 14%);
}

.topbar {
  border-bottom: 1px solid var(--line) !important;
}

.page-title {
  min-width: 0;
}

.page-title strong,
.section-title h3,
.form-section-title h4,
.card > h3,
.dialog-card h2,
.dialog-card h3,
.modal h3 {
  color: var(--heading) !important;
  letter-spacing: 0 !important;
}

button,
.action-button,
.table-actions button,
.row-actions button,
.action-cell button,
.page-actions button,
.form-actions button {
  min-height: var(--ui-control-h) !important;
  border-radius: var(--ui-radius) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
}

button:not(.command-button):not(.sidebar-toggle-button):not(.menu-group-toggle):not(.menu-item) {
  padding: 7px 12px !important;
}

input,
select,
textarea {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  font-size: 13px !important;
}

input,
select {
  min-height: var(--ui-control-h) !important;
}

textarea {
  line-height: 1.45 !important;
}

label {
  color: var(--muted-strong, var(--muted)) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

.card,
.dialog-card,
.form-section,
.report-card,
.table-shell,
.filter-panel,
.page-actions,
.modal,
.empty-state,
.note {
  border-color: var(--line) !important;
  border-radius: 12px !important;
}

.card,
.dialog-card,
.form-section,
.report-card {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

.content {
  gap: 14px !important;
}

.section-title,
.form-section-title,
.report-titlebar {
  align-items: center !important;
}

.section-title {
  min-height: 40px;
  gap: 10px !important;
}

.form-row,
.form-row.two,
.grid.two,
.grid.three,
.grid.four {
  align-items: end !important;
}

.form-section {
  overflow: clip;
}

.form-section-title {
  background: linear-gradient(180deg, var(--surface-subtle), color-mix(in srgb, var(--surface-subtle) 72%, #fff)) !important;
}

.table-shell {
  overflow: auto !important;
  background: var(--surface) !important;
}

.table-shell table,
.input-table,
.report-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
}

.table-shell th,
.input-table th,
.report-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-subtle) !important;
  color: var(--muted-strong, var(--muted)) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line) !important;
}

.table-shell td,
.input-table td,
.report-table td {
  color: var(--ink) !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  vertical-align: middle !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important;
}

.table-shell tbody tr:hover td,
.input-table tbody tr:hover td {
  background: color-mix(in srgb, var(--brand-soft) 34%, #fff) !important;
}

.right,
.amount,
.amount-cell,
.lineTotal,
td.right,
th.right {
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}

.pill,
.badge,
.status-badge,
.status-pill,
.status-cell span,
[class*="status-"] {
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .035em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.note,
.empty-state,
.loading-card {
  color: var(--muted-strong, var(--muted)) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

.note.ok {
  background: color-mix(in srgb, var(--good) 10%, #fff) !important;
}

.note.bad {
  background: color-mix(in srgb, var(--bad) 9%, #fff) !important;
}

.empty-state {
  min-height: 72px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 6px !important;
}

.modal-backdrop {
  backdrop-filter: blur(8px) !important;
}

.modal {
  max-width: min(760px, calc(100vw - 32px)) !important;
  overflow: hidden !important;
}

.modal h3 {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 18px !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--surface-subtle) !important;
}

.modal .form-body,
.modal form {
  max-height: min(72vh, 680px) !important;
  overflow: auto !important;
}

.modal .form-actions,
.sticky-actions,
.page-actions {
  background: color-mix(in srgb, var(--surface) 94%, var(--brand-soft)) !important;
  border-color: var(--line) !important;
}

.loading-card::after {
  border-color: var(--brand) transparent var(--brand) transparent !important;
}

@media (max-width: 980px) {
  .content {
    padding: 14px !important;
  }

  .page-actions,
  .filter-panel {
    gap: 8px !important;
  }

  .topbar {
    border-bottom: 1px solid var(--line) !important;
  }
}

/* Final UI/UX audit fixes
   This override is intentionally presentation-only. It removes conflicting legacy
   icon paint, tightens dense ERP work surfaces, and keeps the shell predictable
   across collapsed, desktop, tablet, and report/listing views. */
.brand-mark::before,
.quick-search::before {
  content: none !important;
  display: none !important;
}

.brand-mark {
  display: inline-grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.brand-mark .erp-icon {
  width: 19px !important;
  height: 19px !important;
  stroke-width: 2.05 !important;
}

.shell.sidebar-collapsed .brand-mark .erp-icon {
  width: 18px !important;
  height: 18px !important;
}

.shell.sidebar-collapsed .sidebar {
  overflow-x: hidden !important;
}

.shell.sidebar-collapsed .menu-group-toggle {
  cursor: pointer !important;
}

.menu-item,
.menu-group-toggle,
.command-button,
.command-menu-button {
  -webkit-tap-highlight-color: transparent;
}

.menu-item.active,
.menu-group.active-group .menu-group-toggle {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand) 80%, #fff 20%) !important;
}

.shell.sidebar-collapsed .menu-group.active-group .menu-group-toggle {
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 18%, transparent) !important;
}

.page-actions,
.list-toolbar,
.filter-panel,
.report-filter-panel {
  align-items: end !important;
}

.page-actions > *,
.filter-panel > *,
.report-filter-panel > * {
  min-width: 0 !important;
}

.filter-panel button,
.report-filter-panel button,
.page-actions button {
  white-space: nowrap !important;
}

.filter-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.filter-chips span {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.table-shell th,
.table-shell td,
.input-table th,
.input-table td,
.report-table th,
.report-table td {
  padding: 8px 10px !important;
}

.table-shell td:first-child,
.table-shell th:first-child,
.input-table td:first-child,
.input-table th:first-child,
.report-table td:first-child,
.report-table th:first-child {
  padding-left: 12px !important;
}

.table-shell td:last-child,
.table-shell th:last-child,
.input-table td:last-child,
.input-table th:last-child,
.report-table td:last-child,
.report-table th:last-child {
  padding-right: 12px !important;
}

.table-shell td .action-row,
.table-shell td .toolbar,
.action-cell,
.row-actions,
.table-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

.table-shell td button,
.input-table td button {
  min-height: 28px !important;
  padding: 5px 8px !important;
  font-size: 11.5px !important;
}

.form-section,
.card,
.report-card {
  min-width: 0 !important;
}

.form-section-title h4,
.section-title h3,
.report-titlebar h3 {
  margin: 0 !important;
}

.form-row > div,
.grid > div {
  min-width: 0 !important;
}

.empty-state,
.note,
.field-error,
.field-hint {
  overflow-wrap: anywhere !important;
}

.status-badge,
.pill,
.badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 20px !important;
  padding: 4px 8px !important;
}

.modal .table-shell,
.dialog-card .table-shell,
.card .table-shell {
  max-width: 100% !important;
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: minmax(230px, 1fr) minmax(240px, .9fr) auto !important;
  }

  .company-chip {
    display: none !important;
  }
}

@media (max-width: 980px) {
  .brand-lockup {
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  }

  .topbar {
    grid-template-columns: 1fr !important;
  }

  .enterprise-search {
    width: 100% !important;
  }

  .command-center {
    width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  .filter-panel,
  .report-filter-panel,
  .page-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .filter-panel,
  .report-filter-panel,
  .page-actions {
    grid-template-columns: 1fr !important;
  }

  .table-pager {
    justify-content: flex-start !important;
  }
}

/* Canonical sidebar behavior
   This is the final source of truth for the ERP navigation rail. Earlier
   iterations left multiple competing sidebar rules in the file; this layer
   normalizes the expanded, collapsed, and tablet/mobile states so the menu no
   longer jumps, clips, or mixes text-mode and icon-rail behavior. */
.shell {
  display: grid !important;
  grid-template-columns: 276px minmax(0, 1fr) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

.shell.sidebar-collapsed {
  grid-template-columns: 68px minmax(0, 1fr) !important;
}

.sidebar {
  width: auto !important;
  min-width: 0 !important;
  height: 100dvh !important;
  max-height: none !important;
  padding: 10px 9px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-right: 1px solid var(--line) !important;
  background: linear-gradient(180deg, var(--sidebar-start), var(--sidebar-end)) !important;
  scrollbar-gutter: stable;
}

.brand {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  margin: -10px -9px 0 !important;
  padding: 10px 9px 9px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important;
  background: linear-gradient(180deg, var(--sidebar-start) 74%, color-mix(in srgb, var(--sidebar-start) 86%, transparent)) !important;
}

.brand-lockup {
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  gap: 8px !important;
}

.brand h1 {
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
}

.brand p {
  margin-top: 2px !important;
  font-size: 11px !important;
  color: var(--muted) !important;
}

.brand-mark,
.sidebar-toggle-button {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
}

.sidebar-toggle-button {
  align-self: center !important;
  border-radius: 9px !important;
}

.mode-pill {
  width: fit-content !important;
  max-width: 100% !important;
}

.sidebar-search {
  position: sticky !important;
  top: 58px !important;
  z-index: 4 !important;
  margin: 0 !important;
  padding: 0 0 2px !important;
  background: var(--sidebar-start) !important;
}

.sidebar-search input {
  width: 100% !important;
}

.nav-menu {
  display: grid !important;
  gap: 7px !important;
  align-content: start !important;
}

.menu-group {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
}

.menu-group.active-group,
.menu-group.open {
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line)) !important;
}

.menu-group-toggle {
  width: 100% !important;
  min-height: 36px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

.menu-group-title,
.menu-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.menu-count {
  justify-self: end !important;
}

.menu-chevron {
  justify-self: end !important;
  color: var(--muted) !important;
}

.menu-items {
  display: grid !important;
  max-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  padding: 0 6px 0 36px !important;
  overflow: hidden !important;
  transition: max-height .18s ease, opacity .12s ease, padding .18s ease !important;
}

.menu-group.open .menu-items {
  max-height: 760px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: 2px 6px 8px 36px !important;
}

.menu-section {
  margin: 7px 0 3px !important;
}

.menu-item {
  width: 100% !important;
  min-height: 31px !important;
  display: grid !important;
  grid-template-columns: 25px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  text-align: left !important;
}

.menu-group-icon,
.menu-icon {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
}

.shell.sidebar-collapsed .sidebar {
  padding: 10px 8px !important;
}

.shell.sidebar-collapsed .brand {
  position: static !important;
  margin: -10px -8px 0 !important;
  padding: 8px 8px 10px !important;
}

.shell.sidebar-collapsed .brand-lockup {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  gap: 8px !important;
}

.shell.sidebar-collapsed .sidebar-toggle-button {
  order: -1 !important;
}

.shell.sidebar-collapsed .brand h1,
.shell.sidebar-collapsed .brand p,
.shell.sidebar-collapsed .mode-pill,
.shell.sidebar-collapsed .sidebar-search,
.shell.sidebar-collapsed .menu-group-title,
.shell.sidebar-collapsed .menu-label,
.shell.sidebar-collapsed .menu-count,
.shell.sidebar-collapsed .menu-chevron,
.shell.sidebar-collapsed .menu-section {
  display: none !important;
}

.shell.sidebar-collapsed .nav-menu {
  justify-items: center !important;
  gap: 8px !important;
}

.shell.sidebar-collapsed .menu-group {
  width: 44px !important;
  min-width: 44px !important;
  border: 0 !important;
  background: transparent !important;
}

.shell.sidebar-collapsed .menu-group-toggle {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px !important;
  background: var(--surface-raised) !important;
}

.shell.sidebar-collapsed .menu-group.active-group .menu-group-toggle {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

.shell.sidebar-collapsed .menu-group-icon {
  margin: 0 !important;
  color: var(--brand) !important;
  background: transparent !important;
  border: 0 !important;
}

.shell.sidebar-collapsed .menu-group.active-group .menu-group-icon {
  color: #fff !important;
}

.shell.sidebar-collapsed .menu-items {
  display: none !important;
}

@media (max-width: 980px) {
  .shell,
  .shell.sidebar-collapsed {
    display: block !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 42dvh !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .main {
    height: auto !important;
    min-height: 58dvh !important;
    overflow: visible !important;
  }

  .shell.sidebar-mobile-collapsed .sidebar {
    max-height: 58px !important;
    overflow: hidden !important;
  }

  .shell.sidebar-mobile-collapsed .sidebar-search,
  .shell.sidebar-mobile-collapsed .nav-menu,
  .shell.sidebar-mobile-collapsed .mode-pill {
    display: none !important;
  }

  .shell.sidebar-mobile-collapsed .brand {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
  }
}

/* Layout density and presentation audit
   These rules tune scale, spacing, and grid behavior only. They keep the ERP
   workspace compact enough for daily finance use while avoiding cramped tables,
   oversized cards, and uneven form/list columns. */
:root {
  --layout-gap: 12px;
  --panel-pad-y: 10px;
  --panel-pad-x: 12px;
  --dense-control-h: 31px;
}

.content {
  padding: 14px 16px !important;
  gap: var(--layout-gap) !important;
}

.grid,
.grid.two,
.grid.three,
.grid.four,
.workspace-card-grid,
.kpi-strip {
  gap: var(--layout-gap) !important;
}

.grid.four {
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)) !important;
}

@media (min-width: 1120px) {
  .grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .workspace-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.card,
.dialog-card,
.report-card,
.form-section,
.workspace-card,
.metric {
  padding: var(--panel-pad-y) var(--panel-pad-x) !important;
}

.finance-kpi {
  min-height: 92px !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 6px 9px !important;
}

.finance-kpi strong,
.metric strong {
  font-size: clamp(19px, 1.55vw, 25px) !important;
}

.finance-kpi .trend {
  min-width: 0 !important;
  font-size: 10.5px !important;
}

.finance-kpi .trend span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.metric-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
}

.workspace-card.action-card {
  min-height: 96px !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 6px 9px !important;
}

.workspace-card.action-card strong {
  font-size: 21px !important;
}

.workspace-card.action-card small,
.workspace-card.action-card .metric-label {
  min-width: 0 !important;
  width: 100% !important;
  justify-self: stretch !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  font-size: 10.5px !important;
  letter-spacing: .025em !important;
}

.workspace-card.action-card small {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.workspace-board {
  padding-bottom: 12px !important;
}

.section-title,
.form-section-title,
.report-titlebar {
  min-height: 34px !important;
  gap: 8px !important;
}

.section-title h3,
.form-section-title h4,
.report-titlebar h3 {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.page-actions,
.filter-panel,
.report-filter-panel,
.list-command-strip,
.report-navigator {
  padding: 9px 10px !important;
  margin-bottom: 10px !important;
}

.filter-toggle {
  width: auto !important;
  justify-content: flex-start !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
}

.filter-toggle::after {
  margin-left: auto;
}

.list-command-strip {
  grid-template-columns: minmax(220px, 1.35fr) repeat(5, minmax(104px, .65fr)) !important;
  align-items: stretch !important;
}

.list-stat {
  min-height: 44px !important;
  padding: 7px 9px !important;
}

.list-stat strong {
  font-size: 15px !important;
}

.master-grid {
  grid-template-columns: minmax(520px, 1.2fr) minmax(500px, .95fr) !important;
  gap: 14px !important;
}

.master-list .section-title,
.master-form-card > .section-title {
  padding: 10px 12px !important;
}

.master-list > .table-shell,
.master-list > .table-pager {
  margin: 0 12px 12px !important;
}

.master-form-card form {
  padding: 12px !important;
}

@media (min-width: 1181px) {
  .master-form-card {
    position: sticky !important;
    top: 92px !important;
    max-height: calc(100dvh - 112px) !important;
    overflow: auto !important;
  }
}

.master-form-card .form-section {
  padding: 10px !important;
  margin-bottom: 10px !important;
}

.master-form-card .form-row,
.master-form-card .form-row.two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.form-row,
.form-row.two,
.grid.two,
.grid.three {
  gap: 9px !important;
}

input,
select {
  min-height: var(--dense-control-h) !important;
}

textarea {
  min-height: 52px !important;
}

.table-shell {
  max-height: min(58vh, 560px) !important;
}

.table-shell th,
.table-shell td,
.input-table th,
.input-table td,
.report-table th,
.report-table td {
  padding: 6px 8px !important;
}

.input-table input,
.input-table select {
  min-height: 29px !important;
}

.transaction-workspace {
  padding: 8px !important;
}

.transaction-workspace .form-section {
  margin-bottom: 8px !important;
}

.transaction-workspace .form-section-title {
  min-height: 32px !important;
  padding: 7px 10px !important;
}

.transaction-workspace .form-section > :not(.form-section-title) {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

.transaction-workspace .form-row,
.transaction-workspace .form-row.two {
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.document-workspace-header {
  padding: 9px 10px !important;
  gap: 9px !important;
}

.document-header-grid {
  gap: 6px !important;
}

.document-header-grid span {
  min-height: 38px !important;
}

.report-stat {
  min-height: 84px !important;
}

.report-card {
  max-height: none !important;
}

.report-card .table-shell {
  max-height: min(52vh, 520px) !important;
}

.monitoring-summary,
.monitoring-area {
  padding: 10px 12px !important;
}

.monitoring-area .table-shell {
  max-height: 340px !important;
}

.monitoring-summary .table-shell {
  max-height: 300px !important;
}

#functionalMonitor:not([hidden]),
#technicalMonitor:not([hidden]) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--layout-gap) !important;
}

#functionalMonitor > .grid.four,
#technicalMonitor > .grid.four,
#functionalMonitor > .monitoring-summary,
#technicalMonitor > .monitoring-summary {
  grid-column: 1 / -1 !important;
}

#functionalMonitor .monitoring-area,
#technicalMonitor .monitoring-area {
  min-width: 0 !important;
}

#functionalMonitor .monitoring-area .table-shell,
#technicalMonitor .monitoring-area .table-shell {
  max-height: 280px !important;
}

#dbTableSearchSection,
#dbDiagnosticSection,
#dbRecordSection {
  min-width: 0 !important;
}

#dbTableSearchSection .table-shell,
#dbDiagnosticSection .table-shell {
  max-height: 330px !important;
}

#dbRecordSection .table-shell {
  max-height: min(54vh, 520px) !important;
}

.modal {
  width: min(820px, calc(100vw - 32px)) !important;
}

.modal h3 {
  min-height: 42px !important;
  padding: 0 14px !important;
}

.modal form,
.modal .form-body {
  padding: 12px !important;
}

@media (max-width: 1180px) {
  .master-grid {
    grid-template-columns: 1fr !important;
  }

  .master-form-card {
    max-width: none !important;
  }
}

@media (max-width: 760px) {
  .content {
    padding: 10px !important;
  }

  .list-command-strip,
  .report-navigator,
  .filter-panel,
  .report-filter-panel {
    grid-template-columns: 1fr !important;
  }

  #functionalMonitor:not([hidden]),
  #technicalMonitor:not([hidden]) {
    grid-template-columns: 1fr !important;
  }
}
/* Posted correction workflow messaging and confirmation dialogs */
.note {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.notice-close {
  min-height: 0 !important;
  height: 24px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  background: transparent !important;
  color: inherit !important;
  border-color: currentColor !important;
  opacity: .72;
}

.notice-close:hover {
  opacity: 1;
}

.action-dialog {
  max-width: 520px;
}

.action-dialog .form-body {
  padding-bottom: 8px;
}

.posted-edit-result textarea {
  min-height: 92px;
}