/* ================================================================
   SkyConnect CRM — Dark Mode CSS
   Uses [data-bs-theme="dark"] selector to match existing Bootstrap 5
   theme system already in place in base.html.

   The app already uses data-bs-theme="dark" with CSS custom properties.
   This file adds extended dark-mode styling for components that need
   explicit overrides beyond the base CSS variables.
   ================================================================ */

/* ── Smooth transitions for theme switching ── */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}
body,
.sky-card,
.sky-section,
.side-nav,
.modal-content,
.dropdown-menu,
.kanban-column,
.kanban-card,
.stat-card,
.section-card,
.sky-toast,
.cmd-palette,
.table,
.form-control,
.form-select,
input, select, textarea {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ================================================================
   LIGHT MODE OVERRIDES
   Ensure good readability and contrast in light mode
   ================================================================ */
:root:not([data-bs-theme="dark"]) {
    /* Light mode already well-defined in base.html via :root variables */
    /* These are supplementary overrides */
}

:root:not([data-bs-theme="dark"]) .side-nav {
    background: var(--ss-surface, #f8fafc);
    border-right-color: var(--ss-line, #e2e8f0);
}

:root:not([data-bs-theme="dark"]) .side-nav-item {
    color: var(--ss-action-text, #475569);
}

:root:not([data-bs-theme="dark"]) .side-nav-item:hover {
    background: var(--ss-action-soft, #e0f2fe);
    color: var(--ss-action-text, #0369a1);
}

:root:not([data-bs-theme="dark"]) .side-nav-item.active {
    background: var(--ss-action-soft, rgba(3, 105, 161, 0.08));
    color: var(--ss-action-text, #0369a1);
    border-left-color: var(--ss-action, #0369a1);
}

/* Light mode dropdowns */
:root:not([data-bs-theme="dark"]) .dropdown-menu {
    background: var(--ss-surface, #ffffff);
    border-color: var(--ss-line, #e2e8f0);
    box-shadow: var(--ss-shadow-sm, 0 4px 16px rgba(0,0,0,0.08));
}

:root:not([data-bs-theme="dark"]) .dropdown-item:hover {
    background: var(--ss-action-soft, #e0f2fe);
    color: var(--ss-action-text, #0369a1);
}

/* Light mode tables */
:root:not([data-bs-theme="dark"]) .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--ss-surface, #f8fafc);
    --bs-table-hover-bg: var(--ss-action-soft, #e0f2fe);
    color: var(--ss-action-text, #1e293b);
}

:root:not([data-bs-theme="dark"]) .table thead th {
    background: var(--ss-bg-1, #f1f5f9);
    color: var(--ss-action-text, #475569);
    border-bottom-color: var(--ss-line, #e2e8f0);
}

:root:not([data-bs-theme="dark"]) .table td {
    border-bottom-color: var(--ss-line, #f1f5f9);
}

/* Light mode form inputs */
/* SSC.000248 (Peter L.) — this rule is the reason every input and select on
   every Connect page had an invisible edge in light mode. It is light-scoped
   already, and at (0,2,0) it loads after and outspecifies the shell's own
   .form-control rule, so it TAKES BACK the boundary SSC.000189 fixed
   platform-wide. #cbd5e1 on #ffffff measures 1.48:1 against the 3:1 WCAG
   1.4.11 floor for the boundary of a control. --ds-control-border is the
   token that exists for this (rgba(0,0,0,.45) = 3.35:1); it is defined by the
   theme packs on the LIGHT side only, and this rule only ever runs in light,
   so the fallback is belt-and-braces rather than a mode switch. The fill and
   the text colour are left exactly as they were. */
:root:not([data-bs-theme="dark"]) .form-control,
:root:not([data-bs-theme="dark"]) .form-select {
    background: #ffffff;
    border-color: var(--ds-control-border, #cbd5e1);
    color: #1e293b;
}

:root:not([data-bs-theme="dark"]) .form-control:focus,
:root:not([data-bs-theme="dark"]) .form-select:focus {
    border-color: var(--ss-action, #0369a1);
    box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.12);
}

:root:not([data-bs-theme="dark"]) .form-control::placeholder {
    color: var(--ss-action-text, #94a3b8);
}

/* ================================================================
   DARK MODE EXTENDED OVERRIDES
   ================================================================ */

/* ── Navbar in dark mode ── */
[data-bs-theme="dark"] #sbn {
    background: var(--ss-bg-2, #0f172a);
    border-bottom-color: var(--ss-action-line, #1e293b);
}

/* ── Sidebar in dark mode ── */
[data-bs-theme="dark"] .side-nav {
    background: var(--ss-bg-2, #111827);
    border-right-color: var(--ss-line-2, #1f2937);
}

[data-bs-theme="dark"] .side-nav-item {
    color: var(--ss-ink-2, #9ca3af);
}

[data-bs-theme="dark"] .side-nav-item:hover {
    background: var(--ss-bg-3, #1f2937);
    color: var(--ss-ink, #e5e7eb);
}

[data-bs-theme="dark"] .side-nav-item.active {
    color: var(--ss-action-text, #0dcaf0);
    background: var(--ss-action-soft, rgba(13, 202, 240, 0.08));
    border-left-color: var(--ss-action, #0dcaf0);
}

/* ── Cards in dark mode ── */
[data-bs-theme="dark"] .sky-card,
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .section-card {
    background: var(--ss-bg-2, #1a1d27);
    border-color: var(--ss-line-2, #2a2e3a);
}

[data-bs-theme="dark"] .sky-card:hover,
[data-bs-theme="dark"] .stat-card:hover {
    border-color: var(--ss-action, #0dcaf0);
    box-shadow: 0 4px 12px rgba(13, 202, 240, 0.06);
}

/* ── Tables in dark mode ── */
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--ss-bg-3, #242836);
    --bs-table-striped-bg: var(--ss-bg-3, #1e2230);
    color: var(--ss-ink, #e5e7eb);
}

[data-bs-theme="dark"] .table thead th {
    background: var(--ss-bg-2, #141722);
    color: var(--ss-ink-2, #9ca3af);
    border-bottom-color: var(--ss-line-2, #2a2e3a);
    font-weight: 600;
}

[data-bs-theme="dark"] .table td {
    border-bottom-color: var(--ss-line, #1e2230);
}

[data-bs-theme="dark"] .table tbody tr:hover td {
    background: var(--ss-bg-3, #242836);
}

/* ── Modals in dark mode ── */
[data-bs-theme="dark"] .modal-content {
    background: var(--ss-bg-2, #1a1d27);
    border-color: var(--ss-line-2, #2a2e3a);
    color: var(--ss-ink, #e5e7eb);
}

[data-bs-theme="dark"] .modal-header {
    border-bottom-color: var(--ss-line-2, #2a2e3a);
}

[data-bs-theme="dark"] .modal-footer {
    border-top-color: var(--ss-line-2, #2a2e3a);
}

[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Form inputs in dark mode ── */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: var(--ss-bg-2, #0f1117);
    border-color: var(--ss-line-2, #2a2e3a);
    color: var(--ss-ink, #e5e7eb);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--ss-action, #0dcaf0);
    box-shadow: 0 0 0 3px rgba(13, 202, 240, 0.15);
    background: var(--ss-bg-2, #111827);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--ss-ink-3, #6b7280);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled {
    background: var(--ss-bg-2, #111827);
    opacity: 0.65;
}

/* ── Dropdowns in dark mode ── */
[data-bs-theme="dark"] .dropdown-menu {
    background: var(--ss-bg-2, #1a1d27);
    border-color: var(--ss-line-2, #2a2e3a);
    box-shadow: var(--ss-shadow-sm, 0 8px 24px rgba(0,0,0,0.4));
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--ss-ink, #d1d5db);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background: var(--ss-bg-3, #242836);
    color: var(--ss-ink, #e5e7eb);
}

[data-bs-theme="dark"] .dropdown-divider {
    border-top-color: var(--ss-line-2, #2a2e3a);
}

/* ── Kanban board in dark mode ── */
[data-bs-theme="dark"] .kanban-column {
    background: var(--ss-bg-2, #1a1d27);
    border-color: var(--ss-line-2, #2a2e3a);
}

[data-bs-theme="dark"] .kanban-header {
    border-bottom-color: var(--ss-line-2, #2a2e3a);
}

[data-bs-theme="dark"] .kanban-card {
    background: var(--ss-bg-2, #111827);
    border-color: var(--ss-line-2, #2a2e3a);
}

[data-bs-theme="dark"] .kanban-card:hover {
    border-color: var(--ss-action, #0dcaf0);
    box-shadow: 0 2px 8px rgba(13, 202, 240, 0.08);
}

[data-bs-theme="dark"] .kanban-card.dragging {
    box-shadow: var(--ss-shadow-sm, 0 8px 24px rgba(0,0,0,0.4));
}

/* ── Timeline items in dark mode ── */
[data-bs-theme="dark"] .timeline-item,
[data-bs-theme="dark"] .activity-item {
    background: var(--ss-bg-2, #1a1d27);
    border-color: var(--ss-line-2, #2a2e3a);
}

/* ── Badges in dark mode: ensure contrast ── */
[data-bs-theme="dark"] .badge.bg-light {
    background: var(--ss-bg-3, #2a2e3a);
    color: var(--ss-ink, #e5e7eb);
}

[data-bs-theme="dark"] .badge.bg-secondary {
    background: var(--ss-bg-3, #374151);
    color: var(--ss-ink, #e5e7eb);
}

/* Priority badges: maintain visibility in dark */
[data-bs-theme="dark"] .badge-priority-normal {
    background: var(--ss-action-soft, rgba(13, 202, 240, 0.2));
    color: var(--ss-action-text, #0dcaf0);
}

[data-bs-theme="dark"] .badge-priority-medium {
    background: var(--ss-warning-soft, rgba(245, 158, 11, 0.2));
    color: var(--ss-warning, #fbbf24);
}

/* ── Alerts in dark mode ── */
[data-bs-theme="dark"] .alert-info {
    background: var(--ss-action-soft, rgba(13, 202, 240, 0.1));
    border-color: var(--ss-action-line, rgba(13, 202, 240, 0.2));
    color: var(--ss-action-text, #67e8f9);
}

[data-bs-theme="dark"] .alert-success {
    background: var(--ss-success-soft, rgba(16, 185, 129, 0.1));
    border-color: var(--ss-line, rgba(16, 185, 129, 0.2));
    color: var(--ss-success, #6ee7b7);
}

[data-bs-theme="dark"] .alert-warning {
    background: var(--ss-warning-soft, rgba(245, 158, 11, 0.1));
    border-color: var(--ss-line, rgba(245, 158, 11, 0.2));
    color: var(--ss-warning, #fcd34d);
}

[data-bs-theme="dark"] .alert-danger {
    background: var(--ss-danger-soft, rgba(239, 68, 68, 0.1));
    border-color: var(--ss-line, rgba(239, 68, 68, 0.2));
    color: var(--ss-danger, #fca5a5);
}

/* ── Toasts in dark mode ── */
[data-bs-theme="dark"] .sky-toast {
    background: var(--ss-bg-2, #1a1d27);
    border-color: var(--ss-line-2, #2a2e3a);
    box-shadow: var(--ss-shadow-sm, 0 8px 24px rgba(0,0,0,0.4));
}

/* ── Charts / graph background adjustments ── */
[data-bs-theme="dark"] canvas {
    filter: none;
}

[data-bs-theme="dark"] .chart-container {
    background: transparent;
}

/* Chart tooltip styling */
[data-bs-theme="dark"] .chart-tooltip {
    background: var(--ss-bg-2, #1a1d27);
    border-color: var(--ss-line-2, #2a2e3a);
    color: var(--ss-ink, #e5e7eb);
}

/* ── Pagination in dark mode ── */
[data-bs-theme="dark"] .page-link {
    background: var(--ss-bg-2, #1a1d27);
    border-color: var(--ss-line-2, #2a2e3a);
    color: var(--ss-ink, #d1d5db);
}

[data-bs-theme="dark"] .page-link:hover {
    background: var(--ss-bg-3, #242836);
    border-color: var(--ss-action, #0dcaf0);
    color: var(--ss-action-text, #0dcaf0);
}

[data-bs-theme="dark"] .page-item.active .page-link {
    background: var(--ss-action, #0dcaf0);
    border-color: var(--ss-action, #0dcaf0);
    color: var(--ss-on-action, #000);
}

/* ── Accordion in dark mode ── */
[data-bs-theme="dark"] .accordion-item {
    background: var(--ss-bg-2, #1a1d27);
    border-color: var(--ss-line-2, #2a2e3a);
}

[data-bs-theme="dark"] .accordion-button {
    background: var(--ss-bg-2, #1a1d27);
    color: var(--ss-ink, #e5e7eb);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background: var(--ss-action-soft, rgba(13, 202, 240, 0.05));
    color: var(--ss-action-text, #0dcaf0);
}

[data-bs-theme="dark"] .accordion-button::after {
    filter: invert(1);
}

/* ── Nav tabs in dark mode ── */
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: var(--ss-line-2, #2a2e3a);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--ss-ink-2, #9ca3af);
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--ss-line-2, #374151) var(--ss-line-2, #374151) var(--ss-line-2, #2a2e3a);
    color: var(--ss-ink, #e5e7eb);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background: var(--ss-bg-2, #1a1d27);
    border-color: var(--ss-line-2, #2a2e3a) var(--ss-line-2, #2a2e3a) var(--ss-line, #1a1d27);
    color: var(--ss-action-text, #0dcaf0);
}

/* ── Pill nav in dark mode ── */
[data-bs-theme="dark"] .nav-pills .nav-link {
    color: var(--ss-ink-2, #9ca3af);
}

[data-bs-theme="dark"] .nav-pills .nav-link.active {
    background: var(--ss-action, #0dcaf0);
    color: var(--ss-on-action, #000);
}

/* ── Progress bars in dark mode ── */
[data-bs-theme="dark"] .progress {
    background: var(--ss-bg-3, #2a2e3a);
}

/* ── List groups in dark mode ── */
[data-bs-theme="dark"] .list-group-item {
    background: var(--ss-bg-2, #1a1d27);
    border-color: var(--ss-line-2, #2a2e3a);
    color: var(--ss-ink, #e5e7eb);
}

[data-bs-theme="dark"] .list-group-item:hover {
    background: var(--ss-bg-3, #242836);
}

/* ── Scrollbar styling in dark mode ── */
[data-bs-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--ss-bg-2, #0f1117);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--ss-bg-3, #2a2e3a);
    border-radius: 4px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--ss-bg-3, #374151);
}

/* ── Selection color in dark mode ── */
[data-bs-theme="dark"] ::selection {
    background: var(--ss-action-soft, rgba(13, 202, 240, 0.3));
    color: var(--ss-ink, #fff);
}

/* ── Command palette in dark mode ── */
[data-bs-theme="dark"] .cmd-palette {
    background: var(--ss-bg-2, #1a1d27);
    border-color: var(--ss-line-2, #2a2e3a);
    box-shadow: var(--ss-shadow-sm, 0 16px 48px rgba(0,0,0,0.5));
}

[data-bs-theme="dark"] .cmd-palette-input {
    color: var(--ss-ink, #e5e7eb);
}

[data-bs-theme="dark"] .cmd-palette-item:hover,
[data-bs-theme="dark"] .cmd-palette-item.active {
    background: var(--ss-bg-3, #242836);
}

/* ── Editable fields in dark mode ── */
[data-bs-theme="dark"] .editable-field:hover {
    background: var(--ss-action-soft, rgba(13, 202, 240, 0.05));
}

[data-bs-theme="dark"] .editable-input {
    background: var(--ss-bg-2, #0f1117);
    border-color: var(--ss-action, #0dcaf0);
    color: var(--ss-ink, #e5e7eb);
}

/* ── Rich text editor in dark mode ── */
[data-bs-theme="dark"] .rich-editor-wrap {
    border-color: var(--ss-line-2, #2a2e3a);
}

[data-bs-theme="dark"] .rich-editor-toolbar {
    background: var(--ss-bg-2, #111827);
    border-bottom-color: var(--ss-line-2, #2a2e3a);
}

[data-bs-theme="dark"] .rich-editor-toolbar button {
    color: var(--ss-ink-2, #9ca3af);
}

[data-bs-theme="dark"] .rich-editor-toolbar button:hover {
    background: var(--ss-bg-3, #242836);
    color: var(--ss-ink, #e5e7eb);
}

[data-bs-theme="dark"] .rich-editor-body {
    background: var(--ss-bg-2, #0f1117);
    color: var(--ss-ink, #e5e7eb);
}

/* ── Mobile bottom nav in dark mode ── */
[data-bs-theme="dark"] .mobile-bottom-nav {
    background: var(--ss-bg-2, #111827);
    border-top-color: var(--ss-line-2, #1f2937);
    box-shadow: var(--ss-shadow-sm, 0 -2px 12px rgba(0,0,0,0.3));
}

/* ── Mobile card items in dark mode ── */
[data-bs-theme="dark"] .mobile-card-item {
    background: var(--ss-bg-2, #1a1d27);
    border-color: var(--ss-line-2, #2a2e3a);
}

[data-bs-theme="dark"] .mobile-card-item:hover {
    border-color: var(--ss-action, #0dcaf0);
}

/* ── Hover card in dark mode ── */
[data-bs-theme="dark"] .hover-card {
    background: var(--ss-bg-2, #1a1d27);
    border-color: var(--ss-line-2, #2a2e3a);
    box-shadow: var(--ss-shadow-sm, 0 8px 24px rgba(0,0,0,0.4));
}

/* ── Bulk action bar in dark mode ── */
[data-bs-theme="dark"] .bulk-action-bar {
    background: var(--ss-bg-2, #111827);
    border-color: var(--ss-line-2, #2a2e3a);
}

/* ── Text color adjustments for WCAG AA compliance ── */
/* Minimum 4.5:1 contrast ratio for body text */
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary {
    color: var(--ss-ink-2, #9ca3af);
}

/* Links: ensure enough contrast */
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.side-nav-item):not(.cmd-palette-item):not(.dropdown-item) {
    color: var(--ss-action-text, #22d3ee);
}

[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.side-nav-item):not(.cmd-palette-item):not(.dropdown-item):hover {
    color: var(--ss-action-text, #67e8f9);
}

/* ── Light mode scrollbar ── */
:root:not([data-bs-theme="dark"]) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

:root:not([data-bs-theme="dark"]) ::-webkit-scrollbar-track {
    background: var(--ss-bg-1, #f1f5f9);
}

:root:not([data-bs-theme="dark"]) ::-webkit-scrollbar-thumb {
    background: var(--ss-bg-3, #cbd5e1);
    border-radius: 4px;
}

:root:not([data-bs-theme="dark"]) ::-webkit-scrollbar-thumb:hover {
    background: var(--ss-action, #94a3b8);
}

/* ── Light mode selection ── */
:root:not([data-bs-theme="dark"]) ::selection {
    background: var(--ss-action-soft, rgba(3, 105, 161, 0.2));
    color: var(--ss-action-text, #0c4a6e);
}