@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    --nav-height: 64px;
    --sidebar-width: 250px;
    --body-font: 'Inter', sans-serif;
    --number-font: 'Roboto', sans-serif;
    --font-color: #020205;
    --normal-font-size: 1rem;
    --z-fixed: 100;
    --scrollbar-width: 10px;
    --bs-body-bg: #f6f6f9;
    --scrollbar-thumb-bg-color: #eff3f7;
    --scrollbar-thumb-bg-hover: #dde4ea;
    --logo_sidebar: url('../img/logo_uniko_light.png');
    --bg-logo-sidebar: #151319;
    --card-bg: #fff;
    --color-accent: #0791d3;
    --color-underline-accent: #0791d3;
    --color-uniko: #4caa42;
    --color-uniko-hover: #32CA00;
    --datepicker-focus: #dde4ea;
    --btn-border-color: #c1c1c1;
}

html[data-bs-theme='dark'] {
    --bs-body-bg: #0B0B15;
    --font-color: #e9e9ea;
    --scrollbar-thumb-bg-color: #171a1d;
    --scrollbar-thumb-bg-hover: #3c3e4d;
    --logo_sidebar: url('../img/logo_uniko_dark.png');
    --bg-logo-sidebar: var(--bs-body-bg);
    --card-bg: #151527;
    --bs-border-color: #1c1c36;
    --form-border-color: #26264b;
    --bs-table-border-color: #1c1c36;
    --bs-border-color-translucent: #1c1c36;
    --datepicker-focus: #434657;
    --btn-border-color: #3c3e4d;
}

/* Scrollbar */
/* width */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg-color);  /* Rende la barra di scorrimento trasparente di default */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-bg-hover)  /* Cambia il colore della barra di scorrimento quando viene passata con il mouse */
}

/* Dati generali */
body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    color: var(--font-color);
}

.text-numeric {
    font-family: var(--number-font);
}

/* Navbar */
nav.navbar {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: var(--z-fixed);
    height: var(--nav-height);
    background-color:var(--card-bg);
}

nav.navbar:not(.login .navbar) {
    width: calc(100vw - var(--sidebar-width));
    margin-left: var(--sidebar-width);
}


nav.navbar .btn{
    border: var(--bs-border-width) var(--bs-border-style) var(--btn-border-color) !important;
    border-radius: 50% !important;
    padding: .25rem !important;
}


nav.navbar .btn.active{
    color: var(--bs-link-color);
    border-color: var(--bs-link-color) !important;
}


/* Sidebar */
#sidebar, #sidebar-offcanvas {
    height: 100vh;
    width: var(--sidebar-width);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    overflow-y: auto;
    background-color:var(--card-bg)
}

#sidebar .nav-link, #sidebar-offcanvas .nav-link{
    color: var(--font-color);
}

#sidebar .nav-link.active, #sidebar-offcanvas .nav-link.active{
    font-size: 16px;
    font-weight: 500;
}

#sidebar .nav .nav-link.active, #sidebar-offcanvas .nav .nav-link.active{
    color: var(--color-accent);
    position: relative;
    padding-bottom: 0.50rem;
}

#sidebar .nav .nav-link i.ph, #sidebar-offcanvas .nav .nav-link i.ph {
    font-size: 20px;
}

#sidebar .nav .nav-link.active span::before, #sidebar-offcanvas .nav .nav-link.active span::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    border-bottom: 1px solid var(--color-underline-accent);
}

#sidebar .nav .nav-link span, #sidebar-offcanvas .nav .nav-link span {
    position: relative;
}

#sidebar .nav .nav-link span::before, #sidebar-offcanvas .nav .nav-link span::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    border-bottom: 1px solid var(--color-underline-accent);
    transition: width 0.3s;
}

.logo_sidebar {
    background-image: var(--logo_sidebar);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: var(--sidebar-width);
    padding-top: 70%;
}

*:has(> .logo_sidebar) {
    /* background-color: var(--bg-logo-sidebar); */
    border-radius: 0.75rem;
}

#sidebar .nav .nav-link:hover span::before, #sidebar-offcanvas .nav .nav-link:hover span::before {
    width: 70%;
}

#sidebarOffcanvas {
    width: calc(var(--sidebar-width) + 2rem);
}

/* Main */
.main-wrapper {
    display: flex;
    width: 100vw;
}

.main-wrapper:not(.login .main-wrapper) {
    padding-top: calc(2rem + var(--nav-height));
    padding-left: var(--sidebar-width);
}

/* Media query per tablet */
@media (max-width: 992px) {
    nav.navbar:not(.login .navbar) {
        width: 100vw;
        margin-left: 0;
    }
    .main-wrapper:not(.login .main-wrapper) {
        margin-left: 0;
        padding-left: 0;
        width: 100vw;
    }
}

.page-wrapper {
    width: 100%;
}

.page-wrapper .page-content {
    width: 90%;
    margin: 0 auto;
    min-height: calc(20vh );
}

.login .page-wrapper .page-content {
    padding-top: 0px;
}

/* Card */
.card {
    background-color: var(--card-bg);
}

/* Modal */
.modal-content{
    background-color: var(--card-bg);
}

/* Forms */
.form-control {
    background-color: var(--bs-body-bg);
}

/* Table */
.table>:not(caption)>*>* {
    background-color: transparent;
}

/* Altro */
.color-accent {
    color: var(--color-accent);
}

.underline-accent {
    position: relative;
}

.underline-accent::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    border-bottom: 1px solid var(--color-underline-accent);
}

.page-title{
    display: flex !important;
    align-items: center;
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 2rem;
    margin-bottom: 0.75rem;
}

.page-subtitle {
    margin-top: -0.75rem;
    margin-bottom: 1rem;
}

/* Buttons */

.btn-uniko {
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
    background-color: var(--color-uniko);
    border: none;
    transition: background-color 0.3s ease;
}

.btn-uniko:hover, .btn-uniko.show {
    background-color: var(--color-uniko-hover);
}

/* SELECT2 */
.select2-container--default .select2-selection--single {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
}

.select2-dropdown {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--font-color)
}

.select2-selection__rendered {
    line-height: 30px !important;
}
.select2-container .select2-selection--single, .select2-container .select2-selection--multiple     {
    height: 38px !important;
}

.select2-selection__arrow {
    height: 37px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding: 0.25rem 0.8rem;
}

html[data-bs-theme='dark'] .select2-container--default .select2-results__option--selected {
    background-color: #202020;
}

/* Forms */
html[data-bs-theme='dark'] .form-control {
    border-color: var(--form-border-color);
}

/* flatpickr */
.flatpickr-calendar {
    background: var(--card-bg);
}

.flatpickr-day, .flatpickr-time input {
    color: var(--font-color);
}

.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay {
    color: var(--font-color-muted);
}

.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus {
    background: var(--datepicker-focus);
    border-color: var(--datepicker-focus)
}

.flatpickr-day.today {
    background: var(--date-picker-today);
    border-color: var(--date-picker-today);
    color: var(--font-color);
}

.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--datepicker-focus);
}

span.flatpickr-weekday, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year,
.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm {
    color: var(--font-color);
}

.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month {
    fill: var(--font-color)
}

.fase-item.active {
    background-color: rgba(0, 123, 255, 0.5);
    border-color: rgba(0, 123, 255, 0.5);
}
.scrollable-list {
    max-height: calc(100vh - var(--nav-height) - 100px);
    overflow-y: scroll !important;
}