/*
 * mobile.css — responsive overrides for desktop pages
 * Included in: cpanel.php, index.php (login), tracking.php
 * Breakpoints:
 *   768px  — tablets
 *   576px  — phones (landscape)
 *   420px  — phones (portrait)
 */

/* ──────────────────────────────────────────────
   CPANEL — sidebar → bottom nav on mobile
   ────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* Sidebar becomes a fixed horizontal bottom bar */
    #sidebar-menu {
        position: fixed !important;
        width: 100% !important;
        height: 56px !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        z-index: 9999 !important;
        overflow: hidden !important;
    }

    /* Hide scrollbar wrapper, keep only the menu list */
    #sidebar-menu .inner-top {
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
    }
    #sidebar-menu .inner-bottom {
        display: none !important;
    }
    #sidebar-menu .sidebar-logo {
        display: none !important;
    }

    /* Horizontal menu list */
    #sidebar-menu .v-menu {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #sidebar-menu .v-menu li {
        flex: 1 !important;
        text-align: center !important;
    }
    #sidebar-menu .v-menu li a {
        padding: 6px 2px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    /* Hide text labels, show only icons */
    #sidebar-menu .v-menu li a .label {
        display: none !important;
    }
    #sidebar-menu .v-menu li a svg,
    #sidebar-menu .v-menu li a i {
        font-size: 18px !important;
        width: 20px !important;
        height: 20px !important;
    }
    /* Counter badges */
    #sidebar-menu .counter {
        font-size: 8px !important;
        padding: 0 1px !important;
        margin-top: 2px !important;
    }
    /* Hide extra hover sub-menus */
    #sidebar-menu li.more-items .hidden-menu-items {
        display: none !important;
    }

    /* Content sections: remove left offset, add bottom padding for nav bar */
    #cpanel_user_list,
    #cpanel_object_list,
    #cpanel_unused_object_list,
    #cpanel_billing_plan_list,
    #cpanel_manage_server {
        margin-left: 0 !important;
        margin-bottom: 60px !important;
        padding: 15px !important;
    }

    /* Side panel (objects/events list in tracking) */
    #side_panel {
        left: 0 !important;
    }

    /* Top panel full-width */
    #top_panel {
        left: 0 !important;
    }

    /* jqGrid tables — horizontal scroll */
    .ui-jqgrid {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .ui-jqgrid-bdiv {
        overflow-x: auto !important;
    }

    /* Dialogs — full width */
    .ui-dialog {
        max-width: 98vw !important;
        min-width: unset !important;
        left: 1vw !important;
        box-sizing: border-box !important;
    }

    /* Generic buttons */
    .button {
        min-height: 38px !important;
        font-size: 13px !important;
    }

    /* Row blocks: stack vertically */
    .width50.block-a,
    .width50.block-b {
        width: 100% !important;
    }
}

/* ──────────────────────────────────────────────
   LOGIN PAGE — index.php responsive tweaks
   (viewport is set; this is fallback for desktop
    users on small windows)
   ────────────────────────────────────────────── */

@media (max-width: 576px) {
    body#login .wrapper {
        padding: 10px !important;
    }
    body#login .inner-wrapper {
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto !important;
    }
    body#login .logo-block img {
        max-width: 160px !important;
    }
    body#login input.input-xl {
        height: 44px !important;
        line-height: 44px !important;
    }
    body#login .button {
        width: 100% !important;
    }
}

/* ──────────────────────────────────────────────
   TRACKING PAGE — viewport fallback
   (real mobile gets redirected to /mobile/)
   ────────────────────────────────────────────── */

@media (max-width: 768px) {
    body#tracking #sidebar-menu {
        position: fixed !important;
        width: 100% !important;
        height: 56px !important;
        top: auto !important;
        left: 0 !important;
        bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        z-index: 9999 !important;
    }
    body#tracking #map {
        left: 0 !important;
        bottom: 56px !important;
    }
    body#tracking #side_panel {
        left: 0 !important;
        width: 100% !important;
    }
    body#tracking #top_panel {
        left: 0 !important;
    }
}

/* ──────────────────────────────────────────────
   GENERAL — applies everywhere
   ────────────────────────────────────────────── */

@media (max-width: 576px) {
    /* Tables: horizontal scroll */
    table {
        width: 100% !important;
    }
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Inputs: full width */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    select,
    textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Width helpers: stack on phone */
    .width50 {
        width: 100% !important;
    }
    .width33 {
        width: 100% !important;
    }
    .width40 {
        width: 100% !important;
    }

    /* Dialogs */
    .ui-dialog {
        max-width: 100vw !important;
        left: 0 !important;
    }
}