.sidebar {
    --primary-color: #272727;
    --text: white;
    --white: #FFFFFF;
    --sidebar-primary: #ff0000;
    --sidebar-primary-light: #5DA8FF;
    --sidebar-primary-hover: #605DFF10;
    --sidebar-background: #FCFCFD;
    --background: #F1F3FF;
    --full-bg: #C7D2DC;
    --text-link: #5e5e5e;
    --headline: #7686BC;
    --cta-background: #EBF3FF;
    --cta-background-darker: #CFD5FF;
    --cta-background-border: #CDD2F3;
    --cta-text: #1C2035;
    --neutral: #E6E8F0;
    --expand-button: #4A516D;
    --logout: #ff0000;
    --text: #303651;
    --text-lighter: #697089;

    box-sizing: border-box;
    position: fixed;
    /* Change to fixed for it to stay at the top left */
    top: 0;
    left: 0;
    min-height: 53.75rem;
    height: 100%;
    padding: 1rem 0;
    border-radius: 1rem;
    max-width: 18rem;
    display: flex;
    color: var(--white);
    flex-direction: column;
    background: var(--sidebar-background);
    transition: max-width 0.1s ease-in-out;
    z-index: 1000;
    /* Optional: ensures the sidebar stays on top of other elements */
}

body.collapsed .sidebar {
    max-width: 5rem;
    display: flex;
    align-items: center;
}

body.collapsed .hide {
    position: absolute;
    display: none;
}

/*? sidebar top */

.sidebar-top-wrapper {
    display: flex;
}

.sidebar-top {
    position: relative;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    height: 4rem;
    padding-bottom: 1rem;
}

body.collapsed .sidebar-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo__wrapper {
    display: flex;
    align-items: center;
    color: var(--text-link);
    font-weight: 700;
    text-decoration: none;
    font-size: 1.125rem;
    gap: 1rem;
    padding: 0 1rem;
}

.logo-small {
    height: 2rem;
    width: 2rem;
    overflow: hidden;
    object-fit: cover;
}


/*? menu links */
/* menu links */
.sidebar-links {
    margin-top: 1rem;
    width: 100%;
}

.sidebar-links h2 {

    margin-left: 1rem;
    color: var(--headline);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.125rem;
    margin-bottom: 0.5rem;
    animation: fadeIn 0.2s ease-in-out;
}

.menu.collapsed {
    display: none;
}

.sidebar-links ul {
    list-style-type: none;
    display: flex;
    column-gap: 0.5rem;
    flex-direction: column;
    margin: 0;
    padding: 0;
}


.sidebar-links li {
    color: var(--text-link);
}

body.collapsed .sidebar-links li {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar-links li svg {
    /*stroke: var(--text-link);*/
    stroke: var(--text-link);
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
}

.sidebar-links li a:hover svg {
    color: var(--sidebar-primary);
}

.sidebar-links li a:hover {
    color: var(--sidebar-primary);
}

.sidebar-links li a {
    color: var(--text-link);
    padding: 0 1rem;
    font-size: 1.25rem;
    display: flex;
    gap: 1.75rem;
    align-items: center;
    /* Keep the items aligned */
    height: 3.5rem;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.sidebar-links li a .link {
    overflow: hidden;
    white-space: nowrap;
    animation: fadeIn 0.2s ease-in-out;
}

.sidebar-links li a img {
    height: 2.125rem;
    width: 2.125rem;
}

.sidebar-links .active:hover {
    background-color: var(--sidebar-primary-hover);
}

.sidebar-links a.active {
    text-decoration: none;
    background-color: var(--sidebar-primary-hover);
    color: red;
}

.sidebar-links a.active img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(70%) saturate(7296%) hue-rotate(1deg) brightness(110%) contrast(126%);
}

.sidebar-links li a:hover img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(70%) saturate(7296%) hue-rotate(1deg) brightness(110%) contrast(126%);
}

.sidebar-links .active {
    text-decoration: none;
    background-color: var(--sidebar-primary-hover);
    color: red;
    /*color: var(--text-link);*/
}

.sidebar-links .active svg {
    stroke: red;
}

.sidebar-links li a:hover svg {
    stroke: var(--sidebar-primary);
    color: var(--sidebar-primary);
}

.sidebar-links li a:hover {
    color: var(--sidebar-primary);
}


/* Media Query για Κινητές Συσκευές */
@media (max-width: 768px) {
    .sidebar-links {
        margin-top: 0.1rem;
        /* Μειώστε το περιθώριο για κινητές συσκευές */
    }

    .sidebar-links h2 {
        font-size: 0.9rem;
        /* Μικρότερο μέγεθος τίτλου */
    }

    .sidebar-links ul {
        flex-direction: column;
        margin-left: -0rem;
        /* Κατακόρυφη διάταξη */
    }

    .sidebar-links li {
        width: 100%;
        /* Κάθετο πλήρες πλάτος για τα link */
        justify-content: flex-start;
        /* Ευθυγράμμιση αριστερά */
    }

    .sidebar-links li a {
        font-size: 1rem;
        /* Μικρότερο μέγεθος γραμματοσειράς */
        justify-content: flex-start;
        /* Ευθυγράμμιση των στοιχείων αριστερά */
    }

    .sidebar-links li svg {
        width: 1.5rem;
        /* Μικρότερα εικονίδια για κινητά */
        height: 1.5rem;
    }

    .sidebar-links .active {
        background-color: var(--sidebar-primary-hover);
        /* Χρώμα για ενεργά links */
    }

    .sidebar-links li a .link {
        font-size: 1rem;
        /* Μικρότερο μέγεθος για το κείμενο */
    }

    .sidebar-links li a img {
        width: 1.5rem;
        height: 1.5rem;
        /* Μικρότερη εικόνα για κινητά */
    }

    body.collapsed .sidebar-links li {
        justify-content: center;
        /* Ευθυγράμμιση στοιχείων στο collapsed */
    }
}

/* ?tooltip */
.tooltip {
    position: relative;
    display: inline-block;
    /* Επιτρέπει την σωστή τοποθέτηση του tooltip */
}

.tooltip .tooltip__content::after {
    content: " ";
    position: absolute;
    top: 100%;
    /* Τοποθετεί την ουρά κάτω από το tooltip */
    left: 0%;
    margin-left: -0.625rem;
    margin-top: -0.3125rem;
    border-width: 0.3125rem;
    border-style: solid;
    border-color: transparent var(--cta-text) transparent transparent;
}

/* Tooltip content */
.tooltip .tooltip__content {
    visibility: hidden;
    background-color: var(--cta-text);
    color: var(--white);
    text-align: center;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 100%;
    /* Το tooltip θα εμφανίζεται πάνω από το στοιχείο */
    transform: translateX(-50%);
    /* Κεντράρισμα του tooltip */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.collapsed .tooltip:hover .tooltip__content {
    visibility: visible;
    opacity: 1;
    /* Προσθέτουμε την αλλαγή opacity για ένα πιο ομαλό εφέ */

}

/* ?sidebar action */

.sidebar__action__wrapper {
    overflow-x: hidden;
    margin: 0 1rem;
    margin-top: auto;
}

.sidebar__action {
    padding: 1rem;
    background-color: var(--cta-background);
    border-radius: 1rem;
    min-width: 1rem;
    color: var(--cta-text);
    animation: fadeIn 0.2s ease-in-out;
}

.sidebar__action p {
    margin-bottom: 0.75rem;
    margin-top: 0.5rem;
    color: var(--text)
}

.sidebar__action h2 {
    margin-bottom: 0.5rem;
}

.sidebar__action button {
    border: 0;
    margin-top: 0.5rem;
    width: 100%;
    cursor: pointer;
    font-weight: 600;
    height: 2.612rem;
    font-size: 1.125rem;
    color: var(--neutral);
    border-radius: 0.75rem;
    background: linear-gradient(90deg,
            var(--sidebar-primary) -0.38%,
            var(--sidebar-primary-light) 100.02%);
}

.sidebar__action .progress-bar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    font-size: larger;
    display: flex;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(closest-side,
            var(--cta-background) 79%,
            transparent 80% 100%),
        conic-gradient(var(--sidebar-primary) 60%,
            var(--cta-background-darker) 0);
    margin-bottom: 1rem;
}

body.collapsed .sidebar__action {
    display: none;
}


/* profile part */
.sidebar__profile {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-direction: row;
    padding: 0 1rem;
    color: var(--text-link);
    overflow-x: hidden;
    min-height: 2.6125rem;
    position: relative;
}

/* Wrapper for avatar and name */
.avatar__wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Avatar */
.avatar {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    cursor: pointer;
    border-radius: 50%;
}

/* Name and Email */
.avatar__name {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    white-space: nowrap;
    animation: fadeIn 0.2s ease-in-out;
}

/* User Name */
.user-name {
    font-weight: 600;
    text-align: left;
    color: var(--text);
    animation: fadeIn 0.2s ease-in-out;
}

/* User Email */
.email {
    color: var(--text-lighter);
    font-size: 0.8125rem;
    animation: fadeIn 0.2s ease-in-out;
}

/* Logout Button */
.logout {
    animation: fadeIn 0.2s ease-in-out;
    margin-left: 15px;
    display: flex;
    align-items: center;
}

.logout svg {
    color: var(--logout);
}

.register {
    color: black;
}

.settings {
    color: black;
}

.support {
    color: black;
}


/* When sidebar is collapsed, hide logout */
body.collapsed .logout {
    display: none;
}

/* Ensure profile and other links are aligned even when collapsed */
body.collapsed .sidebar__profile {
    justify-content: center;
}

body.collapsed .avatar__name {
    display: none;
    /* Optionally hide the name in collapsed mode */
}

body.collapsed .avatar {
    width: 2rem;
    /* Smaller avatar in collapsed mode */
    height: 2rem;
}


/* Media query για μικρές οθόνες (κινητά) */
@media (max-width: 768px) {
    .sidebar__profile {
        /*flex-direction: column;  Κάθετο layout για μικρές οθόνες */
        align-items: flex-start;
        /* Ευθυγράμμιση αριστερά */
        padding: 1rem;
        /* Πρόσθετο padding για κινητές οθόνες */
    }

    .avatar {
        margin-top: 10px;
        width: 2rem;
        /* Αυξάνοντας το μέγεθος της εικόνας προφίλ για κινητά */
        height: 2rem;
    }

    .avatar__name {
        margin-left: 0.5rem;
        /* Χώρος μεταξύ της εικόνας προφίλ και του ονόματος */
    }

    .email {
        font-size: 0.875rem;
        /* Ελαφρώς μεγαλύτερο μέγεθος γραμματοσειράς για κινητά */
    }

    .logout {
        margin-top: 1rem;
        /* Αφήστε λίγο χώρο για το logout */
    }
}

/*? Expand button */

.expand-btn {
    position: absolute;
    display: grid;
    place-items: center;
    cursor: pointer;
    right: -1rem;
    border: 1px solid var(--cta-background-border);
    background-color: var(--background);
    z-index: 2;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
}

.expand-btn svg {
    transform: rotate(-180deg);
    stroke: var(--expand-button);
    width: 1.25rem;
    height: 1.25rem;
}

body.collapsed .expand-btn svg {
    transform: rotate(-360deg);
}

.bottom-links {
    margin-top: auto;
}

@media (max-width: 768px) {
    .bottom-links {
        margin-top: 150px;
    }
}

@keyframes fadeIn {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        opacity: 1;
        width: 100%;
    }
}