/*
 * Compact Table Styles - Reusable compact styling for MudBlazor tables
 *
 * This stylesheet provides a complete set of utility classes for creating compact, dense tables
 * with consistent styling across the application. Use these classes to reduce table padding,
 * control column widths, and handle text overflow in data-heavy tables.
 *
 * For detailed implementation guidelines, examples, and usage patterns, see README.md
 *
 * BASIC USAGE:
 * 1. Add Class="compact-columns" to your PagedTable or MudTable component
 * 2. Apply column width utilities to TableHeader and MudTd elements as needed
 * 3. Use text truncation utilities for content that may overflow
 */

/*
 * CORE COMPACT STYLING
 * Apply to the main table component to reduce cell padding and create denser tables
 */

/* Main compact columns styling - reduces cell padding from default (~16px) to 4px for denser tables */
.compact-columns tbody tr.mud-table-row td.mud-table-cell:first-child,
.compact-columns thead tr.mud-table-row th.mud-table-cell:first-child {
    padding-left: 16px; /* Maintains left alignment while keeping other cells compact */
}

.compact-columns tbody tr.mud-table-row td.mud-table-cell,
.compact-columns thead tr.mud-table-row th.mud-table-cell {
    padding: 4px; /* Reduces default padding significantly for compact appearance */
}

/*
 * COLUMN WIDTH UTILITIES - RESPONSIVE SIZING
 * Use these classes on both TableHeader and MudTd elements to ensure consistent column sizing
 * These use relative units that scale with screen size and table width
 */

/* Extra Small columns (5-8% of table width) - Use for: ID numbers, small icons, status indicators, single digits */
.compact-column-xs {
    width: 5%;
    max-width: 8%;
}

/* Small columns (8-12% of table width) - Use for: Short status text, priority levels, single words, small badges */
.compact-column-sm {
    width: 10%;
    max-width: 12%;
}

/* Medium columns (12-18% of table width) - Use for: Names, short titles, 2-3 word phrases, dates */
.compact-column-md {
    width: 15%;
    max-width: 18%;
}

/* Large columns (18-25% of table width) - Use for: Longer titles, multi-word content, detailed status */
.compact-column-lg {
    width: 20%;
    max-width: 25%;
}

/* Extra Large columns (25-35% of table width) - Use for: Descriptions, comments, detailed text content */
.compact-column-xl {
    width: 30%;
    max-width: 35%;
}

/*
 * FLEXIBLE COLUMN UTILITIES - FOR VARIED CONTENT
 * These classes provide additional flexibility for different content types
 */

/* Auto-sizing columns that grow/shrink based on content and available space */
.compact-column-auto {
    width: auto;
    min-width: 4rem;
}

/* Flex columns that share remaining space equally */
.compact-column-flex {
    width: 1fr;
    min-width: 6rem;
    flex: 1;
}

/* Fixed narrow columns for actions/buttons - use rem for UI consistency */
.compact-column-actions {
    width: 8rem;
    min-width: 6rem;
    max-width: 10rem;
}

/*
 * TEXT TRUNCATION UTILITIES
 * Use these classes within table cells to handle text overflow gracefully
 */

/* Single line truncation with ellipsis - Use for: Titles, names, short text that should stay on one line */
.truncate-single-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Two-line truncation with ellipsis - Use for: Short descriptions, brief notes, medium-length content */
.truncate-multi-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em;
}

/*
 * TEXT WRAPPING UTILITIES
 * Use these for content that should wrap or not wrap within table cells
 */

/* Aggressive text wrapping - Use for: Status notes, comments, any text that should break at word boundaries */
.compact-text-wrap {
    overflow-wrap: anywhere; /* Breaks long words if necessary */
    word-break: break-word;  /* Ensures text doesn't overflow cell boundaries */
}

/* Prevent text wrapping - Use for: IDs, codes, specific formatting that should stay on one line */
.compact-text-nowrap {
    white-space: nowrap;
}

/*
 * MUDBLAZOR COMPONENT FIXES
 * These classes fix specific issues with MudBlazor components in compact tables
 */

/* Fixes MudChip content display in compact tables - prevents layout issues with chips */
.compact-columns .mud-chip-container .mud-chip .mud-chip-content {
    display: contents;
}

/*
 * CHIP STYLING FOR COMPACT TABLES
 * Use this class on MudChip components within compact tables for consistent spacing
 */

/* Compact chip styling - removes default margin for tighter spacing in dense tables */
.compact-chip {
    font-weight: bold;
    margin: 0; /* Removes default chip margin for compact appearance */
}

/*
 * RESPONSIVE BREAKPOINTS
 * Additional responsive behavior for different screen sizes
 */

/* Mobile devices - adjust column sizing for narrow screens */
@media (max-width: 768px) {
    .compact-column-xs { width: 8%;  }
    .compact-column-sm { width: 12%;  }
    .compact-column-md { width: 18%;  }
    .compact-column-lg { width: 25%;  }
    .compact-column-xl { width: 35%;  }
}

/* Large screens - optimize for wider displays */
@media (min-width: 1400px) {
    .compact-column-xs { width: 4%; max-width: 6%; }
    .compact-column-sm { width: 8%; max-width: 10%; }
    .compact-column-md { width: 12%; max-width: 15%; }
    .compact-column-lg { width: 16%; max-width: 20%; }
    .compact-column-xl { width: 25%; max-width: 30%; }
}