/*
    Dark Mode. Toggled the same way as Theme.css - see LayoutTheme.js -
    via this stylesheet's own disabled property, persisted separately.
    Works under both Tradie Light and Tradie Classic.

    Under Tradie Light, most of this file's work is done implicitly: the
    :root redefinitions below are consumed by Theme.css's var()-based
    rules, so Theme.css's shapes (rounded corners, shadows, type scale)
    stay exactly as-is and just resolve to dark colours.

    Under Tradie Classic, Theme.css is disabled, so nothing consumes those
    vars - the "Classic coverage" section further down duplicates the
    colour-only declarations (no radius/shadow/font changes, since those
    are Light's shape, not Classic's) directly onto Classic's original
    selectors, so they apply regardless of Theme.css's state. This
    includes the header/footer bar and the company-name banner, which
    Dark Mode darkens in both Classic and Light rather than leaving them
    at full light-mode brightness.
*/
:root {
    --page-bg: #15171A;
    --surface: #1E2024;
    --surface-2: #262930;
    --border: #34373D;
    --border-strong: #46494F;
    --text: #ECECEC;
    --text-muted: #A0A4AA;

    /* AddButton/CancelButton fills only - darker so the buttons sit
       within the dark palette rather than glowing at full light-mode
       brightness. --brand/--danger themselves are left alone, since
       they're also used for header icons and section-header bars that
       already read fine against the dark surfaces. */
    --btn-add-bg: #14488C;
    --btn-add-bg-hover: #0F3A70;
    --btn-cancel-bg: #8B3232;
    --btn-cancel-bg-hover: #732828;
}

/* .ui-collapsible-content gets a "ui-body-inherit" swatch class (not
   ui-body-a) when no theme is set explicitly on the collapsible widget,
   which is the case throughout this app - so it's listed directly here
   rather than relying on a swatch class that doesn't actually apply. */
.ui-body-a,
.ui-body-inherit,
.ui-collapsible-content,
.ui-overlay-a,
.ui-page-theme-a {
    background-color: var(--page-bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

.ui-btn-up-a,
.ui-btn-hover-a,
.ui-bar-a {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
    text-shadow: none !important;
}

/* Collapsible heading bars (e.g. Settings > Layout, Zoom Level, etc.) -
   targeted directly rather than only via swatch class, since this widget
   isn't given an explicit theme so its swatch class can vary. */
.ui-collapsible-heading-toggle {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
    text-shadow: none !important;
}

    .ui-collapsible-heading-toggle:hover,
    .ui-collapsible-heading-toggle:focus,
    .ui-collapsible-heading-toggle.ui-btn-active {
        background-color: var(--border) !important;
    }

/* ---- Classic coverage ----
   Same selectors Theme.css consolidates for Tradie Light, but colour
   only - Classic keeps its own square corners/typography/header. These
   rules are harmless duplication under Tradie Light (same var() values,
   just redundant with Theme.css's more complete rules there) and are the
   only coverage that exists under Tradie Classic. */

body,
.ui-page {
    background-color: var(--page-bg) !important;
}

.ui-content {
    color: var(--text);
}

.ui-header-fixed,
.ui-footer {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* Same darker fill as AddButton/CancelButton, applied to every other
   place Mobile.css hardcodes rgb(25,118,210)/#1976D2 as a solid
   background/border fill - banners, section headers, active-state
   indicators, and the AussieHoses upload button. Applies in both Classic
   and Light, since none of this is gated by Theme.css's state.

   Deliberately NOT included: #ThumbNailAddImageButton and
   .ui-controlgroup-controls, which use this blue as icon/text colour,
   not a fill - darkening text would reduce legibility against the dark
   surface rather than help it, the opposite of the goal here. */
#HomepageCompanyName,
.ui-dialog-titlebar,
.ViewOrderListDateItemHeading,
.PendingTimesheetDateText,
.ui-btn-a:after,
.AussieHosesUploadButton,
.ui-page-theme-a .ui-btn.ui-btn-active,
html .ui-bar-a .ui-btn.ui-btn-active,
html .ui-body-a .ui-btn.ui-btn-active,
html body .ui-group-theme-a .ui-btn.ui-btn-active,
html head + body .ui-btn.ui-btn-a.ui-btn-active,
.ui-page-theme-a .ui-checkbox-on:after,
html .ui-bar-a .ui-checkbox-on:after,
html .ui-body-a .ui-checkbox-on:after,
html body .ui-group-theme-a .ui-checkbox-on:after,
.ui-btn.ui-checkbox-on.ui-btn-a:after,
.ui-page-theme-a .ui-flipswitch-active,
html .ui-bar-a .ui-flipswitch-active,
html .ui-body-a .ui-flipswitch-active,
html body .ui-group-theme-a .ui-flipswitch-active,
html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active,
.ui-page-theme-a .ui-slider-track .ui-btn-active,
html .ui-bar-a .ui-slider-track .ui-btn-active,
html .ui-body-a .ui-slider-track .ui-btn-active,
html body .ui-group-theme-a .ui-slider-track .ui-btn-active,
html body div.ui-slider-track.ui-body-a .ui-btn-active {
    background-color: var(--btn-add-bg) !important;
    color: #fff !important;
}

.recentSearchResultDiv {
    border-top-color: var(--btn-add-bg) !important;
}

/* Compound selectors for the same reason Theme.css uses them: these
   buttons are routinely also marked up with .HomeScreenLink, and a bare
   single-class selector would lose the cascade based purely on which
   rule happens to come later in the file. */
.ui-btn.AddButton {
    background-color: var(--btn-add-bg) !important;
    border-color: var(--btn-add-bg) !important;
    color: #fff !important;
}

    .ui-btn.AddButton:hover {
        background-color: var(--btn-add-bg-hover) !important;
    }

.ui-btn.CancelButton,
.ui-btn.WhiteOnRed {
    background-color: var(--btn-cancel-bg) !important;
    border-color: var(--btn-cancel-bg) !important;
    color: #fff !important;
}

    .ui-btn.CancelButton:hover {
        background-color: var(--btn-cancel-bg-hover) !important;
    }

.ui-btn.AmmendButton,
.ui-btn.LoginButtonGray {
    background-color: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
    text-shadow: none !important;
}

    .ui-btn.LoginButtonGray:hover {
        background-color: var(--border) !important;
    }

.HomeScreenLink,
.ViewOrderListItem,
.CustomerListItemDetail,
.TimesheetLineItem,
.OldTimesheetLineItem,
.AllocatedJob,
.JobTransaction,
.ItemWithQuantityProductLine,
.TimeRecordingListItemBackground,
.LightGrayBackground {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

    /* Mobile.css gives .HomeScreenLink and .ItemWithQuantityProductLine
       their own light-grey :hover rule, which - being a pseudo-class -
       outranks the plain class selector above regardless of !important.
       Matched here so hover doesn't fall back to a near-white row with
       barely-visible text. */
    .HomeScreenLink:hover,
    .ItemWithQuantityProductLine:hover {
        background-color: var(--surface-2) !important;
    }

/* Global/job search result rows (li.searchResult.HomeScreenLink) wrap
   their text in a plain <a> with no class. jQuery UI's own stylesheet
   sets a literal #222 on any <a> inside .ui-widget-content, which wins
   over the color set on the parent <li> above - that's a separate rule
   matching the <a> directly, not an inherited value, so the parent's
   !important never reaches it. Only visible once the background goes
   dark; #222 read fine against the original white/light row. */
.ui-widget-content a,
.searchResult a {
    color: var(--text) !important;
}

/* jQuery UI widgets used directly via $(...).tabs() (e.g. the Allocated
   Job Info/Create/Close tabs) - .ui-widget-content is also the tab
   panel's own background/text, not just the search-result <li> case
   above, and .ui-state-default is the inactive tab itself. Both are
   plain jQuery UI classes with their own light-mode colours (#fff panel,
   #e6e6e6 inactive tab), untouched by anything else in this file. */
.ui-widget-content {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

.ui-state-default {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* Disabled tabs (e.g. Create/Close before the Health and Safety
   Questionnaire is done) get jQuery UI's .ui-state-disabled on top of
   .ui-state-default, which fades the element to 35% opacity - that lets
   whatever's behind it show through instead of giving a deliberately
   muted-but-legible look, which is what washed the text out to a near-
   invisible ghost here. Opacity reset to 1 and the muted look instead
   comes from an explicit, still-readable text colour. */
.ui-state-disabled {
    opacity: 1 !important;
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
}

/* The Allocated Job Info/Create/Close tabs are actually JQM's navbar
   widget (data-role="navbar") with jQuery UI's .tabs() also enhancing
   the same markup - so the swatch/state classes added at runtime aren't
   reliable (.ui-state-default above doesn't consistently match here).
   .JobTabSelector and .TabList are the one thing guaranteed present,
   straight from the static template, regardless of which widget's
   classes win - so they're targeted directly with an ID-qualified
   selector that outranks any single-class swatch rule. */
#AllocatedJobTabs .TabList,
#AllocatedJobTabs .JobTabSelector,
#AllocatedJobTabs .JobTabSelector a {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

    #AllocatedJobTabs .JobTabSelector a.ui-btn-active,
    #AllocatedJobTabs .JobTabSelector a.ui-state-active {
        background: var(--btn-add-bg) !important;
        color: #fff !important;
    }

    #AllocatedJobTabs .JobTabSelector a.ui-state-disabled,
    #AllocatedJobTabs .JobTabSelector a[aria-disabled="true"] {
        color: var(--text-muted) !important;
    }

.AllocatedJobViewSection {
    color: var(--text) !important;
}

.ViewOrderListItemHeading {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
}

.JobAttachmentThumbnailParent {
    background-color: var(--surface-2) !important;
}

/* The "Data Lists" storage modal (tap the page title to open it) is built
   entirely with inline jQuery .css() calls in TOTM.js, not CSS classes -
   so #StorageModal's own id and plain structural position are the only
   hooks available. Inline styles carry no !important, so an !important
   rule here still wins over them.

   Not covered: the per-row "Update" button, which sets its own inline
   blue/green/red depending on action state (idle/success/failure) -
   left alone for the same reason Colours.css's status palette is left
   alone elsewhere: it's conveying meaning, not just theme chrome. */
#StorageModal {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-bottom-color: var(--btn-add-bg) !important;
}

    #StorageModal > div:first-child {
        background: var(--btn-add-bg) !important;
    }

    #StorageModal > div:last-child > div {
        border-bottom-color: var(--border) !important;
    }

/* Questionnaire risk-level/hazard-type answer buttons (e.g. "Low Risk",
   "Animals"). Mobile.css sets no background/text colour at all here -
   it's a bare <button> relying on native browser button-face styling,
   which stays light regardless of mode. .SelectedAnswer must come after
   so it wins the cascade on a button that's both unselected-styled and
   selected (it has no !important of its own in Mobile.css, so without
   this it would lose to the rule above instead of overriding it). */
.QuestionnaireAnswerButton {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-bottom-color: var(--border-strong) !important;
}

.SelectedAnswer {
    background-color: var(--accent-2) !important;
    color: #fff !important;
}

.ui-input-text,
.ui-input-text input,
input[type="text"],
input[type="number"],
input[type="email"],
input:not([type]),
textarea,
.QuestionnaireTextAnswer,
.QuestionnaireMultiTextAnswer,
.QuestionnaireSingleTextAnswer,
#SchedulerNewMemoInput,
#SchedulerInternalMemoText,
.LunchBreakUnput {
    background-color: var(--surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}

    input[type="text"]::placeholder,
    input[type="number"]::placeholder,
    input[type="email"]::placeholder,
    input:not([type])::placeholder,
    textarea::placeholder {
        color: var(--text-muted) !important;
    }