/* FA-03 — My Day (#scr-jobs) restyle, board 28. Reuses the existing
   #myday-hello/#sync-freshness/#job-list/.job-card/.stop-card markup and data
   (jobs/stopsCache/offlineState/jobsFetchFailed/today from myDayCore.js/
   myDayList.js/dayStops.js) as-is; every rule here is scoped under
   [data-look="v2"] so switch OFF stays pixel-identical (frontend/
   test-fa03-my-day.mjs test 1). See frontend/js/myDayV2.js for the small
   amount of JS this needs (tiles/banner content, the loading skeleton, and
   the call/Navigate action strip). */

/* ---- wrapper divs: `display:contents` with the switch OFF, same technique
   as .v2-card in css/look-v2/login.css, so #myday-hello/#sync-freshness stay
   direct children of #scr-jobs for layout and nothing about v1 changes. ---- */
.myday-band-v2, .myday-band-v2-content { display: contents; }

[data-look="v2"] #scr-jobs .v2-scenic-bg.hidden { display: block; }

[data-look="v2"] .myday-band-v2 {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--field-radius-card);
  margin-bottom: var(--field-space-5);
}
[data-look="v2"] .myday-band-v2 .v2-scenic-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--field-page);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
[data-look="v2"] .myday-band-v2 .v2-scenic-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* page-colored scrim, same reasoning as login.css's — stays correct across
     all three palettes instead of an arbitrary black tint (BUILD_INSTRUCTIONS §9) */
  background: linear-gradient(to bottom, transparent, var(--field-page) 92%);
}
[data-look="v2"] .myday-band-v2-content {
  display: block;
  position: relative;
  z-index: 1;
  padding: var(--field-space-5) var(--field-space-4) var(--field-space-4);
}
[data-look="v2"] .myday-band-v2 .hello {
  font: var(--field-text-welcome);
  color: var(--field-text-primary);
}
[data-look="v2"] .myday-band-v2 .hello small {
  display: block;
  font: var(--field-text-meta);
  font-weight: 400;
  color: var(--field-text-secondary);
  margin-top: var(--field-space-1);
}
[data-look="v2"] .myday-band-v2 .sync-freshness {
  font: var(--field-text-meta);
  color: var(--field-text-secondary);
  margin-top: var(--field-space-2);
}
[data-look="v2"] .myday-band-v2 .sync-freshness.stale { color: var(--field-active-text); }
[data-look="v2"] .myday-band-v2 .sync-freshness.fresh { color: var(--field-status-inprogress-fill); }
@media (prefers-reduced-motion: no-preference) {
  [data-look="v2"] .myday-band-v2 .v2-scenic-bg { transition: background-image 400ms ease; }
}

/* ---- state 4: "Can't reach the office" cached-data banner (js/myDayV2.js
   toggles this; content driven by the existing offlineState/mpe_last_sync,
   no new data). Reuses the Scheduled status pair rather than inventing a
   fourth color for one banner. ---- */
[data-look="v2"] #myday-unavail-v2 {
  display: flex;
  align-items: center;
  gap: var(--field-space-2);
  padding: var(--field-space-3);
  margin-bottom: var(--field-space-4);
  border-radius: var(--field-radius-control);
  background: var(--field-status-scheduled-fill);
  color: var(--field-status-scheduled-ink);
  font: var(--field-text-meta);
}
[data-look="v2"] #myday-unavail-v2.hidden { display: none; }

/* ---- summary tiles (§6): js/myDayV2.js renders only the tiles for numbers
   the app already has (never a placeholder/fake 0), so this can be 1-2 tiles
   wide as easily as 3. ---- */
[data-look="v2"] #myday-tiles-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--field-space-2);
  margin-bottom: var(--field-space-5);
}
[data-look="v2"] #myday-tiles-v2.hidden { display: none; }
[data-look="v2"] .v2-tile {
  min-height: 72px;
  padding: var(--field-space-3);
  border-radius: var(--field-radius-card);
  background: var(--field-surface);
  border: 1px solid var(--field-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
[data-look="v2"] .v2-tile b { font: var(--field-text-metric); color: var(--field-text-primary); }
[data-look="v2"] .v2-tile span { font: var(--field-text-meta); color: var(--field-text-secondary); }

/* ---- state 3: loading skeleton, no flashing (board 28) ---- */
[data-look="v2"] .v2-skel-card {
  height: 92px;
  border-radius: var(--field-radius-card);
  background: linear-gradient(90deg, var(--field-raised) 25%, var(--field-surface) 37%, var(--field-raised) 63%);
  background-size: 400% 100%;
}
[data-look="v2"] .v2-skel-card + .v2-skel-card { margin-top: var(--field-space-3); }
@media (prefers-reduced-motion: no-preference) {
  [data-look="v2"] .v2-skel-card { animation: myday-skel-v2 1.6s ease infinite; }
}
@keyframes myday-skel-v2 { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---- job/stop card status colors (§4 status pairs, reserved for FA-03 in
   css/look-v2/tokens.css). Page/surface/border/text already come free from
   the FA-01 variable remap (tokens.css); only the status accent needs a v2
   mapping here. ---- */
[data-look="v2"] #job-list .job-card,
[data-look="v2"] #job-list .stop-card {
  border-radius: var(--field-radius-card);
}
[data-look="v2"] #job-list .job-card { border-left-color: var(--field-status-scheduled-fill); }
[data-look="v2"] #job-list .jc-top .jc-st {
  color: var(--field-status-scheduled-ink);
  background: var(--field-status-scheduled-fill);
  border-radius: var(--field-radius-pill);
  padding: 2px var(--field-space-2);
}
[data-look="v2"] #job-list .job-card.next { border-left-color: var(--field-status-inprogress-fill); }
[data-look="v2"] #job-list .job-card.next .jc-top .jc-st {
  color: var(--field-status-inprogress-ink);
  background: var(--field-status-inprogress-fill);
}
/* Completed cards (§4: "a check + Done/Authorized + timestamp, not a
   rearranged tile") — muted via color, not v1's opacity:0.75, which fought
   the new surface remap's contrast. */
[data-look="v2"] #job-list .job-card.done {
  border-left-color: var(--field-border);
  opacity: 1;
}
[data-look="v2"] #job-list .job-card.done .jc-top .jc-st {
  color: var(--field-text-secondary);
  background: var(--field-raised);
}
[data-look="v2"] #job-list .stop-card { border-left-color: var(--field-status-supplystop-fill); }
[data-look="v2"] #job-list .sc-kind {
  color: var(--field-status-supplystop-ink);
  background: var(--field-status-supplystop-fill);
  border-radius: var(--field-radius-pill);
}

/* ---- call/Navigate action strip (§6/§7): a SIBLING row after .job-card, not
   nested inside it — .job-card is a shared <button> (myDayList.js#cardHtml,
   also used by Day Summary/Route unrestyled), and a <button> cannot validly
   contain another <button>. js/myDayV2.js appends this as .job-card's next
   sibling only on My Day, never touching cardHtml() itself; the border/radius
   pairing below visually merges the two into one card. ---- */
[data-look="v2"] #job-list .job-card:has(+ .v2-card-actions) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
[data-look="v2"] #job-list .v2-card-actions {
  display: flex;
  gap: var(--field-space-3);
  padding: 0 var(--field-space-4) var(--field-space-4);
  background: var(--field-surface);
  border: 1px solid var(--field-border);
  border-top: none;
  border-radius: 0 0 var(--field-radius-card) var(--field-radius-card);
}
[data-look="v2"] #job-list .v2-card-btn {
  flex: 1 1 0;
  min-height: 48px;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius-control);
  background: var(--field-raised);
  color: var(--field-text-primary);
  font: var(--field-text-button);
}