/* CSS Variables — referenced by Tailwind config and remaining CSS */
:root {
    --bg: #0f1117;
    --card: #1a1d27;
    --border: #2a2d3a;
    --text: #e4e4e7;
    --muted: #8b8d97;
    --accent: #6366f1;
    --green: #22c55e;
    --green-bg: rgba(34,197,94,0.12);
    --yellow: #eab308;
    --yellow-bg: rgba(234,179,8,0.12);
    --red: #ef4444;
    --red-bg: rgba(239,68,68,0.12);
    --blue: #3b82f6;
    --blue-bg: rgba(59,130,246,0.12);
    --purple: #a855f7;
    --purple-bg: rgba(168,85,247,0.12);
}

* { margin:0; padding:0; box-sizing:border-box; }

/* Progress bar — gradients and striped overlay can't be done with Tailwind */
.progress-bar-bg { background:#2a2d3a; border-radius:8px; height:32px; position:relative; overflow:hidden; margin-bottom:8px; }
.progress-bar-fill { height:100%; border-radius:8px; transition:width 1s ease; display:flex; align-items:center; justify-content:flex-end; padding-right:12px; font-size:12px; font-weight:600; position:relative; z-index:2; }
.progress-bar-closing { position:absolute; top:0; left:0; height:100%; border-radius:8px; background:repeating-linear-gradient(110deg,rgba(234,179,8,0.3),rgba(234,179,8,0.3) 6px,rgba(234,179,8,0.15) 6px,rgba(234,179,8,0.15) 12px); transition:width 1s ease; display:flex; align-items:center; justify-content:flex-end; padding-right:12px; font-size:11px; font-weight:600; color:var(--yellow); z-index:1; }

/* Scenario cards — colored borders via modifier classes */
.scenarios { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-bottom:32px; }
.scenario { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px; }
.scenario .title { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.scenario.best { border-color:var(--green); }
.scenario.best .title { color:var(--green); }
.scenario.likely { border-color:var(--blue); }
.scenario.likely .title { color:var(--blue); }
.scenario.worst { border-color:var(--yellow); }
.scenario.worst .title { color:var(--yellow); }

/* Info tooltips — hover show/hide */
.info-icon { position:relative; display:inline-flex; cursor:pointer; color:currentColor; opacity:0.7; transition:opacity 0.2s; }
.info-icon:hover { opacity:1; }
.info-tooltip { display:none; position:absolute; top:calc(100% + 8px); left:0; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px; min-width:280px; max-width:360px; max-height:400px; overflow-y:auto; z-index:100; box-shadow:0 8px 24px rgba(0,0,0,0.4); font-size:11px; text-transform:none; letter-spacing:0; font-weight:400; }
.scenario:last-child .info-tooltip { left:auto; right:0; }
.info-icon:hover .info-tooltip { display:block; }
.info-tooltip-title { font-size:11px; font-weight:600; color:var(--text); margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid var(--border); }
.info-tooltip-row { display:flex; justify-content:space-between; gap:8px; padding:3px 0; color:var(--text); }
.info-tooltip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.info-tooltip-amount { white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:500; }
.info-tooltip-empty { color:var(--muted); font-style:italic; padding:2px 0; }
.info-tooltip-more { color:var(--muted); font-style:italic; padding:4px 0 0; }

/* Tables — base styles for all deal tables */
table { width:100%; border-collapse:collapse; font-size:13px; }
.table-wrap { background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:24px; }
.table-wrap .table-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.table-wrap .table-header h3 { font-size:14px; font-weight:600; margin:0; text-transform:none; color:var(--text); }
th { text-align:left; padding:10px 16px; color:var(--muted); font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--border); }
td { padding:10px 16px; border-bottom:1px solid var(--border); }
tr:last-child td { border-bottom:none; }
.amount-cell { text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); }
.mrr-cell { text-align:right; font-variant-numeric:tabular-nums; font-weight:500; }
.source-cell { font-size:12px; color:var(--muted); }
.link-cell a { color:var(--accent); text-decoration:none; font-weight:500; }
.link-cell a:hover { text-decoration:underline; }

/* Stage badges */
.stage-badge { display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:600; }
.stage-closing { background:var(--green-bg); color:var(--green); }
.stage-trial { background:var(--blue-bg); color:var(--blue); }
.stage-demo { background:var(--purple-bg); color:var(--purple); }
.stage-discovery { background:var(--yellow-bg); color:var(--yellow); }

/* Risk flags */
.risk-flag { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:2px 8px; border-radius:6px; background:var(--red-bg); color:var(--red); font-weight:500; }

/* Owner avatars */
.owner-badge { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.owner-avatar { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; object-fit:cover; }

/* Action items (gap analysis) — border-left accent */
.action-item { padding:12px 16px; border-left:3px solid var(--accent); background:rgba(99,102,241,0.06); border-radius:0 8px 8px 0; margin-bottom:12px; }
.action-item.urgent { border-left-color:var(--red); background:rgba(239,68,68,0.06); }
.action-item.warn { border-left-color:var(--yellow); background:rgba(234,179,8,0.06); }

/* Tab switching (commit/upside/all) */
.tab-bar { display:flex; gap:4px; margin-bottom:20px; background:var(--card); border-radius:10px; padding:4px; border:1px solid var(--border); width:fit-content; }
.tab { padding:8px 16px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; color:var(--muted); transition:all 0.2s; }
.tab.active { background:var(--accent); color:white; }
.tab:hover:not(.active) { color:var(--text); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* Quarter navigation tabs */
.quarter-tab-bar { display:flex; gap:4px; background:var(--card); border-radius:10px; padding:4px; border:1px solid var(--border); width:fit-content; }
.quarter-tab { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; color:var(--muted); text-decoration:none; transition:all 0.2s; white-space:nowrap; }
.quarter-tab:hover:not(.active) { color:var(--text); }
.quarter-tab.active { background:var(--accent); color:white; }
.quarter-tab.current:not(.active) { color:var(--text); font-weight:600; }
.quarter-now { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; background:var(--green); color:#000; padding:1px 5px; border-radius:4px; line-height:1; }
.quarter-tab.active .quarter-now { background:rgba(255,255,255,0.25); color:white; }

/* Pipeline cards */
.pipeline-card { cursor:pointer; }
.pipeline-card:hover { transform: translateY(-1px); border-color: rgba(99,102,241,0.3); }

/* Owner filter */
.owner-filter.active { border-color:var(--accent); background:rgba(99,102,241,0.15); color:var(--text); font-weight:600; }

/* Refresh button spinner */
.spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,0.3); border-top-color:white; border-radius:50%; animation:spin 0.6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.btn-refresh:disabled { opacity:0.7; cursor:wait; }