/* Components - cards, badges, segment cards, bars, tables, matrix, sparklines, class aliases
   Extracted from the original single-file index.html - rules and order unchanged. */

/* CARDS */
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.card-title{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.row4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px;}
/* BADGE */
.badge{font-size:12px;padding:2px 7px;border-radius:20px;font-weight:700;text-transform:none;letter-spacing:0;}
.badge-blue{background:#dbeafe;color:#2563eb;}.badge-green{background:#dcfce7;color:#16a34a;}
.badge-amber{background:#fef3c7;color:#b45309;}.badge-red{background:#fee2e2;color:#dc2626;}
.badge-purple{background:#ede9fe;color:#7c3aed;}
/* SEGMENT CARDS */
.seg-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.seg-card{background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:14px;position:relative;overflow:hidden;transition:box-shadow .15s;}
.seg-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);}
.seg-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:10px 10px 0 0;}
.seg-card.s::before{background:#22c55e;}.seg-card.o::before{background:#f59e0b;}
.seg-card.g::before{background:#4f8ef7;}.seg-card.r::before{background:#ef4444;}
.seg-hdr{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.seg-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;}
.seg-icon.s{background:#dcfce7;}.seg-icon.o{background:#fef3c7;}.seg-icon.g{background:#dbeafe;}.seg-icon.r{background:#fee2e2;}
.seg-label{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.seg-label.s{color:#22c55e;}.seg-label.o{color:#f59e0b;}.seg-label.g{color:#4f8ef7;}.seg-label.r{color:#ef4444;}
.seg-count{font-size:28px;font-weight:800;color:var(--text);line-height:1;margin-bottom:2px;}
.seg-count-lbl{font-size:13px;color:var(--muted);margin-bottom:10px;}
.seg-metrics{display:flex;gap:16px;padding-top:10px;border-top:1px solid var(--border);}
.seg-metric{display:flex;flex-direction:column;gap:1px;}
.seg-metric-lbl{font-size:12px;color:var(--muted);font-weight:600;}
.seg-metric-val{font-size:15px;font-weight:700;color:var(--text);}
.seg-metric-sub{font-size:13px;font-weight:600;}
/* TOTALS BAR */
.seg-totals{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 20px;display:flex;align-items:center;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.seg-total-item{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;border-right:1px solid var(--border);}
.seg-total-item:last-child{border-right:none;}
.seg-total-lbl{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;}
.seg-total-val{font-size:20px;font-weight:800;color:var(--text);}
.seg-total-unit{font-size:13px;color:var(--muted);margin-left:2px;}
.seg-total-icon{font-size:21px;margin-top:2px;}
/* BAR CHART */
.bar-chart{display:flex;flex-direction:column;gap:7px;}
.bar-row{display:flex;align-items:center;gap:9px;}
.bar-lbl{width:110px;font-size:13px;color:var(--muted);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-track{flex:1;height:7px;background:#f0f2f7;border-radius:4px;overflow:hidden;}
.bar-fill{height:100%;border-radius:4px;transition:width .5s ease;}
.bar-val{width:58px;font-size:13px;font-weight:700;color:var(--text);text-align:right;}
.bar-pct{width:38px;font-size:13px;text-align:right;}
/* COMPARISON BAR */
.cbar-group{display:flex;flex-direction:column;gap:12px;}
.cbar-item{display:flex;flex-direction:column;gap:4px;}
.cbar-label{font-size:14px;font-weight:600;color:var(--text);}
.cbar-rows{display:flex;flex-direction:column;gap:3px;}
.cbar-row{display:flex;align-items:center;gap:8px;}
.cbar-period{font-size:12px;color:var(--muted);width:14px;}
.cbar-track{flex:1;height:12px;background:#f0f2f7;border-radius:3px;overflow:hidden;}
.cbar-fill{height:100%;border-radius:3px;}
.cbar-val{font-size:13px;font-weight:700;color:var(--text);width:70px;text-align:right;}
.cbar-delta{font-size:13px;font-weight:700;}
.cbar-delta.up{color:#22c55e;}.cbar-delta.dn{color:#ef4444;}
/* TABLE */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{padding:8px 10px;text-align:left;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;border-bottom:1.5px solid var(--border);}
.tbl td{padding:9px 10px;font-size:14px;color:var(--muted);border-bottom:1px solid #f4f6fb;vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:#fafbfd;}
.tbl .bold{font-weight:700;color:var(--text);}
.tbl .mono{font-family:var(--font-mono);font-size:15px;}
.mpill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:13px;font-weight:700;}
.m-hi{background:#dcfce7;color:#16a34a;}.m-med{background:#dbeafe;color:#1d4ed8;}.m-low{background:#fee2e2;color:#dc2626;}
/* MIGRATION MATRIX */
.mat-tbl{width:100%;border-collapse:collapse;}
.mat-tbl th{padding:8px 10px;text-align:center;font-size:13px;font-weight:700;color:var(--muted);border-bottom:1.5px solid var(--border);}
.mat-tbl th:first-child{text-align:left;}
.mat-tbl td{padding:7px 10px;font-size:14px;text-align:center;border-bottom:1px solid #f0f2f7;vertical-align:middle;}
.mat-tbl td:first-child{text-align:left;font-weight:600;}
.mat-tbl tr:last-child td{border-bottom:none;color:var(--muted);font-size:15px;}
.mat-cell{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:26px;border-radius:5px;font-weight:700;font-size:14px;}
.mat-cell.diag{background:#dcfce7;color:#16a34a;}.mat-cell.move{background:#fef9c3;color:#b45309;}.mat-cell.empty{color:var(--muted);}.mat-cell.total{color:var(--muted);font-weight:600;}
/* MOVEMENTS */
.move-list{display:flex;flex-direction:column;gap:8px;}
.move-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:#f8fafc;border:1px solid var(--border);}
.move-icon{font-size:18px;flex-shrink:0;}
.move-info{flex:1;}
.move-from-to{font-size:14px;font-weight:600;color:var(--text);}
.move-count{font-size:13px;color:var(--muted);}
/* SPARK */
.sparkline{display:flex;align-items:flex-end;gap:2px;height:22px;}
.spark-bar{width:4px;border-radius:2px 2px 0 0;opacity:.8;}
/* SCROLLBAR */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#dde1ea;border-radius:3px;}
/* PLACEHOLDER */
.ph-panel{display:none;flex:1;overflow-y:auto;padding:24px;flex-direction:column;gap:14px;background:var(--bg);}
.ph-panel.active{display:flex;}
.ph-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;gap:14px;min-height:360px;}
.ph-icon{font-size:52px;}.ph-title{font-size:20px;font-weight:800;color:var(--text);}
.ph-desc{font-size:15px;color:var(--muted);max-width:400px;line-height:1.7;}
.ph-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:6px;}
.ph-chip{padding:4px 12px;border-radius:20px;border:1px solid var(--border);background:#fff;color:var(--muted);font-size:13px;font-weight:600;}
.coming-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;background:#dbeafe;border:1px solid #bfdbfe;color:#2563eb;font-size:13px;font-weight:700;}
@media(max-width:900px){.row2,.row3,.row4{grid-template-columns:1fr;}.seg-cards{grid-template-columns:1fr 1fr;}}

/* ── ALIASES: new shorthand classes used in HTML ── */
/* tab panels */
.tp{display:none;flex-direction:column;gap:14px;}
.tp.on,.tp.active{display:flex;}
/* bar chart shorthand */
.bc{display:flex;flex-direction:column;gap:7px;}
.br2{display:flex;align-items:center;gap:9px;}
.bl{width:110px;font-size:13px;color:var(--muted);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bt{flex:1;height:7px;background:#eef0f5;border-radius:4px;overflow:hidden;}
.bf{height:100%;border-radius:4px;transition:width .5s ease;}
.bv{width:58px;font-size:13px;font-weight:700;color:var(--text);text-align:right;}
.bp{width:38px;font-size:13px;text-align:right;}
/* comparison bar container = column, rows = flex-row via direct child selector */
.cbg{display:flex;flex-direction:column;gap:14px;}
.cbi{display:flex;flex-direction:column;gap:5px;}
.cbl{font-size:14px;font-weight:600;color:var(--text);}
.cbr{display:flex;flex-direction:column;gap:4px;}
.cbr>div,.cbr>span{display:flex;align-items:center;gap:8px;}
.cbp{font-size:12px;color:var(--muted);width:14px;flex-shrink:0;}
.cbt{flex:1;height:12px;background:#eef0f5;border-radius:3px;overflow:hidden;}
.cbf{height:100%;border-radius:3px;}
.cbv{font-size:13px;font-weight:700;color:var(--text);width:68px;text-align:right;flex-shrink:0;}
.cbd{font-size:13px;font-weight:700;flex-shrink:0;}
.cbd.up{color:#22c55e;}.cbd.dn{color:#ef4444;}
/* segment card shorthand */
.sc{background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:14px;position:relative;overflow:hidden;transition:box-shadow .15s;}
.sc:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:10px 10px 0 0;}
.sc.s::before{background:#22c55e;}.sc.o::before{background:#f59e0b;}
.sc.g::before{background:#4f8ef7;}.sc.r::before{background:#ef4444;}
.sc-hdr{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.sc-ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;}
.sc-ico.s{background:#dcfce7;}.sc-ico.o{background:#fef3c7;}.sc-ico.g{background:#dbeafe;}.sc-ico.r{background:#fee2e2;}
.sc-lbl{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.sc-lbl.s{color:#22c55e;}.sc-lbl.o{color:#f59e0b;}.sc-lbl.g{color:#4f8ef7;}.sc-lbl.r{color:#ef4444;}
.sc-n{font-size:28px;font-weight:800;color:var(--text);line-height:1;margin-bottom:2px;}
.sc-nl{font-size:13px;color:var(--muted);margin-bottom:10px;}
.sc-m{display:flex;gap:16px;padding-top:10px;border-top:1px solid var(--border);}
.sc-mi{display:flex;flex-direction:column;gap:1px;}
.sc-ml{font-size:12px;color:var(--muted);font-weight:600;}
.sc-mv{font-size:15px;font-weight:700;color:var(--text);}
.sc-ms{font-size:13px;font-weight:600;}
.scards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
/* totals strip shorthand */
.tots{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 20px;display:flex;align-items:center;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.tot{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;border-right:1px solid var(--border);}
.tot:last-child{border-right:none;}
.tot-l{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;}
.tot-v{font-size:20px;font-weight:800;color:var(--text);}
.tot-u{font-size:13px;color:var(--muted);}
.tot-i{font-size:20px;margin-top:1px;}
/* migration matrix shorthand */
.mt{width:100%;border-collapse:collapse;}
.mt th{padding:8px 10px;text-align:center;font-size:13px;font-weight:700;color:var(--muted);border-bottom:1.5px solid var(--border);}
.mt th:first-child{text-align:left;}
.mt td{padding:7px 10px;font-size:14px;text-align:center;border-bottom:1px solid #f2f4f9;vertical-align:middle;}
.mt td:first-child{text-align:left;font-weight:600;}
.mt tr:last-child td{border-bottom:none;font-size:13px;color:var(--muted);}
.mc{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:26px;border-radius:5px;font-weight:700;font-size:14px;}
.mc.diag,.mc.d{background:#dcfce7;color:#16a34a;}
.mc.move,.mc.m{background:#fef9c3;color:#b45309;}
.mc.total,.mc.t{color:var(--muted);font-weight:600;}
/* movement shorthand */
.mvl{display:flex;flex-direction:column;gap:8px;}
.mvi{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:#f8fafc;border:1px solid var(--border);}
.mvi-ic{font-size:18px;flex-shrink:0;}
.mvi-ft{font-size:14px;font-weight:600;color:var(--text);}
.mvi-ct{font-size:13px;color:var(--muted);}
/* badge shorthand */
.badge.bg,.badge-green{background:#dcfce7;color:#16a34a;}
.badge.bb,.badge-blue{background:#dbeafe;color:#2563eb;}
.badge.ba,.badge-amber{background:#fef3c7;color:#b45309;}
.badge.br,.badge-red{background:#fee2e2;color:#dc2626;}
.badge.bpu,.badge-purple{background:#ede9fe;color:#7c3aed;}
/* mpill shorthand */
.mp,.mpill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:13px;font-weight:700;}
.mp.mh,.m-hi{background:#dcfce7;color:#16a34a;}
.mp.mm,.m-med{background:#dbeafe;color:#1d4ed8;}
.mp.ml,.m-low{background:#fee2e2;color:#dc2626;}
/* card title shorthand */
.ct{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
/* heatmap */
.hm{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;}
.hc{aspect-ratio:1;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:rgba(255,255,255,.9);cursor:pointer;}
/* spark shorthand */
.sb{width:4px;border-radius:2px 2px 0 0;opacity:.8;}
/* bold/mono inside tables */
.bold{font-weight:700;color:var(--text);}
.mono{font-family:var(--font-mono);font-size:15px;}