@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

:root{
    --freeline-bg-color-light: #fafafa;
    --freeline-bg-color-light-secondary: #ececec;
    --freeline-font-color-light: #22303D;
    --freeline-bg-input-color-light: #fafafa;
    --freeline-bg-color-light-accent: #dfdddd;
    
    --freeline-bg-color-dark: #1a1a1a;
    --freeline-bg-color-dark-secondary: #2d2d2d;
    --freeline-bg-color-dark-accent: #404040;
    --freeline-bg-input-color-dark: #5f5f5f; 
    --freeline-font-color-dark: #e6e6e6;
    
    --freeline-bg-color: var(--freeline-bg-color-dark);
    --freeline-bg-color-secondary: var(--freeline-bg-color-dark-secondary);
    --freeline-font-color: var(--freeline-font-color-dark);

    --freeline-color-1: var(--freeline-pink-dark);
    --freeline-color-1-hover: var(--freeline-pink-dark-hover);
    --freeline-color-1-tint: var(--freeline-pink-dark-tint);
    --freeline-color-1-bg: var(--freeline-pink-dark-bg);

    --freeline-color-2: var(--freeline-blue-dark);
    --freeline-color-2-hover: var(--freeline-blue-dark-hover);
    --freeline-color-2-tint: var(--freeline-blue-dark-tint);
    --freeline-color-2-bg: var(--freeline-blue-dark-bg);

    --freeline-color-3: var(--freeline-green-dark);
    --freeline-color-3-hover: var(--freeline-green-dark-hover);
    --freeline-color-3-tint: var(--freeline-green-dark-tint);
    --freeline-color-3-bg: var(--freeline-green-dark-bg);

    --freeline-color-4: var(--freeline-yellow-dark);
    --freeline-color-4-hover: var(--freeline-yellow-dark-hover);
    --freeline-color-4-tint: var(--freeline-yellow-dark-tint);
    --freeline-color-4-bg: var(--freeline-yellow-dark-bg);

    --font-family-1: 'Poppins', sans-serif;

    --font-size-1: clamp(10px, 0.7vw, 14px);
    --font-size-2: clamp(10px, 0.7vw, 16px);

    --freeline-bg-input-color: var(--freeline-bg-input-color-dark);
    --danger-color: var(--danger-color-dark);
    --warning-color: var(--warning-color-dark);
    --success-color: var(--success-color-dark);
    --inactive-color: var(--inactive-color-dark);
    
    /* Paleta kolorów dla trybu jasnego */
    --freeline-pink-light: #F93998;
    --freeline-pink-light-hover: #95225b;
    --freeline-pink-light-tint: #fb88c1;
    --freeline-pink-light-bg: #fff1f7;

    --freeline-blue-light: #069EFA;
    --freeline-blue-light-hover: #035e96;
    --freeline-blue-light-tint: #69c4fc;
    --freeline-blue-light-bg: #f2f9fe;

    --freeline-green-light: #04DCB4;
    --freeline-green-light-hover: #02846c;
    --freeline-green-light-tint: #68ead2;
    --freeline-green-light-bg: #f0fdfb;

    --freeline-yellow-light: #FCD404;
    --freeline-yellow-light-hover: #977f02;
    --freeline-yellow-light-tint: #fde568;
    --freeline-yellow-light-bg: #fffef0;

    /* Paleta kolorów dla trybu ciemnego */
    --freeline-pink-dark: #ff4d94;
    --freeline-pink-dark-hover: #cc3d77;
    --freeline-pink-dark-tint: #ff80b3;
    --freeline-pink-dark-bg: #331a29;

    --freeline-blue-dark: #3399ff;
    --freeline-blue-dark-hover: #2673bf;
    --freeline-blue-dark-tint: #66b3ff;
    --freeline-blue-dark-bg: #1a2633;

    --freeline-green-dark: #00cc99;
    --freeline-green-dark-hover: #009973;
    --freeline-green-dark-tint: #33ffcc;
    --freeline-green-dark-bg: #1a332e;

    --freeline-yellow-dark: #ffcc00;
    --freeline-yellow-dark-hover: #cca300;
    --freeline-yellow-dark-tint: #ffdb4d;
    --freeline-yellow-dark-bg: #332b00;

    /* Kolory systemowe - tryb jasny */
    --danger-color-light: #dc3545;    /* Klasyczny czerwony dla błędów */
    --warning-color-light: #ffc107;   /* Żywy żółty dla ostrzeżeń */
    --success-color-light: #198754;   /* Stonowany zielony dla sukcesu */
    --inactive-color-light: #6c757d;  /* Neutralny szary */

    /* Kolory systemowe - tryb ciemny */
    --danger-color-dark: #ff6b6b;     /* Jaśniejszy, mniej agresywny czerwony */
    --warning-color-dark: #9e7f00;    /* Cieplejszy żółty, lepiej widoczny */
    --success-color-dark: #00cc66;    /* Jaśniejszy, żywszy zielony */
    --inactive-color-dark: #646971;   /* Jaśniejszy szary dla lepszej czytelności */

    /* Zmienne dla grubości czcionek */
    --font-weight-bold-light: 700;
    --font-weight-bold-dark: 500;  /* Lżejsza wersja dla trybu ciemnego */
    --font-weight-bold: var(--font-weight-bold-dark);  /* Domyślna wartość */
}

::-webkit-scrollbar{
    width: 10px;
}
::-webkit-scrollbar-track{
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var( --freeline-color-2 );   
}

body {
    background-color: var(--freeline-bg-color);
    color: var(--freeline-font-color);
    font-family: var(--font-family-1);
    font-size: var(--font-size-1);
    position: relative;
    transition: background-color 0.5s ease, color 0.5s ease;
}
.sf-toolbar{
    display: none!important;
}
body[data-user-role="admin"] .sf-toolbar{
    display: block!important;
}

/* Klasy dla trybów */
body[data-theme="light"] {
    --freeline-bg-color: var(--freeline-bg-color-light-secondary);
    --freeline-font-color: var(--freeline-font-color-light);
    --freeline-bg-color-secondary: var(--freeline-bg-color-light);
    --freeline-bg-color-accent: var(--freeline-bg-color-light-accent);
    --freeline-bg-input-color: var(--freeline-bg-input-color-light);

    --danger-color: var(--danger-color-light);
    --warning-color: var(--warning-color-light);
    --success-color: var(--success-color-light);
    --inactive-color: var(--inactive-color-light);

    --font-weight-bold: var(--font-weight-bold-light);
}

body[data-theme="dark"] {
    --freeline-bg-color: var(--freeline-bg-color-dark);
    --freeline-font-color: var(--freeline-font-color-dark);
    --freeline-bg-color-secondary: var(--freeline-bg-color-dark-secondary);
    --freeline-bg-color-accent: var(--freeline-bg-color-dark-accent);
    --freeline-bg-input-color: var(--freeline-bg-input-color-dark);

    --danger-color: var(--danger-color-dark);
    --warning-color: var(--warning-color-dark);
    --success-color: var(--success-color-dark);
    --inactive-color: var(--inactive-color-dark);

    --font-weight-bold: var(--font-weight-bold-dark);
}

h1{
    font-family: var(--font-family-1);
    font-size: clamp(36px, 2vw, 72px);
}

h2{
    font-family: var(--font-family-1);
    font-size: clamp(24px, 1.5vw, 48px);
}




.sidebar{
    min-height: calc(100vh - 32px);
    height: 100%;
    /* height: auto; */
    width: 110px;
    position: absolute;
    z-index: 999;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: var(--freeline-bg-color-secondary);
}

.sidebar:hover {
    width: 300px;
    
}

.sidebar .nav-link{
    height: 35px;
}
.sidebar img {
    width: 40px;
    -webkit-transition: width 0.2s ease-in-out;
    -moz-transition: width 0.2s ease-in-out;
    -o-transition: width 0.2s ease-in-out;
    transition: width 0.2s ease-in-out;
}

.sidebar:hover img{
    width: 100px;
}

.sidebar .nav-link span:not(.material-icons) {
   font-size: 0px;
    width: 0px;
    opacity: 0;
    transition: all 0.1s ease-in;
    /* transition-delay: 0.1s; */

}
.sidebar:hover .nav-link span:not(.material-icons) {
    font-size: var(--font-size-2);
    position: relative;
    opacity: 1;
    width: fit-content;

}

.sidebar .collapse .nav-link{
    line-height: 0px;
    padding: 0px 16px;
    
}

.material-icons{
    vertical-align: middle;
    font-size: var(--font-size-2);
}
.form-control{
    font-size: 1em;
}

.elements-bg-color-1>*{
    background-color: var(--freeline-color-1);
}
.elements-bg-color-2>*{
    background-color: var(--freeline-color-2);
}
.elements-bg-color-3>*{
    background-color: var(--freeline-color-3);
}
.elements-bg-color-4>*{
    background-color: var(--freeline-color-4);
}

.btn-primary{
    background-color: var(--freeline-color-2);
    border-color: var(--freeline-color-2);
}

.btn-primary:hover{
    background-color: var(--freeline-color-2);
    border-color: var(--freeline-color-2);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(105, 196, 252, 1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(105, 196, 252, 1);
    box-shadow: 0px 0px 10px 0px rgba(105, 196, 252, 1);
}

.btn-secondary{
    background-color: var(--freeline-color-3);
    border-color: var(--freeline-color-3);
}

.btn-secondary:hover{
    background-color: var(--freeline-color-3);
    border-color: var(--freeline-color-3);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(4, 220, 180, 1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(4, 220, 180, 1);
    box-shadow: 0px 0px 10px 0px rgba(4, 220, 180, 1);
}

.btn-accent{
    background-color: var(--freeline-color-1);
    border-color: var(--freeline-color-1);
    color: #fff;
}
.btn-accent:hover{
    color: #fff;
    background-color: var(--freeline-color-1);
    border-color: var(--freeline-color-1);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(249, 57, 152, 1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(249, 57, 152, 1);
    box-shadow: 0px 0px 10px 0px rgba(249, 57, 152, 1);
}

.btn-accent-2{
    background-color: var(--freeline-color-4);
    border-color: var(--freeline-color-4);    
}
.btn-accent-2:hover{
    background-color: var(--freeline-color-4);
    border-color: var(--freeline-color-4);    
    -webkit-box-shadow: 0px 0px 10px 0px rgba(252, 212, 4, 1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(252, 212, 4, 1);
    box-shadow: 0px 0px 10px 0px rgba(252, 212, 4, 1);
}

.btn-tetrary{
    background-color: #b3b3b3;
    border-color: #b3b3b3;
    color: #fff;
}

.btn-tetrary:hover{
    background-color: #4e4e4e;
    border-color: #4e4e4e;
    color: #fff;
}

.btn-outline-secondary:hover{
    -webkit-box-shadow: 0px 0px 10px 0px rgba(108, 117, 125, 1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(108, 117, 125, 1);
    box-shadow: 0px 0px 10px 0px rgba(108, 117, 125, 1);
}

.hoverable{
    cursor: help;
    /* text-decoration: underline wavy; */
}
.hoverable::after {
    content: 'help_outline'; /* Nazwa ikony Material Icons dla znaku zapytania */
    font-family: 'Material Icons';
    font-size: 16px; /* Dostosuj rozmiar ikony */
    color: #6c757d; /* Dostosuj kolor ikony */
    margin-left: 5px; /* Dostosuj odstęp od tekstu */
    vertical-align: middle; /* Wyrównaj ikonę z tekstem */
    cursor: help; /* Kursor w formie znaku zapytania */
}

.hoverable:hover::after {
    color: var(--inactive-color); /* Zmień kolor ikony przy najechaniu */
}

.popover-header{
    background-color: var(--freeline-color-2);
    color: var(--freeline-font-color);
}

.main-menu .nav-link {
    color: var(--freeline-font-color);
}
.main-menu .nav-link:hover {
    color: var(--freeline-color-2);
}
.main-menu .nav-link.active{
    color: var(--freeline-color-1);
}

.main-menu ul.nav ul.nav{
    padding-left: 2rem;
}

.main-menu .material-icons{
    vertical-align: sub;
    margin-right: 5px;
}

#main-card h1.card-title{
    margin: 0; 
}

#user_form_modules{
    display: grid;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 5px;
    align-items: stretch;
    justify-items: start;
    justify-content: start;
    width: 120px;
}

b, strong{
    font-weight: var(--font-weight-bold);
}

/* .btn{
    color: var(--freeline-font-color);
} */

.modal-header{
    background-color: var(--freeline-bg-color-secondary);
    color: var(--freeline-font-color);
    border-bottom: 2px solid var(--freeline-bg-color-accent);
}

.modal-header .btn-close{
    color: var(--freeline-font-color);
}

.modal-header .btn-close:hover{
    color: var(--freeline-font-color);
}

.modal-header .btn-close:focus{
    box-shadow: none;
}
.modal-content{
    background-color: var(--freeline-bg-color);
    color: var(--freeline-font-color);
}

.nav-link{
    color: var(--freeline-font-color);
}
.nav-link:hover{
    color: var(--freeline-color-1);
}

.form-control select{
    box-shadow: 0 0 0 1px var(--freeline-bg-color-accent);
    background-color: var(--freeline-bg-input-color);
    color: var(--freeline-font-color);
    border-color: var(--freeline-bg-color-accent);
    background-image: none;
}
.ts-dropdown, .ts-control, .ts-control input{
    color: var(--freeline-font-color) !important;
}

.form-control,  #app-body .ts-control{
    background-color: var(--freeline-bg-input-color);
    color: var(--freeline-font-color);
    background-image: none;
    border-color: var(--freeline-bg-color-accent);
}

.form-control:focus, #app-body .ts-control:focus, #app-body .ts-control input:focus{
    background-color: var(--freeline-bg-input-color);
    color: var(--freeline-font-color);
    border-color: var(--freeline-bg-color-accent);
}

.form-control::placeholder, #app-body .ts-control::placeholder, #app-body .ts-control input::placeholder {
    color: var(--freeline-font-color);
    opacity: 0.5;
}

.form-control:-ms-input-placeholder, #app-body .ts-control:-ms-input-placeholder {
    color: var(--freeline-font-color);
    opacity: 0.5;
}

.form-control::-ms-input-placeholder, #app-body .ts-control::-ms-input-placeholder {
    color: var(--freeline-font-color);
    opacity: 0.5;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    background-color: var(--freeline-bg-color-accent);
    color: var(--freeline-font-color);  
    border-color: var(--freeline-bg-color-accent);
}

.card {
    border: 1px solid var(--freeline-bg-color-accent);
    background: var(--freeline-bg-color-secondary);
    color: var(--freeline-font-color);
    
}

.card-header{
    background-color: var(--freeline-bg-color-accent);
    color: var(--freeline-font-color);
    padding: 10px 20px;
}
.card-content{
    padding: 20px;
}

table{
    background-color: var(--freeline-bg-color-secondary);
    color: var(--freeline-font-color);
}
.table>:not(caption)>*>* {
    background-color: var(--freeline-bg-color-secondary);
    border-color: var(--freeline-bg-color-accent);
    color: var(--freeline-font-color);
}
table th{
    font-weight: var(--font-weight-bold);
}

table a{
    color: var(--freeline-font-color);
    text-decoration: none;
}
table a:hover{
    color: var(--freeline-color-1);
}

.table>:not(caption)>*>*{
    box-shadow: none;
}

.lead-past-date{
    border-left:5px solid var(--danger-color);
}
.lead-past-date td a {
}

.lead-past-date .lead-planned-contact{
    color: var(--danger-color);
    font-weight: var(--font-weight-bold);
}

.lead-today-date {
    border:1px solid var(--success-color);
    border-left: 5px solid var(--success-color);
   
}
.lead-today-date td {
    /* background-color: var(--warning-color); */
}

.lead-status span{
    padding-left: 1em;    
    cursor: help;
}

.lead-status_new span{
    color: red;
}

.lead-status_in_progress span{
    color: orange;
}

.lead-status_completed span{
    color: green;
}

.lead-status_closed span{
    color: gray;
}

#logsList{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    padding-left: 0px;
    padding-right: 0px;
    overflow-y: scroll;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    height: 56dvh;
}

#logsList li{
    list-style: none;
    font-size: 0.8em;
    padding: 5px 15px;    
    border-bottom: 1px solid #e0e0e0;    
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    background-color: #fff;
}

#logsList li:nth-child(even) {
    background-color: var(--freeline-color-2-bg);
}

#logsList li span{
    margin-right: 10px;
}
#logsList .username{
    font-weight: bold;
}
#logsList .ipAddress{
    
}

#logsList .changeTime{
    
}

.rating{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.rating-radio {
    /* display: none; */
}

.icon{
    
    height: auto;
      
    width: 2em;
}

.rating-icon .icon{
    cursor: pointer; 
}

.icon .smile-frame{
    stroke: rgb(196, 196, 196) !important;
    fill: rgb(196, 196, 196) !important;
}

.rating-icon:hover .smile-frame{
    fill: #000 !important;
    stroke: #000 !important;
}

.rating-icon.active .icon.icon-smile-1 .smile-frame{
    fill: rgb(246, 100, 100) !important;
}

.rating-icon.active .icon.icon-smile-1 .smile-background{
    fill: rgb(246, 100, 100) !important;
}
.rating-icon.active .icon.icon-smile-2 .smile-frame{
    fill: rgb(251, 216, 74) !important;
}

.rating-icon.active .icon.icon-smile-2 .smile-background{
    fill: rgb(251, 216, 74) !important;
}

.rating-icon.active .icon.icon-smile-3 .smile-frame{
    fill: rgb(138 216 60) !important
}

.rating-icon.active .icon.icon-smile-3 .smile-background{
    fill: rgb(138 216 60) !important
}

.rating-icon.active .icon.icon-smile-4 .smile-frame{
    fill: rgb(46 178 33) !important;
}

.rating-icon.active .icon.icon-smile-4 .smile-background{
    fill: rgb(46 178 33) !important;
}

.rating-icon.active .icon.icon-smile-5 .smile-frame{
    fill: rgb(241 170 233) !important;
}

.rating-icon.active .icon.icon-smile-5 .smile-background{
    fill: rgb(241 170 233) !important;
}

.rating-icon.active .icon .smile-mouth{
   
    fill: transparent !important;
}

#leads_form_rating{
    display: none;
}

/* Stylowanie Select2, aby pasowało do Bootstrap Floating Labels */
.form-floating .select2-container--default .select2-selection--single {
    height: calc(3.5rem + 2px);
    padding: 1.5rem 0.75rem 1rem 0.75rem;
    font-size: 1rem;
    line-height: 1.25;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: #fff;
}

.form-floating .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.25;
    padding-left: 0;
    padding-right: 0;
}

.form-floating .select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(3.5rem + 2px);
    right: 15px;
}

/* Efekt pływającej etykiety */
.form-floating > .select2-container {
    width: 100% !important;
}


.form-floating .select2-container--focus + label,
.form-floating .select2-container--open + label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

.select2-container--default .select2-selection--single .select2-selection__clear {       
    position: absolute !important;
    right: 20px;
    top: 5px;
    z-index: 999;
}

/* Usługi - services */
#services_table img{
    width: 40px;
    height: auto;
}

#services_table .service-name{
    margin-left: 10px;
    font-weight: var(--font-weight-bold);
}

.select2-results__option{
    color: #000;
}

.avatar-circle {    
    color: var(--freeline-font-color);
    font-weight: var(--font-weight-bold);
    padding: 7px 9px;
    width: 40px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    text-align: center;    
    text-decoration: none;
}

.avatar-info{
    cursor: help;
}

#toast-container {
    bottom: 3rem !important; /* 48px */
}

.removeSelfInfo{
    color: red;
    cursor: pointer;
}

.lead-card:hover{
    background-color: #f0f0f0;
}

.text-small{
    font-size: 12px;
}

#confirmDeleteModal .modal-content{    
    color: var(--freeline-bg-color);
}

.service-new{
    background-color: var(--inactive-color);
    color: #fff;
}

.service-active{
    background-color: var(--success-color);
    color: #fff;
}

.service-inactive{
    background-color: var(--danger-color);
    color: #fff;
}
.service-archived{
    background-color: var(--inactive-color);
    color: #fff;
}

.profile-picture{
    max-width: 40px;
    /* max-height: 50px; */
    aspect-ratio: 1/1;
}
.clickable{
    cursor: pointer;
}

[data-bs-toggle="popover"]{
    cursor: help;
}

[data-href]{
    cursor: pointer;
}

.toast.text-bg-error{
    background-color: #dc2626;
    color: #fff;
}

.service-icon-color-active{
    color: green;
}
.service-icon-color-inactive{
    color: #daa515;
}
.service-icon-color-archived{
    color: #000;
}
.service-icon-color-new{
    color: gray;
    
}


.badge-do_wystawienia{
    background-color: var(--inactive-color);
    color: #fff;
}
.badge-wystawiona_faktura{
    background-color: var(--warning-color);
    color: #fff;
}
.badge-zaplacone{
    background-color: var(--success-color);
    color: #fff;

}

.badge-do_wystawienia, .badge-wystawiona_faktura, .badge-zaplacone{
    font-size: 0.7rem;
}

.lead-badge-bni-motor{
    background: rgb(34,37,195);
background: linear-gradient(45deg, rgba(34,37,195,1) 50%, rgba(255,0,0,1) 50%);
    color: #fff;
}

.progress-wrapper {
    margin: 20px 0;
    padding: 15px;
    /* background-color: #f8f9fa; */
    border-radius: 8px;
}

.progress {
    background-color: var(--freeline-bg-input-color);
    border-radius: 5px;
}


#messages-section li{
    background-color: var(--freeline-bg-input-color);
    color: var(--freeline-font-color);
}

#messages-section li:hover{
    background-color: var(--freeline-bg-color-accent);
}
#messages-section button{
    color: var(--freeline-font-color);
    border-color: var(--freeline-font-color);
}

.message-content{
    color: var(--freeline-font-color);
    font-size: 0.8rem;
    width: 100%;
}

.form-floating .select2-container--default .select2-selection--single{
    background-color: var(--freeline-bg-input-color);
    color: var(--freeline-font-color);
}
.select2-dropdown{
    background-color: var(--freeline-bg-input-color) !important;
}
.select2-search__field{
    background-color: var(--freeline-bg-input-color) !important;
    color: var(--freeline-font-color);
}

.select2-results__option{
    color: var(--freeline-font-color);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    color: var(--freeline-font-color) !important;
}
.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label{
    color: var(--freeline-font-color);
}
.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after{
    background-color: transparent;
}

.form-select{
    background-color: var(--freeline-bg-input-color);
    border-color: var(--freeline-bg-color-accent);
    color: var(--freeline-font-color);
    height: 35px;
}

.sidebar .nav-link:hover .material-icons {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.sidebar:not(:hover) .nav-link {
    position: relative;
}

.sidebar:not(:hover) .nav-link:hover::after {
    content: attr(data-title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: var(--freeline-bg-color-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: 8px;
    white-space: nowrap;
    z-index: 1000;
}