/* /Components/Global/LoginScreen.razor.rz.scp.css */
/* --- Full Screen Container --- */
.login-screen-container[b-4q0nt2lzz1] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1000; /* Ensure it's on top */

}

/* --- Login Box --- */
.login-box[b-4q0nt2lzz1] {
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle, 106deg),
        var(--griditem-content-backgroundgradient-color-left, rgba(255, 255, 255, 0.9)),
        var(--griditem-content-backgroundgradient-color-right, rgba(208, 205, 206, 0.85))
    );
    border: var(--griditem-boxborders-size, 1px) solid var(--griditem-boxborders-color, rgba(0, 0, 0, 1));
    border-radius: var(--griditem-boxborders-radius, 8px);
    box-shadow: 0 4px 10px var(--griditem-boxshadow-color, rgba(0, 0, 0, 0.35));
    width: 500px;
    height: 300px;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative; /* Needed for pseudo-element positioning */
    overflow: hidden; /* Prevent pseudo-element bleeding out */
}

/* Add pseudo-element for background image */



.login-box:hover[b-4q0nt2lzz1] {
    border-color: var(--griditem-boxborders-color-hover, rgba(0, 0, 0, 0.5));
    box-shadow: 0 6px 15px var(--griditem-boxshadow-color-hover, rgba(0, 0, 0, 0.6));
}

.login-title[b-4q0nt2lzz1] {
    color: var(--griditem-title-font-color);
    font-size: var(--griditem-title-font-size);
    font-weight: var(--griditem-title-font-weight);
    width:100%;
    height:var(--griditem-title-height);
    line-height:var(--griditem-title-height);
    text-indent:30px;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle),
        var(--griditem-title-backgroundgradient-color-left),
        var(--griditem-title-backgroundgradient-color-right)
    );
    margin-bottom:30px;
    position: relative; /* Ensure title is above the ::before element */
    z-index: 1; /* Stacking context */
}

.login-box[b-4q0nt2lzz1]  form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:15px;
    color:black; /* Note: This sets text color for direct children of form, might not affect inputs */
    position: relative; /* Ensure form is above the ::before element */
    z-index: 1; /* Stacking context */
    padding: 0 40px; /* Add padding to prevent content hitting edges */
    box-sizing: border-box;
}

/* Target form group directly if needed for spacing inside the form */
.form-group[b-4q0nt2lzz1] {
    width: 100%; /* Allow form group to take width */
    margin: 0; /* Reset margin if gap is used on form */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.button-group[b-4q0nt2lzz1] {
    height:50px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    margin-top: auto; /* Push button group towards the bottom if form grows */
    padding-bottom: 20px; /* Add some padding at the bottom */
}


    .form-group[b-4q0nt2lzz1]  .citadel-input-box {
        background-color: var(--input-background-color, rgba(0, 0, 0, 0.02)) !important;
        border: 1px solid var(--input-border-color, rgba(0, 0, 0, 0.65)) !important;
        border-radius: var(--input-border-radius, 8px) !important;
        color: var(--input-font-color, #000) !important;
        padding: var(--input-padding-vertical, 7px) var(--input-padding-horizontal, 10px) !important;
        box-sizing: border-box !important;
        /* Allow inline style from InputWidth to work */
        /* width: auto !important; */ /* Let the parameter set the width */
        transition: border-color 0.2s ease, background-color 0.2s ease;
        /* Autofill override preparation */
        box-shadow: 0 0 0 30px var(--input-background-color, rgba(0, 0, 0, 0.02)) inset !important;
        -webkit-text-fill-color: var(--input-font-color, #000) !important;
        caret-color: var(--input-font-color, #000) !important;
    }

    /* Override for autofill state */
    .form-group[b-4q0nt2lzz1]  .citadel-input-box:-webkit-autofill,
    .form-group[b-4q0nt2lzz1]  .citadel-input-box:autofill {
        border: 1px solid var(--input-border-color, rgba(0, 0, 0, 0.65)) !important;
        -webkit-text-fill-color: var(--input-font-color, #000) !important;
        box-shadow: 0 0 0 30px var(--input-background-color, rgba(0, 0, 0, 0.02)) inset !important;
        transition: background-color 5000s ease-in-out 0s; /* Long transition hack */
        caret-color: var(--input-font-color, #000) !important;
    }


    /* Hover styles for the input (including autofilled hover) */
    .form-group[b-4q0nt2lzz1]  .citadel-input-box:hover,
    .form-group[b-4q0nt2lzz1]  .citadel-input-box:-webkit-autofill:hover,
    .form-group[b-4q0nt2lzz1]  .citadel-input-box:autofill:hover {
        background-color: var(--input-background-color-hover, rgba(255, 255, 255, 1)) !important;
        border-color: var(--input-border-color-hover, rgba(200, 16, 46, 1)) !important;
        /* Update shadow on hover */
        box-shadow: 0 0 0 30px var(--input-background-color-hover, rgba(255, 255, 255, 1)) inset !important;
        -webkit-text-fill-color: var(--input-font-color-hover, #000) !important; /* Use hover font color if defined */
        caret-color: var(--input-font-color-hover, #000) !important;
    }

    /* Focus styles for the input (including autofilled focus) - MATCHES HOVER */
    .form-group[b-4q0nt2lzz1]  .citadel-input-box:focus,
    .form-group[b-4q0nt2lzz1]  .citadel-input-box:-webkit-autofill:focus,
    .form-group[b-4q0nt2lzz1]  .citadel-input-box:autofill:focus {
        /* Use HOVER variables for focus state */
        background-color: var(--input-background-color-hover, rgba(255, 255, 255, 1)) !important;
        border-color: var(--input-border-color-hover, rgba(200, 16, 46, 1)) !important;
        /* Update shadow on focus to match hover background */
        box-shadow: 0 0 0 30px var(--input-background-color-hover, rgba(255, 255, 255, 1)) inset !important;
        -webkit-text-fill-color: var(--input-font-color-hover, #000) !important; /* Use hover font color */
        caret-color: var(--input-font-color-hover, #000) !important;
        outline: none !important; /* Remove default focus outline */
    }

    /* Styling for the label from CitadelInput */
     .form-group[b-4q0nt2lzz1]  .citadel-input-label {
        font-size: var(--griditem-content-font-size, 14px);
        /* Let CitadelInput handle display/width via parameter */
        /* display: block; */
        /* width: auto; */
        margin-bottom: 5px; /* Space below label if stacked */
        margin-right: 10px; /* Space to the right if side-by-side */
        text-align: right; /* Align label text right if side-by-side */
        box-sizing: border-box;
        /* Adjust vertical alignment if needed */
        padding-top: var(--input-padding-vertical, 7px); /* Align with input padding */
        color: black; /* Explicitly set label color if needed */
    }

     /* Container within CitadelInput */
    .form-group[b-4q0nt2lzz1]  .citadel-input-container {
       /* Allow CitadelInput's parameters to control width/layout */
       /* width: 100%; */
       margin: 0;
       display: flex; /* Assuming CitadelInput uses flex for label/input */
       align-items: flex-start; /* Align label/input to the top */
       /* justify-content: center; */ /* Remove centering if causing issues */
       width: auto; /* Let the content define the width */
       max-width: 100%; /* Prevent container from exceeding form group */
    }


/* --- Button Styling --- */
/* Assuming CitadelButton renders a <button> or similar element inside */
/* Use a more specific selector if possible, e.g., ::deep button.citadel-button */
.button-group[b-4q0nt2lzz1]  .citadel-button-element { /* Target buttons inside button-group */
    background-color: var(--griditem-content-backgroundgradient-color-right, #d0cdce);
    color: var(--griditem-title-font-color, #000);
    border: var(--griditem-boxborders-size, 1px) solid var(--griditem-boxborders-color, rgba(0, 0, 0, 1));
    border-radius: var(--griditem-boxborders-radius, 8px);
    padding: 10px 15px;
    font-size: var(--griditem-content-font-size, 14px);
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    /* Width is set via parameter, but ensure box-sizing */
    box-sizing: border-box;
    /* margin: 5px; */ /* Removed margin, using gap on parent */
    text-align: center;
    display: inline-block; /* Allow side-by-side */
    min-width: 100px; /* Ensure buttons have a minimum width */
}

.button-group[b-4q0nt2lzz1]  .citadel-button-element:hover { /* Target buttons inside button-group */
    border-color: var(--griditem-boxborders-color-hover, rgba(0, 0, 0, 0.5));
    box-shadow: 0 2px 5px var(--griditem-boxshadow-color-hover, rgba(0, 0, 0, 0.6));
    background-color: var(--griditem-content-backgroundgradient-color-left, #f0f0f0);
}

/* Remove specific button group styling from .form-group */
/*
.login-box .form-group.button-group {
   text-align: center;
   padding-top: 20px;
   margin-bottom: 0;
   width: 100%;
   justify-content: center;
}
*/

/* --- Validation & Alert Styling --- */
[b-4q0nt2lzz1] .validation-message {
    color: var(--griditem-title-icon-color, #dc3545); /* Red color for errors */
    font-size: calc(var(--griditem-content-font-size, 14px) - 2px); /* Slightly smaller font */
    text-align: left; /* Align text to the left */
    display: block; /* Ensure it takes block-level space */
    width: 100%; /* Take full width */
    box-sizing: border-box;
    position: relative; /* Keep relative positioning if needed elsewhere */
    z-index: 1; /* Keep z-index if needed */

    /* --- Adjust Spacing --- */
    /* Remove the large margin-top */
    margin-top: 4px; /* Add a small space below the input */

    /* Adjust padding-left to align with the input field */
    /* This assumes the label (130px) and input are within the form-group */
    /* You might need to adjust 130px if the LabelWidth changes */
    /* Add a small gap (e.g., 10px) after the label width */
    padding-left: calc(130px + 10px);
}

/* Adjust validation message container if label/input are stacked */
.form-group.stacked[b-4q0nt2lzz1]  .validation-message { /* Add 'stacked' class if needed */
    padding-left: 5px; /* Reset indent */
}


.alert[b-4q0nt2lzz1] {
    padding-top:10px;
    padding-bottom:10px;
    border-radius: var(--griditem-boxborders-radius, 8px);
    font-size: calc(var(--griditem-content-font-size, 14px) - 1px);
    text-align: center; /* Center alert text */
    width: 100%;
    max-width: 450px; /* Match input group width */
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    position: relative; /* Ensure alert is above ::before */
    z-index: 1;
}

.alert-danger[b-4q0nt2lzz1] {
    color: var(--griditem-title-icon-color, #721c24);
    background-color: #fdd; /* Light red */
    border: 1px solid var(--griditem-title-icon-color, #dc3545);
}
/* /Components/Global/MainLayout.razor.rz.scp.css */
/* Make the main layout use flexbox */
.layout-container[b-4h1rnow9xk] {
    display: flex;
    height: 100vh; 
    width: 100vw; 
    overflow: hidden; 
}

/* Area to the right of the sidebar */
.main-panel[b-4h1rnow9xk] {
    flex-grow: 1; /* Takes remaining width */
    display: flex; /* Use flex for the direct child (Tabs) */
    flex-direction: column; /* Stack children vertically */
    overflow: hidden; /* Prevent scrollbars here */
    background-color: var(--main-background-color); 
    position: relative; /* CRITICAL: Needed for absolute positioning of the overlay header */
}

/* The overlay header row */
.top-header-overlay[b-4h1rnow9xk] {
    position: absolute; /* Take it out of normal flow */
    top: 0;           /* Position at the top of main-panel */
    right: 0;         /* Position at the right of main-panel */
    height: 30px; /* MATCH THE TAB BAR HEIGHT from Tabs.razor.css */
    display: flex;
    align-items: center; 
    padding: 0 1rem; 
    z-index: 15; /* Ensure it's above the tab bar (tab-bar has z-index 10) */
    /* Optional: Add a subtle background if needed, or keep transparent */
    /* background-color: rgba(42, 42, 42, 0.5); */ 
}

/* Simple spacer to push items to the right */
.top-header-overlay .spacer[b-4h1rnow9xk] {
    flex-grow: 1;
}

/* --- CRITICAL ADJUSTMENTS NEEDED FOR TABS COMPONENT --- */
/* You MUST add padding/margin adjustments within your Tabs component's CSS */
/* to prevent content from being hidden underneath the overlay header/bell */

/* Example (adjust selectors and values based on your Tabs.razor.css): */

/* Add padding to the right of the tab bar itself so the last tab isn't under the bell */
/* ::deep .tab-bar { */
/*    padding-right: 60px; /* Adjust width based on bell size + padding */
/* } */

/* Add padding to the top of the actual content area */
/* ::deep .tab-content { */
    /* If tab-content is directly scrollable */
/*    padding-top: 5px; /* Small padding if header only overlaps tab bar */
/* } */
/* OR */
/* ::deep .tab-pane { */
    /* If each tab-pane needs padding */
/*    padding-top: 5px; */
/* } */

/* --- End Critical Adjustments --- */


/* Ensure Tabs component fills the main-panel correctly */
/* This assumes Tabs component's root element takes available space */
[b-4h1rnow9xk] .tabs-container {
   flex-grow: 1; /* Make tabs container fill the main-panel */
   /* Ensure height/width are handled correctly within Tabs component */
   /* height: 100%; might be needed */
}

/* Assuming SideBar has a fixed width (e.g., defined in its own CSS) */
/* Example: */
/* ::deep .sidebar { */
/*    width: 250px; */
/*    flex-shrink: 0; */ 
/* } */
/* /Components/Global/NotificationBell.razor.rz.scp.css */
.notification-bell-container[b-9qk9kc77ck] {
    position: relative; 
    cursor: pointer;
    padding: 5px; 
    display: flex; 
    align-items: center;
    justify-content: center;
    color: var(--header-icon-color, white); 
}

    .notification-bell-container:hover[b-9qk9kc77ck] {
        opacity: 0.8; 
    }

/* Style the Font Awesome icon */
.bell-icon[b-9qk9kc77ck] {
    font-size: 1.3rem; /* Adjust size for Font Awesome icon */
    line-height: 1; 
}

/* Style the notification count badge - (Keep this section as is) */
.notification-badge[b-9qk9kc77ck] {
    position: absolute;
    top: -2px; 
    right: -5px; 
    background-color: var(--notification-badge-background, red); 
    color: var(--notification-badge-color, white);
    border-radius: 50%; 
    padding: 0.1em 0.4em; 
    font-size: 0.75rem; 
    font-weight: bold;
    min-width: 18px; 
    height: 18px; 
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); 
    line-height: 1; 
}
/* /Components/Global/Session.razor.rz.scp.css */
/* /Components/Global/SideBar.razor.rz.scp.css */
/* Container to hold both sidebar states */
.SideBar-Container[b-ipx5fxkdtm] {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 100;
    left: 0;
}

/* Sidebar States */
.SideBar-Extended[b-ipx5fxkdtm] {
    display: flex;
    flex-direction: column;
    width: 300px;
    background: linear-gradient(135deg, #0D1F24 0%, #475D64 50%, #0D1F24 100%);
    border-right: 1px solid #C8102E;
    box-shadow: 5px 0px 10px 0px rgba(0,0,0,0.45);
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 101;
    transition: transform 0.3s ease-out, opacity 0.2s ease-out;
    overflow-y: auto; /* Allow scrolling if content exceeds height */
    overflow-x: hidden;
}

    .SideBar-Extended.visible[b-ipx5fxkdtm] {
        transform: translateX(0);
        opacity: 1;
    }

    .SideBar-Extended.hidden[b-ipx5fxkdtm] {
        transform: translateX(-280px); /* Adjust if needed based on animation */
        opacity: 0;
        pointer-events: none;
    }

.SideBar[b-ipx5fxkdtm] {
    display: flex;
    flex-direction: column;
    width: 20px;
    background: linear-gradient(135deg, #0D1F24 0%, #475D64 50%, #0D1F24 100%);
    border-right: 1px solid #C8102E;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 100;
    transition: transform 0.3s ease-out, opacity 0.2s ease-out;
}

    .SideBar.visible[b-ipx5fxkdtm] {
        transform: translateX(0);
        opacity: 1;
    }

    .SideBar.hidden[b-ipx5fxkdtm] {
        transform: translateX(-20px);
        opacity: 0;
        pointer-events: none;
    }

/* Header Components */
.SideBar-Header[b-ipx5fxkdtm] {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative; /* Changed from sticky to relative or remove if not needed */
    transition: opacity 0.15s ease;
    flex-shrink: 0; /* Prevent header from shrinking */
}

.SideBar-Header-Logo[b-ipx5fxkdtm] {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 20px;
    transition: transform 0.15s ease;
}

    .SideBar-Header-Logo img[b-ipx5fxkdtm] {
        width: 100%;
        height: 100%;
    }

.SideBar-Header-Title[b-ipx5fxkdtm] {
    line-height: 60px;
    text-align: center;
    font-family: Roboto;
    font-size: 24px;
    letter-spacing: 5px;
    color: white;
    transition: color 0.15s ease;
}

.SideBar-Header-GradientLine[b-ipx5fxkdtm] {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(13, 31, 36, 0) 0%, #475D64 50%, rgba(13, 31, 36, 0) 100%);
    transition: opacity 0.15s ease;
    flex-shrink: 0; /* Prevent line from shrinking */
}

/* Main Menu Structure */
.SideBar-MainMenu[b-ipx5fxkdtm] {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow menu to take remaining space */
}

.MainMenu-Category[b-ipx5fxkdtm] {
    display: flex;
    flex-direction: column;
    border: 1px solid #474747;
    margin: 10px 20px; /* Reduced top/bottom margin */
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(102, 102, 102, 0.4) 100%);
    transition: all 0.15s ease-in-out;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* Needed for collapsing items */
}

.MainMenu-Category-Header[b-ipx5fxkdtm] {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    transition: background-color 0.15s ease;
    cursor: pointer; /* Indicate clickable header */
    flex-shrink: 0; /* Prevent header from shrinking */
}
    /* Optional: Highlight header on hover */
    .MainMenu-Category-Header:hover[b-ipx5fxkdtm] {
        background-color: rgba(255, 255, 255, 0.05);
    }


.MainMenu-Category-Header-Icon[b-ipx5fxkdtm] {
    width: 15px;
    height: 15px;
    position: absolute;
    left: 10px;
    transition: transform 0.15s ease;
}

    .MainMenu-Category-Header-Icon img[b-ipx5fxkdtm] {
        width: 100%;
        height: 100%;
    }

.MainMenu-Category-Header-Title[b-ipx5fxkdtm] {
    line-height: 40px;
    text-align: left;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    color: white;
    text-indent: 40px;
    transition: color 0.15s ease;
    user-select: none; /* Prevent text selection on click */
}

/* --- NEW: Category Arrow Indicator --- */
.category-arrow[b-ipx5fxkdtm] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(255, 255, 255, 0.7); /* Default arrow pointing down */
    transition: transform 0.3s ease-out, border-top-color 0.2s ease;
}

    .category-arrow.expanded[b-ipx5fxkdtm] {
        transform: translateY(-50%) rotate(180deg); /* Point arrow up when expanded */
    }

.MainMenu-Category-Header:hover .category-arrow[b-ipx5fxkdtm] {
    border-top-color: #C8102E; /* Arrow color change on header hover */
}


/* --- NEW: Category Items Container --- */
.MainMenu-Category-Items[b-ipx5fxkdtm] {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s linear, padding 0.4s ease-out;
    padding-left: 10px; /* Indent items slightly */
    padding-right: 10px;
    padding-top: 0;
    padding-bottom: 0;
}

    .MainMenu-Category-Items.expanded[b-ipx5fxkdtm] {
        max-height: 1500px; /* Large enough for content */
        opacity: 1;
        padding-top: 5px; /* Space above first item when expanded */
        padding-bottom: 10px; /* Space below last item when expanded */
    }


/* Menu Items (adjustments for icon positioning) */
.MainMenu-Category-Item[b-ipx5fxkdtm] {
    width: 100%;
    position: relative;
    color: #D0CDCE;
    cursor: pointer;
    transition: all 0.15s ease-out;
    box-sizing: border-box;
    margin-bottom: 5px;
    border-radius: 3px; /* Slightly rounded items */
    overflow: hidden; /* Contain submenus */
}
    /* Remove margin from last item inside the expanded container */
    .MainMenu-Category-Items.expanded .MainMenu-Category-Item:last-child[b-ipx5fxkdtm] {
       margin-bottom: 0;
    }


.MainMenu-Category-Item-Container[b-ipx5fxkdtm] {
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    transition: all 0.15s ease-out;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    position: relative;
    box-sizing: border-box;
}

.MainMenu-Category-Item:hover .MainMenu-Category-Item-Container[b-ipx5fxkdtm] {
    background: rgba(0,0,0,0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.MainMenu-Category-Item:hover .MainMenu-Category-Item-Title[b-ipx5fxkdtm] {
    color: #C8102E;
}

/* Selected state for items WITHOUT subitems */
.MainMenu-Category-Item-Selected:not(:has(.MainMenu-SubItems)) .MainMenu-Category-Item-Container[b-ipx5fxkdtm] {
    background: rgba(0,0,0,0.25);
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3);
    border-left: 2px solid #C8102E;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}
.MainMenu-Category-Item-Selected:not(:has(.MainMenu-SubItems)) .MainMenu-Category-Item-Title[b-ipx5fxkdtm] {
    color: white;
}
.MainMenu-Category-Item-Selected:not(:has(.MainMenu-SubItems)) .MainMenu-Category-Item-Icon[b-ipx5fxkdtm] {
    width: 5px;
    height: 5px;
    background-color: #C8102E;
}


/* --- MODIFIED: Icon Positioning --- */
.MainMenu-Category-Item-Icon[b-ipx5fxkdtm] {
    width: 3px;
    height: 3px;
    background-color: white;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Adjust left position to create space before text */
    left: 45px;
    border-radius: 10px;
    transition: all 0.15s ease-in-out;
}


/* --- MODIFIED: Title Positioning (using padding) --- */
.MainMenu-Category-Item-Title[b-ipx5fxkdtm] {
    font-family: Roboto;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 35px;
    transition: color 0.15s ease;
    white-space: nowrap;
    position: relative; /* Keep relative for submenu arrow */
    width: calc(100% - 30px); /* Adjust width calculation based on padding/arrow */
    overflow: hidden;
    text-overflow: ellipsis;
    /* Use padding-left instead of text-indent */
    padding-left: 60px; /* This creates space for the icon */
    box-sizing: border-box; /* Include padding in width */
}


/* Submenu arrow styles */
.submenu-arrow[b-ipx5fxkdtm] {
    position: absolute;
    right: 10px; /* Adjusted position */
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s;
    pointer-events: none; /* Keep click on parent */
    padding: 0 5px; /* Add some padding */
}

    .submenu-arrow.expanded[b-ipx5fxkdtm] {
        color: #C8102E;
    }

.MainMenu-Category-Item:hover .submenu-arrow[b-ipx5fxkdtm] {
    color: #C8102E;
}


/* Sub Menu Items */
.MainMenu-SubItems[b-ipx5fxkdtm] {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s linear, padding 0.4s ease-out;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    width: 100%; /* Take full width of parent item */
    padding-left: 0; /* Reset padding, control via subitem */
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

    .MainMenu-SubItems.expanded[b-ipx5fxkdtm] {
        max-height: 600px; /* Adjust as needed */
        opacity: 1;
        padding-top: 5px;
        padding-bottom: 5px;
        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s linear, padding 0.4s ease-out;
    }

/* SubItem styles */
.MainMenu-SubItem[b-ipx5fxkdtm] {
    width: 100%; /* Let padding handle indent */
    height: 30px;
    position: relative;
    color: #D0CDCE;
    cursor: pointer;
    transition: all 0.15s ease-out;
    box-sizing: border-box;
    margin-bottom: 3px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
    border-radius: 3px; /* Match item radius */
    /* Add padding to the subitem container itself */
    padding-left: 15px;
}

    .MainMenu-SubItems.expanded .MainMenu-SubItem:last-child[b-ipx5fxkdtm] {
        margin-bottom: 0;
    }


.MainMenu-SubItem:hover[b-ipx5fxkdtm] {
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

    .MainMenu-SubItem:hover .MainMenu-SubItem-Title[b-ipx5fxkdtm] {
        color: #C8102E;
    }

/* Selected state for subitems */
.MainMenu-SubItem-Selected[b-ipx5fxkdtm] {
    background: rgba(0,0,0,0.3);
    /* Adjust border relative to padding */
    border-left: 2px solid #C8102E;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}
.MainMenu-SubItem-Selected .MainMenu-SubItem-Title[b-ipx5fxkdtm] {
    color: white;
}
.MainMenu-SubItem-Selected .MainMenu-SubItem-Icon[b-ipx5fxkdtm] {
    width: 4px;
    height: 4px;
    background-color: #C8102E;
}


/* --- MODIFIED: SubItem Icon Positioning --- */
.MainMenu-SubItem-Icon[b-ipx5fxkdtm] {
    width: 3px;
    height: 3px;
    background-color: white;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Position relative to the padded subitem container */
    left: 65px; /* Adjust as needed relative to title padding */
    border-radius: 10px;
    transition: all 0.15s ease-in-out;
}


/* --- MODIFIED: SubItem Title Positioning (using padding) --- */
.MainMenu-SubItem-Title[b-ipx5fxkdtm] {
    font-family: Roboto;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 30px; /* Match subitem height */
    transition: color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%; /* Title takes remaining width */
    /* Use padding-left instead of text-indent */
    padding-left: 80px; /* This creates space for the icon */
    box-sizing: border-box; /* Include padding in width */
}


/* Footer (Keep styles if using a footer) */
.SideBar-Footer[b-ipx5fxkdtm] {
    width: 100%; /* Match extended sidebar width */
    height: 100px; /* Example height */
    position: sticky; /* Make footer sticky */
    bottom: 0;
    background: inherit; /* Match sidebar background */
    z-index: 102; /* Ensure footer is above content */
    flex-shrink: 0; /* Prevent footer from shrinking */
    /* Add other styling as needed */
     border-top: 1px solid #475D64; /* Example separator */
}


/* Scrollbar styling (optional, for webkit browsers) */
.SideBar-Extended[b-ipx5fxkdtm]::-webkit-scrollbar {
    width: 8px;
}

.SideBar-Extended[b-ipx5fxkdtm]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.SideBar-Extended[b-ipx5fxkdtm]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.SideBar-Extended[b-ipx5fxkdtm]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}
/* /Components/Global/Tabs.razor.rz.scp.css */
/* Enhanced drag and drop styles for Blazor Server */
.tab[draggable="true"][b-agecb1hex3] {
    cursor: grab;
}

.tab[draggable="true"]:active[b-agecb1hex3] {
    cursor: grabbing;
}

.tab.dragging[b-agecb1hex3] {
    opacity: 0.6;
    transform: scale(0.95) rotate(1deg);
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: none; /* Disable transitions during drag */
}

/* Visual feedback for valid drop zones */
.tabs-section:has(.tab.dragging) .tab:not(.dragging):hover[b-agecb1hex3] {
    background: var(--tab-background-color-inactive-hover, rgba(255, 255, 255, 0.1));
    border-left: 3px solid var(--tab-font-color-active, #007acc);
}

/* Prevent text selection during drag */
.tab[b-agecb1hex3] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Smooth transitions when not dragging */
.tab:not(.dragging)[b-agecb1hex3] {
    transition: all 0.15s ease-in-out;
}

/* Make close button non-draggable and maintain pointer events */
.close-btn[b-agecb1hex3] {
    pointer-events: auto;
    cursor: pointer;
}

/* NEW: Tab icon styling */
.tab-icon[b-agecb1hex3] {
    margin-right: 10px;
    color: #ff4444;
    font-size: 1.1em;
    opacity: 0.8;
}

/* Rest of your existing styles remain unchanged */
.tabs-container[b-agecb1hex3] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    overflow: hidden;
}

.tab-bar[b-agecb1hex3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    height: 35px;
    position: relative;
    z-index: 10;
}

.tabs-section[b-agecb1hex3] {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    min-width: 0;
}

.toolbar-section[b-agecb1hex3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 20px;
    flex-shrink: 0;
    background: var(--tab-bar-background, inherit);
}

.tab[b-agecb1hex3] {
    height: 35px;
    color: var(--tab-font-color-inactive);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    background: var(--tab-background-color-inactive);
    font-family: Roboto;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    padding-left: 25px;
    padding-right: 25px;
    position: relative;
    transition: all 0.15s ease-in-out;
    margin-top: 0px;
    border-left: 2px solid rgba(0,0,0,0.5);
    flex-shrink: 0;
}

/* All your existing tab styles... */
.tab.active[b-agecb1hex3] {
    border: 1px solid rgba(0,0,0,0.5);
    background: none;
    border-bottom: none;
    box-shadow: 0px 0px 10px black;
    color: var(--tab-font-color-active);
    z-index: 2;
    font-weight: 600;
}

.tab.active:hover[b-agecb1hex3] {
    border: 1px solid rgba(0,0,0,0.5);
    background: none;
    border-bottom: none;
    color: var(--tab-font-color-active);
}

.tab:hover[b-agecb1hex3] {
    color: var(--tab-font-color-inactive-hover);
    background: var(--tab-background-color-inactive-hover);
}

.close-btn[b-agecb1hex3] {
    background: none;
    border: none;
    color: var(--tab-closebutton-color);
    cursor: pointer;
    font-size: 16px;
    position: absolute;
    right: 4px;
    bottom: 17px;
    opacity: 1;
    transition: all 0.15s ease;
    outline: none;
    width: auto;
    padding: 0;
}

.close-btn:hover[b-agecb1hex3] {
    color: var(--tab-closebutton-color-hover);
    opacity: 1;
}

.toolbar-icon[b-agecb1hex3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: var(--header-icon-color, var(--tab-font-color-inactive));
    border-radius: 4px;
    transition: all 0.15s ease-in-out;
}

.toolbar-icon:hover[b-agecb1hex3] {
    background: var(--toolbar-icon-hover-background, rgba(255, 255, 255, 0.1));
    color: var(--toolbar-icon-hover-color, var(--tab-font-color-active));
}

.toolbar-icon i[b-agecb1hex3] {
    font-size: 16px;
}

.tab-content[b-agecb1hex3] {
    flex: 1;
    overflow-x: auto;
    position: relative;
}

.tab-pane[b-agecb1hex3] {
    transition: opacity 0.15s ease !important;
}

.tab-pane:not(.active)[b-agecb1hex3] {
    display: none;
    opacity: 0;
}

.tab-pane.active[b-agecb1hex3] {
    opacity: 1;
    animation: fadeIn-b-agecb1hex3 0.25s ease-out forwards;
}

.help-video-btn[b-agecb1hex3] {
    transition: all 0.2s ease;
}

.help-video-btn.has-video[b-agecb1hex3] {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.help-video-btn.has-video:hover[b-agecb1hex3] {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.help-video-btn.no-video[b-agecb1hex3] {
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

.help-video-btn.no-video:hover[b-agecb1hex3] {
    color: rgba(255, 255, 255, 0.4);
}

@keyframes fadeIn-b-agecb1hex3 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* /Components/Global/ToastContainer.razor.rz.scp.css */
.toast-container[b-fsc5963ku0] {
    position: fixed;
    top: var(--toast-position-top);
    right: var(--toast-position-right);
    z-index: var(--toast-z-index);
    display: flex;
    flex-direction: column;
    gap: var(--toast-gap);
    max-width: var(--toast-max-width);
}

.toast[b-fsc5963ku0] {
    border-radius: var(--toast-border-radius);
    box-shadow: var(--toast-box-shadow);
    overflow: hidden;
    animation: toast-in-b-fsc5963ku0 0.3s ease forwards;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.toast-fade-out[b-fsc5963ku0] {
    opacity: 0;
}

.toast-success[b-fsc5963ku0] {
    background-color: var(--toast-success-background-color);
    border-left: var(--toast-border-size) solid var(--toast-success-border-color);
}

.toast-error[b-fsc5963ku0] {
    background-color: var(--toast-error-background-color);
    border-left: var(--toast-border-size) solid var(--toast-error-border-color);
}

.toast-header[b-fsc5963ku0] {
    padding: var(--toast-header-padding-vertical) var(--toast-header-padding-horizontal);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--toast-header-border-bottom-color);
}

.toast-title[b-fsc5963ku0] {
    flex-grow: 1;
    font-weight: var(--toast-title-font-weight);
    font-size: var(--toast-title-font-size);
}

.toast-success .toast-title[b-fsc5963ku0] {
    color: var(--toast-success-border-color);
}

.toast-error .toast-title[b-fsc5963ku0] {
    color: var(--toast-error-border-color);
}

.toast-time[b-fsc5963ku0] {
    color: var(--toast-time-color);
    margin-right: 10px; /* No variable, matches original */
    font-size: var(--toast-time-font-size);
}

.toast-body[b-fsc5963ku0] {
    padding: var(--toast-body-padding-vertical) var(--toast-body-padding-horizontal);
    line-height: var(--toast-body-line-height);
    color: var(--main-font-color); /* Matches other components */
    font-size: var(--main-font-size); /* Matches other components */
}

.toast-close[b-fsc5963ku0] {
    background: transparent;
    border: none;
    font-size: var(--toast-close-font-size);
    line-height: 1;
    cursor: pointer;
    color: var(--toast-close-color);
    opacity: var(--toast-close-opacity);
    transition: opacity 0.2s;
}

    .toast-close:hover[b-fsc5963ku0] {
        opacity: var(--toast-close-opacity-hover);
        color: var(--main-title-color-hover); /* Matches accent color */
    }

@keyframes toast-in-b-fsc5963ku0 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}
/* /Components/Global/VideoPlayer.razor.rz.scp.css */
/* Apply main font settings as a base */
:host[b-1chrp9ot6y] {
    font-size: var(--main-font-size);
    color: var(--main-font-color);
}

@keyframes fadeIn-b-1chrp9ot6y {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-b-1chrp9ot6y {
    from { 
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.video-backdrop[b-1chrp9ot6y] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1060;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-1chrp9ot6y 0.3s ease-out forwards;
}

.video-container[b-1chrp9ot6y] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
    z-index: 1070;
    padding: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.video-content[b-1chrp9ot6y] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    pointer-events: auto;
    border: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    border-radius: var(--griditem-boxborders-radius);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    background-color: var(--griditem-background-color, #ffffff);
    overflow: hidden;
    animation: slideIn-b-1chrp9ot6y 0.4s ease-out forwards;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.video-content:hover[b-1chrp9ot6y] {
     box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.4);
     border-color: var(--griditem-boxborders-color-hover);
}

.video-header[b-1chrp9ot6y] {
    display: flex; 
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--grid-padding-left, 1rem);
    height: var(--griditem-title-height);
    box-sizing: border-box;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle, 90deg),
        var(--griditem-title-backgroundgradient-color-left),
        var(--griditem-title-backgroundgradient-color-right)
    );
    border-bottom: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
}

.video-title[b-1chrp9ot6y] {
    margin: 0; 
    padding: 0; 
    font-size: var(--griditem-title-font-size);
    font-weight: var(--griditem-title-font-weight);
    color: var(--griditem-title-font-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
}

.video-body[b-1chrp9ot6y] {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    min-height: 300px;
}

.video-body video[b-1chrp9ot6y] {
    width: 100%;
    height: auto;
    max-height: 70vh;
    outline: none;
}

.video-placeholder[b-1chrp9ot6y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    min-height: 300px;
    background-color: #f5f5f5;
}

.video-placeholder i[b-1chrp9ot6y] {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #ccc;
}

.video-placeholder p[b-1chrp9ot6y] {
    margin: 0;
    font-size: 1.1rem;
}

.video-footer[b-1chrp9ot6y] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 1rem var(--grid-padding-left, 1rem);
    border-top: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    background-color: var(--griditem-title-backgroundgradient-color-left, #f8f9fa);
}

.video-footer p[b-1chrp9ot6y] {
    margin: 0;
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    line-height: 1.4;
}

.btn-close[b-1chrp9ot6y] {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: var(--griditem-title-font-color);
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: var(--griditem-boxborders-radius, 0.25rem);
    opacity: 0.8;
    cursor: pointer;
    transition: opacity .15s ease-in-out;
}

.btn-close:hover[b-1chrp9ot6y] {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .video-container[b-1chrp9ot6y] {
        padding: 0.5rem;
    }
    
    .video-content[b-1chrp9ot6y] {
        max-width: 100%;
        max-height: 95vh;
    }
    
    .video-body[b-1chrp9ot6y] {
        min-height: 200px;
    }
    
    .video-body video[b-1chrp9ot6y] {
        max-height: 60vh;
    }
}
/* /Components/GridComponents/CustomGrid.razor.rz.scp.css */
.custom-grid[b-ckpki6hqrb] {
    display: grid;
    position: relative;
    grid-template-columns: repeat(var(--grid-columns, 10), 1fr);
    grid-template-rows: repeat(var(--grid-rows, 8), var(--row-height, 100px));
    grid-column-gap: var(--grid-column-gap);
    grid-row-gap: var(--grid-row-gap);
    margin-left: var(--padding-left, 20px);
    margin-right: var(--padding-right, 40px);
    height: 100%;
    padding-top: 20px;
    min-height: 0;
}

    .custom-grid > *[b-ckpki6hqrb] {
        box-sizing: border-box;
    }
/* /Components/GridComponents/DynamicGrid.razor.rz.scp.css */
.dynamic-grid-container[b-u5echz79r5] {
    width: 100%;
    height: 100%;
    position: relative;
}

.dynamic-grid[b-u5echz79r5] {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    grid-template-rows: repeat(var(--grid-rows), var(--row-height));
    gap: var(--grid-row-gap) var(--grid-column-gap);
    min-height: 400px;
    position: relative;
    padding: 20px;
    margin-right: 20px;
}

.dynamic-grid.edit-mode[b-u5echz79r5] {
    background-color: transparent;
    border: 2px dashed #007bff;
    border-radius: 4px;
}

.dynamic-grid-cell[b-u5echz79r5] {
    position: relative;
    border: 1px dashed rgba(0, 123, 255, 0.3);
    border-radius: 4px;
    transition: all 0.2s ease;
    background: rgba(0, 123, 255, 0.05);
}

.dynamic-grid-cell.occupied[b-u5echz79r5] {
    background-color: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.1);
}

.dynamic-grid-cell.drop-target[b-u5echz79r5] {
    background-color: rgba(0, 123, 255, 0.1);
    border-color: #007bff;
    border-width: 2px;
}

.dynamic-grid-item[b-u5echz79r5] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--griditem-boxborders-radius);
    box-shadow: 5px 5px 10px var(--griditem-boxshadow-color);
    border: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    transition: all 0.3s ease;
    position: relative;
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle), 
        var(--griditem-content-backgroundgradient-color-left),
        var(--griditem-content-backgroundgradient-color-right));
    z-index: 10;
}

.dynamic-grid-item:hover[b-u5echz79r5] {
    box-shadow: 5px 5px 10px var(--griditem-boxshadow-color-hover);
    border: 1px solid var(--griditem-boxborders-color-hover);
}

/* DRAGGING STATE - Completely invisible widget */
.dynamic-grid-item.dragging[b-u5echz79r5] {
    opacity: 0 !important; /* Completely invisible */
    pointer-events: none;
    z-index: 1 !important;
}

/* RESIZING STATE */
.dynamic-grid-item.resizing[b-u5echz79r5] {
    user-select: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transform: scale(1.02);
    z-index: 1000 !important;
    border: 2px solid #007bff;
}

.dynamic-grid-item.resizing *[b-u5echz79r5] {
    pointer-events: none;
}

.dynamic-grid-item-content[b-u5echz79r5] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dynamic-grid-item-header[b-u5echz79r5] {
    justify-content: space-between;
    align-items: center;
    min-height: 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    font-family: Roboto;
    letter-spacing: 2px;
    display: flex;
    padding: 0px 12px;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle), 
        var(--griditem-title-backgroundgradient-color-left),
        var(--griditem-title-backgroundgradient-color-right));
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 1);
    height: var(--griditem-title-height);
    font-size: var(--griditem-title-font-size);
    font-weight: var(--griditem-title-font-weight);
    color: var(--griditem-title-font-color);
}

.dynamic-grid-item-header.drag-handle[b-u5echz79r5] {
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.dynamic-grid-item-header.drag-handle:active[b-u5echz79r5] {
    cursor: grabbing;
}

.dynamic-grid-item-title[b-u5echz79r5] {
    font-weight: var(--griditem-title-font-weight);
    color: var(--griditem-title-font-color);
    font-size: var(--griditem-title-font-size);
    user-select: none;
    pointer-events: none;
}

.dynamic-grid-btn-remove[b-u5echz79r5] {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s;
    font-size: 0.9rem;
    pointer-events: auto;
}

.dynamic-grid-btn-remove:hover[b-u5echz79r5] {
    color: #dc3545;
}

.dynamic-grid-item-body[b-u5echz79r5] {
    flex: 1;
    padding: 1rem;
    overflow: auto;
}

/* Resize Handles */
.resize-handles[b-u5echz79r5] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 20;
}

.resize-handle[b-u5echz79r5] {
    position: absolute;
    pointer-events: all;
    background: var(--bs-primary, #007bff);
    transition: all 0.2s ease;
    opacity: 0;
}

.dynamic-grid-item:hover .resize-handle[b-u5echz79r5] {
    opacity: 0.8;
}

.resize-handle:hover[b-u5echz79r5] {
    opacity: 1 !important;
    transform: scale(1.1);
}

.corner-resize[b-u5echz79r5] {
    bottom: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: nw-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.width-resize[b-u5echz79r5] {
    top: 50%;
    right: -3px;
    width: 6px;
    height: 60%;
    transform: translateY(-50%);
    cursor: ew-resize;
    border-radius: 3px;
}

.height-resize[b-u5echz79r5] {
    bottom: -3px;
    left: 50%;
    width: 60%;
    height: 6px;
    transform: translateX(-50%);
    cursor: ns-resize;
    border-radius: 3px;
}

/* Enhanced Drop Preview */
.dynamic-grid-drop-preview[b-u5echz79r5] {
    background: rgba(40, 167, 69, 0.25) !important;
    border: 3px solid #28a745 !important;
    border-radius: 8px;
    pointer-events: none;
    z-index: 900 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulseGreen-b-u5echz79r5 0.8s infinite;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.drop-preview-content[b-u5echz79r5] {
    text-align: center;
    color: #28a745;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.drop-preview-content i[b-u5echz79r5] {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8));
}

@keyframes pulseGreen-b-u5echz79r5 {
    0% { 
        opacity: 0.7; 
        transform: scale(1);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.02);
    }
    100% { 
        opacity: 0.7; 
        transform: scale(1);
    }
}

/* Show grid cells more prominently when dragging */
.dynamic-grid.edit-mode .dynamic-grid-cell[b-u5echz79r5] {
    transition: all 0.2s ease;
}

.dynamic-grid.edit-mode.has-dragging .dynamic-grid-cell[b-u5echz79r5] {
    border-color: rgba(0, 123, 255, 0.6);
    background: rgba(0, 123, 255, 0.08);
}

/* Prevent text selection during drag operations */
.dynamic-grid.edit-mode *[b-u5echz79r5] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* /Components/GridComponents/GridItem.razor.rz.scp.css */
.grid-item[b-9b1bcqeij0] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--griditem-boxborders-radius);
    box-shadow: 5px 5px 10px var(--griditem-boxshadow-color);
    border: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    transition: all 0.5s ease-in-out;
}

    .grid-item:hover[b-9b1bcqeij0] {
        border: 1px solid var(--griditem-boxborders-color-hover);
        box-shadow: 5px 5px 10px var(--griditem-boxshadow-color-hover);
    }

.grid-item-title[b-9b1bcqeij0] {
    padding: 0px 12px;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle), 
        var(--griditem-title-backgroundgradient-color-left),
        var(--griditem-title-backgroundgradient-color-right));
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    font-family:Roboto;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 1);
    height: var(--griditem-title-height);
    min-height: 25px;
}

    .grid-item-title h3[b-9b1bcqeij0] {
        margin: 0;
        font-size: var(--griditem-title-font-size);
        font-weight: var(--griditem-title-font-weight);
        color: var(--griditem-title-font-color);
    }

.grid-item-icon-container[b-9b1bcqeij0] {
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

    .grid-item-icon-container i[b-9b1bcqeij0] {
        font-size: var(--griditem-title-icon-fontsize);
        color: var(--griditem-title-icon-color);
        line-height: 1;
    }

.grid-item-content[b-9b1bcqeij0] {
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle), 
        var(--griditem-content-backgroundgradient-color-left),
        var(--griditem-content-backgroundgradient-color-right));
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

    /* Custom scrollbar styling */
    .grid-item-content[b-9b1bcqeij0]::-webkit-scrollbar {
        width: 8px;
    }

    .grid-item-content[b-9b1bcqeij0]::-webkit-scrollbar-track {
        background: var(--griditem-content-backgroundgradient-color-right);
        border-radius: 4px;
    }

    .grid-item-content[b-9b1bcqeij0]::-webkit-scrollbar-thumb {
        background: var(--main-font-color);
        border-radius: 4px;
        transition: background 0.3s ease;
    }

        .grid-item-content[b-9b1bcqeij0]::-webkit-scrollbar-thumb:hover {
            background: var(--main-font-color);
            cursor:pointer;
        }

/* Additional styles for content inside grid items */
.scrollable-content[b-9b1bcqeij0] {
    width: 100%;
}

    .scrollable-content p[b-9b1bcqeij0] {
        margin-bottom: 10px;
        padding: 5px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

@keyframes slideIn-b-9b1bcqeij0 {
    0% {
        opacity: 0;
        transform: translateX(-10px); /* Start 10px to the left */
    }

    100% {
        opacity: 1;
        transform: translateX(0); /* End at its normal position */
    }
}

/* Mozilla Firefox scrollbar styling */
@supports (scrollbar-width: thin) {
    .grid-item-content[b-9b1bcqeij0] {
        scrollbar-width: thin;
        scrollbar-color: rgba(13, 31, 36, 0.3) rgba(0, 0, 0, 0.05);
    }
}
/* /Components/GridComponents/GridVisualizer.razor.rz.scp.css */
.grid-cell[b-n21org0e8i] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.3);
    height:100%;
}

.cell-coordinate[b-n21org0e8i] {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: bold;
    padding: 2px 6px;
}
/* /Components/MainTabs/Azure/DataExplorer.razor.rz.scp.css */
body[b-mmbsnmja7f] {
}
/* /Components/MainTabs/Azure/DeviceInfos.razor.rz.scp.css */
.infobox[b-2ze0c5v68n] {
    display: flex;
    flex-direction:column;
    gap:15px;
}
/* /Components/MainTabs/Azure/DeviceMaintenance.razor.rz.scp.css */
/* /Components/MainTabs/Azure/DeviceSelector.razor.rz.scp.css */
.searchbox[b-uelf54rp23] {
    display:flex;
    flex-direction:row;
    gap:20px;
    margin-left:20px;
    margin-bottom:20px;
}
/* /Components/MainTabs/Azure/DeviceTelemetryStats.razor.rz.scp.css */
.infobox[b-6us62x5f8y] {
    display: flex;
    flex-direction:column;
    gap:30px;
}
/* /Components/MainTabs/Azure/Metrics_IoTHub.razor.rz.scp.css */
body[b-bqwlojcxqc] {
}
/* /Components/MainTabs/Azure/Metrics_SATelemetry.razor.rz.scp.css */
body[b-8fxfcv08qz] {
}
/* /Components/MainTabs/Cases/Cases.razor.rz.scp.css */
/* Cases Dashboard */

.cases-dashboard-grid-item-wrapper[b-df97d1ho9m] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.cases-dashboard-grid-item-top[b-df97d1ho9m] {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.cases-dashboard-label-and-select[b-df97d1ho9m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 8px;
    min-width: 0;
    height: 100%;
}

.cases-dashboard-top-label[b-df97d1ho9m] {
    font-size: 1.1rem;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.cases-dashboard-select-container[b-df97d1ho9m] {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
}

.cases-dashboard-Selection-Box[b-df97d1ho9m] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cases-dashboard-ListBox-container[b-df97d1ho9m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
    overflow: visible !important;
    z-index: 1;
}

.cases-dashboard-number[b-df97d1ho9m] {
    font-size: 4rem;
    margin-top: 1rem;
    text-align: center;
    align-items: center;
}

.cases-dashboard-not-started-highlight-number[b-df97d1ho9m] {

    color: darkred;
}

.cases-dashboard-in-progress-highlight-number[b-df97d1ho9m] {

    color: green;
}

.cases-dashboard-on-hold-highlight-number[b-df97d1ho9m] {

    color: blue;
}

.cases-dashboard-follow-up-highlight-number[b-df97d1ho9m] {

    color: purple;
}

.cases-dashboard-grid-item-bottom[b-df97d1ho9m] {
    flex-grow: 1;
    margin: 0;
    padding: 0;
}

/* Placeholder styles for debugging */
.cases-dashboard-main-cases-placeholder[b-df97d1ho9m] {
    padding: 20px;
    border: 2px dashed #ccc;
    border-radius: 4px;
    text-align: center;
    color: #666;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cases-dashboard-main-cases-placeholder ul[b-df97d1ho9m] {
    text-align: left;
    max-width: 300px;
    margin: 0 auto;
}

.cases-dashboard-loading[b-df97d1ho9m] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-style: italic;
    color: #666;
}

.cases-dashboard-error[b-df97d1ho9m] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-weight: bold;
}

/* Modal Styles - Following ConfirmDialog Theme */

/* Apply main font settings as a base */
:host[b-df97d1ho9m] {
    font-size: var(--main-font-size);
    color: var(--main-font-color);
}

@keyframes fadeIn-b-df97d1ho9m {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dialog-backdrop[b-df97d1ho9m] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1040;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-df97d1ho9m 0.3s ease-out forwards;
}

.dialog-container[b-df97d1ho9m] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
    z-index: 1050;
    padding: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    animation: fadeIn-b-df97d1ho9m 0.3s ease-out forwards;
}

.dialog-content[b-df97d1ho9m] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    pointer-events: auto;
    border: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    border-radius: var(--griditem-boxborders-radius);
    box-shadow: 0px 5px 15px var(--griditem-boxshadow-color);
    background-color: lightgray;
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.dialog-content:hover[b-df97d1ho9m] {
     box-shadow: 0px 7px 20px var(--griditem-boxshadow-color-hover);
     border-color: var(--griditem-boxborders-color-hover);
}

.dialog-header[b-df97d1ho9m] {
    display: flex; 
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--grid-padding-left, 1rem);
    height: var(--griditem-title-height);
    box-sizing: border-box;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle, 90deg),
        var(--griditem-title-backgroundgradient-color-left),
        var(--griditem-title-backgroundgradient-color-right)
    );
    border-bottom: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
}

.dialog-title[b-df97d1ho9m] {
    margin: 0; 
    padding: 0; 
    font-size: var(--griditem-title-font-size);
    font-weight: var(--griditem-title-font-weight);
    color: var(--griditem-title-font-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
}

.dialog-body[b-df97d1ho9m] {
    position: relative;
    flex: 1 1 auto;
    padding: var(--grid-padding-top, 1rem) var(--grid-padding-left, 1rem);
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    line-height: 1.6;
}

.dialog-footer[b-df97d1ho9m] {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem var(--grid-padding-right, 1rem);
    border-top: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    background-color: var(--griditem-title-backgroundgradient-color-left, #f8f9fa);
    gap: 20px;
}

.dialog-footer > *[b-df97d1ho9m] {
    margin-left: 0.5rem;
}

.btn-close[b-df97d1ho9m] {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: var(--griditem-title-font-color);
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: var(--griditem-boxborders-radius, 0.25rem);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity .15s ease-in-out;
}

.btn-close:hover[b-df97d1ho9m] {
    opacity: 1;
}

/* Preference Input Styling */
.preference-input-group[b-df97d1ho9m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preference-label[b-df97d1ho9m] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--main-font-color);
    font-size: var(--main-font-size);
}

.preference-input[b-df97d1ho9m] {
    width: 100%;
    padding: 8px 12px;
    border: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    border-radius: var(--griditem-boxborders-radius);
    font-size: var(--main-font-size);
    color: var(--main-font-color);
    background-color: white;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-sizing: border-box;
}

.preference-input:focus[b-df97d1ho9m] {
    outline: none;
    border-color: var(--griditem-boxborders-color-hover);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.preference-input[b-df97d1ho9m]::placeholder {
    color: #6c757d;
    opacity: 1;
}

.cases-dashboard-preferences-container[b-df97d1ho9m] {
    display: flex;
    gap: 5px;
}

.cases-dashboard-preferences-buttons[b-df97d1ho9m] {
    display: flex;
    align-items: center;
    gap: 0px;
}
/* /Components/MainTabs/Cases/CasesSearch.razor.rz.scp.css */
/* Cases Search */

.cases-search-search-icon[b-h7u6pwa09s] {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.cases-search-search-div[b-h7u6pwa09s] {
    display: flex;
    align-items: center;
}

.cases-search-ListBox-container[b-h7u6pwa09s] {
    display: flex;
    gap: 500px; /* Space between left and right columns */
}

.cases-search-left-column[b-h7u6pwa09s],
.cases-search-right-column[b-h7u6pwa09s] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cases-search-right-container[b-h7u6pwa09s] {
    display: flex; /* Align columns side by side */
    gap: 10px; /* Adjust space between the columns */
    margin-top: 10px; /* Adjust the value to the desired margin */
}

.cases-search-Selection-Box[b-h7u6pwa09s] {
    display: flex;
    align-items: center;
    gap: 20px; /* space between logo and inputs */
}

.cases-search-logo img[b-h7u6pwa09s] {
    height: 190px; /* or whatever fits nicely */
}

.cases-search-wrapper[b-h7u6pwa09s] {
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center; /* vertical center */
    height: 100vh; /* full height of the viewport or container */
    padding: 20px; /* optional, just for breathing room */
    box-sizing: border-box;
    flex-direction: column; /* Stack children vertically */
}

.cases-search-right-buttons[b-h7u6pwa09s] {
    display: flex; /* Use flexbox */
    flex-direction: row; /* Align buttons side by side */
    gap: 0px; /* Space between buttons */
    align-items: center; /* Vertically center buttons */
    justify-content: flex-start; /* Align buttons to the left */
    margin-top: auto; /* Align buttons with the bottom of inputs */
    margin-left: 10px;
}

.cases-search-right-buttons .CitadelButton[b-h7u6pwa09s] {
    width: 150px; /* Adjust the button width */
}

.cases-search-input-group-border[b-h7u6pwa09s] {
    border: 2px solid #ccc; /* Add border around the entire group of inputs */
    padding: 10px; /* Optional: Add padding inside the border */
    border-radius: 5px; /* Optional: Round the corners */
}

.cases-search-input-group-border > div[b-h7u6pwa09s] {
    margin-bottom: 1px; /* Add space between input fields */
}

/* ✅ NEW: Organization Autocomplete Styles */
.custom-input-layout-container[b-h7u6pwa09s] {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.citadel-input-container.label-left[b-h7u6pwa09s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    height: auto;
    margin-bottom: 0;
}

.citadel-input-label[b-h7u6pwa09s] {
    font-size: var(--main-font-size);
    color: var(--main-font-color);
    white-space: nowrap;
    display: inline-block;
    flex-shrink: 0;
    margin-right: 20px;
}

.citadel-input-wrapper[b-h7u6pwa09s] {
    position: relative;
    display: flex;
    flex-grow: 1;
    min-width: 0;
    width: auto;
    height: auto;
}

.citadel-input-box[b-h7u6pwa09s] {
    padding: var(--input-padding-vertical) var(--input-padding-horizontal);
    box-sizing: border-box;
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    font-size: var(--main-font-size);
    background-color: var(--inputSelect-background-color);
    color: var(--input-font-color);
    transition: all 0.2s ease;
    width: 100%;
}

.citadel-input-box:not(:disabled):focus[b-h7u6pwa09s] {
    outline: none;
    border-color: var(--input-border-color-hover);
    box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
    background-color: var(--input-background-color-hover);
}

.citadel-input-box:not(:disabled):hover[b-h7u6pwa09s] {
    background-color: var(--input-background-color-hover);
    border-color: var(--input-border-color-hover);
}

.citadel-input-box[b-h7u6pwa09s]::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

/* Autocomplete Suggestions */
.autocomplete-suggestions[b-h7u6pwa09s] {
    position: absolute;
    background: var(--inputSelect-background-color);
    border: 1px solid var(--input-border-color);
    border-top: none;
    border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
    max-height: 250px;
    min-height: 40px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
    animation: slideDown-b-h7u6pwa09s 0.2s ease-out;
}

@keyframes slideDown-b-h7u6pwa09s {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.autocomplete-suggestions li[b-h7u6pwa09s] {
    padding: var(--input-padding-vertical) var(--input-padding-horizontal);
    min-height: 25px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid var(--input-border-color);
    background-color: var(--inputSelect-background-color);
    font-size: var(--main-font-size);
    color: var(--input-font-color);
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete-suggestions li:hover[b-h7u6pwa09s] {
    background-color: var(--input-background-color-hover);
    color: var(--main-font-color);
    transform: translateX(2px);
}

.autocomplete-suggestions li:active[b-h7u6pwa09s] {
    background-color: var(--input-border-color-hover);
}

.autocomplete-suggestions li:last-child[b-h7u6pwa09s] {
    border-bottom: none;
    border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
}

.autocomplete-suggestions li:first-child[b-h7u6pwa09s] {
    padding-top: calc(var(--input-padding-vertical) + 2px);
}
/* /Components/MainTabs/Cases/Cases_Create.razor.rz.scp.css */
.form-columns[b-coagig0nut] {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.form-column[b-coagig0nut] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.custom-input-layout-container[b-coagig0nut] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* Changed to flex-start as per original file state */
    position: relative;
}

    .custom-input-layout-container > .citadel-input-container.label-left[b-coagig0nut] {
        display: flex;
        align-items: center;
        width: 100%; /* Ensures it takes full width so validation message wraps below */
        margin-bottom: 0; /* Reset margin if any, rely on parent's gap or validation message's margin-top */
    }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-label[b-coagig0nut] {
            /* width is set by inline style (e.g., @consistentLabelWidth) */
            /* Global CSS variables should provide: font-size, color */
            /* CSS variables used by CitadelInput: --main-font-size, --main-font-color */
            font-size: var(--main-font-size);
            color: var(--main-font-color);
            white-space: nowrap;
            margin-right: 20px; /* Space between label and input-wrapper */
            flex-shrink: 0;
        }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper[b-coagig0nut] {
            display: flex;
            align-items: center; /* For checkbox vertical alignment */
            flex-grow: 1;
            position: relative; /* If any child elements inside wrapper need absolute positioning */
        }

            /* Styling for the actual <input type="text" class="citadel-input-box"> */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-coagig0nut] {
                /* width is set by inline style (e.g., @consistentInputWidth) */
                /* Global CSS variables should provide: padding, border, border-radius, font-size, background-color, color */
                /* CSS variables used by CitadelInput: 
                    --input-padding-vertical, --input-padding-horizontal, 
                    --input-border-color, --input-border-radius, 
                    --main-font-size, --inputSelect-background-color, --input-font-color
                */
                padding: var(--input-padding-vertical) var(--input-padding-horizontal);
                box-sizing: border-box;
                border: 1px solid var(--input-border-color);
                border-radius: var(--input-border-radius);
                font-size: var(--main-font-size);
                background-color: var(--inputSelect-background-color);
                color: var(--input-font-color);
                transition: all 0.2s ease;
                width: 100%; /* Will be overridden by inline style if @consistentInputWidth is applied */
            }

            /* Red border for the input box on error */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box.citadel-input-error[b-coagig0nut] {
                border-color: var(--bs-danger, #dc3545) !important;
            }

            /* Hover effects for the custom HTML input box */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:hover[b-coagig0nut] {
                background-color: var(--input-background-color-hover);
                border-color: var(--input-border-color-hover);
            }

            /* Focus effects for the custom HTML input box */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:focus[b-coagig0nut] {
                outline: none;
                border-color: var(--input-border-color-hover); /* This will be overridden by .citadel-input-error's !important if error class is present */
                box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
                background-color: var(--input-background-color-hover);
            }

            /* Placeholder styling for custom HTML input box */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-coagig0nut]::placeholder {
                color: rgba(0, 0, 0, 0.3); /* Matching CitadelInput placeholder color */
            }


/* Autocomplete Suggestions Styling */
.autocomplete-suggestions[b-coagig0nut] {
    /* position: absolute; top: calc(100% - 4px); left: ...; width: ...; are set via inline styles */
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: var(--input-border-radius);
}

    .autocomplete-suggestions li[b-coagig0nut] {
        padding: 8px 12px;
        cursor: pointer;
        font-size: var(--main-font-size);
        color: var(--input-font-color);
    }

        .autocomplete-suggestions li:hover[b-coagig0nut] {
            background-color: #f0f0f0;
        }

/* 
Validation Message styling for Telemetry Id, Site, and Is Test Device
(i.e., when <ValidationMessage /> is a direct child of .custom-input-layout-container)
This aims to replicate CitadelInput's error message appearance.
*/
.custom-input-layout-container > .validation-message[b-coagig0nut] {
    color: var(--bs-danger, #dc3545); /* CRITICAL: --bs-danger must be globally defined */
    font-size: 0.75rem;               /* Matches CitadelInput */
    margin-top: 4px;                  /* Matches CitadelInput */
    flex-basis: 100%;                 /* Forces it to take full width and wrap below */
    display: block;                   /* Ensures block behavior */

    /* Indentation: margin-left = width of label + right margin of label */
    /* The '180px' here MUST match the 'consistentLabelWidth' C# variable used for these labels. */
    /* The '20px' here MUST match the 'margin-right: 20px;' on the label. */
    /* Note: The C# variable consistentLabelWidth was 160px in the initial file, then changed to 150px.
       Using 150px as per the latest MainDevice.razor snippet. Adjust if necessary. */
    margin-left: calc(150px + 20px); 
}

.createButtonContainer[b-coagig0nut] {
    width: 100%;
    height:50px;
    display: flex;
    flex-direction:row;
    justify-content:center;
    justify-items:center;
    align-content:center;
    align-items:center;
    gap:140px;
    margin-left:35px;
}


/* Utility Classes (as provided by you) */
.mt-4[b-coagig0nut], .button-container.mt-4[b-coagig0nut] {
    margin-top: 1.5rem !important;
}

.mt-2[b-coagig0nut] {
    margin-top: 0.5rem !important;
}

.text-danger[b-coagig0nut] { /* For general error text like loadDataError */
    color: var(--bs-danger, #dc3545) !important;
}

.file-upload-area[b-coagig0nut] {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    transition: border-color 0.3s ease;
}

.file-upload-area:hover[b-coagig0nut] {
    border-color: #007bff;
}

.file-input[b-coagig0nut] {
    display: none;
}

.file-upload-label[b-coagig0nut] {
    display: block;
    cursor: pointer;
    color: #666;
}

.file-upload-label i[b-coagig0nut] {
    font-size: 2em;
    margin-bottom: 10px;
    display: block;
    color: #007bff;
}

.file-upload-label span[b-coagig0nut] {
    display: block;
    font-size: 1.1em;
    margin-bottom: 5px;
}

.file-upload-label small[b-coagig0nut] {
    display: block;
    color: #999;
    font-size: 0.9em;
}

.pending-files[b-coagig0nut] {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 15px;
    background-color: #f8f9fa;
}

.pending-file-item[b-coagig0nut] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 10px;
}

.file-info[b-coagig0nut] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
}

.file-info i[b-coagig0nut] {
    color: #007bff;
    font-size: 1.2em;
}

.file-details[b-coagig0nut] {
    flex: 1;
}

.file-name[b-coagig0nut] {
    font-weight: 500;
    color: #333;
}

.file-size[b-coagig0nut] {
    font-size: 0.85em;
    color: #666;
}

.file-notes[b-coagig0nut] {
    flex: 1;
}

.file-notes input[b-coagig0nut] {
    width: 100%;
}
/* /Components/MainTabs/Cases/Cases_Edit.razor.rz.scp.css */
/* Loading and Error States */
.case-edit-container[b-2tv0pdaqzv] {
    width: 100%;
    height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.case-edit-loading[b-2tv0pdaqzv] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: var(--text-muted, #6c757d);
}

.case-edit-loading div[b-2tv0pdaqzv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.case-edit-error[b-2tv0pdaqzv] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: var(--danger-color, #dc3545);
    padding: 20px;
    text-align: center;
    gap: 16px;
}

.case-edit-error h3[b-2tv0pdaqzv] {
    margin: 0;
    font-size: 1.25rem;
}

.case-edit-error p[b-2tv0pdaqzv] {
    margin: 0;
    font-size: 0.9rem;
}

.tabs-container[b-2tv0pdaqzv] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tab-bar[b-2tv0pdaqzv] {
    display: flex;
    width: 100%;
    margin-top: 5px;
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: 20px;
    min-height: 30px;
}

.tab[b-2tv0pdaqzv] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    user-select: none;
    border-right: 2px solid rgba(0,0,0,0.5);
    position: relative;
    z-index: 1;
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.9);
    font-family: Roboto;
    font-size:13px;
    font-weight:500;
    letter-spacing:2px;
    border-bottom: 1px solid rgba(0,0,0,0.5);

}

.tab:last-child[b-2tv0pdaqzv] {
    border-right: none;
}

.tab.active[b-2tv0pdaqzv] {
    background:transparent;
    color: rgba(0,0,0,0.9);
    z-index: 2;
    border-top:1px solid rgba(0,0,0,0.5);
    border-bottom:none;
}

.tab:not(.active):hover[b-2tv0pdaqzv] {
    color: rgba(0,0,0,0.9);
}

.tab-content[b-2tv0pdaqzv] {
    flex: 1;
    width: 100%;
    background: transparent !important;
    overflow: auto;
    min-height: 0; 
}

.tab-pane[b-2tv0pdaqzv] {
    display: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tab-pane.active[b-2tv0pdaqzv] {
    display: block;
    opacity: 1;
    animation: fadeIn-b-2tv0pdaqzv 0.25s ease-out forwards;
}

@keyframes fadeIn-b-2tv0pdaqzv {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Main Tab */
.cases-preview-flex-row[b-2tv0pdaqzv] {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 7px;
    justify-content: center;
}

.cases-preview-logo img[b-2tv0pdaqzv] {
    max-width: 120px;
    height: auto;
}

.cases-preview-inputs-column[b-2tv0pdaqzv] {
    display: flex;
    flex-direction: column;
}

.cases-preview-inputs[b-2tv0pdaqzv] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cases-preview-multiselects-column[b-2tv0pdaqzv] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: 40px;
    min-width: 340px;
    border-left: 1px solid #ddd;
    padding-left: 24px;
}

/* Checkbox and buttons column */
.details-checkbox-column[b-2tv0pdaqzv] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    min-width: 250px;
    margin-left: 40px;
    padding-left: 24px;
    border-left: 1px solid #ddd;
    height: 100%;
    position: relative;
}

.details-checkbox-wrapper[b-2tv0pdaqzv] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 18px;
}

.details-buttons-row[b-2tv0pdaqzv] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 0px;
    width: 100%;
    margin-right: 30px;
}

.frame-top[b-2tv0pdaqzv] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.frame-bottom[b-2tv0pdaqzv] {
    flex: 1 1 auto;
    width: 100%;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
}

.case-journal-frame[b-2tv0pdaqzv] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.case-journal-frame-top[b-2tv0pdaqzv] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 0 10px;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.case-journal-frame-bottom[b-2tv0pdaqzv] {
    flex: 1 1 auto;
    width: 100%;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
}

.save-journal-btn[b-2tv0pdaqzv] {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0;
    margin-right: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.save-journal-btn:focus[b-2tv0pdaqzv] {
    outline: none;
    box-shadow: none;
}

.save-journal-img[b-2tv0pdaqzv] {
    display: block;
    height: 24px;
    width: 24px;
    background: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

/* Attached Files Tab */
.search-container[b-2tv0pdaqzv] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.case-maintenance-search-icon[b-2tv0pdaqzv] {
    margin-left: 16px;
    width: 24px;
    height: 24px;
}

.container-vertical[b-2tv0pdaqzv] {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.top-bar[b-2tv0pdaqzv] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    gap: 8px;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.citadel-btn[b-2tv0pdaqzv] {
    width: 150px;
}

.main-content[b-2tv0pdaqzv] {
    flex: 1;
}

/* Details Tab */
.vertical-split-container[b-2tv0pdaqzv] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.vertical-split-header[b-2tv0pdaqzv] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.vertical-split-label[b-2tv0pdaqzv] {
    font-size: var(--griditem-title-font-size);
    margin-left: 10px;
}

.vertical-split-body[b-2tv0pdaqzv] {
    flex: 1 1 auto;
    width: 100%;
}

/* Organization Tab */
.organization-inputs-row[b-2tv0pdaqzv] {
    display: flex;
    flex-direction: row;
    gap: 36px;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin-left: 5px;
}

.organization-inputs-col[b-2tv0pdaqzv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 340px;
}

.stacked-frame[b-2tv0pdaqzv] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.stacked-frame-header[b-2tv0pdaqzv] {
    display: flex;
    align-items: center;
    width: 100%;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.stacked-frame-label[b-2tv0pdaqzv] {
    font-size: var(--griditem-title-font-size);
    margin-left: 10px;
}

.stacked-frame-content[b-2tv0pdaqzv] {
    flex: 1 1 auto;
    width: 100%;
}

.diagnostic-Container[b-2tv0pdaqzv] {
    width:96%;
    height:100%;
    padding-left:35px;
    padding-top:20px;
    padding-bottom:20px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.loading-spinner[b-2tv0pdaqzv], 
.error-message[b-2tv0pdaqzv], 
.no-data-message[b-2tv0pdaqzv], 
.no-sensor-message[b-2tv0pdaqzv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: #666;
}

.loading-spinner i[b-2tv0pdaqzv] {
    font-size: 24px;
    color: #007bff;
}

.error-message i[b-2tv0pdaqzv] {
    font-size: 24px;
    color: #dc3545;
}

.no-data-message i[b-2tv0pdaqzv], 
.no-sensor-message i[b-2tv0pdaqzv] {
    font-size: 24px;
    color: #6c757d;
}

.loading-spinner span[b-2tv0pdaqzv], 
.error-message span[b-2tv0pdaqzv], 
.no-data-message span[b-2tv0pdaqzv], 
.no-sensor-message span[b-2tv0pdaqzv] {
    font-size: 14px;
    font-weight: 500;
}

.feed-container[b-2tv0pdaqzv] {
    width:93%;
    margin:auto;
    margin-top:20px;
}

.seppy[b-2tv0pdaqzv] {
    height:25px;
    width:100%;
}
/* /Components/MainTabs/Cases/Cases_View.razor.rz.scp.css */
/* Cases Preview */

.cases-preview-button-container[b-5yb14bace5] {
    display: flex;
    justify-content: center; /* center the buttons horizontally */
    align-items: center; /* optional: center them vertically */
    gap: 10px; /* space between buttons */
    width: 100%; /* ensure it takes full width */
    margin-top: 1px; /* optional spacing from the top */
}

.cases-preview-centered-journal[b-5yb14bace5] {
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    height: 100%; /* Ensure it uses full height of GridItem */
}

.cases-preview-case-journal-wrapper[b-5yb14bace5] {
    display: flex;
    flex-direction: column; /* Stack divs vertically */
    width: 100%;
    height: 100%; /* Ensure it spans the entire height of the GridItem */
}

.cases-preview-case-journal-top[b-5yb14bace5] {
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    display: flex;
    justify-content: left; /* Center the text horizontally */
    align-items: center; /* Center the text vertically */
    padding: 5px;
}

.cases-preview-case-journal-bottom[b-5yb14bace5] {
    flex-grow: 1; /* This div takes up the remaining height */
    padding: 10px; /* Optional padding */
}

.cases-preview-centered-solution[b-5yb14bace5] {
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    height: 100%; /* Ensure it uses full height of GridItem */
}

.cases-preview-case-solution-wrapper[b-5yb14bace5] {
    display: flex;
    flex-direction: column; /* Stack divs vertically */
    width: 100%;
    height: 100%; /* Ensure it spans the entire height of the GridItem */
}

.cases-preview-case-solution-top[b-5yb14bace5] {
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    display: flex;
    justify-content: left; /* Center the text horizontally */
    align-items: center; /* Center the text vertically */
    padding: 5px;
}

.cases-preview-case-solution-bottom[b-5yb14bace5] {
    flex-grow: 1; /* This div takes up the remaining height */
    padding: 10px; /* Optional padding */
}

.cases-preview-container[b-5yb14bace5] {
    position: relative;
}

.cases-preview-Selection-Box[b-5yb14bace5] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal-width columns */
    gap: 20px; /* Space between the two columns */
    align-items: center; /* Center items vertically */
    margin-left: 120px; /* Adjust this value to shift both columns to the right of the logo */
    padding-top: 20px; /* Add space from the top of the container */
}

.cases-preview-logo[b-5yb14bace5] {
    position: absolute; /* Position logo at top-left */
    top: 0;
    left: 0;
}

    .cases-preview-logo img[b-5yb14bace5] {
        width: 100px; /* Adjust as needed */
        height: auto;
    }

.cases-preview-Selection-Box > div[b-5yb14bace5] {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between inputs */
}

    .cases-preview-Selection-Box > div > div[b-5yb14bace5] {
        display: flex;
        flex-direction: column;
        gap: 10px; /* Space between inputs in each column */
    }

.frame-container-task[b-5yb14bace5] {
    width: 100%;
    height: 97%;
    display: flex;
    flex-direction: column;
    background: linear-gradient( var(--griditem-content-backgroundgradient-angle), var(--griditem-content-backgroundgradient-color-left), var(--griditem-content-backgroundgradient-color-right));
}

.frame-container-notes[b-5yb14bace5] {
    width: 100%;
    height: 97%;
    display: flex;
    flex-direction: column;
    background: #FFFEC4;
}

.chart-loading-container[b-5yb14bace5], 
    .chart-error-container[b-5yb14bace5], 
    .chart-no-data-container[b-5yb14bace5], 
    .chart-no-sensor-container[b-5yb14bace5] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
    }

    .loading-spinner[b-5yb14bace5], 
    .error-message[b-5yb14bace5], 
    .no-data-message[b-5yb14bace5], 
    .no-sensor-message[b-5yb14bace5] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
        color: #666;
    }

    .loading-spinner i[b-5yb14bace5] {
        font-size: 24px;
        color: #007bff;
    }

    .error-message i[b-5yb14bace5] {
        font-size: 24px;
        color: #dc3545;
    }

    .no-data-message i[b-5yb14bace5], 
    .no-sensor-message i[b-5yb14bace5] {
        font-size: 24px;
        color: #6c757d;
    }

    .loading-spinner span[b-5yb14bace5], 
    .error-message span[b-5yb14bace5], 
    .no-data-message span[b-5yb14bace5], 
    .no-sensor-message span[b-5yb14bace5] {
        font-size: 14px;
        font-weight: 500;
    }
/* /Components/MainTabs/DashBoard/Dashboard.razor.rz.scp.css */
.dashboard-header[b-lcf2jto6pe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bs-light);
    border-radius: 8px;
}

.dashboard-controls[b-lcf2jto6pe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.edit-controls[b-lcf2jto6pe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.separator[b-lcf2jto6pe] {
    width: 1px;
    height: 2rem;
    background: var(--bs-border-color);
    margin: 0 0.5rem;
}

.dashboard-info[b-lcf2jto6pe] {
    font-size: 0.9rem;
}

/* Widget Selector Styles */
.widget-selector-overlay[b-lcf2jto6pe] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-selector-panel[b-lcf2jto6pe] {
    background: white;
    border-radius: 12px;
    max-width: 800px;
    width: 90vw;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.panel-header[b-lcf2jto6pe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-light);
}

.panel-header h5[b-lcf2jto6pe] {
    margin: 0;
    color: var(--bs-dark);
}

.panel-content[b-lcf2jto6pe] {
    padding: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.widget-category[b-lcf2jto6pe] {
    margin-bottom: 2rem;
}

.category-header[b-lcf2jto6pe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--bs-dark);
    font-size: 1.1rem;
}

.widget-grid[b-lcf2jto6pe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.widget-card[b-lcf2jto6pe] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.widget-card:hover[b-lcf2jto6pe] {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.widget-icon[b-lcf2jto6pe] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    color: white;
    border-radius: 8px;
    font-size: 1.5rem;
}

.widget-info[b-lcf2jto6pe] {
    flex: 1;
}

.widget-title[b-lcf2jto6pe] {
    font-weight: 600;
    color: var(--bs-dark);
    margin-bottom: 0.25rem;
}

.widget-description[b-lcf2jto6pe] {
    color: var(--bs-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.widget-size[b-lcf2jto6pe] {
    font-size: 0.8rem;
    color: var(--bs-muted);
    font-family: monospace;
}

.no-widgets[b-lcf2jto6pe] {
    text-align: center;
    padding: 3rem;
    color: var(--bs-secondary);
}

.no-widgets i[b-lcf2jto6pe] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}
/* /Components/MainTabs/Dev/ChartLibrary.razor.rz.scp.css */
/* /Components/MainTabs/Dev/Library.razor.rz.scp.css */
/* /Components/MainTabs/ExternalAPIs/Twilio/Twilio_Infos.razor.rz.scp.css */
.info-grid[b-mnilnisk7r] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
}

.info-item[b-mnilnisk7r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.info-label[b-mnilnisk7r] {
    font-weight: 500;
    font-size: 0.9em;
}

.info-value[b-mnilnisk7r] {
    font-weight: 600;
    text-align: right;
}

.status-active[b-mnilnisk7r], .health-healthy[b-mnilnisk7r] {
    color: #4CAF50;
}

.status-inactive[b-mnilnisk7r], .health-critical[b-mnilnisk7r] {
    color: #f44336;
}

.health-warning[b-mnilnisk7r] {
    color: #ff9800;
}

.balance-good[b-mnilnisk7r] {
    color: #4CAF50;
}

.balance-low[b-mnilnisk7r] {
    color: #ff9800;
}

.balance-critical[b-mnilnisk7r] {
    color: #f44336;
}

.analytics-summary[b-mnilnisk7r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
}

.metric-card[b-mnilnisk7r] {
    text-align: center;
    padding: 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
}

.metric-value[b-mnilnisk7r] {
    font-size: 1.5em;
    font-weight: bold;
}

.metric-label[b-mnilnisk7r] {
    font-size: 0.8em;
    color: rgba(0,0,0,0.7);
    margin-top: 4px;
}

.trend-up[b-mnilnisk7r] {
    color: #4CAF50;
}

.trend-down[b-mnilnisk7r] {
    color: #f44336;
}

.trend-stable[b-mnilnisk7r] {
    color: #2196F3;
}

.connection-status[b-mnilnisk7r] {
    padding: 15px;
    text-align: center;
}

.connection-indicator[b-mnilnisk7r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

    .connection-indicator i[b-mnilnisk7r] {
        font-size: 2em;
    }

.connected[b-mnilnisk7r] {
    color: #4CAF50;
}

.disconnected[b-mnilnisk7r] {
    color: #f44336;
}

.health-details[b-mnilnisk7r] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.9em;
}

.alerts-container[b-mnilnisk7r] {
    padding: 10px;
    max-height: 80px;
    overflow-y: auto;
}

.alert-item[b-mnilnisk7r] {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    border-left: 4px solid;
}

.severity-critical[b-mnilnisk7r] {
    background: rgba(244, 67, 54, 0.1);
    border-left-color: #f44336;
}

.severity-warning[b-mnilnisk7r] {
    background: rgba(255, 152, 0, 0.1);
    border-left-color: #ff9800;
}

.severity-info[b-mnilnisk7r] {
    background: rgba(33, 150, 243, 0.1);
    border-left-color: #2196F3;
}

.alert-header[b-mnilnisk7r] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-weight: 600;
}

.alert-message[b-mnilnisk7r] {
    margin-bottom: 5px;
    color: rgba(255,255,255,0.9);
}

.alert-recommendation[b-mnilnisk7r] {
    font-size: 0.9em;
    color: rgba(255,255,255,0.7);
    font-style: italic;
}

.no-alerts[b-mnilnisk7r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #4CAF50;
    gap: 10px;
}

    .no-alerts i[b-mnilnisk7r] {
        font-size: 2em;
    }

.cost-analytics[b-mnilnisk7r] {
    padding: 10px;
}

.cost-summary[b-mnilnisk7r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.cost-item[b-mnilnisk7r] {
    text-align: center;
    padding: 15px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
}

.cost-value[b-mnilnisk7r] {
    font-size: 1.4em;
    font-weight: bold;
    color: #4CAF50;
}

.cost-label[b-mnilnisk7r] {
    font-size: 0.9em;
    color: rgba(0,0,0,0.7);
    margin-top: 5px;
}

.service-costs[b-mnilnisk7r] {
    max-height: 120px;
    overflow-y: auto;
}

.service-cost-item[b-mnilnisk7r] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    align-items: center;
}

.service-name[b-mnilnisk7r] {
    font-weight: 500;
}

.service-count[b-mnilnisk7r] {
    color: rgba(0,0,0,0.7);
    font-size: 0.9em;
}

.service-cost[b-mnilnisk7r] {
    color: #4CAF50;
    font-weight: 600;
}

.messages-container[b-mnilnisk7r] {
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.messages-header[b-mnilnisk7r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.message-stats[b-mnilnisk7r] {
    display: flex;
    gap: 15px;
}

.stat[b-mnilnisk7r] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 500;
}

    .stat.success[b-mnilnisk7r] {
        background: rgba(76, 175, 80, 0.2);
        color: #4CAF50;
    }

    .stat.failed[b-mnilnisk7r] {
        background: rgba(244, 67, 54, 0.2);
        color: #f44336;
    }

    .stat.pending[b-mnilnisk7r] {
        background: rgba(255, 152, 0, 0.2);
        color: #ff9800;
    }

.messages-list[b-mnilnisk7r] {
    flex: 1;
    overflow-y: auto;
}

.message-item[b-mnilnisk7r] {
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid;
    background: rgba(255,255,255,0.05);
}

.status-success[b-mnilnisk7r] {
    border-left-color: #4CAF50;
}

.status-failed[b-mnilnisk7r] {
    border-left-color: #f44336;
}

.status-pending[b-mnilnisk7r] {
    border-left-color: #ff9800;
}

.message-header[b-mnilnisk7r] {
    display: grid;
    grid-template-columns: 2fr auto auto auto auto;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.9em;
    align-items: center;
}

.message-sid[b-mnilnisk7r] {
    font-family: monospace;
    color: rgba(0,0,0,0.8);
    font-size: 0.8em;
}

.message-type[b-mnilnisk7r] {
    background: rgba(33, 150, 243, 0.2);
    color: #2196F3;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8em;
}

.message-status[b-mnilnisk7r] {
    font-weight: 500;
}

.message-direction[b-mnilnisk7r] {
    color: rgba(0,0,0,0.7);
    font-size: 0.8em;
}

.message-time[b-mnilnisk7r] {
    color: rgba(0,0,0,0.6);
    font-size: 0.8em;
}

.message-details[b-mnilnisk7r] {
    font-size: 0.9em;
}

.message-addresses[b-mnilnisk7r] {
    display: flex;
    gap: 20px;
    margin-bottom: 5px;
    color: rgba(0,0,0,0.8);
}

.message-body[b-mnilnisk7r] {
    color: rgba(0,0,0,1);
    margin-bottom: 5px;
    line-height: 1.4;
}

.message-price[b-mnilnisk7r] {
    color: #4CAF50;
    font-size: 0.8em;
}

.error-message[b-mnilnisk7r] {
    color: #f44336;
    text-align: center;
    padding: 20px;
    font-weight: 500;
}

.no-data[b-mnilnisk7r] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255,255,255,0.6);
    font-style: italic;
}

.recommendation[b-mnilnisk7r] {
    grid-column: 1 / -1;
}
/* /Components/MainTabs/Maintenances/Maintenance_Administration_FeatureAccess.razor.rz.scp.css */
/* Maintenances - General Styles */

/* --- Search Bar Alignment --- */
.case-maintenance-centered-wrapper[b-gucxsymd78] {
    display: flex;
    align-items: center; /* Vertical centering */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    gap: 50px;
    margin-left: 20px;
    margin-right: 20px;
}

.case-maintenance-centered-input[b-gucxsymd78] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-maintenance-search-icon[b-gucxsymd78] {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* --- Button Group --- */
.button-group[b-gucxsymd78] {
    display: flex;
    gap: 10px;
    margin-left: auto;
    margin-right:10px;
}

/* --- Styles for Data Tables (General) --- */
.grid-data-table[b-gucxsymd78] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.grid-data-table th[b-gucxsymd78],
.grid-data-table td[b-gucxsymd78] {
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.grid-data-table th[b-gucxsymd78] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Dynamic column widths using CSS variables */
.grid-data-table th:nth-child(1)[b-gucxsymd78], .grid-data-table td:nth-child(1)[b-gucxsymd78] {
    width: var(--col-1-width, auto);
}

.grid-data-table th:nth-child(2)[b-gucxsymd78], .grid-data-table td:nth-child(2)[b-gucxsymd78] {
    width: var(--col-2-width, auto);
}

.grid-data-table th:nth-child(3)[b-gucxsymd78], .grid-data-table td:nth-child(3)[b-gucxsymd78] {
    width: var(--col-3-width, auto);
}

.grid-data-table th:nth-child(4)[b-gucxsymd78], .grid-data-table td:nth-child(4)[b-gucxsymd78] {
    width: var(--col-4-width, auto);
}

.grid-data-table th:nth-child(5)[b-gucxsymd78], .grid-data-table td:nth-child(5)[b-gucxsymd78] {
    width: var(--col-5-width, auto);
}

.grid-data-table th:nth-child(6)[b-gucxsymd78], .grid-data-table td:nth-child(6)[b-gucxsymd78] {
    width: var(--col-6-width, auto);
}

.grid-data-table th:nth-child(7)[b-gucxsymd78], .grid-data-table td:nth-child(7)[b-gucxsymd78] {
    width: var(--col-7-width, auto);
}

.grid-data-table th:nth-child(8)[b-gucxsymd78], .grid-data-table td:nth-child(8)[b-gucxsymd78] {
    width: var(--col-8-width, auto);
}

.grid-data-table th:nth-child(9)[b-gucxsymd78], .grid-data-table td:nth-child(9)[b-gucxsymd78] {
    width: var(--col-9-width, auto);
}

.grid-data-table th:nth-child(10)[b-gucxsymd78], .grid-data-table td:nth-child(10)[b-gucxsymd78] {
    width: var(--col-10-width, auto);
    text-align: center;
}

.grid-data-table th:nth-child(11)[b-gucxsymd78], .grid-data-table td:nth-child(11)[b-gucxsymd78] {
    width: var(--col-11-width, auto);
}

.grid-data-table th:nth-child(12)[b-gucxsymd78], .grid-data-table td:nth-child(12)[b-gucxsymd78] {
    width: var(--col-12-width, auto);
}

/* --- Style for Selected Row --- */
.selected-row td[b-gucxsymd78] {
    background-color: rgba(255,255,255,1);
    border-top: 1px solid rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Editing Row --- */
.editing-row-highlight td[b-gucxsymd78] {
    color: black !important;
    text-shadow: none !important;
}

/* --- Modal Styles --- */
.modal-overlay[b-gucxsymd78] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-gucxsymd78] {
    background: white;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
}

.modal-buttons[b-gucxsymd78] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Styles for the History Table --- */
.history-table[b-gucxsymd78] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    margin-top: 0;
}

.history-table th[b-gucxsymd78],
.history-table td[b-gucxsymd78] {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.history-table th[b-gucxsymd78] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

.history-table th:nth-child(1)[b-gucxsymd78], .history-table td:nth-child(1)[b-gucxsymd78] {
    width: 10%;
}

.history-table th:nth-child(2)[b-gucxsymd78], .history-table td:nth-child(2)[b-gucxsymd78] {
    width: 10%;
}

.history-table th:nth-child(3)[b-gucxsymd78], .history-table td:nth-child(3)[b-gucxsymd78] {
    width: 20%;
}

.history-table th:nth-child(4)[b-gucxsymd78], .history-table td:nth-child(4)[b-gucxsymd78] {
    width: 60%;
}

/* Truncate long text in the Data column and show tooltip on hover */
.history-data-cell[b-gucxsymd78] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.hierarchy-display[b-gucxsymd78] {
        display: flex;
        align-items: center;
    }

    .hierarchy-icon[b-gucxsymd78] {
        margin-right: 8px;
        color: #666;
        font-size: 12px;
    }

    .hierarchy-text[b-gucxsymd78] {
        flex: 1;
    }

    /* Different levels of hierarchy */
    .hierarchy-level-1[b-gucxsymd78] {
        padding-left: 0px;
    }

    .hierarchy-level-2[b-gucxsymd78] {
        padding-left: 20px;
    }

    .hierarchy-level-3[b-gucxsymd78] {
        padding-left: 40px;
    }
/* /Components/MainTabs/Maintenances/Maintenance_Administration_Roles.razor.rz.scp.css */
/* Maintenances - General Styles */

/* --- Search Bar Alignment --- */
.case-maintenance-centered-wrapper[b-zme8wdi8nf] {
    display: flex;
    align-items: center; /* Vertical centering */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    gap: 50px;
    margin-left: 20px;
    margin-right: 20px;
}

.case-maintenance-centered-input[b-zme8wdi8nf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-maintenance-search-icon[b-zme8wdi8nf] {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* --- Button Group --- */
.button-group[b-zme8wdi8nf] {
    display: flex;
    gap: 10px;
    margin-left: auto;
    margin-right:10px;
}

/* --- Styles for Data Tables (General) --- */
.grid-data-table[b-zme8wdi8nf] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.grid-data-table th[b-zme8wdi8nf],
.grid-data-table td[b-zme8wdi8nf] {
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.grid-data-table th[b-zme8wdi8nf] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Dynamic column widths using CSS variables */
.grid-data-table th:nth-child(1)[b-zme8wdi8nf], .grid-data-table td:nth-child(1)[b-zme8wdi8nf] {
    width: var(--col-1-width, auto);
}

.grid-data-table th:nth-child(2)[b-zme8wdi8nf], .grid-data-table td:nth-child(2)[b-zme8wdi8nf] {
    width: var(--col-2-width, auto);
}

.grid-data-table th:nth-child(3)[b-zme8wdi8nf], .grid-data-table td:nth-child(3)[b-zme8wdi8nf] {
    width: var(--col-3-width, auto);
}

.grid-data-table th:nth-child(4)[b-zme8wdi8nf], .grid-data-table td:nth-child(4)[b-zme8wdi8nf] {
    width: var(--col-4-width, auto);
}

.grid-data-table th:nth-child(5)[b-zme8wdi8nf], .grid-data-table td:nth-child(5)[b-zme8wdi8nf] {
    width: var(--col-5-width, auto);
}

.grid-data-table th:nth-child(6)[b-zme8wdi8nf], .grid-data-table td:nth-child(6)[b-zme8wdi8nf] {
    width: var(--col-6-width, auto);
}

.grid-data-table th:nth-child(7)[b-zme8wdi8nf], .grid-data-table td:nth-child(7)[b-zme8wdi8nf] {
    width: var(--col-7-width, auto);
}

.grid-data-table th:nth-child(8)[b-zme8wdi8nf], .grid-data-table td:nth-child(8)[b-zme8wdi8nf] {
    width: var(--col-8-width, auto);
}

.grid-data-table th:nth-child(9)[b-zme8wdi8nf], .grid-data-table td:nth-child(9)[b-zme8wdi8nf] {
    width: var(--col-9-width, auto);
}

.grid-data-table th:nth-child(10)[b-zme8wdi8nf], .grid-data-table td:nth-child(10)[b-zme8wdi8nf] {
    width: var(--col-10-width, auto);
    text-align: center;
}

.grid-data-table th:nth-child(11)[b-zme8wdi8nf], .grid-data-table td:nth-child(11)[b-zme8wdi8nf] {
    width: var(--col-11-width, auto);
}

.grid-data-table th:nth-child(12)[b-zme8wdi8nf], .grid-data-table td:nth-child(12)[b-zme8wdi8nf] {
    width: var(--col-12-width, auto);
}

/* --- Style for Selected Row --- */
.selected-row td[b-zme8wdi8nf] {
    background-color: rgba(255,255,255,1);
    border-top: 1px solid rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Editing Row --- */
.editing-row-highlight td[b-zme8wdi8nf] {
    color: black !important;
    text-shadow: none !important;
}

/* --- Modal Styles --- */
.modal-overlay[b-zme8wdi8nf] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-zme8wdi8nf] {
    background: white;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
}

.modal-buttons[b-zme8wdi8nf] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Styles for the History Table --- */
.history-table[b-zme8wdi8nf] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    margin-top: 0;
}

.history-table th[b-zme8wdi8nf],
.history-table td[b-zme8wdi8nf] {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.history-table th[b-zme8wdi8nf] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

.history-table th:nth-child(1)[b-zme8wdi8nf], .history-table td:nth-child(1)[b-zme8wdi8nf] {
    width: 10%;
}

.history-table th:nth-child(2)[b-zme8wdi8nf], .history-table td:nth-child(2)[b-zme8wdi8nf] {
    width: 10%;
}

.history-table th:nth-child(3)[b-zme8wdi8nf], .history-table td:nth-child(3)[b-zme8wdi8nf] {
    width: 20%;
}

.history-table th:nth-child(4)[b-zme8wdi8nf], .history-table td:nth-child(4)[b-zme8wdi8nf] {
    width: 60%;
}

/* Truncate long text in the Data column and show tooltip on hover */
.history-data-cell[b-zme8wdi8nf] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
/* /Components/MainTabs/Maintenances/Maintenance_Administration_Users.razor.rz.scp.css */
/* Maintenances - General Styles */

/* --- Search Bar Alignment --- */
.case-maintenance-centered-wrapper[b-lxhwyqi6c6] {
    display: flex;
    align-items: center; /* Vertical centering */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    gap: 50px;
    margin-left: 20px;
    margin-right: 20px;
}

.case-maintenance-centered-input[b-lxhwyqi6c6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-maintenance-search-icon[b-lxhwyqi6c6] {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* --- Button Group --- */
.button-group[b-lxhwyqi6c6] {
    display: flex;
    gap: 10px;
    margin-left: auto;
    margin-right:10px;
}

/* --- Styles for Data Tables (General) --- */
.grid-data-table[b-lxhwyqi6c6] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.grid-data-table th[b-lxhwyqi6c6],
.grid-data-table td[b-lxhwyqi6c6] {
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.grid-data-table th[b-lxhwyqi6c6] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Dynamic column widths using CSS variables */
.grid-data-table th:nth-child(1)[b-lxhwyqi6c6], .grid-data-table td:nth-child(1)[b-lxhwyqi6c6] {
    width: var(--col-1-width, auto);
}

.grid-data-table th:nth-child(2)[b-lxhwyqi6c6], .grid-data-table td:nth-child(2)[b-lxhwyqi6c6] {
    width: var(--col-2-width, auto);
}

.grid-data-table th:nth-child(3)[b-lxhwyqi6c6], .grid-data-table td:nth-child(3)[b-lxhwyqi6c6] {
    width: var(--col-3-width, auto);
}

.grid-data-table th:nth-child(4)[b-lxhwyqi6c6], .grid-data-table td:nth-child(4)[b-lxhwyqi6c6] {
    width: var(--col-4-width, auto);
}

.grid-data-table th:nth-child(5)[b-lxhwyqi6c6], .grid-data-table td:nth-child(5)[b-lxhwyqi6c6] {
    width: var(--col-5-width, auto);
}

.grid-data-table th:nth-child(6)[b-lxhwyqi6c6], .grid-data-table td:nth-child(6)[b-lxhwyqi6c6] {
    width: var(--col-6-width, auto);
}

.grid-data-table th:nth-child(7)[b-lxhwyqi6c6], .grid-data-table td:nth-child(7)[b-lxhwyqi6c6] {
    width: var(--col-7-width, auto);
}

.grid-data-table th:nth-child(8)[b-lxhwyqi6c6], .grid-data-table td:nth-child(8)[b-lxhwyqi6c6] {
    width: var(--col-8-width, auto);
}

.grid-data-table th:nth-child(9)[b-lxhwyqi6c6], .grid-data-table td:nth-child(9)[b-lxhwyqi6c6] {
    width: var(--col-9-width, auto);
}

.grid-data-table th:nth-child(10)[b-lxhwyqi6c6], .grid-data-table td:nth-child(10)[b-lxhwyqi6c6] {
    width: var(--col-10-width, auto);
    text-align: center;
}

.grid-data-table th:nth-child(11)[b-lxhwyqi6c6], .grid-data-table td:nth-child(11)[b-lxhwyqi6c6] {
    width: var(--col-11-width, auto);
}

.grid-data-table th:nth-child(12)[b-lxhwyqi6c6], .grid-data-table td:nth-child(12)[b-lxhwyqi6c6] {
    width: var(--col-12-width, auto);
}

/* --- Style for Selected Row --- */
.selected-row td[b-lxhwyqi6c6] {
    background-color: rgba(255,255,255,1);
    border-top: 1px solid rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Editing Row --- */
.editing-row-highlight td[b-lxhwyqi6c6] {
    color: black !important;
    text-shadow: none !important;
}

/* --- Modal Styles --- */
.modal-overlay[b-lxhwyqi6c6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-lxhwyqi6c6] {
    background: white;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
}

.modal-buttons[b-lxhwyqi6c6] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Styles for the History Table --- */
.history-table[b-lxhwyqi6c6] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    margin-top: 0;
}

.history-table th[b-lxhwyqi6c6],
.history-table td[b-lxhwyqi6c6] {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.history-table th[b-lxhwyqi6c6] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

.history-table th:nth-child(1)[b-lxhwyqi6c6], .history-table td:nth-child(1)[b-lxhwyqi6c6] {
    width: 10%;
}

.history-table th:nth-child(2)[b-lxhwyqi6c6], .history-table td:nth-child(2)[b-lxhwyqi6c6] {
    width: 10%;
}

.history-table th:nth-child(3)[b-lxhwyqi6c6], .history-table td:nth-child(3)[b-lxhwyqi6c6] {
    width: 20%;
}

.history-table th:nth-child(4)[b-lxhwyqi6c6], .history-table td:nth-child(4)[b-lxhwyqi6c6] {
    width: 60%;
}

/* Truncate long text in the Data column and show tooltip on hover */
.history-data-cell[b-lxhwyqi6c6] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
/* /Components/MainTabs/Maintenances/Maintenance_Cases_Categories.razor.rz.scp.css */
/* Maintenances - General Styles */

/* --- Search Bar Alignment --- */
.case-maintenance-centered-wrapper[b-m326hh6pog] {
    display: flex;
    align-items: center; /* Vertical centering */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    gap: 50px;
    margin-left: 20px;
    margin-right: 20px;
}

.case-maintenance-centered-input[b-m326hh6pog] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-maintenance-search-icon[b-m326hh6pog] {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* --- Button Group --- */
.button-group[b-m326hh6pog] {
    display: flex;
    gap: 10px;
    margin-left: auto;
    margin-right:10px;
}

/* --- Styles for Data Tables (General) --- */
.grid-data-table[b-m326hh6pog] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.grid-data-table th[b-m326hh6pog],
.grid-data-table td[b-m326hh6pog] {
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.grid-data-table th[b-m326hh6pog] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Dynamic column widths using CSS variables */
.grid-data-table th:nth-child(1)[b-m326hh6pog], .grid-data-table td:nth-child(1)[b-m326hh6pog] {
    width: var(--col-1-width, auto);
}

.grid-data-table th:nth-child(2)[b-m326hh6pog], .grid-data-table td:nth-child(2)[b-m326hh6pog] {
    width: var(--col-2-width, auto);
}

.grid-data-table th:nth-child(3)[b-m326hh6pog], .grid-data-table td:nth-child(3)[b-m326hh6pog] {
    width: var(--col-3-width, auto);
}

.grid-data-table th:nth-child(4)[b-m326hh6pog], .grid-data-table td:nth-child(4)[b-m326hh6pog] {
    width: var(--col-4-width, auto);
}

.grid-data-table th:nth-child(5)[b-m326hh6pog], .grid-data-table td:nth-child(5)[b-m326hh6pog] {
    width: var(--col-5-width, auto);
}

.grid-data-table th:nth-child(6)[b-m326hh6pog], .grid-data-table td:nth-child(6)[b-m326hh6pog] {
    width: var(--col-6-width, auto);
}

.grid-data-table th:nth-child(7)[b-m326hh6pog], .grid-data-table td:nth-child(7)[b-m326hh6pog] {
    width: var(--col-7-width, auto);
}

.grid-data-table th:nth-child(8)[b-m326hh6pog], .grid-data-table td:nth-child(8)[b-m326hh6pog] {
    width: var(--col-8-width, auto);
}

.grid-data-table th:nth-child(9)[b-m326hh6pog], .grid-data-table td:nth-child(9)[b-m326hh6pog] {
    width: var(--col-9-width, auto);
}

.grid-data-table th:nth-child(10)[b-m326hh6pog], .grid-data-table td:nth-child(10)[b-m326hh6pog] {
    width: var(--col-10-width, auto);
    text-align: center;
}

.grid-data-table th:nth-child(11)[b-m326hh6pog], .grid-data-table td:nth-child(11)[b-m326hh6pog] {
    width: var(--col-11-width, auto);
}

.grid-data-table th:nth-child(12)[b-m326hh6pog], .grid-data-table td:nth-child(12)[b-m326hh6pog] {
    width: var(--col-12-width, auto);
}

/* --- Style for Selected Row --- */
.selected-row td[b-m326hh6pog] {
    background-color: rgba(255,255,255,1);
    border-top: 1px solid rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Editing Row --- */
.editing-row-highlight td[b-m326hh6pog] {
    color: black !important;
    text-shadow: none !important;
}

/* --- Modal Styles --- */
.modal-overlay[b-m326hh6pog] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-m326hh6pog] {
    background: white;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
}

.modal-buttons[b-m326hh6pog] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Styles for the History Table --- */
.history-table[b-m326hh6pog] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    margin-top: 0;
}

.history-table th[b-m326hh6pog],
.history-table td[b-m326hh6pog] {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.history-table th[b-m326hh6pog] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

.history-table th:nth-child(1)[b-m326hh6pog], .history-table td:nth-child(1)[b-m326hh6pog] {
    width: 10%;
}

.history-table th:nth-child(2)[b-m326hh6pog], .history-table td:nth-child(2)[b-m326hh6pog] {
    width: 10%;
}

.history-table th:nth-child(3)[b-m326hh6pog], .history-table td:nth-child(3)[b-m326hh6pog] {
    width: 20%;
}

.history-table th:nth-child(4)[b-m326hh6pog], .history-table td:nth-child(4)[b-m326hh6pog] {
    width: 60%;
}

/* Truncate long text in the Data column and show tooltip on hover */
.history-data-cell[b-m326hh6pog] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
/* /Components/MainTabs/Maintenances/Maintenance_Cases_Contracts.razor.rz.scp.css */
/* Maintenances - General Styles */

/* --- Search Bar Alignment --- */
.case-maintenance-centered-wrapper[b-18bkthzwkc] {
    display: flex;
    align-items: center; /* Vertical centering */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    gap: 50px;
    margin-left: 20px;
    margin-right: 20px;
}

.case-maintenance-centered-input[b-18bkthzwkc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-maintenance-search-icon[b-18bkthzwkc] {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* --- Button Group --- */
.button-group[b-18bkthzwkc] {
    display: flex;
    gap: 10px;
    margin-left: auto;
    margin-right:10px;
}

/* --- Styles for Data Tables (General) --- */
.grid-data-table[b-18bkthzwkc] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.grid-data-table th[b-18bkthzwkc],
.grid-data-table td[b-18bkthzwkc] {
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.grid-data-table th[b-18bkthzwkc] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Dynamic column widths using CSS variables */
.grid-data-table th:nth-child(1)[b-18bkthzwkc], .grid-data-table td:nth-child(1)[b-18bkthzwkc] {
    width: var(--col-1-width, auto);
}

.grid-data-table th:nth-child(2)[b-18bkthzwkc], .grid-data-table td:nth-child(2)[b-18bkthzwkc] {
    width: var(--col-2-width, auto);
}

.grid-data-table th:nth-child(3)[b-18bkthzwkc], .grid-data-table td:nth-child(3)[b-18bkthzwkc] {
    width: var(--col-3-width, auto);
}

.grid-data-table th:nth-child(4)[b-18bkthzwkc], .grid-data-table td:nth-child(4)[b-18bkthzwkc] {
    width: var(--col-4-width, auto);
}

.grid-data-table th:nth-child(5)[b-18bkthzwkc], .grid-data-table td:nth-child(5)[b-18bkthzwkc] {
    width: var(--col-5-width, auto);
}

.grid-data-table th:nth-child(6)[b-18bkthzwkc], .grid-data-table td:nth-child(6)[b-18bkthzwkc] {
    width: var(--col-6-width, auto);
}

.grid-data-table th:nth-child(7)[b-18bkthzwkc], .grid-data-table td:nth-child(7)[b-18bkthzwkc] {
    width: var(--col-7-width, auto);
}

.grid-data-table th:nth-child(8)[b-18bkthzwkc], .grid-data-table td:nth-child(8)[b-18bkthzwkc] {
    width: var(--col-8-width, auto);
}

.grid-data-table th:nth-child(9)[b-18bkthzwkc], .grid-data-table td:nth-child(9)[b-18bkthzwkc] {
    width: var(--col-9-width, auto);
}

.grid-data-table th:nth-child(10)[b-18bkthzwkc], .grid-data-table td:nth-child(10)[b-18bkthzwkc] {
    width: var(--col-10-width, auto);
    text-align: center;
}

.grid-data-table th:nth-child(11)[b-18bkthzwkc], .grid-data-table td:nth-child(11)[b-18bkthzwkc] {
    width: var(--col-11-width, auto);
}

.grid-data-table th:nth-child(12)[b-18bkthzwkc], .grid-data-table td:nth-child(12)[b-18bkthzwkc] {
    width: var(--col-12-width, auto);
}

/* --- Style for Selected Row --- */
.selected-row td[b-18bkthzwkc] {
    background-color: rgba(255,255,255,1);
    border-top: 1px solid rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Editing Row --- */
.editing-row-highlight td[b-18bkthzwkc] {
    color: black !important;
    text-shadow: none !important;
}

/* --- Modal Styles --- */
.modal-overlay[b-18bkthzwkc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-18bkthzwkc] {
    background: white;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
}

.modal-buttons[b-18bkthzwkc] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Styles for the History Table --- */
.history-table[b-18bkthzwkc] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    margin-top: 0;
}

.history-table th[b-18bkthzwkc],
.history-table td[b-18bkthzwkc] {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.history-table th[b-18bkthzwkc] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

.history-table th:nth-child(1)[b-18bkthzwkc], .history-table td:nth-child(1)[b-18bkthzwkc] {
    width: 10%;
}

.history-table th:nth-child(2)[b-18bkthzwkc], .history-table td:nth-child(2)[b-18bkthzwkc] {
    width: 10%;
}

.history-table th:nth-child(3)[b-18bkthzwkc], .history-table td:nth-child(3)[b-18bkthzwkc] {
    width: 20%;
}

.history-table th:nth-child(4)[b-18bkthzwkc], .history-table td:nth-child(4)[b-18bkthzwkc] {
    width: 60%;
}

/* Truncate long text in the Data column and show tooltip on hover */
.history-data-cell[b-18bkthzwkc] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
/* /Components/MainTabs/Maintenances/Maintenance_Cases_Departments.razor.rz.scp.css */
/* Maintenances - General Styles */

/* --- Search Bar Alignment --- */
.case-maintenance-centered-wrapper[b-9yzmjkl94y] {
    display: flex;
    align-items: center; /* Vertical centering */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    gap: 50px;
    margin-left: 20px;
    margin-right: 20px;
}

.case-maintenance-centered-input[b-9yzmjkl94y] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-maintenance-search-icon[b-9yzmjkl94y] {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* --- Button Group --- */
.button-group[b-9yzmjkl94y] {
    display: flex;
    gap: 10px;
    margin-left: auto;
    margin-right:10px;
}

/* --- Styles for Data Tables (General) --- */
.grid-data-table[b-9yzmjkl94y] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.grid-data-table th[b-9yzmjkl94y],
.grid-data-table td[b-9yzmjkl94y] {
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.grid-data-table th[b-9yzmjkl94y] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Dynamic column widths using CSS variables */
.grid-data-table th:nth-child(1)[b-9yzmjkl94y], .grid-data-table td:nth-child(1)[b-9yzmjkl94y] {
    width: var(--col-1-width, auto);
}

.grid-data-table th:nth-child(2)[b-9yzmjkl94y], .grid-data-table td:nth-child(2)[b-9yzmjkl94y] {
    width: var(--col-2-width, auto);
}

.grid-data-table th:nth-child(3)[b-9yzmjkl94y], .grid-data-table td:nth-child(3)[b-9yzmjkl94y] {
    width: var(--col-3-width, auto);
}

.grid-data-table th:nth-child(4)[b-9yzmjkl94y], .grid-data-table td:nth-child(4)[b-9yzmjkl94y] {
    width: var(--col-4-width, auto);
}

.grid-data-table th:nth-child(5)[b-9yzmjkl94y], .grid-data-table td:nth-child(5)[b-9yzmjkl94y] {
    width: var(--col-5-width, auto);
}

.grid-data-table th:nth-child(6)[b-9yzmjkl94y], .grid-data-table td:nth-child(6)[b-9yzmjkl94y] {
    width: var(--col-6-width, auto);
}

.grid-data-table th:nth-child(7)[b-9yzmjkl94y], .grid-data-table td:nth-child(7)[b-9yzmjkl94y] {
    width: var(--col-7-width, auto);
}

.grid-data-table th:nth-child(8)[b-9yzmjkl94y], .grid-data-table td:nth-child(8)[b-9yzmjkl94y] {
    width: var(--col-8-width, auto);
}

.grid-data-table th:nth-child(9)[b-9yzmjkl94y], .grid-data-table td:nth-child(9)[b-9yzmjkl94y] {
    width: var(--col-9-width, auto);
}

.grid-data-table th:nth-child(10)[b-9yzmjkl94y], .grid-data-table td:nth-child(10)[b-9yzmjkl94y] {
    width: var(--col-10-width, auto);
    text-align: center;
}

.grid-data-table th:nth-child(11)[b-9yzmjkl94y], .grid-data-table td:nth-child(11)[b-9yzmjkl94y] {
    width: var(--col-11-width, auto);
}

.grid-data-table th:nth-child(12)[b-9yzmjkl94y], .grid-data-table td:nth-child(12)[b-9yzmjkl94y] {
    width: var(--col-12-width, auto);
}

/* --- Style for Selected Row --- */
.selected-row td[b-9yzmjkl94y] {
    background-color: rgba(255,255,255,1);
    border-top: 1px solid rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Editing Row --- */
.editing-row-highlight td[b-9yzmjkl94y] {
    color: black !important;
    text-shadow: none !important;
}

/* --- Modal Styles --- */
.modal-overlay[b-9yzmjkl94y] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-9yzmjkl94y] {
    background: white;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
}

.modal-buttons[b-9yzmjkl94y] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Styles for the History Table --- */
.history-table[b-9yzmjkl94y] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    margin-top: 0;
}

.history-table th[b-9yzmjkl94y],
.history-table td[b-9yzmjkl94y] {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.history-table th[b-9yzmjkl94y] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

.history-table th:nth-child(1)[b-9yzmjkl94y], .history-table td:nth-child(1)[b-9yzmjkl94y] {
    width: 10%;
}

.history-table th:nth-child(2)[b-9yzmjkl94y], .history-table td:nth-child(2)[b-9yzmjkl94y] {
    width: 10%;
}

.history-table th:nth-child(3)[b-9yzmjkl94y], .history-table td:nth-child(3)[b-9yzmjkl94y] {
    width: 20%;
}

.history-table th:nth-child(4)[b-9yzmjkl94y], .history-table td:nth-child(4)[b-9yzmjkl94y] {
    width: 60%;
}

/* Truncate long text in the Data column and show tooltip on hover */
.history-data-cell[b-9yzmjkl94y] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
/* /Components/MainTabs/Maintenances/Maintenance_Cases_Priorities.razor.rz.scp.css */
/* Maintenances - General Styles */

/* --- Search Bar Alignment --- */
.case-maintenance-centered-wrapper[b-d4311li9ha] {
    display: flex;
    align-items: center; /* Vertical centering */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    gap: 50px;
    margin-left: 20px;
    margin-right: 20px;
}

.case-maintenance-centered-input[b-d4311li9ha] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-maintenance-search-icon[b-d4311li9ha] {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* --- Button Group --- */
.button-group[b-d4311li9ha] {
    display: flex;
    gap: 10px;
    margin-left: auto;
    margin-right:10px;
}

/* --- Styles for Data Tables (General) --- */
.grid-data-table[b-d4311li9ha] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.grid-data-table th[b-d4311li9ha],
.grid-data-table td[b-d4311li9ha] {
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.grid-data-table th[b-d4311li9ha] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Dynamic column widths using CSS variables */
.grid-data-table th:nth-child(1)[b-d4311li9ha], .grid-data-table td:nth-child(1)[b-d4311li9ha] {
    width: var(--col-1-width, auto);
}

.grid-data-table th:nth-child(2)[b-d4311li9ha], .grid-data-table td:nth-child(2)[b-d4311li9ha] {
    width: var(--col-2-width, auto);
}

.grid-data-table th:nth-child(3)[b-d4311li9ha], .grid-data-table td:nth-child(3)[b-d4311li9ha] {
    width: var(--col-3-width, auto);
}

.grid-data-table th:nth-child(4)[b-d4311li9ha], .grid-data-table td:nth-child(4)[b-d4311li9ha] {
    width: var(--col-4-width, auto);
}

.grid-data-table th:nth-child(5)[b-d4311li9ha], .grid-data-table td:nth-child(5)[b-d4311li9ha] {
    width: var(--col-5-width, auto);
}

.grid-data-table th:nth-child(6)[b-d4311li9ha], .grid-data-table td:nth-child(6)[b-d4311li9ha] {
    width: var(--col-6-width, auto);
}

.grid-data-table th:nth-child(7)[b-d4311li9ha], .grid-data-table td:nth-child(7)[b-d4311li9ha] {
    width: var(--col-7-width, auto);
}

.grid-data-table th:nth-child(8)[b-d4311li9ha], .grid-data-table td:nth-child(8)[b-d4311li9ha] {
    width: var(--col-8-width, auto);
}

.grid-data-table th:nth-child(9)[b-d4311li9ha], .grid-data-table td:nth-child(9)[b-d4311li9ha] {
    width: var(--col-9-width, auto);
}

.grid-data-table th:nth-child(10)[b-d4311li9ha], .grid-data-table td:nth-child(10)[b-d4311li9ha] {
    width: var(--col-10-width, auto);
    text-align: center;
}

.grid-data-table th:nth-child(11)[b-d4311li9ha], .grid-data-table td:nth-child(11)[b-d4311li9ha] {
    width: var(--col-11-width, auto);
}

.grid-data-table th:nth-child(12)[b-d4311li9ha], .grid-data-table td:nth-child(12)[b-d4311li9ha] {
    width: var(--col-12-width, auto);
}

/* --- Style for Selected Row --- */
.selected-row td[b-d4311li9ha] {
    background-color: rgba(255,255,255,1);
    border-top: 1px solid rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Editing Row --- */
.editing-row-highlight td[b-d4311li9ha] {
    color: black !important;
    text-shadow: none !important;
}

/* --- Modal Styles --- */
.modal-overlay[b-d4311li9ha] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-d4311li9ha] {
    background: white;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
}

.modal-buttons[b-d4311li9ha] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Styles for the History Table --- */
.history-table[b-d4311li9ha] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    margin-top: 0;
}

.history-table th[b-d4311li9ha],
.history-table td[b-d4311li9ha] {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.history-table th[b-d4311li9ha] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

.history-table th:nth-child(1)[b-d4311li9ha], .history-table td:nth-child(1)[b-d4311li9ha] {
    width: 10%;
}

.history-table th:nth-child(2)[b-d4311li9ha], .history-table td:nth-child(2)[b-d4311li9ha] {
    width: 10%;
}

.history-table th:nth-child(3)[b-d4311li9ha], .history-table td:nth-child(3)[b-d4311li9ha] {
    width: 20%;
}

.history-table th:nth-child(4)[b-d4311li9ha], .history-table td:nth-child(4)[b-d4311li9ha] {
    width: 60%;
}

/* Truncate long text in the Data column and show tooltip on hover */
.history-data-cell[b-d4311li9ha] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
/* /Components/MainTabs/Maintenances/Maintenance_Cases_Status.razor.rz.scp.css */
/* Maintenances - General Styles */

/* --- Search Bar Alignment --- */
.case-maintenance-centered-wrapper[b-girxj7asqm] {
    display: flex;
    align-items: center; /* Vertical centering */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    gap: 50px;
    margin-left: 20px;
    margin-right: 20px;
}

.case-maintenance-centered-input[b-girxj7asqm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-maintenance-search-icon[b-girxj7asqm] {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* --- Button Group --- */
.button-group[b-girxj7asqm] {
    display: flex;
    gap: 10px;
    margin-left: auto;
    margin-right:10px;
}

/* --- Styles for Data Tables (General) --- */
.grid-data-table[b-girxj7asqm] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.grid-data-table th[b-girxj7asqm],
.grid-data-table td[b-girxj7asqm] {
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.grid-data-table th[b-girxj7asqm] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Dynamic column widths using CSS variables */
.grid-data-table th:nth-child(1)[b-girxj7asqm], .grid-data-table td:nth-child(1)[b-girxj7asqm] {
    width: var(--col-1-width, auto);
}

.grid-data-table th:nth-child(2)[b-girxj7asqm], .grid-data-table td:nth-child(2)[b-girxj7asqm] {
    width: var(--col-2-width, auto);
}

.grid-data-table th:nth-child(3)[b-girxj7asqm], .grid-data-table td:nth-child(3)[b-girxj7asqm] {
    width: var(--col-3-width, auto);
}

.grid-data-table th:nth-child(4)[b-girxj7asqm], .grid-data-table td:nth-child(4)[b-girxj7asqm] {
    width: var(--col-4-width, auto);
}

.grid-data-table th:nth-child(5)[b-girxj7asqm], .grid-data-table td:nth-child(5)[b-girxj7asqm] {
    width: var(--col-5-width, auto);
}

.grid-data-table th:nth-child(6)[b-girxj7asqm], .grid-data-table td:nth-child(6)[b-girxj7asqm] {
    width: var(--col-6-width, auto);
}

.grid-data-table th:nth-child(7)[b-girxj7asqm], .grid-data-table td:nth-child(7)[b-girxj7asqm] {
    width: var(--col-7-width, auto);
}

.grid-data-table th:nth-child(8)[b-girxj7asqm], .grid-data-table td:nth-child(8)[b-girxj7asqm] {
    width: var(--col-8-width, auto);
}

.grid-data-table th:nth-child(9)[b-girxj7asqm], .grid-data-table td:nth-child(9)[b-girxj7asqm] {
    width: var(--col-9-width, auto);
}

.grid-data-table th:nth-child(10)[b-girxj7asqm], .grid-data-table td:nth-child(10)[b-girxj7asqm] {
    width: var(--col-10-width, auto);
    text-align: center;
}

.grid-data-table th:nth-child(11)[b-girxj7asqm], .grid-data-table td:nth-child(11)[b-girxj7asqm] {
    width: var(--col-11-width, auto);
}

.grid-data-table th:nth-child(12)[b-girxj7asqm], .grid-data-table td:nth-child(12)[b-girxj7asqm] {
    width: var(--col-12-width, auto);
}

/* --- Style for Selected Row --- */
.selected-row td[b-girxj7asqm] {
    background-color: rgba(255,255,255,1);
    border-top: 1px solid rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Editing Row --- */
.editing-row-highlight td[b-girxj7asqm] {
    color: black !important;
    text-shadow: none !important;
}

/* --- Modal Styles --- */
.modal-overlay[b-girxj7asqm] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-girxj7asqm] {
    background: white;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
}

.modal-buttons[b-girxj7asqm] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Styles for the History Table --- */
.history-table[b-girxj7asqm] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    margin-top: 0;
}

.history-table th[b-girxj7asqm],
.history-table td[b-girxj7asqm] {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.history-table th[b-girxj7asqm] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

.history-table th:nth-child(1)[b-girxj7asqm], .history-table td:nth-child(1)[b-girxj7asqm] {
    width: 10%;
}

.history-table th:nth-child(2)[b-girxj7asqm], .history-table td:nth-child(2)[b-girxj7asqm] {
    width: 10%;
}

.history-table th:nth-child(3)[b-girxj7asqm], .history-table td:nth-child(3)[b-girxj7asqm] {
    width: 20%;
}

.history-table th:nth-child(4)[b-girxj7asqm], .history-table td:nth-child(4)[b-girxj7asqm] {
    width: 60%;
}

/* Truncate long text in the Data column and show tooltip on hover */
.history-data-cell[b-girxj7asqm] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
/* /Components/MainTabs/Maintenances/Maintenance_Contacts.razor.rz.scp.css */
/* Maintenances - Contact Styles */

/* --- Search Bar Alignment --- */
.case-maintenance-centered-wrapper[b-59e1q3jh7a] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.case-maintenance-centered-input[b-59e1q3jh7a] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-maintenance-search-icon[b-59e1q3jh7a] {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* --- Container Structure Styles --- */
.contacts-container[b-59e1q3jh7a] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* --- Top Bar (Title + Buttons) Alignment --- */
.contacts-top-div[b-59e1q3jh7a] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle, 90deg),
        var(--griditem-title-backgroundgradient-color-left, #eee),
        var(--griditem-title-backgroundgradient-color-right, #ddd)
    );
    font-size: var(--griditem-title-font-size, 1em);
    color: var(--griditem-title-font-color, black);
    height: var(--griditem-title-height, 35px);
    min-height: 30px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    flex-shrink: 0;
}

.button-group[b-59e1q3jh7a] {
    display: flex;
    gap: 10px;
}

/* --- Bottom Div (Table Area) --- */
.contacts-bottom-div[b-59e1q3jh7a] {
    flex-grow: 1;
    width: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
}

/* --- Error Message Style --- */
.error-message[b-59e1q3jh7a] {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* --- Modal Styles --- */
.modal-overlay[b-59e1q3jh7a] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-59e1q3jh7a] {
    background: white;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
}

.modal-buttons[b-59e1q3jh7a] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Validation Error Messages --- */
.field-validation-error[b-59e1q3jh7a] {
    color: red;
    font-size: 0.8em;
}

/* --- Text Muted --- */
.text-muted[b-59e1q3jh7a] {
    color: #6c757d;
    font-style: italic;
}

/* --- Modal Styles (from SiteContacts) --- */
.modal-overlay[b-59e1q3jh7a] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-59e1q3jh7a 0.2s ease;
}

.modal-content[b-59e1q3jh7a] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modalFadeIn-b-59e1q3jh7a 0.3s ease;
}

.modal-header[b-59e1q3jh7a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

.modal-header h3[b-59e1q3jh7a] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.modal-close[b-59e1q3jh7a] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s ease;
}

.modal-close:hover[b-59e1q3jh7a] {
    color: #333;
}

.modal-close:disabled[b-59e1q3jh7a] {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-body[b-59e1q3jh7a] {
    flex: 1;
    overflow: auto;
    padding: 24px;
}

.modal-footer[b-59e1q3jh7a] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

/* Edit form styles */
.edit-form[b-59e1q3jh7a] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-section[b-59e1q3jh7a] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-section h4[b-59e1q3jh7a] {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: #333;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 4px;
}

.form-row[b-59e1q3jh7a] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

.form-label[b-59e1q3jh7a],
.form-label-required[b-59e1q3jh7a] {
    font-weight: 600;
    color: #495057;
    min-width: 130px;
    display: inline-block;
    font-size: 0.95rem;
}

.form-label-required[b-59e1q3jh7a]::after {
    content: " *";
    color: #dc3545;
}

/* Form Controls */
.form-control[b-59e1q3jh7a] {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    flex: 1;
}

.form-control:focus[b-59e1q3jh7a] {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control:disabled[b-59e1q3jh7a] {
    background-color: #e9ecef;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Text Utilities */
.text-muted[b-59e1q3jh7a] {
    color: #6c757d !important;
    font-size: 0.9em;
}

.text-center[b-59e1q3jh7a] {
    text-align: center;
}

/* Spacing Utilities */
.ms-1[b-59e1q3jh7a] {
    margin-left: 0.25rem;
}

.ms-2[b-59e1q3jh7a] {
    margin-left: 0.5rem;
}

.me-1[b-59e1q3jh7a] {
    margin-right: 0.25rem;
}

.me-2[b-59e1q3jh7a] {
    margin-right: 0.5rem;
}

.mb-2[b-59e1q3jh7a] {
    margin-bottom: 0.5rem;
}

.p-4[b-59e1q3jh7a] {
    padding: 1.5rem;
}

/* Icon Styles */
.bi[b-59e1q3jh7a],
.fas[b-59e1q3jh7a],
.fa[b-59e1q3jh7a] {
    display: inline-block;
    vertical-align: middle;
}

/* History placeholder */
.history-placeholder[b-59e1q3jh7a] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 150px;
}

/* Animation keyframes */
@keyframes fadeIn-b-59e1q3jh7a {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalFadeIn-b-59e1q3jh7a {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-content[b-59e1q3jh7a] {
        width: 95vw;
        margin: 10px;
    }
    
    .form-row[b-59e1q3jh7a] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .form-label[b-59e1q3jh7a],
    .form-label-required[b-59e1q3jh7a] {
        min-width: auto;
        width: 100%;
    }

    .form-control[b-59e1q3jh7a] {
        width: 100%;
    }

    .modal-header h3[b-59e1q3jh7a] {
        font-size: 1.1rem;
    }

    .modal-body[b-59e1q3jh7a] {
        padding: 16px;
    }

    .modal-footer[b-59e1q3jh7a] {
        padding: 12px 16px;
        flex-direction: column-reverse;
    }

    .modal-footer button[b-59e1q3jh7a] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .modal-content[b-59e1q3jh7a] {
        max-height: 95vh;
    }

    .form-section h4[b-59e1q3jh7a] {
        font-size: 1rem;
    }
}

/* Button States */
button:disabled[b-59e1q3jh7a] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Validation message styling */
.validation-message[b-59e1q3jh7a] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Associated Sites Section */
.priority-badge[b-59e1q3jh7a] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    background-color: #74b9ff;
    color: white;
    font-size: 0.85em;
    font-weight: bold;
    min-width: 24px;
    text-align: center;
}

/* Badge styles for notification methods */
.badge[b-59e1q3jh7a] {
    font-size: 0.75em;
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 500;
}

.badge.bg-primary[b-59e1q3jh7a] {
    background-color: #007bff !important;
    color: white;
}

.badge.bg-success[b-59e1q3jh7a] {
    background-color: #28a745 !important;
    color: white;
}

.badge.bg-info[b-59e1q3jh7a] {
    background-color: #17a2b8 !important;
    color: white;
}

/* Spinner for loading states */
.spinner-border[b-59e1q3jh7a] {
    width: 2rem;
    height: 2rem;
    border-width: 0.25em;
}

.visually-hidden[b-59e1q3jh7a] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Icon sizes */
.fs-4[b-59e1q3jh7a] {
    font-size: 1.5rem;
}

/* Ensure proper spacing for associated sites table */
.form-section:last-child[b-59e1q3jh7a] {
    margin-bottom: 0;
}

.form-section .dataTable tbody tr[b-59e1q3jh7a] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.form-section .dataTable tbody tr:hover[b-59e1q3jh7a] {
    background-color: #f8f9fa;
}
/* /Components/MainTabs/Maintenances/Maintenance_Device.razor.rz.scp.css */
.device-container[b-1ycdivsf1f] {
    width: 100%;
    height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: auto; /* Changed from hidden to auto */
}

.infobox[b-1ycdivsf1f] {
    display: flex;
    height: 70px;
    width: 98%;
    margin:auto;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    gap: 30px;
    flex-shrink: 0; /* Prevent shrinking */
}

.action-buttons[b-1ycdivsf1f] {
    display: flex;
    width: 280px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    gap: 5px;
}

/* Tabs (Your Colleague's Design) */
.tabs-container[b-1ycdivsf1f] {
    width: 97%;
    height: 100%;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    overflow: auto; /* Changed from hidden to auto */
    flex: 1; /* Allow it to grow and shrink */
}

.tab-bar[b-1ycdivsf1f] {
    display: flex;
    width: 100%;
    margin-top: 5px;
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: 20px;
    min-height: 30px;
    flex-shrink: 0; /* Prevent shrinking */
}

.tab[b-1ycdivsf1f] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    user-select: none;
    border-right: 2px solid rgba(0,0,0,0.5);
    position: relative;
    z-index: 1;
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.9);
    font-family: Roboto;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(0,0,0,0.5);
}

.tab:last-child[b-1ycdivsf1f] {
    border-right: none;
}

.tab.active[b-1ycdivsf1f] {
    background: transparent;
    color: rgba(0,0,0,0.9);
    z-index: 2;
    border-top: 1px solid rgba(0,0,0,0.5);
    border-bottom: none;
}

.tab:not(.active):hover[b-1ycdivsf1f] {
    color: rgba(0,0,0,0.9);
}

.tab-content[b-1ycdivsf1f] {
    flex: 1;
    width: 100%;
    margin-top: 10px;
    background: transparent !important;
    overflow: auto; /* Add scrolling capability */
    min-height: 0; /* Allow shrinking below content size */
}

.tab-pane[b-1ycdivsf1f] {
    display: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tab-pane.active[b-1ycdivsf1f] {
    display: block;
    opacity: 1;
    animation: fadeIn-b-1ycdivsf1f 0.25s ease-out forwards;
}

@keyframes fadeIn-b-1ycdivsf1f {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.itemContainer[b-1ycdivsf1f] {
    margin:auto;
    width: 98%;
    height: 100%;
    margin-bottom:50px;
}

.includeBackground[b-1ycdivsf1f] {
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle), 
        var(--griditem-content-backgroundgradient-color-left),
        var(--griditem-content-backgroundgradient-color-right));
    box-shadow: 5px 5px 10px var(--griditem-boxshadow-color);
}

/* /Components/MainTabs/Maintenances/Maintenance_DeviceLifeCycleEvents.razor.rz.scp.css */
/* Maintenances - Contact Styles */

/* --- Search Bar Alignment --- */
.case-maintenance-centered-wrapper[b-ltj44ansby] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.case-maintenance-centered-input[b-ltj44ansby] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-maintenance-search-icon[b-ltj44ansby] {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* --- Container Structure Styles --- */
.contacts-container[b-ltj44ansby] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* --- Top Bar (Title + Buttons) Alignment --- */
.contacts-top-div[b-ltj44ansby] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle, 90deg),
        var(--griditem-title-backgroundgradient-color-left, #eee),
        var(--griditem-title-backgroundgradient-color-right, #ddd)
    );
    font-size: var(--griditem-title-font-size, 1em);
    color: var(--griditem-title-font-color, black);
    height: var(--griditem-title-height, 35px);
    min-height: 30px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    flex-shrink: 0;
}

.button-group[b-ltj44ansby] {
    display: flex;
    gap: 10px;
}

/* --- Bottom Div (Table Area) --- */
.contacts-bottom-div[b-ltj44ansby] {
    flex-grow: 1;
    width: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
}

/* --- Error Message Style --- */
.error-message[b-ltj44ansby] {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* --- Modal Styles --- */
.modal-overlay[b-ltj44ansby] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-ltj44ansby] {
    background: white;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
}

.modal-buttons[b-ltj44ansby] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Validation Error Messages --- */
.field-validation-error[b-ltj44ansby] {
    color: red;
    font-size: 0.8em;
}

/* --- Text Muted --- */
.text-muted[b-ltj44ansby] {
    color: #6c757d;
    font-style: italic;
}

/* --- Modal Styles (from SiteContacts) --- */
.modal-overlay[b-ltj44ansby] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-ltj44ansby 0.2s ease;
}

.modal-content[b-ltj44ansby] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modalFadeIn-b-ltj44ansby 0.3s ease;
}

.modal-header[b-ltj44ansby] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

.modal-header h3[b-ltj44ansby] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.modal-close[b-ltj44ansby] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s ease;
}

.modal-close:hover[b-ltj44ansby] {
    color: #333;
}

.modal-close:disabled[b-ltj44ansby] {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-body[b-ltj44ansby] {
    flex: 1;
    overflow: auto;
    padding: 24px;
}

.modal-footer[b-ltj44ansby] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

/* Edit form styles */
.edit-form[b-ltj44ansby] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-section[b-ltj44ansby] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-section h4[b-ltj44ansby] {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: #333;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 4px;
}

.form-row[b-ltj44ansby] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

.form-label[b-ltj44ansby],
.form-label-required[b-ltj44ansby] {
    font-weight: 600;
    color: #495057;
    min-width: 130px;
    display: inline-block;
    font-size: 0.95rem;
}

.form-label-required[b-ltj44ansby]::after {
    content: " *";
    color: #dc3545;
}

/* Form Controls */
.form-control[b-ltj44ansby] {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    flex: 1;
}

.form-control:focus[b-ltj44ansby] {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control:disabled[b-ltj44ansby] {
    background-color: #e9ecef;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Text Utilities */
.text-muted[b-ltj44ansby] {
    color: #6c757d !important;
    font-size: 0.9em;
}

.text-center[b-ltj44ansby] {
    text-align: center;
}

/* Spacing Utilities */
.ms-1[b-ltj44ansby] {
    margin-left: 0.25rem;
}

.ms-2[b-ltj44ansby] {
    margin-left: 0.5rem;
}

.me-1[b-ltj44ansby] {
    margin-right: 0.25rem;
}

.me-2[b-ltj44ansby] {
    margin-right: 0.5rem;
}

.mb-2[b-ltj44ansby] {
    margin-bottom: 0.5rem;
}

.p-4[b-ltj44ansby] {
    padding: 1.5rem;
}

/* Icon Styles */
.bi[b-ltj44ansby],
.fas[b-ltj44ansby],
.fa[b-ltj44ansby] {
    display: inline-block;
    vertical-align: middle;
}

/* History placeholder */
.history-placeholder[b-ltj44ansby] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 150px;
}

/* Animation keyframes */
@keyframes fadeIn-b-ltj44ansby {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalFadeIn-b-ltj44ansby {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-content[b-ltj44ansby] {
        width: 95vw;
        margin: 10px;
    }
    
    .form-row[b-ltj44ansby] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .form-label[b-ltj44ansby],
    .form-label-required[b-ltj44ansby] {
        min-width: auto;
        width: 100%;
    }

    .form-control[b-ltj44ansby] {
        width: 100%;
    }

    .modal-header h3[b-ltj44ansby] {
        font-size: 1.1rem;
    }

    .modal-body[b-ltj44ansby] {
        padding: 16px;
    }

    .modal-footer[b-ltj44ansby] {
        padding: 12px 16px;
        flex-direction: column-reverse;
    }

    .modal-footer button[b-ltj44ansby] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .modal-content[b-ltj44ansby] {
        max-height: 95vh;
    }

    .form-section h4[b-ltj44ansby] {
        font-size: 1rem;
    }
}

/* Button States */
button:disabled[b-ltj44ansby] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Validation message styling */
.validation-message[b-ltj44ansby] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Associated Sites Section */
.priority-badge[b-ltj44ansby] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    background-color: #74b9ff;
    color: white;
    font-size: 0.85em;
    font-weight: bold;
    min-width: 24px;
    text-align: center;
}

/* Badge styles for notification methods */
.badge[b-ltj44ansby] {
    font-size: 0.75em;
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 500;
}

.badge.bg-primary[b-ltj44ansby] {
    background-color: #007bff !important;
    color: white;
}

.badge.bg-success[b-ltj44ansby] {
    background-color: #28a745 !important;
    color: white;
}

.badge.bg-info[b-ltj44ansby] {
    background-color: #17a2b8 !important;
    color: white;
}

/* Spinner for loading states */
.spinner-border[b-ltj44ansby] {
    width: 2rem;
    height: 2rem;
    border-width: 0.25em;
}

.visually-hidden[b-ltj44ansby] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Icon sizes */
.fs-4[b-ltj44ansby] {
    font-size: 1.5rem;
}

/* Ensure proper spacing for associated sites table */
.form-section:last-child[b-ltj44ansby] {
    margin-bottom: 0;
}

.form-section .dataTable tbody tr[b-ltj44ansby] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.form-section .dataTable tbody tr:hover[b-ltj44ansby] {
    background-color: #f8f9fa;
}
/* /Components/MainTabs/Maintenances/Maintenance_Devices.razor.rz.scp.css */
/* Maintenances - General Styles */

/* --- Search Bar Alignment --- */
.case-maintenance-centered-wrapper[b-uqzd0g9dj0] {
    display: flex;
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.case-maintenance-centered-input[b-uqzd0g9dj0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-maintenance-search-icon[b-uqzd0g9dj0] {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* --- Container Structure Styles --- */
.sites-container[b-uqzd0g9dj0] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* --- Top Bar (Title + Buttons) Alignment --- */
.sites-top-div[b-uqzd0g9dj0] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle, 90deg), var(--griditem-title-backgroundgradient-color-left, #eee), var(--griditem-title-backgroundgradient-color-right, #ddd));
    font-size: var(--griditem-title-font-size, 1em);
    color: var(--griditem-title-font-color, black);
    height: var(--griditem-title-height, 35px);
    min-height: 30px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    flex-shrink: 0;
}

.button-group[b-uqzd0g9dj0] {
    display: flex;
    gap: 10px;
}

/* --- Bottom Div (Table Area) --- */
.sites-bottom-div[b-uqzd0g9dj0] {
    flex-grow: 1;
    width: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
}

/* --- Error Message Style --- */
.error-message[b-uqzd0g9dj0] {
    color: #721c24; /* Dark red text */
    background-color: #f8d7da; /* Light red background */
    border: 1px solid #f5c6cb; /* Reddish border */
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-size: 0.9em;
}


/* --- Styles for the unitofmeasure Table --- */
.unitofmeasure-table[b-uqzd0g9dj0] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

    .unitofmeasure-table th[b-uqzd0g9dj0],
    .unitofmeasure-table td[b-uqzd0g9dj0] {
        border: 1px solid #ccc;
        padding: 8px 12px;
        text-align: left;
        word-wrap: break-word;
        vertical-align: middle;
    }

    .unitofmeasure-table th[b-uqzd0g9dj0] {
        background-color: #f2f2f2;
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .unitofmeasure-table th:nth-child(1)[b-uqzd0g9dj0], .unitofmeasure-table td:nth-child(1)[b-uqzd0g9dj0] {
            width: 25%;
        }

        .unitofmeasure-table th:nth-child(2)[b-uqzd0g9dj0], .unitofmeasure-table td:nth-child(2)[b-uqzd0g9dj0] {
            width: 60%;
        }

        .unitofmeasure-table th:nth-child(3)[b-uqzd0g9dj0], .unitofmeasure-table td:nth-child(3)[b-uqzd0g9dj0] {
            width: 10%;
            text-align: center;
        }

        .unitofmeasure-table th:nth-child(4)[b-uqzd0g9dj0], .unitofmeasure-table td:nth-child(4)[b-uqzd0g9dj0] {
            width: 5%;
            text-align: center;
        }

/* Truncate long text in the Description column and show tooltip on hover */
.unitofmeasure-description-cell[b-uqzd0g9dj0] {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    vertical-align: middle;
}

/* --- Text Contrast for Color Cells (Display Mode Only) --- */
.unitofmeasure-table td:nth-child(3)[style*="background-color"][b-uqzd0g9dj0] {
    color: white;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.unitofmeasure-table td:nth-child(3)[style*="background-color:Orange"][b-uqzd0g9dj0],
.unitofmeasure-table td:nth-child(3)[style*="background-color:Yellow"][b-uqzd0g9dj0],
.unitofmeasure-table td:nth-child(3)[style*="background-color:LightGreen"][b-uqzd0g9dj0],
.unitofmeasure-table td:nth-child(3)[style*="background-color:transparent"][b-uqzd0g9dj0],
.unitofmeasure-table td:nth-child(3)[style*="background-color:#FFFFFF"][b-uqzd0g9dj0] {
    color: black;
    text-shadow: none;
}

/* --- Styles for Inline Editing --- */
.edit-input[b-uqzd0g9dj0] {
    width: 95%;
    padding: 4px;
    margin: -4px -6px;
    box-sizing: border-box;
    border: 1px solid #007bff;
    font-size: inherit;
    vertical-align: middle;
    background-color: white;
    color: black;
}

    .edit-input[type="color"][b-uqzd0g9dj0] {
        width: 50px;
        height: 25px;
        padding: 1px;
        vertical-align: middle;
        cursor: pointer;
    }

.edit-button[b-uqzd0g9dj0] {
    padding: 3px 6px;
    margin: 0 2px;
    cursor: pointer;
    font-size: 0.85em;
    border: 1px solid;
    border-radius: 3px;
    vertical-align: middle;
}

    .edit-button.save[b-uqzd0g9dj0] {
        background-color: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
    }

        .edit-button.save:hover[b-uqzd0g9dj0] {
            background-color: #c3e6cb;
        }

    .edit-button.cancel[b-uqzd0g9dj0] {
        background-color: #f8d7da;
        border-color: #f5c6cb;
        color: #721c24;
    }

        .edit-button.cancel:hover[b-uqzd0g9dj0] {
            background-color: #f5c6cb;
        }

/* --- Style for Selected Row (Lowest priority override) --- */
.selected-row td[b-uqzd0g9dj0] {
    background-color: #cfe2ff !important;
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Editing Row (Medium priority override) --- */
.editing-row td[b-uqzd0g9dj0] {
    background-color: #e7f3ff !important;
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Add New Row (Highest priority override) --- */
.add-new-row td[b-uqzd0g9dj0] {
    background-color: #f0fff0 !important;
    color: black !important;
    text-shadow: none !important;
}

    /* Color cell takes the row highlight color, not its data color, when selected/editing/adding */
    .selected-row td:nth-child(3)[b-uqzd0g9dj0],
    .editing-row td:nth-child(3)[b-uqzd0g9dj0],
    .add-new-row td:nth-child(3)[b-uqzd0g9dj0] {
        /* The !important on the row styles handles this */
    }

.selected-row input.edit-input[b-uqzd0g9dj0],
.editing-row input.edit-input[b-uqzd0g9dj0],
.add-new-row input.edit-input[b-uqzd0g9dj0] {
    background-color: white;
    color: black;
}

/* --- Other Styles --- */
.case-maintenance-button-container[b-uqzd0g9dj0] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 1px;
}

.modal-overlay[b-uqzd0g9dj0] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-uqzd0g9dj0] {
    background: white;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.2);
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
}

.modal-buttons[b-uqzd0g9dj0] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Styles for the History Table --- */
.history-table[b-uqzd0g9dj0] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    margin-top: 0;
}

    .history-table th[b-uqzd0g9dj0],
    .history-table td[b-uqzd0g9dj0] {
        border: 1px solid #ccc;
        padding: 8px 12px;
        text-align: left;
        word-wrap: break-word;
        vertical-align: middle;
    }

    .history-table th[b-uqzd0g9dj0] {
        background-color: #f2f2f2;
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .history-table th:nth-child(1)[b-uqzd0g9dj0], .history-table td:nth-child(1)[b-uqzd0g9dj0] {
            width: 10%;
        }

        .history-table th:nth-child(2)[b-uqzd0g9dj0], .history-table td:nth-child(2)[b-uqzd0g9dj0] {
            width: 10%;
        }

        .history-table th:nth-child(3)[b-uqzd0g9dj0], .history-table td:nth-child(3)[b-uqzd0g9dj0] {
            width: 20%;
        }

        .history-table th:nth-child(4)[b-uqzd0g9dj0], .history-table td:nth-child(4)[b-uqzd0g9dj0] {
            width: 60%;
        }

/* Truncate long text in the Data column and show tooltip on hover */
.history-data-cell[b-uqzd0g9dj0] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* Style for validation error messages */
.field-validation-error[b-uqzd0g9dj0] {
    color: red;
    font-size: 0.8em;
}
/* /Components/MainTabs/Maintenances/Maintenance_DevicesStatus.razor.rz.scp.css */
/* Maintenances - General Styles (Copied from CaseUOMMaintenance example) */

/* --- Search Bar Alignment --- */
.case-maintenance-centered-wrapper[b-x726z6gzwf] {
    display: flex;
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.case-maintenance-centered-input[b-x726z6gzwf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-maintenance-search-icon[b-x726z6gzwf] {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* --- Container Structure Styles --- */
.sites-container[b-x726z6gzwf] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* --- Top Bar (Title + Buttons) Alignment --- */
.sites-top-div[b-x726z6gzwf] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle, 90deg), var(--griditem-title-backgroundgradient-color-left, #eee), var(--griditem-title-backgroundgradient-color-right, #ddd));
    font-size: var(--griditem-title-font-size, 1em);
    color: var(--griditem-title-font-color, black);
    height: var(--griditem-title-height, 35px);
    min-height: 30px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    flex-shrink: 0;
}

.button-group[b-x726z6gzwf] {
    display: flex;
    gap: 10px;
}

/* --- Bottom Div (Table Area) --- */
.sites-bottom-div[b-x726z6gzwf] {
    flex-grow: 1;
    width: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
}

/* --- Error Message Style --- */
.error-message[b-x726z6gzwf] {
    color: #721c24; /* Dark red text */
    background-color: #f8d7da; /* Light red background */
    border: 1px solid #f5c6cb; /* Reddish border */
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-size: 0.9em;
}


/* --- Styles for the devicestatus Table --- */
.devicestatus-table[b-x726z6gzwf] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

    .devicestatus-table th[b-x726z6gzwf],
    .devicestatus-table td[b-x726z6gzwf] {
        border: 1px solid #ccc;
        padding: 8px 12px;
        text-align: left;
        word-wrap: break-word;
        vertical-align: middle;
    }

    .devicestatus-table th[b-x726z6gzwf] {
        background-color: #f2f2f2;
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        /* Adjusted widths for 3 columns: Name, Description, Actions */
        .devicestatus-table th:nth-child(1)[b-x726z6gzwf], .devicestatus-table td:nth-child(1)[b-x726z6gzwf] { /* Name */
            width: 30%;
        }

        .devicestatus-table th:nth-child(2)[b-x726z6gzwf], .devicestatus-table td:nth-child(2)[b-x726z6gzwf] { /* Description */
            width: 60%;
        }

        .devicestatus-table th:nth-child(3)[b-x726z6gzwf], .devicestatus-table td:nth-child(3)[b-x726z6gzwf] { /* Actions */
            width: 10%;
            text-align: center;
        }

/* Truncate long text in the Description column and show tooltip on hover */
.devicestatus-description-cell[b-x726z6gzwf] {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default; /* Changed from pointer as it's just display */
    vertical-align: middle;
}

/* --- Styles for Inline Editing --- */
.edit-input[b-x726z6gzwf] {
    width: 95%;
    padding: 4px;
    margin: -4px -6px; /* To align with cell padding */
    box-sizing: border-box;
    border: 1px solid #007bff;
    font-size: inherit;
    vertical-align: middle;
    background-color: white;
    color: black;
}

.edit-button[b-x726z6gzwf] {
    padding: 3px 6px;
    margin: 0 2px;
    cursor: pointer;
    font-size: 0.85em;
    border: 1px solid;
    border-radius: 3px;
    vertical-align: middle;
}

    .edit-button.save[b-x726z6gzwf] {
        background-color: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
    }

        .edit-button.save:hover[b-x726z6gzwf] {
            background-color: #c3e6cb;
        }

    .edit-button.cancel[b-x726z6gzwf] {
        background-color: #f8d7da;
        border-color: #f5c6cb;
        color: #721c24;
    }

        .edit-button.cancel:hover[b-x726z6gzwf] {
            background-color: #f5c6cb;
        }

/* --- Style for Selected Row --- */
.selected-row td[b-x726z6gzwf] {
    background-color: #cfe2ff !important; /* Light blue for selected */
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Editing Row --- */
.editing-row td[b-x726z6gzwf] {
    background-color: #fff3cd !important; /* Light yellow for editing existing */
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Add New Row --- */
.add-new-row td[b-x726z6gzwf] {
    background-color: #e2f0d9 !important; /* Light green for new row */
    color: black !important;
    text-shadow: none !important;
}

    /* Ensure input fields in highlighted rows are still readable */
    .selected-row input.edit-input[b-x726z6gzwf],
    .editing-row input.edit-input[b-x726z6gzwf],
    .add-new-row input.edit-input[b-x726z6gzwf] {
        background-color: white; /* Keep input background white */
        color: black;
    }


/* --- Other Styles (Copied) --- */
.case-maintenance-button-container[b-x726z6gzwf] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 1px;
}

.modal-overlay[b-x726z6gzwf] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-x726z6gzwf] {
    background: white;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.2);
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
}

.modal-buttons[b-x726z6gzwf] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Styles for the History Table (Copied) --- */
.history-table[b-x726z6gzwf] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    margin-top: 0;
}

    .history-table th[b-x726z6gzwf],
    .history-table td[b-x726z6gzwf] {
        border: 1px solid #ccc;
        padding: 8px 12px;
        text-align: left;
        word-wrap: break-word;
        vertical-align: middle;
    }

    .history-table th[b-x726z6gzwf] {
        background-color: #f2f2f2;
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .history-table th:nth-child(1)[b-x726z6gzwf], .history-table td:nth-child(1)[b-x726z6gzwf] {
            width: 10%;
        }

        .history-table th:nth-child(2)[b-x726z6gzwf], .history-table td:nth-child(2)[b-x726z6gzwf] {
            width: 10%;
        }

        .history-table th:nth-child(3)[b-x726z6gzwf], .history-table td:nth-child(3)[b-x726z6gzwf] {
            width: 20%;
        }

        .history-table th:nth-child(4)[b-x726z6gzwf], .history-table td:nth-child(4)[b-x726z6gzwf] {
            width: 60%;
        }

.history-data-cell[b-x726z6gzwf] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default; /* Changed from pointer */
}

/* Style for validation error messages */
.field-validation-error[b-x726z6gzwf] {
    color: red;
    font-size: 0.8em;
}
/* /Components/MainTabs/Maintenances/Maintenance_Devices_Create.razor.rz.scp.css */
.form-columns[b-g9o5cpwn2k] {
    display: flex;
    gap: 50px;
    padding: 20px;
}

.form-column[b-g9o5cpwn2k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.custom-input-layout-container[b-g9o5cpwn2k] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* Changed to flex-start as per original file state */
    position: relative;
}

    .custom-input-layout-container > .citadel-input-container.label-left[b-g9o5cpwn2k] {
        display: flex;
        align-items: center;
        width: 100%; /* Ensures it takes full width so validation message wraps below */
        margin-bottom: 0; /* Reset margin if any, rely on parent's gap or validation message's margin-top */
    }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-label[b-g9o5cpwn2k] {
            /* width is set by inline style (e.g., @consistentLabelWidth) */
            /* Global CSS variables should provide: font-size, color */
            /* CSS variables used by CitadelInput: --main-font-size, --main-font-color */
            font-size: var(--main-font-size);
            color: var(--main-font-color);
            white-space: nowrap;
            margin-right: 20px; /* Space between label and input-wrapper */
            flex-shrink: 0;
        }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper[b-g9o5cpwn2k] {
            display: flex;
            align-items: center; /* For checkbox vertical alignment */
            flex-grow: 1;
            position: relative; /* If any child elements inside wrapper need absolute positioning */
        }

            /* Styling for the actual <input type="text" class="citadel-input-box"> */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-g9o5cpwn2k] {
                /* width is set by inline style (e.g., @consistentInputWidth) */
                /* Global CSS variables should provide: padding, border, border-radius, font-size, background-color, color */
                /* CSS variables used by CitadelInput: 
                    --input-padding-vertical, --input-padding-horizontal, 
                    --input-border-color, --input-border-radius, 
                    --main-font-size, --inputSelect-background-color, --input-font-color
                */
                padding: var(--input-padding-vertical) var(--input-padding-horizontal);
                box-sizing: border-box;
                border: 1px solid var(--input-border-color);
                border-radius: var(--input-border-radius);
                font-size: var(--main-font-size);
                background-color: var(--inputSelect-background-color);
                color: var(--input-font-color);
                transition: all 0.2s ease;
                width: 100%; /* Will be overridden by inline style if @consistentInputWidth is applied */
            }

            /* Red border for the input box on error */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box.citadel-input-error[b-g9o5cpwn2k] {
                border-color: var(--bs-danger, #dc3545) !important;
            }

            /* Hover effects for the custom HTML input box */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:hover[b-g9o5cpwn2k] {
                background-color: var(--input-background-color-hover);
                border-color: var(--input-border-color-hover);
            }

            /* Focus effects for the custom HTML input box */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:focus[b-g9o5cpwn2k] {
                outline: none;
                border-color: var(--input-border-color-hover); /* This will be overridden by .citadel-input-error's !important if error class is present */
                box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
                background-color: var(--input-background-color-hover);
            }

            /* Placeholder styling for custom HTML input box */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-g9o5cpwn2k]::placeholder {
                color: rgba(0, 0, 0, 0.3); /* Matching CitadelInput placeholder color */
            }


/* Autocomplete Suggestions Styling */
.autocomplete-suggestions[b-g9o5cpwn2k] {
    /* position: absolute; top: calc(100% - 4px); left: ...; width: ...; are set via inline styles */
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: var(--input-border-radius);
}

    .autocomplete-suggestions li[b-g9o5cpwn2k] {
        padding: 8px 12px;
        cursor: pointer;
        font-size: var(--main-font-size);
        color: var(--input-font-color);
    }

        .autocomplete-suggestions li:hover[b-g9o5cpwn2k] {
            background-color: #f0f0f0;
        }

/* 
Validation Message styling for Telemetry Id, Site, and Is Test Device
(i.e., when <ValidationMessage /> is a direct child of .custom-input-layout-container)
This aims to replicate CitadelInput's error message appearance.
*/
.custom-input-layout-container > .validation-message[b-g9o5cpwn2k] {
    color: var(--bs-danger, #dc3545); /* CRITICAL: --bs-danger must be globally defined */
    font-size: 0.75rem;               /* Matches CitadelInput */
    margin-top: 4px;                  /* Matches CitadelInput */
    flex-basis: 100%;                 /* Forces it to take full width and wrap below */
    display: block;                   /* Ensures block behavior */

    /* Indentation: margin-left = width of label + right margin of label */
    /* The '180px' here MUST match the 'consistentLabelWidth' C# variable used for these labels. */
    /* The '20px' here MUST match the 'margin-right: 20px;' on the label. */
    /* Note: The C# variable consistentLabelWidth was 160px in the initial file, then changed to 150px.
       Using 150px as per the latest MainDevice.razor snippet. Adjust if necessary. */
    margin-left: calc(150px + 20px); 
}

.createButtonContainer[b-g9o5cpwn2k] {
    width: 100%;
    height:50px;
    display: flex;
    flex-direction:row;
    justify-content:center;
    justify-items:center;
    align-content:center;
    align-items:center;
    gap:100px;
}


/* Utility Classes (as provided by you) */
.mt-4[b-g9o5cpwn2k], .button-container.mt-4[b-g9o5cpwn2k] {
    margin-top: 1.5rem !important;
}

.mt-2[b-g9o5cpwn2k] {
    margin-top: 0.5rem !important;
}

.text-danger[b-g9o5cpwn2k] { /* For general error text like loadDataError */
    color: var(--bs-danger, #dc3545) !important;
}
/* /Components/MainTabs/Maintenances/Maintenance_Devices_Edit.razor.rz.scp.css */
/* Existing styles from Maintenance_Devices_Edit.razor.css */
.infobox[b-c4qpop7f9m] {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    gap: 30px;
}

.infoContainer[b-c4qpop7f9m] {
}

.labelBox[b-c4qpop7f9m] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.notesbox[b-c4qpop7f9m] {
    font-size: 14px;
}

.custom-input-layout-container[b-c4qpop7f9m] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
}

    .custom-input-layout-container > .citadel-input-container.label-left[b-c4qpop7f9m] {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 0;
    }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-label[b-c4qpop7f9m] {
            font-size: var(--main-font-size);
            color: var(--main-font-color);
            white-space: nowrap;
            margin-right: 20px;
            flex-shrink: 0;
        }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper[b-c4qpop7f9m] {
            display: flex;
            align-items: center;
            flex-grow: 1;
            position: relative;
        }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-c4qpop7f9m] {
                padding: var(--input-padding-vertical) var(--input-padding-horizontal);
                box-sizing: border-box;
                border: 1px solid var(--input-border-color);
                border-radius: var(--input-border-radius);
                font-size: var(--main-font-size);
                background-color: var(--inputSelect-background-color);
                color: var(--input-font-color);
                transition: all 0.2s ease;
                width: 100%;
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box.citadel-input-error[b-c4qpop7f9m] {
                border-color: var(--bs-danger, #dc3545) !important;
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:hover[b-c4qpop7f9m] {
                background-color: var(--input-background-color-hover);
                border-color: var(--input-border-color-hover);
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:focus[b-c4qpop7f9m] {
                outline: none;
                border-color: var(--input-border-color-hover);
                box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
                background-color: var(--input-background-color-hover);
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-c4qpop7f9m]::placeholder {
                color: rgba(0, 0, 0, 0.3);
            }

.autocomplete-suggestions[b-c4qpop7f9m] {
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: var(--input-border-radius);
}

    .autocomplete-suggestions li[b-c4qpop7f9m] {
        padding: 8px 12px;
        cursor: pointer;
        font-size: var(--main-font-size);
        color: var(--input-font-color);
    }

        .autocomplete-suggestions li:hover[b-c4qpop7f9m] {
            background-color: #f0f0f0;
        }

.custom-input-layout-container > .validation-message[b-c4qpop7f9m] {
    color: var(--bs-danger, #dc3545);
    font-size: 0.75rem;              
    margin-top: 4px;                 
    flex-basis: 100%;                
    display: block;                  
    margin-left: calc(150px + 20px); 
}

.createButtonContainer[b-c4qpop7f9m] {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    gap: 100px;
}

.mt-4[b-c4qpop7f9m], .button-container.mt-4[b-c4qpop7f9m] {
    margin-top: 1.5rem !important;
}

.mt-2[b-c4qpop7f9m] {
    margin-top: 0.5rem !important;
}

.text-danger[b-c4qpop7f9m] {
    color: var(--bs-danger, #dc3545) !important;
}

.sensorColumns[b-c4qpop7f9m] {
    display: flex;
    height: 100%;
    width: 100%;
}

.col-left[b-c4qpop7f9m] {
    width: 100%; /* Ensure this gives enough space for the table */
    height: 100%;
    display: flex; /* Added to make child .grid-data-table-container take full height */
    flex-direction: column; /* Added */
}

.col-middle[b-c4qpop7f9m] {
    background: blue;
    width: 0%;
    height: 100%;
}

.col-right[b-c4qpop7f9m] {
    background: yellow;
    width: 0%;
    height: 100%;
}

/* --- Styles COPIED from DataTable.razor.css --- */
/* We assume these are now scoped to Maintenance_Devices_Edit component */

.grid-data-table-container[b-c4qpop7f9m] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Toolbar and search-box styles are not strictly needed for the custom table
   as it's currently defined, but included for completeness if you adapt further.
   If your custom table is ONLY inside .col-left, these might need adjustment
   if they were intended to be at the top level of DataTable.
   For now, assuming .grid-data-table-container is directly within .col-left.
*/
.grid-data-table-toolbar[b-c4qpop7f9m] {
    padding: 0.5rem;
    padding-left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.search-box[b-c4qpop7f9m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 10px;
}

    .search-box label[b-c4qpop7f9m] {
        color: var(--main-font-color);
        font-size: var(--main-font-size);
    }

    .search-box input[b-c4qpop7f9m] {
        padding: var(--input-padding-vertical) var(--input-padding-horizontal);
        min-width: 180px;
        border: 1px solid var(--input-border-color);
        background-color: var(--input-background-color);
        border-radius: var(--input-border-radius);
        transition: all 0.2s ease;
        color: var(--input-font-color);
    }

.grid-data-table tbody tr.out-of-sync-row td[b-c4qpop7f9m] {
    background-color: #fdf2f2 !important; /* Very light red background */
}

/* Ensure hover still works but maintains the red tint */
.grid-data-table tbody tr.out-of-sync-row:hover td[b-c4qpop7f9m] {
    background-color: #fbe7e7 !important; /* Slightly darker red on hover */
}

/* Make sure editing highlight takes precedence */
.grid-data-table tbody tr.editing-row-highlight td[b-c4qpop7f9m] {
    background-color: #f0f8ff !important; /* Keep blue for editing */
}
/* /Components/MainTabs/Maintenances/Maintenance_Devices_Telemetry.razor.rz.scp.css */
.diagnostic-Container[b-o5d279787a] {
    width:96%;
    height:100%;
    padding-left:35px;
    padding-top:20px;
    padding-bottom:20px;
    display:flex;
    flex-direction:column;
    gap:20px;
}
/* /Components/MainTabs/Maintenances/Maintenance_Devices_UnitsOfMeasures.razor.rz.scp.css */
/* Maintenances - General Styles */

/* --- Search Bar Alignment --- */
.case-maintenance-centered-wrapper[b-3pp0flnj3w] {
    display: flex;
    align-items: center; /* Vertical centering */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    gap: 50px;
    margin-left: 20px;
    margin-right: 20px;
}

.case-maintenance-centered-input[b-3pp0flnj3w] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-maintenance-search-icon[b-3pp0flnj3w] {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* --- Button Group --- */
.button-group[b-3pp0flnj3w] {
    display: flex;
    gap: 10px;
    margin-left: auto;
    margin-right:10px;
}

/* --- Styles for Data Tables (General) --- */
.grid-data-table[b-3pp0flnj3w] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.grid-data-table th[b-3pp0flnj3w],
.grid-data-table td[b-3pp0flnj3w] {
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.grid-data-table th[b-3pp0flnj3w] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Dynamic column widths using CSS variables */
.grid-data-table th:nth-child(1)[b-3pp0flnj3w], .grid-data-table td:nth-child(1)[b-3pp0flnj3w] {
    width: var(--col-1-width, auto);
}

.grid-data-table th:nth-child(2)[b-3pp0flnj3w], .grid-data-table td:nth-child(2)[b-3pp0flnj3w] {
    width: var(--col-2-width, auto);
}

.grid-data-table th:nth-child(3)[b-3pp0flnj3w], .grid-data-table td:nth-child(3)[b-3pp0flnj3w] {
    width: var(--col-3-width, auto);
}

.grid-data-table th:nth-child(4)[b-3pp0flnj3w], .grid-data-table td:nth-child(4)[b-3pp0flnj3w] {
    width: var(--col-4-width, auto);
}

.grid-data-table th:nth-child(5)[b-3pp0flnj3w], .grid-data-table td:nth-child(5)[b-3pp0flnj3w] {
    width: var(--col-5-width, auto);
}

.grid-data-table th:nth-child(6)[b-3pp0flnj3w], .grid-data-table td:nth-child(6)[b-3pp0flnj3w] {
    width: var(--col-6-width, auto);
}

.grid-data-table th:nth-child(7)[b-3pp0flnj3w], .grid-data-table td:nth-child(7)[b-3pp0flnj3w] {
    width: var(--col-7-width, auto);
}

.grid-data-table th:nth-child(8)[b-3pp0flnj3w], .grid-data-table td:nth-child(8)[b-3pp0flnj3w] {
    width: var(--col-8-width, auto);
}

.grid-data-table th:nth-child(9)[b-3pp0flnj3w], .grid-data-table td:nth-child(9)[b-3pp0flnj3w] {
    width: var(--col-9-width, auto);
}

.grid-data-table th:nth-child(10)[b-3pp0flnj3w], .grid-data-table td:nth-child(10)[b-3pp0flnj3w] {
    width: var(--col-10-width, auto);
    text-align: center;
}

.grid-data-table th:nth-child(11)[b-3pp0flnj3w], .grid-data-table td:nth-child(11)[b-3pp0flnj3w] {
    width: var(--col-11-width, auto);
}

.grid-data-table th:nth-child(12)[b-3pp0flnj3w], .grid-data-table td:nth-child(12)[b-3pp0flnj3w] {
    width: var(--col-12-width, auto);
}

/* --- Style for Selected Row --- */
.selected-row td[b-3pp0flnj3w] {
    background-color: rgba(255,255,255,1);
    border-top: 1px solid rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Editing Row --- */
.editing-row-highlight td[b-3pp0flnj3w] {
    color: black !important;
    text-shadow: none !important;
}

/* --- Modal Styles --- */
.modal-overlay[b-3pp0flnj3w] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-3pp0flnj3w] {
    background: white;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
}

.modal-buttons[b-3pp0flnj3w] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Styles for the History Table --- */
.history-table[b-3pp0flnj3w] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    margin-top: 0;
}

.history-table th[b-3pp0flnj3w],
.history-table td[b-3pp0flnj3w] {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    vertical-align: middle;
}

.history-table th[b-3pp0flnj3w] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

.history-table th:nth-child(1)[b-3pp0flnj3w], .history-table td:nth-child(1)[b-3pp0flnj3w] {
    width: 10%;
}

.history-table th:nth-child(2)[b-3pp0flnj3w], .history-table td:nth-child(2)[b-3pp0flnj3w] {
    width: 10%;
}

.history-table th:nth-child(3)[b-3pp0flnj3w], .history-table td:nth-child(3)[b-3pp0flnj3w] {
    width: 20%;
}

.history-table th:nth-child(4)[b-3pp0flnj3w], .history-table td:nth-child(4)[b-3pp0flnj3w] {
    width: 60%;
}

/* Truncate long text in the Data column and show tooltip on hover */
.history-data-cell[b-3pp0flnj3w] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
/* /Components/MainTabs/Maintenances/Maintenance_Devices_View.razor.rz.scp.css */
/* Existing styles from Maintenance_Devices_Edit.razor.css */
.infobox[b-02qmgh9sq3] {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    gap: 30px;
}

.infoContainer[b-02qmgh9sq3] {
}

.labelBox[b-02qmgh9sq3] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.notesbox[b-02qmgh9sq3] {
    font-size: 14px;
}

.custom-input-layout-container[b-02qmgh9sq3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
}

    .custom-input-layout-container > .citadel-input-container.label-left[b-02qmgh9sq3] {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 0;
    }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-label[b-02qmgh9sq3] {
            font-size: var(--main-font-size);
            color: var(--main-font-color);
            white-space: nowrap;
            margin-right: 20px;
            flex-shrink: 0;
        }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper[b-02qmgh9sq3] {
            display: flex;
            align-items: center;
            flex-grow: 1;
            position: relative;
        }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-02qmgh9sq3] {
                padding: var(--input-padding-vertical) var(--input-padding-horizontal);
                box-sizing: border-box;
                border: 1px solid var(--input-border-color);
                border-radius: var(--input-border-radius);
                font-size: var(--main-font-size);
                background-color: var(--inputSelect-background-color);
                color: var(--input-font-color);
                transition: all 0.2s ease;
                width: 100%;
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box.citadel-input-error[b-02qmgh9sq3] {
                border-color: var(--bs-danger, #dc3545) !important;
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:hover[b-02qmgh9sq3] {
                background-color: var(--input-background-color-hover);
                border-color: var(--input-border-color-hover);
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:focus[b-02qmgh9sq3] {
                outline: none;
                border-color: var(--input-border-color-hover);
                box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
                background-color: var(--input-background-color-hover);
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-02qmgh9sq3]::placeholder {
                color: rgba(0, 0, 0, 0.3);
            }

.autocomplete-suggestions[b-02qmgh9sq3] {
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: var(--input-border-radius);
}

    .autocomplete-suggestions li[b-02qmgh9sq3] {
        padding: 8px 12px;
        cursor: pointer;
        font-size: var(--main-font-size);
        color: var(--input-font-color);
    }

        .autocomplete-suggestions li:hover[b-02qmgh9sq3] {
            background-color: #f0f0f0;
        }

.custom-input-layout-container > .validation-message[b-02qmgh9sq3] {
    color: var(--bs-danger, #dc3545);
    font-size: 0.75rem;              
    margin-top: 4px;                 
    flex-basis: 100%;                
    display: block;                  
    margin-left: calc(150px + 20px); 
}

.createButtonContainer[b-02qmgh9sq3] {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    gap: 100px;
}

.mt-4[b-02qmgh9sq3], .button-container.mt-4[b-02qmgh9sq3] {
    margin-top: 1.5rem !important;
}

.mt-2[b-02qmgh9sq3] {
    margin-top: 0.5rem !important;
}

.text-danger[b-02qmgh9sq3] {
    color: var(--bs-danger, #dc3545) !important;
}

.sensorColumns[b-02qmgh9sq3] {
    display: flex;
    height: 100%;
    width: 100%;
}

.col-left[b-02qmgh9sq3] {
    width: 100%; /* Ensure this gives enough space for the table */
    height: 100%;
    display: flex; /* Added to make child .grid-data-table-container take full height */
    flex-direction: column; /* Added */
}

.col-middle[b-02qmgh9sq3] {
    background: blue;
    width: 0%;
    height: 100%;
}

.col-right[b-02qmgh9sq3] {
    background: yellow;
    width: 0%;
    height: 100%;
}

/* --- Styles COPIED from DataTable.razor.css --- */
/* We assume these are now scoped to Maintenance_Devices_Edit component */

.grid-data-table-container[b-02qmgh9sq3] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Toolbar and search-box styles are not strictly needed for the custom table
   as it's currently defined, but included for completeness if you adapt further.
   If your custom table is ONLY inside .col-left, these might need adjustment
   if they were intended to be at the top level of DataTable.
   For now, assuming .grid-data-table-container is directly within .col-left.
*/
.grid-data-table-toolbar[b-02qmgh9sq3] {
    padding: 0.5rem;
    padding-left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.search-box[b-02qmgh9sq3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 10px;
}

    .search-box label[b-02qmgh9sq3] {
        color: var(--main-font-color);
        font-size: var(--main-font-size);
    }

    .search-box input[b-02qmgh9sq3] {
        padding: var(--input-padding-vertical) var(--input-padding-horizontal);
        min-width: 180px;
        border: 1px solid var(--input-border-color);
        background-color: var(--input-background-color);
        border-radius: var(--input-border-radius);
        transition: all 0.2s ease;
        color: var(--input-font-color);
    }

.grid-data-table tbody tr.out-of-sync-row td[b-02qmgh9sq3] {
    background-color: #fdf2f2 !important; /* Very light red background */
}

/* Ensure hover still works but maintains the red tint */
.grid-data-table tbody tr.out-of-sync-row:hover td[b-02qmgh9sq3] {
    background-color: #fbe7e7 !important; /* Slightly darker red on hover */
}

/* Make sure editing highlight takes precedence */
.grid-data-table tbody tr.editing-row-highlight td[b-02qmgh9sq3] {
    background-color: #f0f8ff !important; /* Keep blue for editing */
}
/* /Components/MainTabs/Maintenances/Maintenance_MassSensorUpdate.razor.rz.scp.css */
.mass-sensor-update-container[b-m4xazccf1r] {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.update-header[b-m4xazccf1r] {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 8px;
}

.update-header h2[b-m4xazccf1r] {
    margin: 0;
    font-size: 2rem;
}

.header-subtitle[b-m4xazccf1r] {
    margin: 10px 0 0 0;
    opacity: 0.9;
    font-size: 1.1rem;
}

/* Config Sections */
.config-section[b-m4xazccf1r] {
    background: var(--griditem-content-backgroundgradient-color-left);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px var(--griditem-boxshadow-color);
}

.section-title[b-m4xazccf1r] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: var(--main-font-color);
}

.step-number[b-m4xazccf1r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.1rem;
}

/* Sensor Type Selector */
.sensor-type-selector[b-m4xazccf1r] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.input-label[b-m4xazccf1r] {
    font-weight: 600;
    min-width: 120px;
    color: var(--main-font-color);
}

.sensor-type-selector select[b-m4xazccf1r] {
    flex: 1;
    max-width: 400px;
}

.defaults-info[b-m4xazccf1r] {
    margin-top: 10px;
}

/* Values Grid */
.values-grid[b-m4xazccf1r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.value-item[b-m4xazccf1r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.value-label[b-m4xazccf1r] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--main-font-color);
    cursor: pointer;
}

.value-label input[type="checkbox"][b-m4xazccf1r] {
    cursor: pointer;
}

.current-value[b-m4xazccf1r] {
    font-size: 0.85rem;
    color: var(--secondary-font-color);
    font-style: italic;
}

.checkbox-item .checkbox-wrapper[b-m4xazccf1r] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Filters Grid */
.filters-grid[b-m4xazccf1r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.filter-item[b-m4xazccf1r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-item label[b-m4xazccf1r] {
    font-weight: 600;
    color: var(--main-font-color);
}

.filter-hint[b-m4xazccf1r] {
    font-size: 0.85rem;
    color: var(--secondary-font-color);
    font-style: italic;
}

/* Device Update Options */
.device-update-options[b-m4xazccf1r] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.option-item[b-m4xazccf1r] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.option-label[b-m4xazccf1r] {
    margin: 0;
    cursor: pointer;
}

.delay-option[b-m4xazccf1r] {
    flex-direction: column;
    padding-left: 30px;
}

.delay-input[b-m4xazccf1r] {
    max-width: 150px;
}

.delay-hint[b-m4xazccf1r] {
    font-size: 0.85rem;
    color: var(--secondary-font-color);
}

/* Action Section */
.action-section[b-m4xazccf1r] {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

/* Preview Section */
.preview-section[b-m4xazccf1r] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    border: 2px solid #dee2e6;
}

.preview-table-wrapper[b-m4xazccf1r] {
    overflow-x: auto;
    margin-top: 15px;
}

.preview-table[b-m4xazccf1r] {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.preview-table th[b-m4xazccf1r],
.preview-table td[b-m4xazccf1r] {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
}

.preview-table th[b-m4xazccf1r] {
    background: #e9ecef;
    font-weight: 600;
    color: #495057;
}

.values-cell[b-m4xazccf1r] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.value-badge[b-m4xazccf1r] {
    display: inline-block;
    padding: 4px 8px;
    background: #e3f2fd;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #1976d2;
}

.preview-more[b-m4xazccf1r] {
    text-align: center;
    padding: 15px;
    font-style: italic;
    color: #6c757d;
}

/* Progress Section */
.progress-section[b-m4xazccf1r] {
    background: #fff3cd;
    border-radius: 8px;
    padding: 20px;
    border: 2px solid #ffc107;
}

.progress-stats[b-m4xazccf1r] {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
}

.stat-item[b-m4xazccf1r] {
    text-align: center;
}

.stat-label[b-m4xazccf1r] {
    display: block;
    font-weight: 600;
    color: #856404;
    margin-bottom: 5px;
}

.stat-value[b-m4xazccf1r] {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
}

.stat-value.success[b-m4xazccf1r] {
    color: #28a745;
}

.progress-bar-container[b-m4xazccf1r] {
    width: 100%;
    height: 30px;
    background: #e9ecef;
    border-radius: 15px;
    overflow: hidden;
    margin: 20px 0;
}

.progress-bar[b-m4xazccf1r] {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #20c997);
    transition: width 0.5s ease;
}

.progress-percentage[b-m4xazccf1r] {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #856404;
}

/* Results Section */
.results-section[b-m4xazccf1r] {
    border-radius: 8px;
    padding: 20px;
    border: 2px solid;
}

.results-section.success[b-m4xazccf1r] {
    background: #d4edda;
    border-color: #28a745;
}

.results-section.error[b-m4xazccf1r] {
    background: #f8d7da;
    border-color: #dc3545;
}

.result-message[b-m4xazccf1r] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.results-grid[b-m4xazccf1r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.result-card[b-m4xazccf1r] {
    background: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.result-card h4[b-m4xazccf1r] {
    margin: 0 0 10px 0;
    color: #495057;
}

.result-stats[b-m4xazccf1r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat[b-m4xazccf1r] {
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: 600;
}

.stat.success[b-m4xazccf1r] {
    background: #d4edda;
    color: #155724;
}

.stat.warning[b-m4xazccf1r] {
    background: #fff3cd;
    color: #856404;
}

.stat.error[b-m4xazccf1r] {
    background: #f8d7da;
    color: #721c24;
}

/* Failures Section */
.failures-section[b-m4xazccf1r] {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.failures-title[b-m4xazccf1r] {
    margin: 0 0 10px 0;
    color: #dc3545;
}

.failures-list[b-m4xazccf1r] {
    margin: 0;
    padding-left: 20px;
}

.failures-list li[b-m4xazccf1r] {
    margin-bottom: 8px;
}

.more-failures[b-m4xazccf1r] {
    font-style: italic;
    color: #6c757d;
    margin: 10px 0 0 0;
}

/* Duration Info */
.duration-info[b-m4xazccf1r] {
    text-align: center;
    padding: 15px;
    font-size: 1.1rem;
    color: #495057;
}

/* Badges */
.badge[b-m4xazccf1r] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 600;
}

.badge-info[b-m4xazccf1r] {
    background: #d1ecf1;
    color: #0c5460;
}

.badge-success[b-m4xazccf1r] {
    background: #d4edda;
    color: #155724;
}

.badge-warning[b-m4xazccf1r] {
    background: #fff3cd;
    color: #856404;
}

.auto-refresh-section[b-m4xazccf1r] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.refresh-status[b-m4xazccf1r] {
    flex: 1;
    color: white;
}

.status-header[b-m4xazccf1r] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.status-header i[b-m4xazccf1r] {
    font-size: 1.5rem;
}

.status-text[b-m4xazccf1r] {
    font-size: 1.2rem;
    font-weight: 600;
}

.refresh-info[b-m4xazccf1r] {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.info-item[b-m4xazccf1r] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label[b-m4xazccf1r] {
    font-size: 0.85rem;
    opacity: 0.9;
}

.info-value[b-m4xazccf1r] {
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.info-value.refreshing[b-m4xazccf1r] {
    color: #ffd700;
    animation: pulse-b-m4xazccf1r 1.5s ease-in-out infinite;
}

.info-value.waiting[b-m4xazccf1r] {
    color: #90ee90;
}

@keyframes pulse-b-m4xazccf1r {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
/* /Components/MainTabs/Maintenances/Maintenance_NotificationTemplate.razor.rz.scp.css */
.notification-template-container[b-29of0gsozy] {
    width: 100%;
    height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.infobox[b-29of0gsozy] {
    display: flex;
    height: 40px;
    width: 98%;
    margin: auto;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    gap: 20px;
    flex-shrink: 0;
}

.form-group[b-29of0gsozy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.form-label[b-29of0gsozy] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color, #333);
    margin-bottom: 2px;
}

.action-buttons[b-29of0gsozy] {
    display: flex;
    width: 200px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    gap: 5px;
}

.template-content[b-29of0gsozy] {
    width: 97%;
    height: 100%;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex: 1;
}

.template-field[b-29of0gsozy] {
    margin-bottom: 20px;
}

.template-label[b-29of0gsozy] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color, #333);
    margin-bottom: 8px;
}

.template-textarea[b-29of0gsozy] {
    width: 98%;
    min-height: 200px;
    padding: 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    background: var(--input-background, #fff);
    color: var(--text-color, #333);
}

.template-textarea:focus[b-29of0gsozy] {
    outline: none;
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.template-textarea:disabled[b-29of0gsozy],
.template-textarea[readonly][b-29of0gsozy] {
    background-color: var(--disabled-background, #f8f9fa);
    color: var(--disabled-text, #6c757d);
    cursor: not-allowed;
}

.variables-help[b-29of0gsozy] {
    margin-top: 20px;
    padding: 15px;
    background: var(--info-background, #f8f9fa);
    border-radius: 4px;
    border-left: 4px solid var(--info-color, #17a2b8);
}

.variables-help h4[b-29of0gsozy] {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: var(--text-color, #333);
}

.variables-grid[b-29of0gsozy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px;
}

.variable-item[b-29of0gsozy] {
    font-size: 13px;
    color: var(--text-color, #333);
}

.variable-item code[b-29of0gsozy] {
    background: var(--code-background, #e9ecef);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--code-color, #d63384);
    font-weight: 600;
}

.preview-section[b-29of0gsozy] {
    margin-top: 30px;
    padding: 20px;
    background: var(--preview-background, #f8f9fa);
    border-radius: 4px;
    border: 1px solid var(--border-color, #ddd);
}

.preview-section h4[b-29of0gsozy] {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: var(--text-color, #333);
}

.preview-content[b-29of0gsozy] {
    background: var(--preview-content-background, #fff);
    border-radius: 4px;
    padding: 15px;
    border: 1px solid var(--border-color, #ddd);
}

.preview-label[b-29of0gsozy] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #6c757d);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sms-preview .sms-message[b-29of0gsozy] {
    background: var(--sms-background, #e3f2fd);
    padding: 10px;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid var(--sms-border, #bbdefb);
}

.char-count[b-29of0gsozy] {
    margin-top: 5px;
    font-size: 11px;
    color: var(--text-muted, #6c757d);
    text-align: right;
}

.email-preview .email-subject[b-29of0gsozy] {
    margin-bottom: 10px;
    font-size: 14px;
}

.email-preview .email-message[b-29of0gsozy] {
    background: var(--email-background, #f8f9fa);
    padding: 15px;
    border-radius: 4px;
    border: 1px solid var(--border-color, #ddd);
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.webpush-preview .webpush-title[b-29of0gsozy] {
    margin-bottom: 10px;
    font-size: 14px;
}

.webpush-preview .webpush-message[b-29of0gsozy] {
    background: var(--webpush-background, #fff3cd);
    padding: 12px;
    border-radius: 4px;
    border: 1px solid var(--webpush-border, #ffeaa7);
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.error-message[b-29of0gsozy] {
    color: var(--error-color, #ff6b6b);
    font-weight: 500;
    text-align: center;
    padding: 20px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 4px;
    margin: 20px;
}
/* /Components/MainTabs/Maintenances/Maintenance_NotificationTemplates.razor.rz.scp.css */
.notification-templates-container[b-8u716k8v1a] {
    width: 100%;
    height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.notification-templates-table[b-8u716k8v1a] {
    height: 100%;
}

.toolbar-actions[b-8u716k8v1a] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.row-actions[b-8u716k8v1a] {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.error-message[b-8u716k8v1a] {
    color: var(--error-color, #ff6b6b);
    font-weight: 500;
    text-align: center;
    padding: 20px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 4px;
    margin: 20px;
}
/* /Components/MainTabs/Maintenances/Maintenance_Organization.razor.rz.scp.css */
.device-container[b-prvthhrrdc] {
    width: 100%;
    height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.infobox[b-prvthhrrdc] {
    display: flex;
    height: 70px; /* Fixed height to prevent expansion */
    width: 98%;
    margin: auto;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    gap: 20px;
    flex-shrink: 0;
    position: relative; /* Important for suggestions positioning */
    z-index: 100; /* High z-index for the entire infobox */
}

.action-buttons[b-prvthhrrdc] {
    display: flex;
    width: 280px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    gap: 5px;
}

/* Tabs - Lower z-index to ensure suggestions appear above */
.tabs-container[b-prvthhrrdc] {
    width: 97%;
    height: 100%;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex: 1;
    position: relative;
    z-index: 1; /* Very low z-index */
}

.tab-bar[b-prvthhrrdc] {
    display: flex;
    width: 100%;
    margin-top: 5px;
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: 20px;
    min-height: 30px;
    flex-shrink: 0;
    position: relative;
    z-index: 1; /* Ensure tabs don't interfere */
}

.tab[b-prvthhrrdc] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    user-select: none;
    border-right: 2px solid rgba(0,0,0,0.5);
    position: relative;
    z-index: 1;
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.9);
    font-family: Roboto;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(0,0,0,0.5);
}

.tab:last-child[b-prvthhrrdc] {
    border-right: none;
}

.tab.active[b-prvthhrrdc] {
    background: transparent;
    color: rgba(0,0,0,0.9);
    z-index: 2;
    border-top: 1px solid rgba(0,0,0,0.5);
    border-bottom: none;
}

.tab:not(.active):hover[b-prvthhrrdc] {
    color: rgba(0,0,0,0.9);
}

.tab-content[b-prvthhrrdc] {
    flex: 1;
    width: 100%;
    margin-top: 10px;
    background: transparent !important;
    overflow: auto;
    min-height: 0;
    position: relative;
    z-index: 1; /* Low z-index */
}

.tab-pane[b-prvthhrrdc] {
    display: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tab-pane.active[b-prvthhrrdc] {
    display: block;
    opacity: 1;
    animation: fadeIn-b-prvthhrrdc 0.25s ease-out forwards;
}

@keyframes fadeIn-b-prvthhrrdc {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.itemContainer[b-prvthhrrdc] {
    margin: auto;
    width: 98%;
    height: 100%;
    margin-bottom: 50px;
}

.includeBackground[b-prvthhrrdc] {
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle), 
        var(--griditem-content-backgroundgradient-color-left),
        var(--griditem-content-backgroundgradient-color-right));
    box-shadow: 5px 5px 10px var(--griditem-boxshadow-color);
}

/* Additional fix for GridItem if it has z-index issues */
[b-prvthhrrdc] .grid-item {
    z-index: auto !important;
    position: relative !important;
}

.diagnostic-Container[b-prvthhrrdc] {
    width:96%;
    height:100%;
    padding-left:35px;
    padding-top:20px;
    padding-bottom:20px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.error-message[b-prvthhrrdc] {
    color: var(--bs-danger, #dc3545);
    font-weight: bold;
    text-align: center;
    margin: 20px;
}
/* /Components/MainTabs/Maintenances/Maintenance_Organizations.razor.rz.scp.css */
body[b-cycntt7lz0] {
}
/* /Components/MainTabs/Maintenances/Maintenance_Organizations_Create.razor.rz.scp.css */
.form-columns[b-r47gkisg98] {
    display: flex;
    gap: 50px;
    padding: 20px;
}

.form-column[b-r47gkisg98] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.custom-input-layout-container[b-r47gkisg98] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* Changed to flex-start as per original file state */
    position: relative;
}

    .custom-input-layout-container > .citadel-input-container.label-left[b-r47gkisg98] {
        display: flex;
        align-items: center;
        width: 100%; /* Ensures it takes full width so validation message wraps below */
        margin-bottom: 0; /* Reset margin if any, rely on parent's gap or validation message's margin-top */
    }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-label[b-r47gkisg98] {
            /* width is set by inline style (e.g., @consistentLabelWidth) */
            /* Global CSS variables should provide: font-size, color */
            /* CSS variables used by CitadelInput: --main-font-size, --main-font-color */
            font-size: var(--main-font-size);
            color: var(--main-font-color);
            white-space: nowrap;
            margin-right: 20px; /* Space between label and input-wrapper */
            flex-shrink: 0;
        }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper[b-r47gkisg98] {
            display: flex;
            align-items: center; /* For checkbox vertical alignment */
            flex-grow: 1;
            position: relative; /* If any child elements inside wrapper need absolute positioning */
        }

            /* Styling for the actual <input type="text" class="citadel-input-box"> */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-r47gkisg98] {
                /* width is set by inline style (e.g., @consistentInputWidth) */
                /* Global CSS variables should provide: padding, border, border-radius, font-size, background-color, color */
                /* CSS variables used by CitadelInput: 
                    --input-padding-vertical, --input-padding-horizontal, 
                    --input-border-color, --input-border-radius, 
                    --main-font-size, --inputSelect-background-color, --input-font-color
                */
                padding: var(--input-padding-vertical) var(--input-padding-horizontal);
                box-sizing: border-box;
                border: 1px solid var(--input-border-color);
                border-radius: var(--input-border-radius);
                font-size: var(--main-font-size);
                background-color: var(--inputSelect-background-color);
                color: var(--input-font-color);
                transition: all 0.2s ease;
                width: 100%; /* Will be overridden by inline style if @consistentInputWidth is applied */
            }

            /* Red border for the input box on error */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box.citadel-input-error[b-r47gkisg98] {
                border-color: var(--bs-danger, #dc3545) !important;
            }

            /* Hover effects for the custom HTML input box */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:hover[b-r47gkisg98] {
                background-color: var(--input-background-color-hover);
                border-color: var(--input-border-color-hover);
            }

            /* Focus effects for the custom HTML input box */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:focus[b-r47gkisg98] {
                outline: none;
                border-color: var(--input-border-color-hover); /* This will be overridden by .citadel-input-error's !important if error class is present */
                box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
                background-color: var(--input-background-color-hover);
            }

            /* Placeholder styling for custom HTML input box */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-r47gkisg98]::placeholder {
                color: rgba(0, 0, 0, 0.3); /* Matching CitadelInput placeholder color */
            }


/* Autocomplete Suggestions Styling */
.autocomplete-suggestions[b-r47gkisg98] {
    /* position: absolute; top: calc(100% - 4px); left: ...; width: ...; are set via inline styles */
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: var(--input-border-radius);
}

    .autocomplete-suggestions li[b-r47gkisg98] {
        padding: 8px 12px;
        cursor: pointer;
        font-size: var(--main-font-size);
        color: var(--input-font-color);
    }

        .autocomplete-suggestions li:hover[b-r47gkisg98] {
            background-color: #f0f0f0;
        }

/* 
Validation Message styling for Telemetry Id, Site, and Is Test Device
(i.e., when <ValidationMessage /> is a direct child of .custom-input-layout-container)
This aims to replicate CitadelInput's error message appearance.
*/
.custom-input-layout-container > .validation-message[b-r47gkisg98] {
    color: var(--bs-danger, #dc3545); /* CRITICAL: --bs-danger must be globally defined */
    font-size: 0.75rem;               /* Matches CitadelInput */
    margin-top: 4px;                  /* Matches CitadelInput */
    flex-basis: 100%;                 /* Forces it to take full width and wrap below */
    display: block;                   /* Ensures block behavior */

    /* Indentation: margin-left = width of label + right margin of label */
    /* The '180px' here MUST match the 'consistentLabelWidth' C# variable used for these labels. */
    /* The '20px' here MUST match the 'margin-right: 20px;' on the label. */
    /* Note: The C# variable consistentLabelWidth was 160px in the initial file, then changed to 150px.
       Using 150px as per the latest MainDevice.razor snippet. Adjust if necessary. */
    margin-left: calc(150px + 20px); 
}

.createButtonContainer[b-r47gkisg98] {
    width: 100%;
    height:50px;
    display: flex;
    flex-direction:row;
    justify-content:center;
    justify-items:center;
    align-content:center;
    align-items:center;
    gap:100px;
}


/* Utility Classes (as provided by you) */
.mt-4[b-r47gkisg98], .button-container.mt-4[b-r47gkisg98] {
    margin-top: 1.5rem !important;
}

.mt-2[b-r47gkisg98] {
    margin-top: 0.5rem !important;
}

.text-danger[b-r47gkisg98] { /* For general error text like loadDataError */
    color: var(--bs-danger, #dc3545) !important;
}
/* /Components/MainTabs/Maintenances/Maintenance_Site.razor.rz.scp.css */
.device-container[b-m6sjou8icm] {
    width: 100%;
    height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.infobox[b-m6sjou8icm] {
    display: flex;
    height: 70px; /* Fixed height to prevent expansion */
    width: 98%;
    margin: auto;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    gap: 20px;
    flex-shrink: 0;
    position: relative; /* Important for suggestions positioning */
    z-index: 100; /* High z-index for the entire infobox */
}

.action-buttons[b-m6sjou8icm] {
    display: flex;
    width: 280px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    gap: 5px;
}

/* Organization Autofill Styling */
.custom-input-layout-container[b-m6sjou8icm] {
    display: inline-block; /* Change to inline-block */
    position: relative;
    margin-right: 10px;
    /* Remove overflow settings that might interfere */
}

    .custom-input-layout-container > .citadel-input-container.label-left[b-m6sjou8icm] {
        display: flex;
        align-items: center;
        margin-bottom: 0;
        position: relative;
    }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-label[b-m6sjou8icm] {
            font-size: var(--main-font-size);
            color: var(--main-font-color);
            white-space: nowrap;
            margin-right: 20px;
            flex-shrink: 0;
        }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper[b-m6sjou8icm] {
            display: flex;
            align-items: center;
            position: relative;
        }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-m6sjou8icm] {
                padding: var(--input-padding-vertical) var(--input-padding-horizontal);
                box-sizing: border-box;
                border: 1px solid var(--input-border-color);
                border-radius: var(--input-border-radius);
                font-size: var(--main-font-size);
                background-color: var(--inputSelect-background-color);
                color: var(--input-font-color);
                transition: all 0.2s ease;
                width: 100%;
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box.citadel-input-error[b-m6sjou8icm] {
                border-color: var(--bs-danger, #dc3545) !important;
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:hover[b-m6sjou8icm] {
                background-color: var(--input-background-color-hover);
                border-color: var(--input-border-color-hover);
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:focus[b-m6sjou8icm] {
                outline: none;
                border-color: var(--input-border-color-hover);
                box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
                background-color: var(--input-background-color-hover);
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-m6sjou8icm]::placeholder {
                color: rgba(0, 0, 0, 0.3);
            }

/* Autocomplete Suggestions - Override inline styles with !important */
.autocomplete-suggestions[b-m6sjou8icm] {
    position: fixed !important; /* Use fixed positioning to escape all containers */
    background-color: white !important;
    border: 1px solid #ccc !important;
    border-top: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 99999 !important; /* Extremely high z-index */
    max-height: 200px !important;
    overflow-y: auto !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; /* Strong shadow */
    border-radius: var(--input-border-radius) !important;
    min-width: 200px !important;
    /* Position will be calculated via JavaScript/Blazor, but we ensure it's not overridden */
    top: auto !important;
    left: auto !important;
    width: 200px !important; /* Fixed width instead of variable */
}

    .autocomplete-suggestions li[b-m6sjou8icm] {
        padding: 8px 12px !important;
        cursor: pointer !important;
        font-size: var(--main-font-size) !important;
        color: var(--input-font-color) !important;
        background-color: white !important;
        border-bottom: 1px solid #f0f0f0 !important;
        display: block !important;
    }

        .autocomplete-suggestions li:hover[b-m6sjou8icm] {
            background-color: #f0f0f0 !important;
        }

        .autocomplete-suggestions li:last-child[b-m6sjou8icm] {
            border-bottom: none !important;
        }

/* Validation Message styling */
.custom-input-layout-container > .validation-message[b-m6sjou8icm] {
    color: var(--bs-danger, #dc3545);
    font-size: 0.75rem;
    margin-top: 4px;
    flex-basis: 100%;
    display: block;
    margin-left: calc(80px + 20px);
}

/* Tabs - Lower z-index to ensure suggestions appear above */
.tabs-container[b-m6sjou8icm] {
    width: 97%;
    height: 100%;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex: 1;
    position: relative;
    z-index: 1; /* Very low z-index */
}

.tab-bar[b-m6sjou8icm] {
    display: flex;
    width: 100%;
    margin-top: 5px;
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: 20px;
    min-height: 30px;
    flex-shrink: 0;
    position: relative;
    z-index: 1; /* Ensure tabs don't interfere */
}

.tab[b-m6sjou8icm] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    user-select: none;
    border-right: 2px solid rgba(0,0,0,0.5);
    position: relative;
    z-index: 1;
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.9);
    font-family: Roboto;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(0,0,0,0.5);
}

.tab:last-child[b-m6sjou8icm] {
    border-right: none;
}

.tab.active[b-m6sjou8icm] {
    background: transparent;
    color: rgba(0,0,0,0.9);
    z-index: 2;
    border-top: 1px solid rgba(0,0,0,0.5);
    border-bottom: none;
}

.tab:not(.active):hover[b-m6sjou8icm] {
    color: rgba(0,0,0,0.9);
}

.tab-content[b-m6sjou8icm] {
    flex: 1;
    width: 100%;
    margin-top: 20px;
    background: transparent !important;
    overflow: auto;
    min-height: 0;
    position: relative;
    z-index: 1; /* Low z-index */
}

.tab-pane[b-m6sjou8icm] {
    display: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tab-pane.active[b-m6sjou8icm] {
    display: block;
    opacity: 1;
    animation: fadeIn-b-m6sjou8icm 0.25s ease-out forwards;
}

@keyframes fadeIn-b-m6sjou8icm {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.itemContainer[b-m6sjou8icm] {
    margin: auto;
    width: 98%;
    height: 100%;
    margin-bottom: 50px;
}

.includeBackground[b-m6sjou8icm] {
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle), 
        var(--griditem-content-backgroundgradient-color-left),
        var(--griditem-content-backgroundgradient-color-right));
    box-shadow: 5px 5px 10px var(--griditem-boxshadow-color);
}

/* Additional fix for GridItem if it has z-index issues */
[b-m6sjou8icm] .grid-item {
    z-index: auto !important;
    position: relative !important;
}

.diagnostic-Container[b-m6sjou8icm] {
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    margin:auto;
}
/* /Components/MainTabs/Maintenances/Maintenance_Sites.razor.rz.scp.css */
/* Maintenances - General Styles */

/* --- Search Bar Alignment --- */
.case-maintenance-centered-wrapper[b-4sslubaprk] {
    display: flex;
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.case-maintenance-centered-input[b-4sslubaprk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-maintenance-search-icon[b-4sslubaprk] {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* --- Container Structure Styles --- */
.sites-container[b-4sslubaprk] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* --- Top Bar (Title + Buttons) Alignment --- */
.sites-top-div[b-4sslubaprk] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height, 35px);
    min-height: 30px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    flex-shrink: 0;
}

.button-group[b-4sslubaprk] {
    display: flex;
    gap: 10px;
}

/* --- Bottom Div (Table Area) --- */
.sites-bottom-div[b-4sslubaprk] {
    flex-grow: 1;
    width: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
}

/* --- Error Message Style --- */
.error-message[b-4sslubaprk] {
    color: #721c24; /* Dark red text */
    background-color: #f8d7da; /* Light red background */
    border: 1px solid #f5c6cb; /* Reddish border */
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-size: 0.9em;
}


/* --- Styles for the unitofmeasure Table --- */
.unitofmeasure-table[b-4sslubaprk] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

    .unitofmeasure-table th[b-4sslubaprk],
    .unitofmeasure-table td[b-4sslubaprk] {
        border: 1px solid #ccc;
        padding: 8px 12px;
        text-align: left;
        word-wrap: break-word;
        vertical-align: middle;
    }

    .unitofmeasure-table th[b-4sslubaprk] {
        background-color: #f2f2f2;
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .unitofmeasure-table th:nth-child(1)[b-4sslubaprk], .unitofmeasure-table td:nth-child(1)[b-4sslubaprk] {
            width: 25%;
        }

        .unitofmeasure-table th:nth-child(2)[b-4sslubaprk], .unitofmeasure-table td:nth-child(2)[b-4sslubaprk] {
            width: 60%;
        }

        .unitofmeasure-table th:nth-child(3)[b-4sslubaprk], .unitofmeasure-table td:nth-child(3)[b-4sslubaprk] {
            width: 10%;
            text-align: center;
        }

        .unitofmeasure-table th:nth-child(4)[b-4sslubaprk], .unitofmeasure-table td:nth-child(4)[b-4sslubaprk] {
            width: 5%;
            text-align: center;
        }

/* Truncate long text in the Description column and show tooltip on hover */
.unitofmeasure-description-cell[b-4sslubaprk] {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    vertical-align: middle;
}

/* --- Text Contrast for Color Cells (Display Mode Only) --- */
.unitofmeasure-table td:nth-child(3)[style*="background-color"][b-4sslubaprk] {
    color: white;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.unitofmeasure-table td:nth-child(3)[style*="background-color:Orange"][b-4sslubaprk],
.unitofmeasure-table td:nth-child(3)[style*="background-color:Yellow"][b-4sslubaprk],
.unitofmeasure-table td:nth-child(3)[style*="background-color:LightGreen"][b-4sslubaprk],
.unitofmeasure-table td:nth-child(3)[style*="background-color:transparent"][b-4sslubaprk],
.unitofmeasure-table td:nth-child(3)[style*="background-color:#FFFFFF"][b-4sslubaprk] {
    color: black;
    text-shadow: none;
}

/* --- Styles for Inline Editing --- */
.edit-input[b-4sslubaprk] {
    width: 95%;
    padding: 4px;
    margin: -4px -6px;
    box-sizing: border-box;
    border: 1px solid #007bff;
    font-size: inherit;
    vertical-align: middle;
    background-color: white;
    color: black;
}

    .edit-input[type="color"][b-4sslubaprk] {
        width: 50px;
        height: 25px;
        padding: 1px;
        vertical-align: middle;
        cursor: pointer;
    }

.edit-button[b-4sslubaprk] {
    padding: 3px 6px;
    margin: 0 2px;
    cursor: pointer;
    font-size: 0.85em;
    border: 1px solid;
    border-radius: 3px;
    vertical-align: middle;
}

    .edit-button.save[b-4sslubaprk] {
        background-color: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
    }

        .edit-button.save:hover[b-4sslubaprk] {
            background-color: #c3e6cb;
        }

    .edit-button.cancel[b-4sslubaprk] {
        background-color: #f8d7da;
        border-color: #f5c6cb;
        color: #721c24;
    }

        .edit-button.cancel:hover[b-4sslubaprk] {
            background-color: #f5c6cb;
        }

/* --- Style for Selected Row (Lowest priority override) --- */
.selected-row td[b-4sslubaprk] {
    background-color: #cfe2ff !important;
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Editing Row (Medium priority override) --- */
.editing-row td[b-4sslubaprk] {
    background-color: #e7f3ff !important;
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Add New Row (Highest priority override) --- */
.add-new-row td[b-4sslubaprk] {
    background-color: #f0fff0 !important;
    color: black !important;
    text-shadow: none !important;
}

    /* Color cell takes the row highlight color, not its data color, when selected/editing/adding */
    .selected-row td:nth-child(3)[b-4sslubaprk],
    .editing-row td:nth-child(3)[b-4sslubaprk],
    .add-new-row td:nth-child(3)[b-4sslubaprk] {
        /* The !important on the row styles handles this */
    }

.selected-row input.edit-input[b-4sslubaprk],
.editing-row input.edit-input[b-4sslubaprk],
.add-new-row input.edit-input[b-4sslubaprk] {
    background-color: white;
    color: black;
}

/* --- Other Styles --- */
.case-maintenance-button-container[b-4sslubaprk] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 1px;
}

.modal-overlay[b-4sslubaprk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-4sslubaprk] {
    background: white;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.2);
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
}

.modal-buttons[b-4sslubaprk] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Styles for the History Table --- */
.history-table[b-4sslubaprk] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    margin-top: 0;
}

    .history-table th[b-4sslubaprk],
    .history-table td[b-4sslubaprk] {
        border: 1px solid #ccc;
        padding: 8px 12px;
        text-align: left;
        word-wrap: break-word;
        vertical-align: middle;
    }

    .history-table th[b-4sslubaprk] {
        background-color: #f2f2f2;
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .history-table th:nth-child(1)[b-4sslubaprk], .history-table td:nth-child(1)[b-4sslubaprk] {
            width: 10%;
        }

        .history-table th:nth-child(2)[b-4sslubaprk], .history-table td:nth-child(2)[b-4sslubaprk] {
            width: 10%;
        }

        .history-table th:nth-child(3)[b-4sslubaprk], .history-table td:nth-child(3)[b-4sslubaprk] {
            width: 20%;
        }

        .history-table th:nth-child(4)[b-4sslubaprk], .history-table td:nth-child(4)[b-4sslubaprk] {
            width: 60%;
        }

/* Truncate long text in the Data column and show tooltip on hover */
.history-data-cell[b-4sslubaprk] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* Style for validation error messages */
.field-validation-error[b-4sslubaprk] {
    color: red;
    font-size: 0.8em;
}
/* /Components/MainTabs/Maintenances/Maintenance_Sites_Create.razor.rz.scp.css */
.form-columns[b-ed9c385pyu] {
    display: flex;
    gap: 50px;
    padding: 20px;
}

.form-column[b-ed9c385pyu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.custom-input-layout-container[b-ed9c385pyu] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* Changed to flex-start as per original file state */
    position: relative;
}

    .custom-input-layout-container > .citadel-input-container.label-left[b-ed9c385pyu] {
        display: flex;
        align-items: center;
        width: 100%; /* Ensures it takes full width so validation message wraps below */
        margin-bottom: 0; /* Reset margin if any, rely on parent's gap or validation message's margin-top */
    }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-label[b-ed9c385pyu] {
            /* width is set by inline style (e.g., @consistentLabelWidth) */
            /* Global CSS variables should provide: font-size, color */
            /* CSS variables used by CitadelInput: --main-font-size, --main-font-color */
            font-size: var(--main-font-size);
            color: var(--main-font-color);
            white-space: nowrap;
            margin-right: 20px; /* Space between label and input-wrapper */
            flex-shrink: 0;
        }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper[b-ed9c385pyu] {
            display: flex;
            align-items: center; /* For checkbox vertical alignment */
            flex-grow: 1;
            position: relative; /* If any child elements inside wrapper need absolute positioning */
        }

            /* Styling for the actual <input type="text" class="citadel-input-box"> */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-ed9c385pyu] {
                /* width is set by inline style (e.g., @consistentInputWidth) */
                /* Global CSS variables should provide: padding, border, border-radius, font-size, background-color, color */
                /* CSS variables used by CitadelInput: 
                    --input-padding-vertical, --input-padding-horizontal, 
                    --input-border-color, --input-border-radius, 
                    --main-font-size, --inputSelect-background-color, --input-font-color
                */
                padding: var(--input-padding-vertical) var(--input-padding-horizontal);
                box-sizing: border-box;
                border: 1px solid var(--input-border-color);
                border-radius: var(--input-border-radius);
                font-size: var(--main-font-size);
                background-color: var(--inputSelect-background-color);
                color: var(--input-font-color);
                transition: all 0.2s ease;
                width: 100%; /* Will be overridden by inline style if @consistentInputWidth is applied */
            }

            /* Red border for the input box on error */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box.citadel-input-error[b-ed9c385pyu] {
                border-color: var(--bs-danger, #dc3545) !important;
            }

            /* Hover effects for the custom HTML input box */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:hover[b-ed9c385pyu] {
                background-color: var(--input-background-color-hover);
                border-color: var(--input-border-color-hover);
            }

            /* Focus effects for the custom HTML input box */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:focus[b-ed9c385pyu] {
                outline: none;
                border-color: var(--input-border-color-hover); /* This will be overridden by .citadel-input-error's !important if error class is present */
                box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
                background-color: var(--input-background-color-hover);
            }

            /* Placeholder styling for custom HTML input box */
            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-ed9c385pyu]::placeholder {
                color: rgba(0, 0, 0, 0.3); /* Matching CitadelInput placeholder color */
            }


/* Autocomplete Suggestions Styling */
.autocomplete-suggestions[b-ed9c385pyu] {
    /* position: absolute; top: calc(100% - 4px); left: ...; width: ...; are set via inline styles */
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: var(--input-border-radius);
}

    .autocomplete-suggestions li[b-ed9c385pyu] {
        padding: 8px 12px;
        cursor: pointer;
        font-size: var(--main-font-size);
        color: var(--input-font-color);
    }

        .autocomplete-suggestions li:hover[b-ed9c385pyu] {
            background-color: #f0f0f0;
        }

/* 
Validation Message styling for Telemetry Id, Site, and Is Test Device
(i.e., when <ValidationMessage /> is a direct child of .custom-input-layout-container)
This aims to replicate CitadelInput's error message appearance.
*/
.custom-input-layout-container > .validation-message[b-ed9c385pyu] {
    color: var(--bs-danger, #dc3545); /* CRITICAL: --bs-danger must be globally defined */
    font-size: 0.75rem;               /* Matches CitadelInput */
    margin-top: 4px;                  /* Matches CitadelInput */
    flex-basis: 100%;                 /* Forces it to take full width and wrap below */
    display: block;                   /* Ensures block behavior */

    /* Indentation: margin-left = width of label + right margin of label */
    /* The '180px' here MUST match the 'consistentLabelWidth' C# variable used for these labels. */
    /* The '20px' here MUST match the 'margin-right: 20px;' on the label. */
    /* Note: The C# variable consistentLabelWidth was 160px in the initial file, then changed to 150px.
       Using 150px as per the latest MainDevice.razor snippet. Adjust if necessary. */
    margin-left: calc(150px + 20px); 
}

.createButtonContainer[b-ed9c385pyu] {
    width: 100%;
    height:50px;
    display: flex;
    flex-direction:row;
    justify-content:center;
    justify-items:center;
    align-content:center;
    align-items:center;
    gap:100px;
}


/* Utility Classes (as provided by you) */
.mt-4[b-ed9c385pyu], .button-container.mt-4[b-ed9c385pyu] {
    margin-top: 1.5rem !important;
}

.mt-2[b-ed9c385pyu] {
    margin-top: 0.5rem !important;
}

.text-danger[b-ed9c385pyu] { /* For general error text like loadDataError */
    color: var(--bs-danger, #dc3545) !important;
}
/* /Components/MainTabs/Migration/Migration_Automatique.razor.rz.scp.css */
/* Container */
.auto-migration-container[b-fzzb4hpxuh] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Error Message */
.error-message[b-fzzb4hpxuh] {
    padding: 20px;
    margin: 20px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    color: #721c24;
    display: flex;
    align-items: center;
    gap: 10px;
}

.error-message i[b-fzzb4hpxuh] {
    font-size: 1.5em;
}

/* Tabs Container */
.tabs-container[b-fzzb4hpxuh] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Tab Bar */
.tab-bar[b-fzzb4hpxuh] {
    display: flex;
    gap: 5px;
    background: var(--griditem-title-backgroundgradient-color-left, #f8f9fa);
    border-bottom: 2px solid var(--griditem-boxborders-color, #dee2e6);
    padding: 10px 20px 0 20px;
}

.tab[b-fzzb4hpxuh] {
    padding: 12px 24px;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--main-font-color, #495057);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    border: 1px solid transparent;
    border-bottom: none;
}

.tab:hover[b-fzzb4hpxuh] {
    background: var(--griditem-content-backgroundgradient-color-left, #ffffff);
    color: var(--main-font-color, #212529);
}

.tab.active[b-fzzb4hpxuh] {
    background: var(--griditem-content-backgroundgradient-color-left, #ffffff);
    color: var(--nexus-blue, #0d6efd);
    border: 1px solid var(--griditem-boxborders-color, #dee2e6);
    border-bottom: 1px solid var(--griditem-content-backgroundgradient-color-left, #ffffff);
    position: relative;
    bottom: -2px;
}

.tab i[b-fzzb4hpxuh] {
    font-size: 1.1em;
}

/* Tab Content */
.tab-content[b-fzzb4hpxuh] {
    flex: 1;
    overflow: auto;
    background: var(--griditem-content-backgroundgradient-color-left, #ffffff);
    padding: 20px;
}

/* Placeholder Styling (for empty tabs during development) */
.tab-placeholder[b-fzzb4hpxuh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 600px;
    color: var(--main-font-color, #6c757d);
    text-align: center;
}

.tab-placeholder i[b-fzzb4hpxuh] {
    color: var(--griditem-boxborders-color, #dee2e6);
    margin-bottom: 20px;
}

.tab-placeholder h3[b-fzzb4hpxuh] {
    margin: 10px 0;
    color: var(--main-font-color, #495057);
}

.tab-placeholder p[b-fzzb4hpxuh] {
    color: var(--main-font-color, #6c757d);
    font-size: 0.95em;
}
/* /Components/MainTabs/Migration/Migration_ImportList.razor.rz.scp.css */
.migration-import-container[b-c50yo2o67g] {
    padding: 20px;
    max-width: 1200px;
}

.header-section[b-c50yo2o67g] {
    margin-left:20px;
    width:500px;
    display:flex;
    flex-direction:row;
    gap:30px;
}

.header-section h3[b-c50yo2o67g] {
    margin-bottom: 20px;
    color: #2c3e50;
}

.import-actions[b-c50yo2o67g] {
    display: flex;
    gap: 30px;
    align-items: end;
    flex-wrap: wrap;
}

.single-import[b-c50yo2o67g] {
    display: flex;
    gap: 10px;
    align-items: end;
}

.table-section[b-c50yo2o67g] {
    margin-bottom: 40px;
}

.table-section h4[b-c50yo2o67g] {
    margin-bottom: 15px;
    color: #34495e;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 8px;
}

.file-upload-section[b-c50yo2o67g] {
    padding: 20px 0;
}

.help-text[b-c50yo2o67g] {
    margin-top: 10px;
    font-size: 0.9em;
    color: #7f8c8d;
}

.file-preview[b-c50yo2o67g] {
    margin-top: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.file-preview pre[b-c50yo2o67g] {
    margin: 0;
    font-size: 0.85em;
    color: #495057;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* NEW: Firmware log display styles */
.firmware-log-display[b-c50yo2o67g] {
    max-width: 280px;
    word-wrap: break-word;
    line-height: 1.2;
}

.firmware-log-display .fw-bold[b-c50yo2o67g] {
    color: #333;
    margin-bottom: 2px;
    font-weight: bold;
}

.firmware-log-display .text-muted[b-c50yo2o67g] {
    color: #6c757d !important;
    font-style: italic;
}

/* Enhance migration table font size */
.migration-table[b-c50yo2o67g] {
    font-size: 0.9em;
}
/* /Components/MainTabs/Migration/Migration_UpdateFW.razor.rz.scp.css */
.firmware-upload-section[b-jhlcf1ju7w] {
    padding: 20px;
}

.firmware-upload-section h4[b-jhlcf1ju7w],
.firmware-repository-section h4[b-jhlcf1ju7w],
.firmware-logs-section h4[b-jhlcf1ju7w] {
    margin-bottom: 20px;
    color: #2c3e50;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 8px;
}

.upload-actions[b-jhlcf1ju7w] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.file-input-group[b-jhlcf1ju7w] {
    display: flex;
    gap: 15px;
    align-items: end;
    flex-wrap: wrap;
}

.file-preview[b-jhlcf1ju7w] {
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.file-preview p[b-jhlcf1ju7w] {
    margin: 0;
    color: #495057;
    font-size: 0.9em;
}

.firmware-repository-section[b-jhlcf1ju7w] {
    padding: 20px;
}

.firmware-logs-section[b-jhlcf1ju7w] {
    padding: 20px;
}

.logs-header[b-jhlcf1ju7w] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.logs-filters[b-jhlcf1ju7w] {
    display: flex;
    gap: 15px;
    align-items: end;
    flex-wrap: wrap;
}

.firmware-table[b-jhlcf1ju7w],
.logs-table[b-jhlcf1ju7w] {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
}

.badge[b-jhlcf1ju7w] {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
}

.badge-success[b-jhlcf1ju7w] {
    background-color: #198754;
}

.badge-danger[b-jhlcf1ju7w] {
    background-color: #dc3545;
}

.badge-warning[b-jhlcf1ju7w] {
    background-color: #ffc107;
    color: #212529;
}

.badge-secondary[b-jhlcf1ju7w] {
    background-color: #6c757d;
}

/* Button styling overrides */
.btn-danger[b-jhlcf1ju7w] {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover[b-jhlcf1ju7w] {
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-success[b-jhlcf1ju7w] {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover[b-jhlcf1ju7w] {
    background-color: #218838;
    border-color: #1e7e34;
}

/* Responsive design */
@media (max-width: 768px) {
    .file-input-group[b-jhlcf1ju7w],
    .logs-filters[b-jhlcf1ju7w] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .logs-header[b-jhlcf1ju7w] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .file-preview[b-jhlcf1ju7w] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* File input styling */
input[type="file"][b-jhlcf1ju7w] {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    font-size: 0.875rem;
    min-width: 200px;
}

input[type="file"]:disabled[b-jhlcf1ju7w] {
    background-color: #e9ecef;
    opacity: 0.65;
}

/* Loading state styling */
.firmware-upload-section:has(input[type="file"]:disabled)[b-jhlcf1ju7w] {
    opacity: 0.7;
}
/* /Components/MainTabs/Settings/NotificationsTab.razor.rz.scp.css */
:host[b-zf78y3qf7r] {
    /* Ensures the component itself tries to take available space if needed */
    display: block;
    height: 100%;
}

.notification-page-container[b-zf78y3qf7r] {
    padding-left:200px;
    padding-right:200px;
    padding-top:50px;
    height: 100%; /* Fill the parent */
    display: flex;
    flex-direction: column; /* Stack header, error, list */
    overflow: hidden; /* Prevent container scroll, list will scroll */
    color: var(--main-font-color);
}

.notification-header[b-zf78y3qf7r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem; /* Space below header */
    flex-shrink: 0; /* Prevent header from shrinking */
}

.notification-header h3[b-zf78y3qf7r] {
    margin: 0; /* Remove default heading margin */
     color: var(--main-title-color);
}

.notification-actions button[b-zf78y3qf7r] {
    /* Using btn-sm in markup for smaller buttons */
    margin-left: 5px; /* Space between buttons */
}

.notification-list[b-zf78y3qf7r] {
    flex-grow: 1; /* Allow list to take remaining space */
    overflow-y: auto; /* Enable scrolling ONLY for the list */
    padding-right: 5px; /* Space for scrollbar */
}

.no-notifications-message[b-zf78y3qf7r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%; /* Center vertically in the list area */
    color: var(--muted-font-color, #6c757d); /* Use theme variable or fallback */
    text-align: center;
    padding: 2rem;
}

.notification-item[b-zf78y3qf7r] {
    position: relative;
    background-color: var(--card-background-color);
    border-left-width: 5px;
    border-left-style: solid; /* Ensure border is visible */
    border-radius: var(--card-border-radius, 0.25rem);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow */
}

.notification-item .card-body[b-zf78y3qf7r] {
    padding: 0.8rem 1rem; /* Adjust padding */
     padding-right: 2.5rem; /* Ensure space for close button */
}

.notification-dismiss[b-zf78y3qf7r] {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    /* Uses Bootstrap's btn-close for styling */
    z-index: 10; /* Ensure it's above content */
}

.notification-item .card-title[b-zf78y3qf7r] {
    margin-bottom: 0.3rem; /* Smaller space below title */
    font-size: 1rem; /* Adjust title size if needed */
    font-weight: 500;
}
.notification-item .card-title i[b-zf78y3qf7r] {
     font-size: 0.9em; /* Slightly smaller icon */
     opacity: 0.9;
}


.notification-item .card-text[b-zf78y3qf7r] {
    margin-bottom: 0.4rem; /* Space below message text */
    font-size: 0.9rem;
    color: var(--card-text-color);
}

.notification-item .timestamp[b-zf78y3qf7r] {
    font-size: 0.75rem;
    display: block; /* Put timestamp on its own line */
    margin-top: 0.5rem;
}

/* Ensure Bootstrap variable overrides or defaults are set */
/* Example: Define --card-background-color if not already done */
/* :root { --card-background-color: #fff; } */

/* You might need to adjust theme variables (--main-font-color, etc.) */
/* /Components/MainTabs/Settings/Theming.razor.rz.scp.css */
.elementRow[b-za7ub6wjuv] {
    display: flex;
    gap: 10px;
    padding: 10px 10px;
    width: 100%;
}

.elementRowText[b-za7ub6wjuv] {
    display: flex;
    padding: 10px 10px;
    width: 100%;
    color: var(--main-font-color);
    font-size: var(--main-font-size);
}

    .elementRowText:hover[b-za7ub6wjuv] {
        color: var(--main-font-color-hover);
    }

.elementRowTitle[b-za7ub6wjuv] {
    display: flex;
    gap: 20px;
    width: 100%;
    color: var(--main-title-color);
    font-size: var(--main-title-size);
}

    .elementRowTitle:hover[b-za7ub6wjuv] {
        color: var(--main-title-color-hover);
    }

.theming-container[b-za7ub6wjuv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 1000px;
}

.examples-column[b-za7ub6wjuv], .menu-column[b-za7ub6wjuv] {
    overflow-y: auto;
}

.menu-column1[b-za7ub6wjuv] {
    background-color: rgba(220, 220, 220, 0.9);
    width:1100px;
}

/* Theme Selector Box Styles */
.theme-selector-box[b-za7ub6wjuv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    margin-bottom: 15px;
}

    .theme-selector-box select[b-za7ub6wjuv] {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 3px;
        background-color: white;
        flex: 1;
    }

    .theme-selector-box input[b-za7ub6wjuv] {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 3px;
        flex: 1;
    }

    .theme-selector-box button[b-za7ub6wjuv] {
        padding: 5px 10px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }

        .theme-selector-box button:hover[b-za7ub6wjuv] {
            background-color: #0056b3;
        }

/* Control Box Styles */
.control-box[b-za7ub6wjuv] {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
}

.control-box-title[b-za7ub6wjuv] {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    height: 25px;
}

.control-row[b-za7ub6wjuv] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-label[b-za7ub6wjuv] {
    flex: 0 0 200px;
    font-size:12px;
}

.control-group[b-za7ub6wjuv] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .control-group input[type="color"][b-za7ub6wjuv] {
        width: 40px;
        height: 30px;
        padding: 2px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }

    .control-group input[type="range"][b-za7ub6wjuv] {
        width: 75px;
    }

    .control-group span[b-za7ub6wjuv] {
        font-size: 12px;
    }
/* /Components/MainTabs/Settings/UserSettingsTab.razor.rz.scp.css */
.user-account-tab[b-7kd5t6orcq] {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.account-header[b-7kd5t6orcq] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    color: white;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.user-info[b-7kd5t6orcq] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-avatar[b-7kd5t6orcq] {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.9);
}

.user-details h3[b-7kd5t6orcq] {
    margin: 0 0 4px 0;
    font-size: 24px;
    font-weight: 600;
}

.user-email[b-7kd5t6orcq] {
    margin: 0 0 8px 0;
    opacity: 0.9;
    font-size: 14px;
}

.user-role.badge[b-7kd5t6orcq] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.settings-sections[b-7kd5t6orcq] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.settings-section[b-7kd5t6orcq] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-header[b-7kd5t6orcq] {
    background: #f8fafc;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-header i[b-7kd5t6orcq] {
    color: #6366f1;
    font-size: 18px;
}

.section-header h4[b-7kd5t6orcq] {
    margin: 0;
    color: #1f2937;
    font-size: 16px;
    font-weight: 600;
}

.section-content[b-7kd5t6orcq] {
    padding: 20px;
}

.setting-item[b-7kd5t6orcq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid #f3f4f6;
}

.setting-item:last-child[b-7kd5t6orcq] {
    border-bottom: none;
    padding-bottom: 0;
}

.setting-info[b-7kd5t6orcq] {
    flex: 1;
    margin-right: 16px;
}

.setting-info label[b-7kd5t6orcq] {
    display: block;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 4px;
    cursor: pointer;
}

.setting-description[b-7kd5t6orcq] {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
}

.setting-control[b-7kd5t6orcq] {
    flex-shrink: 0;
}

/* Toggle Switch Styles */
.toggle-switch[b-7kd5t6orcq] {
    position: relative;
    width: 50px;
    height: 24px;
    display: inline-block;
}

.toggle-switch input[b-7kd5t6orcq] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-7kd5t6orcq] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s ease;
    border-radius: 24px;
}

.slider[b-7kd5t6orcq]:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s ease;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.toggle-switch.active .slider[b-7kd5t6orcq] {
    background-color: #6366f1;
}

.toggle-switch.active .slider[b-7kd5t6orcq]:before {
    transform: translateX(26px);
}

.toggle-switch input:focus + .slider[b-7kd5t6orcq] {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Action Buttons */
.action-buttons[b-7kd5t6orcq] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn[b-7kd5t6orcq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn:disabled[b-7kd5t6orcq] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-7kd5t6orcq] {
    background: #6b7280;
    color: white;
    border-color: #6b7280;
}

.btn-secondary:hover:not(:disabled)[b-7kd5t6orcq] {
    background: #4b5563;
    border-color: #4b5563;
}

.btn-outline-danger[b-7kd5t6orcq] {
    background: transparent;
    color: #dc2626;
    border-color: #dc2626;
}

.btn-outline-danger:hover:not(:disabled)[b-7kd5t6orcq] {
    background: #dc2626;
    color: white;
}

/* Loading Overlay */
.loading-overlay[b-7kd5t6orcq] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-radius: 12px;
    z-index: 10;
}

.spinner[b-7kd5t6orcq] {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #6366f1;
    border-radius: 50%;
    animation: spin-b-7kd5t6orcq 1s linear infinite;
}

@keyframes spin-b-7kd5t6orcq {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Status Message */
.status-message[b-7kd5t6orcq] {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideIn-b-7kd5t6orcq 0.3s ease;
}

.status-message.success[b-7kd5t6orcq] {
    background: #10b981;
    color: white;
}

.status-message.error[b-7kd5t6orcq] {
    background: #ef4444;
    color: white;
}

.status-message.warning[b-7kd5t6orcq] {
    background: #f59e0b;
    color: white;
}

@keyframes slideIn-b-7kd5t6orcq {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .user-account-tab[b-7kd5t6orcq] {
        padding: 16px;
    }
    
    .account-header[b-7kd5t6orcq] {
        padding: 20px;
    }
    
    .user-info[b-7kd5t6orcq] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .setting-item[b-7kd5t6orcq] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .setting-control[b-7kd5t6orcq] {
        align-self: flex-start;
    }
    
    .action-buttons[b-7kd5t6orcq] {
        flex-direction: column;
    }
    
    .btn[b-7kd5t6orcq] {
        justify-content: center;
    }
    
    .status-message[b-7kd5t6orcq] {
        left: 16px;
        right: 16px;
        top: 16px;
    }
}

.infobox[b-7kd5t6orcq] {
    display: flex;
    flex-direction:column;
    gap:15px;
}
/* /Components/SubComponents/AzureMap.razor.rz.scp.css */
.azure-map-container[b-kzh18vr69z] {
    position: relative;
    width: 100%;
    height: 100%;
}

.azure-map[b-kzh18vr69z] {
    width: 100% !important;
    height: 100% !important;
    position: relative;
}

/* AGGRESSIVE FIX: Completely disable the problematic element */
.azure-map .non-fixed.subcontrol-container[b-kzh18vr69z] {
    display: none !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: -9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Ensure canvas is on top and receives all events */
.azure-map canvas[b-kzh18vr69z],
.azure-map .mapboxgl-canvas[b-kzh18vr69z] {
    pointer-events: auto !important;
    touch-action: none !important;
    position: relative !important;
    z-index: 100 !important;
    cursor: grab !important;
}

.azure-map canvas:active[b-kzh18vr69z],
.azure-map .mapboxgl-canvas:active[b-kzh18vr69z] {
    cursor: grabbing !important;
}

/* Style the new fixed controls container */
.atlas-fixed-controls[b-kzh18vr69z] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.atlas-fixed-controls button[b-kzh18vr69z] {
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.atlas-fixed-controls button:hover[b-kzh18vr69z] {
    background: #f0f0f0;
}

.map-controls[b-kzh18vr69z] {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 200px;
    transition: all 0.3s ease;
    pointer-events: auto;
}

.map-controls:hover[b-kzh18vr69z] {
    background: rgba(255, 255, 255, 0.98);
    transform: translateY(-1px);
}

.control-group[b-kzh18vr69z] {
    margin-bottom: 10px;
}

.control-group:last-child[b-kzh18vr69z] {
    margin-bottom: 0;
}

.control-group label[b-kzh18vr69z] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-select-sm[b-kzh18vr69z] {
    border-radius: 6px;
    border: 1px solid #e1e5e9;
    transition: all 0.3s ease;
    font-size: 12px;
    padding: 8px 12px;
    background-color: white;
}

.form-select-sm:focus[b-kzh18vr69z] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    outline: none;
}

.form-select-sm:hover[b-kzh18vr69z] {
    border-color: #b8c2e8;
}
/* /Components/SubComponents/CaseAttachments.razor.rz.scp.css */
/* Apply main font settings as a base */
:host[b-sbcqslgiqm] {
    font-size: var(--main-font-size);
    color: var(--main-font-color);
}

@keyframes fadeIn-b-sbcqslgiqm {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal backdrop and container - matching your existing modal */
.dialog-backdrop[b-sbcqslgiqm] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1040;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-sbcqslgiqm 0.3s ease-out forwards;
}

.dialog-container[b-sbcqslgiqm] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
    z-index: 1050;
    padding: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    animation: fadeIn-b-sbcqslgiqm 0.3s ease-out forwards;
}

.dialog-content[b-sbcqslgiqm] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    pointer-events: auto;
    border: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    border-radius: var(--griditem-boxborders-radius);
    box-shadow: 0px 5px 15px var(--griditem-boxshadow-color);
    background-color: lightgray;
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.dialog-content:hover[b-sbcqslgiqm] {
     box-shadow: 0px 7px 20px var(--griditem-boxshadow-color-hover);
     border-color: var(--griditem-boxborders-color-hover);
}

.dialog-header[b-sbcqslgiqm] {
    display: flex; 
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--grid-padding-left, 1rem);
    height: var(--griditem-title-height);
    box-sizing: border-box;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle, 90deg),
        var(--griditem-title-backgroundgradient-color-left),
        var(--griditem-title-backgroundgradient-color-right)
    );
    border-bottom: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
}

.dialog-title[b-sbcqslgiqm] {
    margin: 0; 
    padding: 0; 
    font-size: var(--griditem-title-font-size);
    font-weight: var(--griditem-title-font-weight);
    color: var(--griditem-title-font-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
}

.dialog-body[b-sbcqslgiqm] {
    position: relative;
    flex: 1 1 auto;
    padding: var(--grid-padding-top, 1rem) var(--grid-padding-left, 1rem);
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    line-height: 1.6;
}

.dialog-footer[b-sbcqslgiqm] {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem var(--grid-padding-right, 1rem);
    border-top: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    background-color: var(--griditem-title-backgroundgradient-color-left, #f8f9fa);
    gap: 10px;
}

.btn-close[b-sbcqslgiqm] {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: var(--griditem-title-font-color);
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: var(--griditem-boxborders-radius, 0.25rem);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity .15s ease-in-out;
}

.btn-close:hover[b-sbcqslgiqm] {
    opacity: 1;
}

/* File upload specific styles */
.file-select-zone[b-sbcqslgiqm] {
    border: 2px dashed var(--griditem-boxborders-color);
    border-radius: var(--griditem-boxborders-radius);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    background-color: var(--griditem-title-backgroundgradient-color-left, #f8f9fa);
}

.file-select-zone:hover[b-sbcqslgiqm] {
    border-color: var(--griditem-boxborders-color-hover);
    background-color: var(--griditem-boxborders-color-hover);
}

.select-zone-content i[b-sbcqslgiqm] {
    font-size: 2rem;
    color: var(--griditem-title-font-color);
    margin-bottom: 1rem;
}

.select-zone-content p[b-sbcqslgiqm] {
    font-size: var(--main-font-size);
    font-weight: 500;
    color: var(--main-font-color);
    margin: 0.5rem 0;
}

.select-zone-content small[b-sbcqslgiqm] {
    color: var(--main-font-color);
    opacity: 0.7;
}

.file-info[b-sbcqslgiqm] {
    margin-bottom: 1.5rem;
}

.file-info h6[b-sbcqslgiqm] {
    margin: 0 0 1rem 0;
    font-size: calc(var(--main-font-size) * 1.1);
    font-weight: 600;
    color: var(--main-font-color);
}

.file-details[b-sbcqslgiqm] {
    background-color: var(--griditem-title-backgroundgradient-color-left, #f8f9fa);
    border: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    border-radius: var(--griditem-boxborders-radius);
    padding: 1rem;
}

.file-detail-row[b-sbcqslgiqm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.file-detail-row:last-child[b-sbcqslgiqm] {
    margin-bottom: 0;
}

.file-detail-label[b-sbcqslgiqm] {
    font-weight: 600;
    color: var(--main-font-color);
    min-width: 60px;
}

.file-detail-value[b-sbcqslgiqm] {
    color: var(--main-font-color);
    word-break: break-all;
    text-align: right;
}

.notes-section[b-sbcqslgiqm] {
    margin-top: 1.5rem;
}

.form-label[b-sbcqslgiqm] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--main-font-color);
    font-size: var(--main-font-size);
}

.form-textarea[b-sbcqslgiqm] {
    width: 100%;
    min-height: 80px;
    padding: 0.5rem;
    border: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    border-radius: var(--griditem-boxborders-radius);
    font-family: inherit;
    font-size: var(--main-font-size);
    color: var(--main-font-color);
    background-color: white;
    resize: vertical;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-sizing: border-box;
}

.form-textarea:focus[b-sbcqslgiqm] {
    outline: none;
    border-color: var(--griditem-boxborders-color-hover);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.form-textarea[b-sbcqslgiqm]::placeholder {
    color: var(--main-font-color);
    opacity: 0.6;
}

/* Loading and error states */
.loading-container[b-sbcqslgiqm] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.error-container[b-sbcqslgiqm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: var(--griditem-boxborders-radius);
}

.error-container i[b-sbcqslgiqm] {
    font-size: 1.2rem;
}

/* Action buttons styling */
.action-buttons[b-sbcqslgiqm] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* File name and table cell styling */
.file-name[b-sbcqslgiqm],
.uploaded-by[b-sbcqslgiqm],
.date-cell[b-sbcqslgiqm],
.notes[b-sbcqslgiqm] {
    display: inline-block;
    max-width: 100%;
}

.file-name i[b-sbcqslgiqm] {
    margin-right: 0.5rem;
    width: 1em;
    text-align: center;
}

.ellipsis-text[b-sbcqslgiqm] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size[b-sbcqslgiqm] {
    font-family: monospace;
    font-size: 0.9em;
}
/* /Components/SubComponents/CaseOrganization.razor.rz.scp.css */
/* Loading and Error States */
.case-edit-container[b-tfcv4woxnu] {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.case-edit-loading[b-tfcv4woxnu] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: var(--text-muted, #6c757d);
}

.case-edit-loading div[b-tfcv4woxnu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.case-edit-error[b-tfcv4woxnu] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: var(--danger-color, #dc3545);
    padding: 20px;
    text-align: center;
    gap: 16px;
}

.case-edit-error h3[b-tfcv4woxnu] {
    margin: 0;
    font-size: 1.25rem;
}

.case-edit-error p[b-tfcv4woxnu] {
    margin: 0;
    font-size: 0.9rem;
}

/* Tabs (Your Colleague's Design) */
.tabs-container[b-tfcv4woxnu] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tab-bar[b-tfcv4woxnu] {
    display: flex;
    width: 100%;
    border-bottom: 2px solid #bbb;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    margin-top: 5px;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.tab[b-tfcv4woxnu] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: #e7e7e7;
    cursor: pointer;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    transition: all 0.15s ease-in-out;
    user-select: none;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid transparent;
    position: relative;
    z-index: 1;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.tab:last-child[b-tfcv4woxnu] {
    border-right: none;
}

.tab.active[b-tfcv4woxnu] {
    border: 1px solid #444;
    border-bottom: 2px solid #fff;
    background: #fff;
    color: #222;
    z-index: 2;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}

.tab:not(.active):hover[b-tfcv4woxnu] {
    background: #f5f5f5;
    color: #222;
    border-bottom: 2px solid #999;
}

.tab-content[b-tfcv4woxnu] {
    flex: 1;
    width: 100%;
    background: transparent !important;
}

.tab-pane[b-tfcv4woxnu] {
    display: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tab-pane.active[b-tfcv4woxnu] {
    display: block;
    opacity: 1;
    animation: fadeIn-b-tfcv4woxnu 0.25s ease-out forwards;
}

@keyframes fadeIn-b-tfcv4woxnu {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Main Tab */
.cases-preview-flex-row[b-tfcv4woxnu] {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 7px;
    justify-content: center;
}

.cases-preview-logo img[b-tfcv4woxnu] {
    max-width: 120px;
    height: auto;
}

.cases-preview-inputs-column[b-tfcv4woxnu] {
    display: flex;
    flex-direction: column;
}

.cases-preview-inputs[b-tfcv4woxnu] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cases-preview-multiselects-column[b-tfcv4woxnu] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: 40px;
    min-width: 340px;
    border-left: 1px solid #ddd;
    padding-left: 24px;
}

/* Checkbox and buttons column */
.details-checkbox-column[b-tfcv4woxnu] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    min-width: 250px;
    margin-left: 40px;
    padding-left: 24px;
    border-left: 1px solid #ddd;
    height: 100%;
    position: relative;
}

.details-checkbox-wrapper[b-tfcv4woxnu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 18px;
}

.details-buttons-row[b-tfcv4woxnu] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 0px;
    width: 100%;
    margin-right: 30px;
}

.frame-container[b-tfcv4woxnu] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.frame-top[b-tfcv4woxnu] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.frame-bottom[b-tfcv4woxnu] {
    flex: 1 1 auto;
    width: 100%;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
}

.case-sticky-frame-top[b-tfcv4woxnu] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFB7D;
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.case-sticky-frame-bottom[b-tfcv4woxnu] {
    flex: 1 1 auto;
    width: 100%;
    background-color: #FFFEC4;
}

.frame-title[b-tfcv4woxnu] {
    font-size: var(--griditem-title-font-size);
    color: #444;
}

.case-journal-frame[b-tfcv4woxnu] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.case-journal-frame-top[b-tfcv4woxnu] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 0 10px;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.case-journal-frame-bottom[b-tfcv4woxnu] {
    flex: 1 1 auto;
    width: 100%;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
}

.save-journal-btn[b-tfcv4woxnu] {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0;
    margin-right: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.save-journal-btn:focus[b-tfcv4woxnu] {
    outline: none;
    box-shadow: none;
}

.save-journal-img[b-tfcv4woxnu] {
    display: block;
    height: 24px;
    width: 24px;
    background: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

/* Attached Files Tab */
.search-container[b-tfcv4woxnu] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.case-maintenance-search-icon[b-tfcv4woxnu] {
    margin-left: 16px;
    width: 24px;
    height: 24px;
}

.container-vertical[b-tfcv4woxnu] {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.top-bar[b-tfcv4woxnu] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    gap: 8px;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.citadel-btn[b-tfcv4woxnu] {
    width: 150px;
}

.main-content[b-tfcv4woxnu] {
    flex: 1;
}

/* Details Tab */
.vertical-split-container[b-tfcv4woxnu] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.vertical-split-header[b-tfcv4woxnu] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.vertical-split-label[b-tfcv4woxnu] {
    font-size: var(--griditem-title-font-size);
    margin-left: 10px;
}

.vertical-split-body[b-tfcv4woxnu] {
    flex: 1 1 auto;
    width: 100%;
}

/* Organization Tab */
.organization-inputs-row[b-tfcv4woxnu] {
    display: flex;
    flex-direction: row;
    gap: 36px;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin-left: 5px;
}

.organization-inputs-col[b-tfcv4woxnu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 340px;
}

.stacked-frame[b-tfcv4woxnu] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.stacked-frame-header[b-tfcv4woxnu] {
    display: flex;
    align-items: center;
    width: 100%;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle), var(--griditem-title-backgroundgradient-color-left), var(--griditem-title-backgroundgradient-color-right));
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.stacked-frame-label[b-tfcv4woxnu] {
    font-size: var(--griditem-title-font-size);
    margin-left: 10px;
}

.stacked-frame-content[b-tfcv4woxnu] {
    flex: 1 1 auto;
    width: 100%;
}

/* Case Update Section Styles */
.case-update-container[b-tfcv4woxnu] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
}

.case-update-columns[b-tfcv4woxnu] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    flex: 1;
}

.case-update-left-column[b-tfcv4woxnu],
.case-update-middle-column[b-tfcv4woxnu],
.case-update-right-column[b-tfcv4woxnu] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.case-update-buttons[b-tfcv4woxnu] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Ensure proper spacing for checkboxes in the case update section */
.case-update-middle-column .checkbox-container[b-tfcv4woxnu],
.case-update-right-column .checkbox-container[b-tfcv4woxnu] {
    margin-bottom: 5px;
}
/* /Components/SubComponents/Case_Edit_Tab_Details.razor.rz.scp.css */
/* Case Update Section Styles */
.case-update-container[b-zgucctalwr] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
}

.case-update-columns[b-zgucctalwr] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    flex: 1;
}

.case-update-left-column[b-zgucctalwr],
.case-update-middle-column[b-zgucctalwr],
.case-update-right-column[b-zgucctalwr] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.case-update-buttons[b-zgucctalwr] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Ensure proper spacing for checkboxes in the case update section */
.case-update-middle-column .checkbox-container[b-zgucctalwr],
.case-update-right-column .checkbox-container[b-zgucctalwr] {
    margin-bottom: 5px;
}

/* Loading State for History */
.loading-container[b-zgucctalwr] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: var(--text-muted, #6c757d);
    gap: 12px;
}

.loading-container i[b-zgucctalwr] {
    font-size: 1.2rem;
}

/* History Table Styles */
.history-table[b-zgucctalwr] {
    width: 100%;
    height: 100%;
}

/* History Cell Styles */
.date-cell[b-zgucctalwr] {
    font-family: monospace;
    font-size: 0.9rem;
    white-space: nowrap;
}

.user-cell[b-zgucctalwr] {
    font-weight: 500;
}

.field-cell[b-zgucctalwr] {
    font-weight: 600;
    color: var(--primary-color, #007bff);
}

.from-value-cell[b-zgucctalwr],
.to-value-cell[b-zgucctalwr] {
    font-family: monospace;
    font-size: 0.85rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.from-value-cell[b-zgucctalwr] {
    color: var(--danger-color, #dc3545);
}

.to-value-cell[b-zgucctalwr] {
    color: var(--success-color, #28a745);
    font-weight: 500;
}

/* Ellipsis text utility */
.ellipsis-text[b-zgucctalwr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Responsive adjustments for smaller grid items */
@media (max-width: 1200px) {
    .case-update-columns[b-zgucctalwr] {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .case-update-left-column[b-zgucctalwr],
    .case-update-middle-column[b-zgucctalwr],
    .case-update-right-column[b-zgucctalwr] {
        gap: 10px;
    }
}

/* Ensure proper alignment in grid items */
::ng-deep .griditem-content[b-zgucctalwr] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Custom styling for the case metadata section if needed */
.case-metadata-row[b-zgucctalwr] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Ensure inputs in metadata section are properly sized */
.case-metadata-input[b-zgucctalwr] {
    flex: 1;
    min-width: 200px;
}
/* /Components/SubComponents/Case_Edit_Tab_Main.razor.rz.scp.css */
.frame-container[b-bcgvt9iooy] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.case-sticky-frame-top[b-bcgvt9iooy] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFB7D;
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.frame-title[b-bcgvt9iooy] {
    font-size: var(--griditem-title-font-size);
    color: #444;
}

.case-sticky-frame-bottom[b-bcgvt9iooy] {
    flex: 1 1 auto;
    width: 100%;
    background-color: #FFFEC4;
}

.chart-loading-container[b-bcgvt9iooy],
.chart-error-container[b-bcgvt9iooy],
.chart-no-data-container[b-bcgvt9iooy],
.chart-no-sensor-container[b-bcgvt9iooy] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.loading-spinner[b-bcgvt9iooy],
.error-message[b-bcgvt9iooy],
.no-data-message[b-bcgvt9iooy],
.no-sensor-message[b-bcgvt9iooy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: #666;
}

    .loading-spinner i[b-bcgvt9iooy] {
        font-size: 24px;
        color: #007bff;
    }

    .error-message i[b-bcgvt9iooy] {
        font-size: 24px;
        color: #dc3545;
    }

    .no-data-message i[b-bcgvt9iooy],
    .no-sensor-message i[b-bcgvt9iooy] {
        font-size: 24px;
        color: #6c757d;
    }

    .loading-spinner span[b-bcgvt9iooy],
    .error-message span[b-bcgvt9iooy],
    .no-data-message span[b-bcgvt9iooy],
    .no-sensor-message span[b-bcgvt9iooy] {
        font-size: 14px;
        font-weight: 500;
    }

/* Force chart to render properly in tab containers */
#@_chartId[b-bcgvt9iooy] {
    visibility: visible !important;
    opacity: 1 !important;
}
    
/* Ensure chart container is properly sized */
.apex-chart[b-bcgvt9iooy] {
    min-height: 250px !important;
}
/* /Components/SubComponents/Chart.razor.rz.scp.css */
.chart-container[b-6tj7e7w1c6] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
}

.chart-wrapper[b-6tj7e7w1c6] {
    flex: 1;
    width: 100%;
    min-height: 0;
}

.apex-chart[b-6tj7e7w1c6] {
    width: 100%;
    height: 100%;
}

[b-6tj7e7w1c6] .apexcharts-canvas {
    width: 100%;
    height: 100%;
}

[b-6tj7e7w1c6] .apexcharts-toolbar {
    z-index: 5;
    scale: 1 !important;
    transform-origin: top right;
    right: 20px !important;
    top: 3px !important;
}

[b-6tj7e7w1c6] .apexcharts-xaxis line,
[b-6tj7e7w1c6] .apexcharts-yaxis line {
    stroke: #000000;
    stroke-width: 1px;
}

[b-6tj7e7w1c6] .apexcharts-grid line {
    stroke: #444444;
}

[b-6tj7e7w1c6] .apexcharts-yaxis-label,
[b-6tj7e7w1c6] .apexcharts-xaxis-label {
    font-size: 13px !important;
    fill: #000000;
}

[b-6tj7e7w1c6] .apexcharts-xaxis-tick {
    stroke: #000000;
}

[b-6tj7e7w1c6] .apexcharts-tooltip {
    background: rgba(200, 200, 200, 0.85);
    color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 0, 0, 1) !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    font-family: Roboto;
}


[b-6tj7e7w1c6] .apexcharts-pie-series path,
[b-6tj7e7w1c6] .apexcharts-donut-series path {
    stroke: #B0B0B0;
    stroke-width: 1px;
}

/* Add this new rule to shrink the legend circles */
[b-6tj7e7w1c6] .apexcharts-legend-marker {
    width: 8px !important;
    height: 8px !important;
    margin-right: 8px !important;
}

/* THEME MODE */
/* Chart Container */
.chart-container[b-6tj7e7w1c6] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
}

/* Chart Wrapper */
.chart-wrapper[b-6tj7e7w1c6] {
    flex: 1;
    width: 100%;
    min-height: 0;
}

/* Apex Chart */
.apex-chart[b-6tj7e7w1c6] {
    width: 100%;
    height: 100%;
}

/* Ensure the Apex Charts canvas fills the container */
[b-6tj7e7w1c6] .apexcharts-canvas {
    width: 100%;
    height: 100%;
}

/* Toolbar styling for chart controls */
[b-6tj7e7w1c6] .apexcharts-toolbar {
    z-index: 5;
    scale: 1 !important;
    transform-origin: top right;
    right: 0;
    top: -5px;
}

/* Axis lines styling */
[b-6tj7e7w1c6] .apexcharts-xaxis line,
[b-6tj7e7w1c6] .apexcharts-yaxis line {
    stroke: var(--charts-axislines-colors); /* Updated to use root variable (#000) */
    stroke-width: 1px;
}

/* Grid lines styling */
[b-6tj7e7w1c6] .apexcharts-grid line {
    stroke: var(--charts-gridlines-color); /* Updated to use root variable (#000) */
}

/* Axis labels styling */
[b-6tj7e7w1c6] .apexcharts-yaxis-label,
[b-6tj7e7w1c6] .apexcharts-xaxis-label {
    font-size: var(--charts-labels-size); /* Updated to use root variable (12px) */
    fill: var(--charts-labels-color); /* Updated to use root variable (#000) */
}

/* X-axis ticks styling */
[b-6tj7e7w1c6] .apexcharts-xaxis-tick {
    stroke: var(--charts-axislines-colors); /* Updated to use root variable (#000) */
}

/* Tooltip styling */
[b-6tj7e7w1c6] .apexcharts-tooltip {
    background: rgba(200, 200, 200, 0.85) !important;
    color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: Roboto !important;
}

/* Pie and donut series styling */
[b-6tj7e7w1c6] .apexcharts-pie-series path,
[b-6tj7e7w1c6] .apexcharts-donut-series path {
    stroke: #B0B0B0;
    stroke-width: 1px;
}

/* Legend marker sizing */
[b-6tj7e7w1c6] .apexcharts-legend-marker {
    width: 10px !important;
    height: 10px !important;
    margin-right: 5px !important;
    margin-left: 15px !important;
}

/* Legend text styling */
[b-6tj7e7w1c6] .apexcharts-legend-text {
    font-size: 13px !important ; /* Added to use root variable (12px) */
    fill: var(--charts-legend-color) !important ; /* Added to use root variable (#000) */
    color: var(--charts-legend-color) !important ;
}
/* /Components/SubComponents/CitadelButton.razor.rz.scp.css */
/* Base Button Styles */
.citadel-button[b-2jfg9y1snp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--button-border-radius);
    font-weight: var(--button-font-weight);
    font-size: var(--button-font-size);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--button-primary-border-color);
    background: var(--button-primary-background-color);
    color: var(--button-primary-font-color);
    outline: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    gap: 10px;
    margin-right: 15px;
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    line-height:100%;
    height: var(--button-height);
}
    /* Button Variants - subtle styling with black text */
    .citadel-button.primary[b-2jfg9y1snp] {
        background: var(--button-primary-background-color);
        border-color: var(--button-primary-border-color);
        color: var(--button-primary-font-color);
    }

        .citadel-button.primary:hover[b-2jfg9y1snp] {
            background: var(--button-primary-background-color-hover);
            border-color: var(--button-primary-border-color-hover);
            color: var(--button-primary-font-color-hover);
        }

    .citadel-button.secondary[b-2jfg9y1snp] {
        background: var(--button-secondary-background-color);
        border-color: var(--button-secondary-border-color);
        color: var(--button-secondary-font-color);
    }
        .citadel-button.secondary:hover[b-2jfg9y1snp] {
            background: var(--button-secondary-background-color-hover);
            border-color: var(--button-secondary-border-color-hover);
            color: var(--button-secondary-font-color-hover);
        }

    .citadel-button.tertiary[b-2jfg9y1snp] {
        background: var(--button-tertiary-background-color);
        border-color: var(--button-tertiary-border-color);
        color: var(--button-tertiary-font-color);
    }
        .citadel-button.tertiary:hover[b-2jfg9y1snp] {
            background: var(--button-tertiary-background-color-hover);
            border-color: var(--button-tertiary-border-color-hover-hover);
            color: var(--button-tertiary-font-color);
        }


    /* Disabled Button */
    .citadel-button.disabled[b-2jfg9y1snp] {
        opacity: var(--button-disabled-opacity);
        pointer-events: none;
        cursor: not-allowed;
        background-color: var(--button-disabled-background-color);
        border-color: var(--button-disabled-border-color);
        color: var(--button-disabled-font-color);
    }

/* Button with Icon */
.icon-left[b-2jfg9y1snp] {
    margin-right: -2px;
}

.icon-right[b-2jfg9y1snp] {
    margin-left: -2px;
}

/* Loading State */
.citadel-button.loading[b-2jfg9y1snp] {
    color: transparent !important;
}

    .citadel-button.loading .button-loader[b-2jfg9y1snp] {
        position: absolute;
        width: var(--button-loader-size);
        height: var(--button-loader-size);
        border: 2px solid var(--button-loader-color);
        border-radius: 50%;
        border-right-color: transparent;
        animation: button-spin-b-2jfg9y1snp 1s linear infinite;
    }

@keyframes button-spin-b-2jfg9y1snp {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.citadel-button.loading .icon-left[b-2jfg9y1snp],
.citadel-button.loading .icon-right[b-2jfg9y1snp] {
    visibility: hidden;
}

/* Focus States */
.citadel-button:focus[b-2jfg9y1snp] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-color: var(--button-active-border-color);
}

    .citadel-button:focus:hover[b-2jfg9y1snp] {
        border-color: var(--button-active-border-color);
    }

/* Button text when only icon is present */
.citadel-button:not(:has(.button-text)) .icon-left[b-2jfg9y1snp],
.citadel-button:not(:has(.button-text)) .icon-right[b-2jfg9y1snp] {
    margin: 0;
}

/* Active State - Pressed Button */
.citadel-button:active:not(.disabled)[b-2jfg9y1snp] {
    background-color: var(--button-active-background-color);
    border-color: var(--button-active-border-color);
    transform: translateY(1px);
}

/* Fix for right-most element in toolbar */
.ml-auto[b-2jfg9y1snp] {
    margin-left: auto;
    margin-right: 0;
}
/* /Components/SubComponents/CitadelInput.razor.rz.scp.css */
/* /Components/SubComponents/ConfirmationDialog.razor.rz.scp.css */
/* Apply main font settings as a base */
:host[b-r783o2pmdv] {
    font-size: var(--main-font-size);
    color: var(--main-font-color);
}

@keyframes fadeIn-b-r783o2pmdv {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dialog-backdrop[b-r783o2pmdv] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1040;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-r783o2pmdv 0.3s ease-out forwards;
}

.dialog-container[b-r783o2pmdv] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
    z-index: 1050;
    padding: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    animation: fadeIn-b-r783o2pmdv 0.3s ease-out forwards;
}

.dialog-content[b-r783o2pmdv] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 750px;
    pointer-events: auto;
    border: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    border-radius: var(--griditem-boxborders-radius);
    box-shadow: 0px 5px 15px var(--griditem-boxshadow-color);
    background-color: lightgray;
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.dialog-content:hover[b-r783o2pmdv] {
     box-shadow: 0px 7px 20px var(--griditem-boxshadow-color-hover);
     border-color: var(--griditem-boxborders-color-hover);
}

.dialog-header[b-r783o2pmdv] {
    display: flex; 
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--grid-padding-left, 1rem);
    height: var(--griditem-title-height);
    box-sizing: border-box;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle, 90deg),
        var(--griditem-title-backgroundgradient-color-left),
        var(--griditem-title-backgroundgradient-color-right)
    );
    border-bottom: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
}

.dialog-title[b-r783o2pmdv] {
    margin: 0; 
    padding: 0; 
    font-size: var(--griditem-title-font-size);
    font-weight: var(--griditem-title-font-weight);
    color: var(--griditem-title-font-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
}

.dialog-body[b-r783o2pmdv] {
    position: relative;
    flex: 1 1 auto;
    padding: var(--grid-padding-top, 1rem) var(--grid-padding-left, 1rem);
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    line-height: 1.6;
}

.dialog-footer[b-r783o2pmdv] {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem var(--grid-padding-right, 1rem);
    border-top: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    background-color: var(--griditem-title-backgroundgradient-color-left, #f8f9fa);
    gap:50px;
}

.dialog-footer > *[b-r783o2pmdv] {
    margin-left: 0.5rem;
}

.btn-close[b-r783o2pmdv] {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: var(--griditem-title-font-color);
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: var(--griditem-boxborders-radius, 0.25rem);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity .15s ease-in-out;
}

.btn-close:hover[b-r783o2pmdv] {
    opacity: 1;
}

.dialog-footer button[b-r783o2pmdv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: var(--button-height);
    padding: 0 var(--button-padding-horizontal);
    line-height: calc(var(--button-height) - 2 * var(--griditem-boxborders-size));

    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border-width: var(--griditem-boxborders-size);
    border-style: solid;
    border-radius: var(--button-border-radius);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
/* /Components/SubComponents/DataTable.razor.rz.scp.css */
/* /Components/SubComponents/DeviceChangeHistory.razor.rz.scp.css */
/* DeviceChangeHistory specific styles */
.device-history-container[b-2jyxzsum8j] {
    width: 100%;
    height: 100%;
}

.device-history-table[b-2jyxzsum8j] {
    /* Inherit from your existing table styles */
}

/* Entity Type styling */
.entity-type-device[b-2jyxzsum8j] {
    color: #2563eb; /* Blue for devices */
    font-weight: 500;
}

.entity-type-sensor[b-2jyxzsum8j] {
    color: #dc2626; /* Red for sensors */
    font-weight: 500;
}

/* Action styling */
.action-created[b-2jyxzsum8j] {
    color: #16a34a; /* Green for created */
    font-weight: 500;
}

.action-updated[b-2jyxzsum8j] {
    color: #ea580c; /* Orange for updated */
    font-weight: 500;
}

/* Value styling */
.old-value[b-2jyxzsum8j] {
    background-color: #fef2f2; /* Light red background */
    padding: 2px 4px;
    border-radius: 3px;
    border-left: 3px solid #dc2626;
}

.new-value[b-2jyxzsum8j] {
    background-color: #f0fdf4; /* Light green background */
    padding: 2px 4px;
    border-radius: 3px;
    border-left: 3px solid #16a34a;
}

/* Field name styling */
.field-name[b-2jyxzsum8j] {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    background-color: #f8fafc;
    padding: 2px 4px;
    border-radius: 3px;
}

.toolbar-left[b-2jyxzsum8j] {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .toolbar-right[b-2jyxzsum8j] {
        display: flex;
        align-items: center;
    }

    .mode-indicator[b-2jyxzsum8j] {
        color: #666;
        font-size: 0.9em;
        font-style: italic;
    }

        .mode-indicator i[b-2jyxzsum8j] {
            margin-right: 5px;
            color: #999;
        }
/* /Components/SubComponents/DeviceCommands.razor.rz.scp.css */
.command-box[b-zg1pzzl8v0] {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    height: 100%;
}

.command-section[b-zg1pzzl8v0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.command-section h6[b-zg1pzzl8v0] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.command-description[b-zg1pzzl8v0] {
    margin: 0;
    font-size: 13px;
    color: #666;
}

.status-indicator[b-zg1pzzl8v0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: #e3f2fd;
    border-radius: 4px;
    font-size: 14px;
}

.error-message[b-zg1pzzl8v0] {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 10px;
    font-size: 14px;
}

.success-message[b-zg1pzzl8v0] {
    color: #28a745;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    padding: 10px;
    font-size: 14px;
}

.sensors-list[b-zg1pzzl8v0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.sensor-item[b-zg1pzzl8v0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #007bff;
}

.sensor-id[b-zg1pzzl8v0] {
    font-weight: 600;
    color: #333;
    font-family: 'Courier New', monospace;
}

.sensor-status[b-zg1pzzl8v0] {
    font-size: 12px;
    color: #666;
    padding: 2px 8px;
    background-color: #e9ecef;
    border-radius: 12px;
}

/* Loading container styling */
.command-box[style*="display: flex; justify-content: center; align-items: center"][b-zg1pzzl8v0] {
    min-height: 200px;
}

/* Alert styling for no device data */
.alert[b-zg1pzzl8v0] {
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
}

.alert-warning[b-zg1pzzl8v0] {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .command-box[b-zg1pzzl8v0] {
        gap: 20px;
    }
    
    .command-section[b-zg1pzzl8v0] {
        gap: 8px;
    }
}
/* /Components/SubComponents/DeviceCommandSender.razor.rz.scp.css */
.flexcontainer[b-dikc0081r8] {
    display:flex;
    flex-direction:row;
    gap : 30px;
    flex:1;
}

.left[b-dikc0081r8] {
    width:65%;
    height:100%;
    border-right: 1px solid grey;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.right[b-dikc0081r8] {
    width:35%;
    height:100%;
}

.device-command-sender[b-dikc0081r8] {
    width: 100%;
    height: 100%;
    display:flex;
    flex-direction: column;
    gap:30px;
}
.form-row[b-dikc0081r8] {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.form-row[b-dikc0081r8]  label {
    margin-right: 0.5rem;
    min-width: 120px;
    text-align: right;
}

.form-row[b-dikc0081r8]  .input-wrapper,
.form-row[b-dikc0081r8]  select {
   flex-grow: 1; /* Allow input/select to take remaining space */
}

.payload-section[b-dikc0081r8]  label {
    align-self: flex-start; /* Align label top for textarea */
    margin-top: 0.3rem;
}

.payload-section[b-dikc0081r8]  textarea {
    min-height: 120px; /* Give textarea some default height */
    font-family: Roboto;
    font-size: 0.9em;
}

.action-row[b-dikc0081r8] {
    justify-content: flex-end; /* Push button to the right */
    margin-top: 1.5rem;
}

.loading-indicator[b-dikc0081r8] {
    margin: 1rem 0;
    color: var(--text-color-secondary, #555);
    font-style: italic;
}

.error-message[b-dikc0081r8] {
    color: var(--error-color, #dc3545);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
}

.error-message.small[b-dikc0081r8] {
    padding: 0.25rem 0.5rem;
    font-size: 0.85em;
    margin-top: 0.25rem;
    background-color: transparent;
    border: none;
    padding-left: 0; /* Align with input */
}


.response-section[b-dikc0081r8] {
    margin-top: 1.5rem;
    padding: 1rem;
}

.response-section h5[b-dikc0081r8] {
    margin-top: 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color-light, #eee);
    padding-bottom: 0.5rem;
}

.response-section h6[b-dikc0081r8] {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.response-status[b-dikc0081r8] {
    margin-bottom: 0.75rem;
    font-weight: bold;
}

.response-status-success[b-dikc0081r8] {
    color: var(--success-color, #28a745);
}

.response-status-error[b-dikc0081r8] {
    color: var(--error-color, #dc3545);
}

.response-section pre[b-dikc0081r8] {
    padding: 0.75rem;
    overflow-x: auto; /* Allow horizontal scrolling for long lines */
    max-height: 300px; /* Limit height */
    overflow-y: auto;
}

.response-section code[b-dikc0081r8] {
    font-family: Roboto;
    font-size: 0.9em;
    color: var(--code-text-color, #333);
    white-space: pre; /* Preserve whitespace */
}
/* /Components/SubComponents/DeviceDiagnostic.razor.rz.scp.css */
.collapsible-container[b-i6h0ie8gu1] {
    margin-bottom: 1rem;
    min-height: var(--min-height);
    display: flex;
    flex-direction: column;
    border-radius: var(--griditem-boxborders-radius);
    box-shadow: 5px 5px 10px var(--griditem-boxshadow-color);
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle), 
        var(--griditem-content-backgroundgradient-color-left),
        var(--griditem-content-backgroundgradient-color-right));
    transition: min-height 0.3s ease, box-shadow 0.3s ease;
}

.collapsible-container.collapsed[b-i6h0ie8gu1] {
    min-height: auto;
}

.title-bar[b-i6h0ie8gu1] {
    display: flex;
    align-items: center;
    padding: 0px 12px;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle), 
        var(--griditem-title-backgroundgradient-color-left),
        var(--griditem-title-backgroundgradient-color-right));
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.375rem 0.375rem 0 0;
    font-family: Roboto;
    letter-spacing: 2px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 1);
    height: var(--griditem-title-height);
    min-height: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.collapsible-container.collapsed .title-bar[b-i6h0ie8gu1] {
    border-radius: 0.375rem;
}

.title-bar:hover[b-i6h0ie8gu1] {
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.8);
    transform: translateY(-1px);
}

.collapse-trigger[b-i6h0ie8gu1] {
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.collapse-trigger i[b-i6h0ie8gu1] {
    font-size: var(--griditem-title-icon-fontsize);
    color: var(--griditem-title-icon-color);
    line-height: 1;
    transition: transform 0.3s ease;
}

.collapsible-container.collapsed .collapse-trigger i[b-i6h0ie8gu1] {
    transform: rotate(180deg);
}

.title-bar:hover .collapse-trigger[b-i6h0ie8gu1] {
    transform: scale(1.1);
}

.title-infos[b-i6h0ie8gu1] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.title-infos h3[b-i6h0ie8gu1] {
    margin: 0;
    font-size: var(--griditem-title-font-size);
    font-weight: var(--griditem-title-font-weight);
    color: var(--griditem-title-font-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-area[b-i6h0ie8gu1] {
    flex: 1;
    display: flex;
    gap: 1rem;
    overflow: hidden;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    max-height: 1000px;
    opacity: 1;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}

.content-area.collapsed[b-i6h0ie8gu1] {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.left-column[b-i6h0ie8gu1] {
    flex: 0 1 40%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.right-column[b-i6h0ie8gu1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.controls-row[b-i6h0ie8gu1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0px;
    padding-left: 10px;
    min-height: 30px;
}

.sensors-table-container[b-i6h0ie8gu1] {
    flex: 1;
    overflow: auto;
    border-radius: 0.25rem;
}

.chart-container[b-i6h0ie8gu1] {
    flex: 1;
    overflow: auto;
    padding: 1rem;
    min-height: 250px;
    background: rgba(255, 255, 255, 0.75);
}

.loading-placeholder[b-i6h0ie8gu1],
.content-placeholder[b-i6h0ie8gu1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: #6c757d;
    gap: 1rem;
}

.content-placeholder p[b-i6h0ie8gu1] {
    margin: 0.25rem 0;
    text-align: center;
}

.error-text[b-i6h0ie8gu1] {
    color: #dc3545;
    font-weight: 500;
}

.bulk-diagnostic-control[b-i6h0ie8gu1] {
    margin-left: auto;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .content-area[b-i6h0ie8gu1] {
        flex-direction: column;
    }

    .column[b-i6h0ie8gu1] {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .title-infos[b-i6h0ie8gu1] {
        flex-wrap: wrap;
    }

    .title-infos h3[b-i6h0ie8gu1] {
        min-width: 100%;
        margin-bottom: 0.25rem;
    }

    .title-infos > div[b-i6h0ie8gu1] {
        width: 100% !important;
    }
}

.diag-Chart[b-i6h0ie8gu1] {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* /Components/SubComponents/DeviceErrorMessages.razor.rz.scp.css */
/* Styles for the container of the raw body display */
.raw-body-display-container[b-xxpo7hgwmw] {
    margin-top: 1.5rem;
    padding: 1rem;
    border: var(--griditem-boxborders-color);
    border-radius: var(--griditem-boxborders-radius);
    background: linear-gradient( 
        var(--griditem-title-backgroundgradient-angle), 
        var(--griditem-title-backgroundgradient-color-left), 
        var(--griditem-title-backgroundgradient-color-right));
    box-shadow: 0 2px 5px var(--griditem-boxshadow-color);
    position: relative;
}

.raw-body-display-container h4[b-xxpo7hgwmw] {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--griditem-title-font-color);
    font-size: var(--griditem-title-font-size);
}

/* Style for the <pre> tag holding the raw body content */
.raw-body-content[b-xxpo7hgwmw] {
    white-space: pre-wrap;      /* CSS 3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    word-wrap: break-word;      /* Internet Explorer 5.5+ */
    padding: 0.75rem;
    border: 1px solid #dcdcdc;  /* Border around the code block */
    border-radius: 3px;
    max-height: 300px;          /* Max height before scrolling */
    overflow-y: auto;           /* Enable vertical scrollbar */
    font-family: Roboto;
    font-size: var(--main-font-size);
    color: var(--main-font-color);
}

/* Ensure the main container can accommodate the new section */
.iot-msgerrors-container[b-xxpo7hgwmw] {
    display: flex;
    flex-direction: column;
}

.iot-msgerrors-table-container[b-xxpo7hgwmw] {
    height:200px;
}
/* /Components/SubComponents/DeviceHardware.razor.rz.scp.css */
.labelBox[b-s0pn9jemkj] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    height: 100%;
}

.error-message[b-s0pn9jemkj] {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 14px;
}

/* Loading container styling */
.labelBox[style*="display: flex; justify-content: center; align-items: center"][b-s0pn9jemkj] {
    min-height: 200px;
}

/* Alert styling for no device data */
.alert[b-s0pn9jemkj] {
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
}

.alert-warning[b-s0pn9jemkj] {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

/* Button container styling */
div[style*="margin-bottom: 15px"][b-s0pn9jemkj] {
    display: flex;
    justify-content: center;
    width: 100%;
}

div[style*="margin-top: 10px"][b-s0pn9jemkj] {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Ensure CitadelInput components have proper spacing */
[b-s0pn9jemkj] .citadel-input-container {
    margin-bottom: 8px;
}

/* Ensure consistent styling for read-only inputs */
[b-s0pn9jemkj] .citadel-input-box[readonly] {
    background-color: #f8f9fa;
    border-color: #e9ecef;
    cursor: not-allowed;
}

[b-s0pn9jemkj] .citadel-input-box[disabled] {
    background-color: #e9ecef;
    border-color: #ced4da;
    cursor: not-allowed;
    opacity: 1;
}

/* Loading component styling within labelBox */
.labelBox Loading[b-s0pn9jemkj] {
    margin: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .labelBox[b-s0pn9jemkj] {
        gap: 10px;
    }
    
    [b-s0pn9jemkj] .citadel-input-container {
        margin-bottom: 6px;
    }
}
/* /Components/SubComponents/DeviceHistorical.razor.rz.scp.css */
.historical-container[b-i06z69216q] {
    overflow: hidden;
}

.historical-container.loading[b-i06z69216q] {
    opacity: 0.7;
}

.loading-message[b-i06z69216q] {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

.title-bar[b-i06z69216q] {
    border-bottom: 1px solid #e9ecef;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.title-bar h4[b-i06z69216q] {
    margin: 0;
    color: #495057;
    font-size: 16px;
    font-weight: 600;
}

.content-area[b-i06z69216q] {
    padding: 0 16px 16px 16px;
}

.controls-row[b-i06z69216q] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.date-quick-buttons[b-i06z69216q] {
    display: flex;
    gap: 8px;
}

.chart-container[b-i06z69216q] {
    position: relative;
}

.chart-area[b-i06z69216q] {
    height: 400px;
    position: relative;
}

.loading-placeholder[b-i06z69216q],
.content-placeholder[b-i06z69216q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 350px;
    text-align: center;
    color: #6c757d;
}

.loading-placeholder i[b-i06z69216q] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
    color: #007bff;
}

.loading-placeholder p[b-i06z69216q],
.content-placeholder p[b-i06z69216q] {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 500;
}

.content-placeholder p[b-i06z69216q] {
    color: #868e96;
    font-size: 14px;
    line-height: 1.4;
}

.controls-row[b-i06z69216q] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.date-quick-buttons[b-i06z69216q] {
    display: flex;
    gap: 0.5rem;
}

.export-button-container[b-i06z69216q] {
    margin-left: auto;
}

@media (max-width: 768px) {
    .controls-row[b-i06z69216q] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .export-button-container[b-i06z69216q] {
        margin-left: 0;
        align-self: flex-end;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .controls-row[b-i06z69216q] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .date-quick-buttons[b-i06z69216q] {
        justify-content: center;
    }
    
    .chart-area[b-i06z69216q],
    .loading-placeholder[b-i06z69216q],
    .content-placeholder[b-i06z69216q] {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .content-area[b-i06z69216q] {
        padding: 0 12px 12px 12px;
    }
    
    .chart-area[b-i06z69216q],
    .loading-placeholder[b-i06z69216q],
    .content-placeholder[b-i06z69216q] {
        height: 250px;
    }
    
    .date-quick-buttons[b-i06z69216q] {
        flex-wrap: wrap;
        gap: 6px;
    }
}
/* /Components/SubComponents/DeviceLatency.razor.rz.scp.css */
.latency-info[b-q9uu61nuka] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.latency-label[b-q9uu61nuka] {
    font-weight: 500;
    color: #495057;
}

.latency-value[b-q9uu61nuka] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #28a745;
    font-weight: 500;
}

.latency-value.disconnected[b-q9uu61nuka] {
    color: #dc3545;
}

.latency-value.error[b-q9uu61nuka] {
    color: #ffc107;
    cursor: help;
}

.latency-loading[b-q9uu61nuka] {
    color: #6c757d;
}
/* /Components/SubComponents/DeviceMessaging.razor.rz.scp.css */
.tab-contain[b-18wons4u8w] {
    height: 100%;
    width: 100%;
    transition: all 0.5s ease-in-out;
    /* Ensure 'slideIn' animation is defined elsewhere or remove if not needed */
    /* animation: slideIn 0.5s ease-out forwards; */
    display: flex; /* Use flexbox for better layout control */
    flex-direction: column; /* Stack title and content vertically */
}

.tab-title-contain[b-18wons4u8w] {
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle),
        var(--griditem-title-backgroundgradient-color-left),
        var(--griditem-title-backgroundgradient-color-right));
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    font-family: Roboto;
    letter-spacing: 2px;
    display: flex;
    gap:10px;
    align-items: center;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 1);
    height: var(--griditem-title-height);
    min-height: 25px;
    flex-shrink: 0; /* Prevent title area from shrinking */
}

.tab-title-contain h3[b-18wons4u8w] {
    margin: 0;
    font-size: var(--griditem-title-font-size);
    font-weight: var(--griditem-title-font-weight);
    color: var(--griditem-title-font-color);
    white-space: nowrap; /* Prevent text wrapping */
}

.tab-title-name-active[b-18wons4u8w],
.tab-title-name-notactive[b-18wons4u8w] {
    padding-right: 20px;
    padding-left: 20px;
    height: 30px; /* Consider using line-height only or align-items on parent */
    line-height: 30px;
    border-right: 1px solid rgba(0,0,0,0.5);
    border-left: 1px solid rgba(0,0,0,0.5);
    display: flex; /* Helps center content vertically if needed */
    align-items: center;
}

.tab-title-name-active[b-18wons4u8w] {
    /* Styles specific to active tab title */
}

.tab-title-name-notactive[b-18wons4u8w] {
    cursor: pointer;
    background-color: rgba(0,0,0,0.25);
}

.tab-title-name-notactive:hover[b-18wons4u8w] {
    background-color: rgba(255,255,255,0.5); /* Consider using CSS variables here too */
}

.tab-contain-content[b-18wons4u8w] {
    padding-top: 20px;
    padding-left: 20px;
    /* Let flexbox handle the height calculation */
    flex-grow: 1; /* Allow content area to fill remaining space */
    width: 100%;
    box-sizing: border-box; /* Include padding in width calculation */
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle),
        var(--griditem-content-backgroundgradient-color-left),
        var(--griditem-content-backgroundgradient-color-right));
    position: relative; /* Needed for potential absolute positioning inside */
    overflow: auto; /* Add scrollbars if content overflows */
}

/* Styles for the content wrappers */
.tab-content-item[b-18wons4u8w] {
    height: 100%; /* Take full height of the container */
    width: 100%; /* Take full width of the container */
}

/* Class to hide the inactive content */
.tab-content-item.hidden[b-18wons4u8w] {
    display: none;
}

/*
@keyframes slideIn { ... }
Define slideIn animation if you intend to use it
*/

/* Removed unused @keyframes fadeIn */
/* /Components/SubComponents/DeviceMonitoring.razor.rz.scp.css */
.flexcontainer[b-wrib8bt7az] {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex: 1;
    height: 100%;
    overflow: hidden;
}

.left[b-wrib8bt7az] {
    width: 45%;
    min-width: 400px;
    height: 100%;
    border-right: 1px solid var(--border-color, #ccc);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 20px;
    overflow: hidden;
}

.right[b-wrib8bt7az] {
    width: 48%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.device-monitor[b-wrib8bt7az] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.placeholder-text[b-wrib8bt7az] {
    color: var(--main-font-color, #6c757d);
    font-style: italic;
    text-align: center;
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-message[b-wrib8bt7az] {
    color: var(--main-font-color, #dc3545);
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    background-color: var(--error-background-light, #f8d7da);
    border: 1px solid var(--error-border-light, #f5c6cb);
}

.info-message[b-wrib8bt7az] { 
    color: var(--info-color, #0c5460);
    background-color: var(--info-background-light, #d1ecf1);
    border: 1px solid var(--info-border-light, #bee5eb);
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
}

.controls-section[b-wrib8bt7az] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; 
    align-items: flex-start;
}

.status-message[b-wrib8bt7az] {
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.status-connected[b-wrib8bt7az] {
    color: var(--success-color-dark, #155724);
    background-color: var(--success-background-light, #d4edda);
    border: 1px solid var(--success-border-light, #c3e6cb);
}

.status-connecting[b-wrib8bt7az] { 
    color: var(--warning-color-dark, #856404);
    background-color: var(--warning-background-light, #fff3cd);
    border: 1px solid var(--warning-border-light, #ffeeba);
}

.status-disconnected[b-wrib8bt7az] {
    color: var(--error-color-dark, #721c24);
    background-color: var(--error-background-light, #f8d7da);
    border: 1px solid var(--error-border-light, #f5c6cb);
}


.datatable-container[b-wrib8bt7az] {
    flex-grow: 1;
    overflow: hidden;
    border-top: 1px solid var(--border-color-light, #eee);
    margin-top: 1rem;
    padding-top: 1rem;
}

.datatable-container[b-wrib8bt7az]  .no-data-message { 
    padding: 1rem;
    text-align: center;
    font-style: italic;
    color: var(--text-color-secondary, #6c757d);
}

.message-detail-section[b-wrib8bt7az] {
    padding: 0 1rem 1rem 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.message-header-detail[b-wrib8bt7az] {
    font-size: 0.9em;
    color: var(--main-font-color, #555);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--border-color-lighter, #eee);
    word-wrap: break-word;
    flex-shrink: 0;
}

.message-header-detail strong[b-wrib8bt7az] {
    color: var(--main-font-color, #333);
    font-size: var(--main-font-size, 1em);
}

.message-detail-section pre[b-wrib8bt7az] {
    padding: 0.75rem;
    overflow: auto;
    background: var(--inputSelect-background-color, #f8f9fa);
    border: 1px solid var(--input-border-color, #eee);
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-all;
    flex-grow: 1;
    font-size: 0.9em;
}

.message-detail-section pre:hover[b-wrib8bt7az] {
    background: var(--input-background-color-hover, #f0f0f0);
    border: 1px solid var(--input-border-color-hover, #ccc);
}

.message-detail-section code[b-wrib8bt7az] {
    font-family: Roboto;
    color: var(--code-text-color, #212529);
}

.right .placeholder-text[b-wrib8bt7az] {
    font-style: italic;
    color: var(--text-color-secondary, #6c757d);
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* /Components/SubComponents/DeviceNotes.razor.rz.scp.css */
.notes-container[b-mu2bwd0d5v] {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.loading-overlay[b-mu2bwd0d5v] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.error-message[b-mu2bwd0d5v] {
    color: var(--bs-danger);
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 10px;
    margin: 10px;
    font-size: var(--main-font-size);
}

.notes-input-container[b-mu2bwd0d5v] {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.saving-indicator[b-mu2bwd0d5v],
.save-status[b-mu2bwd0d5v] {
    position: absolute;
    bottom: 8px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--main-font-color);
    background-color: var(--inputSelect-background-color);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--input-border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.saving-indicator[b-mu2bwd0d5v] {
    color: var(--button-disabled-font-color);
}

.save-status[b-mu2bwd0d5v] {
    color: var(--main-font-color);
}

.text-success[b-mu2bwd0d5v] {
    color: #28a745 !important;
}

/* Ensure the textarea takes full space */
[b-mu2bwd0d5v] .notes-input-container .citadel-input-wrapper {
    height: 100%;
    flex: 1;
}

[b-mu2bwd0d5v] .notes-input-container .citadel-textarea {
    height: 100% !important;
    resize: none;
    border: none !important;
    background: transparent !important;
    padding: 12px;
    font-family: inherit;
}

[b-mu2bwd0d5v] .notes-input-container .citadel-textarea:focus {
    outline: none;
    box-shadow: none !important;
    border: none !important;
}

[b-mu2bwd0d5v] .notes-input-container .citadel-textarea:disabled {
    background: transparent !important;
    opacity: 0.7;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .saving-indicator[b-mu2bwd0d5v],
    .save-status[b-mu2bwd0d5v] {
        bottom: 4px;
        right: 8px;
        font-size: 0.7rem;
        padding: 2px 6px;
    }
}

.frame-container[b-mu2bwd0d5v] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 5px 5px 10px var(--griditem-boxshadow-color);
}

.case-sticky-frame-top[b-mu2bwd0d5v] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFB7D;
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    height: var(--griditem-title-height);
    min-height: 30px;
}

.frame-title[b-mu2bwd0d5v] {
    font-size: var(--griditem-title-font-size);
    color: #444;
}

.case-sticky-frame-bottom[b-mu2bwd0d5v] {
    flex: 1 1 auto;
    width: 100%;
    background-color: #FFFEC4;
}
/* /Components/SubComponents/DeviceOutages.razor.rz.scp.css */
.outage-container[b-9tyzk3urce] {
    overflow: hidden;
}

.content-area[b-9tyzk3urce] {
}


.chart-area[b-9tyzk3urce] {
    height: 200px;
    position: relative;
}

.loading-placeholder[b-9tyzk3urce],
.error-placeholder[b-9tyzk3urce],
.no-data-placeholder[b-9tyzk3urce] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 350px;
    text-align: center;
    color: #6c757d;
}

.loading-placeholder i[b-9tyzk3urce],
.error-placeholder i[b-9tyzk3urce],
.no-data-placeholder i[b-9tyzk3urce] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.error-placeholder i[b-9tyzk3urce] {
    color: #dc3545;
}

.loading-placeholder i[b-9tyzk3urce] {
    color: #007bff;
}

.loading-placeholder p[b-9tyzk3urce],
.error-placeholder p[b-9tyzk3urce],
.no-data-placeholder p[b-9tyzk3urce] {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 500;
}

.error-placeholder small[b-9tyzk3urce],
.no-data-placeholder small[b-9tyzk3urce] {
    color: #868e96;
    font-size: 14px;
    line-height: 1.4;
}

/* Summary Cards - Now below the chart */
.summary-cards[b-9tyzk3urce] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.summary-card[b-9tyzk3urce] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    overflow: hidden;
}

.card-header[b-9tyzk3urce] {
    background: #495057;
    color: white;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.latency-card .card-header[b-9tyzk3urce] {
    background: #17a2b8;
}

.power-card .card-header[b-9tyzk3urce] {
    background: #ffc107;
    color: #212529;
}

.card-content[b-9tyzk3urce] {
    padding: 12px;
}

.stat-row[b-9tyzk3urce] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.stat-row:last-child[b-9tyzk3urce] {
    margin-bottom: 0;
}

.stat-label[b-9tyzk3urce] {
    font-size: 13px;
    color: #6c757d;
    font-weight: 500;
}

.stat-value[b-9tyzk3urce] {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
}

.stat-value.power-lost[b-9tyzk3urce] {
    color: #dc3545;
}

.stat-value.power-back[b-9tyzk3urce] {
    color: #28a745;
}

.loading-indicator[b-9tyzk3urce] {
    text-align: center;
    padding: 20px;
    color: #6c757d;
}

.error-text[b-9tyzk3urce] {
    color: #dc3545;
    font-size: 12px;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .summary-cards[b-9tyzk3urce] {
        grid-template-columns: 1fr;
    }
    
    /* ✅ ADDED: Responsive chart height for mobile */
    .chart-area[b-9tyzk3urce],
    .loading-placeholder[b-9tyzk3urce],
    .error-placeholder[b-9tyzk3urce],
    .no-data-placeholder[b-9tyzk3urce] {
        height: 400px;
    }
}

@media (max-width: 480px) {
    /* ✅ ADDED: Even smaller height for very small screens */
    .chart-area[b-9tyzk3urce],
    .loading-placeholder[b-9tyzk3urce],
    .error-placeholder[b-9tyzk3urce],
    .no-data-placeholder[b-9tyzk3urce] {
        height: 350px;
    }
}

/* Loading state for container */
.outage-container.loading[b-9tyzk3urce] {
    opacity: 0.7;
}

.loading-message[b-9tyzk3urce] {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}
/* /Components/SubComponents/DevicePeekMessages.razor.rz.scp.css */
.flexcontainer[b-ouqhw86dte] {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex: 1;
    height: 100%;
    overflow: hidden;
}

.left[b-ouqhw86dte] {
    width: 45%;
    min-width: 400px;
    height: 100%;
    border-right: 1px solid var(--border-color, #ccc);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 20px;
    overflow: hidden;
}

.right[b-ouqhw86dte] {
    width: 48%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.device-peek-messages[b-ouqhw86dte] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.placeholder-text[b-ouqhw86dte] {
    color: var(--main-font-color, #6c757d);
    font-style: italic;
    text-align: center;
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.controls-section[b-ouqhw86dte] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.input-group[b-ouqhw86dte] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.loading-indicator[b-ouqhw86dte] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--main-font-color, #555);
    padding: 0.5rem 0;
}

.error-message[b-ouqhw86dte] {
    color: var(--main-font-color, #dc3545);
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.info-message[b-ouqhw86dte] {
    color: var(--info-color, #0c5460);
    background-color: var(--info-background-light, #d1ecf1);
    border: 1px solid var(--info-border-light, #bee5eb);
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
}

.datatable-container[b-ouqhw86dte] {
    flex-grow: 1;
    overflow: hidden;
    border-top: 1px solid var(--border-color-light, #eee);
}

.right h3[b-ouqhw86dte] {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color-light, #eee);
}

.message-detail-section[b-ouqhw86dte] {
    padding: 0 1rem 1rem 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.message-header-detail[b-ouqhw86dte] {
    font-size: 0.9em;
    color: var(--main-font-color, #555);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--border-color-lighter, #eee);
    word-wrap: break-word;
    flex-shrink: 0;
}

.message-header-detail strong[b-ouqhw86dte] {
    color: var(--main-font-color, #333);
    font-size: var(--main-font-size, 1em);
}

.message-detail-section h6[b-ouqhw86dte] {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    flex-shrink: 0;
}

.message-detail-section pre[b-ouqhw86dte] {
    padding: 0.75rem;
    overflow: auto;
    background: var(--inputSelect-background-color, #f8f9fa);
    border: 1px solid var(--input-border-color, #eee);
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-all;
    flex-grow: 1;
    font-size: 0.9em;
}

.message-detail-section pre:hover[b-ouqhw86dte] {
    background: var(--input-background-color-hover, #f0f0f0);
    border: 1px solid var(--input-border-color-hover, #ccc);
}

.message-detail-section code[b-ouqhw86dte] {
    font-family: Roboto;
    color: var(--code-text-color, #212529);
}
/* /Components/SubComponents/DeviceRecords.razor.rz.scp.css */
.records-container[b-s0zhdi9ob1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    height: 100%;
}

.error-message[b-s0zhdi9ob1] {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 14px;
}

/* Loading container styling */
.records-container[style*="display: flex; justify-content: center; align-items: center"][b-s0zhdi9ob1] {
    min-height: 200px;
}

/* Alert styling for no device data */
.alert[b-s0zhdi9ob1] {
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
}

.alert-warning[b-s0zhdi9ob1] {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

/* === Custom input layout for site autocomplete using CitadelInput styling === */
.custom-input-layout-container[b-s0zhdi9ob1] {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    height: auto;
}

.citadel-input-container.label-left[b-s0zhdi9ob1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    height: auto;
    margin-bottom: 0; /* Container handles spacing */
}

.citadel-input-label[b-s0zhdi9ob1] {
    font-size: var(--main-font-size);
    color: var(--main-font-color);
    white-space: nowrap;
    display: inline-block;
    flex-shrink: 0;
    margin-right: 20px; /* Same as CitadelInput */
}

.citadel-input-wrapper[b-s0zhdi9ob1] {
    position: relative;
    display: flex;
    flex-grow: 1;
    min-width: 0;
    width: auto;
    height: auto;
}

.citadel-input-box[b-s0zhdi9ob1] {
    padding: var(--input-padding-vertical) var(--input-padding-horizontal);
    box-sizing: border-box;
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    font-size: var(--main-font-size);
    background-color: var(--inputSelect-background-color);
    color: var(--input-font-color);
    transition: all 0.2s ease;
    width: 100%; /* Fill the wrapper */
}

.citadel-input-box:not(:disabled):focus[b-s0zhdi9ob1] {
    outline: none;
    border-color: var(--input-border-color-hover);
    box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
    background-color: var(--input-background-color-hover);
}

.citadel-input-box:not(:disabled):hover[b-s0zhdi9ob1] {
    background-color: var(--input-background-color-hover);
    border-color: var(--input-border-color-hover);
}

.citadel-input-box:disabled[b-s0zhdi9ob1] {
    background-color: transparent !important;
    border: 1px solid var(--input-border-color);
    color: var(--input-font-color);
    cursor: default;
    opacity: 1;
    box-shadow: none !important;
}

.citadel-input-box[b-s0zhdi9ob1]::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

/* === Autocomplete suggestions using CitadelInput variables === */
.autocomplete-suggestions[b-s0zhdi9ob1] {
    position: absolute;
    background: var(--inputSelect-background-color);
    border: 1px solid var(--input-border-color);
    border-top: none;
    border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
    max-height: 250px;
    min-height: 40px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
    animation: slideDown-b-s0zhdi9ob1 0.2s ease-out;
}

@keyframes slideDown-b-s0zhdi9ob1 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.autocomplete-suggestions li[b-s0zhdi9ob1] {
    padding: var(--input-padding-vertical) var(--input-padding-horizontal);
    min-height: 25px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid var(--input-border-color);
    background-color: var(--inputSelect-background-color);
    font-size: var(--main-font-size);
    color: var(--input-font-color);
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete-suggestions li:hover[b-s0zhdi9ob1] {
    background-color: var(--input-background-color-hover);
    color: var(--main-font-color);
    transform: translateX(2px);
}

.autocomplete-suggestions li:active[b-s0zhdi9ob1] {
    background-color: var(--input-border-color-hover);
}

.autocomplete-suggestions li:last-child[b-s0zhdi9ob1] {
    border-bottom: none;
    border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
}

.autocomplete-suggestions li:first-child[b-s0zhdi9ob1] {
    padding-top: calc(var(--input-padding-vertical) + 2px);
}

/* Empty state for autocomplete */
.autocomplete-suggestions:empty[b-s0zhdi9ob1]::after {
    content: "No results found";
    display: block;
    padding: var(--input-padding-vertical) var(--input-padding-horizontal);
    color: var(--button-disabled-font-color);
    font-style: italic;
    text-align: center;
    font-size: var(--main-font-size);
}

/* === Button container styling === */
.button-container[b-s0zhdi9ob1] {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 5px;
    padding-top: 15px;
}

/* === CitadelInput component integration === */
[b-s0zhdi9ob1] .citadel-input-container {
    margin-bottom: 8px;
}

/* Ensure consistent styling for read-only inputs using CitadelInput variables */
[b-s0zhdi9ob1] .citadel-input-box[readonly] {
    background-color: transparent !important;
    border: 1px solid var(--input-border-color);
    color: var(--input-font-color);
    cursor: default;
    opacity: 1;
    box-shadow: none !important;
}

[b-s0zhdi9ob1] .citadel-input-box[disabled] {
    background-color: transparent !important;
    border: 1px solid var(--input-border-color);
    color: var(--input-font-color);
    cursor: default;
    opacity: 1;
    box-shadow: none !important;
}

/* Loading component styling within records container */
.records-container Loading[b-s0zhdi9ob1] {
    margin: auto;
}

/* === Responsive adjustments === */
@media (max-width: 768px) {
    .records-container[b-s0zhdi9ob1] {
        gap: 10px;
    }
    
    [b-s0zhdi9ob1] .citadel-input-container {
        margin-bottom: 6px;
    }
    
    .citadel-input-container.label-left[b-s0zhdi9ob1] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .citadel-input-label[b-s0zhdi9ob1] {
        margin-bottom: 5px;
        margin-right: 0;
    }

    .button-container[b-s0zhdi9ob1] {
        flex-direction: column;
        gap: 10px;
    }
    
    /* Mobile autocomplete adjustments */
    .autocomplete-suggestions[b-s0zhdi9ob1] {
        max-height: 200px;
        left: 0 !important;
        right: 0;
        width: auto !important;
    }
    
    .autocomplete-suggestions li[b-s0zhdi9ob1] {
        padding: calc(var(--input-padding-vertical) + 2px) var(--input-padding-horizontal);
        min-height: 48px; /* Larger touch target */
    }
    
    .custom-input-layout-container .citadel-input-container.label-left[b-s0zhdi9ob1] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .custom-input-layout-container .citadel-input-label[b-s0zhdi9ob1] {
        margin-bottom: 5px;
        margin-right: 0;
    }
}

/* === Error handling for site input === */
.custom-input-layout-container .citadel-input-error[b-s0zhdi9ob1] {
    border-color: var(--bs-danger) !important;
}

.custom-input-layout-container .citadel-input-box.citadel-input-error:not(:disabled):focus[b-s0zhdi9ob1] {
    border-color: var(--bs-danger) !important;
}

/* === Consistent spacing with other form elements === */
.custom-input-layout-container + .citadel-input-container[b-s0zhdi9ob1],
.citadel-input-container + .custom-input-layout-container[b-s0zhdi9ob1] {
    /* Ensure consistent spacing between site input and other inputs */
}
/* /Components/SubComponents/DeviceSensors.razor.rz.scp.css */
/* Existing styles from Maintenance_Devices_Edit.razor.css */
.infobox[b-aoozxqiph5] {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    gap: 30px;
}

.infoContainer[b-aoozxqiph5] {
}

.labelBox[b-aoozxqiph5] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.notesbox[b-aoozxqiph5] {
    font-size: 14px;
}

.custom-input-layout-container[b-aoozxqiph5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
}

    .custom-input-layout-container > .citadel-input-container.label-left[b-aoozxqiph5] {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 0;
    }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-label[b-aoozxqiph5] {
            font-size: var(--main-font-size);
            color: var(--main-font-color);
            white-space: nowrap;
            margin-right: 20px;
            flex-shrink: 0;
        }

        .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper[b-aoozxqiph5] {
            display: flex;
            align-items: center;
            flex-grow: 1;
            position: relative;
        }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-aoozxqiph5] {
                padding: var(--input-padding-vertical) var(--input-padding-horizontal);
                box-sizing: border-box;
                border: 1px solid var(--input-border-color);
                border-radius: var(--input-border-radius);
                font-size: var(--main-font-size);
                background-color: var(--inputSelect-background-color);
                color: var(--input-font-color);
                transition: all 0.2s ease;
                width: 100%;
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box.citadel-input-error[b-aoozxqiph5] {
                border-color: var(--bs-danger, #dc3545) !important;
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:hover[b-aoozxqiph5] {
                background-color: var(--input-background-color-hover);
                border-color: var(--input-border-color-hover);
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box:focus[b-aoozxqiph5] {
                outline: none;
                border-color: var(--input-border-color-hover);
                box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
                background-color: var(--input-background-color-hover);
            }

            .custom-input-layout-container > .citadel-input-container.label-left .citadel-input-wrapper .citadel-input-box[b-aoozxqiph5]::placeholder {
                color: rgba(0, 0, 0, 0.3);
            }

.autocomplete-suggestions[b-aoozxqiph5] {
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: var(--input-border-radius);
}

    .autocomplete-suggestions li[b-aoozxqiph5] {
        padding: 8px 12px;
        cursor: pointer;
        font-size: var(--main-font-size);
        color: var(--input-font-color);
    }

        .autocomplete-suggestions li:hover[b-aoozxqiph5] {
            background-color: #f0f0f0;
        }

.custom-input-layout-container > .validation-message[b-aoozxqiph5] {
    color: var(--bs-danger, #dc3545);
    font-size: 0.75rem;              
    margin-top: 4px;                 
    flex-basis: 100%;                
    display: block;                  
    margin-left: calc(150px + 20px); 
}

.createButtonContainer[b-aoozxqiph5] {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    gap: 100px;
}

.mt-4[b-aoozxqiph5], .button-container.mt-4[b-aoozxqiph5] {
    margin-top: 1.5rem !important;
}

.mt-2[b-aoozxqiph5] {
    margin-top: 0.5rem !important;
}

.text-danger[b-aoozxqiph5] {
    color: var(--bs-danger, #dc3545) !important;
}

.sensorColumns[b-aoozxqiph5] {
    display: flex;
    height: 100%;
    width: 100%;
}

.col-left[b-aoozxqiph5] {
    width: 100%; /* Ensure this gives enough space for the table */
    height: 100%;
    display: flex; /* Added to make child .grid-data-table-container take full height */
    flex-direction: column; /* Added */
}

.col-middle[b-aoozxqiph5] {
    background: blue;
    width: 0%;
    height: 100%;
}

.col-right[b-aoozxqiph5] {
    background: yellow;
    width: 0%;
    height: 100%;
}

/* --- Styles COPIED from DataTable.razor.css --- */
/* We assume these are now scoped to Maintenance_Devices_Edit component */

.grid-data-table-container[b-aoozxqiph5] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Toolbar and search-box styles are not strictly needed for the custom table
   as it's currently defined, but included for completeness if you adapt further.
   If your custom table is ONLY inside .col-left, these might need adjustment
   if they were intended to be at the top level of DataTable.
   For now, assuming .grid-data-table-container is directly within .col-left.
*/
.grid-data-table-toolbar[b-aoozxqiph5] {
    padding: 0.5rem;
    padding-left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.search-box[b-aoozxqiph5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 10px;
}

    .search-box label[b-aoozxqiph5] {
        color: var(--main-font-color);
        font-size: var(--main-font-size);
    }

    .search-box input[b-aoozxqiph5] {
        padding: var(--input-padding-vertical) var(--input-padding-horizontal);
        min-width: 180px;
        border: 1px solid var(--input-border-color);
        background-color: var(--input-background-color);
        border-radius: var(--input-border-radius);
        transition: all 0.2s ease;
        color: var(--input-font-color);
    }

.grid-data-table tbody tr.out-of-sync-row td[b-aoozxqiph5] {
    background-color: #fdf2f2 !important; /* Very light red background */
}

/* Ensure hover still works but maintains the red tint */
.grid-data-table tbody tr.out-of-sync-row:hover td[b-aoozxqiph5] {
    background-color: #fbe7e7 !important; /* Slightly darker red on hover */
}

/* Make sure editing highlight takes precedence */
.grid-data-table tbody tr.editing-row-highlight td[b-aoozxqiph5] {
    background-color: #f0f8ff !important; /* Keep blue for editing */
}

.sensor-controls-toolbar[b-aoozxqiph5] {
    display: flex;
    align-items: center;
    justify-content:right;
    gap: 20px;
    padding: 15px 0;
    flex-shrink: 0;
    margin-bottom: 10px;
}

.sensor-controls-toolbar .error-message[b-aoozxqiph5] {
    flex: 1;
    margin: 0;
}

.includeBackground[b-aoozxqiph5] {
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle), 
        var(--griditem-content-backgroundgradient-color-left),
        var(--griditem-content-backgroundgradient-color-right));
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}
/* /Components/SubComponents/DeviceSensorsDiag.razor.rz.scp.css */
.loading-placeholder[b-uwouje78v0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #6c757d;
    gap: 1rem;
}

.no-data-message[b-uwouje78v0] {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
}

.diagnostic-checkbox-container[b-uwouje78v0] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.diagnostic-loading[b-uwouje78v0] {
    display: inline-block;
    color: #0066cc;
}

.tableBackground[b-uwouje78v0] {
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle), 
        var(--griditem-content-backgroundgradient-color-left),
        var(--griditem-content-backgroundgradient-color-right));
}
/* /Components/SubComponents/DeviceSensorsIO.razor.rz.scp.css */
.device-sensors-container[b-oj0w2y4vml] {
    width: 100%;
    height: 100%;
}

.sensor-controls-toolbar[b-oj0w2y4vml] {
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 20px;
    padding: 15px 0;
    flex-shrink: 0;
    margin-bottom: 10px;
}

.error-message[b-oj0w2y4vml] {
    color: var(--bs-danger, #dc3545);
    font-size: 0.85rem;
    margin-left: 20px;
}

.grid-data-table-responsive[b-oj0w2y4vml] {
    width: 100%;
    overflow-x: auto;
}

.grid-data-table[b-oj0w2y4vml] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.grid-data-table th[b-oj0w2y4vml], .grid-data-table td[b-oj0w2y4vml] {
    border: 1px solid #e0e0e0;
    padding: 8px;
    text-align: left;
}

.grid-data-table th[b-oj0w2y4vml] {
    background-color: #f8f9fa;
    font-weight: 600;
}

.no-data[b-oj0w2y4vml] {
    text-align: center;
    color: #888;
    font-size: 1rem;
    padding: 20px;
}

.includeBackground[b-oj0w2y4vml] {
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle, 90deg), 
        var(--griditem-content-backgroundgradient-color-left, #f5f7fa),
        var(--griditem-content-backgroundgradient-color-right, #c3cfe2));
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}
/* /Components/SubComponents/HistoryFeed.razor.rz.scp.css */
.history-feed-container[b-q6gmknmnp2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.loading-container[b-q6gmknmnp2],
.error-container[b-q6gmknmnp2],
.no-data-container[b-q6gmknmnp2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--main-font-color);
    gap: 10px;
}

.error-container[b-q6gmknmnp2] {
    color: #dc3545;
}

.error-container i[b-q6gmknmnp2] {
    font-size: 24px;
}

.no-data-container i[b-q6gmknmnp2] {
    font-size: 32px;
    color: var(--main-font-color);
    opacity: 0.6;
}

.feed-header[b-q6gmknmnp2] {
    padding: 0px 12px;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle), 
        var(--griditem-title-backgroundgradient-color-left),
        var(--griditem-title-backgroundgradient-color-right));
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    font-family: Roboto;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 1);
    height: var(--griditem-title-height);
    min-height: 25px;
}

.feed-title[b-q6gmknmnp2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--griditem-title-font-size);
    font-weight: var(--griditem-title-font-weight);
    color: var(--griditem-title-font-color);
    margin: 0;
}

.feed-title i[b-q6gmknmnp2] {
    font-size: var(--griditem-title-icon-fontsize);
    color: var(--griditem-title-icon-color);
}

.feed-count[b-q6gmknmnp2] {
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    opacity: 0.8;
}

.feed-content[b-q6gmknmnp2] {
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    gap: 12px;
}

/* Custom scrollbar styling */
.feed-content[b-q6gmknmnp2]::-webkit-scrollbar {
    width: 8px;
}

.feed-content[b-q6gmknmnp2]::-webkit-scrollbar-track {
    background: var(--griditem-content-backgroundgradient-color-right);
    border-radius: 4px;
}

.feed-content[b-q6gmknmnp2]::-webkit-scrollbar-thumb {
    background: var(--main-font-color);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.feed-content[b-q6gmknmnp2]::-webkit-scrollbar-thumb:hover {
    background: var(--main-font-color);
    cursor: pointer;
}

/* Mozilla Firefox scrollbar styling */
@supports (scrollbar-width: thin) {
    .feed-content[b-q6gmknmnp2] {
        scrollbar-width: thin;
        scrollbar-color: rgba(13, 31, 36, 0.3) rgba(0, 0, 0, 0.05);
    }
}

.case-group[b-q6gmknmnp2] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--griditem-boxborders-radius);
    box-shadow: 5px 5px 10px var(--griditem-boxshadow-color);
    border: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    transition: all 0.5s ease-in-out;
    margin-bottom: 12px;
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle), 
        var(--griditem-content-backgroundgradient-color-left),
        var(--griditem-content-backgroundgradient-color-right));
}

.case-group:hover[b-q6gmknmnp2] {
    border: 1px solid var(--griditem-boxborders-color-hover);
    box-shadow: 5px 5px 10px var(--griditem-boxshadow-color-hover);
}

.case-group-header[b-q6gmknmnp2] {
    padding: 0px 12px;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle), 
        var(--griditem-title-backgroundgradient-color-left),
        var(--griditem-title-backgroundgradient-color-right));
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    font-family: Roboto;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 1);
    height: var(--griditem-title-height);
    min-height: 25px;
    cursor: pointer;
}

.case-group-title[b-q6gmknmnp2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--griditem-title-font-size);
    font-weight: var(--griditem-title-font-weight);
    color: var(--griditem-title-font-color);
    margin: 0;
    flex: 1;
    overflow: hidden;
}

.case-group-title i[b-q6gmknmnp2] {
    font-size: var(--griditem-title-icon-fontsize);
    color: var(--griditem-title-icon-color);
    flex-shrink: 0;
}

.case-info[b-q6gmknmnp2] {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    flex: 1;
}

.case-id[b-q6gmknmnp2] {
    font-weight: var(--griditem-title-font-weight);
    color: var(--griditem-title-font-color);
    flex-shrink: 0;
}

.case-status[b-q6gmknmnp2] {
    font-weight: var(--griditem-title-font-weight);
    flex-shrink: 0;
}

.case-priority[b-q6gmknmnp2] {
    font-weight: var(--griditem-title-font-weight);
    flex-shrink: 0;
}

.case-group-meta[b-q6gmknmnp2] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: calc(var(--griditem-title-font-size) * 0.9);
    color: var(--griditem-title-font-color);
    opacity: 0.8;
    flex-shrink: 0;
}

.case-task-box[b-q6gmknmnp2] {
    padding: 8px 12px;
    margin: 8px 12px;
    transition: all 0.3s ease;
}

.case-task-content[b-q6gmknmnp2] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    font-weight: 500;
    line-height: 1.4;
    word-wrap: break-word;
}

.case-task-content i[b-q6gmknmnp2] {
    font-size: calc(var(--main-font-size) * 0.9);
    color: var(--main-font-color);
    opacity: 0.7;
    flex-shrink: 0;
}

.case-group-content[b-q6gmknmnp2] {
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle), 
        var(--griditem-content-backgroundgradient-color-left),
        var(--griditem-content-backgroundgradient-color-right));
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 400px;
}

.case-group-content.collapsed[b-q6gmknmnp2] {
    display: none;
}

.journal-entry[b-q6gmknmnp2] {
    padding: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease;
    cursor: pointer;
    animation: slideIn-b-q6gmknmnp2 0.3s ease-out;
}

.journal-entry:hover[b-q6gmknmnp2] {
    background-color: rgba(0, 0, 0, 0.05);
}

.journal-entry:last-child[b-q6gmknmnp2] {
    border-bottom: none;
}

.journal-entry.recent-entry[b-q6gmknmnp2] {
    border-left: 4px solid #198754;
    padding-left: 8px;
}

.entry-header[b-q6gmknmnp2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.entry-meta[b-q6gmknmnp2] {
    flex: 1;
}

.entry-timestamp[b-q6gmknmnp2] {
    font-size: calc(var(--main-font-size) * 0.85);
    color: var(--main-font-color);
    opacity: 0.7;
    font-weight: 500;
}

.entry-author[b-q6gmknmnp2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: calc(var(--main-font-size) * 0.85);
    color: var(--main-font-color);
    opacity: 0.8;
}

.entry-author i[b-q6gmknmnp2] {
    font-size: 12px;
}

.entry-context[b-q6gmknmnp2] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
    padding: 6px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.context-item[b-q6gmknmnp2] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: calc(var(--main-font-size) * 0.85);
    color: var(--main-font-color);
    opacity: 0.8;
}

.context-item i[b-q6gmknmnp2] {
    font-size: 10px;
    opacity: 0.6;
}

.entry-content[b-q6gmknmnp2] {
    margin-bottom: 8px;
}

.journal-note[b-q6gmknmnp2] {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 10px;
    border-radius: 4px;
    border-left: 3px solid var(--griditem-title-backgroundgradient-color-left);
    color: var(--main-font-color);
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.no-note[b-q6gmknmnp2] {
    color: var(--main-font-color);
    opacity: 0.5;
    font-style: italic;
    padding: 6px;
}

.pagination-info[b-q6gmknmnp2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 0, 0, 0.05);
    font-size: calc(var(--main-font-size) * 0.9);
    color: var(--main-font-color);
}

.load-more-btn[b-q6gmknmnp2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle), 
        var(--griditem-title-backgroundgradient-color-left),
        var(--griditem-title-backgroundgradient-color-right));
    color: var(--griditem-title-font-color);
    border: none;
    border-radius: var(--griditem-boxborders-radius);
    cursor: pointer;
    font-size: calc(var(--main-font-size) * 0.9);
    transition: all 0.3s ease;
    box-shadow: 2px 2px 5px var(--griditem-boxshadow-color);
}

.load-more-btn:hover:not(:disabled)[b-q6gmknmnp2] {
    box-shadow: 3px 3px 8px var(--griditem-boxshadow-color-hover);
    transform: translateY(-1px);
}

.load-more-btn:disabled[b-q6gmknmnp2] {
    opacity: 0.6;
    cursor: not-allowed;
}

.load-more-btn i.fa-spin[b-q6gmknmnp2] {
    animation: spin-b-q6gmknmnp2 1s linear infinite;
}

.expand-icon[b-q6gmknmnp2] {
    transition: transform 0.3s ease;
}

.expand-icon.collapsed[b-q6gmknmnp2] {
    transform: rotate(-90deg);
}

@keyframes slideIn-b-q6gmknmnp2 {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spin-b-q6gmknmnp2 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive design */
@media (max-width: 768px) {
    .feed-header[b-q6gmknmnp2] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        height: auto;
        min-height: 40px;
    }
    
    .case-group-header[b-q6gmknmnp2] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        height: auto;
        min-height: 40px;
    }
    
    .case-info[b-q6gmknmnp2] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .case-task-box[b-q6gmknmnp2] {
        margin: 8px 8px;
        padding: 6px 8px;
    }
    
    .case-task-content[b-q6gmknmnp2] {
        font-size: calc(var(--main-font-size) * 0.9);
    }
    
    .entry-header[b-q6gmknmnp2] {
        flex-direction: column;
        gap: 6px;
    }
    
    .entry-context[b-q6gmknmnp2] {
        flex-direction: column;
        gap: 6px;
    }
}
/* /Components/SubComponents/LegacyHistoryFeed.razor.rz.scp.css */
.history-feed-container[b-ienlx2fivy] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.loading-container[b-ienlx2fivy],
.error-container[b-ienlx2fivy],
.no-data-container[b-ienlx2fivy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--main-font-color);
    gap: 10px;
}

.error-container[b-ienlx2fivy] {
    color: #dc3545;
}

.error-container i[b-ienlx2fivy] {
    font-size: 24px;
}

.no-data-container i[b-ienlx2fivy] {
    font-size: 32px;
    color: var(--main-font-color);
    opacity: 0.6;
}

.feed-header[b-ienlx2fivy] {
    padding: 0px 12px;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle), 
        var(--griditem-title-backgroundgradient-color-left),
        var(--griditem-title-backgroundgradient-color-right));
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    font-family: Roboto;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 1);
    height: var(--griditem-title-height);
    min-height: 25px;
}

.feed-title[b-ienlx2fivy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--griditem-title-font-size);
    font-weight: var(--griditem-title-font-weight);
    color: var(--griditem-title-font-color);
    margin: 0;
}

.feed-title i[b-ienlx2fivy] {
    font-size: var(--griditem-title-icon-fontsize);
    color: var(--griditem-title-icon-color);
}

.feed-count[b-ienlx2fivy] {
    font-size: var(--griditem-title-font-size);
    color: var(--griditem-title-font-color);
    opacity: 0.8;
}

.feed-content[b-ienlx2fivy] {
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    gap: 12px;
}

/* Custom scrollbar styling */
.feed-content[b-ienlx2fivy]::-webkit-scrollbar {
    width: 8px;
}

.feed-content[b-ienlx2fivy]::-webkit-scrollbar-track {
    background: var(--griditem-content-backgroundgradient-color-right);
    border-radius: 4px;
}

.feed-content[b-ienlx2fivy]::-webkit-scrollbar-thumb {
    background: var(--main-font-color);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.feed-content[b-ienlx2fivy]::-webkit-scrollbar-thumb:hover {
    background: var(--main-font-color);
    cursor: pointer;
}

/* Mozilla Firefox scrollbar styling */
@supports (scrollbar-width: thin) {
    .feed-content[b-ienlx2fivy] {
        scrollbar-width: thin;
        scrollbar-color: rgba(13, 31, 36, 0.3) rgba(0, 0, 0, 0.05);
    }
}

.case-group[b-ienlx2fivy] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--griditem-boxborders-radius);
    box-shadow: 5px 5px 10px var(--griditem-boxshadow-color);
    border: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    transition: all 0.5s ease-in-out;
    margin-bottom: 12px;
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle), 
        var(--griditem-content-backgroundgradient-color-left),
        var(--griditem-content-backgroundgradient-color-right));
}

.case-group:hover[b-ienlx2fivy] {
    border: 1px solid var(--griditem-boxborders-color-hover);
    box-shadow: 5px 5px 10px var(--griditem-boxshadow-color-hover);
}

.case-group-header[b-ienlx2fivy] {
    padding: 0px 12px;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle), 
        var(--griditem-title-backgroundgradient-color-left),
        var(--griditem-title-backgroundgradient-color-right));
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    font-family: Roboto;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 1);
    height: var(--griditem-title-height);
    min-height: 25px;
    cursor: pointer;
}

.case-group-title[b-ienlx2fivy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--griditem-title-font-size);
    font-weight: var(--griditem-title-font-weight);
    color: var(--griditem-title-font-color);
    margin: 0;
    flex: 1;
    overflow: hidden;
}

.case-group-title i[b-ienlx2fivy] {
    font-size: var(--griditem-title-icon-fontsize);
    color: var(--griditem-title-icon-color);
    flex-shrink: 0;
}

.case-info[b-ienlx2fivy] {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    flex: 1;
}

.case-id[b-ienlx2fivy] {
    font-weight: var(--griditem-title-font-weight);
    color: var(--griditem-title-font-color);
    flex-shrink: 0;
}

.case-status[b-ienlx2fivy] {
    font-weight: var(--griditem-title-font-weight);
    flex-shrink: 0;
}

.case-priority[b-ienlx2fivy] {
    font-weight: var(--griditem-title-font-weight);
    flex-shrink: 0;
}

.case-group-meta[b-ienlx2fivy] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: calc(var(--griditem-title-font-size) * 0.9);
    color: var(--griditem-title-font-color);
    opacity: 0.8;
    flex-shrink: 0;
}

.case-task-box[b-ienlx2fivy] {
    padding: 8px 12px;
    margin: 8px 12px;
    transition: all 0.3s ease;
}

.case-task-content[b-ienlx2fivy] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    font-weight: 500;
    line-height: 1.4;
    word-wrap: break-word;
}

.case-task-content i[b-ienlx2fivy] {
    font-size: calc(var(--main-font-size) * 0.9);
    color: var(--main-font-color);
    opacity: 0.7;
    flex-shrink: 0;
}

.case-group-content[b-ienlx2fivy] {
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle), 
        var(--griditem-content-backgroundgradient-color-left),
        var(--griditem-content-backgroundgradient-color-right));
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 400px;
}

.case-group-content.collapsed[b-ienlx2fivy] {
    display: none;
}

.journal-entry[b-ienlx2fivy] {
    padding: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease;
    cursor: pointer;
    animation: slideIn-b-ienlx2fivy 0.3s ease-out;
}

.journal-entry:hover[b-ienlx2fivy] {
    background-color: rgba(0, 0, 0, 0.05);
}

.journal-entry:last-child[b-ienlx2fivy] {
    border-bottom: none;
}

.journal-entry.recent-entry[b-ienlx2fivy] {
    border-left: 4px solid #198754;
    padding-left: 8px;
}

.entry-header[b-ienlx2fivy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.entry-meta[b-ienlx2fivy] {
    flex: 1;
}

.entry-timestamp[b-ienlx2fivy] {
    font-size: calc(var(--main-font-size) * 0.85);
    color: var(--main-font-color);
    opacity: 0.7;
    font-weight: 500;
}

.entry-author[b-ienlx2fivy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: calc(var(--main-font-size) * 0.85);
    color: var(--main-font-color);
    opacity: 0.8;
}

.entry-author i[b-ienlx2fivy] {
    font-size: 12px;
}

.entry-context[b-ienlx2fivy] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
    padding: 6px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.context-item[b-ienlx2fivy] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: calc(var(--main-font-size) * 0.85);
    color: var(--main-font-color);
    opacity: 0.8;
}

.context-item i[b-ienlx2fivy] {
    font-size: 10px;
    opacity: 0.6;
}

.entry-content[b-ienlx2fivy] {
    margin-bottom: 8px;
}

.journal-note[b-ienlx2fivy] {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 10px;
    border-radius: 4px;
    border-left: 3px solid var(--griditem-title-backgroundgradient-color-left);
    color: var(--main-font-color);
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.no-note[b-ienlx2fivy] {
    color: var(--main-font-color);
    opacity: 0.5;
    font-style: italic;
    padding: 6px;
}

.pagination-info[b-ienlx2fivy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 0, 0, 0.05);
    font-size: calc(var(--main-font-size) * 0.9);
    color: var(--main-font-color);
}

.load-more-btn[b-ienlx2fivy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle), 
        var(--griditem-title-backgroundgradient-color-left),
        var(--griditem-title-backgroundgradient-color-right));
    color: var(--griditem-title-font-color);
    border: none;
    border-radius: var(--griditem-boxborders-radius);
    cursor: pointer;
    font-size: calc(var(--main-font-size) * 0.9);
    transition: all 0.3s ease;
    box-shadow: 2px 2px 5px var(--griditem-boxshadow-color);
}

.load-more-btn:hover:not(:disabled)[b-ienlx2fivy] {
    box-shadow: 3px 3px 8px var(--griditem-boxshadow-color-hover);
    transform: translateY(-1px);
}

.load-more-btn:disabled[b-ienlx2fivy] {
    opacity: 0.6;
    cursor: not-allowed;
}

.load-more-btn i.fa-spin[b-ienlx2fivy] {
    animation: spin-b-ienlx2fivy 1s linear infinite;
}

.expand-icon[b-ienlx2fivy] {
    transition: transform 0.3s ease;
}

.expand-icon.collapsed[b-ienlx2fivy] {
    transform: rotate(-90deg);
}

@keyframes slideIn-b-ienlx2fivy {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spin-b-ienlx2fivy {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive design */
@media (max-width: 768px) {
    .feed-header[b-ienlx2fivy] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        height: auto;
        min-height: 40px;
    }
    
    .case-group-header[b-ienlx2fivy] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        height: auto;
        min-height: 40px;
    }
    
    .case-info[b-ienlx2fivy] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .case-task-box[b-ienlx2fivy] {
        margin: 8px 8px;
        padding: 6px 8px;
    }
    
    .case-task-content[b-ienlx2fivy] {
        font-size: calc(var(--main-font-size) * 0.9);
    }
    
    .entry-header[b-ienlx2fivy] {
        flex-direction: column;
        gap: 6px;
    }
    
    .entry-context[b-ienlx2fivy] {
        flex-direction: column;
        gap: 6px;
    }
}
/* /Components/SubComponents/Logs.razor.rz.scp.css */
.iot-logs-container[b-isypictgd4] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.logs-toolbar[b-isypictgd4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    height: 50px;
    margin-left: 10px;
    margin-right: 10px;
}

.refresh-interval-container[b-isypictgd4] {
    display: flex;
    align-items: center;
    height: 26px;
    margin-right: 15px;
}


.iot-logs-table-container[b-isypictgd4] {
    flex-grow: 1;
    overflow: auto;
}

.alert[b-isypictgd4] {
    padding: 15px;
    margin: 15px;
    border-radius: 4px;
}

.alert-danger[b-isypictgd4] {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}
/* /Components/SubComponents/Metrics.razor.rz.scp.css */
/* /Components/SubComponents/Migration_Automatique_Completed.razor.rz.scp.css */
.auto-completed-container[b-8amxmxof7c] {
    padding: 20px;
}

.completed-summary-box[b-8amxmxof7c] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(40, 167, 69, 0.2);
}

.completed-summary-header[b-8amxmxof7c] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.completed-summary-header i[b-8amxmxof7c] {
    font-size: 1.8rem;
}

.completed-count-badge[b-8amxmxof7c] {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 700;
    margin-left: auto;
}

.completed-summary-body[b-8amxmxof7c] {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
}

.completed-devices-section[b-8amxmxof7c] {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-height: 700px; /* ✅ ADD: Constrain overall section height */
    display: flex;
    flex-direction: column;
}

/* ✅ NEW: Constrain the DataTable container */
.completed-devices-section[b-8amxmxof7c]  .datatable-wrapper {
    max-height: 500px;
    overflow-y: auto;
}

/* ✅ NEW: Ensure table header stays fixed while scrolling */
.completed-devices-section[b-8amxmxof7c]  .datatable-wrapper table {
    position: relative;
}

.completed-devices-section[b-8amxmxof7c]  .datatable-wrapper thead {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.results-header[b-8amxmxof7c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
    flex-shrink: 0; /* ✅ ADD: Prevent header from shrinking */
}

.results-header h4[b-8amxmxof7c] {
    margin: 0;
    color: #28a745;
    font-weight: 600;
}

.results-header h4 i[b-8amxmxof7c] {
    margin-right: 10px;
    color: #ffc107;
}

.results-summary[b-8amxmxof7c] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.results-summary .badge[b-8amxmxof7c] {
    font-size: 0.95rem;
    padding: 8px 16px;
}

.empty-state[b-8amxmxof7c] {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.empty-state i[b-8amxmxof7c] {
    opacity: 0.5;
}

.empty-state p[b-8amxmxof7c] {
    font-size: 1.1rem;
    margin: 10px 0 5px;
}
/* /Components/SubComponents/Migration_Automatique_Errors.razor.rz.scp.css */
.auto-errors-container[b-rc21rkh1ud] {
    padding: 20px;
    background-color: #f8f9fa;
    min-height: 600px;
}

/* Error Summary Box */
.error-summary-box[b-rc21rkh1ud] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #dc3545;
    margin-bottom: 20px;
}

.error-summary-header[b-rc21rkh1ud] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    color: #dc3545;
}

.error-summary-header i[b-rc21rkh1ud] {
    font-size: 1.3rem;
}

.error-count-badge[b-rc21rkh1ud] {
    margin-left: auto;
    background-color: #dc3545;
    color: white;
    font-size: 0.9rem;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 500;
}

.error-summary-body[b-rc21rkh1ud] {
    padding: 15px;
}

/* Error Devices Section */
.error-devices-section[b-rc21rkh1ud] {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.results-header[b-rc21rkh1ud] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
}

.results-header h4[b-rc21rkh1ud] {
    margin: 0;
    color: #2c3e50;
}

.results-header h4 i[b-rc21rkh1ud] {
    color: #dc3545;
    margin-right: 8px;
}

.results-summary[b-rc21rkh1ud] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.results-summary .badge[b-rc21rkh1ud] {
    font-size: 0.9rem;
    padding: 6px 12px;
}

.results-summary small[b-rc21rkh1ud] {
    margin-left: 10px;
}

/* Error Message Cell */
.error-message[b-rc21rkh1ud] {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 8px;
    font-size: 0.9rem;
    cursor: help;
    word-wrap: break-word;
}

/* Empty State */
.empty-state[b-rc21rkh1ud] {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.empty-state i[b-rc21rkh1ud] {
    color: #28a745;
}

.empty-state p[b-rc21rkh1ud] {
    font-size: 1.1rem;
    margin-top: 15px;
    margin-bottom: 5px;
}

/* Action Buttons */
.btn-sm[b-rc21rkh1ud] {
    font-size: 0.85rem;
    padding: 4px 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .results-header[b-rc21rkh1ud] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .results-summary[b-rc21rkh1ud] {
        flex-wrap: wrap;
    }

    .error-message[b-rc21rkh1ud] {
        font-size: 0.85rem;
    }
}
/* /Components/SubComponents/Migration_Automatique_Import.razor.rz.scp.css */
/* Container */
.auto-import-container[b-bndbbi53l8] {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Reduced from 30px */
    padding: 15px; /* Reduced from 20px */
    max-height: calc(100vh - 180px); /* Fit within viewport */
    overflow-y: auto;
}

/* Import Controls Section */
.import-controls-section[b-bndbbi53l8] {
    background: var(--griditem-content-backgroundgradient-color-left, #ffffff);
    border: 1px solid var(--griditem-boxborders-color, #dee2e6);
    border-radius: 8px;
    padding: 15px; /* Reduced from 20px */
}

.header-section[b-bndbbi53l8] {
    margin-bottom: 10px; /* Reduced from 15px */
}

.header-section h4[b-bndbbi53l8] {
    margin: 0 0 3px 0; /* Reduced bottom margin */
    color: var(--main-font-color, #212529);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1em; /* Reduced from 1.1em */
}

.header-section p[b-bndbbi53l8] {
    margin: 0;
    font-size: 0.8em; /* Reduced from 0.85em */
}

.import-options[b-bndbbi53l8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px; /* Reduced from 15px */
}

/* Single Import Box */
.single-import-box[b-bndbbi53l8] {
    background: var(--griditem-title-backgroundgradient-color-left, #f8f9fa);
    border: 1px solid var(--griditem-boxborders-color, #dee2e6);
    border-radius: 6px;
    padding: 10px; /* Reduced from 12px */
}

.single-import-box h5[b-bndbbi53l8] {
    margin: 0 0 8px 0; /* Reduced from 10px */
    color: var(--main-font-color, #495057);
    font-size: 0.9em; /* Reduced from 0.95em */
    display: flex;
    align-items: center;
    gap: 6px;
}

.input-group[b-bndbbi53l8] {
    display: flex;
    align-items: end;
    gap: 8px; /* Reduced from 10px */
}

/* File Import Box */
.file-import-box[b-bndbbi53l8] {
    background: var(--griditem-title-backgroundgradient-color-left, #f8f9fa);
    border: 1px solid var(--griditem-boxborders-color, #dee2e6);
    border-radius: 6px;
    padding: 10px; /* Reduced from 12px */
}

.file-import-box h5[b-bndbbi53l8] {
    margin: 0 0 8px 0; /* Reduced from 10px */
    color: var(--main-font-color, #495057);
    font-size: 0.9em; /* Reduced from 0.95em */
    display: flex;
    align-items: center;
    gap: 6px;
}

.file-upload-area[b-bndbbi53l8] {
    min-height: 90px; /* Reduced from 120px */
    display: flex;
    flex-direction: column;
}

.file-input[b-bndbbi53l8] {
    margin-bottom: 8px; /* Reduced from 10px */
}

.upload-placeholder[b-bndbbi53l8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--griditem-boxborders-color, #dee2e6);
    border-radius: 6px;
    padding: 12px; /* Reduced from 20px */
    text-align: center;
    color: var(--main-font-color, #6c757d);
}

.upload-placeholder i[b-bndbbi53l8] {
    color: var(--griditem-boxborders-color, #dee2e6);
    margin-bottom: 6px; /* Reduced from 10px */
    font-size: 1.5em; /* Reduced from 2em */
}

.upload-placeholder p[b-bndbbi53l8] {
    margin: 3px 0; /* Reduced from 5px */
    font-size: 0.85em; /* Reduced from 0.9em */
}

.upload-placeholder small[b-bndbbi53l8] {
    font-size: 0.75em;
}

.loading-indicator[b-bndbbi53l8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px; /* Reduced from 30px */
    color: var(--main-font-color, #6c757d);
}

.loading-indicator i[b-bndbbi53l8] {
    font-size: 1.2em; /* Reduced from 1.3em */
}

/* File Preview */
.file-preview[b-bndbbi53l8] {
    background: var(--griditem-content-backgroundgradient-color-left, #ffffff);
    border: 1px solid var(--griditem-boxborders-color, #dee2e6);
    border-radius: 6px;
    padding: 10px; /* Reduced from 12px */
}

.preview-header[b-bndbbi53l8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px; /* Reduced from 8px */
    padding-bottom: 6px; /* Reduced from 8px */
    border-bottom: 1px solid var(--griditem-boxborders-color, #dee2e6);
    font-size: 0.85em;
}

.preview-header strong[b-bndbbi53l8] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.file-name[b-bndbbi53l8] {
    font-size: 0.8em; /* Reduced from 0.85em */
    color: var(--main-font-color, #6c757d);
}

.file-preview pre[b-bndbbi53l8] {
    background: var(--griditem-title-backgroundgradient-color-left, #f8f9fa);
    padding: 8px; /* Reduced from 10px */
    border-radius: 4px;
    font-size: 0.8em; /* Reduced from 0.85em */
    max-height: 70px; /* Reduced from 100px */
    overflow-y: auto;
    margin: 6px 0; /* Reduced from 8px */
}

.preview-actions[b-bndbbi53l8] {
    display: flex;
    gap: 6px; /* Reduced from 8px */
    margin-top: 8px; /* Reduced from 10px */
}

/* Validation Results Section */
.validation-results-section[b-bndbbi53l8] {
    background: var(--griditem-content-backgroundgradient-color-left, #ffffff);
    border: 1px solid var(--griditem-boxborders-color, #dee2e6);
    border-radius: 8px;
    padding: 15px; /* Reduced from 25px */
    flex: 1; /* Allow to grow and fill available space */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important for flex scrolling */
}

.results-header[b-bndbbi53l8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px; /* Reduced from 20px */
    padding-bottom: 10px; /* Reduced from 15px */
    border-bottom: 1px solid var(--griditem-boxborders-color, #dee2e6);
    flex-shrink: 0;
}

.results-header h4[b-bndbbi53l8] {
    margin: 0;
    color: var(--main-font-color, #212529);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1em;
}

.results-summary[b-bndbbi53l8] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.results-summary .badge[b-bndbbi53l8] {
    font-size: 0.85em; /* Reduced from 0.9em */
    padding: 4px 10px; /* Reduced from 6px 12px */
    display: flex;
    align-items: center;
    gap: 5px;
}

/* DataTable Container - Allow it to scroll */
.validation-results-section > :global(.data-table-container)[b-bndbbi53l8] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.results-actions[b-bndbbi53l8] {
    display: flex;
    gap: 12px; /* Reduced from 15px */
    margin-top: 12px; /* Reduced from 20px */
    padding-top: 12px; /* Reduced from 20px */
    border-top: 1px solid var(--griditem-boxborders-color, #dee2e6);
    flex-shrink: 0;
}

/* Empty State */
.empty-state[b-bndbbi53l8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px; /* Reduced from 60px */
    text-align: center;
    background: var(--griditem-content-backgroundgradient-color-left, #ffffff);
    border: 1px solid var(--griditem-boxborders-color, #dee2e6);
    border-radius: 8px;
}

.empty-state i[b-bndbbi53l8] {
    color: var(--griditem-boxborders-color, #dee2e6);
    margin-bottom: 15px; /* Reduced from 20px */
    font-size: 2.5em; /* Reduced from 3em */
}

.empty-state h5[b-bndbbi53l8] {
    margin: 8px 0; /* Reduced from 10px */
    color: var(--main-font-color, #495057);
    font-size: 1em;
}

.empty-state p[b-bndbbi53l8] {
    margin: 0;
    color: var(--main-font-color, #6c757d);
    font-size: 0.9em;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .import-options[b-bndbbi53l8] {
        grid-template-columns: 1fr;
    }
}
/* /Components/SubComponents/Migration_Automatique_Process.razor.rz.scp.css */
.auto-process-container[b-32nltgi78n] {
    padding: 20px;
    background-color: #f8f9fa;
    min-height: 600px;
}

/* Compact Service Status Row */
.service-status-row[b-32nltgi78n] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

/* Compact Status Box */
.status-box[b-32nltgi78n] {
    flex: 1;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #6c757d;
    transition: all 0.3s ease;
}

.status-box.status-running[b-32nltgi78n] {
    border-left-color: #28a745;
}

.status-box.status-stopped[b-32nltgi78n] {
    border-left-color: #6c757d;
}

.status-box-header[b-32nltgi78n] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    color: #2c3e50;
}

.status-box-header i[b-32nltgi78n] {
    font-size: 1.2rem;
}

.status-badge[b-32nltgi78n] {
    margin-left: auto;
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.status-box.status-running .status-badge[b-32nltgi78n] {
    background-color: #d4edda;
    color: #155724;
}

.status-box.status-stopped .status-badge[b-32nltgi78n] {
    background-color: #e2e3e5;
    color: #383d41;
}

.status-box-body[b-32nltgi78n] {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-stats[b-32nltgi78n] {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: #6c757d;
}

.status-stats strong[b-32nltgi78n] {
    color: #2c3e50;
    font-size: 1.1rem;
}

.status-message[b-32nltgi78n] {
    font-size: 0.9rem;
    color: #6c757d;
    min-height: 20px;
}

/* Active Devices Section */
.active-devices-section[b-32nltgi78n] {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.results-header[b-32nltgi78n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
}

.results-header h4[b-32nltgi78n] {
    margin: 0;
    color: #2c3e50;
}

.results-summary[b-32nltgi78n] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.results-summary .badge[b-32nltgi78n] {
    font-size: 0.9rem;
    padding: 6px 12px;
}

.results-summary small[b-32nltgi78n] {
    margin-left: 10px;
}

/* Empty State */
.empty-state[b-32nltgi78n] {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.empty-state i[b-32nltgi78n] {
    color: #dee2e6;
}

.empty-state p[b-32nltgi78n] {
    font-size: 1.1rem;
    margin-top: 15px;
    margin-bottom: 5px;
}

/* Progress Bar (in DataTable) */
.progress-bar[b-32nltgi78n] {
    background-color: #007bff;
    transition: width 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .service-status-row[b-32nltgi78n] {
        flex-direction: column;
    }

    .results-header[b-32nltgi78n] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .results-summary[b-32nltgi78n] {
        flex-wrap: wrap;
    }
}
/* /Components/SubComponents/Migration_Automatique_Validate.razor.rz.scp.css */
.auto-validate-container[b-ip0vn10gip] {
    padding: 20px;
    background-color: #f8f9fa;
    min-height: 600px;
}

/* Validation Summary Box */
.validate-summary-box[b-ip0vn10gip] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #28a745;
    margin-bottom: 20px;
}

.validate-summary-header[b-ip0vn10gip] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    color: #28a745;
}

.validate-summary-header i[b-ip0vn10gip] {
    font-size: 1.3rem;
}

.validate-count-badge[b-ip0vn10gip] {
    margin-left: auto;
    background-color: #28a745;
    color: white;
    font-size: 0.9rem;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 500;
}

.validate-summary-body[b-ip0vn10gip] {
    padding: 15px;
}

/* Validation Devices Section */
.validate-devices-section[b-ip0vn10gip] {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.results-header[b-ip0vn10gip] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
}

.results-header h4[b-ip0vn10gip] {
    margin: 0;
    color: #2c3e50;
}

.results-header h4 i[b-ip0vn10gip] {
    color: #28a745;
    margin-right: 8px;
}

.results-summary[b-ip0vn10gip] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.results-summary .badge[b-ip0vn10gip] {
    font-size: 0.9rem;
    padding: 6px 12px;
}

.results-summary small[b-ip0vn10gip] {
    margin-left: 10px;
}

/* Progress Bar */
.progress[b-ip0vn10gip] {
    background-color: #e9ecef;
}

.progress-bar[b-ip0vn10gip] {
    background-color: #28a745;
    transition: width 0.3s ease;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Empty State */
.empty-state[b-ip0vn10gip] {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.empty-state i[b-ip0vn10gip] {
    color: #dee2e6;
}

.empty-state p[b-ip0vn10gip] {
    font-size: 1.1rem;
    margin-top: 15px;
    margin-bottom: 5px;
}

/* Action Buttons */
.btn-sm[b-ip0vn10gip] {
    font-size: 0.85rem;
    padding: 4px 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .results-header[b-ip0vn10gip] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .results-summary[b-ip0vn10gip] {
        flex-wrap: wrap;
    }
}
/* /Components/SubComponents/Migration_Modal.razor.rz.scp.css */
/* Modal Overlay */
.migration-modal-overlay[b-elo6bzfw36] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50000;
    padding: 20px;
    backdrop-filter: blur(2px);
}

/* Modal Container - Made 2x Bigger */
.migration-modal-container[b-elo6bzfw36] {
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle, 180deg), 
        var(--griditem-content-backgroundgradient-color-left, #ffffff),
        var(--griditem-content-backgroundgradient-color-right, #f8f9fa)
    );
    border-radius: var(--griditem-boxborders-radius, 8px);
    box-shadow: 5px 5px 20px var(--griditem-boxshadow-color, rgba(0, 0, 0, 0.3));
    border: var(--griditem-boxborders-size, 1px) solid var(--griditem-boxborders-color, #dee2e6);
    max-width: 1600px;
    width: 95%;
    max-height: 95vh;
    min-height: 800px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 50001;
}

/* Header - Using GridItem title styling */
.migration-modal-header[b-elo6bzfw36] {
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle, 90deg), 
        var(--griditem-title-backgroundgradient-color-left, #f8f9fa),
        var(--griditem-title-backgroundgradient-color-right, #e9ecef)
    );
    padding: 20px 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
    font-family: Roboto, sans-serif;
    letter-spacing: 1px;
}

.migration-modal-header h3[b-elo6bzfw36] {
    margin: 0;
    font-size: var(--griditem-title-font-size, 18px);
    font-weight: var(--griditem-title-font-weight, 600);
    color: var(--griditem-title-font-color, #495057);
    display: flex;
    align-items: center;
    gap: 12px;
}

.migration-modal-header h3[b-elo6bzfw36]::before {
    content: "🔄";
    font-size: 20px;
}

.close-button[b-elo6bzfw36] {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--griditem-title-icon-color, #6c757d);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--griditem-boxborders-radius, 4px);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.close-button:hover[b-elo6bzfw36] {
    background: rgba(0, 0, 0, 0.1);
    color: var(--griditem-title-font-color, #495057);
    transform: scale(1.1);
}

/* Progress Bar */
.progress-container[b-elo6bzfw36] {
    padding: 20px 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--griditem-content-backgroundgradient-color-left, #ffffff);
}

.progress-bar[b-elo6bzfw36] {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    height: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-fill[b-elo6bzfw36] {
    background: linear-gradient(45deg, 
        #000000, 
        #333333
    );
    height: 100%;
    transition: width 0.4s ease;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.progress-text[b-elo6bzfw36] {
    font-size: var(--main-font-size, 16px);
    color: var(--main-font-color, #6c757d);
    font-weight: 500;
    font-family: Roboto, sans-serif;
    letter-spacing: 0.5px;
}

/* Error Message */
.error-message[b-elo6bzfw36] {
    background: linear-gradient(90deg, #f8d7da, #f5c6cb);
    color: #721c24;
    padding: 16px 30px;
    border-left: 4px solid #dc3545;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Content Area */
.migration-modal-content[b-elo6bzfw36] {
    flex: 1;
    padding: 40px;
    overflow-y: auto;
    overflow-x: visible;
    background: var(--griditem-content-backgroundgradient-color-right, #f8f9fa);
    color: var(--main-font-color, #495057);
    font-size: var(--main-font-size, 16px);
}

/* Custom scrollbar styling to match GridItem */
.migration-modal-content[b-elo6bzfw36]::-webkit-scrollbar {
    width: 12px;
}

.migration-modal-content[b-elo6bzfw36]::-webkit-scrollbar-track {
    background: var(--griditem-content-backgroundgradient-color-right, #f8f9fa);
    border-radius: 6px;
}

.migration-modal-content[b-elo6bzfw36]::-webkit-scrollbar-thumb {
    background: var(--main-font-color, #6c757d);
    border-radius: 6px;
    transition: background 0.3s ease;
}

.migration-modal-content[b-elo6bzfw36]::-webkit-scrollbar-thumb:hover {
    background: var(--griditem-title-font-color, #495057);
    cursor: pointer;
}

.step-section h4[b-elo6bzfw36] {
    color: var(--griditem-title-font-color, #495057);
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: var(--griditem-title-font-weight, 600);
    font-size: 20px;
    font-family: Roboto, sans-serif;
    letter-spacing: 1px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--griditem-boxborders-color, #dee2e6);
}

.step-section h4 i[b-elo6bzfw36] {
    color: var(--griditem-title-icon-color, #007bff);
    font-size: var(--griditem-title-icon-fontsize, 20px);
}

/* Form Styling - FIXED VERSION ONLY */
.form-group[b-elo6bzfw36] {
    margin-bottom: 25px;
}

.form-grid[b-elo6bzfw36] {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* FIXED: Hard-coded 2 columns */
    gap: 25px; /* FIXED: Hard-coded gap */
    margin-top: 20px;
}

.form-grid .form-group[b-elo6bzfw36] {
    margin-bottom: 0;
}

.form-grid .form-group.full-width[b-elo6bzfw36] {
    grid-column: 1 / -1;
}

/* Info Box */
.info-box[b-elo6bzfw36] {
    background: linear-gradient(135deg, #d1ecf1, #bee5eb);
    color: #0c5460;
    padding: 20px;
    border-radius: var(--griditem-boxborders-radius, 8px);
    border-left: 4px solid #17a2b8;
    margin-top: 30px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-weight: 500;
}

.info-box i[b-elo6bzfw36] {
    margin-top: 3px;
    flex-shrink: 0;
    font-size: 18px;
}

/* Footer */
.migration-modal-footer[b-elo6bzfw36] {
    background: linear-gradient(
        var(--griditem-title-backgroundgradient-angle, 90deg), 
        var(--griditem-title-backgroundgradient-color-left, #f8f9fa),
        var(--griditem-title-backgroundgradient-color-right, #e9ecef)
    );
    padding: 25px 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
}

.footer-spacer[b-elo6bzfw36] {
    flex: 1;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .migration-modal-container[b-elo6bzfw36] {
        max-width: 90%;
        width: 90%;
    }
    
    .form-grid[b-elo6bzfw36] {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .migration-modal-overlay[b-elo6bzfw36] {
        padding: 10px;
    }
    
    .migration-modal-container[b-elo6bzfw36] {
        max-width: 95%;
        max-height: 98vh;
        min-height: auto;
    }
    
    .migration-modal-header[b-elo6bzfw36],
    .migration-modal-footer[b-elo6bzfw36] {
        padding: 20px;
    }
    
    .migration-modal-content[b-elo6bzfw36] {
        padding: 25px;
    }
    
    .progress-container[b-elo6bzfw36] {
        padding: 15px 20px;
    }
}

/* Enhanced Animations */
.migration-modal-overlay[b-elo6bzfw36] {
    animation: fadeIn-b-elo6bzfw36 0.3s ease-out;
}

.migration-modal-container[b-elo6bzfw36] {
    animation: slideUp-b-elo6bzfw36 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes fadeIn-b-elo6bzfw36 {
    from { 
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to { 
        opacity: 1;
        backdrop-filter: blur(2px);
    }
}

@keyframes slideUp-b-elo6bzfw36 {
    from { 
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Step Section Styling with GridItem animation */
.step-section[b-elo6bzfw36] {
    animation: slideIn-b-elo6bzfw36 0.4s ease-out;
    background: var(--griditem-content-backgroundgradient-color-left, #ffffff);
    padding: 30px;
    border-radius: var(--griditem-boxborders-radius, 8px);
    border: var(--griditem-boxborders-size, 1px) solid var(--griditem-boxborders-color, #dee2e6);
    box-shadow: 2px 2px 8px var(--griditem-boxshadow-color, rgba(0, 0, 0, 0.1));
    transition: all 0.3s ease;
    overflow: visible;
    position: relative;
}

.step-section:hover[b-elo6bzfw36] {
    border: 1px solid var(--griditem-boxborders-color-hover, #007bff);
    box-shadow: 3px 3px 12px var(--griditem-boxshadow-color-hover, rgba(0, 123, 255, 0.2));
}

@keyframes slideIn-b-elo6bzfw36 {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mozilla Firefox scrollbar styling */
@supports (scrollbar-width: thin) {
    .migration-modal-content[b-elo6bzfw36] {
        scrollbar-width: thin;
        scrollbar-color: var(--main-font-color, #6c757d) var(--griditem-content-backgroundgradient-color-right, #f8f9fa);
    }
}

/* Address Search Section */
.address-search-section[b-elo6bzfw36] {
    background: var(--griditem-content-backgroundgradient-color-left, #ffffff);
    padding: 20px;
    border-radius: var(--griditem-boxborders-radius, 8px);
    border: 1px solid var(--griditem-boxborders-color, #dee2e6);
    margin-bottom: 25px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: visible;
    position: relative;
}

.address-search-section h5[b-elo6bzfw36] {
    margin: 0 0 15px 0;
    color: var(--griditem-title-font-color, #495057);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.address-search-section h5 i[b-elo6bzfw36] {
    color: var(--griditem-title-icon-color, #007bff);
}

/* Custom input layout for address autocomplete */
.custom-input-layout-container[b-elo6bzfw36] {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    z-index: 1;
}

.citadel-input-container.label-left[b-elo6bzfw36] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
}

.citadel-input-label[b-elo6bzfw36] {
    font-size: var(--main-font-size, 16px);
    color: var(--main-font-color, #495057);
    white-space: nowrap;
    display: inline-block;
    flex-shrink: 0;
    margin-right: 20px;
    font-weight: 500;
}

.citadel-input-wrapper[b-elo6bzfw36] {
    position: relative;
    display: flex;
    flex-grow: 1;
    min-width: 0;
}

.citadel-input-box[b-elo6bzfw36] {
    padding: var(--input-padding-vertical, 10px) var(--input-padding-horizontal, 12px);
    box-sizing: border-box;
    border: 1px solid var(--input-border-color, #ced4da);
    border-radius: var(--input-border-radius, 6px);
    font-size: var(--main-font-size, 16px);
    background-color: var(--inputSelect-background-color, #ffffff);
    color: var(--input-font-color, #495057);
    transition: all 0.2s ease;
    width: 100%;
}

.citadel-input-box:not(:disabled):focus[b-elo6bzfw36] {
    outline: none;
    border-color: var(--input-border-color-hover, #007bff);
    box-shadow: 0 2px 4px var(--griditem-boxshadow-color, rgba(0, 123, 255, 0.15));
    background-color: var(--input-background-color-hover, #ffffff);
}

.citadel-input-box:not(:disabled):hover[b-elo6bzfw36] {
    background-color: var(--input-background-color-hover, #ffffff);
    border-color: var(--input-border-color-hover, #007bff);
}

.citadel-input-box[b-elo6bzfw36]::placeholder {
    color: rgba(var(--main-font-color, 73, 80, 87), 0.5);
    font-style: italic;
}

/* Search spinner */
.search-spinner[b-elo6bzfw36] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--griditem-title-icon-color, #007bff);
}

/* Address autocomplete suggestions */
.autocomplete-suggestions.address-suggestions[b-elo6bzfw36] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--inputSelect-background-color, #ffffff);
    border: 1px solid var(--input-border-color, #ced4da);
    border-top: none;
    border-radius: 0 0 var(--input-border-radius, 6px) var(--input-border-radius, 6px);
    max-height: 250px;
    min-height: 40px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100000;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    animation: slideDown-b-elo6bzfw36 0.2s ease-out;
}

@keyframes slideDown-b-elo6bzfw36 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.address-suggestion-item[b-elo6bzfw36] {
    padding: var(--input-padding-vertical, 10px) var(--input-padding-horizontal, 12px);
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    border-bottom: 1px solid var(--input-border-color, #ced4da);
    background-color: var(--inputSelect-background-color, #ffffff);
    font-size: var(--main-font-size, 16px);
    color: var(--input-font-color, #495057);
    transition: all 0.2s ease;
    overflow: hidden;
}

.address-suggestion-item:hover[b-elo6bzfw36] {
    background-color: var(--input-background-color-hover, #f8f9fa);
    color: var(--main-font-color, #495057);
    transform: translateX(3px);
    border-left: 3px solid var(--griditem-title-icon-color, #007bff);
}

.address-suggestion-item:active[b-elo6bzfw36] {
    background-color: var(--input-border-color-hover, #e3f2fd);
}

.address-suggestion-item:last-child[b-elo6bzfw36] {
    border-bottom: none;
    border-radius: 0 0 var(--input-border-radius, 6px) var(--input-border-radius, 6px);
}

.suggestion-main[b-elo6bzfw36] {
    font-weight: 600;
    color: var(--main-font-color, #333);
    margin-bottom: 3px;
}

.suggestion-details[b-elo6bzfw36] {
    font-size: 0.9em;
    color: var(--main-font-color, #666);
    opacity: 0.8;
}

/* Custom scrollbar for address suggestions */
.autocomplete-suggestions.address-suggestions[b-elo6bzfw36]::-webkit-scrollbar {
    width: 8px;
}

.autocomplete-suggestions.address-suggestions[b-elo6bzfw36]::-webkit-scrollbar-track {
    background: var(--griditem-content-backgroundgradient-color-right, #f8f9fa);
    border-radius: 4px;
}

.autocomplete-suggestions.address-suggestions[b-elo6bzfw36]::-webkit-scrollbar-thumb {
    background: var(--main-font-color, #6c757d);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.autocomplete-suggestions.address-suggestions[b-elo6bzfw36]::-webkit-scrollbar-thumb:hover {
    background: var(--griditem-title-font-color, #495057);
    cursor: pointer;
}

/* Responsive adjustments for address search */
@media (max-width: 768px) {
    .address-search-section[b-elo6bzfw36] {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .citadel-input-container.label-left[b-elo6bzfw36] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .citadel-input-label[b-elo6bzfw36] {
        margin-bottom: 8px;
        margin-right: 0;
    }
    
    .citadel-input-wrapper[b-elo6bzfw36] {
        width: 100%;
    }
    
    .autocomplete-suggestions.address-suggestions[b-elo6bzfw36] {
        max-height: 200px;
        left: 0 !important;
        right: 0;
    }
    
    .address-suggestion-item[b-elo6bzfw36] {
        padding: 12px;
        min-height: 60px;
    }
}

/* Mozilla Firefox scrollbar styling */
@supports (scrollbar-width: thin) {
    .autocomplete-suggestions.address-suggestions[b-elo6bzfw36] {
        scrollbar-width: thin;
        scrollbar-color: var(--main-font-color, #6c757d) var(--griditem-content-backgroundgradient-color-right, #f8f9fa);
    }
}
/* /Components/SubComponents/MultiSelect.razor.rz.scp.css */
.multiselect-container[b-ygt7mhd3we] {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.multiselect-wrapper[b-ygt7mhd3we] {
    position: relative;
    min-width: 180px;
}

/* Label styling */
.multiselect-label[b-ygt7mhd3we] {
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    white-space: nowrap;
}

    .multiselect-label.right-label[b-ygt7mhd3we] {
        margin-left: 20px;
    }

    .multiselect-label.left-label[b-ygt7mhd3we] {
        margin-right: 20px;
    }

/* Multiselect box */
.multiselect-box[b-ygt7mhd3we] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--input-padding-vertical) var(--input-padding-horizontal);
    border: 1px solid var(--input-border-color);
    background: var(--inputSelect-background-color);
    border-radius: var(--input-border-radius);
    transition: all 0.2s ease;
    color: var(--input-font-color);
    cursor: pointer;
    font-size: var(--main-font-size);
    box-sizing: border-box;
    position: relative;
}

    .multiselect-box:focus[b-ygt7mhd3we] {
        outline: none;
        border-color: var(--input-border-color-hover);
        box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
        background: var(--input-background-color-hover);
    }

    .multiselect-box:hover[b-ygt7mhd3we] {
        background: var(--input-background-color-hover);
        border-color: var(--input-border-color-hover);
    }

    .multiselect-box:hover:focus[b-ygt7mhd3we] {
        background: var(--input-background-color-hover);
        border-color: var(--input-border-color-hover);
    }

    /* Arrow indicator */
    .multiselect-box[b-ygt7mhd3we]:after {
        content: "";
        position: absolute;
        right: 0.7em;
        top: 50%;
        transform: translateY(-50%);
        width: 0.65em;
        height: 0.65em;
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23C8102E%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

/* Selected items area */
.multiselect-selected[b-ygt7mhd3we] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1;
    overflow: hidden;
    align-items: center;
    max-height: 20px;
}

.multiselect-placeholder[b-ygt7mhd3we] {
    color: var(--input-font-color);
    font-size: var(--main-font-size);
}

/* Tags styling */
.multiselect-tag[b-ygt7mhd3we] {
    background-color: var(--button-primary-background-color);
    display: flex;
    align-items: center;
    font-size: var(--main-font-size);
    padding-right:5px;
}

.multiselect-tag-remove[b-ygt7mhd3we] {
    margin-left: 2px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--main-title-color-hover);
    font-size: var(--main-font-size);
    padding: 0;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    .multiselect-tag-remove:hover[b-ygt7mhd3we] {
        background: var(--input-background-color);
        color: var(--input-font-color);
    }

/* Dropdown menu */
.multiselect-dropdown[b-ygt7mhd3we] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background: var(--inputSelect-background-color);
    border: 1px solid var(--input-border-color-hover);
    border-radius: var(--input-border-radius);
    box-shadow: 0 2px 8px var(--griditem-boxshadow-color);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.multiselect-option[b-ygt7mhd3we] {
    padding: var(--input-padding-vertical) var(--input-padding-horizontal);
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: var(--main-font-size);
    height: 26px;
    background: var(--input-background-color-hover);
    color: var(--input-font-color);
}

    .multiselect-option:hover:not(.selected)[b-ygt7mhd3we] {
        background: var(--inputSelect-background-color);
    }

    .multiselect-option.selected[b-ygt7mhd3we] {
        background: var(--input-background-color-hover);
    }

        .multiselect-option.selected:hover[b-ygt7mhd3we] {
            background: var(--inputSelect-background-color);
        }

/* Option checkbox styling */
.option-checkbox[b-ygt7mhd3we] {
    margin-right: 8px;
}

    .option-checkbox .checkbox-wrapper[b-ygt7mhd3we] {
        display: inline-flex;
        position: relative;
    }

    .option-checkbox .checkbox-input[b-ygt7mhd3we] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
        z-index: 2;
    }

    .option-checkbox .checkbox-custom[b-ygt7mhd3we] {
        position: relative;
        height: 16px; /* Matches checkbox component */
        width: 16px; /* Matches checkbox component */
        background-color: var(--inputSelect-background-color); /* Matches checkbox component */
        border: 1px solid var(--input-border-color); /* Matches checkbox component */
        border-radius: var(--input-border-radius); /* Matches checkbox component */
        transition: all 0.2s ease; /* Matches checkbox component */
    }

        .option-checkbox .checkbox-custom[b-ygt7mhd3we]:after {
            content: "";
            position: absolute;
            display: none;
            left: 5px; /* Matches checkbox component */
            top: 1px; /* Matches checkbox component */
            width: 4px; /* Matches checkbox component */
            height: 9px; /* Matches checkbox component */
            border: solid var(--griditem-title-icon-color); /* Matches checkbox component */
            border-width: 0 2px 2px 0; /* Matches checkbox component */
            transform: rotate(45deg); /* Matches checkbox component */
        }

    .option-checkbox .checkbox-input:checked ~ .checkbox-custom[b-ygt7mhd3we]:after {
        display: block; /* Matches checkbox component */
    }

    .option-checkbox .checkbox-input:checked ~ .checkbox-custom[b-ygt7mhd3we] {
        background-color: var(--inputSelect-background-color); /* Matches checkbox component */
        border-color: var(--input-border-color); /* Matches checkbox component */
    }

    /* Add hover states to match checkbox component */
    .option-checkbox:hover .checkbox-input ~ .checkbox-custom[b-ygt7mhd3we] {
        background-color: var(--input-background-color-hover);
        border-color: var(--input-border-color-hover);
    }

    .option-checkbox:hover .checkbox-input:checked ~ .checkbox-custom[b-ygt7mhd3we] {
        background-color: var(--input-background-color-hover);
        border-color: var(--input-border-color-hover);
    }

    .option-checkbox:hover .checkbox-input:checked ~ .checkbox-custom[b-ygt7mhd3we]:after {
        border-color: var(--griditem-title-icon-color);
    }

    /* Add focus states to match checkbox component */
    .option-checkbox .checkbox-input:focus ~ .checkbox-custom[b-ygt7mhd3we] {
        box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
        border-color: var(--input-border-color-hover);
    }

    /* Add disabled states to match checkbox component */
    .option-checkbox .checkbox-input:disabled ~ .checkbox-custom[b-ygt7mhd3we] {
        background-color: var(--button-disabled-background-color);
        border-color: var(--button-disabled-border-color);
        cursor: not-allowed;
        opacity: var(--button-disabled-opacity);
    }

    .multiselect-dropdown.is-open-fixed[b-ygt7mhd3we] {
    position: fixed;
    z-index: 10000;
    background: var(--inputSelect-background-color);
    border: 1px solid var(--input-border-color-hover);
    border-radius: var(--input-border-radius);
    box-shadow: 0 2px 8px var(--griditem-boxshadow-color);
    max-height: 200px;
    overflow-y: auto;
}
/* /Components/SubComponents/Organization_Sites.razor.rz.scp.css */
/* Base container for the organization sites component */
.organization-sites-container[b-epfdc0rkir] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Error message styling */
.error-message[b-epfdc0rkir] {
    color: var(--bs-danger, #dc3545);
    font-weight: bold;
    text-align: center;
    margin: 20px;
    padding: 10px;
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid var(--bs-danger, #dc3545);
    border-radius: 4px;
}

/* Loading state styling */
.loading-container[b-epfdc0rkir] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    width: 100%;
}

/* Data table container */
.sites-table-container[b-epfdc0rkir] {
    flex: 1;
    overflow: auto;
    padding: 10px;
}

/* Custom styling for site status indicators */
.site-status-indicator[b-epfdc0rkir] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.site-status-indicator.test[b-epfdc0rkir] {
    color: #fd7e14;
}

.site-status-indicator.production[b-epfdc0rkir] {
    color: #28a745;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .sites-table-container[b-epfdc0rkir] {
        padding: 5px;
    }
}

/* Custom checkbox styling for readonly checkboxes */
[b-epfdc0rkir] .organization-sites-container .checkbox-readonly {
    pointer-events: none;
    opacity: 0.7;
}

/* Ensure proper spacing and alignment */
.organization-sites-container[b-epfdc0rkir]  .data-table {
    width: 100%;
}

.organization-sites-container[b-epfdc0rkir]  .data-table th,
.organization-sites-container[b-epfdc0rkir]  .data-table td {
    padding: 8px 12px;
    text-align: left;
    vertical-align: middle;
}

/* Row hover effects */
.organization-sites-container[b-epfdc0rkir]  .data-table tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.1);
    cursor: pointer;
}

/* Contract name styling */
.contract-name[b-epfdc0rkir] {
    font-style: italic;
    color: #6c757d;
}

.contract-name.empty[b-epfdc0rkir] {
    color: #adb5bd;
}
/* /Components/SubComponents/Select.razor.rz.scp.css */
.select-container[b-vcdbn6kmuf] {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.select-wrapper[b-vcdbn6kmuf] {
    position: relative;
}

/* Label styling */
.select-label[b-vcdbn6kmuf] {
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    white-space: nowrap;
    display: inline-block;
}

/* Text spacing with side-specific styles */
.select-label.right-label[b-vcdbn6kmuf] {
    margin-left: 20px;
}

.select-label.left-label[b-vcdbn6kmuf] {
    margin-right: 20px;
}

.select-box[b-vcdbn6kmuf] {
    padding: var(--input-padding-vertical) var(--input-padding-horizontal);
    box-sizing: border-box;
    min-width: 100px;
    border: 1px solid var(--input-border-color);
    background: var(--inputSelect-background-color);
    border-radius: var(--input-border-radius);
    transition: all 0.2s ease;
    color: var(--input-font-color);
    appearance: none;
    background-image: none;
    padding-right: 2.5em;
    font-size: var(--main-font-size);
    position: relative;
}

/* Create the RED arrow pointing UP by default (will appear DOWN after 180deg rotation) */
.select-wrapper[b-vcdbn6kmuf]::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%) rotate(180deg); /* Start rotated so it points DOWN */
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #C8102E; /* RED COLOR */
    transition: transform 0.2s ease;
    pointer-events: none;
}

/* Rotate arrow on hover to point UP */
.select-wrapper:hover[b-vcdbn6kmuf]::after {
    transform: translateY(-50%) rotate(0deg); /* Reset rotation to point UP */
}

.select-box:focus[b-vcdbn6kmuf] {
    outline: none;
    border-color: var(--input-border-color-hover);
    box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
    background: var(--input-background-color-hover);
}

.select-box:hover[b-vcdbn6kmuf] {
    background: var(--input-background-color-hover);
    border-color: var(--input-border-color-hover);
}

.select-box:hover:focus[b-vcdbn6kmuf] {
    background: var(--input-background-color-hover);
    border-color: var(--input-border-color-hover);
}

/* Style the dropdown options */
.select-box option[b-vcdbn6kmuf] {
    background: var(--input-background-color-hover);
    color: var(--input-font-color);
    font-size: var(--main-font-size);
}

.select-box option:hover[b-vcdbn6kmuf] {
    background: var(--inputSelect-background-color);
}
/* /Components/SubComponents/SensorGroupChart.razor.rz.scp.css */
/* /Components/SubComponents/SiteAddress.razor.rz.scp.css */
.address-container[b-30ymvoqsa9] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    height: 100%;
}

/* === Search Section - Top Full Width === */
.search-section[b-30ymvoqsa9] {
    width: 100%;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--input-border-color);
}

.search-section .citadel-input-label[b-30ymvoqsa9] {
    font-size: var(--main-font-size);
    color: var(--main-font-color);
    white-space: nowrap;
    display: inline-block;
    flex-shrink: 0;
    margin-right: 20px;
    width: 140px;
}

.search-section .citadel-input-wrapper[b-30ymvoqsa9] {
    flex-grow: 1;
    max-width: 600px;
}

.search-spinner[b-30ymvoqsa9] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

/* === Content Section - Two Column Layout === */
.content-section[b-30ymvoqsa9] {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* === Left Column - Fields === */
.fields-column[b-30ymvoqsa9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* === Right Column - Buttons === */
.buttons-column[b-30ymvoqsa9] {
    flex-shrink: 0;
    width: 250px;
    display: flex;
    justify-content: center;
    padding-top: 20px;
    margin:auto;
}

.button-stack[b-30ymvoqsa9] {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
}

.error-message[b-30ymvoqsa9] {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 14px;
}

/* Loading container styling */
.address-container[style*="display: flex; justify-content: center; align-items: center"][b-30ymvoqsa9] {
    min-height: 200px;
}

/* === Custom input layout for address autocomplete using CitadelInput styling === */
.custom-input-layout-container[b-30ymvoqsa9] {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    height: auto;
}

.citadel-input-container.label-left[b-30ymvoqsa9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    height: auto;
    margin-bottom: 0;
}

.citadel-input-label[b-30ymvoqsa9] {
    font-size: var(--main-font-size);
    color: var(--main-font-color);
    white-space: nowrap;
    display: inline-block;
    flex-shrink: 0;
    margin-right: 20px;
}

.citadel-input-wrapper[b-30ymvoqsa9] {
    position: relative;
    display: flex;
    flex-grow: 1;
    min-width: 0;
    width: auto;
    height: auto;
}

.citadel-input-box[b-30ymvoqsa9] {
    padding: var(--input-padding-vertical) var(--input-padding-horizontal);
    box-sizing: border-box;
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    font-size: var(--main-font-size);
    background-color: var(--inputSelect-background-color);
    color: var(--input-font-color);
    transition: all 0.2s ease;
    width: 100%;
}

.citadel-input-box:not(:disabled):focus[b-30ymvoqsa9] {
    outline: none;
    border-color: var(--input-border-color-hover);
    box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
    background-color: var(--input-background-color-hover);
}

.citadel-input-box:not(:disabled):hover[b-30ymvoqsa9] {
    background-color: var(--input-background-color-hover);
    border-color: var(--input-border-color-hover);
}

.citadel-input-box:disabled[b-30ymvoqsa9] {
    background-color: transparent !important;
    border: 1px solid var(--input-border-color);
    color: var(--input-font-color);
    cursor: default;
    opacity: 1;
    box-shadow: none !important;
}

.citadel-input-box[b-30ymvoqsa9]::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

/* === Address-specific autocomplete suggestions === */
.autocomplete-suggestions.address-suggestions[b-30ymvoqsa9] {
    position: absolute;
    top: 100%; /* Position directly below the input wrapper */
    left: 0; /* Align with the input wrapper instead of accounting for label */
    right: 0;
    background: var(--inputSelect-background-color);
    border: 1px solid var(--input-border-color);
    border-top: none;
    border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
    max-height: 250px;
    min-height: 40px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
    animation: slideDown-b-30ymvoqsa9 0.2s ease-out;
    width: auto;
}

@keyframes slideDown-b-30ymvoqsa9 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.address-suggestion-item[b-30ymvoqsa9] {
    padding: var(--input-padding-vertical) var(--input-padding-horizontal);
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    border-bottom: 1px solid var(--input-border-color);
    background-color: var(--inputSelect-background-color);
    font-size: var(--main-font-size);
    color: var(--input-font-color);
    transition: all 0.2s ease;
    overflow: hidden;
}

.address-suggestion-item:hover[b-30ymvoqsa9] {
    background-color: var(--input-background-color-hover);
    color: var(--main-font-color);
    transform: translateX(2px);
}

.address-suggestion-item:active[b-30ymvoqsa9] {
    background-color: var(--input-border-color-hover);
}

.address-suggestion-item:last-child[b-30ymvoqsa9] {
    border-bottom: none;
    border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
}

.suggestion-main[b-30ymvoqsa9] {
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
}

.suggestion-details[b-30ymvoqsa9] {
    font-size: 0.85em;
    color: #666;
}

/* Address coordinates display */
.address-coordinates[b-30ymvoqsa9] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.8em;
    color: #666;
}

/* === CitadelInput component integration === */
[b-30ymvoqsa9] .citadel-input-container {
    margin-bottom: 8px;
}

/* Ensure consistent styling for read-only inputs */
[b-30ymvoqsa9] .citadel-input-box[readonly] {
    background-color: transparent !important;
    border: 1px solid var(--input-border-color);
    color: var(--input-font-color);
    cursor: default;
    opacity: 1;
    box-shadow: none !important;
}

[b-30ymvoqsa9] .citadel-input-box[disabled] {
    background-color: transparent !important;
    border: 1px solid var(--input-border-color);
    color: var(--input-font-color);
    cursor: default;
    opacity: 1;
    box-shadow: none !important;
}

/* === Responsive adjustments === */
@media (max-width: 992px) {
    .content-section[b-30ymvoqsa9] {
        flex-direction: column;
        gap: 20px;
    }
    
    .buttons-column[b-30ymvoqsa9] {
        width: 100%;
        padding-top: 10px;
        border-top: 1px solid var(--input-border-color);
    }
    
    .button-stack[b-30ymvoqsa9] {
        flex-direction: row;
        justify-content: center;
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .address-container[b-30ymvoqsa9] {
        gap: 15px;
    }
    
    .search-section[b-30ymvoqsa9] {
        padding-bottom: 10px;
    }
    
    .search-section .citadel-input-container.label-left[b-30ymvoqsa9] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .search-section .citadel-input-label[b-30ymvoqsa9] {
        margin-bottom: 5px;
        margin-right: 0;
        width: auto;
    }
    
    .search-section .citadel-input-wrapper[b-30ymvoqsa9] {
        max-width: none;
    }
    
    .content-section[b-30ymvoqsa9] {
        gap: 15px;
    }
    
    .fields-column[b-30ymvoqsa9] {
        gap: 6px;
    }
    
    [b-30ymvoqsa9] .citadel-input-container {
        margin-bottom: 6px;
    }
    
    .citadel-input-container.label-left[b-30ymvoqsa9] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .citadel-input-label[b-30ymvoqsa9] {
        margin-bottom: 5px;
        margin-right: 0;
    }

    .button-stack[b-30ymvoqsa9] {
        flex-direction: column;
        gap: 10px;
    }
    
    /* Mobile autocomplete adjustments */
    .autocomplete-suggestions.address-suggestions[b-30ymvoqsa9] {
        max-height: 200px;
        left: 0 !important;
        right: 0;
        width: auto !important;
    }
    
    .address-suggestion-item[b-30ymvoqsa9] {
        padding: calc(var(--input-padding-vertical) + 2px) var(--input-padding-horizontal);
        min-height: 60px;
    }
}

/* === Error handling === */
.custom-input-layout-container .citadel-input-error[b-30ymvoqsa9] {
    border-color: var(--bs-danger) !important;
}

.custom-input-layout-container .citadel-input-box.citadel-input-error:not(:disabled):focus[b-30ymvoqsa9] {
    border-color: var(--bs-danger) !important;
}
/* /Components/SubComponents/SiteAlarms.razor.rz.scp.css */
.site-alarms-container[b-ebhqc8mzrz] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Loading State */
.loading-container[b-ebhqc8mzrz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6c757d;
    gap: 1rem;
}

/* Error State */
.error-container[b-ebhqc8mzrz] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #dc3545;
    gap: 0.5rem;
    text-align: center;
    padding: 1rem;
}

.error-container i[b-ebhqc8mzrz] {
    font-size: 1.5rem;
}

/* Table Styling */
[b-ebhqc8mzrz] .site-alarms-table {
    font-size: 0.85rem;
}

[b-ebhqc8mzrz] .site-alarms-table th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}

[b-ebhqc8mzrz] .site-alarms-table td {
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

[b-ebhqc8mzrz] .site-alarms-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Responsive Design */
@media (max-width: 1024px) {
    [b-ebhqc8mzrz] .site-alarms-table {
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    [b-ebhqc8mzrz] .site-alarms-table {
        font-size: 0.75rem;
    }
    
    /* Hide less important columns on mobile */
    [b-ebhqc8mzrz] .site-alarms-table th:nth-child(1),
    [b-ebhqc8mzrz] .site-alarms-table td:nth-child(1) {
        display: none; /* Hide Alarm ID */
    }
    
    [b-ebhqc8mzrz] .site-alarms-table th:nth-child(7),
    [b-ebhqc8mzrz] .site-alarms-table td:nth-child(7) {
        display: none; /* Hide Organization */
    }
}

@media (max-width: 480px) {
    [b-ebhqc8mzrz] .site-alarms-table th:nth-child(4),
    [b-ebhqc8mzrz] .site-alarms-table td:nth-child(4) {
        display: none; /* Hide Sensor on very small screens */
    }
}
/* /Components/SubComponents/SiteCases.razor.rz.scp.css */
/* /Components/SubComponents/SiteContacts.razor.rz.scp.css */
.site-contacts-container[b-lnnfh213sr] {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--griditem-boxborders-radius);
    box-shadow: 5px 5px 10px var(--griditem-boxshadow-color);
    border: var(--griditem-boxborders-size) solid var(--griditem-boxborders-color);
    transition: all 0.5s ease-in-out;
    background: linear-gradient(
        var(--griditem-content-backgroundgradient-angle), 
        var(--griditem-content-backgroundgradient-color-left),
        var(--griditem-content-backgroundgradient-color-right));
    margin-top: 20px;
    padding-bottom: 20px;
}

.site-contacts-container:hover[b-lnnfh213sr] {
    border: 1px solid var(--griditem-boxborders-color-hover);
    box-shadow: 5px 5px 10px var(--griditem-boxshadow-color-hover);
}

.loading-container[b-lnnfh213sr] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.error-container[b-lnnfh213sr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background-color: #ffeaa7;
    border: 1px solid #fdcb6e;
    border-radius: 4px;
    color: #2d3436;
}

.error-container i[b-lnnfh213sr] {
    color: #e17055;
}

.site-contacts-table[b-lnnfh213sr] {
    height: 100%;
}

.priority-badge[b-lnnfh213sr] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    background-color: #74b9ff;
    color: white;
    font-size: 0.85em;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

.availability-display[b-lnnfh213sr] {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

/* Modal styles */
.modal-overlay[b-lnnfh213sr] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content[b-lnnfh213sr] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header[b-lnnfh213sr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

.modal-header h3[b-lnnfh213sr] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.modal-close[b-lnnfh213sr] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s ease;
}

.modal-close:hover[b-lnnfh213sr] {
    color: #333;
}

.modal-close:disabled[b-lnnfh213sr] {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-body[b-lnnfh213sr] {
    flex: 1;
    overflow: auto;
    padding: 24px;
}

.modal-footer[b-lnnfh213sr] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

/* Edit form styles */
.edit-form[b-lnnfh213sr] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-section[b-lnnfh213sr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-section h4[b-lnnfh213sr] {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: #333;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 4px;
}

.form-row[b-lnnfh213sr] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

/* Call Dialog Specific Styles */
.form-label-static[b-lnnfh213sr] {
    font-weight: 600;
    color: #495057;
    min-width: 130px;
    display: inline-block;
    font-size: 0.95rem;
}

.form-value[b-lnnfh213sr] {
    flex: 1;
    color: #212529;
    display: flex;
    align-items: center;
}

.call-info-badge[b-lnnfh213sr] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    color: #856404;
    width: 100%;
    font-size: 0.95rem;
}

.call-info-badge i[b-lnnfh213sr] {
    font-size: 1.1em;
    flex-shrink: 0;
}

.call-info-badge strong[b-lnnfh213sr] {
    font-weight: 600;
}

/* Form Controls */
.form-control[b-lnnfh213sr] {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 100%;
}

.form-control:focus[b-lnnfh213sr] {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control:disabled[b-lnnfh213sr] {
    background-color: #e9ecef;
    opacity: 0.6;
    cursor: not-allowed;
}

textarea.form-control[b-lnnfh213sr] {
    resize: vertical;
    min-height: 100px;
}

/* Text Utilities */
.text-muted[b-lnnfh213sr] {
    color: #6c757d !important;
    font-size: 0.9em;
}

.text-danger[b-lnnfh213sr] {
    color: #dc3545 !important;
}

/* Spacing Utilities */
.ms-1[b-lnnfh213sr] {
    margin-left: 0.25rem;
}

.ms-2[b-lnnfh213sr] {
    margin-left: 0.5rem;
}

.me-1[b-lnnfh213sr] {
    margin-right: 0.25rem;
}

.me-2[b-lnnfh213sr] {
    margin-right: 0.5rem;
}

.mt-1[b-lnnfh213sr] {
    margin-top: 0.25rem;
}

.mb-0[b-lnnfh213sr] {
    margin-bottom: 0;
}

/* Icon Styles */
.bi[b-lnnfh213sr] {
    display: inline-block;
    vertical-align: middle;
}

/* Button States */
button:disabled[b-lnnfh213sr] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-content[b-lnnfh213sr] {
        width: 95vw;
        margin: 10px;
    }
    
    .form-row[b-lnnfh213sr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .form-label-static[b-lnnfh213sr] {
        min-width: auto;
        width: 100%;
    }

    .form-value[b-lnnfh213sr] {
        width: 100%;
    }

    .modal-header h3[b-lnnfh213sr] {
        font-size: 1.1rem;
    }

    .modal-body[b-lnnfh213sr] {
        padding: 16px;
    }

    .modal-footer[b-lnnfh213sr] {
        padding: 12px 16px;
        flex-direction: column-reverse;
    }

    .modal-footer button[b-lnnfh213sr] {
        width: 100%;
    }

    .call-info-badge[b-lnnfh213sr] {
        font-size: 0.85rem;
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    .modal-content[b-lnnfh213sr] {
        max-height: 95vh;
    }

    .form-section h4[b-lnnfh213sr] {
        font-size: 1rem;
    }

    textarea.form-control[b-lnnfh213sr] {
        min-height: 80px;
    }
}

/* Animation for modal appearance */
@keyframes modalFadeIn-b-lnnfh213sr {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-overlay[b-lnnfh213sr] {
    animation: fadeIn-b-lnnfh213sr 0.2s ease;
}

.modal-content[b-lnnfh213sr] {
    animation: modalFadeIn-b-lnnfh213sr 0.3s ease;
}

@keyframes fadeIn-b-lnnfh213sr {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Loading state for buttons */
.spinner-border[b-lnnfh213sr] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-lnnfh213sr 0.75s linear infinite;
}

.spinner-border-sm[b-lnnfh213sr] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125em;
}

@keyframes spinner-border-b-lnnfh213sr {
    to {
        transform: rotate(360deg);
    }
}

/* SMS History Styles */
.sms-history-container[b-lnnfh213sr] {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f8f9fa;
    padding: 12px;
}

.sms-history-list[b-lnnfh213sr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sms-message[b-lnnfh213sr] {
    background-color: white;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.sms-message:hover[b-lnnfh213sr] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.sms-message-outbound[b-lnnfh213sr] {
    border-left: 4px solid #007bff;
}

.sms-message-inbound[b-lnnfh213sr] {
    border-left: 4px solid #28a745;
}

.sms-message-header[b-lnnfh213sr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.sms-message-direction[b-lnnfh213sr] {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sms-message-time[b-lnnfh213sr] {
    color: #6c757d;
    font-size: 0.8rem;
}

.sms-message-body[b-lnnfh213sr] {
    padding: 8px 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #212529;
    word-wrap: break-word;
}

.sms-message-footer[b-lnnfh213sr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 0.8rem;
}

.sms-message-status .badge[b-lnnfh213sr] {
    font-size: 0.75rem;
    padding: 2px 6px;
}

.sms-message-user[b-lnnfh213sr] {
    font-style: italic;
}

/* Character counter */
.form-control[maxlength] + small[b-lnnfh213sr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Scrollbar styling for SMS history */
.sms-history-container[b-lnnfh213sr]::-webkit-scrollbar {
    width: 8px;
}

.sms-history-container[b-lnnfh213sr]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.sms-history-container[b-lnnfh213sr]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.sms-history-container[b-lnnfh213sr]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Empty state styling */
.sms-history-container .fs-1[b-lnnfh213sr] {
    font-size: 3rem;
    opacity: 0.3;
}

/* Phone number display styles */
.phone-numbers-container[b-lnnfh213sr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.phone-number-item[b-lnnfh213sr] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Phone selection option styles */
.phone-selection-option[b-lnnfh213sr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.phone-selection-option:hover[b-lnnfh213sr] {
    border-color: #80bdff;
    background-color: #f0f8ff !important;
}

.phone-selection-option.selected[b-lnnfh213sr] {
    border-color: #007bff;
    background-color: #e7f3ff;
}

.phone-selection-option input[type="radio"][b-lnnfh213sr] {
    cursor: pointer;
}

/* Badge styles */
.badge[b-lnnfh213sr] {
    font-size: 0.75em;
    padding: 2px 6px;
    border-radius: 4px;
}

.badge.bg-primary[b-lnnfh213sr] {
    background-color: #007bff;
    color: white;
}

.badge.bg-secondary[b-lnnfh213sr] {
    background-color: #6c757d;
    color: white;
}

/* Responsive adjustments for SMS dialog */
@media (max-width: 768px) {
    .sms-history-container[b-lnnfh213sr] {
        max-height: 300px;
    }

    .sms-message-body[b-lnnfh213sr] {
        font-size: 0.9rem;
    }
}
/* /Components/SubComponents/SiteDevices.razor.rz.scp.css */
/* Maintenances - General Styles */

/* --- Search Bar Alignment --- */
.case-maintenance-centered-wrapper[b-w2m34tf07a] {
    display: flex;
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.case-maintenance-centered-input[b-w2m34tf07a] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.case-maintenance-search-icon[b-w2m34tf07a] {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* --- Container Structure Styles --- */
.sites-container[b-w2m34tf07a] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* --- Top Bar (Title + Buttons) Alignment --- */
.sites-top-div[b-w2m34tf07a] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    background: linear-gradient( var(--griditem-title-backgroundgradient-angle, 90deg), var(--griditem-title-backgroundgradient-color-left, #eee), var(--griditem-title-backgroundgradient-color-right, #ddd));
    font-size: var(--griditem-title-font-size, 1em);
    color: var(--griditem-title-font-color, black);
    height: var(--griditem-title-height, 35px);
    min-height: 30px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    flex-shrink: 0;
}

.button-group[b-w2m34tf07a] {
    display: flex;
    gap: 10px;
}

/* --- Bottom Div (Table Area) --- */
.sites-bottom-div[b-w2m34tf07a] {
    flex-grow: 1;
    width: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
}

/* --- Error Message Style --- */
.error-message[b-w2m34tf07a] {
    color: #721c24; /* Dark red text */
    background-color: #f8d7da; /* Light red background */
    border: 1px solid #f5c6cb; /* Reddish border */
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-size: 0.9em;
}


/* --- Styles for the unitofmeasure Table --- */
.unitofmeasure-table[b-w2m34tf07a] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

    .unitofmeasure-table th[b-w2m34tf07a],
    .unitofmeasure-table td[b-w2m34tf07a] {
        border: 1px solid #ccc;
        padding: 8px 12px;
        text-align: left;
        word-wrap: break-word;
        vertical-align: middle;
    }

    .unitofmeasure-table th[b-w2m34tf07a] {
        background-color: #f2f2f2;
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .unitofmeasure-table th:nth-child(1)[b-w2m34tf07a], .unitofmeasure-table td:nth-child(1)[b-w2m34tf07a] {
            width: 25%;
        }

        .unitofmeasure-table th:nth-child(2)[b-w2m34tf07a], .unitofmeasure-table td:nth-child(2)[b-w2m34tf07a] {
            width: 60%;
        }

        .unitofmeasure-table th:nth-child(3)[b-w2m34tf07a], .unitofmeasure-table td:nth-child(3)[b-w2m34tf07a] {
            width: 10%;
            text-align: center;
        }

        .unitofmeasure-table th:nth-child(4)[b-w2m34tf07a], .unitofmeasure-table td:nth-child(4)[b-w2m34tf07a] {
            width: 5%;
            text-align: center;
        }

/* Truncate long text in the Description column and show tooltip on hover */
.unitofmeasure-description-cell[b-w2m34tf07a] {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    vertical-align: middle;
}

/* --- Text Contrast for Color Cells (Display Mode Only) --- */
.unitofmeasure-table td:nth-child(3)[style*="background-color"][b-w2m34tf07a] {
    color: white;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.unitofmeasure-table td:nth-child(3)[style*="background-color:Orange"][b-w2m34tf07a],
.unitofmeasure-table td:nth-child(3)[style*="background-color:Yellow"][b-w2m34tf07a],
.unitofmeasure-table td:nth-child(3)[style*="background-color:LightGreen"][b-w2m34tf07a],
.unitofmeasure-table td:nth-child(3)[style*="background-color:transparent"][b-w2m34tf07a],
.unitofmeasure-table td:nth-child(3)[style*="background-color:#FFFFFF"][b-w2m34tf07a] {
    color: black;
    text-shadow: none;
}

/* --- Styles for Inline Editing --- */
.edit-input[b-w2m34tf07a] {
    width: 95%;
    padding: 4px;
    margin: -4px -6px;
    box-sizing: border-box;
    border: 1px solid #007bff;
    font-size: inherit;
    vertical-align: middle;
    background-color: white;
    color: black;
}

    .edit-input[type="color"][b-w2m34tf07a] {
        width: 50px;
        height: 25px;
        padding: 1px;
        vertical-align: middle;
        cursor: pointer;
    }

.edit-button[b-w2m34tf07a] {
    padding: 3px 6px;
    margin: 0 2px;
    cursor: pointer;
    font-size: 0.85em;
    border: 1px solid;
    border-radius: 3px;
    vertical-align: middle;
}

    .edit-button.save[b-w2m34tf07a] {
        background-color: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
    }

        .edit-button.save:hover[b-w2m34tf07a] {
            background-color: #c3e6cb;
        }

    .edit-button.cancel[b-w2m34tf07a] {
        background-color: #f8d7da;
        border-color: #f5c6cb;
        color: #721c24;
    }

        .edit-button.cancel:hover[b-w2m34tf07a] {
            background-color: #f5c6cb;
        }

/* --- Style for Selected Row (Lowest priority override) --- */
.selected-row td[b-w2m34tf07a] {
    background-color: #cfe2ff !important;
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Editing Row (Medium priority override) --- */
.editing-row td[b-w2m34tf07a] {
    background-color: #e7f3ff !important;
    color: black !important;
    text-shadow: none !important;
}

/* --- Style for Add New Row (Highest priority override) --- */
.add-new-row td[b-w2m34tf07a] {
    background-color: #f0fff0 !important;
    color: black !important;
    text-shadow: none !important;
}

    /* Color cell takes the row highlight color, not its data color, when selected/editing/adding */
    .selected-row td:nth-child(3)[b-w2m34tf07a],
    .editing-row td:nth-child(3)[b-w2m34tf07a],
    .add-new-row td:nth-child(3)[b-w2m34tf07a] {
        /* The !important on the row styles handles this */
    }

.selected-row input.edit-input[b-w2m34tf07a],
.editing-row input.edit-input[b-w2m34tf07a],
.add-new-row input.edit-input[b-w2m34tf07a] {
    background-color: white;
    color: black;
}

/* --- Other Styles --- */
.case-maintenance-button-container[b-w2m34tf07a] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 1px;
}

.modal-overlay[b-w2m34tf07a] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-w2m34tf07a] {
    background: white;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.2);
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
}

.modal-buttons[b-w2m34tf07a] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Styles for the History Table --- */
.history-table[b-w2m34tf07a] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    margin-top: 0;
}

    .history-table th[b-w2m34tf07a],
    .history-table td[b-w2m34tf07a] {
        border: 1px solid #ccc;
        padding: 8px 12px;
        text-align: left;
        word-wrap: break-word;
        vertical-align: middle;
    }

    .history-table th[b-w2m34tf07a] {
        background-color: #f2f2f2;
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .history-table th:nth-child(1)[b-w2m34tf07a], .history-table td:nth-child(1)[b-w2m34tf07a] {
            width: 10%;
        }

        .history-table th:nth-child(2)[b-w2m34tf07a], .history-table td:nth-child(2)[b-w2m34tf07a] {
            width: 10%;
        }

        .history-table th:nth-child(3)[b-w2m34tf07a], .history-table td:nth-child(3)[b-w2m34tf07a] {
            width: 20%;
        }

        .history-table th:nth-child(4)[b-w2m34tf07a], .history-table td:nth-child(4)[b-w2m34tf07a] {
            width: 60%;
        }

/* Truncate long text in the Data column and show tooltip on hover */
.history-data-cell[b-w2m34tf07a] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* Style for validation error messages */
.field-validation-error[b-w2m34tf07a] {
    color: red;
    font-size: 0.8em;
}
/* /Components/SubComponents/SiteMap.razor.rz.scp.css */
.sitemap-container[b-97j84peuvd] {
    position: relative;
    width: 100%;
    height: 100%;
    /* Remove pointer-events: none - this was blocking interactions */
}

.loading-overlay[b-97j84peuvd],
.error-overlay[b-97j84peuvd] {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    font-size: 13px;
    color: #6c757d;
    display: flex;
    align-items: center;
    pointer-events: auto;
}

.error-overlay[b-97j84peuvd] {
    right: 10px;
    background: rgba(255, 193, 7, 0.95);
    color: #856404;
}

.spinner-border-sm[b-97j84peuvd] {
    width: 1rem;
    height: 1rem;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .loading-overlay[b-97j84peuvd] {
        background: rgba(33, 37, 41, 0.95);
        color: #adb5bd;
    }
    
    .error-overlay[b-97j84peuvd] {
        background: rgba(255, 193, 7, 0.9);
        color: #664d03;
    }
}
/* /Components/SubComponents/Sub_Stats.razor.rz.scp.css */
.stats-container[b-1wlvwhw6pz] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    height: 100%;
}
/* /Components/Widgets/Widget_AlarmsAndCases.razor.rz.scp.css */
.alarms-cases-widget[b-sscd14nx5r] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 0.85rem;
}

/* Loading State */
.loading-container[b-sscd14nx5r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6c757d;
    gap: 1rem;
}

/* Error State */
.error-container[b-sscd14nx5r] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #dc3545;
    gap: 0.5rem;
    text-align: center;
    padding: 1rem;
}

.error-container i[b-sscd14nx5r] {
    font-size: 1.5rem;
}

/* Header Section */
.metrics-header[b-sscd14nx5r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    gap: 1rem;
    flex-shrink: 0;
}

.header-info[b-sscd14nx5r] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.widget-title[b-sscd14nx5r] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
}

.last-update[b-sscd14nx5r] {
    font-size: 0.7rem;
    color: #6c757d;
}

.header-actions[b-sscd14nx5r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.refresh-info[b-sscd14nx5r] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.7rem;
    color: #6c757d;
}

.refresh-button[b-sscd14nx5r] {
    flex-shrink: 0;
}

/* Current Progress Bar */
.current-progress-bar[b-sscd14nx5r] {
    flex-shrink: 0;
    border-bottom: 1px solid #dee2e6;
}

.current-progress-content[b-sscd14nx5r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0.5rem;
    border-radius: 6px;
}

.current-progress-content:hover[b-sscd14nx5r] {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.progress-icon[b-sscd14nx5r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffc107, #e0a800);
    color: white;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.progress-text[b-sscd14nx5r] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #495057;
}

.progress-value[b-sscd14nx5r] {
    font-size: 1.3rem;
    font-weight: bold;
    color: #e0a800;
}

/* Metrics Table */
.metrics-table[b-sscd14nx5r] {
    flex: 1;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 1px;
    background: #dee2e6;
    margin: 0.75rem;
    border-radius: 6px;
    overflow: hidden;
    min-height: 0;
}

/* Table Header */
.table-header[b-sscd14nx5r] {
    display: contents;
}

.metric-label-header[b-sscd14nx5r] {
    background: #495057;
    color: white;
    padding: 0.75rem;
    font-weight: 600;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}

.time-period-header[b-sscd14nx5r] {
    background: #6c757d;
    color: white;
    padding: 0.75rem;
    font-weight: 600;
    font-size: 0.75rem;
    line-height:15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
}

.time-period-header i[b-sscd14nx5r] {
    font-size: 0.8rem;
}

/* Metric Rows */
.metric-row[b-sscd14nx5r] {
    display: contents;
}

.metric-label[b-sscd14nx5r] {
    background: white;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    border-right: 1px solid #dee2e6;
}

.metric-icon[b-sscd14nx5r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    color: white;
    flex-shrink: 0;
}

.metric-cell[b-sscd14nx5r] {
    background: white;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.metric-cell.clickable[b-sscd14nx5r] {
    cursor: pointer;
}

.metric-cell.clickable:hover[b-sscd14nx5r] {
    background: #f8f9fa;
    transform: scale(1.05);
}

.metric-value[b-sscd14nx5r] {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1;
}

/* Specific metric styles */
.alarms-icon[b-sscd14nx5r] {
    background: linear-gradient(135deg, #dc3545, #e74c3c);
}

.alarms-value[b-sscd14nx5r] {
    color: #dc3545;
}

.cases-created-icon[b-sscd14nx5r] {
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.cases-created-value[b-sscd14nx5r] {
    color: #007bff;
}

.cases-completed-icon[b-sscd14nx5r] {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.cases-completed-value[b-sscd14nx5r] {
    color: #28a745;
}

/* Summary Bar */
.summary-bar[b-sscd14nx5r] {
    padding: 0.6rem 1rem;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    gap: 1rem;
}

.summary-section[b-sscd14nx5r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.summary-title[b-sscd14nx5r] {
    font-size: 0.7rem;
    color: #6c757d;
    font-weight: 500;
}

.summary-value[b-sscd14nx5r] {
    font-size: 0.8rem;
    color: #495057;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .metrics-table[b-sscd14nx5r] {
        margin: 0.5rem;
    }
    
    .metric-value[b-sscd14nx5r] {
        font-size: 1.2rem;
    }
    
    .metric-cell[b-sscd14nx5r], .metric-label[b-sscd14nx5r], .time-period-header[b-sscd14nx5r], .metric-label-header[b-sscd14nx5r] {
        padding: 0.6rem;
    }
    
    .progress-value[b-sscd14nx5r] {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .metrics-header[b-sscd14nx5r] {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.6rem;
    }
    
    .header-actions[b-sscd14nx5r] {
        width: 100%;
        justify-content: space-between;
    }

    .refresh-info[b-sscd14nx5r] {
        align-items: flex-start;
    }
    
    .current-progress-bar[b-sscd14nx5r] {
        padding: 0.6rem;
    }
    
    .progress-text[b-sscd14nx5r] {
        font-size: 0.8rem;
    }
    
    .progress-value[b-sscd14nx5r] {
        font-size: 1.1rem;
    }
    
    .metrics-table[b-sscd14nx5r] {
        grid-template-columns: 1fr 0.8fr 0.8fr 0.8fr;
        margin: 0.5rem;
        font-size: 0.8rem;
    }
    
    .metric-value[b-sscd14nx5r] {
        font-size: 1.1rem;
    }
    
    .metric-icon[b-sscd14nx5r] {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
    }
    
    .time-period-header[b-sscd14nx5r] {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .time-period-header span[b-sscd14nx5r] {
        font-size: 0.7rem;
    }
    
    .summary-bar[b-sscd14nx5r] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .summary-section[b-sscd14nx5r] {
        flex-direction: row;
        justify-content: space-between;
    }
}

@media (max-width: 600px) {
    .widget-title[b-sscd14nx5r] {
        font-size: 0.8rem;
    }
    
    .refresh-info[b-sscd14nx5r] {
        display: none;
    }
    
    .current-progress-content[b-sscd14nx5r] {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .progress-value[b-sscd14nx5r] {
        margin-left: 0;
    }
    
    .metrics-table[b-sscd14nx5r] {
        font-size: 0.75rem;
    }
    
    .metric-value[b-sscd14nx5r] {
        font-size: 1rem;
    }
    
    .metric-cell[b-sscd14nx5r], .metric-label[b-sscd14nx5r], .time-period-header[b-sscd14nx5r], .metric-label-header[b-sscd14nx5r] {
        padding: 0.5rem;
    }
    
    .time-period-header i[b-sscd14nx5r] {
        display: none;
    }
}

/* Animation effects */
.metric-value[b-sscd14nx5r], .progress-value[b-sscd14nx5r] {
    transition: all 0.3s ease;
}

.metric-cell.clickable:active[b-sscd14nx5r], .current-progress-content:active[b-sscd14nx5r] {
    transform: scale(0.95);
}

/* Scroll handling for very small screens */
@media (max-width: 480px) {
    .metrics-table[b-sscd14nx5r] {
        margin: 0.25rem;
        overflow-x: auto;
        display: block;
    }
    
    .metrics-table > *[b-sscd14nx5r] {
        display: table-row;
        width: 100%;
    }
    
    .metric-label-header[b-sscd14nx5r],
    .time-period-header[b-sscd14nx5r],
    .metric-label[b-sscd14nx5r],
    .metric-cell[b-sscd14nx5r] {
        display: table-cell;
        min-width: 80px;
    }
}
/* /Components/Widgets/Widget_SensorsInDiag.razor.rz.scp.css */
.sensors-diag-widget[b-5vgwjco0bh] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Loading State */
.loading-container[b-5vgwjco0bh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6c757d;
    gap: 1rem;
}

/* Error State */
.error-container[b-5vgwjco0bh] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #dc3545;
    gap: 0.5rem;
    text-align: center;
    padding: 1rem;
}

.error-container i[b-5vgwjco0bh] {
    font-size: 1.5rem;
}

/* No Data State */
.no-data-container[b-5vgwjco0bh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #28a745;
    gap: 0.5rem;
    text-align: center;
}

.no-data-container i[b-5vgwjco0bh] {
    font-size: 2rem;
}

/* Enhanced Summary Section */
.sensors-summary[b-5vgwjco0bh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    gap: 1rem;
}

.summary-left[b-5vgwjco0bh] {
    display: flex;
    gap: 1.5rem;
}

.summary-item[b-5vgwjco0bh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.summary-count[b-5vgwjco0bh] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #dc3545;
    line-height: 1;
}

.summary-label[b-5vgwjco0bh] {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.summary-right[b-5vgwjco0bh] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.refresh-info[b-5vgwjco0bh] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.75rem;
    color: #6c757d;
    text-align: right;
}

.last-update[b-5vgwjco0bh] {
    font-weight: 500;
}

.next-refresh[b-5vgwjco0bh] {
    margin-top: 0.125rem;
    opacity: 0.8;
}

.refresh-button[b-5vgwjco0bh] {
    flex-shrink: 0;
}

/* Table Container */
.sensors-table-container[b-5vgwjco0bh] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Table Customizations */
.sensors-diag-table[b-5vgwjco0bh] {
    font-size: 0.875rem;
}

.sensors-diag-table .data-cell[b-5vgwjco0bh] {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}

.sensors-diag-table tbody tr:hover[b-5vgwjco0bh] {
    background-color: rgba(0, 123, 255, 0.1);
    cursor: pointer;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sensors-summary[b-5vgwjco0bh] {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem;
    }
    
    .summary-left[b-5vgwjco0bh] {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }
    
    .summary-item[b-5vgwjco0bh] {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    
    .summary-count[b-5vgwjco0bh] {
        font-size: 1.25rem;
    }
    
    .summary-label[b-5vgwjco0bh] {
        margin-top: 0;
        margin-left: 0.5rem;
    }

    .summary-right[b-5vgwjco0bh] {
        width: 100%;
        justify-content: space-between;
    }

    .refresh-info[b-5vgwjco0bh] {
        align-items: flex-start;
        text-align: left;
    }
}

/* Small widget optimizations */
@media (max-width: 400px) {
    .refresh-info[b-5vgwjco0bh] {
        display: none; /* Hide refresh info on very small widgets */
    }
    
    .summary-left[b-5vgwjco0bh] {
        gap: 1rem;
    }
}

/* Scrollable table for small widgets */
.sensors-table-container[b-5vgwjco0bh]  .grid-data-table-responsive {
    max-height: calc(100% - 2rem);
    overflow-y: auto;
}

/* Custom scrollbar for the table */
.sensors-table-container[b-5vgwjco0bh]  .grid-data-table-responsive::-webkit-scrollbar {
    width: 8px;
}

.sensors-table-container[b-5vgwjco0bh]  .grid-data-table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.sensors-table-container[b-5vgwjco0bh]  .grid-data-table-responsive::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.sensors-table-container[b-5vgwjco0bh]  .grid-data-table-responsive::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
/* /Components/Widgets/Widget_TopAlarmDevices.razor.rz.scp.css */
.top-alarm-devices-widget[b-tv5q1c7cpy] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 0.85rem;
    background: transparent;
}

/* Loading and Error States */
.loading-container[b-tv5q1c7cpy], .error-container[b-tv5q1c7cpy] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6c757d;
    gap: 1rem;
}

.error-container[b-tv5q1c7cpy] {
    color: #dc3545;
    text-align: center;
    padding: 1rem;
}

.error-container i[b-tv5q1c7cpy] {
    font-size: 1.5rem;
}

/* Header Section */
.widget-header[b-tv5q1c7cpy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    background: rgba(248, 249, 250, 0.8);
    flex-shrink: 0;
}

.header-info[b-tv5q1c7cpy] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.widget-title[b-tv5q1c7cpy] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.widget-title i[b-tv5q1c7cpy] {
    color: #dc3545; /* Red color for alarm icon */
}

.last-update[b-tv5q1c7cpy] {
    font-size: 0.7rem;
    color: #6c757d;
}

.header-actions[b-tv5q1c7cpy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.refresh-info[b-tv5q1c7cpy] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.7rem;
    color: #6c757d;
}

.refresh-button[b-tv5q1c7cpy] {
    flex-shrink: 0;
}

/* Time Period Tabs */
.time-period-tabs[b-tv5q1c7cpy] {
    display: flex;
    background: rgba(248, 249, 250, 0.8);
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.tab[b-tv5q1c7cpy] {
    flex: 1;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6c757d;
}

.tab:hover[b-tv5q1c7cpy] {
    background: rgba(233, 236, 239, 0.8);
    color: #495057;
}

.tab.active[b-tv5q1c7cpy] {
    background: rgba(255, 255, 255, 0.9);
    color: #007bff;
    border-bottom-color: #007bff;
}

.tab i[b-tv5q1c7cpy] {
    font-size: 0.9rem;
}

/* Leaderboard Container */
.leaderboard-container[b-tv5q1c7cpy] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.leaderboard-list[b-tv5q1c7cpy] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Leaderboard Entry - Enhanced hover effects */
.leaderboard-entry[b-tv5q1c7cpy] {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(222, 226, 230, 0.8);
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    min-height: 32px;
    cursor: default;
    position: relative;
}

/* Enhanced hover effects for clickable entries */
.leaderboard-entry.clickable[b-tv5q1c7cpy] {
    cursor: pointer;
}

.leaderboard-entry.clickable:hover[b-tv5q1c7cpy] {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 123, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
    transform: translateY(-1px);
}

.leaderboard-entry.clickable:hover .device-name[b-tv5q1c7cpy] {
    color: #007bff;
}

.leaderboard-entry.clickable:hover .device-avatar i[b-tv5q1c7cpy] {
    color: #007bff;
    transform: scale(1.1);
}

.leaderboard-entry.clickable:hover .progress-fill[b-tv5q1c7cpy] {
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.4);
}

.leaderboard-entry.clickable:hover[b-tv5q1c7cpy]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #007bff, #0056b3);
    border-radius: 4px 0 0 4px;
    z-index: 1;
}

/* Active state for click feedback */
.leaderboard-entry.clickable:active[b-tv5q1c7cpy] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.2);
}

/* Rank Styles - Different colors for alarm context */
.leaderboard-entry.rank-first[b-tv5q1c7cpy] {
    border-left: 3px solid #dc3545; /* Red for highest alarm count */
    background: linear-gradient(to right, rgba(248, 215, 218, 0.8), rgba(255, 255, 255, 0.7));
}

.leaderboard-entry.rank-second[b-tv5q1c7cpy] {
    border-left: 3px solid #fd7e14; /* Orange for second */
    background: linear-gradient(to right, rgba(253, 230, 206, 0.8), rgba(255, 255, 255, 0.7));
}

.leaderboard-entry.rank-third[b-tv5q1c7cpy] {
    border-left: 3px solid #ffc107; /* Yellow for third */
    background: linear-gradient(to right, rgba(255, 243, 205, 0.8), rgba(255, 255, 255, 0.7));
}

.leaderboard-entry.rank-default[b-tv5q1c7cpy] {
    border-left: 3px solid rgba(233, 236, 239, 0.8);
}

/* Rank Section */
.rank-section[b-tv5q1c7cpy] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.75rem;
    min-width: 50px;
}

.rank-number[b-tv5q1c7cpy] {
    font-size: 0.85rem;
    font-weight: bold;
    color: #495057;
    line-height: 1;
    order: 2;
    transition: color 0.3s ease;
}

.rank-icon[b-tv5q1c7cpy] {
    margin-top: 0;
    order: 1;
}

.rank-icon i[b-tv5q1c7cpy] {
    transition: all 0.3s ease;
}

.rank-first .rank-icon i[b-tv5q1c7cpy] {
    color: #dc3545; /* Red trophy for most alarms */
    font-size: 0.8rem;
}

.rank-second .rank-icon i[b-tv5q1c7cpy] {
    color: #fd7e14; /* Orange medal */
    font-size: 0.75rem;
}

.rank-third .rank-icon i[b-tv5q1c7cpy] {
    color: #ffc107; /* Yellow award */
    font-size: 0.75rem;
}

.rank-default .rank-icon i[b-tv5q1c7cpy] {
    color: #6c757d; /* Gray device icon */
    font-size: 0.7rem;
}

/* Device Section */
.device-section[b-tv5q1c7cpy] {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0.6rem;
}

.device-avatar[b-tv5q1c7cpy] {
    font-size: 1.2rem;
    color: #6c757d;
    flex-shrink: 0;
}

.device-avatar i[b-tv5q1c7cpy] {
    transition: all 0.3s ease;
}

.device-info[b-tv5q1c7cpy] {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}

.device-name[b-tv5q1c7cpy] {
    font-weight: 600;
    color: #212529;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    transition: color 0.3s ease;
}

/* Progress Section */
.progress-section[b-tv5q1c7cpy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 80px;
}

.progress-bar[b-tv5q1c7cpy] {
    flex: 1;
    height: 4px;
    background: rgba(233, 236, 239, 0.8);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.progress-fill[b-tv5q1c7cpy] {
    height: 100%;
    background: linear-gradient(to right, #dc3545, #c82333); /* Red gradient for alarms */
    border-radius: 2px;
    transition: all 0.6s ease;
}

.rank-first .progress-fill[b-tv5q1c7cpy] {
    background: linear-gradient(to right, #dc3545, #c82333); /* Deep red */
}

.rank-second .progress-fill[b-tv5q1c7cpy] {
    background: linear-gradient(to right, #fd7e14, #e8590c); /* Orange */
}

.rank-third .progress-fill[b-tv5q1c7cpy] {
    background: linear-gradient(to right, #ffc107, #e0a800); /* Yellow */
}

.alarm-count[b-tv5q1c7cpy] {
    font-weight: bold;
    color: #495057;
    font-size: 0.8rem;
    min-width: 20px;
    text-align: right;
    transition: color 0.3s ease;
}

/* No Data State */
.no-data-container[b-tv5q1c7cpy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    text-align: center;
    color: #6c757d;
}

.no-data-icon[b-tv5q1c7cpy] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-data-message h4[b-tv5q1c7cpy] {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: #495057;
}

.no-data-message p[b-tv5q1c7cpy] {
    margin: 0;
    font-size: 0.85rem;
}

/* Footer */
.widget-footer[b-tv5q1c7cpy] {
    padding: 0.6rem 1rem;
    border-top: 1px solid rgba(222, 226, 230, 0.8);
    background: rgba(248, 249, 250, 0.8);
    flex-shrink: 0;
    text-align: center;
}

.period-summary[b-tv5q1c7cpy] {
    font-size: 0.75rem;
    color: #6c757d;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .leaderboard-entry[b-tv5q1c7cpy] {
        padding: 0.3rem 0.6rem;
        min-height: 30px;
    }
    
    .rank-section[b-tv5q1c7cpy] {
        min-width: 45px;
        margin-right: 0.6rem;
    }
    
    .progress-section[b-tv5q1c7cpy] {
        min-width: 70px;
    }
}

@media (max-width: 768px) {
    .widget-header[b-tv5q1c7cpy] {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.6rem;
    }

    .header-actions[b-tv5q1c7cpy] {
        width: 100%;
        justify-content: space-between;
    }

    .refresh-info[b-tv5q1c7cpy] {
        align-items: flex-start;
    }

    .tab[b-tv5q1c7cpy] {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.6rem 0.5rem;
    }

    .tab span[b-tv5q1c7cpy] {
        font-size: 0.7rem;
    }

    .leaderboard-container[b-tv5q1c7cpy] {
        padding: 0.75rem;
    }

    .leaderboard-entry[b-tv5q1c7cpy] {
        padding: 0.25rem 0.5rem;
        min-height: 28px;
    }

    .device-section[b-tv5q1c7cpy] {
        gap: 0.5rem;
    }

    .device-avatar[b-tv5q1c7cpy] {
        font-size: 1rem;
    }

    .device-name[b-tv5q1c7cpy] {
        font-size: 0.75rem;
    }

    .progress-section[b-tv5q1c7cpy] {
        min-width: 60px;
        gap: 0.4rem;
    }
}

@media (max-width: 600px) {
    .refresh-info[b-tv5q1c7cpy] {
        display: none;
    }

    .rank-section[b-tv5q1c7cpy] {
        min-width: 40px;
        margin-right: 0.4rem;
        gap: 0.3rem;
    }

    .rank-number[b-tv5q1c7cpy] {
        font-size: 0.75rem;
    }

    .rank-icon i[b-tv5q1c7cpy] {
        font-size: 0.6rem !important;
    }

    .leaderboard-entry[b-tv5q1c7cpy] {
        padding: 0.2rem 0.4rem;
        gap: 0.3rem;
        min-height: 26px;
    }

    .device-section[b-tv5q1c7cpy] {
        gap: 0.4rem;
    }

    .device-avatar[b-tv5q1c7cpy] {
        font-size: 0.9rem;
    }

    .progress-section[b-tv5q1c7cpy] {
        min-width: 50px;
    }

    .alarm-count[b-tv5q1c7cpy] {
        font-size: 0.7rem;
    }

    .progress-bar[b-tv5q1c7cpy] {
        height: 3px;
    }
}

/* Animation effects */
.leaderboard-entry[b-tv5q1c7cpy] {
    animation: slideInUp-b-tv5q1c7cpy 0.3s ease-out;
}

@keyframes slideInUp-b-tv5q1c7cpy {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.progress-fill[b-tv5q1c7cpy] {
    animation: progressFill-b-tv5q1c7cpy 1s ease-out 0.2s both;
}

@keyframes progressFill-b-tv5q1c7cpy {
    from {
        width: 0;
    }
}

/* Scrollbar styling */
.leaderboard-container[b-tv5q1c7cpy]::-webkit-scrollbar {
    width: 6px;
}

.leaderboard-container[b-tv5q1c7cpy]::-webkit-scrollbar-track {
    background: rgba(241, 241, 241, 0.8);
    border-radius: 3px;
}

.leaderboard-container[b-tv5q1c7cpy]::-webkit-scrollbar-thumb {
    background: rgba(193, 193, 193, 0.8);
    border-radius: 3px;
}

.leaderboard-container[b-tv5q1c7cpy]::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 168, 168, 0.8);
}
/* /Components/Widgets/Widget_TopCasesCompleted.razor.rz.scp.css */
.top-cases-completed-widget[b-abrxcf45dc] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 0.85rem;
    background: transparent;
}

/* Loading and Error States */
.loading-container[b-abrxcf45dc], .error-container[b-abrxcf45dc] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6c757d;
    gap: 1rem;
}

.error-container[b-abrxcf45dc] {
    color: #dc3545;
    text-align: center;
    padding: 1rem;
}

.error-container i[b-abrxcf45dc] {
    font-size: 1.5rem;
}

/* Header Section */
.widget-header[b-abrxcf45dc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    background: rgba(248, 249, 250, 0.8);
    flex-shrink: 0;
}

.header-info[b-abrxcf45dc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.widget-title[b-abrxcf45dc] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.widget-title i[b-abrxcf45dc] {
    color: #ffc107;
}

.last-update[b-abrxcf45dc] {
    font-size: 0.7rem;
    color: #6c757d;
}

.header-actions[b-abrxcf45dc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.refresh-info[b-abrxcf45dc] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.7rem;
    color: #6c757d;
}

.refresh-button[b-abrxcf45dc] {
    flex-shrink: 0;
}

/* Time Period Tabs */
.time-period-tabs[b-abrxcf45dc] {
    display: flex;
    background: rgba(248, 249, 250, 0.8);
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.tab[b-abrxcf45dc] {
    flex: 1;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6c757d;
}

.tab:hover[b-abrxcf45dc] {
    background: rgba(233, 236, 239, 0.8);
    color: #495057;
}

.tab.active[b-abrxcf45dc] {
    background: rgba(255, 255, 255, 0.9);
    color: #007bff;
    border-bottom-color: #007bff;
}

.tab i[b-abrxcf45dc] {
    font-size: 0.9rem;
}

/* Leaderboard Container */
.leaderboard-container[b-abrxcf45dc] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.leaderboard-list[b-abrxcf45dc] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem; /* CHANGED: Smaller gap */
}

/* Leaderboard Entry - MAJOR CHANGES for single line */
.leaderboard-entry[b-abrxcf45dc] {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.75rem; /* CHANGED: Much smaller padding */
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(222, 226, 230, 0.8);
    border-radius: 4px; /* CHANGED: Smaller border radius */
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    min-height: 32px; /* CHANGED: Much smaller height */
    cursor: default; /* CHANGED: Remove pointer cursor since not clickable */
}

.leaderboard-entry:hover[b-abrxcf45dc] {
    /* CHANGED: Remove hover effects since not clickable */
    background: rgba(255, 255, 255, 0.8);
}

/* Rank Styles */
.leaderboard-entry.rank-first[b-abrxcf45dc] {
    border-left: 3px solid #ffc107;
    background: linear-gradient(to right, rgba(255, 249, 230, 0.8), rgba(255, 255, 255, 0.7));
}

.leaderboard-entry.rank-second[b-abrxcf45dc] {
    border-left: 3px solid #6c757d;
    background: linear-gradient(to right, rgba(248, 249, 250, 0.8), rgba(255, 255, 255, 0.7));
}

.leaderboard-entry.rank-third[b-abrxcf45dc] {
    border-left: 3px solid #cd7f32;
    background: linear-gradient(to right, rgba(253, 246, 240, 0.8), rgba(255, 255, 255, 0.7));
}

.leaderboard-entry.rank-default[b-abrxcf45dc] {
    border-left: 3px solid rgba(233, 236, 239, 0.8);
}

/* Single Line Layout - MAJOR RESTRUCTURE */
.rank-section[b-abrxcf45dc] {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* CHANGED: Icon next to number horizontally */
    margin-right: 0.75rem;
    min-width: 50px; /* CHANGED: Accommodate icon + number */
}

.rank-number[b-abrxcf45dc] {
    font-size: 0.85rem; /* CHANGED: Smaller font */
    font-weight: bold;
    color: #495057;
    line-height: 1;
    order: 2; /* CHANGED: Number comes after icon */
}

.rank-icon[b-abrxcf45dc] {
    margin-top: 0; /* CHANGED: Remove top margin */
    order: 1; /* CHANGED: Icon comes first */
}

.rank-first .rank-icon i[b-abrxcf45dc] {
    color: #ffc107;
    font-size: 0.8rem; /* CHANGED: Smaller icon */
}

.rank-second .rank-icon i[b-abrxcf45dc] {
    color: #6c757d;
    font-size: 0.75rem; /* CHANGED: Smaller icon */
}

.rank-third .rank-icon i[b-abrxcf45dc] {
    color: #cd7f32;
    font-size: 0.75rem; /* CHANGED: Smaller icon */
}

.rank-default .rank-icon i[b-abrxcf45dc] {
    color: #adb5bd;
    font-size: 0.7rem; /* CHANGED: Smaller icon */
}

/* User Section - Single Line */
.user-section[b-abrxcf45dc] {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0.6rem;
}

.user-avatar[b-abrxcf45dc] {
    font-size: 1.2rem; /* CHANGED: Smaller avatar */
    color: #6c757d;
    flex-shrink: 0;
}

.user-info[b-abrxcf45dc] {
    display: flex;
    align-items: center; /* CHANGED: Single line, no column */
    min-width: 0;
    flex: 1;
}

.user-name[b-abrxcf45dc] {
    font-weight: 600;
    color: #212529;
    font-size: 0.8rem; /* CHANGED: Smaller font */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.user-cases[b-abrxcf45dc] {
    display: none; /* CHANGED: Remove case count under name */
}

/* Progress Section - Simplified */
.progress-section[b-abrxcf45dc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 80px; /* CHANGED: Smaller width */
}

.progress-bar[b-abrxcf45dc] {
    flex: 1;
    height: 4px; /* CHANGED: Much thinner progress bar */
    background: rgba(233, 236, 239, 0.8);
    border-radius: 2px; /* CHANGED: Smaller border radius */
    overflow: hidden;
    position: relative;
}

.progress-fill[b-abrxcf45dc] {
    height: 100%;
    background: linear-gradient(to right, #007bff, #0056b3);
    border-radius: 2px; /* CHANGED: Smaller border radius */
    transition: width 0.6s ease;
}

.rank-first .progress-fill[b-abrxcf45dc] {
    background: linear-gradient(to right, #ffc107, #e0a800);
}

.rank-second .progress-fill[b-abrxcf45dc] {
    background: linear-gradient(to right, #6c757d, #545b62);
}

.rank-third .progress-fill[b-abrxcf45dc] {
    background: linear-gradient(to right, #cd7f32, #b8722e);
}

.case-count[b-abrxcf45dc] {
    font-weight: bold;
    color: #495057;
    font-size: 0.8rem; /* CHANGED: Smaller font */
    min-width: 20px; /* CHANGED: Smaller width */
    text-align: right;
}

/* No Data State */
.no-data-container[b-abrxcf45dc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    text-align: center;
    color: #6c757d;
}

.no-data-icon[b-abrxcf45dc] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-data-message h4[b-abrxcf45dc] {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: #495057;
}

.no-data-message p[b-abrxcf45dc] {
    margin: 0;
    font-size: 0.85rem;
}

/* Footer */
.widget-footer[b-abrxcf45dc] {
    padding: 0.6rem 1rem;
    border-top: 1px solid rgba(222, 226, 230, 0.8);
    background: rgba(248, 249, 250, 0.8);
    flex-shrink: 0;
    text-align: center;
}

.period-summary[b-abrxcf45dc] {
    font-size: 0.75rem;
    color: #6c757d;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .leaderboard-entry[b-abrxcf45dc] {
        padding: 0.3rem 0.6rem; /* CHANGED: Even smaller padding */
        min-height: 30px; /* CHANGED: Smaller height */
    }
    
    .rank-section[b-abrxcf45dc] {
        min-width: 45px; /* CHANGED: Smaller width */
        margin-right: 0.6rem;
    }
    
    .progress-section[b-abrxcf45dc] {
        min-width: 70px; /* CHANGED: Smaller width */
    }
}

@media (max-width: 768px) {
    .widget-header[b-abrxcf45dc] {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.6rem;
    }

    .header-actions[b-abrxcf45dc] {
        width: 100%;
        justify-content: space-between;
    }

    .refresh-info[b-abrxcf45dc] {
        align-items: flex-start;
    }

    .tab[b-abrxcf45dc] {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.6rem 0.5rem;
    }

    .tab span[b-abrxcf45dc] {
        font-size: 0.7rem;
    }

    .leaderboard-container[b-abrxcf45dc] {
        padding: 0.75rem;
    }

    .leaderboard-entry[b-abrxcf45dc] {
        padding: 0.25rem 0.5rem; /* CHANGED: Very small padding */
        min-height: 28px; /* CHANGED: Very small height */
    }

    .user-section[b-abrxcf45dc] {
        gap: 0.5rem;
    }

    .user-avatar[b-abrxcf45dc] {
        font-size: 1rem; /* CHANGED: Smaller avatar */
    }

    .user-name[b-abrxcf45dc] {
        font-size: 0.75rem; /* CHANGED: Smaller font */
    }

    .progress-section[b-abrxcf45dc] {
        min-width: 60px; /* CHANGED: Smaller width */
        gap: 0.4rem;
    }
}

@media (max-width: 600px) {
    .refresh-info[b-abrxcf45dc] {
        display: none;
    }

    .rank-section[b-abrxcf45dc] {
        min-width: 40px; /* CHANGED: Smaller width */
        margin-right: 0.4rem;
        gap: 0.3rem; /* CHANGED: Smaller gap between icon and number */
    }

    .rank-number[b-abrxcf45dc] {
        font-size: 0.75rem; /* CHANGED: Smaller font */
    }

    .rank-icon i[b-abrxcf45dc] {
        font-size: 0.6rem !important; /* CHANGED: Much smaller icons on mobile */
    }

    .leaderboard-entry[b-abrxcf45dc] {
        padding: 0.2rem 0.4rem; /* CHANGED: Minimal padding */
        gap: 0.3rem;
        min-height: 26px; /* CHANGED: Very compact height */
    }

    .user-section[b-abrxcf45dc] {
        gap: 0.4rem;
    }

    .user-avatar[b-abrxcf45dc] {
        font-size: 0.9rem; /* CHANGED: Much smaller avatar */
    }

    .progress-section[b-abrxcf45dc] {
        min-width: 50px; /* CHANGED: Smaller width */
    }

    .case-count[b-abrxcf45dc] {
        font-size: 0.7rem; /* CHANGED: Smaller font */
    }

    .progress-bar[b-abrxcf45dc] {
        height: 3px; /* CHANGED: Even thinner on mobile */
    }
}

/* Animation effects */
.leaderboard-entry[b-abrxcf45dc] {
    animation: slideInUp-b-abrxcf45dc 0.3s ease-out;
}

@keyframes slideInUp-b-abrxcf45dc {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.progress-fill[b-abrxcf45dc] {
    animation: progressFill-b-abrxcf45dc 1s ease-out 0.2s both;
}

@keyframes progressFill-b-abrxcf45dc {
    from {
        width: 0;
    }
}

/* Scrollbar styling */
.leaderboard-container[b-abrxcf45dc]::-webkit-scrollbar {
    width: 6px;
}

.leaderboard-container[b-abrxcf45dc]::-webkit-scrollbar-track {
    background: rgba(241, 241, 241, 0.8);
    border-radius: 3px;
}

.leaderboard-container[b-abrxcf45dc]::-webkit-scrollbar-thumb {
    background: rgba(193, 193, 193, 0.8);
    border-radius: 3px;
}

.leaderboard-container[b-abrxcf45dc]::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 168, 168, 0.8);
}
/* /Components/Widgets/Widget_TopMessageDevices.razor.rz.scp.css */
.top-message-devices-widget[b-kob07tbrcg] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 0.85rem;
    background: transparent;
}

/* Loading and Error States */
.loading-container[b-kob07tbrcg], .error-container[b-kob07tbrcg] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6c757d;
    gap: 1rem;
}

.error-container[b-kob07tbrcg] {
    color: #dc3545;
    text-align: center;
    padding: 1rem;
}

.error-container i[b-kob07tbrcg] {
    font-size: 1.5rem;
}

/* Header Section */
.widget-header[b-kob07tbrcg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    background: rgba(248, 249, 250, 0.8);
    flex-shrink: 0;
}

.header-info[b-kob07tbrcg] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.widget-title[b-kob07tbrcg] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.widget-title i[b-kob07tbrcg] {
    color: #17a2b8; /* Cyan color for message icon */
}

.last-update[b-kob07tbrcg] {
    font-size: 0.7rem;
    color: #6c757d;
}

.header-actions[b-kob07tbrcg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.refresh-info[b-kob07tbrcg] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.7rem;
    color: #6c757d;
}

.refresh-button[b-kob07tbrcg] {
    flex-shrink: 0;
}

/* Leaderboard Container */
.leaderboard-container[b-kob07tbrcg] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.leaderboard-list[b-kob07tbrcg] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Leaderboard Entry - Enhanced hover effects */
.leaderboard-entry[b-kob07tbrcg] {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(222, 226, 230, 0.8);
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    min-height: 32px;
    cursor: default;
    position: relative;
}

/* Enhanced hover effects for clickable entries */
.leaderboard-entry.clickable[b-kob07tbrcg] {
    cursor: pointer;
}

.leaderboard-entry.clickable:hover[b-kob07tbrcg] {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 123, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
    transform: translateY(-1px);
}

.leaderboard-entry.clickable:hover .device-name[b-kob07tbrcg] {
    color: #007bff;
}

.leaderboard-entry.clickable:hover .device-avatar i[b-kob07tbrcg] {
    color: #007bff;
    transform: scale(1.1);
}

.leaderboard-entry.clickable:hover .progress-fill[b-kob07tbrcg] {
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.4);
}

.leaderboard-entry.clickable:hover[b-kob07tbrcg]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #007bff, #0056b3);
    border-radius: 4px 0 0 4px;
    z-index: 1;
}

/* Active state for click feedback */
.leaderboard-entry.clickable:active[b-kob07tbrcg] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.2);
}

/* Rank Styles - UPDATED: Red/Orange/Yellow color scheme */
.leaderboard-entry.rank-first[b-kob07tbrcg] {
    border-left: 3px solid #dc3545; /* Red for highest message count (attention!) */
    background: linear-gradient(to right, rgba(248, 215, 218, 0.8), rgba(255, 255, 255, 0.7));
}

.leaderboard-entry.rank-second[b-kob07tbrcg] {
    border-left: 3px solid #fd7e14; /* Orange for second */
    background: linear-gradient(to right, rgba(253, 230, 206, 0.8), rgba(255, 255, 255, 0.7));
}

.leaderboard-entry.rank-third[b-kob07tbrcg] {
    border-left: 3px solid #ffc107; /* Yellow for third */
    background: linear-gradient(to right, rgba(255, 243, 205, 0.8), rgba(255, 255, 255, 0.7));
}

.leaderboard-entry.rank-default[b-kob07tbrcg] {
    border-left: 3px solid rgba(233, 236, 239, 0.8);
}

/* Rank Section */
.rank-section[b-kob07tbrcg] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.75rem;
    min-width: 50px;
}

.rank-number[b-kob07tbrcg] {
    font-size: 0.85rem;
    font-weight: bold;
    color: #495057;
    line-height: 1;
    order: 2;
    transition: color 0.3s ease;
}

.rank-icon[b-kob07tbrcg] {
    margin-top: 0;
    order: 1;
}

.rank-icon i[b-kob07tbrcg] {
    transition: all 0.3s ease;
}

/* UPDATED: Red/Orange/Yellow icons */
.rank-first .rank-icon i[b-kob07tbrcg] {
    color: #dc3545; /* Red exclamation (attention!) */
    font-size: 0.85rem;
}

.rank-second .rank-icon i[b-kob07tbrcg] {
    color: #fd7e14; /* Orange */
    font-size: 0.8rem;
}

.rank-third .rank-icon i[b-kob07tbrcg] {
    color: #ffc107; /* Yellow */
    font-size: 0.75rem;
}

.rank-default .rank-icon i[b-kob07tbrcg] {
    color: #6c757d; /* Gray device icon */
    font-size: 0.7rem;
}

/* Device Section */
.device-section[b-kob07tbrcg] {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0.6rem;
}

.device-avatar[b-kob07tbrcg] {
    font-size: 1.2rem;
    color: #6c757d;
    flex-shrink: 0;
}

.device-avatar i[b-kob07tbrcg] {
    transition: all 0.3s ease;
}

.device-info[b-kob07tbrcg] {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}

.device-name[b-kob07tbrcg] {
    font-weight: 600;
    color: #212529;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    transition: color 0.3s ease;
}

/* Progress Section */
.progress-section[b-kob07tbrcg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 80px;
}

.progress-bar[b-kob07tbrcg] {
    flex: 1;
    height: 4px;
    background: rgba(233, 236, 239, 0.8);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.progress-fill[b-kob07tbrcg] {
    height: 100%;
    background: linear-gradient(to right, #17a2b8, #138496); /* Default cyan gradient */
    border-radius: 2px;
    transition: all 0.6s ease;
}

/* UPDATED: Red/Orange/Yellow progress bars */
.rank-first .progress-fill[b-kob07tbrcg] {
    background: linear-gradient(to right, #dc3545, #c82333); /* Red gradient */
}

.rank-second .progress-fill[b-kob07tbrcg] {
    background: linear-gradient(to right, #fd7e14, #e8590c); /* Orange gradient */
}

.rank-third .progress-fill[b-kob07tbrcg] {
    background: linear-gradient(to right, #ffc107, #e0a800); /* Yellow gradient */
}

.message-count[b-kob07tbrcg] {
    font-weight: bold;
    color: #495057;
    font-size: 0.8rem;
    min-width: 35px;
    text-align: right;
    transition: color 0.3s ease;
}

/* No Data State */
.no-data-container[b-kob07tbrcg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    text-align: center;
    color: #6c757d;
}

.no-data-icon[b-kob07tbrcg] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-data-message h4[b-kob07tbrcg] {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: #495057;
}

.no-data-message p[b-kob07tbrcg] {
    margin: 0;
    font-size: 0.85rem;
}

/* Footer */
.widget-footer[b-kob07tbrcg] {
    padding: 0.6rem 1rem;
    border-top: 1px solid rgba(222, 226, 230, 0.8);
    background: rgba(248, 249, 250, 0.8);
    flex-shrink: 0;
    text-align: center;
}

.period-summary[b-kob07tbrcg] {
    font-size: 0.75rem;
    color: #6c757d;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .leaderboard-entry[b-kob07tbrcg] {
        padding: 0.3rem 0.6rem;
        min-height: 30px;
    }
    
    .rank-section[b-kob07tbrcg] {
        min-width: 45px;
        margin-right: 0.6rem;
    }
    
    .progress-section[b-kob07tbrcg] {
        min-width: 70px;
    }
}

@media (max-width: 768px) {
    .widget-header[b-kob07tbrcg] {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.6rem;
    }

    .header-actions[b-kob07tbrcg] {
        width: 100%;
        justify-content: space-between;
    }

    .refresh-info[b-kob07tbrcg] {
        align-items: flex-start;
    }

    .leaderboard-container[b-kob07tbrcg] {
        padding: 0.75rem;
    }

    .leaderboard-entry[b-kob07tbrcg] {
        padding: 0.25rem 0.5rem;
        min-height: 28px;
    }

    .device-section[b-kob07tbrcg] {
        gap: 0.5rem;
    }

    .device-avatar[b-kob07tbrcg] {
        font-size: 1rem;
    }

    .device-name[b-kob07tbrcg] {
        font-size: 0.75rem;
    }

    .progress-section[b-kob07tbrcg] {
        min-width: 60px;
        gap: 0.4rem;
    }
}

@media (max-width: 600px) {
    .refresh-info[b-kob07tbrcg] {
        display: none;
    }

    .rank-section[b-kob07tbrcg] {
        min-width: 40px;
        margin-right: 0.4rem;
        gap: 0.3rem;
    }

    .rank-number[b-kob07tbrcg] {
        font-size: 0.75rem;
    }

    .rank-icon i[b-kob07tbrcg] {
        font-size: 0.6rem !important;
    }

    .leaderboard-entry[b-kob07tbrcg] {
        padding: 0.2rem 0.4rem;
        gap: 0.3rem;
        min-height: 26px;
    }

    .device-section[b-kob07tbrcg] {
        gap: 0.4rem;
    }

    .device-avatar[b-kob07tbrcg] {
        font-size: 0.9rem;
    }

    .progress-section[b-kob07tbrcg] {
        min-width: 50px;
    }

    .message-count[b-kob07tbrcg] {
        font-size: 0.7rem;
    }

    .progress-bar[b-kob07tbrcg] {
        height: 3px;
    }
}

/* Animation effects */
.leaderboard-entry[b-kob07tbrcg] {
    animation: slideInUp-b-kob07tbrcg 0.3s ease-out;
}

@keyframes slideInUp-b-kob07tbrcg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.progress-fill[b-kob07tbrcg] {
    animation: progressFill-b-kob07tbrcg 1s ease-out 0.2s both;
}

@keyframes progressFill-b-kob07tbrcg {
    from {
        width: 0;
    }
}

/* Scrollbar styling */
.leaderboard-container[b-kob07tbrcg]::-webkit-scrollbar {
    width: 6px;
}

.leaderboard-container[b-kob07tbrcg]::-webkit-scrollbar-track {
    background: rgba(241, 241, 241, 0.8);
    border-radius: 3px;
}

.leaderboard-container[b-kob07tbrcg]::-webkit-scrollbar-thumb {
    background: rgba(193, 193, 193, 0.8);
    border-radius: 3px;
}

.leaderboard-container[b-kob07tbrcg]::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 168, 168, 0.8);
}