/* Keep a single set of request rows and controls across desktop and mobile. */
.app-shell .request-log-mobile-details,
.app-shell .request-log-mobile-label { display: none; }

@media (max-width: 820px) {
  .app-shell .table-wrap:has(> :is(#usage-table,.admin-usage-table)) {
    min-width: 0;
    overflow: visible;
    padding: 12px;
    background: #fff;
  }

  .app-shell .usage-detail-section #usage-table,
  .app-shell .admin-usage-table {
    display: block;
    width: 100%;
    min-width: 0;
    border: 0;
    border-spacing: 0;
  }

  .app-shell :is(#usage-table,.admin-usage-table) > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .app-shell :is(#usage-table,.admin-usage-table) > tbody {
    display: grid;
    min-width: 0;
    gap: 12px;
  }

  .app-shell :is(#usage-table,.admin-usage-table) > tbody > :is([data-usage-event],.request-log-row) {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: start;
    gap: 13px 16px;
    padding: 16px;
    border: 1px solid #e4e8ed;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(15,23,42,.025);
  }

  .app-shell #usage-table > tbody > .usage-row-expanded {
    border-color: #b9ccdf;
    box-shadow: 0 0 0 1px #e6eef6;
  }

  .app-shell :is(#usage-table,.admin-usage-table) > tbody > :is([data-usage-event],.request-log-row) > td {
    display: block;
    order: 10;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #334155;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .app-shell :is(#usage-table,.admin-usage-table) > tbody > :is([data-usage-event],.request-log-row) > td::before {
    display: block;
    margin-bottom: 4px;
    color: #718096;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    content: attr(data-label);
  }

  .app-shell :is(#usage-table,.admin-usage-table) .request-log-cell-value {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .app-shell :is(#usage-table,.admin-usage-table) .request-log-cell-value :is(code,.table-note,.usage-error-detail) {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .app-shell :is(#usage-table,.admin-usage-table) .request-log-cell-value .table-note { font-size: 11px; }
  .app-shell :is(#usage-table,.admin-usage-table) .request-log-cell-value code { font-size: 11px; }

  /* User request cards start with the timestamp, then the model identity. */
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > :is([data-usage-column="model"],[data-admin-usage-column="route"]) {
    order: 0;
    grid-column: 1/-1;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf0f3;
  }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > :is([data-usage-column="model"],[data-admin-usage-column="route"])::before { content: none; }
  .app-shell :is(#usage-table,.admin-usage-table) :is(.usage-model-identity,.usage-supplier-identity) { min-width: 0; max-width: 100%; }
  .app-shell :is(#usage-table,.admin-usage-table) .usage-model-name { color: #1e293b; font-size: 14px; font-weight: 600; }
  .app-shell :is(#usage-table,.admin-usage-table) .usage-supplier-name { min-width: 0; max-width: 100%; }
  .app-shell :is(#usage-table,.admin-usage-table) .usage-supplier-logo { flex-basis: 20px; width: 20px; height: 20px; }
  .app-shell :is(#usage-table,.admin-usage-table) .usage-mode-badge { margin-top: 6px; }
  .app-shell .admin-usage-table [data-admin-usage-column="route"] .request-log-cell-value > code { display: block; margin-top: 6px; }

  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > :is([data-usage-column="created"],[data-admin-usage-column="created"]) { order: 1; }
  .app-shell #usage-table > tbody > tr > [data-usage-column="created"] { order: -1; grid-column: 1/-1; }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > :is([data-usage-column="status"],[data-admin-usage-column="status"]) { order: 2; }
  .app-shell #usage-table > tbody > tr > [data-usage-column="input"] { order: 3; }
  .app-shell #usage-table > tbody > tr > [data-usage-column="output"] { order: 4; }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > [data-admin-usage-column="tokens"] { order: 3; }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > :is([data-usage-column="cost"],[data-admin-usage-column="cost"]) { order: 5; }
  .app-shell #usage-table > tbody > tr > [data-usage-column="output_tps"] { order: 6; }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > [data-admin-usage-column="output_tps"] { order: 8; }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > :is([data-usage-column="provider"],[data-admin-usage-column="provider"]) { order: 9; }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > :is([data-usage-column="key"],[data-admin-usage-column="key"]) { order: 10; }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > [data-admin-usage-column="channel"] { order: 11; }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > [data-admin-usage-column="customer"] { order: 12; grid-column: 1/-1; }
  .app-shell #usage-table > tbody > tr > [data-usage-column="endpoint"] { order: 13; grid-column: 1/-1; }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > :is([data-usage-column="request"],[data-admin-usage-column="request"]) {
    order: 14;
    grid-column: 1/-1;
    padding-top: 11px;
    border-top: 1px solid #edf0f3;
  }

  /* The colored timing bars remain paired and visible without sideways scrolling. */
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > :is([data-usage-column="latency"],[data-admin-usage-column="latency"]) {
    order: 7;
    grid-column: 1/-1;
    padding: 11px 12px;
    border-radius: 9px;
    background: #f7f9fb;
  }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > :is([data-usage-column="latency"],[data-admin-usage-column="latency"])::before { content: none; }
  .app-shell :is(#usage-table,.admin-usage-table) .request-log-cell-value .usage-timing { min-width: 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .app-shell :is(#usage-table,.admin-usage-table) .usage-timing > div { display: grid; min-width: 0; gap: 5px; white-space: normal; }
  .app-shell :is(#usage-table,.admin-usage-table) .usage-timing dt { font-size: 11px; }
  .app-shell :is(#usage-table,.admin-usage-table) .usage-timing dd { font-size: 13px; }

  .app-shell .admin-usage-table [data-admin-usage-column="status"] .request-log-cell-value,
  .app-shell .admin-usage-table [data-admin-usage-column="status"] .usage-error-button { display: flex; flex-flow: row wrap; align-items: center; gap: 4px 6px; }
  .app-shell .admin-usage-table [data-admin-usage-column="status"] br { display: none; }
  .app-shell .admin-usage-table [data-admin-usage-column="status"] code { flex-basis: 100%; }
  .app-shell :is(#usage-table,.admin-usage-table) .usage-error-button { min-height: 44px; padding: 4px 0; margin: -4px 0; }
  .app-shell #usage-table .usage-cost-button { min-height: 44px; margin-block: -4px; color: #1e293b; font-weight: 600; }

  .app-shell :is(#usage-table,.admin-usage-table) .usage-request-identity { display: flex; width: 100%; min-width: 0; gap: 6px; }
  .app-shell :is(#usage-table,.admin-usage-table) .usage-request-identity > code { flex: 1; min-width: 0; max-width: none; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
  .app-shell :is(#usage-table,.admin-usage-table) .usage-request-copy { width: 44px; min-width: 44px; height: 44px; min-height: 44px; border-radius: 8px; }
  .app-shell :is(#usage-table,.admin-usage-table) .usage-request-copy svg { width: 15px; height: 15px; }
  .app-shell #usage-table .usage-request-ip { margin-top: 0; font-size: 11px; }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > [data-admin-usage-column="actions"] { order: 15; grid-column: 1/-1; }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > [data-admin-usage-column="actions"]::before { content: none; }
  .app-shell :is(#usage-table,.admin-usage-table) :is(.request-log-mobile-details,.admin-usage-detail-button) {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e4e8ed;
    border-radius: 9px;
    background: #f8fafc;
    box-shadow: none;
    color: #3f5d7a;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
    cursor: pointer;
  }
  .app-shell #usage-table .request-log-mobile-details { margin-top: 10px; }
  .app-shell :is(#usage-table,.admin-usage-table) .request-log-mobile-label { display: inline; }
  .app-shell #usage-table .request-log-mobile-details::after { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ''; transform: translateY(-2px) rotate(45deg); }
  .app-shell #usage-table .request-log-mobile-details[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
  .app-shell :is(#usage-table,.admin-usage-table) :is(.request-log-mobile-details,.admin-usage-detail-button):hover { border-color: #c8d5e2; background: #eef3f8; }
  .app-shell :is(#usage-table,.admin-usage-table) :is(.request-log-mobile-details,.admin-usage-detail-button):focus-visible { outline: 2px solid #3683cf; outline-offset: 3px; }

  /* Expanded billing is a separate row; nested billing tables retain their own layout. */
  .app-shell #usage-table > tbody > .usage-billing-detail-row { display: block; min-width: 0; margin-top: -4px; }
  .app-shell #usage-table > tbody > .usage-billing-detail-row > td { display: block; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; }
  .app-shell #usage-table :is(.usage-billing-card,.usage-client-error) { position: static; width: 100%; min-width: 0; max-width: 100%; padding: 14px; overflow-wrap: anywhere; }
  .app-shell #usage-table .usage-billing-card .usage-billing-table { min-width: 0; }
  .app-shell #usage-table .usage-billing-table-wrap { min-width: 0; }

  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr:has(> td[colspan]):not(.usage-billing-detail-row) { display: block; min-width: 0; }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr:not(.usage-billing-detail-row) > td[colspan] { display: block; width: 100%; min-width: 0; padding: 28px 14px; border: 1px dashed #e4e8ed; border-radius: 12px; background: #fff; text-align: center; white-space: normal; }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > tr > :is([hidden],.admin-usage-column-hidden) { display: none!important; }
}

@media (max-width: 380px) {
  .app-shell .table-wrap:has(> :is(#usage-table,.admin-usage-table)) { padding-inline: 8px; }
  .app-shell :is(#usage-table,.admin-usage-table) > tbody > :is([data-usage-event],.request-log-row) { gap: 12px; padding: 13px; }
}