/**
 * POS Alpha - Custom Admin Theme
 * Sidebar fixed layout dengan topbar yang tidak overlap
 */

/* ===== USER AVATAR - Rounded Rectangle ===== */
.fi-avatar,
.fi-user-avatar {
    border-radius: 0.5rem !important;
    /* rounded-lg instead of full circle */
}

/* ===== TOPBAR USER INFO ===== */
.fi-topbar-end {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.fi-user-info {
    text-align: right !important;
}

.fi-user-info-name {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: rgb(17, 24, 39) !important;
    line-height: 1.25 !important;
}

.dark .fi-user-info-name {
    color: rgb(255, 255, 255) !important;
}

.fi-user-info-email {
    font-size: 0.70rem !important;
    font-weight: 300 !important;
    color: rgb(156, 163, 175) !important;
    line-height: 1.25 !important;
}

.dark .fi-user-info-email {
    color: rgb(107, 114, 128) !important;
}

/* ===== DESKTOP (lg+) ===== */
@media (min-width: 1024px) {

    /* Sidebar fixed di kiri, full height */
    .fi-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 40 !important;
        background-color: white !important;
        border-right: 1px solid rgb(229, 231, 235) !important;
        overflow: visible !important;
    }

    /* Dark mode sidebar */
    .dark .fi-sidebar {
        background-color: rgb(17, 24, 39) !important;
        border-right-color: rgb(55, 65, 81) !important;
    }

    /* Main content centered */
    .fi-main {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Topbar - tidak perlu diatur width, cukup margin-left dari JS */
    .fi-topbar {
        position: relative !important;
    }

    /* IMPORTANT: Sidebar header always visible */
    .fi-sidebar-header-ctn {
        display: block !important;
    }

    .fi-sidebar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 1rem !important;
        gap: 0.5rem !important;
    }

    /* Hide scrollbar tapi tetap bisa scroll */
    .fi-sidebar-nav {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        overflow-y: auto !important;
    }

    .fi-sidebar-nav::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Sidebar header layout */
    .fi-sidebar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 1rem !important;
        gap: 0.5rem !important;
    }

    /* Brand/Logo wrapper */
    .fi-sidebar-brand {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Collapsed state - hide brand (using Alpine x-show handles this) */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-brand {
        display: none !important;
    }

    /* Toggle button always visible on desktop */
    .fi-sidebar-toggle-btn,
    .fi-sidebar-collapse-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* Toggle button positioning saat collapsed */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-toggle-btn,
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-collapse-btn {
        margin: 0 auto !important;
    }

    /* Toggle button positioning saat open */
    .fi-sidebar.fi-sidebar-open .fi-sidebar-toggle-btn,
    .fi-sidebar.fi-sidebar-open .fi-sidebar-collapse-btn {
        margin-left: auto !important;
    }
}

/* ===== TABLET & MOBILE (<1024px) ===== */
@media (max-width: 1023px) {

    /* Sidebar sebagai overlay */
    .fi-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 50 !important;
        background-color: white !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
    }

    /* Dark mode sidebar mobile */
    .dark .fi-sidebar {
        background-color: rgb(17, 24, 39) !important;
    }

    /* Sidebar open state */
    .fi-sidebar.fi-sidebar-open {
        transform: translateX(0) !important;
    }

    /* Topbar dan Main full width di mobile */
    .fi-topbar,
    .fi-main {
        margin-left: 0 !important;
    }

    /* Overlay backdrop */
    .fi-sidebar-close-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 45 !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
    }

    /* Brand selalu tampil di mobile */
    .fi-sidebar-brand {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Hide desktop toggle di mobile */
    .fi-sidebar-toggle-btn,
    .fi-sidebar-collapse-btn {
        display: none !important;
    }

    /* Hide scrollbar di mobile juga */
    .fi-sidebar-nav {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .fi-sidebar-nav::-webkit-scrollbar {
        display: none !important;
    }
}

/* ===== USER INFO DI TOPBAR ===== */
.fi-topbar-end {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

/* ===== CONTENT CENTERING ===== */
@media (min-width: 1024px) {
    .fi-main {
        max-width: 1536px !important;
    }
}