/*
   ═══════════════════════════════════════════════════════════════════════════════
   MODERN PROFESSIONAL GRID SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════

   WHY GRID USES !important:
   Unlike form inputs (text-edit, spin-edit), grid and pager components do NOT
   use the CSS variable cascade for all styling. DevExpress applies many styles
   directly, so we MUST use !important to override them.

   This is different from modern-forms.css where we use DevExpress variables
   (--dxbl-text-edit-*) and validation "just works".

   ARCHITECTURE:
   - dx-theme-overrides.css: Sets some grid/pager variables (limited effect)
   - modern-grid.css: Direct property overrides with !important (required)

   WHAT'S STYLED HERE:
   - Grid container, headers, rows, cells
   - Pager buttons, navigation, InputBox mode
   - Search box styling
   - Inline edit form (.modern-edit-form)
   - Custom tabs (.custom-tabs)

   References:
   - DevExpress.Blazor.Themes.Fluent/scss/ds-themes/components/grid/
   - DevExpress.Blazor.Themes.Fluent/scss/ds-themes/components/pager/

   Last Updated: 2026-01-08
   ═══════════════════════════════════════════════════════════════════════════════
*/

:root {
    /* Legacy grid variables - kept for backwards compatibility */
    /* New code should use DevExpress variables from dx-theme-overrides.css */
    --grid-font: var(--dxbl-grid-font-family, 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif);
    --grid-header-text: var(--dxbl-grid-header-color, rgba(148, 163, 184, 0.85));
    --grid-border: var(--dxbl-grid-border-color, rgba(148, 163, 184, 0.12));
    --grid-row-hover: var(--dxbl-grid-hover-bg, rgba(59, 130, 246, 0.06));
    --grid-text: var(--dxbl-grid-color, #e2e8f0);
    --grid-text-muted: var(--dxbl-pager-color, rgba(148, 163, 184, 0.85));
}

/* === MODERN GLASS TABS - WPF Style === */
.custom-tabs.dxbl-tabs {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Tab list container */
.custom-tabs .dxbl-tabs-tablist,
.custom-tabs dxbl-tab-list {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 0 1px !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.custom-tabs .dxbl-tabs-tablist ul,
.custom-tabs dxbl-tab-list ul {
    display: flex !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
}

.custom-tabs .dxbl-tabs-tablist li,
.custom-tabs dxbl-tab-list li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Individual tab items - WPF style with top rounded corners */
.custom-tabs .dxbl-tabs-item,
.custom-tabs dxbl-tab-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: rgba(51, 65, 85, 0.5) !important;
    border: 1px solid rgba(100, 116, 139, 0.25) !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    color: var(--grid-text-muted) !important;
    font-family: var(--grid-font) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    padding: var(--space-2-5, 0.625rem) var(--space-5, 1.25rem) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
    position: relative !important;
    top: 1px !important;
}

/* Tab hover state */
.custom-tabs .dxbl-tabs-item:hover,
.custom-tabs dxbl-tab-item:hover {
    background: rgba(51, 65, 85, 0.7) !important;
    border-color: rgba(100, 116, 139, 0.35) !important;
    color: var(--grid-text) !important;
}

/* Active tab - connects to content panel */
.custom-tabs .dxbl-tabs-item.dxbl-active,
.custom-tabs dxbl-tab-item.dxbl-active {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(100, 116, 139, 0.3) !important;
    border-bottom: 1px solid rgba(30, 41, 59, 0.95) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    z-index: 3 !important;
}

.custom-tabs .dxbl-tabs-item.dxbl-active:hover,
.custom-tabs dxbl-tab-item.dxbl-active:hover {
    background: rgba(30, 41, 59, 0.95) !important;
    color: #ffffff !important;
}

/* Tab icon styling */
.custom-tabs .tab-icon {
    font-size: 0.9rem !important;
    opacity: 0.7 !important;
    margin-right: var(--space-2, 0.5rem) !important;
}

.custom-tabs .dxbl-active .tab-icon {
    opacity: 1 !important;
}

/* Tab content panel - the main container that tabs sit on */
.custom-tabs .dxbl-tabs-content-panel {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
    border-radius: 0 8px 8px 8px !important;
    padding: 1rem !important;
    margin-top: -1px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Hide tab scroll buttons only (not pager buttons) */
.custom-tabs > .dxbl-tabs-scroll-btn,
.custom-tabs .dxbl-tabs-tablist .dxbl-btn,
.custom-tabs dxbl-tab-list .dxbl-btn {
    display: none !important;
}

/* Remove any default underline/border indicators */
.custom-tabs .dxbl-tabs-item::after,
.custom-tabs dxbl-tab-item::after {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GRID CONTAINER - Professional Soft Glass
   ═══════════════════════════════════════════════════════════════════════════════ */
.dxbl-grid {
    background: transparent !important;
    color: var(--grid-text) !important;
    border: none !important;
    font-family: var(--grid-font) !important;
    font-size: 0.875rem !important;
}

/* Panels */
.dxbl-grid .dxbl-grid-filter-panel,
.dxbl-grid .dxbl-grid-status-panel {
    background: transparent !important;
    color: rgba(148, 163, 184, 0.9) !important;
}

/* Table container - subtle soft glass effect */
.dxbl-grid .dxbl-grid-table {
    background: rgba(15, 23, 42, 0.3) !important;
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* === SEARCH BOX - Clean Simple Design === */
.dxbl-grid .dxbl-grid-top-panel {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem) !important;
    background: transparent !important;
}

/* Search box container - simple rounded input style */
.dxbl-grid .dxbl-grid-search-box-container {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 400px !important;
    min-height: auto !important;
    height: auto !important;
}

/* Inner search box wrapper - rectangular with small rounding */
.dxbl-grid .dxbl-grid-search-box {
    background: rgba(51, 65, 85, 0.4) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    border-radius: 6px !important;
    padding: 0 var(--space-2, 0.5rem) 0 0.5rem !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

.dxbl-grid .dxbl-grid-search-box:focus-within {
    border-color: rgba(59, 130, 246, 0.4) !important;
    background: rgba(51, 65, 85, 0.5) !important;
}

/* Inner text edit wrapper - remove all backgrounds */
.dxbl-grid .dxbl-grid-search-box .dxbl-text-edit {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* Search input field */
.dxbl-grid .dxbl-grid-search-box input.dxbl-text-edit-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    font-family: var(--grid-font) !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Search input placeholder */
.dxbl-grid .dxbl-grid-search-box input.dxbl-text-edit-input::placeholder {
    color: rgba(148, 163, 184, 0.5) !important;
    font-weight: 400 !important;
    font-family: var(--grid-font) !important;
}

/* Search icon - simple decorative icon, not a button */
.dxbl-grid .dxbl-grid-search-box .dxbl-btn.dxbl-btn-icon,
.dxbl-grid .dxbl-grid-search-box .dxbl-btn.dxbl-btn-outline-secondary.dxbl-btn-icon {
    /* Reset all button styling */
    all: unset !important;
    /* Simple icon styling */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    order: -1 !important;
    pointer-events: none !important;
    color: rgba(148, 163, 184, 0.6) !important;
}

.dxbl-grid .dxbl-grid-search-box .dxbl-btn.dxbl-btn-icon .dxbl-image,
.dxbl-grid .dxbl-grid-search-box .dxbl-btn.dxbl-btn-icon svg {
    width: 14px !important;
    height: 14px !important;
    color: inherit !important;
    fill: currentColor !important;
}

/* Clear button (X) - rectangular with slight rounding */
.dxbl-grid .dxbl-grid-search-box .dxbl-edit-btn-clear {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 1px 0 0.25rem !important;
    min-width: 26px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: rgba(148, 163, 184, 0.6) !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.dxbl-grid .dxbl-grid-search-box .dxbl-edit-btn-clear:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: rgba(239, 68, 68, 0.9) !important;
}

.dxbl-grid .dxbl-grid-search-box .dxbl-edit-btn-clear .dxbl-image,
.dxbl-grid .dxbl-grid-search-box .dxbl-edit-btn-clear svg {
    width: 12px !important;
    height: 12px !important;
    opacity: 0.8 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GRID HEADER - Clean & Compact
   ═══════════════════════════════════════════════════════════════════════════════ */
.dxbl-grid .dxbl-grid-table thead tr {
    background: rgba(30, 41, 59, 0.5) !important;
}

.dxbl-grid .dxbl-grid-table thead th {
    color: rgba(148, 163, 184, 0.9) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 0.75rem 1rem !important;
    vertical-align: middle !important;
    border: none !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15) !important;
    background: transparent !important;
    font-family: var(--grid-font) !important;
    white-space: nowrap !important;
}

/* Header hover for sortable columns */
.dxbl-grid .dxbl-grid-table thead th:hover {
    color: rgba(226, 232, 240, 0.95) !important;
    background: rgba(51, 65, 85, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GRID ROWS - Delicate Lines & Smooth Hover
   ═══════════════════════════════════════════════════════════════════════════════ */
.dxbl-grid .dxbl-grid-table tbody tr {
    background: transparent !important;
    transition: all 0.15s ease !important;
}

/* Cells - compact with delicate bottom border */
.dxbl-grid .dxbl-grid-table tbody td {
    padding: 0.65rem 1rem !important;
    vertical-align: middle !important;
    border: none !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.08) !important;
    color: rgba(226, 232, 240, 0.95) !important;
    font-size: 0.8rem !important;
    font-family: var(--grid-font) !important;
    font-weight: 400 !important;
    transition: all 0.15s ease !important;
}

/* Row hover - subtle highlight */
.dxbl-grid .dxbl-grid-table tbody tr:hover > td {
    background: rgba(51, 65, 85, 0.4) !important;
    border-bottom-color: rgba(100, 116, 139, 0.12) !important;
}

/* Selected row */
.dxbl-grid .dxbl-grid-table tbody tr.dxbl-grid-selected-row > td,
.dxbl-grid .dxbl-grid-table tbody tr[data-selected="true"] > td {
    background: rgba(59, 130, 246, 0.1) !important;
    border-bottom-color: rgba(59, 130, 246, 0.15) !important;
}

/* Focused row */
.dxbl-grid .dxbl-grid-table tbody tr:focus-within > td {
    background: rgba(59, 130, 246, 0.08) !important;
}

/* Last row - no bottom border for clean edge */
.dxbl-grid .dxbl-grid-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Alternating rows (if enabled) - very subtle */
.dxbl-grid .dxbl-grid-table tbody tr:nth-child(even) > td {
    background: rgba(30, 41, 59, 0.2) !important;
}

.dxbl-grid .dxbl-grid-table tbody tr:nth-child(even):hover > td {
    background: rgba(51, 65, 85, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ACTION COLUMNS - Tight padding for status/edit/details buttons
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Action columns - minimal padding, centered content */
.modern-glass-grid .dxbl-grid-table td:nth-child(1),
.modern-glass-grid .dxbl-grid-table td:nth-child(2),
.modern-glass-grid .dxbl-grid-table td:nth-child(3) {
    padding: 0.35rem 2px !important;
    text-align: center !important;
}

/* Also target header cells for action columns */
.modern-glass-grid .dxbl-grid-table th:nth-child(1),
.modern-glass-grid .dxbl-grid-table th:nth-child(2),
.modern-glass-grid .dxbl-grid-table th:nth-child(3) {
    padding: 0.4rem 2px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GRID CELL BUTTONS - Load/Show buttons styled to match action buttons
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Style Bootstrap btn-sm buttons within grids to match our 30px height */
.modern-glass-grid .btn.btn-sm {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    font-size: 0.7rem !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500 !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

/* Ensure icon inside button doesn't add extra height */
.modern-glass-grid .btn.btn-sm i,
.modern-glass-grid .btn.btn-sm .oi {
    font-size: 0.65rem !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Normalize cell content wrappers for consistent row height */
.modern-glass-grid .dxbl-grid-table td .d-flex {
    min-height: 26px !important;
    align-items: center !important;
}

/* Remove bottom margin from badges in grid cells */
.modern-glass-grid .dxbl-grid-table td .badge {
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
}

/* Ensure text-muted spans match height */
.modern-glass-grid .dxbl-grid-table td .text-muted.small {
    line-height: 26px !important;
}

/* Primary outline - for "Show Locations" */
.modern-glass-grid .btn.btn-sm.btn-outline-primary {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #60a5fa !important;
}

.modern-glass-grid .btn.btn-sm.btn-outline-primary:hover {
    background: rgba(59, 130, 246, 0.25) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #93c5fd !important;
}

/* Info outline - for "Show Count" */
.modern-glass-grid .btn.btn-sm.btn-outline-info {
    background: rgba(14, 165, 233, 0.15) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    color: #38bdf8 !important;
}

.modern-glass-grid .btn.btn-sm.btn-outline-info:hover {
    background: rgba(14, 165, 233, 0.25) !important;
    border-color: rgba(14, 165, 233, 0.5) !important;
    color: #7dd3fc !important;
}

/* Secondary outline - general use */
.modern-glass-grid .btn.btn-sm.btn-outline-secondary {
    background: rgba(100, 116, 139, 0.15) !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    color: rgba(203, 213, 225, 0.9) !important;
}

.modern-glass-grid .btn.btn-sm.btn-outline-secondary:hover {
    background: rgba(100, 116, 139, 0.25) !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
    color: #e2e8f0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PAGER - Clean Minimal Design
   ═══════════════════════════════════════════════════════════════════════════════ */
.dxbl-grid .dxbl-pager-container,
.dxbl-grid .dxbl-grid-bottom-panel,
.dxbl-pager-container {
    background: rgba(30, 41, 59, 0.3) !important;
    border-top: 1px solid rgba(100, 116, 139, 0.1) !important;
    border-bottom: none !important;
    padding: 0.6rem 1rem !important;
    border-radius: 0 0 8px 8px !important;
}

.dxbl-grid .dxbl-pager,
.dxbl-pager {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    font-family: var(--grid-font) !important;
}

/* Summary text - muted */
.dxbl-grid .dxbl-pager-summary,
.dxbl-pager-summary {
    color: rgba(148, 163, 184, 0.7) !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    font-family: var(--grid-font) !important;
}

/* Page buttons - compact pills */
.dxbl-grid .dxbl-pager-page-btn,
.dxbl-pager .dxbl-pager-page-btn {
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(148, 163, 184, 0.8) !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    transition: all 0.12s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--grid-font) !important;
}

/* Page button hover */
.dxbl-grid .dxbl-pager-page-btn:hover:not(.dxbl-pager-active-page-btn),
.dxbl-pager .dxbl-pager-page-btn:hover:not(.dxbl-pager-active-page-btn) {
    background: rgba(100, 116, 139, 0.2) !important;
    color: rgba(226, 232, 240, 0.95) !important;
}

/* Active page - subtle accent */
.dxbl-grid .dxbl-pager-active-page-btn,
.dxbl-pager .dxbl-pager-active-page-btn,
.dxbl-grid .dxbl-pager-page-btn[aria-current="page"],
.dxbl-pager .dxbl-pager-page-btn[aria-current="page"] {
    background: rgba(100, 116, 139, 0.25) !important;
    border: none !important;
    color: rgba(226, 232, 240, 0.95) !important;
    font-weight: 600 !important;
}

.dxbl-grid .dxbl-pager-active-page-btn:hover,
.dxbl-pager .dxbl-pager-active-page-btn:hover {
    background: rgba(100, 116, 139, 0.35) !important;
}

/* Navigation buttons - compact */
.dxbl-grid .dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn),
.dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn) {
    min-width: 26px !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(148, 163, 184, 0.6) !important;
    transition: all 0.12s ease !important;
}

/* Hide nav button text */
.dxbl-grid .dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn) .dxbl-btn-caption,
.dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn) .dxbl-btn-caption {
    display: none !important;
}

/* Nav button icons - smaller */
.dxbl-grid .dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn) .dxbl-image,
.dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn) .dxbl-image {
    width: 14px !important;
    height: 14px !important;
}

/* Nav button hover */
.dxbl-grid .dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn):hover:not(:disabled),
.dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn):hover:not(:disabled) {
    background: rgba(100, 116, 139, 0.2) !important;
    color: rgba(226, 232, 240, 0.9) !important;
}

/* Disabled buttons */
.dxbl-grid .dxbl-pager .dxbl-btn:disabled,
.dxbl-pager .dxbl-btn:disabled {
    background: transparent !important;
    border: none !important;
    color: rgba(100, 116, 139, 0.25) !important;
    cursor: not-allowed !important;
}

/* Ellipsis */
.dxbl-grid .dxbl-pager-ellipsis,
.dxbl-pager-ellipsis {
    color: rgba(100, 116, 139, 0.4) !important;
    padding: 0 0.15rem !important;
    font-size: 0.75rem !important;
}

/* Standalone pager shell */
.modern-pager-shell.dxbl-pager {
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.25rem !important;
    flex-wrap: wrap !important;
    background: rgba(30, 41, 59, 0.3) !important;
    border: 1px solid rgba(100, 116, 139, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PAGER INPUTBOX MODE - Compact Style
   ═══════════════════════════════════════════════════════════════════════════════ */
.dxbl-grid .dxbl-pager .dxbl-pager-goto-page,
.dxbl-pager .dxbl-pager-goto-page {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-family: var(--grid-font) !important;
}

/* "of X" text */
.dxbl-grid .dxbl-pager .dxbl-pager-page-count,
.dxbl-pager .dxbl-pager-page-count,
.dxbl-grid .dxbl-pager .dxbl-text,
.dxbl-pager .dxbl-pager-goto-page .dxbl-text {
    color: rgba(148, 163, 184, 0.6) !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    font-family: var(--grid-font) !important;
}

/* Spin/text edit in pager - compact */
.dxbl-grid .dxbl-pager .dxbl-spin-edit,
.dxbl-pager .dxbl-spin-edit {
    background: rgba(51, 65, 85, 0.3) !important;
    border: 1px solid rgba(100, 116, 139, 0.15) !important;
    border-radius: 4px !important;
    height: 26px !important;
    min-height: 26px !important;
    min-width: 50px !important;
    max-width: 65px !important;
    transition: all 0.12s ease !important;
}

.dxbl-grid .dxbl-pager .dxbl-spin-edit:hover,
.dxbl-pager .dxbl-spin-edit:hover {
    border-color: rgba(100, 116, 139, 0.25) !important;
    background: rgba(51, 65, 85, 0.4) !important;
}

.dxbl-grid .dxbl-pager .dxbl-spin-edit:focus-within,
.dxbl-pager .dxbl-spin-edit:focus-within {
    border-color: rgba(148, 163, 184, 0.4) !important;
    background: rgba(51, 65, 85, 0.4) !important;
}

/* Input field */
.dxbl-grid .dxbl-pager .dxbl-spin-edit input,
.dxbl-pager .dxbl-spin-edit input,
.dxbl-grid .dxbl-pager .dxbl-spin-edit .dxbl-text-edit-input,
.dxbl-pager .dxbl-spin-edit .dxbl-text-edit-input {
    background: transparent !important;
    border: none !important;
    color: rgba(226, 232, 240, 0.9) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    font-family: var(--grid-font) !important;
    text-align: center !important;
    padding: 0 0.35rem !important;
}

/* Hide spin buttons */
.dxbl-grid .dxbl-pager .dxbl-spin-edit .dxbl-spin-btns,
.dxbl-pager .dxbl-spin-edit .dxbl-spin-btns {
    display: none !important;
}

/* Text edit variant */
.dxbl-grid .dxbl-pager .dxbl-text-edit,
.dxbl-pager .dxbl-pager-goto-page .dxbl-text-edit {
    background: rgba(51, 65, 85, 0.3) !important;
    border: 1px solid rgba(100, 116, 139, 0.15) !important;
    border-radius: 4px !important;
    height: 26px !important;
    min-height: 26px !important;
    min-width: 45px !important;
    max-width: 60px !important;
}

.dxbl-grid .dxbl-pager .dxbl-text-edit:focus-within,
.dxbl-pager .dxbl-pager-goto-page .dxbl-text-edit:focus-within {
    border-color: rgba(148, 163, 184, 0.4) !important;
}

.dxbl-grid .dxbl-pager .dxbl-text-edit input,
.dxbl-pager .dxbl-pager-goto-page .dxbl-text-edit input {
    background: transparent !important;
    border: none !important;
    color: rgba(226, 232, 240, 0.9) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-align: center !important;
}

/* === INLINE EDIT FORM - Matching Mockup Design === */
.modern-edit-form-shell {
    margin: 0.75rem 1rem 1rem;
    padding: 1.5rem 2rem 1.25rem;
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    border-radius: 12px !important;
}

.modern-edit-form {
    row-gap: 1rem;
    column-gap: 2rem;
    color: var(--grid-text);
    font-family: var(--grid-font);
}

/* Labels - left aligned, muted */
.modern-edit-form label,
.modern-edit-form .dxbl-fl-cpt {
    color: rgba(148, 163, 184, 0.85) !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    font-family: var(--grid-font) !important;
    min-width: 140px;
}

/* Form inputs - Dark subtle style matching mockup */
/* Note: .dxbl-memo-edit excluded to allow DxMemo to show multiple rows */
.modern-edit-form :is(.dxbl-text-edit:not(.dxbl-memo-edit), .dxbl-spin-edit, .dxbl-date-edit, .dxbl-combo-box, .dxbl-tag-box, .dxbl-input-editor) {
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(100, 116, 139, 0.25) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    transition: border-color 0.2s ease !important;
    min-height: 44px !important;
    height: 44px !important;
}

/* DxMemo - styled without fixed height to allow Rows="3" to work */
.modern-edit-form .dxbl-memo-edit {
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(100, 116, 139, 0.25) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    transition: border-color 0.2s ease !important;
}

.modern-edit-form :is(.dxbl-text-edit:not(.dxbl-memo-edit), .dxbl-spin-edit, .dxbl-date-edit, .dxbl-combo-box, .dxbl-tag-box, .dxbl-input-editor):focus-within {
    border-color: rgba(59, 130, 246, 0.5) !important;
}

.modern-edit-form .dxbl-memo-edit:focus-within {
    border-color: rgba(59, 130, 246, 0.5) !important;
}

/* Fix DxFormLayoutItem to allow DxMemo to expand - target the control wrapper */
.dxbl-fl-ctrl:has(.dxbl-memo-edit) {
    height: auto !important;
    min-height: auto !important;
    align-items: stretch !important;
}

.dxbl-fl-item:has(.dxbl-memo-edit) {
    align-items: stretch !important;
}

dxbl-memo-editor.dxbl-memo-edit {
    height: auto !important;
    min-height: 80px !important;
    display: block !important;
}

.dxbl-memo-edit textarea {
    min-height: 80px !important;
    height: auto !important;
}

.modern-edit-form :is(input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="search"],
        input[type="number"],
        input[type="date"],
        input[type="datetime-local"],
        textarea,
        .dxbl-text-edit-input) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    font-family: var(--grid-font) !important;
    padding: 0.65rem 1rem !important;
    height: 42px !important;
}

.modern-edit-form :is(input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="search"],
        input[type="number"],
        input[type="date"],
        input[type="datetime-local"],
        textarea,
        .dxbl-text-edit-input)::placeholder {
    color: rgba(148, 163, 184, 0.4) !important;
    font-weight: 400 !important;
}

.modern-edit-form textarea {
    min-height: 80px;
    height: auto !important;
}

.modern-edit-form .form-control-plaintext {
    background: transparent;
    border: 1px dashed rgba(100, 116, 139, 0.2);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    color: #e2e8f0;
    font-size: 0.9rem;
    height: 44px;
    display: flex;
    align-items: center;
}

.modern-edit-form .form-control-plaintext small {
    color: rgba(148, 163, 184, 0.6) !important;
}

/* Checkbox styling - simple square */
.modern-edit-form .dxbl-checkbox {
    height: 44px;
    display: flex;
    align-items: center;
}

.modern-edit-form .dxbl-checkbox .dxbl-checkbox-check-element {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(100, 116, 139, 0.4) !important;
    background: rgba(15, 23, 42, 0.5) !important;
}

/* === EDIT FORM BUTTONS === */
.grid-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(100, 116, 139, 0.15);
}

.grid-edit-actions .dxbl-btn.grid-edit-btn {
    min-width: 110px;
    height: 44px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    padding: 0 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.grid-edit-actions .dxbl-btn.grid-edit-btn .oi {
    font-size: 0.8rem;
}

/* Save button - uses custom CssClass, needs !important */
.grid-edit-actions .dxbl-btn.grid-edit-btn.grid-edit-btn--save {
    background: #3b82f6 !important;
    border: none !important;
    color: #ffffff !important;
}

.grid-edit-actions .dxbl-btn.grid-edit-btn.grid-edit-btn--save:hover:not(:disabled) {
    background: #2563eb !important;
}

/* Cancel button */
.grid-edit-actions .dxbl-btn.grid-edit-btn.grid-edit-btn--cancel {
    background: rgba(71, 85, 105, 0.5) !important;
    border: none !important;
    color: rgba(226, 232, 240, 0.9) !important;
}

.grid-edit-actions .dxbl-btn.grid-edit-btn.grid-edit-btn--cancel:hover:not(:disabled) {
    background: rgba(71, 85, 105, 0.7) !important;
    color: #ffffff !important;
}

.grid-edit-actions .dxbl-btn.grid-edit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === COMBOBOX / DROPDOWN BUTTONS - Grid Edit Form Only === */
/* Note: Global styles are in modern-forms.css */
.modern-edit-form :is(.dxbl-combo-box, .dxbl-date-edit, .dxbl-tag-box) .dxbl-editor-buttons .dxbl-btn {
    background: transparent !important;
    border: none !important;
    border-left: 1px solid rgba(148, 163, 184, 0.15) !important;
    border-radius: 0 5px 5px 0 !important;
    color: rgba(148, 163, 184, 0.7) !important;
    min-width: 28px !important;
    height: 100% !important;
    transition: color 0.2s ease !important;
}

.modern-edit-form :is(.dxbl-combo-box, .dxbl-date-edit, .dxbl-tag-box) .dxbl-editor-buttons .dxbl-btn:hover:not(:disabled) {
    color: rgba(59, 130, 246, 1) !important;
}

.modern-edit-form :is(.dxbl-combo-box, .dxbl-date-edit, .dxbl-tag-box) .dxbl-editor-buttons .dxbl-btn:disabled {
    color: rgba(148, 163, 184, 0.3) !important;
}

/* === DROPDOWN POPUP - Grid-specific styles only === */
/* Note: Global dropdown styles are in modern-forms.css */

/* Grid edit form dropdown toggle */
.modern-edit-form .dxbl-btn-group-right {
    background: transparent !important;
    border: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE HELPERS
   ═══════════════════════════════════════════════════════════════════════════════

   Breakpoints (matching DevExpress DeviceSize):
   - XSmall: < 576px  (phones)
   - Small:  < 768px  (phones + small tablets)
   - Medium: < 992px  (tablets)
   - Large:  < 1200px (small desktops)

   Use DxLayoutBreakpoint in Blazor for dynamic column visibility.
   Use these CSS classes for layout and spacing adjustments.

   See MOBILE-GUIDE.md for full documentation.
   ═══════════════════════════════════════════════════════════════════════════════
*/

/* Compact cell padding on phones */
@media (max-width: 575.98px) {
    .modern-glass-grid .dxbl-grid-table td {
        padding: 0.25rem 0.35rem !important;
        font-size: 0.8rem !important;
    }

    .modern-glass-grid .dxbl-grid-table th {
        padding: 0.35rem 0.35rem !important;
        font-size: 0.75rem !important;
    }

    /* Reduce search box height on mobile */
    .modern-glass-grid .dxbl-grid-search-box {
        height: 32px !important;
    }

    /* Card headers stack on mobile */
    .card-header.d-flex {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Reduce tabs content panel padding on mobile */
    .custom-tabs .dxbl-tabs-content-panel {
        padding: 0.5rem !important;
    }

    /* Reduce grid top panel (search) padding */
    .dxbl-grid .dxbl-grid-top-panel {
        padding: 0.5rem 0.5rem !important;
    }

    /* Reduce pager padding */
    .dxbl-grid .dxbl-pager-container,
    .dxbl-grid .dxbl-grid-bottom-panel,
    .dxbl-pager-container {
        padding: 0.35rem 0.4rem !important;
    }

    /* Pager - tighter layout on mobile */
    .dxbl-grid .dxbl-pager,
    .dxbl-pager {
        gap: 0.25rem !important;
        flex-wrap: wrap !important;
    }

    /* Hide pager summary on mobile - saves space */
    .dxbl-grid .dxbl-pager-summary,
    .dxbl-pager-summary {
        display: none !important;
    }

    /* Smaller page buttons on mobile */
    .dxbl-grid .dxbl-pager-page-btn,
    .dxbl-pager .dxbl-pager-page-btn {
        min-width: 24px !important;
        height: 24px !important;
        font-size: 0.7rem !important;
        margin: 0 1px !important;
    }

    /* Smaller navigation buttons on mobile */
    .dxbl-grid .dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn),
    .dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn) {
        min-width: 24px !important;
        width: 24px !important;
        height: 24px !important;
    }

    /* Nav button icons - even smaller on mobile */
    .dxbl-grid .dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn) .dxbl-image,
    .dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn) .dxbl-image {
        width: 12px !important;
        height: 12px !important;
    }

    /* Tighter go-to-page section */
    .dxbl-grid .dxbl-pager .dxbl-pager-goto-page,
    .dxbl-pager .dxbl-pager-goto-page {
        gap: 0.25rem !important;
    }

    /* Smaller page input on mobile */
    .dxbl-grid .dxbl-pager .dxbl-spin-edit,
    .dxbl-pager .dxbl-spin-edit,
    .dxbl-grid .dxbl-pager .dxbl-text-edit,
    .dxbl-pager .dxbl-pager-goto-page .dxbl-text-edit {
        height: 24px !important;
        min-height: 24px !important;
        min-width: 40px !important;
        max-width: 50px !important;
    }

    /* Smaller "of X" text on mobile */
    .dxbl-grid .dxbl-pager .dxbl-pager-page-count,
    .dxbl-pager .dxbl-pager-page-count,
    .dxbl-pager .dxbl-pager-goto-page .dxbl-text {
        font-size: 0.7rem !important;
    }

    /* Tab items - compact on mobile */
    .custom-tabs .dxbl-tabs-item,
    .custom-tabs dxbl-tab-item {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
}

/* Small screens (phones + small tablets) */
@media (max-width: 767.98px) {
    .modern-glass-grid .dxbl-grid-table td {
        padding: 0.3rem 0.4rem !important;
    }

    /* Reduce header padding */
    .modern-glass-grid .dxbl-grid-table th {
        padding: 0.4rem 0.4rem !important;
    }

    /* Reduce tabs content panel padding */
    .custom-tabs .dxbl-tabs-content-panel {
        padding: 0.65rem !important;
    }

    /* Reduce grid top panel (search) padding */
    .dxbl-grid .dxbl-grid-top-panel {
        padding: 0.6rem 0.75rem !important;
    }
}

/* Tablet and below - slightly reduced spacing */
@media (max-width: 991.98px) {
    .modern-glass-grid .dxbl-grid-table td {
        padding: 0.35rem 0.5rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AGE INDICATOR ROWS - Visual urgency cues for time-sensitive data
   Applied via CustomizeDataRowCss callback in DxGrid
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Warning level (1-3 days old) - subtle amber left border */
.modern-glass-grid .dxbl-grid-table tbody tr.age-warning > td:first-child {
    border-left: 3px solid rgba(251, 191, 36, 0.7) !important;
}

.modern-glass-grid .dxbl-grid-table tbody tr.age-warning:hover > td:first-child {
    border-left-color: rgba(251, 191, 36, 0.9) !important;
}

/* Urgent level (3+ days old) - coral/red left border */
.modern-glass-grid .dxbl-grid-table tbody tr.age-urgent > td:first-child {
    border-left: 3px solid rgba(248, 113, 113, 0.75) !important;
}

.modern-glass-grid .dxbl-grid-table tbody tr.age-urgent:hover > td:first-child {
    border-left-color: rgba(248, 113, 113, 0.95) !important;
}