/*
  Shared visual component layer for the Interactive Dispatch Calendar
  (Feature #14, Phase 2) -- used by staff-dashboard.html, technician-app.html,
  and (for the dispatch-lane/card look, where relevant) platform-admin.html.

  Deliberately defines zero colors of its own: every rule below reads the
  HOST PAGE's own existing design tokens (--accent/--built/--amber/--blue/
  --red/--card/--paper/--rule/--ink*/--shadow-*/--ease), which each of the
  three authenticated apps already defines in its own embedded <style>
  block, in both light and dark mode. This is the first shared VISUAL
  stylesheet across the three apps (the only prior precedent,
  page-help.css, is a functional overlay, not app styling) -- kept
  separate from each app's own <style> block specifically so calendar/
  dispatch visuals can be revised once and apply everywhere, per the
  project's own "keep the architecture modular" requirement for this
  feature.

  Status colors use five APP-AGNOSTIC semantic modifiers (--success/
  --info/--warning/--danger/--neutral, via .mx-*--success etc.) rather
  than hardcoding a job status string -- each host page's own JS maps its
  own status vocabulary (statusPillClass() in staff-dashboard.html,
  status-${j.status} in technician-app.html) to one of these five, so this
  file never needs to know what "completed" or "in_progress" means.
*/

.mx-job-card{
  background:var(--card); border:1px solid var(--rule); border-left:4px solid var(--ink-faint);
  border-radius:10px; padding:10px 12px; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), opacity .12s var(--ease);
  position:relative; min-width:0;
}
.mx-job-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.mx-job-card:active{transform:translateY(0); box-shadow:var(--shadow-sm);}
.mx-job-card[draggable="true"]{cursor:grab;}
.mx-job-card[draggable="true"]:active{cursor:grabbing;}
.mx-job-card.mx-dragging{opacity:0.45;}

.mx-job-card--success{border-left-color:var(--built);}
.mx-job-card--info{border-left-color:var(--blue);}
.mx-job-card--warning{border-left-color:var(--amber);}
.mx-job-card--danger{border-left-color:var(--red);}
.mx-job-card--neutral{border-left-color:var(--ink-faint);}

.mx-job-card-time{font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; font-size:12px; font-weight:700; color:var(--ink-soft);}
.mx-job-card-title{font-weight:650; font-size:13.5px; margin-top:2px; color:var(--ink); line-height:1.3; overflow-wrap:break-word;}
.mx-job-card-meta{font-size:12px; color:var(--ink-soft); margin-top:3px; display:flex; align-items:center; gap:5px; flex-wrap:wrap;}

/* Priority dot -- urgent pulses gently (respects reduced-motion below),
   high is a plain static dot, normal/low render as a quiet neutral dot
   so the indicator is still present (consistent card shape) without
   drawing the eye when nothing needs attention. */
.mx-priority-dot{display:inline-block; width:7px; height:7px; border-radius:50%; flex:none;}
.mx-priority-dot--urgent{background:var(--red); box-shadow:0 0 0 3px var(--red-bg); animation:mx-pulse 1.7s ease-in-out infinite;}
.mx-priority-dot--high{background:var(--amber);}
.mx-priority-dot--normal, .mx-priority-dot--low{background:var(--ink-faint);}

@keyframes mx-pulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}

/* Expandable preview -- collapsed by default, revealed on hover (desktop)
   or via .mx-expanded (tap, added/removed by the host page's JS on
   mobile where :hover doesn't apply the same way). Holds the extra
   detail a compact chip/card can't show up front: location, a
   description snippet. */
.mx-job-card-preview{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .22s var(--ease), opacity .16s var(--ease), margin-top .22s var(--ease);
  font-size:11.5px; color:var(--ink-faint); line-height:1.5;
}
.mx-job-card:hover .mx-job-card-preview, .mx-job-card.mx-expanded .mx-job-card-preview{
  max-height:90px; opacity:1; margin-top:6px;
}

/* Drag-over feedback for any drop target (a calendar day cell, a
   dispatch lane) -- one shared rule instead of a per-view duplicate. */
.mx-drop-target{transition:background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);}
.mx-drop-target.mx-drag-over{background:var(--accent-bg); border-color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent);}

/* Dispatch lane (technician dispatch board) -- a named lane with a
   small initials avatar, matching the Sera-style reference's per-
   technician column header. */
.mx-dispatch-lane{
  flex:1 0 220px; min-width:220px; border:1px solid var(--rule); border-radius:12px;
  background:var(--paper-2); display:flex; flex-direction:column; overflow:hidden;
}
.mx-dispatch-lane-head{
  padding:11px 13px; display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--rule);
  background:var(--card);
}
.mx-avatar{
  width:26px; height:26px; border-radius:50%; background:var(--accent-bg); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-family:'Geist',system-ui,sans-serif;
  font-weight:700; font-size:11px; flex:none; letter-spacing:0;
}
.mx-dispatch-lane-name{font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:13px; letter-spacing:0.01em; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mx-dispatch-lane-count{font-size:11.5px; font-weight:700; color:var(--ink-faint); font-variant-numeric:tabular-nums; flex:none; background:var(--paper-2); border-radius:100px; padding:2px 8px;}
.mx-dispatch-lane-body{padding:9px; display:flex; flex-direction:column; gap:8px; min-height:80px; flex:1;}
.mx-dispatch-empty{padding:16px 10px; text-align:center; color:var(--ink-faint); font-size:12.5px;}

/* Success flash -- a brief, self-removing highlight confirming a
   reschedule/reassign actually saved. The host page adds .mx-saved
   after a successful drop, this rule fades it back out on its own. */
.mx-job-card.mx-saved{animation:mx-save-flash 1s var(--ease);}
@keyframes mx-save-flash{
  0%{box-shadow:0 0 0 3px var(--built-bg), var(--shadow-md);}
  100%{box-shadow:var(--shadow-sm);}
}

@media (prefers-reduced-motion: reduce){
  .mx-job-card, .mx-job-card-preview, .mx-drop-target{transition:none !important;}
  .mx-job-card:hover{transform:none;}
  .mx-priority-dot--urgent, .mx-job-card.mx-saved{animation:none !important;}
}