/**
 * Components Layer - Tool Chest Template (ITCSS Layer 6)
 *
 * Purpose: Tool chest template tree component styling
 * Specificity: Class selectors
 *
 * This file contains all styling for the tool chest template tree component,
 * including sticky headers, dark mode support, responsive behavior, and animations.
 *
 * Migrated from: resources/css/toolchest/toolchest.css
 * Integration: Loaded via main.css ITCSS architecture
 */

.tool-chest-template-tree .animate-pulse-border {
    animation: pulse-border 1.5s infinite ease-in-out;
}

.tool-chest-template-tree .skeleton-item {
    background-color: #f3f4f6;
    position: relative;
    overflow: hidden;
}

.tool-chest-template-tree .skeleton-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 1.5s infinite;
}

[data-theme="dark"] .tool-chest-template-tree .skeleton-item {
    background-color: #2d3748;
}

[data-theme="dark"] .tool-chest-template-tree .border-gray-100 {
    border-color: rgba(255, 255, 255, 0.1);
}

.tool-chest-template-tree .same-target {
    @apply bg-red-500;
}

/* ===== VERTICAL OVERFLOW FIX: Enable viewport scroll container ===== */
/*
 * SOLUTION: Enable overflow: visible to allow sticky headers to work properly.
 * This allows sticky table headers to escape their containers and remain visible during scroll.
 * Modal positioning fixes (below) counteract overflow issues specifically when modals are open.
 *
 * Without this, sticky headers get clipped by their parent containers.
 * With this + modal fixes, we get both working sticky headers AND proper modal behavior.
 */

body:has(.tool-chest-template-tree) .fi-layout,
body:has(.tool-chest-template-tree) .fi-main-ctn,
body:has(.tool-chest-template-tree) .fi-main,
body:has(.tool-chest-template-tree) .fi-page,
body:has(.tool-chest-template-tree) .fi-page > section {
    height: auto !important;
    overflow: visible !important;
}

body:has(.tool-chest-template-tree) {
    overflow-y: auto !important;
}

/* ===== MODAL FIX: Restore proper positioning when modals are open ===== */
/* When modals are open, temporarily restore layout constraints for proper modal positioning */
body:has(.tool-chest-template-tree):has(.fi-modal-open) .fi-layout,
body:has(.tool-chest-template-tree):has(.fi-modal-open) .fi-main-ctn {
    height: 100vh !important;
    overflow: hidden !important;
}

/* Restore overflow constraints on scroll containers when modal opens */
/* Only handle overflow - let topbar CSS handle positioning and scrollbar compensation */
body:has(.tool-chest-template-tree):has(.fi-modal-open) .fi-main,
body:has(.tool-chest-template-tree):has(.fi-modal-open) .fi-page,
body:has(.tool-chest-template-tree):has(.fi-modal-open) .fi-page > section {
    overflow: hidden !important;
}

/* Ensure modal overlay covers the full viewport */
body:has(.tool-chest-template-tree) .fi-modal-close-overlay {
    position: fixed !important;
    inset: 0 !important;
    height: 100vh !important;
    width: 100vw !important;
}

/* Ensure modal is properly centered in viewport */
body:has(.tool-chest-template-tree) .fi-modal.fi-modal-open {
    position: fixed !important;
    inset: 0 !important;
    height: 100vh !important; /* Force full viewport height */
    width: 100vw !important; /* Force full viewport width */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 40 !important;
}

/* Ensure modal wrapper div also fills viewport */
body:has(.tool-chest-template-tree) .fi-modal.fi-modal-open > div {
    height: 100vh !important;
    width: 100vw !important;
}

/* Force modal window and wrapper divs to be visible */
/* Modals rendered inside Livewire components in toolbar may have display: none */
body:has(.tool-chest-template-tree) .fi-modal.fi-modal-open .fi-modal-window,
body:has(.tool-chest-template-tree) .fi-modal.fi-modal-open > div,
body:has(.tool-chest-template-tree) .fi-modal.fi-modal-open > div > div {
    display: block !important;
}

/* ===== COLUMN ALIGNMENT: Fixed layout for consistent column widths ===== */
/*
 * NOTE: table-layout: fixed is now set globally above (line 290)
 * This ensures column widths defined in Blade templates are strictly enforced
 * Removed responsive table-layout switching - fixed layout works best for nested tables
 */

/* Remove padding from colspan cells to allow nested tables to align perfectly */
.tool-chest-template-tree td[colspan] {
    padding: 0 !important;
}

/* ===== TABLE ROWS: Remove borders completely ===== */
/* Override both border-style and border-width from Tailwind Preflight */
.tool-chest-template-tree tbody tr {
    border-top: 0 none !important;
    border-bottom: 0 none !important;
}

/* Also target cells in case borders are applied there */
.tool-chest-template-tree tbody tr td,
.tool-chest-template-tree tbody tr th {
    border-top: 0 none !important;
    border-bottom: 0 none !important;
}

/* ===== THEME CONSISTENCY: Apply clean table styling ===== */

/* Apply theme's borderless, clean table styling */
.tool-chest-template-tree .fi-ta-ctn,
.tool-chest-template-tree .fi-ta-wrapper {
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
}

/* Table content needs theme-aware backgrounds */
[data-theme="light"] .tool-chest-template-tree .fi-ta-content {
    background-color: white;
}

[data-theme="dark"] .tool-chest-template-tree .fi-ta-content {
    background-color: var(--theme-bg-primary);
}

/* Table body and rows need theme-aware backgrounds */
[data-theme="light"] .tool-chest-template-tree tbody {
    background-color: white;
}

[data-theme="dark"] .tool-chest-template-tree tbody {
    background-color: var(--theme-bg-primary);
}

/* Table rows - override Filament's default row backgrounds */
[data-theme="light"] .tool-chest-template-tree tbody tr {
    background-color: white !important;
}

[data-theme="dark"] .tool-chest-template-tree tbody tr {
    background-color: var(--theme-bg-primary) !important;
}

/* Striped rows (even rows) */
[data-theme="light"] .tool-chest-template-tree tbody tr:nth-child(even),
[data-theme="light"] .tool-chest-template-tree tbody tr.bg-gray-50 {
    background-color: rgb(249, 250, 251) !important;
}

[data-theme="dark"] .tool-chest-template-tree tbody tr:nth-child(even),
[data-theme="dark"] .tool-chest-template-tree tbody tr.bg-gray-50 {
    background-color: #262626 !important;
}

/* Remove dividers for clean look (consistent with theme) */
.tool-chest-template-tree .fi-ta .fi-ta-header-ctn.divide-y,
.tool-chest-template-tree .fi-ta .fi-ta-header-ctn > *,
.tool-chest-template-tree .fi-ta thead,
.tool-chest-template-tree .fi-ta thead tr,
.tool-chest-template-tree .fi-ta tbody {
    border-top: none;
    border-bottom: none;
}

/* Remove divide-y borders from container - this is the main source of the toolbar border */
.tool-chest-template-tree .fi-ta-ctn,
.tool-chest-template-tree .fi-ta-ctn.divide-y,
.tool-chest-template-tree .fi-ta-ctn > * {
    border-top: none !important;
    border-bottom: none !important;
}

/* Also target the fi-ta-content divide-y border */
.tool-chest-template-tree .fi-ta-content,
.tool-chest-template-tree .fi-ta-content.divide-y {
    border-top: none !important;
}

/* ===== STICKY HEADERS: Maintain tree view functionality ===== */

/* ===== HEADER POSITIONING: Scroll container approach ===== */
/*
 * STRATEGY:
 * - Toolbar header (.fi-ta-header) scrolls normally with page
 * - Table thead sticks within .fi-ta-content scroll container
 * - Horizontal overflow is handled by .fi-ta-content (overflow-x: auto)
 * - This ensures thead stays visible during horizontal scrolling
 */

/* ===== STICKY TOOLBAR IMPLEMENTATION ===== */
/* Make PARENT header sticky (not child toolbar) to ensure proper sticking behavior */
/* REASON: Sticky child in small fixed-height parent scrolls away with parent */
/* SOLUTION: Parent header (68px tall) sticks at top: 64px, toolbar flows naturally inside */
.tool-chest-template-tree .fi-ta-header {
    position: sticky !important;
    top: 64px !important; /* Stick below topbar */
    z-index: 40 !important; /* Above topbar (z-20) and sticky table headers (z-30), below modals (z-50+) */
    border: none !important; /* Remove all borders */
}

/* Remove border from toolbar div itself */
.tool-chest-template-tree .fi-ta-header-toolbar {
    border: none !important;
}

/* Toolbar flows naturally within sticky parent */
.tool-chest-template-tree .fi-ta-header-toolbar {
    position: relative !important; /* Changed from sticky to relative */
    top: 0 !important; /* Reset any inherited top value */
}

/* Visual depth when scrolled - disabled for cleaner look */
/* .tool-chest-template-tree .fi-ta-header[data-scrolled="true"] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
} */

/* Table thead sticks below toolbar (dynamic offset) */
.tool-chest-template-tree .fi-ta-table thead {
    position: sticky !important;
    top: calc(64px + var(--toolbar-height, 64px)) !important; /* Topbar + dynamic toolbar height */
    z-index: 20 !important; /* Below toolbar, above content */

    /* Smooth transitions */
    transition: top 0.2s ease;
}

/* ===== THEME-AWARE BACKGROUNDS ===== */
/* Light mode header background - target parent now */
[data-theme="light"] .tool-chest-template-tree .fi-ta-header {
    background-color: white !important;
}

/* Dark mode header background - target parent now */
[data-theme="dark"] .tool-chest-template-tree .fi-ta-header {
    background-color: var(--theme-bg-primary) !important;
}

/* Dark mode shadow for scrolled header - disabled for cleaner look */
/* [data-theme="dark"] .tool-chest-template-tree .fi-ta-header[data-scrolled="true"] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
                0 2px 4px -1px rgba(0, 0, 0, 0.2);
} */

/* Light mode thead background */
[data-theme="light"] .tool-chest-template-tree .fi-ta-table thead {
    background-color: white;
}

[data-theme="light"] .tool-chest-template-tree .fi-ta-table thead th {
    background-color: white !important;
}

/* Dark mode thead background */
[data-theme="dark"] .tool-chest-template-tree .fi-ta-table thead {
    background-color: var(--theme-bg-primary);
}

[data-theme="dark"] .tool-chest-template-tree .fi-ta-table thead th {
    background-color: var(--theme-bg-primary) !important;
}

/* ===== RESPONSIVE OVERFLOW: Enable nested table scroll container ===== */
/*
 * SOLUTION: Enable overflow: visible for unified scroll container + modal fixes.
 *
 * BENEFITS:
 * - Single scroll boundary for all nested tables
 * - Sticky headers within one scroll context
 * - No competing overflow between parent/child tables
 *
 * COMBINED WITH: Modal positioning fixes (above) that restore proper layout when modals open
 * - Modal fixes temporarily restore overflow: hidden when .fi-modal-open is present
 * - This ensures modals render properly while maintaining sticky header functionality
 */

.tool-chest-template-tree .fi-ta-ctn {
    overflow: visible !important;
}

.tool-chest-template-tree .fi-ta-content {
    overflow: visible !important;
    position: relative;
}

.tool-chest-template-tree .fi-ta-content .fi-ta-ctn,
.tool-chest-template-tree .fi-ta-content .fi-ta-content,
.tool-chest-template-tree .fi-ta-content .fi-ta-wrapper,
.tool-chest-template-tree .fi-ta-content .fi-ta {
    overflow: visible !important;
}

/* REMOVED: position: static override no longer needed after teleporting modals to body root */
/* This was causing content shift when modals opened (html overflow: hidden triggered layout reflow) */
/* .tool-chest-template-tree .fi-ta-content {
    position: static !important;
} */

/* Scoped dropdown styles – only inside .bulk-actions */
/* Z-index hierarchy: Modals (z-60) > Modal backdrops (z-50) > Dropdowns (z-45) > Headers (z-40) */
.tool-chest-template-tree .bulk-actions .fi-dropdown-panel {
    position: fixed !important;
    z-index: 45 !important; /* Below modals (z-50), above sticky headers (z-40) */
    max-width: unset;
    width: auto !important;
}

.tool-chest-template-tree .bulk-actions .fi-dropdown-list {
    position: absolute;
    /* z-index removed - stacks naturally within parent z-45 context */
    background: inherit;
    border: inherit;
    border-radius: inherit;
    padding: 0.25rem;
}

.tool-chest-template-tree .bulk-actions .fi-dropdown-list-item {
    /* z-index removed - stacks naturally within parent context */
}

/* Light mode hover */
[data-theme="light"] .tool-chest-template-tree .bulk-actions .fi-dropdown-list-item:hover,
[data-theme="light"] .tool-chest-template-tree .bulk-actions .fi-dropdown-list-item:focus-visible {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Dark mode hover */
[data-theme="dark"] .tool-chest-template-tree .bulk-actions .fi-dropdown-list-item:hover,
[data-theme="dark"] .tool-chest-template-tree .bulk-actions .fi-dropdown-list-item:focus-visible {
    background-color: rgba(255, 255, 255, 0.1);
}


@keyframes pulse-border {
    0% { border-color: #10b981; }
    50% { border-color: rgba(16, 185, 129, 0.3); }
    100% { border-color: #10b981; }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* ===== RESPONSIVE ENHANCEMENTS ===== */

/* ===== CUSTOM SCROLLBAR STYLING ===== */
/* Themed scrollbar for better UX on smaller screens */

@media (max-width: 1209px) {
    .tool-chest-template-tree .fi-ta-content::-webkit-scrollbar {
        height: 10px;
    }

    .tool-chest-template-tree .fi-ta-content::-webkit-scrollbar-track {
        background: rgb(var(--gray-100));
        border-radius: 9999px;
    }

    .tool-chest-template-tree .fi-ta-content::-webkit-scrollbar-thumb {
        background: rgb(var(--gray-300));
        border-radius: 9999px;
        transition: background 0.2s ease;
    }

    .tool-chest-template-tree .fi-ta-content::-webkit-scrollbar-thumb:hover {
        background: rgb(var(--gray-400));
    }

    /* Dark mode scrollbar */
    [data-theme="dark"] .tool-chest-template-tree .fi-ta-content::-webkit-scrollbar-track {
        background: rgb(var(--gray-800));
    }

    [data-theme="dark"] .tool-chest-template-tree .fi-ta-content::-webkit-scrollbar-thumb {
        background: rgb(var(--gray-600));
    }

    [data-theme="dark"] .tool-chest-template-tree .fi-ta-content::-webkit-scrollbar-thumb:hover {
        background: rgb(var(--gray-500));
    }

    /* Firefox scrollbar */
    .tool-chest-template-tree .fi-ta-content {
        scrollbar-width: thin;
        scrollbar-color: rgb(var(--gray-300)) rgb(var(--gray-100));
    }

    [data-theme="dark"] .tool-chest-template-tree .fi-ta-content {
        scrollbar-color: rgb(var(--gray-600)) rgb(var(--gray-800));
    }
}

/* ===== TABLE SIZING: Guarantee horizontal scroll at all breakpoints ===== */
/*
 * CRITICAL: Tables must ALWAYS exceed viewport width to trigger scroll
 *
 * APPROACH:
 * 1. Root table: min-width based on column widths (ensures consistent sizing)
 * 2. Nested tables: width: 100% (inherit parent table width)
 * 3. All tables: min-width: max-content (never crush below content)
 */

/* Root table - drives the scroll trigger */
.tool-chest-template-tree .fi-ta-table {
    /* Calculate: checkbox(60) + name(600) + count(150) + date(220) + active(100) + actions(80) = 1210px */
    min-width: 1210px;
    width: max-content; /* Expand beyond min-width if content requires */
}

/* All nested tables inherit width from root */
.tool-chest-template-tree .fi-ta-content .fi-ta-table {
    min-width: max-content; /* Never crush below content width */
    width: 100%; /* Match parent table width */
}

/* Ensure table cells maintain their width specifications */
.tool-chest-template-tree table {
    table-layout: fixed; /* Enforce column width specifications */
}

/* Fallback for browsers without max-content support (IE11, old Safari) */
@supports not (width: max-content) {
    .tool-chest-template-tree .fi-ta-table {
        width: 1210px; /* Fixed width fallback */
        min-width: 1210px;
    }
}

/* ===== RESPONSIVE COLUMN WIDTHS ===== */
/*
 * OPTIMIZATION: Reduce column widths at smaller viewports
 * BUT maintain min-width sum that guarantees horizontal scroll
 *
 * CRITICAL: Total column widths must ALWAYS be ≥ calculated min-width
 * This ensures Actions and Active columns are accessible via scroll
 */

/* Tablet (768px - 1209px): Compact but functional widths */
@media (min-width: 768px) and (max-width: 1209px) {
    /* Name column: Reduce from 600px to 400px */
    .tool-chest-template-tree th:nth-child(2),
    .tool-chest-template-tree td:nth-child(2) {
        min-width: 400px !important;
        max-width: 400px !important;
        width: 400px !important;
    }

    /* Date column: Reduce from 220px to 150px */
    .tool-chest-template-tree th:nth-child(4),
    .tool-chest-template-tree td:nth-child(4) {
        min-width: 150px !important;
        max-width: 150px !important;
        width: 150px !important;
    }

    /* New total: 60 + 400 + 150 + 150 + 100 + 80 = 940px */
    .tool-chest-template-tree .fi-ta-table {
        min-width: 940px;
    }
}

/* Mobile (<768px): Ultra-compact layout ensuring ALL columns accessible via scroll */
@media (max-width: 767px) {
    /* Checkbox: Compact but WCAG-compliant touch target */
    .tool-chest-template-tree th:nth-child(1),
    .tool-chest-template-tree td:nth-child(1) {
        min-width: 48px !important;
        max-width: 48px !important;
        width: 48px !important;
    }

    /* Name: Reduced but still functional */
    .tool-chest-template-tree th:nth-child(2),
    .tool-chest-template-tree td:nth-child(2) {
        min-width: 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }

    /* Count: Compact with smaller text */
    .tool-chest-template-tree th:nth-child(3),
    .tool-chest-template-tree td:nth-child(3) {
        min-width: 100px !important;
        max-width: 100px !important;
        width: 100px !important;
        font-size: 0.75rem;
    }

    /* Date: Compact with smaller text */
    .tool-chest-template-tree th:nth-child(4),
    .tool-chest-template-tree td:nth-child(4) {
        min-width: 120px !important;
        max-width: 120px !important;
        width: 120px !important;
        font-size: 0.75rem;
    }

    /* Active: Compact toggle */
    .tool-chest-template-tree th:nth-child(5),
    .tool-chest-template-tree td:nth-child(5) {
        min-width: 80px !important;
        max-width: 80px !important;
        width: 80px !important;
    }

    /* Actions: WCAG-compliant touch target */
    .tool-chest-template-tree th:nth-child(6),
    .tool-chest-template-tree td:nth-child(6) {
        min-width: 60px !important;
        max-width: 60px !important;
        width: 60px !important;
    }

    /* New total: 48 + 280 + 100 + 120 + 80 + 60 = 688px */
    /* This GUARANTEES horizontal scroll on all mobile devices */
    .tool-chest-template-tree .fi-ta-table {
        min-width: 688px;
    }
}

/* ===== RESPONSIVE INDENTATION ===== */
/* Reduce indentation on smaller screens to prevent excessive right-push */

/* Desktop: Full 40px per level (default from inline style) */
@media (min-width: 1024px) {
    .tool-chest-template-tree {
        --indent-multiplier: 40px;
    }
}

/* Tablet: Reduce to 30px per level */
@media (min-width: 768px) and (max-width: 1023px) {
    .tool-chest-template-tree {
        --indent-multiplier: 30px;
    }
}

/* Mobile: Reduce to 20px per level */
@media (max-width: 767px) {
    .tool-chest-template-tree {
        --indent-multiplier: 20px;
    }
}

/* ===== SCROLL POSITION INDICATORS ===== */
/* Subtle gradient shadows indicating more content on scroll */

@media (max-width: 1209px) {
    .tool-chest-template-tree .fi-ta-content {
        position: relative;
    }

    /* Right shadow (indicates scroll right available) */
    .tool-chest-template-tree .fi-ta-content::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40px;
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.2s ease;
        z-index: 10;
    }

    /* Light mode gradient */
    [data-theme="light"] .tool-chest-template-tree .fi-ta-content::after {
        background: linear-gradient(
            to left,
            rgb(var(--gray-50)),
            transparent
        );
    }

    /* Dark mode gradient */
    [data-theme="dark"] .tool-chest-template-tree .fi-ta-content::after {
        background: linear-gradient(
            to left,
            var(--theme-bg-primary),
            transparent
        );
    }

    /* Hide shadow when scrolled to end */
    .tool-chest-template-tree .fi-ta-content[data-scrolled-end]::after {
        opacity: 0;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* GPU acceleration and rendering hints for smooth scrolling */

@media (max-width: 1209px) {
    .tool-chest-template-tree .fi-ta-content {
        transform: translateZ(0); /* Force GPU layer for smooth scrolling */
        will-change: scroll-position; /* Hint browser for scroll optimization */
    }

    /* Hint browser for potential transforms during drag */
    .tool-chest-template-tree tbody[draggable="true"] {
        will-change: transform; /* Optimize for drag-and-drop transformations */
    }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
/* Ensure focus indicators remain visible during scroll */

.tool-chest-template-tree .fi-ta-table *:focus {
    position: relative; /* Ensure focus ring doesn't get clipped */
    z-index: 1;
}

/* Ensure touch targets remain adequate on mobile */
@media (max-width: 767px) {
    .tool-chest-template-tree button,
    .tool-chest-template-tree [type="checkbox"],
    .tool-chest-template-tree .fi-dropdown-trigger {
        min-width: 44px; /* WCAG AAA touch target size */
        min-height: 44px;
    }
}

/* ===== MODAL BACKDROP FIX ===== */
/* Removed - was causing modal to appear behind backdrop */