/*
 * ========================================================================
 * ANALYTIC ENDEAVORS - PBI WIREFRAME SHARED STYLES
 * Shared Power BI report mock-up component used across guide pages.
 * Each page sets --pbi-accent on .pbi-wireframe to theme the component.
 * Copyright (c) 2024-2025 Analytic Endeavors Inc. All Rights Reserved.
 * Origin: analyticendeavors.com
 * ========================================================================
 */

/* ========================================
   Container & Toolbar
   ======================================== */
.pbi-wireframe-wrap { position: relative; margin: 2rem 0; }

.pbi-wireframe {
  --pbi-accent: var(--purple-light);
  --pbi-accent-bg: rgba(107,91,149,0.1);
  --pbi-accent-border: rgba(107,91,149,0.25);
  --pbi-accent-glow: rgba(107,91,149,0.2);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--card-surface);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.pbi-toolbar {
  background: #1c1c32;
  padding: 0 1rem;
  height: 36px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pbi-toolbar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pbi-accent); }
.pbi-toolbar-title { font-weight: 600; color: var(--text-primary); font-size: 0.8rem; margin-right: auto; }
.pbi-toolbar-icons { display: flex; align-items: center; gap: 0.5rem; }
.pbi-toolbar-icon { width: 18px; height: 18px; opacity: 0.5; stroke: var(--text-secondary); fill: none; }
.pbi-toolbar-sep { width: 1px; height: 16px; background: var(--border); }

/* ========================================
   Canvas Grid
   ======================================== */
.pbi-canvas {
  display: grid;
  grid-template-columns: 160px 1fr 1fr 180px;
  grid-template-rows: auto 1fr;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--card-bg, #0d1526);
}

/* ========================================
   Element Base (clickable visuals)
   ======================================== */
.pbi-element {
  background: var(--card-surface);
  border-radius: 8px;
  border: 2px solid transparent;
  padding: 0.75rem;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
  position: relative;
}

.pbi-element:hover {
  border-color: var(--pbi-accent);
  box-shadow: 0 0 12px var(--pbi-accent-glow);
}

.pbi-element.pbi-active {
  border-color: var(--pbi-accent);
  border-width: 3px;
  background-color: var(--pbi-accent-bg);
  box-shadow: 0 0 0 3px var(--pbi-accent-border), 0 0 24px var(--pbi-accent-glow);
}

.pbi-element-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ========================================
   Slicer (left sidebar)
   ======================================== */
.pbi-slicer { grid-column: 1; grid-row: 1 / 3; }

.slicer-dropdown-arrow { font-size: 0.6rem; color: var(--text-muted); opacity: 0.7; }

.slicer-items { display: flex; flex-direction: column; gap: 0.25rem; }

.slicer-item {
  font-size: 0.78rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.slicer-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid var(--border);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.slicer-item.selected .slicer-check { background: var(--orange); border-color: var(--orange); }
.slicer-item.selected .slicer-check::after {
  content: '';
  display: block;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
.slicer-item.selected { color: var(--orange); font-weight: 600; background: rgba(255,140,66,0.08); }

.slicer-divider { height: 1px; background: var(--border); margin: 0.5rem 0; }

.slicer-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: rgba(255,255,255,0.03);
  margin-top: 0.25rem;
}

/* ========================================
   Table Visual (middle columns, top row)
   ======================================== */
.pbi-table { grid-column: 2 / 4; grid-row: 1; }
.pbi-table table { width: 100%; font-size: 0.75rem; border-collapse: collapse; }
.pbi-table th {
  text-align: left;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 2px solid var(--pbi-accent);
  background: var(--pbi-accent-bg);
}
.pbi-table td { padding: 0.3rem 0.5rem; color: var(--text-secondary); font-size: 0.75rem; }
.pbi-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.pbi-table tr:nth-child(odd) td { background: rgba(0,0,0,0.1); }
.pbi-table td:nth-child(n+4), .pbi-table th:nth-child(n+4) { text-align: right; font-variant-numeric: tabular-nums; }

/* ========================================
   Bar Chart (bottom left)
   ======================================== */
.pbi-chart { grid-column: 2; grid-row: 2; padding-top: 0.4rem; }
.pbi-chart-title { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; }

.pbi-bars { display: flex; align-items: flex-end; gap: 12px; height: 130px; margin-top: 0.25rem; padding-top: 0.25rem; }

.pbi-bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; justify-content: flex-end; }
.pbi-bar-data-label { font-size: 0.5rem; color: var(--text-muted); font-variant-numeric: tabular-nums; line-height: 1; align-self: flex-start; position: relative; z-index: 3; }

.pbi-bar-stack { width: 100%; display: flex; flex-direction: row; align-items: flex-start; position: relative; }
.pbi-bar-actual { width: 70%; background: #00587C; opacity: 0.9; min-height: 4px; transition: opacity 0.2s; height: 100%; border-radius: 3px 0 0 0; }
.pbi-bar-group:hover .pbi-bar-actual { opacity: 1; }

.pbi-bar-delta { width: 25%; min-height: 3px; position: absolute; right: 0; z-index: 2; }
.pbi-bar-delta.positive { background: #2dd4a8; top: 0; border-radius: 0 3px 0 2px; }
.pbi-bar-delta.negative { background: #FF8C42; bottom: 100%; border-radius: 2px 2px 0 0; }

.pbi-bar-delta-label { font-size: 0.42rem; font-weight: 700; line-height: 1; white-space: nowrap; align-self: flex-start; position: relative; z-index: 3; }
.pbi-bar-delta-label.positive { color: #2dd4a8; }
.pbi-bar-delta-label.negative { color: #FF8C42; }

.pbi-bar-label { font-size: 0.5rem; color: var(--text-muted); text-align: center; margin-top: 2px; padding-top: 2px; line-height: 1.1; word-break: break-word; }

/* ========================================
   KPI Cards (bottom right)
   ======================================== */
.pbi-kpi-stack { grid-column: 3; grid-row: 2; display: flex; flex-direction: row; gap: 0.5rem; }

.pbi-kpi { flex: 1; display: flex; flex-direction: column; padding: 0.4rem 0.5rem; text-align: center; }
.pbi-kpi-middle { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; }
.pbi-kpi-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.pbi-kpi-value { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
.pbi-kpi-delta { font-size: 0.58rem; color: #2dd4a8; display: flex; align-items: center; justify-content: center; gap: 0.15rem; margin: 0.2rem 0; white-space: nowrap; }
.pbi-kpi-delta svg { width: 12px; height: 12px; stroke: #4ade80; fill: none; }
.pbi-kpi-delta.neutral { color: var(--text-muted); }

.pbi-kpi-chart-wrap { display: flex; flex-direction: column; gap: 1px; margin-top: auto; }
.pbi-kpi-chart { display: flex; align-items: flex-end; gap: 2px; height: 64px; }
.pbi-kpi-bar { flex: 1; border-radius: 2px 2px 0 0; min-height: 2px; box-shadow: 0 0 4px rgba(0,153,153,0.2); }
.pbi-kpi-months { display: flex; }
.pbi-kpi-months span { flex: 1; text-align: center; font-size: 0.32rem; color: var(--text-muted); }

/* ========================================
   Filter Pane (right sidebar)
   ======================================== */
.pbi-filter-pane {
  grid-column: 4;
  grid-row: 1 / 3;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pbi-filter-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pbi-filter-header svg { width: 14px; height: 14px; stroke: var(--pbi-accent); fill: none; }

.pbi-filter-section { padding: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.pbi-filter-section:last-child { border-bottom: none; }
.pbi-filter-section-title { font-size: 0.58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; }

.filter-item {
  font-size: 0.68rem;
  padding: 0.2rem 0.5rem;
  background: var(--pbi-accent-bg);
  border-radius: 4px;
  border: 1px solid var(--pbi-accent-border);
  color: var(--pbi-accent);
  display: inline-block;
  margin: 0.1rem 0;
}

/* ========================================
   Tooltip
   ======================================== */
.pbi-tooltip {
  position: relative;
  margin-top: 1rem;
  background: var(--card-surface);
  border-top: 2px solid var(--pbi-accent);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  z-index: 10;
  font-size: 0.82rem;
  display: none;
}

.pbi-tooltip.visible { display: block; }
.pbi-tooltip h4 { color: var(--pbi-accent); font-size: 0.95rem; margin-bottom: 0.25rem; }
.pbi-tooltip p { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; margin: 0; }

/* ========================================
   Source Chips
   ======================================== */
.qc-sources { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; }

.qc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--card-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.qc-chip:hover { border-color: rgba(107,91,149,0.5); }
.qc-chip.active { border-color: var(--pbi-accent, var(--purple-light)); color: var(--pbi-accent, var(--purple-light)); background: var(--pbi-accent-bg, rgba(107,91,149,0.1)); box-shadow: 0 0 0 2px var(--pbi-accent-border, rgba(107,91,149,0.35)), 0 0 14px var(--pbi-accent-glow, rgba(107,91,149,0.25)); font-weight: 600; }
.qc-chip.active svg { stroke: var(--pbi-accent, var(--purple-light)); }
.qc-chip svg { width: 14px; height: 14px; stroke: var(--text-muted); fill: none; transition: stroke 0.2s; }

/* ========================================
   Light Mode Overrides
   ======================================== */
[data-theme="light"] .pbi-wireframe { box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
[data-theme="light"] .pbi-toolbar { background: #e8e8f0; color: #333; border-bottom: 1px solid #e0e0e4; }
[data-theme="light"] .pbi-toolbar-title { color: #333; }
[data-theme="light"] .pbi-canvas { background: #eaeaef; }
[data-theme="light"] .pbi-wireframe {
  --pbi-accent-bg: rgba(107,91,149,0.18);
  --pbi-accent-border: rgba(107,91,149,0.45);
  --pbi-accent-glow: rgba(107,91,149,0.35);
}
[data-theme="light"] .pbi-element { background: var(--card-bg); border-color: var(--border); }
[data-theme="light"] .pbi-element.pbi-active {
  background-color: var(--pbi-accent-bg);
  box-shadow: 0 0 0 3px var(--pbi-accent-border), 0 4px 18px var(--pbi-accent-glow);
}
[data-theme="light"] .pbi-table tr:nth-child(even) td { background: rgba(0,0,0,0.02); }
[data-theme="light"] .pbi-table tr:nth-child(odd) td { background: rgba(0,0,0,0.05); }
[data-theme="light"] .pbi-filter-pane { background: #fff; border-left: 1px solid #e0e0e4; }
[data-theme="light"] .pbi-filter-pane .pbi-element-label { background: rgba(0,0,0,0.03); }
[data-theme="light"] .pbi-kpi-value { color: var(--text-primary); }
[data-theme="light"] .pbi-tooltip { background: var(--card-surface); }
[data-theme="light"] .qc-chip { background: #fff; border-color: #d8d8e4; color: #333; }
[data-theme="light"] .qc-chip.active { background: rgba(107,91,149,0.15); border-color: var(--pbi-accent, var(--purple-light)); color: var(--pbi-accent, var(--purple-light)); }
[data-theme="light"] .qc-chip.active svg { stroke: var(--pbi-accent, var(--purple-light)); }

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
  .pbi-canvas {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .pbi-slicer { grid-column: 1; grid-row: auto; }
  .pbi-table { grid-column: 1; grid-row: auto; }
  .pbi-chart { grid-column: 1; grid-row: auto; }
  .pbi-kpi-stack { grid-column: 1; grid-row: auto; }
  .pbi-filter-pane { grid-column: 1; grid-row: auto; }
}