/* Typography helper classes — GOV.UK type scale with geng- prefix.
   font-family is inherited from body (set in base.css). */

.geng-heading-xl,
.geng-heading-l,
.geng-heading-m,
.geng-heading-s {
  font-weight: 700;
  margin: 0 0 var(--govuk-spacing-4) 0;
}

.geng-body-l,
.geng-body,
.geng-body-s {
  font-weight: 400;
  margin: 0 0 var(--govuk-spacing-4) 0;
}

/* Small-screen sizes (font-size / line-height per GOV.UK type scale) */
.geng-heading-xl { font-size: 32px; line-height: 35px; }
.geng-heading-l  { font-size: 27px; line-height: 30px; }
.geng-heading-m  { font-size: 21px; line-height: 25px; }
.geng-heading-s  { font-size: 19px; line-height: 25px; }
.geng-body-l     { font-size: 21px; line-height: 25px; }
.geng-body       { font-size: 19px; line-height: 25px; }
.geng-body-s     { font-size: 16px; line-height: 20px; }

/* Large-screen overrides — only classes whose sizes change at the breakpoint */
@media (min-width: 640px) {
  .geng-heading-xl { font-size: 48px; line-height: 50px; }
  .geng-heading-l  { font-size: 36px; line-height: 40px; }
  .geng-heading-m  { font-size: 24px; line-height: 30px; }
  .geng-body-l     { font-size: 24px; line-height: 30px; }
}

/* Layout primitive — adapted from GOV.UK's .govuk-width-container.
   Centers content, caps width at 1020px on desktop, responsive horizontal padding. */
.geng-width-container {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 var(--govuk-spacing-3);
}

@media (min-width: 640px) {
  .geng-width-container {
    padding: 0 var(--govuk-spacing-6);
  }
}

/* Empty-state classes (GMON-66) */
.geng-empty-block {
  color: var(--geng-color-secondary-text);
  font-size: 19px;  /* matches geng-body */
  margin: 0;
}

.geng-empty-inline {
  color: var(--geng-color-secondary-text);
  font-size: inherit;
}

/* Flash / notification region (GMON-63) */
.geng-flash-region {
  border-left: 4px solid var(--geng-color-secondary-text);
  background: var(--geng-color-surface);
  padding: var(--govuk-spacing-3);
  margin: 0 0 var(--govuk-spacing-4) 0;
}
.geng-flash-region--success { border-left-color: var(--geng-color-success); }
.geng-flash-region--error   { border-left-color: var(--geng-color-error); }

/* Table-row empty-state class (GMON-73) */
.geng-empty-table-row {
  color: var(--geng-color-secondary-text);
}

/* Form components (GMON-64) */

.geng-form-field {
  margin-bottom: var(--govuk-spacing-4);
}

.geng-label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--govuk-spacing-1);
  color: var(--geng-color-text);
}

.geng-input,
.geng-select,
.geng-textarea {
  width: 100%;
  padding: var(--govuk-spacing-2) var(--govuk-spacing-2);
  font-family: var(--geng-font-family);
  font-size: 19px;
  line-height: 25px;
  border: 2px solid var(--geng-color-text);
  background: var(--geng-color-body-background);
  color: var(--geng-color-text);
}

.geng-textarea {
  min-height: 100px;
  resize: vertical;
}

.geng-input--file {
  padding: 0;
  border: none;
  font-size: 16px;
}

.geng-checkbox,
.geng-radio {
  width: 20px;
  height: 20px;
  margin-right: var(--govuk-spacing-2);
  accent-color: var(--geng-color-brand);
}

.geng-button {
  display: inline-block;
  padding: var(--govuk-spacing-2) var(--govuk-spacing-3);
  font-family: var(--geng-font-family);
  font-size: 19px;
  font-weight: 700;
  line-height: 25px;
  border: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  background: var(--geng-color-brand);
  color: var(--geng-color-white);
}

.geng-button--secondary {
  background: var(--geng-color-surface);
  color: var(--geng-color-text);
  border-color: var(--geng-color-text);
}

.geng-button--destructive {
  background: var(--geng-color-error);
  color: var(--geng-color-white);
}

/* Grid utilities (GMON-65) */
.geng-grid-2col,
.geng-grid-3col {
  display: grid;
  gap: var(--govuk-spacing-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .geng-grid-2col { grid-template-columns: 1fr 1fr; }
  .geng-grid-3col { grid-template-columns: 1fr 1fr 1fr; }
}

/* Color/state text utilities (GMON-76) */
.geng-text-muted   { color: var(--geng-color-secondary-text); }
.geng-text-success { color: var(--geng-color-success); }
.geng-text-warning { color: var(--geng-color-warning); }
.geng-text-error   { color: var(--geng-color-error); }

/* Responsive table wrapper (GMON-82) — GOV.UK govuk-table pattern.
   Wrap data tables in this div to allow horizontal scroll on narrow viewports
   instead of letting cells wrap mid-word and overflow the parent card. */
.geng-table-wrapper {
  overflow-x: auto;
}

/* Spacing utilities (GMON-77) — Tailwind-style naming, mapped to --govuk-spacing-*.
   Migration tolerance ±2px for rem-based inline values; per-site revert if drift breaks layout.
   Zero-shorthand .geng-m-0 / .geng-p-0 included as small extension for the all-sides-zero case. */

.geng-m-0  { margin: 0; }
.geng-p-0  { padding: 0; }

.geng-mt-0 { margin-top: 0; }
.geng-mt-1 { margin-top: var(--govuk-spacing-1); }
.geng-mt-2 { margin-top: var(--govuk-spacing-2); }
.geng-mt-3 { margin-top: var(--govuk-spacing-3); }
.geng-mt-4 { margin-top: var(--govuk-spacing-4); }
.geng-mt-5 { margin-top: var(--govuk-spacing-5); }
.geng-mt-6 { margin-top: var(--govuk-spacing-6); }

.geng-mb-0 { margin-bottom: 0; }
.geng-mb-1 { margin-bottom: var(--govuk-spacing-1); }
.geng-mb-2 { margin-bottom: var(--govuk-spacing-2); }
.geng-mb-3 { margin-bottom: var(--govuk-spacing-3); }
.geng-mb-4 { margin-bottom: var(--govuk-spacing-4); }
.geng-mb-5 { margin-bottom: var(--govuk-spacing-5); }
.geng-mb-6 { margin-bottom: var(--govuk-spacing-6); }

.geng-mx-0 { margin-left: 0; margin-right: 0; }
.geng-mx-1 { margin-left: var(--govuk-spacing-1); margin-right: var(--govuk-spacing-1); }
.geng-mx-2 { margin-left: var(--govuk-spacing-2); margin-right: var(--govuk-spacing-2); }
.geng-mx-3 { margin-left: var(--govuk-spacing-3); margin-right: var(--govuk-spacing-3); }
.geng-mx-4 { margin-left: var(--govuk-spacing-4); margin-right: var(--govuk-spacing-4); }
.geng-mx-5 { margin-left: var(--govuk-spacing-5); margin-right: var(--govuk-spacing-5); }
.geng-mx-6 { margin-left: var(--govuk-spacing-6); margin-right: var(--govuk-spacing-6); }

.geng-my-0 { margin-top: 0; margin-bottom: 0; }
.geng-my-1 { margin-top: var(--govuk-spacing-1); margin-bottom: var(--govuk-spacing-1); }
.geng-my-2 { margin-top: var(--govuk-spacing-2); margin-bottom: var(--govuk-spacing-2); }
.geng-my-3 { margin-top: var(--govuk-spacing-3); margin-bottom: var(--govuk-spacing-3); }
.geng-my-4 { margin-top: var(--govuk-spacing-4); margin-bottom: var(--govuk-spacing-4); }
.geng-my-5 { margin-top: var(--govuk-spacing-5); margin-bottom: var(--govuk-spacing-5); }
.geng-my-6 { margin-top: var(--govuk-spacing-6); margin-bottom: var(--govuk-spacing-6); }

.geng-pt-0 { padding-top: 0; }
.geng-pt-1 { padding-top: var(--govuk-spacing-1); }
.geng-pt-2 { padding-top: var(--govuk-spacing-2); }
.geng-pt-3 { padding-top: var(--govuk-spacing-3); }
.geng-pt-4 { padding-top: var(--govuk-spacing-4); }
.geng-pt-5 { padding-top: var(--govuk-spacing-5); }
.geng-pt-6 { padding-top: var(--govuk-spacing-6); }

.geng-pb-0 { padding-bottom: 0; }
.geng-pb-1 { padding-bottom: var(--govuk-spacing-1); }
.geng-pb-2 { padding-bottom: var(--govuk-spacing-2); }
.geng-pb-3 { padding-bottom: var(--govuk-spacing-3); }
.geng-pb-4 { padding-bottom: var(--govuk-spacing-4); }
.geng-pb-5 { padding-bottom: var(--govuk-spacing-5); }
.geng-pb-6 { padding-bottom: var(--govuk-spacing-6); }

.geng-px-0 { padding-left: 0; padding-right: 0; }
.geng-px-1 { padding-left: var(--govuk-spacing-1); padding-right: var(--govuk-spacing-1); }
.geng-px-2 { padding-left: var(--govuk-spacing-2); padding-right: var(--govuk-spacing-2); }
.geng-px-3 { padding-left: var(--govuk-spacing-3); padding-right: var(--govuk-spacing-3); }
.geng-px-4 { padding-left: var(--govuk-spacing-4); padding-right: var(--govuk-spacing-4); }
.geng-px-5 { padding-left: var(--govuk-spacing-5); padding-right: var(--govuk-spacing-5); }
.geng-px-6 { padding-left: var(--govuk-spacing-6); padding-right: var(--govuk-spacing-6); }

.geng-py-0 { padding-top: 0; padding-bottom: 0; }
.geng-py-1 { padding-top: var(--govuk-spacing-1); padding-bottom: var(--govuk-spacing-1); }
.geng-py-2 { padding-top: var(--govuk-spacing-2); padding-bottom: var(--govuk-spacing-2); }
.geng-py-3 { padding-top: var(--govuk-spacing-3); padding-bottom: var(--govuk-spacing-3); }
.geng-py-4 { padding-top: var(--govuk-spacing-4); padding-bottom: var(--govuk-spacing-4); }
.geng-py-5 { padding-top: var(--govuk-spacing-5); padding-bottom: var(--govuk-spacing-5); }
.geng-py-6 { padding-top: var(--govuk-spacing-6); padding-bottom: var(--govuk-spacing-6); }

/* Coverage grid — GitHub-style "one square per month" lease coverage view
   (GMON-18 D10/D14). Cells carry a state class (paid|partial|unpaid)
   derived from charges + payments sums. Tooltip text "$P of $C" rendered
   by the template; this file owns the box + colors + hover only. */
.geng-coverage-grid {
  display: flex;
  flex-direction: column;
  gap: var(--govuk-spacing-2);
}

.geng-coverage-row {
  display: flex;
  align-items: center;
  gap: var(--govuk-spacing-2);
}

.geng-coverage-year {
  width: 52px;
  font-weight: 700;
  color: var(--geng-color-text);
}

.geng-coverage-months {
  display: grid;
  grid-template-columns: repeat(12, 14px);
  gap: 6px;
  align-items: center;
}

.geng-coverage-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--geng-color-grey-100);
  border: 1px solid var(--geng-color-grey-100);
  display: inline-block;
  position: relative;
}

.geng-coverage-cell.paid {
  background: var(--geng-color-success);
  border-color: var(--geng-color-success);
}

.geng-coverage-cell.partial {
  background: var(--geng-color-partial);
  border-color: var(--geng-color-partial);
}

.geng-coverage-cell.unpaid {
  background: var(--geng-color-grey-100);
  border-color: var(--geng-color-grey-100);
}

.geng-coverage-cell:hover {
  outline: 2px solid var(--geng-color-border);
  outline-offset: 2px;
}

.geng-coverage-tip {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 22px;
  white-space: nowrap;
  background: var(--geng-color-grey-900);
  color: var(--geng-color-white);
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.geng-coverage-tip:after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  border: 6px solid transparent;
  border-top-color: var(--geng-color-grey-900);
}

.geng-coverage-cell:hover .geng-coverage-tip {
  display: block;
}

.geng-coverage-legend {
  display: flex;
  align-items: center;
  gap: var(--govuk-spacing-1);
  justify-content: flex-end;
  margin-top: var(--govuk-spacing-1);
}

.geng-coverage-legend span {
  font-size: 12px;
  color: var(--geng-color-secondary-text);
}

.geng-coverage-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.geng-coverage-legend-dot.paid { background: var(--geng-color-success); }
.geng-coverage-legend-dot.partial { background: var(--geng-color-partial); }
.geng-coverage-legend-dot.unpaid { background: var(--geng-color-grey-100); }

/* State-distinguishing inline tag (GMON-89). Used for payment-row status
   attributes (NSF today; refunded, disputed, etc. in future cards). Per
   GOV.UK Design System: tags are for status, not for categorical
   attributes. Variants supply color; the base rule supplies layout. */
.geng-tag {
  display: inline-block;
  padding: 2px 8px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 4px;
}

.geng-tag--red {
  background: var(--geng-color-error);
  color: var(--geng-color-white);
}

.geng-tag--orange {
  background: var(--geng-color-warning);
  color: var(--geng-color-white);
}

/* Month-group section header inside transaction_list.html when
   group_by_month=True (GMON-19). Spans all data columns via
   colspan="{{ column_count }}"; visually distinct from data rows
   but stays inside the table for single-scrollable continuity. */
.geng-month-header td {
  background: var(--geng-color-grey-100);
  font-weight: 700;
  padding: 8px 12px;
  letter-spacing: 0.5px;
  font-size: 14px;
}