/* Billing follows the admin layout and the C2C workspace's typography/colors. */
.billing-host{font:inherit;color:var(--ink);gap:12px}
.billing-host .report-toolbar{display:flex;flex-direction:column;gap:12px;flex-shrink:0;padding:14px;background:#fff;border:1px solid var(--line);border-radius:10px}
.billing-host .report-tabs{gap:8px}
.billing-host .report-tabs button{padding:7px 13px;font-size:14px;color:var(--muted);border-color:var(--line)}
.billing-host .report-tabs button[aria-selected=true]{color:var(--accent);border-color:#c9d8f8;background:var(--accent-soft)}
.billing-host .report-filters{display:block;margin:0}
.billing-host .report-filter-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.billing-host .report-filters label{display:flex;flex-direction:column;flex-shrink:0;gap:5px;width:180px}
.billing-host .report-filters label>span{font-size:13px;color:var(--muted)}
.billing-host .report-filters label:has(input[name=model]){width:210px}
.billing-host .report-filters label:has(select[name=outcome]){width:128px}
.billing-host .report-filters label:has(select[name=request_source]){width:98px}
.billing-host .report-filters label:has(select[name=range]){width:136px}
.billing-host .report-filters [data-custom-range]{width:215px}
.billing-host .report-filter-actions{display:flex;gap:8px;align-items:center}
.billing-host .report-filters input,.billing-host .report-filters select,.billing-host .report-filter-actions button{height:40px;min-height:40px;font-size:14px;border-color:var(--line-strong);color:var(--ink)}
.billing-host .report-filter-actions button{padding:0 14px}
.billing-host .report-filter-actions [type=submit]{width:84px;min-width:84px;color:var(--accent);background:var(--accent-soft);border-color:#c9d8f8}
.billing-host .report-picker-control{display:flex;align-items:center;height:40px;border:1px solid var(--line-strong);border-radius:7px;background:#fff}
.billing-host .report-picker-control:focus-within{outline:2px solid #315fce33;outline-offset:1px}
.billing-host .report-picker-control input{flex:1;width:0;min-width:0;border:0;background:transparent;outline:0;padding:7px 10px}
.billing-host .report-picker-control button{display:flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;min-height:28px;height:28px;margin-right:5px;padding:0;border:0;color:var(--muted);background:transparent}
.billing-host .report-picker-control button:hover{color:var(--accent);background:var(--accent-soft)}
.billing-host .report-feedback{min-height:0;color:var(--muted)}
.billing-host .report-feedback:empty{display:none}
.usage-host .report-summary{display:flex;flex-direction:column;gap:12px;flex-shrink:0;min-width:0;padding:12px;background:#fff;border:1px solid var(--line);border-radius:10px}
.usage-host .report-metrics>div{border-color:var(--line);min-width:0}
.usage-host .report-metrics span{font-size:13px;color:var(--muted)}
.usage-host .report-metrics strong{margin-top:auto;font-size:17px;color:var(--ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.usage-host .report-group-title{color:var(--ink);font-size:14px}
.usage-host .report-filters label:has(select[name=group_by]){width:128px}
.usage-host .report-filters label:has(select[name=granularity]){width:98px}
@media(min-width:601px){.usage-host .report-table .report-action{width:110px;min-width:110px}}
.billing-host .report-table-panel{display:flex;flex:1;min-height:100px;overflow:hidden}
.billing-host .report-table-scroll{min-width:0;min-height:0;border-color:var(--line);border-radius:10px}
.billing-host .report-table{font:inherit;min-width:1150px}
.billing-host .report-response-model{color:var(--orange,#a15c07)}
.billing-host .report-simple-table{min-width:620px}
.billing-host .report-table th,.billing-host .report-table td{padding:13px 14px;font-size:13px;line-height:1.5;border-bottom-color:var(--line);color:var(--ink)}
.billing-host .report-table th{background:var(--surface-soft);color:var(--muted);font-weight:600}
.billing-host .report-table tbody tr:hover td{background:#f8faff}
.billing-host .report-table .report-number{font-variant-numeric:tabular-nums;text-align:right}
.billing-host .report-table .report-action{width:80px;min-width:80px;border-left-color:var(--line);text-align:center}
.billing-host .row-action{padding:3px 6px;min-height:30px;border:0;background:transparent;color:var(--accent);font-size:13px}
.billing-host .report-table .report-empty{color:var(--muted);padding:35px;text-align:center}
.billing-host .report-pagination{margin:0;gap:14px;font-size:13px}
.billing-host .report-record-count{margin-right:auto;white-space:nowrap}
.billing-host .report-pagination button{min-height:34px;border-color:var(--line);padding:5px 12px}
.billing-host .report-income{color:var(--green)}
.billing-host .report-expense{color:var(--red)}
.billing-host .status-badge,.billing-drawer .status-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;color:var(--muted);background:#f2f4f7;white-space:nowrap;font-size:13px;font-weight:500}
.billing-host .status-badge.active,.billing-drawer .status-badge.active{color:var(--green);background:var(--green-soft)}
.billing-host .status-badge.failed,.billing-drawer .status-badge.failed{color:var(--red);background:var(--red-soft)}
.billing-host .status-badge.pending,.billing-drawer .status-badge.pending{color:var(--orange);background:var(--orange-soft)}
.billing-options{position:fixed;z-index:30;overflow:auto;box-sizing:border-box;padding:4px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;box-shadow:0 6px 20px #10182818;font:inherit;color:var(--ink)}
.billing-options button{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;width:100%;min-height:42px;padding:10px 12px;border:0;border-radius:5px;background:#fff;color:inherit;text-align:left;cursor:pointer;font:inherit}
.billing-options button:hover,.billing-options button[aria-selected=true]{background:var(--accent-soft)}
.billing-options button>span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.billing-options .report-option-detail{font-size:13px;color:var(--muted)}
.billing-options .report-option-empty{padding:12px;color:var(--muted)}
.billing-drawer{width:min(760px,100vw)}
.billing-drawer>.drawer-header{position:sticky;top:0;z-index:1}
.billing-drawer .report-detail-section{margin-bottom:14px;border:1px solid var(--line);border-radius:9px;padding:16px;background:#fff}
.billing-drawer .report-detail-section h3{margin:0 0 14px;font-size:15px}
.billing-drawer dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px;margin:0}
.billing-drawer dl>div{min-width:0}
.billing-drawer dt{margin-bottom:4px;color:var(--muted);font-size:13px}
.billing-drawer dd{margin:0;color:var(--ink);font-size:14px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
@media(max-width:600px){
 .billing-host .report-pagination{gap:8px;flex-wrap:wrap}
 .billing-host .report-toolbar{padding:12px}
 .billing-host .report-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .billing-host .report-tabs button{min-width:0;padding:8px}
 .billing-host .report-filter-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .billing-host .report-filters label,.billing-host .report-filters label:has(input[name]),.billing-host .report-filters label:has(select[name]),.billing-host .report-filters [data-custom-range]{width:auto;min-width:0}
 .usage-host .report-filters label:has(select[name]){width:auto}
 .billing-host .report-filters [data-custom-range],.billing-host .report-filter-actions{grid-column:1/-1}
 .billing-host .report-filter-actions button{flex:1}
 .billing-host .report-table-panel{flex:none;max-height:65vh;overflow:auto}
 .billing-host .report-table-scroll{flex:none;max-height:none;width:100%;overflow:visible;border:0;background:transparent}
 .billing-host .report-table{display:block;min-width:0;width:100%}
 .billing-host .report-table thead{display:none}
 .billing-host .report-table tbody{display:grid;gap:10px}
 .billing-host .report-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;border:1px solid var(--line);border-radius:9px;background:#fff}
 .billing-host .report-table td{display:block;position:static;min-width:0;padding:0;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere;background:transparent}
 .billing-host .report-table td.report-number{text-align:left}
 .billing-host .report-table td::before{display:block;margin-bottom:4px;font-size:12px;color:var(--muted);font-weight:500;content:attr(data-label)}
 .billing-host .report-table td:first-child,.billing-host .report-table .report-action{grid-column:1/-1;width:auto;text-align:left}
 .billing-host .report-table .report-action{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:8px}
 .billing-host .report-table .report-action::before{margin:0}
 .billing-host .report-table td.report-empty{grid-column:1/-1;padding:28px 12px;text-align:center}
 .billing-host .report-table td.report-empty::before{display:none}
 .billing-host .report-table-panel:has(.report-empty-table) .report-table-scroll{overflow:auto}
 .billing-host .report-table.report-empty-table{display:table;min-width:620px;border:1px solid var(--line);border-radius:9px;background:#fff}
 .billing-host .report-empty-table thead{display:table-header-group}
 .billing-host .report-empty-table tbody{display:table-row-group}
 .billing-host .report-empty-table tr{display:table-row;border:0}
 .billing-host .report-empty-table td.report-empty{display:table-cell}
 .billing-drawer{width:100vw}
 .billing-drawer .report-detail-section{padding:12px}
 .billing-drawer dl{gap:14px 12px}
}
