/* ─────────────────────────────────────────────────────────────────────────────
   Mobile card lists — shared pattern.

   Extracted from the .mj-* rules that were inline in Accounts/Details.cshtml, which
   proved the approach. Renamed to a neutral .mc-* prefix so any page can use it.

   The idea: a table and a card list are BOTH rendered; one is shown at a time.
   On phones a table is the wrong shape no matter how good the table library is, so
   below the breakpoint we show cards instead of trying to make a grid fit.

   Everything uses the --ff-* theme tokens, so cards follow light/dark themes for free.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── View switching ─────────────────────────────────────────────────────────
   Driven by a data-mc-view attribute on the wrapper, set by mobile-cards.js —
   NOT by a media query alone, so the user can override the viewport default and
   have that choice remembered. */
.mc-wrap[data-mc-view="cards"] .mc-cards { display: block; }
.mc-wrap[data-mc-view="cards"] .mc-table { display: none; }
.mc-wrap[data-mc-view="table"] .mc-cards { display: none; }
.mc-wrap[data-mc-view="table"] .mc-table { display: block; }

/* Before JS runs, show the table on wide screens and cards on narrow ones, so
   there's no flash of the wrong view. */
.mc-wrap:not([data-mc-view]) .mc-cards { display: none; }
.mc-wrap:not([data-mc-view]) .mc-table { display: block; }
@media (max-width: 768px) {
    .mc-wrap:not([data-mc-view]) .mc-cards { display: block; }
    .mc-wrap:not([data-mc-view]) .mc-table { display: none; }
}

.mc-toggle { display: inline-flex; gap: 0; border: 1px solid var(--ff-border); border-radius: 8px; overflow: hidden; }
.mc-toggle button {
    background: var(--ff-surface); color: var(--ff-text-muted); border: 0;
    /* 44px min height — the biggest "cheap app" tell is a button you have to aim at. */
    padding: 0 14px; min-height: 44px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.mc-toggle button + button { border-left: 1px solid var(--ff-border); }
.mc-toggle button.active { background: var(--ff-info); color: #fff; }

/* ── Filter chips + search ──────────────────────────────────────────────── */
.mc-controls { margin-bottom: 10px; }
.mc-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.mc-chip {
    background: var(--ff-surface); border: 1px solid var(--ff-border); color: var(--ff-text-strong);
    padding: 0 12px; min-height: 36px; border-radius: 18px; font-size: 0.8rem; cursor: pointer;
}
.mc-chip:hover { border-color: var(--ff-border-strong); }
.mc-chip.active { background: var(--ff-info); color: #fff; border-color: var(--ff-info); }
.mc-chip .mc-ct {
    margin-left: 5px; background: rgba(255,255,255,0.18); padding: 1px 7px;
    border-radius: 8px; font-size: 0.65rem;
}
.mc-search {
    background: var(--ff-surface-2); color: var(--ff-text); border: 1px solid var(--ff-border);
    min-height: 44px;
}
.mc-search:focus {
    background: var(--ff-surface-2); color: var(--ff-text);
    border-color: var(--ff-info); box-shadow: 0 0 0 2px rgba(59,130,246,.2);
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.mc-card {
    background: var(--ff-surface); border: 1px solid var(--ff-border);
    border-left: 3px solid var(--ff-text-dim);
    border-radius: 8px; margin-bottom: 8px; overflow: hidden;
}
/* Generic status accents — pages map their own meaning onto these. */
.mc-card[data-status="info"]    { border-left-color: var(--ff-info); }
.mc-card[data-status="good"]    { border-left-color: var(--ff-good); }
.mc-card[data-status="warn"]    { border-left-color: var(--ff-warn); }
.mc-card[data-status="bad"]     { border-left-color: var(--ff-bad); }
.mc-card[data-status="muted"]   { opacity: 0.7; }

.mc-row { display: flex; gap: 10px; padding: 12px 13px; cursor: pointer; align-items: flex-start; min-height: 44px; }
.mc-main { flex: 1; min-width: 0; }
.mc-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.mc-name { font-weight: 700; color: var(--ff-heading); font-size: 0.95rem; }
.mc-status { font-size: 0.65rem; padding: 2px 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.mc-status.is-info { background: rgba(59,130,246,0.15); color: var(--ff-info); }
.mc-status.is-good { background: rgba(34,197,94,0.15);  color: var(--ff-good); }
.mc-status.is-warn { background: rgba(245,158,11,0.15); color: var(--ff-warn); }
.mc-status.is-bad  { background: rgba(244,63,94,0.15);  color: var(--ff-bad); }
.mc-sub  { color: var(--ff-text-muted); font-size: 0.8rem; margin-bottom: 4px; word-break: break-word; }
.mc-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.72rem; color: var(--ff-text-dim); align-items: center; }
.mc-amount { color: var(--ff-good); font-weight: 700; margin-left: auto; font-size: 0.85rem; }
.mc-chev { color: var(--ff-border-strong); transition: transform 0.18s; padding-top: 2px; }
.mc-card.expanded .mc-chev { transform: rotate(180deg); }

/* Checkbox column — deliberately oversized for thumbs. */
.mc-check { display: flex; align-items: center; padding-top: 2px; }
.mc-check input[type="checkbox"] { width: 22px; height: 22px; }

.mc-detail { display: none; padding: 10px 13px 12px; border-top: 1px solid var(--ff-border); background: var(--ff-surface-2); }

/* Payment-method selector — full width and clearly labelled, because it governs every
   action button below it. A narrow unlabelled dropdown below a long list reads as optional. */
.mc-paylabel {
    display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--ff-text-dim); margin-bottom: 4px; font-weight: 700;
}
.mc-paymethod { width: 100%; min-height: 44px; margin-bottom: 12px; }

/* Per-item breakdown inside an expanded card (e.g. the individual jobs an account owes for).
   One row per item so each can be actioned on its own, rather than only in bulk. */
.mc-joblist { margin-bottom: 10px; }
.mc-jobrow {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0; border-bottom: 1px solid var(--ff-border);
    min-height: 44px;
}
.mc-jobrow:last-child { border-bottom: 0; }
.mc-jobrow.is-paid { opacity: 0.6; }
.mc-jobinfo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mc-jobdate { font-size: 0.8rem; color: var(--ff-text); font-weight: 600; }
.mc-jobtype { font-size: 0.72rem; color: var(--ff-text-dim); }
.mc-jobamt { font-size: 0.82rem; font-weight: 700; color: var(--ff-text-strong); white-space: nowrap; }
.mc-jobrow .btn { min-height: 34px; font-size: 0.72rem; padding: 2px 10px; white-space: nowrap; }
.mc-card.expanded .mc-detail { display: block; }
.mc-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-actions .btn,
.mc-actions .ff-btn { flex: 1; min-width: 110px; min-height: 40px; font-size: 0.78rem; }
.mc-empty { text-align: center; padding: 30px 20px; color: var(--ff-text-dim); font-size: 0.9rem; }
.mc-empty i { font-size: 2rem; display: block; margin-bottom: 8px; color: var(--ff-border-strong); }

/* ── Sticky action bar ──────────────────────────────────────────────────────
   Keeps the primary action reachable instead of scrolling away above a long list.
   The safe-area inset stops it sitting under the home indicator on modern iPhones. */
.mc-actionbar {
    position: sticky; bottom: 0; z-index: 5;
    background: var(--ff-surface); border-top: 1px solid var(--ff-border);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.mc-actionbar .mc-selcount { font-size: 0.78rem; color: var(--ff-text-muted); }

@media (prefers-reduced-motion: reduce) {
    .mc-chev { transition: none; }
}