/* ==============================================================================
   Vector Libre: El Ágora - Custom Stylesheet (agora.vectorlibre.org)
   Aligns Apache Answer with https://vectorlibre.org design system
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --vl-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --vl-primary: #0284c7;
  --vl-primary-hover: #0369a1;
  --vl-emerald: #059669;
  --vl-bg: #fafafa;
  --vl-border: #e5e5e5;
  --vl-card-bg: #ffffff;
  --vl-text: #1a1a1a;
  --vl-muted: #64748b;
}

/* Global Font & Canvas */
body {
  font-family: var(--vl-font) !important;
  background-color: var(--vl-bg) !important;
  color: var(--vl-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Header & Navbar (Light Theme) */
#header {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--vl-border) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

#header .logo {
  max-height: 2.25rem !important;
  width: auto;
  object-fit: contain;
}

#header .nav-link {
  font-weight: 500;
  font-size: 0.95rem;
}

/* Brand Buttons */
.btn-primary {
  background-color: var(--vl-primary) !important;
  border-color: var(--vl-primary) !important;
  font-weight: 600;
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgba(2, 132, 199, 0.2);
  transition: all 0.15s ease-in-out;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--vl-primary-hover) !important;
  border-color: var(--vl-primary-hover) !important;
  box-shadow: 0 2px 4px 0 rgba(2, 132, 199, 0.3);
}

.btn-outline-primary {
  color: var(--vl-primary) !important;
  border-color: var(--vl-primary) !important;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.15s ease-in-out;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--vl-primary) !important;
  border-color: var(--vl-primary) !important;
  color: #ffffff !important;
}

/* Links */
a {
  color: var(--vl-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--vl-primary-hover);
}

/* Question/Debate Cards & List Items */
.list-group-item {
  border-color: var(--vl-border);
}

/* Vector Libre Network Footer */
.vl-network-footer {
  border-top: 1px solid var(--vl-border);
  background-color: var(--vl-bg);
  padding: 36px 16px 28px;
  margin-top: 48px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--vl-muted);
}

.vl-network-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.vl-network-links a {
  color: #475569;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 5px 14px;
  background: #ffffff;
  border: 1px solid var(--vl-border);
  border-radius: 6px;
  transition: all 0.15s ease;
}

.vl-network-links a:hover {
  color: var(--vl-primary);
  border-color: var(--vl-primary);
  background: #f0f9ff;
  text-decoration: none;
}

.vl-network-links a.active {
  color: var(--vl-primary);
  border-color: var(--vl-primary);
  background: #e0f2fe;
}

.vl-network-copy {
  font-size: 0.825rem;
  color: var(--vl-muted);
  line-height: 1.6;
}

/* ==============================================================================
   Dark Theme System (Unified Slate/Navy Palette)
   ============================================================================== */
[data-bs-theme='dark'] {
  --vl-bg: #070f1e;
  --vl-surface: #0f172a;
  --vl-surface-raised: #1e293b;
  --vl-border: #1e293b;
  --vl-card-bg: #0f172a;
  --vl-text: #f8fafc;
  --vl-muted: #94a3b8;
  --vl-primary: #38bdf8;
  --vl-primary-hover: #0284c7;
  --vl-emerald: #34d399;

  --bs-body-bg: var(--vl-bg);
  --bs-body-color: var(--vl-text);
  --bs-border-color: var(--vl-border);
  --bs-tertiary-bg: var(--vl-surface-raised);
}

[data-bs-theme='dark'] body {
  background-color: var(--vl-bg) !important;
  color: var(--vl-text) !important;
}

/* Header in Dark Mode */
[data-bs-theme='dark'] #header {
  background-color: var(--vl-surface) !important;
  border-bottom: 1px solid var(--vl-border) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4) !important;
}

/* Automatic Dark Logo Substitution */
[data-bs-theme='dark'] #header .logo {
  content: url('https://vectorlibre.org/images/logo-dark.svg') !important;
}

/* Header Links, Icons & Controls (Overriding .theme-light defaults) */
[data-bs-theme='dark'] #header.theme-light .nav-link,
[data-bs-theme='dark'] #header .nav-link,
[data-bs-theme='dark'] #header .btn-link,
[data-bs-theme='dark'] #header .create-icon,
[data-bs-theme='dark'] #header .search-mobile,
[data-bs-theme='dark'] #header .icon-link,
[data-bs-theme='dark'] #header .search-icon,
[data-bs-theme='dark'] #header .hr {
  color: #e2e8f0 !important;
  fill: #e2e8f0 !important;
}

[data-bs-theme='dark'] #header .nav-link:hover,
[data-bs-theme='dark'] #header .icon-link:hover,
[data-bs-theme='dark'] #header .create-icon:hover {
  color: var(--vl-primary) !important;
  fill: var(--vl-primary) !important;
}

/* Header Search Bar in Dark Mode */
[data-bs-theme='dark'] #header .placeholder-search,
[data-bs-theme='dark'] #header.theme-light .placeholder-search {
  color: #f8fafc !important;
  background-color: var(--vl-surface-raised) !important;
  border: 1px solid #334155 !important;
}

[data-bs-theme='dark'] #header .placeholder-search::placeholder,
[data-bs-theme='dark'] #header.theme-light .placeholder-search::placeholder {
  color: #64748b !important;
}

[data-bs-theme='dark'] #header .placeholder-search:focus,
[data-bs-theme='dark'] #header.theme-light .placeholder-search:focus {
  border-color: var(--vl-primary) !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
}

/* Navigation Pills (Account, Profile, Settings) */
[data-bs-theme='dark'] .nav-pills .nav-link.active,
[data-bs-theme='dark'] .nav-pills .show > .nav-link {
  background-color: var(--vl-primary) !important;
  color: #070f1e !important;
  font-weight: 600 !important;
}

[data-bs-theme='dark'] .nav-pills .nav-link:not(.active) {
  color: var(--vl-muted) !important;
}

[data-bs-theme='dark'] .nav-pills .nav-link:not(.active):hover {
  color: var(--vl-text) !important;
  background-color: var(--vl-surface-raised) !important;
}

/* Left Sidebar Navigation */
[data-bs-theme='dark'] .side-nav .nav-link {
  color: var(--vl-muted) !important;
  border-radius: 6px;
  transition: all 0.15s ease;
}

[data-bs-theme='dark'] .side-nav .nav-link:hover {
  color: var(--vl-text) !important;
  background-color: var(--vl-surface-raised) !important;
}

[data-bs-theme='dark'] .side-nav .nav-link.active {
  color: var(--vl-text) !important;
  background-color: var(--vl-surface-raised) !important;
  font-weight: 600;
}

/* Form Controls in Dark Mode */
[data-bs-theme='dark'] .form-control,
[data-bs-theme='dark'] .form-select {
  background-color: var(--vl-surface-raised) !important;
  border: 1px solid #334155 !important;
  color: var(--vl-text) !important;
}

[data-bs-theme='dark'] .form-control:focus,
[data-bs-theme='dark'] .form-select:focus {
  border-color: var(--vl-primary) !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
  background-color: var(--vl-surface-raised) !important;
  color: var(--vl-text) !important;
}

[data-bs-theme='dark'] .form-control:disabled,
[data-bs-theme='dark'] .form-control[readonly] {
  background-color: var(--vl-surface) !important;
  border-color: var(--vl-border) !important;
  color: var(--vl-muted) !important;
  opacity: 0.85;
}

/* Buttons in Dark Mode */
[data-bs-theme='dark'] .btn-outline-secondary {
  color: #cbd5e1 !important;
  border-color: #475569 !important;
}

[data-bs-theme='dark'] .btn-outline-secondary:hover {
  background-color: var(--vl-surface-raised) !important;
  color: #ffffff !important;
  border-color: var(--vl-primary) !important;
}

[data-bs-theme='dark'] .btn-outline-secondary.active,
[data-bs-theme='dark'] .btn-outline-secondary:active {
  background-color: var(--vl-primary) !important;
  border-color: var(--vl-primary) !important;
  color: #070f1e !important;
  font-weight: 600 !important;
}

[data-bs-theme='dark'] .btn-secondary {
  background-color: var(--vl-surface-raised) !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

[data-bs-theme='dark'] .btn-outline-danger {
  color: #f87171 !important;
  border-color: #ef4444 !important;
}

[data-bs-theme='dark'] .btn-outline-danger:hover {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}

/* Cards, Dropdowns & Modals */
[data-bs-theme='dark'] .card,
[data-bs-theme='dark'] .modal-content,
[data-bs-theme='dark'] .dropdown-menu {
  background-color: var(--vl-surface) !important;
  border-color: var(--vl-border) !important;
  color: var(--vl-text) !important;
}

[data-bs-theme='dark'] .dropdown-item {
  color: var(--vl-text) !important;
}

[data-bs-theme='dark'] .dropdown-item:hover,
[data-bs-theme='dark'] .dropdown-item:focus {
  background-color: var(--vl-surface-raised) !important;
  color: #ffffff !important;
}

[data-bs-theme='dark'] .list-group-item {
  background-color: var(--vl-surface) !important;
  border-color: var(--vl-border) !important;
  color: var(--vl-text) !important;
}

/* Network Footer in Dark Mode */
[data-bs-theme='dark'] .vl-network-footer {
  background-color: #040813 !important;
  border-top: 1px solid var(--vl-border) !important;
  color: var(--vl-muted) !important;
}

[data-bs-theme='dark'] .vl-network-links a {
  background-color: var(--vl-surface-raised) !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

[data-bs-theme='dark'] .vl-network-links a:hover {
  background-color: #0369a1 !important;
  border-color: var(--vl-primary) !important;
  color: #ffffff !important;
}

[data-bs-theme='dark'] .vl-network-links a.active {
  background-color: var(--vl-primary) !important;
  border-color: var(--vl-primary) !important;
  color: #070f1e !important;
  font-weight: 700;
}