/*
 * AIM Unified Table System
 * Created: March 9, 2026
 * Location: AIM.Shared.UI — accessible to all RCL modules
 *
 * Visual benchmark: Estates Manager table (.sites-table in estates-consolidated.css)
 * Light grey header, sticky, scrollable, striped, hover, sort arrows, fixed layout
 *
 * Usage: Add modifier classes to .aim-table-wrapper to opt in to features.
 * Height budget: Set on your component container, not on these classes.
 *
 * HTML structure:
 *   div.aim-table-wrapper[.aim-table--scrollable][.aim-table--hover][...]
 *     div.aim-table-toolbar           (optional: filters, search, buttons)
 *     div.aim-table-scroll            (scroll container — scrollable tables only)
 *       table.aim-table
 *         colgroup > col              (when using aim-table--fixed)
 *         thead > tr > th.aim-th
 *         tbody > tr.aim-tr > td.aim-td
 *     div.aim-table-footer            (optional: pagination)
 */

/* ==========================================================================
 * LOCAL TOKENS — override on your wrapper to customise per-component
 * ========================================================================== */

.aim-table-wrapper {
    --aim-table-header-bg: var(--surface-base);
    --aim-table-header-color: var(--color-text-primary, #1A1F2E);
    --aim-table-header-border: var(--color-neutral-light, #c0c0c0);
    --aim-table-row-hover: var(--color-info-lightest, rgba(14, 165, 233, 0.08));
    --aim-table-stripe-bg: var(--surface-base);
    --aim-table-cell-border: var(--color-border-light, #F1F5F9);
    --aim-table-cell-padding: 0.5rem 0.625rem;
    --aim-table-cell-padding-compact: 0.375rem 0.5rem;
    --aim-table-row-height: 40px;
}

/* ==========================================================================
 * 1. WRAPPER — outer container
 * ========================================================================== */

.aim-table-wrapper {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border, #CBD5E1);
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.10));
    background: var(--surface-raised);
    overflow: hidden;
}

/* ==========================================================================
 * 2. TOOLBAR — filters, search, action buttons (above scroll area)
 * ========================================================================== */

.aim-table-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--color-border, #CBD5E1);
    background: var(--surface-base);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.aim-table-toolbar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.aim-table-toolbar__search {
    position: relative;
    flex: 0 1 220px;
    min-width: 140px;
}

.aim-table-toolbar__search input {
    width: 100%;
    padding: 0.375rem 0.625rem;
    font-size: var(--font-size-sm, 0.875rem);
    border: 1px solid var(--color-border, #CBD5E1);
    border-radius: var(--radius-sm, 4px);
    background: var(--surface-raised);
    color: var(--color-text-primary, #1A1F2E);
}

.aim-table-toolbar__search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--primary-alpha-10, rgba(30, 58, 95, 0.1));
}

.aim-table-toolbar__filter {
    padding: 0.375rem 0.625rem;
    font-size: var(--font-size-sm, 0.875rem);
    border: 1px solid var(--color-border, #CBD5E1);
    border-radius: var(--radius-sm, 4px);
    background: var(--surface-raised);
    color: var(--color-text-primary, #1A1F2E);
    appearance: auto;
}

/* ==========================================================================
 * 3. SCROLL CONTAINER — overflow region
 * ========================================================================== */

.aim-table-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
 * 4. TABLE — base element
 * ========================================================================== */

.aim-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-primary, #1A1F2E);
    background: var(--surface-raised);
}

/* ==========================================================================
 * 5. HEADER CELLS — light grey by default (matches Estates Manager)
 * ========================================================================== */

.aim-th {
    padding: var(--aim-table-cell-padding);
    text-align: left;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    background: var(--aim-table-header-bg);
    color: var(--aim-table-header-color);
    border-bottom: 1px solid var(--aim-table-header-border);
    border-right: 1px solid var(--aim-table-header-border);
}

.aim-th:last-child {
    border-right: none;
}

/* ==========================================================================
 * 6. BODY ROWS & CELLS
 * ========================================================================== */

.aim-tr {
    height: var(--aim-table-row-height);
    min-height: var(--aim-table-row-height);
    max-height: var(--aim-table-row-height);
}

.aim-td {
    padding: var(--aim-table-cell-padding);
    border-bottom: 1px solid var(--aim-table-cell-border);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
    font-size: 0.875rem;
}

/* Cell that allows text wrapping (descriptions, names) */
.aim-td--wrap {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}

/* Numeric cell — right-aligned */
.aim-td--numeric,
.aim-th--numeric {
    text-align: right;
}

/* Center-aligned cell (actions, checkboxes) */
.aim-td--center,
.aim-th--center {
    text-align: center;
}

/* Clickable row */
.aim-tr--clickable {
    cursor: pointer;
}

/* Selected row */
.aim-tr--selected .aim-td {
    background-color: rgba(255, 87, 34, 0.15);
}

.aim-tr--selected {
    border-left: 4px solid var(--color-primary);
}

/* ==========================================================================
 * 7. EMPTY & LOADING STATES
 * ========================================================================== */

.aim-table-empty {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-secondary, #64748B);
    font-style: italic;
}

.aim-table-loading {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-secondary, #64748B);
}

/* ==========================================================================
 * 8. PAGINATION FOOTER — below scroll area
 * ========================================================================== */

.aim-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.875rem;
    border-top: 1px solid var(--color-border, #CBD5E1);
    background: var(--surface-base);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-secondary, #64748B);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.aim-table-footer__info {
    flex: 1;
    font-weight: 500;
}

.aim-table-footer__pages {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.aim-table-footer__page-btn {
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-xs, 0.75rem);
    border: 1px solid var(--color-border, #CBD5E1);
    background: var(--surface-raised);
    color: var(--color-text-primary, #1A1F2E);
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aim-table-footer__page-btn:hover:not(:disabled) {
    background: var(--color-primary);
    color: var(--color-white, #ffffff);
    border-color: var(--color-primary);
}

.aim-table-footer__page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.aim-table-footer__page-btn--active {
    background: var(--color-primary);
    color: var(--color-white, #ffffff);
    border-color: var(--color-primary);
    font-weight: 700;
}

.aim-table-footer__size-select {
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-xs, 0.75rem);
    border: 1px solid var(--color-border, #CBD5E1);
    border-radius: var(--radius-sm, 4px);
    background: var(--surface-raised);
    color: var(--color-text-primary, #1A1F2E);
    cursor: pointer;
}

/* ==========================================================================
 * MODIFIERS — opt-in features applied to .aim-table-wrapper
 * ========================================================================== */

/* --scrollable: sticky headers + scroll container */
.aim-table--scrollable .aim-th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --striped: zebra rows */
.aim-table--striped .aim-tr:nth-child(odd) .aim-td {
    background-color: var(--aim-table-stripe-bg);
}

/* --hover: row hover highlight */
.aim-table--hover .aim-tr:hover .aim-td {
    background-color: var(--aim-table-row-hover);
}

/* --compact: tighter padding */
.aim-table--compact .aim-th,
.aim-table--compact .aim-td {
    padding: var(--aim-table-cell-padding-compact);
}

.aim-table--compact .aim-tr {
    height: 32px;
    min-height: 32px;
    max-height: 32px;
}

/* --bordered: borders on all cell sides */
.aim-table--bordered .aim-td {
    border-right: 1px solid var(--aim-table-cell-border);
}

.aim-table--bordered .aim-td:last-child {
    border-right: none;
}

/* --fixed: table-layout fixed (requires <colgroup>) */
.aim-table--fixed .aim-table {
    table-layout: fixed;
}

/* --dark-header: dark navy header (for admin tables) */
.aim-table--dark-header {
    --aim-table-header-bg: var(--color-bg-header, #1a2e50);
    --aim-table-header-color: var(--color-text-on-primary, #ffffff);
    --aim-table-header-border: rgba(255, 255, 255, 0.15);
}

.aim-table--dark-header .aim-th {
    letter-spacing: 0.05em;
}

/* ==========================================================================
 * SORTABLE — sort indicators on header cells
 * ========================================================================== */

.aim-table--sortable .aim-th {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.5rem;
}

.aim-table--sortable .aim-th:hover {
    background: color-mix(in srgb, var(--aim-table-header-bg) 85%, var(--color-black, #000));
}

/* Sort arrow container */
.aim-th__sort-arrow {
    font-size: 10px;
    color: var(--color-neutral-medium, #8c8c8c);
    margin-left: 0.25rem;
}

.aim-th__sort-arrow.active {
    color: var(--color-primary);
}

/* Dark header sort arrow — light colour */
.aim-table--dark-header .aim-th__sort-arrow.active {
    color: var(--color-white, #ffffff);
}

/* Column header inner wrapper (for flex layout with sort arrow) */
.aim-th__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
}

.aim-th__text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Non-sortable column (no cursor change) */
.aim-th--no-sort {
    cursor: default;
}

.aim-table--sortable .aim-th--no-sort:hover {
    background: var(--aim-table-header-bg);
}

/* ==========================================================================
 * FILTER ICONS — per-column filter indicators
 * ========================================================================== */

.aim-th__filter-icon {
    font-size: 10px;
    color: var(--color-neutral-medium, #8c8c8c);
    cursor: pointer;
}

.aim-th__filter-icon.filtered {
    color: var(--color-primary);
}

.aim-table--dark-header .aim-th__filter-icon.filtered {
    color: var(--color-info-lightest, #e0f2fe);
}

/* ==========================================================================
 * RESPONSIVE — mobile card layout
 * ========================================================================== */

@media (max-width: 767px) {
    .aim-table--responsive thead {
        display: none;
    }

    .aim-table--responsive .aim-tr {
        display: block;
        height: auto;
        min-height: auto;
        max-height: none;
        border: 1px solid var(--color-border, #CBD5E1);
        border-radius: var(--radius-md, 6px);
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        background: var(--surface-raised);
    }

    .aim-table--responsive .aim-td {
        display: block;
        max-width: none;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
        border-bottom: none;
        padding: 0.25rem 0;
        position: relative;
        padding-left: 45%;
    }

    .aim-table--responsive .aim-td::before {
        content: attr(data-label) ": ";
        position: absolute;
        left: 0;
        width: 40%;
        font-weight: 600;
        font-size: var(--font-size-xs, 0.75rem);
        color: var(--color-text-secondary, #64748B);
    }
}

/* ==========================================================================
 * LOADING OVERLAY — applied to wrapper
 * ========================================================================== */

.aim-table-wrapper--loading {
    position: relative;
    pointer-events: none;
}

.aim-table-wrapper--loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--color-surface, #fff) 70%, transparent);
    z-index: 3;
}

/* ==========================================================================
 * ACCESSIBILITY
 * ========================================================================== */

.aim-th:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

@media (prefers-contrast: high) {
    .aim-th,
    .aim-td {
        border-width: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aim-th,
    .aim-td,
    .aim-table-footer__page-btn {
        transition: none;
    }
}