/*
 * Capacity Analysis (LP Analyses / Capacity) - the feature's stylesheet, scoped.
 *
 * Every rule lives under .lpcap (the mount element capacity.js styles), so the
 * page that hosts it - the standalone capacity.html, or LP Analyses' Capacity
 * tab - shares none of its element selectors, and its own `table`, `.tabs` or
 * `body.lp-theme` rules cannot reach in. The LP Materials palette is the
 * .lp-theme class on the mount element itself (setTheme()), not on <body>.
 * Class names that the LP Analyses page also defines (.tabs, .tab, .kpi-row,
 * .kpi-label, .kpi-sub, .subtitle) carry an lpcap- prefix.
 */
.lpcap, .lpcap * { margin: 0; padding: 0; box-sizing: border-box; }
.lpcap { background: #0a0a0a; color: #e0e0e0; font-family: 'Manrope', sans-serif; padding: 20px; font-weight: 300; line-height: 1.5; }
.lpcap .wrap { max-width: 1800px; margin: 0 auto; }
.lpcap h1 { font-size: 22px; color: #fff; font-weight: 400; }
.lpcap .lpcap-subtitle { color: #888; font-size: 13px; margin-top: 2px; }
.lpcap .controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 18px 0 20px; }
.lpcap .ctrl { display: flex; align-items: center; gap: 6px; }
.lpcap .ctrl label { color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.lpcap .selector { background: #1a1a1a; border: 1px solid #333; border-radius: 6px; padding: 7px 10px; color: #fff; font-size: 13px; font-family: inherit; outline: none; cursor: pointer; min-width: 200px; }
.lpcap .selector:focus { border-color: #00d4aa; }
.lpcap .aum-input-wrap { position: relative; }
.lpcap .aum-input-wrap .prefix { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: #666; font-size: 12px; pointer-events: none; }
.lpcap .aum-input { width: 140px; padding-left: 20px !important; text-align: right; }
.lpcap .chip-row { display: flex; gap: 6px; }
.lpcap .chip { padding: 6px 10px; background: #161616; border: 1px solid #2a2a2a; border-radius: 6px; color: #aaa; font-size: 12px; cursor: pointer; transition: all 0.12s; font-family: inherit; }
.lpcap .chip:hover { border-color: #444; color: #fff; }
.lpcap .chip.active { background: #252525; border-color: #fff; color: #fff; }
/* Portfolio picker (same UI as Portfolio Explorer) */
.lpcap .portfolio-picker { position: relative; }
.lpcap .portfolio-picker-trigger { min-width: 260px; padding: 7px 10px; background: #1a1a1a; border: 1px solid #333; border-radius: 6px; color: #fff; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; overflow: hidden; }
.lpcap .portfolio-picker-trigger:hover { border-color: #555; }
.lpcap .picker-arrow { color: #888; font-size: 10px; margin-left: 8px; flex-shrink: 0; }
.lpcap .portfolio-picker-dropdown { display: none; position: absolute; top: 100%; left: 0; z-index: 800; background: #1a1a1a; border: 1px solid #333; border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,0.6); margin-top: 4px; min-width: 780px; }
.lpcap .portfolio-picker-dropdown.open { display: block; }
.lpcap .picker-search { padding: 8px; border-bottom: 1px solid #222; }
.lpcap .picker-search input { width: 100%; padding: 6px 10px; background: #0d0d0d; border: 1px solid #333; border-radius: 4px; color: #e0e0e0; font-family: 'Manrope', sans-serif; font-size: 12px; outline: none; }
.lpcap .picker-search input:focus { border-color: #666; }
.lpcap .picker-columns { display: flex; gap: 0; max-height: 440px; overflow-y: auto; }
.lpcap .picker-column { flex: 1; min-width: 0; border-right: 1px solid #222; }
.lpcap .picker-column:last-child { border-right: none; }
.lpcap .picker-column-title { padding: 8px 12px; font-size: 10px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; background: #151515; border-bottom: 1px solid #222; position: sticky; top: 0; z-index: 1; }
.lpcap .picker-item { padding: 6px 12px; font-size: 12px; color: #ccc; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpcap .picker-item:hover { background: #222; color: #fff; }
.lpcap .picker-item.active { background: #252525; color: #fff; }
/* Tooltip — hover on the (?) icon to see an explanation */
.lpcap .tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #222; color: #888; font-size: 10px; font-weight: 600; cursor: help; margin-left: 4px; user-select: none; }
.lpcap .tip:hover { background: #00d4aa; color: #0a0a0a; }
.lpcap .tip-body { display: none; position: absolute; top: 130%; left: 50%; transform: translateX(-50%); width: 320px; padding: 12px 14px; background: #1a1a1a; border: 1px solid #2a3f3a; border-radius: 8px; color: #ccc; font-size: 11px; font-weight: 400; line-height: 1.5; text-transform: none; letter-spacing: normal; z-index: 800; box-shadow: 0 6px 24px rgba(0,0,0,0.7); text-align: left; pointer-events: none; }
.lpcap .tip-body strong { color: #fff; }
.lpcap .tip-body code { background: #0a0a0a; color: #00d4aa; padding: 1px 4px; border-radius: 3px; font-size: 10px; }
.lpcap .tip:hover .tip-body { display: block; }
.lpcap .tip-body::after { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: #2a3f3a; }
.lpcap .kpi-label-row { display: flex; align-items: center; }
.lpcap .headline { background: #111; border: 1px solid #222; border-radius: 8px; padding: 24px 28px; margin-bottom: 20px; display: flex; gap: 40px; align-items: center; }
.lpcap .headline-num { font-size: 42px; color: #fff; font-weight: 600; line-height: 1; letter-spacing: -1px; }
.lpcap .headline-sub { color: #888; font-size: 13px; margin-top: 6px; line-height: 1.4; }
.lpcap .headline-aux { display: flex; gap: 32px; margin-left: auto; }
.lpcap .aux-item { text-align: right; }
.lpcap .aux-val { font-size: 22px; color: #fff; font-weight: 500; }
.lpcap .aux-label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; }
.lpcap .lpcap-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.lpcap .kpi { background: #111; border: 1px solid #222; border-radius: 8px; padding: 14px 16px; }
.lpcap .lpcap-kpi-label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.lpcap .kpi-val { font-size: 22px; color: #fff; font-weight: 500; margin-top: 4px; }
.lpcap .lpcap-kpi-sub { font-size: 11px; color: #666; margin-top: 2px; }
.lpcap .kpi.warn .kpi-val { color: #ffab00; }
.lpcap .kpi.bad .kpi-val { color: #ff5252; }
.lpcap .kpi.good .kpi-val { color: #00e676; }
.lpcap .panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.lpcap .panel { background: #111; border: 1px solid #222; border-radius: 8px; padding: 16px; }
.lpcap .panel-title { font-size: 12px; color: #aaa; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; font-weight: 500; }
.lpcap .panel-body { min-height: 320px; }
.lpcap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.lpcap thead th { position: sticky; top: 0; background: #0a0a0a; color: #888; font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; padding: 10px 8px; text-align: right; border-bottom: 2px solid #222; cursor: pointer; user-select: none; white-space: nowrap; }
.lpcap thead th:first-child,
.lpcap thead th:nth-child(2) { text-align: left; }
.lpcap thead th:hover { color: #fff; }
.lpcap thead th.sorted-asc::after { content: " ▲"; color: #00d4aa; }
.lpcap thead th.sorted-desc::after { content: " ▼"; color: #00d4aa; }
.lpcap tbody tr { border-bottom: 1px solid #181818; }
.lpcap tbody tr:hover { background: #141414; }
.lpcap td { padding: 8px; text-align: right; white-space: nowrap; color: #ccc; }
.lpcap td:first-child,
.lpcap td:nth-child(2) { text-align: left; }
.lpcap td.ticker { font-weight: 600; color: #fff; }
.lpcap td.green { color: #00e676; }
.lpcap td.amber { color: #ffab00; }
.lpcap td.red { color: #ff5252; }
.lpcap td.muted { color: #555; font-style: italic; }
.lpcap .empty { text-align: center; padding: 60px 20px; color: #666; font-size: 13px; }
.lpcap .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #333; border-top-color: #00d4aa; border-radius: 50%; animation: lpcap-spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes lpcap-spin { to { transform: rotate(360deg); } }
.lpcap .methodology { font-size: 11px; color: #666; line-height: 1.55; margin-top: 28px; padding: 14px 16px; background: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 6px; }
.lpcap .methodology strong { color: #aaa; }
.lpcap .table-wrap { max-height: 560px; overflow-y: auto; background: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 6px; }
/* Capacity-dimension tabs */
.lpcap .lpcap-tabs { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid #222; }
.lpcap .lpcap-tab { padding: 10px 18px; background: transparent; border: 0; color: #888; font-size: 13px; font-family: inherit; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lpcap .lpcap-tab:hover { color: #ccc; }
.lpcap .lpcap-tab.active { color: #fff; border-bottom-color: #1ed492; font-weight: 500; }
.lpcap .tab-view { display: none; }
.lpcap .tab-view.active { display: block; }
/* ── LP Materials theme override ────────────────────────────────────
 * Mirror of the palette used by app/lp_analyses/index.html so the
 * Capacity tab matches when the parent toggles "LP Materials".
 * Driven by postMessage from the parent + a localStorage read on boot. */
.lpcap.lp-theme {
    background: #E6E6E6;
    color: #0E0E0E;
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
}
.lpcap.lp-theme h1 { color: #082647; font-family: Georgia, 'Times New Roman', serif; font-weight: 500; letter-spacing: -0.01em; }
.lpcap.lp-theme .lpcap-subtitle { color: #777; }
.lpcap.lp-theme .ctrl label { color: #777; }
.lpcap.lp-theme .selector,
.lpcap.lp-theme .aum-input {
    background: #FFFFFF;
    color: #082647;
    border-color: #BBBBBB;
}
.lpcap.lp-theme .selector:focus { border-color: #082647; }
.lpcap.lp-theme .aum-input-wrap .prefix { color: #777; }
.lpcap.lp-theme .chip {
    background: #FFFFFF;
    border-color: #DDDDDD;
    color: #777;
}
.lpcap.lp-theme .chip:hover { border-color: #082647; color: #082647; }
.lpcap.lp-theme .chip.active { background: #082647; border-color: #082647; color: #FFFFFF; }
.lpcap.lp-theme .portfolio-picker-trigger {
    background: #FFFFFF;
    color: #082647;
    border-color: #BBBBBB;
}
.lpcap.lp-theme .portfolio-picker-trigger:hover { border-color: #082647; }
.lpcap.lp-theme .picker-arrow { color: #777; }
.lpcap.lp-theme .portfolio-picker-dropdown {
    background: #FFFFFF;
    border-color: #BBBBBB;
    box-shadow: 0 8px 32px rgba(8,38,71,0.18);
}
.lpcap.lp-theme .picker-search { border-bottom-color: #DDDDDD; }
.lpcap.lp-theme .picker-search input {
    background: #FAFAFA;
    border-color: #DDDDDD;
    color: #082647;
}
.lpcap.lp-theme .picker-column { border-right-color: #DDDDDD; }
.lpcap.lp-theme .picker-column-title {
    background: #FAFAFA;
    color: #777;
    border-bottom-color: #DDDDDD;
}
.lpcap.lp-theme .picker-item { color: #0E0E0E; }
.lpcap.lp-theme .picker-item:hover { background: #FAFAFA; color: #082647; }
.lpcap.lp-theme .picker-item.active { background: #EDEDED; color: #082647; }
.lpcap.lp-theme .tip { background: #DDDDDD; color: #555; }
.lpcap.lp-theme .tip:hover { background: #082647; color: #FFFFFF; }
.lpcap.lp-theme .tip-body {
    background: #FFFFFF;
    color: #0E0E0E;
    border-color: #BBBBBB;
    box-shadow: 0 6px 24px rgba(8,38,71,0.18);
}
.lpcap.lp-theme .tip-body strong { color: #082647; }
.lpcap.lp-theme .tip-body code { background: #F5F5F5; color: #082647; }
.lpcap.lp-theme .tip-body::after { border-bottom-color: #BBBBBB; }
.lpcap.lp-theme .headline {
    background: #F5F5F5;
    border-color: #DDDDDD;
    border-left: 3px solid #082647;
}
.lpcap.lp-theme .headline-num { color: #082647; font-family: Georgia, 'Times New Roman', serif; }
.lpcap.lp-theme .headline-sub { color: #555; }
.lpcap.lp-theme .aux-val { color: #082647; font-family: Georgia, 'Times New Roman', serif; }
.lpcap.lp-theme .aux-label { color: #777; }
.lpcap.lp-theme .kpi {
    background: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-left: 3px solid #1C80ED;
}
.lpcap.lp-theme .lpcap-kpi-label { color: #777; }
.lpcap.lp-theme .kpi-val {
    color: #082647;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 500;
}
.lpcap.lp-theme .lpcap-kpi-sub { color: #777; }
.lpcap.lp-theme .kpi.warn .kpi-val { color: #E9A032; }
.lpcap.lp-theme .kpi.warn { border-left-color: #E9A032; }
.lpcap.lp-theme .kpi.bad .kpi-val { color: #FF4545; }
.lpcap.lp-theme .kpi.bad { border-left-color: #FF4545; }
.lpcap.lp-theme .kpi.good .kpi-val { color: #0b6b47; }
.lpcap.lp-theme .kpi.good { border-left-color: #1ED492; }
.lpcap.lp-theme .panel {
    background: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
}
.lpcap.lp-theme .panel-title { color: #777; font-weight: 600; }
.lpcap.lp-theme .empty { color: #777; }
.lpcap.lp-theme .methodology {
    background: #FAFAFA;
    border-color: #DDDDDD;
    color: #555;
}
.lpcap.lp-theme .methodology strong { color: #082647; }
.lpcap.lp-theme .table-wrap {
    background: #FAFAFA;
    border-color: #DDDDDD;
}
.lpcap.lp-theme thead th {
    background: #FAFAFA;
    color: #082647;
    border-bottom-color: #BBBBBB;
}
.lpcap.lp-theme thead th:hover { color: #1C80ED; }
.lpcap.lp-theme thead th.sorted-asc::after,
.lpcap.lp-theme thead th.sorted-desc::after { color: #1ED492; }
.lpcap.lp-theme tbody tr { border-bottom-color: #EDEDED; }
.lpcap.lp-theme tbody tr:hover { background: #FAFAFA; }
.lpcap.lp-theme td { color: #0E0E0E; }
.lpcap.lp-theme td.ticker { color: #082647; }
.lpcap.lp-theme td.green { color: #0b6b47; }
.lpcap.lp-theme td.amber { color: #8a5a10; }
.lpcap.lp-theme td.red { color: #a01919; }
.lpcap.lp-theme td.muted { color: #777; }
.lpcap.lp-theme .lpcap-tabs { border-bottom-color: #DDDDDD; }
.lpcap.lp-theme .lpcap-tab { color: #777; }
.lpcap.lp-theme .lpcap-tab:hover { color: #082647; }
.lpcap.lp-theme .lpcap-tab.active { color: #082647; border-bottom-color: #082647; }
.lpcap.lp-theme #lpcap-shortfallBanner {
    background: #FFF7E6 !important;
    border-color: #E9A032 !important;
    color: #8a5a10 !important;
}