/* Control Room — the agency layer: client switcher, all clients, a client's page, revenue, CRM, reports, journal, the client portal.
   Built on the tokens in app.css; nothing here introduces a new colour except the agency's own brand colour in the portal. */

.main-col { min-width: 0; }

/* ------------------------------------------------------------------ client avatar and switcher */
.av.cl { border-radius: 12px; font: 700 14px/1 var(--text); letter-spacing: .02em; }
.av.cl.lg { border-radius: 16px; font-size: 20px; }
.clientbar { display: none; }
body.has-cl .clientbar, body.portal-view .clientbar { display: block; }
.clientbar { position: sticky; top: 0; z-index: 25; padding: calc(var(--safe-t) + 6px) 12px 6px; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); }
body.has-cl .view { padding-top: 6px; }
.cl-bar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 5px 12px 5px 6px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(18, 24, 32, .04); text-align: left; transition: box-shadow .15s; }
.cl-bar:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.cl-bar .av { width: 36px; height: 36px; border-radius: 11px; font-size: 13px; }
.cl-bar .av svg.i { width: 18px; height: 18px; }
.cl-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.cl-name b { font: 650 16px/1.2 var(--display); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-name small { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-bar > svg.i { color: var(--ink-3); }
.sb-switch { margin: 0 0 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.sb-switch .cl-bar, .sb-switch .sb-clients { min-width: 0; max-width: 100%; box-sizing: border-box; }
.sb-switch .cl-bar { background: var(--surface); }
.sb-clients { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.sb-clients:hover { background: var(--sunk); color: var(--ink); }
.sb-clients[aria-current="page"] { background: var(--cobalt-soft); color: var(--cobalt-ink); }
@media (min-width: 900px) { body.has-cl:not(.portal-view) .clientbar { display: none; } body.has-cl .view { padding-top: 26px; } }
/* a guest (auth.css) has a fixed banner on top: the client switcher and the page sit below it */
body.has-guestbar.has-cl .main-col { padding-top: calc(var(--safe-t) + 52px); }
body.has-guestbar.has-cl .clientbar { top: calc(var(--safe-t) + 52px); padding-top: 6px; }
body.has-guestbar.has-cl .view { padding-top: 6px; }
@media (min-width: 900px) { body.has-guestbar.has-cl .main-col { padding-top: 0; } body.has-guestbar.has-cl .view { padding-top: 76px; } }
.sb-cl-list a { cursor: pointer; }
.sb-cl-list .av.cl.xs { width: 24px; height: 24px; border-radius: 7px; font-size: 9.5px; }
body.at-clients .sb-agents, body.at-clients .sb-group:not(.sb-cl-group), body.at-clients .sb-nav:not(.sb-cl-list) > a:not([href="#/settings"]):not(.sb-clients), body.at-clients .sb-foot [data-act="new-task"] { display: none; }
body.at-clients .tabbar .badge { display: none; }
.cl-row .tick { color: var(--cobalt); visibility: hidden; }
.cl-row[aria-current="true"] .tick { visibility: visible; }
.cl-row .badge { margin-left: auto; }

/* ------------------------------------------------------------------ all clients */
.clients { max-width: 1100px; }
.tiles-cl { margin-bottom: 4px; }
@media (min-width: 1100px) { .tiles-cl { grid-template-columns: repeat(6, 1fr); } }
.tiles-cl b small { display: block; margin: 2px 0 0; font: 500 12px var(--text); }
.cl-grid { display: grid; gap: 12px; }
@media (min-width: 900px) { .cl-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; } }
.cl-card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; }
.cl-main { display: block; width: 100%; text-align: left; padding: 16px 16px 12px; }
.cl-main:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.cl-head { display: flex; align-items: center; gap: 12px; }
.cl-head .body { flex: 1; min-width: 0; }
.cl-head h3 { margin: 0; font: 650 19px/1.2 var(--display); letter-spacing: -.01em; }
.cl-head p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-3); }
.wait { flex: none; align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--amber-soft); color: var(--amber-ink); box-shadow: inset 0 0 0 1px var(--amber-edge); font-size: 13px; font-weight: 700; }
.wait.zero { background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.cl-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 10px; }
.cl-nums b { display: block; font: 700 24px/1.05 var(--display); letter-spacing: -.02em; }
.cl-nums span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.2; color: var(--ink-3); }
.cl-line { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.cl-line b { color: var(--ink); }
.cl-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; margin-top: auto; }
.tag.warm.q { vertical-align: 1px; }
.warn-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border-radius: var(--r-row); background: var(--amber-soft); color: var(--amber-ink); font-size: 14.5px; line-height: 1.4; }
.warn-note b { display: block; color: var(--ink); }
.warn-note svg.i { margin-top: 1px; }

/* ------------------------------------------------------------------ client page, team and access, brand */
.link-box { display: grid; gap: 8px; margin-top: 16px; padding: 14px; border-radius: var(--r-row); background: var(--moss-soft); }
.link-box b { color: var(--moss); }
.link-box span, .link-box small { font-size: 14px; color: var(--ink-2); }
.link-box code { display: block; padding: 10px 12px; border-radius: 10px; background: var(--surface); font: 500 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; user-select: all; }
.rolecards { display: grid; gap: 10px; }
@media (min-width: 900px) { .rolecards { grid-template-columns: repeat(3, 1fr); } }
.rolecard { background: var(--surface); border-radius: var(--r-group); padding: 14px 16px; }
.rolecard p { margin: 8px 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.brand-band { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r-group); background: var(--b); color: #fff; }
.brand-band b { font-size: 17px; letter-spacing: -.01em; }
.brand-band .r { margin-left: auto; text-align: right; font-size: 13.5px; opacity: .92; line-height: 1.3; }
.brand-band img, .brand-band .mark { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: rgba(255, 255, 255, .2); flex: none; }
.brand-band .mark { display: grid; place-items: center; font: 700 18px Georgia, serif; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sw { width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); position: relative; }
.sw[aria-checked="true"]::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2.5px solid var(--ink); }
.form-row.stack .swatches { padding-top: 2px; }
.demo-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--amber-soft); color: var(--amber-ink); font-size: 14px; line-height: 1.4; }
.demo-note b { display: block; font-size: 14.5px; }
.demo-note code, .form-row code { font: 500 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; background: color-mix(in srgb, currentColor 10%, transparent); padding: 1px 5px; border-radius: 5px; }

/* ------------------------------------------------------------------ revenue */
.rev-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.rev-hero > div { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border-radius: var(--r-group); padding: 16px 16px 14px; }
.rev-hero span { font-size: 13px; color: var(--ink-3); }
.rev-hero b { font: 700 38px/1 var(--display); letter-spacing: -.03em; }
.rev-hero small { font-size: 13px; color: var(--ink-3); }
.rev-hero > div:first-child b { color: var(--moss); }
@media (max-width: 420px) { .rev-hero b { font-size: 30px; } }
.rev-steps { display: grid; gap: 8px; margin-top: 12px; background: var(--surface); border-radius: var(--r-group); padding: 14px 16px; }
.rev-steps div { display: grid; grid-template-columns: 112px 1fr 34px; gap: 10px; align-items: center; font-size: 14px; position: relative; }
.rev-steps span { color: var(--ink-2); }
.rev-steps i { display: block; height: 12px; border-radius: 6px; background: var(--cobalt); opacity: .35; }
.rev-steps div:nth-child(2) i { opacity: .6; }
.rev-steps div:nth-child(3) i { background: var(--moss); opacity: 1; }
.rev-steps b { text-align: right; font-weight: 650; }
.rev-steps small { grid-column: 2 / 4; margin-top: -4px; font-size: 12px; color: var(--ink-3); }
.rev-steps small:empty { display: none; }
.fc-big { font: 700 34px/1 var(--display); letter-spacing: -.03em; }
.form-row > b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------------ reports, journal */
.rp-frame { display: block; width: 100%; height: min(62dvh, 640px); border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.row.rp .btn { flex: none; }
.jr .t { align-items: baseline; }
.jr-diff { margin-top: 6px; }
.jr-diff summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--cobalt-ink); list-style: none; }
.jr-diff summary::-webkit-details-marker { display: none; }
.jr-cols { display: grid; gap: 8px; margin-top: 8px; }
@media (min-width: 700px) { .jr-cols { grid-template-columns: 1fr 1fr; } }
.jr-cols > div { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.jr-cols b { font-size: 12px; color: var(--ink-3); }
.jr-cols p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.day-h { margin: 22px 4px 8px; font-size: 14.5px; font-weight: 650; color: var(--ink-2); }
.form-row .switch { margin-left: auto; }

/* ------------------------------------------------------------------ the client portal: the agency's colour on top of the same system */
body.portal-view {
  --cobalt: var(--brand, #2457E6);
  --cobalt-ink: color-mix(in srgb, var(--brand, #2457E6) 72%, var(--ink));
  --cobalt-soft: color-mix(in srgb, var(--brand, #2457E6) 13%, var(--surface));
  --on-accent: var(--on-accent-p, #fff);
}
.bmark { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; background: var(--cobalt); color: var(--on-accent); flex: none; display: inline-grid; place-items: center; font: 700 17px/1 Georgia, "Iowan Old Style", serif; }
img.bmark { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: 3px; }
.bmark.lg { width: 44px; height: 44px; font-size: 20px; }
.sb-head.p { gap: 12px; }
.sb-head.p b { font: 650 16px/1.2 var(--display); margin-bottom: 1px; }
.p-top { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.p-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.p-who b { font: 650 16px/1.2 var(--display); }
.p-who small { font-size: 12.5px; color: var(--ink-3); }
.pv-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--amber-soft); color: var(--amber-ink); font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--amber-edge); }
.pv-banner span { flex: 1; }
.portal-page { max-width: 1040px; }
body.portal-view .view { max-width: 1160px; }
.p-stats { max-width: 560px; }
.p-need { display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; padding: 14px 16px; border-radius: var(--r-card); background: var(--amber-soft); box-shadow: inset 0 0 0 1px var(--amber-edge); }
.p-need .body { flex: 1; min-width: 0; }
.p-need b { display: block; font-size: 16px; }
.p-need .body span { font-size: 13.5px; color: var(--amber-ink); display: block; margin-top: 1px; }
.p-need .btn { flex: none; }
.stat.ready.on::before { background: var(--moss); }
body.portal-view .qcard .q-act .btn.approve { background: var(--moss); color: #fff; }
.join-band { display: flex; align-items: center; gap: 12px; margin: 5vh 0 22px; }
.join-band b { font: 650 22px/1.2 var(--display); letter-spacing: -.01em; }
.join-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.join-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-2); }
.join-list li svg.i { margin-top: 2px; flex: none; }
.join-list .yes svg.i { color: var(--moss); }
.join-list .no svg.i { color: var(--ink-3); }
body.join-page { --cobalt: var(--brand, #2457E6); --cobalt-ink: color-mix(in srgb, var(--brand, #2457E6) 72%, var(--ink)); --cobalt-soft: color-mix(in srgb, var(--brand, #2457E6) 13%, var(--surface)); --on-accent: var(--on-accent-p, #fff); }
body.portal-view .conn, body.portal-view #t-conn { display: none; }

/* ------------------------------------------------------------------ the assistant's view: the owner's controls are not offered */
body.role-assistant [data-act="team-start"], body.role-assistant [data-act="stop-all"], body.role-assistant [data-act="start"], body.role-assistant [data-act="stop"],
body.role-assistant [data-act="pause"], body.role-assistant [data-act="resume"], body.role-assistant [data-act="mode"], body.role-assistant .mode-card, body.role-assistant .hero-actions .btn.primary,
body.role-assistant #limits, body.role-assistant a.spend-line, body.role-assistant [data-camp], body.role-assistant [data-act="new-task"] { display: none !important; }

@media (min-width: 900px) { .p-top { display: none; } .clientbar { padding-top: 14px; } body.portal-view .view { padding-top: 22px; } }
@media print { .clientbar, .sidebar, .tabbar, .toasts { display: none !important; } }

.crm-row { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.crm-row .lbl { flex: 1 1 200px; min-width: 0; }
.crm-row > .btn, .crm-row > .plan-tag { margin-left: 48px; }
@media (min-width: 560px) { .crm-row > .btn, .crm-row > .plan-tag { margin-left: 0; } }
.p-stats .stat b { font-size: 26px; }
@media (min-width: 900px) { .p-stats .stat b { font-size: 34px; } }