/* perfex_8x8 module styles */

._8x8_widget h2 { font-size: 28px; }
._8x8_widget h2.no-margin + small { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
._8x8_widget hr { border-top-color: #eee; }

table._8x8_kv th { width: 35%; color: #666; font-weight: 500; }

._filter_form .form-control,
._filter_form .btn { margin-right: 6px; margin-bottom: 6px; }

#_8x8_mapping_table td { vertical-align: middle; }

._8x8_settings_form .nav-tabs { margin-bottom: 15px; }


/* =====================================================================
   v1.2.0 — Control-Room design system (locked mockup v0.2).
   Scoped to .px8-root so nothing outside module surfaces is touched.
   Type floors: body/cells >= 14px, meta >= 12.5px, micro >= 11px.
   ===================================================================== */
.px8-root { --px8-line:#e6eaf2; --px8-ink:#1f2637; --px8-muted:#5b6577; --px8-faint:#8a94a6;
  --px8-navy:#3d3fae; --px8-navy-d:#2e3070; --px8-navy-t:#ecebfa;
  --px8-green:#16a34a; --px8-green-t:#e6f6ec; --px8-amber:#d97706; --px8-amber-t:#fbf1df;
  --px8-red:#dc2626; --px8-red-t:#fceaea; --px8-purple:#8b5cf6; --px8-blue:#2563eb; --px8-blue-t:#e8f0fd;
  font-size: 14px; }
.px8-root .px8-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

.px8-head-card { display: flex; align-items: flex-start; gap: 18px; background: #fff;
  border: 1px solid var(--px8-line); border-radius: 14px; padding: 20px 22px; margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(20,25,50,.05), 0 4px 14px rgba(20,25,50,.05); }
.px8-head-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--px8-navy-t);
  color: var(--px8-navy); display: flex; align-items: center; justify-content: center; font-size: 19px; flex: 0 0 auto; }
.px8-head-main { flex: 1 1 auto; min-width: 0; }
.px8-head-side { flex: 0 0 auto; padding-top: 6px; }
.px8-micro { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--px8-faint); }
.px8-head-title { font-size: 24px; font-weight: 800; letter-spacing: -.01em; margin: 2px 0 0; }
.px8-head-desc { margin-top: 7px; color: var(--px8-muted); font-size: 14px; margin-bottom: 0; }
.px8-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; border-radius: 999px; padding: 5px 12px; vertical-align: 4px; margin-left: 10px; }
.px8-badge-green { background: var(--px8-green-t); color: #0f7a37; }
.px8-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  margin-right: 6px; vertical-align: 1px; }
.px8-meta { font-size: 12.5px; color: var(--px8-muted); }

.px8-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-bottom: 18px; }
.px8-grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.px8-stat { display: block; background: #fff; border: 1px solid var(--px8-line); border-top: 4px solid var(--px8-line);
  border-radius: 14px; padding: 16px 18px; text-decoration: none; color: var(--px8-ink);
  transition: transform .12s, box-shadow .12s; }
.px8-stat:hover, .px8-stat:focus { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20,25,50,.10);
  text-decoration: none; color: var(--px8-ink); }
.px8-stat:focus-visible { outline: 3px solid #a5a8ef; outline-offset: 2px; }
.px8-b-purple { border-top-color: var(--px8-purple); } .px8-b-green { border-top-color: var(--px8-green); }
.px8-b-amber { border-top-color: var(--px8-amber); } .px8-b-red { border-top-color: var(--px8-red); }
.px8-b-blue { border-top-color: var(--px8-blue); }
.px8-stat-title { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--px8-ink); margin-bottom: 6px; }
.px8-bignum { display: block; font-size: 32px; font-weight: 800; line-height: 1.1; }
.px8-n-green { color: var(--px8-green); } .px8-n-amber { color: var(--px8-amber); }
.px8-n-red { color: var(--px8-red); } .px8-n-blue { color: var(--px8-blue); }
.px8-stat-cap { display: block; font-size: 12.5px; color: var(--px8-muted); margin-top: 4px; }

.px8-toolrow { margin-bottom: 14px; }
.px8-chip { display: inline-block; border: 1px solid var(--px8-line); background: #fff; border-radius: 999px;
  padding: 8px 16px; font-size: 12.5px; font-weight: 700; color: var(--px8-ink); margin: 0 6px 6px 0;
  text-decoration: none; }
.px8-chip:hover { text-decoration: none; color: var(--px8-ink); border-color: #c7cede; }
.px8-chip-active { background: var(--px8-navy-d); border-color: var(--px8-navy-d); color: #fff; }
.px8-chip-active:hover { color: #fff; }

.px8-card { background: #fff; border: 1px solid var(--px8-line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,25,50,.05), 0 4px 14px rgba(20,25,50,.05); }
.px8-tbl-card { overflow: hidden; margin-bottom: 16px; }
.px8-tbl-head { padding: 16px 20px; border-bottom: 1px solid var(--px8-line); font-size: 15px; }
.px8-tbl-sub { font-size: 12.5px; color: var(--px8-faint); margin-left: 10px; }
.px8-root .px8-table td { font-size: 14px; vertical-align: middle; }
.px8-root .px8-table th { font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--px8-faint); }
.px8-empty { padding: 24px 20px; color: var(--px8-muted); font-size: 14px; }

.px8-pill { display: inline-block; border-radius: 999px; padding: 4px 12px; font-size: 12.5px;
  font-weight: 700; white-space: nowrap; }
.px8-pill-green { background: var(--px8-green-t); color: #0f7a37; }
.px8-pill-amber { background: var(--px8-amber-t); color: #a35a05; }
.px8-pill-red { background: var(--px8-red-t); color: #b21f1f; }
.px8-pill-gray { background: #eef1f7; color: var(--px8-muted); }
.px8-dirarrow { display: inline-block; width: 22px; height: 22px; border-radius: 7px; text-align: center;
  line-height: 22px; font-weight: 800; margin-right: 8px; }
.px8-d-in { background: var(--px8-green-t); color: var(--px8-green); }
.px8-d-out { background: var(--px8-blue-t); color: var(--px8-blue); }

/* Note bars — block flow on purpose (mixed text + inline elements). */
.px8-note { display: block; background: #f2f4fb; border: 1px solid var(--px8-line);
  border-left: 4px solid var(--px8-navy); border-radius: 10px; padding: 12px 16px;
  font-size: 12.5px; color: var(--px8-muted); margin: 14px 0; }
.px8-note-warn { border-left-color: var(--px8-amber); background: var(--px8-amber-t); color: #8a4d04; }
.px8-note-ok { border-left-color: var(--px8-green); background: var(--px8-green-t); color: #0f6b32; }
.px8-hint { font-size: 12.5px; color: var(--px8-faint); margin: 5px 0 0; }
.px8-form-h { font-size: 16px; font-weight: 800; margin: 4px 0 14px; }
.px8-check-label { font-weight: 600; font-size: 14px; }
.px8-rowact .btn { margin-left: 6px; }

/* Client recordings player rows */
.px8-recrow { display: flex; align-items: center; gap: 16px; padding: 14px 20px;
  border-bottom: 1px solid #eef1f7; }
.px8-recrow:last-child { border-bottom: 0; }
.px8-playbtn { width: 38px; height: 38px; border-radius: 50%; background: var(--px8-navy); color: #fff;
  border: 0; font-size: 13px; flex: 0 0 auto; }
.px8-playbtn:hover { background: var(--px8-navy-d); }
.px8-recmeta { flex: 0 0 260px; min-width: 0; }
.px8-audio { flex: 1 1 auto; width: 100%; }
@media (max-width: 900px) { .px8-recmeta { flex-basis: 150px; } }


/* ---- v1.2.1 additions: summary bar, module pill nav, scoped restyle of
   Bootstrap controls inside module surfaces (markup untouched). ---- */
.px8-sumbar { display: flex; align-items: center; gap: 16px; background: #fff;
  border: 1px solid var(--px8-line); border-radius: 14px; padding: 13px 18px; margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(20,25,50,.05), 0 4px 14px rgba(20,25,50,.05); }
.px8-pillcount { background: var(--px8-navy); color: #fff; border-radius: 999px; padding: 6px 14px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.px8-segbar { flex: 1 1 auto; height: 9px; border-radius: 999px; overflow: hidden;
  display: flex; background: #eef1f7; }
.px8-segbar i { display: block; height: 100%; }
.px8-modnav { margin-bottom: 16px; }
.px8-modnav .px8-chip { padding: 9px 18px; font-size: 13px; }

/* Scoped Bootstrap restyle — design applied via CSS so ids/classes/JS
   contracts stay byte-for-byte (Hard Rule 6: restyle != rewire). */
.px8-root .panel_s { border: 1px solid var(--px8-line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,25,50,.05), 0 4px 14px rgba(20,25,50,.05); }
.px8-root .form-control { border: 1px solid var(--px8-line); border-radius: 10px;
  font-size: 14px; height: auto; padding: 8px 13px; box-shadow: none; }
.px8-root .form-control:focus { border-color: #a5a8ef; box-shadow: 0 0 0 2px rgba(165,168,239,.5); }
.px8-root .btn { border-radius: 999px; font-weight: 600; }
.px8-root .btn-primary { background: var(--px8-navy); border-color: var(--px8-navy); }
.px8-root .btn-primary:hover, .px8-root .btn-primary:focus { background: var(--px8-navy-d); border-color: var(--px8-navy-d); }
.px8-root .btn-default { border-color: var(--px8-line); }
.px8-root .table > thead > tr > th { font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--px8-faint); border-bottom: 1px solid var(--px8-line); }
.px8-root .table > tbody > tr > td { font-size: 14px; vertical-align: middle; }
.px8-root .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
.px8-root .table > tbody > tr:hover { background: #f8fafc; }
.px8-root .nav-tabs { border-bottom: 0; margin-bottom: 16px; }
.px8-root .nav-tabs > li > a { border: 1px solid var(--px8-line); border-radius: 999px;
  padding: 8px 16px; font-size: 12.5px; font-weight: 700; color: var(--px8-ink);
  margin-right: 8px; background: #fff; }
.px8-root .nav-tabs > li.active > a,
.px8-root .nav-tabs > li.active > a:hover,
.px8-root .nav-tabs > li.active > a:focus { background: var(--px8-navy-d);
  border-color: var(--px8-navy-d); color: #fff; }
.px8-root .hr-panel-heading { border-color: var(--px8-line); }
.px8-filterform .form-control { margin-right: 8px; margin-bottom: 6px; }

/* ============================================================
   v1.4.0 — Tenant settings pill row (shared component, mockup v0.3)
   + module-wide settings cards. All tokens from .px8-root.
   ============================================================ */
.px8-tset { margin-top: 0; }
.px8-tset-label { margin-bottom: 9px; }
.px8-tset-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.px8-tset-pill { font-size: 13.5px; font-weight: 600; color: var(--px8-muted);
  background: #f6f8fb; border: 1px solid var(--px8-line); border-radius: 999px;
  padding: 7px 15px; cursor: pointer; transition: .12s; }
.px8-tset-pill:hover { border-color: var(--px8-navy); color: var(--px8-navy); }
.px8-tset-pill:focus { outline: 2px solid rgba(61,63,174,.4); }
.px8-tset-pill.on { background: var(--px8-navy); border-color: var(--px8-navy); color: #fff; }
.px8-tset-cnt { font-size: 11.5px; opacity: .75; margin-left: 5px; }
.px8-tset-pane { display: none; margin-top: 16px; }
.px8-tset-pane.on { display: block; }
.px8-tset-h { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: var(--px8-ink); }
.px8-tset-note { font-size: 12.5px; color: var(--px8-muted); margin: 0 0 14px; }
.px8-tset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 640px) { .px8-tset-grid { grid-template-columns: 1fr; } }
.px8-fld label { display: block; font-size: 12.5px; font-weight: 600;
  color: var(--px8-muted); margin-bottom: 4px; }
.px8-fld input, .px8-fld select { width: 100%; box-sizing: border-box; font-size: 14px;
  padding: 8px 11px; border: 1px solid var(--px8-line); border-radius: 9px;
  background: #fff; color: var(--px8-ink); }
.px8-fld input:focus, .px8-fld select:focus { outline: 2px solid rgba(61,63,174,.4);
  border-color: var(--px8-navy); }
.px8-fld input[readonly] { background: #f6f8fb; color: var(--px8-muted); }
.px8-hint { display: block; font-size: 12.5px; color: var(--px8-faint); margin-top: 4px; }
.px8-tset-btnrow { margin-top: 16px; display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.px8-danger-ghost { color: var(--px8-red) !important; border-color: #f3caca !important; }
.px8-tset-table { font-size: 14px; margin-bottom: 10px; }
.px8-tset-table th { font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--px8-faint); }
.px8-tset-table td { font-size: 14px; vertical-align: middle; }
.px8-tset-table td input, .px8-tset-table td select { width: 100%; box-sizing: border-box;
  font-size: 14px; padding: 6px 10px; border: 1px solid var(--px8-line); border-radius: 9px; }
.px8-tset-actcol { width: 90px; text-align: right; }
.px8-tset-empty { color: var(--px8-faint); font-size: 12.5px; }
.px8-tset-msg { font-size: 12.5px; font-weight: 600; }
.px8-tset-msg.ok { color: var(--px8-green); }
.px8-tset-msg.err { color: var(--px8-red); }
/* module-wide settings cards */
.px8-set-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .px8-set-grid { grid-template-columns: 1fr; } }
.px8-set-card { border-top: 3px solid var(--px8-line); }
.px8-set-h { font-size: 15px; font-weight: 700; margin: 6px 0 4px; color: var(--px8-ink); }
.px8-set-note { font-size: 12.5px; color: var(--px8-muted); margin: 0 0 14px; }
.px8-infobar { background: var(--px8-blue-t); color: var(--px8-muted); font-size: 12.5px;
  border-radius: 9px; padding: 9px 13px; margin-top: 14px; }
.px8-infobar a { color: var(--px8-blue); }

/* ============================================================
   v1.4.1 — Design-system layer (locked mockup v0.13, measured
   off the Domain Admin reference). Existing class names kept
   (RESTYLE != REWIRE); this layer restyles them.
   ============================================================ */
.px8-root { font-size: 15px; }
/* header: one centred flex row; CTA group never rag-wraps */
.px8-head-v2 { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 26px 30px; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.px8-head-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.px8-head-v2 .px8-head-icon { width: 48px; height: 48px; border-radius: 12px; font-size: 20px; }
.px8-head-v2 .px8-head-title { font-size: 28px; font-weight: 700; letter-spacing: -.01em; margin: 4px 0 0; }
.px8-head-v2 .px8-micro { margin-bottom: 8px; }
.px8-head-badge { margin-top: 12px; }
.px8-head-v2 .px8-head-side { margin-left: auto; display: flex; gap: 10px; align-items: center;
  flex-shrink: 0; white-space: nowrap; }
.px8-root.px8-narrow .px8-head-v2 .px8-head-side { margin-left: 0; flex-basis: 100%; margin-top: 16px; }
.px8-cta { font-size: 15px; font-weight: 600; height: 41px; padding: 0 18px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--px8-line); background: #fff; color: var(--px8-ink); }
.px8-cta:hover { border-color: var(--px8-navy); color: var(--px8-navy); text-decoration: none; }
.px8-cta:focus { outline: 2px solid rgba(64,70,200,.4); }
.px8-cta-primary { background: var(--px8-blue); border-color: var(--px8-blue); color: #fff; }
.px8-cta-primary:hover { background: #1d4fc4; border-color: #1d4fc4; color: #fff; }
.px8-cta.open { background: var(--px8-navy-t); border-color: var(--px8-navy); color: var(--px8-navy); }
.px8-gearbar { margin: 0 0 14px; }
/* collapsed settings */
.px8-tset-collapsible { display: none; }
.px8-tset-collapsible.open { display: block; }
.px8-tset-collapsible .px8-tset { border-top: 4px solid var(--px8-navy); border-radius: 16px; }
.px8-tset-seclabel { margin: 14px 0 8px; }
.px8-tset-subtle { color: var(--px8-muted); font-size: 13px; }
.px8-cellsub { color: var(--px8-muted); font-size: 13px; }
.px8-badge-navy { background: var(--px8-navy-t); color: var(--px8-navy); }
/* strip */
.px8-sumbar { border-radius: 16px; padding: 14px 20px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.px8-tpill { background: var(--px8-green-t); color: var(--px8-green); font-size: 13px; font-weight: 700;
  border-radius: 999px; height: 27px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; }
.px8-tpill .px8-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.px8-meta-strong { font-size: 13.5px; color: var(--px8-ink); font-weight: 600; }
/* KPI tiles: three-block even distribution — never a dead gap */
.px8-stat { display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  min-height: 186px; padding: 24px 22px 20px; border-radius: 16px; border-top-width: 4px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: .12s; }
.px8-stat:hover { transform: translateY(-1px); text-decoration: none; }
.px8-krow { display: flex; align-items: center; gap: 12px; }
.px8-kchip { width: 35px; height: 35px; border-radius: 9px; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; font-size: 15px; flex: 0 0 auto; }
.px8-b-purple .px8-kchip { background: var(--px8-purple); }
.px8-b-green  .px8-kchip { background: var(--px8-green); }
.px8-b-amber  .px8-kchip { background: var(--px8-amber); }
.px8-b-red    .px8-kchip { background: var(--px8-red); }
.px8-b-blue   .px8-kchip { background: var(--px8-blue); }
.px8-kmid { display: block; }
.px8-stat .px8-stat-title { font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #454c5c; margin: 0; }
.px8-stat .px8-bignum { display: block; font-size: 29px; font-weight: 700; line-height: 1; margin: 0 0 8px; }
.px8-stat .px8-stat-cap { display: block; font-size: 14px; color: var(--px8-muted); }
.px8-viewall { font-size: 14px; font-weight: 600; color: var(--px8-blue); }
/* nav & filter pills: 42px, white inactive, indigo active */
.px8-chip { font-size: 14.5px; font-weight: 600; color: var(--px8-ink); background: #fff;
  border: 1px solid var(--px8-line); border-radius: 999px; height: 42px; padding: 0 20px;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.px8-chip:hover { border-color: var(--px8-navy); color: var(--px8-navy); text-decoration: none; }
.px8-chip-active, .px8-chip-active:hover { background: var(--px8-navy); border-color: var(--px8-navy); color: #fff; }
.px8-toolrow { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
/* all buttons inside the module are pills; save CTAs green */
.px8-root .btn { border-radius: 999px; font-weight: 600; }
.px8-btn-save, .px8-root .px8-btn-save { background: var(--px8-green); border-color: var(--px8-green); color: #fff; }
.px8-btn-save:hover { background: #12813b; border-color: #12813b; color: #fff; }
.px8-iconbtn { background: none; border: none; padding: 0; cursor: pointer; font-size: 16px; }
/* table polish */
.px8-tbl-card, .px8-card { border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.px8-table td { font-size: 14.5px; padding: 12px; vertical-align: middle; }
.px8-table th { font-size: 11.5px; letter-spacing: .09em; }
.px8-audio-row td { background: var(--px8-navy-t); }
.px8-audio-row audio { width: 100%; max-width: 640px; display: block; }

/* ============================================================
   v1.4.2 — panel padding fix (settings "slates") + sub-page
   head-card polish so every module surface inherits the system
   even before its markup moves to the v2 structure.
   ============================================================ */
/* the collapsible tenant-settings card: explicit padding, defensive
   against theme tab-content resets */
.px8-root .px8-tset-collapsible .px8-tset,
.px8-root .px8-tset.px8-card { padding: 24px 26px !important; }
.px8-tset .px8-tset-label { margin: 0 0 12px; }
.px8-tset .px8-tset-pane { margin-top: 20px; }
.px8-tset .px8-tset-grid { margin-top: 4px; }
.px8-tset .px8-tset-h { margin-top: 2px; }
.px8-tset .px8-tset-table { margin-top: 6px; }
.px8-tset-seclabel { margin-top: 18px; }
/* every head-card (old structure included) gets the v2 shell */
.px8-root .px8-head-card { padding: 26px 30px; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.px8-root .px8-head-card .px8-head-title { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.px8-root .px8-head-card .px8-head-icon { width: 48px; height: 48px; border-radius: 12px; font-size: 20px; }
.px8-root .px8-head-card .px8-head-desc { font-size: 15px; color: var(--px8-muted); margin: 10px 0 0; }
/* module nav pills inherit the 42px pill spec via .px8-chip (already
   restyled) — add spacing under the nav row on sub-pages */
.px8-modnav { margin: 0 0 18px; }
/* sub-page cards */
.px8-root .table > thead > tr > th { border-bottom-width: 1px; }
/* v2-lite: sub-pages keep their existing head structure but centre-align */
.px8-head-v2-lite { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.px8-head-v2-lite .px8-head-side { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ============================================================
   v1.4.3 — settings & sub-page fidelity layer. Fixes: accent
   colours overridden by .px8-set-card base rule; theme-flattened
   card padding on ALL px8 cards; input/alert/rhythm parity with
   the Domain Admin reference.
   ============================================================ */
/* card shell: enforced padding + visible separation everywhere */
.px8-root .px8-card,
.px8-root .px8-set-card,
.px8-root .px8-head-card,
.px8-root .px8-tbl-card { padding: 24px 26px !important; background: #fff;
  border: 1px solid var(--px8-line); border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.px8-root .px8-sumbar { padding: 14px 20px !important; }
/* settings cards: 4px accent — colour must WIN over the base rule */
.px8-root .px8-set-card { border-top-width: 4px !important; border-top-style: solid !important; }
.px8-root .px8-set-card.px8-b-purple { border-top-color: var(--px8-purple) !important; }
.px8-root .px8-set-card.px8-b-green  { border-top-color: var(--px8-green) !important; }
.px8-root .px8-set-card.px8-b-amber  { border-top-color: var(--px8-amber) !important; }
.px8-root .px8-set-card.px8-b-red    { border-top-color: var(--px8-red) !important; }
.px8-root .px8-set-card.px8-b-blue   { border-top-color: var(--px8-blue) !important; }
/* rhythm inside settings cards (reference: eyebrow -> H2 -> note -> fields) */
.px8-set-card .px8-micro { margin: 0 0 6px; }
.px8-set-card .px8-micro .fa { margin-right: 6px; }
.px8-set-card .px8-set-h { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.px8-set-card .px8-set-note { font-size: 14px; margin: 0 0 18px; }
.px8-root .form-group { margin: 0 0 16px; }
.px8-root .form-group label { font-size: 13px; font-weight: 600; color: var(--px8-muted); margin-bottom: 5px; }
.px8-root .form-group .text-muted, .px8-root small.text-muted { font-size: 12.5px; color: var(--px8-faint); }
.px8-root hr { border-color: var(--px8-line); margin: 18px 0; }
/* theme inputs -> system inputs everywhere in the module */
.px8-root .form-control, .px8-root select.form-control, .px8-root input.form-control {
  border-radius: 10px; font-size: 14.5px; padding: 9px 12px; height: auto;
  border: 1px solid var(--px8-line); color: var(--px8-ink); box-shadow: none; }
.px8-root .form-control:focus { border-color: var(--px8-navy); outline: 2px solid rgba(64,70,200,.35); box-shadow: none; }
/* tokenised alert inside module */
.px8-root .alert-warning { background: var(--px8-amber-t); border: 1px solid #f2dcae;
  color: #7a5410; border-radius: 10px; font-size: 14px; padding: 12px 14px; }
/* action rows */
.px8-actionrow { margin: 6px 0 14px; }
#_8x8_sync_result { font-size: 13px; }
/* the theme label pills in the cron panel -> tokenised */
.px8-root .label { border-radius: 999px; font-weight: 600; padding: 5px 13px; font-size: 12.5px; }
.px8-root .label-success { background: var(--px8-green-t); color: var(--px8-green); }
.px8-root .label-warning { background: var(--px8-amber-t); color: var(--px8-amber); }
.px8-root .label-danger  { background: var(--px8-red-t); color: var(--px8-red); }
.px8-root .label-default { background: #f6f8fb; color: var(--px8-muted); }
/* settings grid gap parity */
.px8-set-grid { gap: 20px; }