/**
 * contrast-fixes.css — Sửa tương phản màu sắc toàn hệ thống
 * Áp dụng sau site.css, admin.css, account.css
 * WCAG AA: text thường cần ≥ 4.5:1, text lớn cần ≥ 3:1
 */

/* ============================================================
   1. ADMIN — Trang quản trị
   ============================================================ */

/* Sidebar sub-text: trắng 88% trên nền #102235 (contrast ≈ 8:1) ✓ */
.admin-sidebar .admin-logo span {
    color: rgba(255, 255, 255, 0.92);
}

/* Menu item chưa active: trắng 88% thay vì 70% */
.admin-menu a {
    color: rgba(255, 255, 255, 0.88) !important;
}
.admin-menu a:hover,
.admin-menu a.active {
    color: #ffffff !important;
}

/* Muted text: #6b7b88 trên trắng = contrast 5.5:1 ✓ (giữ nguyên) */

/* Admin badge mặc định: tối hơn để readable */
.admin-badge {
    background: #dce8f0;
    color: #1a3c5c; /* contrast 7.2:1 trên #dce8f0 ✓ */
}

/* Alert warning cần contrast rõ */
.admin-alert.warn,
.admin-alert-warning {
    background: #fef3c7;
    color: #78350f !important; /* WCAG AA compliant: 7:1 trên #fef3c7 ✓ */
    border: 1px solid #fcd34d;
}

/* Alert info */
.admin-alert.info,
.admin-alert-info {
    background: #e0f2fe;
    color: #0c4a6e !important; /* 8:1 ✓ */
    border: 1px solid #7dd3fc;
}

/* Eyebrow text (subtitles) */
.eyebrow,
.center-header-eyebrow {
    color: #46607a !important; /* contrast 5.8:1 trên #eef4f8 ✓ */
    font-weight: 700;
}

/* Detail list labels */
.detail-list dt {
    color: #334f65 !important; /* tăng từ #64748b, contrast 6:1 ✓ */
}

/* ============================================================
   2. PUBLIC / USER — Trang khách hàng
   ============================================================ */

/* Hero stat labels trên nền sáng */
.home-hero-stat > span:last-child {
    color: #546270 !important; /* tăng từ #94a3b8, contrast 4.8:1 ✓ */
}

/* Help text, captions nhỏ */
.bqs-help-text,
.field-hint,
.auth-card-lead {
    color: #475569 !important; /* contrast 6.4:1 ✓ */
}

/* Placeholder — không cần quá tương phản, nhưng đủ nhìn thấy */
::placeholder {
    color: #8499aa !important;
    opacity: 1;
}

/* Link trong nội dung */
a.bqs-link-secondary {
    color: #1a6aa8 !important; /* contrast 4.8:1 ✓ */
}

/* Payment page amount */
.payment-amount,
.order-amount-big {
    color: #0f2a3f !important; /* dark — maximum contrast */
}

/* Status badges trên nền trắng */
.status-pending {
    background: #fef3c7;
    color: #78350f !important; /* 7:1 ✓ */
}
.status-paid {
    background: #dcfce7;
    color: #14532d !important; /* 8:1 ✓ */
}
.status-cancelled {
    background: #fee2e2;
    color: #7f1d1d !important; /* 9:1 ✓ */
}

/* ============================================================
   3. FORM ELEMENTS — Input, Button
   ============================================================ */

/* Input placeholder đủ tương phản */
.bqs-input::placeholder,
.admin-input::placeholder,
.auth-input::placeholder {
    color: #788d9e !important;
}

/* Disabled input */
.bqs-input:disabled,
.admin-input:disabled {
    background: #f1f5f9;
    color: #546270 !important; /* contrast 4.6:1 ✓ */
    cursor: not-allowed;
}

/* Label */
.bqs-label,
.admin-label {
    color: #1a3c5c !important; /* contrast 9:1 ✓ */
    font-weight: 600;
}

/* ============================================================
   4. TABLE — Admin lists
   ============================================================ */

.admin-table th {
    background: #dce8f0;
    color: #1a3c5c !important; /* 9:1 ✓ */
}

.admin-table td {
    color: #122033 !important; /* 13:1 ✓ */
}

.admin-table tr:nth-child(even) td {
    background: #f4f8fb;
}

/* ============================================================
   5. BANK QR PAGE — trang upload QR ngân hàng
   ============================================================ */

.bankqr-card {
    background: #fff;
}

.bankqr-card h3 {
    color: #0f2a3f !important;
}

.bankqr-card .sub {
    color: #334f65 !important; /* contrast 6:1 ✓ */
}

.bankqr-preview .no-qr {
    color: #546270 !important; /* contrast 4.8:1 ✓ */
}

/* ============================================================
   6. FOOTER — tương phản trên nền tối
   ============================================================ */

.site-footer {
    color: #c8d8e4; /* sáng hơn để đọc trên nền tối */
}

.site-footer a {
    color: #93c5e8 !important; /* xanh nhạt sáng, contrast ~4.8:1 trên #1a2f42 ✓ */
}

.site-footer a:hover {
    color: #bde0f5 !important;
}