/* ===== breakdown.css — Shared styling for stat breakdown pages ===== */

/* --- Base theme variables --- */
:root {
  --bg: #101020; --bg2: #181830; --bg3: #222244;
  --text: #ddd; --text1: #ddd; --text2: #888; --accent: #66ccff;
  --green: #6f6; --gold: #ffd700; --orange: #ffa060; --purple: #b388ff;
  --red: #f66; --cyan: #5ff; --border: #333;
}

/* --- Reset & body --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, sans-serif; background: var(--bg); color: var(--text); }
h1 { text-align: center; color: var(--gold); padding: 18px 0 4px; font-size: 1.5em; }
.subtitle { text-align: center; color: var(--text2); font-size: .85em; margin-bottom: 14px; }
.container { max-width: 960px; margin: 0 auto; padding: 0 12px 40px; }

/* --- Top controls bar --- */
.top-bar { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.top-bar select { padding: 6px 10px; background: var(--bg2); color: var(--accent); border: 1px solid var(--border); border-radius: 4px; font-size: .9em; }
.top-bar .btn { padding: 6px 16px; background: var(--accent); color: #000; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: .85em; }
.top-bar .btn:hover { filter: brightness(1.2); }
.top-bar .btn-sm { padding: 4px 10px; background: var(--bg3); color: var(--text2); border: 1px solid var(--border); font-size: .8em; }
.top-bar .btn-sm:hover { color: var(--cyan); border-color: var(--cyan); }

/* --- Import box --- */
.import-box { background: var(--bg2); border-radius: 8px; padding: 14px; margin-bottom: 16px; }
.import-box summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.import-box textarea { width: 100%; height: 80px; margin-top: 8px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; font-size: .82em; font-family: monospace; padding: 6px; resize: vertical; }
.import-msg { font-size: .82em; margin-top: 6px; }
.import-msg.ok { color: var(--green); }
.import-msg.err { color: var(--red); }

/* --- Summary card --- */
.stat-card { background: var(--bg2); border-radius: 10px; padding: 18px; margin-bottom: 18px; text-align: center; }
.stat-total { font-size: 2.6em; font-weight: 800; color: var(--gold); }
.stat-sub { color: var(--text2); font-size: .85em; margin-top: 4px; }

/* --- Breakdown tree section --- */
.tree { background: var(--bg2); border-radius: 8px; padding: 14px; margin-bottom: 16px; }
.tree h2 { color: var(--cyan); margin-bottom: 10px; font-size: 1.1em; }

/* --- Breakdown tree nodes (bt-*) --- */
.bt-controls { margin-bottom: 8px; display: flex; gap: 6px; }
.bt-controls .btn-sm { padding: 4px 10px; background: var(--bg3); color: var(--text2); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: .8em; }
.bt-controls .btn-sm:hover { color: var(--cyan); border-color: var(--cyan); }
.bt-tree { font-size: .85em; }
.bt-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,.04); min-height: 26px; cursor: pointer; }
.bt-row:hover { background: rgba(255,255,255,.07); }
.bt-children { background: rgba(0,0,0,.12); border-left: 2px solid rgba(255,255,255,.08); }
.bt-root { font-weight: 700; font-size: 1.05em; padding-top: 6px; padding-bottom: 6px; border-bottom: 2px solid #444; }
.bt-arrow { cursor: pointer; color: var(--text2); font-size: 1em; width: 14px; text-align: center; user-select: none; flex-shrink: 0; }
.bt-arrow:hover { color: var(--cyan); }
.bt-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-val { font-weight: 600; text-align: right; flex-shrink: 0; white-space: nowrap; margin-left: auto; font-variant-numeric: tabular-nums; }
.bt-tag { font-size: .7em; opacity: .7; margin-left: 4px; }
.bt-tag.auto { color: var(--accent); }
.bt-tag.manual { color: var(--orange); }

/* --- Tooltip --- */
.bt-tooltip { position: fixed; background: #1a1a2e; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; font-size: .82em; max-width: 350px; pointer-events: none; z-index: 999; display: none; }