/* =========================================================
   GeneBean — Modules Theme
   File: public_html/genebean/Styles/modes/modules-theme.css

   PURPOSE
   - Visual styling ONLY (no layout)
   - Centralized design tokens at top
   - Safe to reuse tokens across modes (Home, File Reader, etc.)
========================================================= */

/* =========================================================
   MODULES HEADER — TOOLBAR / TITLE (THEME ONLY)
   Targets: .modules-header (new canvas header row)
========================================================= */

.modules-header {
    position: relative;
    background: #141c2f;
    /* box-shadow: inset 0 -1px 0 rgba(255,255,255,0.04),
    0 6px 20px rgba(0,0,0,0.35); */
}

/* Title */
.modules-header h1 {
  position: relative;
  color: var(--gb-text-primary);
  letter-spacing: -0.02em;
}
.modules-header h1::after {
  content: '';
  display: block;
  width: 72px;
  height: 1px;
  margin-top: 8px;

  background: linear-gradient(
    to right,
    var(--gb-accent-sky),
    transparent
  );
  opacity: 0.9;
}
/* Subtitle */
.modules-header p {
  color: var(--gb-text-secondary);
}

/* =========================================================
   MODULES MODE — GLOBAL BACKGROUND OVERRIDE
========================================================= */


/* =========================================================
   MODULES SIDEBAR HEADER — THEME ONLY
   (Layout is defined in modules-layout.css)
========================================================= */

.modules-sidebar-header {

  border-bottom: 1px solid var(--gb-border-subtle);
}


.modules-sidebar-header h2 {
  /* Typography color only */
  color: var(--gb-text-muted);
}

/* =========================================================
   SIDEBAR — NAVIGATION SURFACE
========================================================= */

.modules-sidebar {
    background: #141c2f;
    transform: translateX(0);
    opacity: 1;
    will-change: transform, opacity;
    transition: transform 320ms cubic-bezier(.22,.61,.36,1),
    opacity 220ms ease;
}



/* =========================================================
   MODULE PILLS — NAVIGATION ITEMS
========================================================= */

.module-pill {
  background: transparent;
  color: var(--gb-nav-text-muted);
  border: 1px solid transparent;
}
.module-pill:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.6),
    0 0 0 3px var(--gb-accent-sky-soft);
}

.module-pill:hover {
  background: var(--gb-surface-panel-soft);
  color: var(--gb-nav-text);
  border-color: var(--gb-accent-sky-faint);
}

/* Active module = current context */
.module-pill.active {
    background: #171b2b;
    border-color: var(--gb-border-active);
    color: var(--gb-nav-text-active);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 0 1px var(--gb-accent-sky-faint);
}

/* Optional state indicator (disabled by default) */
.module-pill.active::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}


/* =========================================================
   WORKSPACE — EXECUTION SURFACE
========================================================= */

.modules-workspace {
  background: var(--gb-surface-panel);
  color: var(--gb-text-primary);
  box-shadow: var(--gb-shadow-deep);
}


/* =========================================================
   WORKSPACE — TYPOGRAPHY
========================================================= */

.modules-workspace h1,
.modules-workspace h2,
.modules-workspace h3 {
  color: var(--gb-text-primary);
  font-weight: 500;
}

.modules-workspace hr {
  border: none;
  height: 1px;
  margin: 24px 0;
  background: rgba(255,255,255,0.15);
}


/* =========================================================
   COLLAPSE TOGGLE — VISUALS ONLY
========================================================= */

.modules-collapse-toggle {
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.modules-collapse-toggle .chevron {
  color: var(--gb-text-muted);
  transition:
    transform 260ms cubic-bezier(.22,.61,.36,1),
    color 180ms ease,
    text-shadow 180ms ease;
  transform-origin: 50% 50%;
}

.modules-collapse-toggle:hover .chevron {
  transform: scale(1.15);
  color: var(--gb-accent-sky);
}

.modules-collapse-toggle:active .chevron {
  transform: scale(0.95);
}

/* Collapsed emphasis */
.modules-canvas.is-collapsed .modules-collapse-toggle {
  background: var(--gb-surface-dark-soft);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.08);
}

.modules-canvas.is-collapsed .chevron {
  color: var(--gb-text-secondary);
}

.modules-canvas.is-collapsed
.modules-collapse-toggle:hover .chevron {
  text-shadow: 0 0 6px rgba(107,188,255,0.35);
}

/* Neutralize browser focus / hover paint */
.modules-collapse-toggle,
.modules-collapse-toggle:hover,
.modules-collapse-toggle:active,
.modules-collapse-toggle:focus,
.modules-collapse-toggle:focus-visible {
  background: transparent !important;
  border: none;
  box-shadow: none;
}


/* =========================================================
   SCROLLBARS — MODULES SCOPE
========================================================= */

/* Firefox */
.modules-workspace,
.modules-sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--gb-scrollbar-thumb) transparent;
}

/* WebKit */
.modules-workspace::-webkit-scrollbar,
.modules-sidebar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.modules-workspace::-webkit-scrollbar-track,
.modules-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.modules-workspace::-webkit-scrollbar-thumb,
.modules-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--gb-scrollbar-thumb);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.modules-workspace::-webkit-scrollbar-thumb:hover,
.modules-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: var(--gb-scrollbar-thumb-hover);
}
a {
    text-decoration: none;
}