/* ==========================================================================
   InnovaFincas — theme layer
   A thin, minimalist skin on top of Bootstrap 5.3.
   Brand: green #369118 (action / growth), blue #024498 (chrome / structure).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --if-green: #369118;
  --if-green-rgb: 54, 145, 24;
  --if-green-dark: #2b7513;
  --if-green-darker: #215a0e;
  --if-green-soft: #eef6ea;
  --if-green-border: #cbe3c0;

  --if-blue: #024498;
  --if-blue-rgb: 2, 68, 152;
  --if-blue-dark: #013571;
  --if-blue-darker: #012a5b;
  --if-blue-soft: #eaf0f8;
  --if-blue-border: #c2d3ea;

  /* Secondary / semantic — muted on purpose, nothing garish */
  --if-amber: #96620a;
  --if-amber-soft: #fdf5e6;
  --if-amber-border: #ecd9ad;
  --if-red: #a3271f;
  --if-red-soft: #fbeceb;
  --if-red-border: #eecac7;

  /* Neutrals */
  --if-bg: #f6f7f6;
  --if-surface: #ffffff;
  --if-ink: #1d2721;
  --if-ink-soft: #5b6660;
  --if-ink-faint: #838d88;
  --if-border: #e2e6e3;
  --if-border-strong: #cdd3cf;

  /* Shape & depth — restrained */
  --if-radius: 8px;
  --if-radius-sm: 6px;
  --if-shadow: 0 1px 2px rgba(16, 32, 24, .05);
  --if-shadow-lift: 0 4px 16px rgba(16, 32, 24, .08);

  /* Bootstrap remaps */
  --bs-primary: var(--if-green);
  --bs-primary-rgb: var(--if-green-rgb);
  --bs-secondary: var(--if-blue);
  --bs-secondary-rgb: var(--if-blue-rgb);
  --bs-body-bg: var(--if-bg);
  --bs-body-color: var(--if-ink);
  --bs-border-color: var(--if-border);
  --bs-border-radius: var(--if-radius);
  --bs-border-radius-sm: var(--if-radius-sm);
  --bs-link-color: var(--if-blue);
  --bs-link-color-rgb: var(--if-blue-rgb);
  --bs-link-hover-color: var(--if-blue-dark);
  --bs-emphasis-color: var(--if-ink);
  --bs-secondary-color: var(--if-ink-soft);
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --bs-focus-ring-color: rgba(var(--if-green-rgb), .2);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--if-bg);
  color: var(--if-ink);
  font-family: var(--bs-font-sans-serif);
  font-size: .9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.01em; color: var(--if-ink); }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid rgba(var(--if-green-rgb), .45); outline-offset: 2px; }

::selection { background: rgba(var(--if-green-rgb), .18); }

/* --------------------------------------------------------------------------
   3. App shell — topbar, sidebar, page
   -------------------------------------------------------------------------- */
.app-topbar {
  background: var(--if-blue);
  color: #fff;
  border-bottom: 1px solid var(--if-blue-darker);
}

.app-topbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -.015em;
  color: #fff;
}
.app-topbar .navbar-brand:hover { color: #fff; text-decoration: none; }

.brand-logo {
  height: 1.75rem;
  width: auto;
}

.footer-logo {
  height: 1.25rem;
  width: auto;
}

.app-topbar .nav-link {
  color: rgba(255, 255, 255, .78);
  font-weight: 500;
  padding: .4rem .75rem;
  border-radius: var(--if-radius-sm);
}
.app-topbar .nav-link:hover,
.app-topbar .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .1); text-decoration: none; }
.app-topbar .nav-link.active { color: #fff; background: rgba(255, 255, 255, .16); }

.app-topbar .navbar-toggler {
  border-color: rgba(255, 255, 255, .3);
  padding: .25rem .5rem;
}
.app-topbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .18); }

/* User chip */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255, 255, 255, .85);
  font-size: .875rem;
}
.user-avatar {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
}

.app-main { flex: 1 0 auto; padding: 1.75rem 0 3rem; }

/* Page header */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.page-header .page-title {
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0;
  color: var(--if-ink);
}
.page-header .page-subtitle {
  margin: .2rem 0 0;
  color: var(--if-ink-soft);
  font-size: .875rem;
}
.page-header .page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.app-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--if-border);
  background: var(--if-surface);
  color: var(--if-ink-faint);
  font-size: .8125rem;
  padding: 1rem 0;
}

/* --------------------------------------------------------------------------
   4. Surfaces
   -------------------------------------------------------------------------- */
.surface,
.card {
  background: var(--if-surface);
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius);
  box-shadow: var(--if-shadow);
}
.card { --bs-card-border-color: var(--if-border); }
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--if-border);
  font-weight: 600;
  padding: .875rem 1.125rem;
}
.surface-body { padding: 1.125rem; }

/* Collapsible search panel */
.filter-panel {
  background: var(--if-surface);
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius);
  box-shadow: var(--if-shadow);
  margin-bottom: 1.25rem;
}
.filter-panel > summary {
  list-style: none;
  cursor: pointer;
  padding: .75rem 1.125rem;
  font-weight: 600;
  font-size: .875rem;
  color: var(--if-blue);
  display: flex;
  align-items: center;
  gap: .5rem;
  border-radius: var(--if-radius);
}
.filter-panel > summary::-webkit-details-marker { display: none; }
.filter-panel > summary::after {
  content: "";
  margin-left: auto;
  width: .5rem;
  height: .5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.filter-panel[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.filter-panel[open] > summary { border-bottom: 1px solid var(--if-border); border-radius: var(--if-radius) var(--if-radius) 0 0; }
.filter-panel > summary:hover { background: var(--if-blue-soft); }
.filter-panel .filter-body { padding: 1.125rem 1.125rem .25rem; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--if-radius-sm);
  --bs-btn-padding-y: .4rem;
  --bs-btn-padding-x: .85rem;
  --bs-btn-font-size: .875rem;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn-primary {
  --bs-btn-bg: var(--if-green);
  --bs-btn-border-color: var(--if-green);
  --bs-btn-hover-bg: var(--if-green-dark);
  --bs-btn-hover-border-color: var(--if-green-dark);
  --bs-btn-active-bg: var(--if-green-darker);
  --bs-btn-active-border-color: var(--if-green-darker);
  --bs-btn-disabled-bg: var(--if-green);
  --bs-btn-disabled-border-color: var(--if-green);
  --bs-btn-focus-shadow-rgb: var(--if-green-rgb);
}

.btn-secondary {
  --bs-btn-bg: var(--if-blue);
  --bs-btn-border-color: var(--if-blue);
  --bs-btn-hover-bg: var(--if-blue-dark);
  --bs-btn-hover-border-color: var(--if-blue-dark);
  --bs-btn-active-bg: var(--if-blue-darker);
  --bs-btn-active-border-color: var(--if-blue-darker);
  --bs-btn-focus-shadow-rgb: var(--if-blue-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--if-green-dark);
  --bs-btn-border-color: var(--if-green-border);
  --bs-btn-hover-bg: var(--if-green);
  --bs-btn-hover-border-color: var(--if-green);
  --bs-btn-active-bg: var(--if-green-dark);
  --bs-btn-active-border-color: var(--if-green-dark);
  --bs-btn-focus-shadow-rgb: var(--if-green-rgb);
}

.btn-outline-secondary {
  --bs-btn-color: var(--if-blue);
  --bs-btn-border-color: var(--if-blue-border);
  --bs-btn-hover-bg: var(--if-blue);
  --bs-btn-hover-border-color: var(--if-blue);
  --bs-btn-active-bg: var(--if-blue-dark);
  --bs-btn-active-border-color: var(--if-blue-dark);
  --bs-btn-focus-shadow-rgb: var(--if-blue-rgb);
}

/* Keep button-style hover color on <a class="btn"> inside tables, overriding .table a:hover */
.table a.btn:hover { color: var(--bs-btn-hover-color); text-decoration: none; }

.btn-outline-danger {
  --bs-btn-color: var(--if-red);
  --bs-btn-border-color: var(--if-red-border);
  --bs-btn-hover-bg: var(--if-red);
  --bs-btn-hover-border-color: var(--if-red);
  --bs-btn-active-bg: var(--if-red);
  --bs-btn-active-border-color: var(--if-red);
}

.btn-danger {
  --bs-btn-bg: var(--if-red);
  --bs-btn-border-color: var(--if-red);
  --bs-btn-hover-bg: #8b211a;
  --bs-btn-hover-border-color: #8b211a;
}

.btn-light {
  --bs-btn-bg: var(--if-surface);
  --bs-btn-border-color: var(--if-border-strong);
  --bs-btn-color: var(--if-ink);
  --bs-btn-hover-bg: #f1f3f1;
  --bs-btn-hover-border-color: var(--if-border-strong);
}

/* Square icon-only buttons used in row action groups */
.btn-icon {
  --bs-btn-padding-x: .45rem;
  --bs-btn-padding-y: .3rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  min-height: 1.85rem;
}
.btn-icon i { font-size: .95rem; }

.row-actions { display: inline-flex; gap: .3rem; align-items: center; }

/* Crispy's default submit gets the brand treatment */
input[type="submit"].btn,
.btn.button.white {
  background: var(--if-green);
  border-color: var(--if-green);
  color: #fff;
}
input[type="submit"].btn:hover,
.btn.button.white:hover { background: var(--if-green-dark); border-color: var(--if-green-dark); color: #fff; }

/* Dropdown menus (e.g. the topbar's "Nuevo..." action) */
.dropdown-menu {
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius);
  box-shadow: var(--if-shadow-lift);
  padding: .375rem;
  font-size: .875rem;
}
.dropdown-item {
  border-radius: var(--if-radius-sm);
  padding: .45rem .625rem;
  color: var(--if-ink);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--if-green-soft);
  color: var(--if-green-darker);
}
.dropdown-item:active,
.dropdown-item.active {
  background: var(--if-green);
  color: #fff;
}

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */
.form-label,
label.form-label,
.col-form-label {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--if-ink-soft);
  margin-bottom: .3rem;
}

.form-control,
.form-select {
  border-color: var(--if-border-strong);
  border-radius: var(--if-radius-sm);
  font-size: .875rem;
  padding: .4rem .625rem;
  color: var(--if-ink);
  background-color: var(--if-surface);
}

/* A select has to keep room on the right for its chevron, so it gets its own
   padding. Bootstrap's default arrow is heavy; this one is a thin stroke in
   the muted ink colour. */
.form-select {
  padding-right: 1.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath fill='none' stroke='%23838d88' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 5 5.5 9 1.5'/%3E%3C/svg%3E");
  background-position: right .625rem center;
  background-size: 10px 7px;
}
.form-select:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath fill='none' stroke='%235b6660' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 5 5.5 9 1.5'/%3E%3C/svg%3E"); }

/* Multi-selects and sized lists have no chevron, so they need the space back.
   Their intrinsic height is row-based, so the vertical padding is trimmed to
   stop the last option rendering as a clipped sliver. The fixed height matches
   the scrollable checkbox groups above, keeping a row of filters aligned. */
.form-select[multiple],
.form-select[size]:not([size="1"]) {
  padding: .25rem .5rem;
  background-image: none;
  height: 8rem;
  line-height: 1.6;
}
.form-select[multiple] option,
.form-select[size]:not([size="1"]) option {
  padding: .1rem .25rem;
  border-radius: 3px;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--if-green);
  box-shadow: 0 0 0 .2rem rgba(var(--if-green-rgb), .13);
}
.form-control::placeholder { color: var(--if-ink-faint); }

.form-check-input { border-color: var(--if-border-strong); }
.form-check-input:checked {
  background-color: var(--if-green);
  border-color: var(--if-green);
}
.form-check-input:focus {
  border-color: var(--if-green);
  box-shadow: 0 0 0 .2rem rgba(var(--if-green-rgb), .13);
}
.form-check-label { font-size: .875rem; }

.input-group-text {
  background: #f3f5f3;
  border-color: var(--if-border-strong);
  color: var(--if-ink-soft);
  font-size: .8125rem;
}

.invalid-feedback, .text-danger { color: var(--if-red) !important; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--if-red); }

/* Related materials: Archivo/Enlace select next to the file or URL input of new rows */
/* theme sets `vertical-align: middle` on every .table cell; this table keeps rows aligned to the top */
.related-materials .table > tbody td { vertical-align: top; }
.related-material-picker { display: flex; gap: .5rem; }
.related-material-picker > .related-material-kind { flex: 0 0 auto; width: auto; }
.related-material-picker > .related-material-input { display: flex; flex: 1 1 auto; min-width: 0; }
.related-material-picker > .related-material-input[hidden] { display: none; }

.asteriskField { color: var(--if-red); margin-left: .15rem; }

/* Scrollable multi-checkbox groups (thematic areas, funding, …) */
#div_id_thematic_areas > fieldset > div,
#div_id_funding > fieldset > div,
.max-height-5rem {
  max-height: 8rem;
  overflow-y: auto;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-sm);
  padding: .5rem .625rem;
  background: var(--if-surface);
}

/* --------------------------------------------------------------------------
   7. Tabs & accordion
   -------------------------------------------------------------------------- */
.nav-tabs {
  border-bottom: 1px solid var(--if-border);
  gap: .125rem;
  margin-bottom: 1.25rem;
}
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--if-ink-soft);
  font-size: .875rem;
  font-weight: 500;
  padding: .55rem .875rem;
  margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--if-blue); border-bottom-color: var(--if-blue-border); background: transparent; }
.nav-tabs .nav-link.active {
  color: var(--if-blue);
  background: transparent;
  border-bottom-color: var(--if-blue);
  font-weight: 600;
}

.accordion {
  --bs-accordion-border-color: var(--if-border);
  --bs-accordion-border-radius: var(--if-radius);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--if-green-rgb), .13);
  --bs-accordion-active-bg: var(--if-green-soft);
  --bs-accordion-active-color: var(--if-green-darker);
}
.accordion-button { font-weight: 600; font-size: .9375rem; }
.accordion-button:not(.collapsed) { box-shadow: none; }

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */
.table-surface {
  background: var(--if-surface);
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius);
  box-shadow: var(--if-shadow);
  padding: .25rem 1.125rem 1rem;
}

.table {
  --bs-table-border-color: var(--if-border);
  --bs-table-striped-bg: #fafbfa;
  --bs-table-hover-bg: var(--if-green-soft);
  font-size: .875rem;
  margin-bottom: 0;
  color: var(--if-ink);
}

.table > thead th {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--if-ink-faint);
  border-bottom: 1px solid var(--if-border);
  padding: .625rem .5rem;
  background: transparent;
  white-space: nowrap;
}

.table > tbody td {
  padding: .55rem .5rem;
  vertical-align: middle;
  border-color: var(--if-border);
}

.table > tbody tr:last-child td { border-bottom: 0; }

.table a { color: var(--if-blue); font-weight: 500; }
.table a:hover { color: var(--if-blue-dark); text-decoration: underline; }

/* Per-column filter inputs injected by DataTables */
thead input {
  width: 100%;
  padding: .25rem .45rem;
  box-sizing: border-box;
  font-size: .75rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--if-ink);
  border: 1px solid var(--if-border-strong);
  border-radius: var(--if-radius-sm);
  background: var(--if-surface);
}
thead input:focus {
  outline: none;
  border-color: var(--if-green);
  box-shadow: 0 0 0 .15rem rgba(var(--if-green-rgb), .13);
}

/* --------------------------------------------------------------------------
   9. DataTables chrome
   -------------------------------------------------------------------------- */
div.dt-container { padding-top: .75rem; }

div.dt-container .dt-search input,
div.dt-container .dt-length select {
  border: 1px solid var(--if-border-strong);
  border-radius: var(--if-radius-sm);
  font-size: .8125rem;
  padding: .3rem .5rem;
}
div.dt-container .dt-search input:focus,
div.dt-container .dt-length select:focus {
  outline: none;
  border-color: var(--if-green);
  box-shadow: 0 0 0 .15rem rgba(var(--if-green-rgb), .13);
}

div.dt-container .dt-info {
  font-size: .8125rem;
  color: var(--if-ink-faint);
  padding-top: .75rem;
}

div.dt-container .dt-paging { padding-top: .5rem; }

.page-link {
  color: var(--if-blue);
  border-color: var(--if-border);
  font-size: .8125rem;
  padding: .3rem .6rem;
}
.page-link:hover { background: var(--if-blue-soft); color: var(--if-blue-dark); border-color: var(--if-border); }
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(var(--if-blue-rgb), .13); color: var(--if-blue-dark); }
.page-item.active .page-link {
  background: var(--if-blue);
  border-color: var(--if-blue);
  color: #fff;
}
.page-item.disabled .page-link { color: var(--if-ink-faint); background: transparent; }

table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover { background: #f3f5f3; }

/* --------------------------------------------------------------------------
   10. Badges, alerts, modal
   -------------------------------------------------------------------------- */
.badge {
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .02em;
  padding: .28em .6em;
  border-radius: 999px;
  border: 1px solid transparent;
}
.badge-pending {
  background: var(--if-amber-soft);
  color: var(--if-amber);
  border-color: var(--if-amber-border);
}
.badge-approved {
  background: var(--if-green-soft);
  color: var(--if-green-darker);
  border-color: var(--if-green-border);
}
.badge-neutral {
  background: #f1f3f1;
  color: var(--if-ink-soft);
  border-color: var(--if-border);
}
.badge-denied {
  background: var(--if-red-soft);
  color: var(--if-red);
  border-color: var(--if-red-border);
}

.alert {
  border-radius: var(--if-radius);
  font-size: .875rem;
  padding: .75rem 1rem;
  border-width: 1px;
}
.alert-warning {
  background: var(--if-amber-soft);
  border-color: var(--if-amber-border);
  color: var(--if-amber);
}
.alert-danger {
  background: var(--if-red-soft);
  border-color: var(--if-red-border);
  color: var(--if-red);
}
.alert-success {
  background: var(--if-green-soft);
  border-color: var(--if-green-border);
  color: var(--if-green-darker);
}
.alert-info {
  background: var(--if-blue-soft);
  border-color: var(--if-blue-border);
  color: var(--if-blue-dark);
}

.modal-content {
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius);
  box-shadow: var(--if-shadow-lift);
}
.modal-header {
  border-bottom: 1px solid var(--if-border);
  padding: .875rem 1.125rem;
}
.modal-title { font-size: 1rem; font-weight: 600; }
.modal-body { padding: 1.125rem; }
.modal-footer { border-top: 1px solid var(--if-border); padding: .75rem 1.125rem; }
.modal-backdrop.show { opacity: .4; }

/* --------------------------------------------------------------------------
   11. Auth screen
   -------------------------------------------------------------------------- */
.auth-wrap {
  min-height: calc(100vh - 8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.auth-card {
  width: 100%;
  max-width: 24rem;
  background: var(--if-surface);
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius);
  box-shadow: var(--if-shadow-lift);
  padding: 2rem 1.75rem;
}
.auth-card .auth-logo { height: 2.5rem; width: auto; display: block; margin: 0 auto; }
.auth-title { font-size: 1.125rem; font-weight: 600; margin: .875rem 0 .25rem; }
.auth-sub { font-size: .8125rem; color: var(--if-ink-soft); margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   12. Utilities
   -------------------------------------------------------------------------- */
.text-muted-soft { color: var(--if-ink-faint) !important; }
.hint { font-size: .8125rem; color: var(--if-ink-faint); }
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--if-ink-faint);
  font-size: .875rem;
}

/* Keep the datepicker popup consistent with the rest */
.bootstrap-datetimepicker-widget { font-size: .875rem; }
.bootstrap-datetimepicker-widget td.active,
.bootstrap-datetimepicker-widget td span.active { background: var(--if-green) !important; }

/* Auth form inputs are rendered by Django's default widgets (no crispy helper
   on AuthenticationForm), so they carry no .form-control class. */
.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="email"] {
  display: block;
  width: 100%;
  border: 1px solid var(--if-border-strong);
  border-radius: var(--if-radius-sm);
  padding: .45rem .625rem;
  font-size: .875rem;
  color: var(--if-ink);
  background: var(--if-surface);
}
.auth-card input[type="text"]:focus,
.auth-card input[type="password"]:focus,
.auth-card input[type="email"]:focus {
  outline: none;
  border-color: var(--if-green);
  box-shadow: 0 0 0 .2rem rgba(var(--if-green-rgb), .13);
}

/* --------------------------------------------------------------------------
   13. Crispy form chrome
   Crispy injects the primary action (Submit / "Edit") as the first element of
   the <form>, above the tab strip. Lift it to the card's top-right corner so
   the tabs read as the first line of content.
   -------------------------------------------------------------------------- */
.surface-body > form > a.btn[role="button"],
.surface-body > form > input[type="submit"],
.surface-body > form > .btn[type="submit"] {
  float: right;
  margin: 0 0 .5rem 1rem;
}

/* Contain the floated action button within the card even when it's the last
   element in the layout (e.g. ContactForm), not just when it's the first. */
.surface-body > form::after {
  content: "";
  display: block;
  clear: both;
}

/* Read-only detail forms: keep fields legible but visibly non-editable. */
.form-control[readonly],
.form-select[readonly],
textarea[readonly].form-control {
  background-color: #f7f9f8;
  border-color: var(--if-border);
  color: var(--if-ink);
  box-shadow: none;
}
.form-control[readonly]:focus,
textarea[readonly].form-control:focus {
  border-color: var(--if-border-strong);
  box-shadow: none;
}
.form-check-input[disabled],
.form-check-input:disabled { opacity: .7; }

/* Crispy renders long textareas at their widget height; cap the runaway ones. */
.surface-body textarea.form-control { min-height: 5.5rem; }

/* Tab panes need a little breathing room under the strip. */
.tab-content > .tab-pane { padding-top: .25rem; }

/* Crispy renders multi-checkbox groups inside a <fieldset><legend>; match the
   legend to the ordinary field labels so the form has one label scale. */
.surface-body legend,
.filter-body legend,
form legend {
  font-weight: 500;
  color: var(--if-ink-soft);
  margin-bottom: .3rem;
  padding: 0;
  float: none;
  width: auto;
}
/* crispy tags the legend .fs-6, and Bootstrap's font-size utilities are
   !important — match that weight to keep one label scale. */
form legend.form-label { font-size: .8125rem !important; }

/* Help text under fields */
.form-text, .helptext { font-size: .75rem; color: var(--if-ink-faint); }

/* Home page section hub */
.home-card { transition: box-shadow .15s ease, transform .15s ease; }
.home-card:hover { box-shadow: var(--if-shadow-lift); transform: translateY(-2px); }
.home-card .card-body { padding: 1.25rem 1.25rem .5rem; }
.home-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin-bottom: .75rem;
  border-radius: var(--if-radius); background: var(--if-green-soft); color: var(--if-green);
  font-size: 1.15rem;
}
.home-card-title { font-size: 1.05rem; margin-bottom: .35rem; }
.home-card-text { color: var(--if-ink-soft); font-size: .875rem; margin-bottom: 0; }
.home-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 1.25rem 1.25rem; }

.inline-crispy-field { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.inline-crispy-field > label { margin-bottom: 0; }
.inline-crispy-field > .input-group,
.inline-crispy-field > div:has(> .input-group) { width: auto; }