/*
 * SPDX-FileCopyrightText: 2026-present Pacific Hackers
 * SPDX-License-Identifier: AGPL-3.0-only WITH LicenseRef-Pretalx-AGPL-3.0-Terms
 *
 * Rostrum "cyberpunk" theme: deep purple-black surfaces, neon magenta
 * primary, cyan accents, acid yellow warnings. Loaded after the base
 * variables, so an event's own primary colour still wins on its pages.
 */

:root {
  color-scheme: dark;

  --cp-void: #07020f;
  --cp-night: #0d0221;
  --cp-panel: #150734;
  --cp-panel-2: #1d0b45;
  --cp-grid: #2a1260;
  --cp-magenta: #ff2a6d;
  --cp-cyan: #05d9e8;
  --cp-yellow: #f9f002;
  --cp-mint: #01ffc3;
  --cp-violet: #b967ff;
  --cp-ink: #e8e6ff;
  --cp-ink-soft: #b3aedb;
  --cp-ink-softer: #8a84b8;

  --color-text: var(--cp-ink);
  --color-text-soft: var(--cp-ink-soft);
  --color-text-softer: var(--cp-ink-softer);
  --color-text-softest: #6c6699;

  --color-border: #3b1f7a;
  --color-border-soft: #32196b;
  --color-border-softer: #28135a;
  --color-border-softest: #200f4a;

  --color-white: var(--cp-panel);
  --color-bg: var(--cp-panel);
  --color-bg-soft: var(--cp-night);
  --color-bg-softer: var(--cp-panel-2);
  --color-bg-softest: var(--cp-grid);
  --color-row-hover: #22104f;

  --color-pretalx: var(--cp-magenta);
  --color-primary: var(--cp-magenta);
  --color-primary-text: color-mix(in srgb, var(--color-primary), white 25%);
  --color-primary-soft: color-mix(in srgb, var(--color-primary), var(--cp-night) 35%);
  --color-primary-softer: color-mix(in srgb, var(--color-primary), var(--cp-night) 65%);
  --color-primary-softest: color-mix(in srgb, var(--color-primary), var(--cp-night) 82%);
  --color-text-on-primary: #fff;

  --color-success: var(--cp-mint);
  --color-success-text: var(--cp-mint);
  --color-success-softest: color-mix(in srgb, var(--cp-mint), var(--cp-night) 85%);

  --color-info: var(--cp-cyan);
  --color-info-text: var(--cp-cyan);

  --color-warning: var(--cp-yellow);
  --color-warning-text: var(--cp-yellow);

  --color-danger: #ff3864;
  --color-danger-text: #ff6b8b;
  --color-danger-softest: color-mix(in srgb, #ff3864, var(--cp-night) 85%);

  --color-pending: var(--cp-violet);
  --color-pending-text: var(--cp-violet);

  --shadow-lightest: 0 1px 2px rgb(0 0 0 / 0.6);
  --shadow-light: 0 0 0 1px var(--color-border), 0 0 14px rgb(255 42 109 / 0.08);
  --shadow-wide: 0 0 0 1px var(--color-border), 0 0 24px rgb(5 217 232 / 0.12);
  --shadow-menu: 0 0 0 1px var(--color-border), 0 12px 32px rgb(0 0 0 / 0.6);
  --shadow-focus-halo: 0 0 8px 3px color-mix(in srgb, var(--cp-cyan), transparent 55%);
  --outline-focus-color-default: var(--cp-cyan);
}

html,
body {
  background-color: var(--cp-night);
  color: var(--color-text);
}

body {
  background-image:
    linear-gradient(rgb(185 103 255 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(185 103 255 / 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

a {
  color: var(--cp-cyan);
}
a:hover,
a:focus {
  color: color-mix(in srgb, var(--cp-cyan), white 35%);
}

h1,
h2,
h3 {
  letter-spacing: 0.02em;
}
h2 {
  text-shadow: 0 0 12px rgb(255 42 109 / 0.35);
}

/* Surfaces */
.card,
.dashboard-setup,
.stat-tile,
.table,
.dropdown-menu,
dialog,
details.dropdown > div,
.alert {
  background-color: var(--color-bg);
  color: var(--color-text);
}
.table th,
.table td {
  border-color: var(--color-border-soft);
}
.table thead th {
  color: var(--cp-cyan);
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.06em;
}

/* Inputs */
input,
select,
textarea,
.form-control,
.custom-select {
  background-color: var(--cp-void) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--color-text-softest);
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--cp-cyan) !important;
  box-shadow: var(--shadow-focus-halo) !important;
}

/* Buttons: neon edges */
.btn-success,
.btn-primary {
  background: var(--cp-magenta);
  border-color: var(--cp-magenta);
  color: #fff;
  box-shadow: 0 0 12px rgb(255 42 109 / 0.45);
}
.btn-success:hover,
.btn-primary:hover {
  background: color-mix(in srgb, var(--cp-magenta), white 15%);
  box-shadow: 0 0 18px rgb(255 42 109 / 0.7);
}
.btn-info,
.btn-secondary {
  background: transparent;
  border-color: var(--cp-cyan);
  color: var(--cp-cyan);
}
.btn-info:hover,
.btn-secondary:hover {
  background: color-mix(in srgb, var(--cp-cyan), transparent 85%);
  color: #fff;
  box-shadow: 0 0 12px rgb(5 217 232 / 0.45);
}
.btn-warning {
  background: var(--cp-yellow);
  border-color: var(--cp-yellow);
  color: var(--cp-void);
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info {
  color: var(--cp-cyan);
  border-color: var(--cp-cyan);
  background: transparent;
}
.btn-outline-danger {
  color: var(--color-danger-text);
  border-color: var(--color-danger);
}

/* Badges for proposal states */
.badge,
.submission-state {
  box-shadow: 0 0 6px currentcolor;
}

/* Organiser sidebar and top bar */
#sidebar,
nav#nav-sidebar,
.sidebar,
.topbar,
header.navbar,
#top-bar {
  background-color: var(--cp-void) !important;
  border-color: var(--color-border) !important;
}
#sidebar .nav-link.active,
.sidebar .nav-link.active,
.nav-link-second-level.active {
  color: var(--cp-magenta) !important;
  background: color-mix(in srgb, var(--cp-magenta), transparent 88%) !important;
  box-shadow: inset 3px 0 0 var(--cp-magenta);
}

/* Progress bars (setup checklist, evaluation) */
.setup-progress,
.evaluation-progress {
  background: var(--cp-void);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.setup-progress-bar,
.evaluation-progress-bar {
  background: linear-gradient(90deg, var(--cp-magenta), var(--cp-violet), var(--cp-cyan));
  box-shadow: 0 0 10px rgb(5 217 232 / 0.6);
}

/* Evaluation buttons */
.evaluation-yes { background: var(--cp-mint); color: var(--cp-void); }
.evaluation-maybe { background: var(--cp-yellow); color: var(--cp-void); }
.evaluation-no { background: var(--cp-magenta); color: #fff; }

::selection {
  background: var(--cp-magenta);
  color: #fff;
}

/* Pills and chips mixed with white in the base styles */
.state-segment,
.filter-pill {
  background: color-mix(in srgb, var(--highlight-color, var(--color-neutral)), var(--cp-night) 78%) !important;
  color: color-mix(in srgb, var(--highlight-color, var(--cp-ink)), white 20%) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color, var(--color-neutral)), transparent 40%);
}
details.submission-state-dropdown summary:active .state-segment,
details.submission-state-dropdown .dropdown-content a.dropdown-item:hover,
.filter-pill:hover,
.table-filter-controls .filter-bar .filter-pill-add:hover {
  background: color-mix(in srgb, var(--highlight-color, var(--color-neutral)), var(--cp-night) 60%) !important;
}
.badge,
.submission-state {
  box-shadow: none;
}

/* Filled buttons on public pages: keep dark text on bright neon */
.btn-success,
.btn-primary,
.btn-info {
  color: #fff;
}
body .btn-info {
  background: var(--cp-cyan);
  border-color: var(--cp-cyan);
  color: var(--cp-void);
}
body .btn-success {
  background: var(--cp-magenta);
  border-color: var(--cp-magenta);
  color: #fff;
}
.navbar-brand img {
  border-radius: 6px;
}

body .btn.btn-outline-secondary,
body .btn.btn-outline-primary {
  background: transparent;
  color: var(--cp-cyan);
  border: 1px solid var(--cp-cyan);
}
body .btn.btn-outline-secondary:hover,
body .btn.btn-outline-primary:hover {
  background: color-mix(in srgb, var(--cp-cyan), transparent 85%);
  color: #fff;
}

/* Remaining white surfaces from base styles */
.markdown-wrapper,
.markdown-wrapper textarea,
details.dropdown .dropdown-content,
.dropdown .dropdown-content,
dialog,
.stages .step-icon,
.step-icon,
#mail-form legend,
.export-qrcode-image,
.qrcode-image {
  background: var(--color-bg) !important;
  color: var(--color-text);
}
.markdown-wrapper textarea {
  background: var(--cp-void) !important;
}

/* Generic badges (state badges in tables) are mixed with white in the base styles */
.badge {
  background: color-mix(in srgb, var(--highlight-color, var(--cp-violet)), var(--cp-night) 80%);
  color: color-mix(in srgb, var(--highlight-color, var(--cp-ink)), white 15%);
  border: 1px solid color-mix(in srgb, var(--highlight-color, var(--cp-violet)), transparent 55%);
}

/* Coloured badges: dark chip with neon text so they stay readable */
.badge.color-warning { background: color-mix(in srgb, var(--cp-yellow), var(--cp-night) 82%); color: var(--cp-yellow); border: 1px solid color-mix(in srgb, var(--cp-yellow), transparent 50%); }
.badge.color-error,
.badge.color-danger { background: color-mix(in srgb, var(--cp-magenta), var(--cp-night) 80%); color: #ff6f98; border: 1px solid color-mix(in srgb, var(--cp-magenta), transparent 50%); }
.badge.color-success { background: color-mix(in srgb, var(--cp-mint), var(--cp-night) 82%); color: var(--cp-mint); border: 1px solid color-mix(in srgb, var(--cp-mint), transparent 50%); }
.badge.color-info,
.badge.color-primary { background: color-mix(in srgb, var(--cp-cyan), var(--cp-night) 82%); color: var(--cp-cyan); border: 1px solid color-mix(in srgb, var(--cp-cyan), transparent 50%); }