/* ============================================================
   responsive-fixes.css
   Fix di responsive a livello globale per ren-enasarco.
   Caricato da frame.php (post-login) e index.php (login).
   ============================================================ */

/* 1. Niente scroll orizzontale a livello pagina + sticky footer */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
html { height: 100%; }
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}
/* Il footer viene spinto in fondo alla viewport quando il contenuto è corto */
body > footer,
body > footer.footer {
    margin-top: auto;
}

/* 2. Immagini fluide ovunque (logo OSANext nel menu, nel footer, ecc.) */
img {
    max-width: 100%;
    height: auto;
}

/* Il menu.php e il footer di frame.php usano width:20vw sul logo.
   Su mobile 20vw = ~80px → impostiamo un floor leggibile. */
.app-sidemenu img,
.footer .footer-logo img,
footer .footer-logo img {
    min-width: 140px;
    max-width: 240px;
    width: auto !important;
    height: auto;
}

/* 3. Menu top (app-sidemenu) — i .col-md-2 stackano già sotto md (<768px),
      ma le dropdown e i bottoni vanno resi più compatti e cliccabili.
      L'override !important serve perché user_theme inietta un cap
      `.card { max-width: var(--app-container-max) }` che colpirebbe anche la testata. */
.card.app-sidemenu,
.app-sidemenu {
    max-width: 100% !important;
    padding: 8px 4px;
}
.app-sidemenu .container {
    max-width: 100% !important;
    padding-left: 8px;
    padding-right: 8px;
}
.app-sidemenu .dropdown-link {
    display: block;
    padding: 8px 6px;
    font-size: 0.95rem;
    white-space: normal;
}

/* Su schermi medio-piccoli compatta gli item per evitare wrap brutto */
@media (max-width: 991.98px) {
    .app-sidemenu .row {
        flex-wrap: wrap;
    }
    .app-sidemenu .col-md-2 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 2px 4px;
    }
    .app-sidemenu .dropdown-menu {
        max-width: 95vw;
        overflow-x: auto;
    }
}
@media (max-width: 575.98px) {
    .app-sidemenu .col-md-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* 4. Tabelle datagrid e tabelle normali: scroll orizzontale se troppo larghe.
      NB: NON usiamo overflow-x: auto su .card / .container perché spec CSS
      impone overflow-y: auto implicito, tagliando i dropdown della testata. */
table {
    max-width: 100%;
}
/* Scroll orizzontale SOLO su wrapper esplicitamente responsive di Bootstrap */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Le tabelle datagrid sono spesso annidate dentro form e wrapper non-bootstrap:
   le rendiamo blocco con scroll orizzontale autonomo. */
form > table,
div > table.datagrid,
div > table[id^="g_"] {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
/* Garantisce che la testata e le sue dropdown non vengano mai clippate */
.app-sidemenu,
.app-sidemenu .container,
.app-sidemenu .row,
.app-sidemenu .col-md-2,
.app-sidemenu .dropdown,
.app-sidemenu .custom-dropdown {
    overflow: visible !important;
}
.app-sidemenu .dropdown-menu {
    z-index: 1050;
}

/* 5. Form, input, select: mai più larghi del container */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    max-width: 100%;
    box-sizing: border-box;
}

/* L'attributo size=34 sugli input del login forza width esplicita su mobile.
   Sotto sm li facciamo full-width. */
@media (max-width: 575.98px) {
    input.input1,
    .submit,
    .reset {
        width: 100% !important;
        margin-bottom: 6px;
    }
}

/* 6. Skel.js layout — la pagina di login usa unità "6u" "4u" che hanno
      breakpoint a 1000px. Senza viewport non scattava: ora sì.
      Aggiungiamo solo padding di sicurezza per evitare contenuto incollato ai bordi. */
body.homepage section.wrapper {
    padding-left: 12px;
    padding-right: 12px;
}

/* 7. Footer in frame.php: usa column/column-2/column-3 custom non-bootstrap.
      Su mobile stackano in colonna. */
@media (max-width: 767.98px) {
    footer.footer {
        flex-direction: column;
        text-align: center;
    }
    footer.footer .column {
        width: 100% !important;
        margin: 4px 0;
    }
}

/* 8. Modali e popup datagrid: rendere width responsiva */
.modal-dialog {
    max-width: 95vw;
    margin: 10px auto;
}

/* 9. Iframe (videocall, frame.php interni) responsivi */
iframe {
    max-width: 100%;
}