body { font-family: Arial, sans-serif; }
.card { margin-bottom: 1rem; }
.navbar-brand { font-weight: bold; }

/* ============================================
   OTTIMIZZAZIONI MOBILE (SMARTPHONE)
   ============================================ */

@media (max-width: 768px) {
    /* Container padding ridotto */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Bottoni più grandi per touch (minimo 44px raccomandato) */
    .btn {
        min-height: 44px;
        padding: 10px 15px;
        font-size: 1rem;
        width: 100%;
        margin-bottom: 0.5rem;
        white-space: normal;
        word-wrap: break-word;
    }
    
    .btn:last-child {
        margin-bottom: 0;
    }
    
    .btn-sm {
        min-height: 38px;
        padding: 8px 12px;
        font-size: 0.9rem;
    }
    
    /* Bottoni inline che devono rimanere inline */
    .btn-group .btn,
    .btn-group-sm .btn {
        width: auto;
        margin-bottom: 0;
    }
    
    /* Bottoni in card header su mobile */
    .card-header .btn,
    .card-header .btn-sm {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .card-header .btn:last-child {
        margin-bottom: 0;
    }
    
    /* Bottoni inline su mobile */
    .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    
    .btn-group .btn:last-child {
        margin-bottom: 0;
    }
    
    /* Form: stack verticale su mobile - SOLO per schermi mobile */
    /* Le colonne Bootstrap si comportano naturalmente - non forziamo width */
    
    /* Row padding su mobile */
    .row {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }
    
    .row.g-2,
    .row.g-3 {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    .row.g-2 > [class*="col-"],
    .row.g-3 > [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Tabelle responsive - layout a card su mobile */
    .table-responsive {
        font-size: 0.85rem;
        border: none;
        border-radius: 0.25rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        margin-bottom: 0;
    }
    
    .table th,
    .table td {
        padding: 0.5rem 0.4rem;
        white-space: normal;
        word-wrap: break-word;
        font-size: 0.85rem;
    }
    
    .table th {
        font-size: 0.8rem;
        font-weight: 600;
    }
    
    /* Card padding ridotto su mobile */
    .card {
        margin-bottom: 1rem;
        border-radius: 0.5rem;
    }
    
    .card-body {
        padding: 1rem 0.75rem;
    }
    
    .card-header {
        padding: 0.75rem;
        font-size: 0.95rem;
    }
    
    /* Header con titolo e bottoni stack verticale */
    .d-flex.justify-content-between,
    .d-flex.flex-column.flex-md-row.justify-content-between {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem;
    }
    
    .d-flex.justify-content-between > *,
    .d-flex.flex-column.flex-md-row.justify-content-between > * {
        width: 100% !important;
    }
    
    .d-flex.justify-content-between h1,
    .d-flex.flex-column.flex-md-row.justify-content-between h1 {
        margin-bottom: 0;
        font-size: 1.5rem;
    }
    
    /* Card header con bottoni su mobile */
    .card-header.d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem;
    }
    
    .card-header.d-flex > * {
        width: 100%;
    }
    
    .card-header.d-flex .d-flex {
        flex-direction: column !important;
        gap: 0.5rem;
    }
    
    .card-header.d-flex .btn {
        width: 100%;
        margin: 0;
    }
    
    /* Gap utilities su mobile */
    .gap-2,
    .gap-3 {
        gap: 0.5rem !important;
    }
    
    /* Input e select più grandi per touch */
    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 16px; /* Previene zoom su iOS */
        padding: 0.5rem 0.75rem;
    }
    
    .form-control-sm,
    .form-select-sm {
        min-height: 38px;
        font-size: 16px;
    }
    
    .form-label {
        font-size: 0.9rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
    }
    
    /* Navbar più compatta */
    .navbar {
        padding: 0.5rem 0.75rem;
    }
    
    .navbar-brand {
        font-size: 1rem;
    }
    
    .navbar-nav {
        margin-top: 0.5rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 0.5rem;
        font-size: 0.95rem;
    }
    
    /* Badge più leggibili */
    .badge {
        font-size: 0.8rem;
        padding: 0.35em 0.5em;
    }
    
    /* Modal più larga su mobile */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-content {
        border-radius: 0.5rem;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem 0.75rem;
    }
    
    /* Spaziatura tra elementi */
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    .mb-3 {
        margin-bottom: 1rem !important;
    }
    
    /* H1 più piccolo su mobile */
    h1 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    h2 {
        font-size: 1.25rem;
    }
    
    h3 {
        font-size: 1.1rem;
    }
    
    h4, h5, h6 {
        font-size: 1rem;
    }
    
    /* Alert più leggibili */
    .alert {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
    }
    
    /* Home page cards - stack verticale */
    .row.mb-5 > [class*="col-"] {
        margin-bottom: 1rem;
    }
    
    /* Paginazione mobile */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pagination .page-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    
    /* Dropdown menu mobile */
    .dropdown-menu {
        width: 100%;
        max-width: 100%;
    }
    
    /* Input group mobile */
    .input-group {
        flex-direction: column;
    }
    
    .input-group .form-control,
    .input-group .btn {
        width: 100%;
        border-radius: 0.25rem;
        margin-bottom: 0.5rem;
    }
    
    .input-group .btn:last-child {
        margin-bottom: 0;
    }
    
    /* Table actions mobile - stack verticale */
    .table td .d-flex {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .table td .d-flex.gap-1 {
        gap: 0.5rem !important;
    }
    
    .table td .btn {
        width: 100%;
        margin-bottom: 0.25rem;
        min-height: 38px;
    }
    
    .table td .btn-sm {
        min-height: 38px;
        font-size: 0.85rem;
    }
    
    /* Search form mobile */
    .card-body form.row {
        margin: 0;
    }
    
    .card-body form.row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Tabelle con scroll orizzontale migliorato */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    
    .table-responsive::-webkit-scrollbar {
        height: 8px;
    }
    
    .table-responsive::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    
    .table-responsive::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }
    
    .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    /* Footer copyright mobile */
    footer {
        font-size: 0.85rem;
        padding: 1rem 0.75rem;
        text-align: center;
    }
    
    /* Tabelle responsive per vista macchina */
    .table-mobile-responsive {
        width: 100%;
        table-layout: fixed;
    }
    
    .table-mobile-responsive td {
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        padding: 0.5rem 0.25rem;
        vertical-align: top;
    }
    
    .table-mobile-responsive td.text-nowrap {
        white-space: nowrap;
        width: auto;
        min-width: 100px;
        max-width: 40%;
        padding-right: 0.5rem;
    }
    
    .table-mobile-responsive td.w-100 {
        width: 60%;
        max-width: none;
        min-width: 0;
    }
    
    /* Testo lungo con word-break */
    .text-break {
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        max-width: 100%;
    }
    
    /* Container padding su mobile */
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .container-fluid .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    /* Card body padding ridotto su mobile */
    .card-body {
        padding: 0.75rem !important;
    }
    
    .card-body.p-2 {
        padding: 0.5rem !important;
    }
    
    /* Header card con flex su mobile */
    .card-header.bg-warning.d-flex,
    .card-header.bg-danger.d-flex,
    .card-header.bg-primary.d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .card-header .d-flex.align-items-center {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem;
    }
    
    .card-header .d-flex.align-items-center .badge {
        align-self: flex-start;
    }
    
    .card-header .d-flex.align-items-center .btn {
        width: 100%;
    }
    
    /* List group items con più spazio */
    .list-group-item {
        padding: 0.75rem 0.5rem;
    }
    
    /* Form upload con più spazio */
    .list-group-item form {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    /* Input group su mobile - layout verticale */
    .input-group.flex-column {
        gap: 0.5rem;
    }
    
    .input-group.flex-column .form-control,
    .input-group.flex-column .btn {
        border-radius: 0.375rem !important;
        margin-bottom: 0;
        width: 100%;
    }
    
    .input-group.flex-column .form-control:not(:last-child),
    .input-group.flex-column .btn:not(:last-child) {
        margin-bottom: 0.5rem;
    }
    
    /* Gap per flex column */
    .d-flex.flex-column.gap-2 > * {
        margin-bottom: 0.5rem;
    }
    
    .d-flex.flex-column.gap-2 > *:last-child {
        margin-bottom: 0;
    }
    
    /* Tabelle responsive - Card layout su mobile */
    .table-mobile-card {
        display: block;
        width: 100%;
    }
    
    .table-mobile-card thead {
        display: none;
    }
    
    .table-mobile-card tbody,
    .table-mobile-card tr,
    .table-mobile-card td {
        display: block;
        width: 100%;
    }
    
    .table-mobile-card tr {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    .table-mobile-card td {
        border: none;
        padding: 0.5rem 0;
        text-align: left;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .table-mobile-card td:last-child {
        border-bottom: none;
    }
    
    .table-mobile-card td:before {
        content: attr(data-label) ": ";
        font-weight: 600;
        display: inline-block;
        width: 40%;
        color: #495057;
        margin-right: 0.5rem;
    }
    
    .table-mobile-card td .btn-group,
    .table-mobile-card td .d-flex {
        justify-content: flex-start;
        margin-top: 0.5rem;
        flex-direction: column;
        width: 100%;
    }
    
    .table-mobile-card td .btn-group .btn,
    .table-mobile-card td .d-flex .btn,
    .table-mobile-card td .btn-group form,
    .table-mobile-card td .d-flex form {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .table-mobile-card td .btn-group .btn:last-child,
    .table-mobile-card td .d-flex .btn:last-child,
    .table-mobile-card td .btn-group form:last-child,
    .table-mobile-card td .d-flex form:last-child {
        margin-bottom: 0;
    }
    
    /* Nascondi colonne meno importanti su mobile */
    .table .d-none-mobile {
        display: none !important;
    }
    
    /* Mostra solo su desktop */
    .d-mobile-only {
        display: block !important;
    }
    
    .d-desktop-only {
        display: none !important;
    }
    
    /* Evita overflow orizzontale */
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    * {
        max-width: 100%;
    }
    
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }
    
    /* Navbar migliorata su mobile */
    .navbar-collapse {
        margin-top: 0.5rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 0.5rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }
    
    /* Dropdown menu su mobile */
    .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0;
        border: none;
        box-shadow: none;
    }
    
    /* Form migliorati su mobile */
    form .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    form .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Textarea su mobile */
    textarea.form-control {
        min-height: 100px;
        font-size: 16px;
    }
    
    /* Select multipli su mobile */
    select[multiple].form-select {
        min-height: 120px;
    }
    
    /* File input su mobile */
    input[type="file"].form-control {
        padding: 0.5rem;
        font-size: 16px;
    }
    
    /* Checkbox e radio più grandi */
    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0.25rem;
    }
    
    .form-check-label {
        padding-left: 0.5rem;
        font-size: 1rem;
    }
    
    /* Alert migliorati */
    .alert {
        word-wrap: break-word;
    }
    
    /* Badge in tabelle */
    .table .badge {
        font-size: 0.75rem;
        padding: 0.25em 0.5em;
        white-space: normal;
        word-wrap: break-word;
    }
    
    /* Link in tabelle */
    .table a {
        word-break: break-word;
    }
    
    /* Paginazione migliorata */
    .pagination {
        font-size: 0.9rem;
    }
    
    .pagination .page-item {
        margin: 0.25rem;
    }
    
    /* Modal su mobile */
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .modal-content {
        border-radius: 0.5rem;
    }
    
    /* Tooltip e popover su mobile */
    .tooltip,
    .popover {
        max-width: 90vw;
        word-wrap: break-word;
    }
}

/* Desktop - nascondi elementi mobile e assicura layout colonne */
@media (min-width: 768px) {
    .d-mobile-only {
        display: none !important;
    }
    
    .d-desktop-only {
        display: block !important;
    }
    
    /* Assicura che le colonne Bootstrap funzionino correttamente su desktop */
    /* Usa !important per sovrascrivere eventuali regole mobile */
    .row > .col-md-6 {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }
    
    .row > .col-md-4 {
        flex: 0 0 33.33333333% !important;
        width: 33.33333333% !important;
        max-width: 33.33333333% !important;
    }
    
    .row > .col-md-3 {
        flex: 0 0 25% !important;
        width: 25% !important;
        max-width: 25% !important;
    }
    
    .row > .col-md-8 {
        flex: 0 0 66.66666667% !important;
        width: 66.66666667% !important;
        max-width: 66.66666667% !important;
    }
    
    .row > .col-md-9 {
        flex: 0 0 75% !important;
        width: 75% !important;
        max-width: 75% !important;
    }
    
    .row > .col-md-12 {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Tablet (768px - 992px) */
@media (min-width: 769px) and (max-width: 991px) {
    .btn {
        min-height: 40px;
        padding: 8px 14px;
    }
    
    .form-control,
    .form-select {
        min-height: 40px;
    }
    
    .table th,
    .table td {
        padding: 0.6rem 0.5rem;
        font-size: 0.9rem;
    }
}

/* Modal Anteprima Immagine - Responsive */
@media (max-width: 768px) {
    /* Modal a schermo intero su mobile */
    .modal-dialog.modal-lg {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }
    
    .modal-dialog.modal-lg .modal-content {
        height: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    
    .modal-dialog.modal-lg .modal-body {
        flex: 1;
        overflow-y: auto;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Immagine responsive su mobile */
    .modal-dialog.modal-lg .modal-body img {
        max-width: 100% !important;
        max-height: calc(100vh - 200px) !important;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    
    /* Header e footer compatti su mobile */
    .modal-dialog.modal-lg .modal-header {
        padding: 0.75rem;
        flex-shrink: 0;
    }
    
    .modal-dialog.modal-lg .modal-footer {
        padding: 0.75rem;
        flex-shrink: 0;
        flex-direction: column;
    }
    
    .modal-dialog.modal-lg .modal-footer .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .modal-dialog.modal-lg .modal-footer .btn:last-child {
        margin-bottom: 0;
    }
    
    /* Titolo modal più piccolo su mobile */
    .modal-dialog.modal-lg .modal-title {
        font-size: 0.9rem;
        word-break: break-word;
    }
}

/* Desktop - Modal anteprima */
@media (min-width: 769px) {
    .modal-dialog.modal-lg {
        max-width: 90%;
    }
    
    .modal-dialog.modal-lg .modal-body img {
        max-height: 70vh;
    }
}

/* Home - 5 colonne per riga per i blocchi statistiche */
@media (min-width: 768px) {
    .col-md-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* ============================================
   CORREZIONI TABELLE HOME - MOBILE
   ============================================ */

/* Tabelle home con scroll controllato */
.table-scroll-home {
    max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Su mobile, rimuovi max-height e mostra tutto */
@media (max-width: 768px) {
    .table-scroll-home {
        max-height: none;
        overflow-y: visible;
    }
    
    /* Text truncate responsive per home */
    .text-truncate-home {
        max-width: 100%;
    }
}

/* Su desktop, mantieni scroll */
@media (min-width: 769px) {
    .text-truncate-home {
        max-width: 150px;
    }
    
    .table-scroll-home thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #212529;
    }
}

/* Schermi molto piccoli */
@media (max-width: 360px) {
    .text-truncate-home {
        max-width: 100px;
    }
    
    .table th,
    .table td {
        font-size: 0.75rem;
        padding: 0.4rem 0.3rem;
    }
}

/* Alert notifiche responsive */
.alert-notifica {
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
}

@media (max-width: 768px) {
    .alert-notifica {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
        width: auto;
    }
}

/* ============================================
   TABELLE DETTAGLIO COMMESSA - MOBILE
   ============================================ */

/* Tabelle dettaglio commessa responsive */
.table-detail-commessa {
    width: 100%;
}

.table-detail-commessa td {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    vertical-align: top;
}

/* Su mobile, stack verticale per le celle */
@media (max-width: 768px) {
    .table-detail-commessa tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #dee2e6;
    }
    
    .table-detail-commessa tr:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .table-detail-commessa .label-cell {
        width: 100% !important;
        padding-bottom: 0.25rem;
        font-size: 0.9rem;
    }
    
    .table-detail-commessa .value-cell {
        width: 100% !important;
        padding-top: 0;
        padding-left: 0;
    }
    
    /* Badge codice commessa più compatto su mobile */
    .badge-codice-commessa {
        font-size: 0.875rem !important;
        padding: 0.35em 0.65em;
        display: inline-block;
        max-width: 100%;
        word-break: break-all;
        white-space: normal;
    }
    
    /* Badge budget più compatto */
    .badge-budget {
        font-size: 0.875rem !important;
        padding: 0.35em 0.65em;
        white-space: normal;
    }
    
    /* Tipo servizio con word-break */
    .tipo-servizio-text {
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        line-height: 1.5;
        max-width: 100%;
    }
}

/* Desktop: layout normale */
@media (min-width: 769px) {
    .table-detail-commessa .label-cell {
        width: 40%;
        padding-right: 1rem;
    }
    
    .table-detail-commessa .value-cell {
        width: 60%;
    }
    
    .badge-codice-commessa {
        font-size: 1rem;
    }
    
    .badge-budget {
        font-size: 1rem;
    }
}