#managerReport {
  --mr-bg: #091119; --mr-surface: #111f29; --mr-text: #f1f5f9; --mr-muted: #adbecb;
  --mr-line: #304553; --mr-accent: #42beed; --mr-tint: #173747; --mr-error: #ffb4ab;
  position: fixed !important; inset: 0 !important; z-index: 100000 !important;
  width: 100% !important; height: 100dvh !important; max-width: none !important; max-height: none !important;
  overflow: auto !important; overscroll-behavior: contain; margin: 0 !important;
  background: var(--mr-bg) !important; color: var(--mr-text) !important;
  font: 400 15px/1.5 Arial, sans-serif !important; text-align: left !important; border: 0 !important; border-radius: 0 !important;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) !important;
  color-scheme: dark;
}
html[data-theme="light"] #managerReport {
  --mr-bg: #f7f9fc; --mr-surface: #fff; --mr-text: #17232e; --mr-muted: #506575;
  --mr-line: #d2dde6; --mr-accent: #095ba6; --mr-tint: #e8f2fb; --mr-error: #b32225;
  color-scheme: light;
}
html[data-visual-theme="pink"] #managerReport { --mr-bg: #fff8fb; --mr-tint: #fce9f1; --mr-accent: #98244f; --mr-line: #e5ced7; }
html[data-visual-theme="lilac"] #managerReport { --mr-bg: #fbf9ff; --mr-tint: #f0eafa; --mr-accent: #674195; --mr-line: #ddd2ed; }
html #managerReport *, html #managerReport *::before, html #managerReport *::after { box-sizing: border-box; letter-spacing: 0 !important; -webkit-text-fill-color: currentColor !important; }
html #managerReport [hidden][hidden], html #managerReport[hidden] { display: none !important; }
html #managerReport :is(h1,h2,h3,p,ol,ul,fieldset,legend) { margin: 0; padding: 0; background: none !important; color: inherit !important; box-shadow: none !important; border: 0; }
html #managerReport h1 { font-size: 24px !important; line-height: 1.25 !important; font-weight: 750 !important; }
html #managerReport h2 { font-size: 18px !important; line-height: 1.35 !important; font-weight: 700 !important; margin: 0 0 16px; }
html #managerReport h3 { font-size: 13px !important; font-weight: 600 !important; }
html #managerReport :is(p,small) { color: var(--mr-muted) !important; }
html #managerReport small { display: block; font-size: 12px !important; line-height: 1.4 !important; }
html #managerReport :is(strong,span,label,legend) { color: inherit; background: none !important; box-shadow: none !important; }
html #managerReport strong { font-weight: 700; }
html #managerReport :is(button,input,select,textarea) {
  font: inherit !important; color: var(--mr-text) !important; background: var(--mr-surface) !important;
  border: 1px solid var(--mr-line) !important; border-radius: 6px !important; box-shadow: none !important;
  text-transform: none !important; text-shadow: none !important; margin: 0; min-width: 0;
}
html #managerReport button {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 14px !important; width: auto; height: auto; cursor: pointer;
  font-size: 14px !important; font-weight: 650 !important; line-height: 1.3 !important;
  position: static; transform: none !important; white-space: normal; flex-shrink: 0;
}
html #managerReport button::before, html #managerReport button::after { content: none !important; }
html #managerReport button:hover:not(:disabled) { border-color: var(--mr-accent) !important; background: var(--mr-tint) !important; }
html #managerReport button:disabled { opacity: .55 !important; cursor: default; }
html #managerReport :focus-visible { outline: 3px solid var(--mr-accent) !important; outline-offset: 3px; }
html #managerReport button.mr-primary { background: var(--mr-accent) !important; color: #fff !important; border-color: var(--mr-accent) !important; }
html[data-theme="light"] #managerReport button.mr-primary:hover:not(:disabled) { background: var(--mr-accent) !important; color: #fff !important; border-color: var(--mr-accent) !important; }
html:not([data-theme="light"]) #managerReport button.mr-primary { color: #091119 !important; }
html #managerReport button > :is(span,i), html #managerReport button svg { background: transparent !important; color: inherit !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html #managerReport [data-lucide-icon], html #managerReport svg { width: 20px !important; height: 20px !important; flex: 0 0 20px; display: inline-block; vertical-align: middle; }
html #managerReport .mr-icon { width: 44px; height: 44px; padding: 10px !important; }
html #managerReport .mr-header { display: flex; align-items: center; gap: 16px; padding: 20px max(20px, calc((100% - 1180px) / 2)); background: var(--mr-surface) !important; border-bottom: 1px solid var(--mr-line); }
html #managerReport .mr-header > div { flex: 1; min-width: 0; }
html #managerReport .mr-brand { display: block; width: 108px; margin-right: 12px; }
html #managerReport .mr-brand img { width: 108px; height: 39px; object-fit: contain; }
html #managerReport .mr-logo-light { display: none; }
html[data-theme="light"] #managerReport .mr-logo-dark { display: none; }
html[data-theme="light"] #managerReport .mr-logo-light { display: block; }
html #managerReport .mr-header p { font-size: 13px; margin-top: 3px; }
html #managerReport .mr-content { max-width: 1180px; padding: 24px 20px; margin: 0 auto; }
html #managerReport .mr-loading { padding: 80px 24px; text-align: center; color: var(--mr-muted); }
html #managerReport .mr-filters { display: flex; align-items: end; gap: 12px; margin-bottom: 24px; }
html #managerReport :is(.mr-filters,.mr-inbox-filter) label { display: grid; gap: 6px; font-size: 12px; font-weight: 650; min-width: 0; flex: 1; max-width: 420px; }
html #managerReport :is(input[type="search"],select,textarea) { width: 100%; padding: 10px 12px !important; min-height: 44px; }
html #managerReport select { appearance: auto !important; }
html #managerReport textarea { resize: vertical; min-height: 98px; line-height: 1.5 !important; }
html #managerReport .mr-status { display: inline-block; border: 1px solid var(--mr-line); border-radius: 6px; padding: 5px 9px; font-size: 12px; font-weight: 650; white-space: nowrap; background: var(--mr-tint) !important; color: var(--mr-text) !important; }
html #managerReport [data-status="reviewed"].mr-status { color: #147d51 !important; background: #e2f7ed !important; }
html #managerReport [data-status="changes_requested"].mr-status { color: #8b5400 !important; background: #fff0ca !important; }
html #managerReport .mr-tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--mr-line); padding-bottom: 12px; }
html #managerReport .mr-tabs [aria-selected="true"] { color: var(--mr-accent) !important; background: var(--mr-tint) !important; border-color: var(--mr-accent) !important; }
html #managerReport .mr-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 32px; }
html #managerReport .mr-metric { padding: 18px; border: 1px solid var(--mr-line); border-radius: 8px; background: var(--mr-surface) !important; min-width: 0; }
html #managerReport .mr-metric > [data-lucide-icon] { color: var(--mr-accent) !important; margin-bottom: 10px; }
html #managerReport .mr-metric > strong { display: block; font-size: 26px; line-height: 1.2; margin: 6px 0; overflow-wrap: anywhere; }
html #managerReport .mr-overview-columns { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; }
html #managerReport .mr-items, html #managerReport .mr-attendance, html #managerReport .mr-missing ul { list-style: none; }
html #managerReport .mr-items li { display: flex; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--mr-line); }
html #managerReport .mr-items li > div:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; }
html #managerReport .mr-rank { color: var(--mr-muted) !important; font-size: 13px; width: 18px; flex-shrink: 0; }
html #managerReport .mr-item-value { text-align: right; flex-shrink: 0; }
html #managerReport :is(.mr-attendance li,.mr-missing li) { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--mr-line); }
html #managerReport .mr-attendance span { color: var(--mr-muted) !important; font-size: 13px; }
html #managerReport .mr-shortcuts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
html #managerReport .mr-captured { font-size: 12px; margin-top: 24px; }
html #managerReport :is(.mr-warning,.mr-review-note,.mr-message) { border-left: 3px solid var(--mr-accent); background: var(--mr-tint) !important; color: var(--mr-text) !important; padding: 14px 18px; margin-bottom: 20px; }
html #managerReport .mr-warning button { margin: 8px 0 0 12px; }
html #managerReport .mr-message { border-color: var(--mr-error); color: var(--mr-error) !important; }
html #managerReport .mr-form { max-width: 860px; margin: 0; }
html #managerReport .mr-form-fields { display: block; min-width: 0; opacity: 1 !important; }
html #managerReport .mr-form-fields > section { padding: 12px 0 24px; margin-bottom: 24px; border-bottom: 1px solid var(--mr-line); }
html #managerReport .mr-field { display: grid; gap: 8px; min-width: 0; margin-bottom: 24px; font-weight: 600; }
html #managerReport .mr-field legend { float: none; margin-bottom: 8px; font-weight: 600; }
html #managerReport .mr-options { display: flex; flex-wrap: wrap; gap: 8px 20px; }
html #managerReport .mr-options label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 400; cursor: pointer; }
html #managerReport .mr-options input { appearance: auto !important; width: 18px !important; height: 18px !important; min-height: 18px !important; padding: 0 !important; accent-color: var(--mr-accent); flex-shrink: 0; }
html #managerReport .mr-field-error { color: var(--mr-error) !important; font-weight: 400; }
html #managerReport [aria-invalid="true"] { border-color: var(--mr-error) !important; }
html #managerReport .mr-footer { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: end; gap: 12px; border-top: 1px solid var(--mr-line); background: var(--mr-bg) !important; padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px)); margin-top: 24px; z-index: 1; }
html #managerReport .mr-footer > span:first-child { margin-right: auto; color: var(--mr-muted) !important; font-size: 12px; }
html #managerReport .mr-inbox-summary { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
html #managerReport .mr-inbox-filter { display: flex; gap: 12px; margin-bottom: 20px; }
html #managerReport button.mr-report-row { display: grid !important; grid-template-columns: 1fr auto 180px 20px; text-align: left; width: 100%; border-radius: 0 !important; border-width: 0 0 1px !important; padding: 18px 0 !important; background: transparent !important; gap: 20px; }
html #managerReport .mr-report-row div { display: grid; gap: 4px; }
html #managerReport .mr-report-row div span { font-size: 13px; font-weight: 400; }
html #managerReport .mr-missing { margin-top: 24px; border-top: 1px solid var(--mr-line); padding-top: 20px; }
html #managerReport summary { cursor: pointer; padding: 8px 0; }
html #managerReport .mr-review { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--mr-line); }
html #managerReport .mr-review label { display: grid; gap: 8px; }
html #managerReport .mr-review > div { display: flex; justify-content: end; gap: 12px; margin-top: 16px; }
html #managerReport .mr-sales-detail h2 { margin: 24px 0 8px; }
html #managerReport table { border-collapse: collapse; width: 100%; margin-top: 20px; color: inherit !important; background: none !important; }
html #managerReport :is(th,td) { text-align: left; padding: 14px; border-bottom: 1px solid var(--mr-line); color: inherit !important; background: none !important; }
html #managerReport :is(th,td):last-child { text-align: right; }
@media (max-width: 700px) {
  html #managerReport .mr-header { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  html #managerReport .mr-brand { display: none; }
  html #managerReport .mr-header > .mr-status { margin-left: 56px; }
  html #managerReport h1 { font-size: 21px !important; }
  html #managerReport .mr-content { padding: 20px 16px; }
  html #managerReport .mr-filters { display: grid; grid-template-columns: minmax(0,1fr) 44px; }
  html #managerReport .mr-filters label { max-width: none; }
  html #managerReport .mr-filters label:first-child { grid-column: 1 / -1; }
  html #managerReport .mr-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  html #managerReport .mr-metric { padding: 14px 12px; }
  html #managerReport .mr-metric > strong { font-size: 22px; }
  html #managerReport .mr-overview-columns { grid-template-columns: minmax(0,1fr); gap: 28px; }
  html #managerReport .mr-tabs { gap: 8px; }
  html #managerReport .mr-tabs button { flex: 1; padding: 10px 8px !important; }
  html #managerReport .mr-footer { display: grid; grid-template-columns: 1fr 1fr; bottom: -20px; gap: 10px; }
  html #managerReport .mr-footer > span { grid-column: 1 / -1; }
  html #managerReport .mr-inbox-summary { gap: 8px 20px; }
  html #managerReport .mr-inbox-filter { flex-direction: column; }
  html #managerReport button.mr-report-row { grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
  html #managerReport button.mr-report-row > small { grid-row: 2; }
  html #managerReport button.mr-report-row > svg { justify-self: end; }
  html #managerReport :is(select,textarea,input[type="search"]) { font-size: 16px !important; }
  html #managerReport .mr-items strong { font-size: 13px; }
  html #managerReport .mr-options { gap: 4px 16px; }
  html #managerReport .mr-missing li { flex-direction: column; gap: 4px; }
}

/* Desktop reports live in the dashboard content, below its shared controls. */
#managerReport[data-embedded="true"] {
  position: relative !important; inset: auto !important; z-index: auto !important;
  height: auto !important; min-height: 60vh; min-width: 0;
  overflow: visible !important; padding: 0 !important;
  border: 1px solid var(--mr-line) !important; border-radius: 20px !important;
}
#managerReport[data-embedded="true"] .mr-brand { display: none !important; }
#managerReport[hidden] { display: none !important; }

/* Weekly report document and editable goals. */
#managerReport .mr-goals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
#managerReport .mr-goals input { width:100%; min-width:0; box-sizing:border-box; }
#managerReport .mr-document { max-width:1100px; margin:auto; line-height:1.6; }
#managerReport .mr-document section { padding:22px 0; border-bottom:1px solid var(--mr-line); }
html #managerReport .mr-document h3 { font-size:14px; margin:16px 0 6px; }
#managerReport .mr-document p { white-space:pre-wrap; overflow-wrap:anywhere; }
#managerReport .mr-table-wrap { overflow-x:auto; margin:16px 0; }
#managerReport .mr-table-wrap table { width:100%; border-collapse:collapse; }
#managerReport .mr-table-wrap th, #managerReport .mr-table-wrap td { padding:12px; text-align:right; border-bottom:1px solid var(--mr-line); white-space:nowrap; }
#managerReport .mr-table-wrap th:first-child, #managerReport .mr-table-wrap td:first-child { text-align:left; }
@media(max-width:600px) { #managerReport .mr-goals { grid-template-columns:1fr; } }
html #managerReport .mr-goal-results { grid-template-columns:repeat(3,minmax(0,1fr)); margin:12px 0 20px; }
html #managerReport .mr-positive { color:#168348 !important; }
html #managerReport .mr-negative { color:var(--mr-error) !important; }
html:not([data-theme="light"]) #managerReport .mr-positive { color:#51e99b !important; }
html #managerReport .mr-evidence { display:grid; gap:10px; padding:12px 0 !important; list-style:none; }
html #managerReport .mr-evidence li { border:1px solid var(--mr-line); border-radius:10px; padding:12px; background:var(--mr-surface); }
html #managerReport .mr-evidence span { display:block; margin-top:5px; }
html #managerReport .mr-case { display:grid; gap:12px; padding:16px; margin:12px 0; border:1px solid var(--mr-line); border-radius:10px; background:var(--mr-surface); }
html #managerReport .mr-case label { display:grid; gap:8px; }
html #managerReport .mr-case :is(textarea,select) { width:100%; padding:10px; }
@media(max-width:600px) { html #managerReport .mr-goal-results { grid-template-columns:1fr; } }
html #managerReport .mr-goals input { min-height:44px; padding:10px; }
html #managerReport .mr-extra-goals { margin:12px 0 24px; padding:14px; border:1px solid var(--mr-line); border-radius:10px; }
html #managerReport .mr-extra-goals summary { cursor:pointer; font-weight:600; }
html #managerReport .mr-extra-goals[open] summary { margin-bottom:16px; }
html #managerReport .mr-photos { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
html #managerReport .mr-photos figure { margin:0; }
html #managerReport .mr-photos img { display:block; width:100%; max-height:360px; object-fit:contain; border-radius:10px; margin:12px 0; }
html #managerReport input:is([type="date"],[type="number"],[name="nextWeekGoal"]) { padding:10px; min-height:44px; width:100%; }

.mr-attendance-history { margin-top: 10px; padding: 12px; border: 1px solid var(--mr-border, #8093a64d); border-radius: 10px; display: grid; gap: 6px; }
.mr-attendance-history small { opacity: .8; }
@media (min-width: 600px) { .mr-evidence li:has(.mr-attendance-history) { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; } .mr-evidence li:has(.mr-attendance-history) > strong, .mr-evidence li:has(.mr-attendance-history) > span { grid-column: 1; } .mr-attendance-history { grid-column: 2; grid-row: 1 / 3; margin-top: 0; } }

/* Submitted reports: concise reading, full details on demand. */
#managerReport .mr-reading-detail { border:1px solid var(--mr-line); border-radius:12px; margin:10px 0; overflow:hidden; }
#managerReport .mr-reading-detail > summary { cursor:pointer; padding:14px 18px; font-weight:700; }
#managerReport .mr-reading-detail > summary:focus-visible { outline:2px solid currentColor; outline-offset:-3px; }
#managerReport .mr-reading-body { padding:0 18px 18px; }
@media print { #managerReport .mr-reading-detail > .mr-reading-body { display:block !important; } }

/* Traffic report uses inherited theme tokens and scrollable tables on mobile. */
.mr-traffic{margin-block:24px}.mr-traffic-chart{padding:16px;border:1px solid currentColor;border-radius:14px;margin-block:16px}.mr-traffic-day{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;margin:12px 0}.mr-traffic-bar{display:block;height:8px;background:#2488e8;border-radius:6px;min-width:0}.mr-order-bar{background:#159767;margin-top:6px}.mr-traffic small{display:block}.mr-traffic th button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer;text-align:left;padding:8px}.mr-traffic tfoot{font-weight:700}.mr-traffic td{white-space:nowrap}
html #managerReport span.mr-traffic-bar { background:#2488e8 !important; }
html #managerReport span.mr-order-bar { background:#159767 !important; }
html #managerReport .mr-traffic th { text-transform:none; }
html #managerReport .mr-traffic th small { font-weight:400; color:var(--mr-muted); }
html #managerReport .mr-traffic > p { margin-block:12px; }

#managerReport .mr-people-separator { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--mr-line); }

/* Saved report export controls stay reachable on narrow screens. */
#managerReport .mr-detail-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}