/*
 * Grid and Table Design Standards
 * Based on docs/01-ARCHITECTURE/GRID_TABLE_DESIGN_STANDARDS.md
 * Version 1.0
 *
 * Universal styles for MudDataGrid and MudTable components
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
    /* Header */
    --grid-header-bg: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    --grid-header-text: #FFFFFF;
    --grid-header-hover: rgba(255, 255, 255, 0.1);

    /* Rows */
    --grid-row-bg: #FFFFFF;
    --grid-row-alt-bg: #F5F5F5;
    --grid-row-hover: #E3F2FD;
    --grid-row-selected: #BBDEFB;

    /* Toolbar */
    --grid-toolbar-bg: #fafbfc;
    --grid-toolbar-border: #e5e7eb;

    /* Status Colors */
    --status-active: #4CAF50;
    --status-inactive: #9E9E9E;
    --status-pending: #FF9800;
    --status-error: #F44336;
}

/* ========================================
   Table Container Wrapper
   ======================================== */
.standard-grid-wrapper {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* ========================================
   Table Toolbar
   ======================================== */
.standard-grid .mud-table-toolbar,
.standard-grid .mud-toolbar {
    padding: 16px 24px;
    min-height: 64px;
    background-color: var(--grid-toolbar-bg);
    border-bottom: 1px solid var(--grid-toolbar-border);
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

/* Make MudSpacer work in toolbar */
.standard-grid .mud-table-toolbar .mud-spacer,
.standard-grid .mud-toolbar .mud-spacer {
    flex-grow: 1;
}

/* Status Info Text in Toolbar */
.status-info-text {
    font-size: 0.875rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin-left: auto;
}

/* Active Filters Chip */
.active-filters-chip {
    background-color: #dbeafe;
    color: #1e40af;
    font-size: 0.75rem;
}

/* ========================================
   Table Headers - Blue Gradient
   ======================================== */
div.standard-grid-wrapper .standard-grid thead.mud-table-head {
    background: var(--grid-header-bg);
}

div.standard-grid-wrapper .standard-grid thead.mud-table-head tr.mud-table-row {
    background: var(--grid-header-bg);
}

div.standard-grid-wrapper .standard-grid thead.mud-table-head th.mud-table-cell {
    font-weight: 600;
    color: var(--grid-header-text);
    background: var(--grid-header-bg);
    padding: 16px 24px;
    border-bottom: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
}

/* Header icons, buttons, menus - white color */
div.standard-grid-wrapper .standard-grid thead.mud-table-head th.mud-table-cell .mud-icon-root,
div.standard-grid-wrapper .standard-grid thead.mud-table-head th.mud-table-cell .mud-button-root,
div.standard-grid-wrapper .standard-grid thead.mud-table-head th.mud-table-cell .mud-menu,
div.standard-grid-wrapper .standard-grid thead.mud-table-head th.mud-table-cell .mud-sort-label,
div.standard-grid-wrapper .standard-grid thead.mud-table-head th.mud-table-cell svg {
    color: var(--grid-header-text);
}

/* Header sort label text */
div.standard-grid-wrapper .standard-grid thead.mud-table-head th.mud-table-cell .mud-table-sort-label {
    color: var(--grid-header-text);
}

/* Prevent default header row hover */
div.standard-grid-wrapper .standard-grid thead.mud-table-head tr.mud-table-row:hover {
    background-color: transparent;
}

/* Header cell hover - subtle white overlay */
div.standard-grid-wrapper .standard-grid thead.mud-table-head th.mud-table-cell:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ========================================
   Table Body Cells
   ======================================== */
.standard-grid .mud-table-body .mud-table-cell {
    padding: 12px 24px;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ========================================
   Table Row Hover
   ======================================== */
.standard-grid .mud-table-body .mud-table-row:hover {
    background-color: var(--grid-row-hover);
}

/* ========================================
   Typography Utilities
   ======================================== */
.text-muted {
    opacity: 0.7;
}

.font-weight-medium {
    font-weight: 500;
}

/* ========================================
   Selection Summary Banner
   ======================================== */
.grid-selection-summary {
    padding: 12px 24px;
    background-color: #f0fdf4;
    border-top: 1px solid #e5e7eb;
}

/* ========================================
   DEFECT-12632: Column Resize Functionality
   SRS PAJ-080 - Column width adjustment
   ======================================== */
/* Resizable table headers */
table.employee-table thead th {
    position: relative;
    user-select: none;
}

/* Visual indicator when resizing */
table.employee-table thead th.resizing {
    background-color: rgba(21, 182, 160, 0.1);
}

/* Resize cursor on column borders */
table.employee-table thead th:hover {
    cursor: default;
}

/* Prevent text selection during resize */
body.resizing-column {
    user-select: none;
    cursor: col-resize !important;
}

/* Optional: Visual resize handle (uncomment to add visible resize indicator)
table.employee-table thead th::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    transition: background-color 150ms;
}

table.employee-table thead th:hover::after {
    background: rgba(21, 182, 160, 0.3);
}
*/