/* ===== CLIENT MOBILE AUTO-FIT CLEAN V2 ===== */
@media (max-width: 768px) {
    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        background: #020617 !important;
    }

    .list-head,
    .table-head,
    .vpn-list-head,
    table thead {
        display: none !important;
    }

    .portal-card,
    .card,
    .panel,
    .list-card,
    .table-card,
    .vpn-list,
    .vpn-table,
    .list-wrap,
    .table-wrap,
    .clients-table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        background: #020617 !important;
    }

    .list-row,
    tr.list-row {
        position: relative !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas: none !important;

        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding: 14px !important;
        margin: 10px 0 !important;

        background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.94)) !important;
        border: 1px solid rgba(56,189,248,.28) !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 26px rgba(0,0,0,.20) !important;
    }

    .list-row::before,
    .list-row::after {
        display: none !important;
        content: none !important;
    }

    .list-row > *,
    .list-row .cell {
        grid-area: auto !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .list-row > .cell:first-child,
    .client-arrow-hide {
        display: none !important;
    }

    .cell[data-label]::before {
        display: none !important;
        content: none !important;
    }

    /* TOP: NAME */
    .cell[data-label="Name"] {
        order: 1 !important;
        grid-column: 1 / -1 !important;
        padding-right: 82px !important;
        min-height: 58px !important;
        display: block !important;
    }

    .vpn-name,
    .name-main,
    .client-name {
        display: block !important;
        color: #f8fafc !important;
        font-size: 20px !important;
        font-weight: 950 !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .vpn-sub,
    .name-sub {
        display: block !important;
        margin-top: 4px !important;
        color: #94a3b8 !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    /* SWITCH upper-right */
    .cell[data-label="VPN Access"] {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        order: 99 !important;

        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        overflow: visible !important;
        z-index: 30 !important;
    }

    .switch-btn,
    .switch,
    .toggle,
    .toggle-switch {
        transform: scale(.88) !important;
        transform-origin: right top !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    /* STATUS row */
    .cell[data-label="Status"] {
        order: 2 !important;
        grid-column: 1 / -1 !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 7px !important;

        min-height: 42px !important;
        padding: 8px 10px !important;

        background: rgba(2,6,23,.28) !important;
        border: 1px solid rgba(148,163,184,.14) !important;
        border-radius: 14px !important;
        overflow: visible !important;
    }

    .cell[data-label="Status"] .ms-server-mini,
    .cell[data-label="Status"] .badge,
    .cell[data-label="Status"] .ms-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: auto !important;
        max-width: 100% !important;
        height: 30px !important;
        padding: 0 10px !important;
        margin: 0 !important;

        font-size: 10px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    .ms-server-mini {
        color: #38bdf8 !important;
        background: rgba(2,6,23,.35) !important;
        border: 1px solid rgba(56,189,248,.16) !important;
        border-radius: 9px !important;
    }

    .cell[data-label="Status"] .badge,
    .cell[data-label="Status"] .ms-badge {
        border-radius: 999px !important;
    }

    /* 2x2 auto-fit boxes */
    .cell[data-label="Port #"] {
        order: 3 !important;
    }

    .cell[data-label="Uptime"] {
        order: 4 !important;
    }

    .cell[data-label="Subscription"] {
        order: 5 !important;
    }

    .cell[data-label="Expiry / Days Left"] {
        order: 6 !important;
    }

    .cell[data-label="Port #"],
    .cell[data-label="Uptime"],
    .cell[data-label="Subscription"],
    .cell[data-label="Expiry / Days Left"] {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 7px !important;

        min-width: 0 !important;
        min-height: 48px !important;
        padding: 9px 10px !important;

        background: rgba(2,6,23,.28) !important;
        border: 1px solid rgba(148,163,184,.14) !important;
        border-radius: 14px !important;

        color: #f8fafc !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        overflow: hidden !important;
    }

    .cell[data-label="Port #"]::before,
    .cell[data-label="Uptime"]::before,
    .cell[data-label="Subscription"]::before,
    .cell[data-label="Expiry / Days Left"]::before {
        display: inline-block !important;
        flex: 0 0 auto !important;

        font-size: 10px !important;
        font-weight: 950 !important;
        letter-spacing: .25px !important;
        color: #7dd3fc !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .cell[data-label="Port #"]::before {
        content: "PORT" !important;
    }

    .cell[data-label="Uptime"]::before {
        content: "UPTIME" !important;
    }

    .cell[data-label="Subscription"]::before {
        content: "SUB" !important;
    }

    .cell[data-label="Expiry / Days Left"]::before {
        content: "EXP" !important;
    }

    .port-click-copy,
    .port-chip,
    .cell[data-label="Port #"] span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 58px !important;
        max-width: 100% !important;
        padding: 7px 9px !important;

        background: rgba(14,165,233,.20) !important;
        color: #e0f2fe !important;
        border: 1px solid rgba(125,211,252,.38) !important;
        border-radius: 10px !important;

        font-size: 11px !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    .cell[data-label="Uptime"] {
        white-space: nowrap !important;
    }

    .cell[data-label="Subscription"] .badge,
    .cell[data-label="Subscription"] .ms-badge {
        min-width: auto !important;
        height: 28px !important;
        padding: 0 9px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    .cell[data-label="Expiry / Days Left"] {
        font-size: 9px !important;
        letter-spacing: -0.4px !important;
        white-space: nowrap !important;
    }

    .cell[data-label="Expiry / Days Left"] strong,
    .cell[data-label="Expiry / Days Left"] span {
        display: inline !important;
        color: #f8fafc !important;
        font-size: 9px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    input,
    select,
    button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* super small screen: automatic 1 column para hindi maputol */
@media (max-width: 370px) {
    .list-row,
    tr.list-row {
        grid-template-columns: 1fr !important;
    }

    .cell[data-label="Port #"],
    .cell[data-label="Uptime"],
    .cell[data-label="Subscription"],
    .cell[data-label="Expiry / Days Left"] {
        min-height: 44px !important;
    }
}

/* ===== EXP TEXT FIT FIX ===== */
@media (max-width: 768px) {
    .cell[data-label="Expiry / Days Left"],
    .cell[data-label="Expiry / Days Left"] strong,
    .cell[data-label="Expiry / Days Left"] span {
        font-size: 8.5px !important;
        letter-spacing: -0.5px !important;
        white-space: nowrap !important;
    }
}

/* ===== EXP BOX GLITCH / SPACE FIX ===== */
@media (max-width: 768px) {
    .cell[data-label="Expiry / Days Left"] {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 8px 8px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    .cell[data-label="Expiry / Days Left"]::before {
        content: "EXP" !important;
        display: inline-block !important;
        font-size: 10px !important;
        font-weight: 950 !important;
        color: #7dd3fc !important;
        letter-spacing: .2px !important;
        white-space: nowrap !important;
    }

    .cell[data-label="Expiry / Days Left"] .exp-date {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #f8fafc !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        letter-spacing: -0.4px !important;
        line-height: 1 !important;
    }

    .cell[data-label="Expiry / Days Left"] .exp-days {
        display: block !important;
        justify-self: end !important;
        min-width: max-content !important;
        white-space: nowrap !important;
        color: #f8fafc !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        letter-spacing: -0.6px !important;
        line-height: 1 !important;
    }
}

/* ===== FORCE EXP DAYS BACK INLINE ===== */
@media (max-width: 768px) {
    .cell[data-label="Expiry / Days Left"] {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) max-content !important;
        align-items: center !important;
        column-gap: 4px !important;
        row-gap: 0 !important;
        padding: 8px 7px !important;
        min-height: 48px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .cell[data-label="Expiry / Days Left"]::before {
        content: "EXP" !important;
        grid-column: 1 !important;
        white-space: nowrap !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }

    .cell[data-label="Expiry / Days Left"] .exp-date {
        grid-column: 2 !important;
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 8.5px !important;
        line-height: 1 !important;
        letter-spacing: -0.5px !important;
    }

    .cell[data-label="Expiry / Days Left"] .exp-days {
        grid-column: 3 !important;
        display: block !important;
        min-width: max-content !important;
        justify-self: end !important;
        white-space: nowrap !important;
        font-size: 7.5px !important;
        line-height: 1 !important;
        letter-spacing: -0.7px !important;
        transform: translateY(0) !important;
    }
}

@media (max-width: 390px) {
    .cell[data-label="Expiry / Days Left"] {
        column-gap: 3px !important;
        padding: 8px 6px !important;
    }

    .cell[data-label="Expiry / Days Left"] .exp-date {
        font-size: 8px !important;
    }

    .cell[data-label="Expiry / Days Left"] .exp-days {
        font-size: 7px !important;
    }
}

/* ===== FINAL EXP INLINE FIX ===== */
@media (max-width: 768px) {
    .cell[data-label="Expiry / Days Left"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;

        min-width: 0 !important;
        padding: 8px 6px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    .cell[data-label="Expiry / Days Left"]::before {
        content: "EXP" !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        font-size: 9px !important;
        font-weight: 950 !important;
        color: #7dd3fc !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .cell[data-label="Expiry / Days Left"] .exp-date {
        display: inline-flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        font-size: 7.8px !important;
        font-weight: 900 !important;
        letter-spacing: -0.7px !important;
        line-height: 1 !important;
    }

    .cell[data-label="Expiry / Days Left"] .exp-days {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;

        font-size: 7px !important;
        font-weight: 900 !important;
        letter-spacing: -0.8px !important;
        line-height: 1 !important;
        transform: none !important;
    }
}

/* ===== EXP DATE + DAYS CLOSE FIX OVERRIDE ===== */
@media (max-width: 768px) {
    .cell[data-label="Expiry / Days Left"] {
        justify-content: flex-start !important;
        gap: 4px !important;
    }

    .cell[data-label="Expiry / Days Left"] .exp-date {
        flex: 0 1 auto !important;
        max-width: 72px !important;
    }

    .cell[data-label="Expiry / Days Left"] .exp-days {
        flex: 0 0 auto !important;
        margin-left: 3px !important;
    }
}