html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

/* The one survivor of the legacy back-office mirror styles: a red badge for Job Alert and
   In Jeopardy on the job screen. Renamed into the mwm-* system; the rest of that block, and
   the teal variables that existed only to serve it, are gone. */
.mwm-warn-badge {
    display: inline-block;
    background: #DC2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 8px;
    margin-right: 6px;
}

.mwm-tab-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-bottom: 10px;
}

/* Job actions bar */
.mwm-actions-bar {
    background: white;
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.06));
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px;
    margin-top: 16px;
}
.mwm-actions-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #94A3B8;
    margin-right: 8px;
}

.mwm-btn-danger {
    background: white;
    color: #DC2626;
    border: 1px solid #FECACA;
}
.mwm-btn-danger:hover { background: #FEF2F2; border-color: #DC2626; }

/* Floating side rail + slide-over panels (job insights) */
.mwm-side-rail {
    position: fixed;
    right: 16px;
    top: 45%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 60;
}
.mwm-rail-btn {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--border, #E2E8F0);
    background: white;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15,23,42,.12);
    transition: transform .12s, color .12s, border-color .12s;
}
.mwm-rail-btn:hover { transform: scale(1.07); color: var(--accent, #1F4E79); border-color: var(--accent, #1F4E79); }

/* Inline round icon buttons (property quick actions) — same language as the rail */
.mwm-quick-btn-row { display: flex; gap: 8px; justify-content: flex-end; }
.mwm-quick-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border, #E2E8F0);
    background: white;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15,23,42,.08);
    transition: transform .12s, color .12s, border-color .12s;
}
.mwm-quick-btn:hover { transform: scale(1.08); color: var(--accent, #1F4E79); border-color: var(--accent, #1F4E79); }
.mwm-rail-btn.active { background: var(--accent, #1F4E79); color: white; border-color: var(--accent, #1F4E79); }
.mwm-rail-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #DC2626;
    color: white;
    font-size: 10.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mwm-rail-badge.neutral { background: #64748B; }

.mwm-rail-divider {
    height: 1px;
    margin: 2px 6px;
    background: var(--border, #E2E8F0);
}

/* Modal dialogs */
.mwm-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.35);
    z-index: 80;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.mwm-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(15,23,42,.3);
    width: min(560px, 96vw);
    max-height: 90vh;
    display: flex; flex-direction: column;
    animation: mwm-modal-in .15s ease-out;
}
@keyframes mwm-modal-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.mwm-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border-soft, #EEF2F6);
}
.mwm-modal-title { font-size: 15px; font-weight: 700; }
.mwm-modal-body { padding: 18px 20px; overflow-y: auto; }
.mwm-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 20px; border-top: 1px solid var(--border-soft, #EEF2F6);
}
.mwm-form-row { margin-bottom: 14px; }
.mwm-form-row label { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 5px; }

/* ---- Per-column filter: operator button + value editors (ColumnFilterCell.razor) ---------- */

.mwm-colfilter { position: relative; display: flex; align-items: stretch; gap: 4px; }

/* The operator button. Narrow and quiet until the column is actually filtered — nine of these
   across a header row would otherwise read as nine things demanding attention. */
.mwm-colfilter-op {
    flex: 0 0 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border, #E2E8F0); border-radius: 6px;
    background: #fff; color: var(--text-3, #94A3B8);
    font-size: 11.5px; line-height: 1; cursor: pointer; padding: 0;
}
.mwm-colfilter-op:hover { border-color: var(--accent, #1F4E79); color: var(--accent, #1F4E79); }
.mwm-colfilter-op:focus-visible { outline: 2px solid var(--accent, #1F4E79); outline-offset: 1px; }

/* An active filter is worth seeing from across the row — it is the reason the count at the top
   of the page is smaller than someone expected. */
.mwm-colfilter.active > .mwm-colfilter-op {
    background: var(--accent, #1F4E79); border-color: var(--accent, #1F4E79); color: #fff;
}

.mwm-colfilter-values { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; }
.mwm-colfilter-values > .mwm-col-filter { min-width: 0; flex: 1 1 0; }

/* "Is blank" has no editor, so the cell says what it is doing instead of sitting empty. */
.mwm-colfilter-static {
    flex: 1 1 auto; align-self: center;
    font-size: 11.5px; color: var(--text-3, #94A3B8); font-style: italic;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mwm-colfilter-menu {
    position: absolute; z-index: 40; top: calc(100% + 4px); left: 0;
    min-width: 190px; padding: 4px;
    background: #fff; border: 1px solid var(--border, #E2E8F0); border-radius: 10px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .13);
}
.mwm-colfilter-menu .mwm-menu-item {
    display: flex; align-items: center; gap: 9px;
    width: 100%; font-size: 13px; text-align: left; white-space: nowrap;
}
.mwm-colfilter-menu .mwm-menu-item.sel { font-weight: 600; color: var(--accent, #1F4E79); }
.mwm-colfilter-menu .mwm-menu-item.danger { color: #DC2626; }
/* Fixed-width symbol column so the labels line up whatever glyph precedes them. */
.mwm-colfilter-sym {
    flex: 0 0 18px; text-align: center;
    color: var(--text-3, #94A3B8); font-size: 11.5px;
}
.mwm-colfilter-menu .mwm-menu-item.sel .mwm-colfilter-sym { color: inherit; }

/* Date and number inputs bring their own spinner and picker glyphs, which crowd a cell this
   narrow; the padding here leaves room for them without widening the column. */
.mwm-col-filter[type="date"]   { padding-right: 2px; }
.mwm-col-filter[type="number"] { padding-right: 2px; }
/* select needs the same box as the text input it replaces, or the filter row loses its line. */
select.mwm-col-filter { padding-right: 18px; background-position: right 3px center; }

/* Live-refresh strip (LiveRefresh.razor) — toggle, status, manual refresh. */
.mwm-live {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; color: var(--text-3, #94A3B8);
}
.mwm-live.compact .mwm-check-inline span { display: none; }
.mwm-live-stamp { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mwm-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #CBD5E1; flex: 0 0 7px; }
.mwm-live-dot.live    { background: #16A34A; }
.mwm-live-dot.paused  { background: #D97706; }
.mwm-live-dot.off     { background: #CBD5E1; }
.mwm-live-dot.pulsing { background: var(--accent, #1F4E79); animation: mwm-live-pulse 1.1s ease-in-out infinite; }
@keyframes mwm-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Someone watching a screen all day should not have a dot blinking at them. */
@media (prefers-reduced-motion: reduce) {
    .mwm-live-dot.pulsing { animation: none; }
}

/* Grouping inside a dialog: the four visit timestamps, and the yes/no answers taken on
   completion. A <fieldset> rather than a styled div because these really are groups of related
   controls and the legend names the group to a screen reader for free. */
.mwm-timeline {
    border: 1px solid var(--border-soft, #EEF2F6); border-radius: 10px;
    padding: 12px 14px 14px; margin: 0 0 14px;
}
.mwm-timeline > legend {
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-3, #94A3B8); padding: 0 6px;
}
/* Two across inside the dialog, one on a phone. The minimum is 165px rather than a rounder
   number because the modal gives this grid 375px: at 190px the pair needed 392px and silently
   collapsed to a single column, which is the layout it was meant to replace. */
.mwm-timeline-grid {
    display: grid; gap: 10px 12px;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}
.mwm-timeline-grid > label { display: block; }
.mwm-timeline-grid > label > span {
    display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 5px;
}
.mwm-timeline > .mwm-textarea,
.mwm-timeline > .mwm-select { margin: 8px 0 4px; }
.mwm-timeline > .mwm-form-note { margin: 0 0 4px; }

/* A checkbox and its label on one line, at the same left edge as everything else in the group —
   the three of these used to sit at three different indents with inline style overrides. */
.mwm-switch-row {
    display: flex; align-items: center; gap: 9px;
    font-size: 13.5px; color: var(--text-1, #0F172A);
    padding: 7px 0; cursor: pointer;
}
.mwm-switch-row input { accent-color: var(--accent, #1F4E79); cursor: pointer; margin: 0; }
.mwm-switch-row + .mwm-switch-row { border-top: 1px solid var(--border-soft, #EEF2F6); }
/* Selects and textareas must match, or they render taller than the inputs beside them
   (preview.css sets 11px/14px on all three; this block is what tightens them). */
.mwm-input,
.mwm-select,
.mwm-textarea {
    width: 100%; padding: 8px 11px; font-size: 13.5px; font-family: inherit;
    border: 1px solid var(--border, #E2E8F0); border-radius: 8px; background-color: white;
}
.mwm-select { padding-right: 32px; background-position: right 10px center; }
.mwm-input:focus,
.mwm-select:focus,
.mwm-textarea:focus { outline: none; border-color: var(--accent, #1F4E79); }

/* Single-column form: labels above controls, one field per row. */
.mwm-form-grid.mwm-form-stack {
    grid-template-columns: 1fr;
    max-width: 580px;
    gap: 15px;
}
.mwm-form-grid.mwm-form-stack .mwm-form-grid-2,
.mwm-form-grid.mwm-form-stack .mwm-form-grid-full { grid-column: 1 / -1; }
.mwm-rate-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border, #E2E8F0); border-radius: 8px; }
.mwm-rate-item {
    padding: 8px 11px; border-bottom: 1px solid var(--border-soft, #EEF2F6);
    cursor: pointer; font-size: 12.5px;
}
.mwm-rate-item:last-child { border-bottom: none; }
.mwm-rate-item:hover { background: var(--accent-soft, #EFF6FF); }
.mwm-rate-item.selected { background: var(--accent-soft, #EFF6FF); border-left: 3px solid var(--accent, #1F4E79); }

/* Job search — quick filter chips */
.mwm-chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.mwm-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    border: 1px solid var(--border, #E2E8F0); background: white; color: #475569;
    cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.mwm-chip:hover { border-color: var(--accent, #1F4E79); color: var(--accent, #1F4E79); }
.mwm-chip.active { background: var(--accent, #1F4E79); border-color: var(--accent, #1F4E79); color: white; }
.mwm-chip.danger.active { background: #DC2626; border-color: #DC2626; }
.mwm-chip.amber.active { background: #D97706; border-color: #D97706; }
.mwm-chip .chip-count {
    font-size: 11px; font-weight: 700;
    background: rgba(15,23,42,.08); border-radius: 999px; padding: 1px 7px;
}
.mwm-chip.active .chip-count { background: rgba(255,255,255,.25); }

/* Job search — inline flag badges on the reference cell */
.mwm-flags { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.mwm-flag {
    display: inline-flex; align-items: center; justify-content: center;
    height: 17px; padding: 0 6px; border-radius: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: .3px;
}
.mwm-flag.alert    { background: #FEF3C7; color: #92400E; }
.mwm-flag.jeopardy { background: #FEE2E2; color: #991B1B; }
.mwm-flag.varied   { background: #EDE9FE; color: #5B21B6; }

/* Priority pills */
.mwm-prio {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    background: #F1F5F9; color: #334155;
}
.mwm-prio.emergency, .mwm-prio.immediate, .mwm-prio.ooh { background: #FEE2E2; color: #991B1B; }
.mwm-prio.urgent { background: #FFEDD5; color: #9A3412; }
.mwm-prio.routine, .mwm-prio.servicing { background: #DCFCE7; color: #166534; }

/* Grouped table rows */
.mwm-table tbody tr.mwm-group-row td {
    background: #F1F5F9;
    font-size: 12.5px;
    color: #334155;
    padding: 8px 14px;
    border-bottom: 1px solid #E2E8F0;
    position: sticky;
}
.mwm-table tbody tr.mwm-group-row:hover td { background: #F1F5F9; }

/* Diary — engineer picker + grid layout */
.mwm-diary-layout { display: flex; gap: 16px; align-items: flex-start; }
.mwm-eng-picker {
    flex: 0 0 250px;
    background: white;
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.06));
    display: flex; flex-direction: column;
    max-height: 72vh;
    overflow: hidden;
}
.mwm-eng-picker-head {
    padding: 14px;
    border-bottom: 1px solid var(--border-soft, #EEF2F6);
}
.mwm-eng-list { overflow-y: auto; flex: 1 1 auto; padding: 6px; }
.mwm-eng-item {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 12.5px;
}
.mwm-eng-item:hover { background: var(--accent-soft, #EFF6FF); }
.mwm-eng-item input { cursor: pointer; accent-color: var(--accent, #1F4E79); }
.mwm-eng-item .eng-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwm-eng-item .eng-count {
    font-size: 11px; font-weight: 700; color: #64748B;
    background: #F1F5F9; border-radius: 999px; padding: 1px 8px;
}
.mwm-diary-main { flex: 1 1 auto; min-width: 0; overflow-x: auto; }

/* Bulk scheduler */
.mwm-bulk-layout { display: flex; gap: 12px; align-items: stretch; }
.mwm-bulk-panel {
    flex: 1 1 0; min-width: 0;
    background: white;
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.06));
    display: flex; flex-direction: column;
    overflow: hidden;
}
.mwm-bulk-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--border-soft, #EEF2F6);
}
.mwm-bulk-panel-title { font-size: 14px; font-weight: 700; }
.mwm-bulk-joblist { overflow-y: auto; max-height: 62vh; }
.mwm-bulk-joblist .mwm-table th { position: sticky; top: 0; z-index: 1; }
.mwm-row-selected td { background: var(--accent-soft, #EFF6FF) !important; }

.mwm-bulk-gutter {
    flex: 0 0 150px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}

.mwm-bulk-settings {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 16px;
    font-size: 12.5px; color: #475569;
    background: #F8FAFC; border-bottom: 1px solid var(--border-soft, #EEF2F6);
}
.mwm-input-xs { padding: 4px 8px; font-size: 12px; width: auto; }

.mwm-bulk-day { overflow-y: auto; max-height: 52vh; padding: 8px 12px; }
.mwm-slot {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 8px;
    border: 1px dashed var(--border, #E2E8F0);
    margin-bottom: 6px;
    min-height: 44px;
}
.mwm-slot.filled { border-style: solid; border-color: var(--accent, #1F4E79); background: var(--accent-soft, #EFF6FF); }
.mwm-slot-time {
    flex: 0 0 58px; font-size: 12px; font-weight: 700; color: #475569;
    display: flex; flex-direction: column; line-height: 1.2;
}
.mwm-slot-time span { font-weight: 400; color: #94A3B8; font-size: 11px; }
.mwm-slot-job { flex: 1; min-width: 0; font-size: 12.5px; }
.mwm-slot-addr { font-size: 11.5px; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwm-slot-free { flex: 1; font-size: 12px; color: #CBD5E1; }

.mwm-bulk-confirm {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 16px; border-top: 1px solid var(--border-soft, #EEF2F6);
}

@media (max-width: 1100px) {
    .mwm-bulk-layout { flex-direction: column; }
    .mwm-bulk-gutter { flex: 0 0 auto; flex-direction: row; }
}

/* PPM schedules */
.mwm-ppm-layout { display: flex; gap: 16px; align-items: flex-start; }
.mwm-ppm-list-panel {
    flex: 0 0 320px;
    background: white;
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.06));
    display: flex; flex-direction: column; overflow: hidden;
    max-height: 76vh;
}
.mwm-ppm-list { overflow-y: auto; padding: 8px; }
.mwm-ppm-card {
    border: 1px solid var(--border-soft, #EEF2F6);
    border-radius: 9px;
    padding: 11px 13px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.mwm-ppm-card:hover { border-color: var(--accent, #1F4E79); }
.mwm-ppm-card.active { border-color: var(--accent, #1F4E79); background: var(--accent-soft, #EFF6FF); }
.mwm-ppm-card-title { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.mwm-ppm-card-meta { font-size: 12px; color: #64748B; margin: 3px 0 7px; }
.mwm-ppm-card-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mwm-ppm-count {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 600; color: #475569;
    margin-left: auto;
}

.mwm-ppm-detail-panel {
    flex: 1 1 auto; min-width: 0;
    background: white;
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.06));
    overflow: hidden;
}
.mwm-ppm-detail-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--border-soft, #EEF2F6);
}
.mwm-ppm-detail-title { font-size: 16px; font-weight: 700; }
.mwm-overdue { color: #B45309; font-weight: 600; }

/* Servicing centre */
.mwm-svc-kpi { cursor: pointer; }
.mwm-svc-kpi.active { outline: 2px solid var(--accent, #1F4E79); outline-offset: -1px; }
.mwm-due-soon { color: #B45309; font-weight: 600; }
.mwm-overdue { color: #DC2626; font-weight: 600; }

.mwm-slideover-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.25);
    z-index: 70;
}
.mwm-slideover {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(460px, 92vw);
    background: white;
    box-shadow: -12px 0 40px rgba(15,23,42,.18);
    z-index: 71;
    display: flex;
    flex-direction: column;
    animation: mwm-slide-in .18s ease-out;
}
@keyframes mwm-slide-in {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.mwm-slideover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft, #EEF2F6);
}
.mwm-slideover-title { font-size: 15px; font-weight: 700; color: #0F172A; }
.mwm-slideover-body { flex: 1; overflow-y: auto; padding: 16px 20px; }

.mwm-alert-card {
    border: 1px solid var(--border-soft, #EEF2F6);
    border-left: 3px solid #DC2626;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
}
.mwm-alert-card.actioned { border-left-color: #16A34A; opacity: .75; }

.mwm-pl-footer {
    border-top: 1px solid var(--border-soft, #EEF2F6);
    margin-top: 14px;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    font-size: 14px;
}


/* ============================ Locations map ============================ */
.mwm-map-toolbar {
    display: flex; align-items: center; gap: 16px;
    background: white;
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.06));
    padding: 9px 14px;
    margin-bottom: 12px;
}
.mwm-tb-sep { width: 1px; height: 20px; background: #E2E8F0; }
.mwm-check-inline {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: #334155; cursor: pointer; user-select: none;
}
.mwm-check-inline input { accent-color: var(--accent, #1F4E79); cursor: pointer; }

/* Segmented control (Engineers | Jobs) */
.mwm-seg { display: inline-flex; background: #F1F5F9; border-radius: 9px; padding: 3px; gap: 2px; }
.mwm-seg-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: none; background: transparent; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: #475569;
    padding: 6px 14px; border-radius: 7px;
}
.mwm-seg-btn:hover { color: #1E293B; }
.mwm-seg-btn.active { background: white; color: var(--accent, #1F4E79); box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.08)); }

.mwm-map-layout { display: flex; gap: 16px; align-items: stretch; height: 72vh; }
.mwm-map-layout .mwm-eng-picker { max-height: none; }
.mwm-map-wrap { flex: 1 1 auto; min-width: 0; position: relative; }
.mwm-map {
    width: 100%; height: 100%;
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.06));
    background: #E8EEF3; z-index: 0;
}

/* Left list rows */
.mwm-loc-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 8px; border-radius: 8px; cursor: pointer;
}
.mwm-loc-item:hover { background: var(--accent-soft, #EFF6FF); }
.mwm-loc-item.active { background: var(--accent-soft, #EFF6FF); box-shadow: inset 2px 0 0 var(--accent, #1F4E79); }
.mwm-loc-item input { accent-color: var(--accent, #1F4E79); cursor: pointer; }
.mwm-loc-swatch {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    color: white; font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
    box-shadow: 0 1px 2px rgba(15,23,42,.2);
}
.mwm-loc-swatch.lg { width: 38px; height: 38px; border-radius: 9px; font-size: 13px; }
.mwm-loc-text { flex: 1 1 auto; min-width: 0; }
.mwm-loc-name { font-size: 12.5px; font-weight: 600; color: #1E293B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwm-loc-sub { font-size: 11px; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwm-loc-count {
    flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #64748B;
    background: #F1F5F9; border-radius: 999px; padding: 1px 8px;
}

/* Floating detail card over the map */
.mwm-map-card {
    position: absolute; left: 16px; bottom: 16px; z-index: 500;
    width: 288px; background: white;
    border-radius: 12px; box-shadow: 0 8px 28px rgba(15,23,42,.22);
    padding: 14px 16px;
}
.mwm-map-card-x {
    position: absolute; top: 8px; right: 10px;
    border: none; background: transparent; font-size: 20px; line-height: 1;
    color: #94A3B8; cursor: pointer;
}
.mwm-map-card-x:hover { color: #475569; }
.mwm-map-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.mwm-map-card-title { font-size: 15px; font-weight: 700; color: #0F172A; }
.mwm-map-card-dl { display: grid; grid-template-columns: 84px 1fr; gap: 6px 10px; margin: 0; font-size: 12.5px; }
.mwm-map-card-dl dt { color: #64748B; }
.mwm-map-card-dl dd { margin: 0; color: #1E293B; font-weight: 500; }

/* Leaflet div-icon pins */
.mwm-pin-wrap { background: transparent; border: none; }
.mwm-pin {
    width: 28px; height: 28px; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid white; box-shadow: 0 2px 5px rgba(15,23,42,.4);
    display: flex; align-items: center; justify-content: center;
}
.mwm-pin-label {
    transform: rotate(45deg);
    color: white; font-size: 10px; font-weight: 800; letter-spacing: .2px;
    text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.mwm-pin-stem { display: none; }

/* ============================ Document Library ============================ */
/* Clickable stat tile (wraps the <Stat> card) */
.mwm-stat-btn { all: unset; display: block; cursor: pointer; border-radius: var(--radius-lg, 12px); }
.mwm-stat-btn:focus-visible { outline: 2px solid var(--accent, #1F4E79); outline-offset: 2px; }
.mwm-stat-btn .mwm-stat-card { transition: box-shadow .12s, transform .12s; height: 100%; }
.mwm-stat-btn:hover .mwm-stat-card { box-shadow: 0 4px 14px rgba(15,23,42,.10); }
.mwm-stat-btn.active .mwm-stat-card { box-shadow: 0 0 0 2px var(--accent, #1F4E79) inset, var(--shadow-sm, 0 1px 2px rgba(15,23,42,.06)); }

/* Breadcrumb */
.mwm-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.mwm-crumb {
    display: inline-flex; align-items: center; gap: 6px;
    border: none; background: transparent; cursor: pointer;
    font-size: 13px; font-weight: 600; color: #64748B;
    padding: 4px 8px; border-radius: 7px;
}
.mwm-crumb:hover { background: #F1F5F9; color: var(--accent, #1F4E79); }
.mwm-crumb.current { color: #0F172A; cursor: default; }
.mwm-crumb.current:hover { background: transparent; }
.mwm-crumb-sep { color: #CBD5E1; font-size: 13px; }

/* Folder grid (clients / jobs) */
.mwm-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.mwm-folder-card {
    display: flex; align-items: flex-start; gap: 12px; text-align: left;
    border: 1px solid var(--border-soft, #EEF2F6); background: white;
    border-radius: 11px; padding: 14px; cursor: pointer;
    transition: box-shadow .12s, border-color .12s, transform .05s;
}
.mwm-folder-card:hover { border-color: #CBD5E1; box-shadow: 0 4px 14px rgba(15,23,42,.09); }
.mwm-folder-card:active { transform: translateY(1px); }
.mwm-folder-ico {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: #EFF4FB; color: var(--accent, #1F4E79);
}
.mwm-folder-ico.job { background: #FEF6E7; color: #B45309; }
.mwm-folder-body { min-width: 0; flex: 1 1 auto; }
.mwm-folder-name { font-size: 13.5px; font-weight: 700; color: #1E293B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwm-folder-meta { font-size: 11.5px; color: #64748B; margin-top: 2px; }
.mwm-folder-sub { font-size: 11.5px; color: #94A3B8; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pager */
.mwm-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 12.5px; }

/* Document cards (job leaf) */
.mwm-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.mwm-doc-card {
    display: flex; gap: 12px; align-items: flex-start;
    border: 1px solid var(--border-soft, #EEF2F6); background: white;
    border-radius: 11px; padding: 12px;
}
.mwm-doc-thumb {
    position: relative; flex: 0 0 auto; width: 50px; height: 50px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: #F1F5F9; color: #64748B;
}
.mwm-doc-thumb.photo   { background: #ECFDF5; color: #059669; }
.mwm-doc-thumb.cert    { background: #EFF4FB; color: #1F4E79; }
.mwm-doc-thumb.invoice { background: #FEF6E7; color: #B45309; }
.mwm-doc-badge {
    position: absolute; right: -5px; bottom: -5px;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #1F4E79; color: white; border: 2px solid white;
}
.mwm-doc-info { min-width: 0; flex: 1 1 auto; }
.mwm-doc-title { font-size: 12.5px; font-weight: 600; color: #1E293B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwm-doc-type { font-size: 11px; color: #64748B; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwm-doc-foot { font-size: 11px; color: #94A3B8; margin-top: 3px; }
.mwm-doc-foot.muted { color: #B6C0CD; }
.mwm-doc-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mwm-ext-chip {
    font-size: 9.5px; font-weight: 800; letter-spacing: .4px; color: #475569;
    background: #F1F5F9; border-radius: 5px; padding: 2px 6px;
}

/* ============================ Administration ============================ */
.mwm-admin-section { margin-bottom: 22px; }
.mwm-admin-section-label {
    font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: #94A3B8; margin: 0 2px 10px;
}
.mwm-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.mwm-admin-card {
    display: flex; align-items: flex-start; gap: 12px; text-align: left;
    border: 1px solid var(--border-soft, #EEF2F6); background: white;
    border-radius: 11px; padding: 14px; cursor: pointer;
    transition: box-shadow .12s, border-color .12s, transform .05s;
}
.mwm-admin-card:hover { border-color: #CBD5E1; box-shadow: 0 4px 14px rgba(15,23,42,.09); }
.mwm-admin-card:active { transform: translateY(1px); }
.mwm-admin-card.soon { opacity: .72; }
.mwm-admin-card.soon:hover { opacity: 1; }
.mwm-admin-ico {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: #EFF4FB; color: var(--accent, #1F4E79);
}
.mwm-admin-card-body { flex: 1 1 auto; min-width: 0; }
.mwm-admin-card-title { font-size: 13.5px; font-weight: 700; color: #1E293B; display: flex; align-items: center; gap: 8px; }
.mwm-admin-card-sub { font-size: 11.5px; color: #64748B; margin-top: 3px; line-height: 1.45; }
.mwm-admin-count {
    flex: 0 0 auto; align-self: center;
    font-size: 12px; font-weight: 700; color: #475569;
    background: #F1F5F9; border-radius: 999px; padding: 2px 10px;
}
.mwm-soon-tag {
    font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
    color: #B45309; background: #FEF3C7; border-radius: 5px; padding: 1px 6px;
}

/* Lookup table extras */
.mwm-row-muted td { color: #94A3B8; }
.mwm-row-muted td:first-child { opacity: .8; }
.mwm-tick { color: #16A34A; font-weight: 800; }
.mwm-swatch-inline {
    display: inline-block; width: 14px; height: 14px; border-radius: 4px;
    vertical-align: middle; margin-right: 7px; border: 1px solid rgba(15,23,42,.12);
}

/* ---- Profile master-detail ---- */
.mwm-profile-row {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 9px 10px; border: none; background: transparent; cursor: pointer;
    border-radius: 8px; text-align: left;
}
.mwm-profile-row:hover { background: var(--accent-soft, #EFF6FF); }
.mwm-profile-row.active { background: var(--accent-soft, #EFF6FF); box-shadow: inset 2px 0 0 var(--accent, #1F4E79); }
.mwm-profile-name { font-size: 12.5px; font-weight: 600; color: #1E293B; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwm-profile-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
.mwm-mini-tag {
    font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
    color: #1F4E79; background: #E0EAF5; border-radius: 4px; padding: 1px 5px;
}
.mwm-dot-off { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #CBD5E1; }

/* Rate flag chips (SOR) */
.mwm-flag-chip {
    display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .3px;
    color: #475569; background: #F1F5F9; border-radius: 4px; padding: 1px 5px; margin: 0 2px;
}

/* ---- Users master-detail (locked jobs) ---- */
.mwm-lock-badge {
    display: inline-block; min-width: 15px; height: 15px; line-height: 15px;
    font-size: 9.5px; font-weight: 800; color: white; background: #DC2626;
    border-radius: 999px; padding: 0 4px; margin-left: 3px; vertical-align: middle;
}
.mwm-subrow > td { background: #F8FAFC; padding: 0; }
.mwm-lock-panel { padding: 12px 16px 14px; }
.mwm-lock-panel-head { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 8px; }
.mwm-table-tight th, .mwm-table-tight td { padding-top: 6px; padding-bottom: 6px; font-size: 12.5px; }

/* Form sub-heading inside editor dialogs */
.mwm-form-subhead {
    font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    color: #94A3B8; border-top: 1px solid var(--border-soft, #EEF2F6);
    padding-top: 12px; margin-top: 4px;
}

/* Client details tab */
.mwm-detail-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mwm-detail-block { min-width: 0; }
.mwm-kv { display: grid; grid-template-columns: 130px 1fr; gap: 7px 12px; margin: 8px 0 16px; font-size: 13px; }
.mwm-kv dt { color: #64748B; }
.mwm-kv dd { margin: 0; color: #1E293B; font-weight: 500; overflow-wrap: anywhere; }
.mwm-check-row {
    display: flex; align-items: center; gap: 10px; font-size: 13px; color: #334155;
    padding: 9px 12px; border: 1px solid var(--border-soft, #EEF2F6); border-radius: 9px; cursor: pointer;
}
.mwm-check-row input { accent-color: var(--accent, #1F4E79); cursor: pointer; }
@media (max-width: 720px) { .mwm-detail-grid-2 { grid-template-columns: 1fr; } }

.mwm-link { color: var(--accent, #1F4E79); font-weight: 600; text-decoration: none; }
.mwm-link:hover { text-decoration: underline; }

/* ============================ Top-bar search & menus ============================ */
.mwm-search-wrap { position: relative; flex: 1 1 auto; max-width: 460px; }
.mwm-search-wrap .mwm-search { max-width: none; }
.mwm-search-wrap .mwm-search input { padding-right: 34px; }
.mwm-search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    border: none; background: transparent; cursor: pointer; color: #94A3B8;
    font-size: 18px; line-height: 1; padding: 0 4px;
}
.mwm-search-clear:hover { color: #475569; }
.mwm-search-spin {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #E2E8F0; border-top-color: var(--accent, #1F4E79);
    animation: mwm-spin .7s linear infinite;
}
@keyframes mwm-spin { to { transform: rotate(360deg); } }

.mwm-search-pop {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    background: white; border-radius: 12px; box-shadow: 0 12px 34px rgba(15,23,42,.20);
    border: 1px solid var(--border-soft, #EEF2F6); padding: 6px; max-height: 60vh; overflow-y: auto;
}
.mwm-search-group {
    font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    color: #94A3B8; padding: 8px 10px 4px;
}
.mwm-search-item, .mwm-notif-item, .mwm-menu-item {
    display: flex; align-items: center; justify-content: flex-start; gap: 11px; width: 100%; text-align: left;
    border: none; background: transparent; cursor: pointer; padding: 8px 10px; border-radius: 8px;
}
.mwm-search-item:hover, .mwm-notif-item:hover, .mwm-menu-item:hover { background: var(--accent-soft, #EFF6FF); }
.mwm-search-ico, .mwm-notif-ico {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: #F1F5F9; color: #475569;
}
.mwm-search-text { display: flex; flex-direction: column; min-width: 0; }
.mwm-search-title { font-size: 13px; font-weight: 600; color: #1E293B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwm-search-sub { font-size: 11.5px; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwm-search-empty { padding: 16px; text-align: center; color: #94A3B8; font-size: 12.5px; }
.mwm-search-scrim { position: fixed; inset: 0; z-index: 50; background: transparent; }

/* Pop menus (bell, cog) */
.mwm-pop-wrap { position: relative; }
.mwm-icon-btn.active { background: var(--accent-soft, #EFF6FF); color: var(--accent, #1F4E79); }
.mwm-pop-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    background: white; border-radius: 12px; box-shadow: 0 12px 34px rgba(15,23,42,.20);
    border: 1px solid var(--border-soft, #EEF2F6); padding: 6px;
}
.mwm-pop-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px 6px; font-size: 12.5px; font-weight: 700; color: #334155;
}
.mwm-notif-dot {
    position: absolute; top: 7px; right: 7px; width: 8px; height: 8px;
    border-radius: 50%; background: #DC2626; border: 1.5px solid white;
}
.mwm-notif-item.unread { background: #F8FAFC; }
.mwm-notif-item.unread .mwm-search-title::after {
    content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent, #1F4E79); margin-left: 6px; vertical-align: middle;
}
.mwm-notif-ico.amber { background: #FEF3C7; color: #B45309; }
.mwm-notif-ico.red   { background: #FEE2E2; color: #DC2626; }
.mwm-notif-ico.green { background: #DCFCE7; color: #16A34A; }
/* Live feed: let the text column take the slack so the elapsed time pins right, and cap the
   list height — the store keeps up to 60 items per user. */
.mwm-notif-item .mwm-search-text { flex: 1 1 auto; }
.mwm-notif-list { max-height: 60vh; overflow-y: auto; }
.mwm-notif-when {
    flex: 0 0 auto; align-self: flex-start; padding-top: 2px;
    font-size: 11px; font-weight: 600; color: #94A3B8; white-space: nowrap;
}
/* ============= Diary: filters, colour key, richer appointments ============= */

/* Mirrors the back office's "Filter Bookings" group. */
.mwm-diary-filters {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.mwm-diary-search { flex: 1 1 260px; min-width: 200px; }
.mwm-diary-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: #475569; cursor: pointer; white-space: nowrap;
}
.mwm-diary-check input { accent-color: var(--accent, #1F4E79); cursor: pointer; }

/* Colour key — doubles as a status filter. Colours come from Job_Appointment_Statuses. */
.mwm-diary-legend {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.mwm-diary-legend-item {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 10px 4px 8px; border-radius: 999px;
    border: 1px solid var(--border-soft, #EEF2F6); background: white;
    font-size: 11.5px; font-weight: 600; color: #475569;
    cursor: pointer; font-family: inherit;
}
.mwm-diary-legend-item:hover { border-color: #CBD5E1; }
.mwm-diary-legend-item.on {
    border-color: var(--accent, #1F4E79); color: var(--accent, #1F4E79);
    box-shadow: inset 0 0 0 1px var(--accent, #1F4E79);
}
.mwm-diary-legend-item.static { cursor: default; }
.mwm-diary-legend-item.static:hover { border-color: var(--border-soft, #EEF2F6); }
.mwm-diary-legend-item .swatch {
    width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid #94A3B8;
}
.mwm-diary-legend-item .n { color: #94A3B8; font-weight: 700; }

/* Per-engineer appointment actions sit in one cell and must not wrap mid-button. */
.mwm-eng-actions { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.mwm-eng-actions .mwm-btn { padding: 3px 9px; font-size: 12px; }

/* Contract discount: the priced breakdown in the Add charge dialog, and the grid badge. */
.mwm-price-breakdown {
    border: 1px solid var(--border-soft, #EEF2F6); border-radius: 9px;
    padding: 10px 12px; font-size: 12.5px; background: #FAFBFD;
}
.mwm-price-breakdown > div {
    display: flex; justify-content: space-between; gap: 12px; padding: 2px 0;
    color: #475569;
}
.mwm-price-breakdown > div.total {
    margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--border, #E2E8F0);
    font-weight: 700; color: #0F172A; font-size: 13.5px;
}
.mwm-disc {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    background: #DCFCE7; color: #15803D; font-size: 11.5px; font-weight: 700;
}
.mwm-disc.up { background: #FEE2E2; color: #B91C1C; }

/* ============= Quotations ============= */

/* Five KPIs across, matching the dashboard's behaviour at each breakpoint. */
.mwm-quote-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .mwm-quote-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .mwm-quote-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px)  { .mwm-quote-kpis { grid-template-columns: 1fr; } }

.mwm-quote-pill {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.mwm-quote-pill.s1 { background: #F1F5F9; color: #475569; }   /* Draft    */
.mwm-quote-pill.s2 { background: #DBEAFE; color: #1D4ED8; }   /* Sent     */
.mwm-quote-pill.s3 { background: #DCFCE7; color: #15803D; }   /* Accepted */
.mwm-quote-pill.s4 { background: #FEE2E2; color: #B91C1C; }   /* Declined */
.mwm-quote-pill.s5 { background: #FEF3C7; color: #B45309; }   /* Expired  */

/* Chase overdue — deliberately loud, it is the thing that gets forgotten. */
.mwm-quote-flag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    background: #FEE2E2; color: #B91C1C; font-size: 11px; font-weight: 700;
}
.mwm-quote-alert {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 14px; margin-bottom: 14px; border-radius: 10px;
    background: #FFF7ED; border: 1px solid #FDBA74; color: #9A3412; font-size: 13px;
}

.mwm-quote-totals {
    margin-top: 14px; margin-left: auto; max-width: 320px;
    border-top: 1px solid var(--border, #E2E8F0); padding-top: 10px; font-size: 13px;
}
.mwm-quote-totals > div {
    display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; color: #475569;
}
.mwm-quote-totals > div.total {
    margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border, #E2E8F0);
    font-weight: 800; font-size: 15px; color: #0F172A;
}

/* Day / Week switch. */
.mwm-seg {
    display: inline-flex; background: white; padding: 2px; gap: 2px;
    border: 1px solid var(--border, #E2E8F0); border-radius: 10px;
}
.mwm-seg button {
    border: none; background: transparent; cursor: pointer; font-family: inherit;
    padding: 6px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 500; color: #64748B;
}
.mwm-seg button:hover { background: var(--border-soft, #EEF2F6); color: #1E293B; }
.mwm-seg button.on {
    background: var(--accent, #1F4E79); color: white; font-weight: 600;
}

/* ---- Day view: engineers across, time down (the back office's DayView by resource) ---- */
.mwm-dayview {
    background: white; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
    /* Columns hold a 150px minimum, so on narrow screens the grid must scroll inside its
       card — clipping it would put the right-hand engineers out of reach. */
    overflow-x: auto; overflow-y: hidden;
}
/* Header and body are separate grids. Both get the same explicit min-width from the page
   (max-content would size them differently — long engineer names would widen the header
   columns only, and the two would drift out of alignment). */
.mwm-dayview-grid { display: grid; }
.mwm-dayview-corner {
    padding: 10px 8px; background: #FAFBFD;
    border-right: 1px solid var(--border, #E2E8F0);
    border-bottom: 1px solid var(--border, #E2E8F0);
    font-size: 11px; font-weight: 700; color: #64748B; text-align: center;
}
.mwm-dayview-eng {
    padding: 9px 10px; background: #FAFBFD;
    border-right: 1px solid var(--border-soft, #EEF2F6);
    border-bottom: 1px solid var(--border, #E2E8F0);
    min-width: 0;
}
.mwm-dayview-eng .mwm-eng-headline { min-width: 0; }
.mwm-dayview-eng .nm {
    font-size: 12.5px; font-weight: 600; color: #1E293B;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mwm-dayview-eng .meta { display: block; font-size: 11px; color: #94A3B8; margin-top: 2px; }
.mwm-dayview-eng:last-child { border-right: none; }

.mwm-dayview-ruler { border-right: 1px solid var(--border, #E2E8F0); background: #FAFBFD; }
/* One row per half hour; the hour is emphasised so the ruler still scans quickly. */
.mwm-dayview-hour {
    height: var(--slot-h, 44px); box-sizing: border-box;
    padding: 2px 8px 0 0; text-align: right;
    font-size: 10.5px; font-weight: 600; color: #94A3B8;
}
.mwm-dayview-hour.on-hour { border-bottom: 1px solid #E2E8F0; color: #64748B; }
.mwm-dayview-hour.half    { border-bottom: 1px solid #F1F5F9; font-weight: 500; color: #B6C2D2; }
.mwm-dayview-col {
    position: relative;
    border-right: 1px solid var(--border-soft, #EEF2F6);
    /* Gridlines every half hour, with the hour line darker — a booking's position reads
       against the ruler beside it. */
    background-image: repeating-linear-gradient(
        to bottom, transparent, transparent calc(var(--slot-h, 44px) - 1px),
        #F1F5F9 calc(var(--slot-h, 44px) - 1px), #F1F5F9 var(--slot-h, 44px)),
    repeating-linear-gradient(
        to bottom, transparent, transparent calc(var(--slot-h, 44px) * 2 - 1px),
        #E2E8F0 calc(var(--slot-h, 44px) * 2 - 1px), #E2E8F0 calc(var(--slot-h, 44px) * 2));
}
.mwm-dayview-col:last-child { border-right: none; }

.mwm-dayview-absence {
    position: absolute; left: 0; right: 0; z-index: 0;
    background: repeating-linear-gradient(45deg, #FFF7ED, #FFF7ED 6px, #FFEDD5 6px, #FFEDD5 12px);
    border-top: 1px dashed #FDBA74; border-bottom: 1px dashed #FDBA74;
    font-size: 10px; font-weight: 600; color: #9A3412;
    padding: 3px 6px; overflow: hidden;
}

/* Appointments are positioned by time rather than stacked. */
.mwm-appt.mwm-appt-abs {
    position: absolute; z-index: 1; margin-left: 2px;
    overflow: hidden; box-sizing: border-box; padding: 4px 7px;
}
.mwm-appt.mwm-appt-abs:hover { z-index: 3; transform: none; }
.mwm-appt.mwm-appt-abs .mwm-appt-head { min-width: 0; }

/* One half-hour slot: time + job number share the first line, address takes the second. */
.mwm-appt.mwm-appt-abs.compact,
.mwm-appt.mwm-appt-abs.tiny { padding: 3px 6px; line-height: 1.2; }
.mwm-appt.mwm-appt-abs.compact .mwm-appt-time,
.mwm-appt.mwm-appt-abs.tiny .mwm-appt-time { font-size: 10px; flex: 0 0 auto; }
.mwm-appt-ref.inline {
    margin-top: 0; font-size: 10px; font-weight: 700;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mwm-appt.mwm-appt-abs.compact .mwm-appt-addr { margin-top: 1px; font-size: 9.5px; }

/* Shorter than a slot, or stacked four deep: a single line is all there is room for. */
.mwm-appt.mwm-appt-abs.tiny { display: flex; align-items: center; }

/* Engineer identity colour, as the back office tints its resource headers. */
.mwm-eng-swatch {
    flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px;
    border: 1px solid rgba(15,23,42,.15);
}
.mwm-eng-headline { display: flex; align-items: center; gap: 7px; }
.mwm-eng-item .eng-count.free {
    background: transparent; color: #94A3B8; font-style: italic; font-weight: 500;
}

/* Booked leave — the back office blocks these out as non-bookable time regions. */
.mwm-absence {
    display: flex; align-items: center; gap: 5px;
    border-radius: 6px; padding: 4px 7px;
    font-size: 10.5px; font-weight: 600; color: #9A3412;
    background: repeating-linear-gradient(45deg, #FFF7ED, #FFF7ED 6px, #FFEDD5 6px, #FFEDD5 12px);
    border: 1px dashed #FDBA74;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mwm-appt-head { display: flex; align-items: center; gap: 5px; }
.mwm-appt-ref {
    margin-top: 1px; font-size: 11px; font-weight: 700; color: #334155;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mwm-appt-flag { display: inline-flex; color: #64748B; }
.mwm-appt-flag.urgent { color: #DC2626; }

/* Finalised jobs read black in the back office regardless of appointment status. */
.mwm-appt.st-finalised { background: #0F172A; border-left-color: #0F172A; }
.mwm-appt.st-finalised .mwm-appt-time,
.mwm-appt.st-finalised .mwm-appt-ref   { color: #F8FAFC; }
.mwm-appt.st-finalised .mwm-appt-title { color: #CBD5E1; }
.mwm-appt.st-finalised .mwm-appt-addr  { color: #94A3B8; }
.mwm-appt.st-finalised .mwm-appt-flag  { color: #CBD5E1; }
.mwm-appt.st-finalised:hover { background: #1E293B; }

.mwm-notif-count {
    display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px;
    border-radius: 9px; background: #DC2626; color: white;
    font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
}
.mwm-menu-item { font-size: 13px; color: #334155; font-weight: 500; }
.mwm-menu-item.danger { color: #DC2626; }
.mwm-menu-sep { height: 1px; background: var(--border-soft, #EEF2F6); margin: 5px 4px; }

/* Engineer card email — wrap long addresses within the card instead of overflowing */
.mwm-engineer-meta-row { align-items: flex-start; }
.mwm-eng-email {
    flex: 1 1 auto; min-width: 0;
    overflow-wrap: anywhere; word-break: break-word;
    font-size: 12px; line-height: 1.35;
}

/* Engineer card is clickable → pointer cursor (not the text I-beam) */
.mwm-engineer-card.clickable { cursor: pointer; user-select: none; }
.mwm-engineer-card.clickable * { cursor: pointer; }

/* Searchable combobox (e.g. property-address picker on New Job) */
.mwm-combo { position: relative; }
.mwm-combo .mwm-search-pop { top: calc(100% + 6px); max-height: 300px; }

/* Job rail: property submenu (house button → left flyout) */
.mwm-rail-item { position: relative; }
.mwm-rail-submenu {
    position: absolute; right: calc(100% + 12px); top: 0; z-index: 1250;
    background: white; border-radius: 12px; box-shadow: 0 12px 34px rgba(15,23,42,.24);
    border: 1px solid var(--border-soft, #EEF2F6); padding: 6px; width: 236px;
}
.mwm-rail-sub-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    border: none; background: transparent; cursor: pointer; padding: 9px 11px; border-radius: 8px;
    font-size: 13px; font-weight: 500; color: #334155; white-space: nowrap;
}
.mwm-rail-sub-item:hover { background: var(--accent-soft, #EFF6FF); color: var(--accent, #1F4E79); }
.mwm-rail-sub-item > span { flex: 1; }
.mwm-rail-sub-item .mwm-rail-badge { position: static; top: auto; right: auto; }
.mwm-rail-submenu-scrim { position: fixed; inset: 0; z-index: 1240; background: transparent; }

/* Sortable / filterable grid headers */
.mwm-table th.mwm-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.mwm-table th.mwm-sortable:hover { color: var(--accent, #1F4E79); }
.mwm-sort-ind { font-size: 10px; color: #CBD5E1; margin-left: 2px; }
.mwm-table th.mwm-sortable:hover .mwm-sort-ind { color: var(--accent, #1F4E79); }
/* The .mwm-filter-row / .mwm-col-filter rules that were here are gone — they were a duplicate of
   the set further down this file, and the two disagreed. This copy's `padding-top: 0 !important`
   beat the later rule's shorthand, which is why the filter inputs sat flush against the header
   text with no gap at all. One definition now, further down. */

/* ---- Appointment scheduler overlay (diary-style booking) ---- */
.mwm-sched-overlay {
    position: fixed; inset: 0; z-index: 1300;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.mwm-sched-panel {
    background: var(--surface, #fff); border-radius: var(--radius-lg, 14px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    width: min(1240px, 96vw); max-height: 92vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.mwm-sched-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 16px 20px; border-bottom: 1px solid var(--border-soft, #EEF2F6);
}
.mwm-sched-title { font-size: 17px; font-weight: 700; color: var(--text, #0F172A); }
.mwm-sched-sub { font-size: 13px; color: var(--text-3, #64748B); margin-top: 3px; }
.mwm-sched-body { flex: 1 1 auto; overflow: auto; padding: 16px 20px; background: #F8FAFC; }
.mwm-sched-foot {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px; border-top: 1px solid var(--border-soft, #EEF2F6);
    background: var(--surface, #fff);
}
.mwm-sched-summary {
    display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: var(--text, #0F172A);
}
.mwm-sched-summary svg { color: var(--accent, #1F4E79); }

/* Clickable booking cells */
.mwm-sched-slot { cursor: pointer; transition: background .1s, box-shadow .1s; }
.mwm-sched-slot:hover { background: var(--accent-soft, #EFF6FF); }
.mwm-sched-slot.selected { box-shadow: inset 0 0 0 2px var(--accent, #1F4E79); background: var(--accent-soft, #EFF6FF); }
.mwm-sched-add {
    display: flex; align-items: center; justify-content: center;
    min-height: 32px; color: #CBD5E1; opacity: 0; transition: opacity .1s;
}
.mwm-sched-slot:hover .mwm-sched-add { opacity: 1; color: var(--accent, #1F4E79); }

/* Ghost "new appointment" chip */
.mwm-appt.mwm-appt-new {
    background: var(--accent-soft, #EFF6FF);
    border: 1px dashed var(--accent, #1F4E79); border-left: 3px solid var(--accent, #1F4E79);
}
.mwm-appt.mwm-appt-new .mwm-appt-time { color: var(--accent, #1F4E79); }
.mwm-appt.mwm-appt-new .mwm-appt-title { color: var(--accent, #1F4E79); font-weight: 600; }

/* Selected document row */
.mwm-table tr.mwm-row-sel > td { background: var(--accent-soft, #EFF6FF); }

/* ---- Appointment scheduler: Day/Week toggle + day timeline ---- */
.mwm-seg { display:inline-flex; border:1px solid var(--border,#E2E8F0); border-radius:8px; overflow:hidden; }
.mwm-seg button {
    border:none; background:var(--surface,#fff); cursor:pointer;
    padding:6px 14px; font-size:12.5px; font-weight:600; color:var(--text-3,#64748B);
}
.mwm-seg button + button { border-left:1px solid var(--border,#E2E8F0); }
.mwm-seg button.active { background:var(--accent,#1F4E79); color:#fff; }

.mwm-day { background:#fff; border-radius:var(--radius-lg,12px); box-shadow:var(--shadow-sm); overflow:hidden; user-select:none; }
.mwm-day-headrow { display:flex; border-bottom:1px solid var(--border,#E2E8F0); position:sticky; top:0; z-index:2; background:#FAFBFD; }
.mwm-day-gutter-head { flex:0 0 56px; }
.mwm-day-colhead {
    flex:1 1 0; min-width:0; padding:9px 8px; text-align:center;
    font-size:12.5px; font-weight:600; color:var(--text-2,#334155);
    border-left:1px solid var(--border-soft,#EEF2F6);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mwm-day-colhead.sel { background:var(--accent-soft,#EFF6FF); color:var(--accent,#1F4E79); }

.mwm-day-bodyrow { display:flex; }
.mwm-day-gutter { flex:0 0 56px; }
.mwm-day-time {
    box-sizing:border-box; padding:2px 8px 0 0; text-align:right;
    font-size:11px; color:var(--text-3,#94A3B8); border-top:1px solid var(--border-soft,#EEF2F6);
}
.mwm-day-time:first-child { border-top:none; }

.mwm-day-col { flex:1 1 0; min-width:0; position:relative; border-left:1px solid var(--border-soft,#EEF2F6); }
.mwm-day-slot { box-sizing:border-box; border-top:1px dashed transparent; cursor:pointer; }
.mwm-day-slot.hour { border-top:1px solid var(--border-soft,#EEF2F6); }
.mwm-day-slot:hover { background:rgba(31,78,121,0.05); }
.mwm-day-slot.sel { background:var(--accent-soft,#EFF6FF); }

.mwm-day-appt {
    position:absolute; left:3px; right:3px; border-radius:6px; padding:3px 6px;
    font-size:11px; line-height:1.25; overflow:hidden; pointer-events:none;
    background:#DBEAFE; border-left:3px solid #2563EB; box-shadow:var(--shadow-sm);
}
.mwm-day-appt-t { font-weight:700; color:var(--text,#0F172A); }
.mwm-day-appt-l { color:var(--text-2,#334155); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mwm-day-appt.st-blue  { background:#DBEAFE; border-left-color:#2563EB; }
.mwm-day-appt.st-amber { background:#FEF3C7; border-left-color:#D97706; }
.mwm-day-appt.st-green { background:#DCFCE7; border-left-color:#16A34A; }
.mwm-day-appt.st-red   { background:#FEE2E2; border-left-color:#DC2626; }
.mwm-day-appt.pending {
    background:var(--accent-soft,#EFF6FF); border:1px dashed var(--accent,#1F4E79);
    border-left:3px solid var(--accent,#1F4E79); z-index:3;
}
.mwm-day-appt.pending .mwm-day-appt-t,
.mwm-day-appt.pending .mwm-day-appt-l { color:var(--accent,#1F4E79); }

/* Live time tooltip shown while dragging on the day timeline */
.mwm-day-tip {
    position: fixed; display: none; z-index: 1400; pointer-events: none;
    background: #0F172A; color: #fff; font-size: 12px; font-weight: 700;
    padding: 4px 8px; border-radius: 6px; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(15,23,42,0.35);
}

/* ============ Job Detail v2 (redesigned layout) ============ */
.mwm-job2-topbar { display:flex; align-items:center; margin-bottom:10px; }

.mwm-job2-titlebar {
    display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;
    padding-bottom:14px; border-bottom:1px solid var(--border-soft,#EEF2F6); margin-bottom:16px;
}
.mwm-job2-titlemeta { font-size:13px; color:#64748B; margin-top:3px; }   /* AA contrast (was slate-400) */
.mwm-job2-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.mwm-job2-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; }

.mwm-job2 { padding-right:72px; }   /* clearance for the floating insights rail */
.mwm-job2-grid { display:grid; grid-template-columns:380px minmax(0,1fr); gap:20px; align-items:start; }

/* Left summary rail */
.mwm-job2-side { position:sticky; top:16px; display:flex; flex-direction:column; gap:12px; }
.mwm-job2-kpis { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.mwm-job2-kpi {
    background:var(--surface,#fff); border:1px solid var(--border-soft,#EEF2F6); border-radius:10px;
    padding:9px 10px; display:flex; flex-direction:column; gap:1px; min-width:0;
}
.mwm-job2-kpi .k { font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:#64748B; font-weight:600; }
.mwm-job2-kpi b { font-size:15px; color:var(--text,#0F172A); font-variant-numeric:tabular-nums; }
.mwm-job2-kpi .s { font-size:10.5px; color:#64748B; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.mwm-job2-card {
    background:var(--surface,#fff); border:1px solid var(--border-soft,#EEF2F6);
    border-radius:12px; padding:12px 14px; box-shadow:var(--shadow-sm);
}
.mwm-job2-cardhead {
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:#64748B; margin-bottom:8px;
}
.mwm-job2-dl { display:grid; grid-template-columns:88px minmax(0,1fr); gap:7px 12px; margin:0; }
.mwm-job2-dl dt { font-size:12px; color:#64748B; font-weight:500; }   /* AA contrast */
.mwm-job2-dl dd { font-size:13px; color:var(--text,#0F172A); font-weight:500; margin:0; min-width:0; word-break:break-word; }
.mwm-job2-dl dd.muted { color:#94A3B8; font-weight:400; }
.mwm-job2-dl dd .sub { display:block; font-size:11px; color:#94A3B8; font-weight:400; margin-top:1px; }

.mwm-job2-disclose {
    align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
    border:none; background:transparent; cursor:pointer; padding:2px 2px;
    font-size:12.5px; font-weight:600; color:var(--accent,#1F4E79);
}
.mwm-job2-desc { font-size:12.5px; line-height:1.5; color:var(--text-2,#334155); white-space:pre-wrap; max-height:132px; overflow:hidden; }
.mwm-job2-desc.expanded { max-height:none; }   /* grows to fit the full description */

.mwm-job2-insights { display:flex; flex-direction:column; gap:2px; margin-top:2px; }
.mwm-job2-insight {
    display:flex; align-items:center; gap:9px; width:100%; text-align:left;
    border:none; background:transparent; cursor:pointer; padding:8px 10px; border-radius:8px;
    font-size:13px; font-weight:500; color:#334155;
}
.mwm-job2-insight > span:first-of-type { flex:1; }
.mwm-job2-insight svg { color:var(--text-3,#64748B); }
.mwm-job2-insight:hover { background:var(--accent-soft,#EFF6FF); }
.mwm-job2-insight.active { background:var(--accent-soft,#EFF6FF); color:var(--accent,#1F4E79); }
.mwm-job2-insight.active svg { color:var(--accent,#1F4E79); }

/* Right work column = the card container (replaces .mwm-tabs) */
.mwm-job2-main {
    background:var(--surface,#fff); border:1px solid var(--border-soft,#EEF2F6);
    border-radius:12px; box-shadow:var(--shadow-sm); overflow:hidden; min-width:0;
}
/* These tabs WRAP; they do not scroll. So the base class's overflow-x:auto buys nothing here and
   costs something real: any overflow value other than visible makes the element a clipping box on
   BOTH axes, and the More dropdown — laid out below the strip — was clipped away entirely. Drawn
   nowhere, with the fixed scrim beneath it swallowing every click, which read as "the More menu
   does nothing". */
.mwm-job2-tabs { flex-wrap:wrap; overflow:visible; }

@media (max-width: 980px) {
    .mwm-job2-grid { grid-template-columns:1fr; }
    .mwm-job2-side { position:static; }
}

/* ============ Responsive app shell (mobile nav drawer) ============ */
.mwm-nav-toggle { display:none; }
.mwm-nav-scrim { display:none; }

@media (max-width: 980px) {
    .mwm-app-page { grid-template-columns: 1fr; }
    .mwm-sidebar {
        position: fixed; top:0; left:0; height:100vh; width:264px; z-index:1200;
        transform: translateX(-100%); transition: transform .22s ease;
        box-shadow: 0 0 44px rgba(0,0,0,0.42);
    }
    .mwm-app-page.nav-open .mwm-sidebar { transform: translateX(0); }
    .mwm-app-page.nav-open .mwm-nav-scrim {
        display:block; position:fixed; inset:0; z-index:1150; background: rgba(15,23,42,0.5);
    }
    .mwm-nav-toggle {
        display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
        width:40px; height:40px; margin-right:6px; border:none; background:transparent;
        color: var(--text-2,#334155); border-radius:8px; cursor:pointer;
    }
    .mwm-nav-toggle:hover { background: var(--border-soft,#EEF2F6); }
}

/* ============ Job Detail v2 — a11y focus + mobile ============ */
/* Visible keyboard focus for interactive rows/controls */
.mwm-table tr.clickable:focus-visible { outline:2px solid var(--accent,#1F4E79); outline-offset:-2px; }
.mwm-job2 .mwm-tab-header:focus-visible,
.mwm-job2-insight:focus-visible,
.mwm-job2-disclose:focus-visible,
.mwm-nav-toggle:focus-visible { outline:2px solid var(--accent,#1F4E79); outline-offset:2px; }

@media (max-width: 640px) {
    .mwm-job2-titlebar { flex-direction:column; }
    .mwm-job2-actions { width:100%; justify-content:flex-start; }
    /* Keeps wrapping on a phone rather than switching to a hidden horizontal scroll. Scrolling
       here would clip the More dropdown for exactly the reason it did on desktop, and a scrollbar
       you cannot see is a poor way to hide half the tabs on the narrowest screen anyway. */
    .mwm-job2-tabs { flex-wrap:wrap; overflow:visible; }
    .mwm-job2-main { border-radius:10px; }

    /* Job Charges table → stacked cards */
    .mwm-cardtable thead { display:none; }
    .mwm-cardtable, .mwm-cardtable tbody { display:block; width:100%; }
    .mwm-cardtable tr {
        display:block; border:1px solid var(--border,#E2E8F0); border-radius:10px;
        padding:8px 12px; margin-bottom:8px; background:var(--surface,#fff);
    }
    .mwm-cardtable td {
        display:flex; align-items:center; justify-content:space-between; gap:14px;
        border:none; padding:5px 0; text-align:right;
    }
    .mwm-cardtable td::before {
        content:attr(data-label); font-weight:600; color:#64748B; font-size:12px;
        text-align:left; white-space:nowrap;
    }
    .mwm-cardtable td:first-child { display:none; }       /* expand chevron cell */
    .mwm-cardtable td[data-label="Description"] { font-weight:600; }
}

/* ============ Job Detail v2 — priority severity + tab hints ============ */
/* Priority chip: severity dot, visually distinct from the solid status pill */
.mwm-prio2 {
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 11px 3px 9px; border-radius:999px;
    font-size:11.5px; font-weight:600; line-height:1.4;
    background:#F8FAFC; color:#334155; border:1px solid var(--border,#E2E8F0);
}
.mwm-prio2 .dot { width:8px; height:8px; border-radius:50%; background:#94A3B8; flex:0 0 auto; }
.mwm-prio2.sev-emergency { background:#FEF2F2; border-color:#FECACA; color:#991B1B; }
.mwm-prio2.sev-emergency .dot { background:#DC2626; }
.mwm-prio2.sev-urgent { background:#FFF7ED; border-color:#FED7AA; color:#9A3412; }
.mwm-prio2.sev-urgent .dot { background:#F59E0B; }
.mwm-prio2.sev-routine .dot { background:#16A34A; }

/* "More" tab shows an amber dot when a hidden tab holds data */
.mwm-tab-header.mwm-tab-hasmore { position:relative; }
.mwm-tab-header.mwm-tab-hasmore::after {
    content:""; position:absolute; top:8px; right:6px;
    width:6px; height:6px; border-radius:50%; background:#D97706;
}

@media (max-width: 640px) {
    .mwm-job2 { padding-right:0; }   /* reclaim width on phones */
}

/* ============ Job Detail v2 — column balance + more mobile cards ============ */
/* Work column anchors the page so it's not dwarfed by the tall summary rail on sparse jobs */
.mwm-job2-main { min-height: 460px; }

@media (max-width: 640px) {
    .mwm-hide-sm { display: none !important; }
    /* Expander sub-rows keep their nested table (don't card-ify) */
    .mwm-cardtable td.mwm-card-sub { display: block; padding: 0 0 12px; text-align: left; }
    .mwm-cardtable td.mwm-card-sub::before { content: none; }
    .mwm-cardtable .mwm-card-subrow { padding: 0; border: none; background: transparent; }
}

/* Always-visible tenant phone chip (opens the Contact & Property panel) */
.mwm-job2-phone {
    display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
    background:var(--surface,#fff); border:1px solid var(--border-soft,#EEF2F6); border-radius:12px;
    padding:9px 12px; box-shadow:var(--shadow-sm); color:var(--text,#0F172A);
}
.mwm-job2-phone:hover { border-color:var(--accent,#1F4E79); }
.mwm-job2-phone > svg { color:var(--accent,#1F4E79); flex:0 0 auto; }
.mwm-job2-phone .ph-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.mwm-job2-phone .ph-num { font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mwm-job2-phone .ph-who { font-size:11.5px; color:#64748B; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mwm-job2-phone .ph-caret { color:#94A3B8; flex:0 0 auto; }

/* ============ Jobs search page — density, sort a11y, bulk bar ============ */
/* Single-line truncating cells (Description / Property) for dense rows */
/* ============ WorxOrder / Blue-Fin branding ============ */
.mwm-worx-tile { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; }
.mwm-sidebar .mwm-sidebar-brand-name { text-transform: none; letter-spacing: -0.4px; font-weight: 800; }

/* Sidebar footer credit (dark background → reversed mark + white wordmark) */
.mwm-sidebar-devby {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 0 2px; font-size: 10.5px; color: #64748B;
}
.mwm-sidebar-devby img { height: 14px; width: 14px; opacity: .8; }
.mwm-sidebar-devby .mwm-bluefin-word { font-size: 12px; color: #CBD5E1; }

/* Login card: product mark + HTML wordmark (SVG <text> can't use webfonts via <img>,
   so wordmarks are real text in Inter for a faithful render) */
.mwm-worx-lockup {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-bottom: 14px;
}
.mwm-worx-lockup img { height: 38px; width: 38px; border-radius: 9px; }
.mwm-worx-word {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 27px; font-weight: 800; letter-spacing: -1.2px;
    color: #0E1B2E; line-height: 1;
}
.mwm-bluefin-word {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-weight: 800; letter-spacing: -0.4px; line-height: 1;
}
.mwm-footnote.mwm-devby {
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mwm-footnote.mwm-devby img { height: 15px; }
.mwm-footnote.mwm-devby .mwm-bluefin-word { font-size: 13px; color: #0E1B2E; }

/* Sign-in failure message */
.mwm-auth-error {
    margin: 2px 0 12px; padding: 9px 12px;
    background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px;
    color: #991B1B; font-size: 12.5px;
}

/* Plain-button styled links (client/property on the job summary) */
.mwm-linkbtn { background:none; border:0; padding:0; font:inherit; cursor:pointer; text-align:left; }

/* Live-write note on the New Job form */
/* Block, not flex: these notes are sentences with inline <b> in them, and a flex
   container turns each inline child into its own column. */
.mwm-form-note {
    display: block;
    margin: 4px 0 14px; padding: 9px 13px;
    background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 9px;
    color: #92400E; font-size: 12.5px; line-height: 1.45;
}
.mwm-form-note svg { vertical-align: -2px; margin-right: 6px; }

.mwm-jobs-table td.mwm-cell-clip,
.mwm-props-table td.mwm-cell-clip { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwm-jobs-table .mwm-flag { margin-left: 6px; }

/* Keyboard focus for sortable headers */
.mwm-table th.mwm-sortable { outline-offset: -2px; }
.mwm-table th.mwm-sortable:focus-visible { outline: 2px solid var(--accent, #1F4E79); }

/* Bulk-action bar (appears when rows are selected) */
.mwm-bulkbar {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; margin-bottom: 12px;
    background: var(--accent-soft, #EFF6FF); border: 1px solid var(--accent, #1F4E79);
    border-radius: 10px;
}
.mwm-bulkbar-count { font-size: 13px; font-weight: 700; color: var(--accent, #1F4E79); }

/* On phones the truncating cells can use the full card width */
@media (max-width: 640px) {
    .mwm-jobs-table td.mwm-cell-clip { max-width: none; }
}

/* ============ Dashboard KPIs — clickable + tone + balanced grid ============ */
.mwm-dash-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1200px) { .mwm-dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .mwm-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px)  { .mwm-dash-kpis { grid-template-columns: 1fr; } }

/* Clickable stat cards (drill into the relevant screen) */
a.mwm-stat-clickable { display: block; text-decoration: none; color: inherit; }
a.mwm-stat-clickable:hover { border-color: var(--accent, #1F4E79); box-shadow: var(--shadow-md, 0 6px 18px rgba(15,23,42,.10)); }
a.mwm-stat-clickable:focus-visible { outline: 2px solid var(--accent, #1F4E79); outline-offset: 2px; }

/* Attention tone (e.g. Overdue) */
.mwm-stat-card.tone-danger { box-shadow: inset 3px 0 0 #DC2626, var(--shadow-sm, 0 1px 2px rgba(15,23,42,.06)); }
.mwm-stat-card.tone-danger .mwm-stat-value { color: #DC2626; }
a.mwm-stat-clickable { border: 1px solid transparent; }

/* ============ Empty / blocked / error states ============
   One shape for "nothing to show", "you may not see this" and "it broke", so the three
   are distinguishable at a glance rather than all rendering as the word "Loading…". */
.mwm-empty-state {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 12px;
    padding: 56px 28px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.mwm-empty-state-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent);
}
.mwm-empty-state.warn  .mwm-empty-state-icon { background: #FEF3C7; color: #92400E; }
.mwm-empty-state.error .mwm-empty-state-icon { background: #FEE2E2; color: #B91C1C; }

.mwm-empty-state-title {
    margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; color: var(--text);
}
.mwm-empty-state-body {
    margin: 0; max-width: 52ch; font-size: 14.5px; line-height: 1.6; color: #475569;
}
.mwm-empty-state-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 4px; }

/* ============ Search field ============
   Replaced MudTextField's outlined variant, which brought Material's radius, focus ring and
   type ramp onto pages otherwise built from .mwm-* components. The icon sits inside the field
   rather than as an adornment, so the input keeps its own padding rules. */
.mwm-search-field { position: relative; display: block; width: 100%; }
.mwm-search-field-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    display: inline-flex; color: #64748B; pointer-events: none;
}
.mwm-search-field-input { padding-left: 36px; }
/* Chrome draws its own clear affordance on type=search; ours is the Clear button in the filter bar. */
.mwm-search-field-input::-webkit-search-decoration,
.mwm-search-field-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Menu items inside PopMenu keep the topbar menu's row treatment. */
.mwm-pop-menu .mwm-menu-item { width: 100%; }


/* ============ Bar chart ============
   HTML/CSS rather than SVG: Razor claims <text> for itself, and a non-uniformly scaled SVG
   stretches its own labels. The hover readout is pure CSS, so it costs no SignalR round-trip. */
.mwm-chart { display: flex; flex-direction: column; gap: 12px; }

.mwm-chart-body { display: flex; gap: 8px; }
.mwm-chart-main { flex: 1; min-width: 0; }

/* Y axis: labels sit against the gridlines they belong to. */
.mwm-chart-yaxis {
    position: relative; width: 34px; height: 200px; flex: 0 0 34px;
}
.mwm-chart-yaxis span {
    position: absolute; right: 0; transform: translateY(50%);
    font-size: 10.5px; color: #94A3B8; font-variant-numeric: tabular-nums; white-space: nowrap;
}

.mwm-chart-plot { position: relative; height: 200px; }
.mwm-chart-grid {
    position: absolute; left: 0; right: 0; height: 1px;
    background: var(--border-soft);
}

.mwm-chart-cols, .mwm-chart-xaxis { display: flex; gap: 2px; }
.mwm-chart-cols { position: absolute; inset: 0; align-items: flex-end; }

.mwm-chart-col {
    position: relative; flex: 1 1 0; min-width: 0; height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
    border-radius: 4px 4px 0 0;
}
.mwm-chart-col:hover { background: rgba(31, 78, 121, .05); }

.mwm-chart-bars {
    display: flex; align-items: flex-end; justify-content: center; gap: 2px;
    height: 100%;
}
.mwm-chart-bar {
    display: block; width: 42%; max-width: 22px; min-height: 0;
    background: #94A3B8; border-radius: 2px 2px 0 0;
    transition: background .12s;
}
.mwm-chart-bar.prior   { background: #E2E8F0; }
.mwm-chart-bar.current { background: var(--accent); }
.mwm-chart-col:hover .mwm-chart-bar { background: var(--accent); }
.mwm-chart-col:hover .mwm-chart-bar.prior { background: #CBD5E1; }

.mwm-chart-readout {
    position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
    font-size: 11px; font-weight: 650; color: var(--text); white-space: nowrap;
    font-variant-numeric: tabular-nums;
    opacity: 0; transition: opacity .12s; pointer-events: none;
}
/* Focus as well as hover: on a touch device :hover never fires, so a tap-to-focus is the only way
   these numbers are readable at all. Also makes them reachable by keyboard. */
.mwm-chart-col:hover .mwm-chart-readout,
.mwm-chart-col:focus .mwm-chart-readout,
.mwm-chart-col:focus-within .mwm-chart-readout { opacity: 1; }

.mwm-chart-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mwm-chart-col:focus { outline: none; }
.mwm-chart-col:focus .mwm-chart-bar:not(.prior) { background: var(--accent); }

.mwm-chart-xaxis {
    border-top: 1px solid var(--border); padding-top: 6px; margin-top: 0;
}
.mwm-chart-xaxis span {
    flex: 1 1 0; min-width: 0; text-align: center;
    font-size: 10.5px; color: #64748B; overflow: hidden; white-space: nowrap;
}
.mwm-chart-xaxis span.current { color: var(--accent); font-weight: 650; }

.mwm-chart-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: #64748B; }
.mwm-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mwm-chart-legend .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.mwm-chart-legend .swatch.current { background: var(--accent); }
.mwm-chart-legend .swatch.prior { background: #E2E8F0; }

@media (prefers-reduced-motion: reduce) {
    .mwm-chart-bar, .mwm-chart-readout { transition: none; }
}


/* ============ Search ============ */

/* The escape hatch at the top of the global-search dropdown. Sits above the grouped hits so it
   reads as "or see everything", not as a result you might click by accident. */
.mwm-search-all {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border-soft);
    background: none; cursor: pointer; text-align: left;
    font-size: 12.5px; font-weight: 600; color: var(--accent);
}
.mwm-search-all:hover { background: var(--accent-soft, #EFF6FF); }
.mwm-search-all:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ============ Job grid: column chooser, column filters, saved-view overflow ============ */

.mwm-colmenu, .mwm-viewmenu { position: relative; display: inline-flex; }

.mwm-colmenu-pop, .mwm-viewmenu-pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
    min-width: 210px; max-height: 320px; overflow-y: auto;
    padding: 6px; border-radius: 10px;
    background: var(--surface, #fff); border: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
}
.mwm-viewmenu-pop { left: 0; right: auto; }

.mwm-colmenu-row {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; border-radius: 6px; cursor: pointer; font-size: 12.5px;
}
.mwm-colmenu-row:hover { background: var(--accent-soft, #EFF6FF); }
.mwm-colmenu-row:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }

.mwm-viewmenu-row { display: flex; align-items: center; gap: 2px; }
.mwm-viewmenu-row .mwm-menu-item { flex: 1; text-align: left; }

.mwm-chip-more { display: inline-flex; align-items: center; gap: 5px; }

/* The filter row under the headers. Deliberately plain — it is a row of inputs, not a second
   header, and styling it like one made the grid look as though it had two title rows.
   The top padding matters: without it the inputs sit flush against the column titles and the two
   read as one crowded block rather than a heading with a filter beneath it. */
.mwm-filter-row th { padding: 9px 8px 10px; background: var(--surface, #fff); }
.mwm-col-filter {
    width: 100%; min-width: 0; padding: 4px 8px;
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 11.5px; font-weight: 400; color: var(--text);
    background: #F8FAFC;
}
.mwm-col-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; background: #fff; }
.mwm-col-filter::placeholder { color: #94A3B8; font-weight: 400; }

/* ============ Customisable dashboard (brief item 8) ============ */

/* Two columns, and a "wide" widget spans both. Ordering and sizing are then the same mechanism —
   the layout list decides order, the widget's own size decides span. */
.mwm-widget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.mwm-widget.wide { grid-column: 1 / -1; }
@media (max-width: 1024px) {
    .mwm-widget-grid { grid-template-columns: 1fr; }
    .mwm-widget.wide { grid-column: auto; }
}

/* Drag-and-drop. HTML5 drag events, handled by Blazor directly — no JavaScript file. Drag serves
   neither keyboards nor touchscreens, so every widget also carries arrow buttons; the drag is the
   nice way, not the only way. */
.mwm-drag { position: relative; }
.mwm-drag.on { cursor: grab; }
.mwm-drag.on:active { cursor: grabbing; }

/* While customising, the widget's own contents are inert. Two reasons, both of which stopped drag
   working: a link or table row inside would take the pointer and start ITS drag rather than the
   widget's, and dragging across text selected the text instead of moving anything. The drag bar is
   exempt, because its buttons still need to work. */
.mwm-drag.on > *:not(.mwm-drag-bar) { pointer-events: none; }
.mwm-drag.on { user-select: none; -webkit-user-select: none; }
.mwm-drag.on .mwm-drag-bar { pointer-events: auto; }
.mwm-drag.on::after {
    content: ""; position: absolute; inset: -4px; border-radius: 10px;
    border: 1px dashed var(--border); pointer-events: none;
}
/* The drop target, shown on the widget you are hovering rather than as a thin insertion line —
   at this size the whole tile is the target. */
.mwm-drag.over::after { border: 2px solid var(--accent); background: rgba(31, 78, 121, .05); }

.mwm-drag-bar {
    display: flex; align-items: center; gap: 3px;
    margin-bottom: 4px; padding: 2px 4px;
    background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 8px;
    position: relative; z-index: 1;
}
.mwm-drag-grip { cursor: grab; color: #94A3B8; font-size: 14px; line-height: 1; padding: 0 2px; }
.mwm-drag-bar .mwm-icon-btn { font-size: 13px; line-height: 1; padding: 2px 5px; }
.mwm-drag-bar .mwm-icon-btn.danger:hover { color: #DC2626; }
.mwm-drag-bar .mwm-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Widgets that are off, offered as chips to add back. */
.mwm-widget-add { display: flex; flex-wrap: wrap; gap: 6px; }
.mwm-widget-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border: 1px dashed var(--border); border-radius: 999px;
    background: none; cursor: pointer; font-size: 12.5px; color: var(--text-2, #475569);
}
.mwm-widget-chip:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
.mwm-widget-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mwm-widget-list { display: grid; gap: 2px; }

.mwm-widget-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 4px; border-bottom: 1px solid var(--border-soft);
}
.mwm-widget-row:last-child { border-bottom: 0; }

.mwm-widget-toggle { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.mwm-widget-toggle input { margin-top: 2px; flex: 0 0 auto; }
.mwm-widget-toggle span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mwm-widget-toggle b { font-size: 13px; font-weight: 600; color: var(--text); }
.mwm-widget-toggle small { font-size: 11.5px; color: #64748B; line-height: 1.4; }
.mwm-widget-row:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Up/down rather than drag: it works from a keyboard and on a phone, where drag does not. */
.mwm-widget-move { display: flex; gap: 4px; flex: 0 0 auto; }
.mwm-widget-move .mwm-icon-btn { font-size: 14px; line-height: 1; }
.mwm-widget-move .mwm-icon-btn:disabled { opacity: .3; cursor: default; }

/* ============ Contract vs private work (brief item 1) ============ */

/* Two cards rather than a dropdown: this is the first decision on the form and it changes what the
   rest of it does, so it should look like a choice, not a field. */
.mwm-workkind { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .mwm-workkind { grid-template-columns: 1fr; } }

.mwm-workkind-btn {
    display: flex; align-items: flex-start; gap: 10px; text-align: left;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface, #fff); cursor: pointer;
}
.mwm-workkind-btn:hover { border-color: var(--accent); }
.mwm-workkind-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mwm-workkind-btn.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mwm-workkind-btn span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mwm-workkind-btn b { font-size: 13px; font-weight: 650; color: var(--text); }
.mwm-workkind-btn small { font-size: 11.5px; color: #64748B; line-height: 1.4; }

/* A value the form has decided for you — shown, not editable, with a way back out. */
.mwm-fixed-value {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border: 1px dashed var(--border); border-radius: 8px;
    background: #F8FAFC; font-size: 13px; font-weight: 600; color: var(--text);
}
.mwm-fixed-value .mwm-btn { margin-left: auto; }

/* ============ Features & integrations (brief item 7) ============ */

/* A row is a real <label> wrapping a real checkbox, so it is keyboard reachable and announces its
   own state — no ARIA needed to describe a control the browser already understands. */
.mwm-feature-row {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 2px; border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
}
.mwm-feature-row:last-child { border-bottom: 0; }
.mwm-feature-row:hover { background: rgba(15, 23, 42, .02); }
.mwm-feature-row input { margin-top: 2px; flex: 0 0 auto; }
.mwm-feature-row:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.mwm-feature-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mwm-feature-name { font-size: 13px; font-weight: 600; color: var(--text); }
.mwm-feature-desc { font-size: 12px; color: #64748B; line-height: 1.45; }
.mwm-feature-meta { font-size: 11px; color: #94A3B8; }

.mwm-feature-off {
    margin-left: 7px; padding: 1px 6px; border-radius: 4px;
    background: #F1F5F9; color: #64748B; font-size: 10.5px; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase;
}

/* A quiet aside — context that matters but is not a warning. */
.mwm-note {
    padding: 10px 13px; border-radius: 8px;
    background: #F8FAFC; border: 1px solid var(--border-soft);
    font-size: 12.5px; color: #475569; line-height: 1.55;
}

/* mwm-grid-2 is 2fr 1fr, which suits a wide panel on the left. Where the RIGHT panel is the main
   content — the SLA cockpit's job list, next to its narrower contract summary — this reverses it. */
.mwm-grid-2-rev { grid-template-columns: 1fr 2fr; }
@media (max-width: 1024px) { .mwm-grid-2-rev { grid-template-columns: 1fr; } }

/* ============ SLA cockpit (W3.1) ============ */

/* Clickable KPI tiles that double as the band filter. Built on the stat-card look rather than a
   new one, so the page reads as part of the same system. */
.mwm-sla-tile {
    display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface, #fff); cursor: pointer; text-align: left; width: 100%;
    position: relative; overflow: hidden;
}
.mwm-sla-tile:hover { border-color: var(--accent); }
.mwm-sla-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mwm-sla-tile.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* A 3px spine in the band's colour — enough to separate breached from due without painting the
   whole tile red, which would make four tiles shout at once. */
.mwm-sla-tile::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent;
}
.mwm-sla-tile.danger::before { background: #DC2626; }
.mwm-sla-tile.amber::before  { background: #D97706; }
.mwm-sla-tile .mwm-stat-value { font-size: 26px; font-weight: 680; line-height: 1.1; }
.mwm-sla-tile .mwm-stat-sub   { font-size: 11.5px; color: #94A3B8; }
.mwm-sla-tile.danger .mwm-stat-value { color: #DC2626; }

/* The coverage caveat under the page title. Amber, not red: it is a caveat about what the page
   can see, not an error. */
.mwm-sla-coverage {
    display: flex; align-items: flex-start; gap: 8px; max-width: 760px;
    margin-top: 10px; padding: 9px 12px; border-radius: 8px;
    background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E;
    font-size: 12.5px; line-height: 1.5;
}

/* The countdown chip in the job list. */
.mwm-sla-chip {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11.5px; font-weight: 650; white-space: nowrap;
    background: rgba(15, 23, 42, .06); color: var(--text-2, #475569);
}
.mwm-sla-chip.breached { background: #FEE2E2; color: #B91C1C; }
.mwm-sla-chip.today    { background: #FEF3C7; color: #B45309; }
.mwm-sla-chip.soon     { background: #DBEAFE; color: #1D4ED8; }
.mwm-sla-chip.none     { background: transparent; color: #94A3B8; font-weight: 500; }

.mwm-sla-breach { color: #DC2626; }

/* ---- Saved views (W2.6) ----
   A saved chip is two controls in one pill: the name applies the view, the × deletes it. It is a
   <span> wrapping two <button>s rather than a button inside a button, which is invalid HTML. */
.mwm-chip-saved { display: inline-flex; align-items: center; gap: 0; padding: 0; overflow: hidden; }
.mwm-chip-saved-open,
.mwm-chip-saved-x {
    border: 0; background: none; cursor: pointer; color: inherit; font: inherit;
}
.mwm-chip-saved-open { padding: 5px 4px 5px 11px; }
.mwm-chip-saved-x {
    padding: 5px 9px 5px 5px; font-size: 14px; line-height: 1; opacity: .45;
}
.mwm-chip-saved-x:hover { opacity: 1; color: var(--danger, #DC2626); }
.mwm-chip-saved-open:focus-visible,
.mwm-chip-saved-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.mwm-chip-add { border-style: dashed; display: inline-flex; align-items: center; gap: 5px; }

/* The inline "name this view" row, shown in place of the Save view chip. */
.mwm-chip-namer { display: inline-flex; align-items: center; gap: 6px; }
.mwm-chip-namer input {
    padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
    font-size: 12.5px; min-width: 160px; background: var(--surface, #fff);
}
.mwm-chip-namer input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Result counts on the search-results tabs. */
.mwm-chip-count {
    margin-left: 6px; padding: 1px 6px; border-radius: 10px;
    background: rgba(15, 23, 42, .08); font-size: 11px; font-variant-numeric: tabular-nums;
}
.mwm-chip.active .mwm-chip-count { background: rgba(255, 255, 255, .25); }