/* =================================================================
   OPTIONAL UTILITY CLASSES
   Only include these if components actively use them
   ================================================================= */

/* Loading states */
.container-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

/* Text utilities */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

/* Custom margin utilities */
.ml-42px {
    margin-left: 42px;
}

/* Text truncation */
.text-truncate {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Table heights for data grids */
.table-height-standard {
    height: calc(100vh - 20rem);
}

.table-height-compact {
    height: calc(100vh - 21rem);
}

/* Accessibility utilities */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =================================================================
   EXPANDABLE ACTION BUTTONS
   Used in table row actions for space-efficient UX
   ================================================================= */

/* Individual Expandable Button - Inline expansion within fixed column */
.expandable-action-button {
    position: relative;
    min-width: 40px;
    max-width: 40px;
    overflow: hidden;
    /* Hide text until hover */
    transition: max-width 0.25s ease;
    padding-left: 12px;
    padding-right: 12px;
}

.expandable-action-button:hover {
    max-width: 150px;
    /* Expand to show text */
    z-index: 2;
    /* Ensure expanded button appears above siblings */
}

.expandable-action-button .expandable-button-text {
    max-width: 0;
    opacity: 0;
    display: inline-block;
    transition: max-width 0.25s ease, opacity 0.25s ease;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
}

.expandable-action-button:hover .expandable-button-text {
    max-width: 100px;
    opacity: 1;
    margin-left: 4px;
}

/* Touch device support - always show text on devices without hover */
@media (hover: none) {
    .expandable-action-button {
        max-width: 150px;
        /* Always expanded on touch devices */
    }

    .expandable-action-button .expandable-button-text {
        max-width: 100px;
        opacity: 1;
        margin-left: 4px;
    }
}

/* Ensure icons stay visible during expansion */
.expandable-action-button .mud-icon-root {
    transition: none;
}

/* Expandable Button Group */
.expandable-action-group .mud-button-root {
    min-width: 40px;
    max-width: 40px;
    overflow: hidden;
    transition: max-width 0.25s ease;
    position: relative;
}

.expandable-action-group .mud-button-root:hover {
    max-width: 150px;
    z-index: 2;
}

.expandable-action-group .mud-button-root .button-label {
    max-width: 0;
    opacity: 0;
    display: inline-block;
    transition: max-width 0.25s ease, opacity 0.25s ease;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
}

.expandable-action-group .mud-button-root:hover .button-label {
    max-width: 100px;
    opacity: 1;
    margin-left: 4px;
}

/* Ensure button group creates stacking context */
.expandable-action-group {
    position: relative;
    isolation: isolate;
}

/* Ensure icons stay visible */
.expandable-action-group .mud-button-root .mud-icon-root {
    transition: none;
}

/* =================================================================
   ACTION COLUMN WIDTH STANDARDS
   Standard widths for table action columns using StandardTableActions
   ================================================================= */

/* One action button (View OR Edit OR Delete) */
.action-column-1 {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    text-align: right;
    overflow: visible;
    /* Allow button text to overlay */
    position: relative;
}

/* Two action buttons (typically Edit + Delete) */
.action-column-2 {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    text-align: right;
    overflow: visible;
    /* Allow button text to overlay */
    position: relative;
}

/* Three action buttons (View + Edit + Delete) */
.action-column-3 {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    text-align: right;
    overflow: visible;
    /* Allow button text to overlay */
    position: relative;
}

/* Custom actions or dynamic content */
.action-column-auto {
    width: auto;
    min-width: 80px;
    text-align: right;
    overflow: visible;
    position: relative;
}

/* Mobile responsive - flexible widths on small screens */
@media (max-width: 600px) {

    .action-column-1,
    .action-column-2,
    .action-column-3 {
        width: auto;
        min-width: 60px;
    }
}

/* =================================================================
   APPBAR TEXTURE OVERLAY - PROOF OF CONCEPT
   Adds a subtle textured overlay to the MudAppBar background
   ================================================================= */

/* Texture configuration variables */
:root {
    /* Circle 1: Filled dot (solid circle) */
    --appbar-texture-filled-size: 6px;

    /* Circle 2: Outlined circle with thick border */
    --appbar-texture-outlined-size: 18px;
    /* Outer radius (diameter = 24px) */

    /* Ring thickness calculation: 1/3 of diameter */
    /* Diameter = 24px, so thickness = 8px */
    /* Inner radius = outer - thickness = 12px - 8px = 4px */
    --appbar-texture-ring-inner: 6px;

    /* Dot spacing (distance between dots - should be 2-3x dot size for good visibility) */
    --appbar-texture-spacing: 70px;

    /* Overall texture opacity (0.01 = 1%, 0.03 = 3%, 0.05 = 5%) */
    --appbar-texture-opacity: 0.03;

    /* Gradient fade direction (to left = fade from right to left, to right = fade from left to right) */
    --appbar-texture-gradient-direction: to right;
}

/* Create texture overlay using pseudo-element */
.mud-appbar::before {
    content: '';
    position: absolute;
    inset: 0;

    /* Dot pattern: One filled circle + One thick outlined circle (offset grids) */
    background-image:
        /* First layer: Filled solid circle at 25% offset */
        radial-gradient(circle at 80% 20%,
            rgba(255, 255, 255, 1) var(--appbar-texture-filled-size),
            transparent var(--appbar-texture-filled-size)),
        /* Second layer: Thick outlined circle at 75% offset */
        radial-gradient(circle at 50% 50%,
            transparent var(--appbar-texture-ring-inner),
            rgba(255, 255, 255, 1) calc(var(--appbar-texture-ring-inner)),
            rgba(255, 255, 255, 1) var(--appbar-texture-outlined-size),
            transparent calc(var(--appbar-texture-outlined-size)));

    /* Size: dots repeat at specified spacing */
    background-size: var(--appbar-texture-spacing) var(--appbar-texture-spacing), var(--appbar-texture-spacing) var(--appbar-texture-spacing);

    /* Apply gradient MASK to fade texture opacity from one side to the other */
    /* This affects ONLY the texture, not the AppBar background color */
    mask-image: linear-gradient(var(--appbar-texture-gradient-direction), transparent 0%, black 100%);
    -webkit-mask-image: linear-gradient(var(--appbar-texture-gradient-direction), transparent 30%, black 100%);

    /* Master opacity control for entire texture */
    opacity: var(--appbar-texture-opacity);

    pointer-events: none;
    /* Don't interfere with clicks */
    z-index: 0;
    /* Behind AppBar content */
}

/* Ensure all AppBar content appears above the texture */
.mud-appbar>* {
    position: relative;
    z-index: 1;
}