/*
 * merlin-grid.css
 * ---------------
 * Custom styles for MudBlazor MudDataGrid components in the Merlin6 application.
 * Apply by adding Class="merlin-grid" to a MudDataGrid component.
 * These styles override default MudBlazor table styling for a consistent app look.
 */

/* ========================================
   PAGINATION TOOLBAR LAYOUT
   Rearranges the pagination controls to place
   the page-size selector on the left and
   navigation actions on the right.
   ======================================== */
.merlin-grid .mud-table-pagination-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
.merlin-grid .mud-table-pagination-select {
    order: 1; /* Page-size dropdown appears first (left) */
}
.merlin-grid .mud-table-pagination-spacer {
    display: none; /* Remove default spacer to allow custom layout */
}
.merlin-grid .mud-table-pagination-actions {
    order: 2; /* Navigation buttons appear second (right) */
    margin-left: auto;
}

/* ========================================
   HEADER STYLING
   Applies custom background and text colors
   to the grid header using CSS variables for
   easy theming. Defaults to AccentColor/black.
   ======================================== */
.merlin-grid .mud-table-head {
    background-color: var(--merlin-grid-header-bg, AccentColor);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Outset shadow for raised bevel effect */
}
.merlin-grid .mud-table-head .mud-table-cell {
    color: var(--merlin-grid-header-text, black);
    position: relative; /* Ensure header cells are positioned so MudBlazor's absolute resizer can be shown */
}

/* ========================================
   TOOLBAR STYLING
   Custom styles for the grid toolbar, including
   minimum height and padding adjustments.
   ======================================== */
.merlin-grid .mud-toolbar {
    min-height: 0px;
    padding: 2px 6px;    
    height: 36px; /* Fixed height to reduce vertical space */
    color: gray;
    background-color: aliceblue

}
.merlin-grid .mud-toolbar .mud-typography {
    margin: 0;
    line-height: 1;
}
.merlin-grid .mud-toolbar .mud-icon-button {
    padding: 2px;
    color: darkgray;
}

/* ========================================
   FOOTER / PAGER WRAPPER
   Wraps the pager content with a gray background.
   Use class="merlin-grid-pager-footer" on the
   <div> inside <PagerContent>.
   ======================================== */
.merlin-grid-pager-footer {
    background-color: var(--merlin-grid-footer-bg, silver);
    width: 100%;
    padding: 0;
    margin: 0;
}
.merlin-grid-pager-footer .mud-table-pagination-toolbar {
    background-color: white !important; /* Inner toolbar stays white */
}

/* Footer text: smaller font size and muted gray color */
.merlin-grid-pager-footer,
.merlin-grid-pager-footer * {
    font-size: 0.75rem !important;
    color: #757575 !important;
}
.merlin-grid-pager-footer .mud-select-input {
    font-size: 0.75rem !important;
}
.merlin-grid table {
    table-layout: fixed;
}

/* Make sure the resize handle is visible/clickable — include common MudBlazor class names used across versions */
.merlin-grid .mud-datagrid-resizer,
.merlin-grid .mud-datagrid-resize-handle,
.merlin-grid .mud-data-grid-resizer,
.merlin-grid .mud-table-head .mud-table-cell .mud-icon-button.mud-datagrid-resizer {
  display: block !important;
  position: absolute !important;
  top: 0;
  bottom: 0;
  right: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
}