/* =============================================================================
   My Trail Camera — Dashboard styles
   Single stylesheet for /login, /register, /dashboard/*.
   ============================================================================= */

:root {
    --mtc-bg:        #f6f7f8;
    --mtc-surface:   #ffffff;
    --mtc-border:    #e3e6e8;
    --mtc-text:      #1f2328;
    --mtc-muted:     #57606a;
    --mtc-primary:   #2d6a4f;
    --mtc-primary-d: #1b4332;
    --mtc-good:      #2e7d32;
    --mtc-warn:      #f57c00;
    --mtc-bad:       #d32f2f;
    --mtc-shadow:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --mtc-radius:    8px;
    --mtc-sidebar-w: 170px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--mtc-text);
    background: var(--mtc-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--mtc-primary); }
a:hover { color: var(--mtc-primary-d); }

code {
    background: #f1f3f4;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85em;
}

/* ── Brand ─────────────────────────────────────────────────────────────── */
.mtc-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--mtc-text);
    font-weight: 700;
    font-size: 16px;
}
.mtc-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--mtc-primary);
    color: #fff;
    border-radius: 6px;
    font-size: 18px;
}
.mtc-brand-center {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

/* ── Auth pages (login, register) ───────────────────────────────────────── */
.mtc-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.mtc-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--mtc-surface);
    border: 1px solid var(--mtc-border);
    border-radius: var(--mtc-radius);
    padding: 32px;
    box-shadow: var(--mtc-shadow);
}
.mtc-auth-card h1 { margin: 0 0 6px; font-size: 22px; }
.mtc-auth-sub     { margin: 0 0 20px; color: var(--mtc-muted); font-size: 14px; }
.mtc-auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mtc-auth-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--mtc-muted);
    font-weight: 500;
}
.mtc-auth-form input {
    padding: 10px 12px;
    border: 1px solid var(--mtc-border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--mtc-text);
    background: #fff;
    font-family: inherit;
}
.mtc-auth-form input:focus {
    outline: 2px solid var(--mtc-primary);
    outline-offset: -1px;
    border-color: var(--mtc-primary);
}
.mtc-hint { font-weight: 400; color: var(--mtc-muted); font-size: 12px; }
.mtc-hint[data-state="checking"]  { color: #6b7280; }
.mtc-hint[data-state="available"] { color: #15803d; }
.mtc-hint[data-state="taken"]     { color: #b91c1c; }

/* Password policy realtime checklist (register + reset). State driven by JS:
   data-state="" pending, "pass" green, "fail" red, "checking" muted. */
.mtc-pwd-checks {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--mtc-muted);
    font-weight: 400;
}
.mtc-pwd-checks li {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.mtc-pwd-checks li[data-state="pass"]     { color: #15803d; }
.mtc-pwd-checks li[data-state="fail"]     { color: #b91c1c; }
.mtc-pwd-checks li[data-state="checking"] { color: #6b7280; }
.mtc-pwd-check-icon {
    display: inline-block;
    width: 1em;
    text-align: center;
    font-weight: 700;
}
.mtc-auth-foot { margin: 24px 0 0; text-align: center; font-size: 14px; color: var(--mtc-muted); }

/* "Sign in with Google" button container. Google's own JS renders the
   button into .g_id_signin — we only style the surrounding layout (centred
   row, top spacing matching the rest of the auth form). The button itself
   MUST keep Google's branding intact (logo, colours, typography) per
   https://developers.google.com/identity/branding-guidelines — so do NOT
   restyle .g_id_signin internals. */
.mtc-google-signin {
    display: flex;
    justify-content: center;
    margin: 8px 0 16px;
    min-height: 40px; /* reserve space so the form doesn't reflow when GIS loads */
}
.mtc-facebook-signin {
    display: flex;
    justify-content: center;
    margin: 8px 0 16px;
}
.mtc-fb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 320px;
    padding: 10px 16px;
    background: #1877F2;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    transition: background 120ms ease;
}
.mtc-fb-btn:hover { background: #166FE0; color: #fff; text-decoration: none; }
.mtc-fb-btn svg  { display: block; flex-shrink: 0; }
.mtc-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 16px;
    color: var(--mtc-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.mtc-auth-divider::before,
.mtc-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* ── Bulk select on Theft Alerts (detections list) ─────────────────────────
   Per-row checkbox: small inline tick before the detection ID. Stays out
   of the way visually, doesn't compete with the existing badge layout. */
.mtcam-bulk-checkbox {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    cursor: pointer;
}
.mtcam-bulk-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #2d6a4f; /* matches the brand green */
}

/* Top toolbar with master "Select all" + per-page counter. Lives inside
   the page card above the first detection. */
.mtcam-bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    color: #374151;
}
.mtcam-bulk-selectall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.mtcam-bulk-selectall input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #2d6a4f;
}
.mtcam-bulk-counter {
    font-weight: 600;
    color: #2d6a4f;
}

/* Sticky action bar at the bottom — slides in when [data-active="1"]. The
   transform-only animation avoids reflow; transition runs on mobile too.
   Fixed position keeps it above the existing per-card "Delete" buttons so
   power users can sweep through many alerts without scrolling. */
.mtcam-bulk-actionbar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translate(-50%, 200%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #1f2937;
    color: #f9fafb;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    transition: transform 180ms ease-out;
    pointer-events: none; /* invisible-and-untargetable when offscreen */
}
.mtcam-bulk-actionbar[data-active="1"] {
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.mtcam-bulk-actionbar-label {
    font-size: 13px;
}
.mtcam-bulk-actionbar-label #mtcam-bulk-actionbar-count {
    font-weight: 700;
    margin-right: 4px;
}
.mtcam-bulk-actionbar .mtcam-bulk-actionbar-btn {
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.mtcam-bulk-actionbar .mtcam-bulk-actionbar-btn:hover {
    background: #dc2626;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.mtc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: #fff;
    color: var(--mtc-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    line-height: 1.2;
}
.mtc-btn:hover { background: #f4f5f6; }
.mtc-btn-primary { background: var(--mtc-primary); color: #fff; border-color: var(--mtc-primary); }
.mtc-btn-primary:hover { background: var(--mtc-primary-d); color: #fff; }
.mtc-btn-ghost { background: transparent; color: var(--mtc-muted); border: 1px solid var(--mtc-border); }
.mtc-btn-wide { width: 100%; }

/* ── Dashboard shell ──────────────────────────────────────────────────── */
.mtc-shell { display: flex; min-height: 100vh; }

.mtc-sidebar {
    width: var(--mtc-sidebar-w);
    background: var(--mtc-surface);
    border-right: 1px solid var(--mtc-border);
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    flex-shrink: 0;
}
.mtc-sidebar .mtc-brand { margin-bottom: 28px; padding: 0 6px; }
.mtc-nav { display: flex; flex-direction: column; gap: 2px; }
.mtc-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 6px;
    color: var(--mtc-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.mtc-nav-item:hover { background: #f1f3f4; color: var(--mtc-text); }
.mtc-nav-active { background: #e8efe9; color: var(--mtc-primary-d); }
.mtc-nav-icon { font-size: 16px; line-height: 1; width: 18px; text-align: center; }

.mtc-sidebar-foot {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--mtc-border);
}
.mtc-user-pill { padding: 8px 6px 12px; }
.mtc-user-email { font-size: 13px; color: var(--mtc-text); font-weight: 500; word-break: break-all; }
.mtc-user-plan {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    padding: 2px 8px;
    background: #f1f3f4;
    color: var(--mtc-muted);
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.mtc-logout-form { margin: 0; }
.mtc-logout-form button { width: 100%; }

/* main */
.mtc-main {
    flex: 1;
    padding: 32px 40px;
    min-width: 0;
}
.mtc-section-title { margin: 32px 0 12px; font-size: 16px; font-weight: 600; }
.mtc-link { color: var(--mtc-primary); text-decoration: none; font-weight: 500; }
.mtc-link:hover { text-decoration: underline; }

/* ── Stats grid ────────────────────────────────────────────────────────── */
.mtc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.mtc-stat {
    background: var(--mtc-surface);
    border: 1px solid var(--mtc-border);
    border-radius: var(--mtc-radius);
    padding: 16px;
}
.mtc-stat-label {
    font-size: 12px;
    color: var(--mtc-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.mtc-stat-value {
    font-size: 28px;
    font-weight: 700;
    margin-top: 4px;
    color: var(--mtc-text);
}
/* ── Tables ────────────────────────────────────────────────────────────── */
.mtc-table {
    width: 100%;
    background: var(--mtc-surface);
    border: 1px solid var(--mtc-border);
    border-radius: var(--mtc-radius);
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    overflow: hidden;
}
.mtc-table th {
    text-align: left;
    padding: 10px 12px;
    background: #fafbfc;
    border-bottom: 1px solid var(--mtc-border);
    color: var(--mtc-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mtc-table td { padding: 12px; border-bottom: 1px solid var(--mtc-border); }
.mtc-table tr:last-child td { border-bottom: none; }
.mtc-table tr:hover td { background: #fafbfc; }

/* ── Badges ────────────────────────────────────────────────────────────── */
.mtc-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.mtc-badge-active { background: #e8f5e9; color: #2e7d32; }
.mtc-badge-stolen { background: #ffebee; color: #c62828; }
.mtc-badge-tested { background: #e3f2fd; color: #1565c0; }
.mtc-badge-home   { background: #f1f3f4; color: #57606a; }

/* ── Flash messages — used by app/auth/{login,register,reset}.php,
       app/contact.php, app/account.php. .mtc-flash-warning is referenced
       in account.php but currently has no rule of its own — falls back to
       .mtc-flash defaults. ───────────────────────────────────────────── */
.mtc-flash {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 14px;
    border: 1px solid transparent;
}
.mtc-flash-error   { background: #ffebee; color: #c62828; border-color: #ffcdd2; }
.mtc-flash-warning { background: #fff8e1; color: #f57f17; border-color: #ffe082; }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mtc-shell { flex-direction: column; }
    .mtc-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--mtc-border);
        padding: 16px;
    }
    .mtc-main { padding: 20px 16px; }
    .mtc-nav { flex-direction: row; flex-wrap: wrap; }
    .mtc-nav-item { flex: 1; min-width: 100px; }
    .mtc-sidebar-foot { padding-top: 12px; }
    .mtc-table { font-size: 13px; }
}

/* ── Camera table → cards on phones ──────────────────────────────────────
   The dashboard fotopasca table (.mtcam-camera-table, rendered by
   app/_views/camera-table.php) is an 8-column wp-list-table with no native
   responsive handling — base styles live in admin-bridge.css with zero
   @media rules — so on ~390px screens the columns collapse and cell text
   wraps one character per line (D-O-M-A, dates stacked vertically). Below
   600px each main row (tr.mtcam-clickable) becomes a stacked card: the first
   cell is the card header (ID + power + owner badge, no label) and the rest
   show their column name above the value via the data-label attribute set in
   the view. Label-above-value (block, not flex) is used on purpose so varied
   inner markup — the <br> + zone badge in Lokalita, multiple security icons,
   the inline action <form>s — never gets torn apart by flex item splitting.
   Detail rows (tr.mtcam-details-row) keep their existing JS toggle (inline
   display:none ↔ table-row, see mtc-admin.js) and just render full-width in
   the card stack; only their padding is adjusted here. Selectors are scoped
   to .mtcam-camera-table and carry higher specificity than admin-bridge.css's
   .widefat rules, so the earlier load order of mtc-app.css doesn't matter.
   The trash table (also .widefat, but without .mtcam-camera-table) is left
   untouched. */
@media (max-width: 600px) {
    .mtcam-camera-table,
    .mtcam-camera-table tbody {
        display: block;
        width: 100%;
    }
    .mtcam-camera-table thead {
        display: none;
    }
    .mtcam-camera-table tr.mtcam-clickable {
        display: block;
        margin: 0 0 12px;
        padding: 10px 12px;
        border: 1px solid #c3c4c7;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    .mtcam-camera-table tr.mtcam-clickable > td {
        display: block;
        padding: 6px 0;
        border: none;
        border-bottom: 1px solid #f0f0f1;
        text-align: left;
        white-space: normal;
        word-break: normal;
    }
    .mtcam-camera-table tr.mtcam-clickable > td:last-child {
        border-bottom: none;
    }
    .mtcam-camera-table tr.mtcam-clickable > td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #8b8f94;
    }
    /* First cell = card header: ID badge + power + owner, no data-label. */
    .mtcam-camera-table tr.mtcam-clickable > td:first-child {
        padding-bottom: 8px;
        font-size: 15px;
    }
    /* Last cell = actions: buttons flow in a wrapping row, full card width. */
    .mtcam-camera-table tr.mtcam-clickable > td:last-child {
        padding-top: 8px;
    }
    .mtcam-camera-table tr.mtcam-details-row > td {
        padding: 8px 0 0;
    }
}

/* IMEI multi-provider row in ROOT tab — one horizontal line per partner
   API so 5 providers don't take 30+ vertical rows. Inputs share the row
   width via flex; on narrow screens the row collapses to stacked. */
.mtcam-imei-provider-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}
.mtcam-imei-provider-row > input[type="text"],
.mtcam-imei-provider-row > input[type="url"],
.mtcam-imei-provider-row > input[type="password"],
.mtcam-imei-provider-row > input[type="email"] {
    padding: 4px 6px;
    height: 30px;
    font-size: 13px;
}
.mtcam-imei-provider-row .mtcam-imei-col-label { flex: 0 0 130px; }
.mtcam-imei-provider-row .mtcam-imei-col-url   { flex: 1 1 280px; }
.mtcam-imei-provider-row .mtcam-imei-col-key   { flex: 1 1 160px; }
.mtcam-imei-provider-row .mtcam-imei-col-email { flex: 1 1 200px; }
.mtcam-imei-provider-row .mtcam-imei-remove {
    flex: 0 0 30px;
    height: 30px;
    line-height: 1;
    padding: 0;
    color: #d32f2f;
    font-weight: 700;
}

/* Hidden form trigger — the visible button uses form="..." attribute to
   submit a separately-rendered form, so the form itself never takes layout
   space. Used in ROOT IMAP "Run poller now". */
.mtcam-hidden-form {
    display: none;
}

/* ROOT settings tab: SMTP and IMAP cards live side-by-side because they
   point at the same hello@ mailbox at Websupport. Higher specificity via
   #tab-root scoping so .mtcam-white-box-clean's own margin doesn't matter
   and other tab grids don't accidentally inherit. Stack only on real
   tablet/phone widths. */
#tab-root .mtcam-root-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
#tab-root .mtcam-root-2col > .mtcam-white-box-clean {
    margin: 0;
}
@media (max-width: 768px) {
    #tab-root .mtcam-root-2col { grid-template-columns: 1fr; }
}

/* IMEI field — required marker + security hint, used on the Add / Edit
   trail-camera forms when the picked profile has a SIM (4G models). */
.mtcam-required-marker {
    color: #d32f2f;
    font-weight: 700;
    margin-left: 2px;
}
.mtcam-imei-hint {
    display: block;
    margin-top: 6px;
    color: #475569;
    font-size: 12px;
    line-height: 1.4;
}


/* GPS coordinate picker — Leaflet map paired with the lat/lon inputs on
   the camera add/edit forms. Width inherits from the parent edit-section
   column; height fixed so the map renders deterministically before
   Leaflet attaches its own sizing. */
.mtcam-gps-picker-wrap {
    margin-top: 8px;
}
.mtcam-gps-picker-map {
    height: 260px;
    margin-top: 8px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #f0f2f5;
}
.mtcam-gps-pick-btn {
    font-size: 13px;
}
.mtcam-gps-pick-help {
    display: inline-block;
    margin-left: 8px;
    color: #6c757d;
    font-size: 12px;
}


/* ── Demo session banner ─────────────────────────────────────────────────── */
/* Sticky strip above the dashboard content. Surfaces the 5-minute timeout
   countdown and a CTA to convert the demo session into a real account. Only
   rendered server-side when the current user has users.is_demo=1; styling
   here lights up unconditionally because the markup itself is gated. */
.mtc-demo-banner {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 18px;
    background: linear-gradient( 90deg, #fef3c7 0%, #fde68a 100% );
    border-bottom: 1px solid #d97706;
    color: #78350f;
    font-size: 14px;
    font-weight: 500;
}
.mtc-demo-banner__icon { font-size: 18px; }
.mtc-demo-banner__label { flex: 1 1 auto; }
.mtc-demo-banner__countdown {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: #78350f;
    color: #fffbeb;
    padding: 2px 8px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.mtc-demo-banner__cta-form { display: inline; margin: 0; padding: 0; }
.mtc-demo-banner__cta {
    background: #b45309;
    color: #fffbeb;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}
.mtc-demo-banner__cta:hover { background: #92400e; }

/* Demo → free conversion card. Renders right under the sticky banner on
   every dashboard view while is_demo=1, so the visitor can save what
   they've populated without losing the dashboard context. Disappears the
   moment they convert (is_demo=0 in _layout.php). */
.mtc-demo-save-card {
    margin: 18px auto;
    padding: 20px 24px;
    max-width: 720px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #d97706;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.08);
}
.mtc-demo-save-card__head { margin-bottom: 14px; }
.mtc-demo-save-card__h {
    margin: 0 0 6px;
    font-size: 1.1rem;
    color: #78350f;
}
.mtc-demo-save-card__sub {
    margin: 0;
    font-size: 0.9rem;
    color: #92400e;
    line-height: 1.5;
}
.mtc-demo-save-card__form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px 10px;
    align-items: start;
}
.mtc-demo-save-card__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.mtc-demo-save-card__lbl {
    font-size: 0.78rem;
    font-weight: 600;
    color: #78350f;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.mtc-demo-save-card__field input {
    padding: 8px 10px;
    border: 1px solid #d97706;
    border-radius: 6px;
    background: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    color: #1a1a1a;
}
.mtc-demo-save-card__field input:focus {
    outline: 2px solid #d97706;
    outline-offset: 1px;
}
.mtc-demo-save-card__hint {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.75rem;
    color: #92400e;
}
.mtc-demo-save-card__btn {
    padding: 9px 18px;
    background: #d97706;
    color: #fffbeb;
    border: 0;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    /* Aligns with the input bottom edge — label height (≈ 0.78rem * 1.4)
       plus the field's flex gap (4px) accounts for the offset. align-self
       keeps it from stretching to row height. */
    align-self: end;
}
.mtc-demo-save-card__btn:hover { background: #b45309; }
.mtc-demo-save-card__legal {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.75rem;
    color: #92400e;
}
.mtc-demo-save-card__legal a { color: #78350f; text-decoration: underline; }

@media (max-width: 600px) {
    .mtc-demo-save-card { margin: 14px 12px; padding: 16px 18px; }
    .mtc-demo-save-card__form { grid-template-columns: 1fr; }
    .mtc-demo-save-card__btn { width: 100%; }
}

/* =============================================================================
   2026-05-11 16:00 — Achievements / Odznaky grid (Settings → Profile tab).
   No inline styles in PHP; tier colour comes from .tier-1/2/3 modifiers.
   ============================================================================= */
.mtcam-badges-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 14px;
    color: var(--mtc-muted);
    font-size: 0.95rem;
}
.mtcam-badges-summary__label {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--mtc-text);
}
/* Native <progress> — styled via pseudo-elements so no inline width in PHP. */
.mtcam-badges-progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: 1 1 auto;
    min-width: 80px;
    height: 8px;
    border: none;
    border-radius: 999px;
    background: var(--mtc-border);   /* track — Firefox + older fallback */
    overflow: hidden;
}
.mtcam-badges-progress::-webkit-progress-bar {
    background: var(--mtc-border);
    border-radius: 999px;
}
.mtcam-badges-progress::-webkit-progress-value {
    background: #d4a017;             /* gold — matches earned-tier stars */
    border-radius: 999px;
}
.mtcam-badges-progress::-moz-progress-bar {
    background: #d4a017;
    border-radius: 999px;
}
/* Category sub-headings inside the badges grid (section = setup/scale/…). */
.mtcam-badges-sections {
    display: block;
}
.mtcam-badges-section {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 22px 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mtc-muted);
}
.mtcam-badges-sections > .mtcam-badges-section:first-child {
    margin-top: 4px;
}
.mtcam-badges-section__count {
    flex: 0 0 auto;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.mtcam-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin: 0;
}
.mtcam-badge-award {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 10px 12px;
    background: #ffffff;
    border: 1px solid var(--mtc-border);
    border-radius: var(--mtc-radius);
    box-shadow: var(--mtc-shadow);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.mtcam-badge-award:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
}
.mtcam-badge-award.is-locked {
    opacity: 0.38;
    filter: grayscale(1);
    background: transparent;
    border-style: dashed;
    border-color: var(--mtc-border);
    box-shadow: none;
}
.mtcam-badge-award.is-locked:hover {
    transform: none;
    box-shadow: none;
}
.mtcam-badge-award__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    font-size: 2.05rem;          /* glyph size inside the puck */
    line-height: 1;
    margin-bottom: 10px;
}
/* Earned badges get an "enamel pin" puck behind the emoji glyph: warm cream
   enamel, top gloss highlight, light inner rim + soft drop shadow. Reads as a
   physical pin and also evens out per-OS emoji rendering. */
.mtcam-badge-award:not(.is-locked) .mtcam-badge-award__icon {
    border-radius: 50%;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 46%),
        linear-gradient(150deg, #fdf6e4, #f1e6c6);
    border: 1px solid rgba(212, 160, 23, 0.45);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.75),
        inset 0 -2px 4px rgba(0, 0, 0, 0.06),
        0 2px 5px rgba(0, 0, 0, 0.13);
}
/* Tier rim tint for earned tiered badges — bronze / silver / gold. */
.mtcam-badge-award.tier-1 .mtcam-badge-award__icon { border-color: rgba(176, 124, 60, 0.55); }
.mtcam-badge-award.tier-2 .mtcam-badge-award__icon { border-color: rgba(150, 150, 158, 0.6); }
.mtcam-badge-award.tier-3 .mtcam-badge-award__icon { border-color: rgba(212, 160, 23, 0.75); }
/* Locked: no puck, just the faded lock glyph. */
.mtcam-badge-award.is-locked .mtcam-badge-award__icon {
    background: none;
    border: none;
    box-shadow: none;
    font-size: 1.9rem;
}
.mtcam-badge-award__name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--mtc-text);
    margin-bottom: 4px;
}
.mtcam-badge-award__desc {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--mtc-muted);
    margin-bottom: 6px;
}
.mtcam-badge-award__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
}
/* 2026-05-11 17:00 — tier indicator: 3 stars row. Gold = earned tier, grey = not yet. */
.mtcam-badge-award__stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
}
.mtcam-badge-award__star {
    font-size: 0.95rem;
    color: #d4d4d8;          /* unearned tier — light grey */
    line-height: 1;
}
.mtcam-badge-award__star.is-on {
    color: #d4a017;          /* earned tier — gold */
}
.mtcam-badge-award.tier-1 { border-color: #d4a01733; }
.mtcam-badge-award.tier-2 { border-color: #d4a01766; }
.mtcam-badge-award.tier-3 { border-color: #d4a01799; }
/* 2026-05-11 18:45 — earned date in small muted text under the meta row.
   Kept deliberately faint/tiny so it doesn't compete with the badge name. */
.mtcam-badge-award__date {
    font-size: 0.62rem;
    color: var(--mtc-muted);
    opacity: 0.7;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}
.mtcam-badge-award__pro {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: #fff7e6;
    color: #b45309;
    border: 1px solid #f5d29a;
}
@media (max-width: 480px) {
    .mtcam-badges-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
    .mtcam-badge-award { padding: 12px 8px 10px; }
    .mtcam-badge-award__icon { width: 54px; height: 54px; font-size: 1.8rem; }
    .mtcam-badge-award.is-locked .mtcam-badge-award__icon { font-size: 1.65rem; }
}

/* 2026-05-12 — celebratory motion for a freshly-unlocked badge. The `.is-new`
   class is stamped server-side while the badge is unacknowledged (seen_at IS
   NULL); it clears as soon as the user opens Settings → Badges or dismisses the
   dashboard banner, so the loop self-stops — no timer. Everything below is
   gated behind prefers-reduced-motion. No JS. */
@keyframes mtcam-badge-pop {
    from { transform: scale(0.92); opacity: 0.45; }
    to   { transform: scale(1);    opacity: 1; }
}
@keyframes mtcam-badge-glow {
    0%, 100% { box-shadow: var(--mtc-shadow); }
    50%      { box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.32), 0 3px 12px rgba(212, 160, 23, 0.30); }
}
@keyframes mtcam-badge-glint {
    from { transform: translateX(-150%) rotate(8deg); }
    to   { transform: translateX(170%)  rotate(8deg); }
}
@keyframes mtcam-banner-in {
    from { transform: translateY(-8px) scale(0.985); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
@keyframes mtcam-trophy-pulse {
    0%, 100% { transform: scale(1) rotate(0); }
    45%      { transform: scale(1.18) rotate(-7deg); }
}
@media (prefers-reduced-motion: no-preference) {
    .mtcam-badge-award.is-new {
        animation:
            mtcam-badge-pop 420ms cubic-bezier(0.34, 1.4, 0.64, 1) 1,
            mtcam-badge-glow 2.4s ease-in-out 480ms infinite;
    }
    .mtcam-badge-award.is-new .mtcam-badge-award__icon {
        position: relative;
        overflow: hidden;
        z-index: 0;
    }
    .mtcam-badge-award.is-new .mtcam-badge-award__icon::before {
        content: "";
        position: absolute;
        top: -40%;
        left: 0;
        width: 55%;
        height: 180%;
        background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.78) 50%, rgba(255, 255, 255, 0) 100%);
        pointer-events: none;
        animation: mtcam-badge-glint 950ms ease-out 320ms 1;
    }
    .mtcam-badge-banner {
        animation: mtcam-banner-in 380ms ease-out 1;
    }
    .mtcam-badge-banner__emoji {
        transform-origin: center bottom;
        animation: mtcam-trophy-pulse 1.5s ease-in-out 480ms 2;
    }
}

/* =============================================================================
   2026-05-11 16:42 — Dashboard "new badge" banner (only renders when the user
   has earned a badge they haven't acknowledged yet).
   ============================================================================= */
.mtcam-badge-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 0 16px;
    background: linear-gradient(135deg, #fff7e6 0%, #ffeccc 100%);
    border: 1px solid #f5d29a;
    border-left: 4px solid #d97706;
    border-radius: var(--mtc-radius);
    box-shadow: var(--mtc-shadow);
}
.mtcam-badge-banner__body {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}
.mtcam-badge-banner__emoji {
    font-size: 1.6rem;
    line-height: 1;
    flex: 0 0 auto;
}
.mtcam-badge-banner__text {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    color: #78350f;
    font-size: 0.92rem;
    line-height: 1.35;
}
.mtcam-badge-banner__text strong { color: #6b3a07; }
.mtcam-badge-banner__names { font-weight: 600; }
.mtcam-badge-banner__more { color: #92651a; }
.mtcam-badge-banner__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.mtcam-badge-banner__cta {
    background: #d97706 !important;
    border-color: #b45309 !important;
    color: #fff !important;
}
.mtcam-badge-banner__cta:hover { background: #b45309 !important; }
.mtcam-badge-banner__dismiss {
    background: transparent;
    border: 0;
    font-size: 1.4rem;
    line-height: 1;
    color: #78350f;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.mtcam-badge-banner__dismiss:hover { background: #ffeccc; }
@media (max-width: 600px) {
    .mtcam-badge-banner { flex-direction: column; align-items: stretch; gap: 10px; }
    .mtcam-badge-banner__actions { justify-content: space-between; }
    .mtcam-badge-banner__cta { flex: 1 1 auto; text-align: center; }
}

/* ── AirTag tracking — Root settings tab ─────────────────────────────────── */
.mtcam-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.mtcam-text-center { text-align: center; }
.mtcam-airtag-table { margin-top: 8px; }
.mtcam-airtag-table td code { font-size: 11px; color: var(--mtc-muted, #666); }
.mtcam-airtag-table td small { color: var(--mtc-muted, #666); }
.mtcam-airtag-del { color: #b33; min-width: 32px; padding: 0 8px; }
.mtcam-airtag-del:hover { background: #fee; color: #800; }

/* ── AirTag tracking — nested inside Security & GPS section ──────────────── */
.mtcam-airtag-row { margin-top: 10px; padding-top: 8px; border-top: 1px solid #eee; font-size: 12px; }
.mtcam-airtag-row strong { font-size: 12px; }
.mtcam-airtag-stolen-pill { background: #c0392b; color: #fff; padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 600; margin-left: 4px; }
.mtcam-airtag-meta { color: var(--mtc-muted, #666); margin: 4px 0 6px; font-size: 11px; }
.mtcam-airtag-meta code { font-size: 11px; }
.mtcam-airtag-empty { font-size: 11px; color: var(--mtc-muted, #888); margin: 4px 0 0; }
.mtcam-airtag-trail-details summary { cursor: pointer; color: var(--mtc-primary, #2a7); font-size: 12px; user-select: none; }
.mtcam-airtag-trail-details summary:hover { text-decoration: underline; }
.mtcam-airtag-trail-details[open] > .mtcam-airtag-map { margin-top: 8px; }
.mtcam-airtag-map { width: 100%; height: 220px; border-radius: 4px; background: #eef; }
.mtcam-airtag-log-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 11px; }
.mtcam-airtag-log-table th, .mtcam-airtag-log-table td { padding: 3px 6px; border-bottom: 1px solid #eee; text-align: left; }
.mtcam-airtag-log-table th { background: #f4f4f4; font-weight: 600; font-size: 10px; }