[x-cloak] { display: none !important; }

/* HTMX Indicator Styles */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    display: inline-block;
}

:root {
    --header-height: 64px;
    /* Brand Colors - Updated via JavaScript from CompanySettings */
    --primary-color: #4f46e5;
    --primary-color-rgb: 79, 70, 229;
    --secondary-color: #10b981;
    --secondary-color-rgb: 16, 185, 129;
    
    /* Primary Color Variations */
    --primary-50: rgba(var(--primary-color-rgb), 0.05);
    --primary-100: rgba(var(--primary-color-rgb), 0.1);
    --primary-200: rgba(var(--primary-color-rgb), 0.2);
    --primary-300: rgba(var(--primary-color-rgb), 0.3);
    --primary-400: rgba(var(--primary-color-rgb), 0.4);
    --primary-500: rgba(var(--primary-color-rgb), 0.5);
    --primary-600: rgba(var(--primary-color-rgb), 0.6);
    --primary-700: rgba(var(--primary-color-rgb), 0.7);
    --primary-800: rgba(var(--primary-color-rgb), 0.8);
    --primary-900: rgba(var(--primary-color-rgb), 0.9);
    
    /* Secondary Color Variations */
    --secondary-50: rgba(var(--secondary-color-rgb), 0.05);
    --secondary-100: rgba(var(--secondary-color-rgb), 0.1);
    --secondary-200: rgba(var(--secondary-color-rgb), 0.2);
    --secondary-300: rgba(var(--secondary-color-rgb), 0.3);
    --secondary-400: rgba(var(--secondary-color-rgb), 0.4);
    --secondary-500: rgba(var(--secondary-color-rgb), 0.5);
    --secondary-600: var(--secondary-color);
    --secondary-700: rgba(var(--secondary-color-rgb), 0.8);
    --secondary-800: rgba(var(--secondary-color-rgb), 0.9);
    
    /* Status Colors - Using Secondary color for success, primary variations for others */
    --success-bg: var(--secondary-50);
    --success-text: var(--secondary-color);
    --success-border: var(--secondary-100);
    
    --error-bg: #FEF2F2;
    --error-text: #991B1B;
    --error-border: #FEE2E2;
    
    --info-bg: var(--primary-50);
    --info-text: var(--primary-color);
    --info-border: var(--primary-100);
    
    /* Neutral Colors */
    --gray-50: #f9fafb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
}

/* Panel Container Styles */
.panel-container {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    transition: transform 0.3s ease-in-out;
    min-width: 300px;
    max-width: 800px;
    height: calc(100vh - var(--header-height));
    margin-top: var(--header-height);
    z-index: 50; /* Add z-index to ensure panel appears above other content */
}

.panel-container.hidden {
    transform: translateX(100%);
    pointer-events: none; /* Prevent interaction when hidden */
}

.panel-toggle {
    transition: transform 0.3s ease-in-out;
}

.panel-toggle.panel-open {
    transform: rotate(180deg);
}

/* Basic styling for inline form elements - adjust as needed */
.form-select-inline {
    @apply block w-full rounded-md border-gray-300 shadow-sm sm:text-sm px-2 py-1 pr-8; /* Reduced padding, added right padding for arrow */
    min-width: 100px; /* Adjust as needed */
    border-color: var(--gray-300);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-select-inline:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-100);
}

/* Settings Page Enhancements */
.settings-section {
    @apply border border-gray-200 rounded-lg transition-all duration-200;
}

.settings-section:hover {
    @apply border-gray-300 shadow-sm;
}

.settings-section-header {
    @apply w-full px-4 py-3 bg-gray-50 border-b border-gray-200 flex items-center justify-between text-left hover:bg-gray-100 transition-colors;
}

.settings-section-content {
    @apply p-4;
}

.settings-form-group {
    @apply space-y-4;
}

.settings-field {
    @apply space-y-2;
}

.settings-field-header {
    @apply flex items-center justify-between;
}

.settings-help-icon {
    @apply text-xs text-gray-500 hover:text-gray-700 cursor-help transition-colors;
}

.settings-tooltip {
    @apply absolute z-10 p-2 text-xs text-white bg-gray-900 rounded shadow-lg max-w-xs;
    transform: translateX(-50%);
    top: -100%;
    left: 50%;
}

/* Form Validation Styles */
.form-field-error {
    @apply border-red-500 focus:border-red-500 focus:ring-red-500;
}

.form-field-success {
    @apply border-green-500 focus:border-green-500 focus:ring-green-500;
}

.form-error-message {
    @apply text-xs text-red-600 mt-1;
}

.form-success-message {
    @apply text-xs text-green-600 mt-1;
}

/* Status Message Enhancements */
.status-message {
    @apply p-4 rounded-lg border transition-all duration-300;
}

.status-message.success {
    @apply bg-green-50 border-green-200 text-green-800;
}

.status-message.error {
    @apply bg-red-50 border-red-200 text-red-800;
}

.status-message.warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}

.status-message.info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
}

/* Tab Improvements */
.settings-tab {
    @apply whitespace-nowrap py-4 px-3 border-b-2 font-medium text-sm transition-all duration-150 flex items-center space-x-2;
}

.settings-tab.active {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.settings-tab:not(.active) {
    @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
}

.settings-tab-icon.active {
    color: var(--primary-color);
}

.settings-tab-icon:not(.active) {
    @apply text-gray-400;
}

/* Collapsible Section Animations */
.collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.collapsible-content.open {
    max-height: 1000px; /* Adjust based on content */
}

.collapsible-content.closed {
    max-height: 0;
}

/* Loading States */
.settings-loading {
    @apply animate-pulse;
}

.settings-loading .skeleton {
    @apply bg-gray-200 rounded;
}

/* Mobile Responsiveness for Settings */
@media (max-width: 768px) {
    .settings-section-header {
        @apply px-3 py-2;
    }
    
    .settings-section-content {
        @apply p-3;
    }
    
    .settings-tab {
        @apply px-2 py-3 text-xs;
    }
}

/* Secondary Color Utility Classes */
.bg-secondary-50 { background-color: var(--secondary-50); }
.bg-secondary-100 { background-color: var(--secondary-100); }
.bg-secondary-200 { background-color: var(--secondary-200); }
.bg-secondary-500 { background-color: var(--secondary-500); }
.bg-secondary-600 { background-color: var(--secondary-600); }
.bg-secondary-700 { background-color: var(--secondary-700); }

.text-secondary-600 { color: var(--secondary-600); }
.text-secondary-700 { color: var(--secondary-700); }

.border-secondary-200 { border-color: var(--secondary-200); }
.border-secondary-300 { border-color: rgba(var(--secondary-color-rgb), 0.3); }
.border-secondary-500 { border-color: var(--secondary-500); }
.border-secondary-600 { border-color: var(--secondary-600); }

.ring-secondary-500 { 
    --tw-ring-color: var(--secondary-500);
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

/* Enhanced Secondary Color Components */
.secondary-button {
    background-color: var(--secondary-600);
    color: white;
    border: 1px solid var(--secondary-600);
    transition: all 0.2s ease;
}

.secondary-button:hover {
    background-color: var(--secondary-700);
    border-color: var(--secondary-700);
}

.secondary-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--secondary-200);
}

.secondary-button-outline {
    background-color: transparent;
    color: var(--secondary-600);
    border: 1px solid var(--secondary-600);
    transition: all 0.2s ease;
}

.secondary-button-outline:hover {
    background-color: var(--secondary-50);
    border-color: var(--secondary-700);
    color: var(--secondary-700);
}

.secondary-chip {
    background-color: var(--secondary-100);
    color: var(--secondary-700);
    border: 1px solid var(--secondary-200);
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.secondary-chip:hover {
    background-color: var(--secondary-200);
    border-color: var(--secondary-300);
}

.secondary-chip.active {
    background-color: var(--secondary-600);
    color: white;
    border-color: var(--secondary-600);
}

.secondary-badge {
    background-color: var(--secondary-100);
    color: var(--secondary-700);
    border-radius: 0.375rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.secondary-progress-bar {
    background-color: var(--secondary-100);
    height: 0.5rem;
    border-radius: 9999px;
    overflow: hidden;
}

.secondary-progress-fill {
    background-color: var(--secondary-600);
    height: 100%;
    transition: width 0.3s ease;
}

.secondary-border-accent {
    border-left: 4px solid var(--secondary-600);
    background-color: var(--secondary-50);
}

/* Table enhancements with secondary colors */
.table-row-secondary-hover:hover {
    background-color: var(--secondary-50);
}

.table-header-secondary {
    background-color: var(--secondary-100);
    color: var(--secondary-700);
    border-bottom: 2px solid var(--secondary-200);
}

/* Filter and search component secondary styling */
.filter-active-secondary {
    background-color: var(--secondary-600);
    color: white;
    border-color: var(--secondary-600);
}

.filter-hover-secondary:hover {
    background-color: var(--secondary-50);
    border-color: var(--secondary-300);
    color: var(--secondary-700);
}

/* Navigation breadcrumb secondary styling */
.breadcrumb-separator-secondary {
    color: var(--secondary-500);
}

.breadcrumb-link-secondary {
    color: var(--secondary-600);
    transition: color 0.2s ease;
}

.breadcrumb-link-secondary:hover {
    color: var(--secondary-700);
}

/* Dark Mode Support (if needed) */
@media (prefers-color-scheme: dark) {
    .settings-section {
        @apply border-gray-700 bg-gray-800;
    }
    
    .settings-section-header {
        @apply bg-gray-700 border-gray-600 text-gray-100;
    }
    
    .settings-tooltip {
        @apply bg-gray-700 text-gray-100;
    }
}
    /* Consider adding background image for arrow if needed */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Styling for rows currently being edited */
.editing-row {
    background-color: var(--primary-50);
    border-left: 4px solid var(--primary-400);
    /* You could add other styles like increased padding or different font styles */
}

/* Styling for rows being edited that have an error */
.editing-row.bg-red-50 { /* Example combining with error state */
    @apply border-l-4 border-red-500; /* Emphasize error border */
}


/* Ensure input/select styles don't conflict excessively within editing rows */
.editing-row input,
.editing-row select {
    /* Potentially adjust focus rings or borders if they look odd on the colored background */
    /* Example: @apply focus:ring-offset-indigo-50; */
}

/* Add subtle transition for row highlight */
tr {
    transition: background-color 0.2s ease-in-out;
}
.prose table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--gray-300);
    margin-top: 1rem; /* my-4 */
    margin-bottom: 1.5rem; /* mb-6 */
    table-layout: auto;
}

.prose th {
    border: 1px solid var(--gray-300);
    padding: 0.5rem 1rem; /* px-4 py-2 */
    background-color: var(--gray-50);
    text-align: left;
    font-weight: 600; /* font-semibold */
    font-size: 0.875rem; /* text-sm */
}

.prose td {
    border: 1px solid var(--gray-300);
    padding: 0.5rem 1rem; /* px-4 py-2 */
    font-size: 0.875rem; /* text-sm */
    vertical-align: top;
}

/* Optional: Style the table header specifically */
.prose thead th {
    background-color: #e5e7eb; /* Tailwind gray-200 */
}

/* Optional: Alternating row colors */
.prose tbody tr:nth-child(even) {
    background-color: var(--gray-50);
}

/* Ensure paragraphs inside table cells don't have excessive margins */
.prose td p {
    margin-top: 0.25rem; /* my-1 */
    margin-bottom: 0.25rem;
}
.prose td ul, .prose td ol {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding-left: 1rem; /* pl-4 approximation */
}
.prose td li {
    margin-top: 0.125rem; /* my-0.5 */
    margin-bottom: 0.125rem;
}
.prose td h1, .prose td h2, .prose td h3, .prose td h4, .prose td h5, .prose td h6 {
    margin-top: 0.5rem; /* mt-2 */
    margin-bottom: 0.25rem; /* mb-1 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
}

/**
 * Additional styles for message bubbles and chat components
 * To be included in your application's CSS
 */

/* Message tail styling (if you prefer CSS over inline solution) */
.message-tail {
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: -5px;
    transform: rotate(45deg);
}

.message-tail.sent {
    right: 10px;
    background-color: var(--primary-color);
}

.message-tail.received {
    left: 10px;
    background-color: #f3f4f6; /* Gray-100 */
}

/* Typing indicator animation */
@keyframes typingAnimation {
    0% { opacity: .4; }
    50% { opacity: 1; }
    100% { opacity: .4; }
}

.typing-indicator span {
    animation: typingAnimation 1.5s infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: .5s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 1s;
}

/* Alpine.js cloak to prevent flash of unstyled content */
[x-cloak] {
    display: none !important;
}

/* Smooth transition for status changes */
.status-transition {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Focus styles for accessibility */
button:focus, a:focus, input:focus, textarea:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Better scrollbar for message container */
#chat-message-list-container {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}

#chat-message-list-container::-webkit-scrollbar {
    width: 6px;
}

#chat-message-list-container::-webkit-scrollbar-track {
    background: transparent;
}

#chat-message-list-container::-webkit-scrollbar-thumb {
    background-color: var(--gray-300);
    border-radius: 3px;
}

/* Styles for file selection area */
.file-selection-area {
    border: 2px dashed var(--gray-300);
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.file-selection-area:hover, .file-selection-area.dragging {
    border-color: var(--secondary-color);
    background-color: var(--secondary-50);
}

/* Empty state styling */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #6b7280;
}

.empty-state svg {
    width: 3rem;
    height: 3rem;
    color: var(--gray-300);
    margin-bottom: 1rem;
}

/* Better focus for attachments in dark mode */
.dark .attachment-link:focus {
    outline-color: rgba(165, 180, 252, 0.5);
}

/* Message status transition animation */
.status-indicator {
    transition: transform 0.2s ease;
}

.status-indicator:hover {
    transform: scale(1.2);
}

/* HTMX indicator styles */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
    display: none;
}
.htmx-request .htmx-indicator {
    opacity: 1;
    display: flex !important;
}
.htmx-request.htmx-indicator {
    opacity: 1;
    display: flex !important;
}

/* Hide regular content when loading */
.htmx-request .htmx-indicator-hide {
    display: none !important;
}

/* HTMX Loading States for Buttons and Actions */
/* Disable and add opacity to buttons during HTMX requests */
/* Exclude notification bell from loading states */
button.htmx-request:not([role="menuitem"]):not(#notification-bell-wrapper button):not([hx-get*="reassign-modal"]),
a.htmx-request {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

/* Prevent assignment buttons from becoming permanently disabled */
button[hx-get*="reassign-modal"] {
    pointer-events: auto !important;
}

button[hx-get*="reassign-modal"][data-disabled-by-request] {
    pointer-events: auto !important;
    opacity: 0.8;
}

/* Add loading spinner overlay to primary action buttons during requests */
/* Exclude notification bell from loading spinners */
button.htmx-request:not([role="menuitem"]):not(#notification-bell-wrapper button)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    border-radius: inherit;
    opacity: 0.7;
}

button.htmx-request:not([role="menuitem"]):not(#notification-bell-wrapper button)::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-left-color: currentColor;
    border-radius: 50%;
    animation: button-loading-spinner 0.8s linear infinite;
}

/* Loading spinner animation */
@keyframes button-loading-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* For dropdown menu items with indicators */
button[role="menuitem"]:has(.htmx-indicator) {
    transition: opacity 200ms ease-in;
}

/* Disable menu items during request */
button[role="menuitem"].htmx-request {
    opacity: 0.6;
    pointer-events: none;
}

/* Table row loading states */
tr.htmx-request {
    /* No cursor change */
}

/* Apply overlay to each cell individually to maintain table structure */
tr.htmx-request td {
    position: relative;
}

tr.htmx-request:not(.skeleton-loading *) td::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1;
    pointer-events: none;
}

/* Prevent skeleton table overlays */
.skeleton-loading tr.htmx-request td::before,
.skeleton-loading tr td::before {
    display: none !important;
}

/* Add spinner only to the first cell */
tr.htmx-request td:first-child::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid transparent;
    border-top-color: var(--primary-color);
    border-left-color: var(--primary-color);
    border-radius: 50%;
    animation: button-loading-spinner 0.8s linear infinite;
    z-index: 2;
}

/* Disable all cells in loading row except actions */
tr.htmx-request td:not(.actions-cell) {
    pointer-events: none;
}

/* Ensure actions cell maintains its width and visibility during row loading */
tr.htmx-request td.actions-cell {
    pointer-events: auto;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Actions cell specific styling */
td.actions-cell {
    white-space: nowrap; /* Prevent wrapping */
}

/* Dim all interactive elements during active requests, except during skeleton loading */
body.htmx-request-active [hx-get]:not(.htmx-request):not(button):not(.skeleton-loading):not(.skeleton-loading-container),
body.htmx-request-active [hx-post]:not(.htmx-request):not(button):not(.skeleton-loading):not(.skeleton-loading-container),
body.htmx-request-active [hx-put]:not(.htmx-request):not(button):not(.skeleton-loading):not(.skeleton-loading-container),
body.htmx-request-active [hx-delete]:not(.htmx-request):not(button):not(.skeleton-loading):not(.skeleton-loading-container),
body.htmx-request-active [hx-patch]:not(.htmx-request):not(button):not(.skeleton-loading):not(.skeleton-loading-container) {
    opacity: 0.5;
}

/* Preserve skeleton loading appearance but prevent graying */
.skeleton-loading-container.htmx-request,
.skeleton-loading-container.htmx-request > * {
    opacity: 1 !important;
}

/* Remove overlays from skeleton loading but preserve skeleton backgrounds */
.skeleton-loading-container.htmx-request::before,
.skeleton-loading-container.htmx-request::after {
    display: none !important;
}

/* Keep skeleton shimmer backgrounds */
.skeleton-loading-container .skeleton-content {
    background: linear-gradient(
        90deg,
        #f8fafc 0%,
        #f1f5f9 50%,
        #f8fafc 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite !important;
}

/* Mobile card loading states */
div[id^="mobile-card-"].htmx-request {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

div[id^="mobile-card-"].htmx-request::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
    border-radius: inherit;
}

div[id^="mobile-card-"].htmx-request::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    margin-left: -12px;
    margin-top: -12px;
    border: 3px solid transparent;
    border-top-color: var(--primary-color);
    border-left-color: var(--primary-color);
    border-radius: 50%;
    animation: button-loading-spinner 0.8s linear infinite;
    z-index: 11;
}

/* Skeleton Loading */
.skeleton-row {
    position: relative;
    overflow: hidden;
}

.skeleton-content {
    background: linear-gradient(
        90deg,
        #f8fafc 0%,
        #f1f5f9 50%,
        #f8fafc 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

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

/* Smooth fade-in for loaded content */
tbody[hx-swap] tr {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation for table rows */
tbody tr:nth-child(1) { animation-delay: 0.05s; }
tbody tr:nth-child(2) { animation-delay: 0.1s; }
tbody tr:nth-child(3) { animation-delay: 0.15s; }
tbody tr:nth-child(4) { animation-delay: 0.2s; }
tbody tr:nth-child(5) { animation-delay: 0.25s; }
tbody tr:nth-child(6) { animation-delay: 0.3s; }
tbody tr:nth-child(7) { animation-delay: 0.35s; }
tbody tr:nth-child(8) { animation-delay: 0.4s; }
tbody tr:nth-child(9) { animation-delay: 0.45s; }
tbody tr:nth-child(10) { animation-delay: 0.5s; }

/* Skeleton table container styling */
.generic-table-container.skeleton-loading .htmx-indicator {
    display: none !important; /* Hide the spinner when showing skeletons */
}

/* Ensure indicator is properly hidden when not in loading state */
.generic-table-container:not(.htmx-request) .htmx-indicator {
    display: none !important;
}

/* Fix for persistent overlay issue */
.generic-table-container .htmx-indicator {
    pointer-events: none; /* Prevent interaction with the overlay */
}

/* Force hide indicators on completed requests */
body:not(.htmx-request-active) .htmx-indicator {
    display: none !important;
    opacity: 0 !important;
}

/* Clear any stuck overlays */
.generic-table-container:not(.htmx-request):not(.skeleton-loading) .htmx-indicator {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Show HTMX indicator only for non-skeleton requests */
.generic-table-container:not(.skeleton-loading).htmx-request .htmx-indicator {
    display: flex !important;
}

/* Keep HTMX indicator hidden during skeleton loading */
.generic-table-container.skeleton-loading .htmx-indicator {
    display: none !important;
}