/*
 * M8TRX Wiki — brand theme overlay for Wiki.js v2
 * Aesthetic: cyberpunk-corporate; dark canvas; emerald primary; Orbitron + Exo 2.
 * Mirrors m8trx.ai design system. Loaded via Caddy /brand/wiki.css.
 */

/* ============================================================
   FONTS — Orbitron (display), Exo 2 (body), Fira Code (mono)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Exo+2:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* surfaces */
  --m8x-bg:         hsl(0 0% 12%);
  --m8x-bg-deep:    hsl(0 0% 8%);
  --m8x-bg-card:    hsl(0 0% 15%);
  --m8x-bg-input:   hsl(0 0% 18%);
  --m8x-border:     hsl(0 0% 18%);
  --m8x-border-2:   hsl(0 0% 22%);

  /* text */
  --m8x-text:       hsl(0 0% 92%);
  --m8x-text-2:     hsl(0 0% 75%);
  --m8x-text-3:     hsl(0 0% 55%);

  /* signal — emerald (m8trx primary) */
  --m8x-primary:    hsl(152 100% 56%);
  --m8x-primary-d:  hsl(152 100% 39%);
  --m8x-primary-l:  hsl(152 100% 70%);
  --m8x-glow:       rgba(0, 201, 87, 0.42);
  --m8x-glow-soft:  rgba(0, 201, 87, 0.18);
  --m8x-glow-hard:  rgba(0, 201, 87, 0.75);

  /* support */
  --m8x-blue:       hsl(207 71% 60%);
  --m8x-cyan:       #00D9FF;
  --m8x-pink:       hsl(320 100% 60%);
  --m8x-amber:      hsl(38 100% 60%);
  --m8x-red:        hsl(0 84% 55%);

  /* glass */
  --m8x-glass-bg:     rgba(0, 201, 87, 0.06);
  --m8x-glass-border: rgba(0, 201, 87, 0.22);
  --m8x-glass-blur:   16px;

  /* type stacks */
  --m8x-display: 'Orbitron', 'Fira Code', sans-serif;
  --m8x-sans:    'Exo 2', 'Orbitron', system-ui, sans-serif;
  --m8x-mono:    'Fira Code', 'JetBrains Mono', 'Monaco', monospace;
}

/* ============================================================
   GLOBAL — kill stock light theme; force dark canvas everywhere
   ============================================================ */
html, body, .v-application,
.v-application.theme--light,
.v-application.theme--dark {
  background: var(--m8x-bg) !important;
  color: var(--m8x-text) !important;
  font-family: var(--m8x-sans) !important;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* mesh dot-grid behind everything — captures the "network" motif from m8trx.ai
   without dominating reading. fixed so it doesn't scroll. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(0, 201, 87, 0.14) 1px, transparent 1.5px),
    radial-gradient(circle at 50% 50%, rgba(0, 201, 87, 0.07) 1px, transparent 1.5px);
  background-size: 28px 28px, 28px 28px;
  background-position: 0 0, 14px 14px;
  opacity: 0.55;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* glow-spot top-left: signature m8trx ambient bloom */
body::after {
  content: '';
  position: fixed;
  top: -240px;
  left: -240px;
  width: 720px;
  height: 720px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, var(--m8x-glow) 0%, transparent 60%);
  opacity: 0.35;
  filter: blur(40px);
}

/* selection */
::selection {
  background: var(--m8x-primary);
  color: hsl(0 0% 0%);
  text-shadow: 0 0 6px var(--m8x-glow-hard);
}

/* scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--m8x-border-2);
  border-radius: 4px;
  border: 2px solid var(--m8x-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--m8x-primary-d);
  box-shadow: 0 0 12px var(--m8x-glow);
}

/* ============================================================
   TYPOGRAPHY — Orbitron headlines, Exo 2 body
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6,
.headline, .display-1, .display-2, .display-3, .display-4,
.title, .v-toolbar__title {
  font-family: var(--m8x-display) !important;
  font-weight: 700;
  letter-spacing: 0.015em;
  color: var(--m8x-text) !important;
}

/* Page title gets a green underline that bleeds into a glow */
.page-content h1:first-child,
.contents > h1:first-child,
main h1:first-child {
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 12px;
  padding-bottom: 14px;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.page-content h1:first-child::after,
.contents > h1:first-child::after,
main h1:first-child::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 96px; height: 3px;
  background: linear-gradient(90deg, var(--m8x-primary), var(--m8x-cyan) 70%, transparent);
  box-shadow: 0 0 18px var(--m8x-glow);
  border-radius: 2px;
}

h2 { font-size: 26px; margin-top: 36px; }
h3 {
  font-size: 19px;
  color: var(--m8x-primary-l) !important;
  display: flex; align-items: center; gap: 10px;
  margin-top: 28px;
}
h3::before {
  content: '';
  width: 4px; height: 18px;
  background: var(--m8x-primary);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--m8x-glow);
}

p, li, td, dd { font-family: var(--m8x-sans); color: var(--m8x-text-2); }

a, a:visited {
  color: var(--m8x-primary) !important;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s, text-shadow .15s;
}
a:hover {
  border-bottom-color: var(--m8x-primary);
  text-shadow: 0 0 8px var(--m8x-glow);
}

strong, b { color: var(--m8x-text) !important; font-weight: 600; }

/* ============================================================
   TOP APP BAR
   ============================================================ */
.v-app-bar.v-toolbar,
header.nav-header {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(var(--m8x-glass-blur));
  -webkit-backdrop-filter: blur(var(--m8x-glass-blur));
  border-bottom: 1px solid var(--m8x-glass-border) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 8px 32px rgba(0,0,0,.4) !important;
}

.v-toolbar__title, .nav-header-title {
  font-family: var(--m8x-display) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--m8x-text) !important;
}

/* logo image area — let our SVG do the talking */
.nav-header-container img,
.v-toolbar__content img {
  filter: drop-shadow(0 0 12px var(--m8x-glow-soft));
}

/* nav buttons in the top bar */
.v-app-bar .v-btn {
  font-family: var(--m8x-sans) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 6px;
  position: relative;
  transition: color .15s, box-shadow .2s, background .2s;
}
.v-app-bar .v-btn:hover {
  background: var(--m8x-glass-bg) !important;
  color: var(--m8x-primary) !important;
}

/* ============================================================
   SIDEBAR / NAVIGATION DRAWER
   ============================================================ */
.v-navigation-drawer,
.nav-sidebar {
  background: linear-gradient(180deg, hsl(0 0% 11%) 0%, hsl(0 0% 9%) 100%) !important;
  border-right: 1px solid var(--m8x-border) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.4) !important;
}

.v-list, .v-list--nav { background: transparent !important; }

.v-list-item {
  border-radius: 6px !important;
  margin: 2px 8px !important;
  color: var(--m8x-text-2) !important;
  font-family: var(--m8x-sans) !important;
  font-weight: 500;
  transition: background .12s, color .12s, box-shadow .15s;
}
.v-list-item:hover {
  background: var(--m8x-glass-bg) !important;
  color: var(--m8x-text) !important;
}
.v-list-item--active,
.v-list-item.v-list-item--active::before {
  background: linear-gradient(90deg, var(--m8x-glass-bg), transparent) !important;
  color: var(--m8x-primary) !important;
  border-left: 3px solid var(--m8x-primary) !important;
  box-shadow: inset 0 0 24px -8px var(--m8x-glow-soft);
}
.v-list-item--active .v-icon { color: var(--m8x-primary) !important; }

.v-list-item__title { letter-spacing: 0.01em; }

/* section captions in sidebar */
.v-subheader, .v-list-group__header {
  font-family: var(--m8x-display) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--m8x-text-3) !important;
}

/* ============================================================
   MAIN CONTENT WRAPPER
   ============================================================ */
.v-main, main, .contents-container {
  background: transparent !important;
  position: relative;
  z-index: 1;
}
.v-content__wrap { background: transparent !important; }

.contents, .page-content,
.v-main__wrap > .container {
  max-width: 1100px;
  padding: 36px 48px;
}

/* ============================================================
   CARDS / SURFACES
   ============================================================ */
.v-card, .v-sheet, .panel, .page-actions,
.search-result, .nav-sidebar-secondary {
  background: linear-gradient(180deg,
    hsl(0 0% 16%) 0%,
    hsl(0 0% 14%) 100%) !important;
  border: 1px solid var(--m8x-border-2) !important;
  border-radius: 10px !important;
  color: var(--m8x-text) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.02) inset,
    0 8px 24px rgba(0,0,0,0.35) !important;
}

.v-card__title, .v-card-title {
  font-family: var(--m8x-display) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.v-card:hover {
  border-color: var(--m8x-glass-border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.02) inset,
    0 8px 32px rgba(0,0,0,0.5),
    0 0 0 1px var(--m8x-glass-border),
    0 0 24px var(--m8x-glow-soft) !important;
}

/* ============================================================
   BUTTONS — outlined dark with green border + glow on hover
   ============================================================ */
.v-btn:not(.v-btn--icon) {
  font-family: var(--m8x-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  border-radius: 6px !important;
  transition: box-shadow .2s, transform .12s, background .2s, color .15s !important;
}

/* primary: filled green with strong glow */
.v-btn.primary,
.v-btn--has-bg.primary,
.v-btn.theme--dark.primary {
  background: var(--m8x-primary) !important;
  color: hsl(0 0% 0%) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  box-shadow: 0 0 0 1px var(--m8x-primary-l), 0 6px 18px var(--m8x-glow), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.v-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--m8x-primary-l), 0 10px 28px var(--m8x-glow-hard), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  filter: brightness(1.05);
}

/* default outlined */
.v-btn:not(.primary):not(.error):not(.warning):not(.success):not(.v-btn--icon) {
  background: hsl(0 0% 16%) !important;
  color: var(--m8x-text) !important;
  border: 1px solid var(--m8x-border-2) !important;
}
.v-btn:not(.primary):not(.error):not(.warning):not(.success):not(.v-btn--icon):hover {
  border-color: var(--m8x-primary) !important;
  color: var(--m8x-primary) !important;
  box-shadow: 0 0 0 1px var(--m8x-primary), 0 0 18px var(--m8x-glow-soft) !important;
}

/* destructive */
.v-btn.error {
  background: hsl(0 50% 14%) !important;
  color: var(--m8x-red) !important;
  border: 1px solid var(--m8x-red) !important;
}

/* ============================================================
   FORM INPUTS
   ============================================================ */
.v-input__slot,
.v-text-field__slot,
input, textarea, select {
  background: var(--m8x-bg-input) !important;
  border-radius: 6px !important;
  color: var(--m8x-text) !important;
  font-family: var(--m8x-sans) !important;
}
.v-input--is-focused .v-input__slot,
input:focus, textarea:focus {
  box-shadow:
    0 0 0 1px var(--m8x-primary),
    0 0 16px var(--m8x-glow-soft) !important;
  outline: none !important;
}
.v-label, label { color: var(--m8x-text-3) !important; font-family: var(--m8x-sans) !important; }
.v-input--is-focused .v-label { color: var(--m8x-primary) !important; }

/* ============================================================
   SEARCH BAR (top toolbar)
   ============================================================ */
.search-input-container,
.v-app-bar .v-input {
  background: rgba(0,0,0,0.45) !important;
  border: 1px solid var(--m8x-border-2) !important;
  border-radius: 8px !important;
}
.search-input-container:focus-within,
.v-app-bar .v-input--is-focused {
  border-color: var(--m8x-primary) !important;
  box-shadow: 0 0 0 1px var(--m8x-primary), 0 0 22px var(--m8x-glow-soft) !important;
}

/* ============================================================
   CODE — Fira Code, dark surface, green left rail
   ============================================================ */
code, kbd, samp {
  font-family: var(--m8x-mono) !important;
  font-size: 0.92em;
  background: var(--m8x-bg-deep) !important;
  color: var(--m8x-primary-l) !important;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--m8x-border) !important;
}

pre, .codeblock, .hljs {
  font-family: var(--m8x-mono) !important;
  background: var(--m8x-bg-deep) !important;
  color: var(--m8x-text) !important;
  border: 1px solid var(--m8x-border-2) !important;
  border-left: 3px solid var(--m8x-primary) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset, 0 0 24px -8px var(--m8x-glow-soft) !important;
  overflow-x: auto;
  line-height: 1.6;
}
pre code, .codeblock code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: inherit !important;
}

/* ============================================================
   TABLES
   ============================================================ */
table, .v-data-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-family: var(--m8x-sans);
  background: transparent !important;
  border: 1px solid var(--m8x-border-2);
  border-radius: 8px;
  overflow: hidden;
}
th, .v-data-table thead th {
  font-family: var(--m8x-display) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--m8x-primary) !important;
  background: hsl(0 0% 11%) !important;
  border-bottom: 1px solid var(--m8x-glass-border) !important;
  text-align: left;
  padding: 12px 16px !important;
}
td, .v-data-table tbody td {
  padding: 12px 16px !important;
  color: var(--m8x-text-2) !important;
  border-bottom: 1px solid var(--m8x-border) !important;
}
tbody tr:hover td { background: var(--m8x-glass-bg) !important; color: var(--m8x-text) !important; }

/* ============================================================
   BLOCKQUOTE — green-rail
   ============================================================ */
blockquote {
  border-left: 3px solid var(--m8x-primary);
  background: var(--m8x-glass-bg);
  margin: 18px 0;
  padding: 12px 18px;
  color: var(--m8x-text-2);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}

/* ============================================================
   TAGS / CHIPS
   ============================================================ */
.v-chip {
  background: var(--m8x-glass-bg) !important;
  color: var(--m8x-primary) !important;
  border: 1px solid var(--m8x-glass-border) !important;
  font-family: var(--m8x-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px !important;
  font-weight: 500 !important;
}

/* ============================================================
   LOGIN PAGE — hero treatment
   ============================================================ */
.login,
.login-container {
  background:
    radial-gradient(ellipse 800px 600px at 20% 20%, hsl(152 40% 10%) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at 80% 80%, hsl(180 40% 10%) 0%, transparent 60%),
    var(--m8x-bg) !important;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.login::before, .login-container::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(0,201,87,0.18) 1px, transparent 1.5px);
  background-size: 32px 32px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}

.login-card,
.login .v-card,
.login-container > div {
  background: rgba(20, 20, 20, 0.72) !important;
  border: 1px solid var(--m8x-glass-border) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 60px rgba(0,0,0,0.55),
    0 0 80px var(--m8x-glow-soft) !important;
  animation: m8x-login-rise 0.6s cubic-bezier(.16,.84,.44,1) both;
}
@keyframes m8x-login-rise {
  from { opacity: 0; transform: translateY(24px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-logo, .login-card img {
  filter: drop-shadow(0 0 24px var(--m8x-glow));
  animation: m8x-logo-pulse 4s ease-in-out infinite;
}
@keyframes m8x-logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 24px var(--m8x-glow)); }
  50%      { filter: drop-shadow(0 0 36px var(--m8x-glow-hard)); }
}

/* ============================================================
   ICONS
   ============================================================ */
.v-icon {
  color: var(--m8x-text-2) !important;
  transition: color .12s, filter .15s;
}
.v-list-item--active .v-icon,
.v-btn:hover .v-icon,
.primary .v-icon {
  color: var(--m8x-primary) !important;
}

/* ============================================================
   DIVIDERS
   ============================================================ */
.v-divider, hr {
  border-color: var(--m8x-border) !important;
  background: linear-gradient(90deg, transparent, var(--m8x-border-2) 20%, var(--m8x-border-2) 80%, transparent) !important;
  height: 1px !important;
  border: 0 !important;
  margin: 24px 0 !important;
}

/* ============================================================
   ALERTS
   ============================================================ */
.v-alert {
  border-radius: 8px !important;
  border-left: 3px solid var(--m8x-primary) !important;
  background: var(--m8x-glass-bg) !important;
  color: var(--m8x-text) !important;
  font-family: var(--m8x-sans) !important;
}
.v-alert.error   { border-left-color: var(--m8x-red) !important;   background: hsl(0 60% 12% / 0.5) !important; }
.v-alert.warning { border-left-color: var(--m8x-amber) !important; background: hsl(38 60% 12% / 0.5) !important; }
.v-alert.info    { border-left-color: var(--m8x-blue) !important;  background: hsl(207 60% 12% / 0.5) !important; }

/* ============================================================
   MENUS / DIALOGS / TOOLTIPS
   ============================================================ */
.v-menu__content, .v-dialog .v-card, .v-tooltip__content {
  background: hsl(0 0% 11%) !important;
  border: 1px solid var(--m8x-glass-border) !important;
  box-shadow:
    0 24px 48px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,201,87,0.12),
    0 0 32px var(--m8x-glow-soft) !important;
  backdrop-filter: blur(12px);
}
.v-tooltip__content {
  font-family: var(--m8x-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  color: var(--m8x-primary) !important;
  padding: 6px 10px !important;
}

/* ============================================================
   PROGRESS / LOADERS
   ============================================================ */
.v-progress-linear__indeterminate .primary,
.v-progress-circular__overlay {
  background: linear-gradient(90deg, var(--m8x-primary), var(--m8x-cyan)) !important;
  color: var(--m8x-primary) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer, .nav-footer {
  background: transparent !important;
  border-top: 1px solid var(--m8x-border) !important;
  color: var(--m8x-text-3) !important;
  font-family: var(--m8x-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;
}

/* ============================================================
   ADMIN PANEL — keep usable, brand lightly
   ============================================================ */
.admin .v-card { background: hsl(0 0% 14%) !important; }

/* ============================================================
   PAGE-TREE (sidebar)
   ============================================================ */
.tree-sidebar .tree-item-name,
.contents-sidebar a {
  font-family: var(--m8x-sans) !important;
  color: var(--m8x-text-2) !important;
  border-left: 2px solid transparent;
  padding-left: 8px;
  transition: color .12s, border-color .12s;
}
.tree-sidebar .tree-item-name:hover,
.contents-sidebar a:hover {
  color: var(--m8x-primary) !important;
  border-left-color: var(--m8x-primary);
}
.tree-sidebar .tree-item-name.active,
.contents-sidebar a.is-active {
  color: var(--m8x-primary) !important;
  border-left-color: var(--m8x-primary);
  text-shadow: 0 0 8px var(--m8x-glow);
}

/* ============================================================
   FOCUS RING — accessibility
   ============================================================ */
*:focus-visible {
  outline: 2px solid var(--m8x-primary) !important;
  outline-offset: 2px !important;
}