/* DUES — the Dues page, the membership-levels screens and the Today dues cards. Linked by src/dues/css.js after
   app.css. Every selector sits under .dues-page (the wrapper the pages and widgets put around their tables) so
   nothing here restyles another slice's page. Below 600px a dues table stops being a table: each line is a card,
   the member first, the Mark paid control in full view and as wide as the card. */

.dues-page .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.dues-page .dues-sub { display: block; font-size: .8rem; color: var(--muted); font-weight: 400; }
.dues-page .dues-level { font-size: .9rem; }
.dues-page .dues-level.none { color: var(--muted); }
.dues-page .dues-paidline { font-size: .9rem; }
.dues-page .dues-pay-form { gap: .35rem; }
.dues-page .dues-pay-form .mini { min-width: 6.2rem; max-width: 9rem; margin-top: 0; }
.dues-page .dues-pay-form .btn { margin-top: 0; }

.dues-page table.dues-levels tr.dues-total th,
.dues-page table.dues-levels tr.dues-total td { border-top: 2px solid var(--ink); font-weight: 700; }
.dues-page table.dues-levels tr.dues-total th { font-family: var(--text); text-transform: none; letter-spacing: 0; font-size: .93rem; color: var(--ink); }
.dues-page table.dues-levels td:not(:first-child),
.dues-page table.dues-levels th:not(:first-child) { text-align: right; }

.dues-page .level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .7rem; }
.dues-page .level-checks { display: grid; gap: .4rem; margin: .7rem 0; }
.dues-page .level-card h3 { font-size: 1rem; margin: 0 0 .2rem; }
.dues-page .level-card summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: .3rem 0; }
.dues-page .level-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.dues-page .dues-setup { border-left: 6px solid var(--accent); }
.dues-page .dues-starter td { vertical-align: middle; }
.dues-page .dues-starter input[type="text"], .dues-page .dues-starter input:not([type]) { margin-top: 0; }

@media (max-width: 599px) {
  .dues-page .tablewrap { overflow-x: visible; margin: 0; }
  .dues-page table.dues-table, .dues-page table.dues-levels, .dues-page table.dues-starter,
  .dues-page table.dues-table tbody, .dues-page table.dues-levels tbody, .dues-page table.dues-starter tbody,
  .dues-page table.dues-table tr, .dues-page table.dues-levels tr, .dues-page table.dues-starter tr,
  .dues-page table.dues-table td, .dues-page table.dues-levels td, .dues-page table.dues-starter td,
  .dues-page table.dues-levels tr.dues-total th { display: block; width: 100%; }
  .dues-page table.dues-table thead, .dues-page table.dues-levels thead, .dues-page table.dues-starter thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  .dues-page table.dues-table tr, .dues-page table.dues-levels tr, .dues-page table.dues-starter tr {
    background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--radius);
    margin: 0 0 .75rem; padding: .35rem .7rem .6rem;
  }
  .dues-page table.dues-table tr[data-status="overdue"] { border-left: 5px solid var(--err-line); }
  .dues-page table.dues-table td, .dues-page table.dues-levels td, .dues-page table.dues-starter td,
  .dues-page table.dues-levels tr.dues-total th {
    display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; text-align: right;
    padding: .3rem 0; border-bottom: 1px dashed var(--line);
  }
  .dues-page table.dues-table td:last-child, .dues-page table.dues-levels td:last-child, .dues-page table.dues-starter td:last-child { border-bottom: 0; }
  .dues-page table.dues-table td::before, .dues-page table.dues-levels td::before, .dues-page table.dues-starter td::before,
  .dues-page table.dues-levels tr.dues-total th::before {
    content: attr(data-label); flex: 0 0 auto; font-size: .72rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .07em; text-align: left;
  }
  .dues-page table.dues-table td.dues-member { display: block; text-align: left; padding: .3rem 0 .45rem; border-bottom: 1px solid var(--ink); font-size: 1.04rem; }
  .dues-page table.dues-table td.dues-member::before { display: none; }
  .dues-page table.dues-table.roll td:first-child { padding-left: 0; }
  .dues-page table.dues-table.roll td:first-child > .rollno { position: static; display: inline-block; width: auto; margin-right: .5rem; }
  .dues-page table.dues-table td.dues-pay { display: block; text-align: left; padding-top: .55rem; }
  .dues-page table.dues-table td.dues-pay::before { display: block; margin-bottom: .3rem; }
  .dues-page table.dues-table .dues-pay-form { display: flex; flex-wrap: wrap; gap: .4rem; width: 100%; }
  .dues-page table.dues-table .dues-pay-form .mini { flex: 1 1 8rem; max-width: none; min-height: 2.5rem; }
  .dues-page table.dues-table .dues-pay-form .btn { flex: 1 1 100%; min-height: 2.75rem; font-size: 1rem; }
  .dues-page .dues-starter td input[type="checkbox"] { width: 1.3rem; height: 1.3rem; }
  .dues-page .pageactions { display: flex; flex-wrap: wrap; gap: .5rem; }
}