/**
 * ChronosUI Custom Styles
 * 
 * This is an example CSS file showing how to add custom styles
 * to the ChronosUI component using the organized asset structure.
 */

/* Bootstrap customizations */
.btn-chronos {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.btn-chronos:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    color: white;
}

/* Loading overlay customizations */
#chronos-loading-overlay {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

#chronos-loading-overlay .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Modal customizations */
.modal-content {
    border-radius: 15px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 15px 15px 0 0;
}

/* Navbar background custom properties */
:root {
    --chronos-nav-z-index: 1030; /* Same z-index for navbar and sidebar */
}



/* Navbar background styling */
#main-navbar {
    background-color: var(--chronos-navbar-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bs-border-color);
    z-index: var(--chronos-nav-z-index);
}

/* Sidebar styling */
#chronos-accessible-menu {
    z-index: var(--chronos-nav-z-index);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid var(--bs-border-color);
}

/* Dark mode enhancements */
[data-bs-theme="dark"] .modal-content {
    background-color: #2d3748;
    color: #fff;
}

[data-bs-theme="dark"] .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Tooltip customizations */
.tooltip {
    font-size: 0.875rem;
    z-index: 99999 !important;
}

.tooltip-inner {
    border-radius: 8px;
    padding: 8px 12px;
}

/* Animation utilities */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

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

/* =============================================================================
   GRID FILTER ENHANCEMENTS FOR BOOTSTRAP 5.3
   ========================================================================== */

/* Base filter cell styling */
.filter-cell {
    padding: 0.375rem 0.5rem;
    vertical-align: middle;
    background-color: var(--bs-gray-50, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color);
    transition: background-color 0.15s ease-in-out;
}

/* Filter input wrapper */
.filter-input-wrapper {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
}

/* Enhanced form controls for filters */
.filter-cell .form-control,
.filter-cell .form-select {
    font-size: 0.875rem;
    line-height: 1.25;
    padding: 0.25rem 0.5rem;
    border-radius: var(--bs-border-radius-sm);
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Focus states with proper contrast */
.filter-cell .form-control:focus,
.filter-cell .form-select:focus {
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Placeholder styling */
.filter-cell .form-control::placeholder {
    color: var(--bs-secondary-color);
    opacity: 1;
}

/* Dark mode support for filters */
[data-bs-theme="dark"] .filter-cell {
    background-color: var(--bs-dark);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .filter-cell .form-control,
[data-bs-theme="dark"] .filter-cell .form-select {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .filter-cell .form-control:focus,
[data-bs-theme="dark"] .filter-cell .form-select:focus {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

[data-bs-theme="dark"] .filter-cell .form-control::placeholder {
    color: var(--bs-secondary-color);
}

/* RTL support */
[dir="rtl"] .filter-cell .form-control,
[dir="rtl"] .filter-cell .form-select {
    text-align: right;
}

/* Select arrow positioning for RTL */
[dir="rtl"] .filter-cell .form-select {
    background-position: left 0.75rem center;
    padding-left: 2.25rem;
    padding-right: 0.75rem;
}

/* Search input specific styling */
.filter-cell input[type="search"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    background-size: 16px 16px;
    padding-left: 2.5rem;
}

[dir="rtl"] .filter-cell input[type="search"] {
    background-position: right 0.75rem center;
    padding-left: 0.75rem;
    padding-right: 2.5rem;
}

[data-bs-theme="dark"] .filter-cell input[type="search"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23d1d5db' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z'/%3e%3c/svg%3e");
}

/* Hover effects for better UX */
.filter-cell:hover {
    background-color: var(--bs-gray-100, #e9ecef);
}

[data-bs-theme="dark"] .filter-cell:hover {
    background-color: var(--bs-gray-800, #495057);
}

/* Focus-within for better accessibility */
.filter-cell:focus-within {
    background-color: var(--bs-gray-100, #e9ecef);
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}

[data-bs-theme="dark"] .filter-cell:focus-within {
    background-color: var(--bs-gray-800, #495057);
}

/* Screen reader improvements */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Grid table enhancements */
.grid-view table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
    --bs-table-active-color: var(--bs-emphasis-color);
    --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
    --bs-table-hover-color: var(--bs-emphasis-color);
    --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
    width: 100%;
    margin-bottom: 1rem;
    color: var(--bs-body-color);
    vertical-align: top;
    border-color: var(--bs-border-color);
}

.grid-view table thead {
    vertical-align: bottom;
}

.grid-view table th,
.grid-view table td {
    padding: 0.5rem;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--bs-border-color);
}

/* Responsive design for filters */
@media (max-width: 768px) {
    .filter-cell {
        padding: 0.25rem;
    }
    
    .filter-cell .form-control,
    .filter-cell .form-select {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .filter-cell .form-control,
    .filter-cell .form-select {
        border-width: 2px;
    }
    
    .filter-cell .form-control:focus,
    .filter-cell .form-select:focus {
        border-width: 3px;
        box-shadow: none;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .filter-cell .form-control,
    .filter-cell .form-select,
    .filter-cell {
        transition: none;
    }
}

/* =============================================================================
   GRID LOADING ANIMATIONS FOR BOOTSTRAP 5.3
   ========================================================================== */

/* Grid loading state */
.grid-view.grid-loading {
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

/* Loading overlay for individual grids */
.grid-loading-overlay {
    background: rgba(var(--bs-body-bg-rgb), 0.85) !important;
    backdrop-filter: blur(2px);
    border-radius: var(--bs-border-radius);
}

[data-bs-theme="dark"] .grid-loading-overlay {
    background: rgba(var(--bs-dark-rgb), 0.85) !important;
}

/* Spinner customization for grid loading */
.grid-loading-overlay .spinner-border {
    width: 2rem;
    height: 2rem;
    border-width: 0.2em;
}

/* Table to pagination spacing */
.grid-view .mt-3 {
    margin-top: 1rem !important;
}

/* Enhanced pagination spacing and styling */
.grid-view .pager {
    padding-top: 1rem;
    margin-top: 1rem;
}

[data-bs-theme="dark"] .grid-view .pager {
    border-top-color: var(--bs-border-color);
}

/* Pagination container responsive improvements */
.grid-view .pager nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

label[for="ApiDataImporter_progressBar"] {
   display: none;
}

.progress {
    min-height:1.25rem
}


@media (max-width: 576px) {
    .grid-view .pager nav {
        gap: 0.25rem;
    }
    
    .grid-view .pager .pagination {
        margin-bottom: 0;
        font-size: 0.875rem;
    }
    
    .grid-view .pager .page-link {
        padding: 0.375rem 0.5rem;
    }
}

/* Loading animation for filter inputs during AJAX */
.grid-view.grid-loading .filter-cell .form-control,
.grid-view.grid-loading .filter-cell .form-select {
    background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%236c757d' fill-rule='nonzero'%3e%3cpath d='M8 3a5 5 0 110 10A5 5 0 018 3zM8 0a8 8 0 100 16A8 8 0 008 0z' opacity='.5'/%3e%3cpath d='M8 0a8 8 0 018 8h-2a6 6 0 00-6-6V0z'%3e%3canimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='1s' repeatCount='indefinite'/%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 16px;
    pointer-events: none;
}

[dir="rtl"] .grid-view.grid-loading .filter-cell .form-control,
[dir="rtl"] .grid-view.grid-loading .filter-cell .form-select {
    background-position: left 0.75rem center;
}

/* Smooth transitions for loading states */
.grid-view {
    transition: opacity 0.2s ease-in-out;
}

.grid-loading-overlay {
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* =============================================================================
   PAGINATION AND SUMMARY STYLING
   ========================================================================== */

/* Pagination and summary container */
.grid-view .mt-3 {
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Summary styling when placed with pagination */
.grid-view .summary {
    font-size: 0.875rem;
    color: var(--bs-secondary);
    margin-top: 0.5rem;
    margin-bottom: 0;
    text-align: center !important;
}

/* Ensure pagination is centered */
.grid-view .pager nav {
    justify-content: center;
}

/* Mobile responsive pagination and summary */
@media (max-width: 768px) {
    .grid-view .mt-3 {
        padding-top: 0.75rem;
    }
    
    .grid-view .summary {
        font-size: 0.8rem;
        margin-top: 0.75rem;
    }
    
    .grid-view .pager .pagination {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
}

/* Dark mode support for pagination area */
[data-bs-theme="dark"] .grid-view .mt-3 {
    border-top-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .grid-view .summary {
    color: var(--bs-secondary);
}