/* ===== summary cards ===== */
.apps-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:16px}
.summary-card{background:var(--card);border:1px solid var(--card-border);border-radius:10px;padding:12px 16px}
.summary-card .sc-label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.summary-card .sc-value{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.summary-card .sc-sub{font-size:10px;color:var(--text-dim);margin-top:2px}

/* ===== toolbar / filters ===== */
.apps-toolbar{
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;flex-wrap:wrap;
}
.apps-toolbar>*{flex-shrink:0}
.range-toggle{display:inline-flex;border:1px solid var(--card-border);border-radius:6px;overflow:hidden;background:var(--card)}
.range-toggle button{padding:5px 11px;font-size:11px;font-weight:600;border:none;background:transparent;color:var(--text-dim);cursor:pointer;border-right:1px solid var(--card-border)}
.range-toggle button:last-child{border-right:none}
.range-toggle button.active{background:var(--blue);color:#fff}
.range-toggle button:hover:not(.active){background:#1e293b;color:var(--text)}

.apps-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex:1 1 auto;min-width:0}
.apps-filter input,.apps-filter select{
  padding:7px 10px;
  background:var(--card);border:1px solid var(--card-border);
  border-radius:6px;color:var(--text);font-size:12px;outline:none;
  min-width:0;
}
.apps-filter input:focus,.apps-filter select:focus{border-color:var(--blue)}
.apps-filter input[type="search"]{flex:1 1 160px;max-width:260px}
.apps-filter select{flex:0 1 auto;max-width:180px}
.filter-label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px;margin-right:-2px}

.toolbar-actions{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}

/* ===== chart / bar panels ===== */
.chart-section{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:16px}
.chart-card{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:14px 16px 12px;min-width:0;overflow:hidden}
.chart-card h3{font-size:11px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.chart-card .chart-hint{font-size:10px;color:var(--text-dim);font-weight:400;text-transform:none;letter-spacing:0}
.chart-wrap{position:relative;height:220px;width:100%;min-width:0}
.chart-wrap canvas{max-width:100%!important;height:100%!important;display:block}

/* Model mini bars */
.model-bars{display:flex;flex-direction:column;gap:8px}
.model-bar{font-size:11px;min-width:0}
.model-bar .mb-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px;gap:6px;min-width:0}
.model-bar .mb-name{flex:1 1 auto;font-weight:600;font-family:monospace;font-size:10px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.model-bar .mb-cost{flex-shrink:0;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:10px}
.model-bar .mb-track{height:6px;background:#1e293b;border-radius:3px;overflow:hidden}
.model-bar .mb-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:3px}
.model-bar.opus .mb-fill{background:linear-gradient(90deg,var(--red),#fb923c)}
.model-bar.sonnet .mb-fill{background:linear-gradient(90deg,var(--blue),var(--cyan))}
.model-bar.haiku .mb-fill{background:linear-gradient(90deg,var(--green),#a3e635)}

/* ===== apps table ===== */
.apps-table-wrap{background:var(--card);border:1px solid var(--card-border);border-radius:12px;overflow:hidden}
.apps-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.apps-table{width:100%;border-collapse:collapse;font-size:12px;min-width:900px}
.apps-table th{
  padding:9px 10px;text-align:left;font-weight:600;color:var(--text-dim);
  background:rgba(255,255,255,.02);border-bottom:1px solid var(--card-border);
  font-size:10px;text-transform:uppercase;letter-spacing:.3px;
  cursor:pointer;user-select:none;white-space:nowrap;position:sticky;top:0;
}
.apps-table th:hover{color:var(--text)}
.apps-table th.sort-asc::after{content:" ▲";font-size:8px;color:var(--blue)}
.apps-table th.sort-desc::after{content:" ▼";font-size:8px;color:var(--blue)}
.apps-table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.apps-table tr:last-child td{border-bottom:none}
.apps-table tr.clickable{cursor:pointer}
.apps-table tr.clickable:hover{background:rgba(59,130,246,.05)}
.apps-table .num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.apps-table .cost{font-variant-numeric:tabular-nums;text-align:right;font-weight:600;color:var(--green);white-space:nowrap}
.apps-table .cost.high{color:var(--yellow)}
.apps-table .cost.veryhigh{color:var(--red)}
.apps-table .app-name{font-weight:600}
.apps-table .repo-tag{display:inline-block;padding:1px 6px;border-radius:3px;font-size:9px;font-family:monospace;background:rgba(168,85,247,.1);color:var(--purple);white-space:nowrap}
.apps-table .repo-tag.eden{background:rgba(59,130,246,.1);color:var(--blue)}
.apps-table .repo-tag.game{background:rgba(34,197,94,.1);color:var(--green)}
.apps-table .branch{font-size:10px;color:var(--text-dim);font-family:monospace}
.apps-table .acct-pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;background:rgba(59,130,246,.1);color:var(--blue);font-family:monospace;white-space:nowrap}
.apps-table .src-badge{display:inline-block;padding:1px 5px;border-radius:3px;font-size:8px;text-transform:uppercase;letter-spacing:.5px}
.apps-table .src-jsonl{background:rgba(234,179,8,.1);color:var(--yellow)}
.apps-table .src-api{background:rgba(34,197,94,.08);color:var(--green);opacity:.7}
.apps-table .last-used{font-size:10px;color:var(--text-dim);white-space:nowrap}
.apps-table .empty-cell{color:var(--text-dim);font-size:11px}

/* ===== mobile card list (shown on small screens) ===== */
.apps-cards{display:none;flex-direction:column;gap:10px}
.app-card{
  background:var(--card);border:1px solid var(--card-border);
  border-radius:10px;padding:12px 14px;
  cursor:pointer;transition:border-color .15s;
}
.app-card:active{border-color:var(--blue)}
.app-card .ac-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
.app-card .ac-name{font-weight:700;font-size:13px}
.app-card .ac-meta{font-size:10px;color:var(--text-dim);font-family:monospace}
.app-card .ac-cost{font-weight:700;font-size:15px;color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap}
.app-card .ac-cost.high{color:var(--yellow)}
.app-card .ac-cost.veryhigh{color:var(--red)}
.app-card .ac-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.app-card .ac-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:var(--text-dim)}
.app-card .ac-row b{color:var(--text);font-variant-numeric:tabular-nums}
.app-card .ac-last{font-size:10px;color:var(--text-dim);margin-top:4px}

/* ===== detail modal session table ===== */
.detail-table{width:100%;border-collapse:collapse;font-size:12px}
.detail-table th{padding:8px 10px;text-align:left;color:var(--text-dim);background:rgba(255,255,255,.02);border-bottom:1px solid var(--card-border);font-size:10px;text-transform:uppercase;letter-spacing:.3px}
.detail-table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.04)}
.detail-table tr:last-child td{border-bottom:none}

/* ===== responsive ===== */
@media (min-width:900px){
  .chart-section{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
}
@media (max-width:900px){
  .apps-summary{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}
@media (max-width:768px){
  .apps-summary{grid-template-columns:repeat(2,1fr);gap:8px}
  .summary-card{padding:10px 12px}
  .summary-card .sc-value{font-size:16px}
  .apps-filter input[type="search"]{flex-basis:100%;max-width:none}
  .apps-filter select{flex:1 1 48%;max-width:48%}
  .filter-label{display:none}
  .range-toggle{width:100%;justify-content:stretch}
  .range-toggle button{flex:1}
  .toolbar-actions{margin-left:0;width:100%;justify-content:flex-end}
  /* switch to card layout */
  .apps-table-wrap{display:none}
  .apps-cards{display:flex}
  .chart-wrap{height:180px}
  .chart-card{padding:12px 14px 10px}
  .chart-section{gap:10px}
  .model-bar .mb-name,.model-bar .mb-cost{font-size:9px}
}
@media (max-width:480px){
  .apps-summary{grid-template-columns:repeat(2,1fr)}
  .summary-card{padding:9px 10px}
  .summary-card .sc-value{font-size:15px}
  .summary-card .sc-label{font-size:9px}
}