/* Admin — mobile layout (≤768px primary, ≤992px secondary) */

@media (max-width: 992px) {
    .container,
    .profile-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .card {
        padding: 16px !important;
        border-radius: 12px;
    }

    .page-header--toolbar,
    .d-flex.justify-content-between.align-items-center.flex-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .page-header-actions,
    .d-flex.justify-content-between.align-items-center.flex-wrap > .btn,
    .d-flex.justify-content-between.align-items-center.flex-wrap > button {
        width: 100%;
    }

    .page-header-actions .btn,
    .page-header-actions .add-server-btn,
    .page-header-actions .add-service-btn,
    .page-header-actions form {
        width: 100%;
    }

    .page-header-actions .add-server-btn,
    .page-header-actions .add-service-btn,
    .page-header-actions .btn-primary {
        justify-content: center;
        min-height: 44px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

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

    .stat-card:hover {
        transform: none;
    }

    .stat-box:hover {
        transform: none;
    }

    .activity-container,
    .top-services {
        padding: 16px !important;
    }

    .report-header,
    .chat-container {
        padding: 16px !important;
    }

    .report-title {
        font-size: 20px;
    }

    .report-meta {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .min-vh-100 .card {
        width: 100%;
        max-width: 100%;
    }

    .container.py-4 {
        padding-top: 16px !important;
    }

    .page-title,
    .h4.mb-1 {
        font-size: 20px !important;
    }

    .profile-container {
        padding: 12px !important;
    }

    .profile-header {
        padding: 20px 16px !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-name {
        font-size: 22px;
    }

    .profile-meta {
        justify-content: center;
        gap: 12px;
    }

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

    .profile-section,
    .subscription-card {
        padding: 16px !important;
    }

    .report-meta {
        grid-template-columns: 1fr !important;
    }

    .chat-messages {
        max-height: 50vh;
        padding: 12px;
    }

    .message-form .row {
        flex-direction: column;
    }

    .message-form .col-auto {
        width: 100%;
    }

    .service-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }

    .activity-meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Filters & search */
    .search-bar,
    .filter-bar,
    .servers-filters {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .search-bar .search-input,
    .search-bar .filter-select,
    .filter-bar .filter-select,
    .filter-bar input,
    .filter-bar select,
    .filter-bar button,
    .filter-bar a,
    .servers-search,
    .servers-country-filter {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px;
    }

    .btn-filter,
    .btn-reset {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    /* Stats mini */
    .stats-mini {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    .stat-mini {
        flex: 1 1 calc(50% - 5px) !important;
        min-width: 0 !important;
        padding: 14px 16px !important;
    }

    /* Tabs */
    .transactions-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .transactions-tabs .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Forms */
    .form-row,
    .payment-option-row {
        grid-template-columns: 1fr !important;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn-primary,
    .form-actions .btn-secondary {
        width: 100%;
        min-height: 44px;
    }

    .container .form-control,
    .container .form-select,
    .modal .form-control,
    .modal .form-select,
    .pm-modal-box .form-control,
    .pm-modal-box .form-select {
        min-height: 44px;
        font-size: 16px;
    }

    .container .btn,
    .container .btn-sm,
    .modal .btn {
        min-height: 40px;
    }

    .container .btn-sm {
        min-height: 44px;
        padding: 8px 14px;
    }

    /* Modals */
    .modal.active {
        align-items: flex-end;
        padding: 0;
    }

    .modal-content,
    .pm-modal-box,
    .vpn-modal,
    .modal-content.service-modal-wide {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: calc(100vh - env(safe-area-inset-top, 0px)) !important;
        padding: 20px 16px max(20px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .modal-header {
        margin-bottom: 16px;
    }

    .modal-title {
        font-size: 18px;
    }

    .modal-close {
        min-width: 44px;
        min-height: 44px;
    }

    .terminal-modal.active {
        align-items: stretch;
    }

    .terminal-modal .modal-content {
        border-radius: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    .terminal-modal #terminal {
        height: calc(100vh - 120px) !important;
    }

    /* Touch targets */
    .action-btn,
    .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    .status-toggle {
        width: 54px;
        height: 30px;
    }

    .container .row.g-3 > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .container .btn-primary.mb-4,
    .container .btn-success {
        width: 100%;
        min-height: 44px;
    }

    /* Table → cards */
    .card:has(.admin-table--cards),
    .transactions-section:has(.admin-table--cards),
    .admin-table-viewport:has(.admin-table--cards),
    .vpn-table-wrap:has(.admin-table--cards),
    .table-responsive:has(.admin-table--cards) {
        overflow: visible !important;
    }

    table.admin-table--cards {
        min-width: 0 !important;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    table.admin-table--cards thead {
        display: none;
    }

    table.admin-table--cards tbody {
        display: block;
    }

    table.admin-table--cards tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 14px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }

    table.admin-table--cards tbody tr:hover {
        background: #fff;
    }

    table.admin-table--cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid #f1f3f5;
        text-align: right;
        font-size: 14px;
    }

    table.admin-table--cards tbody td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #6c757d;
        text-align: left;
        flex-shrink: 0;
        max-width: 45%;
    }

    table.admin-table--cards tbody td[data-label=""]::before,
    table.admin-table--cards tbody td:not([data-label])::before {
        content: none;
    }

    /* Card header cell (first column) */
    table.admin-table--cards tbody td:first-child {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        border-bottom: 1px solid #e9ecef;
        padding-top: 0;
        padding-bottom: 12px;
        margin-bottom: 4px;
    }

    table.admin-table--cards tbody td:first-child::before {
        display: none;
    }

    /* Actions cell */
    table.admin-table--cards tbody td:last-child:has(.btn),
    table.admin-table--cards tbody td.admin-td-actions {
        flex-direction: column;
        align-items: stretch;
        border-bottom: none;
        padding-bottom: 0;
        padding-top: 12px;
        gap: 8px;
    }

    table.admin-table--cards tbody td:last-child:has(.btn)::before,
    table.admin-table--cards tbody td.admin-td-actions::before {
        display: none;
    }

    table.admin-table--cards tbody td:last-child .btn,
    table.admin-table--cards tbody td.admin-td-actions .btn,
    table.admin-table--cards tbody td.admin-td-actions form {
        width: 100%;
    }

    table.admin-table--cards tbody td:last-child .btn,
    table.admin-table--cards tbody td.admin-td-actions .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    table.admin-table--cards tbody td .payment-pills {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    table.admin-table--cards .report-description {
        max-width: none !important;
        white-space: normal !important;
        text-align: left;
    }

    .vpn-table-wrap {
        overflow: visible;
    }

    table.admin-table--cards .vpn-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    table.admin-table--cards .vpn-actions .btn-vpn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .users-table-viewport {
        max-height: none;
        overflow: visible;
    }

    .servers-grid-viewport {
        overflow: visible;
    }
}

@media (max-width: 480px) {
    .stat-mini {
        flex: 1 1 100% !important;
    }

    .stat-mini-value {
        font-size: 20px;
    }

    .env-badge {
        font-size: 9px;
    }
}

@media (hover: none) {
    .stat-card:hover,
    .stat-box:hover,
    .server-card:hover,
    .conn-stat-card:hover {
        transform: none;
    }
}