/**
 * Temetőink.hu — mobil / keskeny képernyő (≤900px)
 * Cél: érinthető gombok, olvasható szöveg, görgethető táblák, egymás alatti navigáció.
 */

@media (max-width: 900px) {
    :root {
        --temetoink-tap: 44px;
        --temetoink-pad: 12px;
    }

    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        overflow-x: hidden;
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }

    /* ——— Fejlécek, konténerek ——— */
    header {
        padding: 12px 0 !important;
    }

    header .container {
        padding-left: var(--temetoink-pad) !important;
        padding-right: var(--temetoink-pad) !important;
    }

    header h1 {
        font-size: 1.25rem !important;
        line-height: 1.3;
        word-break: break-word;
        margin-bottom: 6px !important;
    }

    header .subtitle {
        font-size: 0.85rem !important;
        line-height: 1.35;
    }

    .header-top {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center;
        gap: 10px !important;
        padding-left: var(--temetoink-pad) !important;
        padding-right: var(--temetoink-pad) !important;
    }

    .logo {
        min-width: 0 !important;
        font-size: 1.1rem !important;
    }

    .header-info,
    .header-user {
        text-align: center;
        font-size: 12px;
    }

    main {
        padding: 14px var(--temetoink-pad) !important;
        margin: 10px 0 !important;
        border-radius: 6px;
    }

    .container {
        max-width: 100% !important;
        padding-left: var(--temetoink-pad) !important;
        padding-right: var(--temetoink-pad) !important;
    }

    /* ——— Navigáció (index, admin_dashboard, stb.) ——— */
    body > header nav,
    header nav,
    main > header nav {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 10px !important;
        border-radius: 8px !important;
    }

    body > header nav a,
    header nav a,
    main > header nav a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: var(--temetoink-tap);
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        font-size: 1rem !important;
        padding: 12px 14px !important;
        box-sizing: border-box;
    }

    body > header nav a:last-child,
    header nav a:last-child,
    main > header nav a:last-child {
        border-bottom: none;
    }

    nav ul {
        flex-direction: column !important;
        padding: 0 var(--temetoink-pad) !important;
    }

    nav ul li,
    nav ul a {
        width: 100%;
    }

    nav a {
        min-height: var(--temetoink-tap);
        display: flex !important;
        align-items: center;
    }

    /* ——— Űrlapok (iOS ne zoomoljon be) ——— */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    button,
    input[type="submit"],
    input[type="button"] {
        min-height: var(--temetoink-tap);
        touch-action: manipulation;
    }

    /* ——— Admin: temető kártyák, eszközök ——— */
    .cemetery-item {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px !important;
    }

    .cemetery-info h4 {
        font-size: 1.15rem !important;
    }

    .cemetery-actions {
        width: 100% !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .cemetery-actions a,
    .cemetery-actions button {
        width: 100% !important;
        text-align: center !important;
        min-height: var(--temetoink-tap);
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .stat-card {
        padding: 18px 14px !important;
    }

    .stat-value {
        font-size: 2rem !important;
    }

    .stat-icon {
        font-size: 2.2rem !important;
    }

    .tools-grid {
        grid-template-columns: 1fr !important;
    }

    .tool-card {
        padding: 20px 14px !important;
        min-height: var(--temetoink-tap);
    }

    .dashboard-header h2 {
        font-size: 1.35rem !important;
    }

    /* ——— Szűrősávok (manage_graves, hasonló) ——— */
    .filters .filter-group,
    .filter-group {
        display: block !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
    }

    .filters form {
        display: block !important;
    }

    .filters select,
    .filters button,
    .filters .btn-filter,
    .filters .btn-reset {
        width: 100%;
        margin: 4px 0 !important;
        min-height: var(--temetoink-tap);
    }

    .top-menu {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0 var(--temetoink-pad);
    }

    .top-menu a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-right: 0 !important;
        min-height: var(--temetoink-tap);
        text-align: center;
    }

    /* ——— Táblázatok: szülő görget (széles tábla) ——— */
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        margin-bottom: 12px;
    }

    .table-scroll table {
        font-size: 13px;
        min-width: 100%;
    }

    main,
    main.container,
    body > .container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Régi térképszerkesztő: sidebar + vászon egymás alatt */
    @supports selector(:has(*)) {
        .container:has(.canvas-container) {
            grid-template-columns: 1fr !important;
            height: auto !important;
            min-height: 0 !important;
        }

        .container:has(.canvas-container) .sidebar {
            max-height: 42vh;
            overflow-y: auto;
            border-right: none;
            border-bottom: 2px solid #ddd;
        }

        .container:has(.canvas-container) .canvas-container {
            min-height: 45vh;
        }
    }

    table {
        font-size: 13px;
        min-width: 680px;
    }

    th,
    td {
        padding: 8px 6px !important;
    }

    /* ——— Kezdőlap: térkép, rács ——— */
    #map {
        height: min(48vh, 380px) !important;
        min-height: 240px;
    }

    .main-wrapper {
        grid-template-columns: 1fr !important;
    }

    .cemetery-grid {
        grid-template-columns: 1fr !important;
    }

    .sidebar {
        grid-template-columns: 1fr !important;
    }

    /* ——— Bejelentkezés ——— */
    .login-container {
        padding: 22px 16px !important;
        max-width: 100% !important;
    }

    /* ——— Modál / keskeny ablak (edit_sirhely stílusú) ——— */
    .modal {
        max-height: 92vh !important;
        margin: 0 auto;
    }

    /* ——— Sötét admin fejléc (térképszerkesztő, hasonló) ——— */
    .header > div[style*="display: flex"],
    .header > div[style*="display:flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .header a {
        min-height: var(--temetoink-tap);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }

    /* Űrlap gombsorok (felhasználó szerkesztés, stb.) */
    .actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .actions .btn,
    .actions a,
    .actions button {
        width: 100% !important;
        text-align: center;
        justify-content: center;
    }

    .checkbox-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
}