/* The audit log reads like a log: a dense, evenly-ruled list where the eye
   runs down one column at a time. Everything here serves scanning — fixed
   figures in the time column, the action as a slug in mono, and one colour
   channel spent on whether something began or ended. */
.logs-page {
    min-width: 0;
}

/* ── Filters ────────────────────────────────────────────────────────
   One row above the list, applied live. */
.logs-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

/* Search leads the toolbar: it is the control reached for most often, and
   the widest, so the two narrow filters read as refinements of it. */
.logs-search.p-iconfield {
    flex: 1 1 260px;
    max-width: 360px;
}

.logs-search .p-inputtext {
    width: 100%;
}

.logs-action-select.p-select {
    min-width: 230px;
}

.logs-booking-input.p-inputnumber {
    width: 130px;
}

.logs-booking-input .p-inputtext {
    width: 100%;
}

.logs-count {
    margin-left: auto;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

/* ── Surface ────────────────────────────────────────────────────────*/
.logs-card.p-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.logs-card .p-card-body {
    padding: var(--space-4) var(--space-5);
}

.logs-card .p-card-content {
    padding: 0;
}

.logs-skeleton {
    display: grid;
    gap: var(--space-3);
}

.logs-state {
    margin: 0;
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    text-align: center;
}

/* A refetch dims the rows instead of emptying the table. */
.logs-table-stale {
    opacity: 0.55;
    transition: opacity 0.14s ease;
}

/* ── Rows ───────────────────────────────────────────────────────────*/
/* Fixed layout so the percentage column widths actually hold; otherwise the
   table auto-sizes to content and one long detail string squeezes every
   other column into a ribbon. */
.logs-table .p-datatable-table {
    table-layout: fixed;
}

/* Every row is one line high. A log is read by running down it, and rows
   that grow to fit their longest cell destroy that rhythm — a name wrapping
   in two turns eight events into a wall. The page is wide (WIDE_PAGES) so
   almost everything fits; what does not is clipped with an ellipsis and
   carries its full value in a title, which is also how the row stays
   scannable when one detail string is three times longer than the rest. */
.logs-table .p-datatable-tbody > tr > td {
    padding-top: 9px;
    padding-bottom: 9px;
    overflow: hidden;
    font-size: var(--text-md);
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.logs-table .p-datatable-tbody > tr > td.logs-name,
.logs-table .p-datatable-tbody > tr > td.logs-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Timestamps are the spine of a log: fixed-width figures so the columns of
   digits line up and the eye can run straight down them. */
.logs-table .p-datatable-tbody > tr > td.logs-when {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.logs-action {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
}

.logs-table .p-datatable-tbody > tr > td.logs-action-cell {
    white-space: nowrap;
}

.logs-action code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-sm);
    color: var(--color-text);
}

/* The one colour channel on this page: something began, something ended, or
   neither. Small and low-saturation — a log with loud rows is unreadable. */
.logs-tone {
    flex: 0 0 auto;
    align-self: center;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
}

.logs-tone-opened  { background: var(--color-success); }
.logs-tone-closed  { background: var(--color-danger); }
.logs-tone-neutral { background: var(--color-border-strong); }

.logs-muted {
    color: var(--color-text-tertiary);
}

/* Booking cell: the id leads, its court and date follow as quiet context.
   The whole thing is a button because clicking it narrows the log to that
   booking — a native button so it is focusable and announced as an action. */
.logs-booking-link {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.logs-booking-link:hover strong {
    text-decoration: underline;
}

.logs-booking-link .logs-muted {
    overflow: hidden;
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Detail is freeform text written by whatever wrote the event; it gets the
   room to wrap rather than stretching the row. */
.logs-table .p-datatable-tbody > tr > td.logs-detail {
    color: var(--color-text-secondary);
}

.logs-more {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
}

/* Said next to the control that acts on it: the search only reaches what is
   loaded, and this button is what loads more. */
.logs-more-hint,
.logs-state-hint {
    max-width: 52ch;
    margin: 0;
    font-size: var(--text-sm);
    text-align: center;
}

.logs-state p {
    margin: 0 0 var(--space-2);
}

.logs-state p:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .logs-card .p-card-body {
        padding: var(--space-3);
    }

    .logs-action-select.p-select,
    .logs-booking-input.p-inputnumber {
        width: 100%;
        min-width: 0;
    }

    .logs-count {
        margin-left: 0;
    }
}