/* One coherent report, with a separate current balance and truthful period metrics. */
.bandwidth-page { min-width:0; }
.usage-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:26px 0 20px; }
#usage-account-selector { width:270px; max-width:100%; min-width:0; }
#usage-account-selector .custom-select { max-width:none; }
#usage-account-selector .select-label,.usage-control-label { display:block; margin-bottom:7px; color:#747b8a; font-size:12px; font-weight:500; }
#usage-account-selector > strong { display:block; font-size:14px; font-weight:550; }
#usage-account-selector > small { display:block; margin-top:4px; color:#747b8a; font-size:12px; }
#usage-account-selector .select-trigger { min-height:44px; border-color:#dedfe8; background:#fff; font-size:14px; }
.usage-toolbar-actions { display:flex; align-items:flex-end; gap:10px; min-width:0; }
.bandwidth-page #range-selector { width:174px; max-width:100%; }
.bandwidth-page #range-selector .select-trigger { min-height:44px; font-size:13px; }
.usage-refresh { display:inline-flex; align-items:center; justify-content:center; width:44px; flex:none; min-height:44px; padding:10px; border:1px solid #dedfe8; border-radius:8px; background:#fff; color:#53596a; font:inherit; font-size:13px; cursor:pointer; }
.usage-refresh .refresh-icon { width:17px; height:17px; }
.usage-refresh:hover:not(:disabled) { background:#f7f6ff; border-color:#c6c0e7; }
.usage-refresh:disabled { opacity:.55; cursor:wait; }
.usage-refresh:focus-visible { outline:2px solid #8174df; outline-offset:3px; }
.usage-report { container-type:inline-size; border:1px solid #e3e4ed; border-radius:14px; background:#fff; box-shadow:0 10px 30px -28px #252b4550; min-width:0; }
.usage-report-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px 24px 0; }
.usage-total > span { display:block; color:#737b8a; font-size:13px; }
.usage-total > strong { display:block; color:#252832; font-size:44px; font-weight:650; letter-spacing:-.055em; line-height:1.25; font-variant-numeric:tabular-nums; margin-top:6px; }
.usage-total > strong > small { color:#777e8d; font-size:17px; font-weight:450; letter-spacing:0; margin-left:3px; }
.usage-period { color:#78808e; font-size:12px; line-height:1.6; margin-top:8px; }
.usage-data-badge { display:inline-flex; align-items:center; min-height:26px; padding:4px 9px; border-radius:6px; background:#f4f5f8; color:#626b7b; font-size:11px; white-space:nowrap; }
.usage-data-badge.is-sample { background:#f1effb; color:#695a9e; }
.usage-report-body { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; margin-top:18px; }
.usage-report-body > .usage-chart { min-width:0; border:0; border-radius:0; box-shadow:none; background:transparent; --usage-plot-height:180px; margin:0; }
.usage-report .chart-heading { padding:0 24px; border:0; font-size:13px; }
.usage-report .chart-heading > span { font-size:12px; color:#6b7280; }
.usage-report .chart-scroll { overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#d4d0e9 transparent; border-radius:0; }
.usage-report .chart-body { padding:42px 24px 18px; column-gap:12px; }
.usage-report .chart { background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),#eeedf5 calc(25% - 1px),#eeedf5 25%); border-color:#e6e5ef; }
.usage-report [data-chart-type="line"] .chart { position:relative; overflow:visible; }
.chart-line-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.chart-line-area { fill:#7867df; fill-opacity:.075; }
.chart-line-stroke { fill:none; stroke:#7867df; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.usage-report [data-chart-type="line"] .legend-dot { width:14px; height:2px; border-radius:1px; background:#7867df; }
.usage-report [data-chart-type="line"] .chart-column { z-index:1; flex:var(--hit-weight,1); }
.usage-report [data-chart-type="line"] .chart-column::before { content:''; position:absolute; top:0; bottom:0; left:var(--point-x,50%); border-left:1px dashed #c9c3e3; opacity:0; pointer-events:none; }
.chart-line-point { position:absolute; left:var(--point-x,50%); bottom:var(--bar); width:6px; height:6px; border:2px solid #7867df; border-radius:50%; background:#fff; transform:translate(-50%,50%); opacity:0; pointer-events:none; }
.usage-report [data-chart-type="line"] .chart-tooltip { left:var(--point-x,50%); }
.usage-report [data-chart-type="line"] [data-line-end="single"] .chart-line-point { opacity:1; }
.usage-report [data-chart-type="line"] .chart-column:not([data-tooltip-dismissed]):is(:hover,:focus-visible,[aria-pressed="true"])::before,
.usage-report [data-chart-type="line"] .chart-column:not([data-tooltip-dismissed]):is(:hover,:focus-visible,[aria-pressed="true"]) .chart-line-point { opacity:1; }
.usage-report [data-chart-type="line"] .chart-column:not([data-tooltip-dismissed]):is(:hover,:focus-visible,[aria-pressed="true"]) .chart-line-point { width:9px; height:9px; }
.usage-report [data-chart-type="line"] .chart-column:focus-visible { outline-offset:-1px; }
.usage-report .chart-bar { width:54%; max-width:52px; }
.usage-report .chart-labels { color:#8b8e9a; font-size:11px; }
.usage-report [data-chart-type="line"] .chart-labels { position:relative; display:block; min-height:29px; }
.usage-report [data-chart-type="line"] .chart-labels > span { position:absolute; left:var(--label-x); width:max-content; white-space:nowrap; transform:translateX(-50%); }
.usage-report [data-chart-type="line"] .chart-labels > span:first-child { transform:none; }
.usage-report [data-chart-type="line"] .chart-labels > span:last-child { transform:translateX(-100%); }
.usage-report [data-chart-type="line"][data-chart-columns="1"] .chart-labels > span { transform:translateX(-50%); }
.usage-report .chart-labels-daily > span:not(.chart-label-keep) { visibility:hidden; overflow:hidden; }
.usage-report .chart-labels-daily > .chart-label-keep { width:max-content; justify-self:center; white-space:nowrap; }
.usage-report .chart-labels-daily > span:first-child { justify-self:start; }
.usage-report .chart-labels-daily > span:last-child { justify-self:end; }
.usage-report .chart-date { font-size:11px; color:#777e8d; }
.usage-report .chart-tooltip { padding:11px 13px; border-radius:10px; box-shadow:0 6px 22px #24243b15; }
.usage-report .chart-tooltip strong { font-size:17px; }
.usage-report .chart-tooltip small { font-size:11px; }
.usage-insights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 24px; padding:18px 0; border-top:1px solid #ececf2; }
.usage-insights > div { min-width:0; padding:0 18px; border-left:1px solid #ececf2; }
.usage-insights > div:first-child { padding-left:0; border-left:0; }
.usage-insights > div:last-child { padding-right:0; }
.usage-insights span { display:block; color:#747c8c; font-size:12px; }
.usage-insights strong { display:block; margin-top:7px; color:#30333f; font-size:25px; font-weight:550; letter-spacing:-.035em; line-height:1.25; font-variant-numeric:tabular-nums; }
.usage-insights strong small { font-size:12px; font-weight:450; color:#838997; letter-spacing:0; }
.usage-insights p { margin-top:6px; color:#858b98; font-size:11px; line-height:1.5; }
.usage-report-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 24px; border-top:1px solid #f0eff5; color:#858b98; font-size:11px; line-height:1.65; }
.usage-report-empty { min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 24px; text-align:center; }
.usage-empty-mark { display:grid; place-items:center; width:38px; height:38px; margin-bottom:16px; border-radius:10px; background:#f1effb; color:#7768c8; font-size:24px; }
.usage-report-empty strong { font-size:17px; color:#474e5c; }
.usage-report-empty p { max-width:400px; color:#7b8391; font-size:13px; line-height:1.8; margin-top:8px; }
.usage-report .usage-chart[data-chart-columns="30"] .chart-body { min-width:760px; }
.usage-report .usage-chart[data-chart-columns="30"] .chart-bar { width:62%; }
.usage-report .usage-chart[data-chart-type="line"][data-chart-columns="30"] .chart-body { min-width:0; }
.usage-report .usage-chart[data-chart-columns="30"] .chart-column:nth-child(-n+4) .chart-tooltip { left:0; right:auto; transform:translateY(0); }
.usage-report .usage-chart[data-chart-columns="30"] .chart-column:nth-last-child(-n+4) .chart-tooltip { left:auto; right:0; transform:translateY(0); }
.usage-report .usage-chart .chart-column[data-tooltip-edge="left"] .chart-tooltip { left:0; right:auto; transform:translateY(0); }
.usage-report .usage-chart .chart-column[data-tooltip-edge="right"] .chart-tooltip { left:auto; right:0; transform:translateY(0); }
.usage-report .usage-chart .chart-column[data-tooltip-edge="left"] .chart-tooltip::after { left:10px; right:auto; }
.usage-report .usage-chart .chart-column[data-tooltip-edge="right"] .chart-tooltip::after { left:auto; right:10px; }
.usage-report [data-chart-type="line"] .chart-column[data-tooltip-edge="left"] .chart-tooltip::after { left:calc(var(--tooltip-pointer-left,10px) - 4px); right:auto; }
.usage-report [data-chart-type="line"] .chart-column[data-tooltip-edge="right"] .chart-tooltip::after { left:auto; right:calc(var(--tooltip-pointer-right,10px) - 4px); }
.usage-report .usage-chart[data-chart-columns="30"] .chart-scale { position:sticky; left:0; z-index:3; background:#fff; }
.chart-scroll-hint { display:none; color:#6b7280; font-size:11px; padding:0 22px 16px; }
.chart-scroll-hint > span { margin-right:5px; }
.usage-report :is(.usage-period,.usage-insights span,.usage-insights p,.usage-report-footer,.chart-scale,.chart-labels,.chart-date,.usage-total>span,.usage-insights strong small) { color:#6b7280; }
@container (max-width:760px) { .chart-scroll-hint { display:block; } }
/* Use the report's width, so a narrow account pane stays readable on desktop. */
@container (min-width:720px) {
  .usage-report-body { grid-template-columns:minmax(0,1fr) 190px; align-items:start; padding-bottom:18px; }
  .usage-insights { grid-template-columns:minmax(0,1fr); gap:0; margin:0 24px 0 0; padding:0 0 0 22px; border-top:0; border-left:1px solid #ececf2; }
  .usage-insights > div { padding:12px 0; border-left:0; border-top:1px solid #ececf2; }
  .usage-insights > div:first-child { padding-top:0; border-top:0; }
  .usage-insights > div:last-child { padding-bottom:0; }
  .usage-insights strong { font-size:24px; margin-top:5px; }
  .usage-insights p { margin-top:4px; }
}
@container (max-width:719px) {
  .usage-report-body > .usage-chart { --usage-plot-height:160px; }
}
.customer-workspace .account-main .usage-report .chart-heading { font-size:13px; }
.customer-workspace .account-main .usage-report .chart-heading > span { font-size:12px; }
.customer-workspace .account-main .usage-report .chart-date { font-size:11px; }
.customer-workspace .account-main .usage-report .chart-labels { font-size:11px; }
@media(max-width:900px) {
  .usage-toolbar { gap:14px; }
  #usage-account-selector { width:240px; }
  .usage-toolbar-actions { gap:8px; }
  .usage-refresh { padding-inline:12px; }
  .usage-report-header { padding:24px 22px 0; }
  .usage-report .chart-heading { padding-inline:22px; }
  .usage-report .chart-body { padding-inline:22px; }
  .usage-insights { margin-inline:22px; }
  .usage-insights > div { padding-inline:16px; }
}
@media(max-width:600px) {
  .usage-toolbar { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-top:22px; }
  #usage-account-selector { width:100%; }
  .usage-toolbar-actions { justify-content:space-between; }
  .bandwidth-page #range-selector { width:184px; }
  .usage-report-header { padding:22px 18px 0; gap:10px; }
  .usage-total > strong { font-size:38px; }
  .usage-total > strong > small { font-size:15px; }
  .usage-period { font-size:11px; max-width:220px; }
  .usage-data-badge { font-size:10px; padding:4px 6px; }
  .usage-report-body { margin-top:18px; }
  .usage-report-body > .usage-chart { --usage-plot-height:160px; }
  .usage-report .chart-heading { padding-inline:18px; }
  .usage-report .chart-body { padding:40px 18px 18px; column-gap:10px; }
  .usage-report .chart-scale { font-size:10px; }
  .usage-report .chart-labels { font-size:10px; }
  .usage-report [data-chart-type="line"][data-chart-columns="30"] .chart-labels > span { visibility:hidden; overflow:hidden; }
  .usage-report [data-chart-type="line"][data-chart-columns="30"] .chart-labels > :is(:first-child,:nth-child(11),:nth-child(21),:last-child) { visibility:visible; overflow:visible; width:max-content; justify-self:center; white-space:nowrap; }
  .usage-report [data-chart-type="line"][data-chart-columns="30"] .chart-labels > span:first-child { justify-self:start; }
  .usage-report [data-chart-type="line"][data-chart-columns="30"] .chart-labels > span:last-child { justify-self:end; }
  .usage-report .chart-date { font-size:10px; }
  .usage-report .chart-tooltip { max-width:150px; padding:10px; }
  .usage-insights { grid-template-columns:repeat(3,minmax(0,1fr)); margin-inline:18px; gap:0; padding:16px 0; }
  .usage-insights > div { padding-inline:10px; }
  .usage-insights > div:first-child { padding-left:0; }
  .usage-insights > div:last-child { padding-right:0; }
  .usage-insights strong { font-size:22px; }
  .usage-insights span { font-size:11px; }
  .usage-insights p { font-size:10px; }
  .usage-report-footer { align-items:flex-start; flex-direction:column; gap:5px; padding:13px 18px; font-size:10px; }
  .usage-report-empty { min-height:220px; padding:24px 20px; }
}