/* Dark-mode overrides for Cobalt ERP. Scoped under html.dark-style; loaded on
   every page but inert unless that class is present (set server-side from the
   theme cookie, toggled by theme-toggle.js). Cobalt fills stay #2563EB;
   links/icons use a lighter cobalt (#60A5FA) for contrast on dark slate. */

html.dark-style {
    --cb-dark-bg: #0F172A;
    --cb-dark-surface: #1E293B;
    --cb-dark-border: rgba(255, 255, 255, 0.08);
    --cb-dark-text: #cbd5e1;
    --cb-dark-muted: #94a3b8;
    --cb-blue-light: #60A5FA;
}

html.dark-style body {
    background-color: var(--cb-dark-bg);
    color: var(--cb-dark-text);
}
html.dark-style h1, html.dark-style h2, html.dark-style h3,
html.dark-style h4, html.dark-style h5, html.dark-style h6 {
    color: #e7e9f5;
}
html.dark-style a { color: var(--cb-blue-light); }
html.dark-style a:hover { color: #93C5FD; }

/* Surfaces */
html.dark-style .card {
    background-color: var(--cb-dark-surface);
    border-color: var(--cb-dark-border);
    box-shadow: none;
}
/* Detached navbar: Sneat's .bg-navbar-theme bakes a white background, so
   override it explicitly (with !important) and tint its links/icons. */
html.dark-style .layout-navbar.navbar-detached,
html.dark-style .bg-navbar-theme {
    background-color: var(--cb-dark-surface) !important;
    color: var(--cb-dark-text);
    border-color: var(--cb-dark-border);
    box-shadow: none;
}
html.dark-style .bg-navbar-theme .nav-link,
html.dark-style .bg-navbar-theme .nav-link i,
html.dark-style .bg-navbar-theme .dropdown-toggle {
    color: var(--cb-dark-text);
}
html.dark-style .bg-menu-theme {
    background-color: #0B1120 !important;
}

/* Text & muted */
html.dark-style .text-muted,
html.dark-style .text-secondary { color: var(--cb-dark-muted) !important; }
html.dark-style .text-heading,
html.dark-style .text-dark { color: var(--cb-dark-text) !important; }

/* Tables: drive Bootstrap's table CSS vars so cell backgrounds (incl. striped
   and hover) go dark instead of the default white. */
html.dark-style .table {
    --bs-table-bg: var(--cb-dark-surface);
    --bs-table-color: var(--cb-dark-text);
    --bs-table-border-color: var(--cb-dark-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-striped-color: var(--cb-dark-text);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-table-hover-color: #fff;
    color: var(--cb-dark-text);
    border-color: var(--cb-dark-border);
}
html.dark-style .table > thead > tr > th {
    background-color: #334155;
    color: var(--cb-dark-muted);
    border-color: var(--cb-dark-border);
}
html.dark-style .table > tbody > tr > td {
    border-color: var(--cb-dark-border);
}

/* Forms */
html.dark-style .form-control,
html.dark-style .form-select {
    background-color: #334155;
    border-color: var(--cb-dark-border);
    color: var(--cb-dark-text);
}
html.dark-style .form-control::placeholder { color: var(--cb-dark-muted); }
html.dark-style .form-control:focus,
html.dark-style .form-select:focus {
    background-color: #334155;
    border-color: var(--cb-blue-light);
    color: var(--cb-dark-text);
}

/* Dropdowns / offcanvas / modals / toasts */
html.dark-style .dropdown-menu,
html.dark-style .offcanvas,
html.dark-style .modal-content,
html.dark-style .toast {
    background-color: var(--cb-dark-surface);
    border-color: var(--cb-dark-border);
    color: var(--cb-dark-text);
}
html.dark-style .dropdown-item { color: var(--cb-dark-text); }
html.dark-style .dropdown-item:hover,
html.dark-style .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
}
html.dark-style .dropdown-divider { border-color: var(--cb-dark-border); }
html.dark-style .offcanvas-header { border-bottom: 1px solid var(--cb-dark-border); }

/* Borders / dividers */
html.dark-style hr,
html.dark-style .border,
html.dark-style .border-top,
html.dark-style .border-bottom { border-color: var(--cb-dark-border) !important; }

/* Breadcrumbs / secondary text */
html.dark-style .breadcrumb-item,
html.dark-style .breadcrumb-item a { color: var(--cb-dark-muted); }

/* Keep cobalt fills readable; primary buttons stay solid cobalt. */
html.dark-style .btn-outline-secondary {
    color: var(--cb-dark-text);
    border-color: var(--cb-dark-border);
}
html.dark-style #theme-toggle { color: var(--cb-dark-text); }
html.dark-style #theme-toggle:hover { color: var(--cb-blue-light); }

/* Pagination */
html.dark-style .page-link {
    background-color: var(--cb-dark-surface);
    border-color: var(--cb-dark-border);
    color: var(--cb-dark-text);
}

/* Login card on dark */
html.dark-style .authentication-wrapper .card { background-color: var(--cb-dark-surface); }

/* Split-screen login on dark: the form panel goes dark; the cobalt brand panel
   stays as-is (looks good in both modes). */
html.dark-style .auth-form-panel { background-color: var(--cb-dark-bg); }
html.dark-style .auth-theme-toggle { color: var(--cb-dark-muted); }
html.dark-style .auth-theme-toggle:hover { color: var(--cb-blue-light); }