/* ── BLOCK 10: Maintenance module (w67a) ─────────────────────────────────────
   Leans on the design system in block02-base.css (:root tokens; dark theme is
   the inline adeThemeCss override layer — everything here uses var() tokens
   with light fallbacks so both themes hold). */

/* w71: the settings tabs moved from a modal onto a page inside
   #module-maintenance, so the first selector now covers both. */
#module-maintenance .mx-tab { padding:7px 14px;
  border:none; background:none;
  font:inherit; font-size:13px; color:var(--muted,#6b6b70); cursor:pointer;
  border-bottom:2px solid transparent; }
#module-maintenance .mx-tab.active {
  color:var(--green,#399845); font-weight:700;
  border-bottom-color:var(--green,#399845); }

.mx-loading { padding:40px; text-align:center; color:var(--muted,#6b6b70); }
.mx-empty { padding:60px 24px; text-align:center; color:var(--muted,#6b6b70); }
.mx-empty i { font-size:40px; }
.mx-empty h3 { margin:10px 0 6px; color:var(--text,#222); }
.mx-empty p { font-size:13px; margin:0 0 16px; }

.mx-kpi-red .stat-val { color:#c0392b; }

.mx-dash-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px;
  padding:0 18px 18px; overflow:auto; }
@media (max-width: 900px) { .mx-dash-cols { grid-template-columns:1fr; } }

.mx-card { background:var(--surface,#fff); border:1px solid var(--gray-m,#e2e2e5);
  border-radius:10px; padding:12px 14px; min-width:0; }
.mx-card-head { font-size:12.5px; font-weight:700; display:flex; gap:7px;
  align-items:center; margin-bottom:8px; }
.mx-card-sub { font-weight:400; font-size:11px; color:var(--muted,#6b6b70); margin-left:auto; }
.mx-card-empty { font-size:12px; color:var(--muted,#6b6b70); padding:8px 0; }

.mx-row { display:flex; align-items:center; gap:10px; padding:7px 6px;
  border-radius:7px; cursor:pointer; }
.mx-row:hover { background:var(--gray-l,#f4f4f5); }
.mx-row-main { flex:1; min-width:0; }
.mx-row-title { font-size:12.5px; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.mx-row-sub { font-size:11px; color:var(--muted,#6b6b70); }

.mx-bar-row { display:flex; align-items:center; gap:8px; padding:5px 4px;
  cursor:pointer; border-radius:6px; }
.mx-bar-row:hover { background:var(--gray-l,#f4f4f5); }
.mx-bar-label { font-size:12px; width:140px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.mx-bar-track { flex:1; height:8px; background:var(--gray-l,#f0f0f2);
  border-radius:4px; overflow:hidden; }
.mx-bar-fill { display:block; height:100%; border-radius:4px; }
.mx-bar-n { font-size:12px; font-weight:700; width:28px; text-align:right; }

.mx-chip { display:inline-block; padding:2px 9px; border-radius:20px;
  font-size:11px; font-weight:700; white-space:nowrap; }
.mx-st-scheduled     { background:rgba(24,101,176,.12); color:#1865b0; }
.mx-st-in_progress   { background:rgba(194,124,14,.14); color:#a36a08; }
.mx-st-pending_review{ background:rgba(124,92,214,.14); color:#6a4fc4; }
.mx-st-completed     { background:rgba(57,152,69,.14); color:#2c7d38; }
.mx-st-cancelled     { background:rgba(110,110,115,.14); color:#6b6b70; }
.mx-st-overdue       { background:rgba(192,57,43,.14); color:#c0392b; }
.mx-pri-low      { background:rgba(110,110,115,.12); color:#6b6b70; }
.mx-pri-medium   { background:rgba(24,101,176,.12); color:#1865b0; }
.mx-pri-high     { background:rgba(194,124,14,.14); color:#a36a08; }
.mx-pri-critical { background:rgba(192,57,43,.14); color:#c0392b; }

.mx-catdot { display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:5px; vertical-align:baseline; }

.mx-taskrow { cursor:pointer; }
.mx-overdue-row td:first-child { box-shadow:inset 3px 0 0 #c0392b; }

.mx-pager { display:flex; align-items:center; justify-content:flex-end;
  gap:8px; padding:8px 16px; border-top:1px solid var(--gray-m,#e2e2e5);
  font-size:12px; color:var(--muted,#6b6b70); background:var(--surface,#fff); }
.mx-pager .btn[disabled] { opacity:.4; pointer-events:none; }

.mx-togglechip.active { background:var(--green-l,#e7f4e9);
  border-color:var(--green,#399845); color:var(--green,#399845); font-weight:700; }

/* Drawer / form */
.mx-drawer-head { display:flex; align-items:center; gap:10px;
  padding:14px 18px; border-bottom:1px solid var(--gray-m,#e2e2e5); }
.mx-drawer-title { font-size:15px; font-weight:800; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.mx-drawer-sub { margin-top:5px; display:flex; gap:6px; flex-wrap:wrap; }
.mx-drawer-body { padding:14px 18px; overflow:auto; }

.mx-fgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; }
@media (max-width: 700px) { .mx-fgrid { grid-template-columns:1fr; } }
.mx-f-l { font-size:10.5px; font-weight:700; color:var(--muted,#6b6b70);
  text-transform:uppercase; margin-bottom:2px; }
.mx-f-v { font-size:12.5px; }
.mx-desc { margin-top:12px; font-size:12.5px; line-height:1.55;
  white-space:pre-wrap; background:var(--gray-l,#f7f7f8); border-radius:8px;
  padding:10px 12px; }
.mx-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

.mx-eqchip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
  border:1px solid var(--gray-m,#e2e2e5); border-radius:16px; font-size:11.5px;
  background:var(--gray-l,#f7f7f8); margin:2px 2px 2px 0; }
.mx-eqchip i { cursor:pointer; font-size:12px; color:var(--muted,#6b6b70); }
.mx-eqchip i:hover { color:#c0392b; }

.mx-comment { padding:8px 0; border-bottom:1px solid var(--gray-l,#f0f0f2);
  font-size:12.5px; }
.mx-comment-head { font-weight:700; font-size:11.5px; margin-bottom:2px; }
.mx-comment-head span { font-weight:400; color:var(--muted,#6b6b70); margin-left:6px; }
.mx-comment-add { display:flex; gap:8px; margin-top:10px; }
.mx-comment-add .filter-input { flex:1; }
.mx-hist { font-size:11.5px; color:var(--muted,#6b6b70); padding:3px 0; }
.mx-hist span { font-weight:600; margin-right:6px; }

.mx-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
@media (max-width: 700px) { .mx-form-grid { grid-template-columns:1fr; } }
.mx-lbl { display:flex; flex-direction:column; gap:4px; font-size:11px;
  font-weight:700; color:var(--muted,#6b6b70); }
.mx-lbl .filter-input { font-weight:400; }

.mx-picklist { min-height:20px; }
.mx-pickresults { max-height:180px; overflow:auto; margin-top:4px; }
.mx-pickrow { display:flex; align-items:center; gap:7px; padding:6px 8px;
  font-size:12.5px; border-radius:6px; cursor:pointer; }
.mx-pickrow:hover { background:var(--gray-l,#f4f4f5); }
.mx-pickrow span { margin-left:auto; font-size:11px; }

.mx-catrow { display:flex; align-items:center; gap:8px; padding:7px 4px;
  border-bottom:1px solid var(--gray-l,#f0f0f2); font-size:12.5px; }
.mx-cat-off { opacity:.6; }

.mx-comment-del { cursor:pointer; font-size:12px; color:var(--muted,#6b6b70);
  margin-left:8px; }
.mx-comment-del:hover { color:#c0392b; }

/* w67d — Recurring tab */
.mx-freq{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  padding:2px 9px;border-radius:999px;background:var(--gray-l,#f0f0f2);
  color:var(--ink,#2b2b2e);white-space:nowrap}
.mx-recur-inactive td{opacity:.55}
#mxRecur table td{vertical-align:middle}

/* w68a — Schedule views: switcher, calendar, board */
.mx-viewseg { display:inline-flex; border:1px solid var(--gray-m,#e2e2e5);
  border-radius:8px; overflow:hidden; background:var(--surface,#fff); }
.mx-viewbtn { padding:6px 12px; border:none; background:none; font:inherit;
  font-size:12px; color:var(--muted,#6b6b70); cursor:pointer; white-space:nowrap; }
.mx-viewbtn + .mx-viewbtn { border-left:1px solid var(--gray-m,#e2e2e5); }
.mx-viewbtn.active { background:var(--green-l,#eaf4eb); color:var(--green,#399845); font-weight:700; }

/* calendar */
#mxCalWrap, #mxKanWrap { flex-direction:column; min-height:0; }
.mx-cal-bar { display:flex; align-items:center; gap:8px; padding:8px 16px;
  border-bottom:1px solid var(--gray-m,#e2e2e5); background:var(--surface,#fff); flex-wrap:wrap; }
.mx-cal-title { font-size:14px; font-weight:800; margin-left:6px; flex:1; min-width:120px; }
.mx-cal-badge { border:none; cursor:pointer; font:inherit; font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; gap:4px; }
.mx-cal-grid { flex:1; min-height:0; overflow:auto; display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr)); grid-template-rows:auto;
  grid-auto-rows:minmax(96px, auto);
  background:var(--gray-m,#e2e2e5); gap:1px; border-bottom:1px solid var(--gray-m,#e2e2e5); }
.mx-cal-grid.mx-cal-week { grid-auto-rows:minmax(0,1fr); }
.mx-cal-dow { position:sticky; top:0; z-index:1; background:var(--gray-l,#f4f4f5);
  font-size:10.5px; font-weight:700; text-transform:uppercase; color:var(--muted,#6b6b70);
  padding:5px 8px; grid-row:auto; min-height:0; }
.mx-cal-cell { background:var(--surface,#fff); padding:4px 6px; min-width:0; display:flex;
  flex-direction:column; gap:3px; }
.mx-cal-out { background:var(--gray-l,#f7f7f8); }
.mx-cal-out .mx-cal-daynum { opacity:.45; }
.mx-cal-today .mx-cal-daynum span:first-child { background:var(--green,#399845); color:#fff;
  border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center;
  justify-content:center; }
.mx-cal-daynum { display:flex; align-items:center; justify-content:space-between;
  font-size:12px; font-weight:700; }
.mx-cal-count { font-size:10px; font-weight:600; color:var(--muted,#6b6b70); }
.mx-cal-evs { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mx-cal-ev { font-size:11px; line-height:1.3; padding:2px 6px; border-radius:5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer;
  border-left:3px solid #1865b0; background:rgba(24,101,176,.10); color:var(--text,#2c2c2e); }
.mx-cal-ev-in_progress { border-left-color:#a36a08; background:rgba(194,124,14,.12); }
.mx-cal-ev-pending_review { border-left-color:#6a4fc4; background:rgba(124,92,214,.12); }
.mx-cal-ev-completed { border-left-color:#2c7d38; background:rgba(57,152,69,.10); opacity:.7;
  text-decoration:line-through; }
.mx-cal-ev-cancelled { border-left-color:#6b6b70; background:rgba(110,110,115,.10); opacity:.6; }
.mx-cal-ev-overdue { border-left-color:#c0392b; background:rgba(192,57,43,.12); }
.mx-cal-ev-critical { font-weight:700; }
.mx-cal-ev-high { font-weight:600; }
.mx-cal-ev[draggable="true"] { cursor:grab; }
.mx-cal-more { font-size:10.5px; color:var(--blue,#1865b0); cursor:pointer; padding:1px 6px; }
.mx-cal-foot { font-size:11.5px; color:var(--muted,#6b6b70); padding:6px 16px;
  background:var(--surface,#fff); }
.mx-dragging { opacity:.4; }
.mx-drop-ok { outline:2px dashed var(--green,#399845); outline-offset:-2px;
  background:var(--green-l,#eaf4eb) !important; }

/* board */
.mx-kan-bar { display:flex; align-items:center; gap:10px; padding:8px 16px;
  border-bottom:1px solid var(--gray-m,#e2e2e5); background:var(--surface,#fff); }
.mx-kan-toggle { margin-left:auto; display:flex; gap:6px; align-items:center;
  font-size:12px; white-space:nowrap; cursor:pointer; }
.mx-kan-cols { flex:1; min-height:0; display:flex; gap:12px; padding:12px 16px;
  overflow:auto; align-items:stretch; }
.mx-kan-col { flex:1 0 240px; max-width:340px; min-width:220px; display:flex;
  flex-direction:column; background:var(--gray-l,#f4f4f5); border-radius:10px;
  border:1px solid var(--gray-m,#e2e2e5); min-height:0; }
.mx-kan-head { display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-bottom:1px solid var(--gray-m,#e2e2e5); }
.mx-kan-n { margin-left:auto; font-size:11.5px; font-weight:700; color:var(--muted,#6b6b70); }
.mx-kan-list { flex:1; min-height:60px; overflow:auto; padding:8px; display:flex;
  flex-direction:column; gap:8px; }
.mx-kan-card { background:var(--surface,#fff); border:1px solid var(--gray-m,#e2e2e5);
  border-radius:8px; padding:8px 10px; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.mx-kan-card[draggable="true"] { cursor:grab; }
.mx-kan-card:hover { border-color:var(--blue,#1865b0); }
.mx-kan-overdue { box-shadow:inset 3px 0 0 #c0392b; }
.mx-kan-title { font-size:12.5px; font-weight:600; line-height:1.3; }
.mx-kan-meta { font-size:11px; color:var(--muted,#6b6b70); margin-top:3px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.mx-kan-foot { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px;
  font-size:11px; }
.mx-kan-due { display:inline-flex; align-items:center; gap:3px; color:var(--muted,#6b6b70); }
.mx-kan-due-over { color:#c0392b; font-weight:700; }
.mx-kan-who { margin-left:auto; color:var(--muted,#6b6b70); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.mx-kan-empty { font-size:11.5px; color:var(--muted,#6b6b70); padding:6px 4px; }

/* ── w68c: the equipment profile's live Maintenance section ─────────────── */
.mx-eq-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:2px 0 4px}
.mx-eq-summary{font-size:12px;color:var(--gray);flex:1;min-width:120px}
.mx-eq-new{margin-left:auto}
.mx-eq-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--gray-m);border-radius:8px;margin:4px 0;cursor:pointer;background:var(--white,#fff);transition:background .12s,border-color .12s}
.mx-eq-row:hover{background:var(--gray-l,#f4f4f5);border-color:var(--blue-l,#c8d6e6)}
.mx-eq-row.mx-overdue-row{border-left:3px solid #c0392b}
.mx-eq-row.mx-eq-series{background:var(--surface,#fbfaff);border-style:dashed}
.mx-eq-main{flex:1;min-width:0}
.mx-eq-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-eq-sub{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:11.5px;color:var(--gray);margin-top:3px}
.mx-eq-when{white-space:nowrap}
.mx-eq-who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.mx-eq-rep{font-size:12px;color:#7c5cd6;vertical-align:-1px}
.mx-eq-btns{display:flex;gap:4px;flex-shrink:0}
.mx-eq-btns .um-mini{padding:3px 8px;font-size:11px}
.mx-eq-done{border-color:var(--green);color:var(--green)}
.mx-eq-note{font-size:11px;color:var(--muted);font-style:italic}
.mx-eq-err{font-size:12px;color:#c0392b;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 0}
.mx-eq-histhd{cursor:pointer;user-select:none;display:flex;align-items:center;gap:5px}
.mx-eq-histhd:hover{color:var(--blue)}
.mx-eq-legacy{margin-top:12px;border-top:1px dashed var(--gray-m);padding-top:8px}
.mx-eq-legacy-hd{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.3px;cursor:pointer;user-select:none}
.mx-eq-legacy-hd:hover{color:var(--blue)}
.mx-eq-legacy-body{margin-top:6px;opacity:.9}

/* ── w68d: forms in tasks ─────────────────────────────────────────────────── */
.mx-fchip-req{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;color:var(--muted,#6b6b70);cursor:pointer;margin-left:2px}
.mx-fchip-req input{accent-color:var(--blue,#1865b0);margin:0}
.mx-fbadge{display:inline-flex;align-items:center;gap:2px;font-size:10.5px;font-weight:700;color:var(--muted,#6b6b70);background:var(--gray-l,#f4f4f5);border:1px solid var(--gray-m,#e2e2e5);border-radius:8px;padding:0 6px;vertical-align:1px;white-space:nowrap}
.mx-fbadge-open{color:var(--amber-t,#b9770e);background:var(--amber-l,#fff4e0);border-color:var(--amber-t,#f3d9a4)}
.mx-forms{display:flex;flex-direction:column;gap:6px}
.mx-frow{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--gray-m,#e2e2e5);border-radius:8px;background:var(--white,#fff)}
.mx-frow-main{flex:1;min-width:0}
.mx-frow-name{font-size:12.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.mx-frow-req{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted,#6b6b70);background:var(--gray-l,#f4f4f5);border-radius:6px;padding:1px 6px}
.mx-frow-state{font-size:11.5px;color:var(--muted,#6b6b70);margin-top:2px}
.mx-fs-done{border-left:3px solid var(--green,#399845)}
.mx-fs-done .mx-frow-state{color:var(--green,#2f7d3a)}
.mx-fs-draft{border-left:3px solid var(--amber-t,#b9770e)}
.mx-fs-open{border-left:3px solid var(--red-t,#c0392b)}
.mx-fs-open .mx-frow-state,.mx-card-sub.mx-fs-open{color:var(--red-t,#c0392b);border-left:0}
.mx-fs-warn{color:var(--amber-t,#b9770e);font-style:italic}
.mx-frow-btns{display:flex;gap:4px;flex-shrink:0}
.mx-frow-btns .um-mini{padding:3px 8px;font-size:11px}
.mx-fill-task{font-weight:400;font-size:12px;color:var(--muted,#6b6b70)}
/* ── w69: documents in tasks ──────────────────────────────────────────────── */
.mx-drow-num{font-size:10.5px;font-weight:600;color:var(--muted,#6b6b70);background:var(--gray-l,#f4f4f5);border-radius:6px;padding:1px 6px}
.mx-docbody{flex:1;min-height:0;overflow:auto;background:var(--gray-l,#f4f4f5)}
.mx-dochtml{background:var(--white,#fff);margin:14px auto;max-width:860px;padding:26px 32px;border:1px solid var(--gray-m,#e2e2e5);border-radius:8px;font-size:14px;line-height:1.6;color:var(--text)}
.mx-dochtml img,.mx-dochtml table{max-width:100%}
.mx-docframe{display:block;width:100%;height:100%;min-height:60vh;border:0;background:var(--white,#fff)}
.mx-docfoot{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--gray-m,#e2e2e5);font-size:12.5px}
.mx-docfoot .btn[disabled]{opacity:.55;cursor:not-allowed}
.mx-docfoot .mx-fs-open,.mx-docfoot .mx-fs-done{border-left:0;font-weight:600}
.mx-docfoot .mx-fs-open{color:var(--red-t,#c0392b)}
.mx-docfoot .mx-fs-done{color:var(--green,#2f7d3a)}

/* ═══ W70a — LUBRICATION TRACKER ═══════════════════════════════════════════ */
#mxLube table td{vertical-align:middle}
.mx-sortable{cursor:pointer;user-select:none}
.mx-sortable:hover{color:var(--blue,#1865b0)}
.mx-lube-gauge{display:block;overflow:visible}
.mx-lube-gauge.sm{display:inline-block;vertical-align:middle}
.mx-lube-top{display:flex;gap:18px;align-items:flex-start}
.mx-lube-gaugebox{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:160px;padding:8px 6px;border:1px solid var(--gray-m,#e2e2e5);border-radius:10px;background:var(--surface,#fff)}
.mx-lube-gauge-txt{font-size:12.5px;font-weight:700}
.mx-lube-info{display:flex;gap:14px;align-items:flex-start;margin-top:14px}
.mx-lube-photo{width:120px;height:120px;object-fit:cover;border-radius:8px;border:1px solid var(--gray-m,#e2e2e5);background:var(--gray-l,#f4f4f5)}
.mx-lube-points{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.mx-lube-point{display:flex;gap:10px;align-items:center;padding:6px 4px;border-bottom:1px solid var(--gray-l,#f0f0f2)}
.mx-lube-thumb{width:56px;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--gray-m,#e2e2e5);background:var(--gray-l,#f4f4f5);flex:none}
.mx-lube-thumb-none{display:flex;align-items:center;justify-content:center;color:var(--muted,#6b6b70);font-size:20px}
.mx-lube-photorow,.mx-lube-photocell{display:flex;gap:8px;align-items:center}
.mx-lube-pointrow{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--gray-l,#f0f0f2)}
.mx-lube-pointrow .mx-lube-photocell{flex-direction:column;align-items:stretch;width:96px}
.mx-lube-pointfields{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.mx-lube-chip-red.mx-togglechip{color:var(--red-t,#c0392b)}
.mx-lube-chip-amber.mx-togglechip{color:var(--amber-t,#a36a08)}
#nav-maintenance-sub .nav-item.active{font-weight:700}
.mx-lube-sortmark{font-size:9px;color:var(--muted,#6b6b70);margin-left:2px}
@media (max-width:760px){.mx-lube-top{flex-direction:column}.mx-lube-points,.mx-lube-pointfields{grid-template-columns:1fr}}

/* ═══ W70b — LUBRICATION NOTIFICATIONS + THE PRINTABLE PLAN ════════════════ */
.mx-lube-notif{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:10px 12px;border:1px solid var(--gray-m,#e2e2e5);border-radius:10px;background:var(--surface,#fff)}
.mx-lube-notif-line{font-size:12.5px;line-height:1.5}
.mx-lube-notif-acts{display:flex;gap:6px;flex-wrap:wrap;flex:none}
.mx-lube-notif-intro{font-size:12.5px;color:var(--muted,#6b6b70);line-height:1.55}
.mx-lube-cb{display:flex;flex-direction:row;align-items:flex-start;gap:9px;margin-top:9px}
.mx-lube-cb input{margin-top:2px;flex:none}
.mx-lube-cb .mx-row-sub{display:block;font-weight:400}
/* w71: the tracker's Notifications button and its rule are gone — that
   manager is the Lubrication Notices tab on Maintenance Settings. */
@media (max-width:760px){.mx-lube-notif{flex-direction:column}}

/* ═══ W68b — TASK LINKING + THE GANTT VIEW ═══════════════════════════════════
   Colours reuse the calendar's status palette so one task reads the same in
   every view. Widths are percentages of the track, so the chart reflows with
   the pane instead of scrolling a fixed canvas. --mx-gt-name-w is the one
   place the name rail's width is stated: the header, the rows and the today
   line all read it, so they can never drift apart. */
#mxGanttWrap{flex-direction:column;min-height:0}
.mx-gt-bar-top{display:flex;align-items:center;gap:10px;padding:8px 16px;
  border-bottom:1px solid var(--gray-m,#e2e2e5);background:var(--surface,#fff)}
.mx-gt-legend{font-size:12px;color:var(--muted,#6b6b70);display:flex;align-items:center;gap:5px}
.mx-gt-bar-top .mx-viewseg{margin-left:auto}
.mx-gt-scroll{--mx-gt-name-w:260px;flex:1;min-height:0;overflow:auto;
  background:var(--surface,#fff)}
.mx-gt-head{display:flex;position:sticky;top:0;z-index:2;
  background:var(--surface,#fff);border-bottom:1px solid var(--gray-m,#e2e2e5)}
.mx-gt-headname{font-size:10.5px;font-weight:700;text-transform:uppercase;
  color:var(--muted,#6b6b70);letter-spacing:.03em}
.mx-gt-name{width:var(--mx-gt-name-w);flex:none;box-sizing:border-box;
  padding:6px 10px;display:flex;align-items:center;gap:6px;min-width:0;
  font-size:12.5px;border-right:1px solid var(--gray-m,#e2e2e5)}
.mx-gt-nametext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mx-gt-row .mx-gt-name,.mx-gt-grouphd .mx-gt-name{cursor:pointer}
/* R3: series and category heads have no task behind them — and on an instance
   not yet using linking that is EVERY head, all offering a hand cursor and
   doing nothing. */
.mx-gt-grouphd .mx-gt-name.mx-gt-nolink{cursor:default}
.mx-gt-ind{color:var(--muted,#6b6b70);font-size:12px;flex:none}
.mx-gt-note{font-size:10.5px;color:var(--muted,#6b6b70);font-style:italic;flex:none}
/* R3: --gray-l on a --gray-l header rendered the "pill" as bare grey text.
   Match .mx-fbadge, which is the module's own chip. */
.mx-gt-count{margin-left:auto;font-size:10.5px;color:var(--muted,#6b6b70);
  background:var(--surface,#fff);border:1px solid var(--gray-m,#e2e2e5);
  border-radius:9px;padding:0 6px;flex:none}
/* R3: hard-coded #c0392b lands near 2.4:1 on the dark surface, and this is
   the chart's only urgency signal. --red-t is the file's own convention. */
.mx-gt-od{font-size:10px;color:var(--red-t,#c0392b);font-weight:700;flex:none}
.mx-gt-track{flex:1;position:relative;min-width:0;height:26px}
.mx-gt-cols{display:flex;height:auto;align-items:stretch}
.mx-gt-col{font-size:10.5px;color:var(--muted,#6b6b70);padding:6px 4px;
  box-sizing:border-box;border-left:1px solid var(--gray-m,#e2e2e5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
.mx-gt-body{position:relative}
.mx-gt-row,.mx-gt-grouphd{display:flex;align-items:stretch;
  border-bottom:1px solid var(--gray-l,#f2f2f5)}
/* R3: --gray-l is exactly the group-header background, so hovering an
   ordinary row made it look like one. */
.mx-gt-row:hover{background:var(--gray-m,#e9e9ec)}
.mx-gt-grouphd:hover{background:var(--gray-m,#e9e9ec)}
.mx-gt-grouphd{background:var(--gray-l,#f2f2f5);font-weight:700}
.mx-gt-grouphd .mx-gt-name{font-weight:700}
.mx-gt-g-parent{box-shadow:inset 3px 0 0 var(--blue,#1865b0)}
.mx-gt-g-series{box-shadow:inset 3px 0 0 #6a4fc4}
.mx-gt-g-category{box-shadow:inset 3px 0 0 var(--gray-m,#e2e2e5)}
.mx-gt-sub .mx-gt-name{padding-left:22px}
/* the bar itself — status colours mirror .mx-cal-ev-* */
.mx-gt-bar{position:absolute;top:6px;height:14px;border-radius:4px;cursor:pointer;
  background:rgba(24,101,176,.55);border:1px solid #1865b0;box-sizing:border-box;
  min-width:3px}
.mx-gt-bar:hover{filter:brightness(1.08)}
.mx-gt-in_progress{background:rgba(194,124,14,.55);border-color:#a36a08}
.mx-gt-pending_review{background:rgba(124,92,214,.55);border-color:#6a4fc4}
.mx-gt-completed{background:rgba(57,152,69,.45);border-color:#2c7d38;opacity:.75}
.mx-gt-cancelled{background:rgba(110,110,115,.35);border-color:#6b6b70;opacity:.6}
.mx-gt-overdue{background:rgba(192,57,43,.55);border-color:#c0392b}
.mx-gt-pri{height:16px;top:5px}
.mx-gt-nodate{position:absolute;left:4px;top:6px;font-size:10.5px;
  color:var(--muted,#6b6b70);font-style:italic}
.mx-gt-today{position:absolute;top:0;bottom:0;width:2px;background:#c0392b;opacity:.65}
/* the body's today line: JS supplies ONE number (--mx-gt-today, a fraction of
   the track); the rail width stays stated only as --mx-gt-name-w, so the
   header, the rows and this line can never drift apart. */
.mx-gt-todayline{position:absolute;top:0;bottom:0;width:2px;background:#c0392b;
  opacity:.35;pointer-events:none;z-index:1;
  left:calc(var(--mx-gt-name-w) + (100% - var(--mx-gt-name-w)) * var(--mx-gt-today,0))}
/* linking */
.mx-linkrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding:8px 10px;border:1px solid var(--gray-m,#e2e2e5);border-radius:9px;
  background:var(--gray-l,#f7f7f9);font-size:12.5px}
.mx-linkrow a{color:var(--blue,#1865b0);font-weight:600}
.mx-submark{font-size:12px;color:var(--muted,#6b6b70);vertical-align:middle}
@media (max-width:760px){
  .mx-gt-scroll{--mx-gt-name-w:150px}
  .mx-gt-bar-top{flex-direction:column;align-items:flex-start}
  .mx-gt-bar-top .mx-viewseg{margin-left:0}
}


/* ═══ W71 — MAINTENANCE POLISH ════════════════════════════════════════════════
   The quick-filter chips, the tracker's machine cell and thumbnail, equipment
   that reads as a link, and the Settings page. Every colour is a var() token
   with a light fallback, so the inline dark-theme override layer holds. */

/* ── w72: a DISABLED filter multi-select ─────────────────────────────────────
   The Board's columns ARE the statuses, so the status filter is disabled while
   the board is up. Until w72 that control was a <select> and the browser drew
   the disabled state for free; it is a <div> now, so the state has to be drawn
   here. It must READ as disabled — an ignored filter that still looks live is
   the invisible-filter bug this module has hit three times.
   `not-allowed` rather than `default`: the operator gets the answer from the
   cursor before they click, and the title says why.

   DRIVE FINDING D1 — the `!important` is load-bearing, not decoration.
   _mxMsHtml writes `style="cursor:pointer;..."` INLINE on every .ms-box (w71's
   shape, kept), and an inline style beats a class rule. Without !important the
   disabled control kept a pointer cursor: ignored, but still looking live.
   Only the real-browser drive saw this — computed style is not in the source,
   so every source assertion passed.

   R1 MED — the background needs !important for a DIFFERENT reason than the
   cursor. index.html carries `html[data-theme="dark"] .ms-box{background:
   var(--white)}` at specificity (0,2,1), which beats this rule's (0,2,0). In
   dark theme the fill — the strongest disabled cue — was silently dropped and
   the control read as a slightly faded LIVE one. The hover rule (0,3,0)
   already wins on its own.

   R3: scoped to this module's own boxes. block10-maintenance.css is loaded
   globally and `.ms-box` is a shared base class used by ~20 controls in other
   modules; an unscoped rule carrying two !importants would hand any future
   `ms-disabled` elsewhere Maintenance's look with no way to override it. The
   box carries id="mxMsBox-<key>", so the prefix selector is exact.
   Light fallbacks per the file's own convention — with !important, an
   undefined --gray-l would compute to TRANSPARENT and beat the dark-theme fill
   this rule exists to override. */
[id^="mxMsBox-"].ms-disabled{background:var(--gray-l,#f4f4f6)!important;color:var(--muted,#6b6b70);cursor:not-allowed!important;opacity:.7}
[id^="mxMsBox-"].ms-disabled:hover{border-color:var(--gray-m,#e2e2e5)}

/* ── The quick-filter chips (Frank: "more rounded instead of squared") ───────
   These had NO base rule at all. The Schedule's two chips carry `btn
   btn-outline` and so looked right; the tracker's four carry only
   .mx-togglechip and were rendering as raw browser buttons — which is what
   "squared" was. One base rule fixes both families and makes them a pill.
   It sits after block02's .btn (same specificity, later file), so it wins the
   radius on the chips that ARE buttons without touching any other button. */
.mx-togglechip { display:inline-flex; align-items:center; gap:5px;
  padding:6px 13px; border-radius:999px; font-size:11.5px; font-weight:500;
  font-family:'DM Sans',sans-serif; line-height:1.35; cursor:pointer;
  border:.5px solid var(--gray-m,#e2e2e5); background:var(--white,#fff);
  color:var(--gray,#4a4a4f); transition:all .13s; }
/* :not(.active) — this rule sits AFTER .mx-togglechip.active at the same
   specificity, so a plain :hover drained a selected chip to grey while its
   border and text stayed green. It read as "I just switched that off". */
.mx-togglechip:hover:not(.active) { background:var(--gray-l,#f4f4f6); }
.mx-togglechip b { font-weight:800; }
.mx-togglechip:focus-visible { outline:2px solid var(--blue,#1865b0);
  outline-offset:1px; }

/* ── Equipment that opens its record ────────────────────────────────────────
   A chip is only rendered with these classes when the account can actually
   follow it (see _mxEqLinkable), so "looks like a link" and "is a link" never
   come apart. */
.mx-eqchip-link { cursor:pointer; }
.mx-eqchip-link:hover { background:var(--blue-l,#e8f1fb);
  border-color:var(--blue,#1865b0); color:var(--blue,#1865b0); }
.mx-eqchip-link i { color:inherit; font-size:11px; }
/* beats .mx-eqchip i:hover, whose red means "remove this chip" — on a LINK
   chip that read as "clicking this deletes the equipment" */
.mx-eqchip-link:hover i, .mx-eqchip-link i:hover { color:inherit; }
.mx-eqchip-link:focus-visible { outline:2px solid var(--blue,#1865b0);
  outline-offset:1px; }
.mx-eqlink { color:var(--blue,#1865b0); cursor:pointer;
  display:inline-flex; align-items:center; gap:4px; }
.mx-eqlink:hover { text-decoration:underline; }
.mx-eqlink i { font-size:11px; opacity:.75; }
/* offset NEGATIVE: .mx-row-title is one line tall with overflow:hidden, so an
   outward ring was clipped top, bottom and right and a keyboard user saw
   nothing. Drawn inside, it survives. */
.mx-eqlink:focus-visible { outline:2px solid var(--blue,#1865b0);
  outline-offset:-2px; border-radius:3px; }

/* ── The tracker's machine cell + thumbnail ─────────────────────────────────
   Every branch of the thumbnail is the same 38px box — photo, type icon or
   placeholder — so rows do not jitter as lazy images land. */
.mx-lube-machine { display:flex; align-items:center; gap:10px; min-width:0; }
.mx-lube-machine .mx-row-title, .mx-lube-machine .mx-row-sub {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mx-lube-thumb-icon { display:inline-flex; align-items:center;
  justify-content:center; width:38px; height:38px; border-radius:8px;
  flex-shrink:0; background:var(--blue-l,#e8f1fb); color:var(--blue,#1865b0);
  border:1px solid var(--gray-m,#e2e2e5); }
.mx-lube-thumb-icon i { font-size:20px; }
.mx-lube-thumb-fb { display:none; }
@media (max-width:760px) {
  .mx-lube-thumb-icon { width:30px; height:30px; }
  /* !important + an svg rule: _eqIconAnyHtml writes its size INLINE, which beat
     this rule and left a delegated Tabler icon at 20px inside a 30px box while
     the plain-gear row beside it sat at 16px (R3 LOW) */
  .mx-lube-thumb-icon i { font-size:16px !important; }
  .mx-lube-thumb-icon svg { width:18px; height:18px; }
  .mx-lube-machine img { width:30px !important; height:30px !important; }
}

/* ── The Maintenance Settings page ──────────────────────────────────────────
   A page, not a modal: it scrolls in the module pane and has no close button,
   because the way out is the navigation. The tab strip reuses .mx-tab, which
   #module-maintenance already styles — #mxSet lives inside it. */
#mxSet { flex:1; overflow:auto; }
.mx-setpage { max-width:860px; padding:18px 20px 28px; }
.mx-setpage-head { margin-bottom:14px; }
.mx-setpage-title { font-size:16px; font-weight:800; display:flex;
  align-items:center; gap:8px; }
.mx-setpage-title i { color:var(--muted,#6b6b70); font-size:18px; }
.mx-setpage-sub { font-size:12px; color:var(--muted,#6b6b70); margin-top:3px; }
.mx-setpage-tabs { display:flex; gap:2px; flex-wrap:wrap;
  border-bottom:1px solid var(--gray-m,#e2e2e5); }
.mx-setpage-body { padding-top:16px; }
/* the notification manager renders its own drawer-shaped markup; on the page
   that head is a section heading rather than a modal bar, so it loses the
   modal chrome instead of being rebuilt */
.mx-setpage-form .mx-drawer-head { padding:0 0 10px; border-bottom:none; }
.mx-setpage-form .mx-drawer-head .pp-ctrl { display:none; }
.mx-setpage-form .mx-drawer-body { padding:0; overflow:visible; }
/* PHONE: .ms-dropdown is 260px and absolutely positioned inside #mxSched /
   #mxLube, both overflow:hidden — on a 360px screen the wrapped control sat
   far enough right that the option list was cut off with no way to scroll to
   it. Full-width control, full-width list, nothing to clip. (The app's other
   multi-selects open a bottom sheet on phones; matching that is a follow-up,
   noted in the wave report.) */
@media (max-width:760px) {
  /* R3: the wrap is a shrink-to-fit flex ITEM, so width:100% on it alone
     resolved to max-content and the dropdown ended up NARROWER than its 260px
     default. Size the filter-group too — the equipment module's precedent. */
  #mxSched .filters .filter-group, #mxLube .filters .filter-group {
    width:100%; min-width:0; }
  /* w72 R1 MED: these were written per-id in w71, when there were two
     multi-selects. There are SEVEN now, so match them all — otherwise the
     Schedule bar on a phone stacks five 170-240px island boxes beside one
     full-width one, and the tracker's location dropdown gets clipped by
     #mxLube's overflow exactly as w71's comment describes. */
  #mxSched .filters [id^="mxMsWrap-"], #mxLube .filters [id^="mxMsWrap-"] { width:100%; }
  #mxSched .filters [id^="mxMsWrap-"] .ms-box,
  #mxLube .filters [id^="mxMsWrap-"] .ms-box {
    width:100%; box-sizing:border-box; min-width:0 !important; max-width:none; }
  #mxSched .filters [id^="mxMsWrap-"] .ms-dropdown,
  #mxLube .filters [id^="mxMsWrap-"] .ms-dropdown {
    width:100%; }
  .mx-setpage { padding:14px 12px 24px; }
  .mx-setpage-tabs { overflow-x:auto; flex-wrap:nowrap; }
  /* .mx-tab has no white-space of its own, so as a flex item it shrank to
     min-content and wrapped "People & Supervisors" onto two lines BEFORE the
     strip ever scrolled */
  .mx-setpage-tabs .mx-tab { flex:0 0 auto; white-space:nowrap; }
}