/* Mobile Responsive CSS for Admin Panel */

/* Base mobile styles */
@media (max-width: 768px) {
    body {
        padding: 10px;
        font-size: 14px;
        margin: 0;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    
    .box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 !important;
        padding: 15px !important;
        box-sizing: border-box;
    }
    
    /* Headers */
    .header {
        padding: 10px !important;
        text-align: center;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    h1 {
        font-size: 24px;
        text-align: center;
        margin-bottom: 20px;
    }
    
    h2 {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    /* Navigation Menu */
    .menu {
        padding: 10px !important;
        text-align: center;
    }
    
    .menu a {
        display: block !important;
        margin: 5px 0 !important;
        padding: 10px !important;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        text-decoration: none;
    }
    
    /* Cards */
    .card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 !important;
        padding: 15px !important;
        display: block !important;
        box-sizing: border-box;
    }
    
    /* Forms */
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-input, input, textarea, select {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        box-sizing: border-box;
        border-radius: 8px;
        border: 1px solid #ddd;
    }
    
    .btn, button, input[type="submit"] {
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 12px !important;
        font-size: 14px !important;
        box-sizing: border-box;
        min-height: 44px;
        touch-action: manipulation;
        border-radius: 5px;
        cursor: pointer;
    }
    
    /* Links as buttons */
    a {
        display: block !important;
        width: 100% !important;
        margin: 5px 0 !important;
        padding: 12px !important;
        text-align: center;
        box-sizing: border-box;
        text-decoration: none;
        border-radius: 5px;
    }
    
    /* Tables */
    table {
        width: 100%;
        font-size: 12px;
        overflow-x: auto;
        display: block;
        white-space: nowrap;
    }
    
    table thead, table tbody, table th, table td, table tr {
        display: block;
    }
    
    table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    table tr {
        border: 1px solid #ddd;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 8px;
        background: #f9f9f9;
        white-space: normal;
    }
    
    table td {
        border: none;
        position: relative;
        padding: 8px 8px 8px 50%;
        text-align: left;
    }
    
    table td:before {
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 600;
        color: #333;
    }
    
    /* Back links */
    .back-link {
        display: block;
        text-align: center;
        margin-bottom: 15px;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 8px;
        text-decoration: none;
    }
    
    /* Grid layouts */
    .top {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: stretch !important;
    }
    
    /* Status badges */
    .badge, .status-badge, .notice-type {
        font-size: 11px !important;
        padding: 3px 6px !important;
        display: inline-block;
        border-radius: 3px;
    }
    
    /* Color grids */
    .color-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .color-option {
        padding: 15px !important;
        font-size: 14px !important;
        min-height: 50px;
        touch-action: manipulation;
        border-radius: 8px;
        cursor: pointer;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* User info grids */
    .user-info {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .info-item {
        padding: 10px !important;
        background: #f8f9fa;
        border-radius: 5px;
        margin-bottom: 10px;
    }
    
    /* Alert boxes */
    .alert {
        padding: 10px !important;
        font-size: 13px !important;
        margin: 10px 0;
        border-radius: 5px;
    }
    
    /* Game info */
    .game-info {
        padding: 15px !important;
    }
    
    .game-info > div {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    /* Search forms */
    .search-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .search-form input {
        margin-bottom: 10px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    body {
        padding: 5px;
        font-size: 13px;
    }
    
    .box {
        padding: 10px !important;
        margin: 5px 0 !important;
    }
    
    h1 {
        font-size: 20px;
    }
    
    h2 {
        font-size: 18px;
    }
    
    h3 {
        font-size: 16px;
    }
    
    .form-input, input, textarea, select {
        padding: 10px !important;
        font-size: 16px !important;
    }
    
    .btn, button, input[type="submit"] {
        padding: 10px !important;
        font-size: 13px !important;
    }
    
    table {
        font-size: 11px;
    }
    
    table td {
        padding: 6px 6px 6px 45%;
        font-size: 11px;
    }
    
    table td:before {
        font-size: 10px;
    }
    
    .color-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    
    .color-option {
        padding: 12px !important;
        font-size: 12px !important;
        min-height: 44px;
    }
    
    a {
        padding: 10px !important;
        font-size: 13px !important;
    }
}

/* Touch improvements */
@media (max-width: 768px) {
    /* Better touch targets */
    a, button, .btn, .color-option, input[type="submit"] {
        min-height: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    /* Prevent text selection on touch elements */
    .btn, .color-option, .badge, button {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Better scrolling */
    .box {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent zoom on form inputs */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* Better button spacing */
    .btn + .btn, button + button, a + a {
        margin-top: 10px;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .color-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .user-info {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .menu a {
        display: inline-block !important;
        width: auto !important;
        margin: 5px !important;
    }
}

/* Specific table data labels for different admin pages */
@media (max-width: 768px) {
    /* Withdrawal requests table */
    .withdrawal-table td:nth-child(1):before { content: "ID: "; }
    .withdrawal-table td:nth-child(2):before { content: "User: "; }
    .withdrawal-table td:nth-child(3):before { content: "Amount: "; }
    .withdrawal-table td:nth-child(4):before { content: "Method: "; }
    .withdrawal-table td:nth-child(5):before { content: "Details: "; }
    .withdrawal-table td:nth-child(6):before { content: "Status: "; }
    .withdrawal-table td:nth-child(7):before { content: "Date: "; }
    .withdrawal-table td:nth-child(8):before { content: "Action: "; }
    
    /* Recharge requests table */
    .recharge-table td:nth-child(1):before { content: "ID: "; }
    .recharge-table td:nth-child(2):before { content: "User: "; }
    .recharge-table td:nth-child(3):before { content: "Amount: "; }
    .recharge-table td:nth-child(4):before { content: "Method: "; }
    .recharge-table td:nth-child(5):before { content: "Status: "; }
    .recharge-table td:nth-child(6):before { content: "Date: "; }
    .recharge-table td:nth-child(7):before { content: "Action: "; }
    
    /* Notices table */
    .notices-table td:nth-child(1):before { content: "ID: "; }
    .notices-table td:nth-child(2):before { content: "Title: "; }
    .notices-table td:nth-child(3):before { content: "Type: "; }
    .notices-table td:nth-child(4):before { content: "Status: "; }
    .notices-table td:nth-child(5):before { content: "Created: "; }
    .notices-table td:nth-child(6):before { content: "Actions: "; }
    
    /* Game results table */
    .results-table td:nth-child(1):before { content: "Game ID: "; }
    .results-table td:nth-child(2):before { content: "Color: "; }
    .results-table td:nth-child(3):before { content: "Completed: "; }
    .results-table td:nth-child(4):before { content: "Duration: "; }
    
    /* Pending bets table */
    .bets-table td:nth-child(1):before { content: "User: "; }
    .bets-table td:nth-child(2):before { content: "Color: "; }
    .bets-table td:nth-child(3):before { content: "Amount: "; }
    .bets-table td:nth-child(4):before { content: "Time: "; }
    
    /* Users table */
    .users-table td:nth-child(1):before { content: "ID: "; }
    .users-table td:nth-child(2):before { content: "Name: "; }
    .users-table td:nth-child(3):before { content: "Email: "; }
    .users-table td:nth-child(4):before { content: "Wallet: "; }
    .users-table td:nth-child(5):before { content: "Joined: "; }
    .users-table td:nth-child(6):before { content: "Actions: "; }
    
    /* Bet history table */
    .bet-history-table td:nth-child(1):before { content: "User: "; }
    .bet-history-table td:nth-child(2):before { content: "Game: "; }
    .bet-history-table td:nth-child(3):before { content: "Color: "; }
    .bet-history-table td:nth-child(4):before { content: "Amount: "; }
    .bet-history-table td:nth-child(5):before { content: "Status: "; }
    .bet-history-table td:nth-child(6):before { content: "Win: "; }
    .bet-history-table td:nth-child(7):before { content: "Date: "; }
    
    /* Generic table fallback */
    table:not(.withdrawal-table):not(.recharge-table):not(.notices-table):not(.results-table):not(.bets-table):not(.users-table):not(.bet-history-table) td:nth-child(1):before { content: "Field 1: "; }
    table:not(.withdrawal-table):not(.recharge-table):not(.notices-table):not(.results-table):not(.bets-table):not(.users-table):not(.bet-history-table) td:nth-child(2):before { content: "Field 2: "; }
    table:not(.withdrawal-table):not(.recharge-table):not(.notices-table):not(.results-table):not(.bets-table):not(.users-table):not(.bet-history-table) td:nth-child(3):before { content: "Field 3: "; }
    table:not(.withdrawal-table):not(.recharge-table):not(.notices-table):not(.results-table):not(.bets-table):not(.users-table):not(.bet-history-table) td:nth-child(4):before { content: "Field 4: "; }
    table:not(.withdrawal-table):not(.recharge-table):not(.notices-table):not(.results-table):not(.bets-table):not(.users-table):not(.bet-history-table) td:nth-child(5):before { content: "Field 5: "; }
    table:not(.withdrawal-table):not(.recharge-table):not(.notices-table):not(.results-table):not(.bets-table):not(.users-table):not(.bet-history-table) td:nth-child(6):before { content: "Field 6: "; }
    table:not(.withdrawal-table):not(.recharge-table):not(.notices-table):not(.results-table):not(.bets-table):not(.users-table):not(.bet-history-table) td:nth-child(7):before { content: "Field 7: "; }
    table:not(.withdrawal-table):not(.recharge-table):not(.notices-table):not(.results-table):not(.bets-table):not(.users-table):not(.bet-history-table) td:nth-child(8):before { content: "Field 8: "; }
}

/* Additional mobile improvements */
@media (max-width: 768px) {
    /* Dashboard cards */
    .dashboard-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    /* Form sections */
    .form-section {
        margin-bottom: 20px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
    }
    
    /* Action buttons */
    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 15px;
    }
    
    .action-buttons a,
    .action-buttons button {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Date filters */
    .date-filter {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .date-filter input,
    .date-filter button {
        width: 100% !important;
    }
    
    /* Statistics boxes */
    .stats-box {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .stat-item {
        padding: 15px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        text-align: center;
    }
    
    /* Responsive text */
    .mobile-hide {
        display: none !important;
    }
    
    .mobile-show {
        display: block !important;
    }
}

/* Print styles */
@media print {
    .mobile-responsive.css {
        display: none;
    }
    
    body {
        font-size: 12px;
        line-height: 1.4;
    }
    
    table {
        width: 100%;
        border-collapse: collapse;
    }
    
    table th,
    table td {
        border: 1px solid #000;
        padding: 5px;
        text-align: left;
    }
}