/**
 * Elequate Platform — Global Design Tokens & Components
 *
 * Load this on every Hub page:
 *   <link rel="stylesheet" href="shared/elequate.css">
 *
 * Brand source of truth: /Users/iamtown/elequate/apps/website/brand.html
 * Design system doc:     /Users/iamtown/.elequate-claude/docs/design-system.md
 *
 * Contents:
 *   1. Design Tokens (CSS variables)
 *   2. Status / Metric Colors
 *   3. Pct-Cell (funnel metric badges)
 *   4. Cell Tooltip (hover detail panels)
 *   5. Table Base
 */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand palette */
  --eq-navy:        #1a4d6e;   /* navy-deep — dark panels, tooltip bg */
  --eq-blue:        #2d7db3;   /* blueprint-blue — primary brand blue */
  --eq-blue-dark:   #1e5a82;   /* blueprint-dark */
  --eq-cyan:        #21c0ff;   /* cyan-accent — labels, highlights, links */
  --eq-cyan-hover:  #1ba8e0;

  /* App shell (dark UI) */
  --eq-bg:          #1a2744;   /* page background */
  --eq-bg-deep:     #0d1e36;   /* deeper bg — tooltip, sidebar */
  --eq-card:        rgba(255, 255, 255, 0.03);
  --eq-border:      rgba(255, 255, 255, 0.08);
  --eq-border-md:   rgba(255, 255, 255, 0.12);

  /* Text */
  --eq-text:        #f1f5f9;   /* primary */
  --eq-text-sub:    #94a3b8;   /* secondary */
  --eq-text-muted:  #64748b;   /* muted */

  /* Status */
  --eq-green:       #4CAF50;
  --eq-yellow:      #FFB74D;
  --eq-red:         #EF5350;
  --eq-blue-light:  #64B5F6;
  --eq-purple:      #CE93D8;

  /* Radius */
  --eq-r-sm:  6px;
  --eq-r-md:  8px;
  --eq-r-lg:  12px;
  --eq-r-xl:  16px;
}

/* ============================================================
   2. STATUS / METRIC COLORS
   Three-state system: high (green) / medium (yellow) / low (red) / none (grey)
   Usage: add class to any element, e.g. <span class="eq-high">
   ============================================================ */
.eq-high   { color: var(--eq-green);  }
.eq-medium { color: var(--eq-yellow); }
.eq-low    { color: var(--eq-red);    }
.eq-none   { color: var(--eq-text-muted); }

/* ============================================================
   3. PCT-CELL — Funnel metric badge
   A pill badge showing a % or count with status color background.

   Usage:
     <span class="eq-pct-cell eq-pct-high">92%</span>
     <span class="eq-pct-cell eq-pct-medium">60%</span>
     <span class="eq-pct-cell eq-pct-low">8%</span>
     <span class="eq-pct-cell eq-pct-none">—</span>

   JS helper (copy to your page):
     function getPctClass(v, hi, med) {
       if (!v) return 'eq-pct-none';
       if (v >= hi)  return 'eq-pct-high';
       if (v >= med) return 'eq-pct-medium';
       return 'eq-pct-low';
     }
   ============================================================ */
.eq-pct-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--eq-r-md);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.eq-pct-high   { background: rgba(76, 175, 80, 0.18);  color: #4CAF50; }
.eq-pct-medium { background: rgba(255, 183, 77, 0.18); color: #FFB74D; }
.eq-pct-low    { background: rgba(239, 83, 80, 0.18);  color: #EF5350; }
.eq-pct-none   { background: rgba(255, 255, 255, 0.05); color: var(--eq-text-muted); }

/* ============================================================
   4. CELL TOOLTIP
   A persistent, smart-positioned hover panel for table cells.

   HTML (add once to the page body):
     <div id="eqCellTip" class="eq-cell-tip"></div>

   JS (copy to your page — see design-system.md for full helper):
     const eqTip = { ... };  // see design-system.md

   Tooltip content helper classes:
     .eq-tip-title   — cyan label at top (uppercase, small)
     .eq-tip-row     — single data row (label + value, space-between)
     .eq-tip-label   — left label text
     .eq-tip-val     — right value text (bold, white)
     .eq-tip-div     — horizontal divider
     .eq-tip-footer  — bottom line (status message)
     .eq-tip-footer.warn  — amber warning
     .eq-tip-footer.good  — green confirmation
   ============================================================ */
.eq-cell-tip {
  position: fixed;
  z-index: 9000;
  pointer-events: none;
  /* Glass modal tier — matches existing stat card tooltips */
  background: rgba(26, 39, 68, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--eq-r-xl);
  padding: 20px 24px;
  min-width: 300px;
  max-width: 380px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.eq-cell-tip.eq-tip-visible { opacity: 1; }

.eq-tip-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eq-text-muted);
  margin-bottom: 14px;
}

/* 3-column row: Label | Count | Pct */
.eq-tip-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  column-gap: 20px;
  padding: 5px 0;
}
.eq-tip-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--eq-text-sub);
}
/* middle col: grey % — fixed width keeps all rows aligned */
.eq-tip-pct {
  font-size: 13px;
  font-weight: 500;
  color: var(--eq-text-muted);
  text-align: right;
  white-space: nowrap;
  width: 40px;
}
/* far-right col: bold white count — fixed width, always rightmost */
.eq-tip-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--eq-text);
  text-align: right;
  white-space: nowrap;
  width: 56px;
}

/* 2-column row: Label | Value */
.eq-tip-row-2 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 20px;
  padding: 5px 0;
}
.eq-tip-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--eq-text);
  text-align: right;
  white-space: nowrap;
}

.eq-tip-div {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin: 12px 0;
}
.eq-tip-footer {
  font-size: 13px;
  font-weight: 500;
  padding-top: 2px;
}
.eq-tip-footer.warn { color: var(--eq-yellow); }
.eq-tip-footer.good { color: var(--eq-green);  }

/* ============================================================
   5. TABLE BASE
   Standard dark table used across performance, scoring, etc.

   Usage:
     <table class="eq-table">
       <thead><tr><th>Col</th></tr></thead>
       <tbody><tr><td>...</td></tr></tbody>
     </table>
   ============================================================ */
.eq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.eq-table thead th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eq-text-muted);
  background: rgba(13, 30, 54, 0.4);
  border-bottom: 1px solid var(--eq-border);
  white-space: nowrap;
}
.eq-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--eq-border);
  color: var(--eq-text-sub);
  vertical-align: middle;
}
.eq-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}
.eq-table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   6. DASHBOARD CONTROLS
   Canonical styles for period pills, display toggles, and
   data tables used across performance/scoring/analytics pages.

   These are the standards. Pages should NOT override the
   .active states with non-cyan colors.

   Usage (period toggle):
     <div class="period-toggle">
       <button class="period-pill active">L30</button>
       ...
     </div>

   Usage (display toggle):
     <div class="display-toggle">
       <button class="display-toggle-btn active">%</button>
       <button class="display-toggle-btn">#</button>
     </div>

   Usage (data table):
     <div class="dash-table-wrapper">
       <table class="dash-table">...</table>
     </div>
   ============================================================ */

/* Period pills */
.period-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-md);
  padding: 3px;
  gap: 2px;
  align-items: center;
}
.period-pill {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: none;
  color: var(--eq-text-muted);
  border-radius: var(--eq-r-sm);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.period-pill:hover {
  color: var(--eq-text-sub);
  background: rgba(255, 255, 255, 0.05);
}
.period-pill.active {
  background: var(--eq-cyan);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(33, 192, 255, 0.35);
}

/* Display toggle (% / #) */
.display-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-md);
  padding: 3px;
  gap: 2px;
  align-items: center;
}
.display-toggle-btn {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: none;
  color: var(--eq-text-muted);
  border-radius: var(--eq-r-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.display-toggle-btn:hover {
  color: var(--eq-text-sub);
}
.display-toggle-btn.active {
  background: var(--eq-cyan);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(33, 192, 255, 0.35);
}

/* Source / selector filter button — active state */
.source-filter-button.has-selection {
  color: var(--eq-cyan);
  border-color: rgba(33, 192, 255, 0.4);
}

/* Data table wrapper */
.dash-table-wrapper {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--eq-r-xl);
  overflow: hidden;
}

/* Data table */
.dash-table {
  width: 100%;
  border-collapse: collapse;
}
.dash-table thead th {
  background: rgba(33, 192, 255, 0.08);
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--eq-text-sub);
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--eq-border);
  cursor: default;
  transition: background 0.15s, color 0.15s;
}
.dash-table thead th:hover {
  color: var(--eq-text);
  background: rgba(33, 192, 255, 0.14);
}
.dash-table thead th:first-child {
  text-align: left;
  padding-left: 20px;
}
.dash-table tbody tr {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.1s;
}
.dash-table tbody tr:first-child { border-top: none; }
.dash-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.dash-table tbody td {
  padding: 22px 16px;
  font-size: 15px;
  color: var(--eq-text-sub);
  text-align: center;
}
.dash-table tbody td:first-child {
  text-align: left;
  padding-left: 20px;
}

/* ============================================================
   8. CELL METRIC — Cell-level coloring for data tables
   Color lives on the <td>, not a pill inside it.
   The metric value is a plain <span class="eq-metric">.

   Usage:
     <td class="eq-cell-green"><span class="eq-metric">70.8%</span></td>
     <td class="eq-cell-yellow"><span class="eq-metric">45%</span></td>
     <td class="eq-cell-red"><span class="eq-metric">12%</span></td>
     <td class="eq-cell-none"><span class="eq-metric">—</span></td>
   ============================================================ */
.eq-cell-green  { background: rgba(76, 175, 80, 0.12); }
.eq-cell-yellow { background: rgba(255, 152,  0, 0.08); }
.eq-cell-red    { background: rgba(244,  67, 54, 0.08); }

.eq-metric {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  display: block;
  letter-spacing: -0.01em;
}
.eq-cell-green  .eq-metric { color: #81c784; }
.eq-cell-yellow .eq-metric { color: #ffb74d; }
.eq-cell-red    .eq-metric { color: #ef9a9a; }
.eq-cell-none   .eq-metric { color: #64748b; }

/* ============================================================
   7. FOOTER — Sticky layout + clearance
   Shell.js injects .app-footer into every page automatically.
   The body/main layout below ensures the footer always sticks
   to the bottom of the viewport even on short-content pages.
   ============================================================ */

/* Sticky footer layout */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

/* Footer base */
.app-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(13, 30, 54, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
  z-index: 1;
  position: relative;
}
.footer-tagline {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}
.footer-tagline em {
  font-style: italic;
  color: var(--eq-cyan);
}
.footer-meta {
  font-size: 12px;
  color: var(--eq-text-muted);
  opacity: 0.7;
}
.footer-meta a {
  color: var(--eq-text-muted);
  text-decoration: none;
}
.footer-meta a:hover {
  color: var(--eq-cyan);
}

/* Lift fixed-position floating elements above the app footer */
body:has(.app-footer) .menu-trigger {
  bottom: 80px !important;
}