/* ============================================================
   BIOQURA — MOBILE CSS
   Attivo sotto 900px — non tocca nulla del desktop
   ============================================================ */

/* Top bar e overlay — nascosti su desktop */
.bq-mob-topbar  { display: none; }
.bq-mob-overlay { display: none; }

@media (max-width: 899px) {

    /* --------------------------------------------------------
       RESET OVERFLOW
    -------------------------------------------------------- */
    html.bq-page,
    html.bq-page body {
        overflow: hidden !important;
    }

    /* --------------------------------------------------------
       SHELL
    -------------------------------------------------------- */
    .bq-fe-wrap {
        flex-direction: column;
        height: 100dvh;
        height: 100vh;
    }

    /* --------------------------------------------------------
       TOP BAR MOBILE
    -------------------------------------------------------- */
    .bq-mob-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 16px;
        background: var(--g-dk);
        flex-shrink: 0;
        z-index: 200;
        position: relative;
    }
    .bq-mob-topbar-logo {
        height: 30px;
        width: auto;
        display: block;
        filter: brightness(0) invert(1);
    }
    .bq-mob-hamburger {
        width: 40px;
        height: 40px;
        background: rgba(255,255,255,.12);
        border: none;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .15s;
        flex-shrink: 0;
    }
    .bq-mob-hamburger:hover,
    .bq-mob-hamburger:active {
        background: rgba(255,255,255,.22);
    }
    .bq-mob-hamburger svg {
        width: 20px;
        height: 20px;
        color: #fff;
    }

    /* --------------------------------------------------------
       OVERLAY
    -------------------------------------------------------- */
    .bq-mob-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 299;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .bq-mob-overlay.bq-mob-open {
        display: block;
    }

    /* --------------------------------------------------------
       SIDEBAR — drawer da sinistra
    -------------------------------------------------------- */
    .bq-fe-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 82vw;
        max-width: 300px;
        height: 100%;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        z-index: 300;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .bq-fe-sidebar.bq-mob-open {
        transform: translateX(0);
    }

    /* FIX COLORI SIDEBAR — forza bianco su tutti i testi */
    .bq-fe-sidebar,
    .bq-fe-nav-link,
    .bq-fe-nav-link:link,
    .bq-fe-nav-link:visited,
    .bq-fe-nav-link:hover,
    .bq-fe-nav-link:active,
    .bq-fe-nav-link.active,
    .bq-fe-nav-link span,
    .bq-fe-sidebar-tagline,
    .bq-fe-sidebar-footer,
    .bq-fe-medico-name,
    .bq-fe-medico-email {
        color: #fff !important;
    }

    /* Mostra le label testo nel drawer */
    .bq-fe-nav-link span {
        display: inline !important;
    }
    .bq-fe-nav-link {
        justify-content: flex-start !important;
        padding: 11px 14px !important;
    }
    .bq-fe-medico-info {
        justify-content: flex-start !important;
    }

    /* Logo sidebar visibile nel drawer */
    .bq-fe-sidebar-brand img,
    .bq-fe-sidebar-logo {
        filter: brightness(0) invert(1);
    }

    /* --------------------------------------------------------
       MAIN
    -------------------------------------------------------- */
    .bq-fe-main {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --------------------------------------------------------
       PAGE
    -------------------------------------------------------- */
    .bq-fe-page {
        padding: 20px 16px 80px;
        max-width: 100% !important;
    }
    .bq-prot-page {
        padding: 20px 16px 80px;
        max-width: 100% !important;
    }
    .bq-fe-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 20px;
    }
    .bq-fe-page-title { font-size: 20px; }

    /* --------------------------------------------------------
       CARDS
    -------------------------------------------------------- */
    .bq-fe-card { border-radius: 14px; }
    .bq-fe-card-header {
        padding: 14px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .bq-fe-card-body { padding: 16px; }

    /* --------------------------------------------------------
       FORM GRID — 1 colonna
    -------------------------------------------------------- */
    .bq-fe-form-grid,
    .bq-fe-form-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .bq-fe-field-full { grid-column: 1 !important; }

    /* --------------------------------------------------------
       STATS
    -------------------------------------------------------- */
    .bq-fe-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .bq-fe-stat-card { padding: 14px; }
    .bq-fe-stat-value { font-size: 20px; }

    /* --------------------------------------------------------
       TABELLA
    -------------------------------------------------------- */
    .bq-fe-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .bq-fe-table { min-width: 480px; }
    .bq-fe-table.bq-table-pazienti { min-width: 0; }
    .bq-fe-table-wrap:has(.bq-table-pazienti) { overflow-x: visible; }
    .bq-fe-table.bq-table-documenti { min-width: 0; }
    .bq-fe-table-wrap:has(.bq-table-documenti) { overflow-x: visible; }

    .bq-table-documenti thead { display: none; }
    .bq-table-documenti tbody tr {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--bd-lt);
        background: var(--w);
    }
    .bq-table-documenti tbody tr:last-child { border-bottom: none; }
    .bq-table-documenti td {
        padding: 0;
        border: none;
        font-size: 13px;
    }
    .bq-table-documenti td:first-child {
        font-weight: 600;
        color: var(--tx);
        font-size: 13px;
    }
    .bq-table-documenti td[data-label]:not([data-label=""])::before {
        content: attr(data-label) ": ";
        font-size: 11px;
        font-weight: 600;
        color: var(--tx-3);
        text-transform: uppercase;
        letter-spacing: .3px;
        display: block;
        margin-bottom: 2px;
    }
    .bq-table-documenti td:first-child::before { display: none; }
    .bq-table-documenti td:last-child {
        margin-top: 4px;
    }

    /* --------------------------------------------------------
       TABS
    -------------------------------------------------------- */
    .bq-fe-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .bq-fe-tabs::-webkit-scrollbar { display: none; }
    .bq-fe-tab { padding: 10px 12px; font-size: 12px; }

    /* --------------------------------------------------------
       MODALI — centrati con margini laterali
    -------------------------------------------------------- */
    .bq-fe-modal-overlay {
        padding: 16px;
        align-items: center;
    }
    .bq-fe-modal,
    .bq-fe-modal-lg {
        max-width: 100% !important;
        width: 100%;
        max-height: 90dvh;
        max-height: 90vh;
        border-radius: 16px;
        transform: translateY(20px) scale(.97);
    }
    .bq-fe-modal-overlay.open .bq-fe-modal,
    .bq-fe-modal-overlay.open .bq-fe-modal-lg {
        transform: translateY(0) scale(1);
    }
    .bq-fe-modal-body { padding: 16px 28px 16px 24px; }
    .bq-fe-modal-header { padding: 16px 16px 14px; }
    .bq-fe-modal-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .bq-fe-modal-footer .bq-fe-btn {
        flex: 1;
        justify-content: center;
    }

    /* --------------------------------------------------------
       TABELLA PAZIENTI — card layout su mobile
    -------------------------------------------------------- */
    .bq-fe-table.bq-table-pazienti thead { display: none; }
    .bq-fe-table.bq-table-pazienti,
    .bq-fe-table.bq-table-pazienti tbody { display: block; width: 100%; }
    .bq-fe-table.bq-table-pazienti tbody tr {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--bd-lt);
        background: var(--w);
    }
    .bq-fe-table.bq-table-pazienti tbody tr:last-child { border-bottom: none; }
    .bq-fe-table.bq-table-pazienti tbody td {
        padding: 0;
        border: none;
        font-size: 13px;
    }
    .bq-fe-table.bq-table-pazienti tbody td:before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--tx-3);
        margin-bottom: 2px;
    }
    .bq-fe-table.bq-table-pazienti tbody td:first-child:before,
    .bq-fe-table.bq-table-pazienti tbody td:last-child:before { content: none; }
    .bq-fe-table.bq-table-pazienti tbody td:last-child {
        display: flex;
        gap: 8px;
        margin-top: 4px;
    }
    .bq-fe-table.bq-table-pazienti tbody td:last-child .bq-fe-btn,
    .bq-fe-table.bq-table-pazienti tbody td:last-child a {
        flex: 1;
        justify-content: center;
    }

    /* --------------------------------------------------------
       AND/OR MOTORE PROTOCOLLI — colonna su mobile
    -------------------------------------------------------- */
    #bq-prot-input {
        padding-bottom: 60px;
    }
    #bq-prot-risultati {
        padding-bottom: 60px;
    }
    #bq-prot-step2 {
        padding-bottom: 60px;
    }
    .bq-prot-andor-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .bq-prot-andor-desc {
        margin-left: 0 !important;
    }
    .bq-prot-pill {
        font-size: 12px;
        padding: 6px 12px;
    }
    .bq-prot-scheda-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .bq-prot-card-header {
        padding: 14px 14px;
    }
    .bq-prot-detail {
        padding: 14px 14px;
    }
    .bq-prot-comp-table th,
    .bq-prot-comp-table td {
        padding: 6px 8px;
        font-size: 11px;
    }

    /* --------------------------------------------------------
       PAZIENTE HEADER
    -------------------------------------------------------- */
    .bq-fe-paziente-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .bq-fe-paziente-actions {
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
    }
    .bq-fe-paziente-actions .bq-fe-btn {
        flex: 1;
        justify-content: center;
        min-width: 120px;
    }

    /* --------------------------------------------------------
       BOTTONI — touch friendly
    -------------------------------------------------------- */
    .bq-fe-btn { padding: 10px 16px; font-size: 13px; }
    .bq-fe-btn-sm { padding: 8px 12px; font-size: 12px; }
    .bq-fe-btn-icon { padding: 9px; }

    /* --------------------------------------------------------
       TOOLBAR
    -------------------------------------------------------- */
    .bq-fe-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .bq-fe-toolbar .bq-fe-select { width: 100%; }

    /* --------------------------------------------------------
       TOAST
    -------------------------------------------------------- */
    .bq-fe-toast {
        bottom: 90px;
        right: 16px;
        left: 16px;
        text-align: center;
    }

    /* --------------------------------------------------------
       PAGINAZIONE
    -------------------------------------------------------- */
    .bq-fe-pag {
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 6px;
    }
    .bq-fe-pag-info {
        width: 100%;
        text-align: center;
        margin-left: 0;
    }

    /* --------------------------------------------------------
       MOVIMENTI
    -------------------------------------------------------- */
    .bq-fe-mov-summary { grid-template-columns: 1fr; gap: 10px; }

    /* --------------------------------------------------------
       COMPOSIZIONE MODALE
    -------------------------------------------------------- */
    .bq-comp-body-scroll {
        max-height: 60dvh;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --------------------------------------------------------
       SEZIONE HEADER
    -------------------------------------------------------- */
    .bq-fe-section-header { margin: 20px 0 12px; }

    /* --------------------------------------------------------
       UPLOAD
    -------------------------------------------------------- */
    .bq-fe-upload-area { padding: 20px 16px; }

    /* --------------------------------------------------------
       IMPOSTAZIONI — full width
    -------------------------------------------------------- */
    .bq-fe-card[style*="max-width:600px"] {
        max-width: 100% !important;
    }

    /* --------------------------------------------------------
       SCHERMI MOLTO STRETTI
    -------------------------------------------------------- */
    @media (max-width: 400px) {
        .bq-fe-stats-grid { grid-template-columns: 1fr; }
    }

}
/* Fine @media 899px */
@media (max-width: 899px) {
    /* Contabilita */
    .bq-cnt-filtro {
        flex-direction: column;
        gap: 10px;
    }
    .bq-cnt-filtro-field .bq-fe-input {
        width: 100%;
        box-sizing: border-box;
    }
    .bq-cnt-stats {
        grid-template-columns: 1fr !important;
        margin-bottom: 20px;
    }
    .bq-fe-table-wrap:has(.bq-table-contabilita) {
        overflow-x: hidden;
    }
    .bq-fe-table.bq-table-contabilita thead { display: none; }
    .bq-fe-table.bq-table-contabilita,
    .bq-fe-table.bq-table-contabilita tbody { display: block; width: 100%; }
    .bq-fe-table.bq-table-contabilita tfoot { display: block; }
    .bq-fe-table.bq-table-contabilita tfoot tr {
        display: flex;
        flex-wrap: wrap;
        padding: 12px 16px;
        background: var(--g-xlt);
        border-top: 2px solid var(--bd);
        gap: 0;
    }
    .bq-fe-table.bq-table-contabilita tfoot td {
        padding: 0 !important;
        border: none;
        text-align: left !important;
    }
    .bq-cnt-tfoot-label {
        width: 100%;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--tx-3);
        display: block;
        padding-bottom: 6px !important;
    }
    .bq-cnt-tfoot-compenso,
    .bq-cnt-tfoot-incassato,
    .bq-cnt-tfoot-saldo {
        flex: 1;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        flex-direction: column;
    }
    .bq-cnt-tfoot-compenso::before { content: "Compenso"; font-size: 10px; font-weight: 600; color: var(--tx-3); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
    .bq-cnt-tfoot-incassato::before { content: "Incassato"; font-size: 10px; font-weight: 600; color: var(--tx-3); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
    .bq-cnt-tfoot-saldo::before { content: "Saldo"; font-size: 10px; font-weight: 600; color: var(--tx-3); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
    .bq-fe-table.bq-table-contabilita tbody tr {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--bd-lt);
        background: var(--w);
    }
    .bq-fe-table.bq-table-contabilita tbody tr:last-child { border-bottom: none; }
    .bq-fe-table.bq-table-contabilita tbody td {
        padding: 0;
        border: none;
        font-size: 13px;
        text-align: left !important;
        white-space: normal !important;
    }
    .bq-fe-table.bq-table-contabilita tbody td[data-label]:not([data-label="Protocollo"])::before {
        content: attr(data-label) ": ";
        font-size: 11px;
        font-weight: 600;
        color: var(--tx-3);
        text-transform: uppercase;
        letter-spacing: .3px;
        display: inline;
        margin-right: 4px;
    }
}
/* Motore Protocolli — tab tassonomie verticali su mobile */
@media (max-width: 900px) {
    #bq-prot-input .bq-prot-tabs {
        flex-direction: column;
        gap: 6px;
    }
    #bq-prot-input .bq-prot-tab {
        width: 100%;
        text-align: left;
        justify-content: space-between;
    }
}