/* Theme stylesheet for SoulTribe.chat
   - Base variables, colors, typography
   - Shared components (buttons, badges, cards)
   This file is intended to be loaded on all pages.
*/

:root {
  --bg: #0b1220;
  --panel: #0f172a;
  --border: #1f2937;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: linear-gradient(135deg,#7c3aed,#06b6d4);
}

/* Keep existing global styles in styles.css for now.
   New work should prefer vars from here. */
body { color: var(--text); background: var(--bg); }

.button { font-weight: 600; }
.badge { border-radius: 6px; padding: 2px 6px; border: 1px solid var(--border); }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }

/* --- Unified Topbar --- */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  margin: 0;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 8px 16px;
  border-radius: 0;
  background: #f8fafc; /* light default */
  border-bottom: 1px solid #e5e7eb;
  box-shadow: none;
}
.topbar .brand { grid-column: 2; justify-self: center; text-align: center; }
.topbar .actions, .topbar > div:last-child {
  grid-column: 3;
  min-width: 220px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.brand { font-weight: 900; letter-spacing: .5px; font-size: 18px; background: linear-gradient(135deg, #7c3aed, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; }

/* Dark theme overrides */
html[data-theme="dark"] .topbar {
  color: #e5e7eb;
  background: #0f172a;
  border-bottom: 1px solid #1f2937;
  box-shadow: 0 8px 20px rgba(2,6,23,0.35);
}
html[data-theme="dark"] .brand {
  background: linear-gradient(135deg, #a78bfa, #22d3ee);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- Unified Footer --- */
.site-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: 12px;
  color: #64748b;
  background: #f8fafc; /* light */
  border-top: 1px solid #e5e7eb;
  pointer-events: none; /* let links handle pointer events */
  z-index: 50;
}
.site-footer-inner { pointer-events: auto; display: flex; gap: 10px; align-items: center; }
.site-footer a { color: #64748b; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #475569; }
.site-footer .sep { opacity: 0.6; }

@media (prefers-color-scheme: dark) {
  .site-footer {
    color: #94a3b8;
    background: #0f172a; /* dark surface */
    border-top: 1px solid #1f2937;
  }
  .site-footer a { color: #94a3b8; }
  .site-footer a:hover { color: #cbd5e1; }
}

/* Explicit dark theme override */
html[data-theme="dark"] .site-footer {
  color: #94a3b8;
  background: #0f172a;
  border-top: 1px solid #1f2937;
}
html[data-theme="dark"] .site-footer a { color: #94a3b8; }
html[data-theme="dark"] .site-footer a:hover { color: #cbd5e1; }

/* --- Global dark theme overrides --- */
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: #f8fafc;
}

/* Fix any light backgrounds that might be hardcoded */
html[data-theme="dark"] .card,
html[data-theme="dark"] .welcome-card,
html[data-theme="dark"] .md {
  background: #0f172a;
  color: #e5e7eb;
}

/* Code blocks */
html[data-theme="dark"] code,
html[data-theme="dark"] pre {
  background: #0b1020;
  color: #e2e8f0;
  border-color: #1f2937;
}

/* Generic surfaces and inputs */
html[data-theme="dark"] section { background: #0f172a; border: 1px solid #1f2937; box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
html[data-theme="dark"] .card { background: #0f172a !important; border: 1px solid #1f2937 !important; }
html[data-theme="dark"] .small { color: #9ca3af; }
html[data-theme="dark"] input { background: #0b1020; color: #e5e7eb; border: 1px solid #334155; }
html[data-theme="dark"] select { background: #0b1020; color: #e5e7eb; border: 1px solid #334155; }
html[data-theme="dark"] input::placeholder { color: #64748b; }
html[data-theme="dark"] input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25); }
html[data-theme="dark"] select:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25); }

/* Generic badges/cards/list chips */
html[data-theme="dark"] .badge { background: #1f2937; color: #e5e7eb; }
html[data-theme="dark"] .badge.info { background: #1e293b; color: #93c5fd; }
html[data-theme="dark"] .badge.success { background: #0f2d17; color: #86efac; }
html[data-theme="dark"] .badge.error { background: #2a1616; color: #fecaca; }
html[data-theme="dark"] .item-card { background: #0f172a; border: 1px solid #1f2937; box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
html[data-theme="dark"] .item-title { color: #e2e8f0; }
html[data-theme="dark"] .item-sub { color: #cbd5e1; }
html[data-theme="dark"] .chip { background: #111827; border: 1px solid #1f2937; }
html[data-theme="dark"] .chip .meta { color: #94a3b8; }
html[data-theme="dark"] .chip-col:not(:last-child) { border-right-color: #334155; }
html[data-theme="dark"] pre { background: #0b1020; color: #e2e8f0; border: 1px solid #1f2937; }
html[data-theme="dark"] a { color: #93c5fd; }

/* Buttons */
html[data-theme="dark"] button:not(.secondary):not(.btn-cancel-meetup),
html[data-theme="dark"] .button:not(.secondary),
html[data-theme="dark"] .btn-confirm-meetup {
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] button.secondary,
html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .btn-cancel-meetup {
  background: transparent;
  color: #c7d2fe !important;
  border-color: #4b5563;
}
html[data-theme="dark"] button:hover:not(:disabled),
html[data-theme="dark"] .button:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Scrollbars */
html[data-theme="dark"] * { scrollbar-color: #334155 #0b1220; }
html[data-theme="dark"] *::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] *::-webkit-scrollbar-track { background: #0b1220; }
html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #334155; border-radius: 8px; }