/* Top bar + sidebar shared by every page through header.php.
   Overrides the admin template's layout: rules are scoped to #topbar / #sidebar so they win over its class selectors. */
:root {
    --sb-width: 252px;
    --sb-mini: 76px;
    --sb-top: 72px;
    --sb-border: #e6e8ef;
    --sb-text: #1f2937;
    --sb-link: #4b5563;
    --sb-muted: #6b7280;
    --sb-subtle: #9ca3af;
    --sb-hover: #f4f5f8;
    --sb-primary: #1F3BB3;
    --sb-primary-soft: #eef1fb;
    --sb-danger: #d92d20;
    --sb-danger-soft: #fef3f2;
}

@media (max-width: 991.98px) {
    :root {
        --sb-top: 64px;
    }
}

/* ---------- Top bar ---------- */
#topbar {
    height: var(--sb-top);
    background: #fff;
    border-bottom: 1px solid var(--sb-border);
    box-shadow: none;
    flex-wrap: nowrap;
    align-items: stretch;
    transition: box-shadow .2s ease;
}

#topbar.headerLight {
    box-shadow: 0 4px 16px -8px rgba(16, 24, 40, .16);
}

#topbar .navbar-brand-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: var(--sb-width);
    height: var(--sb-top);
    padding: 0 16px;
    background: #fff;
    border-right: 1px solid var(--sb-border);
    transition: width .25s ease;
}

#topbar .navbar-menu-wrapper {
    display: flex;
    align-items: center;
    width: calc(100% - var(--sb-width));
    height: var(--sb-top);
    padding: 0 32px;
    background: #fff;
    transition: width .25s ease;
}

#topbar .navbar-nav .nav-item {
    margin: 0;
}

/* The template hides the greeting once the page scrolls; keep it, the bar no longer shrinks. */
#topbar .welcome-text,
#topbar.headerLight .welcome-text {
    display: block !important;
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 500;
    color: var(--sb-muted);
}

#topbar .welcome-text span {
    color: var(--sb-text);
    font-weight: 700;
}

/* The logo file is a square with a lot of white space, so crop to the wordmark. */
.sb-logo {
    display: block;
    flex: none;
    width: 128px;
    height: 52px;
    overflow: hidden;
    border-radius: 6px;
}

#topbar .sb-logo img,
#sidebar .sb-logo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
}

.sb-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--sb-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.sb-icon-btn:hover {
    background: var(--sb-hover);
    color: var(--sb-text);
}

.sb-icon-btn:focus-visible {
    outline: 2px solid var(--sb-primary);
    outline-offset: 2px;
}

.sb-collapse-btn i {
    display: inline-block;
    transition: transform .25s ease;
}

/* ---------- Page frame ---------- */
body .page-body-wrapper {
    min-height: 100vh;
    padding-top: var(--sb-top);
}

#sidebar ~ .main-panel {
    width: calc(100% - var(--sb-width));
    min-height: calc(100vh - var(--sb-top));
    margin-left: var(--sb-width);
    transition: width .25s ease, margin .25s ease;
}

#sidebar ~ .main-panel .content-wrapper {
    padding: 28px 32px 32px;
}

/* ---------- Sidebar ---------- */
#sidebar {
    position: fixed;
    top: var(--sb-top);
    bottom: 0;
    left: 0;
    z-index: 1020;
    display: flex;
    flex-direction: column;
    width: var(--sb-width);
    min-height: 0;
    padding: 0;
    background: #fff;
    border-right: 1px solid var(--sb-border);
    font-weight: 500;
    transition: width .25s ease;
}

#sidebar > .nav {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 12px 12px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d5d9e2 transparent;
}

#sidebar .nav > .nav-item {
    margin: 0 0 2px;
    padding: 0;
    background: transparent;
}

#sidebar .sb-label {
    padding: 18px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sb-subtle);
    white-space: nowrap;
}

#sidebar .sb-label:first-child {
    padding-top: 6px;
}

#sidebar .sb-spacer {
    flex: 1 0 16px;
}

#sidebar .sb-divider {
    height: 1px;
    margin: 0 4px 10px;
    background: var(--sb-border);
}

#sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border-radius: 8px !important;
    background: transparent;
    color: var(--sb-link);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

#sidebar .nav-link:hover {
    background: var(--sb-hover);
    color: var(--sb-text);
}

#sidebar .nav-link:focus-visible {
    outline: 2px solid var(--sb-primary);
    outline-offset: -2px;
}

#sidebar .nav-link i.menu-icon {
    flex: none;
    width: 22px;
    margin: 0;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    color: var(--sb-muted);
    transition: color .15s;
}

#sidebar .nav-link:hover i.menu-icon {
    color: var(--sb-text);
}

#sidebar .nav-link .menu-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    line-height: 1.2;
    color: inherit;
}

#sidebar .nav-link i.menu-arrow {
    flex: none;
    margin: 0 0 0 auto;
    color: var(--sb-subtle);
}

#sidebar .nav-link i.menu-arrow::before {
    font-size: 1.15rem;
    line-height: 1;
    transition: transform .2s ease;
}

#sidebar .nav-link[aria-expanded="true"] i.menu-arrow::before {
    transform: rotate(180deg);
}

#sidebar .nav-link .sb-ext {
    flex: none;
    margin-left: auto;
    font-size: 14px;
    color: var(--sb-subtle);
}

/* Current page */
#sidebar .nav-item.active > .nav-link:not([data-bs-toggle]) {
    background: var(--sb-primary-soft);
    color: var(--sb-primary);
    font-weight: 600;
}

#sidebar .nav-item.active > .nav-link i.menu-icon {
    color: var(--sb-primary);
}

#sidebar .nav-item.active > .nav-link[data-bs-toggle] {
    color: var(--sb-text);
    font-weight: 600;
}

/* Sub menus */
#sidebar .nav.sub-menu {
    margin: 2px 0 8px 22px;
    padding: 0 0 0 12px;
    border-left: 1px solid var(--sb-border);
    border-radius: 0;
    background: transparent;
}

#sidebar .sub-menu .nav-item {
    margin: 0 0 1px;
    padding: 0;
}

#sidebar .sub-menu .nav-item::before {
    display: none;
}

#sidebar .sub-menu .nav-link {
    position: relative;
    height: 34px;
    padding: 0 10px;
    font-size: 13.5px;
    color: var(--sb-muted);
}

#sidebar .sub-menu .nav-link:hover {
    color: var(--sb-text);
}

#sidebar .sub-menu .nav-link.active {
    background: var(--sb-primary-soft);
    color: var(--sb-primary);
    font-weight: 600;
}

#sidebar .sub-menu .nav-link.active::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -13px;
    width: 2px;
    border-radius: 2px;
    background: var(--sb-primary);
}

#sidebar .sb-logout .nav-link:hover {
    background: var(--sb-danger-soft);
    color: var(--sb-danger);
}

#sidebar .sb-logout .nav-link:hover i.menu-icon {
    color: var(--sb-danger);
}

/* Drawer-only pieces */
.sb-drawer-head {
    display: none;
    flex: none;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 10px 0 14px;
    border-bottom: 1px solid var(--sb-border);
}

.sb-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(16, 24, 40, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
}

/* ---------- Desktop: collapsed (icon-only) sidebar ---------- */
@media (min-width: 992px) {
    .sb-drawer-btn,
    .sb-drawer-head,
    .sb-backdrop {
        display: none !important;
    }

    body.sidebar-icon-only .sb-collapse-btn i {
        transform: rotate(180deg);
    }

    body.sidebar-icon-only #topbar .navbar-brand-wrapper {
        width: var(--sb-mini);
        padding: 0;
        justify-content: center;
    }

    body.sidebar-icon-only #topbar .sb-logo {
        display: none;
    }

    body.sidebar-icon-only #topbar .navbar-menu-wrapper {
        width: calc(100% - var(--sb-mini));
    }

    body.sidebar-icon-only #sidebar ~ .main-panel {
        width: calc(100% - var(--sb-mini));
        margin-left: var(--sb-mini);
    }

    body.sidebar-icon-only #sidebar {
        width: var(--sb-mini);
    }

    /* Visible overflow lets the hover flyouts escape the rail. */
    body.sidebar-icon-only #sidebar > .nav {
        overflow: visible;
        padding: 12px;
    }

    body.sidebar-icon-only #sidebar .nav:not(.sub-menu) > .nav-item {
        position: relative;
    }

    body.sidebar-icon-only #sidebar .sb-label {
        height: 1px;
        margin: 10px 6px;
        padding: 0;
        overflow: hidden;
        font-size: 0;
        background: var(--sb-border);
    }

    body.sidebar-icon-only #sidebar .sb-label:first-child {
        display: none;
    }

    body.sidebar-icon-only #sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
        justify-content: center;
        height: 44px;
        padding: 0;
    }

    body.sidebar-icon-only #sidebar .nav-link .menu-title,
    body.sidebar-icon-only #sidebar .nav-link i.menu-arrow,
    body.sidebar-icon-only #sidebar .nav-link .sb-ext {
        display: none;
    }

    body.sidebar-icon-only #sidebar .nav-item.active > .nav-link[data-bs-toggle] {
        background: var(--sb-primary-soft);
    }

    /* Flyout label */
    body.sidebar-icon-only #sidebar .nav:not(.sub-menu) > .nav-item.hover-open > .nav-link .menu-title,
    body.sidebar-icon-only #sidebar .nav:not(.sub-menu) > .nav-item:focus-within > .nav-link .menu-title {
        position: absolute;
        top: 0;
        left: calc(100% + 12px);
        z-index: 2;
        display: flex;
        align-items: center;
        width: 212px;
        height: 44px;
        padding: 0 14px;
        overflow: visible;
        background: #fff;
        border: 1px solid var(--sb-border);
        border-radius: 10px;
        box-shadow: 0 12px 24px -8px rgba(16, 24, 40, .2);
        color: var(--sb-text);
        font-weight: 600;
    }

    body.sidebar-icon-only #sidebar .nav:not(.sub-menu) > .nav-item.has-sub.hover-open > .nav-link .menu-title,
    body.sidebar-icon-only #sidebar .nav:not(.sub-menu) > .nav-item.has-sub:focus-within > .nav-link .menu-title {
        border-radius: 10px 10px 0 0;
        box-shadow: none;
    }

    /* Bridges the gap so the pointer can travel from the icon into the flyout. */
    body.sidebar-icon-only #sidebar .nav:not(.sub-menu) > .nav-item.hover-open::after {
        content: "";
        position: absolute;
        top: 0;
        left: 100%;
        width: 14px;
        height: 44px;
    }

    /* Flyout sub menu */
    body.sidebar-icon-only #sidebar .nav-item > .collapse,
    body.sidebar-icon-only #sidebar .nav-item > .collapsing {
        position: absolute;
        top: 43px;
        left: calc(100% + 12px);
        z-index: 2;
        display: none;
        width: 212px;
        height: auto !important;
        background: #fff;
        border: 1px solid var(--sb-border);
        border-top: 0;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 16px 28px -10px rgba(16, 24, 40, .22);
    }

    body.sidebar-icon-only #sidebar .nav-item.hover-open > .collapse,
    body.sidebar-icon-only #sidebar .nav-item.hover-open > .collapsing,
    body.sidebar-icon-only #sidebar .nav-item:focus-within > .collapse {
        display: block;
    }

    body.sidebar-icon-only #sidebar .collapse .nav.sub-menu {
        margin: 0;
        padding: 6px;
        border-left: 0;
    }

    body.sidebar-icon-only #sidebar .collapse .sub-menu .nav-link.active::before {
        display: none;
    }
}

/* ---------- Mobile / tablet: off-canvas drawer ---------- */
@media (max-width: 991.98px) {
    #topbar .navbar-brand-wrapper {
        width: auto;
        padding: 0 4px 0 10px;
        border-right: 0;
        gap: 4px;
    }

    #topbar .navbar-menu-wrapper {
        flex: 1 1 auto;
        width: auto;
        padding: 0 12px;
    }

    #topbar .sb-collapse-btn {
        display: none;
    }

    #topbar .sb-logo {
        width: 112px;
        height: 46px;
    }

    #sidebar ~ .main-panel {
        width: 100%;
        margin-left: 0;
    }

    #sidebar,
    #sidebar.sidebar-offcanvas {
        top: 0;
        right: auto;
        bottom: 0;
        left: 0;
        z-index: 1045;
        width: min(300px, 86vw);
        height: 100%;
        max-height: none;
        overflow: hidden;
        border-right: 0;
        box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .35);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
    }

    body.sb-open #sidebar {
        transform: none;
        visibility: visible;
        transition: transform .25s ease;
    }

    body.sb-open .sb-backdrop {
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease;
    }

    body.sb-open {
        overflow: hidden;
    }

    .sb-drawer-head {
        display: flex;
    }

    #sidebar > .nav {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    /* Bigger touch targets */
    #sidebar .nav-link {
        height: 44px;
    }

    #sidebar .sub-menu .nav-link {
        height: 40px;
    }
}

@media (max-width: 767.98px) {
    #sidebar ~ .main-panel .content-wrapper {
        padding: 0 20px 24px;
    }
}

@media (max-width: 575.98px) {
    #sidebar ~ .main-panel .content-wrapper {
        padding: 0 16px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #sidebar,
    #topbar .navbar-brand-wrapper,
    #topbar .navbar-menu-wrapper,
    #sidebar ~ .main-panel,
    .sb-backdrop,
    .sb-collapse-btn i,
    #sidebar .nav-link i.menu-arrow::before {
        transition: none !important;
    }
}