/*
  Violence MUD - Fallen/Duskworn System-wide Dark Theme
  Scope: Applies when [data-bs-theme="dark"] is present (keeps light mode intact).
  Design: Silver-to-blood diagonal "knife" border with glint at top-left, moody surfaces, desaturated text.
*/

/* =========================
   Core Palette + Variables
   ========================= */
[data-bs-theme="dark"] {
  /* Backgrounds / Surfaces */
  --fallen-bg-0: #0b0d0f;   /* page background (near black) */
  --fallen-bg-1: #111315;
  --fallen-surface-0: #141618; /* card surface */
  --fallen-surface-1: #1b1e21; /* slightly higher surface */
  --fallen-surface-2: #202428;

  /* Text */
  --fallen-text-0: #d6d7d9;  /* primary text */
  --fallen-text-1: #b9bbbe;  /* secondary */
  --fallen-text-muted: #8a8d91;

  /* Accents (Silver -> Blood) */
  --fallen-silver-hi: #e5e5e5;
  --fallen-silver:    #c0c0c0;
  --fallen-silver-lo: #9a9a9a;

  --fallen-blood-1: #7a0000;
  --fallen-blood-2: #990000;
  --fallen-blood-3: #b30000;

  /* Lines / Shadows */
  --fallen-border: #2a2d31;
  --fallen-shadow: rgba(0,0,0,.65);

  /* Bootstrap variable overrides for dark only */
  --bs-body-bg: var(--fallen-bg-0);
  --bs-body-color: var(--fallen-text-0);
  --bs-border-color: var(--fallen-border);
  --bs-link-color: var(--fallen-silver);
  --bs-link-hover-color: var(--fallen-silver-hi);
  --bs-card-bg: var(--fallen-surface-0);
  --bs-card-border-color: var(--fallen-border);
  --bs-primary: var(--fallen-silver-lo);
  --bs-danger: var(--fallen-blood-2);
  --bs-warning: #caa56a; /* antique gold accent (sparingly) */
  --bs-success: #3f6f5a;
}

/* Utility gradient for the "knife" border: silver glint at 0,0 to blood at bottom-right */
[data-bs-theme="dark"] {
  --fallen-border-gradient: linear-gradient(
    135deg,
      rgba(245,245,245,0.95) 0%,
      rgba(229,229,229,0.92) 8%,
      rgba(192,192,192,0.90) 14%,
      rgba(245,245,245,0.95) 18%,
      rgba(160,160,160,0.85) 26%,
      rgba(128,128,128,0.80) 40%,
      rgba(85,0,0,0.75) 70%,
      rgba(138,0,0,0.85) 85%,
      rgba(179,0,0,0.95) 100%
  );
  /* Subtle radial glint at the knife tip (top-left) layered above the gradient */
  --fallen-border-glint: radial-gradient(18% 28% at 0% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
}

/* Reset Bootstrap class clashes: force nav-link color in dark navbar even if text-dark is present */
[data-bs-theme="dark"] .navbar .nav-link.text-dark,
[data-bs-theme="dark"] .navbar .dropdown-item.text-dark {
  color: var(--bs-link-color) !important;
}

/* =========================
   Global / Page
   ========================= */
[data-bs-theme="dark"] body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .container,
[data-bs-theme="dark"] .container-fluid {
  color: var(--fallen-text-0);
}

/* =========================
   Navbar
   ========================= */
[data-bs-theme="dark"] .navbar.navbar-dark.bg-dark {
  background: linear-gradient(180deg, var(--fallen-surface-2), var(--fallen-bg-0)) !important;
  border-bottom: 1px solid var(--fallen-border);
  box-shadow: 0 2px 10px var(--fallen-shadow);
}
[data-bs-theme="dark"] .navbar .navbar-brand,
[data-bs-theme="dark"] .navbar .nav-link {
  color: var(--bs-link-color) !important;
}
[data-bs-theme="dark"] .navbar .nav-link:hover,
[data-bs-theme="dark"] .navbar .nav-link:focus {
  color: var(--bs-link-hover-color) !important;
}

/* =========================
   Cards (surfaces)
   ========================= */
[data-bs-theme="dark"] .card {
  border-radius: 8px;
  border: 1px solid transparent; /* required for background-clip trick */
  background:
    linear-gradient(var(--fallen-surface-0), var(--fallen-surface-0)) padding-box,
    var(--fallen-border-glint),
    var(--fallen-border-gradient) border-box;
  box-shadow: 0 6px 20px var(--fallen-shadow);
}
[data-bs-theme="dark"] .card-header {
  color: var(--fallen-text-0);
  border-bottom: 1px solid var(--fallen-border);
  background: linear-gradient(180deg, var(--fallen-surface-1), var(--fallen-surface-0));
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* =========================
   Buttons
   ========================= */
[data-bs-theme="dark"] .btn {
  color: var(--fallen-text-0);
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(var(--fallen-surface-1), var(--fallen-surface-1)) padding-box,
    var(--fallen-border-glint),
    var(--fallen-border-gradient) border-box !important;
  box-shadow: 0 2px 10px var(--fallen-shadow);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
[data-bs-theme="dark"] .btn:hover,
[data-bs-theme="dark"] .btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--fallen-shadow);
}
/* Sub-variants keep the same border but adjust inner fill */
[data-bs-theme="dark"] .btn-primary {
  background:
    linear-gradient(#252a2f, #22272b) padding-box,
    var(--fallen-border-glint),
    var(--fallen-border-gradient) border-box !important;
}
[data-bs-theme="dark"] .btn-danger {
  background:
    linear-gradient(#2a1c1c, #251717) padding-box,
    var(--fallen-border-glint),
    var(--fallen-border-gradient) border-box !important;
  color: #f3cdcd;
}
[data-bs-theme="dark"] .btn-secondary {
  background:
    linear-gradient(#202428, #1c2024) padding-box,
    var(--fallen-border-glint),
    var(--fallen-border-gradient) border-box !important;
}

/* =========================
   Nav Tabs / Pills
   ========================= */
[data-bs-theme="dark"] .nav-tabs {
  border-bottom: 1px solid var(--fallen-border);
}
[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: var(--fallen-text-1);
  border: 1px solid transparent;
  margin-right: .25rem;
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(var(--fallen-surface-1), var(--fallen-surface-1)) padding-box,
    var(--fallen-border-glint),
    var(--fallen-border-gradient) border-box;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link {
  color: var(--fallen-text-0);
  background:
    linear-gradient(var(--fallen-surface-0), var(--fallen-surface-0)) padding-box,
    var(--fallen-border-glint),
    var(--fallen-border-gradient) border-box;
}

/* =========================
   Forms / Inputs
   ========================= */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  color: var(--fallen-text-0);
  background-color: var(--fallen-surface-1);
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(var(--fallen-surface-1), var(--fallen-surface-1)) padding-box,
    var(--fallen-border-glint),
    var(--fallen-border-gradient) border-box;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  box-shadow: 0 0 0 .2rem rgba(179,0,0,.15);
}

/* =========================
   Dropdowns / Modals
   ========================= */
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content {
  color: var(--fallen-text-0);
  border-radius: 8px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--fallen-surface-0), var(--fallen-surface-0)) padding-box,
    var(--fallen-border-glint),
    var(--fallen-border-gradient) border-box;
  box-shadow: 0 12px 24px var(--fallen-shadow);
}

/* =========================
   Tables
   ========================= */
[data-bs-theme="dark"] .table {
  --bs-table-bg: var(--fallen-surface-0);
  --bs-table-color: var(--fallen-text-0);
  --bs-table-border-color: var(--fallen-border);
}
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--fallen-surface-1);
}

/* =========================
   Progress / Alerts
   ========================= */
[data-bs-theme="dark"] .progress {
  background-color: #101214;
  border-radius: 8px;
  border: 1px solid transparent;
  background:
    linear-gradient(#101214, #101214) padding-box,
    var(--fallen-border-glint),
    var(--fallen-border-gradient) border-box;
}
[data-bs-theme="dark"] .progress-bar.bg-danger,
[data-bs-theme="dark"] .progress-bar {
  background: linear-gradient(90deg, var(--fallen-blood-1), var(--fallen-blood-3));
}

/* =========================
   Lists / Items
   ========================= */
[data-bs-theme="dark"] .list-group-item {
  color: var(--fallen-text-0);
  background-color: var(--fallen-surface-0);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--fallen-surface-0), var(--fallen-surface-0)) padding-box,
    var(--fallen-border-glint),
    var(--fallen-border-gradient) border-box;
}

/* =========================
   Links
   ========================= */
[data-bs-theme="dark"] a,
[data-bs-theme="dark"] .navbar a {
  color: var(--bs-link-color);
}
[data-bs-theme="dark"] a:hover,
[data-bs-theme="dark"] .navbar a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: none;
}

/* =========================
   Terminal container (xterm wrapper) + knife/blood overlays
   ========================= */
[data-bs-theme="dark"] #terminalContainer,
[data-bs-theme="dark"] .terminal-container {
  position: relative;            /* needed for overlays */
  isolation: isolate;            /* keep overlays local */
  background-color: #0b0d0f;
  color: #0f0;
  border: 1px solid transparent;
  background:
    linear-gradient(#0b0d0f, #0b0d0f) padding-box,  /* inner fill */
    var(--fallen-border-glint),                     /* border glint layer (animated) */
    var(--fallen-border-gradient) border-box;       /* silver -> blood knife border */
  /* Animate only the glint (middle) layer across the border from 0,0 to bottom-right */
  background-size: auto, 300% 300%, auto;
  background-position: 0 0, -200% -200%, 0 0;
  animation: fallen-border-glint 2.2s linear infinite;
  box-shadow: inset 0 0 12px rgba(0,0,0,.45), 0 8px 20px var(--fallen-shadow);
}

/* Diagonal silver glint sweeping from top-left */
[data-bs-theme="dark"] #terminalContainer::before,
[data-bs-theme="dark"] .terminal-container::before {
  content: none !important; /* remove previous surface glint overlay */
}

/* Blood vignette at bottom-right */
[data-bs-theme="dark"] #terminalContainer::after,
[data-bs-theme="dark"] .terminal-container::after {
  content: none !important; /* remove previous blood vignette overlay */
}

@keyframes fallen-border-glint {
  0%   { background-position: 0 0, -200% -200%, 0 0; }
  100% { background-position: 0 0,  200%  200%, 0 0; }
}

/* Blood bleeding effect on button hover */
[data-bs-theme="dark"] .btn:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(179,0,0,0.3), rgba(122,0,0,0.3));
  border-radius: 0;
  z-index: -1;
  animation: blood-bleed 0.3s ease-out;
}

@keyframes blood-bleed {
  0% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 0.5; transform: scale(1.05); }
  100% { opacity: 0.3; transform: scale(1); }
}

/* Keep xterm viewport transparent so the container theme shows through */
[data-bs-theme="dark"] #terminalContainer .xterm-viewport,
[data-bs-theme="dark"] .terminal-container .xterm-viewport {
  background-color: transparent !important;
}

/* Terminal scrollbar theming */
[data-bs-theme="dark"] #terminalContainer .xterm-viewport::-webkit-scrollbar,
[data-bs-theme="dark"] .terminal-container .xterm-viewport::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-bs-theme="dark"] #terminalContainer .xterm-viewport::-webkit-scrollbar-track,
[data-bs-theme="dark"] .terminal-container .xterm-viewport::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}
[data-bs-theme="dark"] #terminalContainer .xterm-viewport::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .terminal-container .xterm-viewport::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--fallen-silver), var(--fallen-blood-2));
  border-radius: 0;
}

/* =========================
   Footer
   ========================= */
[data-bs-theme="dark"] .footer {
  background: linear-gradient(180deg, var(--fallen-bg-0), #080a0c);
  border-top: 1px solid var(--fallen-border);
  color: var(--fallen-text-1);
}

/* =========================
   Optional utility to apply the "knife" border to any element
   ========================= */
[data-bs-theme="dark"] .blooded-border {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--fallen-surface-1), var(--fallen-surface-1)) padding-box,
    var(--fallen-border-glint),
    var(--fallen-border-gradient) border-box !important;
  border-radius: 8px !important;
}

/* =========================
   Sharp edges override (no rounded corners)
   ========================= */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .btn,
[data-bs-theme="dark"] .nav-tabs .nav-link,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .progress,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] #terminalContainer,
[data-bs-theme="dark"] .terminal-container,
[data-bs-theme="dark"] .blooded-border {
  border-radius: 0 !important;
}

/* =========================
   Animated sweep glint (terminal always, components on hover)
   ========================= */
@keyframes fallen-sweep {
  0%   { background-position: -200% -200%; }
  100% { background-position:  200%  200%; }
}

/* Terminal: enable continuous diagonal sweep */
[data-bs-theme="dark"] #terminalContainer::before,
[data-bs-theme="dark"] .terminal-container::before {
  background-size: 280% 280%;
  animation: fallen-sweep 8s linear infinite;
  will-change: background-position;
  opacity: 0.55; /* subtle shine */
}
@media (prefers-reduced-motion: reduce) {
  [data-bs-theme="dark"] #terminalContainer::before,
  [data-bs-theme="dark"] .terminal-container::before {
    animation: none !important;
  }
}

/* Cards/Buttons/Tabs: sweep on hover/focus only */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .btn,
[data-bs-theme="dark"] .nav-tabs .nav-link {
  position: relative;
  isolation: isolate; /* contain overlay */
  /* Prepare layers so only the middle glint layer animates across the border on interaction */
  background-size: auto, 300% 300%, auto;
  background-position: 0 0, -200% -200%, 0 0;
}

/* Base overlay (hidden by default) — disable surface overlays; border-only glint will be handled per-border */
[data-bs-theme="dark"] .card::before,
[data-bs-theme="dark"] .btn::before,
[data-bs-theme="dark"] .nav-tabs .nav-link::before {
  content: none !important;
}

/* Activate border-only glint sweep on interaction (single fast pass) */
[data-bs-theme="dark"] .card:hover,
[data-bs-theme="dark"] .card:focus-within,
[data-bs-theme="dark"] .btn:hover,
[data-bs-theme="dark"] .btn:focus-visible,
[data-bs-theme="dark"] .nav-tabs .nav-link:hover,
[data-bs-theme="dark"] .nav-tabs .nav-link:focus-visible {
  animation: fallen-border-glint 0.9s linear 1;
  will-change: background-position;
}

@media (prefers-reduced-motion: reduce) {
  [data-bs-theme="dark"] .card:hover,
  [data-bs-theme="dark"] .card:focus-within,
  [data-bs-theme="dark"] .btn:hover,
  [data-bs-theme="dark"] .btn:focus-visible,
  [data-bs-theme="dark"] .nav-tabs .nav-link:hover,
  [data-bs-theme="dark"] .nav-tabs .nav-link:focus-visible {
    animation: none !important;
  }
}