/* DxGrid specific styling - moved from DevExpress.Blazor.overrides.css */
/*
   This file contains global DevExpress Blazor Grid styling overrides that apply to ALL DxGrid components
   throughout the application. It was moved from DevExpress.Blazor.overrides.css to provide centralized
   grid styling control.

   ⚠️  WARNING: This is a GLOBAL CSS file - DO NOT EDIT for specific grid customizations! ⚠️

   - All changes here affect every DxGrid in the application
   - For specific grid styling, create separate CSS files or use component-specific styles
   - This file maintains consistent grid appearance across the entire application
   - Contains overrides for grid containers, rows, headers, filters, and responsive behavior
*/
/* Grid container styling */
.dxbl-grid {
    border-radius: 24px;
    overflow: hidden;
    border: none !important;
    background: transparent;
    box-shadow: none !important;
    color: var(--bs-primary);
    --dxbl-grid-focus-frame-color: var(--bs-tertiary);
    --dxbl-grid-focus-bg: var(--bs-tertiary);
}

/* Timecards grid specific styles */
dxbl-grid.eb-dxbl-grid {
    max-height: calc(100vh - 10rem);
    overflow: hidden;
}

.dxbl-grid-empty-data-loading {
    /* Will not override without !important */
    color: var(--bs-secondary) !important;
}

/* Modern DxGrid row styling overrides */
.dxbl-grid-table > tbody > tr {
    transition: all 0.2s ease-in-out;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    border: none;
    margin-bottom: 0;
}

.dxbl-grid-table > tbody > tr > td {
    padding: 0.25rem 0.75rem !important;
    font-size: 0.9rem;
    vertical-align: middle;
    border: none !important;
    border-bottom: 1px solid rgba(6, 51, 64, 0.08) !important;
    background: transparent;
    position: relative;
    color: var(--bs-black) !important;
}

/* Prevent DevExpress from stretching rows to fill grid height */
.dxbl-grid-table > tbody {
    height: auto !important;
    min-height: auto !important;
}

.dxbl-grid-table > tbody > tr {
    height: auto !important;
    min-height: auto !important;
    max-height: 3.5rem !important; /* Maximum row height */
}

.dxbl-grid-table > tbody > tr > td {
    height: auto !important;
    min-height: auto !important;
    max-height: 3.5rem !important; /* Maximum cell height */
}

/* Force grid to not stretch content */
.dxbl-scroll-viewer-content {
    height: auto !important;
    min-height: auto !important;
}

.dxbl-grid-table {
    height: auto !important;
    min-height: auto !important;
}

/* Force DevExpress to use minimal internal cell padding */
.dxbl-grid-table > tbody > tr > td {
    --dxbl-grid-text-cell-padding-x: 0 !important;
    --dxbl-grid-text-cell-padding-y: 0 !important;
    --dxbl-grid-editor-cell-padding-x: 0 !important;
    --dxbl-grid-editor-cell-padding-y: 0 !important;
}

/* Override any DevExpress internal spacing */
.dxbl-grid-table > tbody > tr > td > * {
    margin: 0 !important;
    padding: 0 !important;
}

.dxbl-grid-table > tbody > tr > td > div {
    margin: 0 !important;
    padding: 0 !important;
}

.dxbl-grid-table > tbody > tr > td > span {
    margin: 0 !important;
    padding: 0 !important;
}

.dxbl-grid-table > tbody > tr > td > a {
    margin: 0 !important;
    padding: 0 !important;
}

/* Target DevExpress specific cell content */
.dxbl-grid-table > tbody > tr > td .dxbl-grid-cell-content {
    padding: 0 !important;
    margin: 0 !important;
    color: var(--bs-black) !important;
}

.dxbl-grid-table > tbody > tr > td .dxbl-grid-cell-text {
    padding: 0 !important;
    margin: 0 !important;
    color: var(--bs-black) !important;
}

/* Override DevExpress grid container variables */
.dxbl-grid {
    --dxbl-grid-text-cell-padding-x: 0 !important;
    --dxbl-grid-text-cell-padding-y: 0 !important;
    --dxbl-grid-editor-cell-padding-x: 0 !important;
    --dxbl-grid-editor-cell-padding-y: 0 !important;
    --dxbl-grid-empty-data-area-padding-x: 0.5rem !important;
    --dxbl-grid-empty-data-area-padding-y: 1rem !important;
    --dxbl-grid-toolbar-container-padding-x: 0.5rem !important;
    --dxbl-grid-toolbar-container-padding-y: 0.25rem !important;
    --dxbl-grid-toolbar-container-min-height: 2.5rem !important;
}

.dxbl-grid-table > tbody > tr:hover {
    background: rgba(154, 189, 223, 0.04);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(6, 51, 64, 0.06);
}

.dxbl-grid-table > tbody > tr:nth-child(even) {
    background: transparent;
}

.dxbl-grid-table > tbody > tr:nth-child(even):hover {
    background: rgba(154, 189, 223, 0.04);
}

.dxbl-grid-table > tbody > tr.selected,
.dxbl-grid-table > tbody > tr[aria-selected="true"] {
    background: rgba(6, 51, 64, 0.06) !important;
    box-shadow: 0 1px 4px rgba(6, 51, 64, 0.08);
    border-left: 3px solid var(--bs-primary);
}

.dxbl-grid-table > tbody > tr.selected > td,
.dxbl-grid-table > tbody > tr[aria-selected="true"] > td {
    border-bottom: 1px solid rgba(6, 51, 64, 0.12) !important;
}

/* Remove border radius for rows */
.dxbl-grid-table > tbody > tr:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.dxbl-grid-table > tbody > tr:last-child > td {
    border-bottom: none !important;
}

/* Modern header styling */
.dxbl-grid-table > thead > tr > th {
    padding: 1.25rem 1.25rem 1rem 1.25rem !important;
    font-size: 0.875rem;
    background: transparent;
    border: none !important;
    font-weight: 600;
    letter-spacing: 0.025em;
    color: var(--bs-black) !important;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* Add border radius to header corners */
.dxbl-grid-table > thead > tr:first-child > th:first-child,
.dxbl-grid-table > thead > tr:first-child > th.dxbl-grid-header-indent-cell {
    border-top-left-radius: 24px !important;
}

.dxbl-grid-table > thead > tr:first-child > th:nth-last-child(2),
.dxbl-grid-table > thead > tr:first-child > th.dxbl-grid-command-cell {
    border-top-right-radius: 24px !important;
}

/* When filter row is present, treat header + filter as one unit */
.dxbl-grid-table > thead > tr:first-child > th:first-child:has(+ tr.dxbl-grid-filter-row),
.dxbl-grid-table > thead > tr:first-child > th.dxbl-grid-header-indent-cell:has(+ tr.dxbl-grid-filter-row) {
    border-bottom-left-radius: 0 !important;
}

.dxbl-grid-table > thead > tr:first-child > th:nth-last-child(2):has(+ tr.dxbl-grid-filter-row),
.dxbl-grid-table > thead > tr:first-child > th.dxbl-grid-command-cell:has(+ tr.dxbl-grid-filter-row) {
    border-bottom-right-radius: 0 !important;
}

/* Apply bottom radius to filter row when present */
.dxbl-grid-filter-row > td:first-child {
    border-bottom-left-radius: 24px !important;
}

.dxbl-grid-filter-row > td:nth-last-child(2),
.dxbl-grid-filter-row > td.dxbl-grid-command-cell {
    border-bottom-right-radius: 24px !important;
}

/* When NO filter row is present, give header bottom radius */
.dxbl-grid-table > thead > tr:first-child:not(:has(+ tr.dxbl-grid-filter-row)) > th:first-child,
.dxbl-grid-table > thead > tr:first-child:not(:has(+ tr.dxbl-grid-filter-row)) > th.dxbl-grid-header-indent-cell {
    border-bottom-left-radius: 24px !important;
}

.dxbl-grid-table > thead > tr:first-child:not(:has(+ tr.dxbl-grid-filter-row)) > th:nth-last-child(2),
.dxbl-grid-table > thead > tr:first-child:not(:has(+ tr.dxbl-grid-filter-row)) > th.dxbl-grid-command-cell {
    border-bottom-right-radius: 24px !important;
}

/* Grid container styling */
.dxbl-grid {
    border-radius: 24px;
    overflow: hidden;
    border: none !important;
    background: transparent;
    box-shadow: none !important;
}

/* Remove border between search panel and grid */
.dxbl-grid-top-panel {
    border: none !important;
    border-bottom: none !important;
    background: transparent;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Ensure header maintains rounded corners when top panel is present */
.dxbl-grid-top-panel + .dxbl-scroll-viewer .dxbl-grid-table > thead > tr:first-child > th:first-child,
.dxbl-grid-top-panel + .dxbl-scroll-viewer .dxbl-grid-table > thead > tr:first-child > th.dxbl-grid-header-indent-cell {
    border-top-left-radius: 0.75rem !important;
}

.dxbl-grid-top-panel + .dxbl-scroll-viewer .dxbl-grid-table > thead > tr:first-child > th:nth-last-child(2),
.dxbl-grid-top-panel + .dxbl-scroll-viewer .dxbl-grid-table > thead > tr:first-child > th.dxbl-grid-command-cell {
    border-top-right-radius: 0.75rem !important;
}

/* When filter row is present with top panel, apply same logic */
.dxbl-grid-top-panel + .dxbl-scroll-viewer .dxbl-grid-table > thead > tr:first-child > th:first-child:has(+ tr.dxbl-grid-filter-row),
.dxbl-grid-top-panel + .dxbl-scroll-viewer .dxbl-grid-table > thead > tr:first-child > th.dxbl-grid-header-indent-cell:has(+ tr.dxbl-grid-filter-row) {
    border-bottom-left-radius: 0 !important;
}

.dxbl-grid-top-panel + .dxbl-scroll-viewer .dxbl-grid-table > thead > tr:first-child > th:nth-last-child(2):has(+ tr.dxbl-grid-filter-row),
.dxbl-grid-top-panel + .dxbl-scroll-viewer .dxbl-grid-table > thead > tr:first-child > th.dxbl-grid-command-cell:has(+ tr.dxbl-grid-filter-row) {
    border-bottom-right-radius: 0 !important;
}

/* Search box container styling */
.dxbl-grid-search-box-container {
    border: none !important;
    background: transparent;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Expand button cell styling */
.dxbl-grid .dxbl-grid-expand-button-cell {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    width: auto;
}

/* Command cell styling */
.dxbl-grid-command-cell {
    padding: 0.75rem 1.25rem !important;
}

/* Detail row styling */
.dxbl-grid-detail-cell {
    background: rgba(247, 248, 249, 0.8);
    border-top: 1px solid rgba(6, 51, 64, 0.08);
    border-bottom: 1px solid rgba(6, 51, 64, 0.08);
}

/* Empty row styling */
.dxbl-grid-empty-row {
    display: none;
}

/* Focus styling */
.dxbl-grid-table > tbody > tr:focus-within {
    background: rgba(154, 189, 223, 0.08);
    outline: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dxbl-grid-table > tbody > tr > td {
        padding: 0.75rem 1rem !important;
    }

    .dxbl-grid-table > thead > tr > th {
        padding: 1rem 1rem 0.75rem 1rem !important;
    }
}

/* Filter row styling - make it compact with subtle gray background */
.dxbl-grid-filter-row {
    background: rgba(6, 51, 64, 0.03) !important;
}

.dxbl-grid-filter-row > td {
    padding: 0.25rem 0.75rem !important;
    height: auto !important;
    min-height: auto !important;
    max-height: 2.5rem !important;
    background: transparent;
    border: none !important;
    border-bottom: 1px solid rgba(6, 51, 64, 0.06) !important;
}

.dxbl-grid-filter-row > td > * {
    margin: 0 !important;
    padding: 0 !important;
}

.dxbl-grid-filter-row .dxbl-text-edit-input {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.85rem !important;
    height: 1.75rem !important;
    min-height: 1.75rem !important;
    max-height: 1.75rem !important;
    border: 1px solid rgba(6, 51, 64, 0.1) !important;
    border-radius: 0.375rem !important;
    background: white !important;
}

.dxbl-grid-filter-row .dxbl-spin-btns {
    height: 1.75rem !important;
}

.dxbl-grid-filter-row .dxbl-spin-btn-inc,
.dxbl-grid-filter-row .dxbl-spin-btn-dec {
    height: 0.875rem !important;
    min-height: 0.875rem !important;
    max-height: 0.875rem !important;
    padding: 0 !important;
    border: none !important;
    background: rgba(6, 51, 64, 0.05) !important;
}

.dxbl-grid-filter-row .dxbl-btn-group {
    height: 1.75rem !important;
}

.dxbl-grid-filter-row .dxbl-edit-btn-dropdown {
    height: 1.75rem !important;
    min-height: 1.75rem !important;
    max-height: 1.75rem !important;
    padding: 0 0.5rem !important;
    border: 1px solid rgba(6, 51, 64, 0.1) !important;
    background: white !important;
}

/* Add padding above title section for drill-in grids */
.dxbl-grid-detail-cell {
    padding-top: 1.5rem !important;
}

.dxbl-grid-detail-cell h4,
.dxbl-grid-detail-cell .detail-title {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Target the content div inside detail cells for better spacing */
.dxbl-grid-detail-cell > div {
    padding-top: 1rem !important;
}

.dxbl-grid-detail-cell > div > h4,
.dxbl-grid-detail-cell > div > .detail-title {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Simple 10px padding above detail-title class in all DxGrids */
.detail-title {
    padding-top: 10px !important;
}

/* Add spacing between header/filter section and first row */
.dxbl-grid-table > thead + tbody > tr:first-child > td {
    padding-top: 0.75rem !important;
}

/* Ensure proper spacing for grids with filter rows */
.dxbl-grid-table > thead > tr.dxbl-grid-filter-row + tbody > tr:first-child > td {
    padding-top: 0.75rem !important;
}