:root {
  --app-ink: #172033;
  --app-muted: #667085;
  --app-surface: #f6f7f9;
  --app-primary: #3558d4;
  --app-primary-dark: #243b91;
}

html { font-size: 14px; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--app-ink);
  background: #fff;
}

main { flex: 1; }

.app-navbar { background: #172033; }
.navbar-brand { letter-spacing: -.02em; }
.hero-section { background: linear-gradient(145deg, #f4f6ff 0%, #fff 58%, #f3faf7 100%); border-bottom: 1px solid #e8eaf0; }
.py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.eyebrow { color: var(--app-primary); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.display-4 { letter-spacing: -.045em; max-width: 12ch; }
.lead { max-width: 62ch; }
.btn-primary { background-color: var(--app-primary); border-color: var(--app-primary); }
.btn-primary:hover { background-color: var(--app-primary-dark); border-color: var(--app-primary-dark); }

.status-panel, .auth-card, .module-card {
  background: rgba(255, 255, 255, .94);
  border: 1px solid #e1e5ec;
  border-radius: 1rem;
}

.status-panel { padding: 1.5rem; }
.status-badge { color: #18794e; background: #e9f8f0; border-radius: 999px; padding: .35rem .65rem; font-size: .82rem; font-weight: 600; }
.status-badge span { display: inline-block; width: .5rem; height: .5rem; margin-right: .3rem; border-radius: 50%; background: #20a66a; }
.status-list li { padding: .45rem 0 .45rem 1.6rem; position: relative; color: var(--app-muted); }
.status-list li::before { content: "✓"; color: #18794e; font-weight: 700; position: absolute; left: 0; }
.module-card { height: 100%; padding: 1.4rem; background: var(--app-surface); }
.module-card h3 { font-size: 1.05rem; }
.module-card p { color: var(--app-muted); margin-bottom: 0; }
.auth-card { max-width: 30rem; padding: 2rem; }
.narrow-content { max-width: 50rem; margin-inline: auto; }
.form-control:focus, .form-check-input:focus, .btn:focus { box-shadow: 0 0 0 .22rem rgba(53, 88, 212, .2); }

.people-page, .operations-page { background: #f8f9fb; min-height: 70vh; }
.filter-panel, .form-card, .detail-card, .people-table-wrap, .operations-table-wrap, .empty-state {
  background: #fff;
  border: 1px solid #e1e5ec;
  border-radius: .9rem;
}
.filter-panel, .form-card, .detail-card, .empty-state { padding: 1.4rem; }
.people-table-wrap, .operations-table-wrap { overflow: hidden; }
.people-table-wrap .table > :not(caption) > * > *, .operations-table-wrap .table > :not(caption) > * > * { padding: .9rem 1rem; }
.people-table-wrap thead th, .operations-table-wrap thead th { color: var(--app-muted); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; background: #f8f9fb; }
.badge-soft-primary { color: #2846af; background: #e9edff; }
.detail-list dt { color: var(--app-muted); font-size: .82rem; font-weight: 600; margin-top: 1rem; }
.detail-list dd { margin-top: .2rem; }
.text-prewrap { white-space: pre-wrap; }
.page-link { color: var(--app-primary); }
.pagination .active > .page-link { background-color: var(--app-primary); border-color: var(--app-primary); }
.operations-subnav { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 1px solid #dfe3ea; }
.operations-subnav a { color: var(--app-muted); font-weight: 600; padding: .65rem .8rem; text-decoration: none; border-bottom: 2px solid transparent; }
.operations-subnav a:hover, .operations-subnav a:focus { color: var(--app-primary); }
.operations-subnav a.active { color: var(--app-primary); border-bottom-color: var(--app-primary); }
.purchase-description { min-width: 12rem; max-width: 28rem; white-space: normal; overflow-wrap: anywhere; }
.purchase-line-row { background: #fbfcfe; }
.purchase-line-total { min-width: 5.5rem; }
.purchase-line-remove .btn { white-space: nowrap; }
.purchase-total-preview { margin-top: .25rem; padding: 1rem 1.15rem; border: 1px solid #cfd7e6; border-radius: .8rem; background: #f3f6ff; }
.purchase-total-value { color: var(--app-primary-dark); font-size: 1.35rem; font-weight: 700; white-space: nowrap; }
.budget-line-row { background: #fbfcfe; }
.budget-name, .budget-category-name, .project-name { min-width: 11rem; max-width: 24rem; white-space: normal; overflow-wrap: anywhere; }
.money-cell { white-space: nowrap; }
.budget-summary-card { height: 100%; padding: 1.15rem; background: #fff; border: 1px solid #e1e5ec; border-radius: .9rem; }
.budget-summary-card .summary-label { color: var(--app-muted); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.budget-summary-card .summary-value { margin-top: .35rem; font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 700; white-space: nowrap; }
.budget-progress { height: .85rem; }
.budget-planned-preview { padding-top: 1rem; border-top: 1px solid #e1e5ec; }
.project-status-card { max-width: 48rem; }
.form-builder-row { margin-bottom: 1rem; padding: 1.2rem; border: 1px solid #dfe3ea; border-radius: .8rem; background: #fbfcfe; }
.choice-options { padding: 1rem; border-top: 1px solid #e1e5ec; }
.option-row { margin-bottom: .65rem; }
.submission-answer { padding: 1rem 0; border-bottom: 1px solid #e1e5ec; }
.submission-answer:last-child { border-bottom: 0; }
.attachment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.attachment-card { min-width: 0; padding: 1.15rem; background: #fff; border: 1px solid #e1e5ec; border-radius: .9rem; }
.attachment-card.is-archived { background: #f8f9fb; }
.attachment-filename { overflow-wrap: anywhere; word-break: break-word; }
.attachment-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.attachment-actions form { margin: 0; }
.attachment-summary-list { border-top: 1px solid #e1e5ec; }
.attachment-summary-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid #e1e5ec; }
.min-width-0 { min-width: 0; }
.attachment-check { padding-top: .45rem; padding-bottom: .45rem; }
.import-filename { overflow-wrap: anywhere; word-break: break-word; }
.import-mapping-row { display: grid; grid-template-columns: minmax(12rem, .75fr) minmax(16rem, 1.5fr); gap: 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid #e8ebf0; }
.import-summary-card { display: flex; flex-direction: column; height: 100%; padding: 1rem; border: 1px solid #dfe3ea; border-radius: .85rem; background: #fff; }
.import-summary-card span { color: var(--app-muted); font-size: .82rem; font-weight: 600; text-transform: uppercase; }
.import-summary-card strong { font-size: 1.7rem; }
.import-summary-card.is-warning { border-color: #e8c96a; }
.import-summary-card.is-error { border-color: #e69a9a; }
.import-preview-list { display: grid; gap: 1rem; }
.import-preview-card { min-width: 0; padding: 1.2rem; border: 1px solid #dfe3ea; border-radius: .9rem; background: #fff; }
.import-preview-card.is-disabled { background: #faf6f6; border-color: #e5b8b8; }
.import-issues { padding-left: 1.25rem; }
.import-issues li { margin-bottom: .35rem; }
.import-issues .is-warning::marker { content: "⚠  "; }
.import-issues .is-error::marker { content: "✕  "; }
.import-duplicates { padding: .85rem; border-left: .3rem solid #d9a514; background: #fff9e8; }
.import-confirm-panel { position: sticky; bottom: .75rem; box-shadow: 0 .5rem 1.5rem rgba(23, 32, 51, .12); }
.report-catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.report-catalog-card { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 13rem; padding: 1.4rem; background: #fff; border: 1px solid #e1e5ec; border-radius: .9rem; }
.report-summary-card { display: flex; flex-direction: column; height: 100%; padding: 1.15rem; background: #fff; border: 1px solid #e1e5ec; border-radius: .9rem; }
.report-summary-card > span { color: var(--app-muted); font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.report-summary-card > strong { margin-top: .35rem; font-size: clamp(1.2rem, 3vw, 1.65rem); white-space: nowrap; }
.report-summary-card > small { margin-top: .2rem; color: var(--app-muted); }
.report-summary-detail { color: var(--app-muted); }
.report-concept-cell { min-width: 13rem; max-width: 22rem; overflow-wrap: anywhere; }
.report-concept-cell span { display: block; margin-top: .3rem; color: var(--app-muted); font-size: .85rem; }
.report-year-metrics { min-width: 13rem; }
.report-metrics-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1rem; }
.report-metrics-list div { min-width: 0; }
.report-metrics-list dt { color: var(--app-muted); font-size: .75rem; font-weight: 600; }
.report-metrics-list dd { margin: .1rem 0 0; white-space: nowrap; }
.report-metrics-list .report-metric-wide { grid-column: 1 / -1; }
.report-variation { min-width: 8rem; }
.report-mobile-list { display: grid; gap: 1rem; }
.report-mobile-card { min-width: 0; padding: 1.15rem; background: #fff; border: 1px solid #e1e5ec; border-radius: .9rem; }
.report-mobile-card > * + * { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e1e5ec; }

@media (max-width: 575.98px) {
  .filter-panel, .form-card, .detail-card { padding: 1rem; }
  .people-table-wrap .table > :not(caption) > * > * { padding: .75rem; }
  .operations-table-wrap .table > :not(caption) > * > * { padding: .75rem; }
  .operations-subnav { overflow-x: auto; flex-wrap: nowrap; }
  .operations-subnav a { white-space: nowrap; }
  .purchase-line-row { padding: 1rem !important; }
  .purchase-line-grid > .purchase-line-field,
  .purchase-line-grid > .purchase-line-total,
  .purchase-line-grid > .purchase-line-remove { width: 100%; }
  .purchase-line-grid .form-control,
  .purchase-line-grid .form-select { min-height: 2.75rem; }
  .purchase-line-total { padding-block: .35rem; }
  .purchase-line-total .form-label { margin-bottom: .25rem; }
  .line-total-preview { display: block; font-size: 1.25rem; }
  .purchase-line-remove .btn { min-height: 2.75rem; }
  .purchase-total-preview { align-items: flex-start !important; }
  .purchase-total-value { width: 100%; font-size: 1.5rem; }
  .attachment-summary-item { align-items: flex-start; flex-direction: column; }
  .attachment-actions, .attachment-actions .btn, .attachment-actions form { width: 100%; }
  .attachment-actions form .btn { width: 100%; min-height: 2.75rem; }
  .attachment-actions > .btn { min-height: 2.75rem; }
  .import-mapping-row { grid-template-columns: 1fr; gap: .35rem; }
  .import-preview-card { padding: 1rem; }
  .import-preview-card .table-responsive { border: 1px solid #e1e5ec; border-radius: .5rem; }
  .import-confirm-panel { position: static; }
}