/* --- MudTextField Density Styling ---
     Matches tree view density scales but works independently of tree containers.
     Allows mixing density levels (e.g., cozy text input beside compact tree).
     Uses explicit density classes that can be applied to any container. 
     
    Linking: Manual Linking Required
        Must be linked in the consuming component.
            using the _content/{RclName}/... path. 
                <link href="_content/IA.UIR.MdBlz/css/DenseMudTextField.css" rel="stylesheet" />
                <MudPaper class="tree-wrapper">
                    <MudTextField T="string" 
                        Class="density-cozy"  <!-- Applied directly to component -->
                        Label="Search" 
                        Adornment="Adornment.Start" 
                        AdornmentIcon="@Icons.Material.Filled.Search" 
                        TextChanged="OnTextChanged" 
                        Immediate="true" 
                        Clearable="true" />
                </MudPaper>
                css is static resources. though the css file is put in wwwroot/css/, the path does not include "wwwroot". as _content instructs to look at the root of the assembly's content, which is wwwroot. So the correct path is _content/IA.UIR.MdBlz/css/DenseMudTextField.css.
        You must manually add a <link> tag in the consuming application's host file.

            Blazor Server: in Pages/_Layout.cshtml (or _Host.cshtml depending on your setup).
            Blazor WebAssembly: in wwwroot/index.html.
        


*/

/* === Ultra Density TextField === */
.density-ultra .mud-input-control .mud-input-label,
.mud-input-control.density-ultra .mud-input-label {
    font-size: 0.625rem !important; /* 10px - Smallest font for ultra density */
    color: #555555 !important;
}

.density-ultra .mud-input-control .mud-input,
.mud-input-control.density-ultra .mud-input {
    font-size: 0.625rem !important; /* 10px - Matches label size */
    color: #222222 !important;
}

.density-ultra .mud-input-control .mud-input-adornment-start,
.density-ultra .mud-input-control .mud-input-adornment-end,
.mud-input-control.density-ultra .mud-input-adornment-start,
.mud-input-control.density-ultra .mud-input-adornment-end {
    font-size: 0.75rem !important; /* 12px - Slightly larger than text */
    color: #1976D2 !important;
}

.density-ultra .mud-input-control .mud-input-adornment svg,
.mud-input-control.density-ultra .mud-input-adornment svg {
    width: 10px !important;
    height: 10px !important;
    fill: #1976D2 !important;
}

/* === Compact Density TextField === */
.density-compact .mud-input-control .mud-input-label,
.mud-input-control.density-compact .mud-input-label {
    font-size: 0.6875rem !important; /* 11px - Slightly larger than ultra */
    color: #555555 !important;
}

.density-compact .mud-input-control .mud-input,
.mud-input-control.density-compact .mud-input {
    font-size: 0.6875rem !important; /* 11px - Matches label size */
    color: #222222 !important;
}

.density-compact .mud-input-control .mud-input-adornment-start,
.density-compact .mud-input-control .mud-input-adornment-end,
.mud-input-control.density-compact .mud-input-adornment-start,
.mud-input-control.density-compact .mud-input-adornment-end {
    font-size: 0.8125rem !important; /* 13px - Slightly larger than text */
    color: #1976D2 !important;
}

.density-compact .mud-input-control .mud-input-adornment svg,
.mud-input-control.density-compact .mud-input-adornment svg {
    width: 12px !important;
    height: 12px !important;
    fill: #1976D2 !important;
}

/* === Cozy Density TextField === */
.density-cozy .mud-input-control .mud-input-label,
.mud-input-control.density-cozy .mud-input-label {
    font-size: 0.75rem !important; /* 12px - Standard comfortable size */
    color: #555555 !important;
}

.density-cozy .mud-input-control .mud-input,
.mud-input-control.density-cozy .mud-input {
    font-size: 0.75rem !important; /* 12px - Matches label size */
    color: #222222 !important;
}

.density-cozy .mud-input-control .mud-input-adornment-start,
.density-cozy .mud-input-control .mud-input-adornment-end,
.mud-input-control.density-cozy .mud-input-adornment-start,
.mud-input-control.density-cozy .mud-input-adornment-end {
    font-size: 0.875rem !important; /* 14px - Standard icon size */
    color: #1976D2 !important;
}

.density-cozy .mud-input-control .mud-input-adornment svg,
.mud-input-control.density-cozy .mud-input-adornment svg {
    width: 14px !important;
    height: 14px !important;
    fill: #1976D2 !important;
}

/* === Spacious Density TextField === */
.density-spacious .mud-input-control .mud-input-label,
.mud-input-control.density-spacious .mud-input-label {
    font-size: 0.8125rem !important; /* 13px - Largest font for spacious density */
    color: #555555 !important;
}

.density-spacious .mud-input-control .mud-input,
.mud-input-control.density-spacious .mud-input {
    font-size: 0.8125rem !important; /* 13px - Matches label size */
    color: #222222 !important;
}

.density-spacious .mud-input-control .mud-input-adornment-start,
.density-spacious .mud-input-control .mud-input-adornment-end,
.mud-input-control.density-spacious .mud-input-adornment-start,
.mud-input-control.density-spacious .mud-input-adornment-end {
    font-size: 1rem !important; /* 16px - Largest icon size */
    color: #1976D2 !important;
}

.density-spacious .mud-input-control .mud-input-adornment svg,
.mud-input-control.density-spacious .mud-input-adornment svg {
    width: 16px !important;
    height: 16px !important;
    fill: #1976D2 !important;
}

/* === Additional States for All Densities === */
/* Focused state - applies across all density levels */
.mud-input-control-focused .mud-input-label {
    color: #1976D2 !important;
}

/* Error state - applies across all density levels */
.mud-input-error .mud-input-label,
.mud-input-error .mud-input {
    color: #d32f2f !important;
}

/* Disabled state - applies across all density levels */
.mud-input-control-disabled .mud-input-label,
.mud-input-control-disabled .mud-input {
    color: #999999 !important;
}