/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* VARIABILI COLORI */
:root
{	

	--colore-principale-hex: #ff0000;
	--colore-principale-rgb: rgb(255, 0, 0);
	--colore-principale-rgb-0-2: rgba(255, 0, 0, 0.2);
	--colore-principale-rgb-0-7: rgba(255, 0, 0, 0.7);
	
	--colore-secondario-hex: #a0a0a0;
	--colore-secondario-rgb: rgb(160,160, 160);
	--colore-secondario-rgb-0-1: rgba(160, 160, 160, 0.1);
	--colore-secondario-rgb-0-2: rgba(160, 160, 160, 0.2);
	--colore-secondario-rgb-0-7: rgba(160, 160, 160, 0.7);
	
}

/*FINE DICHIARAZIONI VARIABILI*/

/*Login.php*/

.form-control:focus {
    border-color: var(--colore-principale-hex) !important;
    outline: 0;
    box-shadow: 0 3px 10px 0 var(--colore-principale-rgb-0-1) !important;
}

.input-group:not(.bootstrap-touchspin):focus-within .form-control, .input-group:not(.bootstrap-touchspin):focus-within .input-group-text {
    border-color: var(--colore-principale-hex);
    box-shadow: none;
}

/*FINE login.php*/

/*Index.php*/

.main-menu.menu-light .navigation > li.active > a {
    background: linear-gradient(118deg, var(--colore-principale-hex) , var(--colore-principale-rgb-0-7)); 
    box-shadow: 0 0 10px 1px var(--colore-secondario-rgb-0-7);
    color: #fff;
    font-weight: 400;
    border-radius: 4px;
}

.main-menu.menu-dark .navigation > li.active > a {
    background: linear-gradient(118deg, var(--colore-secondario-hex) , var(--colore-secondario-rgb-0-7));
    box-shadow: 0 0 10px 1px var(--colore-principale-rgb-0-7);
    color: #fff;
    font-weight: 400;
    border-radius: 4px;
}

.main-menu.menu-light .navigation > li ul .active {
    background: linear-gradient(118deg,  var(--colore-principale-hex) , var(--colore-principale-rgb-0-7));
    box-shadow: 0 0 10px 1px var(--colore-secondario-rgb-0-7);
    border-radius: 4px;
    z-index: 1;
}

.main-menu.menu-dark .navigation > li ul .active {
    background: linear-gradient(118deg,  var(--colore-secondario-hex) , var(--colore-secondario-rgb-0-7));
    box-shadow: 0 0 10px 1px var(--colore-principale-rgb-0-7);
    border-radius: 4px;
    z-index: 1;
}


.dark-layout .main-menu .collapse-toggle-icon {
    color: var(--colore-secondario-hex) !important;
}

a {
    color: var(--colore-principale-hex);
    text-decoration: none;
}

a:hover{
    color: var(--colore-secondario-hex);
    text-decoration: none;

}

html .content .content-wrapper .content-header-title {
    font-weight: 500;
    color: var(--colore-principale-hex);
    padding-right: 1rem;
    border-right: 1px solid #d6dce1;
}

.breadcrumb-item.active {
    color: var(--colore-principale-hex);
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--colore-principale-hex);
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.65rem 1.28rem;
    clear: both;
    font-weight: 400;
    color: var(--colore-principale-hex);
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-item:hover, .dropdown-item:focus {
  color: var(--colore-secondario-hex);
  background-color: var(--colore-secondario-rgb-0-2); 
  }

.badge.badge-light-danger {
    background-color: var(--colore-secondario-rgb-0-2);
    color: var(--colore-secondario-hex) !important;
}

.btn-primary {
    border-color: var(--colore-principale-hex) !important;
    background-color: var(--colore-principale-hex) !important;
    color: #fff !important;
}

.btn-primary:focus, .btn-primary:active, .btn-primary.active {
    color: #fff;
    background-color: var(--colore-secondario-hex) !important;
}

.btn-primary:hover:not(.disabled):not(:disabled) {
    box-shadow: 0 8px 25px -8px var(--colore-secondario-hex);
}

.alert-primary {
    background: var(--colore-secondario-rgb-0-2) !important;
    color: var(--colore-secondario-hex) !important;
}

.text-primary {
    color: var(--colore-principale-hex) !important;
}

.main-menu .navbar-header .navbar-brand .brand-text {
    color: var(--colore-principale-hex);
    padding-left: 1rem;
    margin-bottom: 0;
    font-weight: 600;
    letter-spacing: 0.01rem;
    font-size: 1.45rem;
    animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 fadein;
}

.header-navbar .navbar-container ul.navbar-nav li i.ficon:hover, .header-navbar .navbar-container ul.navbar-nav li svg.ficon:hover {
    color: var(--colore-secondario-hex);
}

.page-item.active .page-link {
    z-index: 3;
    border-radius: 5rem;
    background-color: var(--colore-principale-hex);
    color: #fff !important;
    font-weight: 600;
}
/*FINE index.php*/

.flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.selected:hover {
    background: var(--colore-principale-hex);
    color: #FFF;
    border-color: var(--colore-principale-hex);
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    top: 50%;
    left: 5px;
    height: 1em;
    width: 1em;
    margin-top: -9px;
    display: block;
    position: absolute;
    color: white;
    border: .15em solid white;
    border-radius: 1em;
    box-shadow: 0 0 0.2em #444;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: "Courier New",Courier,monospace;
    line-height: 1em;
    content: "+";
    background-color: var(--colore-principale-hex);
}

.flatpickr-calendar .flatpickr-day.today {
    border-color: var(--colore-principale-hex);
}

.form-select:focus {
  border-color: var(--colore-principale-hex);
  outline: 0;
  box-shadow: 0 3px 10px 0 rgba(34, 41, 47, 0.1); 
}
  
html .pace .pace-progress {
    background: var(--colore-principale-hex);
}

.nav-tabs .nav-link.active {
    position: relative;
    color: var(--colore-principale-hex);
}

.nav-tabs .nav-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
30deg
, var(--colore-principale-hex), var(--colore-secondario-rgb-0-7)) !important;
    transition: transform 0.3s;
    transform: translate3d(0, 150%, 0);
}

.btn-relief-primary {
    background-color: var(--colore-principale-hex);
    box-shadow: inset 0 -3px 0 0 rgb(34 41 47 / 20%);
    color: #fff;
    transition: all 0.2s ease;
}

.btn-relief-primary:active, .btn-relief-primary.active, .btn-relief-primary:focus {
    background-color: var(--colore-principale-hex);
}

.btn-relief-primary:hover:not(.disabled):not(:disabled) {
    background-color: var(--colore-principale-rgb-0-7);
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--colore-principale-hex) !important;
    border-color: var(--colore-secondario-hex) !important;
    color: #fff;
    padding: 2px 5px;
}

.select2-container--classic.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--colore-principale-hex) !important;
    outline: 0;
}

.select2-container--classic .select2-results__option--highlighted, .select2-container--default .select2-results__option--highlighted {
    background-color: var(--colore-principale-rgb-0-2) !important;
    color: var(--colore-principale-hex) !important;
}

.select2-container--classic .select2-results__option[aria-selected='true'], .select2-container--default .select2-results__option[aria-selected='true'] {
    background-color: var(--colore-principale-hex) !important;
    color: #fff !important;
}

.select2-container--classic.select2-container--open .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--colore-principale-hex) !important;
    outline: 0;
}

.select2-container--classic .select2-selection--single:focus, .select2-container--default .select2-selection--single:focus {
    outline: 0;
    border-color: var(--colore-principale-hex) !important;
    box-shadow: 0 3px 10px 0 rgb(34 41 47 / 10%) !important;
}

.btn-outline-primary {
    border: 1px solid var(--colore-principale-hex) !important;
    background-color: transparent;
    color: var(--colore-principale-hex);
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):focus {
    background-color: var(--colore-principale-rgb-0-2);
    color: var(--colore-principale-hex);
}

.btn-outline-primary:hover:not(.disabled):not(:disabled) {
    background-color: var(--colore-principale-rgb-0-2);
    color: var(--colore-principale-hex);
}

.btn-outline-primary:disabled, .btn-outline-primary.disabled {
    color: var(--colore-principale-hex);
    background-color: transparent;
}

.form-check-input:checked {
    background-color: var(--colore-principale-hex);
    border-color: var(--colore-principale-hex);
}

.form-check-input:focus {
    border-color: var(--colore-secondario-hex);
    outline: 0;
    box-shadow: 0 2px 4px 0 rgb(115 103 240 / 40%);
}

.fc .fc-button-primary:disabled {
    color: #fff;
    color: var(--fc-button-text-color, #fff);
    background-color: #2C3E50;
    background-color: var(--colore-principale-rgb-0-7, #2C3E50);
    border-color: #2C3E50;
    border-color: var(--colore-principale-hex, #2C3E50);
}

.fc .fc-button-primary {
    color: #fff;
    color: var(--fc-button-text-color, #fff);
    background-color: #2C3E50;
    background-color: var(--colore-principale-hex, #2C3E50);
    border-color: #2C3E50;
    border-color: var(--colore-principale-hex, #2C3E50);
}

.fc .fc-button-primary:not(:disabled):active, .fc .fc-button-primary:not(:disabled).fc-button-active {
    color: #fff;
    color: var(--fc-button-text-color, #fff);
    background-color: #1a252f;
    background-color: var(--colore-secondario-hex, #1a252f);
    border-color: #151e27;
    border-color: var(--colore-secondario-hex, #151e27);
}

.btn-flat-primary {
    background-color: transparent;
    color: var(--colore-principale-hex);
}

.btn-flat-primary:active, .btn-flat-primary.active, .btn-flat-primary:focus {
    background-color: var(--colore-principale-rgb-0-2);
    color: var(--colore-principale-hex);
}

.btn-flat-primary:hover:not(.disabled):not(:disabled) {
    background-color: var(--colore-principale-rgb-0-2);
}

.btn-flat-primary:hover {
    color: var(--colore-principale-hex);
}

.text-primario {
    --bs-text-opacity: 1;
    color: rgba(var(--colore-principale-hex), var(--bs-text-opacity)) !important;
}

.text-secondario {
    --bs-text-opacity: 1;
    color: rgba(var(--colore-secondario-hex), var(--bs-text-opacity)) !important;
}

.dropdown-menu .dropdown-item {
    width: 100%;
    cursor: pointer;
}

/* Barcode SVG styling: make them block-level, limit size and avoid overlapping adjacent fields */
.barcode-svg {
    display: block;
    max-width: 100%;
    height: auto !important;
    max-height: 120px; /* avoid very tall barcodes */
    margin-bottom: 0.5rem;
}

/* Ensure ubicazione textarea stays above any absolutely positioned elements */
#up_ubicazione_attrezzo {
    position: relative;
    z-index: 1;
}

@media (max-width: 767.98px) {
    .barcode-svg {
        max-height: 80px;
    }
}

/* Fix altezza menu laterale per partire dall'alto della pagina */
.main-menu.menu-fixed {
    top: 0 !important;
}

/* =================================================================
   BOTTONI FLOATING - Posizionamento orizzontale
   Ordine da sinistra a destra:
   1. Arrow-up/Scroll-top (più a sinistra)
   2. Manuale/Guida (al centro)
   3. Chat button (più a destra)
   ================================================================= */

/* Chat floating button - Più a destra */
.chat-float-btn {
    bottom: 24px !important;
    right: 24px !important;
    z-index: 9990 !important;
}

/* Manuale/Guida button - Al centro */
#btn-manuale-uso {
    position: fixed !important;
    bottom: 24px !important;
    right: 100px !important; /* 24 + 60 (larghezza chat) + 16 (gap) */
    width: 60px !important;
    height: 60px !important;
    z-index: 9992 !important;
    background: linear-gradient(135deg, var(--colore-principale-hex) 0%, var(--colore-principale-rgb-0-7) 100%) !important;
    box-shadow: 0 8px 25px var(--colore-principale-rgb-0-2) !important;
}

/* Scroll-top button - Più a sinistra */
.scroll-top {
    bottom: 24px !important;
    right: 176px !important; /* 100 + 60 (larghezza manuale) + 16 (gap) */
    z-index: 9991 !important;
}

/* Responsive - su mobile riduco lo spazio e le dimensioni */
@media (max-width: 767.98px) {
    .chat-float-btn {
        bottom: 16px !important;
        right: 16px !important;
        width: 50px !important;
        height: 50px !important;
    }
    
    #btn-manuale-uso {
        bottom: 16px !important;
        right: 78px !important; /* 16 + 50 (larghezza chat) + 12 (gap) */
        width: 50px !important;
        height: 50px !important;
    }
    
    .scroll-top {
        bottom: 16px !important;
        right: 140px !important; /* 78 + 50 (larghezza manuale) + 12 (gap) */
    }
}

.btn-gradient-primary {
    color: #fff;
    transition: all 0.2s ease;
    background-image: linear-gradient(47deg, var(--colore-principale-hex), var(--colore-secondario-hex));
    background-repeat: repeat;
}

.bg-gradient-primary:active, .bg-gradient-primary:focus, .btn-gradient-primary:active, .btn-gradient-primary:focus {
    background-image: linear-gradient(47deg, var(--colore-principale-hex), var(--colore-secondario-hex));
    background-repeat: repeat;
}

.nav-pills .nav-link.active {
    border-color: var(--colore-principale-hex);
    box-shadow: 0 4px 18px -4px var(--colore-principale-rgb-0-7);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--colore-principale-hex);
}