/* CRM dark mode. Active when <html data-theme="dark">; toggled from the top navbar. */
html[data-theme="dark"] {
    --dm-bg: #12161f;
    --dm-surface: #1b2130;
    --dm-surface-2: #232b3d;
    --dm-border: #2f3a50;
    --dm-text: #e4e8f1;
    --dm-text-muted: #9aa5b8;
    --dm-link: #7db4ff;
    color-scheme: dark;
}

html[data-theme="dark"] body,
html[data-theme="dark"] body.bg-gray-100,
html[data-theme="dark"] .main-content { background-color: var(--dm-bg) !important; color: var(--dm-text); }

/* Surfaces */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .bg-white { background-color: var(--dm-surface) !important; color: var(--dm-text); border-color: var(--dm-border) !important; }

html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-gray-200,
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-pills,
html[data-theme="dark"] .input-group-text { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }

html[data-theme="dark"] .sidenav,
html[data-theme="dark"] #sidenav-main { background-color: var(--dm-surface) !important; }
html[data-theme="dark"] .navbar-main,
html[data-theme="dark"] #navbarBlur { background-color: transparent !important; }
html[data-theme="dark"] .navbar-main.blur,
html[data-theme="dark"] .navbar-main.navbar-blur { background-color: rgba(27, 33, 48, 0.85) !important; }

/* Text */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .h1, html[data-theme="dark"] .h2, html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4, html[data-theme="dark"] .h5, html[data-theme="dark"] .h6,
html[data-theme="dark"] label, html[data-theme="dark"] .form-label,
html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black, html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item.active, html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .dropdown-item, html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .page-link { color: var(--dm-text) !important; }

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before,
html[data-theme="dark"] small { color: var(--dm-text-muted) !important; }

html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) { color: var(--dm-link); }
html[data-theme="dark"] hr, html[data-theme="dark"] .horizontal.dark { background-color: var(--dm-border) !important; opacity: 1; }
html[data-theme="dark"] .border, html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end { border-color: var(--dm-border) !important; }

/* Sidebar icon tiles stay readable */
html[data-theme="dark"] .sidenav .icon.bg-white,
html[data-theme="dark"] .sidenav .icon-shape.bg-white { background-color: var(--dm-surface-2) !important; }
html[data-theme="dark"] .sidenav .nav-link.active { background-color: var(--dm-surface-2) !important; box-shadow: none; }

/* Tables */
html[data-theme="dark"] .table {
    --bs-table-color: var(--dm-text);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-striped-color: var(--dm-text);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-color: var(--dm-text);
    color: var(--dm-text);
    border-color: var(--dm-border);
}
html[data-theme="dark"] .table > :not(caption) > * > * { color: var(--dm-text); border-color: var(--dm-border); background-color: transparent; }
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > * > * { background-color: var(--dm-surface-2) !important; color: var(--dm-text-muted) !important; }

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .choices__inner,
html[data-theme="dark"] .choices__list--dropdown,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
html[data-theme="dark"] .form-control::placeholder { color: var(--dm-text-muted); }
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] { background-color: #1f2636 !important; color: var(--dm-text-muted) !important; }
html[data-theme="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa5b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
html[data-theme="dark"] .form-check-input:not(:checked) { background-color: var(--dm-surface-2); border-color: var(--dm-border); }

/* Misc components */
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background-color: var(--dm-surface-2); }
html[data-theme="dark"] .page-link { background-color: var(--dm-surface); border-color: var(--dm-border); }
html[data-theme="dark"] .page-item.active .page-link { color: #fff !important; }

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-white { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border); }
html[data-theme="dark"] .shadow, html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-lg, html[data-theme="dark"] .card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important; }
html[data-theme="dark"] .footer, html[data-theme="dark"] footer { color: var(--dm-text-muted); }

/* Theme toggle button */
.theme-toggle { background: none; border: 0; cursor: pointer; }
html[data-theme="dark"] .theme-toggle .fa-moon,
html:not([data-theme="dark"]) .theme-toggle .fa-sun { display: none; }

/* Fixes from the browser review (2026-10-08) */
/* Sidebar logo is a dark image; render it white */
html[data-theme="dark"] .sidenav .navbar-brand-img { filter: brightness(0) invert(1); }
/* Sidebar icon tiles use a light gradient; keep the active (coloured) tile as is */
html[data-theme="dark"] .sidenav .nav-link:not(.active) .icon-shape:not([class*="bg-gradient"]) { background-image: none !important; background-color: var(--dm-surface-2) !important; }
html[data-theme="dark"] .progress { background-color: var(--dm-surface-2) !important; }

/* Alerts: drop the bright gradient, use a soft tint with light text */
html[data-theme="dark"] .alert { background-image: none !important; color: var(--dm-text) !important; border: 1px solid var(--dm-border) !important; }
html[data-theme="dark"] .alert strong { color: #fff; }
html[data-theme="dark"] .alert-info { background-color: rgba(2, 198, 243, 0.14) !important; }
html[data-theme="dark"] .alert-success { background-color: rgba(130, 214, 22, 0.14) !important; }
html[data-theme="dark"] .alert-warning { background-color: rgba(251, 207, 51, 0.14) !important; }
html[data-theme="dark"] .alert-danger { background-color: rgba(234, 6, 6, 0.18) !important; }
html[data-theme="dark"] .alert-primary { background-color: rgba(203, 12, 159, 0.16) !important; }
html[data-theme="dark"] .alert-secondary,
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .alert-dark { background-color: var(--dm-surface-2) !important; }

/* File inputs */
html[data-theme="dark"] input[type="file"]::file-selector-button { background-color: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-border); }
html[data-theme="dark"] input[type="file"]:hover::file-selector-button { background-color: var(--dm-bg) !important; }

/* Pagination */
html[data-theme="dark"] .pagination {
    --bs-pagination-bg: var(--dm-surface);
    --bs-pagination-color: var(--dm-text);
    --bs-pagination-border-color: var(--dm-border);
    --bs-pagination-disabled-bg: var(--dm-surface);
    --bs-pagination-disabled-color: var(--dm-text-muted);
    --bs-pagination-hover-bg: var(--dm-surface-2);
}
html[data-theme="dark"] .page-item.disabled .page-link,
html[data-theme="dark"] span.page-link { background-color: var(--dm-surface) !important; color: var(--dm-text-muted) !important; border-color: var(--dm-border) !important; }

/* Floating labels: keep the placeholder hidden behind the label (as in light mode) */
html[data-theme="dark"] .form-floating > .form-control::placeholder,
html[data-theme="dark"] .form-floating > textarea::placeholder { color: transparent !important; }
html[data-theme="dark"] .form-floating > .form-control:focus::placeholder { color: var(--dm-text-muted) !important; }

/* Carrier form product rows */
html[data-theme="dark"] .product-row { background-color: var(--dm-surface-2) !important; }

/* Dropdown pointer arrow */
html[data-theme="dark"] .dropdown-menu::before,
html[data-theme="dark"] .dropdown-menu::after { color: var(--dm-surface) !important; border-bottom-color: var(--dm-surface) !important; }

/* Soft UI close icon is already white; don't invert it */
html[data-theme="dark"] .btn-close { filter: none !important; opacity: 0.75; }