/* =============================================================================
   monitor.css — shared styles for the workshop monitor screens
   (Jobs by Week + Jobs by Status), built for big screens viewed from a distance.

   • Every size is in rem, so the per-screen "Text size" control (which sets the
     root font-size) scales EVERYTHING, including dialogs.
   • Every colour is a CSS variable, so a theme is just a block of variables:
         data-theme="dark" | "light" | "contrast"   (set on .monitor-shell)
   • Everything is scoped under .monitor-shell so it cannot leak into other pages.
   ============================================================================= */

/* ----------------------------- THEMES ------------------------------------- */

/* Dark (default) */
.monitor-shell,
.monitor-shell[data-theme="dark"] {
    --m-bg: #0f172a;
    --m-text: #f8fafc;
    --m-text-dim: #cbd5e1;
    --m-col-bg: #1e293b;
    --m-col-border: #475569;
    --m-col-head-bg: #334155;
    --m-col-head-text: #ffffff;
    --m-card-bg: #0b1220;
    --m-card-edge: #94a3b8;
    --m-card-overdue-bg: #5b1010;
    --m-ok: #34d399;
    --m-warn: #fbbf24;
    --m-bad: #f87171;
    --m-accent: #93c5fd;
    --m-select: #38bdf8;
    --m-today: #0e7490;
    --m-today-text: #ffffff;
    --m-overdue-head: #b91c1c;
    --m-overdue-head-text: #ffffff;
    --m-duetoday-head: #92400e;
    --m-note-bg: #fef3c7;
    --m-note-text: #78350f;
    --m-note-border: #fbbf24;
    --m-track: #475569;
    /* 22% black overlay on the brand gradient: keeps white text readable whatever colour scheme is chosen */
    --m-header-bg: linear-gradient(rgba(0,0,0,0.22), rgba(0,0,0,0.22)), linear-gradient(135deg, var(--brand-1, #1e40af) 0%, var(--brand-2, #0891b2) 100%);
    --m-header-text: #ffffff;
    --m-header-border: #0284c7;
    --m-chip-bg: rgba(0,0,0,0.28);
    --m-chip-hover: rgba(0,0,0,0.48);
    /* table view */
    --m-t-bg: #0f172a;
    --m-t-surface: #1e293b;
    --m-t-text: #f8fafc;
    --m-t-muted: #cbd5e1;
    --m-t-head-bg: #334155;
    --m-t-head-text: #ffffff;
    --m-t-line: #475569;
    --m-t-hover: #334155;
    --m-t-overdue-bg: #5b1010;
    --m-t-overdue-hover: #741616;
    --m-t-today-bg: #5a3a0a;
    --m-t-today-hover: #704a10;
    --m-t-selected-bg: #0c4a6e;
    --m-t-group-bg: #273449;
    --m-t-group-today: #0c4a6e;
    --m-t-group-overdue: #7f1d1d;
    --m-t-notes-bg: #fef3c7;
    --m-t-notes-text: #78350f;
    --m-eta-overdue-bg: #dc2626;
    --m-eta-today-bg: #b45309;
    --m-bar-fill: linear-gradient(90deg, #34d399, #22d3ee);
    --m-bar-fill-table: linear-gradient(90deg, #fbbf24, #f59e0b);
}

/* Classic — the original monitor look: navy cards, light table view */
.monitor-shell[data-theme="classic"] {
    --m-bg: #0f172a;
    --m-text: #f1f5f9;
    --m-text-dim: #cbd5e1;
    --m-col-bg: #1e293b;
    --m-col-border: #334155;
    --m-col-head-bg: #334155;
    --m-col-head-text: #f1f5f9;
    --m-card-bg: #0f172a;
    --m-card-edge: #64748b;
    --m-card-overdue-bg: #450a0a;
    --m-ok: #10b981;
    --m-warn: #f59e0b;
    --m-bad: #ef4444;
    --m-accent: #93c5fd;
    --m-select: #0ea5e9;
    --m-today: #0891b2;
    --m-today-text: #ffffff;
    --m-overdue-head: #dc2626;
    --m-has-overdue-head: #7f1d1d;
    --m-overdue-head-text: #ffffff;
    --m-duetoday-head: #78350f;
    --m-duetoday-text: #ffffff;
    --m-track: #334155;
    --m-header-bg: linear-gradient(135deg, var(--brand-1, #1e40af) 0%, var(--brand-2, #0891b2) 100%);
    --m-t-bg: #f8fafc;
    --m-t-surface: #ffffff;
    --m-t-text: #0f172a;
    --m-t-muted: #475569;
    --m-t-head-bg: #1e293b;
    --m-t-head-text: #ffffff;
    --m-t-line: #e2e8f0;
    --m-t-hover: #dbeafe;
    --m-t-overdue-bg: #fee2e2;
    --m-t-overdue-hover: #fecaca;
    --m-t-today-bg: #fef3c7;
    --m-t-today-hover: #fde68a;
    --m-t-selected-bg: #e0f2fe;
    --m-t-group-bg: #e2e8f0;
    --m-t-group-today: #dbeafe;
    --m-t-group-overdue: #fecaca;
    --m-eta-overdue-bg: #dc2626;
    --m-eta-today-bg: #b45309;
    --m-bar-fill: linear-gradient(90deg, #10b981, #0891b2);
    --m-bar-fill-table: linear-gradient(90deg, #fbbf24, #f59e0b);
}

/* Light — for bright workshops / daytime glare */
.monitor-shell[data-theme="light"] {
    --m-bg: #e2e8f0;
    --m-text: #0f172a;
    --m-text-dim: #334155;
    --m-col-bg: #ffffff;
    --m-col-border: #94a3b8;
    --m-col-head-bg: #cbd5e1;
    --m-col-head-text: #0f172a;
    --m-card-bg: #f8fafc;
    --m-card-edge: #64748b;
    --m-card-overdue-bg: #fee2e2;
    --m-ok: #047857;
    --m-warn: #b45309;
    --m-bad: #b91c1c;
    --m-accent: #1d4ed8;
    --m-select: #0369a1;
    --m-today: #0e7490;
    --m-today-text: #ffffff;
    --m-overdue-head: #b91c1c;
    --m-overdue-head-text: #ffffff;
    --m-duetoday-head: #fcd34d;
    --m-duetoday-text: #000000;
    --m-note-bg: #fef3c7;
    --m-note-text: #78350f;
    --m-note-border: #d97706;
    --m-track: #cbd5e1;
    --m-header-text: #ffffff;
    --m-t-bg: #e2e8f0;
    --m-t-surface: #ffffff;
    --m-t-text: #0f172a;
    --m-t-muted: #334155;
    --m-t-head-bg: #1e293b;
    --m-t-head-text: #ffffff;
    --m-t-line: #cbd5e1;
    --m-t-hover: #dbeafe;
    --m-t-overdue-bg: #fee2e2;
    --m-t-overdue-hover: #fecaca;
    --m-t-today-bg: #fef3c7;
    --m-t-today-hover: #fde68a;
    --m-t-selected-bg: #e0f2fe;
    --m-t-group-bg: #e2e8f0;
    --m-t-group-today: #bfdbfe;
    --m-t-group-overdue: #fecaca;
    --m-eta-overdue-bg: #b91c1c;
    --m-eta-today-bg: #b45309;
    --m-bar-fill: linear-gradient(90deg, #059669, #0891b2);
}

/* High contrast — black, white and yellow; best for long distances */
.monitor-shell[data-theme="contrast"] {
    --m-bg: #000000;
    --m-text: #ffffff;
    --m-text-dim: #ffffff;
    --m-col-bg: #000000;
    --m-col-border: #ffffff;
    --m-col-head-bg: #000000;
    --m-col-head-text: #ffd400;
    --m-card-bg: #000000;
    --m-card-edge: #ffffff;
    --m-card-overdue-bg: #5c0000;
    --m-ok: #00ff7f;
    --m-warn: #ffd400;
    --m-bad: #ff5c5c;
    --m-accent: #7dd3fc;
    --m-select: #ffd400;
    --m-today: #ffd400;
    --m-today-text: #000000;
    --m-overdue-head: #c00000;
    --m-overdue-head-text: #ffffff;
    --m-duetoday-head: #ffd400;
    --m-duetoday-text: #000000;
    --m-note-bg: #ffd400;
    --m-note-text: #000000;
    --m-note-border: #ffffff;
    --m-track: #6b7280;
    --m-header-bg: #000000;
    --m-header-text: #ffffff;
    --m-header-border: #ffd400;
    --m-chip-bg: #1f2937;
    --m-chip-hover: #374151;
    --m-t-bg: #000000;
    --m-t-surface: #000000;
    --m-t-text: #ffffff;
    --m-t-muted: #ffffff;
    --m-t-head-bg: #ffd400;
    --m-t-head-text: #000000;
    --m-t-line: #ffffff;
    --m-t-hover: #1f2937;
    --m-t-overdue-bg: #5c0000;
    --m-t-overdue-hover: #7a0000;
    --m-t-today-bg: #4d3d00;
    --m-t-today-hover: #665200;
    --m-t-selected-bg: #00334d;
    --m-t-group-bg: #1f2937;
    --m-t-group-today: #00334d;
    --m-t-group-overdue: #7a0000;
    --m-t-notes-bg: #ffd400;
    --m-t-notes-text: #000000;
    --m-eta-overdue-bg: #c00000;
    --m-eta-today-bg: #ffd400;
    --m-bar-fill: linear-gradient(90deg, #00ff7f, #00ff7f);
    --m-bar-fill-table: linear-gradient(90deg, #ffd400, #ffd400);
}
.monitor-shell[data-theme="contrast"] .eta-today { color: #000000; }

/* Custom — palette worked out from two chosen colours (see AppearanceCatalog.DeriveCustomMonitor).
   The --cu-* values are supplied by the monitor layout; this block just maps them onto the theme. */
.monitor-shell[data-theme="custom"] {
    --m-bg: var(--cu-bg);
    --m-text: var(--cu-text);
    --m-text-dim: var(--cu-text-dim);
    --m-col-bg: var(--cu-col-bg);
    --m-col-border: var(--cu-col-border);
    --m-col-head-bg: var(--cu-col-head-bg);
    --m-col-head-text: var(--cu-col-head-text);
    --m-card-bg: var(--cu-card-bg);
    --m-card-edge: var(--cu-card-edge);
    --m-card-overdue-bg: var(--cu-card-overdue-bg);
    --m-ok: var(--cu-ok);
    --m-warn: var(--cu-warn);
    --m-bad: var(--cu-bad);
    --m-accent: var(--cu-accent);
    --m-select: var(--cu-select);
    --m-today: var(--cu-today);
    --m-today-text: var(--cu-today-text);
    --m-overdue-head: var(--cu-overdue-head);
    --m-overdue-head-text: var(--cu-overdue-head-text);
    --m-duetoday-head: var(--cu-duetoday-head);
    --m-duetoday-text: var(--cu-duetoday-text);
    --m-track: var(--cu-track);
    --m-t-bg: var(--cu-t-bg);
    --m-t-surface: var(--cu-t-surface);
    --m-t-text: var(--cu-t-text);
    --m-t-muted: var(--cu-t-muted);
    --m-t-head-bg: var(--cu-t-head-bg);
    --m-t-head-text: var(--cu-t-head-text);
    --m-t-line: var(--cu-t-line);
    --m-t-hover: var(--cu-t-hover);
    --m-t-overdue-bg: var(--cu-t-overdue-bg);
    --m-t-overdue-hover: var(--cu-t-overdue-hover);
    --m-t-today-bg: var(--cu-t-today-bg);
    --m-t-today-hover: var(--cu-t-today-hover);
    --m-t-selected-bg: var(--cu-t-selected-bg);
    --m-t-group-bg: var(--cu-t-group-bg);
    --m-t-group-today: var(--cu-t-group-today);
    --m-t-group-overdue: var(--cu-t-group-overdue);
    --m-eta-overdue-bg: var(--cu-eta-overdue-bg);
    --m-eta-today-bg: var(--cu-eta-today-bg);
    --m-bar-fill: linear-gradient(90deg, #34d399, #22d3ee);
    --m-bar-fill-table: linear-gradient(90deg, #fbbf24, #f59e0b);
}

/* ----------------------------- SHELL + HEADER ------------------------------ */

.monitor-shell {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100vh;
    height: 100dvh;
    background: var(--m-bg);
    color: var(--m-text);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 0;
}

.monitor-shell h1 { font-size: 1.7rem; margin: 0; font-weight: 800; line-height: 1.15; }
.monitor-shell h2 { font-size: 1.6rem; margin: 0; font-weight: 700; }
.monitor-shell h3 { font-size: 1.25rem; margin: 0; font-weight: 700; }

.monitor-shell .monitor-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    padding: 0.25rem 1rem;
    background: var(--m-header-bg);
    color: var(--m-header-text);
    border-bottom: 2px solid var(--m-header-border);
    box-sizing: border-box;
}
.monitor-shell .monitor-header .title { display: flex; align-items: center; gap: 0.65rem; }
/* title and its sub-line (week navigation / open-jobs count) share one row instead of stacking */
.monitor-shell .monitor-header .title > div { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 1.25rem; }
.monitor-shell .monitor-header .clock { font-size: 1.3rem; font-weight: 700; }
.monitor-shell .header-sub { font-size: 0.95rem; font-weight: 600; }
.monitor-shell .header-sub .overdue-note { color: #fecaca; margin-left: 0.75rem; }
.monitor-shell[data-theme="contrast"] .header-sub .overdue-note { color: var(--m-bad); }
.monitor-shell .live-note { font-size: 0.95rem; font-weight: 600; }

.monitor-shell .refresh-pulse {
    display: inline-block;
    width: 0.7rem; height: 0.7rem;
    border-radius: 50%;
    background: #10b981;
    margin-right: 0.4rem;
    animation: monitor-pulse 2s infinite;
}
@keyframes monitor-pulse {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.3); opacity: 0.6; }
    100% { transform: scale(1);   opacity: 1; }
}

/* header buttons */
.monitor-shell .view-switch { display: inline-flex; background: var(--m-chip-bg); border-radius: 8px; overflow: hidden; }
.monitor-shell .view-switch button { background: transparent; border: 0; color: var(--m-header-text); padding: 0.3rem 0.9rem; font-size: 1rem; font-weight: 700; cursor: pointer; }
.monitor-shell .view-switch button:hover { background: var(--m-chip-hover); }
.monitor-shell .view-switch button.active { background: var(--m-chip-hover); box-shadow: inset 0 -3px 0 var(--m-header-text); }

.monitor-shell .chip-button {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--m-chip-bg); border: 0; color: var(--m-header-text);
    padding: 0.3rem 0.8rem; border-radius: 8px;
    font-size: 1rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.monitor-shell .chip-button:hover { background: var(--m-chip-hover); }
.monitor-shell .chip-group { display: inline-flex; align-items: stretch; gap: 2px; border-radius: 8px; overflow: hidden; }
.monitor-shell .chip-group .chip-button { border-radius: 0; }
.monitor-shell .chip-group .chip-label { display: inline-flex; align-items: center; padding: 0 0.7rem; background: var(--m-chip-bg); font-size: 1rem; font-weight: 700; min-width: 4.2rem; justify-content: center; }

/* ----------------------------- CARD COLUMNS (shared) ----------------------- */

.monitor-shell .column-header { flex: 0 0 auto; padding: 0.3rem 0.6rem; background: var(--m-col-head-bg); color: var(--m-col-head-text); text-align: center; border-bottom: 2px solid var(--m-col-border); }
.monitor-shell .column-header.has-overdue { background: var(--m-has-overdue-head, var(--m-overdue-head)); color: var(--m-overdue-head-text); }
.monitor-shell .column-header.has-duetoday { background: var(--m-duetoday-head); color: var(--m-duetoday-text, #ffffff); }
.monitor-shell .column-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.4rem; }

.monitor-shell .job-card { position: relative; background: var(--m-card-bg); color: var(--m-text); border-radius: 8px; padding: 0.55rem 0.7rem; border-left: 6px solid var(--m-card-edge); border-top: 1px solid var(--m-col-border); border-right: 1px solid var(--m-col-border); border-bottom: 1px solid var(--m-col-border); cursor: pointer; flex: 0 0 auto; scroll-margin-top: 1rem; scroll-margin-bottom: 3rem; overflow-wrap: break-word; }
.monitor-shell .job-card:hover { box-shadow: 0 4px 14px rgba(14,165,233,0.35); }
.monitor-shell .job-card.card-overdue { border-left-color: var(--m-bad); background: var(--m-card-overdue-bg); }
.monitor-shell .job-card.card-today   { border-left-color: var(--m-warn); }
.monitor-shell .job-card.card-onTrack { border-left-color: var(--m-ok); }
.monitor-shell .job-card.selected { outline: 3px solid var(--m-select); outline-offset: 1px; }

.monitor-shell .row-top        { display: flex; justify-content: space-between; align-items: baseline; padding-right: 1.9rem; }
.monitor-shell .job-no         { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.03em; }
.monitor-shell .days-in        { font-size: 0.95rem; font-weight: 700; color: var(--m-text-dim); }
.monitor-shell .job-identifier { font-size: 0.95rem; font-weight: 600; color: var(--m-accent); margin-top: 0.05rem; }
.monitor-shell .job-vehicle    { font-size: 1.25rem; font-weight: 800; margin-top: 0.1rem; line-height: 1.2; }
.monitor-shell .job-reg        { font-size: 1.1rem; font-weight: 700; color: var(--m-text); margin-top: 0.05rem; font-family: 'Menlo','Consolas',monospace; }
.monitor-shell .task           { font-size: 1rem; font-weight: 600; margin-top: 0.2rem; color: var(--m-accent); line-height: 1.2; }
.monitor-shell .job-meta       { font-size: 0.95rem; font-weight: 600; color: var(--m-text-dim); margin-top: 0.25rem; display: flex; justify-content: space-between; gap: 0.5rem; }
.monitor-shell .progress-bar   { margin-top: 0.35rem; height: 0.5rem; background: var(--m-track); border-radius: 4px; overflow: hidden; }
.monitor-shell .progress-fill  { height: 100%; background: var(--m-bar-user, var(--m-bar-fill)); }
.monitor-shell .card-actions   { position: absolute; top: 2px; right: 2px; color: var(--m-text-dim); }
.monitor-shell .note-band { margin: 0.4rem -0.7rem -0.55rem -0.7rem; padding: 0.4rem 0.7rem; background: var(--m-note-bg); color: var(--m-note-text); font-size: 1rem; font-weight: 700; line-height: 1.3; border-top: 2px solid var(--m-note-border); border-radius: 0 0 6px 0; display: flex; gap: 0.35rem; white-space: pre-wrap; word-break: break-word; cursor: text; }
.monitor-shell .note-icon { flex: 0 0 auto; font-size: 1rem; }
.monitor-shell .note-text { flex: 1 1 auto; }
.monitor-shell .note-add  { margin-top: 0.3rem; font-size: 0.9rem; font-weight: 600; color: var(--m-text-dim); cursor: pointer; }
.monitor-shell .note-add:hover { color: var(--m-accent); }
.monitor-shell .empty { text-align: center; padding: 0.6rem; color: var(--m-text-dim); font-style: italic; font-size: 1rem; }

/* ----------------------------- WEEK MONITOR -------------------------------- */

.monitor-shell .week-grid { flex: 1 1 auto; min-height: 0; display: grid; gap: 0.4rem; padding: 0.5rem; box-sizing: border-box; overflow: hidden; }
.monitor-shell .week-column { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--m-col-bg); border-radius: 10px; overflow: hidden; border: 2px solid var(--m-col-border); }
.monitor-shell .today-column { border-color: var(--m-today); box-shadow: 0 0 0 3px var(--m-today); }
.monitor-shell .overdue-column { border-color: var(--m-bad); }
.monitor-shell .column-header-today { background: var(--m-today); color: var(--m-today-text); }
.monitor-shell .column-header-overdue { background: var(--m-overdue-head); color: var(--m-overdue-head-text); }
.monitor-shell .day-name  { font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.monitor-shell .day-date  { font-size: 0.95rem; font-weight: 600; }
.monitor-shell .day-count { font-size: 1.8rem; font-weight: 800; margin-top: 0.1rem; line-height: 1; }

.monitor-shell .week-nav { display: flex; align-items: center; gap: 0.4rem; margin-top: 0; outline: none; }
.monitor-shell .week-arrow { background: var(--m-chip-bg); border: 0; color: var(--m-header-text); width: 1.9rem; height: 1.9rem; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
.monitor-shell .week-arrow:hover { background: var(--m-chip-hover); }
.monitor-shell .week-label { display: flex; flex-direction: row; align-items: center; gap: 0.6rem; min-width: 0; }
.monitor-shell .week-range { font-size: 1.1rem; font-weight: 700; }
.monitor-shell .week-badge { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; padding: 0.1rem 0.5rem; border-radius: 4px; margin-top: 0; }
.monitor-shell .week-badge.current { background: #10b981; color: #052e1f; }
.monitor-shell .week-badge.next    { background: #22d3ee; color: #052e33; }
.monitor-shell .week-badge.prev    { background: #cbd5e1; color: #1e293b; }
.monitor-shell .week-badge.future  { background: #6366f1; color: #ffffff; }
.monitor-shell .week-badge.past    { background: #475569; color: #ffffff; }
.monitor-shell .week-today { background: #059669; border: 0; color: #ffffff; padding: 0 0.8rem; height: 2.2rem; border-radius: 6px; font-size: 0.95rem; font-weight: 700; cursor: pointer; margin-left: 0.3rem; }

/* ----------------------------- STATUS MONITOR ------------------------------ */

.monitor-shell .status-board { flex: 1 1 auto; min-height: 0; display: flex; gap: 0.4rem; padding: 0.5rem; overflow-x: auto; overflow-y: hidden; box-sizing: border-box; outline: none; }
/* columns share the screen width equally (so everything is visible on an unattended TV) and only
   start scrolling sideways once they'd have to get narrower than 10rem */
.monitor-shell .status-column { flex: 1 1 0; min-width: 10rem; max-width: 26rem; display: flex; flex-direction: column; min-height: 0; background: var(--m-col-bg); border-radius: 10px; overflow: hidden; border: 2px solid var(--m-col-border); }
.monitor-shell .col-title   { font-size: 1.15rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.monitor-shell .col-count   { font-size: 1.5rem; font-weight: 800; margin-top: 0; line-height: 1; }
.monitor-shell .col-warning { font-size: 0.9rem; font-weight: 700; margin-top: 0.05rem; }
.monitor-shell .job-card[draggable="true"] { cursor: grab; }
.monitor-shell .job-card:active { cursor: grabbing; }
.monitor-shell .job-card.dragging { opacity: 0.5; }
.monitor-shell .status-column.drag-over { outline: 3px dashed var(--m-select); outline-offset: -3px; }

/* ----------------------------- TABLE VIEW (both monitors) ------------------ */

.monitor-shell .table-container { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.3rem; background: var(--m-t-bg); outline: none; }
.monitor-shell .dense-table { width: 100%; border-collapse: collapse; background: var(--m-t-surface); font-size: 1.05rem; color: var(--m-t-text); }
.monitor-shell .dense-table thead { position: sticky; top: 0; z-index: 2; background: var(--m-t-head-bg); color: var(--m-t-head-text); }
.monitor-shell .dense-table th { padding: 0.3rem 0.65rem; text-align: left; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid var(--m-t-line); background: var(--m-t-head-bg); color: var(--m-t-head-text); }
.monitor-shell .dense-table td { padding: 0.4rem 0.65rem; border-bottom: 1px solid var(--m-t-line); white-space: nowrap; font-weight: 600; }
.monitor-shell .dense-table td.mono { font-family: 'Menlo','Consolas',monospace; font-size: 1rem; }
.monitor-shell .dense-table td.notes-cell { max-width: 22rem; white-space: normal; color: var(--m-t-notes-text, #78350f); background: var(--m-t-notes-bg, #fef3c7); font-weight: 700; cursor: text; }

.monitor-shell .job-row { cursor: pointer; scroll-margin-top: 3rem; scroll-margin-bottom: 2.5rem; }
.monitor-shell .job-row:hover { background: var(--m-t-hover); }
.monitor-shell .job-row.row-overdue { background: var(--m-t-overdue-bg); }
.monitor-shell .job-row.row-overdue:hover { background: var(--m-t-overdue-hover); }
.monitor-shell .job-row.row-today { background: var(--m-t-today-bg); }
.monitor-shell .job-row.row-today:hover { background: var(--m-t-today-hover); }
.monitor-shell .job-row.selected { outline: 3px solid var(--m-select); outline-offset: -3px; background: var(--m-t-selected-bg); }
.monitor-shell .job-row.selected td { background: var(--m-t-selected-bg); }
.monitor-shell .job-row.selected td.notes-cell { background: var(--m-t-notes-bg, #fef3c7); }

.monitor-shell .eta-overdue { background: var(--m-eta-overdue-bg); color: #ffffff; font-weight: 800; text-align: center; }
.monitor-shell .eta-today   { background: var(--m-eta-today-bg); color: #ffffff; font-weight: 800; text-align: center; }
.monitor-shell .auth-yes { color: var(--m-ok); font-weight: 800; }
.monitor-shell .auth-no  { color: var(--m-t-muted); opacity: 0.6; }

.monitor-shell .group-row { background: var(--m-t-group-bg) !important; cursor: pointer; user-select: none; }
.monitor-shell .group-row td { padding: 0.35rem 0.85rem; font-size: 1.05rem; border-bottom: 2px solid var(--m-t-line); color: var(--m-t-text); }
.monitor-shell .group-row.group-today   { background: var(--m-t-group-today) !important; }
.monitor-shell .group-row.group-overdue { background: var(--m-t-group-overdue) !important; }
.monitor-shell .chevron { display: inline-block; width: 1.2rem; color: var(--m-t-muted); }
.monitor-shell .group-count { color: var(--m-t-muted); margin-left: 0.5rem; font-weight: 600; }
.monitor-shell .group-warning { color: var(--m-bad); margin-left: 1rem; font-weight: 800; }
.monitor-shell .empty-row { text-align: center; padding: 0.75rem !important; color: var(--m-t-muted); font-style: italic; }

.monitor-shell .inline-bar { display: inline-flex; align-items: center; gap: 0.4rem; }
.monitor-shell .inline-bar-track { flex: 1; height: 0.7rem; background: var(--m-track); border-radius: 4px; overflow: hidden; min-width: 4.5rem; }
.monitor-shell .inline-bar-fill  { height: 100%; background: var(--m-bar-user, var(--m-bar-fill-table)); }
.monitor-shell .inline-bar-label { font-size: 0.9rem; font-weight: 800; color: var(--m-t-muted); min-width: 2.6rem; text-align: right; }

/* Fit mode, many columns: columns may shrink below their normal minimum rather than scroll sideways */
.monitor-shell.fit-squeeze .status-column { min-width: 0; }