/* Logs screen styles */

@layer components {
  .sr-only {
    position: fixed;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .table__person {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2);
    white-space: nowrap;
  }

  .payload-cell {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-soft);
    font-size: var(--type-1-xs);
  }

  /* Filter + export toolbar */
  .filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--gap-4);
  }
  .filter-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-3);
    margin-top: var(--gap-4);
  }
  .ops-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-3);
  }
  .ops-feedback {
    color: var(--text-muted);
    font-size: var(--type-1-xs);
  }
  .ops-feedback[data-tone="success"] { color: var(--success); }
  .ops-feedback[data-tone="error"] { color: var(--error); }

  /* Application log viewer */
  .applog-view {
    max-height: 340px;
    overflow: auto;
    padding: var(--gap-3);
    background: var(--bg-sub);
    border: 1px solid var(--border-sub);
    border-radius: var(--radius-2);
    color: var(--text-soft);
  }
  .applog-line {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: 1px 0;
  }

  /* Expandable row detail */
  .table-row.detail .table__detail { padding: 0; }
  .table-row.detail > .table__detail { background: var(--bg-sub); }
  .detail-panel { padding: var(--gap-4) var(--gap-5); }
  .detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--gap-4);
  }
  .detail-item { display: flex; flex-direction: column; gap: 3px; }
  .detail-item > .caption { font-size: var(--type-1-xxs); text-transform: uppercase; letter-spacing: 0.05em; }
  .detail-item > span:last-child { color: var(--text-main); }
  .detail-divider { height: 1px; background: var(--border-sub); margin: var(--gap-4) 0; }
  .detail-textarea {
    width: 100%;
    min-height: 150px;
    margin-top: var(--gap-2);
    padding: var(--gap-3);
    font-family: var(--font-mono);
    font-size: var(--type-1-xs);
    line-height: var(--lh-relaxed);
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-2);
    color: var(--text-main);
    resize: vertical;
    white-space: pre;
  }
  .detail-textarea:focus { border-color: var(--field-focus); box-shadow: var(--field-shadow); outline: none; }
  .error-text { color: var(--error); }
  .warning-text { color: var(--warning); }

  /* Chevron rotation when expanded */
  .row-toggle .row-toggle__chev { transition: transform var(--transition-base); }
  .row-toggle[aria-expanded="true"] { color: var(--text-main); }
  .row-toggle[aria-expanded="true"] .row-toggle__chev { transform: rotate(180deg); }

  /* Horizontally scrollable table wrapper (mobile tables) */
  .card__body--scroll {
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .card__body--scroll .table { border: none; border-radius: 0; }

  @media (max-width: 760px) {
    .table--flush { min-width: 720px; }
    .detail-panel { padding: var(--gap-3) var(--gap-4); }
  }
}