/*
 * ============================================================================
 * CASEFILE TABS COMPONENT v1.0
 * ============================================================================
 * 
 * PURPOSE:
 *   Provides the tabbed navigation system for the Casefile overlay (Evergreen).
 *   Tabs: Clues, People, Known Facts, Contradictions, Timeline
 *
 * STRUCTURE (DO NOT MODIFY):
 *   - #evergreenOverlay (fixed overlay container)
 *   - .eg-shell (desk environment wrapper)
 *   - .eg-stage (main work area)
 *   - .eg-hud (top header bar)
 *   - .eg-tabs (tab navigation)
 *   - .eg-body (content area)
 *
 * SAFE TO CUSTOMIZE:
 *   - Colors (gold accent: rgba(214, 170, 95, ...))
 *   - Tab active color (blue: rgba(106, 169, 255, ...))
 *   - Spacing (padding, margins, gaps)
 *   - Border radius
 *   - Shadows and gradients
 *   - Font sizes
 *   - Hover effects
 *
 * TO MODIFY INTENTIONALLY:
 *   1. Make your changes in this file
 *   2. Test with all tabs (Clues, People, Facts, etc.)
 *   3. Test in different screen sizes
 *   4. Document what you changed and why
 *
 * ============================================================================
 */

/* ============================================================================
   EVERGREEN OVERLAY CONTAINER
   ============================================================================ */

#evergreenOverlay {
  position: fixed;
  inset: 0;
  z-index: 5200;
  display: none;
  pointer-events: none;
}

body.evergreenOpen #evergreenOverlay {
  display: block;
}

/* ============================================================================
   DECORATIVE SHELL (desk environment)
   ============================================================================ */

#evergreenOverlay .eg-shell {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 30px 34px calc(var(--wk-barH) + 26px) 34px;
  overflow: hidden;
  pointer-events: auto;
  /* Solid desk / room tone base */
  background:
    radial-gradient(
      1200px 700px at 20% 15%,
      rgba(214, 170, 95, 0.1),
      rgba(0, 0, 0, 0) 60%
    ),
    radial-gradient(
      1100px 720px at 85% 35%,
      rgba(255, 255, 255, 0.06),
      rgba(0, 0, 0, 0) 58%
    ),
    linear-gradient(180deg, rgba(18, 13, 10, 0.72), rgba(8, 7, 7, 0.78));
}

/* Subtle surface noise / vignette */
#evergreenOverlay .eg-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      900px 520px at 50% 0%,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.5) 72%,
      rgba(0, 0, 0, 0.7)
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.015),
      rgba(255, 255, 255, 0.015) 1px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0) 6px
    );
  opacity: 0.55;
  mix-blend-mode: normal;
}

/* ============================================================================
   CASEFILE STAGE (main work area)
   ============================================================================ */

#evergreenOverlay .eg-stage {
  position: relative;
  pointer-events: auto;
  width: min(1180px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  /* Physical board / pad feel */
  background:
    radial-gradient(
      900px 520px at 30% 10%,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      900px 520px at 70% 70%,
      rgba(214, 170, 95, 0.06),
      rgba(0, 0, 0, 0) 60%
    ),
    linear-gradient(180deg, rgba(14, 12, 11, 0.92), rgba(10, 9, 9, 0.92));
  border: 1px solid rgba(214, 170, 95, 0.26);
  border-radius: 18px;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.7),
    0 2px 0 rgba(255, 255, 255, 0.06) inset;
  padding: 16px 16px 18px;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 980px) {
  #evergreenOverlay .eg-shell {
    padding: 16px 14px calc(var(--wk-barH) + 18px) 14px;
  }
  #evergreenOverlay .eg-stage {
    border-radius: 14px;
    padding: 12px 12px 14px;
  }
}

/* ============================================================================
   EVIDENCE TRAY POSITIONING (when Casefile is open)
   ============================================================================ */

body.evergreenOpen #wkEvidenceDock {
  z-index: 6500;
  pointer-events: auto;
}

/* ============================================================================
   HEADER HUD (title bar with close button)
   ============================================================================ */

#evergreenOverlay .eg-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 12, 16, 0.62);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

#evergreenOverlay .eg-titleWrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#evergreenOverlay .eg-kicker {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  display: none;
}

#evergreenOverlay .eg-title {
  font-weight: 650;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
}

#evergreenOverlay .eg-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

#evergreenOverlay .eg-closeBtn {
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 650;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
}

#evergreenOverlay .eg-closeBtn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

/* ============================================================================
   TAB NAVIGATION
   
   EASY TO CUSTOMIZE:
   - Active tab color: Change rgba(106, 169, 255, ...) to your accent
   - Tab spacing: Change gap, padding values
   ============================================================================ */

#evergreenOverlay .eg-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 4px;
}

/* Hide tabs when notebook is open */
body.notebookOpen #evergreenOverlay .eg-tabs {
  display: none;
}

/* Individual tab button */
#evergreenOverlay .eg-tab {
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}

#evergreenOverlay .eg-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Active tab state */
#evergreenOverlay .eg-tab.active {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(106, 169, 255, 0.35);  /* ← CHANGE ACTIVE TAB COLOR HERE */
  background: rgba(106, 169, 255, 0.12);
}

/* ============================================================================
   CONTENT BODY
   ============================================================================ */

#evergreenOverlay .eg-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 6px 2px;
}

/* ============================================================================
   END OF CASEFILE TABS COMPONENT
   ============================================================================ */