*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-accent-hover); }

:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--s-3); top: -3rem;
  background: var(--c-surface); padding: var(--s-2) var(--s-3);
  border: var(--border-strong); z-index: 100;
}
.skip-link:focus { top: var(--s-2); }

.num, .amount {
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.amount { text-align: right; }
.amount.is-negative, .is-negative { color: var(--c-negative); }
.muted { color: var(--c-text-muted); }
.subtle { color: var(--c-text-subtle); }
.small { font-size: var(--fs-sm); }

.app {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  grid-template-rows: var(--top-h) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  grid-row: 1 / span 2;
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--c-nav-bg);
  border-right: var(--border);
  display: flex; flex-direction: column;
}

.brand {
  height: var(--top-h);
  display: flex; align-items: center;
  padding: 0 var(--s-4);
  border-bottom: var(--border);
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: 1.1875rem;
  letter-spacing: 0.01em;
  color: var(--c-text);
  text-decoration: none;
}
.brand:hover { color: var(--c-text); }

.nav { padding: var(--s-3) 0 var(--s-5); flex: 1; }
.nav-group + .nav-group { margin-top: var(--s-4); }
.nav-label {
  display: block;
  padding: 0 var(--s-4) var(--s-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
}
.nav a, .nav .nav-disabled {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  min-height: 2rem;
  padding: var(--s-1) var(--s-4) var(--s-1) calc(var(--s-4) - 3px);
  border-left: 3px solid transparent;
  color: var(--c-text);
  text-decoration: none;
}
.nav a:hover { background: rgba(255, 255, 255, 0.55); color: var(--c-text); }
.nav a[aria-current="page"] {
  background: var(--c-surface);
  border-left-color: var(--c-accent);
  font-weight: var(--fw-semibold);
}
.nav .nav-disabled { color: var(--c-text-muted); cursor: default; }
.nav-count {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  min-width: 1.5rem;
  padding: 0 var(--s-1);
  text-align: center;
  border: 1px solid var(--c-overdue-line);
  background: var(--c-overdue-bg);
  color: var(--c-overdue);
  border-radius: var(--radius-sm);
}
.nav-soon { font-size: var(--fs-xs); color: var(--c-text-muted); }

.sidebar-foot {
  padding: var(--s-3) var(--s-4);
  border-top: var(--border);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.topbar {
  grid-column: 2;
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s-4);
  height: var(--top-h);
  padding: 0 var(--s-5);
  background: var(--c-surface);
  border-bottom: var(--border);
}
.topbar-spacer { flex: 1; }

.topbar .nav-toggle { display: none; }
.nav-scrim { display: none; }

.tenant { position: relative; }
.tenant > summary {
  list-style: none;
  display: flex; align-items: center; gap: var(--s-2);
  height: 2.25rem;
  padding: 0 var(--s-2) 0 var(--s-1);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.tenant > summary::-webkit-details-marker { display: none; }
.tenant > summary:hover { border-color: var(--c-line); background: var(--c-surface-sunk); }
.tenant[open] > summary { border-color: var(--c-line-strong); }
.tenant-mark {
  display: inline-grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: #FFFFFF;
  flex: none;
}
.tenant-mark.t1 { background: #1D66D6; }
.tenant-mark.t2 { background: #6A4A2F; }
.tenant-mark.t3 { background: #1D5C57; }
.tenant-name { font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18rem; }
.tenant-caret {
  width: 0.5rem; height: 0.5rem;
  border-right: 1.5px solid var(--c-text-muted);
  border-bottom: 1.5px solid var(--c-text-muted);
  transform: translateY(-2px) rotate(45deg);
  margin-left: var(--s-1);
}
.tenant-menu {
  position: absolute; left: 0; top: calc(100% + var(--s-1));
  width: min(20rem, calc(100vw - 1.5rem));
  background: var(--c-surface);
  border: 1px solid var(--c-line-ink);
  border-radius: var(--radius);
  padding: var(--s-2) 0;
  z-index: 30;
}
.tenant-menu-label { padding: var(--s-1) var(--s-3) var(--s-2); font-size: var(--fs-xs); color: var(--c-text-muted); }
.tenant-menu a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  color: var(--c-text); text-decoration: none;
}
.tenant-menu a:hover { background: var(--c-surface-hover); }
.tenant-menu a[aria-current="true"] { background: var(--c-accent-soft); }
.tenant-menu a small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); }
.tenant-menu .tenant-check { margin-left: auto; color: var(--c-accent); font-weight: var(--fw-semibold); font-size: var(--fs-xs); }
.tenant-menu hr { border: 0; border-top: var(--border); margin: var(--s-2) 0; }
.tenant-menu .tenant-manage { color: var(--c-accent); }

.global-search { position: relative; width: min(22rem, 100%); }
.global-search input { padding-right: 3rem; background: var(--c-surface-sunk); }
.global-search kbd {
  position: absolute; right: var(--s-2); top: 50%; transform: translateY(-50%);
  font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted);
  border: var(--border); border-radius: var(--radius-sm); padding: 0 var(--s-1);
  background: var(--c-surface);
}

.user { display: flex; align-items: center; gap: var(--s-4); font-size: var(--fs-sm); white-space: nowrap; }
.user-role { color: var(--c-text-muted); }
.user a { color: var(--c-text); }

.main { grid-column: 2; min-width: 0; }
.page { padding: var(--s-5) var(--s-6) var(--s-7); max-width: var(--content-max); }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-line-ink);
}
.crumbs { font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--s-1); }
.crumbs a { color: var(--c-text-muted); }
.page-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
}
.page-title .num { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-lg); color: var(--c-text-muted); margin-left: var(--s-2); }
.page-sub { margin-top: var(--s-1); color: var(--c-text-muted); font-size: var(--fs-sm); }
.page-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

.section + .section { margin-top: var(--s-6); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.section-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.section-head a { font-size: var(--fs-sm); }

.panel {
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--radius);
}
.panel-body { padding: var(--s-5); }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--border);
}
.panel-head h2, .panel-head h3 { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.panel-head a { font-size: var(--fs-sm); }
.panel-foot {
  padding: var(--s-3) var(--s-4);
  border-top: var(--border);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--control-h);
  padding: 0 var(--s-4);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { background: var(--c-surface-sunk); color: var(--c-text); border-color: var(--c-text-muted); }
.btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-text-inverse); }
.btn-primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: var(--c-text-inverse); }
.btn-danger { color: var(--c-overdue); border-color: var(--c-overdue-line); }
.btn-danger:hover { background: var(--c-overdue-bg); color: var(--c-overdue); border-color: var(--c-overdue); }
.btn-danger-solid { background: var(--c-overdue); border-color: var(--c-overdue); color: #FFFFFF; }
.btn-danger-solid:hover { background: #86221A; border-color: #86221A; color: #FFFFFF; }
.btn-quiet { border-color: transparent; background: transparent; color: var(--c-accent); padding: 0 var(--s-2); }
.btn-quiet:hover { background: var(--c-accent-soft); border-color: transparent; color: var(--c-accent-hover); }
.btn-sm { height: 1.875rem; padding: 0 var(--s-3); font-size: var(--fs-sm); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--c-surface-sunk); border-color: var(--c-line); color: var(--c-text-subtle); cursor: not-allowed;
}
.btn-icon { width: var(--control-h); padding: 0; }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn + .btn { margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.btn-group .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }

.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4) var(--s-4); }
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

.field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.field > label, .field-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}
.field .req { color: var(--c-text-muted); font-weight: var(--fw-regular); }
.hint { font-size: var(--fs-xs); color: var(--c-text-muted); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--s-3);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
}
.textarea { padding: var(--s-2) var(--s-3); min-height: 4.5rem; resize: vertical; line-height: var(--lh-base); }
.select {
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23545D6B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-text-muted); }
.input:focus, .select:focus, .textarea:focus { outline: var(--focus-outline); outline-offset: 0; border-color: var(--c-focus); }
.input[readonly] { background: var(--c-surface-sunk); border-color: var(--c-line); }
.input.num-input { text-align: right; font-variant-numeric: tabular-nums; }
.input::placeholder, .textarea::placeholder { color: var(--c-text-subtle); }

.input-affix { display: flex; }
.input-affix .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-affix .affix {
  display: inline-flex; align-items: center;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-line-strong); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--c-surface-sunk);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: var(--c-overdue); border-width: 1px; box-shadow: inset 3px 0 0 var(--c-overdue); }
.field-error {
  display: flex; gap: var(--s-1); align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--c-overdue);
}
.field-error::before {
  content: "!";
  flex: none;
  display: inline-grid; place-items: center;
  width: 1rem; height: 1rem; margin-top: 0.125rem;
  border-radius: 50%;
  background: var(--c-overdue); color: #FFFFFF;
  font-size: 0.6875rem; font-weight: var(--fw-semibold); line-height: 1;
}

.check { display: flex; align-items: flex-start; gap: var(--s-2); cursor: pointer; }
.check input { width: 1rem; height: 1rem; margin: 0.1875rem 0 0; accent-color: var(--c-accent); flex: none; }

.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset legend { padding: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); margin-bottom: var(--s-4); }

.status {
  display: inline-flex; align-items: center; gap: 0.375rem;
  height: 1.375rem;
  padding: 0 var(--s-2) 0 0.375rem;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
}
.status::before {
  content: "";
  width: 0.75rem; height: 0.75rem;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  flex: none;
}
.status-draft {
  color: var(--c-draft); background: var(--c-draft-bg); border-color: var(--c-draft-line);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-dasharray='2.2 1.6'/%3E%3C/svg%3E");
}
.status-open {
  color: var(--c-open); background: var(--c-open-bg); border-color: var(--c-open-line);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}
.status-partial {
  color: var(--c-open); background: var(--c-open-bg); border-color: var(--c-open-line);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M6 1.5a4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E");
}
.status-paid {
  color: var(--c-paid); background: var(--c-paid-bg); border-color: var(--c-paid-line);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.6 2.5 5-5.4' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3C/svg%3E");
}
.status-overdue {
  color: var(--c-overdue); background: var(--c-overdue-bg); border-color: var(--c-overdue-line);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='4.9' y='1' width='2.2' height='6.6' rx='1.1'/%3E%3Ccircle cx='6' cy='10' r='1.25'/%3E%3C/svg%3E");
}
.status-cancelled {
  color: var(--c-cancelled); background: var(--c-cancelled-bg); border-color: var(--c-cancelled-line); border-style: dashed;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M2.9 9.1l6.2-6.2' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}
.status-locked {
  color: var(--c-text); background: var(--c-surface-sunk); border-color: var(--c-line-strong);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2' y='5.2' width='8' height='5.8' rx='1'/%3E%3Cpath d='M3.9 5.4V3.8a2.1 2.1 0 0 1 4.2 0v1.6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
}
.table caption { text-align: left; }
.table th, .table td {
  height: var(--row-h);
  padding: var(--s-1) var(--s-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: var(--border);
}
.table thead th {
  height: 2.25rem;
  background: var(--c-surface-sunk);
  border-bottom: 1px solid var(--c-line-strong);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  white-space: nowrap;
}
.table th.amount, .table td.amount { text-align: right; }
.table td.amount { white-space: nowrap; }
.table th:first-child, .table td:first-child { padding-left: var(--s-4); }
.table th:last-child, .table td:last-child { padding-right: var(--s-4); }
.table tbody tr:hover { background: var(--c-surface-hover); }
.table tbody tr.is-cancelled td { color: var(--c-text-muted); }
.table tbody tr.is-cancelled td.amount:not(:last-child) { text-decoration: line-through; text-decoration-thickness: 1px; }
.table tbody tr.is-cancelled td.amount.is-negative { text-decoration: none; }
.table tfoot td {
  border-top: 1px solid var(--c-line-ink);
  border-bottom: 0;
  font-weight: var(--fw-semibold);
  background: var(--c-surface);
}
.table .doc-no { font-weight: var(--fw-medium); white-space: nowrap; }
.table .doc-no a { color: var(--c-text); text-decoration: none; }
.table .doc-no a:hover { color: var(--c-accent); text-decoration: underline; }
.table .cell-sub { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); }
.table .w-check { width: 2.5rem; }
.table .row-actions { text-align: right; white-space: nowrap; }

.th-sort {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
}
.th-sort::after {
  content: ""; width: 0.5rem; height: 0.75rem; opacity: 0.45;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 1l3 3.5H1zM4 11L1 7.5h6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 1l3 3.5H1zM4 11L1 7.5h6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
th[aria-sort] .th-sort { color: var(--c-text); font-weight: var(--fw-semibold); }
th[aria-sort="descending"] .th-sort::after {
  opacity: 1;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 11L1 7.5h6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 11L1 7.5h6z'/%3E%3C/svg%3E");
}
th[aria-sort="ascending"] .th-sort::after {
  opacity: 1;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 1l3 3.5H1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 1l3 3.5H1z'/%3E%3C/svg%3E");
}

.toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--border);
}
.toolbar .field { flex: 0 1 auto; }
.toolbar .search { flex: 1 1 16rem; max-width: 24rem; }
.toolbar-end { margin-left: auto; display: flex; gap: var(--s-2); }

.segmented {
  display: flex; flex-wrap: wrap;
  border-bottom: var(--border);
  padding: 0 var(--s-4);
  gap: var(--s-1);
}
.segmented a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-2) calc(var(--s-3) - 2px);
  border-bottom: 2px solid transparent;
  color: var(--c-text-muted);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.segmented a:hover { color: var(--c-text); }
.segmented a[aria-current="true"] { color: var(--c-text); border-bottom-color: var(--c-text); }
.segmented .count { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--c-text-muted); }
.segmented a.is-alert .count { color: var(--c-overdue); font-weight: var(--fw-semibold); }

.pager {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-top: var(--border);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.pager-links { display: flex; gap: var(--s-1); }

.bulkbar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: var(--c-accent-soft);
  border-bottom: var(--border);
  font-size: var(--fs-sm);
}

.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: var(--border);
  border-radius: var(--radius);
  background: var(--c-surface);
}
.figure { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); }
.figure + .figure { border-left: var(--border); }
.figure-label { font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: var(--fw-medium); }
.figure-value {
  font-size: var(--fs-figure);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.figure-value .cur { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-text-muted); margin-left: 0.125rem; }
.figure.is-alert .figure-value { color: var(--c-overdue); }
.figure.is-alert { box-shadow: inset 0 3px 0 var(--c-overdue); }
.figure-meta { font-size: var(--fs-sm); color: var(--c-text-muted); }
.figure-link { margin-top: auto; padding-top: var(--s-3); font-size: var(--fs-sm); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }

.notice {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
}
.notice strong { font-weight: var(--fw-semibold); }
.notice p + p { margin-top: var(--s-1); }
.notice-body { flex: 1; min-width: 0; }
.notice-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.notice-info { background: var(--c-open-bg); border-color: var(--c-open-line); border-left-color: var(--c-open); }
.notice-warning { background: var(--c-warning-bg); border-color: var(--c-warning-line); border-left-color: var(--c-warning); }
.notice-danger { background: var(--c-overdue-bg); border-color: var(--c-overdue-line); border-left-color: var(--c-overdue); }
.notice-locked { background: var(--c-surface-sunk); border-color: var(--c-line-strong); border-left-color: var(--c-text); }
.notice-locked .lock {
  flex: none; width: 1rem; height: 1rem; margin-top: 0.1875rem; background: var(--c-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2' y='5.2' width='8' height='5.8' rx='1'/%3E%3Cpath d='M3.9 5.4V3.8a2.1 2.1 0 0 1 4.2 0v1.6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2' y='5.2' width='8' height='5.8' rx='1'/%3E%3Cpath d='M3.9 5.4V3.8a2.1 2.1 0 0 1 4.2 0v1.6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.empty {
  padding: var(--s-6) var(--s-5);
  max-width: 34rem;
}
.empty h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin-bottom: var(--s-2); }
.empty p { color: var(--c-text-muted); margin-bottom: var(--s-4); }
.empty .page-actions { justify-content: flex-start; }

.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--s-5); align-items: start; }
.doc-aside { position: sticky; top: calc(var(--top-h) + var(--s-5)); display: flex; flex-direction: column; gap: var(--s-4); }

.address-block {
  padding: var(--s-3) var(--s-3);
  background: var(--c-surface-sunk);
  border: var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  line-height: 1.45;
}
.address-block .address-meta { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--c-text-muted); }

.positions { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.positions th {
  padding: var(--s-2) var(--s-2);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-text-muted);
  text-align: left;
  background: var(--c-surface-sunk);
  border-bottom: 1px solid var(--c-line-strong);
  white-space: nowrap;
}
.positions td { padding: var(--s-2) var(--s-2); border-bottom: var(--border); vertical-align: top; }
.positions th:first-child, .positions td:first-child { padding-left: var(--s-4); }
.positions th:last-child, .positions td:last-child { padding-right: var(--s-4); }
.positions .amount { text-align: right; }
.positions .c-pos { width: 2.25rem; color: var(--c-text-muted); padding-top: 0.9375rem; }
.positions .c-qty { width: 4.75rem; }
.positions .c-unit { width: 5.25rem; }
.positions .c-price { width: 7.25rem; }
.positions .c-tax { width: 5.25rem; }
.positions .c-total { width: 7.5rem; padding-top: 0.9375rem; font-weight: var(--fw-medium); white-space: nowrap; }
.positions .c-act { width: 2.75rem; text-align: right; }
.positions .c-desc { min-width: 14rem; }
.positions .select { padding-right: 1.75rem; background-position: right 0.5rem center; }
.positions .input, .positions .select { min-height: 2.125rem; }
.positions .textarea { min-height: 3.25rem; margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--c-text-muted); }
.positions .pos-title { font-weight: var(--fw-medium); }
.positions tbody tr:focus-within { background: var(--c-surface-hover); }
.positions .row-remove {
  width: 2.125rem; height: 2.125rem;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--c-text-muted);
  font-size: 1.125rem; line-height: 1; cursor: pointer;
}
.positions .row-remove:hover { border-color: var(--c-overdue-line); color: var(--c-overdue); background: var(--c-overdue-bg); }
.positions-actions { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4); flex-wrap: wrap; }

.positions.is-readonly td { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.positions.is-readonly .c-pos, .positions.is-readonly .c-total { padding-top: var(--s-3); }
.positions.is-readonly .pos-desc { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 0.125rem; }

.totals-row { display: flex; justify-content: flex-end; padding: var(--s-4) var(--s-4) var(--s-5); border-top: var(--border); }
.totals { width: min(22rem, 100%); font-variant-numeric: tabular-nums; }
.totals div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-1) 0; }
.totals dt { color: var(--c-text-muted); }
.totals dd { text-align: right; white-space: nowrap; }
.totals .totals-gross {
  margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: 1px solid var(--c-line-ink);
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
}
.totals .totals-gross dt { color: var(--c-text); }
.totals .totals-open { border-top: var(--border); margin-top: var(--s-2); padding-top: var(--s-2); font-weight: var(--fw-semibold); }
.totals .totals-open dt { color: var(--c-text); }

.meta-list { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); font-size: var(--fs-base); }
.meta-list dt { color: var(--c-text-muted); font-size: var(--fs-sm); padding-top: 0.0625rem; }
.meta-list dd { font-variant-numeric: tabular-nums; }

.readonly-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.readonly-grid dt { font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: 0.125rem; }
.readonly-grid dd { font-variant-numeric: tabular-nums; }
.readonly-grid .span-2 { grid-column: span 2; }

.timeline { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); }
.timeline li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-3); padding: var(--s-2) 0; border-top: var(--border); }
.timeline li:first-child { border-top: 0; }
.timeline time { color: var(--c-text-muted); font-variant-numeric: tabular-nums; }

.text-block { white-space: pre-line; }

.dialog {
  width: min(32rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--c-line-ink);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
}
.dialog::backdrop { background: var(--c-backdrop); }
.dialog-head { padding: var(--s-4) var(--s-5) var(--s-3); border-bottom: var(--border); }
.dialog-head h2 { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.dialog-body { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.dialog-foot {
  display: flex; justify-content: flex-end; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-top: var(--border);
  background: var(--c-surface-sunk);
}
.dialog .facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); font-size: var(--fs-base); }
.dialog .facts dt { color: var(--c-text-muted); }
.dialog .facts dd { font-variant-numeric: tabular-nums; }

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--s-5) var(--s-4);
}
.auth-main { display: grid; place-items: center; }
.auth-card { width: min(25rem, 100%); }
.auth-brand { margin-bottom: var(--s-5); }
.auth-brand .wordmark {
  font-family: var(--font-serif); font-weight: var(--fw-semibold);
  font-size: 2rem; line-height: 1; letter-spacing: 0.01em;
}
.auth-brand p { margin-top: var(--s-2); color: var(--c-text-muted); }
.auth-panel { background: var(--c-surface); border: var(--border); border-top: 2px solid var(--c-line-ink); border-radius: 0 0 var(--radius) var(--radius); }
.auth-panel h1 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin-bottom: var(--s-4); }
.auth-panel form { display: flex; flex-direction: column; gap: var(--s-4); }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.auth-note { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--c-text-muted); }
.auth-foot { display: flex; justify-content: center; gap: var(--s-4); font-size: var(--fs-sm); color: var(--c-text-muted); }
.auth-foot a { color: var(--c-text-muted); }

.password-field { position: relative; }
.password-field .input { padding-right: 5.5rem; }
.password-field .btn-quiet { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); height: 1.75rem; font-size: var(--fs-sm); }

@media (max-width: 1100px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-aside { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .global-search { display: none; }
  .readonly-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 50;
    width: min(17rem, 85vw);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.18s ease-out, visibility 0s linear 0.18s;
  }
  .nav-open .sidebar { transform: none; visibility: visible; transition: transform 0.18s ease-out; border-right: 1px solid var(--c-line-ink); }
  .nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 40; background: var(--c-backdrop); border: 0; }
  .topbar, .main { grid-column: 1; }
  .topbar { padding: 0 var(--s-3); gap: var(--s-2); }
  .topbar .nav-toggle { display: inline-flex; }
  .user-name, .user-role { display: none; }
  .page { padding: var(--s-4) var(--s-4) var(--s-7); }
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figure + .figure { border-left: 0; border-top: var(--border); }
  .tenant-name { max-width: 9.5rem; }
  .tenant > summary { padding-right: var(--s-1); }
  .user { gap: var(--s-2); }
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid > * { grid-column: 1 / -1; }
  .page-title { font-size: 1.375rem; }
  .page-actions .btn { flex: 1 1 auto; }
  .toolbar .field, .toolbar .search { flex: 1 1 100%; max-width: none; }
  .toolbar-end { margin-left: 0; width: 100%; }
  .segmented { overflow-x: auto; flex-wrap: nowrap; }
  .readonly-grid { grid-template-columns: minmax(0, 1fr); }
  .readonly-grid .span-2 { grid-column: auto; }

  .table--cards thead { display: none; }
  .table--cards, .table--cards tbody, .table--cards tfoot, .table--cards tr, .table--cards td { display: block; width: 100%; }
  .table--cards tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-1) var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-bottom: var(--border);
  }
  .table--cards td { height: auto; padding: 0 !important; border: 0; }
  .table--cards td[data-label]::before {
    content: attr(data-label) " ";
    color: var(--c-text-muted); font-size: var(--fs-xs);
  }
  .table--cards .w-check { display: none; }
  .table--cards .card-hide { display: none; }
  .table--cards .card-full { grid-column: 1 / -1; }
  .table--cards td.amount { text-align: right; }
  .table--cards td.card-primary { grid-column: 1 / -1; padding-top: var(--s-1) !important; }
  .table--cards .card-primary { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
  .table--cards tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-line-ink); }
  .table--cards tfoot td { border: 0; }

  .positions thead { display: none; }
  .positions, .positions tbody, .positions tr, .positions td { display: block; width: 100% !important; }
  .positions tbody tr {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border-bottom: var(--border);
    position: relative;
  }
  .positions td { padding: 0 !important; border: 0; }
  .positions td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--c-text-muted); margin-bottom: 0.125rem; }
  .positions .c-pos { grid-column: 1 / -1; padding-top: 0 !important; font-weight: var(--fw-semibold); color: var(--c-text); }
  .positions .c-desc { grid-column: 1 / -1; }
  .positions .c-qty, .positions .c-unit, .positions .c-tax { grid-column: span 2; }
  .positions .c-price { grid-column: span 3; }
  .positions .c-total { grid-column: span 3; padding-top: 0 !important; text-align: right; }
  .positions .c-act { position: absolute; right: var(--s-3); top: var(--s-2); width: auto !important; }
  .positions.is-readonly .c-qty, .positions.is-readonly .c-unit, .positions.is-readonly .c-tax, .positions.is-readonly .c-price { grid-column: span 3; }
  .positions.is-readonly .c-total { grid-column: 1 / -1; }

  .dialog-foot { flex-direction: column-reverse; }
  .dialog-foot .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media print {
  .sidebar, .topbar, .page-actions, .doc-aside .btn { display: none !important; }
  .app { display: block; }
  body { background: #FFFFFF; }
}