/*
 * VensBans 1.0.1 — appearance overrides for SourceBans++ 2.0.0.
 * Loaded after the bundled, unmodified css/theme.css.
 * Dark colors follow left4vendetta.com/styles.css.
 */

:root {
  --brand-50: #f4f4f4;
  --brand-100: #e9e9e9;
  --brand-200: #d4d4d4;
  --brand-300: #a8a8a8;
  --brand-400: #808080;
  --brand-500: #646464;
  --brand-600: #4d4d4d;
  --brand-700: #393939;
  --brand-800: #2c2c2c;
  --brand-900: #202020;
  --brand-950: #121212;

  --zinc-50: #fafafa;
  --zinc-100: #f4f4f4;
  --zinc-200: #e4e4e4;
  --zinc-300: #d4d4d4;
  --zinc-400: #a1a1a1;
  --zinc-500: #717171;
  --zinc-600: #525252;
  --zinc-700: #3f3f3f;
  --zinc-800: #272727;
  --zinc-900: #1c1c1c;
  --zinc-950: #121212;

  --bg-page: #f5f5f5;
  --bg-surface: #ffffff;
  --bg-muted: #eeeeee;
  --border: #d7d7d7;
  --text: #202020;
  --text-muted: #606060;
  --text-faint: #666666;
  --accent: #4d4d4d;
  --accent-hover: #202020;
  --accent-soft: #e9e9e9;
  --on-accent: #ffffff;

  --vens-control-border: #858585;
  --vens-focus-ring: rgb(77 77 77 / 0.20);
  --vens-topbar: rgb(255 255 255 / 0.96);
  --vens-selected-bg: #e9e9e9;
  --vens-selected-text: #202020;
  --vens-selected-border: #b4b4b4;
  --vens-primary-gradient: linear-gradient(135deg, #535353, #393939);
  --vens-primary-hover: linear-gradient(135deg, #424242, #2c2c2c);
  --radius-md: 0.5rem;
  --radius-xl: 0.875rem;
}

html.dark {
  --brand-50: #292929;
  --brand-100: #343434;
  --brand-200: #6a6a6a;
  --brand-300: #989898;
  --brand-400: #c0c0c0;
  --brand-500: #c8c8c8;
  --brand-600: #c0c0c0;
  --brand-700: #d0d0d0;
  --brand-800: #d8d8d8;
  --brand-900: #e7e7e7;
  --brand-950: #f3f6ff;

  --bg-page: #1c1c1c;
  --bg-surface: #121212;
  --bg-muted: #242424;
  --border: rgb(137 158 199 / 0.13);
  --text: #f3f6ff;
  --text-muted: #9a9a9a;
  --text-faint: #949494;
  --accent: #c0c0c0;
  --accent-hover: #f3f6ff;
  --accent-soft: rgb(192 192 192 / 0.10);
  --on-accent: #121212;

  --success: #32d17d;
  --success-bg: rgb(50 209 125 / 0.12);
  --warning: #fcd34d;
  --warning-bg: rgb(252 211 77 / 0.10);
  --danger: #fca5a5;
  --danger-bg: rgb(225 109 117 / 0.12);
  --info: #93b4ff;
  --info-bg: rgb(77 117 255 / 0.12);

  --vens-control-border: #666666;
  --vens-focus-ring: rgb(192 192 192 / 0.20);
  --vens-topbar: rgb(18 18 18 / 0.97);
  --vens-selected-bg: rgb(192 192 192 / 0.11);
  --vens-selected-text: #f3f6ff;
  --vens-selected-border: rgb(192 192 192 / 0.35);
  --vens-primary-gradient: linear-gradient(135deg, #d0d0d0, #a9a9a9);
  --vens-primary-hover: linear-gradient(135deg, #e0e0e0, #c0c0c0);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.16);
  --shadow: 0 4px 14px rgb(0 0 0 / 0.18);
  --shadow-lg: 0 14px 38px rgb(0 0 0 / 0.35);
}

/* Keep SourceBans' responsive shell and all of its interaction hooks. */
.topbar,
html.dark .topbar {
  background: var(--vens-topbar);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.04);
}

.sidebar__brand {
  gap: 0.75rem;
}

.vens-brand-name {
  font-weight: 700;
  letter-spacing: -0.025em;
}

.vens-brand-caption {
  display: block;
  margin-top: 0.125rem;
  color: var(--text-muted);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
}

.sidebar__link[aria-current="page"],
html.dark .sidebar__link[aria-current="page"] {
  background: var(--vens-selected-bg);
  color: var(--vens-selected-text);
  box-shadow: inset 2px 0 var(--accent);
}

.chip[aria-pressed="true"],
.chip[data-active="true"],
html.dark .chip[aria-pressed="true"],
html.dark .chip[data-active="true"] {
  background: var(--vens-selected-bg);
  color: var(--vens-selected-text);
  border-color: var(--vens-selected-border);
}

.btn--primary {
  --btn-color: var(--on-accent);
  background: var(--vens-primary-gradient);
}

.btn--primary:hover {
  background: var(--vens-primary-hover);
}

/* Destructive actions retain their own red treatment and white labels. */
html.dark .btn--danger {
  --btn-bg: #b91c1c;
  --btn-bg-hover: #991b1b;
}

.input,
.select,
.textarea,
.msel__trigger,
input[type="checkbox"],
.btn--secondary:not([aria-pressed="true"]) {
  border-color: var(--vens-control-border);
}

.input:focus,
.select:focus,
.textarea:focus,
.msel__trigger:focus-visible,
.msel[data-open="true"] .msel__trigger,
.filters-details__summary:focus-visible,
.ban-comments-inline__summary:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--vens-focus-ring);
}

/* The upstream checkbox glyph is white; use a dark mark on silver. */
html.dark input[type="checkbox"]:checked::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23121212' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E");
}

html.dark input[type="checkbox"]:indeterminate::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23121212' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='3' y1='8' x2='13' y2='8'/%3E%3C/svg%3E");
}

input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate {
  border-color: var(--brand-600);
}

.vens-home-link {
  margin: 0.375rem 0.5rem 0.625rem;
  width: auto;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Only server Connect links get green. Keep the shared palette neutral. */
.btn.btn--vens-connect {
  --btn-bg: #26ad67;
  --btn-bg-hover: #32d17d;
  --btn-color: #07170e;
  --btn-border: rgb(53 214 122 / 0.34);
  background: linear-gradient(135deg, #3ddd83, #26ad67);
}

.btn.btn--vens-connect:hover {
  --btn-color: #04120a;
  --btn-border: rgb(73 229 140 / 0.58);
  background: linear-gradient(135deg, #49e58c, #2cc676);
}