:root {
    --aside-width: 250px;
    --aside-width-collapsed: 70px;
    --offcanvas-width: 320px;
    --brand-logo-width-collapsed: 37px;
    --header-height: 57px;
}

html {
    position: relative;
    min-height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

html.no-transition *,s
html.no-transition *::before,
html.no-transition *::after {
    transition: none !important;
}

/* ------ Layout ------ */
header nav, footer {
    min-height: var(--header-height);
}

.body-wrapper {
    height: calc(100vh - calc(2 * var(--header-height)));
}

main {
    background-color: #f5f5f5;
}

[data-bs-theme="dark"] main {
    background-color: #171b1d;
}

/* ----- Header ------ */
header *:not(.dropdown-item):focus-visible {
    color: #d2d2d2 !important;
    outline: #d2d2d2 auto 1px !important;
    border-radius: 0.2rem !important;
}

header a.login-link {
    padding-block: 1px;
    padding-inline: 6px;
}

header .profile-dropdown a.nav-link {
    padding: 2px;
}

    header .profile-dropdown a.nav-link:focus-visible {
        border-radius: 50% !important;
        color: #d2d2d2 !important;
        outline: #d2d2d2 auto 1px !important;
    }

header .profile-dropdown .dropdown-item {
    --bs-dropdown-item-padding-x: 0.5rem;
}

.profile-dropdown a.nav-link img {
    height: 37px;
    width: 37px;
    object-fit: cover;
}

.brand-logo .brand-title {
    font-size: 0.7em;
    text-transform: uppercase;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    width: 147.69px;
    opacity: 1;
}

button.sidebar-toggler {
    background: none;
    border: 0;
    color: #ffffff;
}

    button.sidebar-toggler:hover {
        color: #d2d2d2;
    }

@media (min-width: 768px) {
    .sidebar-toggler-container {
        position: absolute;
        left: calc(var(--aside-width) + 0.75em);
        transition: left 0.3s ease-in-out;
    }

    [data-sidebar="collapsed"] .sidebar-toggler-container {
        left: calc(var(--aside-width-collapsed) + 0.75em);
    }
}

/* ----- Sidebar ----- */
aside .main-sidebar {
    width: 0;
    overflow-x: hidden;
}

#psSidebar {
    --bs-offcanvas-width: var(--offcanvas-width);
}

@media (min-width: 768px) {
    .brand-logo .brand-title {
        transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    aside.main-sidebar {
        width: var(--aside-width);
        transition: width 0.3s ease-in-out;
    }

    [data-sidebar="collapsed"] aside.main-sidebar {
        width: var(--aside-width-collapsed);
    }

    [data-sidebar="collapsed"] .navbar-brand {
        width: var(--brand-logo-width-collapsed);
    }

    [data-sidebar="collapsed"] .brand-logo .brand-title {
        width: 0px;
        opacity: 0;
        pointer-events: none;
    }
}

.sidebar-menu {
    width: 100%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0.5rem;
    list-style: none;
}

    .sidebar-menu li a {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.45rem 0.5rem;
        border-radius: 0.25em;
        transition: background 0.2s ease, border-color 0.2s ease;
        justify-items: start;
        text-decoration: none;
        position: relative;
        text-wrap: nowrap;
    }

    .sidebar-menu li .item-icon {
        color: var(--bs-primary);
        min-width: 33px;
        flex-shrink: 0;
    }

    .sidebar-menu li a.active::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 20%;
        bottom: 20%;
        width: 4px;
        border-radius: 4px;
        background-color: var(--bs-primary);
    }

    .sidebar-menu li a:hover, .sidebar-menu li .active {
        background: rgba(var(--bs-primary-rgb), 0.075);
    }

    .sidebar-menu li a:focus-visible {
        outline: #d2d2d2 auto 1px !important;
        background: rgba(var(--bs-secondary-rgb), 0.075);
        border-radius: 0.2rem !important;
    }


@media (min-width: 768px) {
    .sidebar-menu li .item-title {
        transition: opacity 0.3s ease, width 0.3s ease;
        white-space: nowrap;
        text-overflow: clip;
        overflow: hidden;
        opacity: 100;
    }

    [data-sidebar="collapsed"] .sidebar-menu li .item-title {
        opacity: 0;
    }

    [data-sidebar="collapsed"].collapsed-out .sidebar-menu li .item-title {
        display: none;
    }
        .sidebar-menu {
        padding: 0.35rem;
    }

        .sidebar-menu li a {
            gap: 0.5rem;
            padding: 0.75rem;
        }

            .sidebar-menu li a.active::before {
                top: 30%;
                bottom: 30%;
                left: 4px;
            }
}

/* ------ More switch sizes ------ */
.form-check-input {
    clear: left;
}

.form-switch.form-switch-sm {
    margin-bottom: 0.5rem;
}

    .form-switch.form-switch-sm .form-check-input {
        height: 1rem;
        width: calc(1rem + 0.75rem);
        border-radius: 2rem;
    }

.form-switch.form-switch-md {
    margin-bottom: 1rem;
}

    .form-switch.form-switch-md .form-check-input {
        height: 1.5rem;
        width: calc(2rem + 0.75rem);
        border-radius: 3rem;
    }

.form-switch.form-switch-lg {
    margin-bottom: 1.5rem;
}

    .form-switch.form-switch-lg .form-check-input {
        height: 2rem;
        width: calc(3rem + 0.75rem);
        border-radius: 4rem;
    }

.form-switch.form-switch-xl {
    margin-bottom: 2rem;
}

    .form-switch.form-switch-xl .form-check-input {
        height: 2.5rem;
        width: calc(4rem + 0.75rem);
        border-radius: 5rem;
    }

/* ----- Misc ----- */
.page-header {
    display: flex;
    gap: 0.35em;
    flex-direction: row;
    padding: 1em;
    color: var(--bs-dark-text-emphasis);
    font-weight: normal;
    margin-bottom: 1em;
}

    .page-header .page-header-title {
        display: flex;
        align-items: center;
        gap: 0.5em;
        margin-bottom: 0;
    }

.btn-labeled {
    padding-top: 0;
    padding-bottom: 0;
    text-wrap: nowrap;
}

.btn-label {
    position: relative;
    background: transparent;
    background: rgba(0, 0, 0, 0.05);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    left: calc(-1 * var(--bs-btn-padding-x));
    border-radius: 3px 0 0 3px;
}

.form-control:read-only {
    background-color: var(--bs-secondary-bg);
    opacity: 1;
}

.no-resize {
    resize: none;
}

.bigger-tooltip {
    max-width: 300px;
}

.issue-categories-menu .nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: var(--bs-nav-pills-link-active-bg);
}

    .issue-categories-menu .nav-link:hover {
        background-color: rgba(var(--bs-link-hover-color-rgb), 0.85);
    }

    .issue-categories-menu .nav-link.active {
        background-color: rgba(var(--bs-link-hover-color-rgb), 0.9);
    }

        .issue-categories-menu .nav-link.active:hover {
            background-color: var(--bs-link-hover-color);
        }

[data-bs-theme="dark"] .issue-categories-menu .nav-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.6);
}

[data-bs-theme="dark"] .issue-categories-menu .nav-link.active {
    background-color: rgba(var(--bs-primary-rgb), 0.7);
}

    [data-bs-theme="dark"] .issue-categories-menu .nav-link.active:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.8);
    }

.issue-card-list {
    counter-reset: issue-index;
}

.issue-card .index-text::before {
    counter-increment: issue-index;
    content: "Θέμα " counter(issue-index) "ο: ";
}

.issue-card:not(:last-of-type) {
    margin-bottom: 0.75rem;
}