/* Universal interactive system styles */

/* ================================================================
   Premium scrollbars — applies globally with light/dark variants.
   WebKit (Chrome, Safari, Edge) + Firefox.
   ================================================================ */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(203 213 225) transparent;          /* slate-300 thumb */
}
.dark * {
    scrollbar-color: rgb(51 65 85) transparent;             /* slate-700 thumb */
}

/* WebKit-based — scrollbar track + thumb */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgb(203 213 225), rgb(148 163 184));   /* slate-300 → slate-400 */
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color 0.15s ease;
}
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgb(37 99 235), rgb(29 78 216));       /* brand-600 → brand-700 */
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:active {
    background: rgb(29 78 216);                                                /* brand-700 */
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* Dark mode WebKit */
.dark *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgb(51 65 85), rgb(30 41 59));         /* slate-700 → slate-800 */
    background-clip: padding-box;
}
.dark *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgb(96 165 250), rgb(59 130 246));     /* brand-400 → brand-500 */
    background-clip: padding-box;
}
.dark *::-webkit-scrollbar-thumb:active {
    background: rgb(59 130 246);                                               /* brand-500 */
    background-clip: padding-box;
}

/* Sidebar scrollbar — slightly thinner so it looks integrated */
aside ::-webkit-scrollbar { width: 6px; height: 6px; }
aside ::-webkit-scrollbar-thumb { border-width: 1px; }

/* Column resize handle */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    background: transparent;
    transition: background-color 0.15s ease;
    z-index: 10;
    user-select: none;
}
.col-resize-handle::before {
    content: '';
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 2px;
    right: 2px;
    background: rgb(203 213 225 / 0); /* slate-300 */
    border-radius: 1px;
    transition: background-color 0.15s ease;
}
.col-resize-handle:hover::before,
.col-resize-handle.active::before {
    background: rgb(37 99 235); /* brand-600 */
}
.dark .col-resize-handle:hover::before,
.dark .col-resize-handle.active::before {
    background: rgb(96 165 250); /* brand-400 */
}

/* Column sort indicator */
.col-sort-indicator {
    display: inline-flex;
    margin-left: 0.375rem;
    width: 0.875rem;
    height: 0.875rem;
    color: rgb(148 163 184); /* slate-400 */
    opacity: 0.5;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.col-sort-indicator svg { width: 100%; height: 100%; }
.col-sort-indicator.asc,
.col-sort-indicator.desc {
    opacity: 1;
    color: rgb(37 99 235);
}
.dark .col-sort-indicator.asc,
.dark .col-sort-indicator.desc {
    color: rgb(96 165 250);
}
th.sorted { background-color: rgb(239 246 255); } /* brand-50 */
.dark th.sorted { background-color: rgba(30 58 138 / 0.2); } /* brand-900/20 */

/* Sortable.js ghost / chosen states */
.sortable-ghost {
    opacity: 0.4;
    background-color: rgb(239 246 255);
}
.dark .sortable-ghost {
    background-color: rgba(30 58 138 / 0.3);
}
.sortable-chosen {
    cursor: grabbing !important;
    box-shadow: 0 10px 25px -5px rgb(37 99 235 / 0.25);
    transform: scale(1.02);
    transition: transform 0.15s ease;
}

/* Drag handle */
[data-sortable-handle] {
    cursor: grab;
    user-select: none;
    color: rgb(148 163 184);
    transition: color 0.15s ease;
}
[data-sortable-handle]:hover {
    color: rgb(37 99 235);
}
[data-sortable-handle]:active {
    cursor: grabbing;
}

/* Drag palette items (draggable templates) */
[data-drag-palette] > * {
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
[data-drag-palette] > *:hover {
    transform: translateX(2px);
}
[data-drag-palette] > *:active {
    cursor: grabbing;
}

/* Drop target */
[data-drag-target] {
    min-height: 4rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
[data-drag-target].sortable-drag-over,
[data-drag-target]:has([data-template].sortable-ghost) {
    background-color: rgb(239 246 255);
    border-color: rgb(37 99 235);
}

/* Premium breadcrumb */
.ep-breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
    background: linear-gradient(to right, rgb(248 250 252), rgb(241 245 249));
    border: 1px solid rgb(226 232 240);
}
.dark .ep-breadcrumb {
    background: linear-gradient(to right, rgb(15 23 42 / 0.4), rgb(30 41 59 / 0.4));
    border-color: rgb(30 41 59);
}
.ep-breadcrumb a, .ep-breadcrumb span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.375rem;
    color: rgb(100 116 139);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.dark .ep-breadcrumb a, .dark .ep-breadcrumb span {
    color: rgb(148 163 184);
}
.ep-breadcrumb a:hover {
    background-color: rgb(255 255 255);
    color: rgb(29 78 216);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.dark .ep-breadcrumb a:hover {
    background-color: rgb(30 41 59);
    color: rgb(147 197 253);
}
.ep-breadcrumb-current {
    font-weight: 500;
    color: rgb(15 23 42) !important;
    background: rgb(255 255 255);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.dark .ep-breadcrumb-current {
    color: rgb(241 245 249) !important;
    background: rgb(30 41 59);
}
.ep-breadcrumb-sep {
    color: rgb(203 213 225);
    margin: 0 0.125rem;
}
.dark .ep-breadcrumb-sep {
    color: rgb(51 65 85);
}

    .ep-module-title {
        background: linear-gradient(90deg, #0f172a 0%, #0f172a 55%, #475569 100%);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -0.015em;
    }
    .dark .ep-module-title {
        background: linear-gradient(90deg, #f1f5f9 0%, #f1f5f9 55%, #94a3b8 100%);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .ep-module-header__shimmer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgb(var(--brand-500-rgb, 99 102 241) / 0.9) 25%,
            rgb(168 85 247 / 0.9) 50%,
            rgb(6 182 212 / 0.9) 75%,
            transparent 100%
        );
        background-size: 200% 100%;
        animation: ep-header-shimmer 3.5s linear infinite;
        opacity: 0.85;
        pointer-events: none;
    }

    @keyframes ep-header-shimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    @media (prefers-reduced-motion: reduce) {
        .ep-module-header__shimmer { animation: none; }
    }