/* Inline Table Sort - Drag Handle Styles */

.fi-inline-sort-handle {
    cursor: grab;
    opacity: 0.4;
    transition: opacity 150ms ease;
    margin-inline-start: 8px;
    border: none;
    outline: none;
    box-shadow: none;
}

.fi-inline-sort-handle:hover {
    opacity: 1;
}

.fi-inline-sort-handle:active {
    cursor: grabbing;
}

.fi-inline-sort-handle-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Uses --row-indent (set on the row) so nested rows indent the handle correctly.
       Falls back to 0.5rem for root rows where --row-indent is unset. */
    padding-inline-start: calc(0.5rem + var(--row-indent, 0rem));
    padding-inline-end: 0.75rem;
}

.fi-ta-div-row.fi-ta-row-nestable .fi-inline-sort-handle-cell {
    width: 53px;
    min-width: 53px;
    height: 53px;
    min-height: 53px;
    padding: 0;
    margin-inline-start: var(--row-indent, 0px);
}

.fi-ta-div-row.fi-ta-row-nestable .fi-inline-sort-handle-cell .fi-inline-sort-handle {
    margin-inline-start: 0;
}

/* Ghost element during drag */
.fi-ta-row.sortable-ghost {
    opacity: 0.5;
    background-color: var(--color-primary-50);
}

:is(.dark .fi-ta-row.sortable-ghost) {
    background-color: color-mix(in oklab, var(--color-primary-950) 30%, transparent);
}

/* Chosen element during drag */
.fi-ta-row.sortable-chosen {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Nestable drag states */
.fi-nestable-dragging {
    opacity: 0.3;
}

.fi-nestable-drop-inside {
    outline: 2px solid rgb(59 130 246);
    outline-offset: -2px;
    background-color: rgb(59 130 246 / 0.06) !important;
}

:is(.dark) .fi-nestable-drop-inside {
    background-color: rgb(59 130 246 / 0.12) !important;
}

@keyframes fi-ghost-lift {
    from {
        opacity: 0;
        transform: scale(0.99) rotate(0deg);
        box-shadow: 0 2px 4px rgb(0 0 0 / 0.08);
    }
    to {
        opacity: 1;
        transform: scale(1.01) rotate(-0.4deg);
        box-shadow: 0 8px 20px rgb(0 0 0 / 0.15), 0 4px 8px rgb(0 0 0 / 0.1);
    }
}

.fi-nestable-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    background: rgb(59 130 246 / 0.10);
    border: 2px solid rgb(59 130 246 / 0.5);
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.fi-nestable-ghost:not(.fi-nestable-ghost-child) {
    animation: fi-ghost-lift 140ms cubic-bezier(0.2, 0, 0, 1) forwards;
}

/* Smooth horizontal slide when depth changes (class added after initial placement) */
.fi-ghost-live .fi-nestable-ghost {
    transition: left 70ms ease-out, width 70ms ease-out;
}

:is(.dark) .fi-nestable-ghost {
    background: rgb(59 130 246 / 0.18);
    border-color: rgb(59 130 246 / 0.6);
}

@keyframes fi-placeholder-in {
    from { opacity: 0; transform: scaleY(0.6); transform-origin: top; }
    to   { opacity: 1; transform: scaleY(1); }
}

@keyframes fi-drop-land {
    from { box-shadow: 0 0 0 3px rgb(59 130 246 / 0.4); }
    to   { box-shadow: none; }
}

.fi-drop-landed {
    animation: fi-drop-land 500ms ease-out;
}

.fi-nestable-placeholder {
    grid-column: 1 / -1;
    pointer-events: none;
    border: 2px dashed rgb(59 130 246 / 0.5);
    background: transparent;
    box-sizing: border-box;
    border-radius: 0.25rem;
    animation: fi-placeholder-in 120ms ease-out;
}

:is(.dark) .fi-nestable-placeholder {
    background: transparent;
    border-color: rgb(59 130 246 / 0.6);
}

/* Flat-table drag ghost: outline-only to avoid stacked blue fill artifacts with placeholder. */
.fi-flat-ghost {
    box-sizing: border-box;
    background: rgb(59 130 246 / 0.04);
    border: 2px solid rgb(59 130 246 / 0.65);
    box-shadow: inset 0 0 0 1px rgb(59 130 246 / 0.25);
}

:is(.dark) .fi-flat-ghost {
    background: rgb(59 130 246 / 0.08);
    border-color: rgb(59 130 246 / 0.75);
    box-shadow: inset 0 0 0 1px rgb(59 130 246 / 0.35);
}

/* Nestable depth indentation for content layout */
.fi-ta-record[data-depth="1"] {
    padding-inline-start: 1.5rem;
}

.fi-ta-record[data-depth="2"] {
    padding-inline-start: 3rem;
}

.fi-ta-record[data-depth="3"] {
    padding-inline-start: 4.5rem;
}

/* Nestable row connector lines */
.fi-ta-row-nestable[data-depth]:not([data-depth="0"]) > :first-child {
    position: relative;
}

.fi-ta-row-nestable[data-depth]:not([data-depth="0"]) > :first-child::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 50%;
    width: 0.5rem;
    height: 1px;
    background-color: var(--color-gray-300);
}

:is(.dark .fi-ta-row-nestable[data-depth]:not([data-depth="0"]) > :first-child::before) {
    background-color: var(--color-gray-600);
}

/* Div-table tree connector lines.
   Uses two background-image layers on the handle cell — no ::before needed
   (avoids flex-item displacement issues):
     Layer 1: 1px × 1.5rem horizontal connector tick, positioned at the last
              vertical guide line and vertically centered.
     Layer 2: repeating vertical guide lines every 1.5rem, clipped to indent width. */
.fi-ta-div-row[data-depth]:not([data-depth="0"]) .fi-inline-sort-handle-cell {
    background-image:
        /* Horizontal connector: solid 1px line from last guide to handle */
        linear-gradient(to right, var(--color-gray-300), var(--color-gray-300)),
        /* Vertical guide lines at 0.5rem within every 1.5rem period */
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc(0.5rem - 0.5px),
            var(--color-gray-300) calc(0.5rem - 0.5px),
            var(--color-gray-300) calc(0.5rem + 0.5px),
            transparent calc(0.5rem + 0.5px),
            transparent 1.5rem
        );
    background-size:
        1.5rem 1px,
        var(--row-indent, 1.5rem) 100%;
    background-position:
        calc(var(--row-indent, 1.5rem) - 1rem) 50%,
        0 0;
    background-repeat: no-repeat, no-repeat;
}

:is(.dark) .fi-ta-div-row[data-depth]:not([data-depth="0"]) .fi-inline-sort-handle-cell {
    background-image:
        linear-gradient(to right, var(--color-gray-600), var(--color-gray-600)),
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc(0.5rem - 0.5px),
            var(--color-gray-600) calc(0.5rem - 0.5px),
            var(--color-gray-600) calc(0.5rem + 0.5px),
            transparent calc(0.5rem + 0.5px),
            transparent 1.5rem
        );
    background-size:
        1.5rem 1px,
        var(--row-indent, 1.5rem) 100%;
    background-position:
        calc(var(--row-indent, 1.5rem) - 1rem) 50%,
        0 0;
    background-repeat: no-repeat, no-repeat;
}

/* Div-based table grid layout */
.fi-ta-div-table {
    display: grid;
    grid-template-columns: var(--fi-ta-grid-columns);
    width: 100%;
}

.fi-ta-div-thead {
    display: contents;
}

.fi-ta-div-tbody {
    display: contents;
}

.fi-ta-div-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
}

/* Header bottom border */
.fi-ta-div-thead .fi-ta-div-row:last-child {
    border-bottom: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
}

/* Handler left border — absolutely positioned relative to the row at x=--row-indent.
   width: 0 keeps it out of the layout; the border-inline-start is the only visual. */
.fi-inline-sort-handle-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--row-indent, 0px);
    width: 0;
    border-inline-start: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
    pointer-events: none;
    z-index: 1;
}

/* All tbody rows: right + bottom via ::after; top only on the very first row */
.fi-ta-div-tbody > .fi-ta-div-row {
    position: relative;
}

.fi-ta-div-tbody > .fi-ta-div-row:not(.fi-ta-row-nestable)::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Start at the indent so borders only cover the data area, not the transparent sticking-out area */
    left: var(--row-indent, 0px);
    border-inline-end: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
    border-bottom: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
    pointer-events: none;
}

.fi-ta-div-tbody > .fi-ta-div-row:not(.fi-ta-row-nestable):first-child::after {
    border-top: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
}

/* Bottom border on the transparent sticking-out area for indented rows */
.fi-ta-div-tbody > .fi-ta-div-row:not(.fi-ta-row-nestable)[style*="--row-indent"]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--row-indent);
    border-bottom: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
    pointer-events: none;
}

/* Suppress any divide-y element-level top borders Filament may apply */
.fi-ta-div-tbody > .fi-ta-div-row + .fi-ta-div-row {
    border-top: none;
}

/* Nestable tree container: remove default table ring/border so we can draw custom borders. */
.fi-ta-ctn:has(.fi-ta-div-table) {
    /* Resolve the div-table surface + border tokens to Filament's real Tailwind v4
       theme colors so the table follows the active (custom) theme in both light and
       dark mode, instead of the hardcoded fallbacks used throughout this file. */
    --fi-body-bg: var(--color-white);
    --fi-border-color: var(--color-gray-200);

    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
    clip-path: none;
}

:is(.dark) .fi-ta-ctn:has(.fi-ta-div-table) {
    --fi-body-bg: var(--color-gray-900);
    --fi-border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}

/* Custom LRT border for the search/header toolbar strip only. */
.fi-ta-ctn:has(.fi-ta-div-table) .fi-ta-header-toolbar {
    border-top: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
    border-inline-start: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
    border-inline-end: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
    border-bottom: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

/* Left + right border on the thead row */
.fi-ta-div-thead .fi-ta-div-row {
    border-inline-start: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
    border-inline-end: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
}

/* Left + right border on the selection indicator bar */
.fi-ta-ctn:has(.fi-ta-div-table) .fi-ta-selection-indicator {
    border-inline-start: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
    border-inline-end: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
}


.fi-ta-div-table {
    background: transparent;
}

.fi-ta-div-table .fi-ta-div-row {
    background: var(--fi-body-bg, white);
}

:is(.dark) .fi-ta-div-table .fi-ta-div-row {
    background: var(--fi-body-bg, oklch(0.23 0.02 264));
}

/* Nestable tree row indent — gradient creates the transparent sticking-out area.
   Left border is drawn by .fi-inline-sort-handle-inner at x=--row-indent.
   Right + bottom borders come from the row ::after. */
.fi-ta-div-tbody > .fi-ta-div-row[style*="--row-indent"] {
    background: linear-gradient(
        to right,
        transparent var(--row-indent),
        var(--fi-body-bg, white) var(--row-indent)
    );
}

:is(.dark) .fi-ta-div-tbody > .fi-ta-div-row[style*="--row-indent"] {
    background: linear-gradient(
        to right,
        transparent var(--row-indent),
        var(--fi-body-bg, oklch(0.23 0.02 264)) var(--row-indent)
    );
}


/* Group header spans full width */
.fi-ta-div-row.fi-ta-group-header-row {
    display: block;
    grid-column: 1 / -1;
}

/* Nestable row borders driven by depth-neighbor state classes.
   Item area (tbody rows) gets no container left border; header/search keeps it. */
.fi-ta-div-tbody > .fi-ta-div-row.fi-ta-row-nestable {
    position: relative;
}

.fi-ta-div-tbody > .fi-ta-div-row.fi-ta-row-nestable::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--row-indent, 0px);
    border-inline-start: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
    pointer-events: none;
}

.fi-ta-div-tbody > .fi-ta-div-row.fi-ta-row-nestable::after {
    content: '';
    position: absolute;
    inset: 0;
    left: var(--row-indent, 0px);
    border-inline-end: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
    pointer-events: none;
}

.fi-ta-div-tbody > .fi-ta-div-row.fi-ta-row-nestable.fi-nest-border-top::after {
    border-top: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
}

.fi-ta-div-tbody > .fi-ta-div-row.fi-ta-row-nestable.fi-nest-border-bottom::after {
    border-bottom: 1px solid var(--fi-border-color, oklch(0.92 0.004 286.32));
}

.fi-ta-div-tbody > .fi-ta-div-row.fi-ta-row-nestable.fi-nest-border-left-only::after {
    border-top: none;
    border-bottom: none;
}

/* Fine-tune gap between Visibility and Last modified at columns. */
.fi-ta-header-cell-is-visible,
.fi-ta-cell-is-visible {
    justify-self: end;
    text-align: right;
    position: static;
    left: auto;
    padding-inline-end: 0;
}

.fi-ta-header-cell-updated-at,
.fi-ta-cell-updated-at {
    justify-self: start;
    text-align: left;
    position: static;
    left: auto;
    padding-inline-start: 24px;
}

/* Keep a fixed 24px gap between checkbox and Name column. */
.fi-ta-div-table .fi-ta-selection-cell {
    padding-inline-end: 24px;
}

/* Let Name, Parent and Website consume remaining space naturally (no manual offsets). */
.fi-ta-header-cell-name,
.fi-ta-cell-name,
.fi-ta-header-cell-parent-name,
.fi-ta-cell-parent-name,
.fi-ta-header-cell-website,
.fi-ta-cell-website {
    position: static;
    left: auto;
    min-width: 0;
}