/**
 * Capnis Monochrome Theme — light/dark overrides for Metronic shell
 * Tokens are set in dynamicColor.blade.php; this file applies them to UI components.
 */

/* ── Light theme (default) ── */
:root,
html[data-capnis-theme="light"] {
    --capnis-bg: #FFFFFF;
    --capnis-surface: #FFFFFF;
    --capnis-surface-elevated: #F5F5F5;
    --capnis-text: #000000;
    --capnis-text-muted: #888888;
    --capnis-border: #CCCCCC;
    --capnis-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --capnis-glow: none;

    --bs-body-bg: var(--capnis-bg);
    --bs-body-color: var(--capnis-text);
    --bs-gray-100: #F5F5F5;
    --bs-gray-200: #EEEEEE;
    --bs-gray-300: #DDDDDD;
    --bs-gray-400: #CCCCCC;
    --bs-gray-500: #AAAAAA;
    --bs-gray-600: #888888;
    --bs-gray-700: #666666;
    --bs-gray-800: #333333;
    --bs-gray-900: #000000;
    --bs-text-muted: var(--capnis-text-muted);
    --bs-border-color: var(--capnis-border);
    --bs-card-bg: var(--capnis-surface);
    --bs-card-border-color: var(--capnis-border);
    --bs-primary: var(--primary-color, #000000);
    --bs-secondary: var(--secondary-color, #888888);
}

/* ── Dark theme ── */
html[data-capnis-theme="dark"] {
    --capnis-bg: #000000;
    --capnis-surface: #1A1A1A;
    --capnis-surface-elevated: #262626;
    --capnis-text: #FFFFFF;
    --capnis-text-muted: #C0C0C0;
    --capnis-border: rgba(255, 255, 255, 0.12);
    --capnis-shadow: 0 0 12px rgba(255, 255, 255, 0.06);
    --capnis-glow: 0 0 8px rgba(255, 255, 255, 0.15);

    --bs-body-bg: var(--capnis-bg);
    --bs-body-color: var(--capnis-text);
    --bs-gray-100: #1A1A1A;
    --bs-gray-200: #262626;
    --bs-gray-300: #333333;
    --bs-gray-400: #555555;
    --bs-gray-500: #888888;
    --bs-gray-600: #AAAAAA;
    --bs-gray-700: #C0C0C0;
    --bs-gray-800: #E0E0E0;
    --bs-gray-900: #FFFFFF;
    --bs-text-muted: var(--capnis-text-muted);
    --bs-border-color: var(--capnis-border);
    --bs-card-bg: var(--capnis-surface);
    --bs-card-border-color: var(--capnis-border);
    --bs-primary: var(--primary-color, #FFFFFF);
    --bs-secondary: var(--secondary-color, #C0C0C0);
}

/* ── Page & content area ── */
body,
#kt_body {
    background-color: var(--capnis-bg) !important;
    color: var(--capnis-text);
}

.content,
#kt_content,
.wrapper {
    background-color: var(--capnis-bg);
}

/* ── Cards ── */
.card {
    background-color: var(--capnis-surface) !important;
    border-color: var(--capnis-border) !important;
    box-shadow: var(--capnis-shadow);
}

.card .card-header {
    border-bottom-color: var(--capnis-border);
}

/* ── Sidebar ── */
.aside.aside-dark,
#kt_aside.aside-dark {
    background-color: var(--sidebar-color, #000000) !important;
}

.aside.aside-dark .aside-logo,
#kt_aside.aside-dark .aside-logo {
    background-color: var(--sidebar-header, #000000) !important;
    border-bottom-color: var(--capnis-border);
}

/* ── Header / toolbar ── */
.header,
#kt_header {
    background-color: var(--capnis-surface) !important;
    border-bottom: 1px solid var(--capnis-border);
}

.toolbar,
#kt_toolbar {
    background-color: var(--capnis-surface-elevated) !important;
}

/* ── Typography ── */
.text-gray-800,
.text-dark {
    color: var(--capnis-text) !important;
}

.text-gray-600,
.text-gray-700,
.text-muted {
    color: var(--capnis-text-muted) !important;
}

.text-primary,
.text-active-primary,
a.text-hover-primary:hover {
    color: var(--primary-color, #000000) !important;
}

html[data-capnis-theme="dark"] .text-primary,
html[data-capnis-theme="dark"] .text-active-primary {
    text-shadow: var(--capnis-glow);
}

/* ── Headings glow in dark mode ── */
html[data-capnis-theme="dark"] h1,
html[data-capnis-theme="dark"] h2,
html[data-capnis-theme="dark"] h3,
html[data-capnis-theme="dark"] .fw-bolder,
html[data-capnis-theme="dark"] .card-title h2 {
    text-shadow: var(--capnis-glow);
}

/* ── Buttons ── */
.btn-primary {
    background-color: var(--primary-color, #000000) !important;
    border-color: var(--primary-color, #000000) !important;
    color: #FFFFFF !important;
}

html[data-capnis-theme="light"] .btn-primary {
    color: #FFFFFF !important;
}

html[data-capnis-theme="dark"] .btn-primary {
    box-shadow: var(--capnis-glow);
}

.btn-light,
.btn-light-primary {
    background-color: var(--capnis-surface-elevated) !important;
    color: var(--capnis-text) !important;
    border-color: var(--capnis-border) !important;
}

/* ── Forms ── */
.form-control,
.form-select {
    background-color: var(--capnis-surface) !important;
    border-color: var(--capnis-border) !important;
    color: var(--capnis-text) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color, #000000) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-color, #000000) 25%, transparent);
}

/* ── Tables ── */
.table {
    --bs-table-bg: var(--capnis-surface);
    --bs-table-color: var(--capnis-text);
    --bs-table-border-color: var(--capnis-border);
}

.table thead th {
    color: var(--capnis-text);
    border-bottom-color: var(--capnis-border);
}

/* ── Nav tabs ── */
.nav-line-tabs .nav-link.active,
.nav-line-tabs .nav-link.text-active-primary {
    color: var(--primary-color, #000000) !important;
    border-bottom-color: var(--primary-color, #000000) !important;
}

/* ── Active menu items ── */
.aside-dark .menu .menu-item.here > .menu-link,
.aside-dark .menu .menu-item .menu-link.active {
    background-color: color-mix(in srgb, var(--primary-color, #FFFFFF) 15%, transparent) !important;
}

html[data-capnis-theme="dark"] .aside-dark .menu .menu-item.here > .menu-link,
html[data-capnis-theme="dark"] .aside-dark .menu .menu-item .menu-link.active {
    box-shadow: var(--capnis-glow);
}

/* ── Footer ── */
#kt_footer {
    background-color: var(--capnis-surface) !important;
    border-top: 1px solid var(--capnis-border);
}

/* ── Modals & dropdowns ── */
.modal-content {
    background-color: var(--capnis-surface) !important;
    border-color: var(--capnis-border) !important;
    color: var(--capnis-text);
}

.dropdown-menu {
    background-color: var(--capnis-surface) !important;
    border-color: var(--capnis-border) !important;
}

.dropdown-item {
    color: var(--capnis-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--capnis-surface-elevated) !important;
    color: var(--capnis-text);
}

/* ── Symbol / badge backgrounds ── */
.bg-light,
.bg-light-primary {
    background-color: var(--capnis-surface-elevated) !important;
}

/* ── Scrollbar (webkit) ── */
html[data-capnis-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html[data-capnis-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--capnis-bg);
}

html[data-capnis-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--capnis-surface-elevated);
    border-radius: 4px;
}