/* Track M Manager View (generic). Same CSS for the Command Center page and the standalone /manager/ app. Phone-first. */
.mgr-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; min-width: 0; max-width: 100%; }
.mgr-page > *, .mgr-dept > *, .mgr-grid > * { min-width: 0; }
.mgr-head h2 { margin: 0; }
.mgr-sub { margin: 0.1rem 0 0; font-weight: 600; color: var(--primary, #1f4e79); }
.mgr-note { margin: 0.2rem 0 0; font-size: 0.8rem; }
.mgr-strip, .mgr-tabs { display: flex; gap: 0.35rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: thin; }
.mgr-chip, .mgr-tab { flex: 0 0 auto; border: 1px solid var(--border, #d0d5dd); background: var(--surface, #fff); color: inherit; border-radius: 999px; padding: 0.35rem 0.75rem; cursor: pointer; font: inherit; display: inline-flex; gap: 0.3rem; align-items: center; min-height: 36px; }
.mgr-chip.active, .mgr-tab.active { background: var(--primary, #1f4e79); color: #fff; border-color: transparent; }
.mgr-badge { display: inline-block; min-width: 1.3em; text-align: center; border-radius: 999px; padding: 0 0.35rem; font-size: 0.75rem; font-weight: 700; }
.mgr-badge.mgr-red { background: #d92d20; color: #fff; } .mgr-badge.mgr-yellow { background: #fdb022; color: #1d2939; } .mgr-badge.mgr-green { background: #12b76a; color: #fff; }
.mgr-msg:empty { display: none; }
.mgr-msg { margin: 0; padding: 0.45rem 0.7rem; border-radius: 6px; background: #eef4fb; color: #1d2939; }
.mgr-msg-ok { background: #e7f6ec; } .mgr-msg-bad { background: #fdecec; }
.mgr-dept-h { margin: 0.2rem 0; }
.mgr-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0.7rem; align-items: start; }
.mgr-sec h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.mgr-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; margin-bottom: 0.7rem; }
.mgr-kpi { display: grid; gap: 0.1rem; border: 1px solid var(--border, #e4e7ec); border-radius: 10px; padding: 0.5rem 0.6rem; background: var(--surface, #fff); color: var(--primary, #1f4e79); }
.mgr-kpi-v { font-size: 1.35rem; font-weight: 700; color: var(--text, #101828); }
.mgr-kpi-l { font-size: 0.82rem; color: var(--text, #344054); }
.mgr-k-red { border-left: 4px solid #d92d20; } .mgr-k-yellow { border-left: 4px solid #fdb022; } .mgr-k-green { border-left: 4px solid #12b76a; }
.mgr-src { font-size: 0.7rem; color: var(--muted, #667085); }
.mgr-spark { display: block; }
.mgr-needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.mgr-need { display: flex; gap: 0.5rem; border: 1px solid var(--border, #e4e7ec); border-radius: 8px; padding: 0.45rem 0.55rem; border-left-width: 4px; }
.mgr-sev3 { border-left-color: #d92d20; } .mgr-sev2 { border-left-color: #fdb022; } .mgr-sev1 { border-left-color: #98a2b3; }
.mgr-rank { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #f2f4f7; display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; color: #344054; }
.mgr-need-b { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.mgr-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; align-items: center; }
.mgr-actions .btn, .mgr-actions select { width: auto; min-height: 34px; font: inherit; font-size: 0.85rem; }
.mgr-assigned { font-size: 0.8rem; color: #067647; }
.mgr-clear { color: #067647; margin: 0; }
.mgr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.45rem; }
.mgr-tile { text-align: left; display: grid; gap: 0.15rem; border: 1px solid var(--border, #e4e7ec); border-left: 5px solid #98a2b3; border-radius: 8px; padding: 0.45rem 0.55rem; background: var(--surface, #fff); color: inherit; font: inherit; cursor: pointer; min-width: 0; }
.mgr-tile:disabled { cursor: default; }
.mgr-t-red { border-left-color: #d92d20; } .mgr-t-yellow { border-left-color: #fdb022; } .mgr-t-green { border-left-color: #12b76a; }
.mgr-tile-h { display: flex; gap: 0.3rem; align-items: center; } .mgr-tile-h strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgr-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #98a2b3; flex: 0 0 auto; }
.mgr-t-red .mgr-dot { background: #d92d20; } .mgr-t-yellow .mgr-dot { background: #fdb022; } .mgr-t-green .mgr-dot { background: #12b76a; }
.mgr-tile-r, .mgr-tile-why, .mgr-tile-s { font-size: 0.75rem; } .mgr-tile-why { color: #b42318; } .mgr-tile-s { color: var(--muted, #667085); }
.mgr-tile-m { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.mgr-m { font-size: 0.78rem; background: #f2f4f7; border-radius: 6px; padding: 0 0.3rem; color: #344054; }
.mgr-m-red { background: #fdecec; color: #b42318; } .mgr-m-yellow { background: #fff4e5; color: #b54708; } .mgr-m-green { background: #e7f6ec; color: #067647; }
.mgr-pill { display: inline-block; border-radius: 999px; padding: 0.02rem 0.5rem; font-size: 0.75rem; background: #f2f4f7; color: #344054; border: 1px solid #e4e7ec; }
.mgr-pill.mgr-green { background: #e7f6ec; color: #067647; } .mgr-pill.mgr-yellow { background: #fff4e5; color: #b54708; } .mgr-pill.mgr-red { background: #fdecec; color: #b42318; } .mgr-pill.mgr-grey { color: #667085; }
.mgr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mgr-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.mgr-table th, .mgr-table td { padding: 0.3rem 0.45rem; border-bottom: 1px solid var(--border, #e4e7ec); text-align: left; vertical-align: top; }
.mgr-r-red td { background: #fdecec; } .mgr-r-yellow td { background: #fff8eb; }
.mgr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; margin-bottom: 0.7rem; }
.mgr-card { display: grid; gap: 0.25rem; text-align: left; border: 1px solid var(--border, #e4e7ec); border-radius: 10px; padding: 0.6rem 0.7rem; background: var(--surface, #fff); color: inherit; font: inherit; cursor: pointer; min-width: 0; }
.mgr-card-h { font-weight: 700; } .mgr-card-top { font-size: 0.78rem; color: #b42318; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgr-card-ppl { display: flex; gap: 0.25rem; }
.mgr-reps { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.5rem; }
.mgr-rep { border: 1px solid var(--border, #e4e7ec); border-radius: 8px; padding: 0.4rem 0.55rem; min-width: 0; }
.mgr-rep h4 { margin: 0 0 0.25rem; font-size: 0.9rem; } .mgr-rep-none { border-color: #fecdca; background: #fffbfa; }
.mgr-appt-list, .mgr-list { margin: 0.1rem 0; padding-left: 1rem; font-size: 0.84rem; } .mgr-appt-list li { margin: 0.15rem 0; overflow-wrap: anywhere; }
.mgr-chip-s { display: inline-block; border: 1px solid var(--border, #e4e7ec); border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.8rem; }
.mgr-warn { background: #fff4e5; border-left: 4px solid #f79009; padding: 0.4rem 0.6rem; color: #1d2939; margin-top: 0.5rem; }
.mgr-bar { display: grid; grid-template-columns: minmax(110px, 40%) 1fr 2.5rem; gap: 0.4rem; align-items: center; font-size: 0.85rem; margin: 0.2rem 0; }
.mgr-bar-t { background: #f2f4f7; border-radius: 4px; height: 0.7rem; overflow: hidden; } .mgr-bar-t span { display: block; height: 100%; background: var(--primary, #1f4e79); }
.mgr-report-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; } .mgr-report-btns .btn { width: auto; }
.mgr-drill-back { position: fixed; inset: var(--banner-h, 0px) 0 0 0; background: rgba(16, 24, 40, 0.35); z-index: 60; }
.mgr-drill { position: fixed; top: var(--banner-h, 0px); right: 0; bottom: 0; width: min(520px, 100vw); overflow-y: auto; z-index: 61; border-radius: 0; box-shadow: -8px 0 24px rgba(16, 24, 40, 0.18); background: var(--surface, #fff); }
.mgr-drill h3 { padding-right: 4.5rem; } .mgr-close { position: absolute; top: 0.6rem; right: 0.6rem; width: auto; }
.mgr-sc { border-top: 1px solid var(--border, #e4e7ec); padding-top: 0.4rem; margin-top: 0.4rem; } .mgr-sc h4 { margin: 0.1rem 0 0.3rem; }
.mgr-note-l { display: grid; gap: 0.2rem; font-size: 0.85rem; margin: 0.4rem 0; } .mgr-note-l textarea, .mgr-draft textarea { width: 100%; box-sizing: border-box; font: inherit; }
.mgr-draft { border: 2px solid #fdb022; }
.mgr-link { background: none; border: 0; padding: 0; color: var(--primary, #1f4e79); text-decoration: underline; font: inherit; cursor: pointer; }
.mgr-more summary { cursor: pointer; margin: 0.3rem 0; }
@media (max-width: 900px) { .mgr-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .mgr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mgr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mgr-cards { grid-template-columns: minmax(0, 1fr); }
  .mgr-reps { grid-template-columns: minmax(0, 1fr); }
  .mgr-table { font-size: 0.8rem; }
}
/* standalone /manager/ app (make-manager.sh adds class mgr-standalone to <html>): no sidebar, the page is the app */
html.mgr-standalone .sidebar, html.mgr-standalone #menu-toggle, html.mgr-standalone #sidebar-collapse { display: none !important; }
html.mgr-standalone #screen-app { grid-template-columns: minmax(0, 1fr) !important; }
html.mgr-standalone .main, html.mgr-standalone main { margin-left: 0 !important; }

/* Phone width: Manager View is always team-wide, so the per-person "Team view" picker and the floating user chip are hidden there
   (same rule in /cc/#manager and /manager/); the page header stays readable under the top bar. */
@media (max-width: 700px) {
  html.mgr-standalone #team-scope-wrap,
  body:has([data-page="manager"]) #team-scope-wrap { display: none !important; }
  html.mgr-standalone #user-chip,
  body:has([data-page="manager"]) #user-chip { display: none !important; }
  .mgr-head h2 { margin-top: .25rem; }
}
.mgr-tile, .mgr-card { grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.mgr-tile > *, .mgr-card > * { min-width: 0; overflow-wrap: anywhere; }

/* QA round 2: Access-first mismatch values (shared .mm markup from js/mobile-utils.js), strike confirm / void, office line, labelled chips */
.mgr-page .mm { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.mgr-page .mm-access { font-weight: 700; font-size: 1rem; color: var(--text); }
.mgr-page .mm-ms { font-size: 0.78rem; color: var(--text-muted); }
.mgr-page .mm-flag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--warn); background: var(--warn-soft); color: var(--warn); font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.mgr-page .mm-flag-pill { white-space: nowrap; }
.mgr-office { margin: 0.1rem 0 0.25rem; font-size: 0.85rem; }
.mgr-confirm { margin: 0.5rem 0; padding: 0.6rem 0.75rem; border: 1px solid var(--warn); border-radius: 10px; background: var(--warn-soft); display: grid; gap: 0.4rem; }
.mgr-confirm label { display: grid; gap: 0.2rem; font-size: 0.85rem; }
.mgr-confirm input { min-height: 36px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); max-width: 100%; }
.mgr-list li[data-voided] { color: var(--text-muted); }
.mgr-badge[data-chip-count] { white-space: nowrap; }
/* M3: grouped rows (several items of one type) */
.mgr-need-group > .mgr-need-b > strong { font-size: 1.02em; }
.mgr-group { margin-top: .35rem; }
.mgr-group > summary { cursor: pointer; font-size: .9em; color: var(--accent, #2563eb); }
.mgr-group-items { margin: .4rem 0 0 .25rem; padding-left: 1rem; border-left: 2px solid var(--border, #e5e7eb); }