/* =========================================================
   LANGSOCKS MOBILE RESPONSIVE
   User + Admin
   ========================================================= */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

*{
    box-sizing:border-box;
}

img,
svg,
video{
    max-width:100%;
    height:auto;
}


/* ---------------------------------------------------------
   GENERIC TABLE
   --------------------------------------------------------- */

.table-wrap{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}

.data-table{
    width:100%;
}

.data-table th,
.data-table td{
    white-space:nowrap;
}


/* Proxy / invoice / long strings */
code,
.cell-main,
.secret-cell{
    max-width:100%;
}

code{
    overflow-wrap:anywhere;
}


/* ---------------------------------------------------------
   TOUCH CONTROLS
   --------------------------------------------------------- */

@media (max-width:768px){

    button,
    .btn,
    input,
    select,
    textarea{
        min-height:42px;
    }

    button,
    .btn{
        padding:10px 13px;
    }

    input,
    select,
    textarea{
        font-size:16px !important;
    }

}


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

@media (max-width:1100px){

    .dashboard-grid,
    .stats-grid,
    .metric-grid,
    .commerce-grid,
    .admin-grid,
    .admin-dashboard-grid,
    .upstream-metrics{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .span-2,
    .span-3,
    .span-4{
        grid-column:1 / -1 !important;
    }

}


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

@media (max-width:768px){

    body{
        font-size:14px;
    }

    /* Main page spacing */
    main,
    .main,
    .main-content,
    .page-content,
    .content,
    .admin-content,
    .dashboard-content{
        width:100% !important;
        max-width:100% !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }


    /* ---------------------------------------------
       HEADINGS
       --------------------------------------------- */

    .page-heading,
    .admin-page-head,
    .admin-panel-head{
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:10px !important;
    }

    .page-heading h1,
    .admin-page-head h1{
        font-size:24px !important;
        line-height:1.2;
    }

    .page-heading p,
    .admin-page-head p{
        font-size:12px;
    }


    /* ---------------------------------------------
       GRIDS -> ONE COLUMN
       --------------------------------------------- */

    .dashboard-grid,
    .stats-grid,
    .metric-grid,
    .commerce-grid,
    .admin-grid,
    .admin-dashboard-grid,
    .upstream-metrics,
    .upstream-tools-grid,
    .profile-grid,
    .product-grid,
    .products-grid,
    .queue-grid,
    .dist-grid,
    .maintenance-status-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        width:100% !important;
    }


    /* ---------------------------------------------
       CARDS / PANELS
       --------------------------------------------- */

    .panel,
    .admin-panel-v8,
    .metric-card,
    .stat-card,
    .queue-card,
    .dist-card,
    .maintenance-control{
        width:100% !important;
        min-width:0 !important;
        border-radius:12px !important;
    }


    /* ---------------------------------------------
       FORMS
       --------------------------------------------- */

    .form-grid,
    .admin-form-v8,
    .upstream-filter-v91,
    .dist-filter{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    .form-grid > *,
    .admin-form-v8 > *,
    .upstream-filter-v91 > *,
    .dist-filter > *{
        width:100% !important;
        min-width:0 !important;
    }


    /* ---------------------------------------------
       ACTION TOOLBARS
       --------------------------------------------- */

    .actions,
    .bulk-toolbar,
    .proxy-actions-v5,
    .maintenance-action{
        display:flex !important;
        flex-wrap:wrap !important;
        width:100%;
        gap:7px !important;
    }

    .actions .btn,
    .bulk-toolbar .btn,
    .proxy-actions-v5 .btn{
        flex:1 1 auto;
    }


    /* ---------------------------------------------
       TABLES
       Keep horizontal swipe instead of breaking UI
       --------------------------------------------- */

    .table-wrap{
        margin-left:0 !important;
        margin-right:0 !important;
        padding-bottom:6px;
    }

    .data-table{
        min-width:720px;
        font-size:11px;
    }

    .data-table th,
    .data-table td{
        padding:9px 8px !important;
    }

    .upstream-table-v91{
        min-width:1200px !important;
    }


    /* visual hint that table can swipe */
    .table-wrap::after{
        content:"← Geser tabel →";
        display:block;
        position:sticky;
        left:0;
        width:max-content;
        margin-top:6px;
        padding:4px 8px;
        border-radius:6px;
        background:rgba(37,99,235,.12);
        color:#7faeff;
        font-size:9px;
    }


    /* ---------------------------------------------
       PROXY TEXT
       --------------------------------------------- */

    .cell-main{
        min-width:160px;
    }

    .secret-cell{
        min-width:120px;
    }


    /* ---------------------------------------------
       MAINTENANCE OVERLAY
       --------------------------------------------- */

    .user-maintenance-backdrop{
        padding:14px !important;
        align-items:center !important;
    }

    .user-maintenance-box{
        width:100% !important;
        max-height:90vh;
        overflow-y:auto;
        padding:24px 18px !important;
        border-radius:16px !important;
    }

    .user-maintenance-box h1{
        font-size:23px !important;
    }

    .user-maintenance-box p{
        font-size:13px;
    }


    /* ---------------------------------------------
       QUEUE / DISTRIBUTION BARS
       --------------------------------------------- */

    .queue-flow,
    .flow-row{
        grid-template-columns:1fr !important;
        gap:6px !important;
    }

    .queue-percent,
    .flow-percent{
        text-align:left !important;
    }


    /* ---------------------------------------------
       TOP BAR
       --------------------------------------------- */

    .topbar,
    .top-bar,
    .admin-topbar{
        padding-left:12px !important;
        padding-right:12px !important;
    }

}


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

@media (max-width:480px){

    .page-heading h1,
    .admin-page-head h1{
        font-size:21px !important;
    }

    .data-table{
        font-size:10px;
    }

    .btn{
        font-size:12px;
    }

    .maintenance-status-grid{
        grid-template-columns:1fr 1fr !important;
    }

}


/* =========================================================
   MOBILE SIDEBAR DRAWER
   ========================================================= */

.mobile-menu-button{
    display:none;
}

.mobile-sidebar-overlay{
    display:none;
}


@media (max-width:768px){

    .mobile-menu-button{
        position:fixed;
        top:12px;
        left:12px;
        z-index:100003;

        width:44px;
        height:44px;

        display:flex;
        align-items:center;
        justify-content:center;

        padding:0;
        border:1px solid rgba(255,255,255,.10);
        border-radius:11px;

        background:#0d1a2c;
        color:#fff;

        font-size:23px;
        line-height:1;

        box-shadow:0 8px 24px rgba(0,0,0,.32);

        cursor:pointer;
    }


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


    .mobile-sidebar-overlay{
        position:fixed;
        inset:0;

        z-index:100000;

        display:block;

        background:rgba(3,8,15,.70);
        backdrop-filter:blur(2px);

        opacity:0;
        visibility:hidden;
        pointer-events:none;

        transition:
            opacity .22s ease,
            visibility .22s ease;
    }


    body.mobile-sidebar-open .mobile-sidebar-overlay{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }


    /*
       Cocokkan beberapa nama class sidebar
       supaya bisa dipakai user/admin sekaligus.
    */
    .sidebar,
    .side-bar,
    .app-sidebar,
    .admin-sidebar,
    aside.sidebar,
    aside.admin-sidebar{

        position:fixed !important;

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

        z-index:100002 !important;

        width:min(290px, 84vw) !important;
        max-width:84vw !important;
        height:100dvh !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        transform:translateX(-105%);
        transition:transform .24s ease !important;

        box-shadow:18px 0 50px rgba(0,0,0,.40);
    }


    body.mobile-sidebar-open .sidebar,
    body.mobile-sidebar-open .side-bar,
    body.mobile-sidebar-open .app-sidebar,
    body.mobile-sidebar-open .admin-sidebar,
    body.mobile-sidebar-open aside.sidebar,
    body.mobile-sidebar-open aside.admin-sidebar{
        transform:translateX(0);
    }


    /*
       Main content tidak lagi menyisakan ruang desktop sidebar.
    */
    .app-main,
    .main-wrapper,
    .main-shell,
    .layout-main,
    .admin-main,
    .admin-shell,
    .content-wrapper{
        margin-left:0 !important;
        padding-left:0 !important;
        width:100% !important;
        max-width:100% !important;
    }


    /*
       beri jarak agar hamburger tidak menutup header
    */
    .page-heading,
    .admin-page-head,
    .admin-topbar,
    .topbar,
    .top-bar{
        padding-left:54px !important;
    }


    body.mobile-sidebar-open{
        overflow:hidden;
        touch-action:none;
    }

}


@media (min-width:769px){

    body.mobile-sidebar-open{
        overflow:auto;
    }

}


/* =========================================================
   LANGSOCKS ADMIN MOBILE SIDEBAR
   Actual selector: .admin-sidebar-v8
   ========================================================= */

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


@media (max-width:768px){

    /*
     * Admin sidebar menjadi off-canvas drawer
     */
    .admin-sidebar-v8{
        position:fixed !important;

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

        width:min(290px, 84vw) !important;
        max-width:84vw !important;
        height:100dvh !important;

        z-index:12002 !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        transform:translateX(-105%) !important;

        transition:
            transform .24s ease !important;

        box-shadow:
            18px 0 55px rgba(0,0,0,.50);
    }


    body.admin-mobile-sidebar-open
    .admin-sidebar-v8{
        transform:translateX(0) !important;
    }


    /*
     * Hamburger
     */
    .admin-mobile-menu{
        display:flex;

        position:fixed;
        left:12px;
        top:12px;

        z-index:12004;

        width:44px;
        height:44px;

        padding:0;

        align-items:center;
        justify-content:center;

        border-radius:11px;

        border:
            1px solid rgba(255,255,255,.10);

        background:#0a192c;
        color:#fff;

        font-size:22px;
        line-height:1;

        cursor:pointer;

        box-shadow:
            0 8px 28px rgba(0,0,0,.35);
    }


    /*
     * Background ketika drawer terbuka
     */
    .admin-mobile-sidebar-overlay{
        display:block;

        position:fixed;
        inset:0;

        z-index:12001;

        background:
            rgba(2,8,16,.72);

        backdrop-filter:blur(3px);

        opacity:0;
        visibility:hidden;

        pointer-events:none;

        transition:
            opacity .22s ease,
            visibility .22s ease;
    }


    body.admin-mobile-sidebar-open
    .admin-mobile-sidebar-overlay{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }


    /*
     * Hilangkan space desktop sidebar
     */
    .admin-main-v8,
    .admin-content-v8,
    .admin-layout-v8,
    .admin-shell-v8,
    .admin-page-v8{
        margin-left:0 !important;
        width:100% !important;
        max-width:100% !important;
    }


    /*
     * Header diberi ruang hamburger
     */
    .admin-topbar-v8,
    .admin-panel-head:first-child,
    .admin-page-head{
        padding-left:54px !important;
    }


    body.admin-mobile-sidebar-open{
        overflow:hidden;
    }


    /*
     * Footer sidebar tetap mudah ditekan
     */
    .admin-sidebar-foot{
        padding-bottom:
            calc(18px + env(safe-area-inset-bottom));
    }

}


/* =========================================================
   USER SIDEBAR - EXISTING DRAWER
   ========================================================= */

@media (max-width:768px){

    #sidebar.sidebar{
        position:fixed !important;

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

        width:min(290px, 84vw) !important;
        max-width:84vw !important;

        height:100dvh !important;

        z-index:11002 !important;

        overflow-y:auto !important;

        box-shadow:
            18px 0 50px rgba(0,0,0,.45);
    }


    .sidebar-overlay{
        position:fixed !important;
        inset:0 !important;

        z-index:11001 !important;

        background:
            rgba(2,8,16,.70) !important;

        backdrop-filter:
            blur(3px);
    }


    .menu-toggle{
        min-width:44px !important;
        min-height:44px !important;
    }


    .sidebar-close{
        min-width:40px !important;
        min-height:40px !important;
    }


    .sidebar-nav a{
        min-height:44px;
        display:flex;
        align-items:center;
    }

}

/* =========================================================
   IOS MOBILE BLUR FIX
   Jangan gunakan backdrop-filter untuk sidebar overlay.
   Safari iOS kadang tetap merender blur walau overlay hidden.
   ========================================================= */

@media (max-width:768px){

    .sidebar-overlay,
    .mobile-sidebar-overlay,
    .admin-mobile-sidebar-overlay{
        -webkit-backdrop-filter:none !important;
        backdrop-filter:none !important;
        filter:none !important;
    }

    .sidebar-overlay{
        background:rgba(2,8,16,.72) !important;
    }

    .mobile-sidebar-overlay,
    .admin-mobile-sidebar-overlay{
        background:rgba(2,8,16,.72) !important;
    }

}

@media (max-width:768px){

    body:not(.sidebar-open) .sidebar-overlay,
    body:not(.mobile-sidebar-open) .mobile-sidebar-overlay,
    body:not(.admin-mobile-sidebar-open) .admin-mobile-sidebar-overlay{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        display:none !important;
    }

}


/* ============================================================
   iOS / MOBILE SAFARI - GLOBAL BLUR FIX
   Hindari backdrop-filter di layar mobile.
   ============================================================ */

@media (max-width: 768px) {

    /* Jangan biarkan elemen mana pun melakukan backdrop blur */
    * {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Topbar tetap opaque supaya tetap enak dilihat */
    .topbar,
    .admin-topbar-v8,
    .public-header,
    .public-navbar {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        filter: none !important;
    }

    /* Overlay sidebar tanpa blur */
    .sidebar-overlay,
    .mobile-sidebar-overlay,
    .admin-mobile-sidebar-overlay {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        filter: none !important;
    }

    /* Saat overlay tidak aktif benar-benar hilangkan dari rendering */
    .sidebar-overlay:not(.active),
    .mobile-sidebar-overlay:not(.active),
    .admin-mobile-sidebar-overlay:not(.active) {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Cegah blur/filter tertinggal di content */
    body,
    .app-shell,
    .main-shell,
    .page-content,
    main {
        filter: none !important;
        -webkit-filter: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}