/* The Mobile Allocated Jobs settings screen's own parts - View.MobileJobSettings,
   Scheduler-MobileJobSettingsScreen-Design.md.

   The frame around them (the intro, the Apply bar, the example bar, the rail, the banner and the two
   scrolling columns) is shared, and styled in SettingsWorkbench.css. Everything here is prefixed Mjs
   and lives under #MobileJobSettingsScreen. It follows MobileHomeSettings.css, so the two phones look
   like one family.

   The phone keeps Mobile's own Tradie Classic colours, whatever the Scheduler looks like around it:
   it is a picture of a phone. */

#MobileJobSettingsScreen {
    --mjs-brand: #1976d2;
    --mjs-brand-tint: #e8f1fb;
    /* One colour for each source of a reason, as on Mobile Home Screen: purple there is a role, so
       this server is slate; the accounting system is its lane badge's amber; set elsewhere is teal;
       the example job and phone are grey. Green and red are only ever new and going. */
    --mjs-server: #37474f;
    --mjs-server-tint: #e7ecf1;
    --mjs-system: #8a5200;
    --mjs-system-tint: #fbf0df;
    --mjs-elsewhere: #00695c;
    --mjs-elsewhere-tint: #e0f2ef;
    --mjs-job: #4a4f55;
    --mjs-job-tint: #eceef1;
    --mjs-added: #2e7d32;
    --mjs-added-tint: #e3f2e4;
    --mjs-removed: #b3261e;
    --mjs-removed-tint: #fbe9e7;
    --mjs-quiet: var(--totm-text-muted, #5f6368);
    --mjs-line: var(--totm-border, #e3e5e9);
    --mjs-surface: #f6f7f9;

    /* Mobile's Tradie Classic, for the phone only. */
    --mjs-phone-frame: #1c1f24;
    --mjs-phone-page: #ffffff;
    --mjs-phone-text: #1a1a1a;
    --mjs-phone-card-line: #c9ccd1;
    --mjs-phone-grey: #bcbcbc;
    --mjs-phone-button: #3388cc;
    --mjs-phone-cancel: #cc3333;
}

.MjsQuiet {
    color: var(--mjs-quiet);
}

/* ---- the example bar */

.MjsSegment {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid var(--totm-border-strong, #c9ccd1);
    border-radius: 5px;
    overflow: hidden;
}

/* !important because Scheduler.css paints every button brand blue with !important - see
   MobileHomeSettings.css's segment for the same. */
#MobileJobSettingsScreen .MjsSegment button {
    margin: 0;
    border: 0;
    border-radius: 0 !important;
    padding: 4px 12px !important;
    background-color: #fff !important;
    color: var(--totm-text, #1a1a1a) !important;
    font-weight: 500 !important;
    cursor: pointer;
}

#MobileJobSettingsScreen .MjsSegment button + button {
    border-left: 1px solid var(--totm-border-strong, #c9ccd1);
}

#MobileJobSettingsScreen .MjsSegment button[aria-pressed="true"] {
    background-color: var(--mjs-brand) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* "Example job ▾": the presets, and the job taken apart switch by switch, in a menu over the page. */
.MjsExampleMenu {
    position: relative;
}

#MobileJobSettingsScreen button.MjsExampleButton {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-width: 200px;
    justify-content: space-between;
    margin: 0;
    padding: 4px 10px !important;
    border: 1px solid var(--totm-border-strong, #c9ccd1) !important;
    border-radius: 5px !important;
    background-color: #fff !important;
    color: var(--totm-text, #1a1a1a) !important;
    font-weight: 500 !important;
    cursor: pointer;
}

.MjsExamplePanel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    display: none;
    width: 460px;
    padding: 10px 12px;
    border: 1px solid var(--totm-border-strong, #c9ccd1);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.18);
    color: var(--totm-text, #1a1a1a);
    font-size: 13px;
}

.MjsExamplePanel.MjsExamplePanelOpen {
    display: block;
}

.MjsPresets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

#MobileJobSettingsScreen button.MjsPreset {
    margin: 0;
    padding: 6px 8px !important;
    border: 1px solid var(--totm-border-strong, #c9ccd1) !important;
    border-radius: 5px !important;
    background-color: #fff !important;
    color: var(--totm-text, #1a1a1a) !important;
    font-weight: 500 !important;
    text-align: left;
    cursor: pointer;
}

#MobileJobSettingsScreen button.MjsPreset[aria-pressed="true"] {
    border-color: var(--mjs-brand) !important;
    background-color: var(--mjs-brand-tint) !important;
    font-weight: 600 !important;
}

.MjsCustomiseHead {
    margin: 10px 0 4px;
    padding-top: 8px;
    border-top: 1px solid var(--mjs-line);
    font-size: 12px;
    color: var(--mjs-quiet);
}

/* The statuses Job Status offers, under its button on the Close tab. */
.MjsChoices {
    margin: -2px 0 8px;
    font-size: 11px;
    color: var(--mjs-quiet);
}

.MjsHasBoxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
}

/* ---- the rail's additions */

.MjsPartsLine {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
    margin-top: 4px;
    font-size: 11px;
}

.MjsPartsLabel {
    color: var(--mjs-quiet);
}

/* Neutral, with a tick or a cross: green on these screens means only "new, not applied yet". */
#MobileJobSettingsScreen button.MjsChip {
    margin: 0;
    padding: 1px 7px !important;
    border: 1px solid var(--mjs-line) !important;
    border-radius: 999px !important;
    background-color: #fff !important;
    color: var(--totm-text, #1a1a1a) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    white-space: nowrap;
    cursor: pointer;
}

#MobileJobSettingsScreen button.MjsChip::before {
    content: "\2713  ";
    color: var(--mjs-quiet);
}

#MobileJobSettingsScreen button.MjsChip.MjsChipOff {
    border-style: dashed !important;
    background-color: var(--mjs-surface) !important;
    color: var(--mjs-quiet) !important;
}

#MobileJobSettingsScreen button.MjsChip.MjsChipOff::before {
    content: "\2715  ";
}

#MobileJobSettingsScreen tr.SwSetting.MjsHot td,
#MobileJobSettingsScreen tr.MjsFixedRow.MjsHot td {
    background: var(--mjs-brand-tint);
}

#MobileJobSettingsScreen .MjsPulse,
#MobileJobSettingsScreen .MjsPulse td {
    animation: MjsPulse 1.2s ease-out;
}

@keyframes MjsPulse {
    0% { background: var(--mjs-brand-tint); box-shadow: inset 3px 0 0 var(--mjs-brand); }
    100% { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}

/* Why a "No" from the accounting system is No, and what would change it. */
.MjsFixedWhy {
    margin-top: 4px;
    padding: 4px 8px;
    border-left: 3px solid var(--mjs-system);
    background: var(--mjs-system-tint);
    font-size: 12px;
    color: var(--totm-text, #1a1a1a);
}

/* The rail shows the settings for the page the phone shows - "Jobs list" or "A job". */
#MobileJobSettingsScreen .MjsOffPage {
    display: none;
}

.MjsRailFilter {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid var(--mjs-line);
    background: var(--mjs-surface);
    font-size: 12px;
    color: var(--mjs-quiet);
}

/* The read-only groups: this server's switches and the accounting system. */
.MjsFixedTable {
    margin-top: 6px;
}

.MjsFixedRow td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--mjs-line);
    vertical-align: top;
}

.MjsFixedTitle {
    font-weight: 600;
}

.MjsFixedEffect {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--mjs-quiet);
}

td.MjsFixedValue {
    width: 30%;
    white-space: nowrap;
    font-weight: 600;
    text-align: right;
}

td.MjsFixedValue.MjsFixedNo {
    color: var(--mjs-quiet);
}

/* ---- the phone, and why */

.MjsStage {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 1400px) {
    .MjsStage {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }
}

.MjsPhone {
    width: 300px;
}

.MjsScreen {
    --sw-phone-fade: var(--mjs-phone-page);
    position: relative;
    height: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 12px solid var(--mjs-phone-frame);
    border-radius: 34px;
    background: var(--mjs-phone-page);
    color: var(--mjs-phone-text);
    font-size: 12.5px;
}

.MjsPhoneNote {
    margin-top: 6px;
    text-align: center;
    font-size: 11px;
    color: var(--mjs-quiet);
}

.MjsPhoneBar {
    position: relative;
    flex: none;
    padding: 10px 34px 9px;
    background: var(--mjs-brand);
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.MjsPhoneBarIcon {
    position: absolute;
    top: 12px;
}

.MjsPhoneBarLeft {
    left: 12px;
}

.MjsPhoneBody {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px 16px;
}

.MjsLockedBody > .MjsPart {
    opacity: 0.45;
}

.MjsNotice {
    margin-bottom: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    background: var(--mjs-elsewhere-tint);
    color: var(--mjs-elsewhere);
    font-weight: 600;
    cursor: pointer;
}

.MjsSearch {
    margin-bottom: 6px;
    padding: 5px 8px;
    border: 1px solid var(--mjs-phone-card-line);
    border-radius: 4px;
    color: var(--mjs-quiet);
}

.MjsDayHeading {
    margin: 8px 0 4px;
    font-weight: 700;
}

/* A job card on the list: Mobile's ViewOrderListItem. */
.MjsCard {
    position: relative;
    margin-bottom: 6px;
    padding: 6px 8px;
    border: 1px solid var(--mjs-phone-card-line);
    border-radius: 4px;
    background: #f9f9f9;
}

.MjsCard.MjsGrey {
    background: var(--mjs-phone-grey);
}

.MjsCard.MjsTaskCard {
    border-left: 4px solid var(--mjs-elsewhere);
}

.MjsCardHead {
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.MjsCardHead b {
    flex: 1;
    min-width: 0;
}

.MjsCardHead.MjsCompleted b {
    color: var(--mjs-quiet);
}

.MjsCode {
    font-weight: 700;
}

.MjsTick {
    color: var(--mjs-added);
}

.MjsCardTime {
    font-weight: 700;
}

.MjsCardLine {
    margin-top: 1px;
}

.MjsNoOpenNote,
.MjsOpenNote {
    margin-top: 3px;
    font-size: 11px;
    font-style: italic;
    color: var(--mjs-quiet);
}

.MjsPill {
    display: inline-block;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--mjs-surface);
    font-size: 10.5px;
}

.MjsEmpty {
    margin-top: 12px;
    text-align: center;
}

/* A job's tabs: Mobile's navbar. */
.MjsTabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex: none;
    border-bottom: 1px solid var(--mjs-phone-card-line);
}

#MobileJobSettingsScreen button.MjsTab {
    margin: 0;
    padding: 7px 4px !important;
    border: 0;
    border-radius: 0 !important;
    background-color: #f6f6f6 !important;
    color: var(--mjs-phone-text) !important;
    font-weight: 600 !important;
    cursor: pointer;
}

#MobileJobSettingsScreen button.MjsTab.MjsTabOn {
    background-color: var(--mjs-phone-button) !important;
    color: #fff !important;
}

#MobileJobSettingsScreen button.MjsTab.MjsTabLocked {
    color: var(--mjs-quiet) !important;
}

.MjsTab .fa-lock {
    margin-right: 4px;
}

/* A part of a tab: a field, or one of Mobile's AddButton bars. */
.MjsPart {
    position: relative;
    margin-bottom: 6px;
    cursor: pointer;
}

.MjsField b {
    font-weight: 700;
}

.MjsPhoneButton {
    margin: 0 0 6px;
    padding: 9px 10px;
    border-radius: 4px;
    background: var(--mjs-phone-button);
    color: #fff;
    text-align: center;
    font-weight: 600;
}

.MjsPart.MjsPhoneButton {
    margin-bottom: 6px;
}

.MjsPhoneButtonRed {
    background: var(--mjs-phone-cancel);
}

.MjsPart.MjsDisabled {
    opacity: 0.5;
}

.MjsPhoneLinkText {
    color: var(--mjs-brand);
    text-decoration: underline;
}

.MjsTextArea {
    margin-bottom: 4px;
    padding: 6px 8px;
    border: 1px solid var(--mjs-phone-card-line);
    border-radius: 4px;
    color: var(--mjs-quiet);
}

/* What pressing Stop Work does - said, not drawn. */
.MjsFlow {
    margin: -2px 0 6px;
    padding: 4px 8px;
    border-left: 3px solid var(--mjs-phone-cancel);
    font-size: 11.5px;
    font-style: italic;
    cursor: pointer;
}

/* ---- hidden, new and removed */

.MjsHidden {
    border: 1px dashed #b9bec6;
    border-radius: 4px;
    background: transparent !important;
    color: #8a9099 !important;
    opacity: 1;
}

.MjsPart.MjsHidden,
.MjsCardLine.MjsHidden,
.MjsFlow.MjsHidden {
    padding: 4px 6px;
}

.MjsHidden .MjsPhoneButton,
.MjsHidden.MjsPhoneButton {
    background: transparent;
    color: #8a9099;
}

.MjsNew {
    background: var(--mjs-added-tint) !important;
    color: #1b5e20 !important;
    box-shadow: inset 3px 0 0 var(--mjs-added);
}

.MjsNew::after {
    content: "new";
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--mjs-added);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-style: normal;
}

.MjsRemoved {
    border: 1px dashed var(--mjs-removed);
    border-radius: 4px;
    background: var(--mjs-removed-tint) !important;
    color: var(--mjs-removed) !important;
    text-decoration: line-through;
}

.MjsPart.MjsRemoved,
.MjsCardLine.MjsRemoved,
.MjsFlow.MjsRemoved {
    padding: 4px 6px;
}

.MjsRemoved::after {
    content: "removed";
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--mjs-removed);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
}

#MobileJobSettingsScreen .MjsHot {
    outline: 2px solid var(--mjs-brand);
    outline-offset: 1px;
}

#MobileJobSettingsScreen tr.MjsHot {
    outline: 0;
}

/* ---- why each part is there */

.MjsWhy {
    min-width: 0;
    border: 1px solid var(--mjs-line);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.MjsWhyHead {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    justify-content: space-between;
    padding: 9px 12px;
    border-bottom: 1px solid var(--mjs-line);
    font-weight: 600;
}

.MjsWhyTable {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12.5px;
}

.MjsWhyTable td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--mjs-line);
    vertical-align: top;
    overflow-wrap: anywhere;
}

.MjsWhyTable tr {
    cursor: pointer;
}

#MobileJobSettingsScreen .MjsWhyTable tr:hover td,
#MobileJobSettingsScreen .MjsWhyTable tr.MjsHot td {
    background: var(--mjs-brand-tint);
}

.MjsWhyTable td.MjsWhyPart {
    width: 38%;
}

.MjsWhyHidden .MjsWhyPart {
    color: var(--mjs-quiet);
    text-decoration: line-through;
}

.MjsTag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--mjs-surface);
    color: var(--mjs-quiet);
    font-size: 10.5px;
    font-weight: 600;
}

.MjsTag.MjsTagSetting {
    background: var(--mjs-brand-tint);
    color: #0c447c;
}

.MjsTag.MjsTagServer {
    background: var(--mjs-server-tint);
    color: var(--mjs-server);
}

.MjsTag.MjsTagSystem {
    background: var(--mjs-system-tint);
    color: var(--mjs-system);
}

.MjsTag.MjsTagJob {
    background: var(--mjs-job-tint);
    color: var(--mjs-job);
}

.MjsTag.MjsTagElsewhere {
    background: var(--mjs-elsewhere-tint);
    color: var(--mjs-elsewhere);
}

.MjsAdds {
    color: var(--mjs-added);
    font-weight: 600;
}

.MjsTakesOff {
    color: var(--mjs-removed);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    #MobileJobSettingsScreen .MjsPulse,
    #MobileJobSettingsScreen .MjsPulse td {
        animation: none;
    }
}

/* The key to the reasons' colours, under the heading. */
.MjsLegend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
    padding: 0 12px 8px;
    font-size: 11px;
    color: var(--mjs-quiet);
}

/* A tag and its words stay together. */
.MjsLegendItem {
    white-space: nowrap;
}