/* ============================================================
   Mobile UX-forbedringer — touch-targets, scrollable tables,
   responsive filter-bars, full-screen modals.
   Loadet etter layout.css så cascade overstyrer.
   ============================================================ */

/* === Hamburger-toggle: skjul på desktop, vis under 1024px === */
[data-sidebar-toggle] { display: none; }
@media (max-width: 1024px) {
    [data-sidebar-toggle] { display: grid; }
}

/* === Touch-targets: WCAG 2.5.5 Target Size (Enhanced) — minimum 44x44 === */
@media (pointer: coarse), (max-width: 768px) {
    .header-action,
    .btn-sm,
    .admin-toggle,
    .admin-filter-search,
    .admin-filter-select,
    .public-header-nav a,
    .pagination a, .pagination button {
        min-height: 44px;
    }
    .btn-sm { padding: 0 var(--space-4); }
    .header-action { width: 44px; height: 44px; }
    /* Klikkbare ikoner i admin-rader */
    .admin-row .icon-btn,
    .admin-row .row-action {
        min-width: 44px; min-height: 44px;
    }
}

/* === Tabeller: horisontal scroll på små skjermer === */
@media (max-width: 768px) {
    .admin-table,
    .table-responsive {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-table table { min-width: 640px; }
}

/* === Filter-bar: wrap til kolonner på mobil === */
@media (max-width: 640px) {
    .admin-filter-bar,
    .filter-bar {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    .admin-filter-search,
    .filter-search {
        width: 100% !important;
        flex: 1 1 100%;
    }
    .admin-filter-group { flex-wrap: wrap; gap: var(--space-2); }
}

/* === Modals: full-screen på mobil === */
@media (max-width: 640px) {
    .modal,
    .modal-content {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    .modal-header { padding: var(--space-4); }
    .modal-body { padding: var(--space-4); }
    .modal-footer {
        padding: var(--space-4);
        position: sticky;
        bottom: 0;
        background: var(--bg-elevated);
        border-top: 1px solid var(--border-subtle);
        z-index: 5;
    }
}

/* === Public-header: stack vertikalt på mobil === */
@media (max-width: 640px) {
    .public-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
    }
    .public-header-nav {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    .public-header-nav a { padding: var(--space-2) var(--space-3); }
}

/* === Public-footer: stable mobil-layout === */
@media (max-width: 640px) {
    .public-footer-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .public-footer-status { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* === Page-hero: stack actions under tittel på mobil === */
@media (max-width: 640px) {
    .page-hero {
        flex-direction: column;
        align-items: stretch;
    }
    .page-hero-actions {
        flex-wrap: wrap;
        width: 100%;
    }
    .page-hero-actions .btn { flex: 1 1 auto; }
}

/* === Status-bar (90-dagers grid): tighten cells på mobil === */
@media (max-width: 640px) {
    .status-bar { gap: 1px; height: 24px; }
    .status-bar-cell { min-width: 2px; }
}

/* === Forms: full bredde input på mobil === */
@media (max-width: 640px) {
    .form-row {
        flex-direction: column;
        gap: var(--space-2);
    }
    .form-input, .form-select, .form-textarea {
        width: 100%;
        font-size: 16px; /* unngå iOS-zoom på focus */
    }
}

/* === Onboarding-wizard: kollapser progress + form-grids på mobil === */
@media (max-width: 768px) {
    .wizard-progress { padding: 0 var(--space-3); }
    .wizard-progress ol { gap: 4px !important; }
    .wizard-progress .wizard-label {
        font-size: 10px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .wizard-progress .wizard-num { width: 24px !important; height: 24px !important; }

    /* Wizard step-grids — kollapser inline 1fr 1fr / 1fr 1fr 1fr til én kolonne */
    section .form-row[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    /* 3-kolonners stat-grid på Done-siden */
    section [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    /* Step3 invite-form: stack felter */
    section form[style*="flex-end"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    /* Footer-nav: stack knapper */
    section footer[style*="space-between"] {
        flex-direction: column !important;
        gap: var(--space-3) !important;
    }
    section footer[style*="space-between"] > * { width: 100%; }
    section footer[style*="space-between"] .btn { width: 100%; justify-content: center; }
}

/* === Module-grid på Step2: bedre kort-bredde på liten skjerm === */
@media (max-width: 480px) {
    .module-grid { grid-template-columns: 1fr !important; }
    .module-card { min-height: auto !important; }
}

/* === Cookie-banner: stable mobil-layout === */
@media (max-width: 640px) {
    .cookie-banner {
        left: var(--space-2);
        right: var(--space-2);
        bottom: var(--space-2);
        padding: var(--space-3) var(--space-4);
        max-height: 80vh;
        overflow-y: auto;
    }
    .cookie-banner-content { gap: var(--space-3); }
    .cookie-banner-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: stretch;
    }
    .cookie-banner-actions .btn {
        flex: 1 1 auto;
        min-height: 44px;
    }
    /* Preferanse-panel rader */
    .cookie-pref-row {
        flex-direction: column;
        align-items: flex-start !important;
    }
}

/* === PrefsBar lang-select: ikke for smal === */
@media (max-width: 640px) {
    .prefs-lang-select {
        min-width: 80px;
        min-height: 44px;
    }
}

/* === Customer webhooks/jobs admin-table: rad-aksjoner stack på mobil === */
@media (max-width: 768px) {
    .admin-table td form { display: block !important; margin: 2px 0; }
    .admin-table td .btn-small { width: 100%; }
}

/* === Landing/ROI/Pricing hero-blocks: padding + font-scaling === */
@media (max-width: 640px) {
    .page-hero h1, section > header h1 {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
        line-height: 1.2;
    }
    .page-hero, section > header { padding-left: var(--space-3); padding-right: var(--space-3); }
}

/* === Kort-blokker (kategori-landing, partner-portal): stack på mobil === */
@media (max-width: 640px) {
    [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns:repeat(auto-fit,minmax(280px"],
    [style*="grid-template-columns:repeat(auto-fit,minmax(260px"] {
        grid-template-columns: 1fr !important;
    }
}

/* === Sticky bottom-nav på mobil for ofte brukte aksjoner (valgfri) === */
.mobile-action-bar {
    display: none;
}
@media (max-width: 640px) {
    .mobile-action-bar {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: var(--bg-elevated);
        border-top: 1px solid var(--border-subtle);
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
        z-index: 90;
        padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
    }
    .mobile-action-bar .btn { flex: 1; min-height: 44px; }
    /* Padding på app-content så innhold ikke blokkeres av action-bar */
    body:has(.mobile-action-bar) .app-content { padding-bottom: calc(var(--space-12) + 60px); }
}