/**
 * Matrix Easter Egg Mode — CSS Theme
 * ===================================
 * Activated by matrix-mode.js when data-palette="matrix" is set.
 * Works within the existing Bootstrap 5 dark mode + palette system.
 *
 * Trigger: Konami Code + VOPUS or type "redpill" in Vopus chat
 */

/* ==========================================================================
   Matrix Palette — Green on Black
   ========================================================================== */

[data-bs-theme="dark"][data-palette="matrix"] {
  /* Core backgrounds — deep black */
  --bg-primary: #0d0208;
  --bg-secondary: #0f0f0f;
  --bg-tertiary: #141414;
  --bg-elevated: #1a1a1a;

  /* Text — phosphor green */
  --text-primary: #00ff41;
  --text-secondary: #00cc33;
  --text-muted: #008f11;
  --text-inverse: #0d0208;

  /* Borders — dark green */
  --border-color: #003b00;
  --border-subtle: #002200;

  /* Form inputs */
  --input-bg: #0d0208;
  --input-border: #003b00;
  --input-border-focus: #00ff41;
  --input-placeholder: #008f11;

  /* Tables */
  --table-body-bg: #0d0208;
  --table-header-bg: #0f0f0f;
  --table-header-text: #00ff41;
  --table-header-icon: #00cc33;
  --table-border: #003b00;
  --table-row-odd: #0d0208;
  --table-row-even: #0f0f0f;
  --table-stripe-bg: #0f0f0f;
  --table-row-hover: rgba(0, 255, 65, 0.08);
  --table-row-selected: rgba(0, 255, 65, 0.15);
  --table-cell-focus: rgba(0, 255, 65, 0.10);

  /* Sidebar */
  --sidebar-bg: #0f0f0f;
  --sidebar-text: #00ff41;
  --sidebar-hover: #1a1a1a;
  --sidebar-active: #1a1a1a;
  --archive-objects-bg: rgba(0, 255, 65, 0.05);

  /* Cards */
  --card-bg: #0f0f0f;
  --card-border: #003b00;
  --card-shadow: rgba(0, 255, 65, 0.1);

  /* Modals and dropdowns */
  --modal-bg: #0f0f0f;
  --modal-border: #003b00;
  --modal-overlay: rgba(0, 0, 0, 0.85);
  --dropdown-bg: #0f0f0f;
  --dropdown-hover: #1a1a1a;

  /* Status colors — Matrix green variants */
  --success: #00ff41;
  --success-bg: rgba(0, 255, 65, 0.15);
  --warning: #00cc33;
  --warning-bg: rgba(0, 204, 51, 0.15);
  --danger: #ff0040;
  --danger-bg: rgba(255, 0, 64, 0.15);
  --info: #00ff41;
  --info-bg: rgba(0, 255, 65, 0.10);

  /* Scrollbar */
  --scrollbar-track: #0d0208;
  --scrollbar-thumb: #003b00;

  /* App color override */
  --app-color: #00ff41;
  --app-color-light: rgba(0, 255, 65, 0.15);
  --app-color-dark: #00cc33;
  --bs-primary: #00ff41;
  --bs-primary-rgb: 0, 255, 65;
  --bs-link-color: #00ff41;
  --bs-link-hover-color: #00cc33;
}

/* ==========================================================================
   Font Override — Monospace
   ========================================================================== */

[data-palette="matrix"] body,
[data-palette="matrix"] .sidebar,
[data-palette="matrix"] .navbar,
[data-palette="matrix"] .card,
[data-palette="matrix"] .table,
[data-palette="matrix"] .form-control,
[data-palette="matrix"] .form-select,
[data-palette="matrix"] .btn,
[data-palette="matrix"] .dropdown-menu,
[data-palette="matrix"] .modal,
[data-palette="matrix"] h1,
[data-palette="matrix"] h2,
[data-palette="matrix"] h3,
[data-palette="matrix"] h4,
[data-palette="matrix"] h5,
[data-palette="matrix"] h6,
[data-palette="matrix"] p,
[data-palette="matrix"] span,
[data-palette="matrix"] a,
[data-palette="matrix"] td,
[data-palette="matrix"] th,
[data-palette="matrix"] label,
[data-palette="matrix"] input,
[data-palette="matrix"] select,
[data-palette="matrix"] textarea {
  font-family: 'Courier New', 'Source Code Pro', 'Consolas', monospace !important;
}

/* ==========================================================================
   Scanline Overlay
   ========================================================================== */

[data-palette="matrix"] body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.12) 0px,
    rgba(0, 0, 0, 0.12) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 10000;
}

/* ==========================================================================
   Glitch / Flicker Animation (subtle)
   ========================================================================== */

@keyframes matrix-flicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.85; }
  97% { opacity: 1; }
  98% { opacity: 0.9; }
  99% { opacity: 1; }
}

[data-palette="matrix"] body {
  animation: matrix-flicker 8s infinite;
}

/* ==========================================================================
   Green Glow on Focused Inputs
   ========================================================================== */

[data-palette="matrix"] .form-control:focus,
[data-palette="matrix"] .form-select:focus {
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.4) !important;
  border-color: #00ff41 !important;
}

/* ==========================================================================
   Links — green
   ========================================================================== */

[data-palette="matrix"] a {
  color: #00ff41 !important;
}
[data-palette="matrix"] a:hover {
  color: #00cc33 !important;
  text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
}

/* ==========================================================================
   Buttons — ghost green
   ========================================================================== */

[data-palette="matrix"] .btn-primary,
[data-palette="matrix"] .btn-success,
[data-bs-theme="dark"][data-palette="matrix"] .btn-primary,
[data-bs-theme="dark"][data-palette="matrix"] .btn-success,
[data-palette="matrix"] .btn.btn-primary,
[data-palette="matrix"] .btn.btn-success {
  background-color: transparent !important;
  border-color: #00ff41 !important;
  color: #00ff41 !important;
}
[data-palette="matrix"] .btn-primary:hover,
[data-palette="matrix"] .btn-success:hover,
[data-palette="matrix"] .btn.btn-primary:hover,
[data-palette="matrix"] .btn.btn-success:hover {
  background-color: rgba(0, 255, 65, 0.15) !important;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
}

[data-palette="matrix"] .btn-secondary,
[data-palette="matrix"] .btn-outline-secondary,
[data-palette="matrix"] .btn.btn-secondary,
[data-palette="matrix"] .btn.btn-outline-secondary {
  border-color: #003b00 !important;
  color: #00cc33 !important;
  background-color: transparent !important;
}

[data-palette="matrix"] .btn-danger,
[data-palette="matrix"] .btn.btn-danger {
  border-color: #ff0040 !important;
  color: #ff0040 !important;
  background-color: transparent !important;
}

[data-palette="matrix"] .btn-info,
[data-palette="matrix"] .btn.btn-info {
  border-color: #00ff41 !important;
  color: #00ff41 !important;
  background-color: transparent !important;
}

[data-palette="matrix"] .btn-outline-primary,
[data-palette="matrix"] .btn.btn-outline-primary {
  border-color: #00ff41 !important;
  color: #00ff41 !important;
}
[data-palette="matrix"] .btn-outline-primary:hover,
[data-palette="matrix"] .btn.btn-outline-primary:hover {
  background-color: rgba(0, 255, 65, 0.15) !important;
}

/* ==========================================================================
   Navbar — blend in
   ========================================================================== */

[data-palette="matrix"] .navbar {
  background-color: #0d0208 !important;
  border-bottom: 1px solid #003b00 !important;
}

[data-palette="matrix"] .navbar .nav-link,
[data-palette="matrix"] .navbar .navbar-brand {
  color: #00ff41 !important;
}

/* ==========================================================================
   Matrix Logo — replace image logos with green monospace text
   ========================================================================== */

[data-palette="matrix"] .navbar-brand .logo,
[data-palette="matrix"] .navbar-brand .logo2,
[data-palette="matrix"] .navbar-brand .app-logo,
[data-palette="matrix"] .logo-container .logo,
[data-palette="matrix"] .logo-container .logo2,
[data-palette="matrix"] .logo-container .app-logo,
[data-palette="matrix"] .logo-container img,
[data-palette="matrix"] .navbar-brand img,
[data-palette="matrix"] img.logo,
[data-palette="matrix"] img.logo-light,
[data-palette="matrix"] img.logo-dark,
[data-palette="matrix"] img.logo2,
[data-palette="matrix"] img.app-logo,
[data-bs-theme="dark"][data-palette="matrix"] img.logo.logo-dark,
[data-bs-theme="dark"][data-palette="matrix"] img.logo.logo-light {
  display: none !important;
  visibility: hidden !important;
}

[data-palette="matrix"] .navbar-brand .matrix-logo {
  display: inline-block !important;
  font-family: 'Courier New', 'Consolas', monospace !important;
  font-size: 1.3rem;
  font-weight: bold;
  color: #00ff41 !important;
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.7), 0 0 20px rgba(0, 255, 65, 0.4), 0 0 40px rgba(0, 255, 65, 0.2);
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 8px 5px;
  animation: matrix-logo-pulse 3s ease-in-out infinite;
  white-space: nowrap;
}

@keyframes matrix-logo-pulse {
  0%, 100% { text-shadow: 0 0 10px rgba(0, 255, 65, 0.7), 0 0 20px rgba(0, 255, 65, 0.4); }
  50% { text-shadow: 0 0 15px rgba(0, 255, 65, 0.9), 0 0 30px rgba(0, 255, 65, 0.6), 0 0 50px rgba(0, 255, 65, 0.3); }
}

/* Hide in non-matrix mode */
.matrix-logo {
  display: none !important;
}

/* ==========================================================================
   Badges and pills
   ========================================================================== */

[data-palette="matrix"] .badge {
  background-color: rgba(0, 255, 65, 0.15) !important;
  color: #00ff41 !important;
  border: 1px solid #003b00;
}

/* ==========================================================================
   Matrix Rain Canvas — positioned by JS
   ========================================================================== */

#matrix-rain-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.07;
}

/* ==========================================================================
   Boot Sequence Overlay
   ========================================================================== */

#matrix-boot-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  color: #00ff41;
  font-size: 1.4rem;
  cursor: default;
}

#matrix-boot-overlay .boot-text {
  max-width: 600px;
  text-align: left;
  white-space: pre-wrap;
}

#matrix-boot-overlay .boot-cursor {
  display: inline-block;
  width: 10px;
  height: 1.4rem;
  background: #00ff41;
  animation: blink-cursor 0.7s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 2px;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ==========================================================================
   Vopus Chat — Matrix Overrides
   ========================================================================== */

/* User message bubbles — dark green instead of blue */
[data-palette="matrix"] .vopus-messages .chat-bubble-user {
  background-color: rgba(0, 255, 65, 0.12) !important;
  color: #00ff41 !important;
  border: 1px solid #003b00;
  font-family: 'Courier New', 'Consolas', monospace !important;
}

/* AI message bubbles */
[data-palette="matrix"] .vopus-messages .chat-bubble-ai {
  background-color: rgba(0, 255, 65, 0.04) !important;
  color: #00cc33 !important;
  font-family: 'Courier New', 'Consolas', monospace !important;
}

/* All chat text elements */
[data-palette="matrix"] .vopus-messages,
[data-palette="matrix"] .vopus-messages div,
[data-palette="matrix"] .vopus-messages .chat-bubble,
[data-palette="matrix"] .vopus-messages .chat-name,
[data-palette="matrix"] .vopus-messages .chat-label,
[data-palette="matrix"] .vopus-chat-panel {
  font-family: 'Courier New', 'Consolas', monospace !important;
}

/* Markdown body in chat */
[data-palette="matrix"] .vopus-messages .chat-bubble.markdown-body {
  --bgColor-muted: #0f1a0f !important;
  --fgColor-default: #00ff41 !important;
  --fgColor-muted: #008f11 !important;
  --fgColor-accent: #00ff41 !important;
  --borderColor-default: #003b00 !important;
}
[data-palette="matrix"] .vopus-messages .chat-bubble.markdown-body code,
[data-palette="matrix"] .vopus-messages .chat-bubble.markdown-body pre {
  background-color: #0f1a0f !important;
  color: #00ff41 !important;
}

/* Send button — green ghost */
[data-palette="matrix"] .vopus-send-btn,
[data-palette="matrix"] .btn.btn-primary.vopus-send-btn {
  background-color: transparent !important;
  border-color: #00ff41 !important;
  color: #00ff41 !important;
}
[data-palette="matrix"] .vopus-send-btn:hover,
[data-palette="matrix"] .btn.btn-primary.vopus-send-btn:hover {
  background-color: rgba(0, 255, 65, 0.15) !important;
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
}

/* Clear/new chat button (+) — green instead of white/red */
[data-palette="matrix"] .vopus-clear-btn,
[data-palette="matrix"] .btn.btn-outline-secondary.vopus-clear-btn {
  background-color: transparent !important;
  border-color: #00ff41 !important;
  color: #00ff41 !important;
}
[data-palette="matrix"] .vopus-clear-btn:hover,
[data-palette="matrix"] .btn.btn-outline-secondary.vopus-clear-btn:hover {
  background-color: rgba(0, 255, 65, 0.15) !important;
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
}

/* History and other header buttons */
[data-palette="matrix"] .vopus-history-btn,
[data-palette="matrix"] .vopus-log-btn,
[data-palette="matrix"] #vopus-expand-btn,
[data-palette="matrix"] #vopus-minimize-btn {
  border-color: #003b00 !important;
  color: #00ff41 !important;
}

/* Chat input */
[data-palette="matrix"] .vopus-input {
  background-color: #0d0208 !important;
  border-color: #003b00 !important;
  color: #00ff41 !important;
}
[data-palette="matrix"] .vopus-input::placeholder {
  color: #008f11 !important;
}
[data-palette="matrix"] .vopus-input:focus {
  border-color: #00ff41 !important;
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.3) !important;
}

/* Chat panel border */
[data-palette="matrix"] .vopus-chat-panel {
  border-color: #003b00 !important;
  background-color: #0d0208 !important;
}

/* Chat name labels */
[data-palette="matrix"] .vopus-messages .chat-name {
  color: #00ff41 !important;
}

/* Typing indicator */
[data-palette="matrix"] .typing-indicator {
  color: #00ff41 !important;
}

/* Blinking cursor in chat input area — block cursor like boot sequence */
[data-palette="matrix"] .vopus-input {
  caret-color: transparent;
}

[data-palette="matrix"] .vopus-input-area {
  position: relative;
}

/* Blinking block cursor overlay for Vopus input */
[data-palette="matrix"] .vopus-matrix-cursor {
  display: inline-block;
  width: 9px;
  height: 1.2em;
  background: #00ff41;
  animation: blink-cursor 0.7s step-end infinite;
  vertical-align: text-bottom;
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

/* Hide cursor element when not in matrix mode */
.vopus-matrix-cursor {
  display: none !important;
}
[data-palette="matrix"] .vopus-matrix-cursor {
  display: inline-block !important;
}
[data-palette="matrix"] .vopus-matrix-cursor.cursor-hidden {
  visibility: hidden;
}

/* Status indicators */
[data-palette="matrix"] .vopus-status { color: #00cc33 !important; }
[data-palette="matrix"] .vopus-status i { color: #00ff41 !important; }

/* ==========================================================================
   TinyMCE — Matrix Dark Mode
   ========================================================================== */

[data-palette="matrix"] .tox .tox-toolbar,
[data-palette="matrix"] .tox .tox-toolbar__overflow,
[data-palette="matrix"] .tox .tox-toolbar__primary {
  background-color: #0f0f0f !important;
  border-color: #003b00 !important;
}

[data-palette="matrix"] .tox .tox-tbtn {
  color: #00ff41 !important;
}
[data-palette="matrix"] .tox .tox-tbtn:hover {
  background-color: rgba(0, 255, 65, 0.1) !important;
}
[data-palette="matrix"] .tox .tox-tbtn svg {
  fill: #00cc33 !important;
}

[data-palette="matrix"] .tox .tox-edit-area__iframe {
  background-color: #0d0208 !important;
}

[data-palette="matrix"] .tox .tox-menubar,
[data-palette="matrix"] .tox .tox-editor-header {
  background-color: #0f0f0f !important;
  border-color: #003b00 !important;
}

[data-palette="matrix"] .tox.tox-tinymce {
  border-color: #003b00 !important;
}

/* ==========================================================================
   Modals — Matrix Overrides
   ========================================================================== */

[data-palette="matrix"] .modal-content {
  background-color: #0d0208 !important;
  border-color: #003b00 !important;
  color: #00ff41 !important;
}

[data-palette="matrix"] .modal-header {
  border-color: #003b00 !important;
}

[data-palette="matrix"] .modal-footer {
  border-color: #003b00 !important;
}

[data-palette="matrix"] .modal-title {
  color: #00ff41 !important;
}

[data-palette="matrix"] .modal .btn-close {
  filter: invert(1) sepia(1) saturate(5) hue-rotate(85deg) !important;
}