/* Mobile Notifications (Settings › Administration): the device list, the sent history and the Send
   notification dialog. Every rule is scoped under .mnt (the page body), .mnt-header (the shell's
   header bar) or .mnt-modal (the dialog bodies), so nothing here restyles another page. The --dbd-*
   roles map onto the app's light/dark tokens (app.css); the few washes and the phone preview's device
   colours the app has no token for are declared here per theme. */

.mnt,
.mnt-header,
.mnt-modal {
    --dbd-surface: var(--bg-card);
    --dbd-fg: var(--text-primary);
    --dbd-muted: var(--text-muted);
    --dbd-border: var(--border-color);
    --dbd-border-strong: var(--border-interactive);
    --dbd-subtle: var(--bg-secondary);
    --mnt-ok-text: var(--accent-success-text);
    --mnt-warn-text: var(--accent-warning-text);
    --mnt-bad-text: var(--accent-danger-text);
    --mnt-info-text: var(--accent-link);
    --mnt-purple-text: #6d28d9;
    --mnt-ok-soft: rgba(21, 128, 61, .09);
    --mnt-warn-soft: rgba(245, 158, 11, .13);
    --mnt-bad-soft: rgba(220, 38, 38, .08);
    --mnt-info-soft: rgba(29, 78, 216, .08);
    --mnt-purple-soft: rgba(109, 40, 217, .08);
    --mnt-bar: var(--accent-primary);
    --mnt-focus: 0 0 0 3px rgba(37, 99, 235, .25);
    --mnt-shadow-sm: var(--shadow-sm);
    /* The phone in the preview is a picture of a device, so it keeps a device's colours in both themes. */
    --mnt-phone-bezel: #18181b;
    --mnt-lock-bg: #172033;
    --mnt-lock-fg: #f7f8fb;
    --mnt-glass: rgba(255, 255, 255, .86);
    --mnt-glass-fg: #111827;
    --mnt-app-icon: #15803d;
    /* The delivery bar's parts and the platform marks. Each bar part is also given in words beside it. */
    --mnt-bar-opened: #166534;
    --mnt-bar-delivered: #16a34a;
    --mnt-bar-transit: #2563eb;
    --mnt-bar-waiting: #7c3aed;
    --mnt-bar-missed: #d97706;
    --mnt-bar-cancelled: #a1a7b3;
    --mnt-bar-track: var(--bg-secondary);
    --mnt-android: #2e9e5f;
    --mnt-apple: var(--text-primary);
    --mnt-windows: #0078d4;
    color: var(--dbd-fg);
}

[data-theme="dark"] .mnt,
[data-theme="dark"] .mnt-header,
[data-theme="dark"] .mnt-modal {
    --mnt-purple-text: #c4b5fd;
    --mnt-ok-soft: rgba(34, 197, 94, .13);
    --mnt-warn-soft: rgba(245, 158, 11, .15);
    --mnt-bad-soft: rgba(248, 113, 113, .13);
    --mnt-info-soft: rgba(96, 165, 250, .13);
    --mnt-purple-soft: rgba(167, 139, 250, .14);
    --mnt-focus: 0 0 0 3px rgba(96, 165, 250, .35);
    --mnt-phone-bezel: #000000;
    --mnt-glass: rgba(30, 36, 52, .9);
    --mnt-glass-fg: #e6e9f2;
    --mnt-bar-opened: #22c55e;
    --mnt-bar-delivered: #15803d;
    --mnt-bar-transit: #3b82f6;
    --mnt-bar-waiting: #a78bfa;
    --mnt-bar-missed: #f59e0b;
    --mnt-bar-cancelled: #4b5573;
    --mnt-bar-track: #1a2238;
    --mnt-android: #3ddc84;
    --mnt-windows: #4cc2ff;
}

.mnt { width: 100%; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.mnt [hidden], .mnt-modal [hidden] { display: none !important; }

/* ── Header bar ─────────────────────────────────────────────── */
.mnt-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; width: 100%; flex-wrap: wrap; }
.mnt-header-subtitle { margin: 0; font-size: .8rem; color: var(--text-secondary); min-width: 0; }
.mnt-header .dbd-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; font-size: .85rem; font-weight: 550; white-space: nowrap; }

/* ── Segmented control (radios, so arrow keys and group semantics come for free) ── */
.mnt-seg { align-self: center; display: inline-flex; padding: 3px; background: var(--dbd-subtle); border: 0; border-radius: 8px; gap: 2px; flex-wrap: wrap; position: relative; margin: 0; min-width: 0; }
.mnt-seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mnt-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mnt-seg label { padding: 4px 10px; min-height: 26px; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; border-radius: 6px; cursor: pointer; color: var(--text-secondary); font-weight: 550; margin: 0; white-space: nowrap; }
.mnt-seg input:checked + label { background: var(--dbd-surface); color: var(--dbd-fg); box-shadow: var(--mnt-shadow-sm); }
.mnt-seg input:focus-visible + label { box-shadow: var(--mnt-focus); }
.mnt-seg-count { font-size: .7rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ── Tabs: underline tabs in a flat card (radios underneath, as the segmented control) ── */
.mnt-tabs { display: flex; align-items: stretch; justify-content: space-between; gap: .5rem; flex-wrap: wrap; background: var(--dbd-surface); border: 1px solid var(--dbd-border); border-radius: 12px; padding: 0 .75rem; box-shadow: var(--mnt-shadow-sm); }
.mnt-tablist { display: flex; gap: .25rem; margin: 0; padding: 0; border: 0; min-width: 0; position: relative; }
.mnt-tablist legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mnt-tablist input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mnt-tablist label { display: inline-flex; align-items: center; gap: 8px; padding: .75rem .9rem; margin: 0; font-size: .8125rem; font-weight: 550; color: var(--text-secondary); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.mnt-tablist label:hover { color: var(--dbd-fg); background: var(--dbd-subtle); }
.mnt-tablist input:checked + label { color: var(--dbd-fg); font-weight: 600; border-bottom-color: var(--accent-success, #15803d); }
.mnt-tablist input:focus-visible + label { box-shadow: var(--mnt-focus); }
.mnt-count { font-size: .7rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--dbd-subtle); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.mnt-tablist input:checked + label .mnt-count { background: var(--mnt-ok-soft); color: var(--mnt-ok-text); }
.mnt-tabs-end { display: flex; align-items: center; gap: .6rem; }
.mnt-live { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--text-secondary); white-space: nowrap; }
.mnt-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.mnt-live.is-live .mnt-live-dot { background: var(--mnt-ok-text); box-shadow: 0 0 0 3px var(--mnt-ok-soft); animation: mnt-pulse 1.6s ease-in-out infinite; }
@keyframes mnt-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mnt-live.is-live .mnt-live-dot, .mnt-pill.is-moving::before { animation: none; } }

/* ── Callouts (persistent conditions only) ──────────────────── */
.mnt-callout { display: flex; gap: .65rem; align-items: flex-start; padding: .75rem .9rem; border-radius: 8px; font-size: .84rem; border: 1px solid var(--dbd-border); background: var(--dbd-subtle); color: var(--dbd-fg); }
.mnt-callout > i { margin-top: 3px; flex: 0 0 auto; }
.mnt-callout p { margin: 0; }
.mnt-callout p + p { margin-top: .35rem; }
.mnt-callout code { font-size: .92em; }
.mnt-callout.is-warn { background: var(--mnt-warn-soft); border-color: transparent; }
.mnt-callout.is-warn > i { color: var(--mnt-warn-text); }
.mnt-callout.is-bad { background: var(--mnt-bad-soft); border-color: transparent; }
.mnt-callout.is-bad > i { color: var(--mnt-bad-text); }
.mnt-callout.is-info > i { color: var(--mnt-info-text); }

/* ── Stat tiles: each one filters the device list ───────────── */
.mnt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.mnt .mnt-stat { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px .75rem; align-content: start; background: var(--dbd-surface); border: 1px solid var(--dbd-border); border-radius: 12px; padding: .85rem 1rem; box-shadow: var(--mnt-shadow-sm); cursor: pointer; min-width: 0; color: var(--dbd-fg); transition: border-color .1s ease, box-shadow .1s ease; }
.mnt .mnt-stat:hover { border-color: var(--dbd-border-strong); box-shadow: var(--shadow-md, 0 2px 8px rgba(16, 24, 40, .08)); }
.mnt .mnt-stat:focus-visible { box-shadow: var(--mnt-focus); }
.mnt .mnt-stat[aria-pressed="true"] { border-color: #15803d; box-shadow: 0 0 0 2px rgba(21, 128, 61, .18); }
.mnt-stat-icon { grid-row: span 3; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--dbd-subtle); color: var(--text-secondary); }
.mnt-stat-icon.is-ok { background: var(--mnt-ok-soft); color: var(--mnt-ok-text); }
.mnt-stat-icon.is-info { background: var(--mnt-info-soft); color: var(--mnt-info-text); }
.mnt-stat-icon.is-warn { background: var(--mnt-warn-soft); color: var(--mnt-warn-text); }
.mnt-stat-label { font-size: .6875rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.mnt-stat-value { font-size: 1.5rem; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mnt-stat-value small { font-size: .8rem; font-weight: 500; color: var(--text-secondary); margin-left: 4px; }
.mnt-stat-sub { font-size: .76rem; color: var(--text-secondary); display: flex; gap: .2rem .75rem; flex-wrap: wrap; align-items: center; }
.mnt-stat-meter { display: block; height: 5px; border-radius: 99px; background: var(--mnt-bar-track); overflow: hidden; margin-top: 7px; }
.mnt-stat-meter span { display: block; height: 100%; border-radius: 99px; background: var(--mnt-bar-delivered); }
.mnt-tone-android { color: var(--mnt-android); }

/* ── Section cards ──────────────────────────────────────────── */
.mnt-section { background: var(--dbd-surface); border: 1px solid var(--dbd-border); border-radius: 12px; box-shadow: var(--mnt-shadow-sm); min-width: 0; }
.mnt-section-head { display: flex; align-items: center; gap: .6rem .75rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--dbd-border); flex-wrap: wrap; }
.mnt-section-icon { color: var(--accent-primary); font-size: 1rem; flex: 0 0 auto; }
.mnt-section-heading { min-width: 0; flex: 1 1 200px; }
.mnt-section-title { margin: 0; font-size: .95rem; font-weight: 600; color: var(--dbd-fg); }
.mnt-section-hint { margin: 2px 0 0; font-size: .78rem; color: var(--dbd-muted); }
.mnt-section-body { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.mnt-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .75rem 1rem; border-bottom: 1px solid var(--dbd-border); }
.mnt-toolbar-end { margin-left: auto; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

.mnt .mnt-tool-btn, .mnt-header .mnt-tool-btn, .mnt-modal .mnt-tool-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 .7rem; font-size: .8rem; font-weight: 550; white-space: nowrap; }
.mnt .mnt-icon-btn { width: 32px; padding: 0; justify-content: center; }

.mnt-search { position: relative; flex: 0 1 280px; min-width: 0; }
.mnt-search i { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--dbd-muted); font-size: .8rem; pointer-events: none; }
.mnt-search input { width: 100%; height: 32px; padding: 0 .7rem 0 2rem; border: 1px solid var(--dbd-border-strong); border-radius: 8px; background: var(--dbd-surface); color: var(--dbd-fg); font-size: .82rem; }
.mnt-search input::placeholder { color: var(--dbd-muted); }
.mnt-search input:focus { outline: none; border-color: var(--accent-primary); box-shadow: var(--mnt-focus); }
.mnt-select { height: 32px; border: 1px solid var(--dbd-border-strong); border-radius: 8px; background: var(--dbd-surface); color: var(--dbd-fg); padding: 0 .6rem; font-size: .82rem; }
.mnt-select:focus { outline: none; border-color: var(--accent-primary); box-shadow: var(--mnt-focus); }

/* The status key, opened from the toolbar. */
.mnt-key { margin: 0; padding: .75rem 1rem; border-bottom: 1px solid var(--dbd-border); background: var(--dbd-subtle); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .5rem 1.25rem; }
.mnt-key[hidden] { display: none; }
.mnt-key > div { display: flex; align-items: baseline; gap: .5rem; font-size: .78rem; color: var(--text-secondary); }
.mnt-key dt, .mnt-key dd { margin: 0; font-weight: normal; }

/* The selection bar: only while devices are selected. */
.mnt-selbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .6rem 1rem; background: var(--mnt-ok-soft); border-bottom: 1px solid var(--dbd-border); flex-wrap: wrap; }
.mnt-selbar-count { font-size: .84rem; font-weight: 650; color: var(--mnt-ok-text); font-variant-numeric: tabular-nums; }
.mnt-selbar-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ── Tables ─────────────────────────────────────────────────── */
.mnt-table-scroll { overflow-x: auto; }
.mnt-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.mnt-table th { text-align: left; font-size: .6875rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; padding: .6rem .75rem; color: var(--text-secondary); border-bottom: 1px solid var(--dbd-border); white-space: nowrap; background: var(--dbd-subtle); }
.mnt-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--dbd-border); vertical-align: middle; color: var(--dbd-fg); }
.mnt-table tbody tr:last-child td { border-bottom: 0; }
.mnt-table tbody tr:hover td { background: var(--dbd-subtle); }
.mnt-table .mnt-check-cell { width: 40px; padding-right: 0; }
.mnt-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: #15803d; margin: 0; vertical-align: middle; }
.mnt-table tr.is-selected td { background: var(--mnt-ok-soft); }
.mnt-sub { display: block; font-size: .74rem; color: var(--text-secondary); margin-top: 1px; }
.mnt-sub.mnt-inline { display: inline; }
.mnt-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mnt-mono { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: .78rem; color: var(--text-secondary); white-space: nowrap; }
.mnt-menu-cell { width: 44px; text-align: right; }
.mnt-dev { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.mnt-dev-name { font-weight: 600; display: block; overflow-wrap: anywhere; }
.mnt-os { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; background: var(--dbd-subtle); display: inline-grid; place-items: center; color: var(--text-secondary); font-size: 1.05rem; }
.mnt-os.is-small { width: 28px; height: 28px; font-size: .9rem; border-radius: 8px; }
.mnt-os.is-android { color: var(--mnt-android); }
.mnt-os.is-apple { color: var(--mnt-apple); }
.mnt-os.is-windows { color: var(--mnt-windows); }
.mnt-person { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.mnt-avatar { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; display: inline-grid; place-items: center; font-size: .68rem; font-weight: 650; background: var(--mnt-info-soft); color: var(--mnt-info-text); }
.mnt-avatar.is-none { background: var(--dbd-subtle); color: var(--text-secondary); }
.mnt-nobody { color: var(--text-secondary); }
.mnt-kind { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; display: inline-grid; place-items: center; }
.mnt-kind.is-large { width: 40px; height: 40px; font-size: 1.05rem; border-radius: 10px; }
.mnt-kind.is-message { background: var(--mnt-info-soft); color: var(--mnt-info-text); }
.mnt-kind.is-command { background: var(--mnt-purple-soft); color: var(--mnt-purple-text); }
.mnt-row-link { all: unset; cursor: pointer; font-weight: 600; color: var(--dbd-fg); border-radius: 3px; overflow-wrap: anywhere; }
.mnt-row-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.mnt-row-link:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.mnt-table tr.mnt-row-clickable { cursor: pointer; }
.mnt-table tr.mnt-row-clickable:focus-within td { background: var(--dbd-subtle); }
.mnt-via { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.mnt-via i { color: var(--text-secondary); width: 14px; text-align: center; }
.mnt-reason { display: block; font-size: .74rem; color: var(--text-secondary); margin-top: 3px; max-width: 34ch; }

/* ── Delivery bar: every part is also in the words beside it ── */
.mnt-delivery { display: grid; gap: 5px; min-width: 160px; }
.mnt-delivery .mnt-sub { margin: 0; }
.mnt-bar { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--mnt-bar-track); min-width: 110px; }
.mnt-bar.is-large { height: 12px; }
.mnt-bar span { display: block; height: 100%; }
.mnt-bar .is-opened, .mnt-swatch.is-opened { background: var(--mnt-bar-opened); }
.mnt-bar .is-delivered, .mnt-swatch.is-delivered { background: var(--mnt-bar-delivered); }
.mnt-bar .is-transit, .mnt-swatch.is-transit { background: var(--mnt-bar-transit); }
.mnt-bar .is-waiting, .mnt-swatch.is-waiting { background: var(--mnt-bar-waiting); }
.mnt-bar .is-missed, .mnt-swatch.is-missed { background: var(--mnt-bar-missed); }
.mnt-bar .is-cancelled, .mnt-swatch.is-cancelled { background: var(--mnt-bar-cancelled); }

/* ── Pills: tone is emphasis only; the words carry the state ── */
.mnt-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; padding: 2px 9px 2px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.5; background: var(--dbd-subtle); color: var(--text-secondary); }
.mnt-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.mnt-pill.is-moving::before { animation: mnt-pulse 1.4s ease-in-out infinite; }
.mnt-pill i { font-size: .62rem; }
.mnt-pill.is-green { background: var(--mnt-ok-soft); color: var(--mnt-ok-text); }
.mnt-pill.is-blue { background: var(--mnt-info-soft); color: var(--mnt-info-text); }
.mnt-pill.is-purple { background: var(--mnt-purple-soft); color: var(--mnt-purple-text); }
.mnt-pill.is-amber { background: var(--mnt-warn-soft); color: var(--mnt-warn-text); }
.mnt-pill.is-red { background: var(--mnt-bad-soft); color: var(--mnt-bad-text); }

/* The shared row menu: the destructive item in danger text. */
.mnt .field-menu .field-menu-item.is-danger,
.mnt .field-menu .field-menu-item.is-danger i { color: var(--mnt-bad-text); }

/* ── One sent notification ──────────────────────────────────── */
.mnt-crumb { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--text-secondary); min-width: 0; }
.mnt-crumb-back { all: unset; display: inline-flex; align-items: center; gap: 6px; color: var(--accent-link); font-weight: 550; cursor: pointer; border-radius: 4px; }
.mnt-crumb-back:hover { text-decoration: underline; text-underline-offset: 2px; }
.mnt-crumb-back:focus-visible { box-shadow: var(--mnt-focus); }
.mnt-crumb-here { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnt-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; padding: 1rem 1.1rem; border-bottom: 1px solid var(--dbd-border); }
.mnt-detail-heading { display: flex; gap: .75rem; align-items: flex-start; min-width: 0; flex: 1 1 340px; }
.mnt-detail-title { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--dbd-fg); display: flex; align-items: center; gap: .4rem .6rem; flex-wrap: wrap; overflow-wrap: anywhere; text-wrap: balance; }
.mnt-detail-title:focus { outline: none; }
.mnt-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .4rem 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--text-secondary); }
.mnt-meta li { display: inline-flex; gap: 6px; align-items: center; }
.mnt-meta i { color: var(--text-secondary); }
.mnt-detail-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.mnt-detail-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.mnt-detail-grid > div { padding: 1rem 1.1rem; min-width: 0; }
.mnt-detail-grid > div + div { border-left: 1px solid var(--dbd-border); }
.mnt-eyebrow { margin: 0 0 .65rem; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 650; color: var(--text-secondary); }
.mnt-command { display: flex; gap: .65rem; align-items: flex-start; padding: .75rem; border: 1px solid var(--dbd-border); border-radius: 10px; background: var(--dbd-subtle); }
.mnt-preview { background: var(--mnt-lock-bg); border-radius: 18px; padding: 14px 12px; }
.mnt-preview-card { background: var(--mnt-glass); color: var(--mnt-glass-fg); border-radius: 14px; padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; }
.mnt-preview-icon { grid-row: span 3; width: 30px; height: 30px; border-radius: 7px; background: var(--mnt-app-icon); color: #ffffff; display: grid; place-items: center; font-size: .66rem; font-weight: 700; }
.mnt-preview-top { display: flex; justify-content: space-between; font-size: .72rem; }
.mnt-preview-title { font-weight: 650; font-size: .84rem; overflow-wrap: anywhere; }
.mnt-preview-body { font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.mnt-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem 1rem; margin-top: .85rem; }
.mnt .mnt-legend button { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 1px; padding: .4rem .5rem; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.mnt .mnt-legend button:hover:not(:disabled) { background: var(--dbd-subtle); border-color: var(--dbd-border); }
.mnt .mnt-legend button:focus-visible { box-shadow: var(--mnt-focus); }
.mnt .mnt-legend button:disabled { cursor: default; }
.mnt-legend-value { font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--dbd-fg); }
.mnt-legend-label { font-size: .76rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.mnt-swatch { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.mnt-timing { display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--dbd-border); font-size: .8rem; color: var(--text-secondary); }
.mnt-timing ul { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.mnt-timing .mnt-sub { margin: 0; }
.mnt-time-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--dbd-subtle); color: var(--dbd-fg); font-size: .76rem; }
.mnt-time-chip b { font-weight: 650; font-variant-numeric: tabular-nums; }
.mnt-note { display: flex; gap: .5rem; align-items: flex-start; margin: 0; padding: .65rem 1rem; border-top: 1px solid var(--dbd-border); font-size: .78rem; color: var(--text-secondary); }
.mnt-note i { margin-top: 3px; }

.mnt-loading { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }

@media (max-width: 1100px) {
    .mnt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mnt-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .mnt-detail-grid > div + div { border-left: 0; border-top: 1px solid var(--dbd-border); }
}

@media (max-width: 640px) {
    .mnt-stats { grid-template-columns: minmax(0, 1fr); }
    .mnt-search { flex: 1 1 100%; }
    .mnt-toolbar-end { margin-left: 0; }
    .mnt-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mnt-live-text { display: none; }
}

/* ── Send notification dialog ───────────────────────────────── */
.mnt-send { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1.25rem; align-items: start; }
.mnt-send-form { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.mnt-send-side { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: .9rem; border-radius: 12px; background: var(--dbd-subtle); border: 1px solid var(--dbd-border); position: sticky; top: 0; min-width: 0; }
.mnt-send-side-title { align-self: flex-start; margin: 0; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); }
.mnt-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; margin: 0; border: 0; padding: 0; }
.mnt-label { display: block; margin: 0; padding: 0; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); }
.mnt-help { margin: 0; font-size: .76rem; color: var(--text-secondary); }
.mnt-error { margin: 0; font-size: .78rem; color: var(--mnt-bad-text); }
.mnt-modal .form-control, .mnt-modal .form-select { font-size: .85rem; border-color: var(--dbd-border-strong); background-color: var(--dbd-surface); color: var(--dbd-fg); }
.mnt-modal .form-control:focus, .mnt-modal .form-select:focus { border-color: var(--accent-primary); box-shadow: var(--mnt-focus); }
.mnt-modal .form-control[aria-invalid="true"] { border-color: var(--accent-danger-fill); }
.mnt-modal .form-control::placeholder { color: var(--dbd-muted); }
.mnt-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.mnt-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.mnt-counter { align-self: flex-end; font-size: .72rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.mnt-to { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .45rem .5rem; border: 1px solid var(--dbd-border-strong); border-radius: 8px; background: var(--dbd-surface); min-height: 40px; }
.mnt-to[aria-invalid="true"] { border-color: var(--accent-danger-fill); }
.mnt-to-empty { font-size: .82rem; color: var(--text-secondary); padding: 0 .25rem; }
.mnt-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; background: var(--dbd-subtle); border: 1px solid var(--dbd-border); border-radius: 999px; padding: 1px 3px 1px 9px; color: var(--dbd-fg); max-width: 100%; }
.mnt-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnt-chip-kind { color: var(--text-secondary); font-weight: 500; }
.mnt-chip button { all: unset; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); flex: 0 0 auto; }
.mnt-chip button:hover { background: var(--dbd-border); color: var(--dbd-fg); }
.mnt-chip button:focus-visible { box-shadow: var(--mnt-focus); }
.mnt-to-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.mnt-shelf { background: var(--dbd-subtle); border-radius: 8px; padding: .65rem .8rem; display: flex; flex-direction: column; gap: .55rem; }
.mnt-checkbox { display: flex; gap: .55rem; align-items: flex-start; font-size: .84rem; margin: 0; cursor: pointer; }
.mnt-checkbox input { margin: .2rem 0 0; accent-color: var(--accent-primary); width: 16px; height: 16px; flex: 0 0 auto; }
.mnt-checkbox small { display: block; color: var(--text-secondary); font-size: .75rem; }

.mnt-commands { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 0; border: 0; }
.mnt-command { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--dbd-border); border-radius: 8px; background: var(--dbd-surface); cursor: pointer; margin: 0; }
.mnt-command:has(input:checked) { border-color: var(--accent-primary); background: var(--mnt-info-soft); }
.mnt-command input { margin: .2rem 0 0; accent-color: var(--accent-primary); width: 16px; height: 16px; flex: 0 0 auto; }
.mnt-command-title { display: block; font-weight: 600; font-size: .85rem; }
.mnt-command-detail { display: block; font-size: .76rem; color: var(--text-secondary); }
.mnt-command-extra { margin: .1rem 0 0 1.9rem; }

.mnt-reach { margin: 0 auto 0 0; font-size: .8rem; color: var(--text-secondary); min-width: 0; flex: 1 1 260px; }
.mnt-reach b { color: var(--dbd-fg); }
.mnt-modal-footer { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; width: 100%; }

/* The phone preview: a picture of the device, hidden from assistive tech (it repeats the form). */
.mnt-phone { width: 220px; max-width: 100%; background: var(--mnt-phone-bezel); border-radius: 32px; padding: 7px; }
.mnt-phone-screen { border-radius: 26px; overflow: hidden; height: 300px; position: relative; display: flex; flex-direction: column; }
.mnt-phone-island { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 70px; height: 20px; border-radius: 12px; background: #000; }
.mnt-phone-lock { background: var(--mnt-lock-bg); color: var(--mnt-lock-fg); padding: 32px 10px 10px; gap: 6px; }
.mnt-phone-time { font-size: 2.4rem; font-weight: 300; text-align: center; line-height: 1; }
.mnt-phone-date { text-align: center; font-size: .72rem; opacity: .85; margin-bottom: 10px; }
.mnt-notif { background: var(--mnt-glass); color: var(--mnt-glass-fg); border-radius: 14px; padding: 9px 10px; font-size: .72rem; display: flex; gap: 8px; }
.mnt-notif.is-android { border-radius: 10px; }
.mnt-notif-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--mnt-app-icon); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .55rem; flex: 0 0 auto; }
.mnt-notif-meta { display: flex; justify-content: space-between; gap: 6px; font-size: .6rem; opacity: .75; text-transform: uppercase; }
.mnt-notif-title { font-weight: 700; font-size: .74rem; overflow-wrap: anywhere; }
.mnt-notif-body { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mnt-phone-app { background: var(--bg-primary); color: var(--dbd-fg); }
.mnt-phone-bar { height: 62px; padding: 30px 12px 6px; display: flex; align-items: center; background: var(--dbd-surface); border-bottom: 1px solid var(--dbd-border); font-weight: 600; font-size: .8rem; }
.mnt-phone-banner { margin: 8px; border-radius: 12px; border: 1px solid var(--dbd-border); background: var(--dbd-surface); box-shadow: var(--shadow-md); padding: 9px; display: flex; gap: 8px; font-size: .72rem; }
.mnt-phone-skeleton { padding: 8px 12px; display: flex; flex-direction: column; gap: 7px; }
.mnt-phone-skeleton span { display: block; height: 22px; border-radius: 7px; background: var(--dbd-subtle); }

@media (max-width: 1100px) {
    .mnt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mnt-send { grid-template-columns: minmax(0, 1fr); }
    .mnt-send-side { position: static; }
}

@media (max-width: 640px) {
    .mnt-stats, .mnt-grid-3, .mnt-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .mnt-section-head, .mnt-section-body, .mnt-toolbar { padding-left: .9rem; padding-right: .9rem; }
    .mnt-search { max-width: none; }
    .mnt-table thead { display: none; }
    .mnt-table, .mnt-table tbody, .mnt-table tr, .mnt-table td { display: block; width: 100%; }
    .mnt-table tr { position: relative; padding: .5rem 0; border-bottom: 1px solid var(--dbd-border); }
    .mnt-table tr:last-child { border-bottom: 0; }
    .mnt-table td { border: 0; padding: .2rem .75rem; }
    .mnt-table td[data-label]::before { content: attr(data-label); display: block; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); }
    .mnt-table td.mnt-check-cell { position: absolute; top: .55rem; left: .25rem; width: auto; padding: 0; }
    .mnt-table tr:has(td.mnt-check-cell) td:not(.mnt-check-cell) { padding-left: 2.25rem; }
    .mnt-table td.mnt-menu-cell { position: absolute; top: .4rem; right: .25rem; width: auto; padding: 0; }
    /* The checkbox sits where the device cell's caption would be; the device's name needs no caption. */
    .mnt-table td.mnt-check-cell + td::before { content: none; }
    .mnt-table td.mnt-check-cell { top: .75rem; left: .75rem; }
    .mnt-table td:first-child, .mnt-table td.mnt-check-cell + td { padding-right: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mnt *, .mnt-modal * { transition: none !important; }
}

/* The answers a question offers, as the phone shows them under the message. */
.mnt-notif-answers { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.mnt-notif-answers span { padding: 3px 10px; border-radius: 999px; font-size: .68rem; font-weight: 600; background: var(--mnt-glass); border: 1px solid rgba(0, 0, 0, .12); }

/* ── Answers to a question (Read and acknowledge, Quick reply) ── */
.mnt-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.mnt-answers li { display: grid; grid-template-columns: minmax(90px, 200px) minmax(0, 1fr) auto; gap: .75rem; align-items: center; font-size: .84rem; }
.mnt-answer-label { font-weight: 600; overflow-wrap: anywhere; }
.mnt-answer-bar { height: 8px; border-radius: 99px; background: var(--mnt-bar-track); overflow: hidden; }
.mnt-answer-bar span { display: block; height: 100%; border-radius: 99px; background: var(--mnt-bar-delivered); }
.mnt-answers li.is-waiting .mnt-answer-label { font-weight: 500; color: var(--text-secondary); }
.mnt-answers li.is-waiting .mnt-answer-bar span { background: var(--mnt-bar-cancelled); }
.mnt-answer-count { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.mnt-answer-count small { font-weight: 500; color: var(--text-secondary); }

/* ── Replies to a request (Share location, Send diagnostics) ── */
.mnt-section-head > .mnt-tool-btn { margin-left: auto; }
.mnt-replies-map { height: 340px; margin: .75rem 1.1rem 0; border: 1px solid var(--dbd-border); border-radius: 8px; overflow: hidden; position: relative; }
.mnt-replies-map > * { height: 100%; }
.mnt-replies-waiting { display: flex; gap: .5rem; align-items: center; margin: 0; padding: .65rem 1.1rem; font-size: .8rem; color: var(--text-secondary); border-bottom: 1px solid var(--dbd-border); }
.mnt-reports { list-style: none; margin: 0; padding: 0; }
.mnt-report { padding: .85rem 1.1rem; border-bottom: 1px solid var(--dbd-border); display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.mnt-report:last-child { border-bottom: 0; }
.mnt-report-head { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.mnt-report-who { flex: 1 1 220px; min-width: 0; }
.mnt-report-reason { margin: 0; font-size: .84rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.mnt-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .45rem 1.25rem; margin: 0; }
.mnt-kv > div { min-width: 0; }
.mnt-kv dt { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); }
.mnt-kv dd { margin: 0; font-size: .84rem; color: var(--dbd-fg); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .mnt-replies-map { margin-left: .9rem; margin-right: .9rem; height: 260px; }
    .mnt-replies-waiting, .mnt-report { padding-left: .9rem; padding-right: .9rem; }
    .mnt-section-head > .mnt-tool-btn { margin-left: 0; }
}