:root{
    --mb-v2-bg:#f6f8fb;
    --mb-v2-card:#ffffff;
    --mb-v2-line:#e5e7eb;
    --mb-v2-text:#111827;
    --mb-v2-muted:#667085;
    --mb-v2-blue:#2563eb;
    --mb-v2-radius:16px;
}

/* Global safety */
html,body{
    max-width:100%;
}

body{
    background:var(--mb-v2-bg);
}

/* Prevent horizontal overflow on mobile */
img,svg,canvas,video{
    max-width:100%;
}

table{
    max-width:100%;
}

/* Main compact behavior */
@media(max-width:820px){
    html,body{
        overflow-x:hidden !important;
    }

    body{
        font-size:13px !important;
        line-height:1.35 !important;
    }

    .container,
    .container-fluid,
    .content,
    .main-content,
    .page-content,
    .dashboard-content,
    main,
    section{
        max-width:100% !important;
        width:100% !important;
        padding-left:10px !important;
        padding-right:10px !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .card,
    .box,
    .panel,
    .neo-card,
    .glass-card,
    .stat-card,
    .dashboard-card{
        border-radius:var(--mb-v2-radius) !important;
        padding:11px !important;
        margin-bottom:10px !important;
        box-shadow:0 8px 18px rgba(15,23,42,.06) !important;
    }

    h1{font-size:21px !important;line-height:1.2 !important;}
    h2{font-size:19px !important;line-height:1.25 !important;}
    h3{font-size:17px !important;line-height:1.25 !important;}

    .row{
        margin-left:-5px !important;
        margin-right:-5px !important;
    }

    [class*="col-"]{
        padding-left:5px !important;
        padding-right:5px !important;
    }

    .table-responsive,
    .table-wrap,
    .data-table-wrapper{
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch !important;
        border-radius:var(--mb-v2-radius) !important;
    }

    table{
        font-size:12px !important;
    }

    th,td{
        padding:7px 8px !important;
        vertical-align:middle !important;
    }

    .btn,
    button,
    input,
    select,
    textarea{
        min-height:38px !important;
        border-radius:10px !important;
        font-size:13px !important;
    }

    .btn{
        padding:8px 10px !important;
    }

    .form-control,
    .form-select{
        padding:8px 10px !important;
    }

    .sidebar,
    aside{
        max-width:84vw !important;
    }

    .modal-dialog{
        margin:10px !important;
        max-width:calc(100% - 20px) !important;
    }

    .modal-content{
        border-radius:16px !important;
    }

    .dropdown-menu{
        max-width:92vw !important;
    }

    .badge,
    .label,
    .status-badge{
        font-size:11px !important;
        padding:4px 7px !important;
        border-radius:999px !important;
    }

    .action-buttons,
    .btn-group,
    .table-actions{
        display:flex !important;
        flex-wrap:wrap !important;
        gap:6px !important;
    }

    .pagination{
        flex-wrap:wrap !important;
        gap:4px !important;
    }
}

/* Traffic chart fixes */
.admin-mikrotik-chartbox{
    overflow:hidden !important;
    contain:paint !important;
    position:relative !important;
}

#mikrotikTrafficChart{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    touch-action:pan-y !important;
}

/* TX/RX legend compact horizontal */
.macbilling-txrx-compact{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:26px !important;
    width:fit-content !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

.macbilling-txrx-compact > *{
    flex:0 0 auto !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

/* TX/RX vertical gap */
@media(max-width:820px){
    .macbilling-txrx-tight-vertical{
        position:relative !important;
        transform:translateY(-34px) !important;
        margin-top:-22px !important;
        margin-bottom:-24px !important;
        z-index:5 !important;
    }

    .macbilling-traffic-chartbox-tight{
        margin-bottom:0 !important;
        padding-bottom:0 !important;
    }

    .macbilling-traffic-card-tight{
        padding-bottom:18px !important;
    }

    .macbilling-txrx-compact{
        gap:22px !important;
    }
}

@media(min-width:821px){
    .macbilling-txrx-tight-vertical{
        position:relative !important;
        transform:translateY(-18px) !important;
        margin-top:-10px !important;
        margin-bottom:-10px !important;
    }
}

/* Bottom navigation safety */
@media(max-width:820px){
    body{
        padding-bottom:86px !important;
    }

    .bottom-nav,
    .mobile-bottom-nav,
    .neo-bottom-nav{
        max-width:calc(100% - 16px) !important;
        left:8px !important;
        right:8px !important;
        bottom:8px !important;
        border-radius:24px !important;
        overflow:hidden !important;
    }
}