/**
 * BLACK & WHITE THEME OVERRIDE
 * Dark mode: Pure black
 * Light mode: Clean white
 * Must be loaded AFTER Metronic CSS
 */

/* ========================================
   DARK MODE - Pure Black Theme
   ======================================== */

/* Force all main backgrounds to black */
body.dark-mode,
body.dark-mode #kt_body,
body.dark-mode .app-wrapper,
body.dark-mode .app-main,
body.dark-mode .app-container,
body.dark-mode .d-flex.flex-column.flex-root,
body.dark-mode #flex_root {
    background-color: #000000 !important;
}

/* ========================================
   LIGHT MODE - Clean White Theme
   ======================================== */

/* Force all main backgrounds to white */
body.light-mode,
body.light-mode #kt_body,
body.light-mode .app-wrapper,
body.light-mode .app-main,
body.light-mode .app-container,
body.light-mode .d-flex.flex-column.flex-root,
body.light-mode #flex_root {
    background-color: #ffffff !important;
}

/* Content wrapper and main areas - DARK */
body.dark-mode .content-wrapper,
body.dark-mode .app-content,
body.dark-mode #kt_app_content,
body.dark-mode #kt_app_content_container {
    background-color: #000000 !important;
}

/* Content wrapper and main areas - LIGHT */
body.light-mode .content-wrapper,
body.light-mode .app-content,
body.light-mode #kt_app_content,
body.light-mode #kt_app_content_container {
    background-color: #ffffff !important;
}

/* Cards and panels */
body.dark-mode .card,
body.dark-mode .card-body,
body.dark-mode .card-header,
body.dark-mode .card-footer,
body.dark-mode .box,
body.dark-mode .box-body,
body.dark-mode .panel,
body.dark-mode .panel-body {
    background-color: #000000 !important;
    border-color: #1a1a1a !important;
}

/* List view cards - Clean enclosed boxes with no gaps */
body.dark-mode .card.card-flush {
    border: 1px solid #1a1a1a !important;
    border-radius: 12px !important;
    margin-bottom: 1.5rem !important;
    overflow: hidden !important;
}

body.dark-mode .card-header {
    border-bottom: 1px solid #1a1a1a !important;
    padding: 1.25rem 1.5rem !important;
    margin: 0 !important;
    background-color: #000000 !important;
}

body.dark-mode .card-body {
    padding: 1.5rem !important;
    margin: 0 !important;
    background-color: #000000 !important;
}

body.dark-mode .card-footer {
    border-top: 1px solid #1a1a1a !important;
    padding: 1rem 1.5rem !important;
    margin: 0 !important;
    background-color: #000000 !important;
}

/* Remove any gaps or extra margins */
body.dark-mode .card.card-flush .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.dark-mode .card.card-flush .col-1,
body.dark-mode .card.card-flush .col-4,
body.dark-mode .card.card-flush .col-7,
body.dark-mode .card.card-flush [class*="col-"] {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Table container specific styling */
body.dark-mode #table-container.card {
    border: 1px solid #1a1a1a !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Remove padding from table container to avoid gaps */
body.dark-mode #table-container.card.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Filter and form containers */
body.dark-mode .filters-container,
body.dark-mode .filter-form,
body.dark-mode .form-section,
body.dark-mode .form-group {
    background-color: #000000 !important;
}

/* Sidebar and navigation */
body.dark-mode .app-sidebar,
body.dark-mode #kt_app_sidebar,
body.dark-mode .aside,
body.dark-mode #kt_aside {
    background-color: #000000 !important;
}

/* Sidebar top logo area - slightly darker for contrast */
body.dark-mode .aside-logo,
body.dark-mode #kt_aside_logo {
    background-color: #0d0d0d !important;
    border-bottom: 1px solid #1a1a1a !important;
}

/* Collapse toggle button - match the darker top area */
body.dark-mode .aside-toggle,
body.dark-mode #kt_aside_toggle,
body.dark-mode .aside-toggle .svg-icon {
    background-color: #0d0d0d !important;
    color: #8a8d9a !important;
}

/* All menu items and sidebar - match the darker top color */
body.dark-mode .menu,
body.dark-mode .menu-sub,
body.dark-mode .menu-item,
body.dark-mode .aside-menu,
body.dark-mode .aside-menu .hover-scroll-overlay-y {
    background-color: #0d0d0d !important;
}

/* Menu links and icons - consistent styling */
body.dark-mode .menu-link,
body.dark-mode .menu-item .menu-link {
    background-color: transparent !important;
    color: #8a8d9a !important;
}

/* Menu icons - all same color */
body.dark-mode .menu-icon,
body.dark-mode .menu-icon i,
body.dark-mode .menu-icon .fa {
    color: #8a8d9a !important;
}

/* Menu hover state - slightly lighter than base */
body.dark-mode .menu-item:hover,
body.dark-mode .menu-link:hover {
    background-color: #151515 !important;
}

body.dark-mode .menu-item:hover .menu-icon,
body.dark-mode .menu-item:hover .menu-icon i,
body.dark-mode .menu-link:hover .menu-icon {
    color: #C2C3CD !important;
}

/* Active/selected menu items - lighter highlight */
body.dark-mode .menu-item.here,
body.dark-mode .menu-item.show,
body.dark-mode .menu-item.active {
    background-color: #1d1d1d !important;
}

body.dark-mode .menu-item.here .menu-link,
body.dark-mode .menu-item.show .menu-link,
body.dark-mode .menu-item.active .menu-link {
    background-color: transparent !important;
    color: #C2C3CD !important;
}

body.dark-mode .menu-item.here .menu-icon,
body.dark-mode .menu-item.show .menu-icon,
body.dark-mode .menu-item.active .menu-icon,
body.dark-mode .menu-item.here .menu-icon i,
body.dark-mode .menu-item.show .menu-icon i,
body.dark-mode .menu-item.active .menu-icon i {
    color: #C2C3CD !important;
}

/* Menu bullets and arrows */
body.dark-mode .menu-bullet,
body.dark-mode .bullet-dot {
    background-color: #8a8d9a !important;
}

body.dark-mode .menu-arrow::after {
    border-color: #8a8d9a !important;
}

/* Header and toolbar - Pure black */
body.dark-mode .app-header,
body.dark-mode #kt_app_header,
body.dark-mode .header,
body.dark-mode #kt_header,
body.dark-mode .toolbar,
body.dark-mode #kt_app_toolbar {
    background-color: #000000 !important;
    border-color: #1a1a1a !important;
}

/* Header menu and navigation - Pure black (not the darker sidebar color) */
body.dark-mode .header-menu,
body.dark-mode .header .menu,
body.dark-mode #kt_header .menu,
body.dark-mode #kt_header_nav,
body.dark-mode #kt_header_nav .menu {
    background-color: #000000 !important;
}

/* Header menu items - Pure black background */
body.dark-mode .header .menu-item,
body.dark-mode #kt_header .menu-item,
body.dark-mode .header-menu .menu-item {
    background-color: #000000 !important;
}

/* Header menu links */
body.dark-mode .header .menu-link,
body.dark-mode #kt_header .menu-link,
body.dark-mode .header-menu .menu-link {
    background-color: transparent !important;
    color: #8a8d9a !important;
}

/* Header menu hover */
body.dark-mode .header .menu-item:hover,
body.dark-mode #kt_header .menu-item:hover,
body.dark-mode .header .menu-link:hover,
body.dark-mode #kt_header .menu-link:hover {
    background-color: #0a0a0a !important;
}

/* Header active menu items */
body.dark-mode .header .menu-item.here,
body.dark-mode #kt_header .menu-item.here,
body.dark-mode .header .menu-item.active,
body.dark-mode #kt_header .menu-item.active {
    background-color: #1a1a1a !important;
}

/* Header dropdown menus - also pure black */
body.dark-mode .header .menu-sub,
body.dark-mode #kt_header .menu-sub,
body.dark-mode .header-menu .menu-sub {
    background-color: #000000 !important;
    border: 1px solid #1a1a1a !important;
}

/* Modals */
body.dark-mode .modal-content,
body.dark-mode .modal-header,
body.dark-mode .modal-body,
body.dark-mode .modal-footer {
    background-color: #000000 !important;
    border-color: #1a1a1a !important;
}

/* Dropdowns and popovers */
body.dark-mode .dropdown-menu,
body.dark-mode .popover,
body.dark-mode .tooltip-inner {
    background-color: #000000 !important;
    border-color: #1a1a1a !important;
}

/* Tables */
body.dark-mode .table,
body.dark-mode .table thead,
body.dark-mode .table tbody,
body.dark-mode .table-responsive {
    background-color: #000000 !important;
}

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

/* Forms and inputs */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #111111 !important;
    border-color: #1f1f1f !important;
    color: #C2C3CD !important;
}

body.dark-mode input:disabled,
body.dark-mode textarea:disabled,
body.dark-mode select:disabled,
body.dark-mode .form-control:disabled {
    background-color: #0a0a0a !important;
}

/* Buttons - keep some contrast */
body.dark-mode .btn-primary,
body.dark-mode .btn-success {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-success:hover {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
}

/* Scrollbars */
body.dark-mode ::-webkit-scrollbar-track {
    background: #0a0a0a !important;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #2a2a2a !important;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #3a3a3a !important;
}

/* Borders - lighter for visibility */
body.dark-mode .border,
body.dark-mode [class*="border-"] {
    border-color: #1a1a1a !important;
}

/* Shadows - adjust for black background */
body.dark-mode .shadow,
body.dark-mode .shadow-sm,
body.dark-mode .shadow-lg {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05) !important;
}

/* Text colors - ensure readability */
body.dark-mode,
body.dark-mode .text-dark {
    color: #C2C3CD !important;
}

/* Separator and dividers */
body.dark-mode .separator,
body.dark-mode hr {
    border-color: #1a1a1a !important;
    background-color: #1a1a1a !important;
}

/* Badges and labels - keep some color but darken */
body.dark-mode .badge {
    background-color: #1a1a1a !important;
}

/* Alerts - maintain contrast */
body.dark-mode .alert {
    background-color: #111111 !important;
    border-color: #1f1f1f !important;
}

/* Tabs and navigation items */
body.dark-mode .nav-tabs,
body.dark-mode .nav-pills {
    background-color: #000000 !important;
}

body.dark-mode .nav-link {
    background-color: transparent !important;
}

body.dark-mode .nav-link.active {
    background-color: #1a1a1a !important;
}

/* Pagination */
body.dark-mode .pagination .page-link {
    background-color: #111111 !important;
    border-color: #1f1f1f !important;
}

body.dark-mode .pagination .page-item.active .page-link {
    background-color: #2a2a2a !important;
}

/* Breadcrumbs */
body.dark-mode .breadcrumb {
    background-color: transparent !important;
}

/* Progress bars - keep colored but adjust base */
body.dark-mode .progress {
    background-color: #111111 !important;
}

/* List groups */
body.dark-mode .list-group-item {
    background-color: #000000 !important;
    border-color: #1a1a1a !important;
}

/* Accordion */
body.dark-mode .accordion-item {
    background-color: #000000 !important;
    border-color: #1a1a1a !important;
}

body.dark-mode .accordion-button {
    background-color: #111111 !important;
}

/* Offcanvas */
body.dark-mode .offcanvas {
    background-color: #000000 !important;
}

/* Toast notifications */
body.dark-mode .toast {
    background-color: #111111 !important;
    border-color: #1f1f1f !important;
}

/* Select2 (if used) */
body.dark-mode .select2-container--default .select2-selection {
    background-color: #111111 !important;
    border-color: #1f1f1f !important;
}

body.dark-mode .select2-dropdown {
    background-color: #000000 !important;
    border-color: #1a1a1a !important;
}

body.dark-mode .select2-results__option {
    background-color: #000000 !important;
}

body.dark-mode .select2-results__option--highlighted {
    background-color: #1a1a1a !important;
}

/* AG Grid (if used) */
body.dark-mode .ag-theme-alpine-dark,
body.dark-mode .ag-theme-alpine-dark .ag-root-wrapper {
    background-color: #000000 !important;
}

body.dark-mode .ag-theme-alpine-dark .ag-header {
    background-color: #111111 !important;
}

body.dark-mode .ag-theme-alpine-dark .ag-row {
    background-color: #000000 !important;
    border-color: #1a1a1a !important;
}

body.dark-mode .ag-theme-alpine-dark .ag-row-even {
    background-color: #0a0a0a !important;
}

/* DataTables */
body.dark-mode .dataTables_wrapper,
body.dark-mode table.dataTable {
    background-color: #000000 !important;
}

body.dark-mode table.dataTable thead th,
body.dark-mode table.dataTable thead td {
    background-color: #111111 !important;
    border-color: #1a1a1a !important;
}

body.dark-mode table.dataTable tbody tr {
    background-color: #000000 !important;
}

body.dark-mode table.dataTable tbody tr:hover {
    background-color: #0a0a0a !important;
}

body.dark-mode table.dataTable tbody tr.selected {
    background-color: #1a1a1a !important;
}

/* DataTables buttons */
body.dark-mode .dt-button {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
}

/* Specific Metronic components */
body.dark-mode .drawer,
body.dark-mode .menu-state-bg {
    background-color: #000000 !important;
}

body.dark-mode .menu-item:hover {
    background-color: #0a0a0a !important;
}

body.dark-mode .menu-item.active {
    background-color: #1a1a1a !important;
}

/* Footer */
body.dark-mode .app-footer,
body.dark-mode #kt_app_footer {
    background-color: #000000 !important;
    border-color: #1a1a1a !important;
}

/* DEVELOPMENT MODE badge - Always keep green */
.btn-success,
body.dark-mode .btn-success,
body.light-mode .btn-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
}

.btn-success:hover,
body.dark-mode .btn-success:hover,
body.light-mode .btn-success:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
    color: #ffffff !important;
}

/* ========================================
   LIGHT MODE - Complete Styling
   ======================================== */

/* Cards and panels - LIGHT */
body.light-mode .card,
body.light-mode .card-body,
body.light-mode .card-header,
body.light-mode .card-footer,
body.light-mode .box,
body.light-mode .box-body,
body.light-mode .panel,
body.light-mode .panel-body {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* List view cards - Clean enclosed boxes with no gaps - LIGHT */
body.light-mode .card.card-flush {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    margin-bottom: 1.5rem !important;
    overflow: hidden !important;
}

body.light-mode .card-header {
    border-bottom: 1px solid #e5e7eb !important;
    padding: 1.25rem 1.5rem !important;
    margin: 0 !important;
    background-color: #ffffff !important;
}

body.light-mode .card-body {
    padding: 1.5rem !important;
    margin: 0 !important;
    background-color: #ffffff !important;
}

body.light-mode .card-footer {
    border-top: 1px solid #e5e7eb !important;
    padding: 1rem 1.5rem !important;
    margin: 0 !important;
    background-color: #ffffff !important;
}

/* Remove any gaps or extra margins - LIGHT */
body.light-mode .card.card-flush .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.light-mode .card.card-flush .col-1,
body.light-mode .card.card-flush .col-4,
body.light-mode .card.card-flush .col-7,
body.light-mode .card.card-flush [class*="col-"] {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Table container specific styling - LIGHT */
body.light-mode #table-container.card {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Remove padding from table container to avoid gaps - LIGHT */
body.light-mode #table-container.card.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Sidebar - LIGHT */
body.light-mode .app-sidebar,
body.light-mode #kt_app_sidebar,
body.light-mode .aside,
body.light-mode #kt_aside {
    background-color: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
}

/* Sidebar top logo area - LIGHT */
body.light-mode .aside-logo,
body.light-mode #kt_aside_logo {
    background-color: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Collapse toggle button - LIGHT */
body.light-mode .aside-toggle,
body.light-mode #kt_aside_toggle,
body.light-mode .aside-toggle .svg-icon {
    background-color: #f9fafb !important;
    color: #6b7280 !important;
}

/* All menu items - LIGHT */
body.light-mode .menu,
body.light-mode .menu-sub,
body.light-mode .menu-item,
body.light-mode .aside-menu,
body.light-mode .aside-menu .hover-scroll-overlay-y {
    background-color: #f9fafb !important;
}

/* Menu links and icons - LIGHT */
body.light-mode .menu-link,
body.light-mode .menu-item .menu-link {
    background-color: transparent !important;
    color: #6b7280 !important;
}

body.light-mode .menu-icon,
body.light-mode .menu-icon i,
body.light-mode .menu-icon .fa {
    color: #6b7280 !important;
}

/* Menu hover state - LIGHT */
body.light-mode .menu-item:hover,
body.light-mode .menu-link:hover {
    background-color: #f3f4f6 !important;
}

body.light-mode .menu-item:hover .menu-icon,
body.light-mode .menu-item:hover .menu-icon i,
body.light-mode .menu-link:hover .menu-icon {
    color: #374151 !important;
}

/* Active/selected menu items - LIGHT */
body.light-mode .menu-item.here,
body.light-mode .menu-item.show,
body.light-mode .menu-item.active {
    background-color: #e5e7eb !important;
}

body.light-mode .menu-item.here .menu-link,
body.light-mode .menu-item.show .menu-link,
body.light-mode .menu-item.active .menu-link {
    background-color: transparent !important;
    color: #111827 !important;
}

body.light-mode .menu-item.here .menu-icon,
body.light-mode .menu-item.show .menu-icon,
body.light-mode .menu-item.active .menu-icon,
body.light-mode .menu-item.here .menu-icon i,
body.light-mode .menu-item.show .menu-icon i,
body.light-mode .menu-item.active .menu-icon i {
    color: #111827 !important;
}

/* Header and toolbar - LIGHT */
body.light-mode .app-header,
body.light-mode #kt_app_header,
body.light-mode .header,
body.light-mode #kt_header,
body.light-mode .toolbar,
body.light-mode #kt_app_toolbar {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Header menu - LIGHT */
body.light-mode .header-menu,
body.light-mode .header .menu,
body.light-mode #kt_header .menu,
body.light-mode #kt_header_nav,
body.light-mode #kt_header_nav .menu {
    background-color: #ffffff !important;
}

body.light-mode .header .menu-item,
body.light-mode #kt_header .menu-item,
body.light-mode .header-menu .menu-item {
    background-color: #ffffff !important;
}

body.light-mode .header .menu-link,
body.light-mode #kt_header .menu-link,
body.light-mode .header-menu .menu-link {
    background-color: transparent !important;
    color: #6b7280 !important;
}

body.light-mode .header .menu-item:hover,
body.light-mode #kt_header .menu-item:hover,
body.light-mode .header .menu-link:hover,
body.light-mode #kt_header .menu-link:hover {
    background-color: #f9fafb !important;
}

body.light-mode .header .menu-item.here,
body.light-mode #kt_header .menu-item.here,
body.light-mode .header .menu-item.active,
body.light-mode #kt_header .menu-item.active {
    background-color: #f3f4f6 !important;
}

body.light-mode .header .menu-sub,
body.light-mode #kt_header .menu-sub,
body.light-mode .header-menu .menu-sub {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

/* Modals - LIGHT */
body.light-mode .modal-content,
body.light-mode .modal-header,
body.light-mode .modal-body,
body.light-mode .modal-footer {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Forms and inputs - LIGHT */
body.light-mode input,
body.light-mode textarea,
body.light-mode select,
body.light-mode .form-control,
body.light-mode .form-select {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

body.light-mode input:disabled,
body.light-mode textarea:disabled,
body.light-mode select:disabled,
body.light-mode .form-control:disabled {
    background-color: #f3f4f6 !important;
}

/* Tables - LIGHT */
body.light-mode .table,
body.light-mode .table thead,
body.light-mode .table tbody,
body.light-mode .table-responsive {
    background-color: #ffffff !important;
}

body.light-mode .table th,
body.light-mode .table td {
    border-color: #e5e7eb !important;
    color: #111827 !important;
}

/* Text colors - LIGHT */
body.light-mode,
body.light-mode .text-dark {
    color: #111827 !important;
}

/* Dropdowns - LIGHT */
body.light-mode .dropdown-menu,
body.light-mode .popover {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Footer - LIGHT */
body.light-mode .app-footer,
body.light-mode #kt_app_footer {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}