/* Reminders — recurring, deadline-driven obligations (rent, bills, a
   monthly accounts check). Deliberately small: the card shell, header,
   count pill, checkbox and deadline badge are all reused verbatim from
   tasks.css / sections.css / tasks_filter.css — see plans/reminders.md.
   Habit-prefixed classes below (.habit-emoji-field, .habit-freq-modes,
   .habit-day-picker, etc.) are reused deliberately: they're a generic
   "icon picker" / "frequency picker" widget, not habit-specific behavior,
   and habits.css is already loaded globally. */

.reminder-emoji {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
}

/* Optimistic "handled" echo — fires on click, before the HTMX swap that
   actually removes the row lands (Overdue/At-risk only; a reminder due
   today lives in the Today section instead and renders its done state
   server-side via .checkbox-icon-done / .task-title.completed directly,
   see reminder_item.html). Mirrors those same task classes so a reminder
   checks off exactly like a task does for the ~150ms it's still on
   screen. No row-level fade — only the checkbox/title recolor, same as a
   completed task never dims its whole row either. */
.reminder-item--handled .checkbox-icon {
    color: var(--green);
}

.reminder-item--handled .task-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Plain, muted meta text — never a colored chip, so it never competes
   with the deadline badge, which is the row's one status signal. */
.reminder-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ── Inline auto-log payment amount (Today / Overdue / At-risk rows) ──
   Only rendered when reminder.auto_log_payment is set (per-cycle amounts
   like a credit card bill drift slightly, so this lets it be corrected
   right before marking handled instead of a trip to edit the reminder).
   Sits after .task-title-group (flex:1, so it yields space here first)
   and before the deadline badge, both of which are flex-shrink:0 already —
   this follows the same convention so the title's ellipsis is always what
   gives way on narrow rows, never this field or the badge. */
.reminder-payment-field {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* .tag-name-input/.payment-amount-input give the base input chrome + width
   bounds (forms are shared, see payments.css); this row is far denser than
   a payment form though (checkbox, emoji, title+meta, maybe a deadline
   badge already competing for space), so the field is narrowed and
   quietened to inline-metadata scale rather than full form-input size.
   Native number-spinner hiding also lives on .payment-amount-input in
   payments.css (shared by every type="number" field with this class) —
   this row's ~4.5rem width just made the un-hidden spinner's overlap with
   the digits the most visible instance of it. */
/* Compound selector (not just .reminder-payment-amount-input) so this
   reliably beats .payment-amount-input's own min-width:100px/max-width:130px
   (payments.css) — same specificity, but payments.css loads after
   reminders.css in base.html, so the plain class alone lost that cascade
   and rendered ~100px wide (clipped off narrow rows) instead of 4.5rem. */
.reminder-payment-field .reminder-payment-amount-input {
    flex: 0 0 auto;
    width: 4.5rem;
    min-width: 0;
    max-width: none;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    text-align: right;
    border-radius: 6px;
}

/* Sent → received separator on cross-currency transfer rows. */
.reminder-transfer-arrow {
    font-size: 15px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Currency is fixed on the reminder (edited only from the reminder's own
   edit form, see reminder_row.html) — plain text, never an input, so it
   can't be mistaken for a second editable field in this already-compact
   row. */
.reminder-payment-currency {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Heads-up that the linked space can't cover the payment. Amber, not red:
   completing is still allowed (top the account up first, or it was paid
   elsewhere), so this is a warning rather than an error. */
.reminder-funds-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--amber);
    white-space: nowrap;
    flex-shrink: 0;
}

.reminder-funds-warning .material-icons {
    font-size: 15px;
    flex-shrink: 0;
}

/* De-emphasize once handled — same "still fully usable, just visually
   quieted" treatment as .task-title.completed, since the row can be
   un-toggled and the amount still needs to submit correctly either way.
   Server-rendered for the Today section (reminder.today_status.handled on
   the row itself); Overdue/At-risk rows get here via the same class added
   optimistically on click, above. */
.reminder-item--handled .reminder-payment-amount-input {
    color: var(--text-muted);
    border-color: var(--border-color);
    opacity: 0.7;
}

.reminder-item--handled .reminder-payment-currency,
.reminder-item--handled .reminder-transfer-arrow {
    color: var(--text-muted);
}

/* Narrow rows already give the title a hard floor (.task-title,
   responsive.css) and shrink deadline badges to icon-only — this field is
   the other flex-shrink:0 competitor for that same leftover space, so it
   gets a smaller floor too rather than letting overflow:hidden (.task-item,
   responsive.css) silently clip the currency label off the end of the row. */
@media (max-width: 600px) {
    .reminder-payment-field {
        gap: 0.2rem;
    }

    .reminder-payment-field .reminder-payment-amount-input {
        width: 3.6rem;
    }

    .reminder-payment-currency {
        font-size: 0.68rem;
    }
}

.reminder-ended-badge {
    color: var(--amber) !important;
    border-color: color-mix(in srgb, var(--amber) 30%, transparent) !important;
}

/* End date field — mirrors .habit-startdate-field / .habit-startdate-label
   (habits.css) exactly, under its own class so start/end can be targeted
   independently. */
.habit-enddate-field {
    width: 140px;
    flex-shrink: 0;
}

.habit-enddate-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Day-of-month picker — a themed popover (clones .habit-emoji-picker-popup's
   shell) holding a 7-col grid of .day-btn circles, rather than a native
   <select>. "Day 1-31 of an abstract recurring month" has no weekdays or
   navigation to align, so .mini-calendar's full date-grid machinery would
   be modeling the wrong thing — this picks from a flat set of 32 values,
   same interaction language as the sibling "Set days" weekday grid. */
/* Missing from the original select-based picker too — never visible then
   since a native <select> doesn't spill past its box. A content-sized
   popover (~241px, see .reminder-day-popover) does: without a floor here
   the field shrinks to its trigger's content width ("Day 1" is short),
   leaving it narrower than the popover and spilling into the Started
   field beside it. Deliberately NOT flex:1 (habits.css:675's approach for
   the weekday-picker field) — that stretches this field to claim the
   row's entire leftover space, which just leaves a single trigger chip
   absurdly wide; a fixed floor slightly past the popover's own width is
   all this needs. */
.reminder-frequency-field {
    min-width: 248px;
}

.reminder-day-field {
    position: relative;
}

.reminder-day-trigger {
    justify-content: space-between;
    font-family: 'DM Sans', sans-serif;
    text-align: left;
}

.reminder-day-trigger-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reminder-day-chevron {
    font-size: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.reminder-day-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    /* Sized to content, not a hand-picked number: a hardcoded width has to
       stay in sync with .day-btn's size/gap/padding by hand, and silently
       falls out of sync (7 x 28px .day-btn + gaps + padding need ~239px —
       a hardcoded 224px clipped the grid by ~15px). */
    width: max-content;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.6rem;
    box-shadow: var(--shadow-drop);
    animation: pickerFadeIn 0.12s ease;
}

.reminder-day-grid {
    display: grid;
    /* Fixed-size columns, not 1fr: .day-btn's own explicit 28px width
       can't stretch to fill a wider fr-track, so it needs a track that
       already matches it rather than one derived from the (now
       content-sized) container's width. */
    grid-template-columns: repeat(7, 28px);
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.reminder-day-last {
    display: block;
    width: 100%;
    text-align: center;
}

/* ── Notes / description — create + edit forms ──────────────────────────────
   Lives in .habit-create-extras alongside frequency/start-date, but forced
   onto its own row (flex-basis 100%) rather than squeezed in as a third
   inline item: a note like "price went up in March, was $12.99" needs more
   than a sliver of leftover row width to be legible while typing. */
.reminder-description-field {
    flex: 1 1 100%;
}

.reminder-description-input {
    width: 100%;
    min-height: 2.4rem;
    resize: vertical;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
}

.reminder-description-input::placeholder { color: var(--text-muted); }
.reminder-description-input:focus { border-color: var(--accent); }

/* ── Notes — view mode, management list ──────────────────────────────────────
   Single-line + ellipsis, not a line-clamp: rows share a list with plain
   (no-note) reminders, so a variable-height second line would make list rows
   inconsistent height against their neighbours. Full text is still reachable
   via the native title tooltip on hover/focus. */
.reminder-description {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Transfer reminders ── */
.reminder-kind-toggle {
    display: inline-flex;
    gap: 0.25rem;
    flex-basis: 100%;
}

.reminder-kind-option {
    position: relative;
    cursor: pointer;
}

/* Native radio stays focusable/arrow-key operable; visually replaced by the pill. */
.reminder-kind-input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.reminder-kind-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.reminder-kind-pill .material-icons {
    font-size: 16px;
    flex-shrink: 0;
}

.reminder-kind-option:hover .reminder-kind-pill {
    background: var(--accent-glow);
    color: var(--text-primary);
}

.reminder-kind-input:checked + .reminder-kind-pill {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
}

.reminder-kind-input:focus-visible + .reminder-kind-pill {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.reminder-space-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.reminder-space-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.reminder-transfer-note {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Mode switching: JS sets data-kind on .reminder-payment-fields. */
.reminder-payment-fields[data-kind="payment"] [data-transfer-only],
.reminder-payment-fields[data-kind="transfer"] [data-payment-only],
.reminder-payment-fields[data-kind="transfer"] .reminder-autolog-label {
    display: none;
}

.reminder-payment-fields[data-kind="transfer"] .reminder-amount-in-field[hidden] {
    display: none;
}

.reminder-transfer-badge {
    color: var(--accent);
}

.reminder-transfer-badge .reminder-transfer-amount {
    color: var(--text-secondary);
    font-weight: 500;
}

.reminder-meta.reminder-transfer-route {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-secondary);
}

.reminder-transfer-route .material-icons {
    font-size: 14px;
    flex-shrink: 0;
    color: var(--accent);
}

@media (max-width: 768px) {
    .reminder-payment-fields .reminder-space-field,
    .reminder-payment-fields .payment-space-select {
        flex: 1 1 100%;
        max-width: 100%;
    }
}