/*
 * Dark-mode overrides, shared across every live layout (comman_layout,
 * static_pages/layouts/default, layouts/app).
 *
 * Deliberately NOT hand-editing the large hardcoded-hex files this
 * targets (dashboard/css/style.css, sidebar.css, header.css, web/css/
 * global.css, resources/sass/_variables.scss's compiled output) - those
 * are minified/legacy and risky to edit line-by-line. Instead this file
 * only activates under [data-theme="dark"] (set by theme-toggle.js) and
 * overrides the structural elements every page shares: body, sidebar,
 * header, cards/boxes, tables, form inputs, buttons, links. It is not
 * exhaustive - per-module CSS files with their own hardcoded colors
 * (task-page.css, air-page.css, atru-page.css, etc.) are not covered here
 * and will keep their light-mode colors under dark theme until migrated
 * individually.
 */

[data-theme="dark"] {
  color-scheme: dark;
}

/* Draft-notice callout (privacy policy / terms pages) - base style lives
   here since the blade files used to hardcode it inline; kept theme-aware
   from the start instead of hardcoding a light-only background. */
.draft-notice {
  border: 1px solid #e0b400;
  background: #fff8e1;
  color: #6b5900;
  padding: 15px 20px;
  margin-bottom: 30px;
}
[data-theme="dark"] .draft-notice {
  background: rgba(224, 180, 0, 0.12);
  color: #f0d264;
  border-color: #a88600;
}

/* Dashboard Core shell.
   .content-div belongs here, not in the "cards" group below: it's
   dashboard/css/style.css's full-page content wrapper
   (width:100%;height:100%), used immediately inside #main on every one
   of the ~50 dashboard views - not a discrete card. It was grouped with
   .panel/.form-div (getting --ecc-surface-alt, a visibly lighter shade)
   which put a hard seam between the header/sidebar and almost the whole
   rest of the page on every screen - the main driver of the
   "everything's a different background color" complaint. */
[data-theme="dark"] body,
[data-theme="dark"] .wrapper,
[data-theme="dark"] .inner-wrapper,
[data-theme="dark"] .content-div {
  background: var(--ecc-surface);
  color: var(--ecc-text);
}
[data-theme="dark"] #sidebar {
  background: var(--ecc-surface);
  border-right-color: var(--ecc-border);
}
[data-theme="dark"] #sidebar li a {
  color: var(--ecc-text);
}
[data-theme="dark"] #sidebar li a.active,
[data-theme="dark"] #sidebar li a:hover {
  color: var(--ecc-primary);
}
[data-theme="dark"] header {
  background: var(--ecc-surface);
  border-bottom: 1px solid var(--ecc-border);
}
[data-theme="dark"] .menu-btn:before {
  color: var(--ecc-text);
}
[data-theme="dark"] .page-title h1,
[data-theme="dark"] .sub-title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
  color: var(--ecc-text);
}

/* Cards/boxes used across Profile, listings, and most module pages */
[data-theme="dark"] .profile-box,
[data-theme="dark"] .panel,
[data-theme="dark"] .panel-default,
[data-theme="dark"] .form-div {
  background: var(--ecc-surface-alt);
  border-color: var(--ecc-border);
  color: var(--ecc-text);
}
[data-theme="dark"] .panel-heading {
  background: var(--ecc-surface);
  border-color: var(--ecc-border);
}

/* Card-list "value" fields - dashboard/css/style.css hardcodes these to
   the light-mode brand green (#2E9E30) regardless of theme:
     #tab-wrapper .project-top .project-info .item .value { color:#2E9E30 }
   That single rule is shared by every #tab-wrapper card-list screen
   (Proposals, Projects, Services, Work Not Included, Expenses, Scopes,
   Tasks - 13 views total), so on a dark background nearly every data
   value on those screens reads as green. This is the actual bulk of the
   "everything is green" complaint, more so than any <a> color rule. */
[data-theme="dark"] #tab-wrapper .project-top .project-info .item .value {
  color: var(--ecc-text);
}

/* Page heading - "#main .top-data .sub-title h2" is hardcoded to #3B3B3B
   in both dashboard/css/global.css and style.css. Close enough to
   --ecc-text's light value to pass unnoticed in light mode, but under
   dark theme it stays near-black on a near-black background: every
   listing page's title (Proposals, Projects, Users, Services, ...) reads
   as barely-there. */
[data-theme="dark"] #main .top-data .sub-title h2 {
  color: var(--ecc-text);
}

/* Tables (DataTables and plain) */
[data-theme="dark"] table,
[data-theme="dark"] .table-wrapper table,
[data-theme="dark"] .table {
  background: var(--ecc-surface);
  color: var(--ecc-text);
}
[data-theme="dark"] table thead th,
[data-theme="dark"] .thead-light {
  background: var(--ecc-surface-alt);
  color: var(--ecc-text);
  border-color: var(--ecc-border);
}
/* bootstrap.min.css ships ".table .thead-light th{background-color:#e9ecef}"
   (specificity 0,2,1 - two classes plus the th element) which beats the
   rule directly above (0,2,0 with the [data-theme] attribute, or 0,1,3 for
   the "table thead th" element chain) regardless of source order, so every
   DataTable header on every listing page (Users, Proposals, Services,
   Scopes, ...) kept its light-mode #e9ecef header row under dark theme -
   read as a near-white bar. Match Bootstrap's own selector shape so this
   wins on specificity, not load order. */
[data-theme="dark"] .table .thead-light th {
  background: var(--ecc-surface-alt);
  color: var(--ecc-text);
  border-color: var(--ecc-border);
}
[data-theme="dark"] table td,
[data-theme="dark"] table th {
  border-color: var(--ecc-border);
}

/* DataTables pagination (dataTables.bootstrap4.min.js renders a Bootstrap
   .pagination list; jquery.dataTables.min.js draws the Prev/Next glyphs as
   ::before content on top of hardcoded colors in dashboard/css/global.css:
   #000 for the enabled arrow, #dedede for the disabled one. On a dark
   background #000 disappears and #dedede reads as a stray white blob -
   exactly the "white pagination arrows" symptom. Mirrored 1:1 against
   global.css's selectors, just with the [data-theme="dark"] prefix added,
   so specificity always exceeds the un-prefixed original regardless of
   which stylesheet loads first. */
[data-theme="dark"] .pagination li .page-link,
[data-theme="dark"] .pagination li a.page-link,
[data-theme="dark"] .pagination li.disabled span.page-link,
[data-theme="dark"] .pagination li.disabled[id*="_ellipsis"] a {
  color: var(--ecc-text-muted);
  background: transparent;
}
[data-theme="dark"] .pagination li.next a:before,
[data-theme="dark"] .pagination li.previous a:before,
[data-theme="dark"] .pagination li a.page-link[aria-label]:before {
  color: var(--ecc-text);
}
[data-theme="dark"] .pagination li.next.disabled a:before,
[data-theme="dark"] .pagination li.previous.disabled a:before,
[data-theme="dark"] .pagination li.disabled[aria-label] span:before,
[data-theme="dark"] .pagination li.disabled a:before {
  color: var(--ecc-border);
}
[data-theme="dark"] .pagination li.active .page-link {
  background-color: var(--ecc-primary);
  border-color: var(--ecc-primary);
  color: var(--ecc-text-on-inverse);
}

/* Form inputs */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control {
  background: var(--ecc-surface);
  color: var(--ecc-text);
  border-color: var(--ecc-border);
}
[data-theme="dark"] ::placeholder {
  color: var(--ecc-text-muted);
}

/* Links and outline buttons.
   Was: every <a> in dark mode got brand green regardless of whether it
   was a real action - sidebar items, table rows, plain metadata links,
   all of it, which is why the app read as "all green text" in dark mode.
   Now: links are neutral text by default (matching content around them)
   and only pick up the accent on hover/focus, i.e. on interaction - not
   at rest. Selectors elsewhere in this file that are more specific
   (#sidebar li a.active, header .user-menu ul.submenu li a, etc.) still
   win over this and are unaffected. */
[data-theme="dark"] a {
  color: var(--ecc-text);
}
[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
  color: var(--ecc-primary);
}
[data-theme="dark"] .btn-outline-primary {
  color: var(--ecc-primary);
  border-color: var(--ecc-primary);
  background: transparent;
}
[data-theme="dark"] .btn-outline-info {
  /* Bootstrap's own light-mode default for this class is teal-blue
     (#17a2b8), correctly distinct from primary/success/danger - it was
     wrongly aliased to var(--ecc-primary) (the same green as
     .btn-outline-primary) here, which is why edit/clone icons (both
     .btn-outline-info in the Proposals/Projects card actions) collapsed
     into the same green as everything else in dark mode. */
  color: var(--ecc-info);
  border-color: var(--ecc-info);
  background: transparent;
}
[data-theme="dark"] .btn-outline-danger {
  color: var(--ecc-danger);
  border-color: var(--ecc-danger);
}
[data-theme="dark"] .btn-outline-success {
  color: var(--ecc-success);
  border-color: var(--ecc-success);
}
[data-theme="dark"] .btn-outline-secondary {
  /* Bootstrap's default (#6c757d text+border) is the same washed-out gray
     in both themes - readable in light mode, but low-contrast against a
     dark surface (used by the Proposals grid's "Reset" button). */
  color: var(--ecc-text-muted);
  border-color: var(--ecc-border);
  background: transparent;
}

/* Public marketing site (web/css) */
[data-theme="dark"] #about,
[data-theme="dark"] #preloader {
  background: var(--ecc-surface);
  color: var(--ecc-text);
}

/* My Profile / Edit Profile - fixes for elements whose page-level CSS
   (dashboard/css/my-profile.css) hardcodes colors with higher specificity
   than the generic rules above, so they need matching/overriding selectors
   here rather than relying on inheritance. See theme QA pass. */
[data-theme="dark"] .profile-box strong {
  color: var(--ecc-text);
}
[data-theme="dark"] .profile-box-update .field label {
  background: var(--ecc-surface-alt);
  color: var(--ecc-text-muted);
}
[data-theme="dark"] .profile-box-update .field .three-child input::placeholder,
[data-theme="dark"] .profile-box-update .field .two-child input::placeholder,
[data-theme="dark"] .profile-box-update .field textarea::placeholder {
  color: var(--ecc-text-muted);
}

/* Select2 dropdowns (used across most forms, not just Profile) - the
   plugin's own CSS hardcodes a white box regardless of theme. */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple,
[data-theme="dark"] .select2-dropdown {
  background: var(--ecc-surface);
  border-color: var(--ecc-border);
  color: var(--ecc-text);
}
[data-theme="dark"] .select2-selection__rendered,
[data-theme="dark"] .select2-selection__placeholder,
[data-theme="dark"] .select2-results__option {
  color: var(--ecc-text);
}
[data-theme="dark"] .select2-results__option--highlighted {
  background: var(--ecc-surface-alt);
}

/* Header account dropdown (My Profile / Change Password / Logout) */
[data-theme="dark"] header .user-menu ul.submenu {
  background: var(--ecc-surface);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] header .user-menu ul.submenu li {
  border-bottom-color: var(--ecc-border);
}
[data-theme="dark"] header .user-menu ul.submenu li a {
  color: var(--ecc-text);
}

/* Sidebar submenu bullet markers */
[data-theme="dark"] #sidebar li ul li:after {
  background: var(--ecc-text-muted);
  border-color: var(--ecc-border);
}

/* ------------------------------------------------------------------ */
/* dashboard/css/steps.css - the add/edit Project wizard (add_project.
   blade.php + add_project_step1-6.blade.php) and view_project.blade.php,
   which both extend it. Called out by name in this file's header comment
   above as a per-module file not yet migrated - this is that migration.

   .form-div already gets a dark background from the "Cards/boxes" rule
   near the top of this file, which happened to mask most of steps.css's
   OWN hardcoded white backgrounds wherever a step's content sits directly
   inside a .form-div (nothing left to show the white through). It doesn't
   reach view_project.blade.php at all, though - that page doesn't use
   .form-div, so its cards/table rendered fully light-mode (confirmed via
   screenshot: white cards, near-invisible light-gray-on-white table text)
   - and even within the wizard steps, specific components with their own
   explicit background (step icons, status/yes-no pickers, floating field
   labels, the Save/Save & Exit buttons) still showed through as isolated
   light patches on an otherwise-dark page, reading as "patchwork" rather
   than a single deliberate light-mode page. */

/* Step indicator icons (top of every wizard step) */
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-list ul li .icon {
  color: var(--ecc-text-muted);
  background: var(--ecc-surface-alt);
  border-color: var(--ecc-surface-alt);
}
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-list ul li .icon svg {
  fill: var(--ecc-text-muted);
}
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-list ul li.active .icon {
  color: var(--ecc-success);
  background: color-mix(in srgb, var(--ecc-success) 18%, transparent);
  border-color: var(--ecc-success);
}
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-list ul li.active .icon svg {
  fill: var(--ecc-success);
}
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-list ul li.step-active .icon {
  color: var(--ecc-primary);
  background: color-mix(in srgb, var(--ecc-primary) 14%, transparent);
  border-color: var(--ecc-primary);
}
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-list ul li.step-active .icon svg {
  fill: var(--ecc-primary);
}

/* Step content panel - safety net for pages/sections not wrapped in
   .form-div (view_project.blade.php's own tab-detail, mainly). */
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-content .tab-detail {
  background: var(--ecc-surface-alt);
}
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-content .tab-detail h2 {
  color: var(--ecc-text);
  border-bottom-color: var(--ecc-border);
}

/* Form field wrapper + floating label - the label sits on top of the
   input's own top border with an opaque background behind just the label
   text so the border appears to break around it; that background was
   hardcoded white regardless of theme. */
[data-theme="dark"] .steps-wrapper .form-div form .field {
  background: var(--ecc-surface-alt);
}
[data-theme="dark"] .steps-wrapper .form-div form .field label {
  background: var(--ecc-surface-alt);
  color: var(--ecc-text-muted);
}
[data-theme="dark"] .steps-wrapper .form-div form .field .three-child input::placeholder,
[data-theme="dark"] .steps-wrapper .form-div form .field .two-child input::placeholder {
  color: var(--ecc-text-muted);
}

/* Status (Approved/Pending/Rejected) and Yes/No pickers - both use the
   same radio-item-as-button pattern. Unchecked state was a near-white box
   (#F8F8F8 icon, #000 label text) regardless of theme; checked state used
   flat light tints (e.g. Approved: #d5ecd6) that read as washed-out
   pastel smudges against a dark page instead of the deliberate color
   they clearly are in light mode - color-mix keeps the same intent (a
   tinted chip) at a strength that still reads against --ecc-surface. */
[data-theme="dark"] .steps-wrapper .form-div form .field .radio-item label {
  color: var(--ecc-text);
  border-color: var(--ecc-border);
  background: transparent;
}
[data-theme="dark"] .steps-wrapper .form-div form .field .radio-item label .icon {
  color: var(--ecc-text-muted);
  background: var(--ecc-surface);
}
[data-theme="dark"] .steps-wrapper .form-div form .field .radio-item input[value$=Approved]:checked+label .icon {
  color: var(--ecc-success);
  background: color-mix(in srgb, var(--ecc-success) 18%, transparent);
}
[data-theme="dark"] .steps-wrapper .form-div form .field .radio-item input[value=Pending]:checked+label .icon {
  color: var(--ecc-warning);
  background: color-mix(in srgb, var(--ecc-warning) 18%, transparent);
}
[data-theme="dark"] .steps-wrapper .form-div form .field .radio-item input[value=Rejected]:checked+label .icon {
  color: var(--ecc-text-on-inverse);
  background: var(--ecc-danger);
}

/* Save / Save & Exit buttons at the bottom of every step - solid white
   boxes with green/gray text+border (an outline-button look achieved via
   an explicit white fill rather than transparency, so it never adapted to
   a dark surface). Matches how every other outline button in the app
   (.btn-outline-info etc.) already behaves in dark mode - transparent +
   colored border/text.

   :not(.btn):not(.continue):not(.submit-btn) deliberately excludes Save &
   Continue's own class variants - steps.css keeps those solid green as
   the step's primary CTA (background:#2E9E30, no border-based "outline"
   look to begin with), and this rule would otherwise flatten that too:
   both selectors reach identical specificity once this file's own
   [data-theme="dark"] prefix is counted (attribute selectors count the
   same as classes), so - loading after steps.css - this rule would win
   the tie-break on source order alone despite lacking those classes. */
[data-theme="dark"] .steps-wrapper .form-div form .button-group button:not(.btn):not(.continue):not(.submit-btn) {
  background: transparent;
}
[data-theme="dark"] .steps-wrapper .form-div form .button-group button.exit {
  color: var(--ecc-text-muted);
  background: transparent;
  border-color: var(--ecc-border);
}

/* view_project.blade.php's info cards (Project Details / Service Details
   / Notes / Uploaded Documents) and its service/task table - see the long
   comment at the top of this section for why .form-div's dark background
   never reached this page. */
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-content .project-review-wrapper .project-details .project-item,
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-content .project-review-wrapper .notes,
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-content .project-review-wrapper .uploaded-document {
  background: var(--ecc-surface-alt);
  border-color: var(--ecc-border);
  color: var(--ecc-text-muted);
}
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-content .project-review-wrapper .project-details .project-item strong,
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-content .project-review-wrapper .notes strong,
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-content .project-review-wrapper .uploaded-document strong {
  color: var(--ecc-text);
}
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-content .project-review-wrapper .uploaded-document .upload-inner .doc-item {
  background: var(--ecc-surface);
  border-color: var(--ecc-border);
}
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-content .project-review-wrapper .table-responsive > .table > tbody > tr > td td,
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-content .project-review-wrapper .table-responsive > .table > tbody .project-task-detail > td > table > tbody > tr > td:first-child span {
  background: var(--ecc-surface);
  color: var(--ecc-text);
}
/* The service table's "header row" isn't a real <thead> - steps.css fakes
   one with :before pseudo-content (content:"No.", "Service Name", ...) on
   the first data row, hardcoded to the same #e9ecef/#495057 pairing this
   file already overrides for real <thead> cells elsewhere (see the
   .thead-light rule above) - kept consistent with that here. */
[data-theme="dark"] .steps-wrapper #tab-wrapper .tab-content .project-review-wrapper .table-responsive > .table > tbody > tr:first-child > td > table > tbody > tr:first-child td:before {
  background-color: var(--ecc-surface-alt);
  color: var(--ecc-text);
}

/* Textarea placeholders (the free-text "Notes" box, Description fields,
   etc.) - hardcoded to solid black regardless of theme, and specific
   enough (a plain "textarea::placeholder" landing after this file's own
   earlier, more generic "field input/textarea::placeholder: transparent"
   rule in steps.css itself) that it was never just invisible - it was
   readable black-on-white in light mode and exactly as readable
   black-on-near-black in dark mode. Flagged directly: "the placeholder
   text is black - not a good idea to keep any text black in dark theme." */
[data-theme="dark"] .steps-wrapper .form-div form .field textarea::placeholder,
[data-theme="dark"] .steps-wrapper .form-div form .field .yes-wrapper textarea::placeholder {
  color: var(--ecc-text-muted);
}
[data-theme="dark"] .steps-wrapper .form-div form .field textarea::-webkit-input-placeholder,
[data-theme="dark"] .steps-wrapper .form-div form .field .yes-wrapper textarea::-webkit-input-placeholder {
  color: var(--ecc-text-muted);
}
[data-theme="dark"] .steps-wrapper .form-div form .field textarea:-ms-input-placeholder,
[data-theme="dark"] .steps-wrapper .form-div form .field .yes-wrapper textarea:-ms-input-placeholder {
  color: var(--ecc-text-muted);
}

/* Select2 dropdowns inside the wizard (Company Name, Client Name, Project
   Manager, service-type pickers, ...) - both the selected value and the
   placeholder were hardcoded black via a selector chain specific/long
   enough (7 classes) to beat the generic .select2-selection__rendered/
   __placeholder rules already in this file for select2 everywhere else. */
[data-theme="dark"] .steps-wrapper .form-div form .field .select-box .select2-container .select2-container--default .select2-selection__rendered,
[data-theme="dark"] .steps-wrapper .form-div form .field .select-box .select2-container .select2-selection--multiple .select2-selection__rendered,
[data-theme="dark"] .steps-wrapper .form-div form .field .select-box .select2-container .select2-selection--single .select2-selection__rendered {
  color: var(--ecc-text);
}
[data-theme="dark"] .steps-wrapper .form-div form .field .select-box .select2-container .select2-container--default .select2-selection__placeholder,
[data-theme="dark"] .steps-wrapper .form-div form .field .select-box .select2-container .select2-selection--multiple .select2-selection__placeholder,
[data-theme="dark"] .steps-wrapper .form-div form .field .select-box .select2-container .select2-selection--single .select2-selection__placeholder {
  color: var(--ecc-text-muted);
}