/*
    A2 theme layer - restyles the shared jQuery Mobile primitives against
    the tokens in Tokens.css. Purely additive: nothing here changes markup
    or behaviour, only appearance. Loaded after Mobile.css/CellPhone.css,
    before ../Custom.css.

    Safe to delete this single file to revert to the pre-A2 look.
*/

/* ---- Base ---- */

/* :not(.fa) keeps Font Awesome's icon font untouched - icons are glyphs in
   that font, not text, so overriding font-family on .fa elements renders
   them as blank boxes. */
*:not(.fa) {
    font-family: var(--font) !important;
}

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

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

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

/* ---- Header / footer bars ---- */

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

    .ui-header-fixed h3,
    .ui-header-fixed h1 {
        color: var(--text) !important;
        font-weight: 500 !important;
        font-size: var(--type-lg) !important;
    }

/* No background here: .SettingsNavigationButton carries a padding-left:
   50px hack (from Mobile.css, to widen its tap target) that would inflate
   any pill background into a wide rectangle rather than a clean icon.

   Vertically centred with top:50%/translateY rather than a fixed px
   offset: Mobile.css's original top:10px was tuned for the original,
   taller header (16pt title text). Theme.css's h3 override below shrinks
   the title to --type-lg, which shrinks the header itself, so a fixed
   offset drifts out of centre. Percentage + transform stays correct
   regardless of header height. */
.HeaderNavigationButton {
    background-color: transparent !important;
    color: var(--brand) !important;
    width: 25px !important;
    height: 25px !important;
    line-height: 25px !important;
    margin-top: 0 !important;
    top: 50% !important;
    transform: translateY(-50%);
}

/* ---- Buttons ---- */

.ui-btn {
    border-radius: var(--radius) !important;
    font-size: var(--type-base) !important;
    font-weight: 500 !important;
    border-width: 1px !important;
}

/* Compound selectors (.ui-btn.AddButton) rather than bare .AddButton:
   these buttons are very often also marked up with .HomeScreenLink (see
   AddConsumable.html, AddNarrativeToTransaction.html, etc.), and a bare
   single-class selector would lose the cascade to .HomeScreenLink's card
   styling below purely based on which rule comes later in the file. The
   two-class selector always wins regardless of source order. */

.ui-btn.AddButton {
    background-color: var(--btn-add-bg) !important;
    border-color: var(--btn-add-bg) !important;
    color: #fff !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--elev-1);
}

    .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;
    border-radius: var(--radius) !important;
}

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

/* ---- List rows / home menu cards ---- */

.HomeScreenLink {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--elev-1);
    margin-bottom: var(--space-2) !important;
}

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

/* ---- Inputs ---- */

.ui-input-text,
.ui-input-text input,
input[type="text"],
input[type="number"],
input[type="email"],
input:not([type]),
textarea {
    background-color: var(--surface) !important;
    border-color: var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
}

/* ---- Status colours (kept aligned with Colours.css names) ---- */

.SubmittedStatusButton {
    background-color: var(--ok) !important;
}

/* ---- List rows / cards (jobs, timesheets, allocations, transactions) ----
   These all share the same shape in Mobile.css: a flat grey/white block
   used as a row. Restyling them as one consistent card pattern instead of
   each having its own hand-picked grey (#dcdcdc, #efefef, #EBEBEB, #f6f6f6...). */

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

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

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

/* ---- Section headers / accent bars ----
   Unifies the two hardcoded blues that read as "section heading" rather
   than "primary action" (rgb(65,97,158) and rgb(25,118,210) used this way). */

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

.ViewOrderListDateItemHeading,
.PendingTimesheetDateText,
.ui-dialog-titlebar,
#HomepageCompanyName {
    background-color: var(--brand) !important;
    color: #fff !important;
}

/* ---- Secondary/neutral buttons ----
   .OrangeButton intentionally keeps its own hue (it's a distinct status
   action, not chrome) - only radius is unified here for consistency.
   Status colour classes in Colours.css are left alone deliberately: they
   are categorical job/timesheet indicators assigned by ColourMapping.js,
   not theme chrome, and aliasing them to brand tokens would blur that
   distinction (e.g. DarkRed = overdue job vs. --danger = destructive
   action). */

.OrangeButton {
    border-radius: var(--radius) !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;
    border-radius: var(--radius) !important;
}

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

/* ---- Form controls (textareas, multi-line answers, memo fields) ---- */

.QuestionnaireTextAnswer,
.QuestionnaireMultiTextAnswer,
.QuestionnaireSingleTextAnswer,
#SchedulerNewMemoInput,
#SchedulerInternalMemoText,
.LunchBreakUnput {
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
}

/* ---- Responsive / device fit ---- */

@media only screen and (max-width: 600px) {
    .ui-page {
        zoom: normal !important;
    }
}

.ui-header-fixed,
.ui-footer {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}