/* Dues & Reminders (School ERP 3.2.82). Scoped to [data-gap-module="fee-dues"]; the batch and undo dialogs (appended to <body>) use .fee-dues-dialog, and the prints (the shared document preview, also on <body>) .fee-dues-print-table. ERP tokens only, so dark mode follows.
   The page is the ERP's own: pageHeading, metricCards, workflow cards with numbered sections, panels, register filter bars and dataTable. Nothing here is wider than its container — tables scroll inside their own .data-table-wrap, everything else wraps. */
[data-gap-module="fee-dues"] { display: block; min-width: 0; }
[data-gap-module="fee-dues"] .btn[hidden], .fee-dues-dialog .btn[hidden] { display: none; }

/* Tick boxes in the numbered sections (settings, carry-forward). */
[data-gap-module="fee-dues"] .tick-option input { width: auto; margin: 0; accent-color: var(--brand); }
/* These tick labels are sentences: on a phone they wrap rather than end in "…". */
[data-gap-module="fee-dues"] .tick-option > span { min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; }
[data-gap-module="fee-dues"] .fee-dues-inline { align-self: end; min-height: 46px; }
[data-gap-module="fee-dues"] .fee-dues-master { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
[data-gap-module="fee-dues"] .fee-dues-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
[data-gap-module="fee-dues"] .fee-dues-group-title { flex-basis: 100%; color: var(--muted); font-size: 12px; font-weight: 700; }
[data-gap-module="fee-dues"] .fee-dues-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
[data-gap-module="fee-dues"] .fee-dues-empty { margin: 6px 0; }
[data-gap-module="fee-dues"] .fee-dues-summary { margin: 0; overflow-wrap: anywhere; }
[data-gap-module="fee-dues"] .fee-dues-metrics { margin: 0; }
[data-gap-module="fee-dues"] .fee-dues-tick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
[data-gap-module="fee-dues"] .fee-dues-tick-bar small { color: var(--muted); font-size: 12px; font-weight: 650; }
[data-gap-module="fee-dues"] .fee-dues-pick { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }

/* A register block: the ERP's filter bar, search and table. Inside a numbered
   section it keeps the register look rather than the form's 46px boxes. */
[data-gap-module="fee-dues"] .fee-dues-register { min-width: 0; }
[data-gap-module="fee-dues"] .form-sections .fee-dues-register { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
[data-gap-module="fee-dues"] .fee-dues-register > * { min-width: 0; }
/* Buttons never wrap their words (.btn), so a row of them wraps instead. */
[data-gap-module="fee-dues"] .form-actions, .fee-dues-dialog .form-actions { flex-wrap: wrap; }
[data-gap-module="fee-dues"] .form-sections .fee-dues-register .register-filter,
[data-gap-module="fee-dues"] .form-sections .fee-dues-register .register-search { border: 1px solid var(--line); border-radius: 11px; }
[data-gap-module="fee-dues"] .form-sections .section-grid .fee-dues-register .register-filter label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
[data-gap-module="fee-dues"] .form-sections .section-grid .fee-dues-register .register-filter select { width: auto; min-width: 150px; max-width: 100%; min-height: 36px; padding: 6px 9px; border-radius: 9px; font-size: 13px; font-weight: 650; }
[data-gap-module="fee-dues"] .form-sections .section-grid .fee-dues-register .register-search input[type="search"] { min-height: 36px; padding: 6px 11px; border-radius: 9px; font-size: 13px; font-weight: 600; }
[data-gap-module="fee-dues"] .data-table td, .fee-dues-dialog .data-table td { vertical-align: top; }
[data-gap-module="fee-dues"] .fee-dues-bad td, .fee-dues-dialog .fee-dues-bad td { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }

/* Today's list: each child of a family on a line of its own. */
[data-gap-module="fee-dues"] .fee-dues-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
[data-gap-module="fee-dues"] .fee-dues-child + .fee-dues-child { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line); }
[data-gap-module="fee-dues"] .fee-dues-child small { margin: 0; color: var(--muted); }

[data-gap-module="fee-dues"] .fee-dues-pill.status-active, .fee-dues-dialog .record-status.status-active { color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--surface)); }
[data-gap-module="fee-dues"] .fee-dues-pill.status-pending, .fee-dues-dialog .record-status.status-pending { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, var(--surface)); }
[data-gap-module="fee-dues"] .fee-dues-pill.status-cancelled, .fee-dues-dialog .record-status.status-cancelled { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, var(--surface)); }
[data-gap-module="fee-dues"] code, .fee-dues-dialog code { padding: 1px 5px; border-radius: 5px; background: var(--canvas); color: var(--ink); font-size: 11px; overflow-wrap: anywhere; }

/* The batch and undo dialogs. */
.fee-dues-dialog { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.fee-dues-dialog > *, .fee-dues-dialog .fee-dues-register > * { min-width: 0; }

/* Prints: the shared letterhead document, a table that fits A4 portrait. */
/* min-width:0 undoes reference-layout.css's `table { min-width: 760px }`, which would run past an A4 page. */
.fee-dues-print-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; margin: 0 0 3mm; font-size: 8.5pt; }
.fee-dues-print-table th,
.fee-dues-print-table td { padding: 1.4mm 1.8mm; border: 1px solid var(--line); color: var(--ink); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.fee-dues-print-table th { background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
.fee-dues-print-table td small { display: block; margin-top: .6mm; color: var(--muted); font-size: 7.5pt; }
.fee-dues-print-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fee-dues-print-table tr { break-inside: avoid; page-break-inside: avoid; }
.jpraxc-print-mono .fee-dues-print-table th,
.jpraxc-print-mono .fee-dues-print-table td { border-color: #000; background: #fff; color: #000; }

/* A file box is as wide as its words by default; it takes its column's width instead. */
[data-gap-module="fee-dues"] input[type="file"] { min-width: 0; max-width: 100%; }
@media (max-width: 640px) {
  /* The ERP's one-column compact form is `1fr`, which the file box's own width would stretch past the phone. */
  [data-gap-module="fee-dues"] .compact-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  [data-gap-module="fee-dues"] .fee-dues-inline { min-height: 0; }
}
@media (max-width: 620px) {
  [data-gap-module="fee-dues"] .fee-dues-group { flex-direction: column; align-items: flex-start; }
  [data-gap-module="fee-dues"] .form-sections .section-grid .fee-dues-register .register-filter label { flex: 1 1 100%; }
  [data-gap-module="fee-dues"] .form-sections .section-grid .fee-dues-register .register-filter select { width: 100%; min-width: 0; }
}