/* Admin and other pages, design pass: Reports, Turnaround targets, Team & Departments, Access, Features, Connections,
   Catalogue & customers, Call flows, SOPs, Phones, Bowranda Leads. */

/* Reports: one row of tabs; tables on phones keep their first column fixed while the rest scroll */
.rppage .rptabs { margin-bottom: 16px; }
.rptgt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 14px; }
.rptgt .ic { width: 16px; height: 16px; flex: none; }
.rptgt span { display: inline; }
.rptscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rpt th, .rpt td { white-space: nowrap; }
.rpt thead th { white-space: normal; min-width: 64px; vertical-align: bottom; }
@media (max-width: 720px) {
  .rptscroll { margin: 0 -16px; padding: 0 16px; }
  .rpt { width: max-content; min-width: 100%; }
  .rpt th[scope="row"], .rpt thead th:first-child { position: sticky; left: -16px; z-index: 1; background: var(--surface); min-width: 120px; max-width: 160px; white-space: normal; overflow-wrap: break-word; box-shadow: 1px 0 0 var(--divider); }
  .rpt td, .rpt th { padding-left: 10px; padding-right: 10px; }
}
.rpset { margin-bottom: 16px; }
.rpset textarea { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; max-width: 320px; }
.rppage > .inform .formact { align-items: center; gap: 16px; }

/* Team & Departments */
.teampage .addrow { margin-bottom: 12px; }
.tmsetup { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; }
.prow2 .pst { flex: none; }
@media (max-width: 720px) {
  .row.prow2 { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 2px 12px; }
  .row.prow2 > .avwrap { grid-row: 1 / span 5; }
  .row.prow2 .what { order: 0; grid-column: 2; }
  .row.prow2 .pdeps, .row.prow2 .pext, .row.prow2 .proles, .row.prow2 .pst { grid-column: 2; order: 0; width: auto; flex: none; }
  .row.prow2 .pext:empty { display: none; }
  .row.prow2 .proles { white-space: normal; }
}

/* Access: footnotes as a list, columns lined up */
.accnotes { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; max-width: 80ch; }
.acct td { vertical-align: middle; }
.acct .acc-on, .acct .acc-lock { display: inline-flex; justify-content: center; align-items: center; min-height: 30px; }
.accpage .lenscard { margin-bottom: 16px; }

/* Features */
.ftpage .featl li > span { flex: 1 1 auto; }

/* Connections: status and a Set up / Manage button on each row */
.cnlist { padding: 0; }
.cnrow .cnst { flex: none; width: 130px; }
.cnrow .cnact { flex: none; width: 140px; display: flex; justify-content: flex-end; }
.cnrow .cnnote { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--ground); color: var(--grey-ink); font-size: 0.8125rem; }
@media (max-width: 640px) {
  .cnrow { flex-wrap: wrap; align-items: flex-start; }
  .cnrow .what { flex: 1 1 calc(100% - 48px); }
  .cnrow .cnst { width: auto; margin-left: 44px; flex: 1 1 auto; align-self: center; }
  .cnrow .cnact { width: auto; }
}

/* Catalogue & customers: one heading, then the tabs, then the tab's own line */
.ce-tablede { margin: -4px 0 14px; }
.ce-subhead { margin: 0 0 12px; }
.ce-subhead h2 { font-size: 1.25rem; font-weight: 800; color: var(--brand); margin: 0; }

/* Call flows: the flows as tabs under the header */
.cfpage .cftabs { margin-bottom: 12px; }
@media print { .cfpage .cftabs, .cfpage .phact, .backset { display: none !important; } }

/* Phones */
.phwarn { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--amber-bg); color: var(--ink); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); }
.phwarn .ic { width: 18px; height: 18px; flex: none; color: var(--amber); margin-top: 2px; }
.phwarn > div { display: flex; flex-direction: column; gap: 2px; }
.phpage .phbar { margin-bottom: 14px; }
.phpage .phbar .tabs { flex: 1 1 auto; min-width: 0; }
.cacts .btn.small .ic { width: 16px; height: 16px; }

/* Bowranda Leads: the date never wraps */
.ldpage .row .ldage { min-width: 84px; text-align: right; white-space: nowrap; flex: none; }
@media (max-width: 720px) { .ldpage .row .ldage { min-width: 0; } }
@media (max-width: 640px) { .rptgt .ic { display: none; } }