:root {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#172b3a;
  background:#f6f8fa;
  font-synthesis:none;
  --muted:#617180;
  --line:#e1e7ed;
  --accent:#116957;
  --nav:#edf4f1
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input {
  font:inherit
}
button,a,input {
  touch-action:manipulation
}
button {
  cursor:pointer
}
a {
  color:var(--accent);
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
button:disabled {
  opacity:.5;
  cursor:default
}
[hidden] {
  display:none!important
}
:focus-visible {
  outline:3px solid #5e9fe1;
  outline-offset:3px
}
.skip {
  position:absolute;
  top:-60px;
  left:12px;
  background:white;
  padding:12px;
  z-index:4
}
.skip:focus {
  top:10px
}
.topbar {
  height:80px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:30px;
  padding:0 32px
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  color:#19382f;
  font-size:24px;
  font-weight:750;
  letter-spacing:-1px
}
.brand:hover {
  text-decoration:none
}
.brand-mark {
  background:#174f40;
  color:#fff;
  border-radius:9px;
  width:33px;
  height:33px;
  display:grid;
  place-items:center;
  font-size:23px
}
.brand-sub {
  font-size:10px;
  font-weight:650;
  letter-spacing:2px;
  color:var(--muted);
  border-left:1px solid var(--line);
  padding-left:15px;
  margin-left:8px
}
.deployment {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px
}
#identity {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:15px;
  font-size:12px
}
.mono {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  overflow-wrap:anywhere
}
.badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:650;
  border:1px solid #dbe3e9;
  background:#f2f5f7;
  color:#4b5e6d;
  padding:5px 10px;
  border-radius:30px;
  white-space:nowrap
}
.badge.good {
  background:#eaf6ee;
  color:#236342;
  border-color:#cce5d5
}
.badge.warning {
  background:#fff3df;
  color:#83540f;
  border-color:#ecd9b7
}
.badge.live {
  background:#fff0e8;
  color:#a84922;
  border-color:#f3cdbb
}
.badge.test {
  background:#ecf3ff;
  color:#315da0;
  border-color:#d2e1f8
}
.notice {
  padding:13px 32px;
  background:#fff2df;
  border-bottom:1px solid #ebd7b5;
  color:#79521c;
  font-size:14px
}
.login-layout {
  min-height:calc(100vh - 81px);
  display:grid;
  grid-template-columns:1fr 440px;
  gap:100px;
  align-items:center;
  max-width:1100px;
  margin:auto;
  padding:65px 30px
}
.login-intro h1 {
  font-size:44px;
  line-height:1.16;
  font-weight:600;
  letter-spacing:-1.7px;
  margin:20px 0
}
.login-intro>p:not(.eyebrow) {
  color:var(--muted);
  line-height:1.8;
  max-width:370px
}
.intro-rule {
  width:55px;
  height:3px;
  background:#387c69;
  margin:40px 0 22px
}
.login-card {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  padding:36px;
  box-shadow:0 10px 40px #163b2610
}
.login-card h2 {
  font-size:26px;
  margin:12px 0 8px;
  letter-spacing:-.6px
}
.login-card label {
  display:block;
  font-size:13px;
  font-weight:600;
  margin:21px 0 8px
}
input {
  border:1px solid #cdd6de;
  border-radius:6px;
  padding:11px 12px;
  background:#fff;
  color:#172b3a;
  max-width:100%;
  min-width:0
}
.login-card input {
  width:100%
}
#totp {
  letter-spacing:5px;
  font-family:ui-monospace,monospace
}
.help,.small {
  font-size:12px;
  line-height:1.6
}
.help {
  color:var(--muted);
  margin:7px 0 22px
}
.muted {
  color:var(--muted)
}
.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:1.8px;
  color:var(--muted);
  margin:0
}
.button {
  border:1px solid transparent;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  min-height:38px;
  padding:9px 14px
}
.button.primary {
  color:white;
  background:var(--accent)
}
.button.primary:hover {
  background:#0a5042
}
.button.secondary {
  background:white;
  color:#314857;
  border-color:#d8e1e7
}
.button.secondary:hover:not(:disabled) {
  background:#f1f5f7
}
.wide {
  width:100%;
  min-height:44px
}
.login-card>p:last-child {
  text-align:center;
  margin-bottom:0
}
.workspace {
  display:grid;
  grid-template-columns:225px minmax(0,1fr);
  min-height:calc(100vh - 80px)
}
.sidebar {
  background:#fff;
  border-right:1px solid var(--line);
  padding:32px 18px;
  display:flex;
  flex-direction:column;
  gap:16px
}
.sidebar>.eyebrow {
  padding-left:14px
}
.nav-item {
  padding:12px 15px;
  border-radius:6px;
  background:var(--nav);
  color:#215d49;
  font-size:14px;
  font-weight:600
}
.nav-item span {
  margin-right:10px
}
.sidebar-footer {
  margin-top:auto;
  padding:36px 12px 10px
}
#roles {
  margin-top:12px;
  font-size:12px;
  line-height:1.8;
  font-weight:600
}
.content {
  padding:38px 44px;
  max-width:1500px;
  width:100%;
  margin:auto auto 0;
  align-self:start;
  margin-top:0;
  margin-bottom:0
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px
}
h1 {
  font-size:30px;
  font-weight:620;
  letter-spacing:-.8px;
  margin:10px 0
}
h2 {
  font-size:15px;
  font-weight:650;
  margin:0
}
.page-heading p {
  font-size:14px;
  margin-top:10px;
  margin-bottom:0
}
.page-heading .eyebrow {
  font-size:10px
}
.panel {
  background:white;
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden
}
.table-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 24px;
  gap:20px
}
.count {
  font-size:11px;
  padding:3px 7px;
  border-radius:5px;
  background:#eef2f6;
  color:#4b5e6d;
  margin-left:5px
}
.filter-label {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:11px;
  color:var(--muted)
}
.filter-label input {
  font-size:12px;
  width:230px;
  padding:9px 11px
}
.table-scroll {
  overflow:auto
}
table {
  border-collapse:collapse;
  width:100%;
  text-align:left;
  font-size:13px
}
th {
  color:var(--muted);
  background:#fafbfc;
  font-size:11px;
  letter-spacing:.2px;
  font-weight:600;
  padding:13px 22px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  white-space:nowrap
}
td {
  padding:19px 22px;
  border-bottom:1px solid #edf0f3;
  vertical-align:top;
  max-width:350px;
  overflow-wrap:anywhere
}
tbody tr:last-child td {
  border-bottom:0
}
tbody tr:hover {
  background:#fbfcfd
}
td a {
  font-weight:600
}
td .secondary-line {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:6px;
  overflow-wrap:anywhere
}
.pagination {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:16px 23px;
  gap:14px;
  font-size:12px
}
.pagination button+button {
  margin-left:6px
}
.empty {
  padding:45px 25px;
  text-align:center;
  font-size:14px;
  color:var(--muted)
}
.error-panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:9px
}
.error-panel button {
  margin-right:15px
}
.error-panel h2 {
  color:#273d4c;
  font-size:18px
}
.error-text {
  color:#a63426;
  font-size:13px;
  line-height:1.6
}
.loading {
  padding:30px 0;
  color:var(--muted);
  font-size:14px
}
.back-link {
  display:inline-block;
  font-size:12px;
  margin-bottom:25px
}
.tabs {
  display:flex;
  gap:28px;
  border-bottom:1px solid #dbe3e9;
  margin-bottom:25px
}
.tabs button {
  border:0;
  border-bottom:2px solid transparent;
  background:none;
  color:var(--muted);
  padding:12px 1px;
  font-size:13px;
  font-weight:600
}
.tabs button[aria-selected=true] {
  border-bottom-color:var(--accent);
  color:var(--accent)
}
.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.detail-grid>.panel {
  padding:24px
}
.full-width {
  grid-column:1/-1
}
dl {
  margin:20px 0 0
}
dl>div {
  display:grid;
  grid-template-columns:135px minmax(0,1fr);
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid #eff2f4;
  font-size:13px
}
dl>div:last-child {
  border:0
}
dt {
  color:var(--muted)
}
dd {
  margin:0;
  overflow-wrap:anywhere
}
.panel-heading {
  padding:24px 24px 13px
}
.panel-heading p {
  margin-bottom:0
}
.placement+.placement {
  border-top:1px solid var(--line);
  margin-top:22px;
  padding-top:22px
}
.attestation {
  border-top:1px solid var(--line);
  margin-top:15px;
  padding-top:12px
}
.attestation pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:12px;
  line-height:1.7
}
.subtle {
  font-size:13px;
  color:var(--muted);
  padding:12px 0
}
.role-note {
  font-size:12px;
  color:var(--muted)
}
@media(max-width:1050px) {
  .content {
    padding:28px 24px
  }
  .workspace {
    grid-template-columns:180px 1fr
  }
  .topbar {
    padding:0 20px;
    gap:20px
  }
  #staff-id {
    display:none
  }
  .login-layout {
    gap:50px
  }
  .login-intro h1 {
    font-size:35px
  }
  .table-toolbar {
    align-items:flex-start;
    flex-direction:column
  }
  .detail-grid {
    grid-template-columns:1fr
  }
  .full-width {
    grid-column:auto
  }
}
@media(max-width:700px) {
  .topbar {
    height:auto;
    min-height:75px;
    padding:15px;
    gap:15px;
    flex-wrap:wrap
  }
  .brand {
    font-size:21px
  }
  .brand-sub {
    display:none
  }
  .deployment {
    margin-left:auto;
    gap:5px;
    flex-direction:column;
    align-items:flex-end
  }
  #deployment-id {
    font-size:10px;
    max-width:150px
  }
  .workspace {
    display:block
  }
  .sidebar {
    padding:12px 18px;
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .sidebar>.eyebrow,.sidebar-footer {
    display:none
  }
  .nav-item {
    padding:9px 12px
  }
  .content {
    padding:25px 16px
  }
  .login-layout {
    display:block;
    padding:32px 18px;
    min-height:0
  }
  .login-intro {
    display:none
  }
  .login-card {
    padding:28px 25px;
    max-width:440px;
    margin:auto
  }
  .filter-label {
    flex-direction:column;
    align-items:flex-start;
    width:100%
  }
  .filter-label input {
    width:100%
  }
  .table-toolbar {
    padding:20px
  }
  .pagination {
    padding:15px
  }
  .detail-grid>.panel {
    padding:20px
  }
  h1 {
    font-size:25px
  }
  .notice {
    padding:12px 18px
  }
  .page-heading {
    align-items:flex-start
  }
  .tabs {
    gap:24px
  }
  td,th {
    padding-left:16px;
    padding-right:16px
  }
  #identity {
    margin-left:0;
    width:100%;
    justify-content:flex-end
  }
  .back-link {
    margin-bottom:20px
  }
}

.detail-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (max-width: 700px) {
  .detail-tools { flex-direction: column; align-items: flex-end; }
}

.management-actions, .dialog-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
dialog { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid #dce5e9; border-radius: 16px; padding: 28px; color: #203744; }
dialog::backdrop { background: #102f3e88; }
dialog fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
dialog label { display: block; margin: 16px 0 6px; font-weight: 600; }
dialog input:not([type=checkbox]), dialog select { width: 100%; min-height: 42px; border: 1px solid #cbd8df; border-radius: 7px; padding: 9px; font: inherit; background: white; color: inherit; }
dialog .confirm-label { display: flex; align-items: start; gap: 10px; font-size: 14px; }
dialog input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; }
dialog .dialog-buttons { margin: 22px 0 0; justify-content: flex-end; }
dialog dl { overflow-wrap: anywhere; }

/* Tenant-scoped bank management: keep long account IDs and forms readable. */
#banks-panel { padding: 24px; }
#banks-panel form { display: grid; gap: 10px; max-width: 640px; padding: 24px 0; border-top: 1px solid var(--border, #e3e7e6); margin-top: 20px; }
#banks-panel form label { margin: 0; }
#banks-panel form button { justify-self: start; margin-top: 8px; }
#banks-panel .placement { padding: 16px; margin: 16px 0; background: #f7f9f8; border-radius: 8px; }
#banks-panel p { overflow-wrap: anywhere; }
.bank-navigation {display:flex; flex-wrap:wrap; gap:8px; margin:20px 0;}
.bank-navigation .button[aria-pressed="true"], .bank-navigation .button[aria-pressed="true"]:hover:not(:disabled) {background:var(--ink,#18383b);color:white;}
#banks-panel form {max-width:720px; border-top:1px solid #dce4e4;padding-top:20px;margin-top:24px;}
#banks-panel select {width:100%; min-width:0;}
#banks-panel dd {overflow-wrap:anywhere;}
#banks-panel .table-scroll {margin:20px 0;}
#banks-panel select {min-height:44px;border:1px solid #cbd8df;border-radius:7px;padding:10px 12px;font:inherit;background:white;color:inherit;}
#banks-panel select:disabled {background:#f1f5f7;color:#637582;}
#banks-panel table {min-width:760px;table-layout:auto;}
#banks-panel td, #banks-panel th {white-space:nowrap;}
#banks-panel form > label {display:block;margin:16px 0 8px;}

/* Tenant tabs must remain usable on narrow screens. */
.tabs { flex-wrap: wrap; }
#resource-accounts { display: grid; gap: .5rem; margin-block: 1rem; }
#resource-accounts button { text-align: left; overflow-wrap: anywhere; }
#resource-entries pre { white-space: pre-wrap; overflow-wrap: anywhere; }
#resource-coa { overflow-wrap: anywhere; }

/* Ledger workspace: separate selection, browsing and account details. */
#resources-panel { padding: 28px; min-width: 0; }
.resource-heading, .resource-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.resource-heading h2, .resource-heading h3 { margin: 0; }
.resource-heading p { margin: 8px 0 0; }
.resource-toolbar { justify-content: flex-start; }
.resource-ledger-section { margin: 24px 0; padding: 20px; background: #f6f8fa; border: 1px solid var(--line); border-radius: 10px; }
.resource-field { display: grid; gap: 8px; min-width: 0; }
.resource-field label { margin: 0; font-size: 13px; font-weight: 650; }
#resources-panel input, #resources-panel select { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid #cbd8df; border-radius: 7px; font: inherit; background: white; color: inherit; }
#resource-chart { margin-top: 16px; font-size: 13px; }
#resource-chart summary { cursor: pointer; color: var(--accent); }
#resource-coa { line-height: 1.7; margin-bottom: 0; }
.resource-accounts-heading { margin-bottom: 20px; }
#resource-search-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(140px, 190px) auto; align-items: end; gap: 14px; }
#resource-search-form button { min-height: 44px; }
#resource-accounts { margin: 20px 0; gap: 8px; }
#resource-accounts button { width: 100%; padding: 16px; white-space: normal; justify-content: flex-start; }
#resource-accounts > p { padding: 32px 20px; margin: 0; text-align: center; color: var(--muted); background: #f6f8fa; border: 1px dashed #cbd8df; border-radius: 8px; }
#resource-detail { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); min-width: 0; }
#resource-detail .management-actions { margin: 0; }
#resource-detail dl { overflow-wrap: anywhere; }
#resource-entries pre { padding: 16px; background: #f6f8fa; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
#resource-message:empty, #resource-pending:empty { display: none; }
#resource-message:not(:empty) { padding: 14px 16px; background: #edf4f1; border-radius: 8px; line-height: 1.6; }
@media (max-width: 900px) {
  #resource-search-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #resource-search-form > .resource-field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  #resources-panel { padding: 20px; }
  .resource-heading { align-items: flex-start; flex-direction: column; }
  .resource-toolbar { width: 100%; }
  .resource-toolbar .button { flex: 1; }
  .resource-ledger-section { padding: 16px; }
  #resource-search-form { grid-template-columns: minmax(0, 1fr); }
  #resource-detail dl > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* Tenant chart authoring keeps wide rule tables inside the dialog. */
dialog:has(.chart-editor) { width: min(1040px, calc(100vw - 32px)); }
.chart-editor { margin-top: 24px; }
.chart-editor .table-scroll { overflow-x: auto; }
.chart-editor table { min-width: 720px; width: 100%; }
.chart-editor textarea { width: 100%; min-height: 90px; font: inherit; padding: 10px; box-sizing: border-box; }
.chart-editor details { margin: 18px 0; }
.chart-editor .button, #chart-suggestions .button { margin: 6px 8px 6px 0; }

.movement-editor {display:grid;gap:1rem}.movement-editor label {display:grid;gap:.35rem;margin:.6rem 0}.movement-editor fieldset {border:1px solid var(--border,#ccd2da);border-radius:8px;padding:1rem;margin:.8rem 0}.movement-editor input,.movement-editor select{width:100%}#movement-history pre{white-space:pre-wrap;overflow-wrap:anywhere}#movement-history details{padding:.6rem 0}

/* Compact account statement: money columns stay readable on narrow screens. */
#resource-entries table { width:100%; }
#resource-entries th:nth-last-child(-n+2), #resource-entries td:nth-last-child(-n+2) { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
#resource-detail { margin-top:1.5rem; border-top:1px solid var(--border,#ddd); padding-top:1rem; }
#resource-detail > details { margin-top:1.5rem; }
#resource-entries details dl { font-size:.85rem; overflow-wrap:anywhere; }
#resource-accounts { max-height:20rem; overflow-y:auto; }
#resource-accounts button[aria-pressed="true"] { border-color:#176b86; background:#eaf4f7; }