/* ─── DataTable component styles ───────────────────────────────────────────
   Base appearance for the shared `p-datatable` Leptos component
   (`crates/ux/component/table`). UX-COMPONENT-CSS-BASE-APPEARANCE-001: a
   component's OWN per-crate CSS must define its base appearance — until this
   sheet existed, every DataTable on the dashboard rendered as an unstyled
   native table. Consumes the host's semantic `--color-*` aliases (dashboard
   `style.css`) with hard fallbacks so the component also renders correctly on
   hosts that only define the `--p-*` token layer. Linked in the shell
   `index.html` per FRONTEND-COMPONENT-CSS-LINK-001. */

.p-datatable {
    display: block;
    width: 100%;
    color: var(--color-text, var(--p-surface-900, #0f172a));
    font-size: 0.875rem;
    line-height: 1.45;
}

.p-datatable-wrapper {
    width: 100%;
    overflow: auto;
    border: 1px solid var(--color-border, var(--p-surface-300, #cbd5e1));
    border-radius: 0.625rem;
    background: var(--color-bg, #ffffff);
}

.p-datatable-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
}

.p-datatable-table > caption {
    caption-side: top;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-muted, var(--p-surface-500, #64748b));
    background: var(--color-bg, #ffffff);
}

/* ─── Header ─── */

.p-datatable-thead {
    text-align: left;
}

.p-datatable-header-cell {
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
    color: var(--color-text-muted, var(--p-surface-600, #475569));
    background: var(--color-bg-subtle, var(--p-surface-100, #f8fafc));
    border-bottom: 1px solid var(--color-border, var(--p-surface-300, #cbd5e1));
    white-space: nowrap;
    vertical-align: middle;
}

.p-datatable-header-cell-content {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.p-datatable-sortable-column {
    cursor: pointer;
    user-select: none;
}

.p-datatable-sortable-column:hover {
    color: var(--color-text, var(--p-surface-900, #0f172a));
    background: var(--color-info-bg, #f0f9ff);
}

.p-datatable-sortable-column:focus-visible {
    outline: 2px solid var(--color-primary, var(--p-primary-color, #2563eb));
    outline-offset: -2px;
}

.p-datatable-sorted-column,
.p-datatable-sorted-asc,
.p-datatable-sorted-desc {
    color: var(--color-primary, var(--p-primary-color, #2563eb));
}

.p-datatable-sort-icon {
    display: inline-flex;
    font-size: 0.75rem;
    line-height: 1;
    color: var(--color-text-muted, var(--p-surface-400, #94a3b8));
}

.p-datatable-sorted-column .p-datatable-sort-icon,
.p-datatable-sorted-asc .p-datatable-sort-icon,
.p-datatable-sorted-desc .p-datatable-sort-icon {
    color: var(--color-primary, var(--p-primary-color, #2563eb));
}

/* Sticky header: keep the header row visible above scrolling rows. The
   component already sets `position: sticky` inline on the cells; the
   background + z-index here stop rows from bleeding through. */
.p-datatable-sticky-header .p-datatable-thead .p-datatable-header-cell {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -1px 0 var(--color-border, var(--p-surface-300, #cbd5e1));
}

/* ─── Body ─── */

.p-datatable-tbody > .p-datatable-row > .p-datatable-cell,
.p-datatable-tbody > .p-datatable-row > td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border-subtle, #eef2f7);
    vertical-align: middle;
}

.p-datatable-tbody > .p-datatable-row:last-child > td {
    border-bottom: none;
}

/* Hover affordance (hover_rows=true adds p-datatable-hoverable-rows). */
.p-datatable-hoverable-rows .p-datatable-tbody > .p-datatable-row {
    transition: background-color 0.12s ease-in-out;
}

.p-datatable-hoverable-rows .p-datatable-tbody > .p-datatable-row:hover {
    background: var(--color-info-bg, #f0f9ff);
    cursor: pointer;
}

/* Striped rows (striped_rows=true adds p-datatable-striped). */
.p-datatable-striped .p-datatable-tbody > .p-datatable-row:nth-child(even) {
    background: var(--color-bg-subtle, var(--p-surface-100, #f8fafc));
}

.p-datatable-striped.p-datatable-hoverable-rows
    .p-datatable-tbody
    > .p-datatable-row:nth-child(even):hover {
    background: var(--color-info-bg, #f0f9ff);
}

/* Selected row. */
.p-datatable-tbody > .p-datatable-row.p-datatable-row-selected,
.p-datatable-tbody > .p-datatable-row.p-highlight {
    background: var(--color-info-bg, #eff6ff);
    box-shadow: inset 3px 0 0 var(--color-primary, var(--p-primary-color, #2563eb));
}

/* Grid lines (show_grid_lines=true adds p-datatable-gridlines). */
.p-datatable-gridlines .p-datatable-header-cell,
.p-datatable-gridlines .p-datatable-tbody > .p-datatable-row > td {
    border-right: 1px solid var(--color-border-subtle, #eef2f7);
}

.p-datatable-gridlines .p-datatable-header-cell:last-child,
.p-datatable-gridlines .p-datatable-tbody > .p-datatable-row > td:last-child {
    border-right: none;
}

/* Sizes. */
.p-datatable-sm .p-datatable-header-cell {
    padding: 0.4rem 0.6rem;
    font-size: 0.76rem;
}

.p-datatable-sm .p-datatable-tbody > .p-datatable-row > td {
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
}

.p-datatable-lg .p-datatable-header-cell {
    padding: 0.85rem 1rem;
}

.p-datatable-lg .p-datatable-tbody > .p-datatable-row > td {
    padding: 0.85rem 1rem;
}

/* Empty message. */
.p-datatable-emptymessage,
.p-datatable-tbody > .p-datatable-emptymessage > td {
    padding: 1.5rem 0.75rem;
    text-align: center;
    color: var(--color-text-muted, var(--p-surface-500, #64748b));
}

/* Keyboard navigation focused row mirrors the component's inline ring. */
.p-datatable-row-keyboard-focus {
    outline: none;
}

/* ─── Toolbars (preview / export) ──────────────────────────────────────────
   The component emits these with Tailwind utility classes that the dashboard
   does not process; the layout rules live here instead. */

.p-datatable-preview-toolbar,
.p-datatable-export-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.p-datatable-preview-toolbar button,
.p-datatable-export-toolbar button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border, var(--p-surface-300, #cbd5e1));
    border-radius: 0.5rem;
    background: var(--color-bg, #ffffff);
    color: var(--color-text, var(--p-surface-900, #0f172a));
    font-size: 0.82rem;
    cursor: pointer;
    transition: background-color 0.12s ease-in-out;
}

.p-datatable-preview-toolbar button:hover,
.p-datatable-export-toolbar button:hover {
    background: var(--color-bg-subtle, var(--p-surface-100, #f8fafc));
}

/* ─── Column-visibility menu ─── */

.p-datatable-column-visibility {
    position: relative;
    display: inline-flex;
}

.p-datatable-column-visibility-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border, var(--p-surface-300, #cbd5e1));
    border-radius: 0.5rem;
    background: var(--color-bg, #ffffff);
    color: var(--color-text, var(--p-surface-900, #0f172a));
    font-size: 0.82rem;
    cursor: pointer;
}

.p-datatable-column-visibility-toggle:hover {
    background: var(--color-bg-subtle, var(--p-surface-100, #f8fafc));
}

.p-datatable-column-visibility-panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 20;
    min-width: 12rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border, var(--p-surface-300, #cbd5e1));
    border-radius: 0.625rem;
    background: var(--color-bg, #ffffff);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.p-datatable-column-visibility-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.p-datatable-column-visibility-item:hover {
    background: var(--color-bg-subtle, var(--p-surface-100, #f8fafc));
}

/* ─── Built-in paginator ─── */

.p-paginator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem 0;
    color: var(--color-text-muted, var(--p-surface-600, #475569));
    font-size: 0.82rem;
}

.p-paginator-first,
.p-paginator-prev,
.p-paginator-next,
.p-paginator-last,
.p-paginator-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.45rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-text, var(--p-surface-700, #334155));
    font-size: 0.82rem;
    cursor: pointer;
    transition: background-color 0.12s ease-in-out;
}

.p-paginator-first:hover:not(:disabled),
.p-paginator-prev:hover:not(:disabled),
.p-paginator-next:hover:not(:disabled),
.p-paginator-last:hover:not(:disabled),
.p-paginator-page:hover:not(:disabled) {
    background: var(--color-bg-subtle, var(--p-surface-100, #f8fafc));
}

.p-paginator-first:disabled,
.p-paginator-prev:disabled,
.p-paginator-next:disabled,
.p-paginator-last:disabled {
    opacity: 0.45;
    cursor: default;
}

.p-paginator-page.p-highlight {
    background: var(--color-primary, var(--p-primary-color, #2563eb));
    color: var(--color-primary-contrast, #ffffff);
}

.p-paginator-current {
    margin-right: auto;
    color: var(--color-text-muted, var(--p-surface-500, #64748b));
}

.p-paginator-rpp-options {
    margin-left: 0.5rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--color-border, var(--p-surface-300, #cbd5e1));
    border-radius: 0.5rem;
    background: var(--color-bg, #ffffff);
    color: var(--color-text, var(--p-surface-900, #0f172a));
    font-size: 0.82rem;
}

/* ─── Group rows ─── */

.p-datatable-group-header-row > .p-datatable-group-cell {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    background: var(--color-bg-subtle, var(--p-surface-100, #f8fafc));
    border-bottom: 1px solid var(--color-border, var(--p-surface-300, #cbd5e1));
}

.p-datatable-group-count {
    color: var(--color-text-muted, var(--p-surface-500, #64748b));
    font-weight: 500;
    font-size: 0.8em;
}

/* ─── Filter row / search panel ─── */

.p-datatable-filter-row .p-datatable-header-cell {
    padding: 0.35rem 0.5rem;
    background: var(--color-bg, #ffffff);
}

.p-datatable-filter-container input,
.p-datatable-filter-controls input,
.p-datatable-filter-controls select {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border, var(--p-surface-300, #cbd5e1));
    border-radius: 0.5rem;
    background: var(--color-bg, #ffffff);
    color: var(--color-text, var(--p-surface-900, #0f172a));
    font-size: 0.82rem;
}

.p-datatable-filter-container input:focus-visible,
.p-datatable-filter-controls input:focus-visible,
.p-datatable-filter-controls select:focus-visible {
    outline: 2px solid var(--color-primary, var(--p-primary-color, #2563eb));
    outline-offset: 1px;
    border-color: var(--color-primary, var(--p-primary-color, #2563eb));
}

.p-datatable-filter-error,
.p-datatable-search-error {
    color: var(--color-error, #dc2626);
    font-size: 0.8rem;
}

/* ─── Footer ─── */

.p-datatable-tfoot .p-datatable-footer-cell {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    background: var(--color-bg-subtle, var(--p-surface-100, #f8fafc));
    border-top: 1px solid var(--color-border, var(--p-surface-300, #cbd5e1));
}