/**
 * Dark Mode Override untuk Metronic
 * Diterapkan saat body memiliki class .dark-mode
 */
body.dark-mode {
    /* Align brand primary with light theme */
    --bs-primary: #6c5ce7;
    --bs-primary-rgb: 108, 92, 231;

    --bs-body-bg: #1e1e2d;
    --bs-body-color: #a1a5b7;
    --bs-gray-100: #2b2b40;
    --bs-gray-200: #252538;
    --bs-gray-300: #323248;
    --bs-gray-400: #474761;
    --bs-gray-500: #565674;
    --bs-gray-600: #6d6d80;
    --bs-gray-700: #92929f;
    --bs-gray-800: #cdcde0;
    --bs-gray-900: #ffffff;
    --bs-light: #2b2b40;
    --bs-dark: #ffffff;
    background-color: #1e1e2d !important;
    color: #a1a5b7 !important;
}

body.dark-mode .card,
body.dark-mode .card .card-header,
body.dark-mode .card .card-body {
    background-color: #1e1e2d !important;
    border-color: #323248 !important;
    color: #a1a5b7 !important;
}

body.dark-mode .card .card-title,
body.dark-mode .card .fw-bold,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode .text-dark {
    color: #ffffff !important;
}

body.dark-mode .text-muted,
body.dark-mode .text-gray-600,
body.dark-mode .stat-label {
    color: #92929f !important;
}

body.dark-mode .header,
body.dark-mode #kt_header,
body.dark-mode .header-cicle {
    background-color: rgba(30, 30, 45, 0.96) !important;
    border-color: #323248 !important;
    box-shadow: none !important;
}

body.dark-mode .aside,
body.dark-mode #kt_aside {
    background-color: #1b1b29 !important;
    border-color: #323248 !important;
}

body.dark-mode .aside-toggle-btn {
    color: #a1a5b7;
}

body.dark-mode .aside-toggle-btn:hover {
    color: #b8b1ff;
    background-color: #323248 !important;
    border-color: #323248 !important;
}

body.dark-mode .header-cicle__pill-btn,
body.dark-mode .header-cicle__icon-btn,
body.dark-mode .header-cicle__user-btn,
body.dark-mode .topbar-nav__link {
    color: #a1a5b7 !important;
}

body.dark-mode .header-cicle__pill-btn:hover,
body.dark-mode .header-cicle__icon-btn:hover,
body.dark-mode .header-cicle__user-btn:hover,
body.dark-mode .topbar-nav__link:hover,
body.dark-mode .topbar-nav__link.active {
    background-color: rgba(108, 92, 231, 0.16) !important;
    color: #dfd9ff !important;
}

body.dark-mode .aside .menu-link,
body.dark-mode .aside .menu-title {
    color: #a1a5b7 !important;
}

body.dark-mode .sidebar-company-name {
    color: #ffffff !important;
}

body.dark-mode .aside .menu-link:hover,
body.dark-mode .aside .menu-link.active {
    background-color: rgba(108, 92, 231, 0.18) !important;
    color: #dfd9ff !important;
}

body.dark-mode .toolbar,
body.dark-mode #kt_toolbar {
    background-color: rgba(30, 30, 45, 0.96) !important;
    border-bottom: 1px solid rgba(50, 50, 72, 0.85) !important;
    box-shadow: none !important;
}

body.dark-mode #kt_toolbar .breadcrumb-nav--toolbar__link,
body.dark-mode #kt_toolbar .breadcrumb-nav--toolbar__text {
    color: #8b8da3 !important;
}

body.dark-mode #kt_toolbar .breadcrumb-nav--toolbar__link:hover {
    color: #c7b8ff !important;
}

body.dark-mode #kt_toolbar .breadcrumb-nav--toolbar__current {
    color: #dcdfea !important;
}

body.dark-mode #kt_toolbar .kt-toolbar-compact__subtitle {
    color: #92929f !important;
}

body.dark-mode #kt_toolbar .kt-toolbar-compact__actions .btn-light {
    background-color: #2b2b40 !important;
    border-color: #323248 !important;
    color: #a1a5b7 !important;
}

body.dark-mode #kt_toolbar .kt-toolbar-compact__actions .btn-light:hover {
    background-color: #323248 !important;
    color: #dfd9ff !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .form-control-solid {
    background-color: #2b2b40 !important;
    border-color: #323248 !important;
    color: #a1a5b7 !important;
}

body.dark-mode .table,
body.dark-mode .table td,
body.dark-mode .table th {
    border-color: #323248 !important;
    color: #a1a5b7 !important;
}

body.dark-mode .table thead th,
body.dark-mode .table .fw-bold {
    color: #ffffff !important;
}

body.dark-mode .bg-body,
body.dark-mode .bg-light {
    background-color: #1e1e2d !important;
}

body.dark-mode .dropdown-menu {
    background-color: #1e1e2d !important;
    border-color: #323248 !important;
}

body.dark-mode .dropdown-item {
    color: #a1a5b7 !important;
}

body.dark-mode .dropdown-item:hover {
    background-color: #323248 !important;
    color: #ffffff !important;
}

body.dark-mode .btn-light,
body.dark-mode .btn-light-primary,
body.dark-mode .btn-light-active {
    background-color: #323248 !important;
    border-color: #323248 !important;
    color: #a1a5b7 !important;
}

body.dark-mode .btn-light:hover,
body.dark-mode .btn-light-primary:hover {
    background-color: #474761 !important;
    color: #ffffff !important;
}

body.dark-mode .topbar-nav .btn.active {
    background-color: #323248 !important;
    color: #dfd9ff !important;
    border-color: #323248 !important;
}

body.dark-mode .border-bottom,
body.dark-mode .border,
body.dark-mode .border-gray-200 {
    border-color: #323248 !important;
}

body.dark-mode .alert-warning {
    background-color: #3d2e1f !important;
    border-color: #5c4a2e !important;
    color: #ffc700 !important;
}

body.dark-mode .symbol-label.bg-primary {
    background-color: #6c5ce7 !important;
}

body.dark-mode .wrapper,
body.dark-mode #kt_wrapper,
body.dark-mode .content,
body.dark-mode #kt_content,
body.dark-mode .post,
body.dark-mode #kt_post {
    background-color: #1e1e2d !important;
}

body.dark-mode .page {
    background-color: #1e1e2d !important;
}

body.dark-mode .flex-root {
    background-color: #1e1e2d !important;
}

/* Breadcrumb dark mode */
body.dark-mode .breadcrumb-nav .breadcrumb-item.text-gray-600,
body.dark-mode .breadcrumb-nav .breadcrumb-item.text-gray-600 a {
    color: #92929f !important;
}

body.dark-mode .breadcrumb-nav .breadcrumb-item.text-gray-800,
body.dark-mode .breadcrumb-nav .breadcrumb-item.fw-bold {
    color: #ffffff !important;
}

body.dark-mode .breadcrumb-nav .breadcrumb-item.text-gray-400 {
    color: #565674 !important;
}

/* Super Admin dark mode */
body.dark-mode .super-admin-layout .header-super-admin {
    background-color: #1e1e2d !important;
    border-color: #323248 !important;
}

body.dark-mode .super-admin-layout .header-super-admin .fw-bold,
body.dark-mode .super-admin-layout .header-super-admin .text-gray-800 {
    color: #ffffff !important;
}

body.dark-mode .symbol-label.bg-danger {
    background-color: #f1416c !important;
}

/* Workspace branding (logo) — dark mode */
body.dark-mode .workspace-brand-mark--image {
    background-color: #2b2b40 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

body.dark-mode .workspace-brand-sidebar-logo {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body.dark-mode .workspace-brand-preview-card {
    background-color: #252538 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
}

/* Kalender proyek — chip task: hindari teks putih di atas bg terang (bg-light-primary) */
body.dark-mode a.project-calendar-task {
    background-color: rgba(108, 92, 231, 0.24) !important;
    border: 1px solid rgba(108, 92, 231, 0.35) !important;
    color: #f0edff !important;
}

body.dark-mode a.project-calendar-task .fw-bold {
    color: #ffffff !important;
}

body.dark-mode a.project-calendar-task .text-muted {
    color: #c8c4ea !important;
}

body.dark-mode a.project-calendar-task.text-dark {
    color: #f0edff !important;
}

body.dark-mode a.project-calendar-task:hover {
    background-color: rgba(108, 92, 231, 0.38) !important;
    color: #ffffff !important;
    border-color: rgba(183, 170, 255, 0.45) !important;
}

body.dark-mode a.project-calendar-task.text-hover-primary:hover {
    color: #ffffff !important;
}

/* Label bulan / teks abu lain di konten kalender */
body.dark-mode .text-gray-700 {
    color: #cdcde0 !important;
}