.usage-clickable-row { cursor: pointer; }
.usage-clickable-row:hover > td,.usage-clickable-row.usage-row-expanded > td { background: #f8fafc; }
.usage-clickable-row:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.usage-cost-button { display: inline-flex; align-items: center; gap: 7px; padding: 5px 7px; margin: -5px -7px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.usage-cost-button::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid #737373; border-bottom: 1.5px solid #737373; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.usage-cost-button[aria-expanded="true"]::after { transform: rotate(225deg) translate(-1px,-1px); }
.usage-cost-button:hover { background: #eef2f6; }
.usage-cost-button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.usage-error-button { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; max-width: 100%; padding: 5px 7px; margin: -5px -7px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.usage-error-button:hover { background: #fff1f2; }
.usage-error-button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.usage-error-button .status-pill::after { content: '⌄'; margin-left: 6px; }
.usage-error-button[aria-expanded="true"] .status-pill::after { content: '⌃'; }
#usage-table > tbody > .usage-billing-detail-row > td { padding: 16px; background: #fafbfc; white-space: normal; }
.usage-billing-card { min-width: 0; max-width: 1100px; padding: 22px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; color: #171717; box-shadow: 0 5px 18px rgba(15,23,42,.035); }
#usage-table .usage-billing-card { position: sticky; left: 16px; width: var(--usage-billing-width,100%); max-width: 100%; box-sizing: border-box; }
.usage-billing-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.usage-billing-card h3 { margin: 0; font-size: 15px; line-height: 1.5; }
.usage-billing-card h4 { margin: 18px 0 10px; font-size: 12px; }
.usage-billing-card header p,.usage-billing-formula,.usage-billing-timestamp,.usage-billing-summary p { margin: 5px 0 0; color: #525252; font-size: 12px; line-height: 1.65; }
.usage-billing-source { flex-shrink: 0; padding: 4px 8px; border-radius: 6px; background: #f3f4f6; color: #525252; font-size: 11px; }
.usage-billing-timestamp { margin-top: 10px; }
.usage-billing-notice { padding: 10px 12px; border-radius: 8px; background: #f0fdf4; color: #166534; font-size: 12px; line-height: 1.6; }
.usage-billing-table-wrap { min-width: 0; margin-top: 18px; }
.usage-billing-card .usage-billing-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; font-size: 12px; }
:is(.app-shell,dialog) .usage-billing-card .usage-billing-table tr > th,:is(.app-shell,dialog) .usage-billing-card .usage-billing-table tr > td { background: transparent; box-shadow: none; }
.usage-billing-card .usage-billing-table th,.usage-billing-card .usage-billing-table td { min-width: 0; padding: 12px 10px; border-bottom: 1px solid #eef0f2; text-align: right; vertical-align: middle; white-space: normal; overflow-wrap: anywhere; }
.usage-billing-card .usage-billing-table thead th { background: #fafafa; color: #525252; font-size: 11px; font-weight: 500; }
/* The admin dialog lives outside .app-shell and must not inherit dark-theme table colors. */
.usage-billing-card .usage-billing-table tbody th,.usage-billing-card .usage-billing-table tbody td { color: #171717; }
.usage-billing-card .usage-billing-table td strong { color: inherit; }
.usage-billing-card .usage-billing-table th:first-child { padding-left: 12px; text-align: left; }
.usage-billing-table [data-i18n-skip],.usage-billing-final strong,.usage-billing-summary strong,.usage-billing-recorded strong { font-family: 'Roboto Mono',monospace; font-variant-numeric: tabular-nums; }
.usage-billing-table small,.usage-billing-recorded small { display: block; margin-top: 4px; color: #525252; font-size: 10px; font-weight: 400; }
.usage-billing-recorded { display: grid; grid-template-columns: repeat(auto-fit,minmax(135px,1fr)); gap: 10px; }
.usage-billing-recorded > div { padding: 12px; border-radius: 8px; background: #fafafa; }
.usage-billing-recorded dt { margin-bottom: 7px; color: #525252; font-size: 12px; }
.usage-billing-recorded dd { margin: 0; font-size: 13px; }
.usage-billing-total { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.usage-billing-summary { display: grid; gap: 6px; flex: 1; }
.usage-billing-summary > div { display: flex; gap: 20px; justify-content: space-between; max-width: 400px; font-size: 12px; }
.usage-billing-summary span { color: #525252; }
.usage-billing-final { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 4px 7px; text-align: right; }
.usage-billing-final > span { grid-column: 1/-1; color: #525252; font-size: 12px; }
.usage-billing-final strong { font-size: 21px; font-weight: 600; }
.usage-billing-final small { color: #737373; font-size: 10px; }
.usage-payment { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e5e7eb; }
.usage-payment h4 { margin: 0 0 6px; font-size: 14px; }
.usage-payment p { margin: 6px 0 14px; color: #737373; font-size: 12px; line-height: 1.65; }
.usage-payment-packs { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 10px; }
.usage-payment-pack { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 10px; background: #f0fdf4; font-size: 12px; }
.usage-payment-pack > span { min-width: 0; overflow-wrap: anywhere; }
.usage-payment-pack small { display: block; margin-top: 5px; color: #4b5563; font-size: 11px; }
.usage-payment-deduction { color: #15803d; flex-shrink: 0; }
.usage-payment-summary { display: grid; gap: 8px; margin: 16px 0 0 auto; max-width: 440px; }
.usage-payment-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; font-size: 12px; }
.usage-payment-summary dt { color: #525252; }
.usage-payment-summary dd { margin: 0; }
.usage-payment-summary dd,.usage-payment-deduction { font-family: 'Roboto Mono',monospace; font-variant-numeric: tabular-nums; }
.usage-payment-summary .usage-payment-remaining { padding-top: 12px; margin-top: 4px; border-top: 1px solid #e5e7eb; font-weight: 600; }
.usage-payment-remaining dd { font-size: 19px; }
.usage-billing-state { display: flex; align-items: center; gap: 12px; min-height: 90px; padding: 14px; color: #737373; font-size: 13px; }
.usage-billing-state p { margin: 0; }
.usage-billing-spinner { width: 15px; height: 15px; border: 2px solid #e5e7eb; border-top-color: #525252; border-radius: 50%; animation: usage-billing-spin .8s linear infinite; }
#admin-usage-detail-calculation { margin-top: 20px; }
.usage-client-error { min-width: 0; max-width: 1100px; margin-bottom: 16px; padding: 22px; border: 1px solid #fecdd3; border-radius: 14px; background: #fff; color: #171717; box-sizing: border-box; }
#usage-table .usage-client-error { position: sticky; left: 16px; width: var(--usage-billing-width,100%); max-width: 100%; }
.usage-client-error h3 { margin: 0; font-size: 15px; line-height: 1.5; }
.usage-client-error header p,.usage-client-error-note,.usage-client-error-unavailable { margin: 5px 0 0; color: #737373; font-size: 12px; line-height: 1.65; }
.usage-client-error-message { margin: 14px 0; padding: 12px 14px; border-radius: 8px; background: #fff1f2; color: #9f1239; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.usage-client-error-guidance { margin: 14px 0; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f8fafc; }
.usage-client-error-guidance h4 { margin: 0; color: #334155; font-size: 12px; font-weight: 600; }
.usage-client-error-guidance p { margin: 6px 0 0; color: #525252; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.usage-client-error-guidance code { color: #334155; font: 11px 'Roboto Mono',monospace; white-space: normal; overflow-wrap: anywhere; }
.usage-client-error-fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(135px,1fr)); gap: 14px; margin: 14px 0; }
.usage-client-error-fields dt { margin-bottom: 5px; color: #737373; font-size: 11px; }
.usage-client-error-fields dd { margin: 0; font-family: 'Roboto Mono',monospace; font-size: 12px; overflow-wrap: anywhere; }
.usage-client-error-json { margin-top: 16px; border-top: 1px solid #eef0f2; }
.usage-client-error-json summary { padding: 13px 0 0; font-size: 12px; cursor: pointer; }
.usage-client-error-json summary:focus-visible { outline: 2px solid #2563eb; outline-offset: 4px; }
.usage-client-error-copy { display: flex; justify-content: flex-end; margin: 12px 0 8px; }
.usage-client-error pre { max-height: 340px; margin: 0; padding: 14px; overflow: auto; border-radius: 8px; background: #f8fafc; color: #334155; font-family: 'Roboto Mono',monospace; font-size: 12px; line-height: 1.7; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
#admin-usage-detail-client-error:empty { display: none; }
@keyframes usage-billing-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .usage-billing-spinner { animation: none; } }
@media (max-width: 700px) {
  #usage-table > tbody > .usage-billing-detail-row > td { padding: 10px; }
  #usage-table .usage-billing-card { left: 10px; }
  .usage-billing-card { padding: 15px; }
  .usage-billing-card header { display: block; }
  .usage-billing-source { display: inline-block; margin-top: 8px; }
  .usage-billing-card .usage-billing-table thead { display: none; }
  .usage-billing-card .usage-billing-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 14px; padding: 12px 0; border-bottom: 1px solid #e5e7eb; }
  .usage-billing-card .usage-billing-table td,.usage-billing-card .usage-billing-table th { display: block; padding: 0; border: 0; text-align: left; }
  .usage-billing-card .usage-billing-table th:first-child { grid-column: 1/-1; padding: 0; }
  .usage-billing-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: #525252; font-size: 10px; }
  .usage-billing-table td:last-child { grid-column: 2; }
  .usage-billing-total { align-items: stretch; flex-direction: column; gap: 16px; }
  .usage-billing-final { align-self: flex-end; }
  .usage-billing-state { flex-wrap: wrap; }
  .usage-client-error { padding: 15px; }
  #usage-table .usage-client-error { left: 10px; }
  .usage-client-error-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .usage-client-error pre { font-size: 11px; }
}