/* ==========================================================================
   Valor da Ação — Design System · theme.css
   CSS Custom Properties + Dark Mode + UI Components
   WCAG 2.2 compliant · Bootstrap 4 compatible
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LIGHT MODE TOKENS (default)
   -------------------------------------------------------------------------- */
:root {
  /* ── Background layers (lightest on top) ── */
  --vda-bg:             #f8f9fa;
  --vda-bg-dots:        #e2e6ea;
  --vda-surface-0:      #ffffff;   /* cards, modals */
  --vda-surface-1:      #f1f3f5;   /* table row alt, sidebar */
  --vda-surface-2:      #e9ecef;   /* input bg, code, well */

  /* ── Borders ── */
  --vda-border:         #dee2e6;
  --vda-border-light:   #e9ecef;

  /* ── Text (min 7:1 contrast on surface-0) ── */
  --vda-text:           #212529;
  --vda-text-muted:     #6c757d;
  --vda-text-on-primary:#ffffff;

  /* ── Brand / Primary ── */
  --vda-primary:        #0b5cab;
  --vda-primary-light:  #eaf3ff;
  --vda-primary-hover:  #094e94;

  /* ── Semantic ── */
  --vda-success:        #198754;
  --vda-success-soft:   #d1e7dd;
  --vda-success-text:   #0f5132;
  --vda-warning:        #664d03;
  --vda-warning-soft:   #fff3cd;
  --vda-warning-text:   #664d03;
  --vda-danger:         #842029;
  --vda-danger-soft:    #f8d7da;
  --vda-danger-text:    #58151c;
  --vda-info:           #055160;
  --vda-info-soft:      #cff4fc;
  --vda-info-text:      #055160;

  /* ── Navbar / Topbar (always dark) ── */
  --vda-navbar-bg:      #212529;
  --vda-navbar-text:    #f8f9fa;

  /* ── Sidebar ── */
  --vda-sidebar-bg:         #f8f9fa;
  --vda-sidebar-border:     #dee2e6;
  --vda-sidebar-text:       #495057;
  --vda-sidebar-hover-bg:   #e9ecef;
  --vda-sidebar-hover-text: #212529;
  --vda-sidebar-active-bg:  #e7f1ff;
  --vda-sidebar-active-text:#0b5cab;
  --vda-sidebar-active-bdr: #0b5cab;

  /* ── Shadows ── */
  --vda-shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
  --vda-shadow:    0 0.25rem 0.5rem  rgba(0,0,0,0.10);
  --vda-shadow-lg: 0 0.5rem  1rem   rgba(0,0,0,0.15);

  /* ── Radius ── */
  --vda-radius-sm: 0.25rem;
  --vda-radius:    0.5rem;
  --vda-radius-lg: 0.75rem;

  /* ── Transition ── */
  --vda-transition: 0.2s ease;

  /* ── Focus ring (WCAG 2.2) ── */
  --vda-focus-ring: 0 0 0 3px rgba(11,92,171,0.40);
}

/* --------------------------------------------------------------------------
   2. DARK MODE TOKENS
   Background: darkest at base → lighter surfaces → lightest interactive
   -------------------------------------------------------------------------- */
body.dark-mode {
  /* Background layers */
  --vda-bg:             #0d1117;
  --vda-bg-dots:        #161b22;
  --vda-surface-0:      #161b22;   /* cards, modals */
  --vda-surface-1:      #21262d;   /* table alt, sidebar */
  --vda-surface-2:      #30363d;   /* inputs, well */

  /* Borders */
  --vda-border:         #30363d;
  --vda-border-light:   #21262d;

  /* Text — 7:1 ratio on surface-0 (#161b22) */
  --vda-text:           #e6edf3;
  --vda-text-muted:     #8b949e;
  --vda-text-on-primary:#ffffff;

  /* Brand */
  --vda-primary:        #58a6ff;
  --vda-primary-light:  #1f3a5f;
  --vda-primary-hover:  #79c0ff;

  /* Semantic (adjusted for dark surfaces) */
  --vda-success:        #3fb950;
  --vda-success-soft:   #0d2a1b;
  --vda-success-text:   #56d364;
  --vda-warning:        #d29922;
  --vda-warning-soft:   #2d1f06;
  --vda-warning-text:   #e3b341;
  --vda-danger:         #f85149;
  --vda-danger-soft:    #2d0f0f;
  --vda-danger-text:    #ff7b72;
  --vda-info:           #58a6ff;
  --vda-info-soft:      #0d2a45;
  --vda-info-text:      #79c0ff;

  /* Navbar */
  --vda-navbar-bg:      #010409;
  --vda-navbar-text:    #e6edf3;

  /* Sidebar */
  --vda-sidebar-bg:         #0d1117;
  --vda-sidebar-border:     #30363d;
  --vda-sidebar-text:       #c9d1d9;
  --vda-sidebar-hover-bg:   #21262d;
  --vda-sidebar-hover-text: #e6edf3;
  --vda-sidebar-active-bg:  #1f3a5f;
  --vda-sidebar-active-text:#58a6ff;
  --vda-sidebar-active-bdr: #58a6ff;

  /* Shadows */
  --vda-shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,0.4);
  --vda-shadow:    0 0.25rem  0.5rem  rgba(0,0,0,0.5);
  --vda-shadow-lg: 0 0.5rem   1rem   rgba(0,0,0,0.6);

  /* Focus ring */
  --vda-focus-ring: 0 0 0 3px rgba(88,166,255,0.50);
}

/* System preference fallback — only when user has not set a preference */
@media (prefers-color-scheme: dark) {
  body:not(.light-mode):not(.dark-mode) {
    --vda-bg:             #0d1117;
    --vda-bg-dots:        #161b22;
    --vda-surface-0:      #161b22;
    --vda-surface-1:      #21262d;
    --vda-surface-2:      #30363d;
    --vda-border:         #30363d;
    --vda-border-light:   #21262d;
    --vda-text:           #e6edf3;
    --vda-text-muted:     #8b949e;
    --vda-text-on-primary:#ffffff;
    --vda-primary:        #58a6ff;
    --vda-primary-light:  #1f3a5f;
    --vda-primary-hover:  #79c0ff;
    --vda-success:        #3fb950;
    --vda-success-soft:   #0d2a1b;
    --vda-success-text:   #56d364;
    --vda-warning:        #d29922;
    --vda-warning-soft:   #2d1f06;
    --vda-warning-text:   #e3b341;
    --vda-danger:         #f85149;
    --vda-danger-soft:    #2d0f0f;
    --vda-danger-text:    #ff7b72;
    --vda-info:           #58a6ff;
    --vda-info-soft:      #0d2a45;
    --vda-info-text:      #79c0ff;
    --vda-navbar-bg:      #010409;
    --vda-navbar-text:    #e6edf3;
    --vda-sidebar-bg:         #0d1117;
    --vda-sidebar-border:     #30363d;
    --vda-sidebar-text:       #c9d1d9;
    --vda-sidebar-hover-bg:   #21262d;
    --vda-sidebar-hover-text: #e6edf3;
    --vda-sidebar-active-bg:  #1f3a5f;
    --vda-sidebar-active-text:#58a6ff;
    --vda-sidebar-active-bdr: #58a6ff;
    --vda-shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,0.4);
    --vda-shadow:    0 0.25rem  0.5rem  rgba(0,0,0,0.5);
    --vda-shadow-lg: 0 0.5rem   1rem   rgba(0,0,0,0.6);
    --vda-focus-ring: 0 0 0 3px rgba(88,166,255,0.50);
  }
}

/* --------------------------------------------------------------------------
   3. GLOBAL TOKENS APPLICATION
   -------------------------------------------------------------------------- */
body {
  background-color: var(--vda-bg);
  background-image: radial-gradient(var(--vda-bg-dots) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--vda-text);
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* --------------------------------------------------------------------------
   4. FOCUS RING — WCAG 2.2 (all interactive elements)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--vda-primary) !important;
  outline-offset: 2px !important;
  box-shadow: var(--vda-focus-ring) !important;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   5. DARK MODE — Bootstrap 4 Component Overrides
   -------------------------------------------------------------------------- */

/* ── Body & Layout ── */
body.dark-mode,
body:not(.light-mode):not(.dark-mode) {
  /* Fallback handled by prefers-color-scheme above; tokens drive everything */
}

body.dark-mode .container,
body.dark-mode .container-fluid {
  background-color: var(--vda-surface-0);
}

/* ── Cards ── */
body.dark-mode .card {
  background-color: var(--vda-surface-0);
  border-color: var(--vda-border);
  color: var(--vda-text);
}
body.dark-mode .card-header {
  background-color: var(--vda-surface-1);
  border-bottom-color: var(--vda-border);
  color: var(--vda-text);
}
body.dark-mode .card-footer {
  background-color: var(--vda-surface-1);
  border-top-color: var(--vda-border);
  color: var(--vda-text);
}

/* ── Tables ── */
body.dark-mode .table {
  color: var(--vda-text);
  border-color: var(--vda-border);
}
body.dark-mode .table td,
body.dark-mode .table th {
  border-color: var(--vda-border);
}
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--vda-surface-1);
}
body.dark-mode .table-hover tbody tr:hover {
  background-color: var(--vda-surface-2);
  color: var(--vda-text);
}
body.dark-mode .thead-light th,
body.dark-mode .thead-dark th {
  background-color: var(--vda-surface-1);
  border-color: var(--vda-border);
  color: var(--vda-text-muted);
}

/* ── Alerts ── */
body.dark-mode .alert-success {
  background-color: var(--vda-success-soft);
  border-color: var(--vda-success);
  color: var(--vda-success-text);
}
body.dark-mode .alert-warning {
  background-color: var(--vda-warning-soft);
  border-color: var(--vda-warning);
  color: var(--vda-warning-text);
}
body.dark-mode .alert-danger {
  background-color: var(--vda-danger-soft);
  border-color: var(--vda-danger);
  color: var(--vda-danger-text);
}
body.dark-mode .alert-info {
  background-color: var(--vda-info-soft);
  border-color: var(--vda-info);
  color: var(--vda-info-text);
}

/* ── Forms ── */
body.dark-mode .form-control,
body.dark-mode .custom-select {
  background-color: var(--vda-surface-2);
  border-color: var(--vda-border);
  color: var(--vda-text);
}
body.dark-mode .form-control:focus,
body.dark-mode .custom-select:focus {
  background-color: var(--vda-surface-2);
  border-color: var(--vda-primary);
  color: var(--vda-text);
  box-shadow: var(--vda-focus-ring);
}
body.dark-mode .form-control::placeholder {
  color: var(--vda-text-muted);
}
body.dark-mode .form-control[disabled],
body.dark-mode .form-control[readonly] {
  background-color: var(--vda-surface-1);
  color: var(--vda-text-muted);
}
body.dark-mode select.form-control option {
  background-color: var(--vda-surface-2);
  color: var(--vda-text);
}
body.dark-mode .form-check-label {
  color: var(--vda-text);
}
body.dark-mode label {
  color: var(--vda-text);
}
body.dark-mode .input-group-text {
  background-color: var(--vda-surface-1);
  border-color: var(--vda-border);
  color: var(--vda-text-muted);
}

/* ── Dropdowns ── */
body.dark-mode .dropdown-menu {
  background-color: var(--vda-surface-0);
  border-color: var(--vda-border);
  box-shadow: var(--vda-shadow);
}
body.dark-mode .dropdown-item {
  color: var(--vda-text);
}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: var(--vda-surface-1);
  color: var(--vda-text);
}
body.dark-mode .dropdown-divider {
  border-color: var(--vda-border);
}
body.dark-mode .dropdown-item.text-danger {
  color: var(--vda-danger-text) !important;
}

/* ── Modals ── */
body.dark-mode .modal-content {
  background-color: var(--vda-surface-0);
  border-color: var(--vda-border);
  color: var(--vda-text);
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: var(--vda-border);
}
body.dark-mode .modal-backdrop {
  background-color: #000;
}

/* ── Badges ── */
body.dark-mode .badge-secondary {
  background-color: var(--vda-surface-2);
  color: var(--vda-text);
}
body.dark-mode .badge-light {
  background-color: var(--vda-surface-1);
  color: var(--vda-text);
}

/* ── Buttons (outline variants) ── */
body.dark-mode .btn-outline-secondary {
  color: var(--vda-text-muted);
  border-color: var(--vda-border);
}
body.dark-mode .btn-outline-secondary:hover {
  background-color: var(--vda-surface-2);
  color: var(--vda-text);
  border-color: var(--vda-border);
}
body.dark-mode .btn-outline-dark {
  color: var(--vda-text);
  border-color: var(--vda-border);
}
body.dark-mode .btn-outline-dark:hover {
  background-color: var(--vda-surface-2);
  color: var(--vda-text);
}

/* ── Text utilities ── */
body.dark-mode .text-muted {
  color: var(--vda-text-muted) !important;
}
body.dark-mode .text-dark {
  color: var(--vda-text) !important;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode .h1, body.dark-mode .h2, body.dark-mode .h3,
body.dark-mode .h4, body.dark-mode .h5, body.dark-mode .h6 {
  color: var(--vda-text);
}
body.dark-mode p, body.dark-mode small, body.dark-mode span {
  color: inherit;
}

/* ── Background utilities ── */
body.dark-mode .bg-light {
  background-color: var(--vda-surface-1) !important;
}
body.dark-mode .bg-white {
  background-color: var(--vda-surface-0) !important;
}

/* ── Borders ── */
body.dark-mode .border,
body.dark-mode .border-bottom,
body.dark-mode .border-top,
body.dark-mode .border-left,
body.dark-mode .border-right {
  border-color: var(--vda-border) !important;
}

/* ── Sidebar ── */
body.dark-mode .sidebar {
  background-color: var(--vda-sidebar-bg);
  border-right-color: var(--vda-sidebar-border);
}
body.dark-mode .sidebar .nav-link {
  color: var(--vda-sidebar-text);
}
body.dark-mode .sidebar .nav-link:hover {
  background-color: var(--vda-sidebar-hover-bg);
  color: var(--vda-sidebar-hover-text);
}
body.dark-mode .sidebar .nav-link.active {
  background-color: var(--vda-sidebar-active-bg);
  color: var(--vda-sidebar-active-text);
  border-left-color: var(--vda-sidebar-active-bdr);
}
body.dark-mode .sidebar-heading {
  color: var(--vda-text-muted) !important;
}
body.dark-mode .sidebar-heading-toggle {
  color: var(--vda-text-muted) !important;
}
body.dark-mode .sidebar-heading-toggle:hover {
  background: rgba(255,255,255,0.05);
}
body.dark-mode .sidebar-status-card {
  background-color: var(--vda-surface-1);
  border-color: var(--vda-border);
  color: var(--vda-text);
}

/* ── Page header border ── */
body.dark-mode .page-header {
  border-bottom-color: var(--vda-border);
}
body.dark-mode .page-header h1 {
  color: var(--vda-text);
}

/* ── Analysis card dark mode ── */
body.dark-mode .analysis-stock-card {
  --analysis-bg:           var(--vda-surface-0);
  --analysis-border:       var(--vda-border);
  --analysis-text:         var(--vda-text);
  --analysis-muted:        var(--vda-text-muted);
  --analysis-surface:      var(--vda-surface-1);
  --analysis-primary:      var(--vda-primary);
  --analysis-primary-soft: var(--vda-primary-light);
  background: var(--vda-surface-0);
  border-color: var(--vda-border);
}
body.dark-mode .analysis-stock-card .info-card-acao {
  background: var(--vda-surface-1);
  border-color: var(--vda-border);
  color: var(--vda-text);
}
body.dark-mode .analysis-stock-card .card-header {
  background-color: var(--vda-surface-1);
  color: var(--vda-text);
}
body.dark-mode .analysis-disclaimer {
  background-color: var(--vda-warning-soft) !important;
  color: var(--vda-warning-text) !important;
}

/* ── Notas de corretagem cards ── */
body.dark-mode .card-nota,
body.dark-mode .card-resumo {
  background: linear-gradient(135deg, var(--vda-surface-1) 0%, var(--vda-surface-0) 100%);
  border-color: var(--vda-border);
  color: var(--vda-text);
}
body.dark-mode .add-ticker,
body.dark-mode .edit-ticker {
  border-color: var(--vda-border);
  color: var(--vda-text);
}

/* ── Dashboard link cards ── */
body.dark-mode .dashboard-link-card .card {
  background-color: var(--vda-surface-0);
  border-color: var(--vda-border);
  color: var(--vda-text);
}
body.dark-mode .border-left-primary { border-left-color: var(--vda-primary) !important; }
body.dark-mode .border-left-success { border-left-color: var(--vda-success) !important; }
body.dark-mode .border-left-info    { border-left-color: var(--vda-info) !important; }
body.dark-mode .border-left-warning { border-left-color: var(--vda-warning) !important; }

/* ── Border-info panels ── */
body.dark-mode .border-info {
  border-color: var(--vda-info) !important;
}

/* ── Code blocks ── */
body.dark-mode code, body.dark-mode pre {
  background-color: var(--vda-surface-1);
  color: var(--vda-text);
}

/* --------------------------------------------------------------------------
   6. DARK MODE TOGGLE BUTTON
   -------------------------------------------------------------------------- */
.vda-theme-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: background var(--vda-transition), border-color var(--vda-transition), color var(--vda-transition);
  flex-shrink: 0;
}
.vda-theme-toggle:hover,
.vda-theme-toggle:focus-visible {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.55);
  color: #fff;
  outline: 2px solid var(--vda-primary);
  outline-offset: 2px;
  box-shadow: none;
}
.vda-theme-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
}
/* Show sun icon in dark mode, moon in light */
.vda-theme-toggle .icon-sun  { display: none;  }
.vda-theme-toggle .icon-moon { display: block; }
body.dark-mode .vda-theme-toggle .icon-sun  { display: block; }
body.dark-mode .vda-theme-toggle .icon-moon { display: none;  }

/* --------------------------------------------------------------------------
   7. TOOLTIP COMPONENT — Financial Jargon
   Usage: <span class="vda-tooltip-wrap" tabindex="0">
            P/L <span class="vda-tooltip">Preço sobre Lucro: ...</span>
          </span>
   -------------------------------------------------------------------------- */
.vda-tooltip-wrap {
  position: relative;
  display: inline;
  cursor: help;
  border-bottom: 1px dotted var(--vda-primary);
  color: inherit;
}
.vda-tooltip-wrap .vda-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 1070;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 280px;
  padding: 0.55rem 0.8rem;
  background: var(--vda-surface-0);
  color: var(--vda-text);
  border: 1px solid var(--vda-border);
  border-radius: var(--vda-radius);
  box-shadow: var(--vda-shadow);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: left;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  white-space: normal;
  font-weight: 400;
}
/* Arrow */
.vda-tooltip-wrap .vda-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--vda-border);
}
.vda-tooltip-wrap:hover .vda-tooltip,
.vda-tooltip-wrap:focus .vda-tooltip {
  visibility: visible;
  opacity: 1;
}
/* Keyboard-accessible tooltip */
.vda-tooltip-wrap:focus {
  outline: 2px solid var(--vda-primary);
  outline-offset: 1px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   8. FISCAL PROGRESS STEPS
   Usage: <div class="vda-steps"> <div class="vda-step done|active"> ... </div> </div>
   -------------------------------------------------------------------------- */
.vda-steps {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.75rem;
  overflow-x: auto;
  padding: 0.5rem 0 0.75rem;
}
.vda-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  text-align: center;
  padding: 0 0.25rem;
  min-width: 60px;
}
/* Connector line between steps */
.vda-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 13px;
  left: calc(50% + 15px);
  right: calc(-50% + 15px);
  height: 2px;
  background: var(--vda-border);
}
.vda-step.done::after {
  background: var(--vda-success);
}
.vda-step-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--vda-surface-2);
  border: 2px solid var(--vda-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--vda-text-muted);
  position: relative;
  z-index: 1;
  margin-bottom: 0.35rem;
  flex-shrink: 0;
  transition: background var(--vda-transition), border-color var(--vda-transition);
}
.vda-step.done .vda-step-icon {
  background: var(--vda-success);
  border-color: var(--vda-success);
  color: #fff;
}
.vda-step.active .vda-step-icon {
  background: var(--vda-primary);
  border-color: var(--vda-primary);
  color: var(--vda-text-on-primary);
  box-shadow: 0 0 0 3px var(--vda-primary-light);
}
.vda-step-label {
  font-size: 0.65rem;
  color: var(--vda-text-muted);
  line-height: 1.3;
  max-width: 80px;
}
.vda-step.done .vda-step-label,
.vda-step.active .vda-step-label {
  color: var(--vda-text);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   9. INLINE VALIDATION
   -------------------------------------------------------------------------- */
.vda-field-valid .form-control,
.vda-field-valid .form-control-file {
  border-color: var(--vda-success) !important;
}
.vda-field-invalid .form-control,
.vda-field-invalid .form-control-file {
  border-color: var(--vda-danger) !important;
}
.vda-field-feedback {
  font-size: 0.75rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  line-height: 1.3;
}
.vda-field-feedback.valid  { color: var(--vda-success); }
.vda-field-feedback.invalid { color: var(--vda-danger); }

/* --------------------------------------------------------------------------
   10. GAMIFICATION BADGES
   -------------------------------------------------------------------------- */
.vda-badge-section {
  background: var(--vda-surface-0);
  border: 1px solid var(--vda-border);
  border-radius: var(--vda-radius-lg);
  padding: 1rem 1.25rem;
}
.vda-badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.75rem;
}
.vda-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 68px;
  opacity: 0.3;
  transition: opacity var(--vda-transition), transform var(--vda-transition);
  cursor: default;
}
.vda-badge.earned {
  opacity: 1;
}
.vda-badge.earned:hover {
  transform: scale(1.06);
}
.vda-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--vda-surface-2);
  border: 2px solid var(--vda-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 0.3rem;
  transition: background var(--vda-transition), border-color var(--vda-transition);
}
.vda-badge.earned .vda-badge-icon {
  background: var(--vda-primary-light);
  border-color: var(--vda-primary);
}
.vda-badge-label {
  font-size: 0.6rem;
  color: var(--vda-text-muted);
  line-height: 1.25;
}
.vda-badge.earned .vda-badge-label {
  color: var(--vda-text);
}

/* --------------------------------------------------------------------------
   11. JTBD CONTEXT BANNER
   -------------------------------------------------------------------------- */
.vda-jtbd-banner {
  background: linear-gradient(135deg, var(--vda-primary-light) 0%, var(--vda-surface-0) 100%);
  border: 1px solid var(--vda-border);
  border-left: 4px solid var(--vda-primary);
  border-radius: var(--vda-radius);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.vda-jtbd-banner .vda-jtbd-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.vda-jtbd-banner .vda-jtbd-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--vda-text);
  margin-bottom: 0.1rem;
}
.vda-jtbd-banner .vda-jtbd-sub {
  font-size: 0.78rem;
  color: var(--vda-text-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. POSITIVE FRICTION — Submit Overlay
   -------------------------------------------------------------------------- */
.vda-submit-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.45);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}
.vda-submit-overlay.active {
  display: flex;
}
.vda-submit-overlay-box {
  background: var(--vda-surface-0);
  border: 1px solid var(--vda-border);
  border-radius: var(--vda-radius-lg);
  padding: 2rem 2.5rem;
  text-align: center;
  box-shadow: var(--vda-shadow-lg);
  max-width: 340px;
  width: 90%;
}
.vda-submit-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--vda-border);
  border-top-color: var(--vda-primary);
  border-radius: 50%;
  animation: vda-spin 0.75s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes vda-spin {
  to { transform: rotate(360deg); }
}
.vda-submit-msg {
  font-size: 0.9rem;
  color: var(--vda-text);
  font-weight: 500;
}
.vda-submit-sub {
  font-size: 0.75rem;
  color: var(--vda-text-muted);
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   13. MICROCOPY / ENCOURAGING TEXT
   -------------------------------------------------------------------------- */
.vda-microcopy {
  font-size: 0.78rem;
  color: var(--vda-text-muted);
  font-style: italic;
  margin-top: 0.35rem;
}
.vda-microcopy.positive {
  color: var(--vda-success);
  font-style: normal;
  font-weight: 500;
}