/* Your Original CSS with targeted additions */
:root {
    --bg-light: #f8f9fa;
    --card-light: #ffffff;
    --text-dark: #212529;
    --text-muted: #6c757d;
    --primary: #0d6efd;
    --primary-hover: #0b5ed7;
    --secondary: #6c757d;
    --success: #198754;
    --danger: #dc3545;
    --warning: #ffc107;
    --border-color: #dee2e6;
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: var(--bg-light); color: var(--text-dark); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; }
header { background: var(--card-light); padding: 1rem 2.5rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); position: sticky; top: 0; z-index: 1000; }
header h1 a { font-size: 1.75rem; font-weight: 700; color: var(--text-dark); text-decoration: none; transition: color 0.2s ease-in-out; }
header h1 a:hover { color: var(--primary); }
nav { display: flex; align-items: center; gap: 0.75rem; } /* Increased gap slightly for buttons */

/* === NEW: Header Button Styles === */
nav a {
    background-color: var(--primary);
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}
nav a:hover {
    background-color: var(--primary-hover);
    color: white; /* Ensure text stays white on hover */
    transform: translateY(-2px);
}
/* === END: Header Button Styles === */

.notice-banner { background: var(--warning); color: #000; text-align: center; padding: 0.8rem; font-weight: 500; }
main { flex: 1; padding: 2rem; max-width: 960px; width: 100%; margin: 0 auto; }
.card { background: var(--card-light); border-radius: 8px; padding: 2rem; margin: 1.5rem 0; box-shadow: var(--shadow); border: 1px solid var(--border-color); }
.card h2 { margin-bottom: 1.5rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border-color); font-size: 1.5rem; }
.form-group, .form-section { margin-bottom: 1.5rem; }
.form-section-title { font-size: 1.2rem; color: var(--primary); margin-bottom: 1rem; border-bottom: 2px solid var(--primary); padding-bottom: 0.5rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
label { display: block; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9rem; }
input, select, textarea { width: 100%; padding: 0.75rem; border-radius: 6px; border: 1px solid var(--border-color); background: #fff; color: var(--text-dark); font-size: 1rem; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25); }
button, .btn { background-color: var(--primary); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: 600; transition: background-color 0.2s; text-decoration: none; display: inline-block; text-align: center; }
button:hover, .btn:hover { background-color: var(--primary-hover); }
.btn-secondary { background-color: var(--secondary); }
.btn-success { background-color: var(--success); }
.btn-danger { background-color: var(--danger); }
.btn-submit { width: 100%; padding: 1rem; font-size: 1.1rem; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
th { background: var(--bg-light); font-weight: 600; }
.flash { padding: 1rem; margin-bottom: 1rem; border-radius: 6px; background: var(--success); color: white; }
footer { background: var(--card-light); color: var(--text-muted); text-align: center; padding: 1.5rem; margin-top: auto; border-top: 1px solid var(--border-color); }
.actions, .admin-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.radio-group { display: flex; align-items: center; margin-bottom: 0.5rem; }
.radio-group input { width: auto; margin-right: 0.75rem; }
.nested-table { margin: 1rem 0; border-top: 1px solid var(--border-color); }
.nested-table td, .nested-table th { padding: 0.5rem; }
.btn-small { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.actions-cell { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.nav-wallet { position: relative; cursor: pointer; padding: 0.5rem 1rem; border-radius: 6px; transition: background-color 0.2s; background-color: rgba(13, 110, 253, 0.1); color: var(--primary); font-weight: 600; border: 1px solid rgba(13, 110, 253, 0.2); }
.nav-wallet:hover { background-color: rgba(13, 110, 253, 0.2); }
.wallet-popup { display: none; position: absolute; background-color: var(--card-light); min-width: 180px; box-shadow: var(--shadow); z-index: 1; border-radius: 8px; right: 0; margin-top: 0.75rem; border: 1px solid var(--border-color); overflow: hidden; }
.wallet-popup a { color: var(--text-dark); padding: 12px 16px; text-decoration: none; display: block; }
.wallet-popup a:hover { background-color: var(--bg-light); }
.wallet-popup.show { display: block; }
.auth-card { max-width: 450px; margin: 3rem auto; background: var(--card-light); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--border-color); }
.auth-header { background-color: var(--bg-light); padding: 2rem; text-align: center; border-bottom: 1px solid var(--border-color); }
.auth-header h2 { margin-bottom: 0.5rem; color: var(--text-dark); }
.auth-header p { color: var(--text-muted); }
.auth-form { padding: 2rem; }
.select2-container--default .select2-selection--single { height: calc(1.5em + 1.5rem + 2px); border: 1px solid var(--border-color); border-radius: 6px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + 1.5rem); padding-left: 0.75rem; color: var(--text-dark); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(1.5em + 1.5rem); }
.select2-dropdown { border: 1px solid var(--border-color); border-radius: 6px; box-shadow: var(--shadow); }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--primary); }

/* === NEW: Responsive Filter Form Styles === */
.filter-form {
    padding: 0; /* Remove extra padding */
    background-color: transparent; /* Make background transparent */
    border-radius: 0;
    margin-bottom: 2rem;
    border: none; /* Remove border */
}

.filter-form .form-grid {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    gap: 1.5rem;
    align-items: flex-end; /* Align to bottom */
}

.filter-form .form-group {
    flex: 1 1 220px; /* Allow fields to grow and shrink */
    margin-bottom: 0; /* Remove bottom margin */
}

.filter-form .form-group.filter-button {
    flex: 0 0 auto; /* Prevent button from growing */
}

@media (max-width: 768px) {
    .filter-form .form-grid {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-form .btn {
        width: 100%;
    }
}
/* === END: Filter Form Styles === */

td.status-completed { color: var(--success); font-weight: bold; }
td.status-pending { color: var(--warning); font-weight: bold; }
td.status-retrying { color: var(--warning); font-weight: bold; }
td.status-failed { color: var(--danger); font-weight: bold; }
main.full-width { max-width: 95%; padding: 2rem; }
.table-responsive { overflow-x: auto; }
.table-responsive table td, .table-responsive table th { white-space: nowrap; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--card-light); padding: 1.5rem; border-radius: 8px; text-align: center; box-shadow: var(--shadow); }
.stat-card h3 { font-size: 1.1rem; color: var(--text-muted); }
.stat-number { font-size: 3rem; font-weight: 700; color: var(--primary); margin: 0.5rem 0; }
.stat-detail { font-size: 0.9rem; color: var(--text-muted); }
.pagination { text-align: center; margin-top: 2rem; }
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); padding-top: 60px; }
.modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 8px; text-align: center; }
.modal-content h2 { margin-top: 0; }
.modal-content p { margin-bottom: 20px; }
.modal-content form { display: flex; justify-content: center; gap: 1rem; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }
.status-paid, .status-completed { color: #28a745; font-weight: bold; }
.status-failed { color: #dc3545; font-weight: bold; }
.status-processing, .status-retrying { color: #ffc107; font-weight: bold; }
.status-pending { color: #007bff; font-weight: bold; }
.nav-wallet.admin-wallet { background-color: #c82333; border-color: #bd2130; color: white; } /* Made admin wallet button red */
.nav-wallet.admin-wallet:hover { background-color: #bd2130; }
.wallet-popup a:not([href]) { color: #343a40; cursor: default; }