/* ============================================================
   THEME.CSS — Pitch Green theme variants (v2.1)
   Loaded before main.css; main.css can override if needed.
   ============================================================ */

/* ============================================================
   Shared tokens (all variants) — pitch green accent + geometry + motion
   ============================================================ */
:root {
  /* pitch green signature accent */
  --pc-accent:        #0B8A4D;   /* grass / emerald — primary */
  --pc-accent-strong: #097A41;   /* hover/active */
  --pc-accent-soft:   rgba(11,138,77,0.10);
  --pc-accent-glow:   rgba(11,138,77,0.28);
  --pc-accent-2:      #17A65E;   /* mint — secondary highlight */
  --pc-success:       #0B8A4D;
  --pc-danger:        #E5544B;
  --pc-info:          #3E8FB0;   /* muted teal-blue, sparingly */

  /* geometry */
  --pc-radius:      16px;
  --pc-radius-sm:   10px;
  --pc-radius-pill: 999px;

  /* motion */
  --pc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pc-dur:  240ms;

  /* cool-tinted layered shadows */
  --pc-shadow-1: 0 1px 2px rgba(22,34,28,.05), 0 2px 6px rgba(22,34,28,.06);
  --pc-shadow-2: 0 6px 16px rgba(22,34,28,.08), 0 2px 6px rgba(22,34,28,.05);
  --pc-shadow-3: 0 18px 48px rgba(22,34,28,.14), 0 6px 16px rgba(22,34,28,.08);

  /* chart palette — green-forward */
  --pc-chart-1: #0B8A4D;
  --pc-chart-2: #17A65E;
  --pc-chart-3: #3E8FB0;
  --pc-chart-4: #E0A23C;
  --pc-chart-5: #C2698F;
  --pc-chart-6: #7C8A99;

  /* legacy compat — remap any remnant references to green */
  --pc-lime:      #0B8A4D;
  --pc-lime-dark: #097A41;
  --pc-lime-soft: rgba(11,138,77,0.15);
  --pc-yellow:    #17A65E;
}

/* ============================================================
   Pitch — LIGHT (default, performance-current)
   ============================================================ */
[data-theme="performance-current"] {
  --pc-bg:        #F7F8F7;   /* cool chalk */
  --pc-surface:   #FFFFFF;
  --pc-surface-2: #EDF0ED;   /* cool mint-gray */
  --pc-text:      #16201A;   /* cool green-ink near-black */
  --pc-muted:     #6F766F;   /* cool gray-green */
  --pc-border:    #E3E7E3;   /* cool hairline */
  --pc-navbar-bg:   rgba(255, 255, 255, 0.92);
  --pc-navbar-text: #16201A;
}

/* ============================================================
   Pitch — LIGHTER variant (performance-light)
   ============================================================ */
[data-theme="performance-light"] {
  --pc-bg:        #F8FAF8;
  --pc-surface:   #FFFFFF;
  --pc-surface-2: #EEF4EE;
  --pc-text:      #16201A;
  --pc-muted:     #7A877E;
  --pc-border:    #E4EBE4;
  --pc-navbar-bg:   rgba(255, 255, 255, 0.96);
  --pc-navbar-text: #16201A;
}

/* ============================================================
   Pitch — DARK (performance-dark) — cool forest
   ============================================================ */
[data-theme="performance-dark"] {
  color-scheme: dark;
  --pc-bg:        #111A15;
  --pc-surface:   #172010;
  --pc-surface-2: #1E2C22;
  --pc-text:      #E4EDE7;
  --pc-muted:     #8A9C91;
  --pc-border:    #283D30;
  --pc-navbar-bg:   rgba(17, 26, 21, 0.96);
  --pc-navbar-text: #E4EDE7;
  --pc-shadow-1: 0 1px 2px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.24);
  --pc-shadow-2: 0 6px 16px rgba(0,0,0,.32), 0 2px 6px rgba(0,0,0,.22);
  --pc-shadow-3: 0 18px 48px rgba(0,0,0,.44), 0 6px 16px rgba(0,0,0,.32);
}

/* ============================================================
   Shared Performance typography & shape (all variants)
   ============================================================ */
[data-theme^="performance-"] body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--pc-bg);
  color: var(--pc-text);
}

/* Display headings — Fraunces serif, sentence case */
[data-theme^="performance-"] h1,
[data-theme^="performance-"] h2,
[data-theme^="performance-"] .fm-display {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}

[data-theme^="performance-"] h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
}

[data-theme^="performance-"] h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
}

/* UI headings — Plus Jakarta Sans */
[data-theme^="performance-"] h3,
[data-theme^="performance-"] h4,
[data-theme^="performance-"] h5,
[data-theme^="performance-"] h6 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

/* Mono / data */
[data-theme^="performance-"] .mono,
[data-theme^="performance-"] code,
[data-theme^="performance-"] pre,
[data-theme^="performance-"] kbd {
  font-family: 'JetBrains Mono', monospace;
}

/* ============================================================
   Buttons — rounded, normal case, coral primary
   ============================================================ */
[data-theme^="performance-"] .btn {
  border-radius: var(--pc-radius-sm);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.9rem;
  box-shadow: var(--pc-shadow-1);
  transition: background var(--pc-dur) var(--pc-ease),
              border-color var(--pc-dur) var(--pc-ease),
              box-shadow var(--pc-dur) var(--pc-ease),
              transform var(--pc-dur) var(--pc-ease),
              color var(--pc-dur) var(--pc-ease);
}

[data-theme^="performance-"] .btn-primary {
  background: linear-gradient(135deg, var(--pc-accent) 0%, var(--pc-accent-2) 100%);
  border-color: var(--pc-accent);
  color: #FFFFFF;
  box-shadow: var(--pc-shadow-1), 0 0 0 0 var(--pc-accent-glow);
}
[data-theme^="performance-"] .btn-primary:hover,
[data-theme^="performance-"] .btn-primary:focus-visible {
  background: linear-gradient(135deg, var(--pc-accent-strong) 0%, #0B8A4D 100%);
  border-color: var(--pc-accent-strong);
  color: #FFFFFF;
  box-shadow: var(--pc-shadow-2), 0 0 0 4px var(--pc-accent-glow);
  transform: translateY(-2px);
}
[data-theme^="performance-"] .btn-primary:active {
  transform: translateY(1px);
  box-shadow: var(--pc-shadow-1);
}

[data-theme^="performance-"] .btn-outline-primary {
  border-color: var(--pc-accent);
  color: var(--pc-accent);
  background: transparent;
}
[data-theme^="performance-"] .btn-outline-primary:hover {
  background: var(--pc-accent);
  border-color: var(--pc-accent);
  color: #FFFFFF;
  box-shadow: var(--pc-shadow-2);
  transform: translateY(-1px);
}

[data-theme^="performance-"] .btn-outline-secondary {
  border-color: var(--pc-border);
  color: var(--pc-muted);
  background: transparent;
}
[data-theme^="performance-"] .btn-outline-secondary:hover {
  background: var(--pc-surface-2);
  border-color: var(--pc-border);
  color: var(--pc-text);
  box-shadow: var(--pc-shadow-1);
}

[data-theme^="performance-"] .btn-secondary {
  background: var(--pc-surface-2);
  border-color: var(--pc-border);
  color: var(--pc-text);
}
[data-theme^="performance-"] .btn-secondary:hover {
  background: var(--pc-border);
  color: var(--pc-text);
}

[data-theme^="performance-"] .btn-success {
  background: var(--pc-success);
  border-color: var(--pc-success);
  color: #FFFFFF;
}
[data-theme^="performance-"] .btn-success:hover {
  background: var(--pc-accent-strong);
  border-color: var(--pc-accent-strong);
  color: #FFFFFF;
}
[data-theme^="performance-"] .btn-outline-success {
  border-color: var(--pc-success);
  color: var(--pc-success);
}
[data-theme^="performance-"] .btn-outline-success:hover {
  background: var(--pc-success);
  border-color: var(--pc-success);
  color: #FFFFFF;
}

[data-theme^="performance-"] .btn-danger {
  background: var(--pc-danger);
  border-color: var(--pc-danger);
  color: #FFFFFF;
}
[data-theme^="performance-"] .btn-outline-danger {
  border-color: var(--pc-danger);
  color: var(--pc-danger);
}
[data-theme^="performance-"] .btn-outline-danger:hover,
[data-theme^="performance-"] .btn-outline-danger.active,
[data-theme^="performance-"] .btn-check:checked + .btn-outline-danger {
  background: var(--pc-danger);
  border-color: var(--pc-danger);
  color: #FFFFFF;
}

[data-theme^="performance-"] .btn-warning {
  background: var(--pc-accent-2);
  border-color: var(--pc-accent-2);
  color: #16201A;
}
[data-theme^="performance-"] .btn-outline-warning {
  border-color: var(--pc-accent-2);
  color: var(--pc-accent-2);
}
[data-theme^="performance-"] .btn-outline-warning:hover {
  background: var(--pc-accent-2);
  border-color: var(--pc-accent-2);
  color: #16201A;
}

[data-theme^="performance-"] .btn-info {
  background: var(--pc-info);
  border-color: var(--pc-info);
  color: #FFFFFF;
}
[data-theme^="performance-"] .btn-outline-info {
  border-color: var(--pc-info);
  color: var(--pc-info);
}
[data-theme^="performance-"] .btn-outline-info:hover {
  background: var(--pc-info);
  border-color: var(--pc-info);
  color: #FFFFFF;
}

/* btn-link — normalise to coral */
[data-theme^="performance-"] .btn-link {
  color: var(--pc-accent);
  text-decoration: none;
  box-shadow: none;
  border-color: transparent;
  background: transparent;
}
[data-theme^="performance-"] .btn-link:hover {
  color: var(--pc-accent-strong);
  text-decoration: underline;
}

/* ============================================================
   Cards — rounded, soft shadow
   ============================================================ */
[data-theme^="performance-"] .card {
  border-radius: var(--pc-radius);
  background: var(--pc-surface);
  border-color: var(--pc-border);
  color: var(--pc-text);
  box-shadow: var(--pc-shadow-1);
  transition: box-shadow var(--pc-dur) var(--pc-ease),
              transform var(--pc-dur) var(--pc-ease);
}
[data-theme^="performance-"] .card:hover {
  box-shadow: var(--pc-shadow-2);
  transform: translateY(-2px);
}

[data-theme^="performance-"] .card-header {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  font-size: 0.875rem;
  background: var(--pc-surface-2);
  border-color: var(--pc-border);
  color: var(--pc-text);
  border-radius: var(--pc-radius) var(--pc-radius) 0 0 !important;
}
[data-theme^="performance-"] .card-body {
  background: var(--pc-surface);
  color: var(--pc-text);
}
[data-theme^="performance-"] .card-footer {
  background: var(--pc-surface-2);
  border-color: var(--pc-border);
  color: var(--pc-text);
  border-radius: 0 0 var(--pc-radius) var(--pc-radius) !important;
}

/* ============================================================
   Badges — rounded, normal case
   ============================================================ */
[data-theme^="performance-"] .badge {
  border-radius: var(--pc-radius-sm);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.75rem;
}
[data-theme^="performance-"] .badge.rounded-pill {
  border-radius: var(--pc-radius-pill);
}
[data-theme^="performance-"] .badge.bg-secondary {
  background: var(--pc-surface-2) !important;
  color: var(--pc-text) !important;
  border: 1px solid var(--pc-border);
}
[data-theme^="performance-"] .badge.bg-info {
  background: rgba(62,143,176,0.15) !important;
  color: var(--pc-info) !important;
}
[data-theme^="performance-"] .badge.bg-warning {
  background: rgba(224,162,60,0.18) !important;
  color: #7A5508 !important;
}
[data-theme^="performance-"] .badge.bg-success {
  background: rgba(11,138,77,0.15) !important;
  color: var(--pc-success) !important;
}
[data-theme^="performance-"] .badge.bg-primary {
  background: var(--pc-accent-soft) !important;
  color: var(--pc-accent) !important;
}
[data-theme^="performance-"] .badge.bg-danger {
  background: rgba(229,72,77,0.15) !important;
  color: var(--pc-danger) !important;
}

/* ============================================================
   Forms — rounded, warm
   ============================================================ */
[data-theme^="performance-"] .form-control,
[data-theme^="performance-"] .form-select {
  border-radius: var(--pc-radius-sm);
  background: var(--pc-surface);
  border-color: var(--pc-border);
  color: var(--pc-text);
  transition: border-color var(--pc-dur) var(--pc-ease),
              box-shadow var(--pc-dur) var(--pc-ease);
}
[data-theme^="performance-"] .form-control:focus,
[data-theme^="performance-"] .form-select:focus {
  border-color: var(--pc-accent);
  box-shadow: 0 0 0 4px var(--pc-accent-soft);
  background: var(--pc-surface);
  color: var(--pc-text);
}
[data-theme^="performance-"] .form-control::placeholder {
  color: var(--pc-muted);
}
[data-theme^="performance-"] .form-label {
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--pc-text);
}
[data-theme^="performance-"] .input-group-text {
  border-radius: var(--pc-radius-sm);
  background: var(--pc-surface-2);
  border-color: var(--pc-border);
  color: var(--pc-text);
}
[data-theme^="performance-"] .form-check-input:checked {
  background-color: var(--pc-accent);
  border-color: var(--pc-accent);
}
[data-theme^="performance-"] .form-check-input:focus {
  box-shadow: 0 0 0 4px var(--pc-accent-soft);
}

/* ============================================================
   Alerts — rounded, warm tints
   ============================================================ */
[data-theme^="performance-"] .alert {
  border-radius: var(--pc-radius);
  border: none;
}
[data-theme^="performance-"] .alert-info {
  background: rgba(62,143,176,0.12);
  color: #1E4D6B;
  border-left: 3px solid var(--pc-info);
}
[data-theme^="performance-"] .alert-success {
  background: rgba(11,138,77,0.12);
  color: #0C5C32;
  border-left: 3px solid var(--pc-success);
}
[data-theme^="performance-"] .alert-warning {
  background: rgba(224,162,60,0.15);
  color: #7A5508;
  border-left: 3px solid var(--pc-accent-2);
}
[data-theme^="performance-"] .alert-danger {
  background: rgba(229,84,75,0.12);
  color: #7A1F1A;
  border-left: 3px solid var(--pc-danger);
}
[data-theme^="performance-"] .alert-primary {
  background: var(--pc-accent-soft);
  color: #0A4D2B;
  border-left: 3px solid var(--pc-accent);
}

/* ============================================================
   Accordions — rounded, warm
   ============================================================ */
[data-theme^="performance-"] .accordion {
  --bs-accordion-border-radius: var(--pc-radius);
  --bs-accordion-inner-border-radius: calc(var(--pc-radius) - 2px);
  --bs-accordion-bg: var(--pc-surface);
  --bs-accordion-border-color: var(--pc-border);
  --bs-accordion-color: var(--pc-text);
  --bs-accordion-btn-color: var(--pc-text);
  --bs-accordion-btn-bg: var(--pc-surface);
  --bs-accordion-active-bg: var(--pc-surface-2);
  --bs-accordion-active-color: var(--pc-text);
  /* v2.3: outer rounded corners clip cleanly */
  border-radius: var(--pc-radius);
  overflow: hidden;
}
[data-theme^="performance-"] .accordion-button {
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  background: var(--pc-surface);
  color: var(--pc-text);
}
[data-theme^="performance-"] .accordion-button:not(.collapsed) {
  background: var(--pc-surface-2);
  color: var(--pc-text);
  box-shadow: none;
}
[data-theme^="performance-"] .accordion-button:focus {
  box-shadow: 0 0 0 4px var(--pc-accent-soft);
}
[data-theme^="performance-"] .accordion-item {
  background: var(--pc-surface);
  border-color: var(--pc-border);
  color: var(--pc-text);
  /* v2.3: items themselves have no radius — container clips them */
  border-radius: 0;
}
/* v2.3: round only the outermost corners */
[data-theme^="performance-"] .accordion-item:first-child {
  border-top-left-radius: var(--pc-radius);
  border-top-right-radius: var(--pc-radius);
}
[data-theme^="performance-"] .accordion-item:last-child {
  border-bottom-left-radius: var(--pc-radius);
  border-bottom-right-radius: var(--pc-radius);
}
/* v2.3: first accordion-button inherits top corners */
[data-theme^="performance-"] .accordion-item:first-child .accordion-button,
[data-theme^="performance-"] .accordion-item:first-child .accordion-button:not(.collapsed) {
  border-top-left-radius: var(--pc-radius);
  border-top-right-radius: var(--pc-radius);
}
[data-theme^="performance-"] .accordion-body {
  background: var(--pc-surface);
  color: var(--pc-text);
}

/* ============================================================
   Navbar — light frosted premium bar
   ============================================================ */
[data-theme^="performance-"] .navbar.bg-dark,
[data-theme^="performance-"] .navbar.navbar-dark,
[data-theme^="performance-"] .navbar {
  background: var(--pc-navbar-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pc-border);
  box-shadow: 0 1px 0 rgba(22,34,28,.06), 0 2px 8px rgba(22,34,28,.05);
}

[data-theme^="performance-"] .navbar-brand {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pc-navbar-text) !important;
}

[data-theme^="performance-"] .navbar .nav-link {
  color: var(--pc-navbar-text) !important;
  opacity: 0.8;
  font-weight: 500;
  position: relative;
  padding-bottom: 0.4rem;
  transition: color var(--pc-dur) var(--pc-ease),
              opacity var(--pc-dur) var(--pc-ease);
}
[data-theme^="performance-"] .navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--pc-accent);
  border-radius: var(--pc-radius-pill);
  transition: left var(--pc-dur) var(--pc-ease),
              right var(--pc-dur) var(--pc-ease);
}
[data-theme^="performance-"] .navbar .nav-link:hover,
[data-theme^="performance-"] .navbar .nav-link.active {
  color: var(--pc-accent) !important;
  opacity: 1;
}
[data-theme^="performance-"] .navbar .nav-link:hover::after,
[data-theme^="performance-"] .navbar .nav-link.active::after {
  left: 0.5rem;
  right: 0.5rem;
}

[data-theme^="performance-"] .navbar .dropdown-toggle {
  color: var(--pc-navbar-text) !important;
  opacity: 0.8;
  font-weight: 500;
}
[data-theme^="performance-"] .navbar .dropdown-toggle:hover {
  color: var(--pc-accent) !important;
  opacity: 1;
}

[data-theme^="performance-"] .navbar-toggler {
  border-color: var(--pc-border);
}
[data-theme^="performance-"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2822%2C34%2C28%2C0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-theme="performance-dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28228%2C237%2C231%2C0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================================
   Dropdown menus — rounded, warm
   ============================================================ */
[data-theme^="performance-"] .dropdown-menu {
  border-radius: var(--pc-radius);
  background: var(--pc-surface);
  border-color: var(--pc-border);
  color: var(--pc-text);
  box-shadow: var(--pc-shadow-3);
  padding: 0.5rem;
}
[data-theme^="performance-"] .dropdown-item {
  color: var(--pc-text);
  border-radius: var(--pc-radius-sm);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.45rem 0.75rem;
  transition: background var(--pc-dur) var(--pc-ease),
              color var(--pc-dur) var(--pc-ease);
}
[data-theme^="performance-"] .dropdown-item:hover,
[data-theme^="performance-"] .dropdown-item:focus {
  background: var(--pc-surface-2);
  color: var(--pc-accent);
}
[data-theme^="performance-"] .dropdown-item.active,
[data-theme^="performance-"] .dropdown-item:active {
  background: var(--pc-accent-soft);
  color: var(--pc-accent);
}
[data-theme^="performance-"] .dropdown-header {
  color: var(--pc-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
}
[data-theme^="performance-"] .dropdown-divider {
  border-color: var(--pc-border);
  margin: 0.4rem 0;
}

/* ============================================================
   List groups — rounded, warm
   ============================================================ */
[data-theme^="performance-"] .list-group {
  border-radius: var(--pc-radius);
  overflow: hidden;
}
[data-theme^="performance-"] .list-group-item {
  background: var(--pc-surface);
  border-color: var(--pc-border);
  color: var(--pc-text);
  border-radius: 0 !important;
  transition: background var(--pc-dur) var(--pc-ease),
              color var(--pc-dur) var(--pc-ease);
}
[data-theme^="performance-"] .list-group-item:hover {
  background: var(--pc-surface-2);
}
[data-theme^="performance-"] .list-group-item.active {
  background: var(--pc-accent-soft);
  border-color: var(--pc-accent-soft);
  color: var(--pc-accent);
}

/* ============================================================
   Tables — warm
   ============================================================ */
[data-theme^="performance-"] .table {
  --bs-table-bg: var(--pc-surface);
  --bs-table-color: var(--pc-text);
  --bs-table-border-color: var(--pc-border);
  --bs-table-striped-bg: var(--pc-surface-2);
  --bs-table-hover-bg: var(--pc-surface-2);
  color: var(--pc-text);
}
[data-theme^="performance-"] .table-light {
  --bs-table-bg: var(--pc-surface-2);
  --bs-table-color: var(--pc-text);
}
[data-theme^="performance-"] .table > :not(caption) > * > * {
  background-color: var(--bs-table-bg);
  color: var(--bs-table-color);
}
[data-theme^="performance-"] thead th {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--pc-muted);
}

/* ============================================================
   Text utilities
   ============================================================ */
[data-theme^="performance-"] .text-muted {
  color: var(--pc-muted) !important;
}
[data-theme^="performance-"] .text-body {
  color: var(--pc-text) !important;
}
[data-theme^="performance-"] a {
  color: var(--pc-accent);
  transition: color var(--pc-dur) var(--pc-ease);
}
[data-theme^="performance-"] a:hover {
  color: var(--pc-accent-strong);
}

/* ============================================================
   Borders
   ============================================================ */
[data-theme^="performance-"] .border,
[data-theme^="performance-"] .border-top,
[data-theme^="performance-"] .border-bottom,
[data-theme^="performance-"] .border-start,
[data-theme^="performance-"] .border-end {
  border-color: var(--pc-border) !important;
}

/* ============================================================
   HR
   ============================================================ */
[data-theme^="performance-"] hr {
  border-color: var(--pc-border);
  opacity: 1;
}

/* ============================================================
   Container text
   ============================================================ */
[data-theme^="performance-"] .container,
[data-theme^="performance-"] .container-fluid {
  color: var(--pc-text);
}

/* ============================================================
   Modals — rounded, warm
   ============================================================ */
[data-theme^="performance-"] .modal-content {
  border-radius: var(--pc-radius);
  background: var(--pc-surface);
  border-color: var(--pc-border);
  color: var(--pc-text);
  box-shadow: var(--pc-shadow-3);
  overflow: hidden;
}
[data-theme^="performance-"] .modal-header,
[data-theme^="performance-"] .modal-footer {
  background: var(--pc-surface-2);
  border-color: var(--pc-border);
}
[data-theme^="performance-"] .modal-header {
  border-radius: var(--pc-radius) var(--pc-radius) 0 0;
}
[data-theme^="performance-"] .modal-footer {
  border-radius: 0 0 var(--pc-radius) var(--pc-radius);
}

/* ============================================================
   Nav tabs — rounded, warm
   ============================================================ */
[data-theme^="performance-"] .nav-tabs {
  border-color: var(--pc-border);
}
[data-theme^="performance-"] .nav-tabs .nav-link {
  border-radius: var(--pc-radius-sm) var(--pc-radius-sm) 0 0;
  color: var(--pc-muted);
  border-color: transparent;
  font-weight: 500;
  transition: color var(--pc-dur) var(--pc-ease),
              background var(--pc-dur) var(--pc-ease);
}
[data-theme^="performance-"] .nav-tabs .nav-link:hover {
  border-color: var(--pc-border);
  color: var(--pc-text);
  background: var(--pc-surface-2);
}
[data-theme^="performance-"] .nav-tabs .nav-link.active {
  background: var(--pc-surface);
  border-color: var(--pc-border);
  border-bottom-color: var(--pc-surface);
  color: var(--pc-accent);
  font-weight: 600;
}
[data-theme^="performance-"] .tab-content {
  background: var(--pc-surface);
  border-color: var(--pc-border);
}

/* ============================================================
   Pagination — rounded, warm
   ============================================================ */
[data-theme^="performance-"] .page-item .page-link {
  border-radius: var(--pc-radius-sm);
  background: var(--pc-surface);
  border-color: var(--pc-border);
  color: var(--pc-text);
  margin: 0 2px;
  transition: background var(--pc-dur) var(--pc-ease),
              color var(--pc-dur) var(--pc-ease),
              box-shadow var(--pc-dur) var(--pc-ease);
}
[data-theme^="performance-"] .page-item.active .page-link {
  background: var(--pc-accent);
  border-color: var(--pc-accent);
  color: #FFFFFF;
  box-shadow: var(--pc-shadow-1);
}
[data-theme^="performance-"] .page-item .page-link:hover {
  background: var(--pc-surface-2);
  color: var(--pc-accent);
}

/* ============================================================
   Focus ring — soft coral
   ============================================================ */
[data-theme^="performance-"] :focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--pc-accent-soft) !important;
}

/* ============================================================
   Offcanvas — warm
   ============================================================ */
[data-theme^="performance-"] .offcanvas {
  background: var(--pc-surface);
  color: var(--pc-text);
}
[data-theme^="performance-"] .offcanvas-header {
  border-bottom: 1px solid var(--pc-border);
}

/* ============================================================
   Tooltips — warm
   ============================================================ */
[data-theme^="performance-"] .tooltip-inner {
  background: var(--pc-text);
  border-radius: var(--pc-radius-sm);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.8rem;
}

/* ============================================================
   Spinner — coral
   ============================================================ */
[data-theme^="performance-"] .spinner-border,
[data-theme^="performance-"] .spinner-grow {
  color: var(--pc-accent);
}

/* ============================================================
   progress bar — coral
   ============================================================ */
[data-theme^="performance-"] .progress {
  background: var(--pc-surface-2);
  border-radius: var(--pc-radius-pill);
}
[data-theme^="performance-"] .progress-bar {
  background: var(--pc-accent);
}