/* Blue variation from "Propose Color Combination" (2026-10-28).
   Shared palette for every interactive layout. Vendor bundles stay unchanged. */
:root,
[data-bs-theme="light"] {
    --app-page: #f8fafc;
    --app-surface: #ffffff;
    --app-field: #f1f5f9;
    --app-border: #e2e8f0;
    --app-text: #0f172a;
    --app-label: #475569;
    --app-muted: #5f6f85;
    --app-primary: #1d4ed8;
    --app-primary-hover: #1e40af;
    --app-primary-rgb: 29, 78, 216;
    --app-primary-soft: #eff6ff;
    --app-primary-pill: #dbeafe;
    --app-summary-text: #1e3a8a;
    --app-success-text: #166534;
    --app-success-soft: #dcfce7;
    --app-warning-text: #92400e;
    --app-warning-soft: #fef3c7;
    --app-danger-text: #b91c1c;
    --app-danger-soft: #fee2e2;
}

/* Keep the existing theme preference usable with the same Blue accent. */
[data-bs-theme="dark"] {
    --app-page: #0f172a;
    --app-surface: #172033;
    --app-field: #1e293b;
    --app-border: #334155;
    --app-text: #f1f5f9;
    --app-label: #cbd5e1;
    --app-muted: #94a3b8;
    --app-primary: #93c5fd;
    --app-primary-hover: #bfdbfe;
    --app-primary-rgb: 147, 197, 253;
    --app-primary-soft: #172e50;
    --app-primary-pill: #1e3a5f;
    --app-summary-text: #bfdbfe;
    --app-success-text: #86efac;
    --app-success-soft: #143524;
    --app-warning-text: #fde68a;
    --app-warning-soft: #422f16;
    --app-danger-text: #fca5a5;
    --app-danger-soft: #451f2a;
}

:root,
[data-bs-theme] {
    --bs-primary: var(--app-primary);
    --bs-primary-active: var(--app-primary-hover);
    --bs-primary-light: var(--app-primary-pill);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-primary-clarity: rgba(var(--app-primary-rgb), .15);
    --bs-primary-inverse: #ffffff;
    --bs-text-primary: var(--app-primary);
    --bs-body-color: var(--app-text);
    --bs-body-bg: var(--app-surface);
    --bs-body-color-rgb: 15, 23, 42;
    --bs-text-dark: var(--app-text);
    --bs-text-muted: var(--app-muted);
    --bs-text-gray-400: var(--app-label);
    --bs-text-gray-500: var(--app-muted);
    --bs-text-gray-600: var(--app-label);
    --bs-text-gray-700: var(--app-label);
    --bs-text-gray-800: var(--app-text);
    --bs-text-gray-900: var(--app-text);
    --bs-gray-100: var(--app-field);
    --bs-gray-100-rgb: 241, 245, 249;
    --bs-gray-200: var(--app-border);
    --bs-gray-300: var(--app-border);
    --bs-gray-400: var(--app-muted);
    --bs-gray-500: var(--app-muted);
    --bs-gray-600: var(--app-label);
    --bs-gray-700: var(--app-label);
    --bs-gray-800: var(--app-text);
    --bs-gray-900: var(--app-text);
    --bs-border-color: var(--app-border);
    --bs-border-dashed-color: var(--app-border);
    --bs-root-card-border-color: var(--app-border);
    --bs-app-bg-color: var(--app-page);
    --bs-app-header-base-bg-color: var(--app-surface);
    --bs-app-footer-bg-color: var(--app-surface);
    --bs-input-bg: var(--app-surface);
    --bs-input-color: var(--app-text);
    --bs-input-solid-color: var(--app-text);
    --bs-input-solid-bg: var(--app-field);
    --bs-input-solid-bg-focus: var(--app-field);
    --bs-input-solid-placeholder-color: var(--app-muted);
    --bs-component-active-bg: var(--app-primary);
    --bs-component-hover-bg: var(--app-primary-soft);
    --bs-component-hover-color: var(--app-primary);
    --bs-component-checked-bg: var(--app-primary);
    --bs-link-color: var(--app-primary);
    --bs-link-color-rgb: var(--app-primary-rgb);
    --bs-link-hover-color: var(--app-primary-hover);
    --bs-link-hover-color-rgb: var(--app-primary-rgb);
    --bs-table-striped-bg: var(--app-field);
    --mobile-bottom-navigation-surface: var(--app-surface);
    --mobile-bottom-navigation-foreground: var(--app-muted);
    --mobile-bottom-navigation-active: var(--app-primary);
    --mobile-bottom-navigation-divider: var(--app-border);
    --mobile-bottom-navigation-focus: var(--app-primary);
}

[data-bs-theme="dark"] {
    --bs-primary-inverse: #0f172a;
    --bs-body-color-rgb: 241, 245, 249;
    --bs-gray-100-rgb: 30, 41, 59;
}

body {
    background-color: var(--app-page);
    color: var(--app-text);
}

.blue-auth-aside {
    background-image: linear-gradient(135deg, #1e3a8a, #1d4ed8) !important;
}

.card {
    --bs-card-bg: var(--app-surface);
    --bs-card-border-color: var(--app-border);
    --bs-card-title-color: var(--app-text);
}

.form-label,
.form-check-label {
    color: var(--app-label);
}

.form-control,
.form-select {
    color: var(--app-text);
    border-color: var(--app-border);
}

.form-control::placeholder {
    color: var(--app-muted);
}

.form-control:focus,
.form-select:focus {
    color: var(--app-text);
    border-color: var(--app-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .18);
}

.btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 3px;
}

.btn-primary {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-color: var(--bs-primary-inverse);
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-hover-color: var(--bs-primary-inverse);
    --bs-btn-active-bg: var(--app-primary-hover);
    --bs-btn-active-border-color: var(--app-primary-hover);
    --bs-btn-active-color: var(--bs-primary-inverse);
    --bs-btn-disabled-bg: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
    --bs-btn-disabled-color: var(--bs-primary-inverse);
}

.badge-light,
.attendance-status {
    color: var(--app-label);
    background-color: var(--app-field);
}

.badge-light-success {
    color: var(--app-success-text);
    background-color: var(--app-success-soft);
}

.badge-light-warning {
    color: var(--app-warning-text);
    background-color: var(--app-warning-soft);
}

.badge-light-danger {
    color: var(--app-danger-text);
    background-color: var(--app-danger-soft);
}

.attendance-status {
    border-radius: 999px;
    white-space: normal;
    line-height: 1.4;
}

.app-summary {
    background-color: var(--app-primary-soft);
    border: 1px solid var(--app-border);
}

.app-summary .card-body .fw-bold {
    color: var(--app-summary-text);
}

.app-summary .card-body .text-muted {
    color: var(--app-label) !important;
}

.mobile-bottom-navigation__item:hover {
    background-color: var(--app-primary-soft);
}

.mobile-bottom-navigation__item.is-active::before {
    display: none;
}

.mobile-bottom-navigation__icon {
    border-radius: 999px;
    width: 3.25rem;
    height: 2rem;
}

.mobile-bottom-navigation__icon i {
    color: inherit;
}

.mobile-bottom-navigation__item.is-active .mobile-bottom-navigation__icon {
    background-color: var(--app-primary-pill);
}

#kt_app_footer {
    background-color: var(--app-surface) !important;
}

.daterangepicker {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

.daterangepicker .calendar-table {
    background-color: var(--app-surface);
    border-color: var(--app-surface);
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .ranges li.active {
    background-color: var(--app-primary);
    color: var(--bs-primary-inverse);
}

.daterangepicker td.in-range {
    background-color: var(--app-primary-pill);
    color: var(--app-text);
}