:root {
  --font-family-ui: "Lato", "Arial", sans-serif;
  --teal: #0f6269;
  --teal-soft: #e8f3f2;
  --navy: #102b46;
  --ink: #274258;
  --muted: #536a7c;
  --canvas: #f2f5f7;
  --surface: #ffffff;
  --divider: #d7e0e6;
  --divider-soft: #e2e8ec;
  --danger: #8e2f2a;
}

* { box-sizing: border-box; }

body.transparency-page {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font-family-ui);
  font-size: 14px;
  line-height: 1.45;
}

button,
input,
select,
textarea,
table {
  font-family: var(--font-family-ui);
}

.public-header { background: var(--surface); border-bottom: 1px solid var(--divider); }
.public-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1400px, calc(100% - 48px));
  min-height: 72px;
  margin: 0 auto;
}

.public-brand { color: var(--teal); font-weight: 800; }
.public-brand { font-size: clamp(15px, 2.2vw, 22px); }

.public-main {
  width: min(1400px, calc(100% - 48px));
  margin: 0 auto;
  padding: 44px 0 72px;
}

.municipality-heading {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
}

.municipality-heading img {
  width: 150px;
  height: 82px;
  padding: 8px;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 10px;
}

.municipality-heading h1 { margin: 0 0 6px; color: var(--navy); font-size: clamp(22px, 4vw, 36px); line-height: 1.12; letter-spacing: -0.03em; }
.municipality-heading p { margin: 0; color: var(--muted); font-size: 15px; }

.public-ledger { overflow: hidden; background: var(--surface); border: 1px solid var(--divider); border-radius: 10px; }
.ledger-header { padding: 18px 20px 14px; }
.ledger-header h2 { margin: 0 0 4px; color: var(--navy); font-size: 17px; }
.ledger-header p { margin: 0; color: var(--muted); }
.ledger-filters {
  display: grid;
  grid-template-columns: minmax(120px, .7fr) repeat(3, minmax(180px, 1fr)) minmax(160px, .9fr) auto;
  align-items: end;
  gap: 12px;
  padding: 0 20px 18px;
  border-bottom: 1px solid var(--divider);
}
.ledger-filter { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 800; }
.ledger-filter select {
  width: 100%;
  height: 38px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  color: var(--navy);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ledger-filter select:hover { border-color: var(--teal); }
.ledger-filter select:focus-visible,
.clear-filters:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.ledger-filter select:disabled { cursor: wait; opacity: .65; }
.clear-filters {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  color: var(--teal);
  background: var(--surface);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.clear-filters:hover:not(:disabled) { border-color: var(--teal); background: var(--teal-soft); }
.clear-filters:disabled { color: var(--muted); cursor: default; opacity: .55; }
.ledger-state { padding: 40px 20px; color: var(--muted); text-align: center; }
.ledger-error { color: var(--danger); }
.ledger-table-wrap { overflow-x: auto; }
.public-table { width: 100%; min-width: 1120px; border-collapse: collapse; }
.public-table th,
.public-table td { padding: 14px 12px; border-bottom: 1px solid var(--divider-soft); text-align: left; vertical-align: middle; }
.public-table th { color: #36566d; background: #edf2f5; font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.public-table tbody tr:hover { background: #f6f9fa; }
.public-table td:first-child { color: var(--muted); font-weight: 800; text-align: center; }
.proposal-number { color: var(--navy); font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.proposal-number + small,
.bank-cell small { display: block; margin-top: 4px; color: var(--muted); font-weight: 600; }
.currency-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.deadline-badge,
.classification-badge { display: inline-block; padding: 4px 9px; border-radius: 999px; background: var(--teal-soft); color: var(--teal); font-weight: 800; }
.deadline-badge.expired { background: #f9e9e8; color: var(--danger); }
.details-button,
.details-close { min-height: 38px; padding: 0 12px; border: 1px solid var(--teal); border-radius: 8px; font: inherit; font-weight: 800; cursor: pointer; }
.details-button { color: var(--surface); background: var(--teal); white-space: nowrap; }
.details-close { color: var(--teal); background: var(--surface); }
.details-button:hover { background: #0a5056; }
.details-close:hover { background: var(--teal-soft); }
.details-button:focus-visible,
.details-close:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.proposal-details { margin-top: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--divider); border-radius: 10px; scroll-margin-top: 24px; }
.details-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--divider); }
.details-header h2 { margin: 0 0 4px; color: var(--navy); font-size: 17px; }
.details-header p,
.section-heading p { margin: 0; color: var(--muted); }
.details-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--divider); }
.details-summary > div { display: grid; gap: 4px; min-width: 0; padding: 14px 20px; border-right: 1px solid var(--divider-soft); border-bottom: 1px solid var(--divider-soft); }
.details-summary span { color: var(--muted); font-size: 12px; font-weight: 800; }
.details-summary strong { color: var(--navy); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.details-section { padding: 20px; border-bottom: 1px solid var(--divider); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-heading h3 { margin: 0; color: var(--navy); font-size: 15px; }
.work-plan-text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 18px; }
.work-plan-text h4,
.plan-group h4 { margin: 0 0 6px; color: var(--navy); font-size: 13px; }
.work-plan-text p { max-width: 75ch; margin: 0; color: var(--ink); }
.plan-group { margin-top: 14px; }
.plan-group ul { margin: 0; padding: 0; border-top: 1px solid var(--divider-soft); list-style: none; }
.plan-group li { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--divider-soft); }
.plan-group li strong { color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.details-empty { margin: 0; padding: 18px; color: var(--muted); background: #f8fafb; border: 1px solid var(--divider-soft); border-radius: 8px; text-align: center; }
.expenses-table-wrap { overflow-x: auto; }
.expenses-table { width: 100%; min-width: 900px; border-collapse: collapse; }
.expenses-table th,
.expenses-table td { padding: 11px 10px; border-bottom: 1px solid var(--divider-soft); text-align: left; vertical-align: top; }
.expenses-table th { color: #36566d; background: #edf2f5; font-size: 11px; white-space: nowrap; }
.expenses-table td:last-child { color: var(--navy); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-source { margin: 0; padding: 12px 20px; color: var(--muted); font-size: 12px; text-align: right; }

@media (max-width: 620px) {
  .public-nav,
  .public-main { width: min(100% - 32px, 1400px); }
  .public-nav { min-height: 68px; }
  .public-main { padding: 32px 0 56px; }
  .municipality-heading { align-items: flex-start; gap: 14px; }
  .municipality-heading img { width: 92px; height: 68px; }
  .municipality-heading p { font-size: 13px; }
  .ledger-filters { grid-template-columns: 1fr; }
  .clear-filters { width: 100%; }
  .details-header,
  .section-heading { align-items: stretch; flex-direction: column; }
  .details-close { width: 100%; }
  .details-summary { grid-template-columns: 1fr; }
  .details-summary > div { border-right: 0; }
  .work-plan-text { grid-template-columns: 1fr; }
  .plan-group li { align-items: flex-start; flex-direction: column; gap: 4px; }
}

@media (min-width: 621px) and (max-width: 1100px) {
  .ledger-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clear-filters { justify-self: start; }
}