@charset "UTF-8";

/* Font da Google */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=League+Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');



/*-----------------------------------
-------0) Reset / Normalize----------
-------------------------------------*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*------------------------------------------
-------1) Variabili e design tokes----------
---------------------------------------------*/

:root,
[data-bs-theme=light] {
    --bs-primary: #3A8596;
    --bs-secondary: #9ea8aa;
    --bs-warning: #FFC86C;
    --bs-danger: #F0686A;
    --bs-dark: #222;
    --bs-primary-rgb: 58, 133, 150;
    --bs-secondary-rgb: 158, 168, 170;
    --bs-warning-rgb: 255, 200, 108;
    --bs-danger-rgb: 240, 104, 106;
    --bs-dark-rgb: 34, 34, 34;
    --bs-link-color: #3A8596;
    --bs-link-color-rgb: 58, 133, 150;
    --bs-link-hover-color: #2e6a78;
    --bs-link-hover-color-rgb: 46, 106, 120;
    --blade-primary-900: #081926;
    --blade-primary-800: #133B59;
    --blade-primary-700: #1F5D8C;
    --blade-primary-600: #087990;
    --blade-primary-550: #2B8ED9;
    --blade-primary-500: #3A8596;
    --blade-primary-450: #0AB5DA;
    --blade-primary-400: #66B5F2;
    --blade-primary-300: #98CCF5;
    --blade-primary-200: #B2D9F7;
    --blade-primary-150: #CDE6FA;
    --blade-primary-100: #E6F1FA;
    --blade-primary-50: #F7FCFF;
    --blade-secondary-900: #5C3D0F;
    --blade-secondary-700: #A67224;
    --blade-secondary-600: #D9962F;
    --blade-secondary-500: #F2A735;
    --blade-secondary-400: #F5BC67;
    --blade-secondary-300: #F7D399;
    --blade-secondary-100: #FAEEDC;
    --blade-black: #13151A;
    --blade-grey-900: #2C3033;
    --blade-grey-800: #485159;
    --blade-grey-700: #828E99;
    --blade-grey-600: #9DA9B2;
    --blade-grey-500: #B8C3CC;
    --blade-grey-400: #C6D2DB;
    --blade-grey-300: #CFDBE5;
    --blade-grey-200: #E6EDF2;
    --blade-grey-150: #F0F4F7;
    --blade-grey-100: #F7F9FA;
    --blade-grey-50: #FAFBFC;
    --blade-white: #fff;
    --blade-green-900: #18592E;
    --blade-green-700: #268C48;
    --blade-green-500: #37CC69;
    --blade-green-300: #77E59D;
    --blade-green-100: #CFFADE;
    --blade-yellow-900: #91711A;
    --blade-yellow-700: #C79A24;
    --blade-yellow-500: #F7CC20;
    --blade-yellow-300: #F7DB74;
    --blade-yellow-100: #FAEEC0;
    --blade-red-900: #6E1A08;
    --blade-red-700: #A62C1C;
    --blade-red-500: #bf4d4c;
    --blade-red-300: #F0686A;
    --blade-red-100: #FFCABD;
    --blade-red-50: #FFEFEB;
}

:root {
    --primary-color: #185ee0;
    --secondary-color: #e6eef9;
}

.blade-blu {
    color: #3A8596;
}

/*----------------------
-------2) Base----------
------------------------*/

body {
    font-family: "Hanken Grotesk", "League Spartan";
    color: #222;
    background-color: #fafafa;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-size: 14px;
}

/* Tipografia */

.h1 {
    font-size: 30px;
    text-transform: uppercase;
    font-weight: bold;
    font-family: "League Spartan";
    line-height: 1.3;
}

.h2 {
    font-family: "League Spartan";
    line-height: 1.2;
    font-size: 22px;
    margin-bottom: 15px;
}

.h5,
h5 {
    font-family: "League Spartan";
    line-height: 1.2;
    font-size: 22px;
}

/* Link */

a {
    color: #3A8596;
    text-decoration: underline;
}

a:link,
a:visited {
    color: #3A8596;
}

/* Blockquote */

.blockquote> :last-child {
    margin-bottom: 0;
}

.blockquote-footer::before {
    content: "— ";
}

/*----------------------------------
-------3) Layout generali ----------
----------------------------------*/

/* Topbar */

#topbar,
.topbar {
    background-color: #3A8596;
    max-height: 65px;
    height: 65px;
}

#topbar .navbar-brand>img,
.topbar .navbar-brand>img {
    height: 40px;
}

.navbar-red {
    background-color: #ee6c6c !important;
}

.pulsanti-topbar {
    margin-right: 20px;
    padding: .25rem;
    gap: 12px;
    align-items: center;
}

.pulsanti-topbar>* {
    border: none!important;
}

.icon-container-btn-header {
    width: 18px;
    height: 18px;
}

.top-card-buttons {
    position: absolute;
    left: auto;
    right: 1.5rem;
    top: 1rem;
    width: fit-content;
    max-width: 30%;
    text-align: right;
}

.top-card-buttons>* {
    display: inline-block;
}

/* sidebar */

.sidebar {
    background-color: #fff;
    border-right: 1px solid #dee2e6;
    max-width: 245px;
    min-width: 245px;
}

.sidebar-mobile {
    background-color: #fff;
    border-right: 1px solid #dee2e6;
}

.sidebar a {
    color: #222;
}

.sidebar ul li a:hover,
.sidebar ul li a.active {
    background-color: #c1dadf;
}

#sidebar .nav-link {
    padding-left: 25px;
}

.sidebar span.blade-sidebar-title {
    padding-left: 15px;
}

/* workspace */

#workspace {
    background-color: #fafafa;
}

@media (min-width: 768px) {

    #workspace {
        max-width: calc(100% - 240px);
    }

}

#workspace.full-screen {
    max-width: 100%;
    width: 100%;
}

/* pagebody */

.pagebody {
    min-height: fit-content;
}

/* pagehead */

.pagehead {
    padding: 32px 32px 16px 32px;
    border-bottom: none;
}

@media (max-width: 576px) {

    #pagehead {
        padding: 24px 24px 20px 24px;
    }

}

.page-title-container {
flex-grow: 2;
}

.page-title {
    font-size: 30px;
    text-transform: uppercase;
    font-weight: bold;
    font-family: "League Spartan";
    line-height: 1.3;
    margin-bottom: 0;
}

.workspace-header-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 24px;
}

.cta-pagehead-container {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    flex: 1;
}

select.form-select.icona-filtra {
    width: 320px;
}

@media (max-width: 576px) {
    select.form-select.icona-filtra {
    width: 240px;
}
}

.subtitle-container {
    max-width: 70%;
}

/* login */

.sfondo-login {
    background-color: #3A8596;
}

.sfondo-authenticate-message {
    background-color: #fafafa;
}

.password-dimenticata {
    margin-top: -5px;
}

/*----------------------------------
------- 4) Components ----------
----------------------------------*/

/*------ TYPOGRAPHY & SHARED UTILITIES ------*/

/* Stili condivisi per intestazioni tabelle e sidebar */
/* NOTA: Questo blocco appare duplicato nel codice originale, 
   li ho raggruppati qui per coerenza ma mantengo entrambi come da istruzioni. */

th,
.sidebar span.blade-sidebar-title,
.disabled-text,
span.blade-sidebar-title {
    color: #889699 !important;
    font-size: 10px;
    text-transform: uppercase;
    font-family: "Hanken Grotesk";
    font-weight: 500;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

th,
.sidebar span.blade-sidebar-title,
span.blade-sidebar-title,
.blade-disabled-text {
    color: #889699 !important;
    font-size: 10px;
    text-transform: uppercase;
    font-family: "Hanken Grotesk";
    font-weight: 500;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*------ FORMS ------*/

/* Input Text & General Controls */
/*classe bootstrap*/
.form-control {
    padding: 10px 18px 10px 18px;
    -moz-padding-start: calc(0.75rem - 3px);
    color: #889699;
    background-color: #fff;
    border: 1px solid #eee;
}

/*classe bootstrap*/
.form-control:focus {
    border-color: #9dc2cb;
    box-shadow: 0 0 0 0.25rem rgba(58, 133, 150, 0.25);
}

/* Selects */
/*classe bootstrap*/
.form-select {
    padding: 12px 18px 12px 18px;
    line-height: 1.2;
    color: #889699;
    background-color: #fff;
    background-image: url("font-awesome-icons/chevron-down-icon.adcd35715afa.svg");
    border: 1px solid #eee;
}

/*classe bootstrap*/
.form-select:focus {
    border-color: #9dc2cb;
    box-shadow: 0 0 0 0.25rem rgba(58, 133, 150, 0.25);
}

/*classe bootstrap*/
.form-select:disabled {
    filter: opacity(1);
}

/* Checkboxes & Radios */
/*classe bootstrap*/
.form-check-input:focus {
    border-color: #9dc2cb;
    box-shadow: 0 0 0 0.25rem rgba(58, 133, 150, 0.25);
}

/* Form Check Standard */
.form-check-input[type=checkbox]:indeterminate {
    /* Bootstrap Native */
    background-color: #3A8596;
    border-color: #3A8596;
}

/*classe bootstrap*/
.form-check-input:checked {
    background-color: #3A8596;
    border-color: #3A8596;
}

/*classe bootstrap*/
.form-check-input:checked[type=checkbox] {
    background-image: url("font-awesome-icons/check-icon.3c206490757a.svg");
    background-size: 8px 6px;
}

/*classe bootstrap*/
.form-check-input:checked[type=checkbox]:disabled {
    background-image: url("font-awesome-icons/check-icon-grey.9be112c2a829.svg");
}

/* Switches */
/*classe bootstrap*/
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("font-awesome-icons/circle-blue.47e8710fd1ed.svg");
}

/* Ranges */
/*classe bootstrap*/
.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(58, 133, 150, 0.25);
}

/* Radio Button Label Logic */
input[type="radio"]:checked+label {
    color: #fff;
}

/* Stati Radio Label */
label:has(input:checked) .radio-label-button {
    background-color: #398796;
    color: #F0F0F0;
}

label:has(input:checked) .radio-label-button-red {
    background-color: #f17373 !important;
    color: #711b24 !important;
}

label:has(input:checked) .radio-label-button-green {
    background-color: #58d78d !important;
    color: #115d3a !important;
}

.radio-label-button-always-red {
    background-color: #f17373 !important;
    color: #711b24;
}

/* Blue Radio variant */
.blue-radio {
    border: 1px solid #3A8596;
    color: #3A8596;
}

.blue-radio:hover {
    background-color: #3A8596;
    color: white;
}

.blue-radio:has(input[type="radio"]:checked) {
    background-color: #3A8596;
    color: white;
}

/* Green Radio variant */
.green-radio {
    border: 1px solid #0F8250;
    color: #0F8250;
}

.green-radio:hover {
    background-color: #0F8250;
    color: white;
}

.green-radio:has(input[type="radio"]:checked) {
    background-color: #0F8250;
    color: white;
}

.colored-radio:has(input[type="radio"]:disabled) {
    opacity: 50%;
}



/* Disabled States (Global & Specific) */

/* Specifico per input disabilitati */
input:disabled {
    background-color: #F7FAFB !important;
    border: 1px solid #eee !important;
    margin-bottom: 20px;
}

/* Specifico per select disabilitati */
select:disabled {
    background-color: #F7FAFB !important;
    border: 1px solid #eee !important;
    margin-bottom: 20px;
}

/* GENERICO: Attenzione, questo selettore colpisce qualsiasi elemento disabilitato nel DOM */
/*possibile conflitto*/
:disabled {
    filter: opacity(0.5);
    margin-bottom: 0;
}


/*------ TABLES ------*/

/* Table Styles Override */
/*classe bootstrap*/
.table> :not(caption)>*>* {
    padding: 0.5rem 0.5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: var(--bs-border-width);
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

/*classe bootstrap*/
.table-sm> :not(caption)>*>* {
    padding: 0.25rem 0.25rem;
}

/*classe bootstrap*/
.table-bordered> :not(caption)>* {
    border-width: var(--bs-border-width) 0;
}

/*classe bootstrap*/
.table-bordered> :not(caption)>*>* {
    border-width: 0 var(--bs-border-width);
}

/*classe bootstrap*/
.table-borderless> :not(caption)>*>* {
    border-bottom-width: 0;
}

/*classe bootstrap*/
.table-borderless> :not(:first-child) {
    border-top-width: 0;
}

/* Custom Table Containers & Actions */
.table-action-container {
    margin-bottom: 8px;
}

.table-responsive {
    border: none;
}

thead th {
    background-color: transparent!important;
}

/* Logica condizionale per azioni tabella nelle card */
[data-card]:not(:has(table tbody tr)) [data-actions-for-table] {
    display: none !important;
}


/*------ PAGINATION ------*/

/*classe bootstrap*/
.pagination {
    --bs-pagination-padding-x: 1rem;
    --bs-pagination-padding-y: 0.5rem;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(58, 133, 150, 0.25);
    --bs-pagination-active-bg: #3A8596;
    --bs-pagination-active-border-color: #3A8596;
    border: 1px solid #eee;
    border-radius: 90px;
    padding: 10px 13px;
    margin-top: 15px;
    background-color: #F2F7F8;
}

/* Custom Pagination Buttons */
.pagination-btn {
    background-color: #F2F7F8;
    border: none;
    border-radius: 50px;
    padding: 8px 15px;
    color: #3a8596;
    text-decoration: underline;
    transition: 0.3s;
}

.pagination-btn:hover {
    background-color: #3a8596;
    border: none;
    border-radius: 50px;
    padding: 8px 15px;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

/*-------------- BOTTONI (Specifi per Tabelle) ------------ */

/* Blue Table Action Button */
.blade-btn-table-action {
    font-size: 0.7rem;
    color: #3A8596;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #3A8596;
    border-radius: 50px;
    font-family: "Hanken Grotesk";
    font-weight: 500;
    margin-top: -1px;
    margin-left: 3px;
    transition: 0.2s;
    position: relative;
    text-decoration: none !important;
}

.blade-btn-table-action:hover {
    border: 1px solid #3A8596;
}

/* Red Table Action Button */
.btn-delete-table-action {
    font-size: 0.7rem;
    color: #f0686a;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #f0686a;
    border-radius: 50px;
    font-family: "Hanken Grotesk";
    font-weight: 500;
    margin-top: -1px;
    margin-left: 3px;
    transition: 0.2s;
    position: relative;
    text-decoration: none !important;
}

.btn-delete-table-action:hover {
    border: 1px solid #f0686a;
    background-color: #f0686a;
    color: #fff;
}

/*------ BUTTONS ------*/

/* Bootstrap Base Overrides */
/*classe bootstrap*/
.btn {
    --bs-btn-line-height: 0.7;
    --bs-btn-border-radius: 100px;
    --bs-btn-font-family: "Hanken Grotesk";
    box-shadow: var(--bs-btn-box-shadow);
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: 0.2s;
    text-decoration: none;
}

.btn:hover {
    box-shadow: var(--bs-btn-hover-box-shadow);
}

.btn:focus {
    box-shadow: var(--bs-btn-focus-box-shadow);
}

.btn:active {
    box-shadow: var(--bs-btn-active-box-shadow);
}

a.btn {
    color: var(--bs-btn-color);
}

/*------ CUSTOM BUTTON VARIANTS (Blade System) ------*/

/* 1. Blade Button Primary */

.btn-primary, a.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3A8596;
    --bs-btn-border-color: #3A8596;
    --bs-btn-border-width: 1px;
    --bs-btn-font-size: 13px;
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 11px;
    --bs-btn-font-weight: 500;
    --bs-btn-box-shadow: 0 4px #044250;
    --bs-btn-hover-box-shadow: 0 4px #044250;
    --bs-btn-focus-box-shadow: 0 4px #044250;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3A8596;
    --bs-btn-hover-border-color: #3A8596;
    --bs-btn-focus-shadow-rgb: 49, 113, 128;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3A8596;
    --bs-btn-active-border-color: #3A8596;
    --bs-btn-active-box-shadow: 0 1px #044250;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #3A8596;
    --bs-btn-disabled-border-color: #3A8596;
}

.btn-primary:active, a.btn-primary:active {
    transform: translateY(3px);
}

/* 2. Blade Button Secondary */

.btn-secondary {
    --bs-btn-color: #3A8596;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #3A8596;
    --bs-btn-border-width: 1px;
    --bs-btn-font-size: 13px;
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 11px;
    --bs-btn-font-weight: 500;
    --bs-btn-box-shadow: none;
    --bs-btn-hover-box-shadow: none;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3A8596;
    --bs-btn-hover-border-color: #3A8596;
    --bs-btn-focus-shadow-rgb: 49, 113, 128;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3A8596;
    --bs-btn-active-border-color: #3A8596;
    --bs-btn-active-box-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #3A8596;
    --bs-btn-disabled-border-color: #3A8596;
}

/*-- Btn secondary in tables */

tbody:not(:has(tr.ui-sortable-helper)):not(:has(.jqs-day)):not(:has(.month-day)) tr:hover,
.ui-sortable-placeholder {
    transition: 0.2s;
}

tbody:not(:has(tr.ui-sortable-helper)):not(:has(.jqs-day)) tr:hover .btn-secondary,
tr.ui-sortable-placeholder .btn-secondary {
    --bs-btn-bg: #3A8596;
    --bs-btn-color: #fff;
    transition: 0.2s;
}

tbody:not(:has(tr.ui-sortable-helper)):not(:has(.jqs-day)) tr:hover .btn-secondary:active,
tr.ui-sortable-placeholder .btn-secondary:active {
    --bs-btn-bg: #3A8596;
    --bs-btn-color: #fff;
    transition: 0.2s;
}

tbody:not(:has(tr.ui-sortable-helper)):not(:has(.jqs-day)) tr:hover .btn-secondary svg path {
    fill: #fff;
}

/* 6. Blade Button Round & Outline Variants */

.blade-btn-round,
.blade-btn-round-outline {
    width: 26px;
    padding: 6px 0;
}

.blade-round-btn {
    padding: 10px;
    margin: 0 5px;
    font-size: 12px;
    text-overflow: clip !important;
}

.blade-round-btn:hover {
    padding: 10px;
    margin: 0 5px;
    font-size: 12px;
}

.blade-round-btn:active {
    padding: 10px;
    margin: 5px 5px 0 5px;
    font-size: 12px;
}

/*classe bootstrap*/
.blade-btn-round-outline,
.btn-outline-light {
    --bs-btn-color: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #f8f9fa;
    --bs-btn-hover-border-color: #f8f9fa;
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #f8f9fa;
    --bs-btn-active-border-color: #f8f9fa;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #f8f9fa;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f8f9fa;
    --bs-gradient: none;
}

/* 7. Blade Button Shade */
.blade-btn-shade {
    background-color: #3A8596;
    box-shadow: 0 3px #044250;
}

/* 8. Modal Specific Buttons */
.btn-save-modal:active {
    margin-bottom: -4px;
}

/* Pulsante filtri di SCUBO */
.form-icon {
    font-size: 1.8rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    margin: var(--bs-border-width);
}

label.form-icon:has(input:checked) {
    background-color: var(--bs-tertiary-bg);
    border-radius: 5px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    margin: 0;
}

/* Helper Utilities for Buttons */

.btn-round-small {
    --bs-btn-border-radius: 100px;
    --bs-btn-font-size: 13px;
    aspect-ratio: 1;
    --bs-btn-padding-x: 6px;
    --bs-btn-padding-y: 3px;
}

.btn-ghost-white {
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: #fff;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #fff;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
}

/* BTN DELETE */

.btn-delete {
    --bs-btn-color: #fff;
    --bs-btn-bg: #f0686a;
    --bs-btn-border-color: #f0686a;
    --bs-btn-border-width: 1px;
    --bs-btn-font-size: 13px;
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 11px;
    --bs-btn-font-weight: 500;
    --bs-btn-box-shadow: 0 4px #bf4d4c;
    --bs-btn-hover-box-shadow: 0 4px #bf4d4c;
    --bs-btn-focus-box-shadow: 0 4px #bf4d4c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #f0686a;
    --bs-btn-hover-border-color: #f0686a;
    --bs-btn-focus-shadow-rgb: 49, 113, 128;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #f0686a;
    --bs-btn-active-border-color: #f0686a;
    --bs-btn-active-box-shadow: 0 1px #bf4d4c;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #f0686a;
    --bs-btn-disabled-border-color: #f0686a;
}

.btn-delete:active {
    transform: translateY(3px);
}

.btn-secondary.btn-delete {
    --bs-btn-color: #f0686a;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #f0686a;
    --bs-btn-box-shadow: none;
    --bs-btn-hover-box-shadow: none;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #f0686a;
    --bs-btn-hover-border-color: #f0686a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #f0686a;
    --bs-btn-active-border-color: #f0686a;
    --bs-btn-active-box-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #f0686a;
    --bs-btn-disabled-border-color: #f0686a;
}

.btn-secondary.btn-delete:active {
    transform: none;
}

/*-- Btn delete in tables */

tbody:not(:has(tr.ui-sortable-helper)):not(:has(.jqs-day)) tr:hover .btn-secondary.btn-delete,
tr.ui-sortable-placeholder .btn-secondary.btn-delete {
    --bs-btn-bg: #f0686a;
    --bs-btn-color: #fff;
    transition: 0.2s;
}

tbody:not(:has(tr.ui-sortable-helper)):not(:has(.jqs-day)) tr:hover .btn-secondary.btn-delete:active,
tr.ui-sortable-placeholder .btn-secondary.btn-delete:active {
    --bs-btn-bg: #f0686a;
    --bs-btn-color: #fff;
    transition: 0.2s;
}

/* BTN CLOSE */

.btn-close {
    --bs-btn-close-color: #fff;
    --bs-btn-close-border-color: #F0686A;
    --bs-btn-close-hover-color: #fff;
    --bs-btn-close-hover-bg: #F0686A;
    --bs-btn-close-hover-border-color: #F0686A;
    --bs-btn-active-bg: #F0686A;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: #F0686A;
    --bs-btn-close-font-size: 10px;
    --bs-btn-close-font-family: "Hanken Grotesk";
    --bs-btn-close-font-weight: 500;
    --bs-btn-close-box-shadow: 0 3px #bf4d4c;
    --bs-btn-close-bg: url("font-awesome-icons/cross_white.b7f0b9fd9a7f.svg");
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgb(240 104 106 / 25%);
    --bs-btn-close-opacity: 1;
    --bs-btn-close-hover-opacity: 1;
    --bs-btn-close-focus-opacity: 1;
    border-radius: 100px;
    background-color: #F0686A;
    box-shadow: 0 3px #BF4D4C;
    transition: 0.3s;
    margin: 1px 0 13px 0 !important;
    line-height: 1px;
    background-size: 11px;
}

.btn-close:active {
    margin-top: 4px !important;
    margin-bottom: 10px !important;
    box-shadow: none;
}

.btn-icon {
    padding: 6px 9px;
}

/* btn vista calendario */
.btn-vista-calendario {
    --bs-btn-font-size: 13px;
    --bs-btn-color: #889699;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #eee;
    --bs-btn-border-width: 1px;
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: 13px;
    --bs-btn-padding-y: 8px;
    --bs-btn-hover-color: #3a8596;
    --bs-btn-hover-bg: #F2F7F8;
    --bs-btn-hover-border-color: #3A8596;
    --bs-btn-active-color: #3a8596;
    --bs-btn-active-bg: #F2F7F8;
    --bs-btn-active-border-color: #3A8596;
    position: relative;
}

/*------ INPUT GROUPS ------*/

/* Base Input Group */
/*classe bootstrap*/
.input-group {
    margin-bottom: 20px;
}

/*----------------------------------
------- 4) Components (Part 2) ---
----------------------------------*/

/*------ CARDS & CONTAINERS ------*/

.section {
    width: 100%;
    position: relative;
    background-color: #fff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 6px;
    padding: 1.5rem;
}

/* .section-card {
    border: 1px solid var(--blade-grey-200);
    padding: 32px;
} */

:has(>.section-card) {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Base Card Style */
/*classe bootstrap*/
.card {
    background-color: #fff;
    border: 1px solid var(--bs-gray-200);
}

/*------ DROPDOWN MENUS ------*/

/* Dropdown Container Override */
/*classe bootstrap*/
.dropdown-menu {
    --bs-dropdown-link-active-bg: #3A8596;
}

/* Dropdown Items */
/*classe bootstrap*/
.dropdown-item {
    padding: 6px 8px 6px 8px !important;
}

/* Custom Button inside Dropdown */
/* NOTA: Bootstrap usa .dropdown-item, qui si stilizzano i button generici dentro il menu */
.dropdown-menu button {
    font-size: 12px;
    padding: 1px;
    width: 100%;
}

.dropdown-menu button:hover {
    background-color: #F2F7F8;
}


/*------ NAVIGATION TABS (Pills) ------*/

/* Custom Tab Containers */
/* NOTA: Utilizzo di ID per lo stile (specificità alta) */
ul#pills-tab-small {
    border: 1px solid var(--blade-grey-400);
}

ul#pills-tab {
    border-radius: 6px;
    border: 1px solid var(--blade-grey-400);
    padding: 8px;
    width: fit-content;
}

/* Active State for Pills */
/*classe bootstrap*/
.nav-pills .nav-link.active {
    color: var(--blade-primary-500);
    background-color: var(--blade-primary-100);
}


/*------ ACCORDION ------*/

/* Accordion Variables Override */
/*classe bootstrap*/
.accordion {
    --bs-accordion-btn-focus-border-color: #9dc2cb;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(58, 133, 150, 0.25);
}

/* Accordion Button State */
/*classe bootstrap*/
.accordion-button:not(.collapsed) {
    color: #222;
    background-color: #F2F7F8;
}

/* Accordion Icon Override */
/*classe bootstrap*/
.accordion-button:not(.collapsed)::after {
    background-image: url("font-awesome-icons/chevron-down-icon.adcd35715afa.svg");
    filter: brightness(0.2);
}

/* Accordion Border Radius Logic */
/*classe bootstrap*/
.accordion-item:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/*classe bootstrap*/
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/*classe bootstrap*/
.accordion-item:last-of-type {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

/* Accordion Body */
/*classe bootstrap*/
.accordion-body {
    padding: 35px 30px;
}

/* Custom Active/Collapse States logic with :has selector */
/*possibile conflitto: :has non è supportato su browser molto vecchi */
.accordion-item:has(div.accordion-collapse.show)+.accordion-item {
    border-top: 1px solid #dee2e6 !important;
    transition: 0.3s;
}

.accordion-item:has(div.accordion-collapse.show),
.accordion-item:has(div.accordion-collapse.collapsing) {
    border-left: 5px solid #3A8596 !important;
    margin: 25px 0;
}


/*------ MODALS ------*/

/* Modal Content & Structure */
/*classe bootstrap*/
.modal-content {
    background-color: #fff;
}

.side-modal .modal-body .modal-body-form-inner {
    gap: 8px;
}

/*classe bootstrap*/
.modal-content .h2 {
    font-family: "Hanken Grotesk";
    line-height: 1.2;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.footer-modal {
    padding-top: 12px;
    border-top: var(--bs-border-width) var(--bs-border-style) #CFDBE5;
}

/* Form Elements inside Modals (Contextual Overrides) */
/* Sovrascrive i form control definiti nella parte 1 quando sono dentro un modale */
.modal-content .form-control {
    color: #222;
    background-color: #fff;
    border: 1px solid #eee;
    margin-bottom: 20px;
}

.modal-content .form-select {
    color: #222;
    background-color: #fff;
    background-image: url("font-awesome-icons/chevron-down-icon.adcd35715afa.svg") !important;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 13px 10px;
    border: 1px solid #eee;
    margin-bottom: 20px;
}

.modal .section {
    border: none;
}

/*------ TOOLTIPS & POPOVERS ------*/

/* Tooltips */
/* NOTA: Manca il punto (.) davanti alla classe nel CSS originale. È un errore di sintassi ma non lo correggo */
tooltip-inner {
    color: var(--bs-tooltip-color);
    text-align: center;
    background-color: var(--bs-tooltip-bg);
    border-radius: var(--bs-tooltip-border-radius);
}

/* Popovers */

.popover {
    font-family: "Hanken Grotesk";
    font-size: 13px !important;
}

/*classe bootstrap (elemento)*/
button.popover {
    color: #3A8596;
    background-color: rgba(0, 0, 0, 0) !important;
}

/*classe bootstrap (elemento)*/
span.popover {
    color: #3A8596;
    background-color: rgba(0, 0, 0, 0) !important;
}


/*------ ALERTS & TOASTS ------*/

/* Alert Styling */
/*classe bootstrap*/
.alert {
    padding: 10px 5px 10px 15px;
    color: #222;
    background-color: #fbd9d9;
    border-left: 5px solid #F0686A;
}

/* Toast Spacing */
/*classe bootstrap*/
.toast-container> :not(:last-child) {
    margin-bottom: var(--bs-toast-spacing);
}


/*------ BADGES ------*/

/* Base Badge Style */
/*classe bootstrap*/
.badge {
    --bs-badge-padding-x: 0.75em;
    --bs-badge-padding-y: 0.45em;
    --bs-badge-font-size: 0.8em;
    --bs-badge-border-radius: 0rem;
    line-height: 1rem;
    --bs-badge-font-weight: 500;
    margin: 0px 0;
}

/*classe bootstrap*/
.rounded-pill {
    line-height: 0.5rem;
}

/* Badge positioning inside Buttons */
/* Collega i badge ai pulsanti custom definiti nella parte 1 */

.btn .badge {
    position: relative;
    top: -1px;
}

/* Custom Notification Badge */
.badge-notifications {
    top: -7px !important;
    right: -1px !important;
}

/* Specific Badge Contexts */
.warning-on-button {
    position: relative !important;
    margin-left: -1rem !important;
    z-index: 100 !important;
}

.info-button {
    margin-top: 0.5rem;
}


/*------ PLACEHOLDERS ------*/

/* Placeholder integration with Buttons */
/*classe bootstrap*/

.placeholder.btn::before {
    display: inline-block;
    content: "";
}


/*------ UTILITIES & HELPERS ------*/

/* Text Background Colors */
/*classe bootstrap*/
.text-bg-success {
    background-color: #44B282 !important;
}

/*classe bootstrap*/
.text-bg-warning {
    background-color: #FFC86C !important;
}

/*classe bootstrap*/
.text-bg-danger {
    background-color: #F0686A !important;
}

/* Typography Utilities */
.blade-disabled-text-normal {
    color: #889699 !important;
    font-family: "Hanken Grotesk";
    font-weight: 500;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*------ INTERACTIVE STATES & LOGIC ------*/

/* Table Row Hover State */
/* Definisce l'hover per le righe, escludendo elementi di drag&drop (jQuery UI sortable) */
tbody:not(:has(tr.ui-sortable-helper)):not(:has(.jqs-day)):not(:has(.month-day)) tr:hover,
.ui-sortable-placeholder {
    background-color: #F2F7F8;
}

/* Advanced Radio Label Logic (Color Selection) */
/* Gestione visuale di label contenenti radio button checkati - Variante Rossa */
label:has(input:checked) .radio-label-button-red {
    background-color: #f17373 !important;
    color: #ffffff !important;
    border: 1px solid #f17373;
}

label:has(input:checked) .radio-label-button-red:hover {
    box-shadow: 0 4px #ba3c3c !important;
}

tr:hover label:has(input:checked) .radio-label-button-red {
    box-shadow: 0 4px #ba3c3c !important;
}

/* Gestione visuale di label contenenti radio button checkati - Variante Verde */
label:has(input:checked) .radio-label-button-green {
    background-color: #58d78d !important;
    color: #ffffff !important;
    border: 1px solid #58d78d;
}

label:has(input:checked) .radio-label-button-green:hover {
    box-shadow: 0 4px #1a904c !important;
}

tr:hover label:has(input:checked) .radio-label-button-green {
    box-shadow: 0 4px #1a904c !important;
}


/*------ Selectize ------*/

.selectize-control.multi .selectize-input [data-value].active {
    background-color: #3a8596 !important;
}

.selectize-control.multi .selectize-input>div.active {
    background: #3a8596 !important;
    border: 1px solid #3a8596 !important;
}

.selectize-control.multi .selectize-input [data-value] {
    background-color: #3a8596 !important;
}

/*------ Formset ------*/

.formset-delete-row {
    justify-content: space-around;
    border: 1px solid lightgrey;
}

.formset-row:hover .formset-delete-row {
    border: 1px solid #3a8596;
}

@media (min-width: 992px) {

    .formset-delete-row {
        border-radius: 0 8px 8px 0;
        margin-top: -12px;
    }

}

@media (max-width: 992px) {

    .formset-delete-row {
        border-width: 1px 1px 1px 0;
        border-radius: 0 0 8px 8px;
    }

    .formset-row:hover .formset-delete-row {
        border-width: 1px 0 0 0;
        border-radius: 0 0 8px 0;
    }

}

i.formset-delete-icon {
    display: block;
    font-size: 23px;
    color: red;
}

span.formset-delete-icon {
    display: block;
    font-size: 14px;
    font-family: "Hanken Grotesk", "League Spartan";
    color: white;
    background-color: #f0686a;
}

span.formset-delete-icon:hover {
    color: white;
    background-color: #f0686a;
    border-color: #bf4d4c;
}

span.formset-delete-icon-deleting {
    font-size: 14px;
    font-family: "Hanken Grotesk", "League Spartan";
    color: white;
    background-color: #f0686a;
    border-color: #bf4d4c;
}

span.formset-delete-icon-deleting:hover {
    font-size: 14px;
    font-family: "Hanken Grotesk", "League Spartan";
    color: white;
    background-color: #f0686a;
    border-color: #bf4d4c;
}

label:has(input[data-formset-delete-checkbox]:checked) .formset-delete-icon-deleting {
    font-size: 23px;
    color: red;
}

.formset-row {
    padding-top: 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 8px 8px 8px 8px;
    border-left: 1px solid lightgrey;
}

.formset-row:hover {
    background-color: #F2F7F8;
    transition: 0.2s;
    border-radius: 0 8px 8px 0;
}

@media (max-width: 992px) {

    .formset-row:not(tr):hover {
        border: 1px solid #3A8596;
        border-left: 5px solid #3A8596 !important;
    }

}

@media (min-width: 992px) {

    .formset-row:not(tr):hover {
        border-left: 5px solid #3A8596 !important;
    }

}

.formset-row:has(input[data-formset-delete-checkbox]:checked) * {
    color: red;
}

.formset-row:has(input[data-formset-delete-checkbox]:checked) input,
.formset-row:has(input[data-formset-delete-checkbox]:checked) select {
    background-color: rgba(245, 86, 80, 0.2);
}

/* stopwatch */

.stopwatch {
    margin: 10px;
}

.stopwatch-display {
    border: 2px solid #3A8596;
    color: #3A8596;
}

.stopwatch-button {
    width: 150px;
    margin-bottom: 70px;
}

.menu-sticky {
    position: sticky !important;
    max-height: 100%;
    overflow-y: auto;
}

.plain-menu {
    margin-top: 20px;
}

/*------ Impossible table ------*/

.impossible-header td {
    border-color: #CFDBE5;
}

.impossible-body td>div {
    border-color: #CFDBE5;
}

.impossible-item-footer {
    border-top: #CFDBE5;
}

.impossible-item:has(.impossible-body.show) .impossible-header td {
    background-color: #F2F7F8;
}

tr.impossible-body.show:hover {
    background-color: white !important;
}

.impossible-item:has(input[data-formset-delete-checkbox]:checked) * {
    color: var(--bs-danger-text);
}

.impossible-item:has(input[data-formset-delete-checkbox]:checked) i.could-be-red {
    color: var(--bs-danger-text) !important;
}

.impossible-body:has(input[data-formset-delete-checkbox]:checked) input,
.impossible-body:has(input[data-formset-delete-checkbox]:checked) select {
    background-color: rgba(245, 86, 80, 0.2);
}

.impossible-item-footer:has(input[data-formset-delete-checkbox]:checked) .formset-delete-message {
    color: var(--bs-danger-text);
}

[data-refresh-url]:has(table [data-ordered-table-checkbox-tr]:checked) [data-table-actions-div] {
    display: flex !important;
}

[data-refresh-url]:not(:has(table [data-ordered-table-checkbox-tr]:checked)) [data-paginator-actions-div] {
    display: flex !important;
}

/*------ progress bar ------*/

.progress .progress-bar {
    background: var(--blade-green-500) !important;
}

progress .progress-bar[data-color='yellow'] {
    background: var(--blade-secondary-500) !important;
}

.progress .progress-bar[data-color='primary'] {
    background: var(--blade-primary-500) !important;
}

.progress .progress-bar[data-color='light-blue'] {
    background: var(--blade-primary-450) !important;
}

.progress .progress-bar[data-color='grey'] {
    background: var(--blade-grey-600) !important;
}

/* milestone */

.milestone[data-color='red'] {
    color: var(--blade-red-300) !important;
}

.milestone[data-color='yellow'] {
    color: var(--blade-secondary-500) !important;
}

.milestone[data-color='primary'] {
    color: var(--blade-primary-500) !important;
}

.milestone[data-color='light-blue'] {
    color: var(--blade-primary-450) !important;
}

.milestone[data-color='grey'] {
    color: var(--blade-grey-600) !important;
}

/* circular progress bar colors */

.c-bg-success {
    background-color: var(--blade-green-500) !important;
}

.c-bg-primary {
    background-color: var(--blade-primary-500) !important;
}

.c-bg-yellow {
    background-color: var(--blade-yellow-500) !important;
}

.c-bg-orange {
    background-color: var(--blade-red-300) !important;
}

.c-bg-red {
    background-color: var(--blade-red-500) !important;
}

.c-bg-dark-grey {
    background-color: var(--blade-grey-800) !important;
}

.c-bg-grey {
    background-color: var(--blade-grey-300) !important;
}

/*--------------------------------------------
-------5) Utilities / Helper classes----------
----------------------------------------------*/

.mt-4 {
    margin-top: 2rem !important;
}

.absolute-t-11 {
    position: absolute;
    top: 11px;
}

/*--------------------------------------------
----------------- 6) Altro -------------------
----------------------------------------------*/

.box-grigio {
    border: 1px solid #eee;
    background-color: #FAFAFA;
    padding: 25px 25px 15px 25px;
}

.mini-box-grigio {
    border: 1px solid #eee;
    background-color: #FAFAFA;
}

.lifted {
    margin-top: -0.25rem;
}