/* Manager pages · visual consistency with the campus case logs (PREVIEW Oct 28 2026).
   Display only: no markup, content or behavior changes. Loaded last on the 5 manager pages.
   - Header title uses the same type as the case-log header in each theme
     (Maroon: Playfair Display · Enterprise: Source Sans 3 · Classic: Outfit).
   - The campus building photo sits on the RIGHT of the header band, like the case-log v2 header:
     whole building, anchored right, soft fade to the left, never upscaled. Opt-in: add class
     "mgr-photo-top" to .cm-top and set background-image + --campus-photo-ar on its ::before.
   - The little gold stripe above the eyebrow is untouched. */

/* ---------- header type: same as the case-log .top ---------- */
body.cm-page .cm-top h1 {
  font-family: "Playfair Display", "Libre Caslon Text", Georgia, "Times New Roman", serif !important;
  font-weight: 600 !important; letter-spacing: -.01em !important;
  font-size: clamp(30px, 3.2vw, 40.96px) !important; line-height: 1.08 !important;
  margin: 6px 0 0 !important;
}
html[data-theme="enterprise"] body.cm-page .cm-top h1 {
  font-family: "Source Sans 3", Lato, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 700 !important; letter-spacing: -.005em !important;
}
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) body.cm-page .cm-top h1 {
  font-family: Outfit, "Source Sans 3", system-ui, sans-serif !important;
  font-weight: 600 !important; letter-spacing: -.005em !important; font-size: clamp(28px, 2.8vw, 36px) !important;
}
body.cm-page .cm-top .sub { margin-top: 8px; }
/* Classic: band starts at the very top like Maroon/Enterprise (no thin strip of page above it) */
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) body.cm-page .cm-wrap { padding-top: 0 !important; }

/* Classic band: deeper dusk so it sits with the case-log canvas (stripe + gold rule unchanged) */
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) body.cm-page .cm-top {
  background:
    radial-gradient(900px 320px at 85% -40%, rgba(232,121,249,.16), transparent 60%),
    linear-gradient(120deg, #1c0636 0%, #2a0a4a 42%, #3d1068 78%, #4c1680 100%) !important;
}

/* ---------- campus photo on the right of the band ---------- */
body.cm-page .cm-top.mgr-photo-top { position: relative; isolation: isolate; min-height: 176px; box-sizing: border-box; align-content: center; }
body.cm-page .cm-top.mgr-photo-top > .top-actions { align-self: start; }
body.cm-page .cm-top.mgr-photo-top > * { position: relative; z-index: 1; }
body.cm-page .cm-top.mgr-photo-top::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 0; bottom: 0; right: 0; left: auto; height: 100%; width: auto;
  aspect-ratio: var(--campus-photo-ar, 1.5);
  max-width: 50%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: luminosity;
  opacity: .34;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 24%, #000 50%), linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.45) 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 24%, #000 50%), linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.45) 100%);
          mask-composite: intersect;
}
html[data-theme="enterprise"] body.cm-page .cm-top.mgr-photo-top::before { opacity: .36; }
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) body.cm-page .cm-top.mgr-photo-top::before {
  opacity: .32;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 24%, #000 50%), linear-gradient(180deg, rgba(0,0,0,.6) 0%, #000 22%, #000 78%, rgba(0,0,0,.35) 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 24%, #000 50%), linear-gradient(180deg, rgba(0,0,0,.6) 0%, #000 22%, #000 78%, rgba(0,0,0,.35) 100%);
}

/* ---------- who did what: same table feel as the case-log tables ---------- */
/* Theme "body th" paint gave the name column a tinted block and a short rule; keep it for the header row only. */
html body.cm-page .cmx-table tbody th { background: transparent !important; border-bottom: 0 !important; }
html body.cm-page .cmx-table tfoot th { background: transparent !important; }  /* total line kept as is */
html body.cm-page .cmx-table tbody th.cmx-n { color: var(--sl-ink) !important; }
html body.cm-page .cmx-table tfoot th.cmx-n { color: var(--sl-gold) !important; }
html body.cm-page .cmx-table tr.cmx-row > td { border-bottom: 0 !important; background: transparent !important; }
/* disabled "Save note": quiet ghost instead of a washed-out primary */
html body.cm-page .sl .cmx-btn-p[disabled] {
  opacity: 1; color: var(--sl-soft); background: var(--sl-well); border: 1px solid var(--sl-line); box-shadow: none;
}

/* ---------- phone: building stays on the right, below the buttons, beside the title ---------- */
@media (max-width: 640px) {
  body.cm-page .cm-top.mgr-photo-top { min-height: 0; }
  body.cm-page .cm-top.mgr-photo-top::before {
    top: auto; bottom: 0; height: 96px; max-width: 40%;
    background-size: contain; background-position: right bottom;
    opacity: .3;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 30%, #000 55%), linear-gradient(180deg, transparent 0%, #000 30%, #000 82%, rgba(0,0,0,.5) 100%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 30%, #000 55%), linear-gradient(180deg, transparent 0%, #000 30%, #000 82%, rgba(0,0,0,.5) 100%);
  }
  html[data-theme="enterprise"] body.cm-page .cm-top.mgr-photo-top::before { opacity: .32; }
  html:not([data-theme="maroon"]):not([data-theme="enterprise"]) body.cm-page .cm-top.mgr-photo-top::before { opacity: .28; }
  body.cm-page .cm-top h1 { font-size: 30px !important; }
  /* Coming-soon pages carry a full-width sub line: tuck the building below the copy, still on the right */
  body.cm-page .cm-top.mgr-photo-top:has(.sub),
  html:not([data-theme="maroon"]):not([data-theme="enterprise"]) body.cm-page .cm-top.mgr-photo-top:has(.sub) { padding-bottom: 92px !important; }
  body.cm-page .cm-top.mgr-photo-top:has(.sub)::before,
  html:not([data-theme="maroon"]):not([data-theme="enterprise"]) body.cm-page .cm-top.mgr-photo-top:has(.sub)::before { height: 86px; max-width: 64%; bottom: 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 26%, #000 50%), linear-gradient(180deg, transparent 0%, #000 26%, #000 84%, rgba(0,0,0,.5) 100%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 26%, #000 50%), linear-gradient(180deg, transparent 0%, #000 26%, #000 84%, rgba(0,0,0,.5) 100%); }
}