/* UTTS.io — Tính thuế TNCN. Hệ thiết kế: navy + gold, tông TỐI (committed dark).
   Xem /opt/claude/utts.io/DESIGN-SYSTEM.md. Bỏ glassmorphism → panel navy đặc + viền mảnh. */
:root {
    --navy: #0c1626;          /* nền */
    --surface: #12233d;       /* panel */
    --surface-2: #0f1e33;     /* panel phụ/tối hơn */
    --line: rgba(255, 255, 255, 0.10);
    --gold: #ccaa4a;          /* accent */
    --gold-hover: #d9bb63;
    --text-light: #e7ecf3;
    --text-muted: #90a1b5;

    /* Bí danh giữ tương thích tên biến cũ trong HTML/JS */
    --primary-color: var(--gold);
    --primary-hover: var(--gold-hover);
    --primary: var(--gold);
    --bg-dark: var(--navy);
    --glass: var(--surface);
    --glass-border: var(--line);

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Bootstrap retheme (text-primary, btn, links → gold; nền/viền navy) */
    --bs-primary: #ccaa4a;
    --bs-primary-rgb: 204, 170, 74;
    --bs-body-bg: #0c1626;
    --bs-body-color: #e7ecf3;
    --bs-border-color: rgba(255, 255, 255, 0.10);
    --bs-link-color: #ccaa4a;
    --bs-link-hover-color: #d9bb63;
}

body {
    font-family: var(--font-sans);
    background-color: var(--navy);
    color: var(--text-light);
    background-image: radial-gradient(circle at 12% 18%, rgba(204, 170, 74, 0.10) 0%, transparent 42%),
                      radial-gradient(circle at 88% 82%, rgba(23, 51, 90, 0.55) 0%, transparent 45%);
    min-height: 100vh;
    background-attachment: fixed;
    overflow-x: hidden;
}

/* Headings + Bootstrap dark overrides */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text-light); }
.text-dark { color: var(--text-light) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--gold) !important; }
.bg-white { background-color: var(--surface) !important; }
.bg-opacity-50 { opacity: 1 !important; }
hr { border-color: var(--line); }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Surfaces (phẳng, không blur) */
.glass-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.glass-card:hover { box-shadow: 0 12px 34px 0 rgba(0, 0, 0, 0.34); }

.glass-panel {
    background: var(--surface-2);
    border-left: 1px solid var(--line);
    min-height: 100vh;
}

/* Form controls */
.form-control, .form-select {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text-light);
}
.form-control:focus, .form-select:focus {
    background: var(--surface-2);
    border-color: var(--gold);
    color: var(--text-light);
    box-shadow: 0 0 0 0.2rem rgba(204, 170, 74, 0.25);
}
.form-select option { background-color: var(--navy); color: var(--text-light); }
.form-check-input { background-color: var(--surface-2); border-color: var(--line); }
.form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }
::placeholder { color: var(--text-muted) !important; }

/* Modals */
.modal-content { background: var(--surface) !important; border: 1px solid var(--line) !important; }
.modal-header, .modal-footer { border-color: var(--line) !important; }

/* SweetAlert2 dark */
.swal2-popup {
    background: var(--surface) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
.swal2-title { color: var(--text-light) !important; }
.swal2-html-container { color: var(--text-muted) !important; }
.swal2-success-circular-line-left,
.swal2-success-circular-line-right,
.swal2-success-fix { background-color: transparent !important; }

/* Buttons */
.btn-primary-glass {
    background: var(--gold);
    color: #14243c;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    transition: background 0.2s, transform 0.2s;
}
.btn-primary-glass:hover, .btn-primary-glass:focus {
    background: var(--gold-hover);
    color: #14243c;
    transform: translateY(-1px);
}

.btn-outline-secondary { border-color: var(--line); color: var(--text-light); }
.btn-outline-secondary:hover { background: var(--surface); color: var(--text-light); border-color: var(--line); }
.btn-outline-primary { border-color: var(--gold); color: var(--gold); }
.btn-outline-primary:hover { background: var(--gold); color: #14243c; }

/* Tables */
.table { color: var(--text-light); border-color: var(--line); }
.table-hover tbody tr:hover { background-color: var(--surface) !important; color: var(--text-light); }
.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--text-light);
    border-bottom-color: var(--line);
}

.lottie-container { width: 150px; height: 150px; margin: 0 auto; display: none; }

/* Animations */
.fade-enter { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .fade-enter, .glass-card, .btn-primary-glass { animation: none; transition: none; } }

/* Accordion */
.accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); }
.accordion-button:not(.collapsed) {
    color: var(--gold) !important;
    background: rgba(204, 170, 74, 0.12) !important;
}
.accordion-item { border-color: var(--line) !important; }

/* Markdown trong kết quả Gemini */
.gemini-result-content {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #d5dbe4 !important;
    background: rgba(204, 170, 74, 0.10) !important;
    border-radius: 12px;
    padding: 1rem !important;
    border-left: 3px solid var(--gold) !important;
}
.gemini-result-content h3 { font-size: 1.2rem; margin-top: 1rem; color: var(--gold); }
.gemini-result-content p { font-size: 0.95rem; }
.gemini-result-content ul { padding-left: 1.5rem; }
.gemini-result-content strong { color: var(--gold-hover); }

/* Responsive */
@media (max-width: 768px) {
    .glass-panel {
        min-height: auto;
        border-left: none;
        border-top: 1px solid var(--line);
    }
}