html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

:root,
html[data-theme="light"] {
    --theme-bg: #f4f8fc;
    --theme-bg-alt: #eaf3fb;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f7fbff;
    --theme-surface-muted: #eef4f9;
    --theme-text: #0f172a;
    --theme-text-soft: #334155;
    --theme-muted: #64748b;
    --theme-border: #dbe7f3;
    --theme-shadow: 0 14px 36px rgba(15, 23, 42, .08);
    --theme-input: #ffffff;
    --theme-navbar: rgba(255, 255, 255, .96);
}

html[data-theme="dark"] {
    --theme-bg: #0b1220;
    --theme-bg-alt: #111b2e;
    --theme-surface: #141f31;
    --theme-surface-soft: #19273b;
    --theme-surface-muted: #223149;
    --theme-text: #edf4ff;
    --theme-text-soft: #d2dceb;
    --theme-muted: #9aacbf;
    --theme-border: #2d4059;
    --theme-shadow: 0 18px 44px rgba(0, 0, 0, .28);
    --theme-input: #111c2d;
    --theme-navbar: rgba(11, 18, 32, .95);
    --bs-body-bg: var(--theme-bg);
    --bs-body-color: var(--theme-text);
    --bs-border-color: var(--theme-border);
    --bs-secondary-color: var(--theme-muted);
    --bs-tertiary-bg: var(--theme-surface-soft);
}

html {
    position: relative;
    min-height: 100%;
    background: var(--theme-bg);
}

body {
    min-height: 100vh;
    margin-bottom: 60px;
    color: var(--theme-text);
    background:
        radial-gradient(circle at 0% 0%, rgba(19, 122, 214, .10), transparent 30%),
        linear-gradient(135deg, var(--theme-bg), var(--theme-bg-alt));
    transition: background-color .25s ease, color .25s ease;
}

body,
.main-navbar,
.card,
.modal-content,
.dropdown-menu,
.form-control,
.form-select,
.table,
.alert,
.system-toast {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .1rem var(--theme-surface), 0 0 0 .25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .page-content {
    color: var(--theme-text);
}

html[data-theme="dark"] .main-navbar {
    background: var(--theme-navbar);
    border-bottom-color: var(--theme-border);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .26);
}

html[data-theme="dark"] .navbar-toggler {
    border-color: var(--theme-border);
}

html[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(1.8);
}

html[data-theme="dark"] .nav-link {
    color: var(--theme-text-soft) !important;
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active {
    color: #7cc6ff !important;
    background: rgba(50, 139, 217, .16);
}

html[data-theme="dark"] .brand-logo {
    background: #fff;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .system-toast {
    color: var(--theme-text);
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select {
    color: var(--theme-text);
    background-color: var(--theme-input);
    border-color: var(--theme-border);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] input::placeholder {
    color: #8293a8;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] input:focus {
    color: var(--theme-text);
    background-color: #152238;
    border-color: #3d8dcc;
}

html[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--theme-text-soft);
    --bs-table-border-color: var(--theme-border);
    --bs-table-striped-bg: rgba(255, 255, 255, .025);
    --bs-table-hover-bg: rgba(51, 139, 217, .10);
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] label,
html[data-theme="dark"] strong {
    color: var(--theme-text);
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .form-text {
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] hr {
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--theme-surface) !important;
}

html[data-theme="dark"] .toast-content strong {
    color: var(--theme-text);
}

html[data-theme="dark"] .toast-content p {
    color: var(--theme-text-soft);
}

html[data-theme="dark"] .toast-close {
    color: var(--theme-muted);
}

html[data-theme="dark"] .toast-close:hover {
    color: var(--theme-text);
}

@media (prefers-reduced-motion: reduce) {
    body,
    .main-navbar,
    .card,
    .modal-content,
    .dropdown-menu,
    .form-control,
    .form-select,
    .table,
    .alert,
    .system-toast {
        transition: none;
    }
}

/* Các khu vực giao diện chính ngoài Admin */
html[data-theme="dark"] .job-board-page,
html[data-theme="dark"] .job-detail-page,
html[data-theme="dark"] .applicant-page,
html[data-theme="dark"] .register-page,
html[data-theme="dark"] .login-page,
html[data-theme="dark"] .support-page {
    color: var(--theme-text);
    background:
        radial-gradient(circle at 0% 0%, rgba(19, 122, 214, .12), transparent 30%),
        radial-gradient(circle at 100% 20%, rgba(16, 163, 160, .08), transparent 28%),
        var(--theme-bg);
}

html[data-theme="dark"] .job-filter-card,
html[data-theme="dark"] .active-filters,
html[data-theme="dark"] .job-card,
html[data-theme="dark"] .job-empty-state,
html[data-theme="dark"] .job-pagination-wrap,
html[data-theme="dark"] .job-content-card,
html[data-theme="dark"] .job-location-card,
html[data-theme="dark"] .job-summary-card,
html[data-theme="dark"] .job-contact-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .register-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .panel-card {
    color: var(--theme-text);
    background: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] .job-input-wrap .form-control,
html[data-theme="dark"] .job-input-wrap .form-select {
    color: var(--theme-text);
    background: var(--theme-input);
    border-color: var(--theme-border);
}

html[data-theme="dark"] .job-card h3 a,
html[data-theme="dark"] .job-filter-card__heading h2,
html[data-theme="dark"] .job-list-heading h2,
html[data-theme="dark"] .job-empty-state h2,
html[data-theme="dark"] .job-content-card h2,
html[data-theme="dark"] .job-location-card h2,
html[data-theme="dark"] .job-summary-card h2,
html[data-theme="dark"] .job-contact-card h2 {
    color: var(--theme-text);
}

html[data-theme="dark"] .job-card__company,
html[data-theme="dark"] .job-card__description,
html[data-theme="dark"] .job-list-heading p,
html[data-theme="dark"] .job-content-card__body,
html[data-theme="dark"] .job-location-card p {
    color: var(--theme-muted);
}

html[data-theme="dark"] .meta-item,
html[data-theme="dark"] .job-summary-item:hover {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

html[data-theme="dark"] .meta-item strong,
html[data-theme="dark"] .job-summary-item strong {
    color: var(--theme-text-soft);
}

html[data-theme="dark"] .job-pagination li a,
html[data-theme="dark"] .job-pagination li span {
    color: var(--theme-text-soft);
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

html[data-theme="dark"] .job-pagination li a:hover {
    color: #8fd0ff;
    background: var(--theme-surface-soft);
}

/* =========================================================
   DARK MODE V2 - CORE / FORMS / REGISTER / BOOTSTRAP
   ========================================================= */
html[data-theme="dark"] {
    color-scheme: dark;
}

/* Không ép mọi heading/strong thành trắng trên các khối cố ý có nền sáng. */
html[data-theme="dark"] body {
    color: var(--theme-text);
}

html[data-theme="dark"] .form-label,
html[data-theme="dark"] .control-label,
html[data-theme="dark"] label:not(.btn):not(.badge) {
    color: #dce6f2;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
    color: #f0f5fc;
    background-color: #101b2c;
    border-color: #354a63;
}
html[data-theme="dark"] select option {
    color: #edf4ff;
    background: #101b2c;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] input::placeholder {
    color: #91a2b6;
    opacity: 1;
}
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .text-muted {
    color: #a8b8ca !important;
}

/* Trang đăng ký / form công khai: hỗ trợ nhiều tên class đang dùng trong dự án */
html[data-theme="dark"] .register-page,
html[data-theme="dark"] .applicant-register-page,
html[data-theme="dark"] .application-page,
html[data-theme="dark"] .applicant-page {
    color: #edf4ff;
    background: #0b1322;
}
html[data-theme="dark"] .register-card,
html[data-theme="dark"] .registration-card,
html[data-theme="dark"] .applicant-form-card,
html[data-theme="dark"] .application-form-card,
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .form-panel,
html[data-theme="dark"] .modern-form-card {
    color: #edf4ff;
    background: linear-gradient(145deg, #172438, #111d2f);
    border-color: #32475f;
    box-shadow: 0 18px 50px rgba(0,0,0,.26);
}
html[data-theme="dark"] .register-card h1,
html[data-theme="dark"] .register-card h2,
html[data-theme="dark"] .register-card h3,
html[data-theme="dark"] .registration-card h1,
html[data-theme="dark"] .registration-card h2,
html[data-theme="dark"] .applicant-form-card h1,
html[data-theme="dark"] .applicant-form-card h2,
html[data-theme="dark"] .form-section h2,
html[data-theme="dark"] .form-section h3 {
    color: #f3f7fd !important;
}
html[data-theme="dark"] .register-card p,
html[data-theme="dark"] .registration-card p,
html[data-theme="dark"] .applicant-form-card p,
html[data-theme="dark"] .form-section p {
    color: #b7c6d8;
}

/* Các khối thông tin/step thường có nền rất nhạt ở Light mode */
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .notice-box,
html[data-theme="dark"] .instruction-box,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .summary-box,
html[data-theme="dark"] .preview-box {
    color: #e5edf7;
    background: #132238;
    border-color: #334a64;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--theme-border);
}
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1) brightness(1.7);
}
html[data-theme="dark"] .table thead th {
    color: #e5eef9;
}

/* Giữ chữ tối ở các component có nền sáng chủ ý */
html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .badge.bg-warning,
html[data-theme="dark"] .text-bg-warning {
    color: #172033 !important;
}