/*
 * mobile.css — Responsive overrides for viewports below the MudBlazor
 * Md breakpoint (960px). All values use var(--*) design tokens from
 * syndic-tokens.css; no hardcoded hex.
 *
 * Layout strategy:
 *   - Non-phone overrides (< 960px): padding reductions, font scaling,
 *     and grid-to-single-column stacking defined at the bottom of
 *     app.css are sufficient. This file adds the phone-specific
 *     (< 600px) component overrides + mobile-utility classes.
 *
 * Phone classes are used by components that render mobile-optimised
 * layouts at small viewports (hero cards, inset lists, bottom sheets,
 * camera viewfinder, status timelines). They're NOT wrapped in a
 * .phone container class (which belongs to the MAUI mobile shell);
 * these styles apply to the Blazor WASM layout at small viewports.
 */

/* ---------- Mobile heading hierarchy ----------------------------- */

.mobile-h1 {
    font-family: var(--f-serif);
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    color: inherit;
}
.mobile-h2 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 10px;
}

/* ---------- Hero amount card (co-owner dashboard) ---------------- */

.mobile-hero {
    background: linear-gradient(135deg, var(--syndic-blue-ink) 0%, var(--syndic-blue) 100%);
    color: white;
    padding: 18px;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
}
.mobile-hero .zlg {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 0 0, rgba(13,158,138,0.6) 0, transparent 1.5px),
        radial-gradient(circle at 8px 8px, rgba(13,158,138,0.6) 0, transparent 1.5px);
    background-size: 16px 16px;
    opacity: 0.2;
}

/* ---------- Mobile cards (larger radius, no border) -------------- */

@media (max-width: 599.98px) {
    .card {
        border-radius: 16px;
        border: none;
        box-shadow: var(--shadow-sm);
    }

    .kpi {
        padding: 14px 16px;
    }
    .kpi .value {
        font-size: 28px;
    }

    .pill {
        font-size: 12px;
        padding: 3px 8px;
    }

    .tbl thead th {
        font-size: 10px;
        padding: 8px 10px;
    }
    .tbl tbody td {
        padding: 9px 10px;
        font-size: 12px;
    }

    .flow-legend {
        gap: 10px;
        font-size: 10.5px;
    }

    .activity-item .what {
        font-size: 12px;
    }

    .unit-cell {
        font-size: 8.5px;
    }
}

/* ---------- Pills as small tags (used anywhere) ------------------ */

.pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
}
.pill-tag.ok    { background: var(--tint-teal); color: var(--syndic-teal-deep); }
.pill-tag.warn  { background: var(--tint-warn); color: var(--warn); }
.pill-tag.crit  { background: var(--tint-crit); color: var(--crit); }
.pill-tag.info  { background: var(--tint-blue); color: var(--syndic-blue); }

/* ---------- Row-based list items (replaces tables on mobile) ----- */

.mobile-row {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}
.mobile-row:last-child { border-bottom: none; }
.mobile-row-title { font-size: 15px; font-weight: 500; }
.mobile-row-sub   { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.mobile-row-side  { margin-left: auto; font-size: 14px; color: var(--ink-3); }

/* ---------- iOS-style inset grouped list ------------------------- */

.inset {
    background: var(--surface);
    border-radius: 14px;
    overflow: hidden;
}
.inset + .inset { margin-top: 12px; }

/* ---------- Chip toggle component --------------------------------- */

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid transparent;
}
.chip-on  { background: var(--syndic-blue-ink); color: white; }
.chip-off { background: var(--surface); color: var(--ink); border-color: var(--line); }

/* ---------- Camera viewfinder (incident report) ------------------- */

.viewfinder {
    background: linear-gradient(135deg, oklch(38% 0.05 230) 0%, oklch(28% 0.04 230) 50%, oklch(20% 0.03 230) 100%);
    position: relative;
    overflow: hidden;
    min-height: 200px;
    border-radius: var(--r-md);
}
.viewfinder .crosshair {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.6);
}
.viewfinder .corners::before,
.viewfinder .corners::after,
.viewfinder .corners > div::before,
.viewfinder .corners > div::after {
    content: "";
    position: absolute;
    width: 22px; height: 22px;
    border: 2px solid rgba(255,255,255,0.85);
}
.viewfinder .corners::before { top: 24px; left: 24px; border-right: none; border-bottom: none; border-top-left-radius: 4px; }
.viewfinder .corners::after { top: 24px; right: 24px; border-left: none; border-bottom: none; border-top-right-radius: 4px; }
.viewfinder .corners > div::before { bottom: 24px; left: 24px; border-right: none; border-top: none; border-bottom-left-radius: 4px; }
.viewfinder .corners > div::after { bottom: 24px; right: 24px; border-left: none; border-top: none; border-bottom-right-radius: 4px; }

/* ---------- Bottom sheet (vote modal) ----------------------------- */

.vote-sheet {
    background: var(--surface);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 18px 18px 30px;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.12);
}
.vote-sheet .grab {
    width: 36px; height: 4px;
    border-radius: 100px;
    background: var(--ink-4);
    margin: 0 auto 12px;
}

/* ---------- Chat bubbles (mobile-optimised) ----------------------- */

.bubble {
    max-width: 76%;
    padding: 10px 13px;
    border-radius: 19px;
    font-size: 15px;
    line-height: 1.35;
    margin-bottom: 4px;
}
.bubble.me { background: var(--syndic-blue); color: white; margin-left: auto; border-bottom-right-radius: 6px; }
.bubble.them { background: var(--bg-2); color: var(--ink); border-bottom-left-radius: 6px; }
.bubble-sys {
    background: var(--tint-blue);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--syndic-blue);
    margin: 8px 0;
    text-align: center;
}

/* ---------- Folder card (documents) ------------------------------- */

.folder-card {
    background: var(--surface);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---------- Status timeline (work orders) ------------------------- */

.timeline-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
}
.timeline-dot {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 12px;
    flex-shrink: 0;
    position: relative;
}
.timeline-dot.done { background: var(--syndic-teal); color: white; }
.timeline-dot.now { background: var(--syndic-blue); color: white; box-shadow: 0 0 0 4px rgba(26,86,170,0.15); }
.timeline-dot.next { background: var(--surface); color: var(--ink-3); border: 1.5px solid var(--line); }
.timeline-step:not(:last-child) .timeline-dot::after {
    content: "";
    position: absolute;
    top: 24px; left: 50%;
    transform: translateX(-50%);
    width: 1.5px; height: 28px;
    background: var(--line);
}
.timeline-step.done:not(:last-child) .timeline-dot::after { background: var(--syndic-teal); }

/* ---------- Brand mark (mobile variant) --------------------------- */

.mobile-brand {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--syndic-blue-ink);
    position: relative;
    display: inline-block;
}
.mobile-brand::before {
    content: "";
    position: absolute;
    width: 2.5px; height: 14px;
    background: var(--syndic-teal);
    left: 7px; top: 7px;
}
.mobile-brand::after {
    content: "";
    position: absolute;
    width: 2.5px; height: 10px;
    background: var(--syndic-teal);
    left: 13px; top: 11px;
    box-shadow: 6px 4px 0 var(--syndic-teal);
}