/* ==========================================================================
   se.css - the field engineer's phone

   Loaded AFTER style.css, so this file wins. It exists because style.css has
   no variables and no type scale: every colour is a hardcoded hex and almost
   every size lands between 15px and 20px, which is why nothing on the screen
   has a hierarchy. The engineer is standing at a dispenser holding the phone
   in one hand, so the questions each screen has to answer fast are "which job,
   how urgent, where, who do I call" - not "here is every column we store".

   Brand is unchanged: deep purple, Sora. What changes is what gets emphasis.
   ========================================================================== */

:root {
    /* Ink. #010101 pure black was doing the shouting; this is softer and
       still passes contrast on white. */
    --ink:        #1b1035;
    --ink-2:      #5c5470;
    --ink-3:      #8b8698;

    --brand:      #340c6f;
    --brand-2:    #5412b5;
    --brand-wash: #f4f0fb;

    --line:       #e7e3ef;
    --bg:         #f6f5f9;
    --card:       #ffffff;

    --danger:     #c62828;

    /* A type scale, so a label can never be the same size as the value it
       labels. */
    --t-micro:    11px;
    --t-label:    12px;
    --t-meta:     13px;
    --t-body:     15px;
    --t-strong:   17px;
    --t-head:     20px;

    --r-card:     14px;
    --r-chip:     8px;

    /* Text on the brand field is tinted from the hue, never grey. */
    --brand-tint: #d9ccf5;
    --brand-deep: #240a4e;
    --amber:      #ffd54a;

    /* The fixed header band (greeting + search) and the fixed tab bar. Every
       mobile screen scrolls clear of both; the values are measured, not guessed. */
    --hdr-h:      134px;
    --nav-h:      92px;
}

body {
    background: var(--bg);
    color: var(--ink);
    -webkit-text-size-adjust: 100%;
}

/* THE global fix: every mobile screen scrolls clear of the fixed nav.
   Only body - .user_search looks like a page wrapper but is a short header
   div, and padding it out turns it into an invisible 110px sheet sitting on
   top of whatever the screen puts below the search bar. */
body {
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)) !important;
}
.m_footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* --------------------------------------------------------------------------
   Toast

   custom_alert() asked Lobibox for delay: 900000 - fifteen minutes, so the
   message never left the screen - in a 300px box pinned top-right, which on a
   390px phone lands squarely on top of the greeting in the header. Config is
   fixed in mobile_footer.php; this makes it look like a toast.
   -------------------------------------------------------------------------- */
#lobibox-notify-wrapper-top.right,
#lobibox-notify-wrapper-top.center,
.lobibox-notify-wrapper {
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    /* Lobibox centres by setting a negative inline margin-left against its own
       width; with left/right pinned here that just shoves the toast off-screen. */
    margin-left: 0 !important;
    margin-right: 0 !important;
    z-index: 9999 !important;
}
.lobibox-notify {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 0 8px 0 !important;
    padding: 12px 40px 12px 14px !important;
    /* One hairline in the state colour, all round - not a thick side tab. */
    border: 1px solid var(--brand) !important;
    border-radius: var(--r-chip) !important;
    background: #fff !important;
    box-shadow: 0 6px 24px rgba(27, 16, 53, .18) !important;
    color: var(--ink) !important;
}
.lobibox-notify.lobibox-notify-success { border-color: #1b7f2c !important; }
.lobibox-notify.lobibox-notify-error   { border-color: var(--danger) !important; }
.lobibox-notify.lobibox-notify-warning { border-color: #f2b705 !important; }
.lobibox-notify .lobibox-notify-title {
    margin: 0 0 2px !important;
    font-size: var(--t-label) !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3) !important;
}
/* Lobibox sizes the toast and its message to a fixed height, so anything longer
   than one line is cut off part-way through the second. */
.lobibox-notify,
.lobibox-notify .lobibox-notify-body { height: auto !important; }
.lobibox-notify .lobibox-notify-msg {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: var(--t-body) !important;
    line-height: 1.35 !important;
    color: var(--ink) !important;
}
.lobibox-notify .lobibox-notify-icon-wrapper { display: none !important; }
.lobibox-notify .lobibox-close {
    top: 8px !important; right: 8px !important;
    width: 32px !important; height: 32px !important;
    font-size: 20px !important; opacity: .45 !important;
    color: var(--ink) !important;
}
.lobibox-delay-indicator { display: none !important; }

/* --------------------------------------------------------------------------
   Section heading

   Replaces the full-width shouty purple/grey banners ("SEARCHED JOB DETAILS")
   that spent a whole band of a 844px screen saying nothing.
   -------------------------------------------------------------------------- */
.mecha-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 18px 0 8px;
}
.mecha-h > h2 {
    margin: 0;
    font-size: var(--t-label);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.mecha-h > .mecha-h-act {
    font-size: var(--t-meta);
    font-weight: 600;
    color: var(--brand-2);
    text-decoration: none;
    /*
    | A thumb needs something to hit. Measured at 390x844 this was 43x20 - the
    | only STANDALONE tap target on the phone under the 24x24 that WCAG 2.5.8
    | asks for (the sub-24 phone numbers in the dealer list are inline text,
    | which the rule exempts).
    |
    | Padding, not a height: the label keeps its own line-height so the header
    | row it sits in does not move. inline-block is what lets the padding
    | actually enlarge the hit box.
    */
    display: inline-block;
    padding: 6px 8px;
    margin: -6px -8px;
}

/* --------------------------------------------------------------------------
   Segmented control (the date filter on the job list)

   Scrolls horizontally rather than squeezing five labels into 390px, and the
   selected one is filled instead of recoloured to an unrelated green.
   -------------------------------------------------------------------------- */
.mecha-seg {
    display: flex;
    gap: 5px;
    margin: 4px 0 2px;
    padding-bottom: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mecha-seg::-webkit-scrollbar { display: none; }
.mecha-seg > a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: var(--t-label);
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
}
.mecha-seg > a.is-on {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}
/* A count riding on a chip: "Ongoing 3". Tabular so a row of them lines up. */
.mecha-seg > a b {
    margin-left: 6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.mecha-seg > a.is-on b { color: #fff; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.mecha-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--card);
}

/* Job card. Tapping anywhere on it opens the job - the old card spent 40px on
   a centred "Job Details" button to do what the card itself can do. */
a.mecha-job {
    display: block;
    padding-left: 18px;               /* room for the urgency bar */
    color: inherit;
    text-decoration: none;
}
a.mecha-job:active { background: var(--brand-wash); }

/* The urgency bar: the one thing worth encoding structurally on this screen,
   because it is what decides which job the engineer drives to next. */
.mecha-job-bar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 5px;
    background: var(--line);
}
.mecha-job-bar.is-over  { background: var(--danger); }
.mecha-job-bar.is-soon  { background: #f2b705; }
.mecha-job-bar.is-ok    { background: #8bc34a; }
.mecha-job-bar.is-done  { background: #1b7f2c; }

.mecha-job-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.mecha-job-no {
    font-size: var(--t-meta);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.mecha-job-dealer {
    margin: 0 0 3px;
    font-size: var(--t-strong);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
}
.mecha-job-where {
    margin: 0;
    font-size: var(--t-meta);
    line-height: 1.35;
    color: var(--ink-2);
}
.mecha-job-where .sep { color: var(--ink-3); }

.mecha-job-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--line);
}
.mecha-sla {
    font-size: var(--t-meta);
    font-weight: 600;
    color: var(--ink-2);
}
.mecha-sla.is-over { color: var(--danger); }
.mecha-sla .tat {
    font-weight: 400;
    color: var(--ink-3);
}

/* Phone is its own tap target, sized for a thumb, inside a card that is
   itself a link. */
a.mecha-call {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--brand-wash);
    font-size: var(--t-meta);
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}

/* The card action when the return needs HIM: the same pill, filled. */
a.mecha-call.is-go {
    border-color: #1b7f2c;
    background: #1b7f2c;
    color: #fff;
}

/* One line above a list that says the one thing worth acting on. */
.mecha-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: var(--t-meta);
    font-weight: 600;
    color: var(--ink-2);
}
.mecha-note.is-due { border-color: #f5d98a; background: #fff8e1; color: #6b4d00; }

/* Key / value rows on a details card. The label is the quiet half. */
.mecha-kv {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 8px 12px;
    margin: 0;
}
.mecha-kv dt {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: 2px;
}
.mecha-kv dd {
    margin: 0;
    font-size: var(--t-body);
    line-height: 1.35;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.mecha-kv dd small {
    display: block;
    font-size: var(--t-label);
    color: var(--ink-3);
}
.mecha-kv .sep, .mecha-na { color: var(--ink-3); }

/* The return's history, oldest first, as a spine of dots. */
.mecha-hist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mecha-hist li {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 0 0 14px 0;
}
.mecha-hist li:last-child { padding-bottom: 0; }
.mecha-hist li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 5px; top: 14px; bottom: 0;
    width: 2px;
    background: var(--line);
}
.mecha-hist-dot {
    flex: 0 0 auto;
    width: 12px; height: 12px;
    margin-top: 3px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--line);
}
.mecha-hist-txt { min-width: 0; }
.mecha-hist-txt .nm { display: block; font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.mecha-hist-txt .by { font-weight: 400; color: var(--ink-2); }
.mecha-hist-txt .mt { display: block; font-size: var(--t-label); color: var(--ink-3); }
.mecha-hist-txt .rm { display: block; margin-top: 3px; font-size: var(--t-meta); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Status counts

   Six full-width cards, roughly 180px each, mostly whitespace, with "218 Tasks"
   set at the same size as "No Task". A count is a number - show it as one, and
   fit the set on one screen.
   -------------------------------------------------------------------------- */
.mecha-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 6px;
}
.mecha-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: 68px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    text-decoration: none;
}
.mecha-stat:active { background: var(--brand-wash); }
.mecha-stat .n {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.mecha-stat .l {
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Badges and chips
   -------------------------------------------------------------------------- */
.mecha-badge {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.3;
    white-space: nowrap;
}
/* A reference number, not prose: tabular figures so a column of them lines up. */
.mecha-chip.is-code {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    color: var(--ink-3);
}
.mecha-chip {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-chip);
    background: #fbfafd;
    font-size: var(--t-micro);
    font-weight: 600;
    color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Forms

   One size for every control on the phone: 46px tall so a thumb can hit it,
   16px text so iOS does not zoom the page on focus.
   -------------------------------------------------------------------------- */
.mecha-field { margin-bottom: 12px; }
.mecha-field > label,
label.mecha-label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--t-label);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.mecha-field .form-control,
.mecha-field .form-select,
input.mecha-input,
select.mecha-input {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: 16px;
    color: var(--ink);
}
.mecha-field .form-control:focus,
input.mecha-input:focus {
    border-color: var(--brand-2);
    box-shadow: 0 0 0 3px rgba(84, 18, 181, .12);
    outline: 0;
}
.mecha-field .form-control[readonly] {
    background: #f3f1f8;
    color: var(--ink-2);
}
/* A read-only field the engineer is meant to read, not a disabled one. */
.mecha-field .form-control.is-computed {
    background: #f3f1f8;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Two fields side by side, for numbers that belong together. */
.mecha-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Three read-outs in a row: quantity is what the engineer types, the rest is
   arithmetic and should not look like more work to do. */
.mecha-row3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.mecha-row3 .mecha-field > label {
    font-size: var(--t-micro);
    letter-spacing: .04em;
}
.mecha-row3 .form-control {
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
}

/* A part already recorded against the job. */
.mecha-part {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}
.mecha-part-txt { min-width: 0; flex: 1 1 auto; }
.mecha-part-txt .nm {
    display: block;
    font-size: var(--t-body);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}
.mecha-part-txt .mt {
    display: block;
    margin-top: 2px;
    font-size: var(--t-label);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.mecha-part-txt .mt strong { color: var(--ink-2); }
.mecha-part-txt .sep { opacity: .5; }
.mecha-part-del {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fdf3f3;
    color: var(--danger);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Overrides on the old theme

   .details_form_sec paints a #e3e3e3 slab behind any form, so a form sat on a
   grey panel two shades off the page while every card beside it was white.
   And select2's single-select inherits the theme's ~20px .form-control text
   into a 44px line box, which clips the chosen option through the middle -
   visible on "Select a part from your stock".
   -------------------------------------------------------------------------- */
.details_form_sec {
    margin: 0 0 12px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--card);
}
/* Centre the chosen option with flex rather than a fixed line-height. The
   theme sets line-height:44px on a span whose box is ~32px tall, so the glyphs
   were drawn on a taller line than their own box and the control clipped their
   bottoms - "Select company" and "Select a part from your stock" were both cut
   through the descenders. */
.select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 46px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    width: 100%;
    /* The theme puts a border on this span, which drew a stray hairline across
       the middle of every select - 13px above the control's real bottom edge. */
    border: 0;
    padding: 0 32px 0 12px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--ink-3);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    right: 6px;
}

/* The search row. Search was #d1da5b lime with white text - about 1.8:1
   contrast, so the icon was barely there - sitting next to a purple reset in a
   colour that appears nowhere else in the product. Search is the action, so it
   takes the brand; reset is secondary and reads as secondary. */
.search_btn_clr {
    background: var(--brand);
    color: #fff;
}
.reset_btn_clr {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--brand);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.mecha-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--brand);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}
.mecha-btn:active { transform: translateY(1px); }
.mecha-btn.is-quiet {
    border-color: var(--line);
    background: #fff;
    color: var(--ink);
}
.mecha-btn.is-go     { background: #1b7f2c; }
.mecha-btn.is-danger { border-color: #f0c9c9; background: #fff; color: var(--danger); }
.mecha-btn[disabled],
.mecha-btn.is-off { opacity: .45; pointer-events: none; }

/* Empty states: a sentence, not a card pretending to hold data. */
.mecha-empty {
    padding: 28px 16px;
    border: 1px dashed var(--line);
    border-radius: var(--r-card);
    background: #fff;
    text-align: center;
    font-size: var(--t-body);
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Accessibility floor
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--brand-2);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ==========================================================================
   v3 shell - the app chrome the client sees on every screen (2026-09-06)

   Direction: the brand purple owns the top of every screen as ONE field - the
   greeting, the search and, on the dashboard, the engineer's instrument panel
   sit inside it. Below it the ground is off-white and the work is white cards.
   Colour is spent on the field and on states (amber = needs him, red = out),
   never scattered. Motion is one moment: the four numbers count in on load.
   Light only, by scene: a field engineer reads this outdoors in daylight.
   ========================================================================== */

/* --- header band -------------------------------------------------------- */
div.user_search {
    background: var(--brand);
    padding: 0;
}
.user_search > .container {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 12px;
}
.user_search .top_sec {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
}
a.mecha-avatar, span.mecha-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
}
a.mecha-avatar:active { background: rgba(255,255,255,.26); }
.mecha-greet { flex: 1 1 auto; min-width: 0; }
/* Greeting small and tinted, the NAME as the line that carries weight - a
   name must never truncate to "Di..." on a 320px phone, a greeting may. */
.mecha-greet .greet {
    margin: 0;
    font-size: 12px;
    line-height: 1.2;
    color: var(--brand-tint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mecha-greet .hi {
    margin: 1px 0 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mecha-greet .meta {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.3;
    color: var(--brand-tint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mecha-greet .meta b { color: #fff; font-weight: 600; }
.mecha-greet .meta .dot { margin: 0 5px; opacity: .6; }
a.mecha-bell {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    text-decoration: none;
}
a.mecha-bell:active { background: rgba(255,255,255,.18); }
a.mecha-bell svg { width: 20px; height: 20px; }

/* the search row, white on the field */
.seaech_sec .input-group {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(20,8,45,.28);
}
.seaech_sec .input-group .form-control {
    min-height: 46px;
    border: 0;
    box-shadow: none;
    font-size: 16px;
    color: var(--ink);
    padding-left: 14px;
}
.seaech_sec .input-group .form-control::placeholder { color: var(--ink-3); }
.seaech_sec .input-group .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    border: 0;
    border-radius: 0;
    padding: 0;
}
.seaech_sec .input-group .btn svg { width: 20px; height: 20px; }
.seaech_sec .search_btn_clr { background: var(--brand-2); color: #fff; }
.seaech_sec .reset_btn_clr  { background: #fff; color: var(--brand); border-left: 1px solid var(--line) !important; }

/* every screen starts under the fixed band */
.dashboard_sec {
    margin-top: var(--hdr-h);
    margin-bottom: 0;
    padding-top: 12px;
}

/* --- the dashboard's instrument panel: the field continues ------------- */
.dashboard_sec.mecha-dash { padding-top: 0; }
.mecha-panel-wrap {
    position: relative;
    overflow: hidden;
    margin: 0 -12px 16px;
    padding: 2px 12px 16px;
    background: var(--brand);
    border-radius: 0 0 24px 24px;
    color: #fff;
}
.mecha-panel { position: relative; }
.mecha-panel .mecha-me-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0 12px;
}
.mecha-panel .who { min-width: 0; font-size: 13px; line-height: 1.35; color: var(--brand-tint); }
.mecha-panel .who b { display: block; font-size: 14px; font-weight: 600; color: #fff; }
a.mecha-callbtn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--brand);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    transition: transform .12s ease-out, box-shadow .12s ease-out;
}
a.mecha-callbtn:active { transform: translateY(1px) scale(.98); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
a.mecha-callbtn svg { width: 18px; height: 18px; }

.mecha-cells {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
a.mecha-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 3px;
    min-height: 104px;
    padding: 14px 14px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    text-decoration: none;
    transition: background .12s ease-out, transform .12s ease-out;
}
a.mecha-cell:active { background: rgba(255,255,255,.22); transform: scale(.985); }
.mecha-cell .ic {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    color: var(--brand-tint);
}
.mecha-cell .ic svg { width: 18px; height: 18px; }
.mecha-cell .n {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    min-width: 2ch;              /* the count-up must not reflow the label */
}
.mecha-cell .l { font-size: 13px; font-weight: 600; line-height: 1.25; color: #fff; }
.mecha-cell .s { font-size: 12px; line-height: 1.3; color: var(--brand-tint); }
/* needs HIM: amber */
a.mecha-cell.is-due { background: rgba(255,213,74,.14); border-color: rgba(255,213,74,.45); }
a.mecha-cell.is-due .n, a.mecha-cell.is-due .ic { color: var(--amber); }
a.mecha-cell.is-due .ic { background: rgba(255,213,74,.18); }
/* stopping him: red */
a.mecha-cell.is-alert { background: rgba(255,138,138,.14); border-color: rgba(255,138,138,.42); }
a.mecha-cell.is-alert .n, a.mecha-cell.is-alert .ic { color: #ffb3b3; }
a.mecha-cell.is-alert .ic { background: rgba(255,138,138,.18); }

/* status chips inside the field */
.mecha-panel .mecha-seg { margin: 12px 0 0; padding-bottom: 0; }
.mecha-panel .mecha-seg > a {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.2);
    color: #fff;
}
.mecha-panel .mecha-seg > a b { color: #fff; }

/* --- a row that is a button, not an underlined sentence ----------------- */
a.mecha-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
    transition: background .12s ease-out;
}
a.mecha-row:active { background: var(--brand-wash); }
.mecha-row .ic {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--brand-wash);
    color: var(--brand);
}
.mecha-row .ic svg { width: 20px; height: 20px; }
.mecha-row .tx { flex: 1 1 auto; min-width: 0; }
.mecha-row .tx b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.mecha-row .tx span { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-3); }
.mecha-row .chev { flex: 0 0 auto; display: flex; color: var(--ink-3); }
.mecha-row .chev svg { width: 20px; height: 20px; }

/* --- an empty state that says what to do next --------------------------- */
.mecha-empty.is-teach {
    padding: 24px 18px 20px;
    border-style: solid;
}
.mecha-empty .ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
    border-radius: 16px;
    background: var(--brand-wash);
    color: var(--brand);
}
.mecha-empty .ic svg { width: 24px; height: 24px; }
.mecha-empty h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--ink); }
.mecha-empty p  { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.mecha-empty .mecha-btn { display: inline-flex; width: auto; min-height: 42px; padding: 0 18px; font-size: 14px; }

/* card foot icons drawn from the same set as everything else */
.mecha-sla svg, .mecha-chip svg { width: 14px; height: 14px; vertical-align: -2px; }
a.mecha-call svg { width: 16px; height: 16px; }
.mecha-h-act svg { width: 16px; height: 16px; vertical-align: -3px; }

/* --- tab bar ------------------------------------------------------------ */
.m_footer {
    height: auto;
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(27,16,53,.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.m_footer .menu {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 4px;
    align-items: flex-end;
}
.m_footer .menu a {
    position: relative;
    flex: 1 1 0;
    width: auto;
    min-height: 60px;
    justify-content: flex-end;
    gap: 5px;
    padding: 0 2px 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.15;
    color: var(--ink-3);
    text-align: center;
    transition: color .15s ease-out;
}
.m_footer .menu a span.icon { display: flex; margin: 0; }
.m_footer .menu a span.icon svg { width: 24px; height: 24px; margin: 0; }
.m_footer .menu a.active { color: var(--brand); }
.m_footer .menu a.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 28px;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 0 0 3px 3px;
    background: var(--brand);
}
.m_footer .menu a.btn {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    min-height: 0;
    margin: 0;
    padding: 0;
    justify-content: center;
    transform: translateY(-20px);
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 8px 20px rgba(52,12,111,.35), 0 0 0 6px var(--bg);
    transition: transform .15s ease-out, background .15s ease-out;
}
.m_footer .menu a.btn:active { transform: translateY(-19px) scale(.96); }
.m_footer .menu a.btn.is-on { background: var(--brand-2); }
.m_footer .menu a.btn span.icon svg { width: 26px; height: 26px; color: #fff; }
.m_footer .menu a.btn:hover { background: var(--brand); box-shadow: 0 8px 20px rgba(52,12,111,.35), 0 0 0 6px var(--bg); }

/* icons inside buttons and notes size with their label, not the SVG default */
.mecha-btn svg  { width: 18px; height: 18px; flex: 0 0 auto; }
.mecha-note svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Hover on the brand-coloured controls. Bootstrap's reboot recolours every <a>
   on hover to its link colour, which turned the white label of "Open To do"
   purple on a purple button - invisible. Every anchor-shaped control keeps
   its own colours on hover and focus.
   -------------------------------------------------------------------------- */
.mecha-btn:hover, .mecha-btn:focus { color: #fff; background: var(--brand-2); text-decoration: none; }
.mecha-btn.is-go:hover, .mecha-btn.is-go:focus { background: #166a25; color: #fff; }
.mecha-btn.is-quiet:hover, .mecha-btn.is-quiet:focus { background: var(--brand-wash); color: var(--ink); }
.mecha-btn.is-danger:hover, .mecha-btn.is-danger:focus { background: #fdf3f3; color: var(--danger); }
a.mecha-cell:hover, a.mecha-cell:focus { color: #fff; background: rgba(255,255,255,.16); text-decoration: none; }
a.mecha-callbtn:hover, a.mecha-callbtn:focus { color: var(--brand); text-decoration: none; }
a.mecha-row:hover, a.mecha-row:focus { color: var(--ink); background: var(--brand-wash); text-decoration: none; }
a.mecha-call:hover, a.mecha-call:focus { color: var(--brand); text-decoration: none; }
a.mecha-call.is-go:hover, a.mecha-call.is-go:focus { color: #fff; }
a.mecha-job:hover, a.mecha-job:focus { color: inherit; text-decoration: none; }
.mecha-h > .mecha-h-act:hover, .mecha-h > .mecha-h-act:focus { color: var(--brand); text-decoration: none; }
.mecha-seg > a:hover, .mecha-seg > a:focus { color: var(--ink); text-decoration: none; }
.mecha-seg > a.is-on:hover, .mecha-seg > a.is-on:focus { color: #fff; }
a.mecha-avatar:hover, a.mecha-bell:hover { color: #fff; text-decoration: none; }
.m_footer .menu a:hover { color: var(--ink-3); }
.m_footer .menu a.active:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   R & R - the spare the company wants back. Light grey, on the client's
   instruction: the tag is information, not a task - amber on these screens
   means "needs your action", and the tag must not compete with it.
   -------------------------------------------------------------------------- */
.mecha-chip.is-rr {
    border-color: #9a9a9c;
    background: #b4b4b5;          /* the client's own grey; dark ink on it is 7.7:1 */
    color: #1b1035;
    font-weight: 700;
    letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   Hand-over mode: two choices, each a full-width option the thumb can hit.
   A real radio input drives it; the label is what you see.
   -------------------------------------------------------------------------- */
.mecha-choice { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.mecha-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mecha-choice label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 74px;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: border-color .12s ease-out, background .12s ease-out, color .12s ease-out;
}
.mecha-choice label svg { width: 22px; height: 22px; }
.mecha-choice label small { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.mecha-choice input:checked + label {
    border-color: var(--brand);
    background: var(--brand-wash);
    color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand) inset;
}
.mecha-choice input:focus-visible + label { outline: 3px solid var(--brand-2); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Menu screen: the profile card and the grouped list, in the same idiom.
   -------------------------------------------------------------------------- */
.mecha-profile { display: flex; align-items: center; gap: 12px; }
.mecha-profile .mecha-avatar { width: 52px; height: 52px; font-size: 18px; background: var(--brand); border-color: var(--brand); }
.mecha-profile .nm { min-width: 0; flex: 1; }
.mecha-profile .nm b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.mecha-profile .nm span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.mecha-profile-meta { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.mecha-profile-meta .r { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); }
.mecha-profile-meta .r b { font-weight: 600; color: var(--ink); }
.mecha-profile-meta .r a { color: var(--brand); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.mecha-profile-meta .r a svg { width: 16px; height: 16px; }
.mecha-list { margin: 0 0 12px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); overflow: hidden; }
.mecha-list a.mecha-row { margin: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); min-height: 54px; }
.mecha-list a.mecha-row:last-child { border-bottom: 0; }
.mecha-list a.mecha-row .ic { width: 36px; height: 36px; border-radius: 10px; }
.mecha-list a.mecha-row .ic svg { width: 18px; height: 18px; }
.mecha-list a.mecha-row .tx b { font-size: 15px; font-weight: 500; }
.mecha-list a.mecha-row.is-danger .ic { background: #fdf3f3; color: var(--danger); }
.mecha-list a.mecha-row.is-danger .tx b { color: var(--danger); }
.mecha-list a.mecha-row .cnt { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* The dispatch intimation row: amber, like the cell it explains. */
a.mecha-row.is-due { border-color: #f5d98a; background: #fff8e1; }
a.mecha-row.is-due .ic { background: #ffecb3; color: #6b4d00; }
a.mecha-row.is-due .tx b { color: #4a3600; }
a.mecha-row.is-due .tx span { color: #7a6200; }
a.mecha-row.is-due:hover, a.mecha-row.is-due:focus { background: #fff2cc; color: var(--ink); }