/* Staff control MVP: components added on top of styles.css and fixes.css. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.warn-text { color: #a1402d; }
.wrap { white-space: normal; min-width: 220px; max-width: 520px; }

/* Sign-in */
.login-identity { display: grid; gap: 7px; margin-top: 22px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.login-identity select { min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: normal; text-transform: none; }

/* Navigation */
.nav-item { position: relative; }
.nav-count { margin-left: auto; min-width: 22px; padding: 2px 7px; border-radius: 999px; background: #fdecea; color: #b33b2a; font-size: 11px; text-align: center; }
.subtabs { display: flex; gap: 6px; padding: 5px; width: max-content; max-width: 100%; overflow-x: auto; border-radius: 11px; background: white; border: 1px solid var(--line); }
.subtabs button { min-height: 38px; padding: 8px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 800; white-space: nowrap; }
.subtabs button.active { background: var(--mint); color: var(--green-dark); }
.subtabs button b { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #fdecea; color: #b33b2a; font-size: 11px; }
.subtabs button b:empty { display: none; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { min-height: 32px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); font-size: 12px; font-weight: 800; }
.chip.active { border-color: var(--green); background: var(--mint); color: var(--green-dark); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.link-button { padding: 0; border: 0; background: none; color: var(--green-dark); font-weight: 750; text-align: left; text-decoration: underline; text-decoration-color: var(--mint-strong); text-underline-offset: 3px; }
.link-button:hover { text-decoration-color: var(--green); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.action-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Overview */
.overview-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.overview-side { display: grid; gap: 14px; }
.attention-list { display: grid; gap: 8px; }
.attention-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--ink); text-align: left; }
.attention-item:hover { border-color: var(--mint-strong); background: #fbfdfc; }
.attention-item.high { border-left: 4px solid #d2553f; }
.attention-item.medium { border-left: 4px solid #d79b2b; }
.attention-item span { display: grid; gap: 3px; min-width: 0; }
.attention-item small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attention-item b { color: var(--green); font-size: 12px; white-space: nowrap; }
#overview-research .mini-record { grid-template-columns: minmax(0, 1fr) auto; }
#overview-research .mini-record span { display: grid; gap: 2px; }
#overview-research .mini-record strong { color: var(--ink); font-size: 12px; }
.money-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.money-grid div { display: grid; gap: 4px; padding: 12px; border-radius: 10px; background: var(--soft); }
.money-grid span, .money-grid small { color: var(--muted); font-size: 11px; }
.money-grid strong { font-size: 20px; }

/* Health and tags */
.health-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 11px; font-weight: 800; }
.health-badge b { display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 999px; background: white; font-size: 11px; }
.health-badge.healthy { background: var(--mint); color: var(--green-dark); }
.health-badge.watch { background: var(--amber-bg); color: var(--amber); }
.health-badge.at_risk { background: #fdecea; color: #a1402d; }
.tag.open, .tag.urgent, .tag.received { background: #fdecea; color: #a1402d; }
.tag.high, .tag.pending, .tag.in_progress, .tag.confirmed, .tag.draft { background: var(--amber-bg); color: var(--amber); }
.tag.paid, .tag.resolved, .tag.published, .tag.fixed, .tag.completed { background: var(--mint); color: var(--green-dark); }
.tag.closed, .tag.void, .tag.archived, .tag.dismissed, .tag.cancelled, .tag.deleted, .tag.rejected, .tag.low { background: var(--soft); color: var(--muted); }
.tag.role { display: inline-flex; align-items: center; gap: 5px; background: var(--mint); color: var(--green-dark); }
.tag.role button { border: 0; background: transparent; color: var(--green-dark); font-size: 13px; line-height: 1; padding: 0 0 0 2px; }
.role-chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* Tables */
.clickable-rows tr[data-company], #margin-rows tr[data-company] { cursor: pointer; }
tr.highlight { background: #fff8e6; }
.status-cell .tag { margin-right: 6px; }
.table-summary .sub { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 500; }
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.matrix .yes { color: var(--green-dark); font-weight: 800; }
.matrix .no { color: #b9c7c2; }
.stacked-panels { display: grid; gap: 14px; }
.two-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.customer-filters { grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(140px, .6fr)); }
.audit-filters { grid-template-columns: repeat(3, minmax(160px, 1fr)); }

/* Research quality cards */
.card-list { display: grid; gap: 12px; }
.quality-card, .announcement-card { display: grid; gap: 10px; }
.quality-card header, .announcement-card header { display: flex; justify-content: space-between; gap: 12px; align-items: start; flex-wrap: wrap; }
.quality-card header div, .announcement-card header div { display: grid; gap: 3px; }
.quality-card header small, .announcement-card header small { color: var(--muted); font-size: 12px; }
.quality-card header > span { display: flex; flex-wrap: wrap; gap: 5px; }
.quality-card p, .announcement-card p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.55; }
.quality-card footer { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.quality-card .resolution { padding: 9px 11px; border-radius: 9px; background: var(--soft); color: var(--ink); }
.announcement-card.archived { opacity: .7; }
.placeholder-panel { border-style: dashed; background: var(--soft); }
.placeholder-panel h3 { margin: 0 0 6px; }
.placeholder-panel p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* Support */
.support-layout { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 14px; align-items: start; }
.ticket-list-panel { display: grid; gap: 12px; padding: 14px; }
.ticket-list { display: grid; gap: 6px; max-height: calc(100vh - 290px); overflow: auto; }
.ticket-item { display: grid; gap: 5px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); text-align: left; }
.ticket-item:hover { background: #fbfdfc; }
.ticket-item.active { border-color: var(--green); background: var(--mint); }
.ticket-top { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.ticket-top strong { font-size: 13px; }
.ticket-item > small { color: var(--muted); font-size: 12px; }
.ticket-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 11px; }
.ticket-meta .waiting { color: #a1402d; font-weight: 800; }
.ticket-detail { display: grid; gap: 16px; }
.ticket-header h3 { margin: 4px 0 6px; font-size: 21px; }
.ticket-header p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.linked-search { padding: 9px 11px; border-radius: 9px; background: var(--soft); }
.ticket-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ticket-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ticket-actions .text-button.danger { margin-left: auto; }
.ticket-controls label, .modal-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ticket-controls select, .modal-form input, .modal-form select, .modal-form textarea, .reply-form textarea, .note-form textarea {
  width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: normal; text-transform: none;
}
.modal-form textarea, .reply-form textarea, .note-form textarea { resize: vertical; line-height: 1.5; font-weight: 500; }
.thread { display: grid; gap: 10px; }
.message { max-width: 86%; padding: 12px 14px; border-radius: 12px; background: var(--soft); }
.message.staff { justify-self: end; background: var(--mint); }
.message.internal { justify-self: end; border: 1px dashed #d7b56d; background: var(--amber-bg); }
.message header { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.message header strong { color: var(--ink); }
.message p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.reply-form { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.reply-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.reply-actions .muted { margin-right: auto; font-size: 12px; }

/* Growth charts */
.bar-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 6px; height: 170px; padding-top: 10px; }
.bar { display: grid; justify-items: center; align-content: end; gap: 4px; height: 100%; }
.bar i { display: block; width: 70%; max-width: 26px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #2fb383, var(--green)); }
.bar b { order: -1; color: var(--ink); font-size: 11px; }
.bar small { color: var(--muted); font-size: 10px; white-space: nowrap; }
.funnel { display: grid; gap: 10px; }
.funnel-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 30px; align-items: center; gap: 10px; font-size: 13px; }
.funnel-bar { height: 12px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.funnel-bar i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.funnel-row b { text-align: right; }

/* Customer drawer */
.customer-drawer { width: min(720px, 96vw); }
.drawer-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.drawer-tabs { display: flex; overflow-x: auto; }
.drawer-tabs button { flex: 1 0 auto; white-space: nowrap; }
.detail-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-card strong { font-size: 15px; }
.health-card { display: grid; gap: 8px; padding: 16px; border-radius: 12px; background: var(--soft); }
.health-card h3 { margin: 0; }
.health-card p { margin: 2px 0 0; }
.health-card ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.health-card.healthy { background: var(--mint); }
.health-card.watch { background: var(--amber-bg); }
.health-card.at_risk { background: #fdecea; }
.checklist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.checklist li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.checklist li i { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--line); border-radius: 50%; color: white; font-size: 12px; font-style: normal; font-weight: 800; }
.checklist li.done { color: var(--ink); }
.checklist li.done i { border-color: var(--green); background: var(--green); }
.note-card { display: grid; gap: 6px; margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.note-card.pinned { border-color: #e7cf98; background: #fffaf0; }
.note-card p { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.note-card footer { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.checkbox-label { display: flex !important; align-items: center; gap: 8px; text-transform: none !important; letter-spacing: normal !important; font-size: 13px !important; }
.checkbox-label input { width: 18px !important; min-height: 18px !important; }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.switch-row span { display: grid; gap: 3px; }
.switch-row strong { text-transform: capitalize; }
.switch-row small { color: var(--muted); }
.switch-row input { width: 22px; height: 22px; accent-color: var(--green); }
/* A switch inside an edit form (Admin → Settings → Customer sign-up). */
.account-edit-form .switch-row { display: flex; color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: normal; text-transform: none; }
.account-edit-form .switch-row strong { text-transform: none; }
.account-edit-form .switch-row small { font-weight: 500; }
.account-edit-form .switch-row input { flex: 0 0 22px; width: 22px; min-height: 0; padding: 0; }
.record-button { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.record-button span { display: flex; gap: 5px; }

/* Modal */
.modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 24px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: white; box-shadow: var(--shadow); overflow: auto; }
.modal::backdrop { background: rgba(9, 39, 31, .35); }
.modal-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.modal-heading h2 { margin: 0; font-size: 21px; }
.modal-heading button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 22px; }
.modal-form { display: grid; gap: 14px; }
.modal-form .form-note, #modal-content > .form-note { margin-bottom: 4px; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.customer-preview { display: grid; gap: 10px; margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #f7faf8; }
.customer-preview header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.customer-preview header div { display: grid; gap: 3px; }
.customer-preview header small { color: var(--muted); }
.customer-preview h4 { margin: 8px 0 0; font-size: 13px; }
.preview-balance { text-align: right; }
.preview-balance span { color: var(--muted); font-size: 11px; }
.preview-balance b { font-size: 22px; }
.preview-banner { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--mint); color: var(--green-dark); font-size: 13px; }

@media (max-width: 1100px) {
  .overview-layout, .two-panels, .support-layout { grid-template-columns: minmax(0, 1fr); }
  .ticket-list { max-height: 360px; }
  .customer-filters, .audit-filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .ticket-controls, .two-fields, .detail-grid.three, .customer-filters, .audit-filters { grid-template-columns: minmax(0, 1fr); }
  .funnel-row { grid-template-columns: 120px minmax(0, 1fr) 26px; }
  .row-actions { justify-content: flex-start; }
  .message { max-width: 100%; }
}

/* Eight tabs: keep the environment card below the navigation instead of over it. */
@media (min-width: 761px) {
  .sidebar { display: flex; flex-direction: column; overflow-y: auto; }
  .sidebar nav { gap: 4px; }
  .environment-card { position: static; margin-top: auto; }
}
.page > * { min-width: 0; }
.overview-side .mini-panel { min-height: 0; }
#admin-content { display: grid; gap: 14px; }
@media (max-width: 760px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar, .topbar, main { min-width: 0; }
  .sidebar nav { overflow-x: auto; }
  .top-actions { gap: 8px; }
  .customer-drawer { width: 100vw; padding: 20px; }
  .drawer-heading { flex-wrap: wrap; }
  .page-heading { flex-wrap: wrap; }
  .support-layout .ticket-detail { padding: 16px; }
}
#admin-content > *, .two-panels > *, .stacked-panels > *, .overview-layout > *, .support-layout > * { min-width: 0; }
.table-summary { flex-wrap: wrap; }
.page.active { grid-template-columns: minmax(0, 1fr); }

.ticket-topic { margin: 6px 0 0 !important; }
.tag.topic { background: #eeedfe; color: #3c3489; }

/* Staff tools: status strip, live health, search drill-down, plans, controls, support extras. */
.status-strip { display: grid; gap: 4px; margin: -8px 0 18px; padding: 12px 16px; border: 1px solid #f1c2b8; border-radius: 12px; background: #fdecea; color: #7a2e20; font-size: 13px; }
.heading-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.health-row .health-ok, .health-row .health-warn, .health-row .health-fail, .health-row .health-unknown { display: inline-flex; align-items: center; gap: 6px; max-width: 60%; text-align: right; }
.health-dot.ok { background: #19a873; }
.health-dot.warn { background: #d79b2b; }
.health-dot.fail { background: #d2553f; }
.health-dot.unknown { background: #b9c7c2; }
.health-warn { color: var(--amber); }
.health-fail { color: #a1402d; }
.health-checked { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.strong-link { display: block; font-size: 13px; font-weight: 800; text-decoration: none; color: var(--ink); }
.strong-link:hover { color: var(--green-dark); text-decoration: underline; }
.modal.wide { width: min(960px, calc(100vw - 32px)); }
.search-detail { display: grid; gap: 16px; }
.search-detail h4 { margin: 0 0 8px; font-size: 14px; }
.search-meta { margin: 0; color: var(--muted); font-size: 13px; }
.cost-row, .section-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 200px) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.section-row { grid-template-columns: minmax(0, 1fr) auto; }
.cost-row span, .section-row > span:first-child { display: grid; gap: 2px; }
.cost-row small, .section-row small { color: var(--muted); font-size: 12px; }
.cost-bar, .spend-bar, .trend-bar { height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.cost-bar i, .spend-bar i, .trend-bar i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.spend-bar.alert i { background: #d2553f; }
.lead-list { display: grid; gap: 6px; }
.lead-row { border: 1px solid var(--line); border-radius: 10px; background: white; }
.lead-row summary { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; }
.lead-row summary::-webkit-details-marker { display: none; }
.lead-row summary > span:nth-child(2) { display: grid; gap: 2px; }
.lead-row small { color: var(--muted); font-size: 12px; }
.lead-rank { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 800; }
.lead-score { min-width: 40px; padding: 4px 8px; border-radius: 999px; background: var(--mint); color: var(--green-dark); text-align: center; }
.lead-score.low { background: #fdecea; color: #a1402d; }
.lead-evidence { display: grid; gap: 8px; padding: 0 12px 12px 52px; }
.lead-evidence p { display: grid; gap: 2px; margin: 0; font-size: 13px; }
.lead-evidence span { color: var(--ink); }
.small { font-size: 12px; }
.three-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.control-card { display: grid; gap: 10px; align-content: start; }
.control-card h3 { margin: 0; }
.control-card p { margin: 0; }
.control-card.alert { border-color: #f1c2b8; background: #fffaf8; }
.control-card.warn { border-color: #e7cf98; background: #fffaf0; }
.control-card button { justify-self: start; }
.danger-button { color: #a1402d; border-color: #f1c2b8; }
.danger-fill { background: #a1402d; border-color: #a1402d; }
.spend-meter { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto; gap: 12px; align-items: center; margin: 4px 0 14px; }
.spend-meter small { color: var(--muted); }
.plain-list { margin: 8px 0; padding-left: 18px; line-height: 1.7; }
.section-title-row { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-top: 8px; }
.section-title-row h3 { margin: 0; font-size: 18px; }
.section-title-row p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.tag-filter { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 800; }
.tag-filter select { flex: 1; min-height: 34px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.chip b { margin-left: 4px; color: #b33b2a; }
.chip b:empty { display: none; }
.mention-flag { padding: 1px 6px; border-radius: 999px; background: #eeedfe; color: #3c3489; font-weight: 800; }
.ticket-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ticket-tags i { padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 11px; font-style: normal; }
.tag-editor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag-editor-label { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.tag-add input { width: 120px; min-height: 28px; padding: 3px 8px; border: 1px dashed var(--line); border-radius: 999px; font: inherit; font-size: 12px; }
.ticket-rating { margin: 6px 0 0 !important; color: var(--ink) !important; }
.attachment-list { display: grid; gap: 8px; }
.attachment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.attachment-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.attachment-card img, .file-icon { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--soft); }
.file-icon { display: grid; place-items: center; color: var(--muted); font-size: 12px; font-weight: 800; }
.attachment-card span { display: grid; gap: 2px; min-width: 0; }
.attachment-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.attachment-card small { color: var(--muted); font-size: 11px; }
.attachment-card .text-button { justify-self: start; }
.macro-picker, .attach-label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.macro-picker select { min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: white; text-transform: none; letter-spacing: normal; font-weight: 600; }
.attach-label input { font-size: 12px; text-transform: none; letter-spacing: normal; font-weight: 500; }
.macro-record .row-actions { flex-wrap: nowrap; }
.trend-cell { display: grid; grid-template-columns: 70px auto; gap: 8px; align-items: center; }
#modal h4 { margin: 8px 0 0; }
@media (max-width: 760px) {
  .three-fields, .spend-meter, .cost-row { grid-template-columns: minmax(0, 1fr); }
  .lead-evidence { padding-left: 12px; }
  .heading-actions { width: 100%; }
}
@media (min-width: 1101px) { .page-heading .heading-actions { flex-wrap: nowrap; } .page-heading .heading-actions button { white-space: nowrap; } }

/* Alerts bell */
.alerts-wrap { position: relative; }
.alerts-button { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--ink); }
.alerts-button:hover, .alerts-button[aria-expanded="true"] { background: var(--mint); color: var(--green-dark); }
.alerts-count { position: absolute; top: -4px; right: -4px; min-width: 19px; padding: 2px 5px; border-radius: 999px; background: #b33b2a; color: white; font-size: 10px; line-height: 15px; text-align: center; }
.alerts-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; display: grid; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 110px)); grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow); overflow: hidden; }
.alerts-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.alerts-list { overflow-y: auto; }
.alert-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); background: white; color: var(--ink); text-align: left; }
.alert-item:hover { background: #fbfdfc; }
.alert-item .severity-dot { margin-top: 5px; }
.alert-item span { display: grid; gap: 3px; min-width: 0; }
.alert-item strong { font-size: 13px; }
.alert-item.unread strong { font-weight: 800; }
.alert-item:not(.unread) strong { font-weight: 600; }
.alert-item small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-item.resolved { opacity: .62; }
.alerts-settings { display: grid; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--line); background: var(--soft); font-size: 12px; }
.alerts-settings label { display: grid; gap: 5px; color: var(--muted); font-weight: 750; }
.alerts-settings select { min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); }
.alerts-settings small { color: var(--muted); line-height: 1.45; }
.alerts-settings .alerts-desktop { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 650; }

/* Research app search window */
.why-box { padding: 14px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--soft); }
.why-box h4 { margin: 0 0 6px; }
.why-box ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.why-box p { margin: 6px 0 0; }
.lead-filter { width: 100%; min-height: 40px; margin-bottom: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.app-lead-list { display: grid; max-height: 360px; overflow-y: auto; }
.app-lead { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.app-lead span { display: grid; gap: 3px; min-width: 0; }
.app-lead small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-lead.reported { padding-left: 10px; border-left: 3px solid #d79b2b; }
.app-lead.removed { grid-template-columns: minmax(0, 1fr) auto; }
.app-lead.removed small { white-space: normal; }

/* Billing → Pricing and Admin → Research budget */
#billing-tabs { margin-bottom: 4px; }
.detail-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.detail-card small { display: block; }
.table-summary > div { display: grid; gap: 4px; }
.table-note { color: var(--muted); font-size: 12px; }
.inline-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 750; }
.inline-label select { min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); }
.pricing-note { margin: 0; padding: 14px 20px 18px; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check-label { display: flex !important; align-items: center; gap: 8px; }
.danger-text { color: #a1402d; margin-right: auto; }
.budget-bar { display: flex; height: 24px; margin: 18px 0 10px; overflow: hidden; border-radius: 8px; border: 1px solid var(--line); }
.budget-bar span { height: 100%; }
.budget-legend { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; font-size: 13px; }
.budget-legend span { color: var(--ink); }
.budget-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 2px; }
.budget-fixed { background: var(--green-dark); }
.budget-reports { background: var(--green); opacity: .55; }
.budget-summary { background: var(--mint-strong); }
.budget-reserve { background: #b9c7c2; }
.budget-partners { background: var(--mint); }
@media (max-width: 760px) { .detail-grid.four, .form-pair { grid-template-columns: 1fr 1fr; } }
.tag.pack-badge { text-transform: none; margin-left: 6px; }

/* Admin → Reference data */
.reference-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.reference-actions input[type="search"] { min-height: 38px; min-width: 200px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.reference-job { margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.reference-table { max-height: 640px; }
.review-item { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.review-item:last-child { border-bottom: 0; }
.review-item ul { margin: 6px 0; padding-left: 18px; font-size: 13px; }
.review-item .small { font-size: 12px; margin: 4px 0 0; }
.upload-preview { max-height: 420px; }
/* Staff sign-in (sign-in.html, link phase 5). */
.login-identity input { min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: normal; text-transform: none; }
.sign-in-message { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sign-in-message.problem { color: #a23d2b; }
.sign-in-submit { width: 100%; margin-top: 18px; }
/* Password box with its Show/Hide button inside (shared markup with the customer app's sign-in). */
.password-wrap { position: relative; display: block; }
.password-wrap input { width: 100%; padding-right: 68px; }
.password-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); padding: 6px 10px;
  border: 0; border-radius: 8px; background: none; color: var(--green-dark); font: inherit; font-size: 13px;
  font-weight: 700; letter-spacing: normal; text-transform: none; cursor: pointer; }
.password-toggle:hover { background: var(--soft); }
.sign-in-hint { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: normal; text-transform: none; }
.sign-in-links { display: grid; gap: 8px; justify-items: start; margin-top: 16px; }
.sign-in-links .text-button { padding-left: 0; padding-right: 0; }

/* Billing → Card payments: the status filters stay on one line beside the heading. */
.table-summary > .purchase-filters { display: flex; flex: 0 0 auto; flex-wrap: nowrap; }
@media (max-width: 760px) { .table-summary > .purchase-filters { flex-wrap: wrap; } }
/* A tick box in a pop-up form: the box at its own size, the sentence in normal type beside it. */
.modal-form .check-label { justify-content: flex-start; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.modal-form .check-label input { flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; }