/* Social-X Responsive Styles (Separated from main style.css) */

@media (max-width: 992px) {

    /* Prevents horizontal scroll globally on mobile */
    html,
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        width: 100% !important;
        position: relative;
    }

    /* Layout Overrides */
    .sidebar {
        display: none !important;
    }

    .sidebar-overlay {
        display: none !important;
    }

    .main-content {
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 15px !important;
        /* Moderate padding for bottom nav */
        padding-bottom: 90px !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Bottom Navigation Bar with Scroll Support */
    .bottom-nav {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        margin: 0 !important;
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
        z-index: 9999;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
        padding: 8px 0;
    }

    .bottom-nav-container {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 10px;
        scroll-behavior: smooth;
    }

    .bottom-nav-container::-webkit-scrollbar {
        display: none;
    }

    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 70px;
        max-width: 80px;
        padding: 8px 12px;
        text-decoration: none;
        color: #64748b;
        font-size: 10px;
        font-weight: 700;
        transition: all 0.3s ease;
        position: relative;
        border-radius: 12px;
        margin: 0 2px;
        flex-shrink: 0;
    }

    .bottom-nav-item:hover {
        background: #f8fafc;
        color: #2563eb;
    }

    .bottom-nav-item.active {
        color: #2563eb;
        background: #eff6ff;
    }

    .bottom-nav-item i {
        font-size: 20px;
        margin-bottom: 4px;
        transition: transform 0.2s;
    }

    .bottom-nav-item.active i {
        transform: translateY(-1px);
    }

    /* Grids & Headers */
    .dashboard-header {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
        padding: 20px !important;
    }

    .header-info h1 {
        font-size: 22px !important;
    }

    .admin-profile {
        width: 100% !important;
        justify-content: center !important;
    }

    .stats-grid {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .stats-grid .stat-card {
        flex: 1 1 100% !important;
    }

    .analytics-grid {
        flex-direction: column !important;
    }

    .analytics-grid .col-main,
    .analytics-grid .col-side {
        flex: 1 1 100% !important;
    }

    .services-grid,
    .content-card-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .platform-ribbon {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .platform-pill {
        flex: 1 1 calc(50% - 10px) !important;
        min-width: 120px !important;
    }

    /* Form Elements Optimization (Prevent Oversized UI) */
    .form-control,
    .form-select,
    select {
        padding: 10px 12px !important;
        font-size: 13px !important;
        height: auto !important;
        border-radius: 10px !important;
    }

    .form-group label {
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }

    .premium-order-form {
        padding: 15px !important;
    }

    .wizard-step {
        padding: 10px 0 !important;
    }

    /* Generic Utility Grids to Flex */
    .responsive-grid-2,
    .responsive-grid-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* Admin Specific Fixes */
    .news-manage-card {
        padding: 15px !important;
        border-radius: 15px !important;
    }

    .seo-preview {
        max-width: 100% !important;
        margin-top: 10px !important;
        padding: 10px !important;
    }

    .preview-title {
        font-size: 16px !important;
    }

    .preview-desc {
        font-size: 13px !important;
    }

    .flex-stack-mobile {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.98);
        z-index: 10000;
        display: none;
        flex-direction: column;
        padding: 30px;
        backdrop-filter: blur(10px);
        overflow-y: auto;
    }

    .mobile-menu-overlay.active {
        display: flex;
    }

    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
    }

    .mobile-menu-header h2 {
        font-size: 20px;
        font-weight: 800;
        color: #1e293b;
    }

    .close-menu {
        font-size: 24px;
        color: #475569;
        cursor: pointer;
    }

    .mobile-menu-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .mobile-menu-item {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        padding: 20px 15px;
        border-radius: 16px;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
        transition: all 0.2s;
    }

    .mobile-menu-item i {
        font-size: 22px;
        color: #2563eb;
    }

    .mobile-menu-item span {
        font-size: 13px;
        font-weight: 700;
        color: #1e293b;
    }

    .mobile-menu-item:active {
        transform: scale(0.95);
        background: #eff6ff;
    }

    .mobile-menu-footer {
        margin-top: auto;
        padding-top: 40px;
        text-align: center;
    }

    /* Table Responsiveness Hack */
    .table-responsive {
        overflow-x: visible !important;
        border: 0 !important;
    }

    /* Admin Users Premium Mobile Cards */
    .data-table,
    .data-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .data-table thead {
        display: none !important;
    }

    .data-table tr {
        display: flex !important;
        flex-direction: column !important;
        background: white !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
        border: 1px solid #f1f5f9 !important;
        margin-bottom: 20px !important;
        padding: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .data-table td {
        display: block !important;
        border: none !important;
        text-align: right !important;
    }

    /* 1. Reset Generic Table Overrides to prevent interference */
    .data-table tr {
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
    }

    .data-table td:nth-child(2)::before {
        display: none;
    }


    .data-table td:nth-child(1)::before {
        display: none;
    }


    /* Admin Users Premium Mobile Cards */
    .users-data-table tr {
        display: flex !important;
        flex-direction: column !important;
        background: white !important;
        border-radius: 20px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
        border: 1px solid #e2e8f0 !important;
        margin-bottom: 25px !important;
        padding: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .users-data-table td {
        display: flex !important;
        flex-wrap: wrap !important;
        /* Allow wrapping for long values */
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 20px !important;
        border-bottom: 1px solid #f8fafc !important;
        text-align: right !important;
        width: 100% !important;
        font-size: 13px !important;
        gap: 10px;
        /* Space between label and value */
    }

    .users-data-table td:last-child {
        border-bottom: none !important;
        background: #f8fafc !important;
        padding: 15px 20px !important;
        border-radius: 0 0 20px 20px !important;
    }

    .users-data-table td[data-label="المعرف"] {
        background: #f8fafc !important;
        font-weight: 900 !important;
        color: #1e293b !important;
        padding: 15px 20px !important;
        justify-content: flex-start !important;
        border-bottom: 2px solid #f1f5f9 !important;
    }

    .users-data-table td[data-label="المعرف"]::before {
        content: "المعرف #" !important;
        margin-left: 8px;
        color: #475569 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    .users-data-table td[data-label="الاسم"] {
        padding: 20px !important;
        background: #fff !important;
        justify-content: flex-start !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        color: #2563eb !important;
        border-bottom: 1px solid #f8fafc !important;
    }

    .users-data-table td[data-label="الاسم"]::before {
        display: none !important;
    }

    .users-data-table td[data-label="اسم المستخدم"]::before {
        content: "اسم المستخدم: " !important;
        color: #64748b !important;
    }

    .users-data-table .action-buttons-wrapper {
        width: 100% !important;
        justify-content: center !important;
        gap: 8px !important;
        position: relative !important;
        z-index: 5 !important;
        flex-wrap: wrap !important;
        padding: 5px 0;
    }

    .users-data-table .btn-action {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
        flex: none !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .users-data-table .password-code,
    .users-data-table .username-pill,
    .users-data-table .balance-amount,
    .users-data-table td:not([data-label="المعرف"]):not([data-label="الاسم"]) span,
    .users-data-table td:not([data-label="المعرف"]):not([data-label="الاسم"]) {
        word-break: break-all !important;
        max-width: 100% !important;
        text-align: left !important;
        /* Values aligned to left (RTL swap) */
        direction: ltr !important;
    }

    .users-data-table .password-code {
        background: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        color: #475569 !important;
        font-size: 12px !important;
    }

    /* Admin & User Services Premium Mobile Cards */
    .service-table,
    .service-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .service-table thead {
        display: none !important;
    }

    .service-table tr {
        display: block !important;
        background: white !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
        border: 1px solid #f1f5f9 !important;
        margin-bottom: 25px !important;
        padding: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        transition: transform 0.2s ease;
    }

    .service-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 20px !important;
        border: none !important;
        border-bottom: 1px solid #f8fafc !important;
    }

    .service-table td:last-child {
        border-bottom: none !important;
    }

    /* 1. Header Area (ID & Status) */
    .service-table td[data-label="المعرف (ID)"] {
        background: #f8fafc !important;
        padding: 10px 20px !important;
        font-weight: 800 !important;
        color: #475569 !important;
    }

    /* 2. Service Name (Focal Point) */
    .service-table td[data-label="الخدمة"] {
        display: block !important;
        padding: 20px !important;
        background: #fff !important;
    }

    .service-table .service-name {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #1e293b !important;
        margin-bottom: 5px !important;
        line-height: 1.5 !important;
    }

    /* 3. Pricing Grid Area */
    .service-table td[data-label="السعر"],
    .service-table td[data-label="السعر (بيع)"] {
        padding: 15px 20px !important;
        background: #f0fdf4 !important;
    }

    .service-table .price-val,
    .service-table .price-user {
        font-size: 18px !important;
        font-weight: 900 !important;
        color: #16a34a !important;
    }

    /* 4. Details Section (Limits, Provider) */
    .service-table td::before {
        content: attr(data-label);
        font-size: 11px !important;
        font-weight: 800 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    /* 5. Action Section */
    .service-table td[data-label="طلب"],
    .service-table td[data-label="الإجراءات"] {
        background: #f8fafc !important;
        padding: 15px 20px !important;
    }

    .service-table .btn-order {
        width: 100% !important;
        padding: 14px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
    }

    .service-table .qty-limits {
        display: flex !important;
        gap: 15px !important;
        font-weight: 700 !important;
        color: #475569 !important;
    }

    .checkbox-col {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 10 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        width: auto !important;
        height: auto !important;
    }

    /* Filter Tabs Mobile Fix - 2 Rows, 3 Items Each */
    .filter-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .filter-tabs .btn {
        white-space: nowrap;
        font-size: 11px !important;
        padding: 8px 6px !important;
        text-align: center;
    }

    /* Select Dropdown Mobile Fix - Compact Style */
    select.form-control,
    select.category-select {
        width: 100% !important;
        font-size: 13px !important;
        padding: 8px !important;
        height: auto !important;
        min-height: 40px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background-color: #fff !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: left 10px center !important;
        background-size: 16px !important;
        padding-left: 30px !important;
    }

    select.form-control option,
    select.category-select option {
        font-size: 10px !important;
        padding: 6px 4px !important;
        direction: rtl !important;
    }

    /* Content Card Padding Fix */
    .content-card {
        padding: 15px !important;
    }

    .table-responsive {
        overflow-x: visible !important;
    }

    /* Landing Page (index.php) Responsive Styles */
    .navbar .container {
        padding: 0 15px;
    }

    .nav-links {
        display: none;
    }

    .nav-buttons {
        gap: 8px;
    }

    .nav-buttons .btn {
        font-size: 12px;
        padding: 8px 12px;
    }

    .hero {
        padding: 100px 0 60px;
        min-height: auto;
    }

    .hero-content {
        text-align: center;
    }

    .hero h1 {
        font-size: 28px;
        line-height: 1.3;
    }

    .hero p {
        font-size: 14px;
        margin: 20px 0;
    }

    .hero-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

    .hero-actions .btn {
        width: 100%;
        font-size: 14px;
        padding: 12px 20px;
    }

    .hero-stats {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 30px;
        width: 100%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .stat-item h3 {
        font-size: 28px;
    }

    .stat-item span {
        font-size: 12px;
    }

    .services {
        padding: 60px 0;
    }

    .section-header h2 {
        font-size: 24px !important;
    }

    .section-header p {
        font-size: 13px !important;
    }

    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .service-card {
        padding: 25px !important;
    }

    .service-card h3 {
        font-size: 16px !important;
    }

    .service-card p {
        font-size: 13px !important;
    }

    /* Search Form Mobile Styling */
    .content-card form {
        flex-direction: column !important;
    }

    .content-card form input[type="text"],
    .content-card form select,
    .content-card form button {
        width: 100% !important;
        flex: none !important;
    }

    .content-card form .btn {
        margin-top: 5px;
    }

    /* Order Form Mobile Improvements */
    .wizard-step {
        padding: 15px 10px !important;
    }

    .step-header {
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .btn-back {
        width: 100% !important;
        justify-content: center !important;
    }

    .selected-service-badge {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 15px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        color: white !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .selected-service-badge i {
        font-size: 14px !important;
    }

    .service-summary-pill {
        padding: 15px !important;
        font-size: 12px !important;
        margin-bottom: 20px !important;
        background: #f3f4f6 !important;
        border-radius: 8px !important;
        line-height: 1.6 !important;
    }

    .form-group {
        margin-bottom: 20px !important;
    }

    .form-group label {
        margin-bottom: 8px !important;
        font-size: 13px !important;
    }

    .form-group input,
    .form-group textarea {
        font-size: 13px !important;
        padding: 12px !important;
    }

    .service-info-panel {
        padding: 15px !important;
        margin-bottom: 20px !important;
        font-size: 12px !important;
        background: #f9fafb !important;
        border-radius: 8px !important;
    }

    .cost-summary-card {
        padding: 18px !important;
        margin: 20px 0 !important;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
    }

    .cost-label {
        font-size: 13px !important;
        margin-bottom: 8px !important;
        color: white !important;
    }

    .cost-value {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: white !important;
    }

    .btn-submit,
    .btn-primary.btn-block {
        width: 100% !important;
        padding: 15px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        margin-top: 20px !important;
    }

    /* Support Chat Mobile Improvements */
    .support-wrapper {
        padding: 10px !important;
    }

    .chat-portal {
        height: calc(100vh - 110px) !important;
        /* Adjusted for bottom nav + padding */
        min-height: auto !important;
        border-radius: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 0 !important;
    }

    .chat-portal .chat-canvas {
        flex: 1 !important;
        overflow-y: auto !important;
    }

    .chat-portal .chat-footer {
        flex-shrink: 0 !important;
        border-radius: 0 0 15px 15px !important;
    }

    .chat-top-nav {
        padding: 10px 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .chat-top-nav>div {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .chat-top-nav h2 {
        font-size: 14px !important;
        margin-bottom: 2px !important;
        text-align: right !important;
        width: 100% !important;
        line-height: 1.2 !important;
    }

    #adminInputZone {
        padding: 10px !important;
    }

    /* Admin Services Toolbar Mobile */
    .bulk-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 15px !important;
    }

    .bulk-group {
        display: flex !important;
        flex-direction: column !important;
        /* Stack bulk select and buttons */
        gap: 10px !important;
        width: 100% !important;
    }

    .bulk-group .btn {
        width: 100% !important;
        padding: 12px !important;
        border-radius: 8px !important;
        justify-content: center !important;
    }

    .bulk-group .btn-secondary {
        order: 2;
    }

    .bulk-group .btn-danger {
        order: 3;
    }

    .bulk-select {
        width: 100% !important;
        height: 45px !important;
        order: 1;
        margin-bottom: 5px !important;
    }

    .spacer {
        display: none !important;
    }

    .service-search-container {
        width: 100% !important;
        max-width: none !important;
        margin: 5px 0 !important;
    }

    #adminServiceSearch {
        height: 45px !important;
        font-size: 14px !important;
    }

    .category-filter-form {
        width: 100% !important;
    }

    .category-filter-form select {
        width: 100% !important;
        height: 45px !important;
    }

    .chat-actions-row {
        display: flex !important;
        width: 100% !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .btn-back {
        padding: 5px 10px !important;
        font-size: 12px !important;
        flex: none !important;
        text-align: center !important;
        justify-content: center !important;
        width: auto !important;
    }

    .status-badge {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    .chat-canvas {
        padding: 15px !important;
        gap: 10px !important;
    }

    .chat-bubble {
        max-width: 85% !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        border-radius: 15px !important;
    }

    .msg-time {
        font-size: 9px !important;
    }

    .chat-footer {
        padding: 12px 15px !important;
    }

    .input-pill {
        padding: 4px !important;
        border-radius: 18px !important;
    }

    .input-pill input {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    .btn-send-pill {
        width: 36px !important;
        height: 36px !important;
    }

    /* Ticket List Mobile */
    .ticket-list-wrapper {
        border-radius: 15px !important;
    }

    .ticket-row {
        padding: 15px !important;
        gap: 12px !important;
    }

    .ticket-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    .ticket-info h3 {
        font-size: 14px !important;
    }

    .ticket-info p {
        font-size: 12px !important;
    }

    /* Modal Mobile Fixes */
    .modal-content {
        margin: 10px !important;
        border-radius: 15px !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        width: 95% !important;
        max-width: 400px !important;
    }

    .modal-header {
        padding: 12px !important;
        min-height: auto !important;
    }

    .modal-body {
        padding: 12px !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
    }

    .modal-footer {
        padding: 10px 12px !important;
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    /* Fix modal backdrop and interaction */
    .modal {
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(2px) !important;
    }

    .modal.show {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* User profile form modal specific fixes */
    .user-profile-form .modal-content {
        max-height: 60vh !important;
    }

    .user-profile-form .modal-body {
        padding: 10px !important;
        max-height: 45vh !important;
    }

    .user-profile-form .form-group {
        margin-bottom: 10px !important;
    }

    .user-profile-form .form-control {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }

    .modal-body {
        padding: 15px !important;
    }

    .modal-footer {
        padding: 12px 15px !important;
    }

    /* Desktop: Restore Normal Select Dropdown & Hide Mobile Elements */
    @media (min-width: 993px) {

        select.form-control,
        select.category-select {
            appearance: auto !important;
            -webkit-appearance: auto !important;
            -moz-appearance: auto !important;
            size: auto !important;
            height: auto !important;
        }

        /* Hide Mobile Menu Overlay on Desktop */
        .mobile-menu-overlay {
            display: none !important;
        }

        /* Hide Bottom Navigation on Desktop */
        .bottom-nav {
            display: none !important;
        }

        .responsive-grid-2 {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 30px !important;
        }

        .responsive-grid-3 {
            display: grid !important;
            grid-template-columns: 1fr 1fr 1fr !important;
            gap: 30px !important;
        }
    }

    @media (max-width: 480px) {
        .header-info h1 {
            font-size: 18px !important;
        }

        .bottom-nav-item span {
            font-size: 9px;
        }

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

    /* Admin Support Page Mobile Optimization (Appended) */
    @media (max-width: 992px) {

        .management-table,
        .management-table tbody,
        .management-table tr,
        .management-table td {
            display: block !important;
            width: 100% !important;
        }

        .management-table thead {
            display: none !important;
        }

        .management-table tr {
            background: white !important;
            border-radius: 12px !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
            margin-bottom: 15px !important;
            border: 1px solid #e2e8f0 !important;
            padding: 0 !important;
            position: relative !important;
            overflow: visible !important;
        }

        .management-table td {
            text-align: right !important;
            padding: 10px 15px !important;
            font-size: 13px !important;
            border-bottom: 1px solid #f1f5f9 !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
        }

        .management-table td:last-child {
            border-bottom: none !important;
            background: #f8fafc !important;
            justify-content: center !important;
            padding: 12px !important;
        }

        .management-table td::before {
            content: attr(data-label);
            font-weight: 700;
            color: #475569;
            margin-left: 10px;
            font-size: 11px;
        }

        /* Ticket Tabs Scroll */
        .ticket-tabs {
            overflow-x: auto !important;
            white-space: nowrap !important;
            padding-bottom: 5px !important;
            -webkit-overflow-scrolling: touch !important;
            display: flex !important;
            gap: 10px !important;
        }

        .ticket-tabs::-webkit-scrollbar {
            height: 0px;
            background: transparent;
        }

        /* Admin Chat Portal Mobile */
        /* Admin Chat Portal Mobile - Renamed to correctly target Admin & User separation if needed */
        .chat-main,
        .chat-center {
            height: calc(100vh - 110px) !important;
            min-height: auto !important;
            border-radius: 15px !important;
            margin-bottom: 0 !important;
            display: flex !important;
            flex-direction: column !important;
        }

        .chat-canvas,
        .chat-main .chat-canvas {
            flex: 1 !important;
            overflow-y: auto !important;
        }

        .chat-top-nav {
            padding: 10px 15px !important;
            flex-shrink: 0 !important;
        }

        .chat-top-nav h2 {
            font-size: 14px !important;
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .btn-back-admin {
            padding: 5px 10px !important;
            font-size: 11px !important;
        }

        .chat-footer {
            flex-shrink: 0 !important;
            padding: 10px !important;
        }

        #adminInputZone {
            padding: 10px !important;
        }

        /* Fix admin interface mobile display issues */
        .dashboard-container {
            display: flex !important;
            flex-direction: column !important;
            width: 100% !important;
            min-height: 100vh !important;
        }

        .main-content {
            width: 100% !important;
            max-width: 100% !important;
            padding: 15px !important;
            padding-bottom: 90px !important;
            box-sizing: border-box !important;
        }

        .content-card {
            width: 100% !important;
            max-width: 100% !important;
            margin-bottom: 20px !important;
            box-sizing: border-box !important;
        }

        /* Fix admin forms on mobile */
        .form-row {
            flex-direction: column !important;
            gap: 15px !important;
        }

        .form-group {
            width: 100% !important;
            margin-bottom: 15px !important;
        }

        /* Fix admin tables on mobile */
        table {
            width: 100% !important;
            border-collapse: collapse !important;
        }

        /* Fix admin buttons on mobile */
        .btn {
            padding: 12px 20px !important;
            font-size: 14px !important;
            border-radius: 8px !important;
            margin: 5px 0 !important;
        }

        .btn-group {
            flex-direction: column !important;
            gap: 10px !important;
            width: 100% !important;
        }

        .btn-group .btn {
            width: 100% !important;
        }

        /* Fix Telegram settings form on mobile */
        .settings-section .form-group {
            margin-bottom: 20px !important;
        }

        .settings-section .form-control {
            width: 100% !important;
            max-width: 100% !important;
            font-size: 14px !important;
            padding: 12px !important;
            border-radius: 8px !important;
            box-sizing: border-box !important;
        }

        .settings-section label {
            font-size: 13px !important;
            margin-bottom: 8px !important;
            display: block !important;
        }

        .settings-section small {
            font-size: 11px !important;
            margin-top: 5px !important;
            display: block !important;
        }

        /* Fix admin settings layout on mobile */
        .form-row {
            flex-direction: column !important;
            gap: 15px !important;
            width: 100% !important;
        }

        .form-row .form-group {
            width: 100% !important;
        }
    }
}