@import url("wfc.css");

:root {
    --wfc-navy-950: #071629;
    --wfc-navy-900: #0b1f3a;
    --wfc-navy-800: #0e2c4f;
    --wfc-navy-700: #123c69;
    --wfc-blue-500: #38bdf8;
    --wfc-blue-300: #7dd3fc;
    --wfc-blue-200: #bae6fd;
    --wfc-white: #fff;
    --wfc-surface: #f5f8fc;
    --wfc-border: #d7e2ee;
    --wfc-text: #10243e;
    --wfc-muted: #64748b;
    --wfc-sidebar-expanded-width: 292px;
    --wfc-sidebar-collapsed-width: 76px;
    --wfc-topbar-height: 64px;
    --wfc-radius: .625rem;
    --wfc-shadow: 0 8px 24px rgb(11 31 58 / 10%);
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    overflow: hidden;
    color: var(--wfc-text);
    background: var(--wfc-surface);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body.wfc-sidebar-open {
    overflow: hidden;
}

a {
    color: var(--wfc-navy-700);
}

.wfc-shell {
    display: flex;
    height: 100vh;
    min-height: 0;
}

.wfc-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1045;
    display: flex;
    width: var(--wfc-sidebar-expanded-width);
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    color: var(--wfc-white);
    background: linear-gradient(180deg, var(--wfc-navy-900), var(--wfc-navy-950));
    box-shadow: 8px 0 24px rgb(7 22 41 / 16%);
    transition: width .22s ease, transform .22s ease;
}

.wfc-sidebar-brand {
    display: flex;
    min-height: 78px;
    flex: 0 0 78px;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.wfc-sidebar-brand > a {
    display: flex;
    min-width: 0;
    align-items: center;
}

.wfc-sidebar-logo {
    display: block;
    width: 100%;
    max-width: 245px;
    height: 46px;
    object-fit: contain;
    object-position: left center;
    transition: opacity .14s ease;
}

.wfc-sidebar-close,
.wfc-sidebar-open,
.wfc-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .5rem;
}

.wfc-sidebar-close {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    color: var(--wfc-white);
    background: rgb(255 255 255 / 10%);
}

.wfc-sidebar-nav {
    flex: 1 1 auto;
    padding: .85rem .7rem 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgb(186 230 253 / 35%) transparent;
    scrollbar-width: thin;
}

.wfc-sidebar-section {
    margin: 1.1rem .75rem .45rem;
    overflow: hidden;
    color: var(--wfc-blue-300);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .095em;
    white-space: nowrap;
}

.wfc-sidebar-link,
.wfc-sidebar-account a {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: .75rem;
    margin: .16rem 0;
    padding: .7rem .8rem;
    overflow: hidden;
    border: 0;
    border-radius: .52rem;
    color: #dcebfa;
    background: transparent;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.wfc-sidebar-link > i:first-child,
.wfc-sidebar-account a > i,
.wfc-sidebar-user > i {
    width: 1.35rem;
    flex: 0 0 1.35rem;
    font-size: 1.1rem;
    text-align: center;
}

.wfc-sidebar-link > span,
.wfc-sidebar-account a > span,
.wfc-sidebar-user > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.wfc-sidebar-link:hover,
.wfc-sidebar-account a:hover {
    color: var(--wfc-white);
    background: rgb(56 189 248 / 14%);
}

.wfc-sidebar-link.active {
    color: var(--wfc-navy-950);
    background: linear-gradient(90deg, var(--wfc-blue-200), #e5f7ff);
    box-shadow: inset 4px 0 0 var(--wfc-blue-500), 0 4px 14px rgb(0 0 0 / 12%);
}

.wfc-collapse-toggle[aria-expanded="true"] .wfc-toggle-chevron {
    transform: rotate(180deg);
}

.wfc-toggle-chevron {
    font-size: .8rem;
    transition: transform .18s ease;
}

.wfc-sidebar-submenu {
    margin: .12rem 0 .42rem;
    padding-left: .7rem;
}

.wfc-sidebar-submenu .wfc-sidebar-link {
    padding-top: .58rem;
    padding-bottom: .58rem;
    padding-left: 1rem;
    color: #c9def2;
    font-size: .86rem;
}

/* Az almenü általános világos színe nem írhatja felül az aktív elem kontrasztját. */
.wfc-sidebar-submenu .wfc-sidebar-link.active,
.wfc-sidebar-submenu .wfc-sidebar-link.active:hover,
.wfc-sidebar-submenu .wfc-sidebar-link.active:focus {
    color: var(--wfc-navy-950);
    background: linear-gradient(90deg, var(--wfc-blue-200), #f0faff);
}

.wfc-sidebar-submenu .wfc-sidebar-link.active i {
    color: var(--wfc-navy-700);
}

.wfc-sidebar-submenu .wfc-sidebar-link > i:first-child {
    font-size: .95rem;
}

.wfc-sidebar-divider {
    margin: .45rem .8rem;
    border-color: rgb(255 255 255 / 14%);
    opacity: 1;
}

.wfc-sidebar-account {
    flex: 0 0 auto;
    padding: .75rem;
    border-top: 1px solid rgb(255 255 255 / 12%);
    background: rgb(0 0 0 / 9%);
}

.wfc-sidebar-user {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .75rem;
    padding: .55rem .8rem .7rem;
    overflow: hidden;
    color: var(--wfc-blue-200);
    font-size: .88rem;
    font-weight: 700;
    white-space: nowrap;
}

.wfc-content {
    display: flex;
    width: calc(100% - var(--wfc-sidebar-expanded-width));
    height: 100vh;
    min-height: 0;
    flex-direction: column;
    margin-left: var(--wfc-sidebar-expanded-width);
    overflow: hidden;
    transition: width .22s ease, margin-left .22s ease;
}

.wfc-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    min-height: var(--wfc-topbar-height);
    align-items: center;
    gap: .8rem;
    padding: 0 1.35rem;
    border-bottom: 1px solid var(--wfc-border);
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 3px 16px rgb(11 31 58 / 6%);
    backdrop-filter: blur(10px);
}

.wfc-sidebar-open,
.wfc-sidebar-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    color: var(--wfc-navy-700);
    background: #eef6fc;
    font-size: 1.25rem;
}

.wfc-sidebar-open:hover,
.wfc-sidebar-toggle:hover {
    color: var(--wfc-navy-900);
    background: var(--wfc-blue-200);
}

.wfc-topbar-title {
    overflow: hidden;
    color: var(--wfc-navy-900);
    font-size: 1.15rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wfc-main {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    padding: 1.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgb(18 60 105 / 45%) transparent;
    scrollbar-width: thin;
}

.wfc-footer {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    min-height: 48px;
    padding: .78rem 1.5rem;
    border-top: 1px solid rgb(186 230 253 / 24%);
    color: #dcebfa;
    background:
        radial-gradient(circle at 88% 10%, rgb(56 189 248 / 16%), transparent 20rem),
        linear-gradient(90deg, var(--wfc-navy-900), var(--wfc-navy-950));
    box-shadow: 0 -5px 18px rgb(7 22 41 / 12%);
    font-size: .82rem;
}

.wfc-footer-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

.wfc-footer-content a {
    margin-left: auto;
    color: var(--wfc-blue-200);
    text-decoration: none;
}

.wfc-footer-content a:hover {
    color: var(--wfc-white);
}

.wfc-footer-separator {
    color: var(--wfc-blue-500);
}

.wfc-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    visibility: hidden;
    background: rgb(7 22 41 / 58%);
    opacity: 0;
    transition: visibility .2s ease, opacity .2s ease;
}

.wfc-sidebar-backdrop.show {
    visibility: visible;
    opacity: 1;
}

.btn-primary {
    border-color: var(--wfc-navy-700);
    background-color: var(--wfc-navy-700);
}

.btn-primary:hover,
.btn-primary:focus {
    border-color: var(--wfc-navy-900);
    background-color: var(--wfc-navy-900);
}

.card {
    border-color: var(--wfc-border);
    border-radius: var(--wfc-radius);
    box-shadow: var(--wfc-shadow);
}

html.wfc-sidebar-collapsed .wfc-sidebar {
    width: var(--wfc-sidebar-collapsed-width);
}

html.wfc-sidebar-collapsed .wfc-content {
    width: calc(100% - var(--wfc-sidebar-collapsed-width));
    margin-left: var(--wfc-sidebar-collapsed-width);
}

html.wfc-sidebar-collapsed .wfc-sidebar-logo,
html.wfc-sidebar-collapsed .wfc-sidebar-section,
html.wfc-sidebar-collapsed .wfc-sidebar-link > span,
html.wfc-sidebar-collapsed .wfc-sidebar-link > .wfc-toggle-chevron,
html.wfc-sidebar-collapsed .wfc-sidebar-account span,
html.wfc-sidebar-collapsed .wfc-sidebar-divider,
html.wfc-sidebar-collapsed .wfc-sidebar-submenu {
    display: none;
}

html.wfc-sidebar-collapsed .wfc-sidebar-brand {
    justify-content: center;
    padding-right: .7rem;
    padding-left: .7rem;
}

html.wfc-sidebar-collapsed .wfc-sidebar-brand::before {
    width: 42px;
    height: 42px;
    content: "";
    background: url("../images/favicon/favicon.svg") center / contain no-repeat;
}

html.wfc-sidebar-collapsed .wfc-sidebar-link,
html.wfc-sidebar-collapsed .wfc-sidebar-account a,
html.wfc-sidebar-collapsed .wfc-sidebar-user {
    justify-content: center;
    gap: 0;
    padding-right: .75rem;
    padding-left: .75rem;
}

html.wfc-sidebar-initializing .wfc-sidebar,
html.wfc-sidebar-initializing .wfc-content {
    transition: none !important;
}

@media (max-width: 991.98px) {
    html,
    body {
        height: auto;
        min-height: 100%;
    }

    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    body.wfc-sidebar-open {
        overflow: hidden;
    }

    .wfc-shell {
        height: auto;
        min-height: 100vh;
    }

    .wfc-sidebar {
        width: min(88vw, 320px);
        transform: translateX(-102%);
    }

    .wfc-sidebar.open {
        transform: translateX(0);
    }

    .wfc-content,
    html.wfc-sidebar-collapsed .wfc-content {
        width: 100%;
        height: auto;
        min-height: 100vh;
        margin-left: 0;
        overflow: visible;
    }

    .wfc-main {
        min-height: auto;
        flex: 1 0 auto;
        padding: 1rem;
        overflow: visible;
    }

    .wfc-topbar {
        padding: 0 .85rem;
    }

    .wfc-footer {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wfc-sidebar,
    .wfc-content,
    .wfc-sidebar-backdrop,
    .wfc-toggle-chevron {
        transition: none !important;
    }
}