/* ============================================================================
   06 · SIDEBAR SEARCH & SETTINGS SURFACES

   Sidebar search, admin section label, settings form + collapsible sections,
   status dots, inline save feedback, modern card treatments and the admin
   module kill-switch cards.

   Part of the dashboard stylesheet, split out of the former single style.css.
   LOAD ORDER IS LOAD-BEARING (later parts intentionally override earlier
   ones) — the canonical order is dashboard/views/partials/_app_styles.ejs.
   ========================================================================== */

/* ===== SIDEBAR SEARCH ===== */
.sidebar-search-wrap {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}

.sidebar-search-inner {
  position: relative;
}

.sidebar-search-box {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.3125rem 0.625rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: text;
}

.sidebar-search-box:focus-within {
  border-color: var(--blue);
  box-shadow: var(--ring-blue);
}

/* Disabled state — shown when no guild is selected (search is guild-scoped) */
.topbar-search-wrap.search-disabled .sidebar-search-box {
  opacity: 0.5;
  cursor: not-allowed;
}

.topbar-search-wrap.search-disabled .sidebar-search-input {
  cursor: not-allowed;
}

.sidebar-search-icon {
  font-size: 0.875rem;
  color: var(--text-muted);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.sidebar-search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.sidebar-search-input::placeholder {
  color: var(--text-muted);
}

.sidebar-search-kbd {
  font-size: 0.5625rem;
  font-family: inherit;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  padding: 0.125rem 0.3rem;
  border-radius: 0.2rem;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  line-height: 1.6;
}

.sidebar-search-box:focus-within .sidebar-search-kbd {
  display: none;
}

.sidebar-search-dropdown {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  z-index: 300;
  max-height: 18rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  transition: background 0.1s;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.search-result:last-child {
  border-bottom: none;
}

.search-result:hover,
.search-result.search-result--focused {
  background: rgba(255, 255, 255, 0.06);
}

.search-result--disabled {
  opacity: 0.45;
  cursor: default;
}

.search-result-icon {
  font-size: 0.9375rem;
  color: var(--blurple);
  flex-shrink: 0;
  width: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-result-body {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-desc {
  font-size: 0.6875rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.0625rem;
}

.search-result-badge {
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(220, 38, 38, 0.12);
  color: var(--blurple);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.search-no-results {
  padding: 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* ===== ADMIN SECTION LABEL ===== */
.admin-sidebar-label {
  padding: 0.5rem 0.625rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.125rem;
}

.admin-back {
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition: background 0.12s, color 0.12s;
}
.admin-back:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* ===== SETTINGS FORM ===== */
.settings-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  margin-bottom: 1.25rem;
  position: relative;
}

.settings-section-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(0,0,0,0.1);
  border-radius: 0.75rem 0.75rem 0 0;
}

.settings-section-header:last-child {
  border-bottom: none;
  border-radius: 0.75rem;
}

.settings-section-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Collapsible settings section: clickable header + rotating chevron */
.settings-section-header.collapsible { cursor: pointer; user-select: none; }
.settings-section-header .section-chevron {
  color: var(--text-muted);
  transition: transform 0.25s var(--ease);
  font-size: 1.1rem;
  display: flex;
  flex-shrink: 0;
}
.settings-section.collapsed .section-chevron { transform: rotate(-90deg); }
.settings-section.collapsed .settings-section-header { border-bottom: none; border-radius: 0.75rem; }
.settings-section.collapsed .settings-section-body { display: none; }

.settings-section-body {
  padding: 1.25rem;
}

.field-row {
  margin-bottom: 1.25rem;
}

.field-row:last-child { margin-bottom: 0; }

/* ===== STATUS DOTS ===== */
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.status-dot-green { background: var(--green); }
.status-dot-red { background: var(--red); }
.status-dot-yellow { background: var(--yellow); }
.status-dot-blue { background: var(--blurple); }

/* ===== INLINE SAVE FEEDBACK ===== */
.save-feedback {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--green);
  display: none;
  align-items: center;
  gap: 0.375rem;
}
.save-feedback.visible { display: flex; }

/* ===== MODERN CARD IMPROVEMENTS ===== */
.card {
  position: relative;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
/* Subtle gradient hairline border on top edge for elevation cue */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.card:hover {
  border-color: rgba(var(--blue-rgb),0.30);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

/* Feature quick-link cards (guild config) — CSP-safe hover (replaces inline onmouseover) */
.feature-quick-link:hover {
  background: var(--surface-hover);
  border-color: rgba(220, 38, 38, 0.3);
}

/* ── Module kill-switch cards (admin: global + per-server) ─────────────────── */
.ks-grid { gap: 0.875rem; }
.ks-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
}
.ks-card-v { flex-direction: column; align-items: stretch; gap: 0.75rem; }
.ks-card-head { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.ks-icon {
  width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  border-radius: 0.625rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.ks-meta { min-width: 0; flex: 1; }
.ks-title {
  font-weight: 700; font-size: 0.9375rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ks-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
.ks-card-key { font-size: 0.72rem; color: var(--text-muted); }
.ks-state-text { font-weight: 600; }
/* Which dashboard page the module gates. Rendered only when it differs from the
   module label (see killswitch-icons.js modulePage), so nothing is said twice. */
.ks-page {
  font-size: 0.76rem; color: var(--text-secondary);
  margin-top: 0.15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ks-card-v .ks-card-key { display: block; margin-top: 0.15rem; }

/* Sections — the kill-switch grids are filed into the same groups as the guild
   sidebar (Server / Moderation / Engagement / Insights), so a module is found
   where the thing it pauses lives. */
.ks-sections { display: flex; flex-direction: column; gap: 1.75rem; }
.ks-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.ks-section-title {
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
.ks-section-count { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.ks-section-blurb { font-size: 0.78rem; color: var(--text-muted); margin: 0.5rem 0 0; line-height: 1.5; }
.ks-section .ks-grid { margin-top: 0.875rem; }

/* Global card — paused (killed bot-wide) state */
.ks-card.ks-paused {
  border-color: rgba(var(--red-rgb), 0.45);
  background:
    linear-gradient(0deg, rgba(var(--red-rgb),0.06), rgba(var(--red-rgb),0.06)),
    var(--glass);
}
.ks-card.ks-paused .ks-state-text { color: var(--red); }
.ks-card:not(.ks-paused) .ks-state-text { color: var(--green); }

/* Per-server card — left/border accent driven by the effective override */
.ks-card.ks-state-enabled  { border-color: rgba(var(--green-rgb),0.40); }
.ks-card.ks-state-disabled { border-color: rgba(var(--red-rgb),0.40); }

/* 3-state segmented control (per-server) */
.ks-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  padding: 0.25rem;
}
.ks-seg-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.25rem;
  border-radius: 0.45rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ks-seg-btn:hover { color: var(--text); background: var(--surface-hover); }
.ks-seg-btn.active { color: #fff; background: var(--surface-hover); }
.ks-seg-btn.ks-seg-on.active  { background: rgba(var(--green-rgb),0.22); color: var(--green); }
.ks-seg-btn.ks-seg-off.active { background: rgba(var(--red-rgb),0.22);   color: var(--red); }
.ks-seg-btn:disabled { opacity: 0.5; cursor: default; }
.ks-default-note { font-size: 0.72rem; color: var(--text-muted); }

/* Public footer links — CSP-safe hover (replaces inline onmouseover) */
.footer-link { transition: color 0.15s; }
.footer-link:hover { color: var(--text); }

/* Elevated card with subtle glow for important panels */
.card-elevated {
  background: var(--bg-card);
  border: 1px solid rgba(var(--blue-rgb),0.22);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--blue-rgb),0.08);
}

/* KPI card improvements */
.kpi-card {
  transition: transform 0.18s ease-in-out, box-shadow 0.18s ease-in-out, border-color 0.18s ease-in-out;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  border-color: rgba(var(--blue-rgb),0.30);
}