/* Reminders sheet (Reminders.jsx). It wears the Revenue ledger's classes
   (features/revenue/revenue.css, loaded on every page) and adds only what
   reminders need: the due badges, pending and collected colours, the frame
   the column tools know as "reminders", and the New reminder form. */
.reminders-sheet .rem-stat-pending strong,.rem-grid .rem-pending{color:var(--danger)}
.reminders-sheet .rem-stat-overdue strong{color:var(--danger)}
.reminders-sheet .rem-stat-today strong{color:#f0a35e}
.reminders-sheet .rem-stat-upcoming strong{color:var(--success)}
.rem-grid .rem-collected{color:var(--success)}
.rem-grid{min-width:1680px}
.rem-grid td,.rem-grid thead button{padding:13px 16px}
.rem-grid .rl-remarks{max-width:280px;min-width:160px;white-space:normal;font-size:11px;color:var(--text-mid);overflow-wrap:anywhere}
.rem-grid .rem-num{font-variant-numeric:tabular-nums;color:var(--text-mid)}
.rem-grid .rem-phone a{color:inherit;text-decoration:none;font-variant-numeric:tabular-nums}
.rem-grid .rem-phone a:hover{color:var(--accent);text-decoration:underline}
.rem-grid tr.rem-done td:not(.rl-rownum){opacity:.55}
/* The app's due badge: red overdue, orange today, green upcoming. */
.rem-due{display:inline-block;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.rem-due-overdue{color:#ff8a80;background:rgba(255,92,92,.12)}
.rem-due-today{color:#f0a35e;background:rgba(240,163,94,.12)}
.rem-due-upcoming{color:var(--success);background:rgba(124,226,124,.1)}
.rem-due-none{color:var(--text-lo);background:var(--surface-2)}
.rem-type-payment{color:var(--accent);background:var(--accent-wash)}
.rem-type-other{color:var(--text-mid);background:var(--surface-2)}
.rl-tabs .rem-tab-count{margin-left:6px;padding:0 6px;border-radius:999px;background:var(--surface-1);font-size:10px;color:var(--text-lo);font-variant-numeric:tabular-nums}
.rl-tabs button[aria-pressed=true] .rem-tab-count{color:var(--accent)}
.rem-actions-head{width:56px}
.rem-actions{text-align:center}
.rem-delete{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--text-lo);cursor:pointer}
.rem-delete:hover{color:var(--danger);background:var(--surface-2)}
.rem-delete:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rem-grid-scroll{flex:1 1 0;min-height:240px;overflow:auto;overscroll-behavior-x:contain}
.rem-confirm{margin:0;color:var(--text-mid);line-height:1.6}.rem-confirm strong{color:var(--text-hi)}
.rem-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rem-field{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-small);font-weight:600;color:var(--text-mid)}
.rem-field.rem-wide{grid-column:1 / -1}
.rem-field input,.rem-field select{height:46px;padding:0 12px;background:var(--surface-2);border:0;border-radius:var(--radius-sm);color:var(--text-hi);font:inherit;font-size:var(--fs-body);font-weight:400;color-scheme:dark}
.rem-field input:focus,.rem-field select:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--accent)}
@media(max-width:600px){.rem-form{grid-template-columns:1fr}}
/* Phones: title on its own line, then the totals, then New reminder. */
@media(max-width:600px){.reminders-sheet .rl-heading>div:first-child{flex:1 1 100%;min-width:0}.reminders-sheet .rl-heading>button{order:4}.reminders-sheet .rl-summary{order:3}}
/* Toolbar: search, the due segment control, then Refresh / CSV / Excel on its
   right, on one row. When the title leaves too little room the whole toolbar
   moves under it (full width) rather than splitting. Narrow screens may wrap. */
.reminders-sheet .rl-sheet-title>.rl-toolbar{flex-wrap:nowrap;flex:0 1 auto}
.reminders-sheet .rl-sheet-title>.rl-toolbar .rl-search{flex:1 1 220px;min-width:160px}
.reminders-sheet .rl-sheet-title>.rl-toolbar .rl-tabs,.reminders-sheet .rl-sheet-title>.rl-toolbar .rl-tools{flex:none}
@media(max-width:900px){.reminders-sheet .rl-sheet-title>.rl-toolbar{flex-wrap:wrap;flex-basis:100%}}
/* Smaller laptops: the toolbar takes its own full-width row under the title;
   below that, search gets its own line and the segment control keeps the
   buttons on its right. The header's totals move under the title instead of
   running into New reminder. */
@media(max-width:1280px){
  .reminders-sheet .rl-sheet-title>.rl-toolbar{flex-basis:100%;justify-content:flex-start}
  .reminders-sheet .rl-heading{flex-wrap:wrap}
  .reminders-sheet .rl-summary{order:3;width:100%;margin-left:0;justify-content:flex-start}
  .reminders-sheet .rl-stat{text-align:left}
}
@media(max-width:1100px){
  .reminders-sheet .rl-sheet-title>.rl-toolbar{flex-wrap:wrap}
  .reminders-sheet .rl-sheet-title>.rl-toolbar .rl-search{flex:1 1 100%}
  .reminders-sheet .rl-sheet-title>.rl-toolbar .rl-tools{margin-left:auto}
}