/* ============================================================
   Barcode Magazzino — Custom Styles (Mobile + Desktop)
   ============================================================ */

:root {
    --bm-primary:     #0d6efd;
    --bm-card-radius: .75rem;
    --touch-min:      44px;
}

/* ---- Layout generale ---- */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: .9rem;
    -webkit-text-size-adjust: 100%;
}

main.flex-grow-1 {
    min-height: calc(100vh - 120px);
}

/* ---- Carte ---- */
.card {
    border-radius: var(--bm-card-radius);
}
.card-header {
    border-radius: var(--bm-card-radius) var(--bm-card-radius) 0 0 !important;
    padding: .75rem 1rem;
}

/* ---- Tabelle ---- */
.table > :not(caption) > * > * {
    padding: .55rem .7rem;
}
.table thead th {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    font-weight: 600;
    white-space: nowrap;
}

/* ---- Bottoni — touch target minimo 44px ---- */
.btn {
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-sm {
    min-height: 34px;
}
.btn-group-sm .btn {
    min-height: 32px;
    padding: .25rem .5rem;
}

/* ---- Input ---- */
.form-control, .form-select {
    min-height: var(--touch-min);
}
.form-control-sm, .form-select-sm {
    min-height: 34px;
}
input[type=number].form-control {
    -moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---- Badge ---- */
.badge { font-weight: 500; }
.qty-display {
    font-size: .85rem;
    min-width: 4rem;
    display: inline-block;
}

/* ---- Paginazione ---- */
.pagination .page-link {
    min-width: 2.4rem;
    min-height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Stat cards ---- */
.card .rounded-circle {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---- Toast ---- */
.toast-container { z-index: 11000; }

/* ---- Font monospace nei codici ---- */
.font-monospace { font-size: .88em; }

/* ---- Tabs barcode ---- */
.nav-tabs .nav-link {
    font-size: .85rem;
    padding: .45rem .75rem;
}

/* ============================================================
   SCANNER PAGE
   ============================================================ */
#reader {
    border: 2px dashed #dee2e6;
    border-radius: .5rem;
    background: #f8f9fa;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
#reader video {
    border-radius: .4rem;
    width: 100% !important;
    max-height: 380px;
    object-fit: cover;
}
/* Mirino overlay */
#reader::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 100px;
    border: 2px solid rgba(13, 110, 253, .7);
    border-radius: 6px;
    box-shadow: 0 0 0 2000px rgba(0,0,0,.15);
    pointer-events: none;
    z-index: 10;
}
#reader.scanning::after {
    animation: scanPulse 1.5s ease-in-out infinite;
}
@keyframes scanPulse {
    0%, 100% { border-color: rgba(13,110,253,.7); }
    50%       { border-color: rgba(25,135,84,.9); box-shadow: 0 0 0 2000px rgba(0,0,0,.2); }
}

#resultPanel {
    animation: fadeInUp .3s ease;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Quantità con pulsanti +/- grandi per touch */
.qty-input-group .btn {
    width: var(--touch-min);
    min-height: 52px;
    font-size: 1.3rem;
}
.qty-input-group input {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}

/* ============================================================
   TABELLE MOBILE — card view sotto 640px
   ============================================================ */
@media (max-width: 640px) {

    /* Nascondi intestazione tabella */
    .table-mobile-cards thead { display: none; }

    /* Ogni riga diventa una card */
    .table-mobile-cards tbody tr {
        display: block;
        border: 1px solid #dee2e6;
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .5rem .75rem;
        background: #fff;
    }
    .table-mobile-cards tbody tr:hover { background: #f8f9fa; }

    /* Ogni cella mostra l'etichetta */
    .table-mobile-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .3rem 0;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        font-size: .85rem;
    }
    .table-mobile-cards tbody td:last-child { border-bottom: none; }

    /* Etichetta dal data-label */
    .table-mobile-cards tbody td::before {
        content: attr(data-label);
        font-size: .73rem;
        text-transform: uppercase;
        color: #6c757d;
        font-weight: 600;
        letter-spacing: .03em;
        flex-shrink: 0;
        margin-right: .75rem;
    }
    .table-mobile-cards tbody td:empty { display: none; }

    /* Bottoni full-width su mobile */
    .mobile-full-btn { width: 100%; margin-bottom: .4rem; }
    .d-flex.gap-2.flex-wrap { flex-direction: column; }
    .d-flex.gap-2.flex-wrap .btn { width: 100%; }

    /* Paginazione compatta */
    .pagination .page-link {
        min-width: 2rem;
        min-height: 2rem;
        font-size: .8rem;
        padding: .2rem .4rem;
    }

    /* Container padding ridotto */
    .container-fluid.px-4 { padding-left: .75rem !important; padding-right: .75rem !important; }

    /* Scanner full-width */
    #reader { min-height: 220px; }
    #reader::after { width: 200px; height: 80px; }
}

/* ============================================================
   NAVBAR mobile
   ============================================================ */
@media (max-width: 991px) {
    .navbar-collapse .nav-link {
        padding: .6rem 1rem;
        border-radius: .4rem;
    }
    .navbar-collapse .nav-link:hover { background: rgba(255,255,255,.1); }
    .navbar-collapse .dropdown-menu { background: transparent; border: none; box-shadow: none; }
    .navbar-collapse .dropdown-item { color: rgba(255,255,255,.85); }
    .navbar-collapse .dropdown-item:hover { background: rgba(255,255,255,.1); color: #fff; }
}

/* ============================================================
   MODAL mobile full-screen
   ============================================================ */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
    }
    .modal-content {
        border-radius: 1rem 1rem 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .modal.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform .3s ease-out;
    }
    .modal.show .modal-dialog {
        transform: translateY(0);
    }
}

/* ============================================================
   HTTPS warning banner
   ============================================================ */
.https-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: .5rem;
    padding: .75rem 1rem;
    font-size: .85rem;
}