/* ═══════════════════════════════════════════════════════════════
   Compact GridView Override  — kartik\grid\GridView
   Applies to both light and dark Bootstrap 5 themes.
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Variables (Pastel Light defaults) ── */
:root {
    --gv-font:           "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, "Courier New", monospace;
    --gv-font-size:      0.78rem;
    --gv-cell-py:        3px;
    --gv-cell-px:        8px;

    --gv-border:         #d4dae6;
    --gv-header-bg:      #e8ecf5;
    --gv-header-color:   #5a6072;
    --gv-row-even-bg:    #ffffff;
    --gv-row-odd-bg:     #f4f6fb;
    --gv-row-hover-bg:   #eaedf8;
    --gv-action-color:   #7a8298;
    --gv-action-hover:   #7da7e6;
}

/* ══ Pastel Monokai Dark GridView Variables ══ */
[data-bs-theme="dark"] {
    --gv-border:         #484338;
    --gv-header-bg:      #2a2822;
    --gv-header-color:   #b0a898;
    --gv-row-even-bg:    #2d2a26;
    --gv-row-odd-bg:     #262420;
    --gv-row-hover-bg:   #37342c;
    --gv-action-color:   #989488;
    --gv-action-hover:   #a4d4e0;
}

/* ── Table base ── */
.grid-view table,
.kv-grid-table {
    font-family: var(--gv-font), monospace !important;
    font-size:        var(--gv-font-size) !important;
    border-collapse:  collapse !important;
    width:            100%;
    margin-bottom:    0;
}

/* ── Cells — ultra-tight padding ── */
.grid-view table td,
.grid-view table th,
.kv-grid-table td,
.kv-grid-table th {
    padding:       var(--gv-cell-py) var(--gv-cell-px) !important;
    border-color:  var(--gv-border) !important;
    border-width:  1px !important;
    border-style:  solid !important;
    vertical-align: middle !important;
    line-height:   1.35 !important;
}

/* ── Header ── */
.grid-view table thead th,
.kv-grid-table thead th,
.grid-view th,
.grid-view th.kv-merged-header {
    background-color: var(--gv-header-bg) !important;
    color:            var(--gv-header-color) !important;
    font-family: var(--gv-font), monospace !important;
    font-size:        0.70rem !important;
    font-weight:      600 !important;
    text-transform:   uppercase !important;
    letter-spacing:   0.06em !important;
    white-space:      nowrap !important;
    box-shadow:       none !important;
    border-top:       1px solid var(--gv-border) !important;
}

/* Header sort links */
.grid-view th a,
.kv-grid-table thead th a {
    color:           var(--gv-header-color) !important;
    text-decoration: none !important;
    font-weight:     600 !important;
}

.grid-view th a:hover,
.kv-grid-table thead th a:hover {
    color: var(--gv-action-hover) !important;
}

/* ── Alternating rows ── */
.grid-view table tbody tr:nth-child(even) td,
.kv-grid-table tbody tr:nth-child(even) td {
    background-color: var(--gv-row-even-bg) !important;
}

.grid-view table tbody tr:nth-child(odd) td,
.kv-grid-table tbody tr:nth-child(odd) td {
    background-color: var(--gv-row-odd-bg) !important;
}

/* ── Hover row ── */
.grid-view table tbody tr:hover td,
.kv-grid-table tbody tr:hover td {
    background-color: var(--gv-row-hover-bg) !important;
    transition: background-color 0.12s ease !important;
}

/* ── Action column buttons ── */
.grid-view td .btn,
.kv-grid-table td .btn,
.grid-view td a.btn,
.kv-grid-table td a.btn {
    padding:       1px 5px !important;
    font-size:     0.72rem !important;
    line-height:   1.2 !important;
    border:        none !important;
    background:    transparent !important;
    box-shadow:    none !important;
    color:         var(--gv-action-color) !important;
    transition:    color 0.15s ease, transform 0.1s ease !important;
}

.grid-view td .btn:hover,
.kv-grid-table td .btn:hover,
.grid-view td a.btn:hover,
.kv-grid-table td a.btn:hover {
    color:     var(--gv-action-hover) !important;
    transform: scale(1.15) !important;
    background: transparent !important;
}

/* Action column cell — no extra padding ── */
.grid-view td.action-column,
.kv-grid-table td.action-column,
.grid-view th.action-column,
.kv-grid-table th.action-column {
    white-space: nowrap !important;
    text-align:  center !important;
    width:       1% !important;   /* shrink-to-content */
}

/* ── Kartik toolbar / summary ── */
.kv-panel-before,
.summary,
.kv-grid-panel .panel-heading {
    font-family: var(--gv-font, monospace), monospace !important;
    font-size:   0.75rem !important;
    text-align: center;
}

/* Remove Bootstrap table's default heavy borders */
.grid-view .table-bordered {
    border: 1px solid var(--gv-border) !important;
}

/* ── Pagination — keep compact ── */
.grid-view .pagination {
    font-size:  0.75rem !important;
    margin-top: 6px !important;
    justify-content: center;
}

.grid-view .pagination .page-link {
    padding:   3px 8px !important;
    font-size: 0.75rem !important;
}

/* ── Empty cell / no-results ── */
.grid-view .empty {
    font-family: var(--gv-font), monospace !important;
    font-size:   var(--gv-font-size) !important;
    padding:     12px var(--gv-cell-px) !important;
    color:       var(--gv-action-color) !important;
    text-align:  center !important;
}

/* ── Checkbox column ── */
.grid-view td.kv-row-select,
.grid-view th.kv-row-select {
    width:      1% !important;
    text-align: center !important;
    padding:    var(--gv-cell-py) 6px !important;
}

/* ── Selected row highlight (kartik checkboxes) ── */
.grid-view tr.selected td {
    background-color: color-mix(in srgb, var(--gv-row-hover-bg) 70%, transparent) !important;
}

/* ── Sorting arrows — inherit compact header color ── */
.grid-view a.asc:after {
    border-bottom-color: var(--gv-header-color) !important;
}

.grid-view a.desc:after {
    border-top-color: var(--gv-header-color) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Filter Row — compact inputs that match the table density
   Kartik renders filters as <tr class="filters"> inside thead.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --gv-filter-bg:           #ffffff;
    --gv-filter-border:       #cdd2dc;
    --gv-filter-color:        #4a5068;
    --gv-filter-placeholder:  #9da5b8;
    --gv-filter-focus-border: #7da7e6;
    --gv-filter-focus-shadow: rgba(125, 167, 230, 0.20);
}

[data-bs-theme="dark"] {
    --gv-filter-bg:           #333028;
    --gv-filter-border:       #484338;
    --gv-filter-color:        #e8e4d8;
    --gv-filter-placeholder:  #8a8478;
    --gv-filter-focus-border: #88bcc8;
    --gv-filter-focus-shadow: rgba(136, 188, 200, 0.20);
}

/* Filter row cell — no extra gap */
.grid-view tr.filters td,
.kv-grid-table tr.filters td {
    background-color: var(--gv-header-bg) !important;
    padding:          2px 4px !important;
    border-color:     var(--gv-border) !important;
}

/* All inputs / selects / textareas inside filter row */
.grid-view tr.filters td .form-control,
.grid-view tr.filters td .form-select,
.grid-view tr.filters td input,
.grid-view tr.filters td select,
.grid-view tr.filters td textarea,
.kv-grid-table tr.filters td .form-control,
.kv-grid-table tr.filters td .form-select,
.kv-grid-table tr.filters td input,
.kv-grid-table tr.filters td select,
.kv-grid-table tr.filters td textarea {
    font-family: var(--gv-font), monospace !important;
    font-size:     0.72rem !important;
    padding:       2px 5px !important;
    height:        auto !important;
    line-height:   1.4 !important;
    min-height:    0 !important;
    border-radius: 3px !important;
    border:        1px solid var(--gv-filter-border) !important;
    background-color: var(--gv-filter-bg) !important;
    color:         var(--gv-filter-color) !important;
    box-shadow:    none !important;
    width:         100% !important;
    transition:    border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Placeholder text */
.grid-view tr.filters td input::placeholder,
.grid-view tr.filters td textarea::placeholder,
.kv-grid-table tr.filters td input::placeholder {
    color:   var(--gv-filter-placeholder) !important;
    opacity: 1 !important;
}

/* Focus state */
.grid-view tr.filters td .form-control:focus,
.grid-view tr.filters td .form-select:focus,
.grid-view tr.filters td input:focus,
.grid-view tr.filters td select:focus,
.kv-grid-table tr.filters td input:focus,
.kv-grid-table tr.filters td select:focus {
    border-color: var(--gv-filter-focus-border) !important;
    box-shadow:   0 0 0 2px var(--gv-filter-focus-shadow) !important;
    outline:      none !important;
}

/* Select2 inside filter row — shrink the trigger to match */
.grid-view tr.filters td .select2-container,
.kv-grid-table tr.filters td .select2-container {
    font-family: var(--gv-font, monospace), monospace !important;
    font-size:   0.72rem !important;
    width:       100% !important;
}

.grid-view tr.filters td .select2-container--krajee-bs5 .select2-selection,
.kv-grid-table tr.filters td .select2-container--krajee-bs5 .select2-selection {
    min-height:    0 !important;
    height:        auto !important;
    padding:       2px 5px !important;
    font-size:     0.72rem !important;
    border-radius: 3px !important;
    border-color:  var(--gv-filter-border) !important;
    background-color: var(--gv-filter-bg) !important;
}

.grid-view tr.filters td .select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered,
.kv-grid-table tr.filters td .select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered {
    font-size:   0.72rem !important;
    line-height: 1.4 !important;
    padding:     0 !important;
    color:       var(--gv-filter-color) !important;
}

/* Caret arrow inside compact select2 */
.grid-view tr.filters td .select2-container--krajee-bs5 .select2-selection--single .select2-selection__arrow,
.kv-grid-table tr.filters td .select2-container--krajee-bs5 .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top:    0 !important;
}