/* The Mobile Home Screen settings screen's own parts - View.MobileHomeSettings,
   Scheduler-MobileHomeSettingsScreen-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 Mhs
   and lives under #MobileHomeSettingsScreen.

   The phone keeps Mobile's own Tradie Classic colours (Clients/Mobile/Styles/Tokens.css and
   Mobile.css), whatever the Scheduler looks like around it: it is a picture of a phone. */

#MobileHomeSettingsScreen {
    --mhs-brand: #1976d2;
    --mhs-brand-tint: #e8f1fb;
    --mhs-role: #6a4fb3;
    --mhs-role-tint: #eee9f8;
    /* Set elsewhere - the Report Designer, the Users screen: teal on both phone screens. */
    --mhs-elsewhere: #00695c;
    --mhs-elsewhere-tint: #e0f2ef;
    --mhs-added: #2e7d32;
    --mhs-added-tint: #e3f2e4;
    --mhs-removed: #b3261e;
    --mhs-removed-tint: #fbe9e7;
    --mhs-quiet: var(--totm-text-muted, #5f6368);
    --mhs-line: var(--totm-border, #e3e5e9);
    --mhs-surface: #f6f7f9;

    /* Mobile's Tradie Classic, for the phone only. */
    --mhs-phone-frame: #1c1f24;
    --mhs-phone-page: #ffffff;
    --mhs-phone-text: #1a1a1a;
    --mhs-phone-row: #f9f9f9;
    --mhs-phone-row-line: #999999;
    --mhs-phone-card-line: #e3e5e9;
    --mhs-phone-bubble: #e8f1fb;
    --mhs-phone-pin: #f4511e;
}

.MhsQuiet {
    color: var(--mhs-quiet);
}

/* ---- the example bar */

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

/* !important because Scheduler.css paints every button brand blue with !important - without matching
   its weight, both halves of the switch look chosen (the same reason Modern.css gives for its
   JobCompletionAlertToggle). */
#MobileHomeSettingsScreen .MhsSegment 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;
}

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

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

/* Whose roles put what on the phone: a chip per role, in the example bar's row. */
.MhsRoles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
    font-size: 12px;
    color: var(--mhs-quiet);
}

.MhsRolesLabel {
    font-weight: 600;
    color: var(--totm-text, #1a1a1a);
}

.MhsRoleChip {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 1px 8px;
    border: 1px dashed var(--totm-border-strong, #c9ccd1);
    border-radius: 999px;
    background: #fff;
    color: var(--mhs-quiet);
    white-space: nowrap;
    cursor: pointer;
}

.MhsRoleChip.MhsRoleChipOn {
    border: 1px solid var(--mhs-line);
    color: var(--totm-text, #1a1a1a);
    font-weight: 600;
}

.MhsRoleChip:focus-visible {
    outline: 2px solid var(--mhs-brand);
    outline-offset: 1px;
}

.MhsRolesWhere {
    font-style: italic;
}

/* The person icon on anything the phone shows (or hides) because of a role - blue, as asked for
   (2026-10-15), though the "Role" tags in the reasons table stay purple. */
.MhsRoleMark {
    color: var(--mhs-brand);
}

/* The book icon on a form or form group - in the teal of the "Report Designer" tags in the reasons
   table, where it comes from. */
.MhsDesignerMark {
    color: var(--mhs-elsewhere);
}

.MhsButton .MhsSourceMark,
.MhsMenuItem .MhsSourceMark {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
}

.MhsMenuItem.MhsFromRole,
.MhsMenuItem.MhsFromDesigner {
    position: relative;
}

/* A hidden role item already has "hidden" at its right edge; the icon goes outside it. */
.MhsButton.MhsHidden.MhsFromRole::after,
.MhsNew.MhsFromRole::after,
.MhsNew.MhsFromDesigner::after {
    right: 30px;
}

.MhsTile {
    position: relative;
}

#MobileHomeSettingsScreen .MhsTile .fa.MhsSourceMark {
    position: absolute;
    top: 5px;
    right: 6px;
    font-size: 11px;
}

#MobileHomeSettingsScreen .MhsTile .fa.MhsRoleMark {
    color: var(--mhs-brand);
}

#MobileHomeSettingsScreen .MhsTile .fa.MhsDesignerMark {
    color: var(--mhs-elsewhere);
}

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

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

.MhsHomeLineLabel {
    color: var(--mhs-quiet);
}

/* Neutral, with a tick or a cross: green on these screens means only "new, not applied yet". */
.MhsChip {
    padding: 1px 7px;
    border: 1px solid var(--mhs-line);
    border-radius: 999px;
    background: #fff;
    color: var(--totm-text, #1a1a1a);
    font-weight: 500;
    white-space: nowrap;
}

.MhsChip::before {
    content: "\2713  ";
    color: var(--mhs-quiet);
}

/* A chip finds its button or card on the phone. */
.MhsChip[role="button"] {
    cursor: pointer;
}

.MhsChip.MhsChipOff {
    border-style: dashed;
    background: var(--mhs-surface);
    color: var(--mhs-quiet);
}

.MhsChip.MhsChipOff::before {
    content: "\2715  ";
}

#MobileHomeSettingsScreen tr.SwSetting.MhsHot td {
    background: var(--mhs-brand-tint);
}

#MobileHomeSettingsScreen .MhsPulse,
#MobileHomeSettingsScreen .MhsPulse td {
    animation: MhsPulse 1.2s ease-out;
}

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

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

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

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

.MhsPhone {
    width: 300px;
}

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

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

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

.MhsPhoneBarIcon {
    position: absolute;
    top: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

#MobileHomeSettingsScreen button.MhsPhoneBarIcon {
    margin: 0;
    padding: 0 !important;
    border: 0;
    background-color: transparent !important;
    color: #fff !important;
}

.MhsPhoneBarRight {
    right: 12px;
}

.MhsPhoneBarLeft {
    left: 12px;
}

.MhsPhoneBody {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px 16px;
}

.MhsLogo {
    padding: 4px 0 2px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--mhs-brand);
}

.MhsCompany {
    margin-top: 6px;
    font-weight: 600;
}

.MhsWelcome {
    margin-bottom: 8px;
    color: var(--mhs-quiet);
}

.MhsButtons {
    display: grid;
    gap: 4px;
}

.MhsButton {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid var(--mhs-phone-row-line);
    border-radius: 3px;
    background: var(--mhs-phone-row);
    font-weight: 600;
    cursor: pointer;
}

.MhsButton.MhsFormButton {
    background: #eef4fb;
}

.MhsButton.MhsHidden {
    border: 1px dashed #b9bec6;
    background: transparent;
    color: #8a9099;
    font-weight: 500;
}

.MhsButton.MhsHidden::after {
    content: "hidden";
    position: absolute;
    right: 10px;
    top: 11px;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Taken off by a change not yet applied - kept in its place, red, struck through and labelled,
   until Apply or Reset. The mirror of .MhsNew below. */
.MhsButton.MhsRemoved,
.MhsMenuItem.MhsRemoved {
    position: relative;
    border: 1px dashed var(--mhs-removed);
    background: var(--mhs-removed-tint);
    color: var(--mhs-removed);
    text-decoration: line-through;
}

.MhsTile.MhsRemoved,
.MhsCard.MhsRemoved {
    border: 1px dashed var(--mhs-removed);
    background: var(--mhs-removed-tint);
    color: var(--mhs-removed);
    text-decoration: line-through;
}

.MhsCard.MhsRemoved .MhsNextJobBand {
    background: var(--mhs-removed);
}

.MhsTile.MhsRemoved .fa {
    color: var(--mhs-removed);
}

.MhsButton.MhsRemoved::after,
.MhsMenuItem.MhsRemoved::after {
    content: "removed";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 6px;
    border-radius: 999px;
    background: var(--mhs-removed);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.MhsRemoved.MhsFromRole::after,
.MhsRemoved.MhsFromDesigner::after {
    right: 30px;
}

.MhsButton.MhsUnknown {
    border: 1px dashed var(--mhs-elsewhere);
    background: var(--mhs-elsewhere-tint);
    color: var(--mhs-elsewhere);
    font-weight: 500;
    cursor: default;
}

.MhsAdded {
    animation: MhsAdded 1.6s ease-out;
}

/* Shown because of a change not yet applied - green, and labelled, until Apply or Reset. */
.MhsButton.MhsNew,
.MhsMenuItem.MhsNew {
    position: relative;
    background: var(--mhs-added-tint);
    color: #1b5e20;
}

.MhsButton.MhsNew {
    border-bottom-color: var(--mhs-added);
    box-shadow: inset 3px 0 0 var(--mhs-added);
}

.MhsTile.MhsNew {
    border-color: var(--mhs-added);
    background: var(--mhs-added-tint);
    color: #1b5e20;
}

.MhsTile.MhsNew .fa {
    color: var(--mhs-added);
}

.MhsButton.MhsNew::after,
.MhsMenuItem.MhsNew::after {
    content: "new";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 6px;
    border-radius: 999px;
    background: var(--mhs-added);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@keyframes MhsAdded {
    0% { box-shadow: 0 0 0 3px var(--mhs-added); background: var(--mhs-added-tint); }
    100% { box-shadow: 0 0 0 3px transparent; }
}

#MobileHomeSettingsScreen .MhsHot.MhsButton,
#MobileHomeSettingsScreen .MhsHot.MhsTile,
#MobileHomeSettingsScreen .MhsHot.MhsCard,
#MobileHomeSettingsScreen .MhsHot.MhsMenuItem {
    outline: 2px solid var(--mhs-brand);
    outline-offset: 1px;
}

.MhsCard {
    margin-bottom: 10px;
    border: 1px solid var(--mhs-phone-card-line);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.MhsHoursCard {
    padding: 10px;
}

.MhsCardHead {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
}

.MhsBubbles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
    text-align: center;
}

.MhsBubble {
    padding: 7px 4px;
    border-radius: 10px;
    background: var(--mhs-phone-bubble);
}

.MhsBubble b {
    display: block;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    color: #0c447c;
}

.MhsBubble span {
    font-size: 11px;
    color: var(--mhs-quiet);
}

.MhsNextJobBand {
    padding: 6px 10px;
    background: var(--mhs-brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.MhsNextJobBody {
    display: grid;
    gap: 2px;
    padding: 9px 10px;
}

.MhsTiles {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a form called "PW Draft DateRestrictions 1789711524288511" would
       otherwise stretch its column off the phone. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.MhsTile {
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 10px 4px;
    border: 1px solid var(--mhs-phone-card-line);
    border-radius: 10px;
    background: var(--mhs-phone-row);
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.MhsTile .fa {
    font-size: 17px;
    color: var(--mhs-brand);
}

.MhsEmpty {
    padding: 8px;
    text-align: center;
    font-size: 12px;
}

.MhsMenuShade {
    position: absolute;
    inset: 0;
    display: flex;
    background: rgba(0, 0, 0, 0.35);
}

.MhsMenuPanel {
    width: 78%;
    height: 100%;
    overflow-y: auto;
    padding: 10px 0;
    background: var(--mhs-phone-page);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.25);
}

.MhsMenuItem {
    padding: 9px 14px;
    border-bottom: 1px solid var(--mhs-phone-card-line);
    font-weight: 500;
    cursor: pointer;
}

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

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

.MhsWhyTable {
    width: 100%;
    /* Fixed, so a long button name cannot squeeze its reason into a sliver beside it. */
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12.5px;
}

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

.MhsWhyTable tr {
    cursor: pointer;
}

#MobileHomeSettingsScreen .MhsWhyTable tr:hover td,
#MobileHomeSettingsScreen .MhsWhyTable tr.MhsHot td {
    background: var(--mhs-brand-tint);
}

.MhsWhyTable td.MhsWhyButton {
    width: 38%;
}

.MhsWhyHidden .MhsWhyButton {
    color: var(--mhs-quiet);
    text-decoration: line-through;
}

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

.MhsTag.MhsTagSetting {
    background: var(--mhs-brand-tint);
    color: #0c447c;
}

.MhsTag.MhsTagRole {
    background: var(--mhs-role-tint);
    color: var(--mhs-role);
}

.MhsTag.MhsTagElsewhere {
    background: var(--mhs-elsewhere-tint);
    color: var(--mhs-elsewhere);
}

.MhsAdds {
    color: var(--mhs-added);
    font-weight: 600;
}

.MhsTakesOff {
    color: var(--mhs-removed);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .MhsAdded,
    #MobileHomeSettingsScreen .MhsPulse,
    #MobileHomeSettingsScreen .MhsPulse td {
        animation: none;
    }
}

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

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