/*
    Professional - the third base theme, next to Tradie Classic and Tradie Light. See
    Specs/Mobile-Professional-Theme-Design.md.

    Toggled by LayoutTheme.js like the others: under Professional BOTH Theme.css and this file are
    enabled. Theme.css still does the heavy lifting - it already points every chrome colour in the
    app at a Tokens.css variable - so this file's main job is to redefine those tokens with the
    Professional palette, and then add the shapes Tradie Light doesn't have: the quiet header bar,
    rounded Settings-style Home rows, the welcome card, cards around the job tabs, and the
    "bottom line" inputs and buttons.

    Dark Mode: Dark.css is an independent toggle and redefines the same tokens on :root, but this
    file is linked AFTER it, so a plain :root block here would win and leave Dark Mode light.
    LayoutTheme.js therefore puts .totm-dark on <html> whenever Dark Mode is on, and the dark
    palette below is keyed on html.totm-dark - more specific than :root, so it wins over both.
    Every token the light block sets must also be set in the dark block, or the light value
    leaks into Dark Mode.

    Rules from CLAUDE.md's Theming section apply here too: compound selectors, input:not([type]),
    !important over inline styles, and never retheme meaning colours (status colours in
    Colours.css, the red Cancel button, the map pin, the ghost banner).
*/

/* ---- Palette ---- */

:root {
    /* Accent - a calm, deep blue. */
    --brand: #005FB8;
    --brand-hover: #196EBF;
    --brand-ink: #003E92;
    --accent-2: #005FB8;
    --accent-2-ink: #003E92;
    --text-on-brand: #FFFFFF;

    --btn-add-bg: #005FB8;
    --btn-add-bg-hover: #196EBF;
    /* Still red - it means "destructive", so it is not themed away; just a slightly deeper red. */
    --btn-cancel-bg: #C42B1C;
    --btn-cancel-bg-hover: #B3261A;

    /* Page, card layer, strokes. */
    --page-bg: #F3F3F3;
    --surface: #FBFBFB;
    --surface-2: #F5F5F5;
    --surface-3: #E9E9E9;
    --border: #E5E5E5;
    --border-strong: #D1D1D1;

    --text: #1A1A1A;
    --text-muted: #5C5C5C;

    /* Controls: inputs and standard (non-accent) buttons, with the darker bottom line that
       gives this theme's controls their depth. Only this file reads these. */
    --pro-field: #FFFFFF;
    --pro-field-focus: #FFFFFF;
    --pro-field-line: #868686;
    --pro-control: #FFFFFF;
    --pro-control-hover: #F9F9F9;
    --pro-control-line: #CCCCCC;
    --pro-subtle-hover: rgba(0, 0, 0, .06);
    --pro-flyout-shadow: 0 8px 16px rgba(0, 0, 0, .14);
    --pro-bar-shadow: 0 1px 4px rgba(0, 0, 0, .06);

    --radius: 4px;
    --radius-sm: 4px;
    --pro-radius-card: 8px;
    --pro-radius-row: 6px;

    --elev-1: none;

    /* Segoe UI Variable where the device has it; anything else falls back to the phone's own UI font. */
    --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    --pro-font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    --type-sm: 12px;
    --type-base: 14px;
    --type-lg: 20px;
    --type-xl: 28px;
}

html.totm-dark {
    --brand: #60CDFF;
    --brand-hover: #5AB9E6;
    --brand-ink: #99EBFF;
    --accent-2: #60CDFF;
    --accent-2-ink: #99EBFF;
    /* The dark-mode accent is light, so the text on it is black. */
    --text-on-brand: #000000;

    --btn-add-bg: #60CDFF;
    --btn-add-bg-hover: #5AB9E6;
    --btn-cancel-bg: #C42B1C;
    --btn-cancel-bg-hover: #B3261A;

    --page-bg: #202020;
    --surface: #2B2B2B;
    --surface-2: #323232;
    --surface-3: #3D3D3D;
    --border: #383838;
    --border-strong: #4A4A4A;

    --text: #FFFFFF;
    --text-muted: #C5C5C5;

    --pro-field: #2D2D2D;
    --pro-field-focus: #1F1F1F;
    --pro-field-line: #9A9A9A;
    --pro-control: #373737;
    --pro-control-hover: #3C3C3C;
    --pro-control-line: #303030;
    --pro-subtle-hover: rgba(255, 255, 255, .06);
    --pro-flyout-shadow: 0 8px 16px rgba(0, 0, 0, .36);
    --pro-bar-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

/* ---- Header and footer: a quiet bar on the card layer ----
   Not a coloured bar like Classic's: the card colour, a hairline edge, and a soft shadow under the
   header, so it reads as a bar above the page without competing with it. (The first cut
   blended the header into the page entirely, which read as too subtle.) */

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

.ui-header-fixed {
    border-width: 0 0 1px 0 !important;
    border-style: solid !important;
    border-color: var(--border) !important;
    box-shadow: var(--pro-bar-shadow) !important;
}

.ui-footer {
    border-width: 1px 0 0 0 !important;
    border-style: solid !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}

    .ui-footer h3.ui-title {
        color: var(--text-muted) !important;
        font-size: var(--type-sm) !important;
        font-weight: 400 !important;
    }

/* Left-aligned page title. The left margin clears the 44px back button; a header with no back
   button (Home, Login...) starts at the page's own 16px gutter instead - via :has(), so a browser
   without it simply keeps the wider margin rather than dropping anything. */
.ui-header-fixed h3.ui-title,
.ui-header-fixed h1.ui-title {
    font-family: var(--pro-font-display) !important;
    font-size: var(--type-lg) !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    text-align: left !important;
    /* 8px makes the bar 45px (28 + 16 + the 1px edge) - 80% of the first cut's 57px, which read as
       too tall once the header became a visible bar. */
    padding: 8px 0 !important;
    margin: 0 56px 0 58px !important;
    color: var(--text) !important;
}

.ui-header-fixed:not(:has(.BackNavigationButton)) h3.ui-title {
    margin-left: 16px !important;
}

#home .ui-header-fixed h3.ui-title {
    font-size: var(--type-xl) !important;
    line-height: 36px !important;
    /* 49px bar on Home (36 + 12 + 1), likewise 80% of the first cut. */
    padding: 6px 0 !important;
}

/* Back, settings and hamburger: ghost buttons, 44px wide and 40px tall so they sit inside the
   45px bar. Mobile.css widens the cog's and the back arrow's tap targets with 50px of padding; that
   would stretch the hover fill into a long bar, so the padding goes and the button itself is the
   target. */
.HeaderNavigationButton {
    width: 44px !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 !important;
    left: 6px;
    border-radius: 6px !important;
    font-size: 18px !important;
    color: var(--text) !important;
    background-color: transparent !important;
}

.SettingsNavigationButton {
    left: auto !important;
    right: 6px !important;
}

    .HeaderNavigationButton:hover,
    .HeaderNavigationButton:active {
        background-color: var(--pro-subtle-hover) !important;
    }

/* ---- Buttons ----
   44px tall: 20px line + 2 x 11px padding + 1px border top and bottom. GenericControlDimensions
   (Mobile.css) forces line-height 1.6em with !important, hence the compound selector here.
   Icon-only buttons and the slider/flipswitch handles keep jQuery Mobile's own geometry. */

.ui-btn:not(.ui-btn-icon-notext):not(.ui-slider-handle):not(.ui-flipswitch-on),
.ui-btn.GenericControlDimensions:not(.ui-btn-icon-notext) {
    font-size: var(--type-base) !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    border-width: 1px !important;
    border-radius: var(--radius) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Standard buttons - jQuery Mobile's plain grey .ui-btn. Deliberately NOT !important, so every
   class that colours a button on purpose (AddButton, CancelButton, Colours.css's status classes,
   OrangeButton) still wins. The selector only has to beat jQuery Mobile's own swatch rules, the
   most specific of which is 'html head + body .ui-btn.ui-btn-a' (0,2,3) - repeating the class
   gets it to (0,3,3) without !important. Not scoped to .ui-page: DialogHelper's popups sit
   outside it and their OK/Cancel buttons are .ui-btn-a/.ui-btn-c. */
html head + body .ui-btn.ui-btn.ui-btn {
    background-color: var(--pro-control);
    border-color: var(--border);
    border-bottom-color: var(--pro-control-line);
    color: var(--text);
}

    html head + body .ui-btn.ui-btn.ui-btn:hover {
        background-color: var(--pro-control-hover);
    }

/* Checkboxes and radios: an empty outlined box instead of jQuery Mobile's faint ticked disc,
   which all but disappears on the dark palette. The ticked state keeps jQuery Mobile's tick on the
   accent fill (the accent rule further down). */
.ui-checkbox-off::after {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--pro-field-line) !important;
    box-sizing: border-box;
}

.ui-checkbox-off::after,
.ui-checkbox-on::after {
    border-radius: var(--radius) !important;
}

.ui-radio-off::after {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--pro-field-line) !important;
    box-sizing: border-box;
}

.ui-slider-track {
    background-color: var(--border-strong) !important;
    border-color: transparent !important;
}

.ui-btn.AmmendButton,
.ui-btn.LoginButtonGray,
.ui-btn.AddButton.file-input-button,
.ui-btn.AddButton.file-upload-button {
    background-color: var(--pro-control) !important;
    border-color: var(--border) !important;
    border-bottom-color: var(--pro-control-line) !important;
    color: var(--text) !important;
    font-weight: 400 !important;
}

    .ui-btn.AmmendButton:hover,
    .ui-btn.LoginButtonGray:hover,
    .ui-btn.AddButton.file-input-button:hover,
    .ui-btn.AddButton.file-upload-button:hover {
        background-color: var(--pro-control-hover) !important;
    }

.ui-btn.AddButton {
    color: var(--text-on-brand) !important;
    font-weight: 600 !important;
    border-color: transparent !important;
}

/* A bare <button class="AddButton"> (the quick-add +1, ItemWithQuantity rows) isn't a .ui-btn, so
   Theme.css never reaches it and Mobile.css's hardcoded #1976D2 shows through. */
button.AddButton:not(.ui-btn) {
    background-color: var(--btn-add-bg) !important;
    border-color: var(--btn-add-bg) !important;
    color: var(--text-on-brand) !important;
    border-radius: var(--radius) !important;
}

.ui-btn.CancelButton,
.ui-btn.WhiteOnRed {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-color: transparent !important;
}

/* This theme centres a button's label - including the form actions that also carry
   .HomeScreenLink (Save/Cancel on the Work Log, AddConsumable.html...). The Home menu rows have
   .HomeScreenLink without AddButton, so they stay left-aligned. */
.ui-btn.AddButton,
.ui-btn.CancelButton,
.ui-btn.WhiteOnRed,
.ui-btn.AmmendButton,
.ui-btn.LoginButtonGray {
    text-align: center !important;
}

/* "Add Image(s)" + "Upload Image(s)" side by side, as two equal standard buttons. The real file
   <input> is absolutely positioned (Mobile.css .file-input-hidden), so it takes no grid cell. */
.file-upload-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

    .file-upload-controls > .ui-btn {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
    }

/* ---- Accent fills that Theme.css/Dark.css write white text on ----
   White on the dark-mode accent (#60CDFF) is unreadable, so all of these follow
   --text-on-brand instead: white in light, black in dark. */

.BlueListItemHeader,
.BlueBackground,
.SelectedAnswer,
.ViewOrderListDateItemHeading,
.PendingTimesheetDateText {
    background-color: var(--brand) !important;
    color: var(--text-on-brand) !important;
}

.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-radio-on:after,
html .ui-bar-a .ui-radio-on:after,
html .ui-body-a .ui-radio-on:after,
html body .ui-group-theme-a .ui-radio-on:after,
.ui-btn.ui-radio-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(--brand) !important;
    border-color: var(--brand) !important;
    color: var(--text-on-brand) !important;
}

/* ---- Inputs: white field, hairline stroke, darker bottom line; accent line on focus ----
   The focus line is the bottom border coloured plus a 1px inset shadow, so it reads as 2px
   without the field growing a pixel and nudging everything below it. */

.ui-input-text,
textarea,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input:not([type]),
.QuestionnaireTextAnswer,
.QuestionnaireMultiTextAnswer,
.QuestionnaireSingleTextAnswer,
#SchedulerNewMemoInput,
#SchedulerInternalMemoText,
.LunchBreakUnput {
    background-color: var(--pro-field) !important;
    border-color: var(--border) !important;
    border-bottom-color: var(--pro-field-line) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

/* jQuery Mobile draws the border on the wrapper div, not the <input> inside it, so the inner
   input stays borderless and transparent - otherwise it would paint a second box. */
.ui-input-text input,
.ui-input-search input {
    background-color: transparent !important;
    border-radius: 0 !important;
}

.ui-input-text.ui-focus,
textarea:focus,
.ui-input-text:not(.ui-input-has-clear) > input:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input:not([type]):focus {
    background-color: var(--pro-field-focus) !important;
    border-bottom-color: var(--brand) !important;
    box-shadow: inset 0 -1px 0 var(--brand) !important;
    outline: none;
}

/* The inner input of a focused jQuery Mobile wrapper - the wrapper above carries the line. */
.ui-input-text input:focus {
    box-shadow: none !important;
}

/* ---- Cards and list rows ---- */

.ViewOrderListItem,
.CustomerListItemDetail,
.TimesheetLineItem,
.OldTimesheetLineItem,
.AllocatedJob,
.JobTransaction,
.ItemWithQuantityProductLine,
.TimeRecordingListItemBackground,
.LightGrayBackground {
    border-radius: var(--pro-radius-row) !important;
}

/* Settings > section headers (collapsibles) as settings-style expanders. */
.ui-collapsible-heading-toggle {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
    font-weight: 400 !important;
    text-align: left;
}

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

    /* jQuery Mobile's +/- disc on the left becomes a muted chevron on the right, as on a
       settings-style expander. */
    .ui-collapsible-heading-toggle.ui-btn-icon-left {
        padding-left: 16px !important;
        padding-right: 44px !important;
    }

    .ui-collapsible-heading-toggle.ui-btn-icon-left::after {
        content: "\f107" !important;
        content: "\f107" / "" !important;
        font-family: FontAwesome !important;
        background: none !important;
        border-radius: 0 !important;
        left: auto !important;
        right: 14px !important;
        width: 16px !important;
        height: 22px !important;
        margin-top: -11px !important;
        line-height: 22px;
        text-align: center;
        font-size: 18px;
        font-weight: normal;
        color: var(--text-muted);
    }

    .ui-collapsible-heading-toggle.ui-icon-minus::after {
        content: "\f106" !important;
        content: "\f106" / "" !important;
    }

.ui-collapsible-content {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

.ui-collapsible-inset,
.ui-collapsible-inset .ui-collapsible-heading .ui-btn,
.ui-collapsible-inset .ui-collapsible-content {
    box-shadow: none !important;
}

.ui-content hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 12px 0;
}

/* ---- Page gutter ----
   Mobile.css gives .ui-content no horizontal padding app-wide, so controls sit flush against the
   phone's edges; this theme lays everything out on a 16px gutter instead. !important to also win
   over the per-screen 5px opt-ins (#AlterWorkLogItem). */

html .ui-page > .ui-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* ---- Home ---- */

/* The welcome card is the username + company labels drawn as one card, username first (flex
   order), with an accent avatar circle and the logo on a white plate laid over it. CSS can't
   compute initials, so the avatar carries a person glyph instead of the mockup's "DU". */
#home .ui-content {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 12px;
}

    #home .ui-content > * {
        flex-shrink: 0;
    }

/* No 'display' on these two labels: as flex items they are block boxes already, and an id-qualified
   display here would beat HomeDashboard.css's 'body.home-dashboard #HomepageUsername { display:
   none }' and draw both halves of the card under the Dashboard layout. */
#home #HomepageUsername {
    order: 1;
    margin: 0;
    padding: 16px 104px 0 78px;
    min-height: 22px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--pro-radius-card) var(--pro-radius-card) 0 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 600 !important;
    line-height: 22px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#home #HomepageCompanyName {
    order: 2;
    margin: 0 0 14px 0;
    padding: 0 104px 16px 78px;
    background-color: var(--surface) !important;
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--pro-radius-card) var(--pro-radius-card);
    color: var(--text-muted) !important;
    font-size: 13px;
    font-weight: 400 !important;
    line-height: 18px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#home #HomeDashboard {
    order: 3;
}

#home .ui-content > ul[data-role="listview"] {
    order: 4;
}

/* Avatar: on .ui-content rather than on a label, so the labels can clip long names without
   clipping the circle. Sits 12px inside the card, which starts at the content's 12px top padding (clear of the header bar). */
#home .ui-content::before {
    content: "\f007";
    content: "\f007" / "";
    font-family: FontAwesome !important;
    position: absolute;
    top: 24px;
    left: 32px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--brand);
    color: var(--text-on-brand);
    font-size: 22px;
    line-height: 48px;
    text-align: center;
    z-index: 1;
}

/* The logo sits outside .ui-content, just above it. Absolutely positioned with no 'top', it
   keeps its static position - the top of the page's content area, right under the fixed
   header - so this lines it up with the card's right side whatever the header's height. */
#home #HomePageLogo {
    position: absolute;
    right: 28px;
    margin-top: 26px;
    z-index: 1;
    background-color: #FFFFFF;
    border-radius: var(--radius);
    padding: 3px 5px;
    line-height: 0;
}

    #home #HomePageLogo #HomePageLogoImage {
        width: 72px !important;
        max-width: 72px !important;
        height: auto;
    }

/* Dark Mode draws the logo with white wording on a transparent background (Dark.css), so the
   white plate goes and the logo sits straight on the card. */
html.totm-dark #home #HomePageLogo {
    background-color: transparent;
}

/* Dashboard Home hides the username label (HomeDashboard.css - restated here at this file's
   specificity so nothing above can bring it back), so the company label is the whole card. */
body.home-dashboard #home #HomepageUsername {
    display: none;
}

/* HomeDashboard.css pads the dashboard 16px each side for Classic/Light's edge-to-edge content;
   here the page gutter already provides that, so it would indent the cards a second time. */
body.home-dashboard #home #HomeDashboard {
    padding-left: 0;
    padding-right: 0;
}

body.home-dashboard #home #HomepageCompanyName {
    border-top: 1px solid var(--border);
    border-radius: var(--pro-radius-card);
    padding-top: 0;
    padding-bottom: 0;
    line-height: 70px;
    font-size: 16px;
    font-weight: 600 !important;
    color: var(--text) !important;
}

/* Every Home link is its own rounded row with a 3px gap - not jQuery Mobile's joined inset list. */
#home .ui-content > .ui-listview,
.ui-panel-inner > .ui-listview {
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

    #home .ui-content > .ui-listview > li {
        border: 0 !important;
        background: transparent !important;
        margin: 0 0 3px 0 !important;
    }

#home .ui-listview > li > a.HomeScreenLink.ui-btn {
    position: relative;
    height: 48px;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 40px 0 50px !important;
    line-height: 46px !important;
    border-radius: var(--pro-radius-row) !important;
    font-size: var(--type-base) !important;
    font-weight: 400 !important;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* Accent icon, left. The default is for the report-form buttons, which have no id. Glyphs
       follow Data.HomeMenuItems.js's set, but must be Font Awesome 4.3 - anything newer renders
       as nothing at all. */
    #home .ui-listview > li > a.HomeScreenLink.ui-btn::before {
        content: "\f0f6";
        content: "\f0f6" / "";
        font-family: FontAwesome !important;
        position: absolute;
        left: 16px;
        top: 0;
        width: 20px;
        line-height: 46px;
        text-align: center;
        font-size: 17px;
        font-weight: normal;
        color: var(--brand);
    }

#home a#HomepageCustomers::before { content: "\f0c0" !important; content: "\f0c0" / "" !important; } /* users */
#home a#CreateJobDisbursement::before { content: "\f0ad" !important; content: "\f0ad" / "" !important; } /* wrench */
#home a#TimesheetsNewLink::before { content: "\f017" !important; content: "\f017" / "" !important; } /* clock-o */
#home a#CreatePurchaseOrder::before { content: "\f07a" !important; content: "\f07a" / "" !important; } /* shopping-cart */
#home a#CreateJob::before { content: "\f055" !important; content: "\f055" / "" !important; } /* plus-circle */
#home a#CreateInvoice::before { content: "\f15c" !important; content: "\f15c" / "" !important; } /* file-text */
#home a#ViewAllocations::before { content: "\f073" !important; content: "\f073" / "" !important; } /* calendar */
#home a#ViewProgressAllocations::before { content: "\f0ae" !important; content: "\f0ae" / "" !important; } /* tasks */
#home a#HomePage_ViewMyJobs::before { content: "\f0b1" !important; content: "\f0b1" / "" !important; } /* briefcase */
#home a#HomePage_UsersAndPlant::before { content: "\f0d1" !important; content: "\f0d1" / "" !important; } /* truck */
#home a#CreateVanStockPurchaseOrder::before { content: "\f0d1" !important; content: "\f0d1" / "" !important; } /* truck */
#home a#ViewTransactions::before { content: "\f022" !important; content: "\f022" / "" !important; } /* list-alt */
#home a#HomePageLookUp::before { content: "\f002" !important; content: "\f002" / "" !important; } /* search */
#home a#HomePageAllJobs::before { content: "\f00b" !important; content: "\f00b" / "" !important; } /* th-list */
#home a#HomePageNotifications::before { content: "\f0f3" !important; content: "\f0f3" / "" !important; } /* bell */
#home a#HomePageDocuments::before { content: "\f115" !important; content: "\f115" / "" !important; } /* folder-open-o */
#home a#DraftChecklistsLink::before { content: "\f044" !important; content: "\f044" / "" !important; } /* pencil-square-o */
#home a#Logout::before { content: "\f08b" !important; content: "\f08b" / "" !important; } /* sign-out */

/* jQuery Mobile's list carat (a white arrow on a grey disc) becomes a small muted chevron. */
.ui-listview > li > .ui-btn.ui-btn-icon-right.ui-icon-carat-r::after {
    content: "\f105" !important;
    content: "\f105" / "" !important;
    font-family: FontAwesome !important;
    background: none !important;
    border-radius: 0 !important;
    width: 16px !important;
    height: 22px !important;
    margin-top: -11px !important;
    right: 14px !important;
    line-height: 22px;
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    color: var(--text-muted);
}

/* ---- Job screen: the Info/Create/Close tabs as a segmented control, each tab's content in a card ---- */

#AllocatedJobTabs.ui-tabs {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

#AllocatedJobTabs .TabList {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--pro-radius-row) !important;
    padding: 3px !important;
    box-sizing: border-box;
}

#AllocatedJobTabs .JobTabSelector,
#AllocatedJobTabs .JobTabSelector a {
    background: var(--surface) !important;
    border: 0 !important;
    color: var(--text) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

    #AllocatedJobTabs .JobTabSelector a {
        border-radius: var(--radius) !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        font-weight: 400 !important;
    }

    #AllocatedJobTabs .JobTabSelector.ui-tabs-active a,
    #AllocatedJobTabs .JobTabSelector a.ui-btn-active,
    #AllocatedJobTabs .JobTabSelector a.ui-state-active {
        background: var(--brand) !important;
        color: var(--text-on-brand) !important;
        font-weight: 600 !important;
    }

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

#AllocatedJobTabs .AllocatedJobTab.ui-tabs-panel {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--pro-radius-card) !important;
    padding: 14px 16px !important;
    margin-top: 12px;
}

.AllocatedJobLineItemTextElement {
    font-size: var(--type-base);
}

/* Mobile.css tints these groups pale blue; inside the tab's card they are just a group. */
.AllocatedJobViewSection {
    background-color: transparent !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    display: block !important;
}

    .AllocatedJobViewSection textarea {
        margin-bottom: 8px !important;
    }

    .AllocatedJobViewSection textarea + .ui-btn {
        margin-bottom: 12px !important;
    }

    .AllocatedJobLineItemTextElement b {
        font-weight: 600;
    }

/* Thumbnail tile and its "+" - a quiet tile with the accent glyph, like the mockup's add tile. */
.JobAttachmentThumbnailParent {
    background-color: var(--surface-2) !important;
    border: 1px dashed var(--pro-field-line) !important;
    border-radius: var(--pro-radius-row) !important;
}

#ThumbNailAddImageButton {
    color: var(--brand) !important;
}

/* ---- Hamburger menu panel (Dashboard Home) - a quiet navigation pane ---- */

#MainMenuPanel {
    background-color: var(--page-bg) !important;
    border-left: 1px solid var(--border);
    box-shadow: var(--pro-flyout-shadow) !important;
}

#MainMenuList li {
    margin-bottom: 3px;
}

.MainMenuRow {
    border: 1px solid var(--border) !important;
    border-radius: var(--pro-radius-row) !important;
    min-height: 44px;
    box-sizing: border-box;
    font-weight: 400 !important;
}

    .MainMenuRow:hover {
        background: var(--surface-2) !important;
    }

/* ---- Dialogs ---- */

.ui-dialog.ui-widget-content,
.ui-dialog-contain > .ui-content,
.ui-popup.ui-body-a,
.ui-popup.ui-body-inherit {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--pro-radius-card) !important;
    box-shadow: var(--pro-flyout-shadow) !important;
}

/* No coloured title bar: a plain 20px semibold title on the dialog's own surface. */
.ui-dialog-titlebar {
    background: transparent !important;
    color: var(--text) !important;
    border: 0 !important;
    font-family: var(--pro-font-display) !important;
    font-size: var(--type-lg) !important;
    font-weight: 600 !important;
}

    .ui-dialog-titlebar .ui-dialog-title {
        color: var(--text) !important;
    }

/* DialogHelper's popups (jQuery Mobile popup with a header bar) - the same plain title. */
.ui-popup > .ui-header {
    background: transparent !important;
    border: 0 !important;
}

    .ui-popup > .ui-header .ui-title {
        font-family: var(--pro-font-display) !important;
        font-size: var(--type-lg) !important;
        font-weight: 600 !important;
        text-align: left !important;
        margin: 0 24px !important;
        padding: 20px 0 4px !important;
        color: var(--text) !important;
    }

/* The "Data Lists" storage modal (TOTM.js, inline styles) - same idea. */
#StorageModal > div:first-child {
    background: var(--brand) !important;
    color: var(--text-on-brand) !important;
}

/* ---- Date / time pickers ----
   Match the 44px buttons above, the same parity Theme.css keeps for Tradie Light (see its note
   and Pickers.css's header). Pickers.css is linked before this file, and Theme.css's 47px rule is
   !important, so this one needs !important too and wins on source order. */
.totm-picker {
    height: 44px !important;
    border-radius: var(--radius) !important;
}

/* The 16px gutter leaves a paired (date beside time) picker ~10px narrower than under Tradie
   Light, which was just enough for "Thu 29 Oct" to wrap and push "Today" out of the 44px field.
   One step down the type ramp keeps it on one line. */
.CompactPickerField .totm-picker .totm-v {
    font-size: 15px !important;
    white-space: nowrap;
}