/* =============================================================================
   TOLA S6 — REV-B brands · products · users & brand accounts (AD-14 · AD-25 · AD-26 · AD-32)
   Dark-mode safe: colours come from design-system variables only.
   ============================================================================= */

/* Logo swatch (initials on brand colour) */
.brx-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--brx-p, #1F2329); color: var(--brx-a, #C9A961);
  font-weight: 800; font-size: 13px; letter-spacing: .5px;
  box-shadow: inset 0 -3px 0 var(--brx-a, #C9A961);
}
.brx-logo-lg { width: 52px; height: 52px; font-size: 18px; border-radius: 14px; }
.brx-title { display: flex; align-items: center; gap: 14px; }
.brx-title h1 { margin: 0; }

.brx-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--brand-gold); cursor: pointer; text-align: start; }
.brx-link:hover { text-decoration: underline; }
.brx-link:focus-visible, .brx-step-btn:focus-visible, .brx-tip:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; border-radius: 4px; }

.brx-small { font-size: 12px; }
.brx-strong { font-weight: 700; }
.brx-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.6; }
.brx-warn { color: var(--color-warn); }
.brx-err { font-size: 12px; color: var(--color-danger); margin-top: 4px; font-weight: 600; }
.brx-errsum {
  border: 1px solid var(--color-danger-border, var(--color-danger)); background: var(--color-danger-bg, transparent);
  color: var(--color-danger); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 12px; font-weight: 600;
}
.brx-note { background: var(--surface-alt); border-radius: var(--radius-md); padding: 12px; font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.brx-danger-txt { color: var(--color-danger) !important; }
.brx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.brx-demo { padding: 8px; border: 1px dashed var(--border-color); border-radius: var(--radius-md); }
.brx-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.brx-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--surface-alt); color: var(--text-muted); font-size: 11px; font-family: var(--font-mono, monospace); }
.tola-btn-primary .brx-count { background: rgba(255, 255, 255, .22); color: inherit; }
.brx-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.brx-kpis { margin-bottom: 16px; }
.brx-tip { display: inline-block; cursor: help; }
.brx-row-muted td { opacity: .72; }
.brx-row-hl td { background: var(--surface-alt); font-weight: 600; }
.brx-cap { caption-side: top; text-align: start; font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 6px 0; }
.brx-auto { width: auto; min-width: 180px; }
.brx-denied-action { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 360px; }

/* Forms */
[aria-invalid="true"].tola-input, [aria-invalid="true"].tola-select, [aria-invalid="true"].tola-textarea, input[aria-invalid="true"] {
  border-color: var(--color-danger) !important; box-shadow: 0 0 0 1px var(--color-danger);
}
.brx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.brx-span2 { grid-column: 1 / -1; }
@media (max-width: 760px) { .brx-grid { grid-template-columns: 1fr; } }
.brx-fieldset { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px 12px; margin: 8px 0; }
.brx-fieldset legend { font-size: 12px; font-weight: 700; padding: 0 6px; color: var(--text-muted); }
.brx-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; margin: 4px 0; }
.brx-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.brx-color { display: flex; gap: 8px; align-items: center; }
.brx-color input[type="color"] { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-color); cursor: pointer; }
.brx-ol { margin: 0 0 10px; padding-inline-start: 20px; font-size: 13px; line-height: 1.9; }

/* Wizard */
.brx-steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; width: 100%; flex-wrap: wrap; }
.brx-step { flex: 1 1 140px; }
.brx-step-btn {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color);
  color: var(--text-muted); font: inherit; font-size: 13px; cursor: default; text-align: start;
}
.brx-step.done .brx-step-btn { cursor: pointer; color: var(--color-ok); border-color: var(--color-ok-border, var(--color-ok)); }
.brx-step.current .brx-step-btn { color: inherit; border-color: var(--brand-gold); box-shadow: 0 0 0 1px var(--brand-gold); font-weight: 700; }
.brx-step-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-alt); font-weight: 800; font-size: 12px; flex: none; }
.brx-step.current .brx-step-n { background: var(--brand-gold); color: #111; }
.brx-step.done .brx-step-n { background: var(--color-ok-bg, var(--surface-alt)); color: var(--color-ok); }
.brx-step-title { font-size: 16px; margin: 0 0 12px; }
.brx-wiz-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-color); }
.brx-preview { display: flex; align-items: flex-end; }
.brx-preview-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--brx-p); color: #fff; border-bottom: 4px solid var(--brx-a); min-width: 240px; }
.brx-preview-card .brx-logo { background: rgba(255, 255, 255, .14); }
.brx-existing { border: 1px solid var(--color-warn-border, var(--color-warn)); background: var(--color-warn-bg, var(--surface-alt)); border-radius: var(--radius-md); padding: 12px; margin: 8px 0; }
.brx-existing-body { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.brx-summary h2 { font-size: 16px; margin: 0 0 10px; }
.brx-summary ul, .brx-impact ul, .brx-scope ul { margin: 6px 0 0; padding-inline-start: 18px; line-height: 2; font-size: 13px; }
.brx-impact { background: var(--surface-alt); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 10px; font-size: 13px; }

/* Detail */
.brx-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .brx-cols { grid-template-columns: 1fr; } }
.brx-dl { margin: 0; }
.brx-dl-row { display: grid; grid-template-columns: 150px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.brx-dl-row dt { color: var(--text-muted); }
.brx-dl-row dd { margin: 0; }
.brx-swatches { display: grid; gap: 8px; font-size: 13px; }
.brx-swatch { display: inline-block; width: 22px; height: 22px; border-radius: 6px; vertical-align: middle; margin-inline-end: 8px; border: 1px solid var(--border-color); }

/* Notes chips (structured top / heart / base) */
.brx-notes { min-width: 180px; }
.brx-notes-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0; }
.brx-notes-k { font-size: 11px; color: var(--text-muted); min-width: 38px; }
.brx-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.brx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; background: var(--surface-alt); border: 1px solid var(--border-color); white-space: nowrap; }
.brx-chip-top { border-color: var(--color-info-border, var(--border-color)); color: var(--color-info); }
.brx-chip-heart { border-color: var(--color-danger-border, var(--border-color)); color: var(--color-danger); }
.brx-chip-base { border-color: var(--color-warn-border, var(--border-color)); color: var(--color-warn); }
.brx-chip-brand { border-color: var(--brand-gold); }
.brx-chip .tola-chip-remove { background: none; border: 0; cursor: pointer; color: var(--text-muted); padding: 0 2px; font-size: 11px; }
.brx-chip .tola-chip-remove:hover { color: var(--color-danger); }

/* Side drawer (inline-end side — left in RTL) */
.brx-drawer-backdrop { justify-content: flex-end; align-items: stretch; }
.brx-drawer {
  position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(480px, 100vw);
  background: var(--surface-color); border-inline-start: 1px solid var(--border-color);
  display: flex; flex-direction: column; box-shadow: 0 0 40px rgba(0, 0, 0, .25); z-index: 1001;
}
.brx-drawer-wide { width: min(760px, 100vw); }
.brx-drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
.brx-drawer .tola-modal-footer { border-top: 1px solid var(--border-color); }

/* Scope preview (AD-32) */
.brx-scope { border: 1px solid var(--border-color); border-inline-start: 4px solid var(--brand-gold); border-radius: var(--radius-md); padding: 10px 12px; margin-top: 12px; background: var(--surface-alt); font-size: 13px; }
.brx-scope-empty { border-inline-start-color: var(--color-danger); }
.brx-scope-h { font-weight: 800; margin-bottom: 6px; }
.brx-scope > div { margin: 4px 0; }

/* Denied panel (service-level 403) */
.brx-denied { max-width: 620px; margin: 40px auto; text-align: center; padding: 28px; border: 1px solid var(--color-danger-border, var(--border-color)); border-radius: var(--radius-md); background: var(--surface-color); }
.brx-denied h1 { font-size: 20px; margin: 8px 0; color: var(--color-danger); }
.brx-denied-i { font-size: 34px; }

/* Isolation test */
.brx-iso .tola-label { margin: 0; }
.brx-iso-head { margin: 12px 0 6px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }