/* ========================================
    CSS definitions encapsulated within the Tree component scope.
    add <link href="_content/IA.UIR.MdBlz/css/IaUirMudTree.css" rel="stylesheet" /> to the host
    page to apply these styles, for example, in Wkf.Client.Index.html. 
    BEM naming convention is used for clarity and maintainability, 
    scoped to the tree component and can be easily understood and maintained.
    with the main container class "iauirmudtree" (as :root) and nested 
    elements following the block__element--modifier structure. 
    ======================================== */

    /* ========================================
       TREE CONTAINER - Structural layout only
       ======================================== */
.iauirmudtree {
    --layered-spacing: 8px; /* MudBlazor components add internal paddin and margin. The space taken depends on a number of layers and components on a layer wrapping the tree component. Observed from DevTools */
    --header-footer-height: calc(var(--header-height) + var(--footer-height) + var(--layered-spacing)*14); 
    /* 56 = 8*7 is an assumption work of spacing 
            MudLayout Default Padding: 8px × 2 = 16px   .mud-layout { padding: 8px; }
            MudMainContent Margin: 4px × 2 = 8px    .mud-main-content { margin: 4px; }
            Document Body Margin: 8px × 2 = 16px    body { margin: 8px; }
            Hidden Spacing in MudTreeContainer: ~16px
                Internal gutters
                Focus outlines
                Hidden accessibility spacing
                Total: 16 + 8 + 16 + 16 = 56px
            now it is 112 = 8px * 14 with additional MudContainer and MudTextField
        */
}

    .iauirmudtree .tree-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
    }

        /* ========================================
           DENSITY-SPECIFIC STYLING
           ======================================== */

        /* --- Text Styling ---
     Applies font size to the typography element within the tree item content.
     Color is intended to cascade from the parent MudTreeView's Style if set,
     otherwise relies on MudBlazor defaults or browser/user-agent styles.
     The selector path ensures targeting within the specific density container.*/

        /* Ultra Density */
        .iauirmudtree .tree-container.density-ultra .mud-treeview .mud-treeview-item .mud-treeview-item-content .mud-typography {
            font-size: 0.625rem !important; /* 10px - Smallest font for ultra density */
            color: inherit !important; /* Inherits color from parent or defaults */
        }

        /* Compact Density */
        .iauirmudtree .tree-container.density-compact .mud-treeview .mud-treeview-item .mud-treeview-item-content .mud-typography {
            font-size: 0.6875rem !important; /* 11px - Slightly larger than ultra */
            color: inherit !important;
        }

        /* Cozy Density */
        .iauirmudtree .tree-container.density-cozy .mud-treeview .mud-treeview-item .mud-treeview-item-content .mud-typography {
            font-size: 0.75rem !important; /* 12px - Standard comfortable size */
            color: inherit !important;
        }

        /* Spacious Density */
        .iauirmudtree .tree-container.density-spacious .mud-treeview .mud-treeview-item .mud-treeview-item-content .mud-typography {
            font-size: 0.8125rem !important; /* 13px - Largest font for spacious density */
            color: inherit !important;
        }


        /* --- Data Icon Styling & Spacing ---
    Controls the size, color, and spacing of the icon associated with the node data (context.Icon ).
    Targets the SVG element inside the icon container (.mud-treeview-item-icon).
    Adjusts the width and margin of the container to control space between the icon and the text*/

        /* Ultra Density */
        .iauirmudtree .tree-container.density-ultra .mud-treeview-item .mud-treeview-item-content .mud-treeview-item-icon {
            width: 14px !important; /* Container width - slightly larger than SVG to provide space */
            padding-left: 1px !important; /* Minimal internal padding */
            padding-right: 1px !important;
            margin-left: 0px !important; /* No left margin */
            margin-right: 2px !important; /* Space between this icon and the text - minimal for ultra density */
            min-width: 14px !important; /* Ensures the container shrinks */
            flex-shrink: 0; /* Prevents flex item from growing/shrinking unexpectedly */
        }

            .iauirmudtree .tree-container.density-ultra .mud-treeview-item .mud-treeview-item-content .mud-treeview-item-icon svg {
                width: 12px !important; /* Actual SVG icon width - smallest for ultra density */
                height: 12px !important; /* Actual SVG icon height */
                fill: #00008B !important; /* Color using raw hex from Palette.Blue */
            }

        /* Compact Density */
        .iauirmudtree .tree-container.density-compact .mud-treeview-item .mud-treeview-item-content .mud-treeview-item-icon {
            width: 16px !important; /* Slightly larger container */
            margin-right: 3px !important; /* Slightly more space for compact density */
        }

            .iauirmudtree .tree-container.density-compact .mud-treeview-item .mud-treeview-item-content .mud-treeview-item-icon svg {
                width: 14px !important; /* Slightly larger SVG */
                height: 14px !important;
                fill: #00008B !important; /* Palette.Blue */
            }

        /* Cozy Density */
        .iauirmudtree .tree-container.density-cozy .mud-treeview-item .mud-treeview-item-content .mud-treeview-item-icon {
            width: 18px !important; /* Standard container size */
            margin-right: 4px !important; /* Standard space for cozy density */
        }

            .iauirmudtree .tree-container.density-cozy .mud-treeview-item .mud-treeview-item-content .mud-treeview-item-icon svg {
                width: 16px !important; /* Standard SVG size */
                height: 16px !important;
                fill: #00008B !important; /* Palette.Blue */
            }

        /* Spacious Density */
        .iauirmudtree .tree-container.density-spacious .mud-treeview-item .mud-treeview-item-content .mud-treeview-item-icon {
            width: 20px !important; /* Largest container */
            margin-right: 5px !important; /* More space for spacious density */
        }

            .iauirmudtree .tree-container.density-spacious .mud-treeview-item .mud-treeview-item-content .mud-treeview-item-icon svg {
                width: 18px !important; /* Largest SVG */
                height: 18px !important;
                fill: #00008B !important; /* Palette.Blue */
            }


        /* --- Expansion Button Container Styling (Spacing) ---
     Controls the size and spacing of the container holding the expand/collapse icon.
     Uses :first-child to target the initial element within the item content,
     which is assumed to be the expand button container based on successful testing.
     Adjusts width and margin to control space between the expand button and the data icon.--- */

        /* Ultra Density */
        .iauirmudtree .tree-container.density-ultra .mud-treeview-item .mud-treeview-item-content > :first-child { /* The expand button container */
            width: 14px !important; /* Container width - smallest for ultra density */
            padding-left: 2px !important; /* Internal padding for the button */
            padding-right: 2px !important;
            margin-left: 0px !important; /* No left margin */
            margin-right: 1px !important; /* Space between expand button and data icon - minimal for ultra */
            min-width: 14px !important; /* Ensures the container shrinks */
            /* flex-shrink: 0; */ /* Prevents flex item from growing/shrinking unexpectedly */
        }

        /* Compact Density */
        .iauirmudtree .tree-container.density-compact .mud-treeview-item .mud-treeview-item-content > :first-child {
            width: 16px !important; /* Slightly larger container */
            margin-right: 2px !important; /* Slightly more space for compact */
        }

        /* Cozy Density */
        .iauirmudtree .tree-container.density-cozy .mud-treeview-item .mud-treeview-item-content > :first-child {
            width: 18px !important; /* Standard size */
            margin-right: 3px !important; /* Standard space for cozy */
        }

        /* Spacious Density */
        .iauirmudtree .tree-container.density-spacious .mud-treeview-item .mud-treeview-item-content > :first-child {
            width: 20px !important; /* Largest container */
            margin-right: 4px !important; /* More space for spacious */
        }

        /* --- Expansion Button Icon Styling ---
     Applies size and color to the SVG element inside the expand button container.
     Uses the same :first-child path to locate the button and then targets the SVG.--- */

        /* Ultra Density */
        .iauirmudtree .tree-container.density-ultra .mud-treeview-item .mud-treeview-item-content > :first-child svg {
            width: 8px !important; /* Smallest SVG icon size for ultra density */
            height: 8px !important;
            fill: #00008B !important; /* Color using raw hex from Palette.Blue */
        }

        /* Compact Density */
        .iauirmudtree .tree-container.density-compact .mud-treeview-item .mud-treeview-item-content > :first-child svg {
            width: 10px !important; /* Slightly larger SVG */
            height: 10px !important;
            fill: #00008B !important; /* Palette.Blue */
        }

        /* Cozy Density */
        .iauirmudtree .tree-container.density-cozy .mud-treeview-item .mud-treeview-item-content > :first-child svg {
            width: 12px !important; /* Standard SVG size */
            height: 12px !important;
            fill: #00008B !important; /* Palette.Blue */
        }

        /* Spacious Density */
        .iauirmudtree .tree-container.density-spacious .mud-treeview-item .mud-treeview-item-content > :first-child svg {
            width: 14px !important; /* Largest SVG */
            height: 14px !important;
            fill: #00008B !important; /* Palette.Blue */
        }