:root {
  color-scheme: light;
  --bg: #f3f6f9;
  --surface: #ffffff;
  --surface-2: #f5f8fb;
  --ink: #14263d;
  --muted: #64748b;
  --line: #dce5ec;
  --teal: #1f6f78;
  --teal-2: #2d8790;
  --blue: #2c6694;
  --rose: #b34e65;
  --gold: #bf8128;
  --danger: #b23b47;
  --navy: #102a43;
  --navy-2: #183f59;
  --shadow: 0 18px 50px rgba(20, 38, 61, 0.1);
  --shadow-soft: 0 8px 24px rgba(20, 38, 61, 0.07);
  --radius: 14px;
  --sidebar: 290px;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101716;
  --surface: #172221;
  --surface-2: #1e2d2b;
  --ink: #edf4f2;
  --muted: #aabbb7;
  --line: #344542;
  --teal: #63b2a7;
  --teal-2: #88c9bf;
  --blue: #7eb1df;
  --rose: #e08a9b;
  --gold: #e0b259;
  --danger: #ef8b95;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, Aptos, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.culture-band {
  height: 10px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--teal) 0 34px,
      var(--gold) 34px 46px,
      var(--rose) 46px 58px,
      var(--blue) 58px 90px,
      var(--surface) 90px 96px
    );
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.login-screen {
  align-items: center;
  display: grid;
  min-height: calc(100vh - 10px);
  padding: 28px;
  place-items: center;
}

.login-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 470px;
  padding: 32px;
  width: min(100%, 470px);
}

.brand-lockup,
.brand-area {
  align-items: center;
  display: flex;
  gap: 14px;
  min-width: 0;
}

.brand-lockup h1 {
  font-size: 2.2rem;
  line-height: 1;
  margin: 4px 0 0;
}

.brand-sign,
.logo-slot {
  align-items: center;
  aspect-ratio: 1;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--teal) 82%, white), var(--blue));
  border-radius: var(--radius);
  color: #fff;
  display: grid;
  flex: 0 0 54px;
  font-size: 1.05rem;
  font-weight: 800;
  overflow: hidden;
  place-items: center;
  width: 54px;
}

.logo-slot img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.login-copy {
  color: var(--muted);
  line-height: 1.5;
  margin: 22px 0;
}

.stack-form {
  display: grid;
  gap: 14px;
}

label {
  color: var(--muted);
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  min-width: 0;
}

input,
select,
textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  min-height: 42px;
  padding: 9px 11px;
  width: 100%;
}

textarea {
  line-height: 1.45;
  min-height: 78px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
  outline: 0;
}

button,
.button-link {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  display: inline-flex;
  gap: 7px;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  text-decoration: none;
  white-space: nowrap;
}

.primary {
  background: var(--teal);
  color: #fff;
}

.primary:hover {
  background: var(--teal-2);
}

.ghost,
.table-action,
.button-link {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

.ghost:hover,
.table-action:hover,
.button-link:hover,
.icon-button:hover {
  background: var(--surface-2);
}

.danger {
  color: var(--danger);
}

.hint {
  background: var(--surface-2);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  color: var(--muted);
  line-height: 1.45;
  margin: 18px 0 0;
  padding: 12px;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  height: calc(100vh - 10px);
  min-height: calc(100vh - 10px);
  overflow: hidden;
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: grid;
  gap: 20px;
  grid-template-rows: auto 1fr;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 22px 14px;
}

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

.brand-area strong {
  display: block;
  line-height: 1.25;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.sidebar-nav {
  align-content: start;
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-gutter: stable;
}

.nav-section,
.nav-subsection {
  display: grid;
  gap: 5px;
}

.nav-section {
  background: color-mix(in srgb, var(--surface-2) 58%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
}

.nav-section-title {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  margin: 4px 8px 6px;
  text-transform: uppercase;
}

.nav-button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  display: grid;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr);
  justify-content: start;
  min-height: 44px;
  padding: 5px 7px;
  text-align: left;
  white-space: normal;
}

.nav-button-main {
  font-weight: 800;
}

.nav-button-sub {
  min-height: 40px;
}

.nav-button-sub .nav-mark {
  height: 28px;
  width: 28px;
}

.nav-button:hover,
.nav-button.active {
  background: var(--surface-2);
  border-color: var(--line);
}

.nav-mark {
  align-items: center;
  background: color-mix(in srgb, var(--teal) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--teal) 26%, var(--line));
  border-radius: 6px;
  color: var(--teal);
  display: grid;
  font-size: 0.72rem;
  font-weight: 800;
  height: 32px;
  place-items: center;
  width: 32px;
}

.workspace {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  height: calc(100vh - 10px);
  min-width: 0;
  overflow: auto;
}

.topbar {
  align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-height: 84px;
  padding: 18px clamp(18px, 3vw, 34px);
  position: sticky;
  top: 0;
  z-index: 5;
}

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

.page-heading h2 {
  font-size: 1.55rem;
  line-height: 1.15;
  margin: 3px 0 0;
}

.topbar-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.quick-search {
  align-items: center;
  display: flex;
  min-width: min(360px, 42vw);
  position: relative;
}

.quick-search input {
  padding-right: 44px;
}

.quick-search button {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 1.1rem;
  height: 38px;
  min-height: 38px;
  padding: 0;
  position: absolute;
  right: 2px;
  width: 38px;
}

.icon-button {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  flex: 0 0 40px;
  font-size: 1.15rem;
  height: 40px;
  padding: 0;
  width: 40px;
}

.cover-slot {
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid var(--line);
  height: 164px;
  position: relative;
}

.cover-slot::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 85%, transparent), transparent),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 78%, transparent));
  content: "";
  inset: 0;
  position: absolute;
}

.notice-bar {
  background: color-mix(in srgb, var(--gold) 13%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  color: var(--ink);
  padding: 12px clamp(18px, 3vw, 34px);
}

.view {
  display: grid;
  gap: 22px;
  min-width: 0;
  padding: clamp(18px, 3vw, 34px);
}

.toolbar,
.inline-actions,
.pill-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.toolbar {
  justify-content: space-between;
}

.toolbar-title h3,
.section-title h3 {
  font-size: 1.18rem;
  margin: 3px 0 0;
}

.metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric,
.repeat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
}

.metric {
  display: grid;
  gap: 9px;
  min-height: 116px;
  padding: 16px;
}

.metric strong {
  font-size: 1.72rem;
  line-height: 1;
  overflow-wrap: anywhere;
}

.metric:nth-child(2) {
  border-top: 4px solid var(--blue);
}

.metric:nth-child(3) {
  border-top: 4px solid var(--rose);
}

.metric:nth-child(4) {
  border-top: 4px solid var(--gold);
}

.dashboard-grid,
.split-grid,
.settings-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.8fr);
  min-width: 0;
}

.band-panel {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  min-width: 0;
  padding-top: 18px;
}

.forms-intro {
  align-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 11%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
  border-radius: calc(var(--radius) + 4px);
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.38fr);
  padding: clamp(20px, 3vw, 32px);
}

.forms-intro h3 {
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  margin: 4px 0 8px;
}

.forms-intro p {
  color: var(--muted);
  margin: 0;
  max-width: 760px;
}

.forms-rate-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 6px;
  padding: 18px;
}

.forms-rate-card span,
.forms-rate-card small {
  color: var(--muted);
}

.forms-rate-card strong {
  color: var(--teal);
  font-size: 1.55rem;
}

.form-choice-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-choice-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 20px;
  position: relative;
}

.form-choice-card::before {
  background: var(--teal);
  border-radius: calc(var(--radius) + 2px) calc(var(--radius) + 2px) 0 0;
  content: "";
  height: 4px;
  inset: 0 0 auto;
  position: absolute;
}

.form-choice-card.cash::before {
  background: var(--gold);
}

.form-choice-card.purchase::before {
  background: #2f6f73;
}

.form-choice-card h3 {
  margin: 3px 0 7px;
}

.form-choice-card p:not(.eyebrow) {
  color: var(--muted);
  margin: 0;
}

.form-choice-card .inline-actions {
  grid-column: 1 / -1;
}

.form-choice-mark {
  align-items: center;
  background: color-mix(in srgb, var(--teal) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line));
  border-radius: 13px;
  color: var(--teal);
  display: flex;
  font-size: 1rem;
  font-weight: 900;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.form-choice-card.cash .form-choice-mark {
  background: color-mix(in srgb, var(--gold) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--gold) 30%, var(--line));
  color: var(--gold);
}

.form-choice-card.purchase .form-choice-mark {
  background: color-mix(in srgb, #2f6f73 13%, var(--surface));
  border-color: color-mix(in srgb, #2f6f73 30%, var(--line));
  color: #2f6f73;
}

.forms-table .form-number,
.signed-note {
  color: var(--muted);
  display: block;
  margin-top: 5px;
}

.form-document-meta {
  align-items: end;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(180px, 0.35fr) minmax(280px, 1fr);
  padding: 14px;
}

.form-signature-choice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 44px;
  padding: 10px 12px;
}

.form-document-sections {
  display: grid;
  gap: 15px;
}

.form-section-heading {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 11px;
  padding-top: 15px;
}

.form-section-heading > span {
  align-items: center;
  background: var(--teal);
  border-radius: 999px;
  color: white;
  display: flex;
  flex: 0 0 30px;
  font-size: 0.82rem;
  font-weight: 900;
  height: 30px;
  justify-content: center;
}

.form-section-heading div {
  display: grid;
  gap: 2px;
}

.form-section-heading small {
  color: var(--muted);
}

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

.calculation-panel {
  background: color-mix(in srgb, var(--teal) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--teal) 25%, var(--line));
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 16px;
}

.calculation-result {
  align-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 4px;
  padding: 11px 13px;
}

.calculation-result span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.calculation-result strong {
  color: var(--teal);
  font-size: 1.25rem;
}

.calculation-result.total {
  background: var(--teal);
}

.calculation-result.total span,
.calculation-result.total strong {
  color: white;
}

.settings-divider {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 3px;
  margin-top: 5px;
  padding-top: 14px;
}

.settings-divider small {
  color: var(--muted);
}

.repeat-list {
  display: grid;
  gap: 10px;
}

.volunteer-work-editor {
  display: grid;
  gap: 12px;
}

.field-title {
  color: var(--muted);
  display: block;
}

.volunteer-work-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.volunteer-work-table {
  display: grid;
  gap: 6px;
  overflow-x: auto;
}

.volunteer-work-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(140px, 0.8fr) minmax(210px, 1.5fr) minmax(90px, 0.55fr) minmax(100px, 0.6fr) minmax(120px, 0.7fr);
  min-width: 760px;
}

.volunteer-work-header {
  color: var(--muted);
  font-size: 0.82rem;
}

.repeat-card {
  display: grid;
  gap: 6px;
  padding: 13px;
}

.repeat-card strong,
td strong {
  overflow-wrap: anywhere;
}

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

.tag,
.status-pill {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.78rem;
  min-height: 25px;
  padding: 4px 9px;
}

.status-pill.good {
  background: color-mix(in srgb, var(--teal) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--teal) 30%, var(--line));
  color: var(--teal);
}

.status-pill.warn {
  background: color-mix(in srgb, var(--gold) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--gold) 32%, var(--line));
  color: var(--gold);
}

.status-pill.alert {
  background: color-mix(in srgb, var(--rose) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--rose) 30%, var(--line));
  color: var(--rose);
}

.chart-frame {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 270px;
  padding: 14px;
}

.chart-frame canvas {
  display: block;
  height: 230px;
  width: 100%;
}

.table-shell {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-height: max(320px, calc(100dvh - 300px));
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.bank-transactions-table {
  max-height: max(300px, calc(100dvh - 320px));
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.bank-transactions-table thead th {
  box-shadow: 0 1px 0 var(--line);
  position: sticky;
  top: 0;
  z-index: 4;
}

table {
  background: var(--surface);
  border-collapse: collapse;
  min-width: 760px;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  box-shadow: 0 1px 0 var(--line);
  z-index: 4;
}

td {
  line-height: 1.4;
  max-width: 320px;
  overflow-wrap: anywhere;
}

tr:last-child td {
  border-bottom: 0;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.file-action-list,
.file-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.file-action-list {
  flex-direction: column;
  align-items: flex-start;
}

.table-action {
  font-size: 0.84rem;
  min-height: 32px;
  padding: 5px 8px;
}

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  padding: 22px;
}

.filter-row {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(140px, 210px));
}

.modal {
  background: transparent;
  border: 0;
  max-height: calc(100vh - 28px);
  max-width: min(760px, calc(100vw - 28px));
  padding: 0;
  width: 100%;
}

.modal.wide {
  max-width: min(1180px, calc(100vw - 28px));
}

.working-year-button {
  white-space: nowrap;
}

.working-year-modal {
  max-width: min(460px, calc(100vw - 28px));
}

.working-year-options {
  border: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}

.working-year-options label {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  gap: 10px;
  min-height: 62px;
  padding: 14px;
}

.working-year-options input {
  min-height: 18px;
  width: 18px;
}

.working-year-options span {
  font-size: 1.2rem;
  font-weight: 800;
}

.modal::backdrop {
  background: rgba(12, 22, 22, 0.56);
}

.dialog-body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  gap: 18px;
  margin: 0;
  max-height: calc(100vh - 28px);
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px;
}

.dialog-body header,
.dialog-body footer {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.dialog-body h3 {
  font-size: 1.34rem;
  margin: 3px 0 0;
}

.dialog-body footer {
  border-top: 1px solid var(--line);
  justify-content: flex-end;
  padding-top: 14px;
}

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

.record-attachments {
  background: color-mix(in srgb, var(--teal) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  padding: 14px;
}

.record-attachments p {
  margin: 4px 0 0;
}

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

.saved-attachment {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding: 9px 10px;
}

.saved-attachment > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.saved-attachment small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.file-existing-note {
  background: color-mix(in srgb, var(--teal) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--teal) 25%, var(--line));
  border-radius: 6px;
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
  padding: 8px 10px;
}

.span-2 {
  grid-column: span 2;
}

.checkbox {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  gap: 10px;
  min-height: 42px;
  padding: 9px 11px;
}

.checkbox input {
  min-height: 18px;
  width: 18px;
}

.project-overview {
  display: grid;
  gap: 16px;
}

.project-summary {
  background: var(--surface-2);
  border-left: 5px solid var(--teal);
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px;
}

.project-context {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 12px;
}

.summary-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

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

.detail-block {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
  min-width: 0;
  padding-top: 12px;
}

.detail-block h4 {
  font-size: 1rem;
  margin: 0;
}

.compact-selector {
  display: grid;
  gap: 8px;
}

.project-expense-detail {
  display: grid;
  gap: 10px;
}

.expense-detail-card {
  gap: 12px;
}

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

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

.field-attention {
  background: color-mix(in srgb, var(--gold) 10%, var(--surface));
  border: 2px solid color-mix(in srgb, var(--gold) 55%, var(--line));
  border-radius: 8px;
  padding: 8px;
}

.detail-fields {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-field {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
}

.preview-modal {
  max-width: min(1120px, calc(100vw - 28px));
}

.preview-body {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: min(70vh, 740px);
  overflow: hidden;
}

.preview-body iframe,
.preview-body img {
  border: 0;
  display: block;
  height: min(70vh, 740px);
  object-fit: contain;
  width: 100%;
}

.preview-toolbar,
.readonly-note {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.readonly-note {
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: var(--radius);
  color: var(--muted);
  padding: 10px 12px;
}

.calendar-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
}

.calendar-grid {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow: hidden;
}

.calendar-cell {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: grid;
  gap: 6px;
  min-height: 98px;
  padding: 8px;
}

.calendar-cell.outside {
  color: var(--muted);
  background: var(--surface-2);
}

.calendar-head {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  min-height: 34px;
  text-transform: uppercase;
}

.day-chip {
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  border-left: 3px solid var(--blue);
  border-radius: 4px;
  color: var(--ink);
  font-size: 0.75rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  padding: 4px;
}

.report-actions {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: 150px minmax(210px, 1fr) repeat(3, auto);
}

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

.report-export-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bank-import-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.settings-block {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 13px;
  min-width: 0;
  padding-top: 16px;
}

.compact-form {
  display: grid;
  gap: 10px;
}

.lookup-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.toast {
  background: var(--ink);
  border-radius: var(--radius);
  bottom: 18px;
  box-shadow: var(--shadow);
  color: var(--bg);
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 14px;
  position: fixed;
  right: 18px;
  z-index: 20;
}

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

  .app-shell {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .brand-area > div:last-child,
  .nav-button span:last-child {
    display: none;
  }

  .brand-area {
    justify-content: center;
    padding-inline: 0;
  }

  .nav-button {
    grid-template-columns: 1fr;
    justify-items: center;
  }

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

  .dashboard-grid,
  .split-grid,
  .calendar-layout {
    grid-template-columns: 1fr;
  }

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

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

@media (max-width: 760px) {
  .culture-band {
    height: 8px;
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    display: block;
    overflow: auto;
    padding: 10px;
  }

  .brand-area {
    display: none;
  }

  .sidebar-nav {
    display: flex;
    min-width: max-content;
  }

  .nav-button {
    grid-template-columns: 28px auto;
    min-height: 40px;
    width: auto;
  }

  .nav-button span:last-child {
    display: inline;
    font-size: 0.88rem;
  }

  .nav-mark {
    height: 28px;
    width: 28px;
  }

  .topbar {
    align-items: start;
    flex-direction: column;
    min-height: 0;
    position: static;
  }

  .topbar-actions,
  .quick-search {
    width: 100%;
  }

  .quick-search {
    min-width: 0;
  }

  .metrics,
  .settings-grid,
  .report-export-grid,
  .form-grid,
  .detail-grid,
  .detail-fields,
  .project-summary,
  .project-summary.compact,
  .project-context,
  .filter-row,
  .working-year-options,
  .report-actions {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: auto;
  }

  .view {
    padding: 16px;
  }

  .calendar-cell {
    min-height: 74px;
    padding: 5px;
  }

  .day-chip {
    display: none;
  }
}

/* Sodobna vizualna plast Romano vozo */
body {
  background:
    radial-gradient(circle at 88% 6%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 28rem),
    var(--bg);
}

.culture-band {
  background: linear-gradient(90deg, #2b6cb0 0 33%, #c53030 33% 66%, #2f855a 66% 100%);
  height: 4px;
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.105em;
}

.login-screen {
  background:
    radial-gradient(circle at 16% 18%, rgba(43, 108, 176, 0.14), transparent 25rem),
    radial-gradient(circle at 84% 82%, rgba(47, 133, 90, 0.12), transparent 27rem),
    linear-gradient(145deg, #f7fafc, #eef4f7);
  min-height: calc(100vh - 4px);
}

body[data-theme="dark"] .login-screen {
  background:
    radial-gradient(circle at 16% 18%, rgba(43, 108, 176, 0.18), transparent 25rem),
    radial-gradient(circle at 84% 82%, rgba(47, 133, 90, 0.14), transparent 27rem),
    var(--bg);
}

.login-panel {
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 24px;
  max-width: 500px;
  padding: 40px;
  position: relative;
}

.login-panel::before {
  background: linear-gradient(90deg, #2b6cb0, #c53030, #2f855a);
  border-radius: 24px 24px 0 0;
  content: "";
  height: 4px;
  inset: -1px -1px auto;
  position: absolute;
}

.brand-sign,
.logo-slot {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--teal) 18%, var(--line));
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(16, 42, 67, 0.12);
  color: var(--navy);
}

.brand-sign {
  flex-basis: 76px;
  width: 76px;
}

.brand-sign img,
.logo-slot img {
  display: block;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  width: 100%;
}

.brand-lockup h1 {
  color: var(--navy);
  font-size: clamp(2rem, 6vw, 2.65rem);
  letter-spacing: -0.035em;
}

body[data-theme="dark"] .brand-lockup h1 {
  color: var(--ink);
}

.login-copy {
  font-size: 1.02rem;
  margin: 26px 0;
}

input,
select,
textarea {
  border-radius: 10px;
  min-height: 44px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

button,
.button-link {
  border-radius: 10px;
  font-weight: 650;
  min-height: 42px;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

button:active,
.button-link:active {
  transform: translateY(1px);
}

.primary {
  background: var(--teal);
  box-shadow: 0 7px 16px color-mix(in srgb, var(--teal) 20%, transparent);
}

.app-shell,
.workspace {
  height: calc(100vh - 4px);
  min-height: calc(100vh - 4px);
}

.sidebar {
  background: linear-gradient(180deg, var(--navy), var(--navy-2));
  border-right: 0;
  box-shadow: 12px 0 34px rgba(16, 42, 67, 0.12);
  gap: 18px;
  padding: 20px 14px;
  z-index: 7;
}

.brand-area {
  border-bottom-color: rgba(255, 255, 255, 0.13);
  padding-bottom: 20px;
}

.brand-area .eyebrow {
  color: #9cc7d0;
}

.brand-area strong {
  color: #fff;
  font-size: 0.98rem;
}

.logo-slot {
  border-color: rgba(255, 255, 255, 0.28);
  flex-basis: 60px;
  width: 60px;
}

.nav-section {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 6px;
}

.nav-section-title {
  color: #9cc7d0;
  letter-spacing: 0.08em;
}

.nav-button {
  border-radius: 10px;
  color: #dcebf0;
  min-height: 46px;
  padding: 6px 8px;
}

.nav-button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
}

.nav-button.active {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  color: var(--navy);
}

.nav-mark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: 9px;
  color: #a9dce0;
}

.nav-button.active .nav-mark {
  background: color-mix(in srgb, var(--teal) 10%, #fff);
  border-color: color-mix(in srgb, var(--teal) 24%, var(--line));
  color: var(--teal);
}

.topbar {
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 1px 0 rgba(16, 42, 67, 0.03);
  min-height: 88px;
}

.page-heading h2 {
  font-size: clamp(1.45rem, 2vw, 1.8rem);
  letter-spacing: -0.025em;
}

.local-status {
  align-items: center;
  background: color-mix(in srgb, var(--teal) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--teal) 20%, var(--line));
  border-radius: 999px;
  color: var(--teal);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
}

.local-status > span {
  background: #2f855a;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(47, 133, 90, 0.12);
  height: 7px;
  width: 7px;
}

.quick-search input {
  background: var(--surface-2);
  border-color: transparent;
}

.quick-search input:focus {
  background: var(--surface);
  border-color: var(--teal);
}

.view {
  gap: 20px;
  padding: clamp(20px, 3vw, 36px);
}

.view > .toolbar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px 18px;
}

.metrics {
  gap: 14px;
}

.metric,
.repeat-card,
.band-panel {
  box-shadow: var(--shadow-soft);
}

.metric {
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
  border-top: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  padding: 18px;
  position: relative;
}

.metric::before {
  background: var(--teal);
  border-radius: 0 0 4px 4px;
  content: "";
  height: 4px;
  inset: 0 18px auto;
  position: absolute;
}

.metric:nth-child(2),
.metric:nth-child(3),
.metric:nth-child(4) {
  border-top: 1px solid var(--line);
}

.metric:nth-child(2)::before { background: var(--blue); }
.metric:nth-child(3)::before { background: var(--rose); }
.metric:nth-child(4)::before { background: var(--gold); }

.metric strong {
  font-size: clamp(1.45rem, 2.25vw, 1.9rem);
  letter-spacing: -0.03em;
}

.band-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  gap: 16px;
  padding: 20px;
}

.repeat-card {
  border-color: color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 12px;
  box-shadow: none;
  padding: 14px;
}

.table-shell {
  background: var(--surface);
  border-color: var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

th {
  background: color-mix(in srgb, var(--surface-2) 92%, var(--surface));
  color: #52657b;
  letter-spacing: 0.045em;
  padding-block: 13px;
}

tbody tr {
  transition: background 120ms ease;
}

tbody tr:hover {
  background: color-mix(in srgb, var(--teal) 4%, var(--surface));
}

.filter-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}

.status-pill,
.tag {
  font-weight: 700;
}

.modal {
  max-width: min(860px, calc(100vw - 28px));
}

.dialog-body {
  border: 0;
  border-radius: 20px;
  gap: 20px;
  padding: 24px;
}

.dialog-body header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.dialog-body footer {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  bottom: -24px;
  margin: 0 -24px -24px;
  padding: 16px 24px 20px;
  position: sticky;
  z-index: 3;
}

.form-grid {
  gap: 15px;
}

.duplicate-warning {
  background: color-mix(in srgb, var(--gold) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line));
  border-left: 5px solid var(--gold);
  border-radius: 12px;
  color: var(--ink);
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}

.duplicate-warning[hidden] {
  display: none;
}

.duplicate-warning-header {
  align-items: flex-start;
  display: flex;
  gap: 11px;
}

.duplicate-warning-icon {
  align-items: center;
  background: color-mix(in srgb, var(--gold) 18%, var(--surface));
  border-radius: 50%;
  color: var(--gold);
  display: inline-flex;
  flex: 0 0 32px;
  font-size: 1.05rem;
  font-weight: 900;
  height: 32px;
  justify-content: center;
}

.duplicate-warning h4,
.duplicate-warning p {
  margin: 0;
}

.duplicate-warning p {
  color: var(--muted);
  line-height: 1.45;
  margin-top: 3px;
}

.duplicate-match-list {
  display: grid;
  gap: 7px;
}

.duplicate-match {
  align-items: center;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line));
  border-radius: 9px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 9px 10px;
}

.duplicate-match > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.duplicate-match small {
  color: var(--muted);
}

.toast {
  border-radius: 12px;
  bottom: 22px;
  padding: 13px 16px;
  right: 22px;
}

.annual-report-toolbar {
  align-items: end;
}

.report-actions {
  align-items: end;
}

.report-actions label {
  min-width: 120px;
}

.report-disclaimer,
.report-ok {
  align-items: flex-start;
  background: color-mix(in srgb, var(--teal) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
  border-left: 5px solid var(--teal);
  border-radius: var(--radius);
  display: grid;
  gap: 4px;
  padding: 15px 17px;
}

.report-disclaimer span,
.report-ok span {
  color: var(--muted);
}

.report-warning-panel {
  background: color-mix(in srgb, var(--gold) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  padding: 17px;
}

.report-warning-panel .repeat-card {
  align-items: center;
  background: var(--surface);
  grid-template-columns: auto minmax(0, 1fr);
}

.annual-report-section,
.report-reference,
.report-exclusions,
.report-review-list {
  margin-top: 2px;
}

.annual-report-table table {
  min-width: 840px;
}

.annual-report-table .number-cell {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.annual-report-table tr.has-value td {
  background: color-mix(in srgb, var(--teal) 4%, var(--surface));
}

.annual-report-table tr.zero-value td {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}

.report-reference > p,
.report-exclusions > p,
.report-review-card p {
  line-height: 1.5;
  margin: 0;
}

.report-import-panel {
  display: grid;
  gap: 16px;
}

.report-import-form {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-import-form label {
  min-width: 0;
}

.report-import-file-label input[type="file"] {
  width: 100%;
}

.automatic-report-title,
.report-file-selection,
.report-import-submit-row {
  grid-column: 1 / -1;
}

.automatic-report-title {
  background: color-mix(in srgb, var(--teal) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
  border-radius: 12px;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
}

.automatic-report-title span {
  color: var(--muted);
  font-size: 0.86rem;
}

.automatic-report-title strong {
  font-size: 1.08rem;
}

.report-file-selection,
.report-upload-success {
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: 12px;
  display: grid;
  gap: 4px;
  padding: 13px 15px;
}

.report-file-selection span,
.report-upload-success span,
.report-import-submit-row span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.report-file-selection.ready,
.report-upload-success {
  background: color-mix(in srgb, var(--teal) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--teal) 35%, var(--line));
  border-left-color: var(--teal);
}

.report-upload-success {
  font-size: 1.02rem;
}

.report-import-submit-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.report-import-submit {
  font-size: 1rem;
  min-height: 48px;
  padding-inline: 22px;
}

.has-uploaded-reports {
  border-left: 5px solid var(--teal);
}

.report-archive-table td:nth-child(2) {
  min-width: 240px;
}

.report-archive-table td:nth-child(2) small {
  color: var(--muted);
  display: block;
  margin-top: 4px;
}

.ajpes-workbook-list,
.ddpo-report-list {
  display: grid;
  gap: 18px;
}

.ajpes-workbook-card,
.ddpo-report-card {
  background: color-mix(in srgb, var(--teal) 3%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
  border-radius: 16px;
  display: grid;
  gap: 16px;
  padding: 18px;
}

.ajpes-workbook-heading,
.ajpes-sheet-preview-heading,
.ddpo-report-heading,
.ddpo-section-preview-heading {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.ajpes-workbook-heading h3,
.ajpes-sheet-preview-heading h4,
.ajpes-workbook-heading p,
.ajpes-sheet-preview-heading p,
.ddpo-report-heading h3,
.ddpo-section-preview-heading h4,
.ddpo-report-heading p,
.ddpo-section-preview-heading p {
  margin: 0;
}

.ajpes-workbook-heading > div,
.ajpes-sheet-preview-heading > div,
.ddpo-report-heading > div,
.ddpo-section-preview-heading > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ajpes-workbook-heading h3,
.ddpo-report-heading h3 {
  overflow-wrap: anywhere;
}

.ajpes-sheet-picker,
.ddpo-section-picker {
  display: grid;
  font-weight: 700;
  gap: 7px;
  max-width: 720px;
}

.ajpes-sheet-picker select,
.ddpo-section-picker select {
  background: var(--surface);
  border: 2px solid color-mix(in srgb, var(--teal) 50%, var(--line));
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  min-height: 48px;
  padding: 9px 42px 9px 12px;
  width: 100%;
}

.ajpes-workbook-warnings,
.ddpo-report-warnings {
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  display: grid;
  gap: 5px;
  padding: 11px 13px;
}

.ajpes-workbook-warnings span,
.ddpo-report-warnings span {
  color: var(--muted);
}

.ajpes-sheet-preview-heading,
.ddpo-section-preview-heading {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.ajpes-sheet-preview {
  max-height: 560px;
  overflow: auto;
}

.ajpes-sheet-preview table {
  font-size: 0.9rem;
  min-width: 760px;
}

.ajpes-sheet-preview td {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 9px 11px;
  vertical-align: top;
}

.ajpes-sheet-preview .ajpes-preview-label {
  min-width: 420px;
}

.ajpes-sheet-preview .ajpes-preview-value {
  font-variant-numeric: tabular-nums;
  min-width: 110px;
  text-align: right;
  white-space: nowrap;
}

.ajpes-sheet-preview .ajpes-preview-title-row td {
  background: color-mix(in srgb, var(--teal) 10%, var(--surface));
  font-weight: 800;
}

.ajpes-sheet-preview .ajpes-preview-heading-row td {
  background: color-mix(in srgb, var(--navy) 5%, var(--surface));
  font-weight: 700;
}

.ddpo-summary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ddpo-summary-grid > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 6px;
  padding: 13px 14px;
}

.ddpo-summary-grid span,
.ddpo-overview-grid dt {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.ddpo-summary-grid strong {
  font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
}

.ddpo-overview-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.ddpo-overview-grid > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  display: grid;
  gap: 5px;
  padding: 12px 14px;
}

.ddpo-overview-grid dd,
.ddpo-overview-grid dt {
  margin: 0;
}

.ddpo-overview-grid dd {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ddpo-section-preview {
  max-height: 590px;
  overflow: auto;
}

.ddpo-section-preview table {
  font-size: 0.94rem;
  min-width: 780px;
}

.ddpo-section-preview th,
.ddpo-section-preview td {
  padding: 11px 13px;
  vertical-align: top;
}

.ddpo-section-preview th:first-child,
.ddpo-section-preview td:first-child {
  width: 96px;
}

.ddpo-section-preview th:nth-child(2),
.ddpo-section-preview td:nth-child(2) {
  min-width: 500px;
}

.ddpo-section-preview .number-cell {
  font-variant-numeric: tabular-nums;
  min-width: 130px;
  text-align: right;
  white-space: nowrap;
}

.ddpo-section-preview tr.has-value td {
  background: color-mix(in srgb, var(--teal) 6%, var(--surface));
}

.ddpo-section-preview tr.zero-value td {
  color: color-mix(in srgb, var(--muted) 88%, var(--ink));
}

.ddpo-section-preview tr.major-row td {
  font-weight: 700;
}

@media (max-width: 1050px) {
  .report-import-form {
    grid-template-columns: 1fr 1fr;
  }

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

@media (max-width: 680px) {
  .report-import-form {
    grid-template-columns: 1fr;
  }

  .ajpes-workbook-heading,
  .ajpes-sheet-preview-heading,
  .ddpo-report-heading,
  .ddpo-section-preview-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .ddpo-summary-grid,
  .ddpo-overview-grid {
    grid-template-columns: 1fr;
  }
}

.report-review-card {
  align-items: center;
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 1.4fr) auto;
}

.report-review-card > div {
  display: grid;
  gap: 4px;
}

@media print {
  .culture-band,
  .sidebar,
  .topbar,
  .toast,
  .report-actions,
  .report-review-card button {
    display: none !important;
  }

  .app-shell {
    display: block;
  }

  .main-content,
  #view {
    margin: 0;
    max-width: none;
    padding: 0;
    width: 100%;
  }

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

  .band-panel,
  .metric,
  .table-shell {
    box-shadow: none;
    break-inside: avoid;
  }

  .annual-report-table {
    overflow: visible;
  }

  .annual-report-table table {
    font-size: 9pt;
    min-width: 0;
  }
}

@media (max-width: 1120px) {
  .local-status {
    display: none;
  }

  .four-column-form,
  .calculation-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .login-panel {
    border-radius: 18px;
    padding: 28px 22px;
  }

  .brand-sign {
    flex-basis: 64px;
    width: 64px;
  }

  .sidebar {
    background: var(--navy);
    border-bottom: 0;
  }

  .topbar-actions {
    flex-wrap: wrap;
  }

  .working-year-button {
    flex: 1 1 auto;
  }

  .dialog-body {
    border-radius: 15px;
    padding: 18px;
  }

  .dialog-body footer {
    bottom: -18px;
    margin: 0 -18px -18px;
    padding: 14px 18px 18px;
  }

  .duplicate-match {
    align-items: stretch;
    flex-direction: column;
  }

  .forms-intro,
  .form-choice-grid,
  .form-document-meta,
  .four-column-form,
  .calculation-panel {
    grid-template-columns: 1fr;
  }

  .form-choice-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .report-review-card {
    align-items: stretch;
    grid-template-columns: 1fr;
  }
}