/* ============================================================================
   Votira — App layer (v3)
   Loaded AFTER theme.css. Two jobs:
     1. Re-skin the Bootstrap 5 components we rely on (inputs, dropdowns,
        accordion, modals) with the v3 tokens.
     2. Carry the app-only pieces that are not part of the shared component
        vocabulary: audit log, language switcher, live-link bar, admin console.
   Design tokens live in theme.css — never redeclare colours here.
   The product surface (dashboard, surveys, results, settings, billing,
   organization, AI panel, support) and the public pages are both built from
   the v3 components in theme.css. The `-vai` block below is what remains of
   the pre-v3 vocabulary and is now used ONLY by the admin console
   (votira/app/templates/admin/*); delete it once that console is migrated.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Buttons  (.btn-vai-* — admin console only, same shape as .btn-t-*)
   ------------------------------------------------------------------------- */
.btn-vai-primary,
.btn-vai-secondary,
.btn-vai-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 600; font-size: .9375rem; line-height: 1;
  padding: 11px 18px; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
}
.btn-vai-primary:focus-visible,
.btn-vai-secondary:focus-visible,
.btn-vai-ghost:focus-visible { box-shadow: var(--focus-ring); }

.btn-vai-primary { background: var(--brand); border-color: var(--brand); color: var(--text-onbrand); box-shadow: var(--shadow-xs); }
.btn-vai-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--text-onbrand); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-vai-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text-body); }
.btn-vai-secondary:hover { background: var(--surface-2); border-color: var(--text-muted); color: var(--text); transform: translateY(-1px); }

.btn-vai-ghost { background: transparent; border-color: transparent; color: var(--brand); padding: 9px 12px; }
.btn-vai-ghost:hover { background: var(--brand-tint); color: var(--brand-hover); }

/* Bootstrap size modifiers must still win over the base padding above. */
.btn-vai-primary.btn-sm,
.btn-vai-secondary.btn-sm,
.btn-vai-ghost.btn-sm { padding: 7px 12px; font-size: .8125rem; gap: 6px; }
.btn-vai-primary.btn-lg,
.btn-vai-secondary.btn-lg { padding: 14px 26px; font-size: 1.0625rem; }

.btn-vai-primary:disabled,
.btn-vai-secondary:disabled,
.btn-vai-ghost:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------------------------------------------------------------------------
   2. Forms  (Bootstrap controls re-skinned to match .input-t)
   ------------------------------------------------------------------------- */
.form-label,
.form-vai .form-label { font-size: .875rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }

.form-control,
.form-select,
.form-vai .form-control {
  font-family: var(--font); font-size: .9375rem; color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 11px 13px; line-height: 1.4;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-control:focus,
.form-select:focus,
.form-vai .form-control:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
.form-control::placeholder,
.form-vai .form-control::placeholder { color: var(--text-muted); }
.form-control:disabled,
.form-select:disabled { background-color: var(--surface-2); color: var(--text-muted); }
.form-control-sm, .form-select-sm { padding: 7px 11px; font-size: .875rem; }
textarea.form-control { min-height: 96px; }
.form-control-color { width: 48px; height: 38px; padding: 2px; }

/* Uploaded header / background image preview in the survey appearance card. */
.appearance-preview { max-height: 80px; border-radius: var(--r-sm); border: 1px solid var(--border); }
.appearance-preview.sm { max-height: 60px; }

.form-check-input { border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
.form-check-label { font-size: .9375rem; color: var(--text-body); }
.form-text { font-size: .8125rem; color: var(--text-secondary); }

.input-group .form-control:focus { z-index: 3; }

/* ---------------------------------------------------------------------------
   3. Cards & badges  (admin console only)
   ------------------------------------------------------------------------- */
.card-vai {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 24px; box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t), border-color var(--t);
}
.card-vai:hover { box-shadow: var(--shadow-sm); }

.badge-vai {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--brand-tint); color: var(--brand);
}
.badge-published,
.badge-active { background: var(--success-tint); color: var(--success); }
.badge-draft,
.badge-expired,
.badge-support-closed { background: var(--surface-2); color: var(--text-secondary); }
.badge-closed,
.badge-cancelled { background: var(--danger-tint); color: var(--danger); }
.badge-trialing,
.badge-support-open { background: var(--brand-tint); color: var(--brand); }
.badge-past_due,
.badge-support-in_progress { background: var(--warning-tint); color: var(--warning); }

/* Compact metric tile used in the results summary grid. Mobile-first: tighter
   padding and a fluid value size so long labels never overflow the card. */
.stat-tile { height: 100%; min-width: 0; padding: 18px 12px; text-align: center; }
.stat-tile-value {
  font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 700; line-height: 1.2;
  color: var(--text); overflow-wrap: anywhere;
}
/* Keeps the badge tile the same height as the numeric ones. */
.stat-tile-badge {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(clamp(1.5rem, 6vw, 2rem) * 1.2);
}
.stat-tile-label { font-size: .8125rem; color: var(--text-secondary); }
@media (min-width: 576px) { .stat-tile { padding: 24px; } }

/* ---------------------------------------------------------------------------
   4. Alerts, flash messages & toasts
   The `-vai` alert block is admin-console only; the product uses `.alert-t`.
   ------------------------------------------------------------------------- */
.flash-container { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.alert-vai {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  font-size: .9rem; color: var(--text-body);
}
.alert-vai > i { font-size: 1.15rem; flex: none; margin-top: 1px; }
.alert-vai .alert-vai-text { flex: 1; min-width: 0; }
.alert-vai-close {
  flex: none; margin-left: auto; border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: .9rem; line-height: 1; padding: 3px 5px; border-radius: var(--r-xs);
}
.alert-vai-close:hover { color: var(--text); background: rgba(17, 24, 39, .06); }

.alert-vai.success { background: var(--success-tint); border-color: var(--success-border); }
.alert-vai.success > i { color: var(--success); }
.alert-vai.error,
.alert-vai.danger { background: var(--danger-tint); border-color: var(--danger-border); }
.alert-vai.error > i,
.alert-vai.danger > i { color: var(--danger); }
.alert-vai.warning { background: var(--warning-tint); border-color: var(--warning-border); }
.alert-vai.warning > i { color: var(--warning); }
.alert-vai.info { background: var(--info-tint); border-color: var(--info-border); }
.alert-vai.info > i { color: var(--info); }

.toast-stack {
  position: fixed; top: 16px; right: 16px; z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px;
  width: min(360px, calc(100vw - 32px));
}
.toast-stack .alert-vai,
.toast-stack .alert-t { background: var(--surface); box-shadow: var(--shadow-md); animation: toastIn .18s ease-out; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------------------------------------------------------------------
   5. Bits the templates use that theme.css does not name
   ------------------------------------------------------------------------- */
.results-bar .rb-count { flex: 0 0 auto; min-width: 36px; text-align: right; font-size: .8125rem; font-weight: 700; color: var(--text); }

.sortable-drag { box-shadow: var(--shadow-lg); transform: scale(1.02) rotate(-.6deg); }
.sortable-ghost > * { visibility: hidden; }
@keyframes cardReordered {
  0%   { box-shadow: 0 0 0 0 rgba(79, 70, 229, .35); }
  40%  { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}
.card-reordered { animation: cardReordered 1.9s ease-out; }

/* "or" separator on the auth screens */
.divider {
  display: flex; align-items: center; gap: 12px; margin: 20px 0;
  border: none; font-size: .8125rem; color: var(--text-muted);
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Password strength meter (advisory, never blocking) */
.pw-strength { margin-top: 8px; }
.pw-strength[hidden] { display: none; }
.pw-strength-label { font-size: .75rem; font-weight: 600; white-space: nowrap; }
.pw-strength-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pw-strength-bar > i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .2s ease, background .2s ease; }

/* Persistent "live link" bar (survey editor + results).
   Full-bleed inside .main-content and pinned while the page scrolls, so the
   public survey URL is always visible instead of hiding in the page header.
   It sits under the mobile topbar and at the very top from 992px up, where
   that topbar is hidden. */
.link-bar {
  position: sticky; top: var(--topbar-h); z-index: var(--z-sticky);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 8px 10px;
  margin: 0 -16px 20px; padding: 10px 16px;
  background: var(--brand-tint); border-bottom: 1px solid var(--brand-tint-2);
}
.link-bar-label {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--brand);
}
.link-bar-url {
  grid-column: 1 / -1; grid-row: 2; display: block; min-width: 0;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--brand-tint-2);
  font-family: var(--font-mono); font-size: .875rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.link-bar-actions {
  grid-column: 2; grid-row: 1;
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
}
.link-bar-actions .btn-t { min-height: 40px; }
.link-bar-open { width: 40px; padding: 0; }
@media (min-width: 576px) {
  .link-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .link-bar-url { grid-column: 2; grid-row: 1; }
  .link-bar-actions { grid-column: 3; grid-row: 1; }
}
@media (min-width: 992px) {
  .link-bar { top: 0; margin: 0 -40px 24px; padding: 12px 40px; }
}

/* ---------------------------------------------------------------------------
   7. Language switcher (Bootstrap dropdown)
   ------------------------------------------------------------------------- */
.lang-switcher .lang-switcher-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-body);
  font-size: .8125rem; font-weight: 700; line-height: 1;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.lang-switcher .lang-switcher-toggle:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.lang-switcher .lang-switcher-toggle:focus-visible { box-shadow: var(--focus-ring); }
.lang-switcher .lang-switcher-toggle .fi { border-radius: 3px; line-height: 1; }
.lang-switcher .lang-switcher-label { letter-spacing: .02em; }

.lang-switcher .lang-switcher-menu {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); padding: 6px; min-width: 190px;
}
.lang-switcher .lang-switcher-menu .dropdown-item {
  display: flex; align-items: center; gap: 9px;
  border-radius: var(--r-xs); padding: 8px 10px;
  font-size: .875rem; font-weight: 600; color: var(--text-body);
}
.lang-switcher .lang-switcher-menu .dropdown-item:hover { background: var(--surface-2); color: var(--text); }
.lang-switcher .lang-switcher-menu .dropdown-item.active { background: var(--brand-tint); color: var(--brand); }

.lang-switcher-sidebar { width: 100%; margin-bottom: 12px; }
.lang-switcher-sidebar .lang-switcher-toggle { width: 100%; justify-content: flex-start; padding: 10px 12px; }
.lang-switcher-sidebar .lang-switcher-toggle::after { margin-left: auto; }
.lang-switcher-sidebar .lang-switcher-menu { width: 100%; }

/* ---------------------------------------------------------------------------
   8. Audit log (stacked cards on mobile, real table from 992px)
   ------------------------------------------------------------------------- */
.audit-filters { margin-bottom: 0; }
.audit-filters-grid { display: grid; gap: 12px; }
.audit-filter { display: flex; flex-direction: column; }
.audit-filter .form-label { font-size: .8125rem; }
.audit-filter-actions { flex-direction: row; align-items: flex-end; gap: 8px; }
.audit-filter-actions .btn, .audit-filter-actions .btn-t { flex: 1; }

.audit-icon {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center; font-size: .875rem;
  background: var(--brand-tint); color: var(--brand);
}
.audit-icon.tone-emerald { background: var(--success-tint); color: var(--success); }
.audit-icon.tone-amber { background: var(--warning-tint); color: var(--warning); }
.audit-icon.tone-red { background: var(--danger-tint); color: var(--danger); }
.audit-icon.tone-gray { background: var(--surface-2); color: var(--text-secondary); }

.audit-event { display: flex; align-items: center; gap: 10px; }
.audit-details { color: var(--text-secondary); word-break: break-word; }
.audit-actor { display: inline-flex; align-items: center; gap: 5px; color: var(--text-body); }
.audit-actor .bi { color: var(--text-muted); font-size: .8125rem; }
.audit-time { font-size: .8125rem; color: var(--text-secondary); white-space: nowrap; }

/* Search input with a leading icon. */
.search-field { position: relative; }
.search-field > .bi {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: .875rem; pointer-events: none;
}
.search-field .form-control { padding-left: 34px; }

/* Previous / next pager under a listing. */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }

/* Mobile-first data table: stacked label/value cards on phones, a real table
   from 992px up. Shared by the account audit log and the admin console. */
.audit-table-wrap, .data-table-wrap { width: 100%; }
.audit-table, .data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.audit-table thead, .data-table thead { display: none; }
.audit-table tbody tr, .data-table tbody tr {
  display: block; margin-bottom: 10px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
}
.audit-table td, .data-table td { display: flex; gap: 12px; padding: 5px 0; border: none; color: var(--text-body); }
.audit-table td::before, .data-table td::before {
  content: attr(data-label); flex: 0 0 38%;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
}
.audit-table td[data-label]:first-child, .data-table td[data-label]:first-child { padding-bottom: 8px; }
.audit-table td[data-label]:first-child::before, .data-table td[data-label]:first-child::before { display: none; }

@media (min-width: 768px) {
  .audit-filters-grid { grid-template-columns: repeat(4, 1fr); align-items: end; }
  /* Free-text search is the primary filter, so it gets a double column. */
  .audit-filter-search { grid-column: span 2; }
}
@media (min-width: 992px) {
  .audit-table-wrap, .data-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
  .audit-table thead, .data-table thead { display: table-header-group; }
  .audit-table th, .data-table th {
    text-align: left; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); padding: 12px 16px; background: var(--surface-2);
    border-bottom: 1px solid var(--border); white-space: nowrap;
  }
  .audit-table tbody tr, .data-table tbody tr { display: table-row; margin: 0; padding: 0; border: none; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--border); }
  .audit-table tbody tr:last-child, .data-table tbody tr:last-child { border-bottom: none; }
  .audit-table td, .data-table td { display: table-cell; padding: 13px 16px; vertical-align: middle; }
  .audit-table td::before, .data-table td::before { display: none; }
  .audit-table td[data-label]:first-child, .data-table td[data-label]:first-child { padding-bottom: 13px; }
}

/* ---------------------------------------------------------------------------
   9. Bootstrap components
   ------------------------------------------------------------------------- */
.dropdown-menu { border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 6px; }
.dropdown-item { border-radius: var(--r-xs); padding: 8px 10px; font-size: .875rem; font-weight: 600; color: var(--text-body); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--text); }
.dropdown-item.active, .dropdown-item:active { background: var(--brand-tint); color: var(--brand); }
.dropdown-divider { border-color: var(--border); }

.modal-content { border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--border); }
.modal-title { font-size: 1.0625rem; font-weight: 700; color: var(--text); }

.nav-tabs { border-color: var(--border); }
.nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-weight: 600; }
.nav-tabs .nav-link:hover { border-bottom-color: var(--border-strong); color: var(--text); }
.nav-tabs .nav-link.active { border-bottom-color: var(--brand); color: var(--brand); background: transparent; }

.progress { background: var(--surface-2); border-radius: 999px; }
.progress-bar { background: var(--brand); }

code:not(.code-block) { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: .85em; color: var(--brand-hover); }

/* ---------------------------------------------------------------------------
   10. Admin console (platform control plane)
   Operator-only back office. Reuses the product's tokens and components so the
   console looks and behaves like the app; only the pieces that have no
   equivalent in the tenant UI (utilization meters, resource cards, the
   distribution bars) are defined here. Mobile-first like everything else.
   ------------------------------------------------------------------------- */
.admin-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  padding: 2px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--brand-tint); color: var(--brand); border: 1px solid var(--brand-soft);
}

.admin-meta { font-size: .75rem; color: var(--text-muted); }
.admin-meta .dot { margin: 0 6px; }

/* Compact KPI tile: denser than .stat-card because the console shows many at
   once. Two per row on phones, up to six on wide screens. */
.admin-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.admin-kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 16px; box-shadow: var(--shadow-xs); min-width: 0;
}
.admin-kpi .k-label {
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin-bottom: 6px;
}
.admin-kpi .k-value {
  font-size: 1.375rem; font-weight: 800; line-height: 1.1; color: var(--text);
  letter-spacing: -0.02em; overflow-wrap: anywhere;
}
.admin-kpi .k-sub { font-size: .75rem; color: var(--text-secondary); margin-top: 4px; }
.admin-kpi.accent .k-label { color: var(--accent-hover); }
.admin-kpi.brand .k-value { color: var(--brand); }

@media (min-width: 768px) { .admin-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .admin-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.admin-kpis.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .admin-kpis.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Horizontal distribution bar used for plan mix, languages, credit packs. */
.bar-row { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; align-items: center; gap: 10px; margin-bottom: 8px; }
.bar-row .b-label { font-size: .8125rem; font-weight: 600; color: var(--text-body); overflow-wrap: anywhere; }
.bar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.bar-fill.accent { background: var(--accent); }
.bar-fill.warn { background: var(--warning); }
.bar-row .b-value { font-size: .8125rem; font-weight: 700; color: var(--text); white-space: nowrap; }

/* Signup sparkline: pure CSS columns, no charting dependency. */
.spark { display: flex; align-items: flex-end; gap: 4px; height: 88px; }
.spark .s-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.spark .s-bar { border-radius: var(--r-xs) var(--r-xs) 0 0; background: var(--brand-tint-2); min-height: 3px; }
.spark .s-col:last-child .s-bar { background: var(--brand); }
.spark-axis { display: flex; gap: 4px; margin-top: 6px; }
.spark-axis span { flex: 1 1 0; text-align: center; font-size: .625rem; color: var(--text-muted); overflow: hidden; }

/* Azure resource card + utilization readouts. */
.res-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.res-icon {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
  background: var(--brand-tint); color: var(--brand);
}
.res-name { font-size: .9375rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.metric-item { min-width: 0; }
.metric-item .m-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.metric-item .m-value { font-size: 1rem; font-weight: 700; color: var(--text); margin-top: 2px; overflow-wrap: anywhere; }

.sev-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--text-muted); flex: none; }
.sev-dot.ok { background: var(--success); }
.sev-dot.warn { background: var(--warning); }
.sev-dot.crit { background: var(--danger); }

/* Azure topology: subscription -> resource groups -> resources. Pure CSS, no
   charting dependency, and it reflows to a single column on phones. */
.topo-sub {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 6px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 700;
  background: var(--brand-tint); color: var(--brand); border: 1px solid var(--brand-soft);
}
.topo-groups { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .topo-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .topo-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.topo-group {
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px;
  background: var(--surface-2); min-width: 0; position: relative;
}
.topo-group-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.topo-group-name { font-size: .875rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.topo-group-meta { font-size: .6875rem; color: var(--text-muted); }
.topo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.topo-list li {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xs);
  padding: 7px 10px; font-size: .8125rem; color: var(--text-body);
}
.topo-list li.is-problem { border-color: var(--warning); background: var(--warning-tint); }
.topo-res { font-weight: 600; overflow-wrap: anywhere; }
.topo-type { margin-left: auto; font-size: .6875rem; color: var(--text-muted); white-space: nowrap; }

/* Compact metric chips shown inside a resource row. */
.inline-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.im {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 2px 7px; font-size: .75rem; white-space: nowrap;
}
.im-l { color: var(--text-muted); }
.im-v { font-weight: 700; color: var(--text); }
.im-v.warn { color: var(--warning); }
.im-v.crit { color: var(--danger); }

/* Support conversation thread (operator console + customer view). */
.thread-msg { padding: 16px 0; border-bottom: 1px solid var(--border); }
.thread-msg:last-child { border-bottom: none; padding-bottom: 0; }
.thread-msg:first-child { padding-top: 0; }
.thread-msg.is-operator { background: var(--brand-tint); margin: 0 -24px; padding: 16px 24px; border-bottom: none; }
.thread-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.thread-author { font-size: .875rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.thread-body { font-size: .9375rem; color: var(--text-body); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.thread-extra { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }