/* History and audit table styles */ /* ── Sortable column headers ── */ th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { background: #F0F1F5; } th.sortable::after { content: ' ⇅'; font-size: 10px; opacity: 0.5; } th.sort-asc::after { content: ' ↑'; opacity: 1; color: var(--cobalt); } th.sort-desc::after { content: ' ↓'; opacity: 1; color: var(--cobalt); } /* ── Expandable row ── */ .row-expandable { cursor: pointer; } .row-expanded-content { background: #FAFBFC; } .row-expand-body { padding: 12px 14px 14px; font-size: var(--font-size-sm); color: var(--text-muted); border-top: 1px solid var(--border); } .expand-icon { font-size: 10px; color: var(--text-muted); transition: transform 0.15s; } tr.open .expand-icon { transform: rotate(90deg); } /* ── Checksum display ── */ .checksum { font-family: var(--font-mono); font-size: var(--font-size-xs); background: var(--ecru); padding: 2px 6px; border-radius: 3px; cursor: help; } /* ── Date range filter ── */ .date-filter { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); } .date-input { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-family: var(--font); color: var(--text); background: var(--card-bg); outline: none; } .date-input:focus { border-color: var(--cobalt); } /* ── Pagination ── */ .pagination { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-top: 1px solid var(--border); font-size: var(--font-size-sm); color: var(--text-muted); } .pagination-pages { display: flex; gap: 4px; } .page-btn { padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-bg); cursor: pointer; font-size: var(--font-size-sm); transition: background 0.1s; } .page-btn:hover { background: var(--ecru); } .page-btn.active { background: var(--cobalt); color: #fff; border-color: var(--cobalt); } .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }