/* Kick palette overrides for keyword_search */

:root{
  /* Kick's neon green */
  --kick-green: #54fc17;
  --kick-green-dark: #3fe000;

  /* Keep variables for future use */
  --ks-accent: var(--kick-green);
  --ks-accent-2: var(--kick-green-dark);

  --ks-focus: rgba(84, 252, 23, 0.55);
  --ks-focus-shadow: rgba(84, 252, 23, 0.18);

  /* Used by a few shared components */
  --link-blue: var(--kick-green);
}

/* Slightly greener glow */
.ks-spinner{
  filter: drop-shadow(0 0 12px rgba(84, 252, 23, 0.18));
}

/* ----------
   Query box
   ---------- */

.ks-query-wrap:focus-within{
  border-color: var(--ks-focus) !important;
  box-shadow: 0 0 0 4px var(--ks-focus-shadow), 0 10px 30px rgba(0,0,0,0.25) !important;
}

.ks-query-input[data-empty="1"]::before{
  color: rgba(84, 252, 23, 0.35) !important;
}

/* ----------------------
   Controls + filter panel
   ---------------------- */

.ks-toolbar .form-select:focus,
.ks-toolbar .form-control:focus{
  border-color: var(--ks-focus) !important;
  box-shadow: 0 0 0 3px var(--ks-focus-shadow) !important;
}

.ks-filter-toggle:hover,
.ks-op-btn:hover{
  border-color: rgba(84, 252, 23, 0.55) !important;
}

.ks-filter-toggle:focus{
  box-shadow: 0 0 0 3px var(--ks-focus-shadow) !important;
}

/* Soft badges (counts, etc.) */
.ks-badge-soft{
  background: rgba(84, 252, 23, 0.14) !important;
  border: 1px solid rgba(84, 252, 23, 0.25) !important;
  color: rgba(255,255,255,0.92) !important;
}

/* Tabs + active indicator */
.ks-tabs .nav-link.active{
  background-color: rgb(47 175 0) !important;
  border-color: rgba(84, 252, 23, 0.35) !important;
  color: rgba(255,255,255,0.92) !important;
}

/* ------------
   Buttons
   ------------ */

/* Switches (re-using the same markup as the other tools) */
.tt-switch input:checked + .tt-slider{
  background: var(--kick-green) !important;
  border-color: var(--kick-green) !important;
}

/* Bootstrap primary recolor inside keyword search tool only */
.ks-root .btn-primary{
  background-color: var(--kick-green) !important;
  border-color: var(--kick-green) !important;
  color: rgba(0,0,0,0.92) !important;
  font-weight: 700;
}

.ks-root .btn-primary:hover,
.ks-root .btn-primary:focus,
.ks-root .btn-primary:active{
  background-color: var(--kick-green-dark) !important;
  border-color: var(--kick-green-dark) !important;
  color: rgba(0,0,0,0.92) !important;
}

.ks-root .btn-outline-primary{
  color: rgba(84, 252, 23, 0.95) !important;
  border-color: rgba(84, 252, 23, 0.60) !important;
}

.ks-root .btn-outline-primary:hover{
  background-color: rgba(84, 252, 23, 0.14) !important;
  border-color: rgba(84, 252, 23, 0.70) !important;
  color: rgba(0,0,0,0.92) !important;
}

/* NOTE: We intentionally do NOT override .ks-op-* colors.
   Operator colors should match TikTok tooling for consistency. */

/* Make the status spinner Kick-green (same wheel design as TikTok) */
.ks-spinner{
  background: conic-gradient(from 0deg,
    rgba(84, 252, 23, 0.10),
    rgba(84, 252, 23, 1),
    rgba(84, 252, 23, 0.10)) !important;
}

/* Help button: increase contrast (was too light) */
.ks-root .ks-help-btn{
  background-color: rgba(84, 252, 23, 0.14) !important;
  border-color: rgba(84, 252, 23, 0.75) !important;
  color: rgba(0, 0, 0, 0.92) !important;
  font-weight: 800;
}
.ks-root .ks-help-btn:hover{
  background-color: rgba(84, 252, 23, 0.22) !important;
  border-color: rgba(84, 252, 23, 0.88) !important;
  color: rgba(0, 0, 0, 0.95) !important;
}

/* ----------------------
   Keyword search results
   ---------------------- */

/* A tasteful hint that the handle is clickable (we removed the old icon). */
.tt-ks-results .username-ytc:hover{
  color: var(--kick-green) !important;
  text-decoration: underline;
}

/* Make the avatar itself a clean click target (used as the "open" link). */
.tt-ks-avatarlink{
  display: inline-flex;
  text-decoration: none;
  color: inherit;
}
.tt-ks-avatarlink:focus-visible{
  outline: 3px solid rgba(84, 252, 23, 0.55);
  outline-offset: 3px;
  border-radius: 999px;
}