/* Vector Contour theme — applied via Admin -> Theme -> Code Injection -> CSS Override.
   Source of truth for the paste in docs/runbooks/wikijs-bootstrap.md section 11.
   Light palette is the :root defaults; dark palette overrides follow under .theme--dark
   (added in Task 7). Targeted selector overrides for Wiki.js's color literals — Vuetify
   theming is JS-driven, not CSS-var-driven, so overrides target concrete selectors. */

/* 1. Default (light) palette — Vector Contour brand tokens.
      Values captured from vectorcontour.com on 2026-04-18.
      See docs/superpowers/specs/2026-04-18-vectorcontour-tokens.md for provenance. */
:root {
  --vc-bg:             #f8faff;
  --vc-surface:        #ffffff;
  --vc-text:           #1b2023;
  --vc-text-muted:     #666666;  /* provisional — no muted-text element was observed on vectorcontour.com's homepage; refine once a captioned/metadata element appears on the wiki */
  --vc-link:           #0075be;
  --vc-link-hover:     #005a96;
  --vc-accent:         #0075be;
  --vc-border:         #1b2023;
  --vc-btn-text:       #ffffff;
  --vc-radius:         0;
  --vc-font-sans:      canada-type-gibson, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 2. Base typography. Specificity raised over Wiki.js's `.theme--light.v-application`
      rule (same class-count, but Vuetify injects its styles AFTER our CSS Override, so
      the cascade-last-wins tie goes to Wiki.js). Prefixing with `#root` — the id of
      Wiki.js's SPA mount point, which wraps `.v-application` — adds an id to the
      specificity and pulls us ahead. Stock Wiki.js CSS already uses `#root .v-application`
      elsewhere (see `#root .v-application .grey.darken-2-d1` rules), so this is
      idiomatic for this codebase. */
html, body {
  background: var(--vc-bg);
  color: var(--vc-text);
  font-family: var(--vc-font-sans);
}
#root .v-application.theme--light,
#root .v-application.theme--dark {
  background: var(--vc-bg);
  color: var(--vc-text);
  font-family: var(--vc-font-sans);
}

/* 3. Targeted selector overrides — Wiki.js's color literals need concrete selectors
      since Vuetify 2 theming is JS-driven, not CSS-var-driven. See
      docs/superpowers/specs/2026-04-17-wiki-theme-design.md "Follow-up finding". */

/* Content region — Wiki.js renders body text as #424242 inside `.contents`. */
#root .v-application .contents {
  color: var(--vc-text);
}

/* Content links (distinct from nav/header links, which stay dark-themed). */
#root .v-application .contents a {
  color: var(--vc-link);
  text-decoration: none;
}
#root .v-application .contents a:hover {
  color: var(--vc-link-hover);
  text-decoration: underline;
}

/* Headings inside content — Wiki.js paints h1 blue (#1565c0). Use --vc-text. */
#root .v-application .contents h1,
#root .v-application .contents h2,
#root .v-application .contents h3,
#root .v-application .contents h4,
#root .v-application .contents h5,
#root .v-application .contents h6 {
  color: var(--vc-text);
}

/* Sidebar cards (TOC, author info, comments, shortcuts) — scoped to
   `.page-col-sd`, the content-page sidebar column Wiki.js emits alongside
   `.contents`. The `.page-col-sd` scope (instead of a bare `.v-card` selector)
   keeps this from leaking into admin dropdowns, user menus, and other Vuetify
   UI chrome. Matches both `.theme--light` and `.theme--dark` cards so the
   border picks up the right --vc-border for each mode. */
#root .v-application .page-col-sd .v-card {
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius);
}

/* Primary-colored Vuetify surfaces: buttons and ripple fills. Wiki.js's primary
   is #1976d2; we repaint with --vc-accent. Scoped to `.v-btn.primary` plus the
   `#root .v-application .primary` fallback for icon/contained buttons. `!important`
   because Vuetify writes these via JS-injected theme styles. */
#root .v-application .v-btn.primary,
#root .v-application .v-btn--contained.primary,
#root .v-application .v-btn--fab.primary {
  background-color: var(--vc-accent) !important;
  color: var(--vc-btn-text) !important;
  border-radius: var(--vc-radius);
}
#root .v-application .v-btn.primary:hover,
#root .v-application .v-btn--contained.primary:hover,
#root .v-application .v-btn--fab.primary:hover {
  background-color: var(--vc-link-hover) !important;
}

/* Code blocks + inline code. */
#root .v-application .contents pre,
#root .v-application .contents code {
  background: var(--vc-surface);
  color: var(--vc-text);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius);
}

/* Tables inside content. */
#root .v-application .contents table th,
#root .v-application .contents table td {
  border-color: var(--vc-border);
}
#root .v-application .contents table thead th {
  background: var(--vc-surface);
  color: var(--vc-text);
}

/* 4. Dark-mode palette.
      Vectorcontour.com is light-only; the dark variant is a derivation:
      invert surfaces, lighten link/accent for contrast, keep neutrals
      readable. The mapping in sections 2–3 stays unchanged because it
      uses --vc-* tokens exclusively. */
#root .v-application.theme--dark {
  --vc-bg:           #1a1a1a;
  --vc-surface:      #2a2a2a;
  --vc-text:         #e5e5e5;
  --vc-text-muted:   #a0a0a0;  /* provisional — same rationale as light mode */
  --vc-link:         #4d9dff;
  --vc-link-hover:   #80b8ff;
  --vc-accent:       #4d9dff;
  --vc-border:       #333333;
}

/* Body bg fallback in dark mode — the section-2 html, body rule resolves
   --vc-bg from :root (light), not from .v-application.theme--dark (which
   is a descendant). Hard-code the dark bg here to cover overscroll flash
   and early-render flicker before .v-application mounts. */
body:has(#root .v-application.theme--dark) {
  background: #1a1a1a;
}

/* 5. Top app bar — Wiki.js paints this black via Vuetify's `.black` helper
      class. The bar is actually nested: one outer `.nav-header` wraps three
      `.nav-header-inner` sub-headers (left/middle/right), and every level
      carries `.black`. Override all of them plus the search input surface
      inside. `!important` required because `.black` is `!important` in
      Vuetify. Scoped to `.nav-header*` so other Vuetify toolbars (editor
      dialogs, admin subheaders) are unaffected. */
#root .v-application .nav-header.v-app-bar,
#root .v-application .nav-header.v-app-bar.black,
#root .v-application .nav-header-inner,
#root .v-application .nav-header-inner.black {
  background-color: var(--vc-surface) !important;
  color: var(--vc-text) !important;
}
#root .v-application .nav-header.v-app-bar {
  border-bottom: 1px solid var(--vc-border);
}

/* Search input inside the nav-header — paints as dark grey (`rgb(30,30,30)`)
   via `.theme--dark .v-input__slot`. Fill with --vc-bg plus a subtle border
   so the input reads as a distinct control against the (near-white) surface. */
#root .v-application .nav-header .v-input__slot {
  background-color: var(--vc-bg) !important;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Header children inherit Wiki.js's `.theme--dark` palette (originally intended
   for a black header); recolor them for the light surface. */
#root .v-application .nav-header .v-icon,
#root .v-application .nav-header .v-btn,
#root .v-application .nav-header input {
  color: var(--vc-text) !important;
}

/* Editor nav-header button labels — Wiki.js's editor template hardcodes
   `<span class="white--text">` on the Page/Close labels (designed for the
   stock black bar). `.white--text` carries its own `!important`, so the
   `.v-btn` color above doesn't cascade into the inner span and the labels
   vanish on our light-mode white surface. Scope to `.nav-header` so other
   `white--text` usages on genuinely dark surfaces keep their white. */
#root .v-application .nav-header .white--text {
  color: var(--vc-text) !important;
}

/* User-menu avatar fallback — the Account button renders
   `<v-avatar><v-image/></v-avatar>` with the user's pictureUrl. When
   pictureUrl is absent, the OIDC IdP doesn't supply one, or the image fails
   to load, the v-image stays fully transparent (`background-image: none`),
   leaving the 34×34 button invisible against our nav-header surface — same
   issue on stock's black bar, but we inherited it. Tint the avatar with
   --vc-text-muted so the button reads as a neutral placeholder disc in
   both light and dark modes; a successfully loaded image paints over it. */
#root .v-application .nav-header .v-avatar {
  background-color: var(--vc-text-muted);
}

/* 6. Login screen — Wiki.js ships `.login-sd` (the side panel holding the
      login form) flush against the viewport top, so the logo sits at the
      very edge. Add breathing room above. */
#root .login .login-sd {
  padding-top: 48px;
}