/* =========================================================
   ADMIN RESPONSIVE
   MOBILE / TABLET
========================================================= */


/* =========================================================
   DEFAULT
========================================================= */

.mobile-menu-button,
.mobile-sidebar-close,
.mobile-sidebar-overlay {
    display: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .sidebar {
        width: 230px;
    }

    .main-content {
        margin-left: 230px;
        width: calc(100% - 230px);
    }

    .topbar {
        padding-left: 22px;
        padding-right: 22px;
    }

    .content {
        padding-left: 22px;
        padding-right: 22px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   SMALL TABLET / LARGE PHONE
========================================================= */

@media (max-width: 800px) {

    /*
       PENTING:
       Override CSS lama dari admin-layout.css
    */

    .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: 280px !important;
        max-width: 82vw !important;

        height: 100vh !important;

        margin: 0 !important;

        z-index: 2000 !important;

        transform: translate3d(-110%, 0, 0) !important;

        visibility: hidden !important;
        opacity: 1 !important;

        pointer-events: none !important;

        transition:
            transform 0.28s ease,
            visibility 0.28s ease !important;

        overflow-y: auto !important;
    }


    .sidebar.mobile-open {
        transform: translate3d(0, 0, 0) !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    /*
       Kembalikan isi sidebar menjadi normal
    */

    .sidebar .brand {
        display: flex !important;
    }


    .sidebar .brand-text {
        display: flex !important;
    }


    .sidebar .menu-label {
        display: block !important;
    }


    .sidebar .sidebar-menu a {
        justify-content: flex-start !important;
        width: auto !important;
    }


    .sidebar .sidebar-menu a > span:last-of-type {
        display: inline !important;
    }


    .sidebar .sidebar-bottom a > span:last-of-type {
        display: inline !important;
    }


    .sidebar .menu-badge {
        display: inline-flex !important;
    }


    /*
       MAIN CONTENT FULL WIDTH
    */

    .main-content {
        width: 100% !important;

        max-width: 100% !important;

        margin-left: 0 !important;

        padding-left: 0 !important;
    }


    /*
       OVERLAY
    */

    .mobile-sidebar-overlay {
        position: fixed !important;

        inset: 0 !important;

        z-index: 1900 !important;

        display: block !important;

        background: rgba(3, 20, 45, 0.52) !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease !important;
    }


    .mobile-sidebar-overlay.active {
        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    /*
       TOPBAR
    */

    .topbar {
        min-height: 70px !important;

        height: auto !important;

        padding:
            12px 16px !important;

        gap: 12px !important;
    }


    .topbar-left {
        min-width: 0 !important;

        flex: 1 1 auto !important;
    }


    .topbar-left h1 {
        font-size: 18px !important;

        line-height: 1.2 !important;
    }


    .topbar-left p {
        font-size: 11px !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        max-width: 100% !important;
    }


    /*
       TOPBAR RIGHT
    */

    .topbar-right {
        flex-shrink: 0 !important;

        gap: 8px !important;
    }


    /*
       SEARCH
    */

    .topbar-search {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: rgba(30, 41, 59, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .topbar-search input {
        display: none !important;
    }

    .topbar-search .search-icon {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        color: #60a5fa !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .topbar-search:focus-within {
        position: absolute !important;
        left: 15px !important;
        right: 15px !important;
        width: calc(100% - 30px) !important;
        height: 42px !important;
        border-radius: 12px !important;
        background: #0d172e !important;
        border: 1px solid #3b82f6 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
        z-index: 100 !important;
        justify-content: flex-start !important;
        padding: 0 12px !important;
    }

    .topbar-search:focus-within input {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        padding-left: 32px !important;
        font-size: 13px !important;
        outline: none !important;
    }

    .topbar-search:focus-within .search-icon {
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }


    /*
       NOTIFICATION
    */

    .notification-button {
        width: 38px !important;

        min-width: 38px !important;

        height: 38px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;
    }


    /*
       DIVIDER
    */

    .topbar-divider {
        display: none !important;
    }


    /*
       ADMIN PROFILE
    */

    .admin-profile-text,
    .admin-chevron {
        display: none !important;
    }


    .admin-profile {
        gap: 0 !important;

        flex-shrink: 0 !important;
    }


    .admin-avatar {
        width: 38px !important;

        height: 38px !important;
    }


    /*
       HAMBURGER
    */

    .mobile-menu-button {
        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 40px !important;

        min-width: 40px !important;

        height: 40px !important;

        padding: 0 !important;

        margin: 0 !important;

        border: 0 !important;

        border-radius: 10px !important;

        background: #0f4fa8 !important;

        color: #ffffff !important;

        font-size: 21px !important;

        line-height: 1 !important;

        cursor: pointer !important;

        flex-shrink: 0 !important;

        order: 999 !important;
    }


    .mobile-menu-button:active {
        transform: scale(0.96);
    }


    /*
       CLOSE BUTTON
    */

    .mobile-sidebar-close {
        position: absolute !important;

        top: 16px !important;

        right: 16px !important;

        width: 36px !important;

        height: 36px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border: 0 !important;

        border-radius: 9px !important;

        background: rgba(255,255,255,0.10) !important;

        color: #ffffff !important;

        font-size: 20px !important;

        cursor: pointer !important;

        z-index: 10 !important;
    }


    /*
       CONTENT
    */

    .content {
        width: 100% !important;

        max-width: 100% !important;

        padding:
            18px 16px 30px !important;

        overflow-x: hidden !important;
    }


    /*
       WELCOME
    */

    .welcome-card {
        width: 100% !important;

        min-height: 180px !important;

        padding: 24px !important;
    }


    .welcome-content {
        max-width: 75% !important;
    }


    .welcome-content h2 {
        font-size: 22px !important;
    }


    .welcome-content p {
        font-size: 12px !important;

        line-height: 1.6 !important;
    }


    /*
       STATS
    */

    .stats-grid {
        grid-template-columns: 1fr !important;

        gap: 14px !important;
    }


    .stat-card {
        min-width: 0 !important;

        width: 100% !important;
    }


    /*
       SECTION
    */

    .section-heading {
        gap: 12px !important;

        flex-wrap: wrap !important;
    }


    .section-heading h2 {
        font-size: 18px !important;
    }


    .section-heading p {
        font-size: 11px !important;
    }


    /*
       TABLE
    */

    .table-card {
        width: 100% !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    .table-wrapper {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        margin-bottom: 14px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
    }

    .table-wrapper::before {
        content: "↔ Geser tabel ke samping untuk info lengkap" !important;
        display: block !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        color: #64748b !important;
        background: #f8fafc !important;
        padding: 7px 12px !important;
        border-bottom: 1px solid #edf2f7 !important;
        text-align: center !important;
    }

    .table-wrapper table {
        min-width: 580px !important;
    }

    .table-wrapper table th,
    .table-wrapper table td {
        padding: 11px 12px !important;
        white-space: nowrap !important;
    }

    /*
       LOCK BODY WHEN SIDEBAR OPEN
    */
    body.sidebar-open {
        overflow: hidden !important;
    }

}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 600px) {

    .topbar {
        padding:
            10px 12px !important;
    }


    .topbar-left {
        min-width: 0 !important;
    }


    .topbar-left .breadcrumb {
        font-size: 9px !important;
    }


    .topbar-left h1 {
        font-size: 17px !important;
    }


    .topbar-left p {
        display: none !important;
    }


    .topbar-right {
        gap: 6px !important;
    }


    .topbar-search,
    .notification-button,
    .admin-avatar,
    .mobile-menu-button {
        width: 36px !important;

        min-width: 36px !important;

        height: 36px !important;
    }


    .mobile-menu-button {
        font-size: 19px !important;
    }


    .content {
        padding:
            14px 12px 28px !important;
    }


    .welcome-card {
        min-height: 170px !important;

        padding: 20px !important;
    }


    .welcome-content {
        max-width: 90% !important;
    }


    .welcome-content h2 {
        font-size: 20px !important;
    }


    .welcome-decoration {
        opacity: 0.5 !important;
    }


    .section-heading {
        margin-top: 24px !important;
    }


    .table-wrapper table {
        min-width: 720px !important;
    }

}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (max-width: 400px) {

    .topbar-left h1 {
        font-size: 16px !important;
    }


    .topbar-right {
        gap: 5px !important;
    }


    .topbar-search,
    .notification-button,
    .admin-avatar,
    .mobile-menu-button {
        width: 34px !important;

        min-width: 34px !important;

        height: 34px !important;
    }


    .mobile-menu-button {
        font-size: 18px !important;
    }


    .content {
        padding-left: 10px !important;

        padding-right: 10px !important;
    }


    .welcome-card {
        padding: 18px !important;
    }


    .welcome-content h2 {
        font-size: 18px !important;
    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sidebar,
    .mobile-sidebar-overlay {
        transition: none !important;
    }

}

/* =========================================================
MOBILE SIDEBAR - FINAL FIX
========================================================= */

@media (max-width: 800px) {

/* =========================  
   SIDEBAR ANIMATION  
========================= */  

.sidebar {  
    transform: translate3d(-105%, 0, 0) !important;  

    visibility: hidden !important;  

    pointer-events: none !important;  

    will-change: transform;  

    transition:  
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),  
        visibility 0s linear 0.25s !important;  
}  


.sidebar.mobile-open {  
    transform: translate3d(0, 0, 0) !important;  

    visibility: visible !important;  

    pointer-events: auto !important;  

    transition:  
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),  
        visibility 0s linear 0s !important;  
}  


/* =========================  
   TEKS MENU  
========================= */  

.sidebar .sidebar-menu a {  
    display: flex !important;  

    align-items: center !important;  

    justify-content: flex-start !important;  

    width: 100% !important;  

    gap: 12px !important;  
}  


/*  
   Ikon  
*/  

.sidebar .sidebar-menu a > span.menu-icon {  
    display: inline-flex !important;  

    flex: 0 0 20px !important;  

    width: 20px !important;  

    min-width: 20px !important;  

    visibility: visible !important;  

    opacity: 1 !important;  
}  


/*  
   TEKS MENU  
   Target langsung span kedua  
*/  

.sidebar .sidebar-menu a > span:nth-child(2) {  
    display: inline-flex !important;  

    flex: 1 1 auto !important;  

    width: auto !important;  

    min-width: 0 !important;  

    visibility: visible !important;  

    opacity: 1 !important;  

    color: #ffffff !important;  

    white-space: nowrap !important;  
}  


/*  
   Sidebar bottom / Logout  
*/  

.sidebar .sidebar-bottom a {  
    display: flex !important;  

    align-items: center !important;  

    justify-content: flex-start !important;  

    gap: 12px !important;  
}  


.sidebar .sidebar-bottom a > span.menu-icon {  
    display: inline-flex !important;  

    flex: 0 0 20px !important;  

    width: 20px !important;  

    min-width: 20px !important;  

    visibility: visible !important;  
}  


.sidebar .sidebar-bottom a > span:nth-child(2) {  
    display: inline-flex !important;  

    flex: 1 1 auto !important;  

    color: #ffffff !important;  

    visibility: visible !important;  

    opacity: 1 !important;  

    white-space: nowrap !important;  
}  


/*  
   LABEL  
*/  

.sidebar .menu-label {  
    display: block !important;  

    visibility: visible !important;  

    opacity: 1 !important;  
}  


/* =========================  
   OVERLAY SMOOTH  
========================= */  

.mobile-sidebar-overlay {  
    opacity: 0 !important;  

    visibility: hidden !important;  

    pointer-events: none !important;  

    transition:  
        opacity 0.22s ease,  
        visibility 0s linear 0.22s !important;  
}  


.mobile-sidebar-overlay.active {  
    opacity: 1 !important;  

    visibility: visible !important;  

    pointer-events: auto !important;  

    transition:  
        opacity 0.22s ease,  
        visibility 0s linear 0s !important;  
}  


/* =========================  
   HAMBURGER  
========================= */  

.mobile-menu-button {  
    transform: translateZ(0);  

    will-change: transform;  

    transition:  
        background-color 0.15s ease,  
        transform 0.15s ease !important;  
}  


.mobile-menu-button:active {  
    transform: scale(0.94) !important;  
}  


/* =========================  
   CLOSE BUTTON  
========================= */  

.mobile-sidebar-close {  
    transform: translateZ(0);  

    will-change: transform;  

    transition:  
        background-color 0.15s ease,  
        transform 0.15s ease !important;  
}  


.mobile-sidebar-close:active {  
    transform: scale(0.94) !important;  
}

}

/* =========================================================
   FORCE MOBILE SIDEBAR TEXT
========================================================= */

@media (max-width: 800px) {

    .sidebar .sidebar-menu a,
    .sidebar .sidebar-bottom a {
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-indent: 0 !important;
        letter-spacing: normal !important;
    }


    /* Semua teks menu */

    .sidebar .sidebar-menu a > span:not(.menu-icon) {
        display: inline-flex !important;

        visibility: visible !important;

        opacity: 1 !important;

        width: auto !important;

        height: auto !important;

        max-width: none !important;

        overflow: visible !important;

        position: static !important;

        font-size: 13px !important;

        line-height: 1.4 !important;

        color: #ffffff !important;

        text-indent: 0 !important;

        white-space: nowrap !important;

        clip: auto !important;

        clip-path: none !important;
    }


    /* Menu label */

    .sidebar .menu-label {
        font-size: 10px !important;

        line-height: 1.4 !important;

        color: rgba(255,255,255,0.55) !important;

        visibility: visible !important;

        opacity: 1 !important;

        width: auto !important;

        height: auto !important;

        overflow: visible !important;
    }


    /* Logout */

    .sidebar .sidebar-bottom a > span:not(.menu-icon) {
        display: inline-flex !important;

        visibility: visible !important;

        opacity: 1 !important;

        width: auto !important;

        height: auto !important;

        overflow: visible !important;

        position: static !important;

        font-size: 13px !important;

        line-height: 1.4 !important;

        color: #ffffff !important;

        white-space: nowrap !important;
    }

}