/**
 * PQGrid Modern Theme
 * Enhanced Bootstrap 5-compliant styling for PQGrids
 * Provides dark headers, compact spacing, responsive design, and modern buttons
 */

/* ========================================
   GRID CONTAINER & WRAPPER
   ======================================== */

.pq-grid-modern {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e5e7eb !important;
}

.pq-grid-modern.ui-widget {
    background: #ffffff !important;
}

/* ========================================
   HEADER STYLING (Dark Theme)
   ======================================== */

.pq-grid-modern .pq-head {
    background: linear-gradient(to bottom, #2c3e50, #34495e) !important;
    border-bottom: 2px solid #1a252f !important;
}

.pq-grid-modern .pq-head .pq-header-cell {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 14px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: transparent !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.pq-grid-modern .pq-head .pq-header-cell:last-child {
    border-right: none !important;
}

/* Sort indicator styling */
.pq-grid-modern .pq-head .pq-header-cell.pq-sort-up::after,
.pq-grid-modern .pq-head .pq-header-cell.pq-sort-down::after {
    color: #3498db !important;
    font-size: 10px !important;
}

/* ========================================
   BODY & ROWS
   ======================================== */

.pq-grid-modern .pq-body {
    background: #ffffff !important;
}

.pq-grid-modern .pq-body .pq-row {
    border-bottom: 1px solid #f3f4f6 !important;
    transition: all 150ms ease !important;
}

.pq-grid-modern .pq-body .pq-row:hover {
    background: #f9fafb !important;
    box-shadow: inset 0 0 8px rgba(43, 111, 191, 0.04) !important;
}

.pq-grid-modern .pq-body .pq-row.pq-row-focus,
.pq-grid-modern .pq-body .pq-row.ui-state-highlight,
.pq-grid-modern .pq-body .pq-row.pq-selected {
    background: #eff6ff !important;
    border-left: 3px solid #3b82f6 !important;
}

/* ========================================
   CELLS
   ======================================== */

.pq-grid-modern .pq-body .pq-cell {
    padding: 10px 14px !important;
    color: #374151 !important;
    font-size: 13px !important;
    border-right: 1px solid #f3f4f6 !important;
    background: transparent !important;
}

.pq-grid-modern .pq-body .pq-cell:last-child {
    border-right: none !important;
}

/* Numeric cell alignment */
.pq-grid-modern .pq-body .pq-cell.pq-numeric,
.pq-grid-modern .pq-body .pq-cell[data-type="numeric"] {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    font-family: "Courier New", monospace !important;
}

/* Centered cells */
.pq-grid-modern .pq-body .pq-cell[data-align="center"] {
    text-align: center !important;
}

/* ========================================
   BUTTONS & ACTIONS IN CELLS
   ======================================== */

.pq-grid-modern .pq-body .btn-group-sm {
    gap: 4px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
}

.pq-grid-modern .pq-body .btn-outline-primary,
.pq-grid-modern .pq-body .btn-outline-danger,
.pq-grid-modern .pq-body .btn-outline-success {
    padding: 4px 8px !important;
    font-size: 11px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    transition: all 100ms ease !important;
}

.pq-grid-modern .pq-body .btn-outline-primary:hover {
    background: #dbeafe !important;
    border-color: #3b82f6 !important;
    color: #1e40af !important;
}

.pq-grid-modern .pq-body .btn-outline-danger:hover {
    background: #fee2e2 !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
}

.pq-grid-modern .pq-body .btn-outline-success:hover {
    background: #dcfce7 !important;
    border-color: #22c55e !important;
    color: #166534 !important;
}

/* ========================================
   CHECKBOXES
   ======================================== */

.pq-grid-modern .form-check-input {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
    border: 1.5px solid #d1d5db !important;
    transition: all 100ms ease !important;
}

.pq-grid-modern .form-check-input:checked {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
}

.pq-grid-modern .form-check-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
}

/* ========================================
   BADGES & STATUS INDICATORS
   ======================================== */

.pq-grid-modern .badge {
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}

.pq-grid-modern .badge.bg-success {
    background-color: #10b981 !important;
    color: white !important;
}

.pq-grid-modern .badge.bg-danger {
    background-color: #ef4444 !important;
    color: white !important;
}

.pq-grid-modern .badge.bg-warning {
    background-color: #f59e0b !important;
    color: white !important;
}

.pq-grid-modern .badge.bg-info {
    background-color: #3b82f6 !important;
    color: white !important;
}

.pq-grid-modern .badge.bg-secondary {
    background-color: #6b7280 !important;
    color: white !important;
}

/* ========================================
   TOOLBAR (Filter, Search, etc.)
   ======================================== */

.pq-grid-modern .pq-toolbar,
.pq-grid-modern .pq-toolbar-modern {
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 10px 14px !important;
}

.pq-grid-modern .pq-toolbar .form-control,
.pq-grid-modern .pq-toolbar .form-select,
.pq-grid-modern .pq-toolbar-modern .form-control,
.pq-grid-modern .pq-toolbar-modern .form-select {
    font-size: 13px !important;
    padding: 6px 10px !important;
}

/* ========================================
   PAGER / PAGINATION
   ======================================== */

.pq-grid-modern .pq-pager {
    background: #f9fafb !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 8px 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.pq-grid-modern .pq-pager-button {
    background: transparent !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
    padding: 6px 10px !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 100ms ease !important;
    font-size: 12px !important;
}

.pq-grid-modern .pq-pager-button:hover:not(:disabled) {
    background: #e5e7eb !important;
    border-color: #9ca3af !important;
}

.pq-grid-modern .pq-pager-button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.pq-grid-modern .pq-pager-button.pq-pager-button-active {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: white !important;
}

.pq-grid-modern .pq-pager-state {
    color: #6b7280 !important;
    font-size: 12px !important;
}

/* ========================================
   FILTER BAR
   ======================================== */

.pq-grid-modern .pq-filter-bar {
    background: #f3f4f6 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.pq-grid-modern .pq-filter-bar .form-control {
    border: 1px solid #d1d5db !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
}

.pq-grid-modern .pq-filter-bar .form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1) !important;
}

/* ========================================
   EMPTY STATE
   ======================================== */

.pq-grid-modern .pq-body-empty {
    padding: 40px 20px !important;
    text-align: center !important;
    color: #9ca3af !important;
    font-size: 14px !important;
}

/* ========================================
   SCROLL STYLING
   ======================================== */

.pq-grid-modern::-webkit-scrollbar,
.pq-grid-modern .pq-body::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

.pq-grid-modern::-webkit-scrollbar-track,
.pq-grid-modern .pq-body::-webkit-scrollbar-track {
    background: #f3f4f6 !important;
}

.pq-grid-modern::-webkit-scrollbar-thumb,
.pq-grid-modern .pq-body::-webkit-scrollbar-thumb {
    background: #d1d5db !important;
    border-radius: 4px !important;
}

.pq-grid-modern::-webkit-scrollbar-thumb:hover,
.pq-grid-modern .pq-body::-webkit-scrollbar-thumb:hover {
    background: #9ca3af !important;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .pq-grid-modern {
        font-size: 12px !important;
    }

    .pq-grid-modern .pq-head .pq-header-cell {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    .pq-grid-modern .pq-body .pq-cell {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    .pq-grid-modern .btn-group-sm {
        flex-wrap: wrap !important;
    }

    .pq-grid-modern .btn-outline-primary,
    .pq-grid-modern .btn-outline-danger {
        padding: 3px 6px !important;
        font-size: 10px !important;
    }
}

/* ========================================
   PRINT STYLING
   ======================================== */

@media print {
    .pq-grid-modern {
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }

    .pq-grid-modern .pq-pager,
    .pq-grid-modern .pq-toolbar {
        display: none !important;
    }

    .pq-grid-modern .pq-head {
        background: #f3f4f6 !important;
        color: #000 !important;
    }
}