/* =============================================================================
   Light theme — chỉ khi html[data-theme="light"]
   ============================================================================= */

html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="light"] body {
    background-color: var(--bg-primary, #f0f4f8);
}

/* ----- Shell ----- */
html[data-theme="light"] .app-shell {
    background: linear-gradient(165deg, #e4ebf4 0%, var(--bg-primary, #f0f4f8) 35%, #eef2f7 100%);
    background-image: none;
    background-color: transparent;
}

html[data-theme="light"] .app-shell::before {
    opacity: 0;
    visibility: hidden;
}

html[data-theme="light"] .app-shell .app-sidebar.menu-gradient {
    background: linear-gradient(135deg, #014aad, #049ee0 70%, #013f90) !important;
    border-right: none;
    box-shadow: var(--app-shadow-sidebar, 4px 0 24px rgba(1, 47, 106, 0.18));
}

html[data-theme="light"] .app-sidebar__footer {
    background: linear-gradient(180deg, rgba(1, 63, 144, 0.35) 0%, rgba(1, 74, 173, 0.55) 100%) !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="light"] .app-main {
    color: var(--gray-900, #111827);
}

html[data-theme="light"] .app-main::-webkit-scrollbar-thumb {
    background: var(--gray-300, #d1d5db);
}

html[data-theme="light"] .app-main::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400, #9ca3af);
}

html[data-theme="light"] .app-main .dashboard-wrapper {
    color: var(--gray-900, #111827);
}

/* Page header */
html[data-theme="light"] .app-main .page-header {
    background: transparent;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    box-shadow: none;
    backdrop-filter: none;
    padding-bottom: var(--spacing-6, 1.5rem);
}

html[data-theme="light"] .app-main .page-header::after {
    display: none;
}

html[data-theme="light"] .app-main .page-header__icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.55rem;
    background: linear-gradient(135deg, var(--primary-500, #014aad), var(--primary-400, #049ee0)) !important;
    border: none;
    box-shadow: 0 4px 14px rgba(1, 74, 173, 0.22);
}

html[data-theme="light"] .app-main .page-header__icon .oi {
    font-size: 1.05rem;
}

html[data-theme="light"] .app-main .page-header__title {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: var(--gray-900, #111827) !important;
}

html[data-theme="light"] .app-main .page-header__meta {
    color: var(--gray-500, #6b7280) !important;
    background: var(--gray-100, #f3f4f6) !important;
    border: 1px solid var(--gray-200, #e5e7eb) !important;
}

html[data-theme="light"] .app-main .btn-outline-secondary {
    color: var(--gray-700, #374151);
    border-color: var(--gray-300, #d1d5db);
    background: #fff;
}

html[data-theme="light"] .app-main .btn-outline-secondary:hover:not(:disabled) {
    color: var(--primary-600, #013f90);
    background: var(--gray-50, #f9fafb);
    border-color: var(--primary-400, #049ee0);
}

/* Activity section */
html[data-theme="light"] .app-main .activity-section {
    background: var(--surface, #fff) !important;
    border: 1px solid var(--gray-200, #e5e7eb) !important;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    backdrop-filter: none;
    color: var(--gray-900, #111827);
}

html[data-theme="light"] .app-main .activity-section .form-label,
html[data-theme="light"] .app-main .activity-section > .row .form-label {
    color: var(--gray-700, #374151);
}

html[data-theme="light"] .app-main .activity-section .text-muted {
    color: var(--gray-500, #6b7280) !important;
}

html[data-theme="light"] .app-main .activity-section > .table-wrapper,
html[data-theme="light"] .app-main .activity-section > .table-wrapper-scroll,
html[data-theme="light"] .app-main .activity-section .activity-section > .table-wrapper,
html[data-theme="light"] .app-main .activity-section .activity-section > .table-wrapper-scroll,
html[data-theme="light"] .app-main .activity-section .col-md-6 > .table-wrapper,
html[data-theme="light"] .app-main .activity-section .col-md-6 > .table-wrapper-scroll,
html[data-theme="light"] .app-main .activity-section .row > [class*="col"] > .table-wrapper,
html[data-theme="light"] .app-main .activity-section .row > [class*="col"] > .table-wrapper-scroll,
html[data-theme="light"] .app-main .app-page .table-wrapper,
html[data-theme="light"] .app-main .app-page .table-wrapper-scroll {
    background: #fff !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    box-shadow: none;
    border-radius: 0.85rem !important;
}

html[data-theme="light"] .app-main .activity-section .activity-table thead th,
html[data-theme="light"] .app-main .activity-section .etl-table thead th,
html[data-theme="light"] .app-main .app-page .activity-table thead th,
html[data-theme="light"] .app-main .app-page .etl-table thead th {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    color: #334155 !important;
    border-bottom: 2px solid var(--primary-400, #049ee0) !important;
    border-top: none !important;
    font-size: 0.6875rem;
    letter-spacing: 0.07em;
}

html[data-theme="light"] .app-main .activity-section .activity-table:not(.table-bordered) thead th,
html[data-theme="light"] .app-main .activity-section .etl-table:not(.table-bordered) thead th,
html[data-theme="light"] .app-main .app-page .activity-table:not(.table-bordered) thead th,
html[data-theme="light"] .app-main .app-page .etl-table:not(.table-bordered) thead th {
    border-left: none !important;
    border-right: none !important;
}

html[data-theme="light"] .app-main .activity-section .activity-table tbody td,
html[data-theme="light"] .app-main .activity-section .etl-table tbody td,
html[data-theme="light"] .app-main .app-page .activity-table tbody td,
html[data-theme="light"] .app-main .app-page .etl-table tbody td {
    color: var(--text-primary, #1e293b) !important;
    border-bottom-color: var(--border-color-light, #e2e8f0) !important;
}

html[data-theme="light"] .app-main .activity-section .activity-table tbody tr:hover,
html[data-theme="light"] .app-main .activity-section .etl-table tbody tr:hover,
html[data-theme="light"] .app-main .app-page .activity-table tbody tr:hover,
html[data-theme="light"] .app-main .app-page .etl-table tbody tr:hover {
    background-color: var(--surface-hover, #f1f5f9) !important;
}

html[data-theme="light"] .app-main .activity-section .table-striped.etl-table > tbody > tr:nth-of-type(odd) > *,
html[data-theme="light"] .app-main .activity-section .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-theme="light"] .app-main .app-page .table-striped.etl-table > tbody > tr:nth-of-type(odd) > *,
html[data-theme="light"] .app-main .app-page .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(248, 250, 252, 0.65);
}

html[data-theme="light"] .app-main .activity-section .etl-table.etl-table--kv tbody th,
html[data-theme="light"] .app-main .app-page .etl-table.etl-table--kv tbody th {
    background: #f8fafc !important;
    color: var(--gray-700, #374151) !important;
    border-bottom-color: var(--gray-200, #e5e7eb) !important;
}

html[data-theme="light"] .app-main .activity-section .etl-table.etl-table--kv tbody td,
html[data-theme="light"] .app-main .app-page .etl-table.etl-table--kv tbody td {
    color: var(--text-primary, #1e293b) !important;
    border-bottom-color: var(--gray-200, #e5e7eb) !important;
}

html[data-theme="light"] .app-main .activity-section .row .table.etl-table,
html[data-theme="light"] .app-main .activity-section > table.etl-table,
html[data-theme="light"] .app-main .app-page .row .table.etl-table,
html[data-theme="light"] .app-main .app-page > table.etl-table {
    background: #fff !important;
    border: 1px solid var(--border-color-light, #e2e8f0) !important;
    color: var(--gray-900, #0f172a);
}

html[data-theme="light"] .app-main .activity-section > .table-wrapper .text-muted,
html[data-theme="light"] .app-main .activity-section > .table-wrapper-scroll .text-muted,
html[data-theme="light"] .app-main .activity-section .table-wrapper .text-muted,
html[data-theme="light"] .app-main .activity-section .table-wrapper-scroll .text-muted,
html[data-theme="light"] .app-main .app-page .table-wrapper .text-muted,
html[data-theme="light"] .app-main .app-page .table-wrapper-scroll .text-muted {
    color: #64748b !important;
}

html[data-theme="light"] .app-main .activity-section table code,
html[data-theme="light"] .app-main .app-page table code {
    background: var(--gray-100, #f3f4f6);
    color: var(--primary-700, #012f6c);
}

html[data-theme="light"] .app-main .etl-section-title {
    color: var(--gray-900, #0f172a) !important;
}

html[data-theme="light"] .app-main .etl-section-title .oi,
html[data-theme="light"] .app-main .etl-section-title .bi {
    color: var(--etl-accent, #2eb398);
    opacity: 0.95;
}

html[data-theme="light"] .app-main .card {
    background: var(--surface, #fff) !important;
    border: 1px solid var(--gray-200, #e5e7eb) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* Stat cards */
html[data-theme="light"] .app-main .stat-card {
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border-color-light, #e5e7eb) !important;
    backdrop-filter: none;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05)) !important;
}

html[data-theme="light"] .app-main .stat-card-title {
    color: var(--text-secondary, #64748b) !important;
}

html[data-theme="light"] .app-main .stat-card-value {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: var(--text-primary, #0f172a) !important;
}

html[data-theme="light"] .app-main .stat-card-subtitle {
    color: var(--text-tertiary, #94a3b8) !important;
}

html[data-theme="light"] .app-main .stat-card-icon.blue {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
    color: #1e40af !important;
    border: none !important;
}

html[data-theme="light"] .app-main .stat-card-icon.green {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
    color: #065f46 !important;
    border: none !important;
}

html[data-theme="light"] .app-main .stat-card-icon.orange {
    background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
    color: #92400e !important;
    border: none !important;
}

html[data-theme="light"] .app-main .stat-card-icon.purple {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe) !important;
    color: #5b21b6 !important;
    border: none !important;
}

html[data-theme="light"] .app-main .stat-card-icon.red {
    background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
    color: #991b1b !important;
    border: none !important;
}

html[data-theme="light"] .app-main .stat-card-icon.teal {
    background: linear-gradient(135deg, var(--primary-50, #e6f2ff), var(--primary-100, #cce5ff)) !important;
    color: var(--primary-600, #013f90) !important;
    border: none !important;
}

html[data-theme="light"] .app-main .stat-card-icon.indigo {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe) !important;
    color: #3730a3 !important;
    border: none !important;
}

/* Empty state */
html[data-theme="light"] .app-main .activity-section > .empty-state {
    background: var(--gray-50, #f9fafb);
    border: 1px dashed var(--gray-200, #e5e7eb) !important;
}

html[data-theme="light"] .app-main .activity-section > .empty-state .empty-state-icon {
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-400, #9ca3af);
}

html[data-theme="light"] .app-main .activity-section > .empty-state h3 {
    color: var(--gray-800, #1f2937) !important;
}

html[data-theme="light"] .app-main .activity-section > .empty-state p {
    color: var(--gray-500, #6b7280) !important;
}

/* Skeleton */
html[data-theme="light"] .app-main .skeleton {
    background: linear-gradient(
        90deg,
        var(--gray-100) 0%,
        var(--gray-200) 50%,
        var(--gray-100) 100%
    ) !important;
}

html[data-theme="light"] .app-main .skeleton-card {
    background: var(--surface, #fff) !important;
    border: 1px solid var(--gray-200) !important;
}

/* Pagination */
html[data-theme="light"] .app-main .activity-section > .pagination-wrapper {
    border-top-color: #e2e8f0 !important;
}

html[data-theme="light"] .app-main .activity-section > .pagination-wrapper .pagination-info {
    color: #6b7a8f !important;
}

html[data-theme="light"] .app-main .activity-section > .pagination-wrapper .btn-outline-secondary {
    border-color: #cbd5e0;
    color: #6b7a8f;
    background: #fff;
}

html[data-theme="light"] .app-main .activity-section > .pagination-wrapper .btn-outline-secondary:hover:not(:disabled) {
    background: #f7fafc;
    color: var(--primary-400, #049ee0);
}

html[data-theme="light"] .app-main .pagination .page-link {
    background: #fff;
    border-color: #dee2e6;
    color: var(--primary-600, #013f90);
}

html[data-theme="light"] .app-main .pagination .page-item.disabled .page-link {
    color: #9ca3af;
}

/* Alerts */
html[data-theme="light"] .app-main .activity-section .alert-info {
    background: var(--info-light, #e0f2fe);
    border-color: #bae6fd;
    color: #0369a1;
}

html[data-theme="light"] .app-main .activity-section .alert-warning {
    background: var(--warning-light, #fef3c7);
    border-color: #fde68a;
    color: #92400e;
}

/* Code blocks */
html[data-theme="light"] .app-main .activity-section pre.bg-light,
html[data-theme="light"] .app-main .activity-section .bg-light.border {
    background: #f8fafc !important;
    color: #1e293b !important;
    border-color: #e2e8f0 !important;
}

html[data-theme="light"] .modal-backdrop.show {
    opacity: 0.5;
}

html[data-theme="light"] .modal .modal-content,
html[data-theme="light"] .confirmation-modal .modal-content {
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.18);
    border-color: #e2e8f0;
}

/* ----- Dashboard dash-* ----- */
html[data-theme="light"] .dash-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    backdrop-filter: none;
}

html[data-theme="light"] .dash-header::after {
    display: none;
}

html[data-theme="light"] .dash-header__badge {
    background: linear-gradient(135deg, var(--primary-500, #014aad), var(--primary-400, #049ee0));
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(1, 74, 173, 0.25);
}

html[data-theme="light"] .dash-header__title {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: #0f172a !important;
}

html[data-theme="light"] .dash-header__sub {
    color: #64748b !important;
}

html[data-theme="light"] .dash-header__meta {
    color: #94a3b8 !important;
}

html[data-theme="light"] .dash-metric {
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    backdrop-filter: none;
}

html[data-theme="light"] .dash-metric:hover {
    background: #fff;
    border-color: #bae6fd;
}

html[data-theme="light"] .dash-metric__icon {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: none;
}

html[data-theme="light"] .dash-metric__label {
    color: #64748b;
}

html[data-theme="light"] .dash-metric__value {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: #0f172a !important;
}

html[data-theme="light"] .dash-metric__hint {
    color: #94a3b8;
}

html[data-theme="light"] .app-page--dashboard .dash-skel-metric {
    background: #fff;
    border: 1px solid #e2e8f0;
}

html[data-theme="light"] .dash-panel {
    background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme="light"] .dash-panel::before {
    display: none;
}

html[data-theme="light"] .dash-panel__head {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .dash-panel__title {
    color: #0f172a;
}

html[data-theme="light"] .dash-panel__title .oi {
    color: #0284c7;
    opacity: 1;
}

html[data-theme="light"] .app-page--dashboard .dash-panel .table-wrapper {
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: none;
}

html[data-theme="light"] .app-page--dashboard .dash-panel .activity-table thead th {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    color: #334155 !important;
    border-bottom: 2px solid var(--primary-400, #049ee0) !important;
}

html[data-theme="light"] .app-page--dashboard .dash-panel .activity-table tbody td {
    color: var(--text-primary, #1e293b) !important;
    border-bottom-color: var(--border-color-light, #e2e8f0) !important;
}

html[data-theme="light"] .app-page--dashboard .dash-panel .activity-table tbody tr:hover {
    background: #f1f5f9 !important;
}

html[data-theme="light"] .app-page--dashboard .dash-panel .empty-state {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, #fff 100%);
    border: 1px dashed #cbd5e1;
}

html[data-theme="light"] .app-page--dashboard .dash-panel .empty-state-icon {
    color: #94a3b8;
    background: transparent;
}

html[data-theme="light"] .app-page--dashboard .dash-panel .empty-state h3 {
    color: #334155;
}

html[data-theme="light"] .app-page--dashboard .dash-panel .empty-state p {
    color: #64748b;
}

html[data-theme="light"] .app-page--dashboard .dash-panel .skeleton {
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 45%, #f1f5f9 100%);
    background-size: 200% 100%;
}

/* ----- Scheduler — form tạo / chỉnh sửa (.app-page--scheduler-form) ----- */
html[data-theme="light"] .app-page--scheduler-form .etl-sched-edit__panel {
    background: #fff;
    border-color: #e2e8f0;
}

html[data-theme="light"] .app-page--scheduler-form .scheduler-edit__section {
    border-bottom-color: #e2e8f0;
}

html[data-theme="light"] .app-page--scheduler-form .scheduler-cron-help {
    background: #f8fafc;
    border-color: #e2e8f0;
}

html[data-theme="light"] .app-page--scheduler-form .scheduler-cron-help summary {
    color: #0f172a;
}

html[data-theme="light"] .app-page--scheduler-form .scheduler-cron-help__body {
    color: #334155;
    border-top-color: #e2e8f0;
}

html[data-theme="light"] .app-page--scheduler-form .scheduler-cron-help__body code {
    background: #e2e8f0;
    color: var(--etl-accent-deep, #1d7a68);
}

html[data-theme="light"] .app-page--scheduler-form .scheduler-run-summary__item {
    background: #fff;
    border-color: #e2e8f0;
}

html[data-theme="light"] .app-page--scheduler-form .scheduler-run-summary__label {
    color: #64748b;
}

html[data-theme="light"] .app-page--scheduler-form .scheduler-run-summary__value {
    color: #0f172a;
}

html[data-theme="light"] .app-page--scheduler-form .scheduler-edit__checks .form-check {
    background: var(--etl-accent-muted);
    border-color: var(--etl-accent-border);
}

html[data-theme="light"] .app-page--scheduler-form .scheduler-edit__actions {
    border-top-color: #e2e8f0;
}

/* ----- Login (auth-shell) ----- */
html[data-theme="light"] .auth-shell {
    background-color: #e8eef5;
    background-image:
        radial-gradient(ellipse 90% 70% at 20% -10%, rgba(1, 74, 173, 0.12), transparent 50%),
        radial-gradient(ellipse 70% 50% at 100% 50%, rgba(4, 158, 224, 0.1), transparent 45%);
}

html[data-theme="light"] .auth-shell::before {
    opacity: 0.4;
}

/* ----- Gate (không đăng nhập) ----- */
html[data-theme="light"] .app-gate--gradient {
    background-color: #e8eef5;
    background-image:
        radial-gradient(ellipse 90% 60% at 10% 0%, rgba(255, 255, 255, 0.5), transparent 55%),
        radial-gradient(ellipse 70% 50% at 100% 100%, rgba(4, 158, 224, 0.15), transparent 50%);
}

html[data-theme="light"] .app-gate--gradient::before {
    opacity: 0.35;
}