/* ============================================================
   VESTE MOBILE (solo smartphone, max-width 768px)
   Palette: #001930 #073575 #03396c #367aba #60a0db
   Il desktop non viene toccato: tutto e' dentro la media query.
   ============================================================ */

@media (max-width: 768px) {

    /* --- Tema: ridefinisco le variabili Bootstrap --- */
    :root {
        --ce-navy:    #001930;
        --ce-deep:    #073575;
        --ce-primary: #03396c;
        --ce-blue:    #367aba;
        --ce-sky:     #60a0db;
        --ce-bg:      #f2f7fc;
        --ce-line:    rgba(3, 57, 108, .10);

        --bs-primary: #03396c;
        --bs-primary-rgb: 3, 57, 108;
        --bs-link-color: #367aba;
        --bs-link-color-rgb: 54, 122, 186;
        --bs-link-hover-color: #073575;
        --bs-body-bg: #f2f7fc;
    }

    body {
        background-color: var(--ce-bg);
        -webkit-tap-highlight-color: transparent;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* --- Navbar: colori invertiti, barra chiara con testo navy --- */
    .navbar.bg-primary,
    .navbar.navbar-dark {
        background: linear-gradient(135deg, #ffffff 0%, #f2f7fc 60%, rgba(96, 160, 219, .22) 100%) !important;
        box-shadow: 0 6px 24px rgba(3, 57, 108, .16);
        padding-top: .8rem;
        padding-bottom: .8rem;
    }

    .navbar-brand {
        font-weight: 700;
        letter-spacing: .04em;
        font-size: 1.35rem;
        color: var(--ce-primary) !important;
    }

    .navbar-dark .navbar-toggler {
        border: 1px solid rgba(3, 57, 108, .30);
        border-radius: .7rem;
        padding: .5rem .7rem;
    }

    .navbar-dark .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%283, 57, 108, .9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .navbar-collapse {
        padding: .6rem .2rem .2rem;
    }

    .navbar-dark .nav-link,
    .navbar-dark .btn-link.nav-link {
        color: var(--ce-primary);
        padding: .8rem 1rem;
        margin: .15rem 0;
        border-radius: .8rem;
        font-weight: 600;
        min-height: 46px;
        display: flex;
        align-items: center;
    }

    .navbar-dark .nav-link.active,
    .navbar-dark .nav-link:active {
        background: rgba(96, 160, 219, .30);
        color: var(--ce-navy);
    }

    .navbar-dark .nav-link .badge {
        margin-left: .4rem;
    }

    /* Divisori di sezione nel menu (Area Cliente / Area Staff): solo testo */
    .menu-section {
        list-style: none;
        padding: .7rem 1rem .3rem;
        margin-top: .55rem;
        font-size: .92rem;
        font-weight: 700;
        letter-spacing: .03em;
        color: rgba(3, 57, 108, .6);
        border-top: 1px solid rgba(3, 57, 108, .12);
    }

    .menu-section:first-child {
        margin-top: 0;
        border-top: 0;
    }

    /* --- Hero: dal viola al blu della palette --- */
    .hero-section {
        background: linear-gradient(140deg, var(--ce-navy) 0%, var(--ce-primary) 50%, var(--ce-blue) 100%) !important;
        border-radius: 1.2rem !important;
        box-shadow: 0 10px 26px rgba(0, 25, 48, .28);
    }

    /* --- Card: bordi ampi, ombra morbida, senza hover-shift --- */
    .card {
        border: 0;
        border-radius: 1.15rem;
        box-shadow: 0 8px 28px rgba(3, 57, 108, .09);
    }

    .card:hover {
        transform: none;
    }

    .card-header {
        background: transparent;
        border-bottom: 1px solid var(--ce-line);
        font-weight: 700;
        color: var(--ce-deep);
        padding: 1rem 1.25rem;
    }

    .card-body {
        padding: 1.25rem;
    }

    /* --- Bottoni: pillole grandi da pollice --- */
    .btn {
        border-radius: .85rem;
        padding: .68rem 1.15rem;
        min-height: 46px;
        font-weight: 600;
        letter-spacing: .01em;
    }

    .btn-lg {
        border-radius: 1rem;
        min-height: 52px;
        font-size: 1.05rem;
    }

    .btn-sm {
        min-height: 38px;
        border-radius: .65rem;
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--ce-primary), var(--ce-blue));
        border: 0;
        box-shadow: 0 6px 16px rgba(3, 57, 108, .28);
    }

    .btn-primary:hover,
    .btn-primary:active,
    .btn-primary:focus {
        background: linear-gradient(135deg, var(--ce-deep), var(--ce-primary));
        box-shadow: 0 4px 12px rgba(3, 57, 108, .35);
    }

    .btn-outline-primary {
        color: var(--ce-primary);
        border-color: var(--ce-blue);
    }

    .btn-outline-primary:hover,
    .btn-outline-primary:active {
        background: var(--ce-primary);
        border-color: var(--ce-primary);
        color: #fff;
    }

    .btn-outline-success { border-radius: .85rem; }

    /* --- Input: alti, radius ampio, font 16px (niente zoom iOS) --- */
    .form-control,
    .form-select {
        border-radius: .85rem;
        min-height: 46px;
        border: 1px solid #cfdfee;
        background-color: #fff;
        font-size: 16px;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    textarea.form-control { min-height: 100px; }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--ce-blue);
        box-shadow: 0 0 0 .22rem rgba(96, 160, 219, .28);
    }

    .form-control:disabled,
    .form-select:disabled {
        background-color: #eef4fa;
        color: #5b7a99;
    }

    .input-group-text {
        border-radius: .85rem;
        border-color: #cfdfee;
        background-color: #eef4fa;
    }

    .input-group > .form-select,
    .input-group > .form-control {
        min-height: 46px;
    }

    .form-label {
        font-weight: 600;
        color: var(--ce-deep);
    }

    .form-text {
        color: #6b8aa5;
    }

    /* --- Alert e badge piu' morbidi --- */
    .alert {
        border: 0;
        border-radius: .95rem;
    }

    .badge {
        border-radius: 999px;
        padding: .42em .7em;
        font-weight: 600;
    }

    /* --- Liste, tabelle, modali --- */
    .list-group {
        border-radius: .95rem;
        overflow: hidden;
    }

    .list-group-item {
        border-color: var(--ce-line);
        padding: .85rem 1.1rem;
    }

    .modal-content {
        border: 0;
        border-radius: 1.2rem;
        box-shadow: 0 18px 50px rgba(0, 25, 48, .30);
    }

    .modal-header {
        border-bottom: 1px solid var(--ce-line);
    }

    .table {
        --bs-table-color: #1d3a57;
    }

    /* --- Selettori e titoli di sezione --- */
    h1, h2, h3, h4, h5, h6 {
        color: var(--ce-navy);
    }

    /* --- Footer: navy sobrio --- */
    footer {
        background: var(--ce-navy) !important;
        color: rgba(255, 255, 255, .72) !important;
        border-radius: 1.2rem 1.2rem 0 0;
    }

    footer a {
        color: var(--ce-sky);
        text-decoration: none;
    }

    /* --- Container e ritmo --- */
    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Checkbox/radio piu' grandi al tocco */
    .form-check-input {
        width: 1.25em;
        height: 1.25em;
        border-color: var(--ce-blue);
    }

    .form-check-input:checked {
        background-color: var(--ce-primary);
        border-color: var(--ce-primary);
    }

    /* ============================================================
       DENSITA': su schermi piccoli si vedono piu' contenuti
       senza scroll eccessivo (spaziature e tipografia compatte).
       ============================================================ */

    .navbar.bg-primary,
    .navbar.navbar-dark {
        padding-top: .55rem;
        padding-bottom: .55rem;
    }

    .navbar-dark .nav-link,
    .navbar-dark .btn-link.nav-link {
        padding: .6rem .9rem;
        margin: .08rem 0;
        min-height: 42px;
    }

    /* Spaziature verticali compresse (utilita' Bootstrap ridefinite solo in mobile) */
    .py-5 { padding-top: 1.4rem !important; padding-bottom: 1.4rem !important; }
    .py-4 { padding-top: 1rem !important;    padding-bottom: 1rem !important; }
    .py-3 { padding-top: .7rem !important;   padding-bottom: .7rem !important; }

    .my-5 { margin-top: 1rem !important;     margin-bottom: 1rem !important; }
    .my-4 { margin-top: .8rem !important;    margin-bottom: .8rem !important; }

    .mt-5 { margin-top: 1rem !important; }
    .mt-4 { margin-top: .8rem !important; }
    .mt-3 { margin-top: .55rem !important; }

    .mb-5 { margin-bottom: 1rem !important; }
    .mb-4 { margin-bottom: .8rem !important; }
    .mb-3 { margin-bottom: .6rem !important; }

    .pt-5 { padding-top: 1.4rem !important; }
    .pb-5 { padding-bottom: 1.4rem !important; }

    .g-3 { --bs-gutter-y: .6rem; --bs-gutter-x: .6rem; }
    .g-4 { --bs-gutter-y: .8rem; --bs-gutter-x: .8rem; }

    /* Corpo pagina: meno margine, tipografia piu' contenuta */
    .container,
    .container-fluid {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    h1, .h1 { font-size: 1.65rem; }
    h2, .h2 { font-size: 1.45rem; }
    h3, .h3 { font-size: 1.28rem; }
    h4, .h4 { font-size: 1.15rem; }
    h5, .h5 { font-size: 1.05rem; }
    h6, .h6 { font-size: .95rem; }

    .display-4 { font-size: 1.8rem; }
    .display-5 { font-size: 1.7rem; }
    .display-6 { font-size: 1.5rem; }
    .lead { font-size: 1rem; }

    .card-body { padding: .95rem; }
    .card-header { padding: .8rem 1rem; }

    .hero-section .display-4 { font-size: 1.8rem; margin-bottom: .4rem; }
    .hero-section .lead { margin-bottom: 0; }
    .hero-section .btn-lg { min-height: 48px; padding: .55rem 1.4rem; }

    .card-text { margin-bottom: .5rem; }

    /* Tabelle e liste piu' strette */
    .table > :not(caption) > * > * { padding: .45rem .5rem; }
    .list-group-item { padding: .7rem .95rem; }

    /* Modali in alto piu' vicine al bordo */
    .modal-dialog { margin: .6rem; }
    .modal-body { padding: .9rem; }
    .modal-header { padding: .85rem .95rem; }
    .modal-footer { padding: .7rem .95rem; }

    /* Badge e bottoni piccoli ancora tappabili */
    .btn { padding: .58rem 1rem; min-height: 44px; }
    .btn-lg { min-height: 50px; }
    .btn-sm { min-height: 36px; padding: .35rem .7rem; }

    .form-control, .form-select { min-height: 44px; }
    .input-group > .form-select, .input-group > .form-control { min-height: 44px; }

    .form-label { margin-bottom: .3rem; }
    .form-text { margin-top: .15rem; }

    .alert { padding: .65rem .9rem; }

    /* Griglia home: card a 2 colonne per vedere piu' contenuti senza scroll */
    .home-grid > .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .home-grid .card {
        height: 100%;
        border-radius: .95rem;
    }

    .home-grid .card-body {
        padding: .7rem .8rem;
    }

    .home-grid .card-title {
        font-size: .92rem;
        margin-bottom: .25rem;
        font-weight: 700;
    }

    .home-grid .card-text {
        font-size: .8rem;
        line-height: 1.3;
        margin-bottom: .35rem;
    }

    .home-grid .card-text strong {
        font-size: .9rem;
    }

    .home-grid .btn {
        min-height: 38px;
        padding: .4rem .8rem;
        font-size: .85rem;
        border-radius: .65rem;
    }

    /* ============================================================
       FINITURA APP-LIKE (shell + pagine)
       ============================================================ */

    /* Niente attesa del doppio-tap su controlli e link */
    a, button, .btn, .nav-link, .form-check-label {
        touch-action: manipulation;
    }

    /* Sfondo area admin in tinta con la palette */
    .admin-content {
        background-color: var(--ce-bg);
    }

    /* Tabelle piu' contenute e leggibili */
    .table {
        font-size: .86rem;
    }

    /* Modali sempre dentro lo schermo, corpo scrollabile */
    .modal-dialog {
        max-width: min(500px, calc(100% - 1.2rem));
    }

    .modal-content {
        max-height: calc(100vh - 1.4rem);
        max-height: calc(100dvh - 1.4rem);
    }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Menu collassato della navbar pubblica: identico al pannello
       dell'Area Staff — stesso gradiente opaco, bordo e ombra */
    .navbar-collapse {
        margin-top: .5rem;
        padding: .5rem;
        background: linear-gradient(170deg, #ffffff 0%, #f2f7fc 55%, #dbe9f6 100%);
        border: 1px solid rgba(3, 57, 108, .10);
        border-radius: 16px;
        box-shadow: 0 18px 44px rgba(0, 25, 48, .30);
    }

    /* p-4 troppo generoso su smartphone */
    .p-4 {
        padding: .9rem !important;
    }

    /* Gestione Appuntamenti: le card appuntamenti usano quasi tutta la larghezza */
    .p-4:has(.app-cards) {
        padding-left: .35rem !important;
        padding-right: .35rem !important;
    }

    /* Accesso social: icone quadrate affiancate, senza testo */
    .social-btns {
        display: grid;
        grid-template-columns: repeat(3, 56px);
        justify-content: center;
        gap: .6rem;
    }

    .social-btn {
        width: 56px !important;
        min-width: 0 !important;
        flex: 0 0 56px;
        height: 56px;
        padding: 0 !important;
        margin-bottom: .25rem !important;
        border-radius: 14px !important;
    }

    .social-btn .social-label {
        display: none;
    }

    .social-btn svg {
        width: 24px;
        height: 24px;
    }

    /* Pulsante Google ufficiale: nascosto, compare solo se il One Tap non si apre */
    #google-login-btn {
        display: none !important;
    }

    #google-login-btn.google-native-show {
        display: flex;
        justify-content: center;
    }

    /* Icona Google quadrata: solo mobile (su desktop nascosta via app.css) */
    .social-google-icon {
        display: inline-flex !important;
    }
}