/* team-map.css -- session 417 (briefs/session-417-brief.md Part 1; teammap-redesign-v1.html, its own stylesheet ported value for value). The Team Map
   inside the core tabs' frame: the title row, band and filter card are core-header.css (the shared piece); this file holds what only the Team Map has.
     the day chips' live dot (.live)          7 px green with its 3 px halo
     Cleaner homes                             a toggle in the card's first row (not in the drawing: the map's own switch, kept)
     the map and the cleaner column (.mapw)    the map grows (999 1 560), the column (1 1 280) wraps under it on a narrow page; both keep the map's height
                                               rule (60vh, at least 420; full screen grows them, beside the left menu)
     the map's controls (.ctl, .cb, .fit)      Fit all stops, + and -, top right; the legend as one white card (.lgd); the note (.mnote)
     the cleaner column (.cc, .cch, .tg, .crw) its head with the count, the Full time, Part time, Backup, Not set and Field chips, the rows, Redeploy (.ccf)
     the filters' line, the batch bar, the "Showing her only" line in Cleaner routes
   Not in the drawing (named here): the stop's card opens over the controls, top right, as it did before; Not set and Cleaner homes are the map's own (spec items 17 and 25). */

.tmx{ --tmx-line:#DCE1E5; --tmx-ink:#15191C; --tmx-sub:#6B737A; --tmx-row:#F0F2F4; --tmx-dark:#1E2428 }

/* the live dot before Today */
.tmx-live{ width:7px; height:7px; border-radius:50%; background:#2FBF71; box-shadow:0 0 0 3px rgba(47,191,113,.25); flex:none; display:inline-block }

/* Cleaner homes, a toggle beside Routes | Stops */
.tmx-tgl{ height:40px; padding:0 14px; border:1px solid var(--ch-line); border-radius:9px; background:#ffffff; font:inherit; font-size:14px; font-weight:500; color:var(--ch-dd-ink);
  display:flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap; line-height:normal }
.tmx-tgl:hover{ border-color:var(--ch-line-hover) }
.tmx-tgl.on{ border-color:var(--ch-a); color:var(--ch-a); font-weight:600 }
.tmx-tgl:focus-visible{ outline:2px solid var(--ch-a); outline-offset:2px }
.tmx-ring{ width:14px; height:14px; border-radius:50%; border:2px solid #C9A227; background:#ffffff; flex:none; box-sizing:border-box }

/* the filters' line (what they hid), the batch bar, the Showing her only bar */
.tmx-note{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:12px; padding:10px 12px; border-radius:10px; background:#FFF6D9; color:#5C4300; font-size:13px; line-height:18px }
.tmx-note[hidden]{ display:none }
.tmx-nt{ min-width:0 }
.tmx-nb{ height:30px; padding:0 12px; border-radius:8px; border:1px solid #D9A920; background:#ffffff; color:#5C4300; font:inherit; font-size:13px; font-weight:650; cursor:pointer; white-space:nowrap }
.tmx-nb:hover{ background:#FFF1C2 }
.tmx-nb:focus-visible{ outline:2px solid var(--ch-a); outline-offset:2px }
.tmx-bulk{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; padding:10px 12px; border-radius:10px; background:#F3EEF5; font-size:13px; color:#3A2F45 }
.tmx-bulk[hidden]{ display:none }
.tmx-bulk .tm-planpicker{ margin-top:0 }
.tmx-bulkcount{ font-weight:700 }
.tmx-bulkclear{ height:30px; padding:0 12px; border-radius:8px; border:1px solid var(--ch-line); background:#ffffff; font:inherit; font-size:13px; font-weight:600; cursor:pointer }
.tmx-sel{ margin-top:12px }

/* the map and the cleaner column (.mapw .map .cc), the map's height rule kept */
.tmx-mapw{ display:flex; gap:16px; margin-top:14px; flex-wrap:wrap; position:relative }
.tmx-map{ position:relative; flex:999 1 560px; min-width:0; height:60vh; min-height:420px; border-radius:12px; overflow:hidden; background:#EAEFEA; border:1px solid var(--tmx-line) }
.tmx-cc{ flex:1 1 280px; min-width:0; height:60vh; min-height:420px; border:1px solid var(--tmx-line); border-radius:12px; display:flex; flex-direction:column; overflow:hidden; background:#ffffff }
.tmx-mapw.tmx-fs{ flex-wrap:nowrap; background:#ffffff; padding:0 16px 16px; box-sizing:border-box }
.tmx-mapw.tmx-fs .tmx-map,.tmx-mapw.tmx-fs .tmx-cc{ height:100%; min-height:0 }

/* the map's controls, legend and note (.ctl .cb .fit .lgd .mnote) */
.tmx-ctl{ position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:6px; align-items:flex-end; z-index:41 }
.tmx-cb{ width:40px; height:40px; background:#ffffff; border:1px solid #D2D8DD; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#2C3338;
  cursor:pointer; font:inherit; font-size:18px; font-weight:600; padding:0; line-height:1 }
.tmx-cb:hover{ border-color:#AEB7BE }
.tmx-cb:focus-visible{ outline:2px solid var(--ch-a); outline-offset:2px }
.tmx-cb .ch-ico{ width:16px; height:16px }
.tmx-cb.tmx-fit{ width:auto; padding:0 12px; font-size:13px; gap:6px }
.tmx-map .tm-legend{ top:12px; left:12px; background:#ffffff; border-radius:10px; padding:10px 12px; box-shadow:0 2px 10px rgba(0,0,0,.12); gap:6px }
.tmx-map .tm-leg{ background:none; box-shadow:none; padding:0; border:0; font-size:12px; font-weight:600; color:#3A4146; gap:8px }
.tmx-map .tm-legdot{ width:12px; height:12px }
.tmx-map .tmx-mnote{ left:12px; bottom:12px; background:rgba(255,255,255,.95); border-radius:8px; padding:7px 11px; font-size:12px; color:#3A4146; box-shadow:0 1px 4px rgba(0,0,0,.08); font-family:inherit }
.tmx-map .tmx-mnote b{ color:var(--tmx-ink) }
.tmx-map .tmx-detail{ right:12px; top:12px; max-height:calc(100% - 24px); z-index:45 }   /* over the map's controls while a stop is open; its x closes it */

/* the cleaner column (.cch .cct .tgs .tg .cls .crw .ccf) */
.tmx-cch{ padding:12px 14px; border-bottom:1px solid #E6E9EC }
.tmx-cct{ display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:700; color:var(--tmx-ink) }
.tmx-cct span{ font-size:12px; font-weight:600; color:var(--tmx-sub) }
.tmx-tgs{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap }
.tmx-tg{ height:28px; padding:0 10px; border-radius:14px; border:1px solid #D2D8DD; background:#ffffff; font:inherit; font-size:12.5px; font-weight:600; color:#3B4348; cursor:pointer; line-height:normal }
.tmx-tg:hover{ border-color:#AEB7BE }
.tmx-tg.on{ background:var(--tmx-dark); color:#ffffff; border-color:var(--tmx-dark) }
.tmx-tg:focus-visible{ outline:2px solid var(--ch-a); outline-offset:2px }
.tmx-cls{ flex:1; overflow:auto }
.tmx-cc .tm-chead{ padding:10px 14px 4px }
.tmx-cc .tm-crow{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 14px; border:0; border-bottom:1px solid var(--tmx-row); background:transparent; font:inherit; text-align:left; cursor:pointer; color:inherit; box-sizing:border-box }
.tmx-cc .tm-crow:hover{ background:#F7FAFA }
.tmx-cc .tm-crow.sel{ background:#E7F3F3 }
.tmx-cc .tm-crow:focus-visible{ outline:2px solid var(--ch-a); outline-offset:-2px }
.tmx-cc .tm-crow .sw{ width:12px; height:12px }
.tmx-cc .tm-crow .nm{ font-size:13.5px; font-weight:650; color:var(--tmx-ink) }
.tmx-cc .tm-crow .sub2{ font-size:12px; color:var(--tmx-sub); margin-top:1px }
.tmx-cc .tm-crow .tm-state{ margin-left:auto; font-size:11.5px; font-weight:650; padding:2px 8px; border-radius:6px }
.tmx-cc .tm-crow .tm-state.home,.tmx-cc .tm-crow .tm-state.nostops{ background:#EEF1F3; color:#475056 }
.tmx-cc .tm-crow .tmx-stw{ background:#FFF4CC; color:#7A5300 }
.tmx-ccf{ padding:10px 14px; border-top:1px solid #E6E9EC }
.tmx-redep{ width:100%; height:40px; padding:0 16px; border-radius:9px; border:1px solid #D2D8DD; background:#ffffff; font:inherit; font-size:14px; font-weight:600; color:#1E2428;
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; white-space:nowrap }
.tmx-redep:hover:not([disabled]){ border-color:#AEB7BE }
.tmx-redep:focus-visible{ outline:2px solid var(--ch-a); outline-offset:2px }
.tmx-redep[disabled]{ color:#8A9298; cursor:default; background:#F7F9FA }
.tmx-redep .ch-ico{ width:16px; height:16px }
.tmx-ccn{ font-size:12px; color:var(--tmx-sub); margin-top:6px; line-height:16px; text-align:center }

/* Cleaner routes under the map (the Dashboard's own box, dayboard.css), with the line that says she is shown alone or what the filters hid */
.tmx-routes{ margin-top:20px }
.tmx-routes .tmx-rsel{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:6px; font-size:12.5px; font-weight:650; color:#FFE27D }
.tmx-routes .tmx-rbtn{ height:28px; padding:0 12px; border-radius:8px; border:1px solid rgba(255,255,255,.45); background:transparent; color:#ffffff; font:inherit; font-size:12.5px; font-weight:650; cursor:pointer }
.tmx-routes .tmx-rbtn:hover{ background:rgba(255,255,255,.12) }
.tmx-routes .tmx-rbtn:focus-visible{ outline:2px solid #FFD13A; outline-offset:2px }

/* a phone: the column under the map, Cleaner routes one card a row (dayboard.css's own grid) */
@media (max-width: 760px){
  .tmx-mapw{ gap:12px }
  .tmx-map{ flex-basis:100%; height:60vh; min-height:360px }
  .tmx-cc{ flex-basis:100%; height:auto; max-height:480px; min-height:0 }
  .tmx-map .tmx-detail{ right:8px; left:8px; width:auto; top:8px }
  .tmx-ctl{ top:8px; right:8px }
}

/* Session 421: an at-risk stop with nobody on it keeps its yellow inside and takes the red ring, so every stop the band's At risk counts is ringed */
#tmMap .tm-st.un.rk .tm-disc{ border-color:var(--danger-strong,#C0392B); border-style:dashed }