/*
 * Deep Blue & Orange brand layer (docs/design-system.md is the source of
 * truth — update tokens there first, then mirror them here). Net-new file,
 * not an override of any stock dojo_theme path: mounted via
 * Configs.theme_header (docker/portal/configure_theme.py) after stock
 * custom.css's own <link>, so it wins on same-specificity selectors with
 * no !important needed. Ticket 07 only defines tokens and remaps dojo's
 * own --brand-* and --old-brand-* custom properties onto them; ticket 08/09
 * append explicit overrides for what stock custom.css/core.css hardcode
 * outside any variable.
 */

:root {
  --canvas-bg: #0b1320;
  --surface-bg: #131e30;
  --border-color: #1e2d4a;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent: #f97316;
  --accent-hover: #ea580c;
  --accent-glow-bg: rgba(249, 115, 22, 0.10);
  --accent-glow-border: rgba(249, 115, 22, 0.40);
  --warning: #f59e0b;
  --critical: #ef4444;

  /* Remap dojo's own custom.css variables onto the tokens above, so every
   * stock rule that already reads one of these inherits the new palette
   * without touching custom.css itself. */
  --brand-white: var(--text-primary);
  --old-brand-white: var(--text-primary);
  --brand-light-gray: var(--text-secondary);
  --brand-dark-gray: var(--border-color);
  /* Never pure black for a panel background (design system anti-pattern). */
  --brand-black: var(--surface-bg);
  --brand-green: var(--accent);
  --old-brand-green: var(--accent);
  --brand-gold: var(--warning);
  --old-brand-gold: var(--warning);
  /* dojo's #00a3e0 link/card-title blue maps to text-secondary, not
   * --accent: the design system explicitly bans bright cyan accents
   * alongside orange, and reserving orange for real CTAs keeps it
   * meaningful instead of overused on every passive link. */
  --brand-blue: var(--text-secondary);
  --old-brand-blue: var(--text-secondary);
}

/*
 * Ticket 08: chrome (body/nav/accordion panels) that stock custom.css/
 * core.css hardcode outside any variable, so the :root remap above alone
 * doesn't reach them. Same selectors as stock, so plain source-order
 * (this file loads after custom.css) is enough to win — no !important
 * needed except .text-muted, which Bootstrap itself declares !important.
 */

body {
  background: var(--canvas-bg);
}

nav {
  background-color: var(--surface-bg);
  border-bottom: 1px solid var(--border-color);
}

.accordion-item-header {
  background-color: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
}

.accordion-item-body {
  background-color: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.text-muted {
  color: var(--text-secondary) !important;
}

/*
 * Ticket 09: buttons/badges/progress bar. Selectors mirror CTFd core's
 * Bootstrap rules (themes/core/static/css/main.min.css) exactly, so
 * equal specificity plus source order wins with no !important, same as
 * above.
 */

.btn-primary {
  color: #fff;
  font-weight: 700;
  background-color: var(--accent);
  border-color: var(--accent);
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem var(--accent-glow-border);
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: var(--accent);
  border-color: var(--accent);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-outline-secondary {
  color: var(--text-secondary);
  border-color: var(--border-color);
  background-color: rgba(30, 41, 59, 0.5);
}

.btn-outline-secondary:hover {
  color: var(--text-primary);
  background-color: #1e293b;
  border-color: var(--border-color);
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.2rem var(--accent-glow-border);
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: var(--text-secondary);
  background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: var(--text-primary);
  background-color: #1e293b;
  border-color: var(--border-color);
}

.badge {
  background-color: rgba(249, 115, 22, 0.20);
  color: var(--accent);
  border: 1px solid rgba(249, 115, 22, 0.30);
}

/* dojo-listing card progress fill, reachable only off the redirected
 * happy path — .card-body .progress-bar doubles as its own track/fill
 * (an absolutely-positioned bottom strip, not a separate track element),
 * so the base rule is the "track" state and the width:100% rule is the
 * "fill" state; the latter needs !important to beat stock's own. */
.card-body .progress-bar {
  background-color: #1e293b;
}

.card-body .progress-bar[style*="width: 100"] {
  background-color: var(--accent) !important;
}