/* ==========================================================================
   theme-switcher.css — Fixed Top Bar for Theme/Page Navigation
   ERP CFA Branding — Shared Infrastructure
   ========================================================================== */

/* Push page content below the fixed bar */
body {
  padding-top: 48px;
}

/* Auto-offset sticky/fixed page navbars to clear the theme switcher.
   Applies to all variant headers/navbars that use position:sticky or fixed
   so they don't get hidden behind the 48px theme-switcher bar. */
.navbar,
.va-header,
.va-nav,
.vb-nav,
.vc-header,
.vc-running-header,
.vd-header,
header[class*="header"],
header[class*="nav"],
nav[class*="nav"] {
  top: 48px !important;
}

/* --- Switcher Bar --- */
.theme-switcher {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: #1A1C24;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 1rem;
}

/* --- Theme Tabs (left side) --- */
.theme-switcher__tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.theme-switcher__tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #8B8D97;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.theme-switcher__tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #C5C6CC;
}

.theme-switcher__tab--active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}

/* Color dot indicator for each theme */
.theme-switcher__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.theme-switcher__dot--palven  { background: #2D6A4F; }
.theme-switcher__dot--cursio  { background: #2E86DE; }
.theme-switcher__dot--eskil   { background: #7FB3D3; }
.theme-switcher__dot--alterone { background: #7C5CFC; }

/* --- Variant Selector (center) --- */
.theme-switcher__variants {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: auto;
}

.theme-switcher__variants--hidden {
  display: none;
}

.theme-switcher__variant-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: #6B6D78;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.theme-switcher__variant-group {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.theme-switcher__variant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 0.55rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #8B8D97;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  text-decoration: none;
}

.theme-switcher__variant:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.theme-switcher__variant--active {
  color: #FFFFFF;
  background: var(--theme-switcher-accent, #7C5CFC);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset,
              0 2px 8px rgba(0, 0, 0, 0.3);
}

.theme-switcher__variant--active:hover {
  background: var(--theme-switcher-accent, #7C5CFC);
  color: #FFFFFF;
}

/* Accent color per theme (applied on .theme-switcher root) */
.theme-switcher[data-theme="palven"]   { --theme-switcher-accent: #2D6A4F; }
.theme-switcher[data-theme="cursio"]   { --theme-switcher-accent: #2E86DE; }
.theme-switcher[data-theme="eskil"]    { --theme-switcher-accent: #7FB3D3; }
.theme-switcher[data-theme="alterone"] { --theme-switcher-accent: #7C5CFC; }

/* --- Page Indicator (right side) --- */
.theme-switcher__pages {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.theme-switcher__page {
  padding: 0.35rem 0.65rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #8B8D97;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.theme-switcher__page:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #C5C6CC;
}

.theme-switcher__page--active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .theme-switcher__variant-label {
    display: none;
  }
}

@media (max-width: 640px) {
  .theme-switcher__tab {
    font-size: 0.7rem;
    padding: 0.35rem 0.5rem;
    gap: 0.3rem;
  }

  .theme-switcher__dot {
    width: 6px;
    height: 6px;
  }

  /* Hide page indicator on mobile to save space */
  .theme-switcher__pages {
    display: none;
  }

  .theme-switcher__variant {
    min-width: 22px;
    height: 22px;
    font-size: 0.68rem;
    padding: 0 0.4rem;
  }
}

/* ============================================================================
   Login page — single-viewport layout guard
   ============================================================================
   Login pages must fit naturally inside one viewport (no scroll, no clipping).
   The actual content sizing / hierarchy is the responsibility of each
   per-variant CSS file. This shared block only enforces that:
   - The page root is exactly 100vh tall
   - Body content starts below the 48px theme-switcher
   - No vertical scroll on the document root
   It intentionally does NOT compress padding/font-size globally — each variant
   designs its own compact layout. */
html.pt-login,
body.pt-login {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
body.pt-login {
  padding-top: 48px;
}