/* Pixel Venues - Brand Dark Overrides */

.theme-dark {
  /* Background gradient stops from site theme */
  --bg-1: #030009; /* darkest */
  --bg-2: #030009; /* use flat for body; gradients add accent glow */

  /* Surfaces (mirror site opacities) */
  --surface: rgba(255,255,255,0.06); /* cards/overlays */
  --surface-solid: #000000; /* solid areas like sidebar/topbar */
  --surface-2: rgba(255,255,255,0.08); /* dropdowns/menus slightly stronger */
  --surface-border: rgba(255, 255, 255, 0.12);

  /* Typography */
  --text: #EEEDEB;
  --text-muted: rgba(238,237,235,0.72);

  /* Brand colors (exact site accent) */
  --primary: #AA2986; /* accent */
  --primary-700: #8e1f6c; /* hover tone seen in video badge */
  --secondary: #AA2986;
  --accent: #AA2986;

  /* Semantic */
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;

  /* Effects */
  --radius: 12px;
  --shadow: 0 12px 32px rgba(0,0,0,.4);
  --ring-color: rgba(170, 41, 134, .35);

  /* Bootstrap bridge */
  --bs-body-bg: var(--bg-2);
  --bs-body-color: var(--text);
  --bs-border-color: var(--surface-border);
  --bs-card-bg: var(--surface);
  --bs-card-color: var(--text);
  --bs-dropdown-bg: var(--surface-2);
  --bs-dropdown-color: var(--text);
  --bs-dropdown-link-hover-bg: rgba(255,255,255,0.06);
  --bs-modal-bg: var(--surface);
  --bs-modal-color: var(--text);
  --bs-popover-bg: var(--surface);
  --bs-popover-body-color: var(--text);
  --bs-tooltip-bg: rgba(0,0,0,.85);
  --bs-tooltip-color: #fff;
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--surface-border);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-700);
  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary);
  --bs-success: var(--success);
  --bs-warning: var(--warning);
  --bs-danger: var(--danger);
  --bs-info: var(--primary);
  --bs-heading-color: var(--text);
  --bs-secondary-color: var(--text-muted);
}

/* Brand background treatment similar to site (accent glow) */
.theme-dark {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(170, 41, 134, 0.35), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color: var(--text);
}

/* Components: navbar/link/hover tweaks */
.theme-dark .navbar { background: rgba(0,0,0,0.35) !important; border-bottom: 1px solid var(--surface-border); backdrop-filter: saturate(140%) blur(8px); }
.theme-dark .navbar .nav-link { color: var(--text); opacity: .92; }
.theme-dark .navbar .nav-link:hover, .theme-dark .navbar .nav-link:focus { color: var(--primary); opacity: 1; }

.theme-dark .card,
.theme-dark .modal-content,
.theme-dark .dropdown-menu,
.theme-dark .list-group-item,
.theme-dark .offcanvas { background: var(--surface); border: 1px solid var(--surface-border); color: var(--text); }

/* Strengthen dropdown contrast in dark theme: reduce transparency for readability */
.theme-dark .dropdown-menu { background: rgba(15, 18, 30, 0.92); backdrop-filter: saturate(140%) blur(8px); }

.theme-dark .btn-primary { background-color: var(--primary); border-color: var(--primary); }
.theme-dark .btn-primary:hover { background-color: var(--primary-700); border-color: var(--primary-700); }
.theme-dark .btn-outline-secondary { color: var(--text); border-color: var(--surface-border); }
.theme-dark .btn-outline-secondary:hover { background: rgba(170,41,134,0.12); border-color: var(--surface-border); }

/* Neutralize any residual cyan/blue hover effects from base theme */
.theme-dark .btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.theme-dark .btn-outline-primary:hover { background: rgba(170,41,134,0.12); border-color: var(--primary); }
.theme-dark .btn-outline-light:hover { background: rgba(255,255,255,0.10); }
.theme-dark .nav-pills .nav-link.active, .theme-dark .nav-pills .show>.nav-link { background-color: var(--primary); color: #0a0010; }
.theme-dark .list-group-item-action.active, .theme-dark .list-group-item.active { background: rgba(170,41,134,0.12); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(170,41,134,0.15) inset; }
.theme-dark label input[type="radio"]:checked + img { box-shadow: 0 0 0 4px rgba(170,41,134,0.12); }

.theme-dark .form-control,
.theme-dark .form-select { background-color: var(--surface-2); color: var(--text); border-color: var(--surface-border); }
.theme-dark .form-control::placeholder { color: var(--text-muted); }

/* Toasts alignment with brand */
.theme-dark .pvs-toast { background: rgba(15, 18, 30, .92); color: var(--text); border: 1px solid var(--surface-border); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
/* Toast primary brand override */
.theme-dark .toast.text-bg-primary {
  background: linear-gradient(180deg, rgba(170,41,134,0.18), rgba(170,41,134,0.12));
  color: #0a0010;
}

/* Toast-only: ensure readable button contrast in dark theme */
.theme-dark .pvs-toast .btn-primary { color: #ffffff; }
.theme-dark .pvs-toast .btn-primary:hover,
.theme-dark .pvs-toast .btn-primary:focus { color: #ffffff; box-shadow: 0 0 0 .25rem rgba(170, 41, 134, .35); }
.theme-dark .pvs-toast .btn-outline-secondary { color: #e8eaed; border-color: rgba(255,255,255,.28); }
.theme-dark .pvs-toast .btn-outline-secondary:hover,
.theme-dark .pvs-toast .btn-outline-secondary:focus { background: rgba(255,255,255,.10); color: #ffffff; }

.theme-dark .workspace-topbar { background: rgba(0,0,0,0.35) !important; border-bottom: 1px solid var(--surface-border) !important; backdrop-filter: saturate(140%) blur(8px); }
.theme-dark .workspace-sidebar { background: var(--surface-solid); border-right: 1px solid var(--surface-border); }

/* Link colors: prefer brand over plain text in dark */
.theme-dark a { color: var(--bs-link-color); }
.theme-dark a:hover, .theme-dark a:focus { color: var(--bs-link-hover-color); }

/* Theme toggle styling and active state */
.theme-dark .theme-toggle, .theme-light .theme-toggle { border-color: var(--surface-border) !important; }
.theme-toggle .btn { background: transparent !important; border: 0 !important; color: var(--text); padding: .25rem .5rem; line-height: 1; }
.theme-toggle .btn i { color: inherit; }
.theme-toggle .btn:hover { background: rgba(170,41,134,0.12) !important; }
.theme-toggle .btn[aria-pressed="true"] { background: rgba(170,41,134,0.18) !important; color: var(--text) !important; }
.theme-toggle .btn[aria-pressed="false"] { opacity: .8; }

/* Light theme overrides to mirror pixelvenues.com */
.theme-light {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-solid: #ffffff;
  --surface-border: rgba(0,0,0,0.08);

  --text: #1d1d1f;
  --text-muted: rgba(29,29,31,0.7);

  --primary: #AA2986;
  --primary-700: #8e1f6c;
  --secondary: #AA2986;
  --accent: #AA2986;

  --radius: 12px;
  --shadow: 0 10px 24px rgba(0,0,0,.08);
  --ring-color: rgba(170, 41, 134, .35);

  /* Bootstrap bridge */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--surface-border);
  --bs-card-bg: var(--surface);
  --bs-card-color: var(--text);
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-color: var(--text);
  --bs-dropdown-link-hover-bg: var(--surface-2);
  --bs-modal-bg: var(--surface);
  --bs-modal-color: var(--text);
  --bs-popover-bg: var(--surface);
  --bs-popover-body-color: var(--text);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-700);
  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary);
  --bs-success: #10B981;
  --bs-warning: #F59E0B;
  --bs-danger: #EF4444;
  --bs-info: var(--primary);
  --bs-heading-color: var(--text);
  --bs-secondary-color: var(--text-muted);
}

.theme-light .navbar.navbar-light.bg-white { background: rgba(255,255,255,0.6) !important; border-bottom: 1px solid var(--surface-border); backdrop-filter: saturate(140%) blur(8px); }
.theme-light .navbar .nav-link { color: var(--text); opacity: .92; }
.theme-light .navbar .nav-link:hover, .theme-light .navbar .nav-link:focus { color: var(--primary); opacity: 1; background: rgba(170,41,134,0.12); }

.theme-light .card,
.theme-light .modal-content,
.theme-light .dropdown-menu,
.theme-light .list-group-item,
.theme-light .offcanvas { background: var(--surface); border: 1px solid var(--surface-border); color: var(--text); }

.theme-light .btn-primary { background-color: var(--primary); border-color: var(--primary); }
.theme-light .btn-primary:hover { background-color: var(--primary-700); border-color: var(--primary-700); }
.theme-light .btn-outline-secondary { color: var(--text); border-color: var(--surface-border); }
.theme-light .btn-outline-secondary:hover { background: rgba(0,0,0,.03); }

.theme-light .form-control,
.theme-light .form-select { background-color: var(--surface); color: var(--text); border-color: var(--surface-border); }
.theme-light .form-control::placeholder { color: var(--text-muted); }

/* Toast-only: ensure readable button contrast in light theme */
.theme-light .pvs-toast .btn-primary { color: #ffffff; }
.theme-light .pvs-toast .btn-primary:hover,
.theme-light .pvs-toast .btn-primary:focus { color: #ffffff; box-shadow: 0 0 0 .25rem rgba(170, 41, 134, .30); }
.theme-light .pvs-toast .btn-outline-secondary { color: #1d1d1f; border-color: rgba(0,0,0,.25); }
.theme-light .pvs-toast .btn-outline-secondary:hover,
.theme-light .pvs-toast .btn-outline-secondary:focus { background: rgba(0,0,0,.04); color: #1d1d1f; }

/* Light background accent glow sections */
.theme-light .hero { background: radial-gradient(1200px 600px at 50% -10%, rgba(170, 41, 134, 0.25), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.0) 100%); }

/* Alerts - align to brand accent */
.theme-dark .alert-primary,
.theme-dark .alert-info {
  background: rgba(170, 41, 134, 0.12);
  border-color: rgba(170, 41, 134, 0.25);
  color: var(--text);
}
.brand-logo { display: inline-block; width: auto; height: 28px; }
.brand-logo img { display: block; height: 100%; width: auto; }
.theme-dark .brand-logo img.light-variant { display: none; }
.theme-dark .brand-logo img.dark-variant { display: inline; }
.theme-light .brand-logo img.dark-variant { display: none; }
.theme-light .brand-logo img.light-variant { display: inline; }

.hero-logo { display: flex; justify-content: center; align-items: center; margin: 0 auto 1rem; width: auto; height: clamp(72px, 10vw, 140px); }
.hero-logo img { height: 100%; width: auto; display: block; }
.theme-dark .hero-logo .light-variant { display: none; }
.theme-dark .hero-logo .dark-variant { display: inline; }
.theme-light .hero-logo .dark-variant { display: none; }
.theme-light .hero-logo .light-variant { display: inline; }
.theme-light .alert-primary,
.theme-light .alert-info {
  background: rgba(170, 41, 134, 0.10);
  border-color: rgba(170, 41, 134, 0.20);
  color: var(--text);
}
/* Success/info align to brand accent (purple) rather than green */
.theme-dark .alert-success,
.theme-dark .alert-info {
  background: rgba(170, 41, 134, 0.12);
  border-color: rgba(170, 41, 134, 0.25);
  color: var(--text);
}
.theme-light .alert-success,
.theme-light .alert-info {
  background: rgba(170, 41, 134, 0.10);
  border-color: rgba(170, 41, 134, 0.20);
  color: var(--text);
}
/* Text-bg primary brand color */
.theme-dark .text-bg-primary { background-color: var(--primary) !important; color: #0a0010 !important; }
.theme-light .text-bg-primary { background-color: var(--primary) !important; color: #ffffff !important; }
/* Unify success toast/badge to brand accent */
.theme-dark .text-bg-success { background-color: var(--primary) !important; color: #0a0010 !important; }
.theme-light .text-bg-success { background-color: var(--primary) !important; color: #ffffff !important; }

/* Badges injected as bg-light text-dark */
.theme-dark .badge.bg-light.text-dark,
.theme-dark .badge.bg-light,
.theme-dark .badge.text-dark {
  background-color: rgba(255,255,255,0.10) !important;
  color: var(--text) !important;
  border: 1px solid var(--surface-border);
}

/* --- Dark theme: tabs and nav links contrast (prevents white hover) --- */
.theme-dark .nav-link:hover,
.theme-dark .nav-link:focus { background: rgba(255,255,255,0.06); color: var(--text); }

.theme-dark .nav-tabs { border-bottom-color: var(--surface-border); }
.theme-dark .nav-tabs .nav-link { color: var(--text-muted); background: transparent; border-color: transparent; }
.theme-dark .nav-tabs .nav-link:hover,
.theme-dark .nav-tabs .nav-link:focus { color: var(--text); background: rgba(255,255,255,0.06); border-color: var(--surface-border); }
.theme-dark .nav-tabs .nav-link.active { color: var(--text); background: rgba(255,255,255,0.04); border-color: var(--surface-border); }

/* Pagination hover/active contrast on dark */
.theme-dark .page-link { background: transparent; border-color: var(--surface-border); color: var(--text); }
.theme-dark .page-link:hover,
.theme-dark .page-link:focus { background: rgba(255,255,255,0.06); color: var(--text); border-color: var(--surface-border); }
.theme-dark .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #0a0010; }

/* --- Dark theme: button hover/readability hardening --- */
/* Primary buttons maintain readable dark text on brand backgrounds */
.theme-dark .btn-primary { color: #0a0010; }
.theme-dark .btn-primary:hover,
.theme-dark .btn-primary:focus { color: #0a0010; }

/* Secondary stays white text on darker backgrounds */
.theme-dark .btn-secondary { color: #ffffff; }
.theme-dark .btn-secondary:hover,
.theme-dark .btn-secondary:focus { color: #ffffff; }

/* Light button: ensure hover gets darker text for contrast when bg lightens */
.theme-dark .btn-light { color: var(--text); background-color: rgba(255,255,255,0.06); border-color: var(--surface-border); }
.theme-dark .btn-light:hover,
.theme-dark .btn-light:focus { color: #0a0010; background-color: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.92); }

/* Outline variants: keep readable text and subtle background on hover */
.theme-dark .btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.theme-dark .btn-outline-primary:hover,
.theme-dark .btn-outline-primary:focus { color: var(--primary); background: rgba(170,41,134,0.18); border-color: var(--primary); }

.theme-dark .btn-outline-secondary { color: var(--text); border-color: var(--surface-border); }
.theme-dark .btn-outline-secondary:hover,
.theme-dark .btn-outline-secondary:focus { color: var(--text); background: rgba(255,255,255,0.12); border-color: var(--surface-border); }

.theme-dark .btn-outline-light { color: var(--text); border-color: rgba(255,255,255,0.35); }
.theme-dark .btn-outline-light:hover,
.theme-dark .btn-outline-light:focus { color: var(--text); background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.5); }

.theme-dark .btn-dark { color: var(--text); background-color: rgba(255,255,255,0.12); border-color: var(--surface-border); }
.theme-dark .btn-dark:hover,
.theme-dark .btn-dark:focus { color: var(--text); background-color: rgba(255,255,255,0.18); }

/* Warning/danger outlines: ensure hover text readable */
.theme-dark .btn-outline-warning { color: #FACC15; border-color: #FACC15; }
.theme-dark .btn-outline-warning:hover,
.theme-dark .btn-outline-warning:focus { background: rgba(250,204,21,0.15); color: #1a1a1a; border-color: #FACC15; }

.theme-dark .btn-outline-danger { color: var(--danger); border-color: var(--danger); }
.theme-dark .btn-outline-danger:hover,
.theme-dark .btn-outline-danger:focus { background: rgba(239,68,68,0.12); color: var(--text); border-color: var(--danger); }

/* Link buttons keep link colors in dark theme */
.theme-dark .btn-link { color: var(--bs-link-color); }
.theme-dark .btn-link:hover,
.theme-dark .btn-link:focus { color: var(--bs-link-hover-color); }

/* --- Dark theme: unify toast visuals across all Bootstrap toasts --- */
.theme-dark .toast { background: rgba(15,18,30,.92); color: var(--text); border: 1px solid var(--surface-border); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.theme-dark .toast .btn-close { filter: invert(1) grayscale(100%); opacity: .85; }
.theme-dark .toast .btn-close:hover { opacity: 1; }
.theme-dark .toast a,
.theme-dark .toast .btn.btn-link { color: var(--bs-link-color); }
.theme-dark .toast a:hover,
.theme-dark .toast .btn.btn-link:hover { color: var(--bs-link-hover-color); }

/* Brand-aligned primary toasts */
.theme-dark .toast.text-bg-primary {
  background: linear-gradient(180deg, rgba(170,41,134,0.18), rgba(170,41,134,0.12));
  color: #0a0010;
}