/* Pulsanti con icone SVG */
.btn svg,
.h4,
.btn-tipologie svg,
.btn-success svg,
.btn-primary svg,
.btn-warning svg,
.btn-danger svg,
.btn-info svg,
.btn-secondary svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 6px;
    flex-shrink: 0;
}

/* Per pulsanti piccoli */
.btn-sm svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;
}
.hover-mouse{
transform:scale(0.8);
}

.hover-mouse:hover{
opacity:0.6;
}

/* Per pulsanti grandi */
.btn-lg svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

/* Contenuto pulsanti con icone */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    vertical-align: middle;
}

/* Fix per icone che vengono prima del testo */
.btn > svg:first-child {
    margin-right: 6px;
    margin-left: 0;
}

/* Fix per icone che vengono dopo il testo */
.btn > svg:last-child {
    margin-left: 6px;
    margin-right: 0;
}

/* Icone solo (senza testo) */
.btn > svg:only-child {
    margin: 0;
}

/* Specifico per btn-tipologie */
.btn-tipologie {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
}

.btn-tipologie svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
/* Override completo tabelle Bootstrap */
.table {
    background-color: #2a2a2a !important;
    color: white !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

.table th {
    background-color: #b9b274 !important;
    color: #1a1a1a !important;
    border-color: rgba(185, 178, 116, 0.3) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 8px 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.table td {
    background-color: #2a2a2a !important;
    color: white !important;
    border-color: rgba(185, 178, 116, 0.2) !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
    vertical-align: middle !important;
}

.table tbody tr:hover td {
    background-color: rgba(185, 178, 116, 0.1) !important;
}

/* Tabelle nei modal */
.modal .table {
    background-color: #1a1a1a !important;
    margin-bottom: 0 !important;
}

.modal .table th {
    background-color: #b9b274 !important;
    color: #1a1a1a !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

.modal .table td {
    background-color: #1a1a1a !important;
    border-color: rgba(185, 178, 116, 0.1) !important;
}

.modal .table tbody tr:hover td {
    background-color: rgba(185, 178, 116, 0.05) !important;
}

/* Tabelle bordered */
.table-bordered {
    border: 1px solid rgba(185, 178, 116, 0.3) !important;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid rgba(185, 178, 116, 0.2) !important;
}

/* Form controls nelle tabelle */
.table .form-control {
    background-color: #1a1a1a !important;
    border: 1px solid rgba(185, 178, 116, 0.3) !important;
    color: white !important;
    font-size: 10px !important;
    padding: 4px 6px !important;
    height: auto !important;
    min-height: 26px !important;
}

.table .form-control:focus {
    border-color: #b9b274 !important;
    box-shadow: 0 0 0 2px rgba(185, 178, 116, 0.2) !important;
}

/* Input number nelle tabelle */
.table input[type="number"] {
    background-color: #1a1a1a !important;
    border: 1px solid rgba(185, 178, 116, 0.3) !important;
    color: white !important;
    font-size: 10px !important;
    text-align: center !important;
}

/* Pulsanti nelle tabelle */
.table .btn {
    font-size: 10px !important;
    padding: 3px 6px !important;
    line-height: 1.2 !important;
}

.table .btn svg {
    width: 12px !important;
    height: 12px !important;
}

/* Text muted nelle tabelle */
.table .text-muted {
    color: #888888 !important;
}

/* Small text nelle tabelle */
.table small {
    font-size: 9px !important;
    line-height: 1.2 !important;
}

/* Badge nelle tabelle */
.table .badge {
    font-size: 10px !important;
    padding: 2px 6px !important;
    line-height: 1.2 !important;
}
.badge-pos{
	background: #188107;
    color: white;
}
.badge-pos-top{
padding: 2px 9px 3px 8px;
    border-radius: 16px;
    margin: 8px;
    position: absolute;
    top: 2px;
}

/* Celle centrate */
.table .text-center {
    text-align: center !important;
}

/* Immagini nelle tabelle */
.table img {
    border-radius: 3px !important;
    border: 1px solid rgba(185, 178, 116, 0.2) !important;
}

/* Checkbox nelle tabelle */
.table input[type="checkbox"] {
    transform: scale(0.9) !important;
    accent-color: #b9b274 !important;
}

/* Fix per responsive */
.table-responsive {
    border: 1px solid rgba(185, 178, 116, 0.2) !important;
    border-radius: 6px !important;
    background-color: #2a2a2a !important;
}

/* Scrollbar per tabelle responsive */
.table-responsive::-webkit-scrollbar {
    height: 6px !important;
}

.table-responsive::-webkit-scrollbar-track {
    background: #1a1a1a !important;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #b9b274 !important;
    border-radius: 3px !important;
}

/* Fix striped tables */
.table-striped tbody tr:nth-of-type(odd) td {
    background-color: rgba(185, 178, 116, 0.05) !important;
}

.table-striped tbody tr:nth-of-type(even) td {
    background-color: #2a2a2a !important;
}

/* Table dark override completo */
.table-dark,
.table-dark th,
.table-dark td {
    background-color: #2a2a2a !important;
    color: white !important;
    border-color: rgba(185, 178, 116, 0.2) !important;
}

.table-dark th {
    background-color: #b9b274 !important;
    color: #1a1a1a !important;
}

/* Compattezza generale */
.table-sm th,
.table-sm td {
    padding: 4px 8px !important;
    font-size: 10px !important;
}
/* ===== FIX PLACEHOLDER Reptil EXPO ===== */

/* Placeholder per input e textarea */
.form-control::placeholder {
    color: #888888 !important;
    opacity: 0.8 !important;
    font-style: italic !important;
}

.form-control:focus::placeholder {
    color: #b9b274 !important;
    opacity: 0.6 !important;
}

/* Placeholder per textarea specifici */
textarea.form-control::placeholder {
    color: #888888 !important;
    opacity: 0.9 !important;
}

textarea.form-control:focus::placeholder {
    color: #b9b274 !important;
    opacity: 0.7 !important;
}

/* Placeholder nei modal */
.modal .form-control::placeholder {
    color: #888888 !important;
    opacity: 0.8 !important;
}

.modal .form-control:focus::placeholder {
    color: #b9b274 !important;
    opacity: 0.6 !important;
}

/* Input nelle tabelle */
.table .form-control::placeholder {
    color: #888888 !important;
    opacity: 0.7 !important;
    font-size: 9px !important;
}

/* Placeholder per campi specifici */
#order-notes::placeholder,
#receipt-notes::placeholder {
    color: #888888 !important;
    opacity: 0.9 !important;
    font-style: italic !important;
}
/* ===== FIX TABELLE BOOTSTRAP - COLORI Reptil EXPO ===== */
.toast-icon svg,
.close-icon svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
/* ===== ALLINEAMENTO PULSANTI CON ICONE SVG ===== */
/* ===== RIMUOVI FRECCE INPUT NUMBER ===== */

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* Fix specifico per input peso e quantità */
input[type="number"].form-control,
input[type="number"].qty-input,
input[type="number"].price-input,
input[type="number"].quantity-input {
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

input[type="number"].form-control::-webkit-outer-spin-button,
input[type="number"].form-control::-webkit-inner-spin-button,
input[type="number"].qty-input::-webkit-outer-spin-button,
input[type="number"].qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* ===== RIMUOVI BORDO FOCUS INPUT ===== */

.form-control:focus {
    border-color: var(--vex-border-color) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Input generici */
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Input nelle tabelle */
.table input:focus,
.table textarea:focus,
.table select:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--vex-border-color) !important;
}

/* Input search specifici */
input[type="search"]:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--vex-border-color) !important;
}

/* Alternativa: se vuoi un focus più elegante */
.form-control:focus {
    border-color: var(--vex-accent-gold) !important;
    box-shadow: 0 0 0 1px rgba(185, 178, 116, 0.3) !important;
    outline: none !important;
}
/* TAB NAVIGATION Reptil EXPO */
.vexpos-tabs-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2a2a2a;
    border-bottom: 3px solid #b9b274;
    padding: 0 20px;
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tab-icon-16 {
    margin-bottom: 9px;
    transform: scale(2);
    margin-top: 10px;
}

.vexpos-tabs-navigation::-webkit-scrollbar {
    display: none;
}

.tabs-container {
    display: flex;
    gap: 2px;
}

.tab-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: transparent;
    color: #888888;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 6px 6px 0 0;
    position: relative;
    min-width: 100px;

}

.tab-link:hover {
    background: rgba(185, 178, 116, 0.1);
    color: #b9b274;
    transform: translateY(-2px);
}

.tab-link.active {
      color: #b9b274;
    font-weight: 900;
    transform: scale(0.9);
    background: #0000003d;
 
}

.tab-icon {
    font-size: 18px;
}

.tab-label {
    font-size: 9px;
}

.tab-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #dc3545;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

.logout-section {
    display: flex;
    gap: 18px;
}

.logout-btn {
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.3s ease;
}

.logout-btn.pos-main {
    background: #28a745;
    color: white;
}

.logout-btn.pos-main:hover {
    background: #218838;
}

.logout-btn.logout {
    background: #fd7e14;
    color: white;
}

.logout-btn.logout:hover {
    background: #e8650e;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .tab-label {
        display: none;
    }
    .tab-link {
        min-width: 50px;
        padding: 12px;
    }
}

@media (max-width: 768px) {
    .logout-section {
        flex-direction: column;
        gap: 4px;
    }
    .logout-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
}
/* BADGE TAB COLORATI */
.tab-badge {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 3px 4PX 3PX;
    border-radius: 18px;
    min-width: 20px;
    text-align: center;
    line-height: 1;
    z-index: 10;
    min-height: 20px;
}


/* Badge Rosso - Urgente/Errori */
.badge-red {
    background: #dc3545;
    color: white;
}

/* Badge Verde - Successo/Completati */
.badge-green {
    background: #28a745;
    color: white;
}

/* Badge Arancio - Warning/Pending */
.badge-orange {
    background: #fd7e14;
    color: white;
}

/* Badge Oro - Premium/Importante */
.badge-gold {
    background: #c0af6e;
    color: #1a1a1a;
    text-shadow: 0 1px 2px rgba(255,215,0,0.3);
}

/* Effetti hover sui badge */
.tab-link:hover .tab-badge {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Badge per numeri alti */
.tab-badge.high-number {
    font-size: 9px;
    padding: 2px 4px;
}

/* Badge pulsante per notifiche urgenti */
@keyframes pulse-red {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.badge-red.pulse {
    animation: pulse-red 2s infinite;
}

/* Badge per testo invece di numeri */
.tab-badge.text-badge {
    font-size: 8px;
    padding: 2px 4px;
    font-weight: 900;
    letter-spacing: 0.5px;
}