/* ============================================================
   SD-DATAGRID — Data Table Component
   BEM: sd-datagrid, sd-datagrid__{element}, sd-datagrid--{modifier}
   Depends on: tokens.css (design tokens)
   ============================================================ */

/* --- Base Container --- */
.sd-datagrid {
    position: relative;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    font-family: var(--font-sans, 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--leading-normal, 1.5);
    color: var(--text-primary, #0f172a);
}

/* --- Scrollable Wrapper --- */
.sd-datagrid__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong, #cbd5e1) transparent;
}

.sd-datagrid__scroll::-webkit-scrollbar {
    height: 6px;
}

.sd-datagrid__scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sd-datagrid__scroll::-webkit-scrollbar-thumb {
    background-color: var(--border-strong, #cbd5e1);
    border-radius: var(--radius-full, 9999px);
}

.sd-datagrid__scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-muted, #94a3b8);
}

/* --- Table Element --- */
.sd-datagrid__table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

/* --- Header --- */
.sd-datagrid__head {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 1020);
}

.sd-datagrid__header-row {
    background: var(--bg-muted, #f8fafc);
    border-bottom: 1px solid var(--border-default, #e2e8f0);
}

.sd-datagrid__header-cell {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    font-weight: var(--font-semibold, 600);
    font-size: var(--text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, 0.025em);
    color: var(--text-secondary, #475569);
    text-align: left;
    white-space: nowrap;
    user-select: none;
    border-bottom: 1px solid var(--border-default, #e2e8f0);
    background: var(--bg-muted, #f8fafc);
    transition: background var(--duration-fast, 0.1s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.sd-datagrid__header-cell:hover {
    background: var(--bg-surface-hover, #f5f5f5);
}

/* --- Sortable Header --- */
.sd-datagrid__header-cell--sortable {
    cursor: pointer;
}

.sd-datagrid__header-cell--sortable:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: -2px;
    border-radius: var(--radius-xs, 4px);
}

.sd-datagrid__sort-icon {
    display: inline-flex;
    margin-left: var(--space-1, 0.25rem);
    color: var(--text-muted, #94a3b8);
    transition: transform var(--duration-fast, 0.1s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
                color var(--duration-fast, 0.1s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.sd-datagrid__header-cell--sorted .sd-datagrid__sort-icon {
    color: var(--color-primary, #2563eb);
}

.sd-datagrid__header-cell--sorted-desc .sd-datagrid__sort-icon {
    transform: rotate(180deg);
}

/* --- Body --- */
.sd-datagrid__body {
    min-height: 100px;
}

.sd-datagrid__row {
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
    transition: background var(--duration-fast, 0.1s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.sd-datagrid__row:hover {
    background: var(--bg-surface-hover, #f5f5f5);
}

.sd-datagrid__row--selected {
    background: var(--color-primary-light, rgba(37, 99, 235, 0.08));
}

.sd-datagrid__row--selected:hover {
    background: var(--color-primary-light, rgba(37, 99, 235, 0.12));
}

.sd-datagrid__row--focused {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: -2px;
}

.sd-datagrid__row:last-child {
    border-bottom: none;
}

/* --- Cell --- */
.sd-datagrid__cell {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid var(--border-subtle, #f1f5f9);
}

.sd-datagrid__cell:last-child {
    border-right: none;
}

.sd-datagrid__cell--numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sd-datagrid__cell--truncate {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Checkbox Cell --- */
.sd-datagrid__cell--checkbox {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    text-align: center;
    padding: var(--space-3, 0.75rem) var(--space-2, 0.5rem);
}

.sd-datagrid__header-cell--checkbox {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    text-align: center;
    padding: var(--space-3, 0.75rem) var(--space-2, 0.5rem);
}

/* --- Actions Cell --- */
.sd-datagrid__cell--actions {
    width: 100px;
    min-width: 100px;
    text-align: center;
    padding: var(--space-2, 0.5rem);
}

.sd-datagrid__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1, 0.25rem);
    opacity: 0;
    transition: opacity var(--duration-fast, 0.1s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.sd-datagrid__row:hover .sd-datagrid__actions,
.sd-datagrid__row--focused .sd-datagrid__actions {
    opacity: 1;
}

.sd-datagrid__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    transition: background var(--duration-fast, 0.1s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
                color var(--duration-fast, 0.1s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.sd-datagrid__action-btn:hover {
    background: var(--bg-subtle, #f1f5f9);
    color: var(--text-primary, #0f172a);
}

.sd-datagrid__action-btn:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 1px;
}

.sd-datagrid__action-btn--danger:hover {
    background: var(--color-danger-light, rgba(239, 68, 68, 0.08));
    color: var(--color-danger, #ef4444);
}

/* ============================================================
   FILTERS
   ============================================================ */
.sd-datagrid__filters {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border-bottom: 1px solid var(--border-default, #e2e8f0);
    background: var(--bg-muted, #f8fafc);
    flex-wrap: wrap;
}

.sd-datagrid__filter-group {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.sd-datagrid__filter-label {
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-medium, 500);
    color: var(--text-secondary, #475569);
    white-space: nowrap;
}

.sd-datagrid__filter-input {
    width: 200px;
    padding: var(--space-1\.5, 0.375rem) var(--space-3, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    font-family: inherit;
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-surface, #ffffff);
    color: var(--text-primary, #0f172a);
    transition: border-color var(--duration-fast, 0.1s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
                box-shadow var(--duration-fast, 0.1s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.sd-datagrid__filter-input:focus {
    outline: none;
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--color-primary-light, rgba(37, 99, 235, 0.08));
}

.sd-datagrid__filter-input::placeholder {
    color: var(--text-muted, #94a3b8);
}

.sd-datagrid__filter-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--border-default, #e2e8f0);
    color: var(--text-secondary, #475569);
    cursor: pointer;
    font-size: var(--text-xs, 0.75rem);
    line-height: 1;
    transition: background var(--duration-fast, 0.1s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.sd-datagrid__filter-clear:hover {
    background: var(--border-strong, #cbd5e1);
}

/* ============================================================
   TOOLBAR
   ============================================================ */
.sd-datagrid__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border-bottom: 1px solid var(--border-default, #e2e8f0);
    background: var(--bg-muted, #f8fafc);
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
}

.sd-datagrid__toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
}

.sd-datagrid__toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
}

.sd-datagrid__selection-info {
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-secondary, #475569);
}

.sd-datagrid__selection-count {
    font-weight: var(--font-semibold, 600);
    color: var(--color-primary, #2563eb);
}

/* ============================================================
   PAGINATION
   ============================================================ */
.sd-datagrid__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border-top: 1px solid var(--border-default, #e2e8f0);
    background: var(--bg-muted, #f8fafc);
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
}

.sd-datagrid__pagination-info {
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-secondary, #475569);
}

.sd-datagrid__pagination {
    display: flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
}

.sd-datagrid__page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--space-2, 0.5rem);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-surface, #ffffff);
    color: var(--text-primary, #0f172a);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
    cursor: pointer;
    transition: background var(--duration-fast, 0.1s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
                border-color var(--duration-fast, 0.1s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
                color var(--duration-fast, 0.1s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.sd-datagrid__page-btn:hover:not(:disabled):not(.sd-datagrid__page-btn--active) {
    background: var(--bg-surface-hover, #f5f5f5);
    border-color: var(--border-strong, #cbd5e1);
}

.sd-datagrid__page-btn:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 1px;
}

.sd-datagrid__page-btn--active {
    background: var(--color-primary, #2563eb);
    border-color: var(--color-primary, #2563eb);
    color: var(--text-inverse, #ffffff);
}

.sd-datagrid__page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.sd-datagrid__page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    color: var(--text-muted, #94a3b8);
    font-size: var(--text-sm, 0.875rem);
}

.sd-datagrid__page-size {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.sd-datagrid__page-size-label {
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-secondary, #475569);
}

.sd-datagrid__page-size-select {
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-surface, #ffffff);
    color: var(--text-primary, #0f172a);
    font-size: var(--text-sm, 0.875rem);
    font-family: inherit;
    cursor: pointer;
}

.sd-datagrid__page-size-select:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 1px;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.sd-datagrid__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12, 3rem) var(--space-4, 1rem);
    text-align: center;
    color: var(--text-muted, #94a3b8);
}

.sd-datagrid__empty-icon {
    margin-bottom: var(--space-4, 1rem);
    font-size: 3rem;
    opacity: 0.5;
}

.sd-datagrid__empty-title {
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--font-semibold, 600);
    color: var(--text-secondary, #475569);
    margin-bottom: var(--space-2, 0.5rem);
}

.sd-datagrid__empty-text {
    font-size: var(--text-sm, 0.875rem);
    max-width: 300px;
}

/* ============================================================
   LOADING STATE
   ============================================================ */
.sd-datagrid--loading {
    pointer-events: none;
}

.sd-datagrid__loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    z-index: var(--z-fixed, 1030);
}

[data-theme="dark"] .sd-datagrid__loading-overlay {
    background: rgba(15, 17, 23, 0.8);
}

.sd-datagrid__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-default, #e2e8f0);
    border-top-color: var(--color-primary, #2563eb);
    border-radius: var(--radius-full, 9999px);
    animation: sd-datagrid-spin 0.6s linear infinite;
}

@keyframes sd-datagrid-spin {
    to {
        transform: rotate(360deg);
    }
}

.sd-datagrid__loading-text {
    margin-top: var(--space-3, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-secondary, #475569);
}

/* ============================================================
   ERROR STATE
   ============================================================ */
.sd-datagrid__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8, 2rem) var(--space-4, 1rem);
    text-align: center;
    background: var(--color-danger-light, rgba(239, 68, 68, 0.08));
    border-bottom: 1px solid var(--border-default, #e2e8f0);
}

.sd-datagrid__error-icon {
    margin-bottom: var(--space-3, 0.75rem);
    color: var(--color-danger, #ef4444);
}

.sd-datagrid__error-title {
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-semibold, 600);
    color: var(--text-primary, #0f172a);
    margin-bottom: var(--space-2, 0.5rem);
}

.sd-datagrid__error-message {
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-secondary, #475569);
    margin-bottom: var(--space-4, 1rem);
    max-width: 400px;
}

/* ============================================================
   COLUMN RESIZE
   ============================================================ */
.sd-datagrid__resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    background: transparent;
    transition: background var(--duration-fast, 0.1s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.sd-datagrid__resize-handle:hover,
.sd-datagrid__resize-handle--active {
    background: var(--color-primary, #2563eb);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .sd-datagrid__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .sd-datagrid__toolbar-left,
    .sd-datagrid__toolbar-right {
        width: 100%;
    }

    .sd-datagrid__footer {
        flex-direction: column;
        align-items: center;
        gap: var(--space-2, 0.5rem);
    }

    .sd-datagrid__pagination-info {
        text-align: center;
    }

    .sd-datagrid__filter-input {
        width: 100%;
    }

    .sd-datagrid__filter-group {
        flex: 1;
        min-width: 0;
    }

    .sd-datagrid__filters {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .sd-datagrid__header-cell,
    .sd-datagrid__cell {
        padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    }

    .sd-datagrid__pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .sd-datagrid__page-btn {
        min-width: 28px;
        height: 28px;
    }
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] .sd-datagrid {
    background: var(--bg-surface, #161822);
    border-color: var(--border-default, #2e3348);
}

[data-theme="dark"] .sd-datagrid__header-row {
    background: var(--bg-muted, #1a1d2e);
    border-bottom-color: var(--border-default, #2e3348);
}

[data-theme="dark"] .sd-datagrid__header-cell {
    background: var(--bg-muted, #1a1d2e);
    border-bottom-color: var(--border-default, #2e3348);
}

[data-theme="dark"] .sd-datagrid__header-cell:hover {
    background: var(--bg-surface-hover, #1e2030);
}

[data-theme="dark"] .sd-datagrid__row {
    border-bottom-color: var(--border-subtle, #252838);
}

[data-theme="dark"] .sd-datagrid__row:hover {
    background: var(--bg-surface-hover, #1e2030);
}

[data-theme="dark"] .sd-datagrid__row--selected {
    background: var(--color-primary-light, rgba(59, 130, 246, 0.12));
}

[data-theme="dark"] .sd-datagrid__row--selected:hover {
    background: var(--color-primary-light, rgba(59, 130, 246, 0.16));
}

[data-theme="dark"] .sd-datagrid__cell {
    border-right-color: var(--border-subtle, #252838);
}

[data-theme="dark"] .sd-datagrid__filters,
[data-theme="dark"] .sd-datagrid__toolbar,
[data-theme="dark"] .sd-datagrid__footer {
    background: var(--bg-muted, #1a1d2e);
    border-color: var(--border-default, #2e3348);
}

[data-theme="dark"] .sd-datagrid__filter-input {
    background: var(--bg-surface, #161822);
    border-color: var(--border-default, #2e3348);
    color: var(--text-primary, #e2e8f0);
}

[data-theme="dark"] .sd-datagrid__page-btn {
    background: var(--bg-surface, #161822);
    border-color: var(--border-default, #2e3348);
    color: var(--text-primary, #e2e8f0);
}

[data-theme="dark"] .sd-datagrid__page-btn:hover:not(:disabled):not(.sd-datagrid__page-btn--active) {
    background: var(--bg-surface-hover, #1e2030);
    border-color: var(--border-strong, #475569);
}

[data-theme="dark"] .sd-datagrid__page-size-select {
    background: var(--bg-surface, #161822);
    border-color: var(--border-default, #2e3348);
    color: var(--text-primary, #e2e8f0);
}

[data-theme="dark"] .sd-datagrid__loading-overlay {
    background: rgba(15, 17, 23, 0.8);
}

[data-theme="dark"] .sd-datagrid__spinner {
    border-color: var(--border-default, #2e3348);
    border-top-color: var(--color-primary, #3b82f6);
}

[data-theme="dark"] .sd-datagrid__error {
    background: var(--color-danger-light, rgba(248, 113, 113, 0.12));
    border-color: var(--border-default, #2e3348);
}

[data-theme="dark"] .sd-datagrid__actions {
    opacity: 1;
}