/* ========================================
   DevExpress Grid Modern Styling
   ======================================== */

/* Grid Container */
.dxbl-grid {
    --dxbl-grid-header-bg: transparent;
    --dxbl-grid-header-color: white;
    --dxbl-grid-search-box-container-width: calc(100% - 0rem);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Grid Header Row */
.dxbl-grid-header-row {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

/* Grid Header Cells */
.dxbl-grid-header-cell {
    color: white !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 1rem 0.75rem !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.dxbl-grid-header-cell:last-child {
    border-right: none;
}

/* Grid Data Rows */
.dxbl-grid-data-row {
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dxbl-grid-data-row:hover {
    background: linear-gradient(90deg, rgba(30, 64, 175, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%) !important;
    transform: translateX(2px);
    box-shadow: inset 3px 0 0 #3b82f6;
}

/* Alternating Row Colors */
.alt-item {
    background-color: rgba(30, 64, 175, 0.08);
}

.alt-item > td {
    --dxbl-grid-bg: color-mix(in srgb, var(--bs-gray-300), transparent 50%);
}

/* Row Hover Effect */
.rowHover tbody > tr:hover {
    background-color: rgba(30, 64, 175, 0.12);
}

/* Pager Styling */
.dxbl-pager {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.dxbl-pager-button {
    border-radius: 8px;
    transition: all 0.2s ease;
}

.dxbl-pager-button:hover {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
    color: white !important;
    transform: translateY(-1px);
}

/* Dark Mode Support */
:root[data-mode="dark"] .dxbl-grid,
.dark .dxbl-grid {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

:root[data-mode="dark"] .dxbl-grid-header-row,
.dark .dxbl-grid-header-row {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
}

:root[data-mode="dark"] .dxbl-grid-data-row,
.dark .dxbl-grid-data-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

:root[data-mode="dark"] .dxbl-grid-data-row:hover,
.dark .dxbl-grid-data-row:hover {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.4) 0%, rgba(59, 130, 246, 0.4) 100%) !important;
    box-shadow: inset 3px 0 0 #60a5fa;
}

:root[data-mode="dark"] .alt-item,
.dark .alt-item {
    background-color: rgba(37, 99, 235, 0.15);
}

:root[data-mode="dark"] .rowHover tbody > tr:hover,
.dark .rowHover tbody > tr:hover {
    background-color: rgba(37, 99, 235, 0.25);
}

:root[data-mode="dark"] .dxbl-pager,
.dark .dxbl-pager {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}