/* Stage 5: mobile-first workflow refinements. Loaded after the core/admin styles. */

:where(.moderation-item, .row-card, .owner-section, .info-panel, .vehicle-card, .admin-work-card) {
    min-width: 0;
}

:where(code, .muted, .owner-media-meta, .admin-record-main, .admin-record-tools, .match-candidate-copy) {
    overflow-wrap: anywhere;
}

:where(.row-actions, .actions, .owner-workspace-nav, .owner-media-actions, .admin-actions) {
    align-items: center;
}

@media (max-width: 900px) {
    .vehicle-content-grid,
    .dashboard-grid,
    .moderation-grid,
    .owner-workspace-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .moderation-shell,
    .dashboard-hero,
    .registry-hero {
        overflow-x: clip;
    }

    .admin-record-main {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .admin-record-tools {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 760px) {
    html {
        scroll-padding-top: 76px;
    }

    .container,
    .narrow,
    .content-page,
    .owner-workspace {
        width: min(100% - 1.25rem, 100%) !important;
        max-width: none;
    }

    .content-page,
    .owner-workspace,
    .admin-users-shell {
        padding-top: 1.5rem;
        padding-bottom: 3rem;
    }

    .desktop-nav {
        display: none !important;
    }

    .mobile-menu {
        display: block !important;
    }

    .mobile-menu nav {
        position: fixed;
        top: 68px;
        right: .625rem;
        left: .625rem;
        width: auto;
        max-height: calc(100dvh - 82px);
        overflow-y: auto;
    }

    .mobile-menu a,
    .mobile-menu button {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .hero {
        padding-top: 3.5rem;
        padding-bottom: 4rem;
    }

    .hero h1 {
        max-width: 100%;
        font-size: clamp(2.65rem, 13vw, 4.5rem);
        line-height: .94;
    }

    .section {
        padding: 3rem 0;
    }

    .section-head,
    .owner-workspace-head,
    .admin-users-head {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .section-head > *,
    .owner-workspace-head > *,
    .admin-users-head > * {
        width: 100%;
    }

    .form-grid,
    .card-grid,
    .principle-grid,
    .admin-filter-grid,
    .admin-toggle-grid,
    .admin-health-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .stats-grid,
    .admin-stat-grid,
    .admin-users-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .stat:nth-child(odd) {
        border-left: 0;
    }

    .stat:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    input[type="file"] {
        min-height: 52px;
    }

    .actions,
    .row-actions,
    .owner-workspace-nav,
    .owner-media-actions,
    .admin-actions,
    .admin-filter-actions {
        width: 100%;
        gap: .55rem;
    }

    .actions > .button,
    .row-actions > .button,
    .row-actions > form,
    .row-actions > form > .button,
    .owner-workspace-nav > .button,
    .owner-media-actions > form,
    .owner-media-actions > form > .button,
    .admin-actions > .button,
    .admin-actions > form,
    .admin-actions > form > .button,
    .admin-filter-actions > .button {
        width: 100%;
    }

    .row-card {
        gap: .8rem;
        align-items: stretch !important;
    }

    .owner-section,
    .info-panel,
    .moderation-section,
    .moderation-item {
        padding: .95rem !important;
        border-radius: 14px !important;
    }

    .owner-media-item {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        align-items: start;
    }

    .owner-media-thumb img {
        width: 82px !important;
        height: 64px !important;
    }

    .photo-selection-item {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .photo-selection-actions,
    .photo-selection-remove,
    [data-crop-vehicle-photo] {
        grid-column: 1 / -1;
    }

    .photo-selection-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
    }

    .photo-selection-actions .button,
    .photo-selection-remove,
    [data-crop-vehicle-photo] {
        width: 100%;
    }

    .match-candidate-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .match-candidate-card {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        padding: .6rem !important;
    }

    .match-candidate-card img,
    .match-candidate-placeholder {
        width: 68px !important;
        height: 54px !important;
    }

    .admin-media-thumb,
    .admin-media-thumb img,
    .review-image {
        max-width: 100%;
        width: 100%;
    }

    .admin-plate-evidence {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .admin-table-wrap {
        margin-inline: -.3rem;
        border-radius: 12px;
        -webkit-overflow-scrolling: touch;
    }

    .admin-inline-form {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-inline-form select,
    .admin-inline-form .button {
        width: 100%;
        min-width: 0;
    }

    dialog,
    .sighting-crop-dialog,
    .media-crop-dialog {
        max-width: 100vw;
    }

    .sighting-crop-shell,
    .media-crop-shell {
        width: calc(100vw - .75rem) !important;
        max-height: calc(100dvh - .75rem) !important;
        margin: .375rem auto !important;
        border-radius: 14px !important;
    }

    .sighting-crop-buttons {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .5rem;
    }

    .sighting-crop-buttons .button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .stats-grid,
    .admin-stat-grid,
    .admin-users-stats,
    .admin-plate-evidence {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .stat + .stat {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .owner-media-item {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .owner-media-thumb,
    .owner-media-thumb img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3;
    }

    .owner-media-actions,
    .photo-selection-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}