/* ===== NextERP — Maintenance (CMMS) =====

   A separate stylesheet rather than another 700 lines appended to app.css.
   app.css is already 2,300 lines and every module added to it has made the
   next one harder to find; this one is self-contained and can be read, diffed
   or reverted on its own.

   It defines NO new colours. Every value below is a var() from app.css's
   :root, which is what makes dark mode work with no extra rules — the theme
   flips those variables and everything here follows. If you find yourself
   about to write a hex code in this file, use an existing token instead.

   RTL: all spacing uses logical properties (margin-inline, padding-inline,
   inset-inline, border-inline) exactly as the rest of the app does, so Arabic
   and Kurdish Sorani mirror correctly with no [dir="rtl"] overrides.
*/

/* The screen owns its own scrolling, matching #inventoryScreen, #hrScreen,
   #orgScreen and #newsScreen. Without min-height:0 a flex child refuses to
   shrink below its content and the page scrolls instead of the panel. */
#maintScreen{ padding:0 22px 24px; flex:1; min-height:0; overflow-y:auto; }

/* ---------- toolbar ---------- */
.mt-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; padding:16px 0 12px;
}
.mt-toolbar-left{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.mt-toolbar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mt-title{
  font-family:'Oswald',sans-serif; font-size:19px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.4px; color:var(--ink);
}
.mt-search{
  border:1px solid var(--panel-edge); border-radius:11px; padding:8px 12px;
  font-family:'Inter',sans-serif; font-size:13px; background:var(--panel);
  color:var(--ink); min-width:200px;
}
.mt-search:focus{ outline:2px solid var(--steel); border-color:var(--steel); }

/* Sub-navigation: Board / Equipment History / Part Lifespans. Same shape as
   .hr-subnav-item so the two modules feel like one product. */
.mt-subnav{ display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--panel-edge); margin-bottom:16px; }
.mt-subnav-item{
  background:none; border:none; border-bottom:2px solid transparent;
  padding:9px 14px; cursor:pointer; color:var(--ink-soft);
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600;
  transition:color .16s ease, border-color .16s ease;
}
.mt-subnav-item:hover{ color:var(--ink); }
.mt-subnav-item.active{ color:var(--accent); border-bottom-color:var(--accent); }

/* ---------- summary counters ---------- */
.mt-stats{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.mt-stat{
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:var(--radius);
  padding:10px 16px; min-width:104px; box-shadow:var(--shadow);
}
.mt-stat-value{ font-family:'Oswald',sans-serif; font-size:22px; font-weight:600; color:var(--ink); line-height:1.1; }
.mt-stat-label{ font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }
.mt-stat.is-overdue .mt-stat-value{ color:var(--danger); }
.mt-stat.is-due .mt-stat-value{ color:var(--rust); }

/* ---------- the board ---------- */
.mt-board{ display:flex; gap:14px; align-items:flex-start; overflow-x:auto; padding-bottom:14px; }
.mt-lane{
  background:var(--surface-soft); border:1px solid var(--panel-edge);
  border-radius:var(--radius); flex:0 0 300px; max-width:300px;
  display:flex; flex-direction:column; max-height:70vh;
}
.mt-lane-head{
  display:flex; align-items:center; gap:8px;
  padding:11px 13px; border-bottom:1px solid var(--panel-edge);
}
.mt-lane-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.mt-lane-name{ font-weight:700; font-size:13.5px; color:var(--ink); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt-lane-count{
  font-size:11px; font-weight:700; color:var(--ink-soft);
  background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:20px; padding:2px 8px;
}
.mt-lane-body{ padding:10px; display:flex; flex-direction:column; gap:9px; overflow-y:auto; min-height:60px; }
/* The drop target while a card is being dragged over it. Deliberately an
   inset outline rather than a border: a border would change the element's
   box and shuffle every card in the column by a pixel as the pointer moves. */
.mt-lane.drag-over .mt-lane-body{ outline:2px dashed var(--accent); outline-offset:-4px; border-radius:8px; }
.mt-lane-empty{ font-size:12px; color:var(--ink-soft); text-align:center; padding:14px 6px; }

/* ---------- work-order card ---------- */
.mt-card{
  background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:10px; padding:11px 12px; cursor:pointer;
  box-shadow:var(--shadow); transition:box-shadow .16s ease, transform .16s ease;
  /* The status stripe. border-inline-start, not border-left, so it runs down
     the correct edge in Arabic and Kurdish. */
  border-inline-start:3px solid var(--panel-edge);
}
.mt-card:hover{ box-shadow:var(--shadow-lift); transform:translateY(-1px); }
.mt-card.dragging{ opacity:.45; }
.mt-card.status-overdue{ border-inline-start-color:var(--danger); }
.mt-card.status-due_soon{ border-inline-start-color:var(--rust); }
.mt-card.status-done{ border-inline-start-color:var(--patina); }
.mt-card.status-open{ border-inline-start-color:var(--steel); }

.mt-card-top{ display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.mt-code{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700;
  background:var(--chip-bg); color:var(--chip-text);
  border-radius:5px; padding:2px 6px; letter-spacing:0.3px;
}
.mt-card-title{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35; word-break:break-word; }
.mt-card-asset{ font-size:11.5px; color:var(--ink-soft); margin-top:4px; display:flex; align-items:center; gap:5px; }
.mt-card-meta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; }

/* Chips share the pill tokens app.css already defines for part status, to-do
   priority and inventory badges, so a "critical" here reads the same red as a
   "reorder needed" over there. */
.mt-chip{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:700; border-radius:20px; padding:2px 8px;
  border:1px solid transparent; white-space:nowrap;
}
.mt-chip.prio-low{      background:var(--pill-gray-bg);   color:var(--pill-gray-text);   border-color:var(--pill-gray-border); }
.mt-chip.prio-normal{   background:var(--pill-blue-soft-bg); color:var(--pill-blue-soft-text); border-color:var(--pill-blue-soft-border); }
.mt-chip.prio-high{     background:var(--pill-yellow-bg); color:var(--pill-yellow-text); border-color:var(--pill-yellow-border); }
.mt-chip.prio-critical{ background:var(--pill-red-bg);    color:var(--pill-red-text);    border-color:var(--pill-red-border); }
.mt-chip.due-overdue{   background:var(--pill-red-bg);    color:var(--pill-red-text);    border-color:var(--pill-red-border); }
.mt-chip.due-due_soon{  background:var(--pill-yellow-bg); color:var(--pill-yellow-text); border-color:var(--pill-yellow-border); }
.mt-chip.due-open{      background:var(--pill-gray-bg);   color:var(--pill-gray-text);   border-color:var(--pill-gray-border); }
.mt-chip.due-done{      background:var(--pill-green-bg);  color:var(--pill-green-text);  border-color:var(--pill-green-border); }
/* The "🔗 2 Parts" indicator from the brief. */
.mt-chip.links{         background:var(--pill-blue-bg);   color:var(--pill-blue-text);   border-color:var(--pill-blue-border); }
.mt-chip.recurring{     background:var(--pill-green-bg);  color:var(--pill-green-text);  border-color:var(--pill-green-border); }
.mt-chip.inspections{   background:var(--pill-gray-bg);   color:var(--pill-gray-text);   border-color:var(--pill-gray-border); }

/* ---------- detail drawer ---------- */
/* A side drawer rather than a centred modal: a technician reading a job's
   history usually wants the board still visible beside it, and the content is
   a long vertical list of log entries, which suits a tall narrow panel. */
.mt-drawer{
  position:fixed; inset-block:0; inset-inline-end:0; width:min(560px, 100%);
  background:var(--panel); border-inline-start:1px solid var(--panel-edge);
  box-shadow:var(--shadow-lift); z-index:120;
  display:flex; flex-direction:column;
}
.mt-drawer-head{
  padding:16px 20px; border-bottom:1px solid var(--panel-edge);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.mt-drawer-head h2{ font-size:16px; font-weight:700; margin:0 0 4px; color:var(--ink); line-height:1.35; }
.mt-drawer-head button{ background:none; border:none; color:var(--ink-soft); cursor:pointer; padding:2px; }
.mt-drawer-head button:hover{ color:var(--ink); }
.mt-drawer-body{ padding:18px 20px 24px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:18px; }
.mt-drawer-foot{
  padding:14px 20px; border-top:1px solid var(--panel-edge);
  display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
}

.mt-section-title{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px;
  color:var(--ink-soft); margin-bottom:9px;
}
.mt-kv{ display:flex; gap:10px; font-size:13px; padding:5px 0; border-bottom:1px solid var(--panel-edge); }
.mt-kv:last-child{ border-bottom:none; }
.mt-kv-key{ color:var(--ink-soft); flex:0 0 40%; }
.mt-kv-val{ color:var(--ink); flex:1; min-width:0; word-break:break-word; }

/* ---------- linked parts ---------- */
.mt-link-row{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-soft); border:1px solid var(--panel-edge);
  border-radius:9px; padding:9px 11px; margin-bottom:7px;
}
.mt-link-main{ flex:1; min-width:0; }
.mt-link-name{ font-size:13px; font-weight:600; color:var(--ink); word-break:break-word; }
.mt-link-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.mt-link-qty{
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700;
  color:var(--ink); background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:6px; padding:3px 8px; white-space:nowrap;
}
.mt-kind-tag{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;
  color:var(--ink-soft); background:var(--pill-gray-bg);
  border:1px solid var(--pill-gray-border); border-radius:4px; padding:1px 5px;
}

/* ---------- search picker ---------- */
.mt-picker-results{
  max-height:260px; overflow-y:auto; border:1px solid var(--panel-edge);
  border-radius:10px; background:var(--panel);
}
.mt-picker-row{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; background:none; border:none; cursor:pointer; text-align:start;
  border-bottom:1px solid var(--panel-edge); color:var(--ink);
}
.mt-picker-row:last-child{ border-bottom:none; }
.mt-picker-row:hover{ background:var(--surface-hover); }
.mt-picker-main{ flex:1; min-width:0; }
.mt-picker-name{ font-size:13px; font-weight:600; word-break:break-word; }
.mt-picker-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; }

/* ---------- inspection log ---------- */
.mt-log-entry{
  border-inline-start:3px solid var(--panel-edge);
  padding:2px 0 12px 0; padding-inline-start:12px; margin-bottom:12px;
}
.mt-log-entry.outcome-ok{ border-inline-start-color:var(--patina); }
.mt-log-entry.outcome-attention{ border-inline-start-color:var(--rust); }
.mt-log-entry.outcome-fault{ border-inline-start-color:var(--danger); }
.mt-log-who{ font-size:13px; font-weight:700; color:var(--ink); }
.mt-log-when{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; }
.mt-log-notes{ font-size:12.5px; color:var(--ink); margin-top:7px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.mt-readings{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.mt-reading{
  font-size:11px; background:var(--surface-soft); border:1px solid var(--panel-edge);
  border-radius:6px; padding:3px 8px; color:var(--ink);
}
.mt-reading strong{ color:var(--ink-soft); font-weight:600; }

/* ---------- tables (history + lifespans) ---------- */
.mt-table-wrap{
  background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:var(--radius); overflow-x:auto; box-shadow:var(--shadow);
}
.mt-table{ width:100%; border-collapse:collapse; font-size:13px; }
.mt-table th{
  text-align:start; padding:10px 12px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.5px; color:var(--ink-soft);
  border-bottom:1px solid var(--panel-edge); white-space:nowrap;
}
.mt-table td{ padding:10px 12px; border-bottom:1px solid var(--panel-edge); color:var(--ink); vertical-align:top; }
.mt-table tr:last-child td{ border-bottom:none; }
.mt-table tbody tr:hover{ background:var(--surface-hover); }
.mt-num{ font-family:'JetBrains Mono',monospace; font-weight:600; }
/* "needs 1 more" — a figure we deliberately refuse to invent. */
.mt-muted{ color:var(--ink-soft); font-style:italic; }

.mt-empty{
  text-align:center; padding:38px 20px; color:var(--ink-soft); font-size:13.5px;
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:var(--radius);
}
.mt-empty strong{ display:block; color:var(--ink); font-size:15px; margin-bottom:6px; }

/* ---------- reading form ---------- */
.mt-reading-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; }
.mt-check-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); padding:4px 0; }
.mt-check-row input[type=checkbox]{ width:16px; height:16px; accent-color:var(--accent); flex:0 0 auto; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .mt-lane{ flex:0 0 260px; max-width:260px; }
}
@media (max-width:640px){
  #maintScreen{ padding:0 16px 20px; }
  .mt-drawer{ width:100%; }
  /* Columns stack on a phone. A horizontally scrolling Kanban board on a
     handset means two axes of scrolling and a card you can never quite land
     on, which on a factory floor is the difference between logging the
     inspection and not bothering. */
  .mt-board{ flex-direction:column; overflow-x:visible; }
  .mt-lane{ flex:1 1 auto; max-width:100%; width:100%; max-height:none; }
  .mt-kv-key{ flex:0 0 45%; }
}

/* ===== Phase 23.1 — planning, safety and reliability ===== */

/* The lockout/tagout row. Deliberately louder than a normal checkbox: this is
   the field whose being wrong is a safety incident rather than a scheduling
   error, so it gets a tinted panel and a warning border instead of sitting
   quietly in a grid with the estimates. */
.mt-shutdown-row{
  align-items:flex-start; gap:10px;
  background:var(--pill-yellow-bg); border:1px solid var(--pill-yellow-border);
  border-radius:10px; padding:11px 13px; margin:4px 0 14px;
}
.mt-shutdown-row span{ display:block; }
.mt-check-hint,
.mt-field-hint{
  display:block; font-size:11.5px; color:var(--ink-soft);
  font-weight:400; margin-top:3px; line-height:1.45;
}
/* Once ticked it turns red, so the state that stops a production line never
   looks like the state that does not. */
.mt-shutdown-row:has(input:checked){
  background:var(--pill-red-bg); border-color:var(--pill-red-border);
}

/* Work-type and subsystem chips on the card face. A breakdown reads red
   because a breakdown means a machine is stopped right now — the one thing a
   supervisor should be able to spot without reading a word. */
.mt-chip.wt-breakdown{   background:var(--pill-red-bg);       color:var(--pill-red-text);       border-color:var(--pill-red-border); }
.mt-chip.wt-preventive{  background:var(--pill-green-bg);     color:var(--pill-green-text);     border-color:var(--pill-green-border); }
.mt-chip.wt-inspection{  background:var(--pill-blue-soft-bg); color:var(--pill-blue-soft-text); border-color:var(--pill-blue-soft-border); }
.mt-chip.wt-corrective{  background:var(--pill-yellow-bg);    color:var(--pill-yellow-text);    border-color:var(--pill-yellow-border); }
.mt-chip.wt-predictive,
.mt-chip.wt-calibration,
.mt-chip.wt-safety{      background:var(--pill-blue-bg);      color:var(--pill-blue-text);      border-color:var(--pill-blue-border); }
.mt-chip.subsystem{      background:var(--pill-gray-bg);      color:var(--pill-gray-text);      border-color:var(--pill-gray-border); }
/* The shutdown marker. Red on the card face for the same reason as above. */
.mt-chip.shutdown{
  background:var(--pill-red-bg); color:var(--pill-red-text);
  border-color:var(--pill-red-border); font-weight:800;
}

/* A card for a stopped machine gets the full-height stripe as well as the
   chip, so it separates from the column at a glance rather than on a read. */
.mt-card.is-breakdown{ border-inline-start-color:var(--danger); border-inline-start-width:4px; }

/* Estimated vs actual, in the drawer. Side by side because the comparison is
   the point — an estimate nobody ever checks against reality is a number that
   never improves. */
.mt-vs{ display:flex; gap:10px; flex-wrap:wrap; }
.mt-vs-cell{
  flex:1 1 120px; background:var(--surface-soft);
  border:1px solid var(--panel-edge); border-radius:9px; padding:9px 11px;
}
.mt-vs-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.5px; color:var(--ink-soft); }
.mt-vs-value{ font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:700; color:var(--ink); margin-top:3px; }
.mt-vs-value.over{ color:var(--danger); }
.mt-vs-value.under{ color:var(--patina); }

/* ===== Phase 23.2 — SOP checklists and failure root cause coding =====

   No new colours: every rule below resolves to a var() token already defined
   in app.css, which is what keeps the module in step with the light/dark
   themes without knowing anything about them.

   Logical properties throughout (padding-inline, border-inline-start), same
   as the rest of this file — RTL comes from the document's dir attribute
   flipping globally, and there is not a single [dir="rtl"] override anywhere
   in this stylesheet. */

/* Conditional blocks in the job modal. Given a tinted panel and an inline
   start rule so the fields that appear on picking "Preventive" or "Breakdown"
   read as a section that belongs to that choice, rather than as controls that
   have quietly grown out of the middle of the form. */
.mt-conditional{
  background:var(--surface-soft); border:1px solid var(--panel-edge);
  border-inline-start:3px solid var(--accent);
  border-radius:10px; padding:12px 14px; margin:4px 0 14px;
}
.mt-conditional .mt-section-title{ margin-bottom:8px; }
.mt-conditional .field:last-child{ margin-bottom:0; }

/* ---------- checklist steps ---------- */
/* One row shape for both the modal's editor and the drawer's tick list, so a
   step looks like the same object in the place it is written and the place it
   is worked through. */
.mt-step-row{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:9px; padding:8px 11px; margin-bottom:6px;
}
/* The number is rendered from the array position, never stored — deleting
   step 2 renumbers the rest instead of leaving a list reading 1, 3, 4. */
.mt-step-num{
  flex:0 0 auto; min-width:20px; height:20px; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
  color:var(--ink-soft); background:var(--pill-gray-bg);
  border:1px solid var(--pill-gray-border); border-radius:5px;
}
.mt-step-main{ flex:1; min-width:0; }
.mt-step-label{ font-size:13px; color:var(--ink); word-break:break-word; line-height:1.4; }
.mt-step-sub{ display:block; font-size:11px; color:var(--ink-soft); margin-top:2px; }

/* A ticked step goes green and strikes through. Both, not one: colour alone
   fails for a colour-blind fitter, and a strike-through alone is easy to miss
   at a glance across a workshop tablet. */
.mt-step-row.is-done{ background:var(--pill-green-bg); border-color:var(--pill-green-border); }
.mt-step-row.is-done .mt-step-label{ text-decoration:line-through; color:var(--pill-green-text); }
.mt-step-row.is-done .mt-step-num{
  background:var(--pill-green-border); border-color:var(--pill-green-border); color:var(--pill-green-text);
}
/* Only the drawer's rows are clickable; the modal's are not a label wrapping
   a checkbox and must not pretend to be. */
.mt-step-row.is-live{ cursor:pointer; }
.mt-step-row.is-live:hover{ border-color:var(--accent); }
.mt-step-row.is-live:has(input:disabled){ cursor:default; opacity:0.75; }
.mt-step-row.is-live:has(input:disabled):hover{ border-color:var(--panel-edge); }
.mt-step-row input[type=checkbox]{
  width:17px; height:17px; margin-top:1px; accent-color:var(--accent); flex:0 0 auto;
}

/* The add-a-step row. Input and button on one line because they are one
   action, and Enter in the input does the same thing as the button. */
.mt-checklist-add{ display:flex; gap:8px; align-items:center; margin-top:8px; }
.mt-checklist-add input{ flex:1; min-width:0; }
.mt-checklist-add button{ flex:0 0 auto; }

/* Progress across the whole checklist, in the drawer. The bar is the glanceable
   half and the count is the precise half — "6 of 7" matters more than the bar
   when the last step is the one that involves a torque wrench. */
.mt-checklist-progress{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.mt-checklist-bar{
  flex:1; height:6px; border-radius:3px; overflow:hidden;
  background:var(--pill-gray-bg); border:1px solid var(--panel-edge);
}
.mt-checklist-bar span{
  display:block; height:100%; background:var(--patina); transition:width 0.18s ease;
}
.mt-checklist-count{
  flex:0 0 auto; font-family:'JetBrains Mono',monospace;
  font-size:11.5px; font-weight:700; color:var(--ink-soft);
}

/* ---------- card-face chips ---------- */
/* Progress stays neutral until every step is ticked. A partly-done routine is
   not a done one, and a chip that greens up at "nearly" is how the last two
   steps stop getting done. */
.mt-chip.checklist{
  background:var(--pill-gray-bg); color:var(--pill-gray-text); border-color:var(--pill-gray-border);
  font-family:'JetBrains Mono',monospace; font-weight:700;
}
.mt-chip.checklist.complete{
  background:var(--pill-green-bg); color:var(--pill-green-text); border-color:var(--pill-green-border);
}
/* The coded root cause, on the card face and in the drawer. Amber rather than
   red: the card is already red down its inline-start edge for being a
   breakdown, and a second red chip beside it would compete with the LOTO
   marker, which is the one thing on a card that must never lose the contest
   for attention. */
.mt-chip.failure{
  background:var(--pill-yellow-bg); color:var(--pill-yellow-text); border-color:var(--pill-yellow-border);
}

/* ---------- pareto ---------- */
/* The share column carries an inline bar behind its number. A pareto read as a
   column of percentages is a table; the bar is what makes the ranking land
   before the numbers are read. */
.mt-pareto-bar{
  display:inline-block; vertical-align:middle;
  width:56px; height:6px; margin-inline-end:7px;
  border-radius:3px; overflow:hidden;
  background:var(--pill-gray-bg); border:1px solid var(--panel-edge);
}
.mt-pareto-bar span{ display:block; height:100%; background:var(--accent); }

/* ===== Phase 23.3 — done-column filtering, crews, line status ===== */

/* The Done column's date window. Sits between the lane head and its cards,
   inset so it reads as a control belonging to that column rather than as a
   card at the top of it. */
.mt-done-filter{
  display:flex; flex-direction:column; gap:6px;
  padding:7px 9px; margin:0 4px 6px;
  background:var(--surface-soft); border:1px solid var(--panel-edge); border-radius:8px;
}
.mt-done-filter select,
.mt-done-range input{
  width:100%; font-size:12px; padding:4px 7px;
  border:1px solid var(--panel-edge); border-radius:6px;
  background:var(--panel); color:var(--ink);
}
.mt-done-range{ display:flex; gap:6px; }
.mt-done-range input{ flex:1; min-width:0; }

/* The foot of the Done column. The count line only appears when the window is
   actually hiding something — a permanent "showing 4 of 4" is noise, but
   silence when 200 records are hidden is a lie by omission. */
.mt-lane-foot{
  padding:8px 9px 4px; margin:0 4px;
  border-top:1px dashed var(--panel-edge);
}
.mt-lane-showing{
  font-size:11px; color:var(--ink-soft);
  font-family:'JetBrains Mono',monospace; margin-bottom:5px;
}
.mt-done-log-link{
  font-size:12px; color:var(--accent);
  background:none; border:none; padding:0; cursor:pointer;
  text-align:start; width:100%;
}
.mt-done-log-link:hover{ text-decoration:underline; }

/* ---------- crews ---------- */
.mt-card-crew{
  font-size:11.5px; color:var(--ink-soft);
  margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mt-crew-more{ color:var(--accent); font-weight:600; }

.mt-assignee-box{
  display:flex; align-items:flex-start; gap:8px;
  padding:7px 9px; background:var(--panel);
  border:1px solid var(--panel-edge); border-radius:9px;
}
.mt-assignee-chips{ flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.mt-assignee-empty{ font-size:12px; color:var(--ink-soft); }
.mt-assignee-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; padding:2px 4px 2px 9px; border-radius:999px;
  background:var(--pill-blue-bg); color:var(--pill-blue-text);
  border:1px solid var(--pill-blue-border);
}
/* padding-inline-start on the chip is asymmetric (text side roomier than the
   ✕ side), so it is restated logically for RTL rather than left as a
   physical left/right pair. */
.mt-assignee-chip{ padding-inline:9px 4px; }
.mt-assignee-chip button{
  background:none; border:none; cursor:pointer; padding:0 3px;
  color:inherit; opacity:0.65; font-size:12px; line-height:1;
}
.mt-assignee-chip button:hover{ opacity:1; }
.mt-chip.crew{
  background:var(--pill-blue-bg); color:var(--pill-blue-text); border-color:var(--pill-blue-border);
}

/* A chosen row in the people picker. The tick carries the state as well as the
   background, so it survives a colour-blind reader and a washed-out screen. */
.mt-picker-row.is-picked{
  background:var(--pill-blue-soft-bg); border-color:var(--pill-blue-soft-border);
}
.mt-picker-tick{
  flex:0 0 auto; width:16px; text-align:center;
  color:var(--accent); font-weight:700;
}

/* ---------- line operating status ---------- */
/* Only non-production states get a chip on the card face, so these two are the
   only ones defined. Blue for a trial run rather than green: it is running,
   but it is not making anything, and green would read as "all normal". */
.mt-chip.line-stopped{
  background:var(--pill-red-bg); color:var(--pill-red-text); border-color:var(--pill-red-border);
}
.mt-chip.line-running_trial{
  background:var(--pill-blue-bg); color:var(--pill-blue-text); border-color:var(--pill-blue-border);
}
.mt-chip.line-running_production{
  background:var(--pill-green-bg); color:var(--pill-green-text); border-color:var(--pill-green-border);
}

/* The LOTO / line-status contradiction. Amber and inline under the control
   rather than a toast: it is a question about the form's own contents, and it
   should stay on screen until the planner resolves it. */
.mt-inline-warn{
  margin-top:6px; padding:7px 10px; border-radius:8px;
  font-size:12px; line-height:1.45;
  background:var(--pill-yellow-bg); color:var(--pill-yellow-text);
  border:1px solid var(--pill-yellow-border);
}

/* ===== Phase 23.4 / 23.5 — templates, duplication, reminders ===== */

/* A template row. The stage buttons sit on the row itself so cloning a
   standard into Scheduled is one click, not a dialog — the whole value of a
   template library is that using one is faster than filling the form. */
.mt-template-row{
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 13px; margin-bottom:8px;
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:10px;
}
.mt-template-row:hover{ border-color:var(--accent); }
.mt-template-main{ flex:1; min-width:0; }
.mt-template-title{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35; }
.mt-template-sub{
  font-size:11.5px; color:var(--ink-soft); margin-top:3px;
  font-family:'JetBrains Mono',monospace;
}
.mt-template-actions{
  flex:0 0 auto; display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end;
}
.mt-template-actions .btn{ font-size:11.5px; padding:4px 9px; }

/* ---------- the reminder bell ---------- */
/* Hidden at zero rather than shown greyed: a badge that is permanently on
   screen reading 0 is a control people stop looking at, which defeats the
   point of having one. */
.mt-bell{ position:relative; }
.mt-bell-count{
  display:inline-block; min-width:17px; padding:0 5px;
  margin-inline-start:3px; border-radius:999px;
  background:var(--pill-red-bg); color:var(--pill-red-text);
  border:1px solid var(--pill-red-border);
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
}
.mt-bell-row{
  padding:10px 12px; margin-bottom:7px; cursor:pointer;
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:9px;
}
.mt-bell-row:hover{ border-color:var(--accent); }
/* Unread carries a rule on the inline-start edge as well as weight, so the
   distinction survives a washed-out workshop screen where a font-weight
   difference does not. */
.mt-bell-row.is-unread{
  border-inline-start:3px solid var(--accent);
  background:var(--surface-soft);
}
.mt-bell-title{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.35; }
.mt-bell-row.is-unread .mt-bell-title{ font-weight:700; }
.mt-bell-body{ font-size:12px; color:var(--ink-soft); margin-top:3px; line-height:1.45; }
.mt-bell-when{
  font-size:11px; color:var(--ink-soft); margin-top:4px;
  font-family:'JetBrains Mono',monospace;
}