/**
 * Agape sidebar — Kitsofts HKITS behavior (icon rail + hover expand on desktop,
 * hamburger drawer on mobile). Keeps sidebar visible and logo constrained.
 */

/* Never hide Agape HKITS sidebar (legacy compat targets #sidebar) */
body.hkits-app.agape-kitsofts-shell aside.hkits-sidebar,
body.hkits-app.agape-kitsofts-shell #agape-hkits-sidebar {
    display: flex !important;
    visibility: visible !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
}

/* Navy shell + icon colors (Kitsofts theme) */
body.hkits-app.agape-kitsofts-shell .hkits-sidebar {
    background: #002366 !important;
    border-right-color: rgba(74, 144, 217, 0.28) !important;
}

body.hkits-app.agape-kitsofts-shell .hkits-sidebar .hkits-menu-head .fa-fw,
body.hkits-app.agape-kitsofts-shell .hkits-sidebar .hkits-menu-head .fas:not(.hkits-chevron) {
    color: #b0c9e8 !important;
}

/* Brand block — logo must stay small; text collapses with icon rail */
body.hkits-app.agape-kitsofts-shell .hkits-sidebar-brand {
    display: flex !important;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    overflow: hidden !important;
    max-width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body.hkits-app.agape-kitsofts-shell .hkits-sidebar-brand .hkits-brand-logo {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
}

body.hkits-app.agape-kitsofts-shell .hkits-sidebar-brand .hkits-brand-logo img,
body.hkits-app.agape-kitsofts-shell .hkits-sidebar-brand img,
body.hkits-app.agape-kitsofts-shell .hkits-sidebar-brand .hkits-sidebar-logo-img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
}

body.hkits-app.agape-kitsofts-shell .hkits-sidebar-brand .hkits-brand-text {
    min-width: 0;
    line-height: 1.25;
    color: #fff;
}

body.hkits-app.agape-kitsofts-shell .hkits-sidebar-brand .hkits-brand-text strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
}

body.hkits-app.agape-kitsofts-shell .hkits-sidebar-brand .hkits-brand-text span {
    display: block;
    font-size: 0.72rem;
    opacity: 0.85;
}

body.hkits-app.agape-kitsofts-shell .hkits-sidebar-inner {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Desktop: match Kitsofts icon rail — brand text hidden until hover expand */
@media (min-width: 992px) {
    body.hkits-app.agape-kitsofts-shell .hkits-sidebar:not(:hover) .hkits-sidebar-brand {
        justify-content: center;
        padding: 10px 6px;
    }

    body.hkits-app.agape-kitsofts-shell .hkits-sidebar:not(:hover) .hkits-brand-text {
        opacity: 0;
        visibility: hidden;
        max-width: 0;
        max-height: 0;
        overflow: hidden;
        pointer-events: none;
    }

    body.hkits-app.agape-kitsofts-shell .hkits-sidebar:not(:hover) .hkits-sidebar-brand .hkits-brand-logo {
        width: 36px;
        height: 36px;
    }

    body.hkits-app.agape-kitsofts-shell .hkits-sidebar:not(:hover) .hkits-sidebar-brand .hkits-brand-logo img,
    body.hkits-app.agape-kitsofts-shell .hkits-sidebar:not(:hover) .hkits-sidebar-brand .hkits-sidebar-logo-img {
        max-width: 36px !important;
        max-height: 36px !important;
    }

    body.hkits-app.agape-kitsofts-shell .hkits-sidebar:hover .hkits-brand-text {
        opacity: 1;
        visibility: visible;
        max-width: none;
        max-height: none;
        pointer-events: auto;
        transition: opacity 0.18s ease 0.06s;
    }

    body.hkits-app.agape-kitsofts-shell .hkits-main {
        flex: 1 !important;
        min-width: 0 !important;
    }
}

/* Mobile / tablet: slide-in drawer (same as Kitsofts) */
@media (max-width: 991px) {
    body.hkits-app.agape-kitsofts-shell .hkits-sidebar {
        position: fixed !important;
        left: -260px !important;
        top: 52px !important;
        width: var(--hkits-sidebar-width, 252px) !important;
        min-width: var(--hkits-sidebar-width, 252px) !important;
        height: calc(100vh - 52px) !important;
        z-index: 1040 !important;
        transition: left 0.25s ease !important;
    }

    body.hkits-app.agape-kitsofts-shell.hkits-sidebar-open .hkits-sidebar {
        left: 0 !important;
    }

    body.hkits-app.agape-kitsofts-shell .hkits-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 52px 0 0 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1035;
    }

    body.hkits-app.agape-kitsofts-shell.hkits-sidebar-open .hkits-sidebar-backdrop {
        display: block !important;
    }

    /* Main column uses full viewport (sidebar is off-canvas) */
    body.hkits-app.agape-kitsofts-shell .hkits-main {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
}