/* matrix_theme.css - Matrix theme Easter egg styles */

/* ── Theme variable overrides ──
   Sets CSS custom properties so elements using var(--theme-*) in styles.css
   automatically pick up matrix colors without needing !important overrides.
   This covers: body text, accents, borders, surfaces, buttons, dropdowns,
   search input, slider thumbs, settings toggles, tree side tabs, etc. */
body.matrix-theme {
  --theme-bg: #0a0a0a;
  --theme-surface: #0a100a;
  --theme-text: #00ff41;
  --theme-accent: #00ff41;
  --theme-border: #0a3a0a;
  --theme-hover: #1a2a1a;
  --theme-muted: #00802080;
  --theme-divider: #0a3a0a;
  --theme-input-bg: #0d1a0d;
  --theme-danger: #ff4444;
}

/* ── CRT scanline overlay ── */
body.matrix-theme::after {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 65, 0.03) 2px,
    rgba(0, 255, 65, 0.03) 4px
  );
  pointer-events: none;
  z-index: 9998;
}

/* ── Vignette overlay ── */
body.matrix-theme::before {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
  z-index: 9997;
}

/* ── Global text glow + monospace ──
   font-family needs !important to override the hardcoded body font.
   color is handled by --theme-text above. */
body.matrix-theme {
  font-family: 'Consolas', 'Courier New', 'Lucida Console', monospace !important;
  text-shadow: 0 0 4px rgba(0, 255, 65, 0.4);
}

body.matrix-theme *:not(i):not(svg):not(path):not(line):not(polyline):not(circle):not(text) {
  font-family: inherit !important;
}
/* Restore Font Awesome icon fonts */
body.matrix-theme .fa,
body.matrix-theme .fas,
body.matrix-theme .far,
body.matrix-theme .fal,
body.matrix-theme .fad {
  font-family: "Font Awesome 6 Free" !important;
}
body.matrix-theme .fab {
  font-family: "Font Awesome 6 Brands" !important;
}

/* ── Green scrollbars ── */
body.matrix-theme ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.matrix-theme ::-webkit-scrollbar-track {
  background: #0a0a0a;
}
body.matrix-theme ::-webkit-scrollbar-thumb {
  background: #00802080;
  border-radius: 4px;
}
body.matrix-theme ::-webkit-scrollbar-thumb:hover {
  background: #00ff4160;
}
body.matrix-theme {
  scrollbar-color: #00802080 #0a0a0a;
}

/* ── Selection highlight ── */
body.matrix-theme ::selection {
  background: #00ff4140;
  color: #00ff41;
}

/* ── Logo: bright green + glow + flicker ──
   .logo-main color inherits from --theme-text.
   .logo-subtitle uses a distinct muted green, needs !important. */
body.matrix-theme .logo-main {
  text-shadow: 0 0 8px #00ff41, 0 0 20px rgba(0, 255, 65, 0.5);
  animation: matrix-flicker 4s infinite;
}

body.matrix-theme .logo-subtitle {
  color: #00cc33 !important;
  text-shadow: 0 0 4px rgba(0, 255, 65, 0.3);
  opacity: 0.8;
}

@keyframes matrix-flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.85; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  97% { opacity: 1; }
}

/* ── TopBar ──
   Semi-transparent bg needed for rain to show through, overrides inherited bg.
   border-bottom-color handled by --theme-border. */
body.matrix-theme #topBar {
  background: rgba(5, 10, 5, 0.92) !important;
  backdrop-filter: blur(6px);
}

/* ── Search input ──
   background is slightly different from --theme-surface, set explicitly.
   color + border-color handled by --theme-text and --theme-border.
   focus border-color handled by --theme-accent. */
body.matrix-theme .search-input {
  background: #0d1a0d;
}
body.matrix-theme .search-input::placeholder {
  color: #00802060 !important;
}
body.matrix-theme .search-input:focus {
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.3) !important;
}
body.matrix-theme .search-icon {
  color: #00802080 !important;
}

/* ── Model tiles (semi-transparent so rain shows through) ──
   .model-card class kept for potential dynamic usage.
   These need !important since .model-card is not in styles.css base rules. */
body.matrix-theme .model-card {
  background: rgba(13, 26, 13, 0.85) !important;
  border-color: #0a3a0a !important;
}
body.matrix-theme .model-card:hover {
  border-color: #00ff4160 !important;
  box-shadow: 0 0 12px rgba(0, 255, 65, 0.15) !important;
}
body.matrix-theme .file-name {
  color: #00ff41 !important;
}
body.matrix-theme .file-size,
body.matrix-theme .file-type {
  color: #00802080 !important;
}

/* ── Buttons ──
   color + border-color handled by --theme-text and --theme-border.
   background: transparent overrides --theme-surface via specificity.
   Hover states need !important since base uses hardcoded colors. */
body.matrix-theme .btn,
body.matrix-theme .dropdown-btn {
  background: transparent;
}
body.matrix-theme .btn:hover,
body.matrix-theme .dropdown-btn:hover {
  border-color: #00ff41 !important;
  box-shadow: 0 0 6px rgba(0, 255, 65, 0.2) !important;
  background: rgba(0, 255, 65, 0.05) !important;
}

/* ── Dropdowns ──
   background + border-color handled by --theme-surface and --theme-border.
   Hover states need !important since base uses hardcoded #444. */
body.matrix-theme .dropdown-content label:hover,
body.matrix-theme .dropdown-content .dropdown-setting-row:hover {
  background: rgba(0, 255, 65, 0.08) !important;
}
body.matrix-theme .settings-dropdown-content {
  background: #0a100a;
}

/* ── Page info (distinct muted green, not --theme-text) ── */
body.matrix-theme .pageInfo {
  color: #00cc33 !important;
}

/* ── Size slider ──
   Thumb background handled by --theme-accent.
   Track needs !important since base uses hardcoded #555. */
body.matrix-theme .size-slider::-webkit-slider-runnable-track {
  background: #0a3a0a !important;
}

/* ── Viewer container (transparent so rain shows behind tiles) ── */
body.matrix-theme #viewerContainer {
  background: transparent !important;
}

/* ── Empty state / welcome (distinct muted green) ── */
body.matrix-theme .empty-state {
  color: #00cc33 !important;
  text-shadow: 0 0 6px rgba(0, 255, 65, 0.3);
}

/* ── Fullscreen overlay ──
   These override hardcoded colors (rgba black, white), need !important. */
body.matrix-theme #fullscreenOverlay {
  background: #050a05 !important;
}
body.matrix-theme #returnButton {
  color: #00ff41 !important;
}
body.matrix-theme .fullscreen-nav {
  color: #00ff41 !important;
}
body.matrix-theme .fullscreen-filename {
  color: #00ff41 !important;
}

/* ── Cloud path bar ──
   Base uses hardcoded colors (#1a1a2e, #333), needs !important. */
body.matrix-theme .cloud-path-bar {
  background: #0a100a !important;
  border-color: #0a3a0a !important;
}
body.matrix-theme .cloud-path-divider {
  background: #0a3a0a !important;
}

/* ── Tree folder panel ──
   background overrides --theme-bg with a slightly different shade, needs !important.
   border-color handled by --theme-border.
   .tree-side-tab fully handled by --theme-surface, --theme-text, --theme-border. */
body.matrix-theme .tree-folder-panel {
  background: #0a100a !important;
}

/* ── ZIP/custom SVG icons ──
   No variables exist for these, need !important. */
body.matrix-theme .custom-fa-icon {
  color: #00ff41 !important;
}
body.matrix-theme .custom-fa-icon .folder-shape-fa {
  fill: #00ff41 !important;
  opacity: 0.7;
}
body.matrix-theme .custom-fa-icon .text-overlay-fa {
  fill: #0a0a0a !important;
}

/* ── Collapsible headers in settings ──
   Base uses hardcoded #ddd, needs !important. */
body.matrix-theme .settings-dd-section-header {
  color: #00ff41 !important;
}

/* ── Dividers ──
   Base uses background-color: #555, not border. Kept for safety. */
body.matrix-theme .dropdown-divider {
  border-color: #0a3a0a !important;
}

/* ═══ Hidden trigger dot ═══ */
.matrix-trigger {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 1;
}
.matrix-trigger-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #00ff41;
  opacity: 0.06;
  transition: opacity 0.3s, box-shadow 0.3s;
}
.matrix-trigger:hover .matrix-trigger-dot {
  opacity: 0.4;
  box-shadow: 0 0 6px #00ff41;
  cursor: pointer;
}

/* Pulsing glow when matrix theme is active */
body.matrix-theme .matrix-trigger-dot {
  opacity: 0.8;
  box-shadow: 0 0 8px #00ff41;
  animation: matrix-dot-pulse 2s ease-in-out infinite;
}

@keyframes matrix-dot-pulse {
  0%, 100% { opacity: 0.6; box-shadow: 0 0 6px #00ff41; }
  50% { opacity: 1; box-shadow: 0 0 14px #00ff41, 0 0 24px rgba(0, 255, 65, 0.4); }
}

/* ═══ Matrix mode toast ═══ */
.matrix-mode-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10010;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 14px;
  color: #00ff41;
  background: rgba(0, 10, 0, 0.85);
  border: 1px solid #00ff4140;
  padding: 8px 20px;
  border-radius: 6px;
  text-shadow: 0 0 6px rgba(0, 255, 65, 0.5);
  box-shadow: 0 0 16px rgba(0, 255, 65, 0.15);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.matrix-mode-toast.visible {
  opacity: 1;
}