/* ==========================================================================
   C+A Insight - Dark Mode
   Scoped entirely under html.dark-mode so it is inert until toggled.
   Uses !important throughout because the legacy stylesheets (style.css,
   style4.css, style-v1/v2.css, orignal-style.css, bootstrap.min.css, ...)
   set colors directly on elements with high specificity / their own
   !important rules, so a lower-specificity override would be ignored.
   ========================================================================== */

html.dark-mode {
	color-scheme: dark;
}

/* ---- base page ---- */
html.dark-mode body,
html.dark-mode .wrapper,
html.dark-mode #content,
html.dark-mode .slide_content {
	background: #16171b !important;
	color: #d8dadf !important;
}

html.dark-mode #top-header,
html.dark-mode .header_bg,
html.dark-mode .login_innerwrapper #top-header {
	background: #1c1d22 !important;
	border-color: #2a2b31 !important;
}

html.dark-mode a {
	color: #5aa9e6;
}

html.dark-mode a:hover,
html.dark-mode a:focus {
	color: #7fc0f5;
}

/* generic text-bearing elements: keep specificity low (no element-list
   collision with the site_colour accent rules in sidebar.php, which use
   !important on very specific selectors and still win) */
html.dark-mode p,
html.dark-mode span,
html.dark-mode div,
html.dark-mode label,
html.dark-mode li,
html.dark-mode td,
html.dark-mode th,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode strong,
html.dark-mode small {
	color: #d8dadf;
}

html.dark-mode hr,
html.dark-mode .border_bottom {
	border-color: #2a2b31 !important;
}

/* dashboard KPI values (dashboard.php and 8 other views) use
   ".text-black { color:#000 }" and ".h5.mb-0.text-black.green_text
   { color:#000 }" - both real rules with higher specificity (up to 4
   classes) than the generic text-color rule above, and neither has
   !important, so they were rendering pure black numbers on the dark
   card background. Match the same classes directly to win. */
html.dark-mode .text-black,
html.dark-mode .h5.mb-0.text-black,
html.dark-mode .h5.mb-0.text-black.green_text {
	color: #e9eaee !important;
}

/* card/section titles: style4.css sets ".header h2 { color:#006c98 }"
   (the brand teal) directly - not pure black, but low-luminance
   enough against the dark card background (#1e1f25) to read as
   near-black. sidebar.php's inline <style> block also assigns
   ".card-body h2, .header h2 { color:<site_colour>!important }", but
   site_colour is unset for every account right now so it falls back
   to a bright blue - if that's not what's rendering, force a legible
   color directly here rather than depend on which of the two wins. */
html.dark-mode .header h2,
html.dark-mode .card-body h2,
html.dark-mode .card .header h2,
html.dark-mode .front_dashboard h2,
html.dark-mode div.front_dashboard h2 {
	color: #e9eaee !important;
}

/* responsive.css sets ".card-body p { color:#000 !important }" inside
   a media query - that's the "Includes Returns (See Detail Reports)"
   style caption text under each KPI value. !important beats the
   generic <p> rule above regardless of specificity, so match it
   directly with equal importance and higher specificity. */
html.dark-mode .card-body p {
	color: #9a9ca6 !important;
}

/* ---- sidebar: darken the brand-teal (#006c98) background instead of
   leaving it bright in dark mode ---- */
html.dark-mode #sidebar {
	background: #0a2530 !important;
	box-shadow: 1px 0 0 #000;
}

html.dark-mode #sidebar .sidebar-header {
	background: #0a2530 !important;
	border-color: #0a2530 !important;
}

/* sidebar.php's own inline <style> block sets
   ".sub_menu_link { background:<site_colour> }" (no !important) directly
   on every DB-driven nav item's <a> tag (Inventory, Forms, Jobs,
   Reports, Customer Service, Logistics, ...). The hardcoded items
   (Dashboard, Admin, Channels, the C+A Global bar) don't have that
   class, so they just show the dark #sidebar background through -
   only the dynamic items were still painted in the bright site accent
   color. Make them transparent so every item matches. */
html.dark-mode .sub_menu_link {
	background: transparent !important;
}

html.dark-mode #sidebar ul li a:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
}

html.dark-mode #sidebar a.sub_menu_link:hover .material-icons,
html.dark-mode #sidebar a.sub_menu_link:hover .hide-text {
	color: #ffffff !important;
}

html.dark-mode #sidebar ul ul a {
	background: #133038 !important;
}

/* active/selected menu item: swap the bright-white highlight for a
   lighter tint of the dark sidebar so it still reads as "selected"
   without blinding white-on-dark */
html.dark-mode #sidebar .sidebar_main.main_menu_list .current_active a {
	background: #14424f !important;
	color: #ffffff !important;
}

html.dark-mode #sidebar .sidebar_main.main_menu_list .current_active a .material-icons,
html.dark-mode #sidebar .sidebar_main.main_menu_list .current_active a .hide-text,
html.dark-mode #sidebar .current_active .hide-text,
html.dark-mode #sidebar .sidebar_main.main_menu_list .current_active .sub_menu_link .hide-text,
html.dark-mode #sidebar .sidebar_main.main_menu_list .current_active .sub_menu_link:hover .hide-text {
	color: #ffffff !important;
}

html.dark-mode #sidebar .current_active g {
	fill: #ffffff !important;
}

/* ---- top navbar / user menu ---- */
html.dark-mode .navbar,
html.dark-mode .navbar-default,
html.dark-mode .navbar-collapse {
	background: transparent !important;
}

html.dark-mode .navbar-default .navbar-nav > li > a,
html.dark-mode .login_details p,
html.dark-mode .login_details strong {
	color: #d8dadf !important;
}

html.dark-mode .search input[type="text"] {
	background: #24252b !important;
	color: #d8dadf !important;
	border-color: #3a3b42 !important;
}

/* ---- cards / panels / wells ---- */
html.dark-mode .card,
html.dark-mode .card-body,
html.dark-mode .card-header,
html.dark-mode .card-footer,
html.dark-mode .panel,
html.dark-mode .panel-heading,
html.dark-mode .panel-body,
html.dark-mode .well,
html.dark-mode .box,
html.dark-mode .gc-data-container-text {
	background: #1e1f25 !important;
	color: #d8dadf !important;
	border-color: #2f3038 !important;
}

/* ---- tables (plain bootstrap + DataTables + GroceryCrud) ---- */
html.dark-mode table,
html.dark-mode .table,
html.dark-mode table.dataTable,
html.dark-mode .dataTables_wrapper,
html.dark-mode .gc-data-container-scroll {
	background: #1e1f25 !important;
	color: #d8dadf !important;
}

html.dark-mode table thead th,
html.dark-mode .table thead th,
html.dark-mode table.dataTable thead th,
html.dark-mode table.dataTable thead td {
	background: #26272e !important;
	color: #e9eaee !important;
	border-color: #33343c !important;
}

html.dark-mode table td,
html.dark-mode table th,
html.dark-mode .table td,
html.dark-mode .table th {
	border-color: #2c2d34 !important;
}

/* jquery.dataTables.min.css sets an unconditional
   "table.dataTable tbody tr { background-color:#ffffff }" - every row
   in any DataTables-enhanced table (including the "No data available
   in table" empty-state row) defaults to white regardless of
   stripe/display classes. The :hover variant has no !important, so it
   only masked this on hover. */
html.dark-mode table.dataTable tbody tr {
	background: transparent !important;
}

html.dark-mode .table-striped tbody tr:nth-of-type(odd),
html.dark-mode table.dataTable.stripe tbody tr.odd,
html.dark-mode table.dataTable.display tbody tr.odd {
	background: #202127 !important;
}

html.dark-mode table.dataTable tbody tr:hover,
html.dark-mode .table-hover tbody tr:hover {
	background: #2a2b33 !important;
}

/* jobs.php defines a bare, unscoped "tr:hover { background-color:#f5f5f5 }"
   and "#example tbody tr:hover { background-color:#ccc }" - low specificity
   so easy to beat, but neither is dark-mode-aware, leaving a jarring light
   gray hover on every table row (including the new time-search results
   table) even in dark mode. */
html.dark-mode tr:hover,
html.dark-mode #example tbody tr:hover {
	background-color: #2a2b33 !important;
}

html.dark-mode .dataTables_wrapper .dataTables_info,
html.dark-mode .dataTables_wrapper .dataTables_length,
html.dark-mode .dataTables_wrapper .dataTables_filter,
html.dark-mode .dataTables_wrapper .dataTables_paginate {
	color: #d8dadf !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
	background: #24252b !important;
	color: #d8dadf !important;
	border-color: #3a3b42 !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: #33343c !important;
	border-color: #4a4b54 !important;
}

/* ---- forms ---- */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .form-control {
	background: #24252b !important;
	color: #e4e6eb !important;
	border-color: #3a3b42 !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
	color: #8a8c96 !important;
}

html.dark-mode input:disabled,
html.dark-mode select:disabled,
html.dark-mode textarea:disabled,
html.dark-mode .form-control:disabled {
	background: #1c1d22 !important;
	color: #7a7c86 !important;
}

/* ---- buttons (neutral variants only; keep colored/brand buttons as-is) ----
   .btn-outline-dark's default border/text (near-black) is unreadable once the
   page background itself is dark (e.g. "Check USPS Suggestion" on Address
   Verification) - treat it as a neutral variant same as outline-secondary. */
html.dark-mode .btn-default,
html.dark-mode .btn-light,
html.dark-mode .btn-secondary,
html.dark-mode .btn-outline-secondary,
html.dark-mode .btn-outline-dark {
	background: #2a2b33 !important;
	color: #e4e6eb !important;
	border-color: #3a3b42 !important;
}
html.dark-mode .btn-outline-dark:hover {
	background: #3a3b42 !important;
}

/* .btn-outline-primary ("Apply Suggested Address" etc.) keeps its brand-blue
   identity rather than going neutral, just recolored to the same accent blue
   used for links so it stays legible against the dark background. */
html.dark-mode .btn-outline-primary {
	color: #5aa9e6 !important;
	border-color: #5aa9e6 !important;
	background: transparent !important;
}
html.dark-mode .btn-outline-primary:hover {
	background: #5aa9e6 !important;
	color: #16171b !important;
}

/* .btn-outline-danger ("Cancel Order") keeps its danger-red border but gets
   white text so it stays legible against the dark background. */
html.dark-mode .btn-outline-danger {
	color: #ffffff !important;
	border-color: #dc3545 !important;
	background: transparent !important;
}
html.dark-mode .btn-outline-danger:hover {
	background: #dc3545 !important;
	color: #ffffff !important;
}

/* ---- dropdowns / modals / popovers ---- */
html.dark-mode .dropdown-menu,
html.dark-mode .modal-content,
html.dark-mode .popover,
html.dark-mode .tooltip-inner {
	background: #1e1f25 !important;
	color: #d8dadf !important;
	border-color: #33343c !important;
}

html.dark-mode .dropdown-item {
	color: #d8dadf !important;
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
	background: #2a2b33 !important;
	color: #ffffff !important;
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
	border-color: #33343c !important;
}

/* ---- Forms/Admin/Tickets menu listing pages (forms_menu.php,
   payroll_menu.php, ticket_menu.php, etc.) - each item renders as
   .list-group-menu > a > .menu_bnt > blockquote > h1 + span + p, and
   style.css sets ".menu_bnt { background:#fff; }" directly. This is
   the "Import Tracking Lookup" card - a menu item, not the detail
   page. ---- */
html.dark-mode .menu_bnt {
	background: #1e1f25 !important;
	color: #d8dadf !important;
}

html.dark-mode .menu_bnt:hover {
	background: #26272e !important;
}

html.dark-mode .active_bnt .menu_bnt {
	background: #26272e !important;
	border-color: #3a3b42 !important;
}

html.dark-mode blockquote {
	color: #b9bbc4 !important;
}

html.dark-mode blockquote p {
	color: #9a9ca6 !important;
}

/* ---- alerts / badges / breadcrumbs / pagination ---- */
html.dark-mode .breadcrumb {
	background: #1c1d22 !important;
	color: #d8dadf !important;
}

/* style.css sets ".breadcrumb a, .breadcrumb li { color:#838481 }" and
   ".breadcrumb .active a { color:#000 }" directly on the <a>/<li>
   elements themselves - those are real matching rules, not inherited
   text, so !important on the parent .breadcrumb above never overrode
   them. Target the same elements directly here instead. */
html.dark-mode .breadcrumb a,
html.dark-mode .breadcrumb li {
	color: #b9bbc4 !important;
}

html.dark-mode .breadcrumb a:hover {
	color: #ffffff !important;
}

html.dark-mode .breadcrumb-item.active,
html.dark-mode .breadcrumb > li.active,
html.dark-mode .breadcrumb .active a,
html.dark-mode .breadcrumb .active span {
	color: #9a9ca6 !important;
}

html.dark-mode .pagination .page-link {
	background: #24252b !important;
	color: #d8dadf !important;
	border-color: #3a3b42 !important;
}

html.dark-mode .badge-light {
	background: #2a2b33 !important;
	color: #d8dadf !important;
}

/* ---- nav tabs ---- */
html.dark-mode .nav-tabs {
	border-color: #2f3038 !important;
}

html.dark-mode .nav-tabs .nav-link {
	color: #b9bbc4 !important;
}

html.dark-mode .nav-tabs .nav-link.active {
	background: #1e1f25 !important;
	color: #ffffff !important;
	border-color: #33343c #33343c #1e1f25 !important;
}

/* ---- scrollbars (webkit) ---- */
html.dark-mode ::-webkit-scrollbar-track {
	background: #1c1d22;
}

html.dark-mode ::-webkit-scrollbar-thumb {
	background: #3a3b42;
}

/* ---- the dark-mode toggle bar itself (sidebar .caglobal item) ---- */
html.dark-mode #dark-mode-toggle {
	background: #24252b !important;
}

/* ---- top-header logo: swap the opaque-white default logo for the
   transparent-background AVIF version in dark mode (menu.php renders
   both, wrapped separately; only one is shown at a time) ---- */
html.dark-mode .logo img.logo-light {
	display: none;
}

/* style.css hardcodes ".site-header { height: 78px; padding-top: 10px }"
   - the same fixed header height as light mode. Keep that unchanged
   (matching light mode exactly, no header growth) and crop the square
   AVIF icon into a 240x60 window that fits within it, the same way
   the wordmark does. */
.logo-dark-crop {
	display: none;
	width: 240px;
	height: 60px;
	overflow: hidden;
	position: relative;
	vertical-align: middle;
}

html.dark-mode .logo-dark-crop {
	display: inline-block;
}

.logo-dark-crop img.logo-dark {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ---- jobs.php (SQL Server Jobs / Airflow Jobs): the collapsible-job
   detail panel used by both tabs hardcodes a light gray background;
   the bootstrap4-toggle pause/resume switch (its first real usage
   anywhere in this app) defaults to a light wrapper/handle too. ---- */
html.dark-mode .content {
	background-color: #1e1f25 !important;
	color: #d8dadf !important;
}

html.dark-mode .toggle.btn,
html.dark-mode .toggle-handle.btn {
	background-color: #24252b !important;
	border-color: #3a3b42 !important;
}

/* ---- footer watermark logo (footer.php): same light/dark swap as the
   top-header logo, using the same AVIF asset ---- */
.footer-logo img.logo-dark {
	display: none;
}

html.dark-mode .footer-logo img.logo-light {
	display: none;
}

html.dark-mode .footer-logo img.logo-dark {
	display: inline-block;
	width: 60px;
	height: 60px;
	object-fit: contain;
}

/* ---- login page logo (login.php): same light/dark swap, using the
   generic transparent icon.png since there's no logged-in account yet
   to look up a per-account small_logo from ---- */
.new_logo img.logo-dark {
	display: none;
}

html.dark-mode .new_logo img.logo-light {
	display: none;
}

html.dark-mode .new_logo img.logo-dark {
	display: inline-block;
	width: 240px;
	height: 240px;
	object-fit: contain;
}

/* jobs.php's search bar (select + input) hardcodes
   "background-color:#fff !important" directly to beat a site-wide
   "select { width:100%; ... }" rule - that #id-scoped !important also
   beats the generic dark-mode input/select rule below on specificity,
   so it stayed white even in dark mode. Override with equal
   importance but higher specificity (adds the .dark-mode class). */
html.dark-mode #jobs-search-bar select,
html.dark-mode #jobs-search-bar input[type="text"],
html.dark-mode #jobs-search-bar input[type="datetime-local"],
html.dark-mode #jobs-search-bar input[type="number"] {
	background-color: #24252b !important;
	color: #e4e6eb !important;
	border-color: #3a3b42 !important;
}

/* datetime-local's native calendar-picker icon: the root cause of it staying
   dark was jobs.php forcing appearance:menulist on this input (fixed there),
   which broke the widget's native rendering entirely. Once that was fixed,
   html.dark-mode's existing global color-scheme:dark (see top of file)
   already renders the icon in white with no extra rule needed here - a
   background-color plate behind it (tried above) just painted over that
   already-correct white icon with a light box, hiding it again. No override
   needed at all now that the appearance bug is gone. */

/* #job-search-warnings text and the results table both need to stay legible;
   the table itself already inherits the generic html.dark-mode .table rules. */
html.dark-mode #job-search-warnings {
	color: #e2707a !important;
}

/* Group Entitlements page (Admin/group_entitlements): the "easy responsive tabs"
   jQuery plugin (css/easy-responsive-tabs.css) hardcodes its tab-content panel to
   a white background with black text - the page chrome (sidebar/header/breadcrumb)
   already goes dark correctly, but this specific plugin's own panel was never
   covered, leaving a bright white box in the middle of an otherwise dark page. */
html.dark-mode .resp-tabs-container,
html.dark-mode .resp-vtabs .resp-tabs-container {
	background-color: #16171b !important;
	color: #d8dadf !important;
}

/* ---- logout success card (login.php's .error_div, shown after
   Login/logout): style.css hardcodes ".error_div { background:#fff }"
   and ".error_div p { color:#575757 }" with no !important - neither
   is covered by the generic .card rules since this uses its own
   class name. ---- */
html.dark-mode .error_div {
	background: #1e1f25 !important;
	border-color: #2f3038 !important;
}

html.dark-mode .error_div p {
	color: #b9bbc4 !important;
}

/* ---- common hardcoded light inline backgrounds sprinkled across the
   80+ legacy view files (style="background-color: #f2f2f2 ..."); can't
   target these by class since they're inline, so match by the literal
   color value instead. External !important beats an inline style that
   has none. ---- */
html.dark-mode [style*="f2f2f2" i],
html.dark-mode [style*="fff3f3" i],
html.dark-mode [style*="f5f0fa" i] {
	background-color: #1e1f25 !important;
}

/* ---- login page (pre-auth, hand-rolled head, no shared card/table
   classes to piggyback on) ---- */
html.dark-mode .login_innerwrapper,
html.dark-mode .login_innerwrapper #top-header {
	background: #1c1d22 !important;
}

html.dark-mode .page_title,
html.dark-mode .update .page_title {
	color: #e9eaee !important;
	border-color: #2a2b31 !important;
}

html.dark-mode .login_form input[type="text"],
html.dark-mode .login_form input[type="password"] {
	background: #24252b !important;
	color: #e4e6eb !important;
	border-color: #3a3b42 !important;
}

/* ---- bespoke "quick tool" pages (bc_po_line_set_qty/zero_qty/delete/
   edit_routing, generate_noncentrade, view_submission, and the
   detail_search/call_detail_search/group_entitlements trio) - each has
   its OWN embedded <style> block loaded right after header.php, so it
   comes AFTER dark-mode.css in the cascade. Same class of bug: a
   hardcoded white card + dark text with no !important, copy-pasted
   across several one-off admin tool pages built outside the shared
   template. !important is required here since these rules load later
   and would otherwise win on a specificity tie. ---- */
html.dark-mode .po-edit-card,
html.dark-mode .po-delete-card,
html.dark-mode .nc-card,
html.dark-mode .submission-card,
html.dark-mode .broadcast-email-card {
	background: #1e1f25 !important;
	border-color: #2f3038 !important;
}

html.dark-mode .po-edit-card h3,
html.dark-mode .po-delete-card h3,
html.dark-mode .nc-card h3 {
	color: #e9eaee !important;
}

html.dark-mode .form-group label {
	color: #b9bbc4 !important;
}

html.dark-mode .form-group small {
	color: #9a9ca6 !important;
}

html.dark-mode .save-bar {
	background: #1c1d22 !important;
	border-color: #2a2b31 !important;
}

html.dark-mode .lines-table {
	background: transparent !important;
}

html.dark-mode .lines-table thead th {
	background: #26272e !important;
	color: #e9eaee !important;
	border-color: #33343c !important;
}

html.dark-mode .lines-table tbody td {
	color: #d8dadf !important;
	border-color: #2c2d34 !important;
}

html.dark-mode .lines-table tbody tr:hover {
	background: #24252b !important;
}

html.dark-mode .col-md-12 .test {
	background: #24252b !important;
	color: #d8dadf !important;
	border-color: #3a3b42 !important;
}

html.dark-mode .col-md-12 .test p {
	color: #b9bbc4 !important;
}

/* ---- bc_po_line_edit_routing.php (WMi Line Drop, under Logistics) - same
   card-page pattern as .po-edit-card above, but its own <style> block uses
   different table/section class names (.detail-table, .range-table,
   .edit-section) that were never covered when the .lines-table family was
   fixed, so this page alone kept showing light-mode table backgrounds. ---- */
html.dark-mode .detail-table th,
html.dark-mode .range-table thead th {
	background: #26272e !important;
	color: #e9eaee !important;
	border-color: #33343c !important;
}

html.dark-mode .detail-table td,
html.dark-mode .range-table tbody td {
	color: #d8dadf !important;
	border-color: #2c2d34 !important;
}

html.dark-mode .range-table tbody tr:hover {
	background: #24252b !important;
}

html.dark-mode .edit-section {
	background: #1c1d22 !important;
	border-color: #2a2b31 !important;
}

/* ---- report-style pages with a hardcoded light banner div (Purchase Order
   Audit Report under Logistics/Payroll, WMi PO Lookup under Logistics) ---- */
html.dark-mode .container[style*="f2f2f2"] {
	background-color: #1c1d22 !important;
	border-color: #2a2b31 !important;
}