:root {
  /* Brand: headers/subheaders only */
  --brand-purple: #191649;
  --brand-gold: #FFCA2D;
  --bg-cream: #F6E5BA;

  /* Functional UI colors — unchanged, these were already fine */
  --navy: #1B3A4B;
  --navy-light: #2C5267;
  --label-grey: #4A4A4A;
  --teal: #2F8F8C;
  --coral: #C4543A;
  --ink: #28282A;
  --line: #DCD4C2;
  --white: #FFFFFF;

  --heading-font: "Bodoni MT", "Didot", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}
.page.wide { max-width: 1600px; }
.page.accounting-wide { max-width: 1600px; }

.masthead {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: 2px solid var(--brand-purple);
}

.masthead .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.masthead .logo {
  height: 102px;
  width: auto;
  flex-shrink: 0;
}
.masthead .logo[src=""], .masthead .logo:not([src]) { display: none; }

.masthead .eyebrow {
  font-family: var(--heading-font);
  font-size: 30px;
  font-weight: 700;
  color: var(--brand-purple);
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.1;
}

.masthead h1 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-purple);
  margin: 2px 0 0;
}

/* Header action row — sits below brand, above the divider. Segmented
   group for navigational links + a standalone cream CTA for the
   page's primary action. Wraps cleanly on narrower (iPad) widths
   instead of overlapping the brand row. */
.masthead .header-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.masthead .tab-group {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  flex-wrap: wrap;
}
.masthead .tab {
  font-size: 13px;
  font-weight: 600;
  color: #6B5C46;
  text-decoration: none;
  padding: 8px 18px;
  background: #F4F1EA;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  white-space: nowrap;
  position: relative;
}
/* Active tab extends 2px past the row's bottom edge — exactly the
   divider's own thickness — painted the same navy, so it physically
   covers that stretch of the masthead's border-bottom line beneath
   it, fusing the tab visually to the page content below. */
.masthead .tab.active {
  background: var(--brand-purple);
  color: var(--brand-gold);
  font-weight: 700;
  border-color: var(--brand-purple);
  margin-bottom: -2px;
  padding-bottom: 10px;
  z-index: 3;
}
.masthead .btn-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-purple);
  background: var(--bg-cream);
  padding: 8px 18px 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.masthead .push-right { margin-left: auto; }
/* Wraps whichever of CTA / Download / Log out are present on a given
   page, so they always sit bunched together at the far right — using
   margin-left:auto on each individually would split them apart evenly
   across the free space instead of grouping them. */
.masthead .header-actions-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
}
.masthead .btn-logout {
  font-size: 12.5px;
  font-weight: 600;
  color: #8A7561;
  background: none;
  border: none;
  padding: 8px 4px;
  cursor: pointer;
  white-space: nowrap;
}
.masthead .btn-logout:hover { color: var(--coral); }

/* Back button — pulled out of the segmented group, plain text with an
   arrow, no pill background. Always sits first in the row, since
   "leave this page" is a different kind of action than the others. */
.masthead .btn-back {
  font-size: 13px;
  font-weight: 600;
  color: #5A5648;
  text-decoration: none;
  padding: 0 4px 9px 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.masthead .btn-back .arrow { font-size: 15px; color: var(--brand-purple); }

/* Download — its own outlined button, always last in the row. */
.masthead .btn-download {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-purple);
  background: var(--white);
  border: 1.5px solid var(--line);
  padding: 6.5px 15px;
  border-radius: 7px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Legacy flat button style — kept for pages not yet migrated to the
   segmented-group + CTA pattern above. */
.masthead .actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.masthead .actions a {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  background: var(--brand-purple);
  padding: 9px 18px;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
}

.campus-picker, .campus-locked {
  margin-bottom: 24px;
  font-size: 13px;
}

.campus-picker label, .campus-locked .lbl {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy-light);
  font-weight: 600;
  margin-right: 10px;
}

.campus-locked .value {
  font-weight: 700;
  color: var(--brand-purple);
  background: var(--brand-gold);
  padding: 4px 10px;
  border-radius: 3px;
}

.campus-picker select {
  font-size: 15px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--white);
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 18px 22px;
  box-shadow: 0 1px 2px rgba(27, 25, 60, 0.04), 0 2px 8px rgba(27, 25, 60, 0.05);
}

.section { margin-bottom: 32px; }
.section:last-child { margin-bottom: 0; }

.section-tinted {
  background: #F4F4F4;
  border-radius: 8px;
  padding: 18px 20px 6px;
}

.section-label {
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-purple);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 18px;
}

.subsection-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--label-grey);
  margin: 22px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.subsection-label:first-of-type { margin-top: 14px; }

.subsection-block {
  border-radius: 8px;
  padding: 16px 18px 6px;
  margin-bottom: 18px;
}
.subsection-block .subsection-label { margin-top: 0; }
.subsection-address { background: #EFF5F4; }
.subsection-guardian1 { background: #F1EFF7; }
.subsection-guardian2 { background: #F7F1EC; }
.subsection-emergency { background: #FBEFEC; }
.subsection-previous-school { background: #FBF6E8; }

/* These sit on their own light pastel backgrounds even inside a purple
   .card, so they keep dark text rather than inheriting the card's
   gold/cream scheme — gold-on-pale-green (etc.) would be unreadable. */
.subsection-block .subsection-label,
.subsection-block .field label,
.subsection-block .help,
.section-tinted .field label,
.section-tinted .help {
  color: var(--label-grey);
}
.section-tinted { color: var(--ink); }

.optional-tag, .required-tag {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
}
.optional-tag { background: #F1E5DC; color: #8A7561; }
.required-tag { background: #F8DCC9; color: var(--coral); }
.required-star { color: #C4543A; margin-left: 2px; font-weight: 700; }

.context-picker {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.context-picker form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.context-picker label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy-light);
  font-weight: 600;
}
.context-picker select { width: auto; min-width: 160px; }

.field-row { display: flex; gap: 18px; margin-bottom: 16px; }
.field-row .field { flex: 1; }
.field { margin-bottom: 16px; }
.input-suffix-wrap { position: relative; }
.input-suffix-wrap input { padding-right: 52px; }
.input-suffix {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 12px; font-weight: 700; color: #756D52; pointer-events: none;
}
.field:last-child { margin-bottom: 0; }
.field-row .field:last-child { margin-bottom: 0; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--label-grey);
  margin-bottom: 5px;
}

.field .help { font-size: 12px; color: #767168; margin-top: 4px; }

input[type="text"], input[type="date"], input[type="number"], input[type="email"], textarea, select {
  width: 100%;
  font-size: 15px;
  font-family: inherit;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--white);
  color: var(--ink);
}

input[type="text"], input[type="date"], input[type="number"], input[type="email"], select {
  height: 42px;
  box-sizing: border-box;
}

input::placeholder, textarea::placeholder { color: #B7B0A2; }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(47, 143, 140, 0.15);
}

.student-number-field input {
  font-family: "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy);
  background: #FBFAF6;
  border: 1.5px dashed var(--teal);
}

.radio-group { display: flex; gap: 24px; margin-bottom: 14px; }
.radio-group label {
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}

.error-list { color: var(--coral); font-size: 12.5px; margin: 4px 0 0; padding: 0; list-style: none; }

.checkbox-field { display: flex; align-items: center; gap: 8px; }
.checkbox-field label { margin: 0; }

.actions {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: right;
}

button.submit {
  background: var(--brand-purple);
  color: var(--white);
  border: none;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 3px;
  cursor: pointer;
}
button.submit:hover { background: #5a5694; }


[data-other-for] { display: none; }

.family-search-result {
  font-size: 12.5px;
  color: var(--teal);
  margin-top: 6px;
  min-height: 16px;
}

.success-card { text-align: center; padding: 56px 36px; }
.success-card .stamp {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--white);
  background: var(--teal);
  padding: 10px 22px;
  border-radius: 3px;
  margin: 16px 0 24px;
  transform: rotate(-1.5deg);
}
.success-card h2 { font-family: var(--heading-font); color: var(--brand-purple); }
.success-card .eyebrow { color: var(--brand-purple); }
.success-card a { color: var(--teal); font-weight: 600; text-decoration: none; }

/* Student list page */
/* ── Unified filter bar ─────────────────────────────────────────────────────
   Use .filter-bar on the <form> or wrapper div, .filter-group for each
   label+control pair, and .filter-search for the 350px search input.
   All views must use these classes for visual consistency.             */
/* Gold strip wrapping a filter row, with a funnel icon + "Filters"
   label so the row reads clearly as filters at a glance. */
.filters-strip {
  background: #FBF3DF;
  margin: 0 -20px;
  padding: 14px 20px;
  margin-bottom: 18px;
}
.filters-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-purple);
  padding-bottom: 10px;
  white-space: nowrap;
}
.filters-label svg { width: 13px; height: 13px; flex-shrink: 0; }
.filters-strip .filter-bar { margin-bottom: 0; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 18px;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.filter-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #756D52;
  white-space: nowrap;
}
/* All selects and inputs in a filter-bar */
.filter-bar select,
.filter-bar input[type="text"],
.filter-bar .dropdown-trigger {
  height: 42px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--white);
  color: var(--ink);
  box-sizing: border-box;
  padding: 0 10px;
}
.filter-bar select { min-width: 130px; }
.filter-bar .dropdown-trigger {
  min-width: 130px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.filter-search { width: 350px !important; flex-shrink: 0; }
.filter-search-group { flex: 0 0 auto; }

/* Legacy list-toolbar — kept for compatibility, now wraps filter-bar */
.list-toolbar {
  margin-bottom: 18px;
}
.list-toolbar select { min-width: 110px; max-width: 160px; flex-shrink: 0; height: 42px; }
.list-toolbar input[type="text"] { flex-shrink: 0; height: 42px; }
.list-toolbar .submit { height: 42px; padding: 0 16px !important; box-sizing: border-box; }
.list-toolbar .dropdown-trigger { height: 42px; box-sizing: border-box; }

.col-wide { min-width: 220px; }
.dropdown-filter { position: relative; }
.dropdown-trigger {
  font-size: 14px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--white);
  cursor: pointer;
  color: var(--ink);
}
.dropdown-caret { font-size: 11px; color: var(--navy-light); }
.dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(27, 25, 60, 0.12);
  padding: 12px 14px;
  min-width: 200px;
  max-height: 260px;
  overflow-y: auto;
}
.dropdown-panel.open { display: block; }
.dropdown-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  padding: 5px 0;
  white-space: nowrap;
}
.dropdown-option input { width: auto; margin: 0; }
.dropdown-actions { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; text-align: right; }

.promote-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FBF9F3;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.promote-bar .lbl {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy-light);
  font-weight: 700;
}

.column-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 18px;
  margin-bottom: 24px;
}
.column-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}
.column-option input { width: auto; }
@media (max-width: 700px) { .column-picker { grid-template-columns: 1fr 1fr; } }

table.students-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.students-table thead tr { background: var(--brand-purple); }
table.students-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-gold);
  padding: 8px 12px;
  white-space: nowrap;
}
table.students-table th:last-child { border-right: none; }
table.students-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
table.students-table td:last-child { border-right: none; }
table.students-table tr:nth-child(even) td { background: #FDFAF1; }
table.students-table tr:hover td { background: #FBF6E8; }
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--brand-gold);
  color: var(--brand-purple);
}
.badge-green { background: #D7ECCB; color: #2E6B1F; }
.badge-red { background: #F8D7DA; color: #8B1A1A; }
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: #767168;
}

/* Dashboard stat cards — compact boxed style, cream tint by default,
   purple tint for Sulmara groups, gold tint for FBS groups. */
.mini-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.mini-stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mini-stat-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .mini-stat-grid { grid-template-columns: repeat(2, 1fr); } }

.mini-stat-card {
  background: #FDFAF1;
  border: 1px solid #D9CBA8;
  border-radius: 4px;
  padding: 8px 11px;
  box-shadow: 0 2px 5px rgba(43, 38, 20, 0.08);
  text-align: center;
}
.mini-stat-card.tint-purple { background: #DAEAF7; border-color: #B7D2E8; }
.mini-stat-card.tint-gold { background: #FBF3DF; border-color: #E8D49A; }

.mini-stat-label {
  font-size: 12px;
  color: #4A4334;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mini-stat-number {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 700;
  color: #191649;
  margin-top: 2px;
}
.mini-stat-number.amount-owed { color: #B8862E; }
.mini-stat-currency { font-size: 12px; color: #6B6450; font-weight: 500; }
.mini-stat-subtext { font-size: 11.5px; color: #6B6450; margin-top: 2px; }

.entity-label {
  font-family: var(--heading-font);
  text-transform: uppercase;
  color: var(--brand-purple);
  font-size: 14px;
  font-weight: 700;
  margin: 12px 0 6px;
}
.entity-label:first-child { margin-top: 0; }

/* Grade Distribution chart keeps a light boxed card since it holds a
   bar chart, not a simple number — doesn't fit the mini-stat-card pattern. */
.chart-card {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 14px;
}
.chart-card .mini-stat-label { margin-bottom: 8px; display: block; }
.grade-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 64px;
  margin-top: 10px;
}
.grade-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.grade-bar {
  width: 100%;
  max-width: 22px;
  background: var(--brand-purple);
  border-radius: 3px 3px 0 0;
  min-height: 3px;
}
.grade-bar-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-purple);
  margin-bottom: 2px;
}
.grade-bar-label {
  font-size: 9px;
  color: var(--navy-light);
  margin-top: 4px;
  text-align: center;
  line-height: 1.1;
}
.stat-empty { font-size: 12px; color: #9C9690; }

.badge-paid { background: #D7ECCB; color: #2E6B1F; }
.badge-due { background: #F8DCC9; color: var(--coral); }
.badge-new { background: #D7ECCB; color: #2E6B1F; }
.badge-returning { background: #E3E0F2; color: var(--brand-purple); }

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.filter-banner {
  background: var(--brand-gold);
  color: var(--brand-purple);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.filter-banner.banner-success {
  background: #D7ECCB;
  color: #2E6B1F;
}
.filter-banner.banner-error {
  background: #F8D7DA;
  color: #8B1A1A;
}
.filter-banner a {
  color: var(--brand-purple);
  text-decoration: underline;
  margin-left: 10px;
  font-weight: 700;
}

.sibling-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--brand-purple);
  color: var(--brand-gold);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}

.siblings-list-wrap { margin-top: 16px; }
.siblings-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sibling-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FBF9F3;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-purple);
  text-decoration: none;
}
.sibling-pill:hover { background: var(--bg-cream); }
.sibling-pill-sub { font-size: 11px; color: var(--navy-light); font-weight: 400; }

.badge-yes { background: #D7ECCB; color: #2E6B1F; }
.badge-no { background: #F1E5DC; color: #8A7561; }

.edit-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
}
.edit-link:hover { text-decoration: underline; }

.table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-left: 0; padding-right: 0; padding-top: 0; }
.table-card table.data-table { width: max-content; min-width: 100%; }
.table-card table.data-table thead th:first-child,
.table-card table.data-table tbody td:first-child { padding-left: 22px; }
.table-card table.data-table thead th:last-child,
.table-card table.data-table tbody td:last-child { padding-right: 22px; }

/* Profile page — two-column app layout */
.profile-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 800px) {
  .profile-layout { grid-template-columns: 1fr; }
}

.profile-sidebar {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(27, 25, 60, 0.04), 0 2px 8px rgba(27, 25, 60, 0.05);
  position: sticky;
  top: 24px;
}

.avatar-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand-purple);
  color: var(--white);
  font-family: var(--heading-font);
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.profile-sidebar .profile-name {
  font-family: var(--heading-font);
  color: var(--brand-purple);
  font-size: 19px;
  margin: 0 0 2px;
}
.profile-sidebar .profile-number {
  font-family: "Courier New", monospace;
  font-size: 12.5px;
  color: var(--navy-light);
  letter-spacing: 0.03em;
  margin-bottom: 16px;
}

.paid-banner, .balance-banner {
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 14px;
  margin-bottom: 18px;
  display: inline-block;
}
.paid-banner { background: #D7ECCB; color: #2E6B1F; }
.balance-banner { background: #F8DCC9; color: var(--coral); }

.sidebar-facts {
  text-align: left;
  margin: 0 0 20px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.sidebar-facts dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy-light);
  font-weight: 700;
  margin-top: 10px;
}
.sidebar-facts dd {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--ink);
}

.btn-primary-block {
  display: block;
  background: var(--brand-purple);
  color: var(--white);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  padding: 10px;
  border-radius: 6px;
}
.btn-primary-block:hover { background: #5a5694; }

.btn-ghost {
  background: transparent !important;
  color: var(--brand-purple) !important;
  border: 1px solid var(--brand-purple);
}

.profile-main { min-width: 0; }

.tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-cream);
  padding: 5px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.tab-btn {
  background: none;
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy-light);
  padding: 8px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab-btn.active {
  background: var(--brand-purple);
  color: var(--white);
}
.tab-btn:hover:not(.active) { background: rgba(70, 67, 120, 0.08); }

.tab-panel { padding-top: 4px; }
.tab-panel .card { margin-bottom: 14px; }

.panel-fade-in {
  animation: panelFadeIn 0.2s ease;
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .panel-fade-in { animation: none; }
}

.info-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px 16px;
  margin: 0;
}
.info-grid dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy-light);
  font-weight: 600;
  padding-top: 2px;
  border-left: 2px solid var(--brand-gold);
  padding-left: 10px;
}
.info-grid dd { margin: 0; font-size: 14px; }

/* Compact fact grid — replaces long dl lists for scannable profile facts */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.fact {
  background: #FBF9F3;
  border-radius: 6px;
  padding: 10px 12px;
}
.fact-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy-light);
  font-weight: 700;
  margin-bottom: 3px;
}
.fact-value { font-size: 14px; color: var(--ink); font-weight: 500; }

.installment-table th, .installment-table td { font-size: 13.5px; }

/* Plain information-list pattern — used for the Profile tab instead of
   boxed fact-cards, per wireframe: a normal label/value list with thin
   hairline dividers, no card backgrounds. */
.info-section { margin-bottom: 22px; }
.info-section:last-child { margin-bottom: 0; }
.info-heading {
  font-family: var(--heading-font);
  text-transform: uppercase;
  color: var(--brand-gold);
  background: var(--brand-purple);
  font-size: 13.5px;
  font-weight: 700;
  padding: 6px 12px;
  margin-bottom: 10px;
  letter-spacing: 0.06em;
}
.info-subheading {
  font-family: var(--heading-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-gold);
  background: var(--brand-purple);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  margin: 16px 0 8px;
}
.info-list { display: flex; flex-direction: column; }
.info-row {
  display: flex;
  padding: 7px 0;
  border-bottom: 1px solid #EEE8D8;
}
.info-list .info-row:last-child { border-bottom: none; }
.info-row-label {
  width: 200px;
  flex-shrink: 0;
  font-size: 12.5px;
  color: #756D52;
}
.info-row-value { font-size: 13.5px; color: #2C2C45; }
@media (max-width: 600px) {
  .info-row { flex-direction: column; }
  .info-row-label { width: auto; margin-bottom: 2px; }
}

/* 2-column newspaper layout for profile tab */
.profile-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 24px; }
.profile-2col .info-row-label { width: 140px; }
.profile-full { margin-bottom: 24px; }
.guardian-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 18px; }
.guardian-grid .info-row-label { width: 110px; }

/* Consistent data table — used for discounts, installments, etc. */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; margin-bottom: 16px; }
.data-table thead tr { background: var(--brand-purple); }
.data-table thead th {
  color: var(--brand-gold);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
  border-right: 1px solid rgba(246,229,186,0.25);
}
.data-table thead th.text-right { text-align: right; }
.data-table thead th:last-child, .data-table tbody td:last-child { border-right: none; }
.data-table tbody td { padding: 8px 10px; border-bottom: 1px solid #EEE8D8; border-right: 1px solid #EEE8D8; color: #2C2C45; font-size: 13px; white-space: normal; word-break: break-word; }
.data-table tbody td.text-right { text-align: right; }
.data-table tbody td.muted { color: #756D52; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) td { background: #FDFAF1; }

/* Section header — purple block with gold text (accounting tab, etc.) */
.section-header {
  font-family: var(--heading-font);
  background: var(--brand-purple);
  color: var(--brand-gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13.5px;
  font-weight: 700;
  padding: 6px 12px;
  margin-bottom: 12px;
}

/* A whole section (header bar + its content) as one bordered/shadowed
   card, so adjacent sections are clearly separated instead of just
   flowing directly into each other. */
.section-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27, 25, 60, 0.04), 0 2px 8px rgba(27, 25, 60, 0.05);
  margin-bottom: 24px;
}
.section-card .section-header { margin-bottom: 0; }
.section-card .section-card-body { padding: 18px 22px; background: #F4F4F4; }
.section-card-body.plain { background: var(--white); }

.section-card-body .data-table {
  background: var(--white);
  border: 1px solid #756D52;
  border-radius: 4px;
  overflow: hidden;
}
.section-card-body .data-table thead tr { background: var(--brand-purple); }

/* Frozen/sticky columns — used for the first few columns of wide tables
   so they stay visible while scrolling horizontally. Each sticky cell
   needs its own explicit background (matching its row's normal color)
   since sticky elements are otherwise transparent and let scrolled
   content show through underneath. */
.data-table .sticky-col { position: sticky; z-index: 2; background: var(--white); }
.data-table thead .sticky-col { z-index: 4; background: var(--brand-purple); }
.data-table tbody tr:nth-child(even) td.sticky-col { background: #FDFAF1; }
.data-table .sticky-col-last { box-shadow: 2px 0 4px rgba(25,22,73,0.08); }

.payment-form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.payment-form-row .field { flex: 1; }
.split-toggle {
  font-size: 12.5px;
  color: var(--teal);
  cursor: pointer;
  text-decoration: underline;
  display: inline-block;
  margin-bottom: 12px;
}
.split-detail { display: none; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.split-detail.open { display: block; }
.auto-note {
  font-size: 12.5px;
  color: var(--navy-light);
  background: #FBF9F3;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 14px;
}

/* Horizontal profile banner (replaces sidebar layout) */
.profile-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.profile-banner .avatar-circle {
  width: 48px;
  height: 48px;
  font-size: 17px;
  margin: 0;
  flex-shrink: 0;
}
.profile-name-inline {
  font-family: var(--heading-font);
  font-size: 21px;
  font-weight: 700;
  color: var(--brand-purple);
}
.profile-meta-inline { font-size: 13px; color: var(--navy-light); margin-top: 2px; }
.profile-banner-spacer { flex: 1; }
.btn-primary-inline {
  background: var(--brand-purple);
  color: var(--white);
  padding: 9px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
}
.btn-primary-inline:hover { background: #5a5694; }
.submit-block { width: 100%; text-align: center; }
.actions:has(.submit-block) { text-align: stretch; }