/* ==================== THEME VARIABLES ==================== */
:root {
  /* Light Mode */
  --bg-body: #ffffff;
  --text-primary: rgb(17 24 39);
  --tab-bg: rgb(249 250 251);
  --tab-bg-hover: rgb(243 244 246);
  --tab-border: rgb(209 213 219);
  --tab-selected-bg: rgb(127 29 29);
  --tab-selected-bg-hover: rgb(153 27 27);
  --tab-selected-border: rgb(153 27 27);
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-shadow: rgba(0, 0, 0, 0.1);
  --input-focus: rgba(59, 130, 246, 0.3);
  --input-border-focus: #3b82f6;

  /* Toggle button – light */
  --toggle-bg: rgba(255,255,255,0.10);
  --toggle-ring: rgba(255,255,255,0.20);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark Mode */
    --bg-body: #0f172a;
    --text-primary: #f1f5f9;
    --tab-bg: #1e293b;
    --tab-bg-hover: #334155;
    --tab-border: #475569;
    --tab-selected-bg: #991b1b;
    --tab-selected-bg-hover: #b91c1c;
    --tab-selected-border: #dc2626;
    --glass-bg: rgba(15, 23, 42, 0.4);
    --glass-border: rgba(148, 163, 184, 0.2);
    --glass-shadow: rgba(0, 0, 0, 0.3);
    --input-focus: rgba(59, 130, 246, 0.4);
    --input-border-focus: #60a5fa;

    /* Toggle button – dark */
    --toggle-bg: rgba(15,23,42,0.40);
    --toggle-ring: rgba(148,163,184,0.30);
  }
}

/* Manual override */
.dark-mode {
  --bg-body: #0f172a;
  --text-primary: #f1f5f9;
  --tab-bg: #1e293b;
  --tab-bg-hover: #334155;
  --tab-border: #475569;
  --tab-selected-bg: #991b1b;
  --tab-selected-bg-hover: #b91c1c;
  --tab-selected-border: #dc2626;
  --glass-bg: rgba(15, 23, 42, 0.4);
  --glass-border: rgba(148, 163, 184, 0.2);
  --glass-shadow: rgba(0, 0, 0, 0.3);
  --input-focus: rgba(59, 130, 246, 0.4);
  --input-border-focus: #60a5fa;

  --toggle-bg: rgba(15,23,42,0.40);
  --toggle-ring: rgba(148,163,184,0.30);
}

/* ==================== HIGH-CONTRAST MODE – LIGHT ==================== */
.high-contrast {
  --bg-body: #ffffff !important;
  --text-primary: #000000 !important;

  --glass-bg: #ffffff !important;
  --glass-border: #000000 !important;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;

  --input-focus: rgba(0, 0, 0, 0.3) !important;
  --input-border-focus: #000000 !important;
}

/* Header & trigger buttons */
.high-contrast header button,
.high-contrast #login-trigger {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
}
.high-contrast header button svg,
.high-contrast #login-trigger svg {
  color: #000000 !important;
  fill: #000000 !important;
}
.high-contrast header button:hover,
.high-contrast #login-trigger:hover {
  background-color: #f0f0f0 !important;
}

/* Login form inputs */
.high-contrast .glass input {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  border-radius: 0.5rem;
}
.high-contrast .glass input::placeholder {
  color: #555555 !important;
}
.high-contrast .glass input:focus {
  background-color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3) !important;
  border-color: #000000 !important;
}

/* Labels & headings */
.high-contrast .glass label,
.high-contrast .glass h1 {
  color: #000000 !important;
  font-weight: 600 !important;
}

/* Submit button (light HC) */
.high-contrast .glass button[type="submit"] {
  background-color: #0000ff !important;
  color: #ffffff !important;
  font-weight: bold !important;
}
.high-contrast .glass button[type="submit"]:hover {
  background-color: #0000cc !important;
}

/* A11Y TOGGLE – LIGHT HC */
.high-contrast #a11y-toggle {
  background-color: #ffffff !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}
.high-contrast #a11y-toggle svg {
  color: #000000 !important;
  fill: #000000 !important;
}
.high-contrast #a11y-toggle:hover {
  background-color: #f0f0f0 !important;
}

/* ==================== HIGH-CONTRAST MODE – DARK ==================== */
.high-contrast.dark-mode {
  --bg-body: #000000 !important;
  --text-primary: #ffffff !important;

  --glass-bg: #000000 !important;
  --glass-border: #ffffff !important;
  --glass-shadow: 0 8px 32px rgba(255, 255, 255, 0.3) !important;

  --input-focus: rgba(255, 255, 255, 0.3) !important;
  --input-border-focus: #ffffff !important;
}

/* Dark mode buttons */
.high-contrast.dark-mode header button,
.high-contrast.dark-mode #login-trigger {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 6px rgba(255,255,255,0.3) !important;
}
.high-contrast.dark-mode header button svg,
.high-contrast.dark-mode #login-trigger svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.high-contrast.dark-mode header button:hover,
.high-contrast.dark-mode #login-trigger:hover {
  background-color: #111111 !important;
}

/* Dark inputs */
.high-contrast.dark-mode .glass input {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}
.high-contrast.dark-mode .glass input::placeholder {
  color: #aaaaaa !important;
}
.high-contrast.dark-mode .glass input:focus {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3) !important;
}

/* Dark labels */
.high-contrast.dark-mode .glass label,
.high-contrast.dark-mode .glass h1 {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Submit button (dark HC) */
.high-contrast.dark-mode .glass button[type="submit"] {
  background-color: #ffff00 !important;
  color: #000000 !important;
  font-weight: bold !important;
}
.high-contrast.dark-mode .glass button[type="submit"]:hover {
  background-color: #cccc00 !important;
}

/* A11Y TOGGLE – DARK HC */
.high-contrast.dark-mode #a11y-toggle {
  background-color: #000000 !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.4) !important;
}
.high-contrast.dark-mode #a11y-toggle svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.high-contrast.dark-mode #a11y-toggle:hover {
  background-color: #111111 !important;
}

/* ==================== FOCUS INDICATORS (HIGH-CONTRAST) ==================== */
.high-contrast :focus-visible {
  outline: 4px solid #000000 !important;
  outline-offset: 2px;
}
.high-contrast.dark-mode :focus-visible {
  outline: 4px solid #ffffff !important;
  outline-offset: 2px;
}

/* ==================== HIGH-CONTRAST: DISABLE BACKGROUND MEDIA + TEXTURE ==================== */
.high-contrast #bg-video { display: none !important; }

.high-contrast body {
  background: #ffffff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"><path fill="%23f0f0f0" d="M1 3h1v1H1V3zm2-2h1v1H3V1z"/></svg>') repeat !important;
  background-image: none !important;
}
.high-contrast.dark-mode body {
  background: #000000 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"><path fill="%23111111" d="M1 3h1v1H1V3zm2-2h1v1H3V1z"/></svg>') repeat !important;
  background-image: none !important;
}

/* ==================== SMOOTH TRANSITIONS ==================== */
body,
.context-menu a::before,
.glass,
#theme-toggle,
#a11y-toggle,
#bg-selector-btn,
#login-trigger,
header > div,
footer > div,
.gloss-gradient,
.inner-glow {
  transition: background 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease,
              background-color 0.3s ease,
              opacity 0.3s ease;
}

/* ==================== GLOBAL ==================== */
body {
  font-family: 'Figtree', system-ui, sans-serif;
  background-color: var(--bg-body);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
}

/* ==================== LOGO SWAP ==================== */
.logo-light { display: block; }
.logo-dark  { display: none; }
.dark-mode .logo-light { display: none; }
.dark-mode .logo-dark  { display: block; }
.logo-light,
.logo-dark {
  height: 76px;
  width: auto;
}

/* ==================== TOGGLE BUTTONS ==================== */
#theme-toggle,
#a11y-toggle,
#bg-selector-btn {
  background: var(--toggle-bg);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--toggle-ring);
}

/* ==================== DARK MODE HEADER ==================== */
.dark-mode header > div {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.dark-mode .gloss-gradient {
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.05),
    transparent
  ) !important;
  opacity: 1;
}
.dark-mode .inner-glow {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ==================== DARK MODE FOOTER ==================== */
.dark-mode footer > div {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 
    0 -8px 32px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.dark-mode footer .gloss-gradient {
  background: linear-gradient(to top,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.05),
    transparent
  ) !important;
  opacity: 1;
}
.dark-mode footer .inner-glow {
  box-shadow: inset 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
}
.dark-mode footer .text-gray-600 {
  color: #e2e8f0 !important;
}

/* ==================== CONTEXT MENU TABS ==================== */
.context-menu a {
  position: relative;
  display: inline-block;
  padding: 0.75rem 1.5rem 0.5rem;
  color: var(--text-primary);
  text-decoration: none;
  margin: 0 -4px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
}
.context-menu a.selected { color: white; z-index: 2; }
.context-menu a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tab-bg);
  border: 1px solid var(--tab-border);
  border-bottom: none;
  clip-path: polygon(0.5rem 0, calc(100% - 0.5rem) 0, 100% 100%, 0 100%);
  transition: background 0.2s, border-color 0.2s;
}
.context-menu a:hover::before { background: var(--tab-bg-hover); }
.context-menu a.selected::before {
  background: var(--tab-selected-bg);
  border-color: var(--tab-selected-border);
  bottom: -1px;
  clip-path: polygon(0.5rem 0, calc(100% - 0.5rem) 0, 100% 100%, 0 100%);
}
.context-menu a.selected:hover::before { background: var(--tab-selected-bg-hover); }

/* ==================== GLASS PANEL ==================== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px var(--glass-shadow);
  border-radius: 1rem;
  padding: 1.5rem;
}
.glass,
.glass input,
.glass label,
.glass h1,
.glass button {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.01em;
}
.glass input {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--text-primary);
  border-radius: .5rem;
  padding: .5rem .75rem;
}
.glass input::placeholder { color: rgba(255,255,255,.6); }
.glass input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--input-focus);
  border-color: var(--input-border-focus);
  background: rgba(255,255,255,.15);
}

/* ==================== LOGIN ANIMATIONS (UPDATED) ==================== */
#login-container,
#login-trigger-wrapper,
#bg-selector-modal { 
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; 
}
#login-container.opacity-0,
#login-trigger-wrapper.opacity-0,
#bg-selector-modal.opacity-0 { 
  opacity: 0; 
  pointer-events: none; 
  transform: translateY(8px);
}
#login-container.opacity-100 { 
  opacity: 1; 
  transform: translateY(0);
}
#login-trigger-wrapper.hidden,
#bg-selector-modal.hidden { 
  display: none; 
}

/* ==================== BACKGROUND SELECTOR MODAL ==================== */
#bg-selector-modal,
#bg-modal-overlay {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.bg-selector-thumb {
  position: relative;
  cursor: pointer;
}
.bg-selector-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.2s;
}
.bg-selector-thumb:hover::after {
  opacity: 1;
}

/* ==================== SCREEN READER ONLY ==================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}