/* ============================================================
   NETGRIMOIRE THEME FOR WIKI.JS
   Dark arcane aesthetic — teal/cyan glowing network nodes
   Paste into: Administration → Theme → Custom CSS
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Share+Tech+Mono&family=Raleway:wght@300;400;500&display=swap');

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  --ng-teal:        #00e5cc;
  --ng-teal-dim:    #00b39e;
  --ng-teal-glow:   rgba(0, 229, 204, 0.35);
  --ng-teal-faint:  rgba(0, 229, 204, 0.08);
  --ng-bg-deep:     #070b0f;
  --ng-bg-base:     #0a0d12;
  --ng-bg-raised:   #0d1117;
  --ng-bg-surface:  #111922;
  --ng-border:      rgba(0, 229, 204, 0.18);
  --ng-text:        #b8d4d0;
  --ng-text-bright: #d9eeeb;
  --ng-text-muted:  #5a7f7a;
}

/* ── Page & Application Background ───────────────────────── */
body,
.application--wrap,
.main-bg {
  background-color: var(--ng-bg-base) !important;
  color: var(--ng-text) !important;
}

/* Constellation-style radial shimmer behind content */
.contents {
  background-color: var(--ng-bg-base) !important;
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(0, 180, 150, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(0, 130, 110, 0.04) 0%, transparent 55%) !important;
}

/* ── Header / Top Nav ─────────────────────────────────────── */
.v-toolbar,
.v-toolbar__content,
nav.v-toolbar {
  background: linear-gradient(180deg, #060a0d 0%, #0a0d12 100%) !important;
  border-bottom: 1px solid var(--ng-border) !important;
  box-shadow: 0 2px 18px rgba(0, 229, 204, 0.08) !important;
}

/* Site title */
.v-toolbar__title,
.v-toolbar .site-title {
  font-family: 'Cinzel', serif !important;
  color: var(--ng-teal) !important;
  letter-spacing: 0.08em;
  text-shadow: 0 0 14px var(--ng-teal-glow);
}

/* Header icons & buttons */
.v-toolbar .v-btn,
.v-toolbar .v-icon {
  color: var(--ng-teal-dim) !important;
  transition: color 0.2s, text-shadow 0.2s !important;
}
.v-toolbar .v-btn:hover,
.v-toolbar .v-icon:hover {
  color: var(--ng-teal) !important;
  text-shadow: 0 0 8px var(--ng-teal-glow);
}

/* ── Sidebar / Left Nav ───────────────────────────────────── */
nav.navigation,
.navigation-drawer,
.v-navigation-drawer {
  background: var(--ng-bg-raised) !important;
  border-right: 1px solid var(--ng-border) !important;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.4) !important;
}

/* Nav items */
.v-list-item,
.v-list__tile {
  color: var(--ng-text) !important;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 400;
  transition: color 0.2s, background 0.2s, padding-left 0.2s !important;
}

.v-list-item:hover,
.v-list__tile:hover {
  background: var(--ng-teal-faint) !important;
  color: var(--ng-teal) !important;
  padding-left: 20px !important;
}

/* Active nav item */
.v-list-item--active,
.v-list__tile--active {
  color: var(--ng-teal) !important;
  border-left: 3px solid var(--ng-teal) !important;
  background: rgba(0, 229, 204, 0.06) !important;
}

/* Nav section headers */
.v-subheader {
  font-family: 'Cinzel', serif !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.18em !important;
  color: var(--ng-text-muted) !important;
  text-transform: uppercase;
}

/* Nav icons */
.v-list-item .v-icon,
.v-list__tile .v-icon {
  color: var(--ng-teal-dim) !important;
}

/* ── Page Content Area ────────────────────────────────────── */
.page-content-wrap,
.editor-page-content,
article.contents {
  background: transparent !important;
}

/* ── Typography ───────────────────────────────────────────── */
.contents h1,
.contents h2,
.contents h3,
.page-header h1 {
  font-family: 'Cinzel', serif !important;
  color: var(--ng-teal) !important;
  text-shadow: 0 0 16px rgba(0, 229, 204, 0.25);
  letter-spacing: 0.04em;
}

.contents h4,
.contents h5,
.contents h6 {
  font-family: 'Cinzel', serif !important;
  color: var(--ng-teal-dim) !important;
}

.contents h1 { border-bottom: 1px solid var(--ng-border); padding-bottom: 0.4em; }
.contents h2 { border-bottom: 1px solid rgba(0, 229, 204, 0.08); padding-bottom: 0.2em; }

.contents p,
.contents li,
.contents td {
  font-family: 'Raleway', sans-serif !important;
  color: var(--ng-text) !important;
  line-height: 1.75 !important;
}

/* ── Links ────────────────────────────────────────────────── */
.contents a {
  color: var(--ng-teal-dim) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s, text-shadow 0.2s !important;
}

.contents a:hover {
  color: var(--ng-teal) !important;
  border-bottom-color: var(--ng-teal-dim);
  text-shadow: 0 0 8px var(--ng-teal-glow);
}

/* ── Code Blocks ──────────────────────────────────────────── */
.contents pre,
.contents pre code {
  background: #060b10 !important;
  border: 1px solid var(--ng-border) !important;
  border-radius: 6px !important;
  font-family: 'Share Tech Mono', monospace !important;
  color: #7df3d6 !important;
  box-shadow: inset 0 0 20px rgba(0, 229, 204, 0.04), 0 0 12px rgba(0, 0, 0, 0.5) !important;
}

.contents code {
  font-family: 'Share Tech Mono', monospace !important;
  background: rgba(0, 229, 204, 0.07) !important;
  color: var(--ng-teal) !important;
  border-radius: 3px !important;
  padding: 0.1em 0.4em !important;
  border: 1px solid rgba(0, 229, 204, 0.12) !important;
}

/* ── Blockquotes ──────────────────────────────────────────── */
.contents blockquote {
  border-left: 3px solid var(--ng-teal) !important;
  background: var(--ng-teal-faint) !important;
  color: var(--ng-text-bright) !important;
  border-radius: 0 6px 6px 0 !important;
  box-shadow: inset 0 0 16px rgba(0, 229, 204, 0.03) !important;
  padding: 0.8em 1.2em !important;
}

/* ── Tables ───────────────────────────────────────────────── */
.contents table {
  border-collapse: collapse !important;
  width: 100% !important;
}

.contents thead tr {
  background: rgba(0, 229, 204, 0.1) !important;
}

.contents thead th {
  font-family: 'Cinzel', serif !important;
  color: var(--ng-teal) !important;
  border-bottom: 1px solid var(--ng-border) !important;
  letter-spacing: 0.06em;
  font-size: 0.85em !important;
}

.contents tbody tr {
  border-bottom: 1px solid rgba(0, 229, 204, 0.06) !important;
  transition: background 0.15s !important;
}

.contents tbody tr:hover {
  background: var(--ng-teal-faint) !important;
}

.contents td, .contents th {
  padding: 0.6em 1em !important;
  color: var(--ng-text) !important;
}

/* ── Horizontal Rules ─────────────────────────────────────── */
.contents hr {
  border: none !important;
  border-top: 1px solid var(--ng-border) !important;
  box-shadow: 0 0 8px var(--ng-teal-glow) !important;
  margin: 2em 0 !important;
}

/* ── Page Cards / Navigation Tiles ───────────────────────── */
.page-card,
.v-card {
  background: var(--ng-bg-surface) !important;
  border: 1px solid var(--ng-border) !important;
  border-radius: 8px !important;
  transition: box-shadow 0.3s, border-color 0.3s, transform 0.2s !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

.page-card:hover,
.v-card:hover {
  border-color: var(--ng-teal-dim) !important;
  box-shadow: 0 0 20px rgba(0, 229, 204, 0.2), 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-2px) !important;
}

.v-card__title {
  font-family: 'Cinzel', serif !important;
  color: var(--ng-teal) !important;
}

.v-card__text {
  color: var(--ng-text) !important;
  font-family: 'Raleway', sans-serif !important;
}

/* ── Search Bar ───────────────────────────────────────────── */
.v-input__slot {
  background: var(--ng-bg-raised) !important;
  border: 1px solid var(--ng-border) !important;
  border-radius: 6px !important;
}

.v-input__slot:focus-within {
  border-color: var(--ng-teal) !important;
  box-shadow: 0 0 10px rgba(0, 229, 204, 0.2) !important;
}

.v-input input,
.v-input textarea {
  color: var(--ng-text-bright) !important;
  font-family: 'Raleway', sans-serif !important;
  caret-color: var(--ng-teal) !important;
}

/* Search result items */
.v-list,
.v-autocomplete__content {
  background: var(--ng-bg-raised) !important;
  border: 1px solid var(--ng-border) !important;
}

/* ── Breadcrumbs ──────────────────────────────────────────── */
.v-breadcrumbs,
.breadcrumbs {
  font-family: 'Raleway', sans-serif !important;
  font-size: 0.8rem !important;
}

.v-breadcrumbs li,
.v-breadcrumbs__item {
  color: var(--ng-text-muted) !important;
}

.v-breadcrumbs a,
.v-breadcrumbs__item--link {
  color: var(--ng-teal-dim) !important;
}

/* ── Tags / Chips ─────────────────────────────────────────── */
.v-chip {
  background: rgba(0, 229, 204, 0.1) !important;
  border: 1px solid var(--ng-border) !important;
  color: var(--ng-teal) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 0.75rem !important;
}

/* ── Buttons ──────────────────────────────────────────────── */
.v-btn--flat,
.v-btn:not(.v-btn--icon):not(.v-btn--floating) {
  font-family: 'Cinzel', serif !important;
  letter-spacing: 0.08em !important;
}

.v-btn.primary,
.v-btn--color.primary {
  background: transparent !important;
  border: 1px solid var(--ng-teal) !important;
  color: var(--ng-teal) !important;
  box-shadow: 0 0 12px rgba(0, 229, 204, 0.2) !important;
  transition: box-shadow 0.3s, background 0.3s !important;
}

.v-btn.primary:hover {
  background: rgba(0, 229, 204, 0.1) !important;
  box-shadow: 0 0 20px rgba(0, 229, 204, 0.35) !important;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ng-bg-deep); }
::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 204, 0.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 204, 0.45); }

/* ── Selection ────────────────────────────────────────────── */
::selection {
  background: rgba(0, 229, 204, 0.2);
  color: var(--ng-text-bright);
}

/* ── Animated Rune Pulse on Active Nav Item ───────────────── */
@keyframes runePulse {
  0%, 100% { box-shadow: inset 3px 0 0 var(--ng-teal), 0 0 8px rgba(0, 229, 204, 0.15); }
  50%       { box-shadow: inset 3px 0 0 var(--ng-teal), 0 0 18px rgba(0, 229, 204, 0.35); }
}

.v-list-item--active,
.v-list__tile--active {
  animation: runePulse 3s ease-in-out infinite !important;
}

/* ── Subtle Constellation Dots (background decorative) ────── */
@keyframes starFloat {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.4); }
}

/* ── Footer ───────────────────────────────────────────────── */
footer.v-footer {
  background: var(--ng-bg-raised) !important;
  border-top: 1px solid var(--ng-border) !important;
  color: var(--ng-text-muted) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 0.75rem !important;
}