/* ==========================================
   CRITICAL FIXES - LOADS LAST TO OVERRIDE EVERYTHING
   These are must-have fixes for icons and alignment
   ========================================== */

/* ========== FIX ALL ICONS GLOBALLY ========== */
/* Keep icons visible and ensure svg paths use currentColor (fixes invisible header/menu icons). */
.mud-icon-root,
.mud-table .mud-icon-root,
.mud-data-grid .mud-icon-root,
.mud-breadcrumbs .mud-icon-root,
.mud-chip .mud-icon-root,
.mud-button .mud-icon-root {
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    fill: currentColor !important;
}

.mud-icon-root path { fill: currentColor !important; }
.mud-icon-root path[fill="none"] { fill: none !important; }

/* Force icon buttons to display properly */
.mud-icon-button,
.mud-table .mud-icon-button,
.mud-data-grid .mud-icon-button,
.mud-table-head .mud-icon-button,
.mud-table-cell .mud-icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.mud-icon-button .mud-icon-root {
    /* Keep svg as block; flex on <svg> can break MudBlazor header/menu icons */
    display: block !important;
}

/* ========== FIX BREADCRUMBS ========== */
/* Breadcrumb container with frosted glass effect */
.breadcrumb-container {
    border-bottom: 1px solid var(--mud-palette-divider) !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.mud-theme-dark .breadcrumb-container {
    background-color: rgba(15, 23, 42, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Breadcrumb styling - simple and clean */
.mud-breadcrumbs {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    padding: 4px 0 0 0 !important;
    margin: 0 !important;
}

.mud-breadcrumbs li {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

.mud-breadcrumb-separator {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    padding: 0 8px !important;
    color: var(--mud-palette-text-disabled) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

.breadcrumb-link {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    text-decoration: none !important;
    color: var(--mud-palette-text-secondary) !important;
    transition: color 0.2s ease !important;
    line-height: 1.2 !important;
}

.breadcrumb-link:hover {
    color: var(--mud-palette-primary) !important;
}

.mud-breadcrumb-item:last-child .breadcrumb-link {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 600 !important;
}

/* Make header icons explicitly visible in MudDataGrid headers */
.mud-data-grid-header-cell .mud-icon-root,
.mud-data-grid-header-cell .mud-icon-button {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force explicit size so header icons can't collapse to 0x0 */
.mud-data-grid-header-cell .mud-icon-root {
    color: var(--mud-palette-text-primary) !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
}

.mud-data-grid-header-cell .mud-icon-button {
    width: 32px !important;
    height: 32px !important;
    color: var(--mud-palette-text-primary) !important;
}


/* ========== FIX USER CHIP IN APP BAR ========== */
.mud-chip {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Specific app bar user chip sizing (align with icon buttons) */
.glass-app-bar .user-chip {
    height: 44px;
    padding: 0 10px;
}

.glass-app-bar .user-chip-text {
    line-height: 1 !important;
}

.mud-chip-content {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.mud-chip .mud-icon-root {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.mud-chip .mud-typography {
    line-height: 1.5 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ========== FIX TABLE PAGINATION ========== */
.mud-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-top: 16px !important;
}

.mud-pagination-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    line-height: 1 !important;
}

.mud-pagination-item .mud-icon-root {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========== FIX TABLE HEADERS ========== */
.mud-table-head .mud-table-cell {
    vertical-align: middle !important;
}

.mud-table-head .mud-table-cell > * {
    vertical-align: middle !important;
}

.mud-table-cell {
    vertical-align: middle !important;
}

.mud-table-cell > * {
    vertical-align: middle !important;
}

/* ========== FIX DATA GRID ========== */
/* Keep MudBlazor's default display model for header cells to avoid breaking header icons/menus. */
.mud-data-grid-header-cell {
    vertical-align: middle !important;
}

.mud-data-grid-header-cell > * {
    vertical-align: middle !important;
}

.mud-data-grid .mud-table-cell {
    vertical-align: middle !important;
}

.mud-data-grid .mud-table-cell > * {
    vertical-align: middle !important;
}

/* ========== FIX SORTING ICONS IN TABLES ========== */
.mud-table-sort-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.mud-table-sort-label .mud-icon-root {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 4px !important;
}

/* ========== FIX BUTTON ALIGNMENT ========== */
.mud-button-root {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

.mud-button-root .mud-icon-root {
    display: inline-flex !important;
    align-items: center !important;
}

.mud-button-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* ========== FIX MENU ITEMS ========== */
.mud-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mud-menu-item .mud-icon-root {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* ========== FIX APP BAR ITEMS ========== */
/* Don't force direct children to inline-flex (can break MudAppBar toolbar layout). */
.mud-appbar .mud-toolbar {
    display: flex !important;
    align-items: center !important;
}

/* ========== FIX MINI DRAWER (ICONS ONLY) ========== */
.drawer-mini .mud-nav-link {
    justify-content: center !important;
}

.drawer-mini .mud-nav-link .mud-nav-link-text {
    display: none !important;
}

.drawer-mini .mud-nav-group-title {
    display: none !important;
}

/* Hide nested items when collapsed (so only top-level icons remain) */
.drawer-mini .mud-navmenu-list-padding {
    display: none !important;
}

/* ========== FIX BADGES ========== */
.mud-badge-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

/* ========== FIX TOOLTIPS ========== */
.mud-tooltip-root {
    display: inline-flex !important;
    align-items: center !important;
}

/* ========== ENSURE FLEXBOX DOESN'T BREAK ICONS ========== */
/* Don't force width/height to `1em` (MudBlazor sometimes uses font-size:0 on icon buttons). */
.mud-icon-root svg {
    display: block !important;
}

/* ========== FIX ANY REMAINING ALIGNMENT ISSUES ========== */
/* Ensure all MudBlazor components with icons have proper flex display */
[class*="mud-"] .mud-icon-root {
    display: inline-block !important;
    vertical-align: middle !important;
}

[class*="mud-"] .mud-icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Force table cells to vertically center content */
.mud-table td,
.mud-table th {
    vertical-align: middle !important;
}

.mud-data-grid td,
.mud-data-grid th {
    vertical-align: middle !important;
}

/* ========== TABLE HEADER THEME COLOR ========== */
/* Apply darker version of primary color (#1A90B0 = rgba(26, 144, 176, 1)) to table headers */
.mud-table-head,
.mud-table thead {
    background-color: rgba(26, 144, 176, 0.15) !important;
}

.mud-table-head .mud-table-cell,
.mud-table thead th {
    background-color: rgba(26, 144, 176, 0.15) !important;
    font-weight: 600 !important;
}

/* Dark mode table headers */
.mud-theme-dark .mud-table-head,
.mud-theme-dark .mud-table thead {
    background-color: rgba(26, 144, 176, 0.25) !important;
}

.mud-theme-dark .mud-table-head .mud-table-cell,
.mud-theme-dark .mud-table thead th {
    background-color: rgba(26, 144, 176, 0.25) !important;
}

/* ========== REMOVE UNSORT STATE FROM TABLE SORTING ========== */
/* Hide the unsorted state - table will always show sort direction */
.mud-table-sort-label:not(.mud-direction-asc):not(.mud-direction-desc) .mud-icon-root {
    opacity: 0.3 !important;
}

/* Make sort labels clickable without showing menu */
.mud-table-sort-label {
    cursor: pointer !important;
}

.mud-table-sort-label:hover {
    opacity: 0.8 !important;
}

/* ========== HIDE DATAGRID COLUMN OPTIONS MENU ========== */
/* Hide the three-dot menu button that shows unsort/hide column options */
.mud-data-grid .column-options .mud-menu-icon-button-activator,
.mud-data-grid .column-options .mud-menu {
    display: none !important;
}

/* Keep only the sort icon and drag handle visible */
.mud-data-grid .column-options {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}