/* ════════════════════════════════════════════════════════════
   CommHub · Admin panel
   Extends the shared design system (commhub.css) with the few
   pieces the prototype had no equivalent of: server-rendered
   alerts, filter bars, permission matrix, diff views, auth screens.
═══════════════════════════════════════════════════════════════ */

/* ─────────── ALERTS / NOTICES ─────────── */
.alert, .notice {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 14px; margin-bottom: 16px;
  border-radius: 12px; border: 1px solid transparent;
  border-left: 3px solid var(--blue);
  background: rgba(37,99,235,.05);
  font-size: 13px; font-weight: 500; color: var(--text-dim); line-height: 1.55;
  box-shadow: none;
}
.alert i, .notice > i { font-size: 14px; flex-shrink: 0; margin-top: 2px; color: var(--blue); opacity: .9 }
.alert-success, .notice-success { border-left-color: #059669; background: rgba(16,185,129,.08); color: #047857 }
.alert-success i, .notice-success > i { color: #059669 }
.alert-error, .notice-danger { border-left-color: #E11D48; background: rgba(244,63,94,.07); color: #BE123C }
.alert-error i, .notice-danger > i { color: #E11D48 }
.alert-warning, .notice-warning { border-left-color: #D97706; background: rgba(245,158,11,.08); color: #9A6700 }
.alert-warning i, .notice-warning > i { color: #D97706 }
.alert-info, .notice-tip { border-left-color: var(--blue); background: rgba(37,99,235,.05); color: var(--text-dim) }
.alert b, .notice b { font-weight: 700; color: var(--text) }
.alert-warning b, .notice-warning b { color: #92400E }
.alert-error b, .notice-danger b { color: #9F1239 }
.alert-success b, .notice-success b { color: #065F46 }
.field-hint {
  display: block; margin-top: 7px; font-size: 12px; font-weight: 500;
  color: var(--text-light); line-height: 1.45;
}
.field-hint i { margin-right: 5px; color: var(--text-faint) }

/* ─────────── FILTER BAR ─────────── */
.filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 16px 18px; margin-bottom: 18px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm), var(--sh-inset);
}
.filters .input, .filters select.input { width: auto; min-width: 150px; padding: 9px 13px; font-size: 13px }
/* Restores the room the leading icon needs, which the rule above would take back. */
.filters .input-ic .input { padding-left: 40px }
.filters .grow { flex: 1; min-width: 200px }
.filters .spacer { margin-left: auto }

.filters-advanced { flex-direction: column; align-items: stretch; gap: 14px }
.filters-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.filters-row .grow { flex: 1; min-width: 220px }
.filters-advanced-panel {
  display: none; padding-top: 14px; border-top: 1px solid var(--border-2);
}
.filters-advanced-panel.open { display: block }
.filters-advanced-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px;
}
@media (max-width: 1100px) { .filters-advanced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) { .filters-advanced-grid { grid-template-columns: 1fr } }
.filters-advanced-grid .input { width: 100%; min-width: 0 }
.filters-advanced-actions { margin-top: 14px; display: flex; gap: 8px }
#toggle-advanced .adv-chevron { font-size: 10px; transition: transform .2s ease }
#toggle-advanced[aria-expanded="true"] .adv-chevron { transform: rotate(180deg) }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px }
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(37,99,235,.08); color: #1D4ED8; text-decoration: none;
  border: 1px solid rgba(37,99,235,.18);
}
.filter-chip:hover { background: rgba(37,99,235,.14) }
.filter-chip i { font-size: 10px; opacity: .7 }

/* ─────────── AUTH SCREENS ─────────── */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px }
.auth-card {
  width: 100%; max-width: 430px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--sh-xl), var(--sh-inset); padding: 40px 38px;
}
.auth-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 30px }
.auth-brand .sb-logo { width: 48px; height: 48px; border-radius: 15px; font-size: 20px }
.auth-brand b { font-family: 'Poppins'; font-weight: 800; font-size: 22px; letter-spacing: -.5px; display: block }
.auth-brand small { font-size: 8.5px; letter-spacing: 2.6px; color: var(--blue); font-weight: 700; display: block; margin-top: -3px }
.auth-brand--logo { flex-direction: column; align-items: center; text-align: center; gap: 10px }
.auth-brand--logo .brand-logo { display: block; height: 72px; width: auto; max-width: 320px; object-fit: contain; margin: 0 auto; background: transparent }
.auth-brand--logo small { margin-top: 0; color: var(--text-light) }
.sb-logo-full, .sb-logo-icon, .brand-logo-preview { background: transparent !important }
.auth-title { font-family: 'Poppins'; font-weight: 800; font-size: 25px; letter-spacing: -.7px; margin-bottom: 6px }
.auth-sub { color: var(--text-light); font-size: 13.5px; margin-bottom: 26px }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 6px }
.auth-note {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-2);
  font-size: 12px; color: var(--text-faint); line-height: 1.6;
}
.field-error { color: var(--rose); font-size: 12px; font-weight: 600; margin-top: 6px; display: block }

/* ─────────── ERROR PAGES ─────────── */
/* One card, centred, on the same ambient background as the rest of the panel.
   An error is not a different product, so it should not look like one. */
.err-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px }
.err-card {
  position: relative; overflow: hidden; width: 100%; max-width: 560px; text-align: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--sh-xl), var(--sh-inset); padding: 44px 40px 32px;
}
/* The status code, large and faint: unmistakable to anyone who knows what it
   means, ignorable by everyone who does not. */
.err-code {
  position: absolute; top: -30px; right: 4px; pointer-events: none; user-select: none;
  font-family: 'Poppins'; font-weight: 900; font-size: 150px; line-height: 1;
  letter-spacing: -8px; color: var(--text); opacity: .05;
}
.err-ic {
  width: 74px; height: 74px; border-radius: 23px; margin: 0 auto 22px;
  display: grid; place-items: center; font-size: 29px; color: #fff; position: relative;
}
/* The same top highlight the sidebar mark carries, so the shape reads as ours. */
.err-ic::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 45%);
}
.err-badge { margin-bottom: 14px }
.err-title { font-family: 'Poppins'; font-weight: 800; font-size: 27px; letter-spacing: -.7px; margin-bottom: 10px }
.err-sub { color: var(--text-light); font-size: 14px; line-height: 1.65; max-width: 48ch; margin: 0 auto }
.err-detail { margin-top: 22px; text-align: left }
.err-detail .alert { margin-bottom: 0 }
.err-detail .alert:not(:last-child) { margin-bottom: 10px }
.err-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px }
.err-actions .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none }
/* Sign out has to be a POST, and its form would otherwise sit in the row as an
   extra box that gaps and wrapping treat differently from the buttons beside
   it. This lets the button itself be the flex item. */
.err-actions form { display: contents }
.err-note {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border-2);
  font-size: 12px; color: var(--text-faint); line-height: 1.65;
}
.err-ref { font-family: 'JetBrains Mono'; font-size: 11.5px; word-break: break-all; opacity: .85 }

/* Tone carries most of the meaning: amber waits, rose failed, violet refused. */
.err-blue   .err-ic { background: var(--grad-brand);  box-shadow: var(--sh-brand) }
.err-violet .err-ic { background: var(--grad-violet); box-shadow: 0 16px 40px -10px rgba(139,92,246,.45) }
.err-amber  .err-ic { background: var(--grad-amber);  box-shadow: 0 16px 40px -10px rgba(245,158,11,.45) }
.err-rose   .err-ic { background: var(--grad-rose);   box-shadow: 0 16px 40px -10px rgba(244,63,94,.45) }
.err-slate  .err-ic { background: linear-gradient(135deg,#475569,#94A3B8); box-shadow: 0 16px 40px -10px rgba(71,85,105,.4) }

@media (max-width: 560px) {
  .err-card { padding: 34px 24px 26px }
  .err-code { font-size: 104px; top: -18px; letter-spacing: -5px }
  .err-title { font-size: 22px }
  .err-actions { flex-direction: column }
  .err-actions .btn { width: 100%; justify-content: center }
}

/* ─────────── PERMISSION MATRIX ─────────── */
.matrix { width: 100%; border-collapse: collapse; font-size: 13px }
.matrix th {
  text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-faint);
  padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--panel-2);
}
.matrix th.scope-col { text-align: center; width: 90px }
.matrix td { padding: 10px 14px; border-bottom: 1px solid var(--border-2) }
.matrix td.scope-col { text-align: center }
.matrix tbody tr:hover { background: var(--bg4) }
.matrix .group-row td {
  background: var(--bg3); font-family: 'Poppins'; font-weight: 700;
  font-size: 12.5px; letter-spacing: .2px; color: var(--text-dim);
  padding: 9px 14px; border-bottom: 1px solid var(--border);
}
.matrix .ability { font-weight: 600 }
.matrix .ability small { display: block; font-weight: 500; color: var(--text-faint); font-size: 11.5px; margin-top: 2px }
.matrix input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--blue); cursor: pointer }
.matrix .na { color: var(--border); font-size: 12px }
.matrix-check {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; cursor: pointer; transition: background .15s;
}
.matrix-check:hover { background: rgba(37,99,235,.08) }
.matrix tbody tr:has(input:checked) { background: rgba(37,99,235,.03) }

/* ─────────── ROLES MODULE ─────────── */
.roles-section { margin-bottom: 28px }
.roles-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.roles-section-head h2 {
  font-family: 'Poppins'; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; gap: 10px; margin: 0 0 4px;
}
.roles-section-head h2 i { color: var(--blue); font-size: 16px }
.roles-section-head p { margin: 0; color: var(--text-light); font-size: 13px; max-width: 62ch }

.roles-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 1100px) { .roles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 700px) { .roles-grid { grid-template-columns: 1fr } }

.role-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 20px 16px; border-radius: var(--r-lg);
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: var(--sh-sm), var(--sh-inset); text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 220px;
}
.role-card:hover {
  transform: translateY(-3px); border-color: rgba(37,99,235,.35);
  box-shadow: var(--sh);
}
.role-card-staff:hover { border-color: rgba(139,92,246,.4) }
.role-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.role-card-ic {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  color: #fff; font-size: 17px; box-shadow: var(--sh-sm);
}
.role-card h3 {
  font-family: 'Poppins'; font-weight: 800; font-size: 17px; margin: 0; letter-spacing: -.3px;
}
.role-card p {
  margin: 0; color: var(--text-light); font-size: 13px; line-height: 1.5;
  flex: 1;
}
.role-card-meter { display: flex; flex-direction: column; gap: 6px }
.role-card-meter .prog { height: 6px; background: var(--bg3); border-radius: 99px; overflow: hidden }
.role-card-meter span { font-size: 11px; font-weight: 700; color: var(--text-faint) }
.role-card-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 12.5px; font-weight: 800; color: var(--blue);
}
.role-card-cta i { font-size: 11px; transition: transform .15s }
.role-card:hover .role-card-cta i { transform: translateX(3px) }

.role-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 8px;
}
@media (max-width: 1100px) { .role-meta { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.role-meta-card {
  padding: 16px 18px; border-radius: 14px; background: var(--panel);
  border: 1px solid var(--border); box-shadow: var(--sh-sm), var(--sh-inset);
}
.role-meta-card > span { display: block; font-size: 11.5px; font-weight: 700; margin-bottom: 6px }
.role-meta-card b {
  font-family: 'Poppins'; font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1;
}
.role-meta-card b small { font-size: 14px; color: var(--text-light); font-weight: 700 }

.role-scope-legend {
  display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 14px;
  padding: 12px 16px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--border-2);
  font-size: 12.5px; color: var(--text-dim);
}
.role-scope-legend b { color: var(--text); font-weight: 800 }

.role-jump {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
  position: sticky; top: calc(var(--topbar-h, 66px) + 8px); z-index: 20;
  padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px); border: 1px solid var(--border); box-shadow: var(--sh-sm);
}
.role-jump a {
  padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--text-dim); background: var(--bg3); text-decoration: none; border: 1px solid transparent;
}
.role-jump a:hover { color: var(--blue); border-color: rgba(37,99,235,.25); background: #fff }

.role-matrix-card .card-head { scroll-margin-top: 120px }
.role-matrix-card { scroll-margin-top: 110px }

.role-save-bar {
  position: sticky; bottom: 16px; z-index: 25;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; margin-top: 8px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lg);
}
.role-save-bar b { font-size: 13.5px; display: block }

.settings-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 6px; border-radius: 50%;
  color: var(--blue); background: rgba(37,99,235,.08); font-size: 12px;
  vertical-align: middle; cursor: help;
}
.settings-section .card-head h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px }

/* ─────────── CHANGE DIFF ─────────── */
.diff { display: flex; flex-direction: column; gap: 8px }
.diff-row {
  display: grid; grid-template-columns: 150px 1fr auto 1fr; gap: 12px;
  align-items: center; padding: 10px 14px;
  background: var(--bg4); border: 1px solid var(--border-2); border-radius: var(--r-sm);
  font-size: 12.5px;
}
.diff-field { font-weight: 700; color: var(--text-dim) }
.diff-old { color: #BE123C; background: rgba(244,63,94,.08); padding: 3px 9px; border-radius: 7px;
            font-family: 'JetBrains Mono'; font-size: 11.5px; word-break: break-all }
.diff-new { color: #047857; background: rgba(16,185,129,.09); padding: 3px 9px; border-radius: 7px;
            font-family: 'JetBrains Mono'; font-size: 11.5px; word-break: break-all }
.diff-arrow { color: var(--text-faint); font-size: 11px }
@media (max-width: 700px) {
  .diff-row { grid-template-columns: 1fr; gap: 6px }
  .diff-arrow { display: none }
}

/* ─────────── PAGINATION ─────────── */
.pagination { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 16px 0 }
.pagination a, .pagination span {
  min-width: 36px; height: 36px; padding: 0 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 13px; font-weight: 700;
  background: var(--bg2); border: 1px solid var(--border); color: var(--text-dim);
  transition: var(--t);
}
.pagination a:hover { border-color: var(--blue); color: var(--blue) }
.pagination .active span { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--sh-brand) }
.pagination .disabled span { opacity: .45 }

.audit-results { position: relative }
.audit-loading {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: rgba(255,255,255,.55); backdrop-filter: blur(2px);
  border-radius: inherit;
}
.audit-loading[hidden] { display: none !important }
#audit-table-wrap { transition: opacity .15s ease }

/* ─────────── SMALL PIECES ─────────── */
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 12px 18px; font-size: 13.5px }
.kv dt { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
         color: var(--text-faint); padding-top: 3px }
.kv dd { color: var(--text); min-width: 0; word-break: break-word }
@media (max-width: 620px) { .kv { grid-template-columns: 1fr; gap: 4px 0 } .kv dd { margin-bottom: 12px } }

.section-title {
  font-family: 'Poppins'; font-weight: 700; font-size: 15px;
  margin: 26px 0 14px; display: flex; align-items: center; gap: 10px;
}
.section-title i { color: var(--blue) }

.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap }
.inline-form .field { margin-bottom: 0; flex: 1; min-width: 180px }

.stat-mini { display: flex; gap: 26px; flex-wrap: wrap; padding: 18px 22px }
.stat-mini .m b { font-family: 'Poppins'; font-size: 21px; font-weight: 800; display: block; line-height: 1 }
.stat-mini .m span { font-size: 11.5px; color: var(--text-light) }

/* A row that needs to catch the eye without shouting */
tr.row-flag td { background: rgba(245,158,11,.06) }
tr.row-danger td { background: rgba(244,63,94,.05) }

/* ─────────── ADVANCED DASHBOARD ─────────── */
.dash-updated { color: var(--text-faint); font-weight: 500 }
.dash-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-bottom: 18px;
}
@media (max-width: 1100px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) { .dash-kpis { grid-template-columns: 1fr } }

a.dash-kpi { text-decoration: none; color: inherit; display: block }
a.dash-kpi:hover .sval { color: var(--blue) }
.dash-kpi-hint {
  font-size: 11.5px; color: var(--text-faint); margin-top: 6px; font-weight: 600;
}

.dash-actions {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px; margin-bottom: 18px;
}
@media (max-width: 1100px) { .dash-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 700px) { .dash-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.dash-action {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 14px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--bg2); text-decoration: none; color: inherit;
  font-weight: 700; font-size: 13px; transition: var(--t);
}
.dash-action i {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  color: #fff; background: var(--grad-brand); font-size: 14px;
}
.dash-action:hover {
  border-color: rgba(37,99,235,.4); background: #fff;
  box-shadow: var(--sh-sm); transform: translateY(-2px);
}

.dash-list { display: flex; flex-direction: column; gap: 8px }
.dash-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 12px;
  border: 1px solid var(--border-2); background: var(--bg2);
  text-decoration: none; color: inherit; transition: var(--t);
}
a.dash-row:hover {
  border-color: rgba(37,99,235,.35); background: #fff; transform: translateY(-1px);
}
.dash-ico {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: 13px;
  background: var(--grad-brand);
}
.dash-ico.soft { background: var(--bg3); color: var(--blue) }
.dash-row-text { flex: 1; font-size: 13.5px; font-weight: 600 }
.dash-row-main { flex: 1; min-width: 0 }
.dash-row-main b {
  display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-row-main small { display: block; font-size: 12px; color: var(--text-light); margin-top: 2px }

.dash-empty { text-align: center; padding: 28px 12px; color: var(--text-light) }
.dash-empty i { font-size: 22px; color: #10B981; margin-bottom: 8px; display: block }
.dash-empty p { font-size: 13px }

.dash-mix { margin-bottom: 14px }
.dash-mix:last-child { margin-bottom: 0 }
.dash-mix-top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; margin-bottom: 6px;
}
.dash-mix-top b { text-transform: capitalize; font-weight: 700 }
.dash-mix-top span { color: var(--text-light); font-weight: 700 }

.dash-health {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.dash-health-item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: 12px; border: 1px solid var(--border-2);
  background: var(--bg2); text-decoration: none; color: inherit;
}
.dash-health-item b { font-family: 'Poppins'; font-size: 22px; font-weight: 800; line-height: 1 }
.dash-health-item:hover { border-color: rgba(37,99,235,.35); background: #fff }
.dash-health-meta { margin-top: 14px; font-size: 12px }

.dash-pulse {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.dash-pulse > div {
  padding: 14px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--border-2);
}
.dash-pulse b {
  display: block; font-family: 'Poppins'; font-size: 22px; font-weight: 800; line-height: 1;
}
.dash-pulse span { display: block; margin-top: 6px; font-size: 11.5px; color: var(--text-light); font-weight: 600 }

.bars-sm { min-height: 120px }
.bars-sm .bar span { font-size: 9px }

/* ─────────── LOGO + LOADERS ─────────── */
.tb-brand { display: none; align-items: center; flex-shrink: 0; text-decoration: none }
.tb-brand img { display: block; height: 28px; width: auto; max-width: 120px; object-fit: contain; background: transparent }
@media (max-width: 980px) { .tb-brand { display: flex } }

.spinner {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2.5px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg) } }

.page-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; min-height: 60vh; color: var(--text-light); text-align: center;
}
.page-loading::before {
  content: ''; width: 132px; height: 32px; flex-shrink: 0;
  background: url('/brand/commhub-logo.png') center / contain no-repeat;
}
.page-loading .spinner { width: 30px; height: 30px; border-width: 3px; color: var(--blue) }
.page-loading.compact { min-height: 180px; gap: 12px }
.page-loading.compact::before { width: 108px; height: 26px }