/* ===========================================================
   GoGoDashboard — Main Shared Stylesheet
   -----------------------------------------------------------
   Purpose:
     • Global visual tokens (colors, fonts, shadows, etc.)
     • Button components used across all pages
     • Auth-gate overlay and spinner animation
     • Minor global helpers

   Loaded by:
     - index.html
     - signup.html
     - dashboard.html
     - verify-pending.html
     - reset-password.html

   =========================================================== */


/* ===========================================================
   === SECTION: Root Theme Variables
   =========================================================== */
:root {
  --accent: #2563eb;              /* Brand blue accent */
  --bg: #f9fafb;                  /* Light background */
  --panel: #ffffff;               /* Panel / card background */
  --ink: #0f172a;                 /* Primary text color */
  --muted: #6b7280;               /* Subtle text */
  --shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  --radius: 16px;
}


/* ===========================================================
   === SECTION: Base Global Resets
   =========================================================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto,
    Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  background: var(--bg);
  color: var(--ink);
}


/* ===========================================================
   === SECTION: Buttons (Shared Across All Pages)
   =========================================================== */

.btn {
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.2s, transform 0.1s;
  font-size: 15px;
}

/* --- Primary action (blue) --- */
.btn.primary {
  background: var(--accent);
  color: #fff;
}

.btn.primary:hover {
  background: #1d4ed8;
}

/* --- Neutral ghost button --- */
.btn.ghost {
  background: #f3f4f6;
  color: var(--ink);
}

/* --- Link-style button --- */
.btn.link {
  background: transparent;
  color: var(--accent);
  text-decoration: underline;
}

/* --- Slight lift on hover --- */
.btn:hover {
  transform: translateY(-1px);
}


/* ===========================================================
   === SECTION: Auth Gate (Full-Screen Spinner)
   ===========================================================
   Used on pages that need to wait for Firebase session
   initialization before revealing UI.
   ----------------------------------------------------------- */

#auth-gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #fff; /* Match light theme; update later for dark mode */
  z-index: 9999;
}

/* Hidden state (removed from flow) */
#auth-gate.hidden {
  display: none;
}

/* Inner container: spinner + text */
.auth-gate-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Spinner animation */
.auth-spinner {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 3px solid #e5e7eb;
  border-top-color: var(--accent, #2563eb);
  animation: authspin 0.9s linear infinite;
}

@keyframes authspin {
  to {
    transform: rotate(360deg);
  }
}

/* Subtext under spinner */
.auth-gate-msg {
  color: #6b7280;
  font-size: 14px;
}


/* ===========================================================
   === SECTION: Utility Helpers
   =========================================================== */

/* Used to hide inline banners or messages */
.banner-hidden {
  display: none;
}

button, .btn, .fab, .ghost-btn {
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

button:hover:not(:disabled), .btn:hover:not(:disabled), .fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ===========================================================
   End of main.css
   -----------------------------------------------------------
   Notes:
   - Keep utility classes minimal here (global scope).
   - Component-specific styles belong in landing.css or dashboard.css.
   - If adding dark mode, mirror the :root vars with [data-theme="dark"].
   =========================================================== */