.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Um erro ocorreu."
    }

    /* Styles the Links inside the NavMenu as Chips */
.chip-link .mud-nav-link {
    border-radius: 50px !important; /* Makes it a pill */
    margin: 4px 8px !important;    /* Adds space between chips */
    height: 38px;
    width: calc(100% - 16px) !important;
    /* Prevent text from stretching the chip wider than the menu */
    overflow: hidden;
    /* Transparent background, thin gray border */
    background-color: transparent !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box !important;
}
/* Ensure the text inside doesn't wrap and stays in the chip */
.chip-link .mud-nav-link-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Adds "..." if text is too long */
}

/* Hover effect: Subtle border color change */
.chip-link .mud-nav-link:hover {
    border-color: var(--mud-palette-primary) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05) !important;
}


/* Styles the 'Active' state (when you are on that page) --mud-palette-gray-light --mud-palette-text-secondary*/
.chip-link .mud-nav-link.active {
    border: 2px solid var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: bold;
}
.chip-link .mud-nav-link.active::before {
    content: "•";
    margin-right: 8px;
    font-size: 1.2rem;
    color: var(--mud-palette-primary);
}

/* Styles the Parent Group Title to match the look */
.chip-link .mud-nav-group-header {
 border-radius: 50px !important;
    margin: 4px 8px !important;
    border: 1px solid transparent; /* Keeps spacing consistent with links */
}

/* Adjust width for sub-items to account for indentation */
.mud-nav-group.mud-nav-group-open .mud-nav-link {
    /* If MudBlazor indents by 16px, subtract that too */
    width: calc(100% - 32px) !important;
}

::deep .graph-group-pill {
    background-color: var(--mud-palette-surface);
    border-radius: 50px; /* This creates the "Pill" shape */
    border: 1px solid var(--mud-palette-divider);
    margin: 4px 8px;
    transition: all 0.3s ease;
}

/* Optional: change color when the group is hovered or expanded */
::deep .graph-group-pill:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.graph-group-pill .mud-nav-group-header {
    background-color: var(--mud-palette-warning-lighten) !important;
    color: var(--mud-palette-warning-darken) !important;
    width: fit-content;
}
.graph-group-pill .mud-nav-group-header.active {
    background-color: var(--mud-palette-warning-darken) !important;
    color: var(--mud-palette-warning-lighten) !important;
    border: none;
}

/* Container styling to allow rounded corners */
/* 1. Main Table Container */
.modern-table {
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 8px !important; /* Standardized to 8px */
    overflow: visible;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    background-color: var(--mud-palette-surface) !important; /* Added missing semicolon */
}

/* 2. Inner Container & Scrollbar */
.modern-table .mud-table-container {
    padding-top: 0px !important;
    scrollbar-width: thin; 
    scrollbar-color: var(--mud-palette-primary) transparent;
}

/* 3. Header Styling (Sticky-ready) */
.modern-table .mud-table-head .mud-table-cell {
    background-color: var(--mud-palette-background-grey) !important;
    color: var(--mud-palette-text-primary) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    line-height: 1.2;
    border-bottom: 2px solid var(--mud-palette-primary) !important;
    border-right: 1px solid var(--mud-palette-table-lines) !important;
    z-index: 10;
}

/* 4. Body Cells (Grid Borders & Dark Mode Text) */
.modern-table .mud-table-cell {
    padding: 4px 8px !important; /*padding: 12px 16px !important; */
    border: 1px solid var(--mud-palette-table-lines) !important;
    color: var(--mud-palette-text-primary) !important; /* Fixed: No longer hardcoded dark grey */
}

/* 5. Row Hover Effects */
.modern-table .mud-table-row {
    transition: all 0.2s ease-in-out;
}

.modern-table .mud-table-row:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
    transform: scale(1.002);
    /* Side accent bar using the theme primary color */
    box-shadow: inset 4px 0 0 var(--mud-palette-primary) !important; 
}

/* 6. Zebra Striping */
.modern-table .mud-table-row:nth-of-type(even) {
    background-color: var(--mud-palette-background-grey);
}

/* 7. Pagination (Dark Mode Friendly) */
.modern-table .mud-table-pagination {
    background-color: var(--mud-palette-background-grey) !important;
    border-top: 1px solid var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-secondary) !important;
}

.modern-table .header-badge {
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.70rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Specifically targets datepickers inside table cells */
.compact-datepicker {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.compact-datepicker .mud-input-root-outlined {
    padding: 4px 8px !important; /* Reduces internal height */
    font-size: 0.85rem !important; /* Smaller text */
}

.compact-datepicker .mud-input-label {
    font-size: 0.8rem !important;
    transform: translate(14px, 10px) scale(1); /* Adjusts label position */
}

/* This ensures the MudMenu popover doesn't grow indefinitely */
.message-menu-scroll {
    max-height: 450px;
    overflow-y: auto;
}

/* Optional: Clean up the scrollbar appearance */
.message-menu-scroll::-webkit-scrollbar {
    width: 6px;
}
.message-menu-scroll::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
    border-radius: 10px;
}
/* Ensure the main content area always respects the bottom bar */
.mud-main-content {
    padding-bottom: 70px !important;
}

/* Ensure ScrollToTop isn't buried */
.mud-scroll-to-top {
    margin-bottom: 64px !important;
}
/* 1. Reduce the height and padding of each tree row */
.mud-treeview-item-content {
    min-height: 28px !important; /* Standard is 48px, this makes it much sleeker */
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* 2. Smaller, cleaner font for the labels */
.mud-treeview-item-content .mud-typography {
    font-size: 0.825rem !important; /* Approx 13px */
    letter-spacing: 0.01rem;
    font-weight: 400;
}

/* 3. Make the icons (expand/collapse) smaller to match the font */
.mud-treeview-item-arrow {
    width: 20px !important;
    height: 20px !important;
}

.mud-treeview-item-arrow .mud-icon-root {
    font-size: 1.1rem !important;
}

/* 4. Shrink the checkboxes so they don't look bulky */
.mud-treeview-item-content .mud-checkbox .mud-icon-button {
    padding: 4px !important;
}

.mud-treeview-item-content .mud-checkbox .mud-icon-root {
    font-size: 1.15rem !important;
}

/* 5. Add a subtle hover effect and rounded corners */
.mud-treeview-item-content:hover {
    background-color: var(--mud-palette-action-hover);
    border-radius: 4px;
}

/* 6. Specifically target the "Module/Menu" parent to be slightly bolder */
/* This works because we used Typo.body1 for parents in the code */
.mud-treeview-item-content .mud-typography-body1 {
    font-weight: 600 !important;
    color: var(--mud-palette-text-primary);
}

/* 7. Target the "Submenu" for a more muted look */
.mud-treeview-item-content .mud-typography-body2 {
    color: var(--mud-palette-text-secondary);
}

/* Add this to your page or app.css */
.full-chart svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Optional: remove default padding from the MudItem to gain more space */
.mud-item.xs-12.md-7 {
    padding: 0 !important;
}