/* ============================================================
   Component template — buttons, button groups, dropdown buttons, tabs, badges.

   Constrained palette — nothing outside these five roles is permitted:
     neutral  -> --panel-2 / --border / --text
     primary  -> --blue
     success  -> --green
     danger   -> --red
     warning  -> --yellow

   Depends on the host page defining (see sample_dark.html's :root):
     --bg, --panel-2, --border, --text, --muted, --blue, --green, --red, --yellow

   Namespaced with a "ui-" prefix so nothing collides with Bootstrap's
   own .btn / .btn-group / .badge / .dropdown-menu classes — Bootstrap's
   JS still needs its native dropdown-toggle/dropdown-menu hooks for
   behavior, so those are layered on top rather than replaced.
   ============================================================ */

/* ---------------- Buttons ---------------- */
.ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  padding: 0.55rem 0.95rem;
  font-size: 0.85rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
.ui-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ui-btn-neutral {
  background: var(--panel-2);
  border-color: var(--border);
  color: var(--text);
}
.ui-btn-neutral:hover { background: rgba(91,141,239,0.12); border-color: rgba(91,141,239,0.45); color: #fff; }

.ui-btn-primary { background: var(--blue);   border-color: var(--blue);   color: var(--bg); }
.ui-btn-success { background: var(--green);  border-color: var(--green);  color: var(--bg); }
.ui-btn-danger  { background: var(--red);    border-color: var(--red);    color: var(--bg); }
.ui-btn-warning { background: var(--yellow); border-color: var(--yellow); color: var(--bg); }
.ui-btn-primary:hover, .ui-btn-success:hover, .ui-btn-danger:hover, .ui-btn-warning:hover { filter: brightness(1.12); }

.ui-btn-soft-primary { background: rgba(91,141,239,0.14);  border-color: rgba(91,141,239,0.35);  color: var(--blue); }
.ui-btn-soft-success { background: rgba(95,206,142,0.14);  border-color: rgba(95,206,142,0.35);  color: var(--green); }
.ui-btn-soft-danger  { background: rgba(224,108,117,0.14); border-color: rgba(224,108,117,0.35); color: var(--red); }
.ui-btn-soft-warning { background: rgba(231,184,92,0.14);  border-color: rgba(231,184,92,0.35);  color: var(--yellow); }
.ui-btn-soft-primary:hover { background: rgba(91,141,239,0.24); }
.ui-btn-soft-success:hover { background: rgba(95,206,142,0.24); }
.ui-btn-soft-danger:hover  { background: rgba(224,108,117,0.24); }
.ui-btn-soft-warning:hover { background: rgba(231,184,92,0.24); }

/* Standalone toggle state, e.g. filter chips. Inside .ui-btn-group the group
   rule below takes precedence. */
.ui-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------------- Button group (segmented control) ---------------- */
.ui-btn-group {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  overflow: hidden;
}
.ui-btn-group .ui-btn {
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--panel-2);
  color: var(--muted);
}
.ui-btn-group .ui-btn:last-child { border-right: none; }
.ui-btn-group .ui-btn:hover { background: rgba(91,141,239,0.12); color: #fff; }
.ui-btn-group .ui-btn.active { background: var(--blue); color: var(--bg); }

/* ---------------- Dropdown button (Bootstrap JS + this styling) ---------------- */
.ui-btn.dropdown-toggle::after { margin-left: 0.3rem; vertical-align: 0.02em; }
.ui-dropdown-menu.dropdown-menu {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  padding: 0.4rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.ui-dropdown-menu .dropdown-item {
  color: var(--text);
  border-radius: 0.45rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.88rem;
}
.ui-dropdown-menu .dropdown-item:hover,
.ui-dropdown-menu .dropdown-item:focus {
  background: rgba(91,141,239,0.14);
  color: #fff;
}
.ui-dropdown-menu .dropdown-item.text-danger-x:hover { background: rgba(224,108,117,0.16); color: var(--red); }
.ui-dropdown-menu .dropdown-divider { border-color: var(--border); margin: 0.35rem 0; }

/* ---------------- Tabs (Bootstrap tab behavior + this styling) ----------------
   Markup: wrap Bootstrap's nav-tabs / tab-content in .ui-tabs.
     <div class="ui-tabs">
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#p1" type="button" role="tab">Summary</button></li>
       </ul>
       <div class="tab-content"><div class="tab-pane fade show active" id="p1" role="tabpanel">...</div></div>
     </div>
   Requires bootstrap.bundle.min.js for the switching behavior.
   Underline style — the segmented/pill look already exists as .ui-btn-group. */
.ui-tabs .nav-tabs {
  border-bottom: 1px solid var(--border);
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.ui-tabs .nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: var(--fw-medium);
  padding: 0.6rem 0.9rem;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ui-tabs .nav-tabs .nav-link:hover { color: var(--text); border-bottom-color: var(--border); }
.ui-tabs .nav-tabs .nav-link.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: transparent;
  font-weight: var(--fw-semibold);
}
.ui-tabs .nav-tabs .nav-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ui-tabs .nav-tabs .nav-link .tab-count {
  margin-left: 0.4rem;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  background: var(--panel-2);
  color: var(--muted);
}
.ui-tabs .nav-tabs .nav-link.active .tab-count { background: var(--tint-blue); color: var(--blue); }
.ui-tabs .tab-content { color: var(--text); }

/* ---------------- Badges ---------------- */
.ui-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
}
.ui-badge-neutral { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); }
.ui-badge-primary { background: rgba(91,141,239,0.16);  color: var(--blue); }
.ui-badge-success { background: rgba(95,206,142,0.16);  color: var(--green); }
.ui-badge-danger  { background: rgba(224,108,117,0.16); color: var(--red); }
.ui-badge-warning { background: rgba(231,184,92,0.16);  color: var(--yellow); }

/* Anchor-based buttons (download links) look like buttons, not links. */
a.ui-btn, a.ui-btn:hover { text-decoration: none; }