/* Global styles for GroupProcessingPage - needs to override MudBlazor styles */
.column-transition {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.column-entering,
.column-exiting {
    opacity: 0;
    transform: translateY(10px);
}

.column-entered {
    opacity: 1;
    transform: translateY(0);
}

.image-carousel-transition {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.image-carousel-entering,
.image-carousel-exiting {
    opacity: 0;
    transform: translateY(10px);
}

.image-carousel-entered {
    opacity: 1;
    transform: translateY(0);
}

.image-viewer-container {
    transition: opacity 0.2s ease-in-out;
}

.item-attention-border {
    border: 2px solid var(--mud-palette-error) !important;
}

div[style^="display: flex; z-index: 1; position: absolute;"] {
    display: none !important;
}

.pm-pill-container {
    position: relative;
}

.pm-pill {
    bottom: 8px;
    pointer-events: none;
    position: absolute;
    right: 8px;
    z-index: 10;
}

.sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.mud-drop-item-preview-start {
    height: 100% !important;
    width: 20px !important;
}

/* ============================================================================
   Shared DataGrid Column Width Standards
   ----------------------------------------------------------------------------
   Modern responsive column sizing using CSS Custom Properties and relative units.
   
   Units used:
   - ch: Character width (1ch ? width of "0" character in current font)
   - rem: Root em (relative to root font size, typically 16px)
   - %: Percentage of parent width
   
   These units scale automatically with user's font size preferences and
   provide better accessibility compared to fixed px values.
   ============================================================================ */

:root {
    /* Column widths using modern relative units */
    --datagrid-hierarchy-width: 3.125rem;        /* 50px equivalent at 16px base */
    --datagrid-icon-width: 3.125rem;             /* 50px equivalent - for icon/avatar columns */
    --datagrid-thumbnail-width: 2.5rem;          /* 40px equivalent */
    --datagrid-name-width: 30ch;                 /* ~250px, scales with font */
    --datagrid-actions-width: 11.25rem;          /* 180px equivalent for icon buttons */
    --datagrid-type-width: 7.5rem;               /* 120px equivalent */
    --datagrid-project-width: 30ch;              /* Same as name columns */
    --datagrid-info-small-width: 20rem;          /* 320px equivalent */
    --datagrid-info-medium-width: 21.875rem;     /* 350px equivalent */
    --datagrid-info-large-width: 26.25rem;       /* 420px equivalent */
    
    /* Cell padding - using rem for consistency */
    --datagrid-cell-padding: 0.5rem;             /* 8px equivalent */
    
    /* Detail row configuration - multiple height variants */
    --datagrid-detail-row-height-full: 17.125rem;    /* 274px - images + notes with proper spacing */
    --datagrid-detail-row-height-compact: 8rem;      /* 128px - images only */
    --datagrid-detail-row-padding: 0.75rem;          /* 12px - internal padding */
    --datagrid-detail-content-gap: 0.5rem;           /* 8px - gap between sections */
}

/* ============================================================================
   Shared DataGrid Text Cell Styles
   ----------------------------------------------------------------------------
   These styles ensure consistent column widths across InventoryList,
   PhotoNoteGroupList, and ItemList pages.
   
   The technique: CSS Grid with minmax(0, 1fr) on the container forces it to
   respect the cell's available space. The inner span element then applies
   the actual text truncation with ellipsis.
   ============================================================================ */

/* Text cell containers that need to truncate to available space
   Used in Naam, Omschrijving, and Project columns */
.project-name-cell,
.description-cell {
    /* Use CSS Grid to create a single column that fills available space
       The minmax(0, 1fr) is critical - it allows the grid to shrink to 0
       rather than expanding based on content */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    
    /* Ensure the grid doesn't expand beyond available space */
    min-width: 0;
}

/* Apply text truncation to ALL direct children (text, links, etc.)
   This is what actually creates the ellipsis effect */
.project-name-cell > *,
.description-cell > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    display: block; /* Ensure inline elements can truncate */
}

/* ============================================================================
   Reference Grid Container Styles
   ----------------------------------------------------------------------------
   Ensures consistent table layout across all reference pages (Suppliers,
   Scheidingsteksten, Brands, Conditions, Form Templates, User Management).
   
   Forces table-layout: fixed to respect ColGroup widths and prevent column
   width fluctuations as data changes.
   ============================================================================ */

.reference-grid-container .mud-table {
    table-layout: fixed !important;
    width: 100% !important;
}

.reference-grid-container .mud-table-cell {
    padding: var(--datagrid-cell-padding) !important;
    box-sizing: border-box !important;
}

.reference-grid-container .mud-table td,
.reference-grid-container .mud-table th {
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* ============================================================================
   Reference Icon Avatar Styles
   ----------------------------------------------------------------------------
   Consistent styling for icon/avatar columns in reference pages.
   Creates circular colored backgrounds for Material Design icons.
   ============================================================================ */

.reference-icon-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================================
   Shared DataGrid Detail Row Styles
   ----------------------------------------------------------------------------
   Consistent detail row (ChildRowContent) styling across all DataGrid pages.
   Uses absolute positioning to prevent table expansion and maintain fixed
   height for consistent UX.
   
   Apply these classes to ChildRowContent wrapper:
   - .datagrid-detail-row-wrapper (outer wrapper)
   - .datagrid-detail-content-positioner (inner absolute positioned box)
   
   Height variants (add to wrapper):
   - .detail-height-full (default: images + notes)
   - .detail-height-compact (space-efficient: single section)
   ============================================================================ */

/* Outer wrapper - prevents expansion, provides relative positioning context */
.datagrid-detail-row-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important; /* Allow absolute positioned content to show */
    position: relative !important;
    display: block !important;
    contain: layout style !important; /* CSS containment to prevent layout bleeding */
    box-sizing: border-box !important;
    padding: 0 !important;
    /* Default height - can be overridden by variant classes */
    height: var(--datagrid-detail-row-height-full) !important;
}

/* Height variant: Full height for images + notes */
.datagrid-detail-row-wrapper.detail-height-full {
    height: var(--datagrid-detail-row-height-full) !important;
}

/* Height variant: Compact height for single section (images OR notes only) */
.datagrid-detail-row-wrapper.detail-height-compact {
    height: var(--datagrid-detail-row-height-compact) !important;
}

/* Inner absolute positioned box - isolates content from table layout */
.datagrid-detail-content-positioner {
    position: absolute !important;
    top: 0 !important;
    left: var(--datagrid-cell-padding) !important;
    right: var(--datagrid-cell-padding) !important;
    bottom: var(--datagrid-cell-padding) !important;
    height: auto !important; /* Use bottom for sizing instead of calc() */
    z-index: 10 !important;
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 0.25rem !important; /* 4px */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: var(--datagrid-detail-row-padding) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--datagrid-detail-content-gap) !important;
}

/* ============================================================================
   Shared Detail Component Styles
   ----------------------------------------------------------------------------
   Consistent styling for detail row content components (images, notes).
   These styles ensure proper scrolling, containment, and visual consistency.
   ============================================================================ */

/* Root container for detail content - must not expand beyond available space */
.detail-row-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--datagrid-detail-content-gap);
    contain: layout style;
    box-sizing: border-box;
}

/* Section container (for images or notes) */
.detail-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0; /* Allow flex child to shrink */
    position: relative;
    flex: 0 0 auto; /* Don't grow by default */
    display: flex;
    flex-direction: column;
}

/* First section (images) - fixed compact height for consistency */
.detail-row-content > .detail-section:first-child:not(:only-child) {
    flex: 0 0 5.5rem; /* Fixed 88px height - consistent whether notes present or not */
    max-height: 5.5rem;
}

/* Last section (notes) - takes remaining space */
.detail-row-content > .detail-section:last-child:not(:only-child) {
    flex: 1 1 auto; /* Grow to fill remaining space */
    min-height: 0; /* Allow proper shrinking */
}

/* When there's only one section, it can use full space */
.detail-row-content > .detail-section:only-child {
    max-height: 100%;
    flex: 1 1 auto;
}

/* Horizontal scroll container - constrains overflow */
.detail-scroll-container {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto; /* Take available space */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-bottom: 0.375rem; /* 6px - dedicated space for scrollbar */
}

/* Content row - can expand wider than container */
.detail-content-row {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* Stretch items to equal height */
    gap: 0.5rem; /* 8px - consistent spacing */
    width: max-content;
    min-width: 100%;
    flex: 1 1 auto; /* Fill available vertical space */
    box-sizing: border-box;
    padding: 0.25rem; /* 4px padding to prevent content from touching edges */
}

/* Individual items in the detail row */
.detail-image-item {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start; /* Align images to top consistently */
    justify-content: center;
}

.detail-note-item {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch; /* Stretch to match tallest card */
}

.detail-note-card {
    min-width: 12.5rem; /* 200px */
    max-width: 18.75rem; /* 300px */
    min-height: 100%; /* Fill container height for equal heights */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Custom scrollbar styling for detail containers */
.detail-scroll-container::-webkit-scrollbar {
    height: 0.375rem; /* 6px */
}

.detail-scroll-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 0.1875rem; /* 3px */
}

.detail-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.1875rem; /* 3px */
    transition: background 0.2s ease;
}

.detail-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}

/* Firefox scrollbar */
.detail-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
}

/* Info stats container - flexible layout with consistent spacing */
.info-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px - space between stat items */
    flex-wrap: nowrap; /* Prevent wrapping */
    white-space: nowrap;
}

/* Individual stat item */
.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* 4px - space between icon and value */
    white-space: nowrap;
    color: rgba(0, 0, 0, 0.6);
    cursor: help;
    min-height: 1.25rem; /* 20px */
}

/* Stat icons */
.stat-icon {
    flex-shrink: 0;
    color: rgba(0, 0, 0, 0.38);
    width: 1.25rem !important; /* 20px */
    height: 1.25rem !important;
    font-size: 1.25rem !important;
}

/* Stat values - different types */
.stat-value {
    font-size: 0.875rem; /* 14px - Match MudBlazor's small text */
    font-weight: 500;
    line-height: 1.25rem; /* 20px */
    font-variant-numeric: tabular-nums; /* Fixed-width digits for alignment */
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', 'Menlo', 'Consolas', monospace;
    letter-spacing: -0.01em; /* Tighter spacing for better readability */
}

.stat-number {
    min-width: 4ch; /* Space for 4 digits */
    text-align: left;
    display: inline-block;
}

.stat-date {
    color: rgba(0, 0, 0, 0.5);
    margin-left: 0.5rem; /* 8px */
}

.stat-date .stat-value {
    font-size: 0.8125rem; /* 13px - slightly smaller for dates */
    font-weight: 400;
}

.stat-boolean {
    min-width: 3ch; /* Fixed width for "Ja"/"Nee" alignment */
    text-align: left;
    display: inline-block;
}