/* System fonts keep the application independent of external services. */
.stats.utility-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 700px) {
  .stats.utility-stats {
    grid-template-columns: 1fr;
  }
}
.sidebar nav {
  overflow-y: auto;
  min-height: 0;
}
.sidebar .brand {
  flex-shrink: 0;
  margin-bottom: 30px;
}
.sidebar-bottom {
  flex-shrink: 0;
}
.register-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 0.7fr 40px;
  gap: 10px;
  margin-bottom: 14px;
  align-items: end;
}
.register-row button {
  height: 39px;
}
.meter-checklist {
  border: 1px solid #e8e1d8;
  background: #fcfaf7;
  padding: 14px;
  border-radius: 7px;
  display: grid;
  gap: 12px;
  max-height: 240px;
  overflow: auto;
}
.meter-checklist label {
  line-height: 1.5;
  font-size: 12px;
}
.utility-details {
  margin: 25px 0;
}
.note-text {
  white-space: pre-wrap;
  color: #685d51;
  background: #f6f2ed;
  padding: 15px;
  border-radius: 6px;
  font-size: 12px;
}
.utility-modal {
  width: min(880px, 95vw);
}
@media (max-width: 700px) {
  .register-row {
    grid-template-columns: 1fr 1fr;
  }
  .register-row button {
    justify-self: end;
  }
}
textarea {
  font: inherit;
  resize: vertical;
  width: 100%;
  border: 1px solid #e3dbd0;
  border-radius: 5px;
  padding: 10px 11px;
  color: var(--ink);
  background: white;
  line-height: 1.5;
  min-height: 80px;
}
textarea:focus {
  border-color: #ab9275;
  outline: 2px solid #f1e8dc;
}
textarea[readonly] {
  background: #f6f2ed;
  color: #78736c;
}
.address-card {
  padding: 18px;
  background: #f0e8de;
  border-radius: 7px;
  margin: 16px 0;
}
.address-card small {
  font-size: 10px;
  color: #80664d;
}
.address-card p {
  margin: 10px 0;
  color: #292826;
}
.address-card + .section-title {
  margin-top: 24px;
}
:root {
  --green: #80664d;
  --dark: #604b38;
  --sage: #f0e8de;
  --bg: #f8f6f2;
  --ink: #292826;
  --muted: #78736c;
  --line: #e8e1d8;
  --red: #b64a4a;
  --amber: #9b7527;
  font-family:
    Segoe UI,
    Arial,
    sans-serif;
  color: var(--ink);
  font-size: 14px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  outline-offset: 3px;
}
button {
  cursor: pointer;
  transition: background 0.15s;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  border: 0;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: 29px;
  letter-spacing: -1px;
  line-height: 1.25;
  font-weight: 600;
}
h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
h3 {
  font-size: 15px;
  font-weight: 600;
}
p {
  color: var(--muted);
  line-height: 1.65;
}
.hidden,
[hidden] {
  display: none !important;
}
.brand {
  font-size: 26px;
  letter-spacing: -1px;
  display: flex;
  align-items: center;
  font-weight: 650;
  gap: 10px;
}
.brand-dot {
  color: #c5ac8a;
  margin-left: -10px;
}
.brand-icon {
  display: inline-flex;
  width: 34px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: white;
  font-size: 22px;
  border-radius: 9px;
  font-weight: 500;
  letter-spacing: -2px;
}
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 238px;
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 32px 21px;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.sidebar .brand {
  margin: 0 9px 48px;
}
.eyebrow {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 1.6px;
  color: var(--muted);
}
.nav-group-label {
  margin: 22px 14px 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
nav a {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 5px 0;
  padding: 13px 14px;
  border-radius: 7px;
  color: #746b60;
  font-weight: 500;
}
nav a:hover {
  background: #f6f2ed;
}
nav a.active {
  background: var(--sage);
  color: var(--green);
  font-weight: 650;
}
nav a.active:after {
  content: '';
  height: 6px;
  width: 6px;
  background: var(--green);
  border-radius: 50%;
  margin-left: auto;
}
.nav-icon {
  font-size: 18px;
  width: 21px;
  text-align: center;
}
.sidebar-bottom {
  margin-top: auto;
}
.local-status {
  font-size: 11px;
  color: var(--muted);
  margin: 28px 12px 20px;
  display: flex;
  gap: 7px;
  align-items: center;
}
.local-status span {
  height: 6px;
  width: 6px;
  background: #ab9275;
  border-radius: 50%;
}
.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border-top: 1px solid var(--line);
  padding: 20px 0 10px;
  width: 100%;
  text-align: left;
}
.user-card b {
  font-size: 12px;
  display: block;
  max-width: 126px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-card small {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 4px;
}
.user-card > span:last-child {
  margin-left: auto;
  color: var(--muted);
}
.avatar,
.top-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eee5da;
  color: var(--green);
  font-size: 12px;
  font-weight: 650;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.logout {
  background: none;
  color: var(--muted);
  font-size: 11px;
  padding: 8px 46px;
}
.workspace {
  margin-left: 238px;
}
.topbar {
  height: 77px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.breadcrumb {
  color: var(--muted);
  font-size: 12px;
}
.breadcrumb span {
  padding: 0 13px;
  color: #c6cbc8;
}
.breadcrumb b {
  color: var(--ink);
  font-weight: 500;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.today {
  font-size: 12px;
  color: var(--muted);
}
.separator {
  width: 1px;
  height: 20px;
  background: var(--line);
}
#mobile-menu {
  display: none;
}
main {
  max-width: 1450px;
  padding: 36px 38px 18px;
  margin: auto;
  min-height: calc(100vh - 133px);
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 20px;
}
.page-heading h1 {
  margin-bottom: 8px;
}
.page-heading p {
  margin-bottom: 0;
  font-size: 13px;
}
.actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.primary {
  padding: 11px 17px;
  background: var(--green);
  color: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 39px;
}
.primary:hover {
  background: var(--dark);
}
.secondary {
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 12px;
  min-height: 39px;
}
.secondary:hover {
  background: #f5efe7;
}
.table-link {
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  text-align: left;
}
.text-button {
  background: transparent;
  color: var(--green);
  font-weight: 600;
  font-size: 12px;
  padding: 5px 0;
}
.subtle-button {
  background: #f5f0e9;
  color: #685d51;
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 11px;
}
.danger {
  color: var(--red);
}
.filterbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  justify-content: space-between;
}
.filterbar .filters {
  display: flex;
  gap: 10px;
  align-items: center;
}
.filterbar select,
.filterbar input {
  border: 1px solid var(--line);
  background: white;
  border-radius: 6px;
  padding: 10px 12px;
  color: #685d51;
  font-size: 12px;
}
.search {
  min-width: 240px;
}
.filter-caption {
  color: var(--muted);
  font-size: 12px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  margin-bottom: 26px;
}
.stat {
  background: white;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 22px;
}
.stat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #746b60;
}
.stat-icon {
  background: var(--sage);
  color: var(--green);
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.stat strong {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.8px;
  display: block;
  margin-top: 13px;
}
.stat small {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 10px;
}
.stat small em {
  color: var(--green);
  font-style: normal;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  margin-bottom: 25px;
}
.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.panel-body {
  padding: 23px;
}
.panel-header {
  padding: 22px 23px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.panel-header h2 {
  margin: 0;
  font-size: 15px;
}
.panel-header small {
  font-size: 11px;
  color: var(--muted);
}
.legend {
  display: flex;
  gap: 15px;
  color: var(--muted);
  font-size: 10px;
}
.legend span:before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--green);
  margin-right: 5px;
}
.legend span:last-child:before {
  background: #d8c6ae;
}
.chart {
  height: 185px;
  margin: 15px 25px 22px;
  display: flex;
  gap: 11px;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent 41px,
    #f2ede6 42px,
    transparent 43px
  );
}
.chart-month {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  position: relative;
  padding-bottom: 24px;
}
.chart-month span {
  width: 50%;
  min-height: 1px;
  background: var(--green);
  border-radius: 3px 3px 0 0;
}
.chart-month span:nth-child(2) {
  background: #d8c6ae;
}
.chart-month small {
  position: absolute;
  bottom: 4px;
  width: 100%;
  text-align: center;
  font-size: 9px;
  color: var(--muted);
}
.building-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
  margin-bottom: 24px;
}
.building-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 23px;
}
.building-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.building-symbol {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  background: #f0e8de;
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 25px;
  flex-shrink: 0;
}
.building-top h3 {
  margin: 0 0 7px;
  font-size: 15px;
}
.building-top p {
  margin: 0;
  font-size: 12px;
}
.building-top .tag {
  margin-left: auto;
}
.building-meta {
  border-top: 1px solid var(--line);
  margin-top: 21px;
  padding-top: 17px;
  display: flex;
  gap: 30px;
  align-items: center;
}
.building-meta small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px;
}
.building-meta strong {
  font-weight: 600;
  font-size: 13px;
}
.building-meta button {
  margin-left: auto;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 15px;
}
.section-title h2 {
  font-size: 16px;
  margin: 0;
}
.tag {
  display: inline-block;
  background: var(--sage);
  color: #80664d;
  border-radius: 5px;
  font-size: 10px;
  padding: 5px 8px;
  white-space: nowrap;
}
.tag.gray {
  background: #f0f1f3;
  color: #78736c;
}
.tag.amber {
  color: var(--amber);
  background: #fbf5e8;
}
.tag.red {
  color: var(--red);
  background: #faeded;
}
.table-wrap {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
th {
  background: #faf8f5;
  color: #78736c;
  font-size: 10px;
  text-align: left;
  font-weight: 500;
  padding: 13px 21px;
  letter-spacing: 0.25px;
  white-space: nowrap;
}
td {
  padding: 16px 21px;
  border-top: 1px solid #f0eae2;
  vertical-align: middle;
  max-width: 350px;
  overflow-wrap: anywhere;
}
td small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 5px;
}
td b {
  font-weight: 600;
}
.numeric {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.positive {
  color: var(--green);
}
.negative {
  color: var(--red);
}
.row-actions {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
}
.empty {
  padding: 44px 25px;
  text-align: center;
}
.empty-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--sage);
  display: grid;
  place-items: center;
  margin: 0 auto 15px;
  color: var(--green);
  font-size: 23px;
}
.empty h3 {
  margin-bottom: 8px;
}
.empty p {
  font-size: 12px;
  margin-bottom: 18px;
}
.notice {
  border: 1px solid #e7e4d4;
  background: #fcfaf2;
  color: #87763e;
  padding: 14px 18px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 22px;
}
.quick-action {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 23px;
  border-top: 1px solid var(--line);
  width: 100%;
  text-align: left;
  background: none;
}
.quick-action:hover {
  background: #faf8f4;
}
.quick-action .stat-icon {
  font-size: 15px;
}
.quick-action b {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.quick-action small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 5px;
}
.quick-action > span:last-child {
  margin-left: auto;
  color: #b9aa96;
}
.balance-card {
  padding: 22px;
  border-radius: 8px;
  background: var(--green);
  color: white;
  margin-bottom: 24px;
}
.balance-card small {
  color: #dfd0bd;
}
.balance-card strong {
  display: block;
  font-size: 30px;
  margin: 10px 0;
}
.balance-card p {
  color: #e2d5c4;
  font-size: 12px;
  margin: 0;
}
.upload-zone {
  border: 1px dashed #d2bea5;
  border-radius: 9px;
  padding: 45px 25px;
  text-align: center;
  background: #faf8f5;
  margin: 0 23px 23px;
}
.upload-zone h3 {
  font-size: 17px;
  margin: 13px 0 8px;
}
.upload-zone p {
  font-size: 12px;
}
input[type='file'] {
  max-width: 100%;
  font-size: 12px;
}
footer {
  padding: 18px 38px;
  color: #b9aa96;
  font-size: 10px;
}
footer span {
  margin: 0 9px;
}
dialog {
  overflow: auto;
  width: min(660px, 95vw);
  max-height: 90vh;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  color: var(--ink);
  box-shadow: 0 20px 80px #5c483126;
}
dialog::backdrop {
  background: #3b2e2266;
  backdrop-filter: blur(2px);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 23px 26px;
  border-bottom: 1px solid var(--line);
}
.modal-header h2 {
  margin: 0;
}
.modal-header button {
  font-size: 25px;
  background: none;
  color: var(--muted);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
  padding: 25px 26px;
}
.form-grid .full {
  grid-column: 1/-1;
}
label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  color: #746b60;
}
label input,
label select {
  width: 100%;
  border: 1px solid #e3dbd0;
  border-radius: 5px;
  padding: 10px 11px;
  color: var(--ink);
  background: #fff;
  min-height: 39px;
}
label input:focus,
label select:focus {
  border-color: #ab9275;
  outline: 2px solid #f1e8dc;
}
label.check {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
label.check input {
  width: 16px;
  min-height: auto;
  height: 16px;
  accent-color: var(--green);
}
.form-help {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  grid-column: 1/-1;
  margin: 0;
}
.modal-footer {
  padding: 18px 26px;
  background: #faf8f4;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.error {
  color: var(--red);
  font-size: 12px;
  margin: 0 26px 16px;
}
.error:empty {
  display: none;
}
#toast {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: var(--dark);
  color: #fff;
  padding: 15px 22px;
  border-radius: 8px;
  z-index: 100;
  max-width: 420px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
#toast.show {
  opacity: 1;
}
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.login-story {
  background: var(--green);
  color: #fff;
  padding: 60px 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-story .brand-icon {
  background: #9d8262;
}
.login-story h1 {
  font-size: 52px;
  line-height: 1.16;
  letter-spacing: -2px;
  margin: 22px 0;
}
.login-story p {
  color: #ded0be;
  font-size: 15px;
}
.login-story > span:last-child {
  color: #d2bea5;
  font-size: 12px;
}
.light {
  color: #d2bea5;
}
.login-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 440px;
  width: 100%;
  margin: auto;
  padding: 50px;
}
.login-form h2 {
  font-size: 26px;
  margin: 15px 0 10px;
}
.login-form > p {
  font-size: 13px;
  margin-bottom: 28px;
}
.login-form label {
  margin-bottom: 18px;
}
.wide {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.login-form small {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 25px;
}
.login-form .error {
  margin: 18px 0;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.detail-grid small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 7px;
}
.detail-grid strong {
  font-size: 14px;
  font-weight: 500;
}
.detail-grid + .section-title {
  margin-top: 30px;
}
.progress {
  height: 5px;
  background: #eee7de;
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--green);
}
@media (min-width: 1450px) {
  main {
    padding-top: 45px;
  }
  .stats {
    gap: 23px;
  }
  .stat {
    padding: 26px;
  }
  .chart {
    height: 210px;
  }
}
@media (max-width: 1100px) {
  .sidebar {
    width: 210px;
    padding: 27px 15px;
  }
  .workspace {
    margin-left: 210px;
  }
  main {
    padding: 28px 24px;
  }
  .topbar {
    padding: 0 24px;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .building-list {
    grid-template-columns: 1fr;
  }
  .today {
    display: none;
  }
}
@media (max-width: 700px) {
  .sidebar {
    transform: translateX(-100%);
    width: 238px;
    transition: transform 0.2s;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 10px 0 30px #0002;
  }
  .workspace {
    margin-left: 0;
  }
  .topbar {
    height: 63px;
    padding: 0 18px;
  }
  #mobile-menu {
    display: block;
    background: none;
    font-size: 20px;
    color: var(--green);
  }
  .breadcrumb {
    font-size: 11px;
  }
  .topbar-right {
    gap: 10px;
  }
  main {
    padding: 25px 18px;
  }
  .page-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }
  h1 {
    font-size: 26px;
  }
  .stats {
    gap: 11px;
  }
  .stat {
    padding: 16px;
  }
  .stat strong {
    font-size: 24px;
  }
  .stat-top {
    font-size: 11px;
  }
  .filterbar {
    flex-direction: column;
    align-items: stretch;
  }
  .filterbar .filters {
    flex-wrap: wrap;
  }
  .search {
    min-width: 0;
    flex: 1;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 20px;
  }
  .detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  th,
  td {
    padding: 13px 16px;
  }
  .login {
    grid-template-columns: 1fr;
  }
  .login-story {
    padding: 28px;
  }
  .login-story > div:nth-child(2),
  .login-story > span:last-child {
    display: none;
  }
  .login-form {
    padding: 40px 28px;
  }
  .top-avatar {
    width: 30px;
    height: 30px;
  }
  .panel-header {
    padding: 18px;
  }
  .building-card {
    padding: 18px;
  }
  .building-meta {
    gap: 20px;
  }
  footer {
    padding: 18px;
  }
  .chart {
    gap: 7px;
    margin-left: 18px;
    margin-right: 18px;
  }
  .legend {
    gap: 8px;
  }
}

/* OIKURA identity: original logo and a warm sand/bronze palette. */
.brand {
  display: block;
  line-height: 0;
  letter-spacing: normal;
}
.brand-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.sidebar {
  padding-top: 18px;
}
.sidebar .brand {
  width: 190px;
  max-width: 100%;
  margin: 0 auto 16px;
}
.login-story {
  background: linear-gradient(145deg, #f2e9dc, #e0cbb0);
  color: var(--ink);
}
.login-story .brand {
  width: 280px;
  max-width: 100%;
  background: white;
  border-radius: 12px;
}
.login-story p {
  color: #655b4e;
}
.login-story > span:last-child,
.login-story .light {
  color: #79664f;
}
.meter-checklist {
  background: #fcfaf7;
}
input[type='checkbox'] {
  accent-color: var(--green);
}
:focus-visible {
  outline: 2px solid #80664d;
  outline-offset: 3px;
}
@media (max-width: 1100px) {
  .sidebar .brand {
    width: 170px;
  }
}
@media (max-width: 700px) {
  .login-story .brand {
    width: 180px;
    margin: auto;
  }
  .login-story {
    padding: 15px;
  }
  .sidebar .brand {
    width: 190px;
  }
}

.bank-split-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin: 14px 0;
  background: #fcfaf7;
}
.split-row-title,
.split-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.split-row-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.split-row-fields .full {
  grid-column: 1/-1;
}
#split-total {
  font-weight: 600;
  margin: 18px 0 0;
}
.bank-split-row select {
  max-width: 100%;
  text-overflow: ellipsis;
}
@media (max-width: 700px) {
  .split-row-fields {
    grid-template-columns: 1fr;
  }
}

.import-preview {
  margin-top: 20px;
}
.import-batch {
  margin-bottom: 20px;
  border-left: 4px solid var(--batch-color);
}
/* Lange Bankreferenzen bleiben in ihrer Spalte; schmale Ansichten scrollen horizontal. */
.import-batch table {
  table-layout: fixed;
  min-width: 1080px;
}
.import-batch th:first-child {
  width: 110px;
}
.import-batch th:nth-child(2) {
  width: 30%;
}
.import-batch th:nth-child(3) {
  width: 120px;
}
.import-batch th:nth-child(4) {
  width: 170px;
}
.import-batch th:nth-child(6) {
  width: 190px;
}
.import-batch td {
  white-space: normal;
  overflow-wrap: anywhere;
}
.import-batch td.numeric {
  white-space: nowrap;
}
.import-batch td button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.batch-color-0 {
  --batch-color: #8875ad;
  --batch-tint: #f3eff8;
}
.batch-color-1 {
  --batch-color: #538fa1;
  --batch-tint: #edf5f8;
}
.batch-color-2 {
  --batch-color: #b58543;
  --batch-tint: #faf3e6;
}
.batch-color-3 {
  --batch-color: #a56f83;
  --batch-tint: #faf0f4;
}
.batch-color-4 {
  --batch-color: #678f83;
  --batch-tint: #eff6f3;
}
.batch-color-5 {
  --batch-color: #778bb4;
  --batch-tint: #f0f3fa;
}
.import-batch-summary {
  padding: 0 23px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  font-size: 12px;
  color: var(--muted);
}
.import-batch details > summary {
  padding: 14px 23px;
  cursor: pointer;
  font-size: 12px;
  border-top: 1px solid var(--line);
}
.import-row-open {
  background: var(--batch-tint);
}
.import-row-open td:first-child {
  border-left: 3px solid var(--batch-color);
}
.import-status {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.status-open {
  background: var(--batch-tint, #faf3e6);
  color: #6b542b;
}
.status-completed {
  color: #2e6541;
  background: #e5f3e9;
}
.status-empty,
.status-deleted {
  color: #716d66;
  background: #f0eeeb;
}
.import-completed {
  border-left-color: #5e956e;
  background: #f1f8f3;
}
.import-completed th {
  background: #edf5ef;
}
.import-completed .import-row-booked {
  background: #f9fdfa;
}
.import-deleted {
  border-left-color: #aaa5a0;
}
.import-row-removed {
  color: #8d8881;
  background: #faf9f7;
}
@media (max-width: 700px) {
  .import-batch-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .import-batch .panel-header {
    align-items: flex-start;
  }
  .filterbar #import-batch-filter {
    max-width: 100%;
  }
}
/* Journal and document workflows */
.journal-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 14px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 22px;
}
.journal-filters label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.journal-filters select,
.journal-filters input {
  width: 100%;
  min-width: 0;
}
.sort-heading {
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.sort-heading:hover,
.sort-heading:focus-visible {
  color: var(--ink);
}
th[aria-sort='ascending'] .sort-heading,
th[aria-sort='descending'] .sort-heading {
  color: #694d30;
  text-decoration: underline;
}
.booking-reversed {
  background: #fff1ef;
}
.booking-reversed td:first-child {
  border-left: 4px solid #b74d40;
}
.booking-reversed td.numeric {
  text-decoration: line-through;
  color: #8d625c;
}
.booking-reversal {
  background: #fff8ec;
}
.booking-reversal td:first-child {
  border-left: 4px solid #b38a45;
}
.booking-status {
  display: block;
  width: fit-content;
  margin: 7px 0;
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.booking-status.cancelled {
  color: #9e382d;
  background: #faddd8;
}
.booking-status.reversal {
  color: #81561f;
  background: #f6e8cc;
}
.export-option {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0;
}
.document-deleted {
  background: #f4f2ef;
  color: #777;
}
.row-actions {
  min-width: 180px;
}
.row-actions a {
  display: inline-block;
  text-decoration: none;
}
.journal-filters button {
  align-self: end;
}
.filterbar .filters label {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 1000px) {
  .journal-filters {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}
@media (max-width: 600px) {
  .journal-filters {
    grid-template-columns: 1fr;
  }
  .filterbar select {
    max-width: 100%;
  }
}
.filterbar {
  flex-wrap: wrap;
  gap: 12px;
}
.filterbar .filters {
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}
.filterbar .filters select {
  max-width: 300px;
}
.filterbar .filters label {
  flex-direction: row;
  white-space: nowrap;
}
.filterbar input[type='checkbox'],
.export-option input[type='checkbox'] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex: none;
  padding: 0;
}
.filterbar .search {
  min-width: 160px;
  max-width: 280px;
}
.export-option {
  font-size: 13px;
}
.mfa-setup {
  text-align: center;
}
.mfa-setup img {
  display: block;
  max-width: 100%;
  margin: 14px auto;
}
.mfa-setup code {
  display: block;
  overflow-wrap: anywhere;
  padding: 12px;
  background: #f5f1eb;
  border-radius: 6px;
}
.recovery-codes {
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #f5f1eb;
  padding: 16px;
  border-radius: 8px;
}
[hidden] {
  display: none !important;
}
.pdf-dialog {
  width: min(1200px, 96vw);
  max-width: 96vw;
  height: 92vh;
  max-height: 96vh;
  padding: 0;
}
.pdf-dialog[open] {
  display: flex;
  flex-direction: column;
}
.pdf-dialog .modal-header {
  padding: 18px 24px;
  flex-shrink: 0;
}
.pdf-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 24px;
  border-bottom: 1px solid #ddd4c9;
}
.pdf-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pdf-toolbar button {
  color: #302b25;
  background: #f4f0e9;
  border: 1px solid #d7cbbc;
  padding: 9px 14px;
  border-radius: 6px;
}
.pdf-toolbar input {
  width: 75px;
}
.pdf-toolbar select {
  width: auto;
}
.pdf-status {
  margin: 8px 24px;
  font-size: 13px;
}
.pdf-pages {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #e9e4dd;
  padding: 20px;
}
.pdf-pages canvas {
  display: block;
  margin: 0 auto;
  background: white;
  box-shadow: 0 2px 12px #0002;
}
.demand-month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.form-grid .demand-month-grid label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.demand-tenancies {
  max-height: 300px;
  overflow: auto;
  margin-top: 12px;
}
.demand-tenancy {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #ddd4c9;
}
.demand-tenancy small {
  display: block;
  margin-top: 4px;
}
.demand-month-grid input[type='checkbox'],
.demand-tenancy input[type='checkbox'] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0;
  flex: none;
}
.form-grid .demand-tenancy {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.demand-months {
  margin: 0;
}
@media (max-width: 600px) {
  .demand-month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.booking-allocation {
  color: var(--primary, #705b43);
  font-weight: 600;
}
.import-character-warning {
  color: #8a570d;
  font-weight: 600;
}
.passkey-list {
  list-style: none;
  padding: 0;
}
.passkey-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e8e1d8;
  padding: 14px 0;
}
.passkey-list small {
  display: block;
  margin-top: 5px;
  color: #75695b;
}
.encoding-warning {
  margin: 16px 20px;
  padding: 12px 16px;
  background: #fff4dc;
  color: #704b13;
  border-left: 3px solid #b7822a;
  border-radius: 4px;
}
/* Kontrollierbare Zuordnungsvorschläge direkt am importierten Bankumsatz. */
.inline-import-proposal {
  min-width: 260px;
  max-width: 430px;
  display: grid;
  gap: 6px;
}
.inline-import-proposal small {
  display: block;
  white-space: normal;
}
.inline-import-proposal button {
  justify-self: start;
}
.import-proposal-warning {
  color: #7a5217;
  font-weight: 600;
}

.operating-settlements .panel-header {
  gap: 16px;
  flex-wrap: wrap;
}
.settlement-guide,
.settlement-totals {
  margin: 0 24px 20px;
}
.settlement-guide {
  padding: 14px 18px;
  border-radius: 10px;
  background: #f7f3ed;
  color: #514638;
}
.settlement-guide p {
  margin: 6px 0;
}
.settlement-guide p:last-child {
  font-size: 13px;
}
.settlement-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
}
.settlement-totals strong {
  display: block;
  margin-top: 5px;
  font-size: 22px;
}
.settlement-payment-context {
  border-left: 3px solid #aa8e6d;
  padding: 12px 16px;
  background: #f7f3ed;
  border-radius: 6px;
}
.settlement-payment-context p {
  margin: 8px 0 0;
}
.bka-history > summary {
  padding: 18px 24px;
  cursor: pointer;
  font-weight: 600;
}

/* BWA: Abschnitte und Ergänzungen in Bildschirm und Druck klar trennen. */
#report-data .report-row-section td,
#report-data .report-row-supplement td {
  background: #e8f0ec;
  color: #183d35;
  font-weight: 700;
  border-top: 1px solid #b7cec2;
}
#report-data .report-row-supplement td {
  padding-top: 24px;
}
#report-data .report-row-subtotal td {
  font-weight: 600;
  border-top: 1px solid #b7cec2;
}
#report-data .report-row-result td,
#report-data .report-row-balance td,
#report-data .report-row-private-total td {
  background: #f0f5f2;
  font-weight: 700;
}
#report-data .report-row-result td {
  border-top: 2px solid #183d35;
}
#report-data .report-row-section td:first-child,
#report-data .report-row-supplement td:first-child {
  min-width: 270px;
}

/* Feste Mindestbreiten schützen IDs und Datumswerte; der Buchungstext nutzt den Rest. */
#report-data[data-report-type='entries'] table {
  table-layout: fixed;
  min-width: 1050px;
}
#report-data[data-report-type='entries'] th,
#report-data[data-report-type='entries'] td {
  padding: 12px;
}
#report-data[data-report-type='entries'] td {
  vertical-align: top;
  line-height: 1.45;
  overflow-wrap: break-word;
  max-width: none;
}
#report-data[data-report-type='entries'] th:nth-child(1) {
  width: 64px;
}
#report-data[data-report-type='entries'] th:nth-child(2) {
  width: 104px;
}
#report-data[data-report-type='entries'] th:nth-child(3) {
  width: 76px;
}
#report-data[data-report-type='entries'] th:nth-child(4) {
  width: 160px;
}
#report-data[data-report-type='entries'] th:nth-child(5) {
  width: 166px;
}
#report-data[data-report-type='entries'] th:nth-child(6) {
  width: 136px;
}
#report-data[data-report-type='entries'] th:nth-child(8) {
  width: 118px;
  text-align: right;
}
#report-data .report-id,
#report-data .report-date,
#report-data .report-building {
  white-space: nowrap;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}
#report-data .report-id {
  color: var(--muted);
}
#report-data .report-account b {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#report-data .report-account small {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.4;
}
#report-data .report-empty {
  color: #aaa298;
}

.booking-account span {
  display: block;
  margin-top: 3px;
}

/* DATEV-Konfiguration und Vorschau: Konten bleiben auch bei vielen Zuordnungen erreichbar. */
#dialog.datev-modal {
  width: min(1100px, 94vw);
  max-width: 1100px;
  overflow: auto;
}
.datev-modal .modal-header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 3;
}
.datev-modal .modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
}
.datev-mapping {
  max-height: 42vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.datev-mapping .table-wrap {
  overflow: visible;
}
.datev-mapping th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface, #faf8f5);
}
.datev-mapping td {
  padding: 10px 12px;
  vertical-align: top;
}
.datev-mapping input {
  min-width: 90px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid #e3dbd0;
  border-radius: 5px;
  color: var(--ink);
  background: #fff;
}
.datev-errors {
  color: #9c302a;
  background: #fff2ee;
  padding: 16px;
  border-radius: 8px;
  max-height: 24vh;
  overflow: auto;
}
.datev-errors ul,
.datev-warnings ul {
  margin: 8px 0;
  padding-left: 20px;
}
.datev-warnings {
  margin-bottom: 14px;
  max-height: 20vh;
  overflow: auto;
}

.normalization-allocation input {
  width: 110px;
  padding: 8px 10px;
  border: 1px solid #e3dbd0;
  border-radius: 5px;
  color: var(--ink);
  background: #fff;
}

.system-log-stack summary {
  cursor: pointer;
  font-size: 12px;
  margin-top: 4px;
}
.system-log-stack pre {
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.04);
  padding: 8px;
  border-radius: 6px;
}

.system-log-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.audit-changes dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 10px;
  margin: 6px 0 0;
  font-size: 12px;
}
.audit-changes dt {
  font-weight: 600;
}
.audit-changes dd {
  margin: 0;
  word-break: break-word;
}