/* hide the input box for TagsInput in Viewing mode */
.fi-fo-tags-input.fi-disabled .fi-input {
    display: none !important;
}
/* remove that top border above the chips container */
.fi-fo-tags-input.fi-disabled .fi-fo-tags-input-tags-ctn {
    border-top: none !important;
}

.wysiwyg-content img {
    max-width: 75%; /* Ensures the image is never wider than its container */
    height: auto;    /* Maintains the image's aspect ratio */
    display: block;  /* Can help prevent extra space below the image */
    border: 1px solid #3f3f3f; /* Light gray border */
    border-radius: 4px;        /* Your existing rounded corners */
    margin: 5px 0;             /* Your existing margin */
}

.table-repeater-wrapper .filament-tables-header {
    display: none !important;
}

.table-repeater-wrapper .it-table-repeater-cell-label {
    font-size: 0.8rem; /* smaller font */
}

/* Alternating row colors for TableRepeater */
.table-repeater-wrapper .it-table-repeater-row:nth-child(odd) {
    background-color: #fdfdfe; /* A very light gray, almost white */
}
.table-repeater-wrapper .it-table-repeater-row:nth-child(even) {
    background-color: #f9fafb; /* gray-50 for light mode */
}

html.dark .table-repeater-wrapper .it-table-repeater-row:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.02); /* Even more subtle white for odd rows */
}
html.dark .table-repeater-wrapper .it-table-repeater-row:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05); /* A subtle white for dark mode */
}

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

.custom-spin {
  animation: spin 1s linear infinite;
}

/*
  The following rules prevent a "flicker" effect on repeater rows.
  When Livewire re-renders the repeater, all rows are initially visible.
  JS then runs to disable some of them, causing a visual flash.
  To fix this, we default all new rows to a disabled state using CSS,
  and then JS enables the ones that should be active.
*/

/* Default new (unstyled) repeater rows to a 'disabled' state. */
/* .table-repeater-wrapper .it-table-repeater-row:not([data-styled-row]) {
    opacity: 0.5;
} */

/* The class toggled by JS to control state. */
/* .repeater-row-disabled {
    opacity: 0.5;
} */

/* Responsive styling for total area summary */
.total-area-summary {
    gap: 0.5rem; /* 8px on mobile */
    padding: 0;
}

.total-area-summary span:last-child {
    padding-left: 0.25rem; /* 4px on mobile */
}

@media (min-width: 640px) {
    
    .total-area-summary span:first-child {
        padding: 0 1rem;
    }

    .total-area-summary span:nth-last-child(2) {
        min-width: 20%;
        text-align: center;
    }


    .total-area-summary span:last-child {
        min-width: 20%;
        text-align: center;
        padding-left: 1rem;
    } 
    
}

/* Make TableRepeater horizontally scrollable on mobile */
@media (max-width: 768px) {
    .table-repeater-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        display: block;
        width: 100%;
    }
    
    .table-repeater-wrapper table {
        min-width: 600px; /* Ensure table doesn't collapse too much */
        width: auto;
    }
    
    /* Add visible scrollbar hint */
    .table-repeater-wrapper::-webkit-scrollbar {
        height: 8px;
    }
    
    .table-repeater-wrapper::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    
    html.dark .table-repeater-wrapper::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .table-repeater-wrapper::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }
    
    .table-repeater-wrapper::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    html.dark .table-repeater-wrapper::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
    }
    
    html.dark .table-repeater-wrapper::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }

    .add-parcela-del-stavbe-button {
        margin-top: 2rem;
    }
}