/* ============================================================
   mobile.css — globala mobiloptimeringar
   Laddas efter Bootstrap + appens egna stilar för att kunna
   åsidosätta defaults när visningsbredden är liten.
   ============================================================ */

/* iOS: undvik auto-zoom när användaren tappar i ett input-fält.
   Bootstrap använder font-size:1rem (16px) men vissa formulärinputs
   ärver mindre — sätter 16px här för säkerhets skull. */
@media (max-width: 575.98px) {
    input.form-control,
    select.form-select,
    textarea.form-control {
        font-size: 16px;
    }
}

/* Säkerställ att alla tabeller blir scrollbara på små skärmar.
   Detta hjälper DataTables-tabeller, månadsmatriser etc. */
@media (max-width: 991.98px) {
    .table-responsive,
    .dataTables_wrapper {
        -webkit-overflow-scrolling: touch;
    }

    /* DataTables på mobil — minska padding så fler kolumner får plats. */
    .dataTables_wrapper table.dataTable th,
    .dataTables_wrapper table.dataTable td {
        padding: 6px 8px !important;
        font-size: 13px;
    }

    /* DataTables-toolbarens längdväljare och sökruta i staplad layout. */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        width: 100%;
        text-align: left !important;
        margin-bottom: 8px;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0 !important;
    }

    /* Mindre padding i admin-cards för smal skärm. */
    .data-card-body,
    .mu-card-body {
        padding: 14px !important;
    }
}

/* KPI-rutor / stat-pills — staplas på mobil i stället för att tryckas ihop. */
@media (max-width: 575.98px) {
    .mu-stats,
    .kpi-grid,
    .stat-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .mu-stat,
    .kpi-card,
    .stat-card {
        width: 100%;
    }
}

/* Plotly-diagram: tvinga full bredd och rimlig höjd på mobil. */
@media (max-width: 767.98px) {
    .plotly-graph-div,
    div[id^="chart"],
    div[id$="-chart"] {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 280px;
    }
    /* Gömm modebar-knapparna på mobil — de är för små för touch. */
    .modebar-container {
        display: none !important;
    }
}

/* Dropdowns i navbaren behöver mer luft på touch. */
@media (max-width: 991.98px) {
    .navbar .dropdown-menu .dropdown-item {
        padding: 10px 16px;
        font-size: 14.5px;
    }
}

/* Knappar i floatande "actions"-rader — staplas under varandra på mobil. */
@media (max-width: 575.98px) {
    .iv-actions,
    .ob-card-foot,
    .bk-actions,
    .form-actions {
        flex-direction: column;
        align-items: stretch !important;
    }
    .iv-actions > a,
    .iv-actions > button,
    .ob-card-foot > a,
    .ob-card-foot > button,
    .form-actions > a,
    .form-actions > button {
        width: 100%;
        text-align: center;
    }
}

/* Fastighets-/abonnemangsformulär — input-rutor får full bredd på mobil. */
@media (max-width: 575.98px) {
    .row > [class*="col-"] {
        margin-bottom: 8px;
    }
}

/* Modaler: lite mer marginal från skärmkanten på små telefoner. */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: .5rem;
    }
    .modal-content {
        border-radius: 12px;
    }
}

/* Förbättra läsbarhet av kortsidor / dashboards när Bootstraps container
   ger för lite padding. */
@media (max-width: 575.98px) {
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Fokusabel touch-target ≥ 44px (WCAG). */
@media (pointer: coarse) {
    .btn,
    .nav-link,
    .dropdown-item,
    a.bk-btn,
    button.bk-btn {
        min-height: 40px;
    }
}