/* /Components/Layout/LoginLayout.razor.rz.scp.css */
.login-page[b-dv5z8udvs5] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('/images/Designer.png');
    background-size: cover;
    background-position: 100% center; /* Show right side of image on narrow screens */
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-n2aytcvo1n] {
    position: relative;
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    background: var(--mp-bg-page);
    color: var(--mp-text);
}

main[b-n2aytcvo1n] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* main always takes full width � sidebar overlays */
    width: 100%;
}

/* Sidebar � fixed overlay on the right, does not push content */
.sidebar[b-n2aytcvo1n] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    z-index: 9999;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(100%);
    pointer-events: none;
}

.page.nav-open .sidebar[b-n2aytcvo1n] {
    transform: translateX(0);
    pointer-events: auto;
}

/* Semi-transparent backdrop behind sidebar � hidden by default */
.nav-backdrop[b-n2aytcvo1n] {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0);
    display: none;
}

.page.nav-open .nav-backdrop[b-n2aytcvo1n] {
    display: block;
    animation: fadeIn-b-n2aytcvo1n 0.2s ease;
}

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

.top-row[b-n2aytcvo1n] {
    background: var(--mp-nav-header-bg);
    border-bottom: 1px solid var(--mp-border);
    justify-content: space-between;
    height: 3.5rem;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
}

/* Hamburger button in top-row � visible when nav is closed, hidden when open */
.nav-open-btn[b-n2aytcvo1n] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--mp-accent-border);
    border-radius: 6px;
    background: var(--mp-accent-bg);
    cursor: pointer;
    color: var(--mp-accent-text);
    font-size: 1.25rem;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.page.nav-open .nav-open-btn[b-n2aytcvo1n] {
    display: none;
}

.nav-open-btn:hover[b-n2aytcvo1n] {
    background: rgba(212, 165, 116, 0.2);
    border-color: rgba(212, 165, 116, 0.4);
    color: #e8c9a0;
}

.top-row[b-n2aytcvo1n]  a, .top-row[b-n2aytcvo1n]  .btn-link {
        white-space: nowrap;
        text-decoration: none;
        color: var(--mp-text-muted);
    }

    .top-row[b-n2aytcvo1n]  a:hover, .top-row[b-n2aytcvo1n]  .btn-link:hover {
        text-decoration: none;
        color: var(--mp-accent-text);
    }

.topbar-group-name[b-n2aytcvo1n] {
    color: var(--mp-accent-text);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.topbar-group-icon[b-n2aytcvo1n] {
    /*width: 24px;*/
    min-width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

[b-n2aytcvo1n] .help-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

article[b-n2aytcvo1n] {
    padding: 2rem;
}

@media (max-width: 640px) {
    .page[b-n2aytcvo1n] {
        flex-direction: column;
    }

    .top-row[b-n2aytcvo1n] {
        justify-content: space-between;
    }

    .top-row[b-n2aytcvo1n]  a, .top-row[b-n2aytcvo1n]  .btn-link {
        margin-left: 0;
    }
    
    article[b-n2aytcvo1n] {
        padding: 1rem;
    }
}

#blazor-error-ui[b-n2aytcvo1n] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-n2aytcvo1n] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ===== ClickUp-Inspired Navigation Container ===== */
/* Mine Pulse Theme - Warm bronze accent (#d4a574) */
.nav-container[b-r8ptr9sh6d] {
    background: var(--mp-nav-bg);
    width: 280px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 2px solid rgba(212, 165, 116, 0.35);
    /*box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45), -2px 0 8px rgba(0, 0, 0, 0.25);*/
    position: relative;
    isolation: isolate;
}

/* ===== Nav Header (Workspace Selector) ===== */
.nav-header[b-r8ptr9sh6d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--mp-nav-header-bg);
    border-bottom: 1px solid var(--mp-border);
    min-height: 64px;
    flex-shrink: 0;
}

/* ===== Hamburger Toggle Button ===== */
.nav-collapse-toggle[b-r8ptr9sh6d] {
    background: transparent;
    border: none;
    border-radius: 8px;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.nav-collapse-toggle:hover[b-r8ptr9sh6d] {
    background: rgba(212, 165, 116, 0.15);
}

.hamburger-icon[b-r8ptr9sh6d] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 16px;
    min-width: 16px;
    min-height: 12px;
    position: relative;
}

.hamburger-icon span[b-r8ptr9sh6d] {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--mp-accent-text);
    border-radius: 2px;
    transition: all 0.25s ease;
}

/* Always show as X when nav is open (clicking hides nav) */
.nav-collapse-toggle .hamburger-icon span:nth-child(1)[b-r8ptr9sh6d] {
    transform: translateY(5px) rotate(45deg);
}

.nav-collapse-toggle .hamburger-icon span:nth-child(2)[b-r8ptr9sh6d] {
    opacity: 0;
}

.nav-collapse-toggle .hamburger-icon span:nth-child(3)[b-r8ptr9sh6d] {
    transform: translateY(-5px) rotate(-45deg);
}

/* ===== Workspace Selector ===== */
.workspace-selector[b-r8ptr9sh6d] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
}

    .workspace-info[b-r8ptr9sh6d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.workspace-info:hover[b-r8ptr9sh6d] {
    background: rgba(212, 165, 116, 0.1);
}

.workspace-icon[b-r8ptr9sh6d] {
    /*width: 2rem;*/
    min-width: 2rem;
    height: 2rem;
    background: linear-gradient(135deg, #d4a574 0%, #c4956a 50%, #b8865e 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(212, 165, 116, 0.3);
}

.workspace-icon .bi[b-r8ptr9sh6d] {
    font-size: 1rem;
    color: #1e1e2e;
}

.workspace-icon-custom[b-r8ptr9sh6d] {
    background: none !important;
    box-shadow: none !important;
    overflow: hidden;
}

.workspace-icon-custom img[b-r8ptr9sh6d] {
    width: 100%;
    height: 100%;
    /*max-width: 2rem;*/
    max-height: 2rem;
    object-fit: cover;
    border-radius: 8px;
}

.workspace-details[b-r8ptr9sh6d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.workspace-name[b-r8ptr9sh6d] {
    color: var(--mp-text-heading);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-name.group-name-display[b-r8ptr9sh6d] {
    color: var(--mp-accent-text);
}

.workspace-subtitle[b-r8ptr9sh6d] {
    color: var(--mp-text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Mobile Toggle ===== */
.navbar-toggler[b-r8ptr9sh6d] {
    display: none;
}

/* ===== Navigation Scrollable Area ===== */
.nav-scrollable[b-r8ptr9sh6d] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 165, 116, 0.2) transparent;
}

.nav-scrollable[b-r8ptr9sh6d]::-webkit-scrollbar {
    width: 6px;
}

.nav-scrollable[b-r8ptr9sh6d]::-webkit-scrollbar-track {
    background: transparent;
}

.nav-scrollable[b-r8ptr9sh6d]::-webkit-scrollbar-thumb {
    background: rgba(212, 165, 116, 0.2);
    border-radius: 3px;
}

.nav-scrollable[b-r8ptr9sh6d]::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 165, 116, 0.35);
}

/* ===== Search Bar (Mine Pulse Style) ===== */
.nav-search[b-r8ptr9sh6d] {
    margin: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-search:hover[b-r8ptr9sh6d] {
    background: var(--mp-bg-hover);
    border-color: var(--mp-border-medium);
}

.nav-search.collapsed[b-r8ptr9sh6d] {
    justify-content: center;
    padding: 0.5rem;
}

.search-icon[b-r8ptr9sh6d] {
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgba(255,255,255,0.5)' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    flex-shrink: 0;
}

.search-text[b-r8ptr9sh6d] {
    color: var(--mp-text-muted);
    font-size: 0.875rem;
    flex: 1;
}

.search-shortcut[b-r8ptr9sh6d] {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
        font-family: monospace;
    }

        /* ===== Navigation Items ===== */
    .nav[b-r8ptr9sh6d] {
        padding: 0.25rem 0;
    }

    .nav-item[b-r8ptr9sh6d] {
        margin: 0.125rem 0.5rem;
    }

    /* Override Bootstrap's default link color */
    .nav-container .nav-link[b-r8ptr9sh6d],
    .nav-container a.nav-link[b-r8ptr9sh6d],
    .nav-scrollable .nav-link[b-r8ptr9sh6d],
    .nav-scrollable a.nav-link[b-r8ptr9sh6d] {
        color: rgba(255, 255, 255, 0.75) !important;
        border-radius: 6px;
        height: 2rem;
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        padding: 0 0.625rem !important;
        transition: all 0.15s ease;
        font-size: 0.8125rem;
        font-weight: 500;
        text-decoration: none !important;
        position: relative;
        gap: 0.5rem;
        border-left: 3px solid transparent;
    }

    .nav-container .nav-link:hover[b-r8ptr9sh6d],
    .nav-container a.nav-link:hover[b-r8ptr9sh6d],
    .nav-scrollable .nav-link:hover[b-r8ptr9sh6d],
    .nav-scrollable a.nav-link:hover[b-r8ptr9sh6d] {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
        border-left-color: rgba(212, 165, 116, 0.5);
    }

    .nav-container .nav-link.active[b-r8ptr9sh6d],
    .nav-container a.nav-link.active[b-r8ptr9sh6d],
    .nav-scrollable .nav-link.active[b-r8ptr9sh6d],
    .nav-scrollable a.nav-link.active[b-r8ptr9sh6d] {
        background: rgba(212, 165, 116, 0.15) !important;
        color: #d4a574 !important;
        border-left: 3px solid #d4a574;
    }

    .nav-link.featured[b-r8ptr9sh6d] {
        background: linear-gradient(135deg, rgba(212, 165, 116, 0.12) 0%, rgba(196, 149, 106, 0.08) 100%);
        border: 1px solid rgba(212, 165, 116, 0.25);
    }

    .nav-link.featured:hover[b-r8ptr9sh6d] {
        background: linear-gradient(135deg, rgba(212, 165, 116, 0.18) 0%, rgba(196, 149, 106, 0.12) 100%) !important;
        border-color: rgba(212, 165, 116, 0.35);
    }

    /* Remove default NavLink underline */
    a.nav-link[b-r8ptr9sh6d] {
        text-decoration: none !important;
    }

    a.nav-link:hover[b-r8ptr9sh6d],
    a.nav-link:focus[b-r8ptr9sh6d],
    a.nav-link:active[b-r8ptr9sh6d] {
        text-decoration: none !important;
    }

    /* Button styled as nav-link */
    button.nav-btn[b-r8ptr9sh6d] {
        width: 100%;
        border: none;
        background: none;
        cursor: pointer;
        text-align: left;
    }

    /* ===== Divider ===== */
    .nav-divider[b-r8ptr9sh6d] {
        height: 1px;
        background: var(--mp-border);
        margin: 0.5rem 1rem;
    }

/* ===== Section Headers ===== */
.nav-section[b-r8ptr9sh6d] {
    margin-top: 0.25rem;
}

.nav-section-header[b-r8ptr9sh6d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.625rem;
    margin: 0 0.5rem;
    color: var(--mp-accent-text);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 6px;
}

.nav-section-header:hover[b-r8ptr9sh6d] {
    background: var(--mp-bg-hover);
    color: var(--mp-accent-text);
}

.nav-section-header-content[b-r8ptr9sh6d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.nav-section-title[b-r8ptr9sh6d] {
    white-space: nowrap;
    flex: 1;
}

/* ===== Badges (Mine Pulse Style) ===== */
.section-badge[b-r8ptr9sh6d] {
    background: var(--mp-accent-bg);
    color: var(--mp-accent-text);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

.section-badge.active[b-r8ptr9sh6d] {
    background: #d4a574;
    color: #1e1e2e;
}

.section-badge.new[b-r8ptr9sh6d] {
    background: #4ade80;
    color: white;
}

.nav-badge[b-r8ptr9sh6d] {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.nav-badge.live[b-r8ptr9sh6d] {
    background: #ef4444;
    color: white;
    animation: pulse-badge-b-r8ptr9sh6d 2s infinite;
}

@keyframes pulse-badge-b-r8ptr9sh6d {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.nav-section-toggle[b-r8ptr9sh6d] {
    font-size: 0.75rem;
    color: rgba(212, 165, 116, 0.6);
    flex-shrink: 0;
    margin-left: 0.25rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.nav-section-header:hover .nav-section-toggle[b-r8ptr9sh6d] {
    color: rgba(212, 165, 116, 0.9);
}

/* Chevrons use Bootstrap Icon font - no background-image needed */

/* ===== Section Items ===== */
.nav-section-items[b-r8ptr9sh6d] {
    padding-left: 0;
    padding-top: 0.25rem;
}

/* ===== Section Collapse (Blazor-controlled) ===== */
.nav-section-collapse[b-r8ptr9sh6d] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
}

.nav-section-collapse.show[b-r8ptr9sh6d] {
    max-height: 500px;
    transition: max-height 0.35s ease-in;
}

.nav-section-items .nav-item[b-r8ptr9sh6d] {
    padding-left: 0;
    margin-left: 0.5rem;
}

.nav-section-items .nav-link[b-r8ptr9sh6d] {
    padding-left: 1.75rem !important;
    height: 1.875rem;
    font-size: 0.8125rem;
}

/* ===== Icons ===== */
.nav-icon[b-r8ptr9sh6d] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Style Bootstrap Icon font color - inherits from parent nav-link */
.nav-icon[b-r8ptr9sh6d]::before {
    color: inherit;
    line-height: 1;
}

.nav-text[b-r8ptr9sh6d] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

/* ===== User Profile Footer (Mine Pulse Style) ===== */
.nav-footer-user[b-r8ptr9sh6d] {
    padding: 0.75rem;
    border-top: 1px solid var(--mp-border);
    background: var(--mp-nav-header-bg);
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.user-profile[b-r8ptr9sh6d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-profile:hover[b-r8ptr9sh6d] {
    background: rgba(212, 165, 116, 0.1);
}

.user-avatar[b-r8ptr9sh6d] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4a574 0%, #c4956a 50%, #b8865e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(212, 165, 116, 0.3);
}

.user-avatar .bi[b-r8ptr9sh6d] {
    font-size: 1rem;
    color: #1e1e2e;
}

.user-info[b-r8ptr9sh6d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.user-name[b-r8ptr9sh6d] {
    color: var(--mp-text-heading);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-status[b-r8ptr9sh6d] {
    color: #4ade80;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.user-status[b-r8ptr9sh6d]::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
    display: inline-block;
}

/* ===== Responsive Design ===== */
@media (max-width: 640px) {
    .nav-container[b-r8ptr9sh6d] {
        width: 85vw;
        max-width: 320px;
    }
}

/* Bootstrap Icons are styled via font-family from bootstrap-icons CDN */
/* Icon colors are inherited from parent .nav-link color property */

/* ===== Footer Spacer ===== */
.nav-footer[b-r8ptr9sh6d] {
    height: 1rem;
}

/* ===== User Profile Dropdown Menu ===== */
.user-profile-wrapper[b-r8ptr9sh6d] {
    position: relative;
}

.user-profile-btn[b-r8ptr9sh6d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
}

.user-profile-btn:hover[b-r8ptr9sh6d] {
    background: rgba(255, 255, 255, 0.05);
}

.user-menu-toggle[b-r8ptr9sh6d] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    margin-left: auto;
}

.user-menu-toggle.open[b-r8ptr9sh6d] {
    transform: rotate(180deg);
}

/* User Dropdown Backdrop - click-away overlay */
.user-dropdown-backdrop[b-r8ptr9sh6d] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.15);
    cursor: default;
}

/* User Dropdown Menu */
.user-dropdown-menu[b-r8ptr9sh6d] {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    padding-bottom: 0.5rem;
    z-index: 999;
    animation: slideUp-b-r8ptr9sh6d 0.15s ease-out;
}

.user-dropdown-menu-inner[b-r8ptr9sh6d] {
    background: #252540;
    border: 1px solid rgba(212, 165, 116, 0.3);
    border-radius: 8px;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    animation: slideUp-b-r8ptr9sh6d 0.15s ease-out;
}

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

.dropdown-header[b-r8ptr9sh6d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--mp-bg-elevated);
}

.dropdown-avatar[b-r8ptr9sh6d] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown-avatar .bi[b-r8ptr9sh6d] {
    color: white;
    font-size: 1.25rem;
}

.dropdown-user-details[b-r8ptr9sh6d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dropdown-user-name[b-r8ptr9sh6d] {
    color: var(--mp-text-heading);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-user-email[b-r8ptr9sh6d] {
    color: var(--mp-text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-divider[b-r8ptr9sh6d] {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0;
}

.dropdown-item[b-r8ptr9sh6d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}

.dropdown-item:hover[b-r8ptr9sh6d] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.dropdown-item .bi[b-r8ptr9sh6d] {
    font-size: 1rem;
    opacity: 0.7;
}

.dropdown-item.logout[b-r8ptr9sh6d] {
    color: #f87171;
}

.dropdown-item.logout:hover[b-r8ptr9sh6d] {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
}

.dropdown-item.logout .bi[b-r8ptr9sh6d] {
    opacity: 1;
}

/* ===== Theme Toggle ===== */
.theme-toggle-row[b-r8ptr9sh6d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    color: rgba(255, 255, 255, 0.8);
}

.theme-toggle-row:hover[b-r8ptr9sh6d] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.theme-toggle-row .bi[b-r8ptr9sh6d] {
    font-size: 1rem;
    opacity: 0.7;
}

.theme-toggle-row span:last-child[b-r8ptr9sh6d] {
    font-size: 0.875rem;
    color: inherit;
}

/* ===== Group Switcher Inline Dropdown ===== */
.group-switcher-item[b-r8ptr9sh6d] {
    position: relative;
}

.group-switcher-item .nav-btn[b-r8ptr9sh6d] {
    justify-content: flex-start;
}

.group-chevron[b-r8ptr9sh6d] {
    font-size: 0.6rem;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease;
}

.group-chevron.open[b-r8ptr9sh6d] {
    transform: rotate(180deg);
}

.group-dropdown[b-r8ptr9sh6d] {
    margin: 0.25rem 0 0.5rem 0;
    background: #252540;
    border: 1px solid rgba(212, 165, 116, 0.25);
    border-radius: 8px;
    overflow: hidden;
    animation: groupDropIn-b-r8ptr9sh6d 0.15s ease-out;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

@keyframes groupDropIn-b-r8ptr9sh6d {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 300px; }
}

.group-search-box[b-r8ptr9sh6d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.group-search-box i[b-r8ptr9sh6d] {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.group-search-input[b-r8ptr9sh6d] {
    background: transparent;
    border: none;
    outline: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    width: 100%;
    padding: 0;
}

.group-search-input[b-r8ptr9sh6d]::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.group-dropdown-list[b-r8ptr9sh6d] {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 165, 116, 0.2) transparent;
}

.group-dropdown-option[b-r8ptr9sh6d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.1s ease;
    text-align: left;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
}

.group-dropdown-option:hover[b-r8ptr9sh6d] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.group-dropdown-option.active[b-r8ptr9sh6d] {
    background: rgba(212, 165, 116, 0.12);
    color: #d4a574;
}

.group-dropdown-icon[b-r8ptr9sh6d] {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: cover;
    object-position:left;
    flex-shrink: 0;
}

.group-dropdown-icon-fallback[b-r8ptr9sh6d] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.4);
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.group-dropdown-name[b-r8ptr9sh6d] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-dropdown-badge[b-r8ptr9sh6d] {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
    background: rgba(212, 165, 116, 0.15);
    color: #d4a574;
    flex-shrink: 0;
}

.group-dropdown-empty[b-r8ptr9sh6d] {
    padding: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.8rem;
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */
/* Login Page - Transparent Glassmorphism Style */

.login-container[b-fefobc37u0] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
}

.login-card[b-fefobc37u0] {
    width: 100%;
    max-width: 420px;
    padding: 3rem 2.5rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 0 32px rgba(255, 255, 255, 0.05);
}

/* Header/Brand Section */
.login-header[b-fefobc37u0] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.brand-icon[b-fefobc37u0] {
    width: 70px;
    height: 70px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #d4a574 0%, #c4956a 50%, #b8865e 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(212, 165, 116, 0.4);
}

.brand-icon i[b-fefobc37u0] {
    font-size: 2rem;
    color: white;
}

.brand-title[b-fefobc37u0] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 0.25rem;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.brand-subtitle[b-fefobc37u0] {
    font-size: 0.9rem;
    color: rgba(26, 26, 46, 0.7);
    margin: 0;
    font-weight: 400;
}

/* Form Styling */
.login-form[b-fefobc37u0] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-floating-group[b-fefobc37u0] {
    position: relative;
}

.input-group[b-fefobc37u0] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-fefobc37u0] {
    position: absolute;
    left: 1.25rem;
    color: rgba(26, 26, 46, 0.5);
    font-size: 1.1rem;
    z-index: 2;
    pointer-events: none;
}

.form-input[b-fefobc37u0] {
    width: 100%;
    padding: 1rem 1rem 1rem 3.25rem;
    font-size: 0.95rem;
    color: #1a1a2e;
    caret-color: #1a1a2e !important;/* Ensure visible cursor */
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    outline: none;
    transition: all 0.3s ease;
}

.form-input[b-fefobc37u0]::placeholder {
    color: rgba(26, 26, 46, 0.5);
}

.form-input:focus[b-fefobc37u0] {
    background: rgba(255, 255, 255, 0.85);
    border-color: #d4a574;
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.2);
}

.password-toggle[b-fefobc37u0] {
    position: absolute;
    right: 1.25rem;
    background: none;
    border: none;
    color: rgba(26, 26, 46, 0.5);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.password-toggle:hover[b-fefobc37u0] {
    color: #d4a574;
}

.validation-message[b-fefobc37u0] {
    display: block;
    margin-top: 0.5rem;
    margin-left: 1.25rem;
    font-size: 0.8rem;
    color: #dc3545;
}

/* Form Options Row */
.form-options[b-fefobc37u0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
}

.remember-me[b-fefobc37u0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: rgba(26, 26, 46, 0.8);
}

.remember-me .form-check-input[b-fefobc37u0] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    border-radius: 4px;
    border: 2px solid rgba(26, 26, 46, 0.3);
    background-color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.remember-me .form-check-input:checked[b-fefobc37u0] {
    background-color: #d4a574;
    border-color: #d4a574;
}

.forgot-password[b-fefobc37u0] {
    font-size: 0.9rem;
    color: #d4a574;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.forgot-password:hover[b-fefobc37u0] {
    color: #c4956a;
    text-decoration: underline;
}

/* Login Button */
.btn-login[b-fefobc37u0] {
    width: 100%;
    padding: 1rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #1a1a2e;
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.9) 0%, rgba(196, 149, 106, 0.9) 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-login:hover:not(:disabled)[b-fefobc37u0] {
    background: linear-gradient(135deg, rgba(212, 165, 116, 1) 0%, rgba(196, 149, 106, 1) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 165, 116, 0.4);
}

.btn-login:active:not(:disabled)[b-fefobc37u0] {
    transform: translateY(0);
}

.btn-login:disabled[b-fefobc37u0] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Alert Styling */
.alert[b-fefobc37u0] {
    padding: 0.875rem 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.alert-danger[b-fefobc37u0] {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #dc3545;
}

.alert .btn-close[b-fefobc37u0] {
    filter: none;
    opacity: 0.7;
}

/* Footer */
.login-footer[b-fefobc37u0] {
    margin-top: 2rem;
    text-align: center;
}

.copyright[b-fefobc37u0] {
    font-size: 0.8rem;
    color: rgba(26, 26, 46, 0.5);
    margin: 0;
}

/* Responsive Adjustments */
@media (max-width: 480px) {
    .login-card[b-fefobc37u0] {
        padding: 2rem 1.5rem;
        margin: 1rem;
    }
    
    .brand-icon[b-fefobc37u0] {
        width: 60px;
        height: 60px;
    }
    
    .brand-icon i[b-fefobc37u0] {
        font-size: 1.75rem;
    }
    
    .brand-title[b-fefobc37u0] {
        font-size: 1.5rem;
    }
    
        .form-options[b-fefobc37u0] {
            flex-direction: column;
            gap: 0.75rem;
            align-items: flex-start;
        }
    }
/* /Components/Pages/Account/Logout.razor.rz.scp.css */
.logout-container[b-63g0f0si7i] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.logout-card[b-63g0f0si7i] {
    text-align: center;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #1a1a2e;
}

.logout-card p[b-63g0f0si7i] {
    margin: 0;
    font-size: 1rem;
    color: rgba(26, 26, 46, 0.8);
}
/* /Components/Pages/Dashboard/OperatorDashboard.razor.rz.scp.css */
/* Operator Dashboard Styles */

.operator-dashboard[b-jhnid06kts] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 60px);
    background-color: var(--mp-bg);
    overflow: hidden;
    padding-bottom: 62px; /* Space for fixed footer */
}

/* Header */
.od-header[b-jhnid06kts] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--mp-bg-elevated);
    border-bottom: 1px solid var(--mp-border);
    flex-shrink: 0;
}

.od-header-title[b-jhnid06kts] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mp-text-heading);
}

.od-header-title h1[b-jhnid06kts] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--mp-text-heading);
}

.od-header-title i[b-jhnid06kts] {
    font-size: 1.2rem;
    color: var(--mp-accent-text);
}

.od-header-controls .btn[b-jhnid06kts] {
    font-size: 0.75rem;
    padding: 2px 10px;
}

/* Loading and Empty States */
.od-loading[b-jhnid06kts],
.od-empty[b-jhnid06kts] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 12px;
    color: var(--mp-text-muted);
}

.od-empty i[b-jhnid06kts] {
    font-size: 3rem;
    color: var(--mp-text-faint);
}

/* Plant Columns Container */
.od-columns[b-jhnid06kts] {
    display: grid;
    gap: 1px;
    flex: 1;
    overflow: hidden;
    background-color: var(--mp-border);
}

/* Individual Plant Column */
.od-plant-column[b-jhnid06kts] {
    display: flex;
    flex-direction: column;
    background-color: var(--mp-bg-surface);
    overflow-y: auto;
    min-width: 0;
}

/* Plant Header */
.od-plant-header[b-jhnid06kts] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--mp-bg-elevated);
    border-bottom: 1px solid var(--mp-border);
    color: var(--mp-text-heading);
    flex-shrink: 0;
}

.od-plant-name[b-jhnid06kts] {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.od-shift-badge[b-jhnid06kts] {
    font-size: 0.65rem;
    padding: 1px 6px;
    background: var(--mp-accent-bg);
    color: var(--mp-accent-text);
    border: 1px solid var(--mp-accent-border);
    border-radius: 3px;
    white-space: nowrap;
}

/* Chart Section */
.od-chart-section[b-jhnid06kts] {
    display: flex;
    flex-direction: column;
    padding: 4px 6px;
    flex-shrink: 0;
}

.od-chart-legend[b-jhnid06kts] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 2px 4px;
    margin-bottom: 2px;
}

.od-legend-item[b-jhnid06kts] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--mp-text-muted);
}

.od-legend-color[b-jhnid06kts] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.od-legend-name[b-jhnid06kts] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

.od-legend-value[b-jhnid06kts] {
    font-weight: 600;
    color: var(--mp-text-heading);
    white-space: nowrap;
}

.od-chart-wrapper[b-jhnid06kts] {
    position: relative;
    height: 180px;
    width: 100%;
}

.od-chart-wrapper canvas[b-jhnid06kts] {
    width: 100% !important;
    height: 100% !important;
}

/* State Section */
.od-state-section[b-jhnid06kts] {
    padding: 6px 8px;
    border-top: 1px solid var(--mp-border);
    flex-shrink: 0;
}

.od-state-header[b-jhnid06kts] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.od-state-title[b-jhnid06kts] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mp-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.od-state-title i[b-jhnid06kts] {
    font-size: 0.8rem;
}

.od-mode-badge[b-jhnid06kts] {
    font-size: 0.6rem;
    padding: 1px 6px;
    border-radius: 3px;
    color: #fff;
    font-weight: 500;
}

.od-state-grid[b-jhnid06kts] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.od-state-item[b-jhnid06kts] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
}

.od-state-device-name[b-jhnid06kts] {
    font-weight: 500;
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.od-state-label[b-jhnid06kts] {
    font-weight: 600;
    white-space: nowrap;
}

.od-state-tph[b-jhnid06kts] {
    margin-left: auto;
    font-weight: 500;
    white-space: nowrap;
}

/* State colors */
.od-state-producing[b-jhnid06kts] {
    background-color: rgba(40, 167, 69, 0.15);
    color: #16a34a;
    border-left: 3px solid #28a745;
}

.od-state-idling[b-jhnid06kts] {
    background-color: rgba(255, 193, 7, 0.15);
    color: #ca8a04;
    border-left: 3px solid #ffc107;
}

.od-state-stopped[b-jhnid06kts] {
    background-color: rgba(220, 53, 69, 0.15);
    color: #dc2626;
    border-left: 3px solid #dc3545;
}

.od-state-offline[b-jhnid06kts] {
    background-color: rgba(108, 117, 125, 0.15);
    color: var(--mp-text-muted);
    border-left: 3px solid #6c757d;
}

/* Shift Info Bar */
.od-shift-info[b-jhnid06kts] {
    display: flex;
    gap: 12px;
    padding: 4px 8px;
    margin-top: 4px;
    background-color: var(--mp-bg-elevated);
    border: 1px solid var(--mp-border);
    border-radius: 4px;
    font-size: 0.68rem;
}

.od-shift-detail[b-jhnid06kts] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.od-shift-label[b-jhnid06kts] {
    color: var(--mp-text-muted);
    font-weight: 500;
}

.od-shift-value[b-jhnid06kts] {
    color: var(--mp-text-heading);
    font-weight: 600;
}

/* Events Section */
.od-events-section[b-jhnid06kts] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    border-top: 1px solid var(--mp-border);
    min-height: 0;
    overflow-y: auto;
}

.od-events-header[b-jhnid06kts] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.od-events-title[b-jhnid06kts] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mp-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.od-events-title i[b-jhnid06kts] {
    font-size: 0.8rem;
    color: #ffc107;
}

.od-events-header .badge[b-jhnid06kts] {
    font-size: 0.6rem;
    padding: 1px 5px;
}

.od-events-list[b-jhnid06kts] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    min-height: 0;
}

.od-event-item[b-jhnid06kts] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 4px 6px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
}

.od-event-active[b-jhnid06kts] {
    background-color: rgba(220, 53, 69, 0.15);
    border-left: 3px solid #dc3545;
}

.od-event-pending[b-jhnid06kts] {
    background-color: rgba(255, 193, 7, 0.15);
    border-left: 3px solid #ffc107;
}

.od-event-production[b-jhnid06kts] {
    background-color: rgba(34, 197, 94, 0.10);
    border-left: 3px solid #16a34a;
}

.od-event-closed[b-jhnid06kts] {
    background-color: var(--mp-bg-elevated);
    border-left: 3px solid var(--mp-border-medium);
    opacity: 0.7;
}

.od-event-time[b-jhnid06kts] {
    font-weight: 600;
    color: var(--mp-text-heading);
    white-space: nowrap;
}

.od-event-status-badge[b-jhnid06kts] {
    font-size: 0.6rem;
    padding: 0px 5px;
    border-radius: 3px;
    font-weight: 600;
    white-space: nowrap;
}

.od-event-status-badge.active[b-jhnid06kts] {
    background-color: #dc3545;
    color: #fff;
}

.od-event-status-badge.pending[b-jhnid06kts] {
    background-color: #ffc107;
    color: var(--mp-text-heading);
}

.od-event-duration[b-jhnid06kts] {
    font-weight: 500;
    color: var(--mp-text-muted);
    white-space: nowrap;
    text-align: right;
}

.od-event-reason[b-jhnid06kts] {
    grid-column: 1 / -1;
    display: flex;
    gap: 4px;
    align-items: center;
}

.od-reason-code[b-jhnid06kts] {
    font-weight: 700;
    color: var(--mp-text-heading);
    padding: 0px 4px;
    background: var(--mp-bg-elevated);
    border-radius: 2px;
}

.od-reason-desc[b-jhnid06kts] {
    color: var(--mp-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.od-no-reason[b-jhnid06kts] {
    color: #dc3545;
    font-style: italic;
    font-weight: 500;
}

.od-auto-status[b-jhnid06kts] {
    color: #16a34a;
    font-style: italic;
    font-weight: 500;
    font-size: 0.65rem;
}

/* Event filter buttons */
.od-events-filter-group[b-jhnid06kts] {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.od-events-filter-btn[b-jhnid06kts] {
    background: none;
    border: 1px solid var(--mp-border);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 0.6rem;
    color: var(--mp-text-muted);
    cursor: pointer;
    line-height: 1.6;
    transition: all 0.15s;
}

.od-events-filter-btn:hover[b-jhnid06kts] {
    background: var(--mp-bg-hover);
    color: var(--mp-text);
}

.od-events-filter-btn.active[b-jhnid06kts] {
    background: var(--mp-accent-bg);
    border-color: var(--mp-accent-border);
    color: var(--mp-accent-text);
}

.od-no-events[b-jhnid06kts] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px;
    color: #16a34a;
    font-size: 0.75rem;
    justify-content: center;
}

.od-no-events i[b-jhnid06kts] {
    font-size: 1rem;
}

/* Event Category Badges */
.od-event-category-badge[b-jhnid06kts] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.od-event-category-badge i[b-jhnid06kts] {
    font-size: 0.6rem;
}

.cat-stoppage[b-jhnid06kts] {
    background: rgba(220, 53, 69, 0.2);
    color: #dc2626;
}

.cat-blackbelt[b-jhnid06kts] {
    background: rgba(108, 117, 125, 0.2);
    color: var(--mp-text-muted);
}

.cat-idling[b-jhnid06kts] {
    background: rgba(255, 193, 7, 0.2);
    color: #ca8a04;
}

.cat-lowprod[b-jhnid06kts] {
    background: rgba(253, 126, 20, 0.2);
    color: #ea580c;
}

.cat-tripped[b-jhnid06kts] {
    background: rgba(220, 53, 69, 0.25);
    color: #dc2626;
}

.cat-nopower[b-jhnid06kts] {
    background: rgba(139, 92, 246, 0.2);
    color: #7c3aed;
}

.cat-production[b-jhnid06kts] {
    background: rgba(34, 197, 94, 0.2);
    color: #16a34a;
}

.cat-shiftchange[b-jhnid06kts] {
    background: rgba(59, 130, 246, 0.2);
    color: #2563eb;
}

/* Snapshots Modal */
.snapshots-modal-backdrop[b-jhnid06kts] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
}

.snapshots-modal-container[b-jhnid06kts] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1051;
    padding: 1rem;
}

.snapshots-modal[b-jhnid06kts] {
    background: var(--mp-modal-bg);
    border: 1px solid var(--mp-border-medium);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 1100px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.snapshots-modal-header[b-jhnid06kts] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--mp-border);
}

.snapshots-modal-header h5[b-jhnid06kts] {
    margin: 0;
    font-weight: 600;
    color: var(--mp-accent-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.snapshots-modal-close[b-jhnid06kts] {
    background: none;
    border: none;
    color: var(--mp-text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.snapshots-modal-close:hover[b-jhnid06kts] {
    color: var(--mp-text-heading);
    background: var(--mp-bg-hover);
}

.snapshots-modal-body[b-jhnid06kts] {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.snapshots-table[b-jhnid06kts] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.snapshots-table thead th[b-jhnid06kts] {
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mp-accent-text);
    background: var(--mp-bg-elevated);
    border-bottom: 1px solid var(--mp-border-medium);
    white-space: nowrap;
}

.snapshots-table tbody tr[b-jhnid06kts] {
    border-bottom: 1px solid var(--mp-border);
    transition: background 0.1s ease;
}

.snapshots-table tbody tr:last-child[b-jhnid06kts] {
    border-bottom: none;
}

.snapshots-table tbody tr:hover[b-jhnid06kts] {
    background: var(--mp-bg-hover);
}

.snapshots-table td[b-jhnid06kts] {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    color: var(--mp-text);
}

.snapshots-empty[b-jhnid06kts] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--mp-text-muted);
}

.snapshots-empty i[b-jhnid06kts] {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}
/* /Components/Pages/Dashboard/PlantDashboard.razor.rz.scp.css */
.plant-dashboard[b-gymybzi98n] {
    padding: 1.5rem;
}

.dashboard-header[b-gymybzi98n] {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--mp-border);
}

.dashboard-header h1[b-gymybzi98n] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mp-text-heading);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-header h1 i[b-gymybzi98n] {
    color: var(--mp-accent-text);
}

.dashboard-header p[b-gymybzi98n] {
    color: var(--mp-text-muted);
    margin: 0.25rem 0 0 0;
    font-size: 0.85rem;
}

.loading-state[b-gymybzi98n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* Plants Grid */
.plants-grid[b-gymybzi98n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 1.5rem;
}

/* Plant Card */
.plant-card[b-gymybzi98n] {
    background: var(--mp-bg-surface);
    border: 2px solid var(--mp-border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.plant-card:hover[b-gymybzi98n] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.plant-card.active-shift[b-gymybzi98n] {
    border-color: #27ae60;
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.05) 0%, var(--mp-bg-surface) 50%);
}

/* Plant Header */
.plant-header[b-gymybzi98n] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mp-border);
}

.plant-name[b-gymybzi98n] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mp-text);
    margin: 0 0 0.5rem 0;
}

.plant-meta[b-gymybzi98n] {
    font-size: 0.875rem;
    color: var(--mp-text-muted);
    margin: 0;
}

.plant-meta i[b-gymybzi98n] {
    margin-right: 0.25rem;
}

/* Plant Metrics */
.plant-metrics[b-gymybzi98n] {
    margin-bottom: 1.5rem;
}

.metric-box[b-gymybzi98n] {
    background-color: var(--mp-bg-elevated);
    padding: 0.75rem;
    border-radius: 8px;
    text-align: center;
}

.metric-label[b-gymybzi98n] {
    font-size: 0.75rem;
    color: var(--mp-text-muted);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.metric-value[b-gymybzi98n] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mp-text);
}

.metric-oee-good[b-gymybzi98n] {
    color: #27ae60;
}

.metric-oee-warning[b-gymybzi98n] {
    color: #f39c12;
}

.metric-oee-danger[b-gymybzi98n] {
    color: #e74c3c;
}

/* Device Status Compact */
.device-status-compact[b-gymybzi98n] {
    background-color: var(--mp-bg-elevated);
    padding: 1rem;
    border-radius: 8px;
}

.devices-header[b-gymybzi98n] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mp-text);
    margin: 0 0 1rem 0;
    text-transform: uppercase;
}

.devices-list[b-gymybzi98n] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.device-row[b-gymybzi98n] {
    display: grid;
    grid-template-columns: 1fr 2fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background-color: var(--mp-bg-surface);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.device-row:hover[b-gymybzi98n] {
    background-color: var(--mp-bg-hover);
}

.device-name[b-gymybzi98n] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-name i[b-gymybzi98n] {
    margin-right: 0.25rem;
}

.device-progress[b-gymybzi98n] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-bar-mini[b-gymybzi98n] {
    flex: 1;
    height: 8px;
    background-color: var(--mp-bg-elevated);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-gymybzi98n] {
    height: 100%;
    background-color: #27ae60;
    transition: width 0.3s ease;
}

.tph-value[b-gymybzi98n] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mp-text-muted);
    min-width: 60px;
    text-align: right;
}

.device-percentage[b-gymybzi98n] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mp-text);
    min-width: 40px;
    text-align: right;
}

.device-status-icon[b-gymybzi98n] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    min-width: 70px;
    text-align: center;
}

/* Status Classes */
.status-running[b-gymybzi98n] {
    background-color: rgba(39, 174, 96, 0.1);
}

.status-running .device-status-icon[b-gymybzi98n] {
    background-color: #27ae60;
    color: white;
}

.status-running .progress-fill[b-gymybzi98n] {
    background-color: #27ae60;
}

.status-low-production[b-gymybzi98n] {
    background-color: rgba(243, 156, 18, 0.1);
}

.status-low-production .device-status-icon[b-gymybzi98n] {
    background-color: #f39c12;
    color: white;
}

.status-low-production .progress-fill[b-gymybzi98n] {
    background-color: #f39c12;
}

.status-stopped[b-gymybzi98n] {
    background-color: rgba(231, 76, 60, 0.1);
}

.status-stopped .device-status-icon[b-gymybzi98n] {
    background-color: #e74c3c;
    color: white;
}

.status-stopped .progress-fill[b-gymybzi98n] {
    background-color: #e74c3c;
    width: 0 !important;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .plants-grid[b-gymybzi98n] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .plant-dashboard[b-gymybzi98n] {
        padding: 1rem;
    }

    .dashboard-header h1[b-gymybzi98n] {
        font-size: 1.5rem;
    }

    .plant-card[b-gymybzi98n] {
        padding: 1rem;
    }

    .plant-header[b-gymybzi98n] {
        flex-direction: column;
        gap: 1rem;
    }

    .plant-actions[b-gymybzi98n] {
        width: 100%;
    }

    .plant-actions .btn[b-gymybzi98n] {
        width: 100%;
    }

    .device-row[b-gymybzi98n] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .device-progress[b-gymybzi98n] {
        order: 3;
    }

    .device-percentage[b-gymybzi98n] {
        position: absolute;
        right: 1rem;
    }
}
/* /Components/Pages/Dashboard/PlantLayoutDashboard.razor.rz.scp.css */
/* Dashboard Page Container */
.dashboard-page[b-th7cvupfeq] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 3.5rem); /* Subtract top-row height */
    overflow: hidden;
}

/* Modal z-index - higher than draggable modals (1100+) */
.modal[b-th7cvupfeq] {
    z-index: 1200;
}

.modal-backdrop[b-th7cvupfeq] {
    z-index: 1190;
}

.modal-dialog[b-th7cvupfeq] {
    z-index: 1210;
}

/* Dashboard Header */
.dashboard-header[b-th7cvupfeq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1.5rem;
    background: var(--mp-bg-elevated);
    border-bottom: 1px solid var(--mp-border);
    margin-bottom: 0;
    flex-shrink: 0;
    min-height: 50px;
}

.header-title[b-th7cvupfeq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-title i[b-th7cvupfeq] {
    font-size: 1.5rem;
    color: var(--mp-accent-text);
}

.header-title h1[b-th7cvupfeq] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--mp-text-heading);
}

.header-controls[b-th7cvupfeq] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-header[b-th7cvupfeq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.header-content h1[b-th7cvupfeq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.header-content h1 i[b-th7cvupfeq] {
    color: var(--mp-accent-text);
}

.header-actions[b-th7cvupfeq] {
    display: flex;
    gap: 0.5rem;
}

/* No Layout State */
.no-layout-container[b-th7cvupfeq] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: var(--mp-bg-surface);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.no-layout-content[b-th7cvupfeq] {
    text-align: center;
    padding: 3rem;
}

.no-layout-content i[b-th7cvupfeq] {
    font-size: 5rem;
    color: var(--mp-text-muted);
    margin-bottom: 1.5rem;
}

.no-layout-content h3[b-th7cvupfeq] {
    color: var(--mp-text-heading);
    margin-bottom: 0.5rem;
}

.no-layout-content p[b-th7cvupfeq] {
    color: var(--mp-text-secondary);
    margin-bottom: 1.5rem;
}

/* Plant Selector */
.plant-selector-container[b-th7cvupfeq] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.plant-selector-card[b-th7cvupfeq] {
    text-align: center;
    padding: 3rem;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 400px;
    width: 100%;
}

.plant-selector-icon[b-th7cvupfeq] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plant-selector-icon i[b-th7cvupfeq] {
    font-size: 2.5rem;
    color: white;
}

.plant-selector-card h3[b-th7cvupfeq] {
    color: var(--mp-text-heading);
    margin-bottom: 0.5rem;
}

.plant-selector-card .text-muted[b-th7cvupfeq] {
    margin-bottom: 1.5rem;
}

.plant-select[b-th7cvupfeq] {
    max-width: 300px;
    margin: 0 auto;
}

/* Layout Dashboard */
.dashboard-content-wrapper[b-th7cvupfeq] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* Important for nested flex */
    overflow: hidden;
}

.layout-dashboard[b-th7cvupfeq] {
    background: var(--mp-bg-surface);
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

/* Fullscreen Container - wraps main content and events panel */
.dashboard-fullscreen-container[b-th7cvupfeq] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.dashboard-fullscreen-container.fullscreen[b-th7cvupfeq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: var(--mp-bg-surface);
}

/* Main Area - contains layout viewer and footer */
.dashboard-main-area[b-th7cvupfeq] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Element Help Panel */
.element-help-panel[b-th7cvupfeq] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    background: var(--mp-bg-elevated);
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 100;
    animation: slideIn-b-th7cvupfeq 0.2s ease;
}

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

.help-panel-header[b-th7cvupfeq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mp-border);
}

.help-panel-header h6[b-th7cvupfeq] {
    margin: 0;
    font-size: 0.9375rem;
}

.help-panel-body[b-th7cvupfeq] {
    padding: 1rem;
}

.help-panel-body p[b-th7cvupfeq] {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--mp-text-secondary);
}

.linked-info[b-th7cvupfeq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--mp-border);
}

.linked-info i[b-th7cvupfeq] {
    color: var(--mp-text-muted);
}

.linked-info a[b-th7cvupfeq] {
    color: var(--mp-accent-text);
    text-decoration: none;
}

.linked-info a:hover[b-th7cvupfeq] {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-th7cvupfeq] {
        flex-direction: column;
        gap: 1rem;
    }

    .header-actions[b-th7cvupfeq] {
        width: 100%;
        justify-content: flex-end;
    }

    .element-help-panel[b-th7cvupfeq] {
        width: calc(100% - 40px);
        left: 20px;
        right: 20px;
    }
}

/* Dashboard Footer */
.dashboard-footer[b-th7cvupfeq] {
    display: flex;
    align-items: stretch;
    background: var(--mp-bg-elevated);
    border-top: 2px solid var(--mp-accent);
    padding: 0.75rem 1.5rem;
    gap: 1rem;
    min-height: 70px;
    flex-shrink: 0;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

.footer-section[b-th7cvupfeq] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    background: var(--mp-bg-surface);
    border-radius: 10px;
    border: 1px solid var(--mp-border-medium);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* Clickable Card Styles */
.footer-section.clickable-card[b-th7cvupfeq] {
    cursor: pointer;
    transition: all 0.2s ease;
}

.footer-section.clickable-card:hover[b-th7cvupfeq] {
    background: var(--mp-accent-bg);
    border-color: var(--mp-accent);
    box-shadow: 0 2px 8px rgba(212, 165, 116, 0.15);
}

.footer-section.clickable-card:active[b-th7cvupfeq] {
    transform: scale(0.98);
}

.footer-section-header[b-th7cvupfeq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mp-accent-text);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    white-space: nowrap;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--mp-accent-border);
    margin-bottom: 0.125rem;
}

.footer-section-header i[b-th7cvupfeq] {
    font-size: 1rem;
}

.section-label[b-th7cvupfeq] {
    opacity: 0.9;
}

/* Shift Section */
.shift-section[b-th7cvupfeq] {
    min-width: 180px;
}

.shift-info[b-th7cvupfeq] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.shift-name[b-th7cvupfeq] {
    color: var(--mp-text-heading);
    font-weight: 600;
    font-size: 0.9375rem;
}

.shift-time[b-th7cvupfeq] {
    color: var(--mp-text-secondary);
    font-size: 0.8125rem;
}

.shift-status[b-th7cvupfeq] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    width: fit-content;
}

.shift-status.status-active[b-th7cvupfeq] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.shift-status.status-confirmed[b-th7cvupfeq] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.shift-status.status-pending_confirmation[b-th7cvupfeq] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

/* Mode Section */
.mode-section[b-th7cvupfeq] {
    min-width: 160px;
}

.mode-info[b-th7cvupfeq] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mode-badge[b-th7cvupfeq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mp-text-heading);
    width: fit-content;
}

.mode-badge i[b-th7cvupfeq] {
    font-size: 0.875rem;
}

.mode-since[b-th7cvupfeq] {
    color: var(--mp-text-muted);
    font-size: 0.75rem;
}

/* KPI Section */
.kpi-section[b-th7cvupfeq] {
    flex: 1;
    justify-content: center;
    gap: 1.5rem;
}

.kpi-item[b-th7cvupfeq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.kpi-label[b-th7cvupfeq] {
    color: var(--mp-text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kpi-value[b-th7cvupfeq] {
    color: var(--mp-text-heading);
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kpi-divider[b-th7cvupfeq] {
    width: 1px;
    height: 36px;
    background: rgba(212, 165, 116, 0.3);
}

/* OEE/OPP Section */
.oee-section[b-th7cvupfeq] {
    min-width: 200px;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
}

.oee-item[b-th7cvupfeq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.oee-label[b-th7cvupfeq] {
    color: var(--mp-text-secondary);
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 600;
    width: 32px;
}

.oee-gauge[b-th7cvupfeq] {
    flex: 1;
    height: 8px;
    background: var(--mp-bg-surface);
    border-radius: 4px;
    overflow: hidden;
}

.oee-fill[b-th7cvupfeq] {
    height: 100%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.opp-gauge .oee-fill[b-th7cvupfeq] {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
}

.oee-value[b-th7cvupfeq] {
    color: var(--mp-text-heading);
    font-size: 0.875rem;
    font-weight: 700;
    width: 50px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Footer Action Buttons - REMOVED, cards are now clickable */

/* No Data State */
.no-data[b-th7cvupfeq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mp-text-muted);
    font-size: 0.875rem;
    font-style: italic;
}

.no-data .add-hint[b-th7cvupfeq] {
    color: #4ade80;
    opacity: 0.7;
}

/* ==========================================
   NEW FOOTER LAYOUT - Events, Shift/Mode, Production
   ========================================== */

/* Events Section - Clickable to open modal */
.events-section[b-th7cvupfeq] {
    min-width: 280px;
    flex: 1;
    max-width: 450px;
    flex-direction: column;
    cursor: pointer;
}

.events-section:hover[b-th7cvupfeq] {
    background: var(--mp-accent-bg);
    border-color: var(--mp-accent);
    box-shadow: 0 2px 8px rgba(212, 165, 116, 0.15);
}

.events-section .footer-section-header[b-th7cvupfeq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.events-section .footer-section-header .badge-sm[b-th7cvupfeq] {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
}

.events-inline-list[b-th7cvupfeq] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
    align-items: flex-start;
}

.event-inline-item[b-th7cvupfeq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: var(--mp-bg-elevated);
    border: 1px solid var(--mp-border);
    border-radius: 6px;
    font-size: 0.75rem;
}

.event-inline-item.active[b-th7cvupfeq] {
    border-left: 3px solid #ef4444;
}

.event-inline-item.pending[b-th7cvupfeq] {
    border-left: 3px solid #fbbf24;
}

.event-time[b-th7cvupfeq] {
    color: var(--mp-text-muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.event-status-dot[b-th7cvupfeq] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.event-inline-item.active .event-status-dot[b-th7cvupfeq] {
    background: #ef4444;
    animation: pulse-b-th7cvupfeq 2s infinite;
}

.event-inline-item.pending .event-status-dot[b-th7cvupfeq] {
    background: #fbbf24;
}

@keyframes pulse-b-th7cvupfeq {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.event-reason[b-th7cvupfeq] {
    color: var(--mp-text-heading);
    font-weight: 500;
    font-size: 0.7rem;
}

.event-reason.no-reason[b-th7cvupfeq] {
    color: var(--mp-text-muted);
    font-style: italic;
    font-weight: 400;
}

.btn-expand[b-th7cvupfeq] {
    background: var(--mp-bg-surface);
    border: none;
    color: var(--mp-text-muted);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    margin-top: auto;
    align-self: flex-end;
    transition: all 0.2s ease;
}

.btn-expand:hover[b-th7cvupfeq] {
    background: var(--mp-accent-bg);
    color: var(--mp-accent-text);
}

/* Shift & Mode Combined Section */
.shift-mode-section[b-th7cvupfeq] {
    min-width: 160px;
    max-width: 200px;
}

.shift-mode-content[b-th7cvupfeq] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.shift-info-compact[b-th7cvupfeq],
.mode-info-compact[b-th7cvupfeq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shift-info-compact i[b-th7cvupfeq],
.mode-info-compact i[b-th7cvupfeq] {
    color: var(--mp-accent-text);
    font-size: 0.75rem;
    width: 14px;
}

.shift-times[b-th7cvupfeq] {
    color: var(--mp-text-heading);
    font-weight: 600;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.mode-badge-small[b-th7cvupfeq] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mp-text-heading);
}

/* Production & Performance Section - Compact horizontal */
.production-section[b-th7cvupfeq] {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 1.25rem;
    flex: 1;
}

.kpi-compact[b-th7cvupfeq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.kpi-compact .kpi-label[b-th7cvupfeq] {
    color: var(--mp-text-muted);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kpi-compact .kpi-value[b-th7cvupfeq] {
    color: var(--mp-text-heading);
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kpi-divider[b-th7cvupfeq] {
    width: 1px;
    height: 28px;
    background: var(--mp-accent-border);
}

.gauge-item[b-th7cvupfeq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.gauge-label[b-th7cvupfeq] {
    color: var(--mp-text-muted);
    font-size: 0.6rem;
    text-transform: uppercase;
    font-weight: 600;
    width: 24px;
}

.gauge-bar[b-th7cvupfeq] {
    width: 64px;
    height: 6px;
    background: var(--mp-bg-elevated);
    border: 1px solid var(--mp-border);
    border-radius: 3px;
    overflow: hidden;
}

.gauge-bar .gauge-fill[b-th7cvupfeq] {
    height: 100%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.gauge-bar.opp .gauge-fill[b-th7cvupfeq] {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
}

.gauge-value[b-th7cvupfeq] {
    color: var(--mp-text-heading);
    font-size: 0.7rem;
    font-weight: 700;
    width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Shift time large in modal */
.shift-time-large[b-th7cvupfeq] {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


/* Footer Responsive - Updated */
@media (max-width: 1200px) {
    .dashboard-footer[b-th7cvupfeq] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .production-section[b-th7cvupfeq] {
        order: 1;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .dashboard-footer[b-th7cvupfeq] {
        flex-direction: column;
        padding: 1rem;
    }

    .footer-section[b-th7cvupfeq] {
        width: 100%;
        max-width: none;
    }

    .production-section[b-th7cvupfeq] {
        flex-direction: column;
        gap: 1rem;
    }

    .production-kpis[b-th7cvupfeq] {
        width: 100%;
        justify-content: space-around;
    }

    .performance-gauges[b-th7cvupfeq] {
        width: 100%;
    }
}

/* Recalculate Modal */
.recalculate-modal[b-th7cvupfeq] {
    background: var(--mp-modal-bg);
    border: 1px solid var(--mp-modal-border);
    color: var(--mp-text);
}

.recalculate-modal .modal-header[b-th7cvupfeq] {
    border-bottom: 1px solid var(--mp-border);
}

.recalculate-modal .modal-title[b-th7cvupfeq] {
    color: var(--mp-accent-text);
}

.recalculate-modal .modal-footer[b-th7cvupfeq] {
    border-top: 1px solid var(--mp-border);
}

.recalculate-modal .form-label[b-th7cvupfeq] {
    color: var(--mp-text-secondary);
}

.recalculate-modal .form-control[b-th7cvupfeq] {
    background: var(--mp-input-bg);
    border: 1px solid var(--mp-input-border);
    color: var(--mp-input-text);
}

.recalculate-modal .form-control:focus[b-th7cvupfeq] {
    background: var(--mp-input-bg);
    border-color: var(--mp-accent);
    box-shadow: 0 0 0 0.2rem rgba(212, 165, 116, 0.25);
    color: var(--mp-input-text);
}

.recalculate-modal .form-check-input[b-th7cvupfeq] {
    background-color: var(--mp-input-bg);
    border-color: var(--mp-input-border);
}

.recalculate-modal .form-check-input:checked[b-th7cvupfeq] {
    background-color: var(--mp-accent);
    border-color: var(--mp-accent);
}

.recalculate-modal .form-check-label[b-th7cvupfeq] {
    color: var(--mp-text-secondary);
}

.recalculate-modal .text-muted[b-th7cvupfeq] {
    color: var(--mp-text-muted) !important;
}

.recalculate-modal .modal-backdrop[b-th7cvupfeq] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1190;
}

.recalculate-modal.modal-content[b-th7cvupfeq] {
    z-index: 1210;
}

/* Responsive Events Panel */
@media (max-width: 768px) {
    .events-panel-horizontal.expanded[b-th7cvupfeq] {
        max-height: 50vh;
    }
    
    .events-panel-body[b-th7cvupfeq] {
        max-height: 40vh;
    }
}
/* /Components/Pages/Help/HelpPage.razor.rz.scp.css */
/* ========================================
   Help & Knowledge Base - Mine Pulse Theme
   ======================================== */

.help-container[b-hvtvtzkrhh] {
    min-height: calc(100vh - 3.5rem);
    padding: 2rem;
    background: var(--mp-bg);
}

.help-content[b-hvtvtzkrhh] {
    max-width: 900px;
    margin: 0 auto;
}

/* Header */
.help-header[b-hvtvtzkrhh] {
    text-align: center;
    margin-bottom: 2rem;
}

.header-icon[b-hvtvtzkrhh] {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, #d4a574 0%, #c4956a 50%, #b8865e 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(212, 165, 116, 0.3);
}

.header-icon i[b-hvtvtzkrhh] {
    font-size: 2.25rem;
    color: white;
}

.help-header h1[b-hvtvtzkrhh] {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--mp-text-heading);
    margin-bottom: 0.5rem;
}

.header-subtitle[b-hvtvtzkrhh] {
    font-size: 1.05rem;
    color: var(--mp-accent-text);
    font-weight: 500;
    margin: 0;
}

/* Quick Navigation */
.quick-nav[b-hvtvtzkrhh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.quick-nav-item[b-hvtvtzkrhh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 20px;
    color: var(--mp-text) !important;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
    cursor: pointer;
}

.quick-nav-item:hover[b-hvtvtzkrhh] {
    background: var(--mp-bg-hover);
    border-color: var(--mp-accent-border);
    color: var(--mp-accent-text) !important;
}

.quick-nav-item.accent[b-hvtvtzkrhh] {
    background: var(--mp-accent-bg);
    border-color: var(--mp-accent-border);
    color: var(--mp-accent-text) !important;
}

.quick-nav-item.accent:hover[b-hvtvtzkrhh] {
    background: var(--mp-bg-hover);
}

/* Knowledge Base Sections */
.kb-section[b-hvtvtzkrhh] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 14px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.section-header[b-hvtvtzkrhh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.75rem;
    background: var(--mp-bg-elevated);
    border-bottom: 1px solid var(--mp-border);
}

.section-header i[b-hvtvtzkrhh] {
    font-size: 1.25rem;
    color: var(--mp-accent-text);
}

.section-header h2[b-hvtvtzkrhh] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--mp-text-heading);
    margin: 0;
}

.section-body[b-hvtvtzkrhh] {
    padding: 1.75rem;
    color: var(--mp-text-secondary);
    line-height: 1.7;
    font-size: 0.925rem;
}

.section-body h3[b-hvtvtzkrhh] {
    color: var(--mp-accent-text);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
}

.section-body h3:first-child[b-hvtvtzkrhh] {
    margin-top: 0;
}

.section-body p[b-hvtvtzkrhh] {
    margin-bottom: 1rem;
}

.section-body ul[b-hvtvtzkrhh] {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.section-body li[b-hvtvtzkrhh] {
    margin-bottom: 0.4rem;
}

/* Feature List */
.feature-list[b-hvtvtzkrhh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.feature-row[b-hvtvtzkrhh] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    background: var(--mp-bg-elevated);
    border: 1px solid var(--mp-border);
    border-radius: 10px;
}

.feature-row > i[b-hvtvtzkrhh] {
    font-size: 1.1rem;
    color: var(--mp-accent-text);
    margin-top: 2px;
    flex-shrink: 0;
}

.feature-row strong[b-hvtvtzkrhh] {
    color: var(--mp-text-heading);
    display: block;
    margin-bottom: 2px;
    font-size: 0.9rem;
}

.feature-row span[b-hvtvtzkrhh] {
    color: var(--mp-text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Formula Cards */
.formula-card[b-hvtvtzkrhh] {
    background: var(--mp-accent-bg);
    border: 1px solid var(--mp-accent-border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;
    text-align: center;
}

.formula-card.compact[b-hvtvtzkrhh] {
    padding: 0.875rem 1.25rem;
}

.formula-title[b-hvtvtzkrhh] {
    color: var(--mp-accent-text);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.formula[b-hvtvtzkrhh] {
    color: var(--mp-text-heading);
    font-size: 1.15rem;
    font-weight: 600;
    font-family: 'Segoe UI', system-ui, monospace;
}

.formula-small[b-hvtvtzkrhh] {
    background: var(--mp-bg-elevated);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
    color: var(--mp-text);
    font-family: 'Segoe UI', system-ui, monospace;
    font-size: 0.85rem;
}

/* Metric Grid */
.metric-grid[b-hvtvtzkrhh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.metric-card[b-hvtvtzkrhh] {
    background: var(--mp-bg-elevated);
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    overflow: hidden;
}

.metric-header[b-hvtvtzkrhh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--mp-text-heading);
}

.metric-header.availability[b-hvtvtzkrhh] { background: rgba(59, 130, 246, 0.15); }
.metric-header.performance[b-hvtvtzkrhh] { background: rgba(74, 222, 128, 0.15); }
.metric-header.quality[b-hvtvtzkrhh] { background: rgba(168, 85, 247, 0.15); }

.metric-header.availability i[b-hvtvtzkrhh] { color: #3b82f6; }
.metric-header.performance i[b-hvtvtzkrhh] { color: #16a34a; }
.metric-header.quality i[b-hvtvtzkrhh] { color: #a855f7; }

.metric-body[b-hvtvtzkrhh] {
    padding: 1rem;
    font-size: 0.85rem;
}

.metric-body ul[b-hvtvtzkrhh] {
    padding-left: 1rem;
}

.metric-note[b-hvtvtzkrhh] {
    color: var(--mp-accent-text);
    font-size: 0.8rem;
    font-style: italic;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* Benchmark Card */
.benchmark-card[b-hvtvtzkrhh] {
    background: var(--mp-bg-elevated);
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    padding: 1.25rem;
    margin-top: 1.25rem;
}

.benchmark-title[b-hvtvtzkrhh] {
    color: var(--mp-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    margin-bottom: 1rem;
}

.benchmark-grid[b-hvtvtzkrhh] {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.benchmark-item[b-hvtvtzkrhh] {
    text-align: center;
}

.benchmark-value[b-hvtvtzkrhh] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.benchmark-value.good[b-hvtvtzkrhh] { color: #16a34a; }
.benchmark-value.ok[b-hvtvtzkrhh] { color: #ca8a04; }
.benchmark-value.poor[b-hvtvtzkrhh] { color: #dc2626; }

.benchmark-label[b-hvtvtzkrhh] {
    color: var(--mp-text-muted);
    font-size: 0.8rem;
}

/* Info Card */
.info-card[b-hvtvtzkrhh] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    margin: 1rem 0;
}

.info-card > i[b-hvtvtzkrhh] {
    color: #3b82f6;
    font-size: 1.25rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.info-card p[b-hvtvtzkrhh] {
    margin-bottom: 0.5rem;
}

.info-card p:last-child[b-hvtvtzkrhh] {
    margin-bottom: 0;
}

/* Comparison Table */
.comparison-table[b-hvtvtzkrhh] {
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 1rem;
}

.comparison-row[b-hvtvtzkrhh] {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr;
    border-bottom: 1px solid var(--mp-border);
}

.comparison-row:last-child[b-hvtvtzkrhh] {
    border-bottom: none;
}

.comparison-row.header[b-hvtvtzkrhh] {
    background: var(--mp-bg-elevated);
}

.comparison-row.header span[b-hvtvtzkrhh] {
    color: var(--mp-accent-text);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comparison-row span[b-hvtvtzkrhh] {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    border-right: 1px solid var(--mp-border);
}

.comparison-row span:last-child[b-hvtvtzkrhh] {
    border-right: none;
}

.comparison-row span:first-child[b-hvtvtzkrhh] {
    color: var(--mp-text-heading);
    font-weight: 500;
}

/* Styled List */
.styled-list[b-hvtvtzkrhh] {
    list-style: none;
    padding-left: 0 !important;
}

.styled-list li[b-hvtvtzkrhh] {
    position: relative;
    padding-left: 1.5rem;
}

.styled-list li[b-hvtvtzkrhh]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    background: var(--mp-accent-text);
    border-radius: 50%;
}

/* ===== Report a Problem Form ===== */
.report-section .section-header[b-hvtvtzkrhh] {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.15);
}

.form-grid[b-hvtvtzkrhh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group[b-hvtvtzkrhh] {
    margin-bottom: 1rem;
}

.form-label[b-hvtvtzkrhh] {
    display: block;
    color: var(--mp-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
}

.required[b-hvtvtzkrhh] {
    color: #dc2626;
}

.form-control[b-hvtvtzkrhh],
.form-select[b-hvtvtzkrhh] {
    background: var(--mp-input-bg) !important;
    border: 1px solid var(--mp-input-border) !important;
    border-radius: 8px !important;
    color: var(--mp-input-text) !important;
    padding: 0.6rem 0.875rem !important;
    font-size: 0.9rem !important;
    transition: border-color 0.2s ease !important;
}

.form-control:focus[b-hvtvtzkrhh],
.form-select:focus[b-hvtvtzkrhh] {
    border-color: var(--mp-accent) !important;
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1) !important;
    outline: none !important;
}

.form-control[b-hvtvtzkrhh]::placeholder {
    color: var(--mp-text-faint) !important;
}

.form-select option[b-hvtvtzkrhh] {
    background: var(--mp-dropdown-bg);
    color: var(--mp-input-text);
}

.form-select optgroup[b-hvtvtzkrhh] {
    background: var(--mp-bg-elevated);
    color: var(--mp-accent-text);
    font-weight: 600;
    font-style: normal;
    font-size: 0.8rem;
    padding: 4px 0;
}

.description-input[b-hvtvtzkrhh] {
    min-height: 120px;
    resize: vertical;
}

/* File Upload */
.file-upload-area[b-hvtvtzkrhh] {
    position: relative;
    border: 2px dashed var(--mp-border-medium);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.file-upload-area:hover[b-hvtvtzkrhh] {
    border-color: var(--mp-accent-border);
    background: var(--mp-bg-hover);
}

.file-input[b-hvtvtzkrhh] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-upload-content[b-hvtvtzkrhh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    pointer-events: none;
}

.file-upload-content i[b-hvtvtzkrhh] {
    font-size: 2rem;
    color: var(--mp-accent-text);
}

.file-upload-content span[b-hvtvtzkrhh] {
    color: var(--mp-text-muted);
    font-size: 0.9rem;
}

.file-upload-content small[b-hvtvtzkrhh] {
    color: var(--mp-text-faint);
    font-size: 0.8rem;
}

/* File List */
.file-list[b-hvtvtzkrhh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.file-item[b-hvtvtzkrhh] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--mp-bg-elevated);
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    font-size: 0.85rem;
}

.file-item i[b-hvtvtzkrhh] {
    color: var(--mp-accent-text);
}

.file-name[b-hvtvtzkrhh] {
    color: var(--mp-text-heading);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-size[b-hvtvtzkrhh] {
    color: var(--mp-text-faint);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.file-remove[b-hvtvtzkrhh] {
    background: transparent;
    border: none;
    color: rgba(248, 113, 113, 0.7);
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    font-size: 1rem;
}

.file-remove:hover[b-hvtvtzkrhh] {
    color: #dc2626;
}

.file-error[b-hvtvtzkrhh] {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 0.4rem;
}

/* Submit Button */
.form-actions[b-hvtvtzkrhh] {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
}

.btn-submit[b-hvtvtzkrhh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1.75rem;
    background: linear-gradient(135deg, #d4a574 0%, #c4956a 50%, #b8865e 100%);
    color: #1e1e2e;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(212, 165, 116, 0.3);
}

.btn-submit:hover:not(:disabled)[b-hvtvtzkrhh] {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(212, 165, 116, 0.4);
}

.btn-submit:disabled[b-hvtvtzkrhh] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Success Card */
.success-card[b-hvtvtzkrhh] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 10px;
    align-items: flex-start;
}

.success-card > i[b-hvtvtzkrhh] {
    color: #16a34a;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.success-card strong[b-hvtvtzkrhh] {
    color: #16a34a;
    display: block;
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.success-card p[b-hvtvtzkrhh] {
    color: var(--mp-text-secondary);
    margin-bottom: 0.75rem;
}

.btn-reset[b-hvtvtzkrhh] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border-medium);
    color: var(--mp-text-heading);
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reset:hover[b-hvtvtzkrhh] {
    background: var(--mp-bg-hover);
}

/* Validation */
[b-hvtvtzkrhh] .validation-message {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .help-container[b-hvtvtzkrhh] {
        padding: 1.25rem;
    }

    .help-header h1[b-hvtvtzkrhh] {
        font-size: 1.75rem;
    }

    .metric-grid[b-hvtvtzkrhh] {
        grid-template-columns: 1fr;
    }

    .form-grid[b-hvtvtzkrhh] {
        grid-template-columns: 1fr;
    }

    .comparison-row[b-hvtvtzkrhh] {
        grid-template-columns: 1fr;
    }

    .comparison-row.header[b-hvtvtzkrhh] {
        display: none;
    }

    .comparison-row span[b-hvtvtzkrhh] {
        border-right: none;
        padding: 0.4rem 1rem;
    }

    .comparison-row span:first-child[b-hvtvtzkrhh] {
        padding-top: 0.75rem;
        color: var(--mp-accent-text);
        font-size: 0.75rem;
        text-transform: uppercase;
    }

    .benchmark-grid[b-hvtvtzkrhh] {
        flex-direction: column;
        gap: 1rem;
    }
}
/* /Components/Pages/Help/SupportTickets.razor.rz.scp.css */
/* ========================================
   Support Tickets Viewer - MinePulse Theme
   ======================================== */

.tickets-container[b-hj657nmd2o] {
    min-height: calc(100vh - 3.5rem);
    padding: 2rem;
    background: var(--mp-bg-page);
}

.tickets-content[b-hj657nmd2o] {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

/* Header */
.tickets-header[b-hj657nmd2o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.header-left[b-hj657nmd2o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-left i[b-hj657nmd2o] {
    font-size: 1.5rem;
    color: var(--mp-accent-text);
}

.header-left h1[b-hj657nmd2o] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mp-text-heading);
    margin: 0;
}

.ticket-count[b-hj657nmd2o] {
    background: var(--mp-accent-bg);
    color: var(--mp-accent-text);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Filters */
.filters-bar[b-hj657nmd2o] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-group[b-hj657nmd2o] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-group label[b-hj657nmd2o] {
    color: var(--mp-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-select[b-hj657nmd2o] {
    background: var(--mp-input-bg);
    border: 1px solid var(--mp-input-border);
    border-radius: 6px;
    color: var(--mp-input-text);
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    min-width: 130px;
}

.filter-select:focus[b-hj657nmd2o] {
    border-color: var(--mp-accent);
    outline: none;
}

.filter-select option[b-hj657nmd2o] {
    background: var(--mp-select-option-bg);
    color: var(--mp-input-text);
}

/* Loading / Empty */
.loading-state[b-hj657nmd2o],
.empty-state[b-hj657nmd2o] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--mp-text-muted);
}

.loading-state .spinner-border[b-hj657nmd2o] {
    color: var(--mp-accent);
    margin-bottom: 1rem;
}

.empty-state i[b-hj657nmd2o] {
    font-size: 3rem;
    color: var(--mp-text-faint);
    display: block;
    margin-bottom: 1rem;
}

.empty-state h3[b-hj657nmd2o] {
    color: var(--mp-text-heading);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

/* Ticket Cards */
.tickets-list[b-hj657nmd2o] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ticket-card[b-hj657nmd2o] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ticket-card:hover[b-hj657nmd2o] {
    background: var(--mp-bg-hover);
    border-color: var(--mp-accent-border);
}

.ticket-card.selected[b-hj657nmd2o] {
    border-color: var(--mp-accent);
    background: var(--mp-accent-bg);
}

.ticket-card-header[b-hj657nmd2o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.ticket-meta[b-hj657nmd2o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.priority-dot[b-hj657nmd2o] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.priority-dot.priority-critical[b-hj657nmd2o],
.priority-badge.priority-critical[b-hj657nmd2o] { background: #ef4444; }
.priority-dot.priority-high[b-hj657nmd2o],
.priority-badge.priority-high[b-hj657nmd2o] { background: #f97316; }
.priority-dot.priority-medium[b-hj657nmd2o],
.priority-badge.priority-medium[b-hj657nmd2o] { background: #eab308; }
.priority-dot.priority-low[b-hj657nmd2o],
.priority-badge.priority-low[b-hj657nmd2o] { background: #22c55e; }

.ticket-category[b-hj657nmd2o] {
    color: var(--mp-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.ticket-status[b-hj657nmd2o] {
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.ticket-status.status-open[b-hj657nmd2o] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.ticket-status.status-inprogress[b-hj657nmd2o] { background: rgba(234, 179, 8, 0.15); color: #ca8a04; }
.ticket-status.status-resolved[b-hj657nmd2o] { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.ticket-status.status-closed[b-hj657nmd2o] { background: var(--mp-bg-elevated); color: var(--mp-text-muted); }

.ticket-date[b-hj657nmd2o] {
    color: var(--mp-text-faint);
    font-size: 0.75rem;
}

.ticket-title[b-hj657nmd2o] {
    color: var(--mp-text-heading);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

.ticket-card-footer[b-hj657nmd2o] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.ticket-submitter[b-hj657nmd2o],
.ticket-page[b-hj657nmd2o],
.ticket-attachments[b-hj657nmd2o] {
    color: var(--mp-text-faint);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Detail Panel */
.ticket-detail-overlay[b-hj657nmd2o] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1100;
}

.ticket-detail-panel[b-hj657nmd2o] {
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    max-width: 90vw;
    height: 100vh;
    background: var(--mp-modal-bg);
    border-left: 1px solid var(--mp-border-medium);
    z-index: 1101;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
}

.detail-header[b-hj657nmd2o] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--mp-border);
}

.detail-header-top[b-hj657nmd2o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.priority-badge[b-hj657nmd2o] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-select[b-hj657nmd2o] {
    background: var(--mp-input-bg);
    border: 1px solid var(--mp-input-border);
    border-radius: 6px;
    color: var(--mp-input-text);
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.status-select option[b-hj657nmd2o] {
    background: var(--mp-select-option-bg);
    color: var(--mp-input-text);
}

.detail-close[b-hj657nmd2o] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--mp-text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem;
}

.detail-close:hover[b-hj657nmd2o] {
    color: var(--mp-text-heading);
}

.detail-title[b-hj657nmd2o] {
    color: var(--mp-text-heading);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    line-height: 1.4;
}

.detail-meta[b-hj657nmd2o] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.detail-meta span[b-hj657nmd2o] {
    color: var(--mp-text-muted);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.detail-meta span i[b-hj657nmd2o] {
    color: var(--mp-accent-text);
    font-size: 0.85rem;
}

/* Detail Body */
.detail-body[b-hj657nmd2o] {
    padding: 1.5rem;
    flex: 1;
}

.detail-body h3[b-hj657nmd2o] {
    color: var(--mp-accent-text);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 1.25rem 0 0.5rem;
}

.detail-body h3:first-child[b-hj657nmd2o] {
    margin-top: 0;
}

.detail-description[b-hj657nmd2o] {
    color: var(--mp-text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    white-space: pre-wrap;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    padding: 1rem;
}

.detail-attachments[b-hj657nmd2o] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.attachment-item[b-hj657nmd2o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mp-text-secondary);
    font-size: 0.82rem;
    padding: 0.4rem 0.75rem;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 6px;
}

.attachment-item i[b-hj657nmd2o] {
    color: var(--mp-accent-text);
}

.resolution-textarea[b-hj657nmd2o] {
    width: 100%;
    min-height: 100px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: white;
    padding: 0.75rem;
    font-size: 0.85rem;
    resize: vertical;
}

.resolution-textarea:focus[b-hj657nmd2o] {
    border-color: rgba(212, 165, 116, 0.4);
    outline: none;
}

.resolution-textarea[b-hj657nmd2o]::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.detail-actions[b-hj657nmd2o] {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

.btn-save[b-hj657nmd2o] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, #d4a574 0%, #b8865e 100%);
    color: #1e1e2e;
    font-weight: 600;
    font-size: 0.85rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-save:hover[b-hj657nmd2o] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .tickets-container[b-hj657nmd2o] {
        padding: 1rem;
    }

    .filters-bar[b-hj657nmd2o] {
        flex-direction: column;
    }

    .ticket-detail-panel[b-hj657nmd2o] {
        width: 100vw;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ========================================
   Home Page - Mine Pulse Theme
   ======================================== */

.home-container[b-9rzaj8xbqv] {
    min-height: calc(100vh - 2rem);
    padding: 2rem;
    background: var(--mp-bg-page);
    border-radius: 12px;
    margin: 1rem;
}

.home-content[b-9rzaj8xbqv] {
    max-width: 1000px;
    margin: 0 auto;
}

/* Welcome Section */
.welcome-section[b-9rzaj8xbqv] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.brand-icon-large[b-9rzaj8xbqv] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #d4a574 0%, #c4956a 50%, #b8865e 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(212, 165, 116, 0.3);
}

.brand-icon-large i[b-9rzaj8xbqv] {
    font-size: 2.5rem;
    color: white;
}

.welcome-title[b-9rzaj8xbqv] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--mp-text-heading);
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.welcome-subtitle[b-9rzaj8xbqv] {
    font-size: 1.1rem;
    color: var(--mp-accent-text);
    font-weight: 500;
}

/* Intro Card */
.intro-card[b-9rzaj8xbqv] {
    background: var(--mp-bg-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--mp-accent-border);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.intro-card h2[b-9rzaj8xbqv] {
    color: var(--mp-accent-text);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
}

.intro-text[b-9rzaj8xbqv] {
    color: var(--mp-text);
    font-size: 1rem;
    line-height: 1.7;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2rem;
}

/* Features Grid */
.features-grid[b-9rzaj8xbqv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.feature-item[b-9rzaj8xbqv] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-accent-border);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.feature-item:hover[b-9rzaj8xbqv] {
    background: rgba(212, 165, 116, 0.08);
    border-color: rgba(212, 165, 116, 0.25);
    transform: translateY(-4px);
}

.feature-icon[b-9rzaj8xbqv] {
    width: 50px;
    height: 50px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.2) 0%, rgba(196, 149, 106, 0.1) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon i[b-9rzaj8xbqv] {
    font-size: 1.5rem;
    color: var(--mp-accent-text);
}

.feature-item h3[b-9rzaj8xbqv] {
    color: var(--mp-text-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.feature-item p[b-9rzaj8xbqv] {
    color: var(--mp-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

/* CTA Section */
.cta-section[b-9rzaj8xbqv] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-button[b-9rzaj8xbqv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: linear-gradient(135deg, #d4a574 0%, #c4956a 50%, #b8865e 100%);
    color: #1e1e2e !important;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(212, 165, 116, 0.3);
}

.cta-button:hover[b-9rzaj8xbqv] {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(212, 165, 116, 0.4);
    color: #1e1e2e !important;
}

.cta-button.secondary[b-9rzaj8xbqv] {
    background: rgba(212, 165, 116, 0.15);
    border: 1px solid rgba(212, 165, 116, 0.3);
    color: #d4a574 !important;
    box-shadow: none;
}

.cta-button.secondary:hover[b-9rzaj8xbqv] {
    background: rgba(212, 165, 116, 0.25);
    border-color: rgba(212, 165, 116, 0.5);
    color: #d4a574 !important;
}

.cta-button i[b-9rzaj8xbqv] {
    font-size: 1.125rem;
}

/* Responsive */
@media (max-width: 768px) {
    .home-container[b-9rzaj8xbqv] {
        padding: 1.5rem;
        margin: 0.5rem;
    }

    .welcome-title[b-9rzaj8xbqv] {
        font-size: 2rem;
    }

    .intro-card[b-9rzaj8xbqv] {
        padding: 1.5rem;
    }

    .features-grid[b-9rzaj8xbqv] {
        grid-template-columns: 1fr;
    }

    .cta-section[b-9rzaj8xbqv] {
        flex-direction: column;
    }

    .cta-button[b-9rzaj8xbqv] {
        justify-content: center;
    }
}
/* /Components/Pages/PlantModes/RecipeEditor.razor.rz.scp.css */
/* Recipe Editor Layout */
.recipe-editor[b-qqfe5yq4ud] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.loading-state[b-qqfe5yq4ud] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* Header */
.editor-header[b-qqfe5yq4ud] {
    margin-bottom: 2rem;
}

.back-link[b-qqfe5yq4ud] {
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.back-link:hover[b-qqfe5yq4ud] {
    color: rgba(255,255,255,0.6);
}

.editor-header h1[b-qqfe5yq4ud] {
    font-size: 1.75rem;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    margin-bottom: 0.5rem;
}

/* Section Cards */
.section-card[b-qqfe5yq4ud] {
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.section-header[b-qqfe5yq4ud] {
    background: rgba(255,255,255,0.04);
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.section-header h3[b-qqfe5yq4ud] {
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-header h3 i[b-qqfe5yq4ud] {
    color: #3498db;
}

.section-header p[b-qqfe5yq4ud] {
    margin: 0;
    font-size: 0.875rem;
}

.section-body[b-qqfe5yq4ud] {
    padding: 1.5rem;
}

/* Input Cards */
.input-card[b-qqfe5yq4ud] {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.input-card:hover[b-qqfe5yq4ud] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.input-card-header[b-qqfe5yq4ud] {
    padding: 1rem 1.5rem;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input-card-header h5[b-qqfe5yq4ud] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
}

.input-card-body[b-qqfe5yq4ud] {
    padding: 1.5rem;
}

/* Calculation Explanation */
.calculation-explanation[b-qqfe5yq4ud] {
    background: #e3f2fd;
    border-left: 3px solid #3498db;
    padding: 1rem;
    border-radius: 4px;
}

.calculation-explanation strong[b-qqfe5yq4ud] {
    display: block;
    margin-bottom: 0.5rem;
    color: #1976d2;
}

.calculation-explanation p[b-qqfe5yq4ud] {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
}

/* Preview Section */
.preview-section[b-qqfe5yq4ud] {
    border: 2px solid #3498db;
}

.preview-flow[b-qqfe5yq4ud] {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
}

.preview-inputs[b-qqfe5yq4ud],
.preview-output[b-qqfe5yq4ud] {
    flex: 1;
}

.preview-inputs h5[b-qqfe5yq4ud],
.preview-output h5[b-qqfe5yq4ud] {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.preview-item[b-qqfe5yq4ud] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255,255,255,0.03);
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(255,255,255,0.08);
}

.preview-icon[b-qqfe5yq4ud] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.preview-details[b-qqfe5yq4ud] {
    flex: 1;
}

.preview-details strong[b-qqfe5yq4ud] {
    display: block;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.8);
}

.preview-details small[b-qqfe5yq4ud] {
    display: block;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
}

.preview-arrow[b-qqfe5yq4ud] {
    font-size: 2rem;
    color: #3498db;
    flex-shrink: 0;
}

/* Actions */
.editor-actions[b-qqfe5yq4ud] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .recipe-editor[b-qqfe5yq4ud] {
        padding: 1rem;
    }

    .section-body[b-qqfe5yq4ud] {
        padding: 1rem;
    }

    .input-card-body[b-qqfe5yq4ud] {
        padding: 1rem;
    }

    .preview-flow[b-qqfe5yq4ud] {
        flex-direction: column;
        align-items: stretch;
    }

    .preview-arrow[b-qqfe5yq4ud] {
        transform: rotate(90deg);
        align-self: center;
    }

    .editor-actions[b-qqfe5yq4ud] {
        flex-direction: column;
    }

    .editor-actions button[b-qqfe5yq4ud] {
        width: 100%;
    }
}
/* /Components/Pages/Reports/ReportsIndex.razor.rz.scp.css */
/* ========================================
   Reports Index - Mine Pulse Theme
   ======================================== */

.reports-container[b-r14km37kj4] {
    min-height: calc(100vh - 3.5rem);
    padding: 2rem;
    background: linear-gradient(135deg,
        #1a1a2e 0%,
        #16213e 25%,
        #0f3460 50%,
        #1a1a2e 75%,
        #16213e 100%);
    background-image:
        linear-gradient(135deg,
            #1a1a2e 0%,
            #16213e 25%,
            #0f3460 50%,
            #1a1a2e 75%,
            #16213e 100%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4a574' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.reports-content[b-r14km37kj4] {
    max-width: 1100px;
    margin: 0 auto;
}

/* Header */
.reports-header[b-r14km37kj4] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.header-icon[b-r14km37kj4] {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, #d4a574 0%, #c4956a 50%, #b8865e 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(212, 165, 116, 0.3);
}

.header-icon i[b-r14km37kj4] {
    font-size: 2.25rem;
    color: white;
}

.reports-header h1[b-r14km37kj4] {
    font-size: 2.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.header-subtitle[b-r14km37kj4] {
    font-size: 1.05rem;
    color: rgba(212, 165, 116, 0.8);
    font-weight: 500;
    margin: 0;
}

/* Reports Grid */
.reports-grid[b-r14km37kj4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* Report Card */
.report-card[b-r14km37kj4] {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 165, 116, 0.15);
    border-radius: 14px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.25s ease;
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
}

.report-card:hover[b-r14km37kj4] {
    background: rgba(212, 165, 116, 0.1);
    border-color: rgba(212, 165, 116, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.report-card.disabled[b-r14km37kj4] {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

/* Card Icon */
.report-card-icon[b-r14km37kj4] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.2) 0%, rgba(196, 149, 106, 0.1) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.report-card-icon i[b-r14km37kj4] {
    font-size: 1.4rem;
    color: #d4a574;
}

/* Card Body */
.report-card-body[b-r14km37kj4] {
    flex: 1;
}

.report-card-body h3[b-r14km37kj4] {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.report-card-body p[b-r14km37kj4] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0;
}

/* Card Footer */
.report-card-footer[b-r14km37kj4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.report-badge[b-r14km37kj4] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 6px;
}

.report-badge.available[b-r14km37kj4] {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.report-badge.coming-soon[b-r14km37kj4] {
    background: rgba(212, 165, 116, 0.15);
    color: rgba(212, 165, 116, 0.7);
}

.report-arrow[b-r14km37kj4] {
    color: #d4a574;
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.report-card:hover .report-arrow[b-r14km37kj4] {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 768px) {
    .reports-container[b-r14km37kj4] {
        padding: 1.5rem;
    }

    .reports-header h1[b-r14km37kj4] {
        font-size: 1.75rem;
    }

    .reports-grid[b-r14km37kj4] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Setup/PlantLayoutSetup.razor.rz.scp.css */
.page-header[b-8tivpj96tu] {
    margin-bottom: 1.5rem;
}

.page-header .breadcrumb[b-8tivpj96tu] {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.page-header h1[b-8tivpj96tu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.page-header h1 i[b-8tivpj96tu] {
    color: var(--bs-primary);
}

/* Plant Selector */
.plant-selector-container[b-8tivpj96tu] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
}

.plant-selector-card[b-8tivpj96tu] {
    text-align: center;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    max-width: 400px;
    width: 100%;
}

.plant-selector-icon[b-8tivpj96tu] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: rgba(212, 165, 116, 0.15);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plant-selector-icon i[b-8tivpj96tu] {
    font-size: 2.5rem;
    color: white;
}

.plant-selector-card h3[b-8tivpj96tu] {
    color: var(--bs-gray-800);
    margin-bottom: 0.5rem;
}

.plant-selector-card .text-muted[b-8tivpj96tu] {
    margin-bottom: 1.5rem;
}

.plant-select[b-8tivpj96tu] {
    max-width: 300px;
    margin: 0 auto;
}

/* Layout Setup Container */
.layout-setup-container[b-8tivpj96tu] {
    display: flex;
    gap: 0;
    height: calc(100vh - 65px);
    min-height: 600px;
}

.layout-setup-container.full-width[b-8tivpj96tu] {
    display: block;
    height: calc(100vh - 65px);
}

/* Version Selector Bar - Compact */
.version-selector-bar[b-8tivpj96tu] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--bs-gray-100);
    border-bottom: 1px solid var(--bs-gray-200);
    flex-wrap: wrap;
}

.version-dropdown[b-8tivpj96tu] {
    min-width: 200px;
}

.version-dropdown .dropdown-toggle[b-8tivpj96tu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
}

.version-dropdown-menu[b-8tivpj96tu] {
    min-width: 300px;
    max-height: 400px;
    overflow-y: auto;
}

.version-dropdown-menu .dropdown-item[b-8tivpj96tu] {
    padding: 0.5rem 0.75rem;
}

.version-dropdown-menu .dropdown-item.active[b-8tivpj96tu] {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.version-actions-bar[b-8tivpj96tu] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.version-actions-bar .divider[b-8tivpj96tu] {
    width: 1px;
    height: 24px;
    background: var(--bs-gray-300);
    margin: 0 0.5rem;
}

/* Version Panel - Legacy (kept for reference but hidden) */
.version-panel[b-8tivpj96tu] {
width: 300px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
    display: none; /* Hidden - using dropdown now */
    flex-direction: column;
    overflow: hidden;
}

.version-header[b-8tivpj96tu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.version-header h5[b-8tivpj96tu] {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.version-list[b-8tivpj96tu] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.no-versions[b-8tivpj96tu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--bs-gray-500);
}

.no-versions i[b-8tivpj96tu] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-versions p[b-8tivpj96tu] {
    margin-bottom: 1rem;
}

.version-item[b-8tivpj96tu] {
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.version-item:hover[b-8tivpj96tu] {
    background: var(--bs-gray-100);
}

.version-item.selected[b-8tivpj96tu] {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary);
}

.version-item.active[b-8tivpj96tu] {
    border-left: 4px solid var(--bs-success);
}

.version-info[b-8tivpj96tu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.version-number[b-8tivpj96tu] {
    font-weight: 600;
    font-family: monospace;
    background: var(--bs-gray-200);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.version-name[b-8tivpj96tu] {
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.version-meta[b-8tivpj96tu] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-bottom: 0.5rem;
}

.version-meta i[b-8tivpj96tu] {
    margin-right: 0.25rem;
}

.version-actions[b-8tivpj96tu] {
    display: flex;
    gap: 0.25rem;
}

/* Editor Panel */
.editor-panel[b-8tivpj96tu] {
flex: 1;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.full-width .editor-panel[b-8tivpj96tu] {
    border-radius: 8px;
    height: calc(100vh - 80px);
}

.no-selection[b-8tivpj96tu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--bs-gray-500);
}

.no-selection i[b-8tivpj96tu] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-selection h4[b-8tivpj96tu] {
    margin-bottom: 0.5rem;
    color: var(--bs-gray-700);
}

.editor-header[b-8tivpj96tu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-gray-200);
}

.editor-title[b-8tivpj96tu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.editor-title h4[b-8tivpj96tu] {
    margin: 0;
    font-size: 1rem;
}

.editor-actions[b-8tivpj96tu] {
    display: flex;
    gap: 0.5rem;
}

.version-notes[b-8tivpj96tu] {
    padding: 0.5rem 1rem;
    background: var(--bs-warning-bg-subtle);
    font-size: 0.8125rem;
    color: var(--bs-warning-text-emphasis);
    border-bottom: 1px solid var(--bs-gray-200);
}

.version-notes i[b-8tivpj96tu] {
    margin-right: 0.5rem;
}

/* Modals */
.modal-version-info[b-8tivpj96tu] {
    max-width: 500px;
}

.modal-confirm[b-8tivpj96tu] {
    max-width: 450px;
}

.version-details[b-8tivpj96tu] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-gray-200);
}

.detail-row[b-8tivpj96tu] {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
}

.detail-label[b-8tivpj96tu] {
    color: var(--bs-gray-600);
    font-size: 0.875rem;
}

.detail-value[b-8tivpj96tu] {
    font-weight: 500;
    font-size: 0.875rem;
}

/* Modal Base Styles */
.modal-backdrop[b-8tivpj96tu] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    backdrop-filter: blur(2px);
}

.modal-dialog[b-8tivpj96tu] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    width: 100%;
    padding: 1rem;
}

.modal-content[b-8tivpj96tu] {
background: linear-gradient(180deg, #1e1e2e 0%, #16213e 100%);
border: 1px solid rgba(212, 165, 116, 0.15);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    max-height: 90vh;
    overflow: auto;
}

.modal-header[b-8tivpj96tu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-title[b-8tivpj96tu] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-body[b-8tivpj96tu] {
    padding: 1.25rem;
}

.modal-footer[b-8tivpj96tu] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--bs-gray-200);
}

.btn-close[b-8tivpj96tu] {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}

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

.btn-close[b-8tivpj96tu]::before {
    content: "�";
}

.btn-close-white[b-8tivpj96tu] {
    color: white;
}

.btn-close-white[b-8tivpj96tu]::before {
    content: "�";
}

/* Responsive */
@media (max-width: 992px) {
    .layout-setup-container[b-8tivpj96tu] {
        flex-direction: column;
        height: auto;
    }

    .layout-setup-container.full-width[b-8tivpj96tu] {
        height: auto;
    }

    .full-width .editor-panel[b-8tivpj96tu] {
        height: auto;
        min-height: calc(100vh - 150px);
    }

    .version-selector-bar[b-8tivpj96tu] {
        flex-direction: column;
        align-items: flex-start;
    }

    .version-dropdown[b-8tivpj96tu] {
        width: 100%;
    }

    .version-actions-bar[b-8tivpj96tu] {
        width: 100%;
        justify-content: flex-start;
    }

    .editor-panel[b-8tivpj96tu] {
        min-height: 500px;
    }
}
/* /Components/Pages/Setup/SetupManager/Tabs/HierarchyTreeTab.razor.rz.scp.css */
/* Hierarchy Tree Tab Styles */

/* Organizational Tree Container */
.org-tree-container[b-2lqvk9kbgu] {
    max-height: 70vh;
    overflow-y: auto;
    font-size: 0.9rem;
}

/* Organizational Tree Node */
[b-2lqvk9kbgu] .org-tree-node {
    border-left: 1px dashed var(--bs-border-color);
}

[b-2lqvk9kbgu] .org-tree-node:last-child {
    border-left-color: transparent;
}

[b-2lqvk9kbgu] .org-tree-children {
    border-left: 1px dashed var(--bs-border-color);
    margin-left: 12px;
}

[b-2lqvk9kbgu] .hover-bg {
    transition: all 0.15s ease;
    cursor: pointer;
    border-radius: 4px;
}

[b-2lqvk9kbgu] .hover-bg:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

[b-2lqvk9kbgu] .tree-node-row:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}

[b-2lqvk9kbgu] .tree-node-row .btn-group {
    opacity: 0;
    transition: opacity 0.15s ease;
}

[b-2lqvk9kbgu] .tree-node-row:hover .btn-group {
    opacity: 1;
}

/* Purple color for plants and modes */
.text-purple[b-2lqvk9kbgu] {
    color: #6f42c1 !important;
}

.bg-purple[b-2lqvk9kbgu] {
    background-color: #6f42c1 !important;
    color: white !important;
}

.btn-outline-purple[b-2lqvk9kbgu] {
    color: #6f42c1;
    border-color: #6f42c1;
}

.btn-outline-purple:hover[b-2lqvk9kbgu] {
    color: white;
    background-color: #6f42c1;
    border-color: #6f42c1;
}

/* Cursor pointer for clickable items */
.cursor-pointer[b-2lqvk9kbgu] {
    cursor: pointer;
}

/* Badge styling */
[b-2lqvk9kbgu] .badge {
    font-weight: 500;
    padding: 0.35em 0.65em;
}

/* Tree node spacing */
[b-2lqvk9kbgu] .tree-node {
    transition: background-color 0.15s ease;
}

/* Card styling */
.card[b-2lqvk9kbgu] {
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.card-header[b-2lqvk9kbgu] {
    background-color: var(--bs-light);
    border-bottom: 1px solid var(--bs-border-color);
}

/* Modal styling */
.modal-content[b-2lqvk9kbgu] {
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.modal-header[b-2lqvk9kbgu] {
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--bs-light);
}

.modal-body[b-2lqvk9kbgu] {
    padding: 1.5rem;
}

.modal-footer[b-2lqvk9kbgu] {
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--bs-light);
}
/* /Components/Pages/Setup/StockpileSetup.razor.rz.scp.css */
/* Stockpile Setup Styles */

.stockpile-table[b-irf2phfy2y] {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.stockpile-table thead[b-irf2phfy2y] {
    background: rgba(255, 255, 255, 0.04);
}

.stockpile-table thead th[b-irf2phfy2y] {
    border-bottom: 1px solid rgba(212, 165, 116, 0.15);
    padding: 0.75rem;
    font-size: 0.813rem;
    font-weight: 700;
    color: #d4a574;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.stockpile-table tbody tr[b-irf2phfy2y] {
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stockpile-table tbody tr:hover[b-irf2phfy2y] {
    background: rgba(212, 165, 116, 0.06);
}

.stockpile-table tbody td[b-irf2phfy2y] {
    padding: 0.75rem;
    font-size: 0.875rem;
    vertical-align: middle;
}

/* Stockpile Code Badge */
.stockpile-code[b-irf2phfy2y] {
    font-size: 0.75rem;
    color: #d4a574;
    font-family: 'Consolas', 'Courier New', monospace;
    background: rgba(212, 165, 116, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

/* Fill Level Indicator */
.fill-indicator[b-irf2phfy2y] {
    position: relative;
    width: 100px;
    height: 24px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-block;
}

.fill-bar[b-irf2phfy2y] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.fill-indicator.fill-critical .fill-bar[b-irf2phfy2y] {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.fill-indicator.fill-low .fill-bar[b-irf2phfy2y] {
    background: linear-gradient(90deg, #f39c12, #e67e22);
}

.fill-indicator.fill-good .fill-bar[b-irf2phfy2y] {
    background: linear-gradient(90deg, #27ae60, #229954);
}

.fill-indicator.fill-high .fill-bar[b-irf2phfy2y] {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.fill-text[b-irf2phfy2y] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}

/* Modal Styling */
.modal-header[b-irf2phfy2y] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-header .modal-title[b-irf2phfy2y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-header .btn-close[b-irf2phfy2y] {
    filter: brightness(0) invert(1);
}

/* Responsive */
@media (max-width: 768px) {
    .fill-indicator[b-irf2phfy2y] {
        width: 80px;
        height: 20px;
    }

    .stockpile-table[b-irf2phfy2y] {
        font-size: 0.813rem;
    }

    .stockpile-table thead th[b-irf2phfy2y],
    .stockpile-table tbody td[b-irf2phfy2y] {
        padding: 0.5rem;
    }
}
/* /Components/Pages/Setup/UserAdministration.razor.rz.scp.css */
.user-administration[b-s3feqeh9to] {
    padding: 1.5rem;
}

/* Tabs */
.nav-tabs .nav-link[b-s3feqeh9to] {
    color: var(--bs-secondary);
}

.nav-tabs .nav-link.active[b-s3feqeh9to] {
    color: var(--bs-primary);
    font-weight: 500;
}

.nav-tabs .nav-link .badge[b-s3feqeh9to] {
    font-size: 0.7rem;
}

/* User Avatar */
.user-avatar[b-s3feqeh9to] {
    color: var(--bs-secondary);
}

.user-avatar i[b-s3feqeh9to] {
    font-size: 2rem;
}

/* Table */
.table th[b-s3feqeh9to] {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table-hover tbody tr:hover[b-s3feqeh9to] {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* Role Cards */
.card[b-s3feqeh9to] {
    border: 1px solid var(--bs-border-color);
}

.card-header[b-s3feqeh9to] {
    background-color: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.list-group-item[b-s3feqeh9to] {
    border-left: none;
    border-right: none;
}

.list-group-item:first-child[b-s3feqeh9to] {
    border-top: none;
}

.list-group-item:last-child[b-s3feqeh9to] {
    border-bottom: none;
}

/* Modals */
.modal-lg[b-s3feqeh9to] {
    max-width: 800px;
}

.modal-body .card[b-s3feqeh9to] {
    margin-bottom: 0;
}

.modal-body .card-header[b-s3feqeh9to] {
    padding: 0.5rem 0.75rem;
}

.modal-body .card-body[b-s3feqeh9to] {
    max-height: 200px;
    overflow-y: auto;
}

/* Form Elements */
.form-check-label[b-s3feqeh9to] {
    font-size: 0.9rem;
}

/* Audit Log */
.table-sm td[b-s3feqeh9to] {
    padding: 0.5rem;
    vertical-align: middle;
}

/* Access List */
.list-group-item[b-s3feqeh9to] {
    padding: 0.75rem 1rem;
}

/* Badges */
.badge[b-s3feqeh9to] {
    font-weight: 500;
}

/* Button Groups */
.btn-group-sm .btn[b-s3feqeh9to] {
    padding: 0.25rem 0.5rem;
}

/* Status indicators */
.table-secondary[b-s3feqeh9to] {
    opacity: 0.7;
}

/* Password Display */
.font-monospace[b-s3feqeh9to] {
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .user-administration[b-s3feqeh9to] {
        padding: 1rem;
    }

    .table-responsive[b-s3feqeh9to] {
        font-size: 0.9rem;
    }

    .btn-group-sm .btn[b-s3feqeh9to] {
        padding: 0.2rem 0.35rem;
    }

    .modal-lg[b-s3feqeh9to] {
        max-width: 95%;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .card-header[b-s3feqeh9to] {
        background-color: var(--bs-dark);
    }

    .table-light[b-s3feqeh9to] {
        background-color: var(--bs-gray-800);
    }
}
/* /Components/Pages/Shifts/DailyPlanner.razor.rz.scp.css */
.daily-planner[b-x94ryrc1td] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.planner-header[b-x94ryrc1td] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    color: white;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
}

.header-content[b-x94ryrc1td] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.header-left[b-x94ryrc1td] {
    flex: 1;
}

.page-title[b-x94ryrc1td] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-title i[b-x94ryrc1td] {
    color: #d4a574;
}

.page-subtitle[b-x94ryrc1td] {
    margin: 0.25rem 0 0 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
}

.header-right[b-x94ryrc1td] {
    min-width: 300px;
}

/* Date Navigation */
.date-navigation[b-x94ryrc1td] {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-icon[b-x94ryrc1td] {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-icon:hover[b-x94ryrc1td] {
    background: #f5f5f5;
    border-color: #667eea;
    color: #667eea;
}

.date-display[b-x94ryrc1td] {
    flex: 1;
    text-align: center;
}

.date-main[b-x94ryrc1td] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a1a;
}

.date-sub[b-x94ryrc1td] {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.25rem;
}

/* Shifts Grid */
.shifts-grid[b-x94ryrc1td] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.shift-card[b-x94ryrc1td] {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 1.5rem;
    border-left: 4px solid rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

.shift-card:hover[b-x94ryrc1td] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.shift-card.shift-pending[b-x94ryrc1td] {
    border-left-color: #ffc107;
}

.shift-card.shift-confirmed[b-x94ryrc1td] {
    border-left-color: #17a2b8;
}

.shift-card.shift-active[b-x94ryrc1td] {
    border-left-color: #28a745;
}

.shift-card.shift-completed[b-x94ryrc1td] {
    border-left-color: rgba(255,255,255,0.45);
}

.shift-card.shift-cancelled[b-x94ryrc1td] {
    border-left-color: #dc3545;
    opacity: 0.7;
}

.shift-card-header[b-x94ryrc1td] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.shift-badge[b-x94ryrc1td] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
}

.shift-badge i[b-x94ryrc1td] {
    font-size: 0.5rem;
}

.shift-status-badge[b-x94ryrc1td] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.shift-status-badge.badge-warning[b-x94ryrc1td] {
    background: rgba(234,179,8,0.08);
    color: #856404;
}

.shift-status-badge.badge-info[b-x94ryrc1td] {
    background: #d1ecf1;
    color: #0c5460;
}

.shift-status-badge.badge-success[b-x94ryrc1td] {
    background: #d4edda;
    color: #155724;
}

.shift-status-badge.badge-secondary[b-x94ryrc1td] {
    background: #e2e3e5;
    color: #383d41;
}

.shift-status-badge.badge-danger[b-x94ryrc1td] {
    background: #f8d7da;
    color: #721c24;
}

.shift-title[b-x94ryrc1td] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: #1a1a1a;
}

.shift-details[b-x94ryrc1td] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.detail-item[b-x94ryrc1td] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #666;
    font-size: 0.9rem;
}

.detail-item i[b-x94ryrc1td] {
    color: #667eea;
    font-size: 1rem;
}

.shift-actions[b-x94ryrc1td] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Empty State */
.empty-state[b-x94ryrc1td] {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.empty-state-icon[b-x94ryrc1td] {
    font-size: 4rem;
    color: rgba(255,255,255,0.2);
    margin-bottom: 1rem;
}

.empty-state h3[b-x94ryrc1td] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.empty-state p[b-x94ryrc1td] {
    color: #666;
    margin-bottom: 2rem;
}

.empty-state-actions[b-x94ryrc1td] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Loading State */
.loading-state[b-x94ryrc1td] {
    text-align: center;
    padding: 4rem 2rem;
}

/* Preview Card */
.preview-card[b-x94ryrc1td] {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-top: 2rem;
}

.preview-header[b-x94ryrc1td] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.preview-header i[b-x94ryrc1td] {
    color: #667eea;
}

.preview-date[b-x94ryrc1td] {
    margin-left: auto;
    color: #666;
    font-weight: normal;
}

.preview-content[b-x94ryrc1td] {
    padding-left: 2rem;
}

.preview-success[b-x94ryrc1td],
.preview-warning[b-x94ryrc1td] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.preview-success[b-x94ryrc1td] {
    color: #28a745;
}

.preview-warning[b-x94ryrc1td] {
    color: #ffc107;
}

/* Responsive */
@media (max-width: 768px) {
    .daily-planner[b-x94ryrc1td] {
        padding: 1rem;
    }

    .planner-header[b-x94ryrc1td] {
        padding: 1.5rem;
    }

    .header-content[b-x94ryrc1td] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-title[b-x94ryrc1td] {
        font-size: 1.5rem;
    }

    .shifts-grid[b-x94ryrc1td] {
        grid-template-columns: 1fr;
    }

    .date-navigation[b-x94ryrc1td] {
        flex-wrap: wrap;
    }
}

/* Patterns List in Modal */
.patterns-list[b-x94ryrc1td] {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
}

.pattern-item[b-x94ryrc1td] {
    padding: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pattern-item:last-child[b-x94ryrc1td] {
    border-bottom: none;
}

.pattern-item:hover[b-x94ryrc1td] {
    background: rgba(255,255,255,0.04);
}

.pattern-item.selected[b-x94ryrc1td] {
    background: #e3f2fd;
    border-left: 4px solid #667eea;
}

.pattern-info h6[b-x94ryrc1td] {
    margin: 0 0 0.25rem 0;
    font-weight: 600;
}
/* /Components/Pages/Shifts/MonthlyShiftPlanner.razor.rz.scp.css */
.monthly-planner[b-s7jivw2fed] {
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* Header - Shared styling */
.planner-header[b-s7jivw2fed] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    color: white;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
}

.header-content[b-s7jivw2fed] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.header-left[b-s7jivw2fed] {
    flex: 1;
}

.page-title[b-s7jivw2fed] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-title i[b-s7jivw2fed] {
    color: #d4a574;
}

.page-subtitle[b-s7jivw2fed] {
    margin: 0.25rem 0 0 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
}

.header-right[b-s7jivw2fed] {
    min-width: 300px;
}

/* Month Navigation */
.month-navigation[b-s7jivw2fed] {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-icon[b-s7jivw2fed] {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-icon:hover[b-s7jivw2fed] {
    background: #f5f5f5;
    border-color: #667eea;
    color: #667eea;
}

.month-display[b-s7jivw2fed] {
    flex: 1;
    text-align: center;
}

.month-main[b-s7jivw2fed] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a1a;
}

.month-sub[b-s7jivw2fed] {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.25rem;
}

/* Month Stats */
.month-stats[b-s7jivw2fed] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card[b-s7jivw2fed] {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

.stat-card:hover[b-s7jivw2fed] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.stat-icon[b-s7jivw2fed] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 1.5rem;
}

.stat-icon-warning[b-s7jivw2fed] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon-success[b-s7jivw2fed] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon-info[b-s7jivw2fed] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-value[b-s7jivw2fed] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.stat-label[b-s7jivw2fed] {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.25rem;
}

/* Calendar Card */
.calendar-card[b-s7jivw2fed] {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

/* Calendar Grid */
.calendar-grid[b-s7jivw2fed] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.calendar-day-header[b-s7jivw2fed] {
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 1rem 0.5rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calendar-day-header.is-weekend[b-s7jivw2fed] {
    color: #999;
}

.calendar-day[b-s7jivw2fed] {
    aspect-ratio: 1;
    min-height: 100px;
    padding: 0.75rem;
    border: 2px solid #f0f0f0;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}

.calendar-day:hover[b-s7jivw2fed] {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.calendar-day-empty[b-s7jivw2fed] {
    background: rgba(255,255,255,0.04);
    cursor: default;
    border-color: transparent;
}

.calendar-day-empty:hover[b-s7jivw2fed] {
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.calendar-day.is-today[b-s7jivw2fed] {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.calendar-day.is-weekend[b-s7jivw2fed] {
    background: rgba(255,255,255,0.04);
}

.day-number[b-s7jivw2fed] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.is-today .day-number[b-s7jivw2fed] {
    color: #667eea;
}

.day-shifts-summary[b-s7jivw2fed] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shift-dots[b-s7jivw2fed] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: center;
}

.shift-dot[b-s7jivw2fed] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.shift-dot.status-warning[b-s7jivw2fed] {
    background: #ffc107;
}

.shift-dot.status-info[b-s7jivw2fed] {
    background: #17a2b8;
}

.shift-dot.status-success[b-s7jivw2fed] {
    background: #28a745;
}

.shift-dot.status-secondary[b-s7jivw2fed] {
    background: #6c757d;
}

.shift-more[b-s7jivw2fed] {
    font-size: 0.7rem;
    color: #666;
    margin-left: 0.25rem;
}

.no-shifts-text[b-s7jivw2fed] {
    font-size: 0.75rem;
    color: #999;
    text-align: center;
}

/* Month Actions */
.month-actions[b-s7jivw2fed] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Empty State */
.empty-state[b-s7jivw2fed] {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.empty-state-icon[b-s7jivw2fed] {
    font-size: 4rem;
    color: rgba(255,255,255,0.2);
    margin-bottom: 1rem;
}

.empty-state h3[b-s7jivw2fed] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.empty-state p[b-s7jivw2fed] {
    color: #666;
}

/* Loading State */
.loading-state[b-s7jivw2fed] {
    text-align: center;
    padding: 4rem 2rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .calendar-day[b-s7jivw2fed] {
        min-height: 80px;
    }
}

@media (max-width: 768px) {
    .monthly-planner[b-s7jivw2fed] {
        padding: 1rem;
    }

    .planner-header[b-s7jivw2fed] {
        padding: 1.5rem;
    }

    .header-content[b-s7jivw2fed] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-title[b-s7jivw2fed] {
        font-size: 1.5rem;
    }

    .calendar-grid[b-s7jivw2fed] {
        gap: 4px;
    }

    .calendar-day[b-s7jivw2fed] {
        min-height: 60px;
        padding: 0.5rem;
    }

    .day-number[b-s7jivw2fed] {
        font-size: 1rem;
    }

    .month-stats[b-s7jivw2fed] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Shifts/PatternCreate.razor.rz.scp.css */
.pattern-editor[b-av2qe14d2y] {
    min-height: 100vh;
}

.editor-header[b-av2qe14d2y] {
    background: rgba(212, 165, 116, 0.06);
    border-bottom: 1px solid var(--mp-accent-border);
    padding: 1.5rem 2rem;
    color: var(--mp-text);
}

.header-content[b-av2qe14d2y] {
    max-width: 1200px;
    margin: 0 auto;
}

.back-link[b-av2qe14d2y] {
    color: var(--mp-accent-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    opacity: 0.8;
    transition: opacity 0.2s;
    font-size: 0.85rem;
}

.back-link:hover[b-av2qe14d2y] {
    opacity: 1;
    color: #e0b588;
}

.editor-header h1[b-av2qe14d2y] {
    margin: 0 0 0.25rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mp-text-heading);
}

.editor-container[b-av2qe14d2y] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Progress Steps */
.progress-steps[b-av2qe14d2y] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
    position: relative;
}

.progress-steps[b-av2qe14d2y]::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--mp-border);
    z-index: 0;
}

.step[b-av2qe14d2y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    z-index: 1;
}

.step-number[b-av2qe14d2y] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mp-bg-surface);
    border: 2px solid var(--mp-border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 0.5rem;
    transition: all 0.3s;
    color: var(--mp-text-muted);
}

.step-label[b-av2qe14d2y] {
    font-size: 0.9rem;
    color: var(--mp-text-faint);
    text-align: center;
}

.step.active .step-number[b-av2qe14d2y] {
    background: rgba(212, 165, 116, 0.2);
    border-color: #d4a574;
    color: #d4a574;
}

.step.completed .step-number[b-av2qe14d2y] {
    background: rgba(74, 222, 128, 0.15);
    border-color: #4ade80;
    color: #4ade80;
}

.step.active .step-label[b-av2qe14d2y],
.step.completed .step-label[b-av2qe14d2y] {
    color: var(--mp-text);
    font-weight: 600;
}

/* Step Content */
.step-content[b-av2qe14d2y] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.step-content h3[b-av2qe14d2y] {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mp-text-heading);
}

.step-content > p[b-av2qe14d2y] {
    color: var(--mp-text-muted);
    margin-bottom: 2rem;
}

/* Form Groups */
.form-group[b-av2qe14d2y] {
    margin-bottom: 1.5rem;
}

.form-group label[b-av2qe14d2y] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--mp-text-secondary);
}

/* Shift Definition Cards */
.shift-definition-card[b-av2qe14d2y] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.shift-definition-card .card-header[b-av2qe14d2y] {
    background: var(--mp-bg-elevated);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--mp-border);
}

.shift-definition-card .card-header h5[b-av2qe14d2y] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mp-text-heading);
}

.shift-definition-card .card-body[b-av2qe14d2y] {
    padding: 1rem;
}

/* Weekly Pattern Grid */
.weekly-pattern-grid[b-av2qe14d2y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.day-config-card[b-av2qe14d2y] {
    background: var(--mp-bg-surface);
    border: 2px solid var(--mp-border-medium);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.2s;
}

.day-config-card:hover[b-av2qe14d2y] {
    border-color: rgba(212, 165, 116, 0.3);
}

.day-config-card.weekend[b-av2qe14d2y] {
    background: var(--mp-bg-elevated);
    border-style: dashed;
}

.day-config-card h5[b-av2qe14d2y] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    color: var(--mp-text-secondary);
}

.shift-checkboxes[b-av2qe14d2y] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.shift-time-badge[b-av2qe14d2y] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    color: white;
    margin-left: 0.5rem;
}

/* Quick Actions */
.quick-actions[b-av2qe14d2y] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--mp-border);
}

/* Teams Section */
.teams-section[b-av2qe14d2y] {
    margin-bottom: 2rem;
}

.team-card[b-av2qe14d2y] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.team-header[b-av2qe14d2y] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.team-header input[type="text"][b-av2qe14d2y] {
    flex: 1;
}

.team-header .color-input[b-av2qe14d2y] {
    width: 60px;
    height: 38px;
    padding: 0.25rem;
}

.team-employees label[b-av2qe14d2y] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--mp-text-secondary);
}

.rotation-config[b-av2qe14d2y] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    padding: 1.5rem;
    border-radius: 8px;
}

.rotation-config h5[b-av2qe14d2y] {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mp-text-heading);
}

/* Editor Actions */
.editor-actions[b-av2qe14d2y] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--mp-border);
}

.editor-actions .btn[b-av2qe14d2y] {
    min-width: 120px;
}

/* Responsive */
@media (max-width: 768px) {
    .editor-container[b-av2qe14d2y] {
        padding: 1rem;
    }

    .progress-steps[b-av2qe14d2y] {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .step-label[b-av2qe14d2y] {
        display: none;
    }

    .weekly-pattern-grid[b-av2qe14d2y] {
        grid-template-columns: repeat(2, 1fr);
    }

    .editor-actions[b-av2qe14d2y] {
        flex-direction: column;
    }

    .editor-actions .btn[b-av2qe14d2y] {
        width: 100%;
    }
}

/* Monthly Pattern Styles */
.monthly-pattern-section[b-av2qe14d2y] {
    margin-bottom: 2rem;
}

.monthly-day-card[b-av2qe14d2y] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.day-header[b-av2qe14d2y] {
    display: flex;
    gap: 0.5rem;
    align-items: end;
    margin-bottom: 1rem;
}

.day-header label[b-av2qe14d2y] {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--mp-text-secondary);
}

.day-header input[type="number"][b-av2qe14d2y] {
    width: 100px;
}

.shift-selection[b-av2qe14d2y] {
    padding: 1rem;
    background: var(--mp-bg-elevated);
    border: 1px solid var(--mp-border);
    border-radius: 6px;
}

.shift-selection label:first-child[b-av2qe14d2y] {
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: block;
    color: var(--mp-text-secondary);
}

.weekend-section[b-av2qe14d2y] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    padding: 1.5rem;
    border-radius: 8px;
}

/* Custom Pattern Styles */
.custom-schedule[b-av2qe14d2y] {
    margin-top: 2rem;
}

.custom-day-card[b-av2qe14d2y] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.day-info[b-av2qe14d2y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mp-border);
}

/* Team Rotation Disabled Hint */
.team-rotation-disabled-hint[b-av2qe14d2y] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(212, 165, 116, 0.06);
    border: 1px solid rgba(212, 165, 116, 0.15);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.team-rotation-disabled-hint i[b-av2qe14d2y] {
    color: var(--mp-accent-text);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.team-rotation-disabled-hint p[b-av2qe14d2y] {
    margin-bottom: 0.5rem;
    color: var(--mp-text-secondary);
}

.team-rotation-disabled-hint p:last-child[b-av2qe14d2y] {
    margin-bottom: 0;
}
/* /Components/Pages/Shifts/PatternEdit.razor.rz.scp.css */
.pattern-editor[b-1bdm7u645k] {
    min-height: 100vh;
}

.editor-header[b-1bdm7u645k] {
    background: rgba(212, 165, 116, 0.06);
    border-bottom: 1px solid var(--mp-accent-border);
    padding: 1.5rem 2rem;
    color: var(--mp-text);
}

.header-content[b-1bdm7u645k] {
    max-width: 1200px;
    margin: 0 auto;
}

.back-link[b-1bdm7u645k] {
    color: var(--mp-accent-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    opacity: 0.8;
    transition: opacity 0.2s;
    font-size: 0.85rem;
}

.back-link:hover[b-1bdm7u645k] {
    opacity: 1;
    color: #e0b588;
}

.editor-header h1[b-1bdm7u645k] {
    margin: 0 0 0.25rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mp-text-heading);
}

.editor-container[b-1bdm7u645k] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Progress Steps */
.progress-steps[b-1bdm7u645k] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
    position: relative;
}

.progress-steps[b-1bdm7u645k]::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--mp-border);
    z-index: 0;
}

.step[b-1bdm7u645k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    z-index: 1;
}

.step-number[b-1bdm7u645k] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mp-bg-surface);
    border: 2px solid var(--mp-border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 0.5rem;
    transition: all 0.3s;
    color: var(--mp-text-muted);
}

.step-label[b-1bdm7u645k] {
    font-size: 0.9rem;
    color: var(--mp-text-faint);
    text-align: center;
}

.step.active .step-number[b-1bdm7u645k] {
    background: rgba(212, 165, 116, 0.2);
    border-color: #d4a574;
    color: #d4a574;
}

.step.completed .step-number[b-1bdm7u645k] {
    background: rgba(74, 222, 128, 0.15);
    border-color: #4ade80;
    color: #4ade80;
}

.step.active .step-label[b-1bdm7u645k],
.step.completed .step-label[b-1bdm7u645k] {
    color: var(--mp-text);
    font-weight: 600;
}

/* Step Content */
.step-content[b-1bdm7u645k] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.step-content h3[b-1bdm7u645k] {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mp-text-heading);
}

.step-content > p[b-1bdm7u645k] {
    color: var(--mp-text-muted);
    margin-bottom: 2rem;
}

/* Form Groups */
.form-group[b-1bdm7u645k] {
    margin-bottom: 1.5rem;
}

.form-group label[b-1bdm7u645k] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--mp-text-secondary);
}

/* Shift Definition Cards */
.shift-definition-card[b-1bdm7u645k] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.shift-definition-card .card-header[b-1bdm7u645k] {
    background: var(--mp-bg-elevated);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--mp-border);
}

.shift-definition-card .card-header h5[b-1bdm7u645k] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mp-text-heading);
}

.shift-definition-card .card-body[b-1bdm7u645k] {
    padding: 1rem;
}

/* Weekly Pattern Grid */
.weekly-pattern-grid[b-1bdm7u645k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.day-config-card[b-1bdm7u645k] {
    background: var(--mp-bg-surface);
    border: 2px solid var(--mp-border-medium);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.2s;
}

.day-config-card:hover[b-1bdm7u645k] {
    border-color: rgba(212, 165, 116, 0.3);
}

.day-config-card.weekend[b-1bdm7u645k] {
    background: var(--mp-bg-elevated);
    border-style: dashed;
}

.day-config-card h5[b-1bdm7u645k] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    color: var(--mp-text-secondary);
}

.shift-checkboxes[b-1bdm7u645k] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.shift-time-badge[b-1bdm7u645k] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    color: white;
    margin-left: 0.5rem;
}

/* Quick Actions */
.quick-actions[b-1bdm7u645k] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--mp-border);
}

/* Teams Section */
.teams-section[b-1bdm7u645k] {
    margin-bottom: 2rem;
}

.team-card[b-1bdm7u645k] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.team-header[b-1bdm7u645k] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.team-header input[type="text"][b-1bdm7u645k] {
    flex: 1;
}

.team-header .color-input[b-1bdm7u645k] {
    width: 60px;
    height: 38px;
    padding: 0.25rem;
}

.team-employees label[b-1bdm7u645k] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--mp-text-secondary);
}

.rotation-config[b-1bdm7u645k] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    padding: 1.5rem;
    border-radius: 8px;
}

.rotation-config h5[b-1bdm7u645k] {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mp-text-heading);
}

/* Editor Actions */
.editor-actions[b-1bdm7u645k] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--mp-border);
}

.editor-actions .btn[b-1bdm7u645k] {
    min-width: 120px;
}

/* Responsive */
@media (max-width: 768px) {
    .editor-container[b-1bdm7u645k] {
        padding: 1rem;
    }

    .progress-steps[b-1bdm7u645k] {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .step-label[b-1bdm7u645k] {
        display: none;
    }

    .weekly-pattern-grid[b-1bdm7u645k] {
        grid-template-columns: repeat(2, 1fr);
    }

    .editor-actions[b-1bdm7u645k] {
        flex-direction: column;
    }

    .editor-actions .btn[b-1bdm7u645k] {
        width: 100%;
    }
}

/* Monthly Pattern Styles */
.monthly-pattern-section[b-1bdm7u645k] {
    margin-bottom: 2rem;
}

.monthly-day-card[b-1bdm7u645k] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.day-header[b-1bdm7u645k] {
    display: flex;
    gap: 0.5rem;
    align-items: end;
    margin-bottom: 1rem;
}

.day-header label[b-1bdm7u645k] {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--mp-text-secondary);
}

.day-header input[type="number"][b-1bdm7u645k] {
    width: 100px;
}

.shift-selection[b-1bdm7u645k] {
    padding: 1rem;
    background: var(--mp-bg-elevated);
    border: 1px solid var(--mp-border);
    border-radius: 6px;
}

.shift-selection label:first-child[b-1bdm7u645k] {
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: block;
    color: var(--mp-text-secondary);
}

.weekend-section[b-1bdm7u645k] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    padding: 1.5rem;
    border-radius: 8px;
}

/* Custom Pattern Styles */
.custom-schedule[b-1bdm7u645k] {
    margin-top: 2rem;
}

.custom-day-card[b-1bdm7u645k] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.day-info[b-1bdm7u645k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mp-border);
}
/* /Components/Pages/Shifts/PatternLibrary.razor.rz.scp.css */
.patterns-planner[b-69218k8aua] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.planner-header[b-69218k8aua] {
    background: rgba(212, 165, 116, 0.06);
    border: 1px solid rgba(212, 165, 116, 0.12);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
}

.header-content[b-69218k8aua] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.header-left[b-69218k8aua] {
    flex: 1;
}

.page-title[b-69218k8aua] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--mp-text-heading);
}

.page-title i[b-69218k8aua] {
    color: var(--mp-accent-text);
}

.page-subtitle[b-69218k8aua] {
    margin: 0;
    color: var(--mp-text-muted);
    font-size: 0.85rem;
}

.header-right[b-69218k8aua] {
    min-width: 300px;
}

/* Actions */
.patterns-actions[b-69218k8aua] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

/* Patterns List */
.patterns-grid[b-69218k8aua] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.pattern-card[b-69218k8aua] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    padding: 1.5rem;
    transition: all 0.2s;
    border-left: 4px solid var(--mp-accent);
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    gap: 0 2rem;
    align-items: start;
}

.pattern-card:hover[b-69218k8aua] {
    background: var(--mp-bg-hover);
    border-color: var(--mp-accent-border);
}

.pattern-card.pattern-inactive[b-69218k8aua] {
    opacity: 0.5;
    border-left-color: var(--mp-border-medium);
}

.pattern-header[b-69218k8aua] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0;
    grid-column: 1;
    grid-row: 1;
}

.pattern-title h3[b-69218k8aua] {
    margin: 0 0 0.5rem 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--mp-text-heading);
}

.pattern-type-badge[b-69218k8aua] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pattern-type-badge.badge-weekly[b-69218k8aua] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.pattern-type-badge.badge-monthly[b-69218k8aua] {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
}

.pattern-type-badge.badge-custom[b-69218k8aua] {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

.pattern-details[b-69218k8aua] {
    margin-bottom: 0;
    grid-column: 1;
    grid-row: 2;
}

.detail-row[b-69218k8aua] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--mp-text-secondary);
}

.detail-row i[b-69218k8aua] {
    color: var(--mp-accent-text);
}

/* Week Preview */
.pattern-preview[b-69218k8aua] {
    margin-bottom: 0;
    padding: 1rem;
    background: var(--mp-bg-elevated);
    border-radius: 8px;
    border: 1px solid var(--mp-border);
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    min-width: 280px;
}

.week-preview[b-69218k8aua] {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.day-preview[b-69218k8aua] {
    flex: 1;
    text-align: center;
    padding: 0.5rem;
    border-radius: 6px;
    background: var(--mp-bg-surface);
}

.day-preview.has-shifts[b-69218k8aua] {
    background: rgba(212, 165, 116, 0.1);
}

.day-preview.no-shifts[b-69218k8aua] {
    opacity: 0.35;
}

.day-name[b-69218k8aua] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mp-text-muted);
    margin-bottom: 0.25rem;
}

.shift-dots[b-69218k8aua] {
    display: flex;
    gap: 2px;
    justify-content: center;
}

.shift-dot[b-69218k8aua] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d4a574;
}

.shift-more[b-69218k8aua] {
    font-size: 0.6rem;
    color: var(--mp-text-muted);
}

/* Pattern Actions */
.pattern-actions[b-69218k8aua] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: center;
    flex-direction: column;
}

/* Pattern Type Selection Modal */
.pattern-type-cards[b-69218k8aua] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.pattern-type-card[b-69218k8aua] {
    padding: 1.5rem;
    border: 2px solid var(--mp-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    background: var(--mp-bg-surface);
}

.pattern-type-card:hover[b-69218k8aua] {
    border-color: rgba(212, 165, 116, 0.4);
    background: rgba(212, 165, 116, 0.06);
}

.pattern-type-icon[b-69218k8aua] {
    font-size: 3rem;
    color: var(--mp-accent-text);
    margin-bottom: 1rem;
}

.pattern-type-card h4[b-69218k8aua] {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mp-text-heading);
}

.pattern-type-card > p[b-69218k8aua] {
    color: var(--mp-text-muted);
    margin-bottom: 1rem;
}

.pattern-type-card ul[b-69218k8aua] {
    text-align: left;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.pattern-type-card li[b-69218k8aua] {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--mp-text-secondary);
}

.pattern-example[b-69218k8aua] {
    background: var(--mp-bg-elevated);
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: left;
    margin-top: 1rem;
    color: var(--mp-text-secondary);
}

.pattern-example strong[b-69218k8aua] {
    color: var(--mp-accent-text);
}

/* Responsive: stack card content vertically on small screens */
@media (max-width: 992px) {
    .pattern-card[b-69218k8aua] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1rem 0;
    }

    .pattern-header[b-69218k8aua],
    .pattern-details[b-69218k8aua],
    .pattern-preview[b-69218k8aua],
    .pattern-actions[b-69218k8aua] {
        grid-column: 1;
        grid-row: auto;
    }

    .pattern-preview[b-69218k8aua] {
        min-width: unset;
    }

    .pattern-actions[b-69218k8aua] {
        flex-direction: row;
    }
}

/* Empty State */
.empty-state[b-69218k8aua] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 12px;
}

.empty-state-icon[b-69218k8aua] {
    font-size: 4rem;
    color: var(--mp-text-faint);
    margin-bottom: 1rem;
}

.empty-state h3[b-69218k8aua] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--mp-text-heading);
}

.empty-state p[b-69218k8aua] {
    color: var(--mp-text-muted);
}

/* Loading State */
.loading-state[b-69218k8aua] {
    text-align: center;
    padding: 4rem 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .patterns-planner[b-69218k8aua] {
        padding: 1rem;
    }

    .planner-header[b-69218k8aua] {
        padding: 1.5rem;
    }

    .header-content[b-69218k8aua] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-title[b-69218k8aua] {
        font-size: 1.5rem;
    }

    .patterns-grid[b-69218k8aua] {
        grid-template-columns: 1fr;
    }

    .pattern-type-cards[b-69218k8aua] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Shifts/ShiftCalendar.razor.rz.scp.css */
/* ===== Shift Calendar ===== */
/* Bronze theme (#d4a574) with dark backgrounds */

.shift-calendar[b-m6sawypf6f] {
    min-height: 100vh;
    background: var(--mp-bg-page);
    color: var(--mp-text);
}

/* ===== Header ===== */
.calendar-header[b-m6sawypf6f] {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.15) 0%, rgba(212, 165, 116, 0.05) 100%);
    border-bottom: 1px solid rgba(212, 165, 116, 0.2);
    padding: 1.5rem 2rem;
}

.header-content[b-m6sawypf6f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.header-left .page-title[b-m6sawypf6f] {
    color: var(--mp-text-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-left .page-title i[b-m6sawypf6f] {
    color: var(--mp-accent-text);
}

.header-left .page-subtitle[b-m6sawypf6f] {
    color: var(--mp-text-muted);
    margin: 0.25rem 0 0 0;
    font-size: 0.85rem;
}

/* ===== Empty State ===== */
.empty-state[b-m6sawypf6f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    padding: 3rem;
}

.empty-state-icon[b-m6sawypf6f] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(212, 165, 116, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.empty-state-icon i[b-m6sawypf6f] {
    font-size: 3rem;
    color: #d4a574;
}

.empty-state h3[b-m6sawypf6f] {
    color: var(--mp-text-heading);
    margin-bottom: 0.5rem;
}

.empty-state p[b-m6sawypf6f] {
    color: var(--mp-text-muted);
    max-width: 400px;
}

/* ===== Toolbar ===== */
.calendar-toolbar[b-m6sawypf6f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--mp-bg-elevated);
    border-bottom: 1px solid var(--mp-border);
    flex-wrap: wrap;
    gap: 1rem;
}

/* View Toggle */
.view-toggle[b-m6sawypf6f] {
    display: flex;
    background: var(--mp-bg-surface);
    border-radius: 8px;
    padding: 4px;
    border: 1px solid var(--mp-border);
}

.view-btn[b-m6sawypf6f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: var(--mp-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.view-btn:hover[b-m6sawypf6f] {
    color: #d4a574;
    background: rgba(212, 165, 116, 0.1);
}

.view-btn.active[b-m6sawypf6f] {
    background: rgba(212, 165, 116, 0.2);
    color: #d4a574;
}

.view-btn i[b-m6sawypf6f] {
    font-size: 1rem;
}

/* Date Navigation */
.date-navigation[b-m6sawypf6f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-icon[b-m6sawypf6f] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    color: var(--mp-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-m6sawypf6f] {
    background: rgba(212, 165, 116, 0.15);
    border-color: rgba(212, 165, 116, 0.3);
    color: #d4a574;
}

.date-display[b-m6sawypf6f] {
    text-align: center;
    padding: 0.5rem 1rem;
    min-width: 180px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.date-display:hover[b-m6sawypf6f] {
    background: rgba(212, 165, 116, 0.1);
}

.date-main[b-m6sawypf6f] {
    color: var(--mp-text-heading);
    font-size: 1.1rem;
    font-weight: 600;
}

.date-sub[b-m6sawypf6f] {
    color: var(--mp-text-muted);
    font-size: 0.8rem;
}

.btn-today[b-m6sawypf6f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid rgba(212, 165, 116, 0.3);
    color: #d4a574;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 0.5rem;
}

.btn-today:hover[b-m6sawypf6f] {
    background: rgba(212, 165, 116, 0.15);
}

/* Calendar Actions */
.calendar-actions[b-m6sawypf6f] {
    display: flex;
    gap: 0.75rem;
}

.calendar-actions .btn-primary[b-m6sawypf6f] {
    background: linear-gradient(135deg, #d4a574 0%, #c49a6c 100%);
    border: none;
    color: #1a1a2e;
    font-weight: 500;
}

.calendar-actions .btn-primary:hover[b-m6sawypf6f] {
    background: linear-gradient(135deg, #e0b584 0%, #d4a574 100%);
}

.calendar-actions .btn-outline-secondary[b-m6sawypf6f] {
    border-color: var(--mp-border-medium);
    color: var(--mp-text-secondary);
}

.calendar-actions .btn-outline-secondary:hover[b-m6sawypf6f] {
    background: var(--mp-bg-hover);
    border-color: var(--mp-border-medium);
    color: var(--mp-text-heading);
}

/* ===== Loading State ===== */
.loading-state[b-m6sawypf6f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}

.loading-state .spinner-border[b-m6sawypf6f] {
    color: #d4a574;
}

/* ===== Day View ===== */
.day-view[b-m6sawypf6f] {
    padding: 1.5rem 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.shifts-timeline[b-m6sawypf6f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timeline-shift[b-m6sawypf6f] {
    display: flex;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.timeline-shift:hover[b-m6sawypf6f] {
    border-color: rgba(212, 165, 116, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.shift-time-block[b-m6sawypf6f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    min-width: 80px;
    background: rgba(212, 165, 116, 0.1);
    border-right: 1px solid rgba(212, 165, 116, 0.2);
}

.time-start[b-m6sawypf6f], .time-end[b-m6sawypf6f] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #d4a574;
}

.time-divider[b-m6sawypf6f] {
    width: 2px;
    height: 20px;
    background: rgba(212, 165, 116, 0.3);
    margin: 0.25rem 0;
}

.shift-content[b-m6sawypf6f] {
    flex: 1;
    padding: 1rem 1.25rem;
}

.shift-header-row[b-m6sawypf6f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.shift-badge[b-m6sawypf6f] {
    background: rgba(212, 165, 116, 0.2);
    color: #d4a574;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.shift-status[b-m6sawypf6f] {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-warning[b-m6sawypf6f] { background: rgba(241, 196, 15, 0.2); color: #f1c40f; }
.badge-info[b-m6sawypf6f] { background: rgba(52, 152, 219, 0.2); color: #60a5fa; }
.badge-success[b-m6sawypf6f] { background: rgba(46, 204, 113, 0.2); color: #2ecc71; }
.badge-secondary[b-m6sawypf6f] { background: rgba(149, 165, 166, 0.2); color: #95a5a6; }
.badge-danger[b-m6sawypf6f] { background: rgba(231, 76, 60, 0.2); color: #e74c3c; }

.shift-title[b-m6sawypf6f] {
    color: var(--mp-text-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.shift-meta[b-m6sawypf6f] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.meta-item[b-m6sawypf6f] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--mp-text-muted);
    font-size: 0.85rem;
}

.meta-item i[b-m6sawypf6f] {
    color: var(--mp-accent-text);
    opacity: 0.7;
}

.shift-actions[b-m6sawypf6f] {
    display: flex;
    gap: 0.5rem;
}

.shift-actions .btn-sm[b-m6sawypf6f] {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

.shift-actions .btn-success[b-m6sawypf6f] {
    background: rgba(46, 204, 113, 0.2);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

.shift-actions .btn-success:hover[b-m6sawypf6f] {
    background: rgba(46, 204, 113, 0.3);
}

.shift-actions .btn-outline-secondary[b-m6sawypf6f] {
    border-color: var(--mp-border-medium);
    color: var(--mp-text-secondary);
}

.shift-actions .btn-outline-danger[b-m6sawypf6f] {
    border-color: rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}

/* Day Summary */
.day-summary[b-m6sawypf6f] {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    background: rgba(212, 165, 116, 0.08);
    border: 1px solid rgba(212, 165, 116, 0.15);
    border-radius: 8px;
}

.summary-item[b-m6sawypf6f] {
    display: flex;
    flex-direction: column;
}

.summary-label[b-m6sawypf6f] {
    color: var(--mp-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value[b-m6sawypf6f] {
    color: #d4a574;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Day Empty State */
.day-empty-state[b-m6sawypf6f] {
    text-align: center;
    padding: 3rem;
    background: var(--mp-bg-surface);
    border: 1px dashed var(--mp-border-medium);
    border-radius: 12px;
}

.day-empty-state .empty-icon[b-m6sawypf6f] {
    width: 80px;
    height: 80px;
    background: rgba(212, 165, 116, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.day-empty-state .empty-icon i[b-m6sawypf6f] {
    font-size: 1.5rem;
    color: #d4a574;
}

.day-empty-state h4[b-m6sawypf6f] {
    color: var(--mp-text-heading);
    margin-bottom: 0.5rem;
}

.day-empty-state p[b-m6sawypf6f] {
    color: var(--mp-text-muted);
    margin-bottom: 1.5rem;
}

.empty-actions[b-m6sawypf6f] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* Preview Card */
.preview-card[b-m6sawypf6f] {
    margin-top: 1.5rem;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    overflow: hidden;
}

.preview-header[b-m6sawypf6f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(212, 165, 116, 0.1);
    border-bottom: 1px solid rgba(212, 165, 116, 0.15);
    color: #d4a574;
    font-weight: 500;
}

.preview-date[b-m6sawypf6f] {
    margin-left: auto;
    font-size: 0.85rem;
    opacity: 0.8;
}

.preview-body[b-m6sawypf6f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
}

.preview-ok[b-m6sawypf6f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2ecc71;
}

.preview-warning[b-m6sawypf6f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #f39c12;
}

.preview-body .btn-link[b-m6sawypf6f] {
    color: #d4a574;
    text-decoration: none;
}

/* ===== Week View ===== */
.week-view[b-m6sawypf6f] {
    padding: 1.5rem 2rem;
}

.week-header[b-m6sawypf6f] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 2px;
}

.week-day-header[b-m6sawypf6f] {
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: var(--mp-bg-elevated);
    border: 1px solid var(--mp-border);
    border-radius: 8px 8px 0 0;
}

.week-day-header .day-name[b-m6sawypf6f] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mp-text-muted);
    margin-bottom: 0.25rem;
}

.week-day-header .day-number[b-m6sawypf6f] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mp-text-secondary);
    margin: 0;
}

.week-day-header.today .day-number[b-m6sawypf6f] {
    color: #d4a574;
}

.week-day-header .today-number[b-m6sawypf6f] {
    background: #d4a574;
    color: #1a1a2e;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.week-day-header.weekend[b-m6sawypf6f] {
    background: var(--mp-bg-surface);
}

.week-day-header.weekend .day-name[b-m6sawypf6f] {
    color: var(--mp-text-faint);
}

.week-grid[b-m6sawypf6f] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    min-height: 400px;
}

.week-day-column[b-m6sawypf6f] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 0 0 8px 8px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 350px;
}

.week-day-column.today[b-m6sawypf6f] {
    background: rgba(212, 165, 116, 0.08);
    border-color: rgba(212, 165, 116, 0.25);
}

.week-day-column.weekend[b-m6sawypf6f] {
    background: var(--mp-bg-elevated);
}

.week-shift[b-m6sawypf6f] {
    background: rgba(52, 152, 219, 0.15);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-left: 3px solid #3498db;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.week-shift:hover[b-m6sawypf6f] {
    background: rgba(52, 152, 219, 0.25);
    transform: translateY(-1px);
}

.week-shift.status-pending[b-m6sawypf6f] {
    background: rgba(241, 196, 15, 0.12);
    border-color: rgba(241, 196, 15, 0.25);
    border-left-color: #f1c40f;
}

.week-shift.status-confirmed[b-m6sawypf6f] {
    background: rgba(52, 152, 219, 0.12);
    border-color: rgba(52, 152, 219, 0.25);
    border-left-color: #60a5fa;
}

.week-shift.status-active[b-m6sawypf6f] {
    background: rgba(46, 204, 113, 0.12);
    border-color: rgba(46, 204, 113, 0.25);
    border-left-color: #2ecc71;
}

.week-shift.status-completed[b-m6sawypf6f] {
    background: rgba(149, 165, 166, 0.12);
    border-color: rgba(149, 165, 166, 0.25);
    border-left-color: #95a5a6;
}

.week-shift-time[b-m6sawypf6f] {
    font-size: 0.7rem;
    color: var(--mp-text-muted);
    font-weight: 500;
}

.week-shift-name[b-m6sawypf6f] {
    font-size: 0.85rem;
    color: var(--mp-text-heading);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.week-shift-duration[b-m6sawypf6f] {
    font-size: 0.7rem;
    color: var(--mp-text-muted);
}

.week-day-empty[b-m6sawypf6f] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mp-text-faint);
    font-size: 1.5rem;
    border: 2px dashed var(--mp-border);
    border-radius: 8px;
    margin: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.week-day-empty:hover[b-m6sawypf6f] {
    color: rgba(212, 165, 116, 0.4);
    border-color: rgba(212, 165, 116, 0.2);
    background: rgba(212, 165, 116, 0.05);
}

.week-summary[b-m6sawypf6f] {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    background: rgba(212, 165, 116, 0.08);
    border: 1px solid rgba(212, 165, 116, 0.15);
    border-radius: 8px;
}

/* ===== Month View =====
.month-view {
    padding: 1.5rem 2rem;
}

/* Month Stats */
.month-stats[b-m6sawypf6f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-m6sawypf6f] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    padding: 1rem;
}

.stat-icon[b-m6sawypf6f] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(212, 165, 116, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon i[b-m6sawypf6f] {
    font-size: 1.25rem;
    color: #d4a574;
}

.stat-icon.success[b-m6sawypf6f] { background: rgba(46, 204, 113, 0.15); }
.stat-icon.success i[b-m6sawypf6f] { color: #2ecc71; }
.stat-icon.warning[b-m6sawypf6f] { background: rgba(241, 196, 15, 0.15); }
.stat-icon.warning i[b-m6sawypf6f] { color: #f1c40f; }
.stat-icon.info[b-m6sawypf6f] { background: rgba(52, 152, 219, 0.15); }
.stat-icon.info i[b-m6sawypf6f] { color: #60a5fa; }

.stat-value[b-m6sawypf6f] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mp-text-heading);
}

.stat-label[b-m6sawypf6f] {
    color: var(--mp-text-muted);
    font-size: 0.8rem;
}

/* Calendar Grid */
.calendar-grid-container[b-m6sawypf6f] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    padding: 1rem;
    overflow-x: auto;
}

.calendar-grid[b-m6sawypf6f] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    min-width: 600px;
}

.calendar-day-header[b-m6sawypf6f] {
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    color: var(--mp-accent-text);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.calendar-day-header.weekend[b-m6sawypf6f] {
    color: rgba(212, 165, 116, 0.6);
}

.calendar-day[b-m6sawypf6f] {
    min-height: 100px;
    background: var(--mp-bg-elevated);
    border: 1px solid var(--mp-border);
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.calendar-day:hover[b-m6sawypf6f] {
    background: var(--mp-bg-hover);
    border-color: rgba(212, 165, 116, 0.3);
}

.calendar-day.empty[b-m6sawypf6f] {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.calendar-day.empty:hover[b-m6sawypf6f] {
    background: transparent;
    border-color: transparent;
}

.calendar-day.today[b-m6sawypf6f] {
    border-color: #d4a574;
    box-shadow: 0 0 0 1px #d4a574;
}

.calendar-day.weekend[b-m6sawypf6f] {
    background: var(--mp-bg-surface);
}

.calendar-day.selected[b-m6sawypf6f] {
    background: rgba(212, 165, 116, 0.15);
    border-color: #d4a574;
}

.day-number[b-m6sawypf6f] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mp-text-secondary);
    margin-bottom: 0.5rem;
}

.calendar-day.today .day-number[b-m6sawypf6f] {
    color: #d4a574;
}

.day-shifts[b-m6sawypf6f] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.day-shift-pill[b-m6sawypf6f] {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all 0.15s ease;
}

.day-shift-pill:hover[b-m6sawypf6f] {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.day-shift-pill.status-pending[b-m6sawypf6f] {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
}

.day-shift-pill.status-confirmed[b-m6sawypf6f] {
    background: rgba(52, 152, 219, 0.2);
    color: #60a5fa;
}

.day-shift-pill.status-active[b-m6sawypf6f] {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.day-shift-pill.status-completed[b-m6sawypf6f] {
    background: rgba(149, 165, 166, 0.2);
    color: #95a5a6;
}

.day-shift-more[b-m6sawypf6f] {
    font-size: 0.7rem;
    color: var(--mp-text-muted);
    text-align: center;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .calendar-toolbar[b-m6sawypf6f] {
        flex-direction: column;
        align-items: stretch;
    }

    .view-toggle[b-m6sawypf6f] {
        justify-content: center;
    }

    .date-navigation[b-m6sawypf6f] {
        justify-content: center;
    }

    .calendar-actions[b-m6sawypf6f] {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .header-content[b-m6sawypf6f] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .header-right[b-m6sawypf6f] {
        width: 100%;
    }

    .week-view[b-m6sawypf6f] {
        padding: 1rem;
    }

    .week-header[b-m6sawypf6f],
    .week-grid[b-m6sawypf6f] {
        grid-template-columns: repeat(7, 1fr);
        gap: 1px;
    }

    .week-day-header[b-m6sawypf6f] {
        padding: 0.5rem 0.25rem;
    }

    .week-day-header .day-name[b-m6sawypf6f] {
        font-size: 0.65rem;
    }

    .week-day-header .day-number[b-m6sawypf6f] {
        font-size: 1rem;
    }

    .week-day-column[b-m6sawypf6f] {
        padding: 0.25rem;
        min-height: 200px;
    }

    .week-shift[b-m6sawypf6f] {
        padding: 0.35rem;
    }

    .week-shift-name[b-m6sawypf6f] {
        font-size: 0.75rem;
    }

    .week-shift-time[b-m6sawypf6f],
    .week-shift-duration[b-m6sawypf6f] {
        font-size: 0.6rem;
    }

    .week-summary[b-m6sawypf6f] {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .day-view[b-m6sawypf6f] {
        padding: 1rem;
    }

    .timeline-shift[b-m6sawypf6f] {
        flex-direction: column;
    }

    .shift-time-block[b-m6sawypf6f] {
        flex-direction: row;
        justify-content: center;
        border-right: none;
        border-bottom: 1px solid rgba(212, 165, 116, 0.2);
    }

    .time-divider[b-m6sawypf6f] {
        width: 30px;
        height: 2px;
        margin: 0 0.5rem;
    }

    .month-view[b-m6sawypf6f] {
        padding: 1rem;
    }

    .calendar-day[b-m6sawypf6f] {
        min-height: 70px;
        padding: 0.35rem;
    }

    .day-number[b-m6sawypf6f] {
        font-size: 0.8rem;
    }

        .day-shift-pill[b-m6sawypf6f] {
            font-size: 0.6rem;
            padding: 1px 4px;
        }
    }

    /* ===== Mode Timeline - Week View ===== */
    .mode-timeline[b-m6sawypf6f] {
        display: flex;
        align-items: center;
        gap: 0;
        margin-bottom: 4px;
    }

    .mode-timeline-label[b-m6sawypf6f] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: var(--mp-bg-elevated);
        border: 1px solid var(--mp-border);
        border-radius: 8px 0 0 8px;
        font-size: 0.75rem;
        color: var(--mp-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 70px;
    }

    .mode-timeline-label i[b-m6sawypf6f] {
        color: #d4a574;
    }

    .mode-timeline-track[b-m6sawypf6f] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
        flex: 1;
    }

    .mode-timeline-day[b-m6sawypf6f] {
        padding: 0.5rem;
        background: var(--mp-bg-surface);
        border: 1px solid var(--mp-border);
        border-left-width: 3px;
        text-align: center;
        transition: all 0.2s ease;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mode-timeline-day:last-child[b-m6sawypf6f] {
        border-radius: 0 8px 8px 0;
    }

    .mode-timeline-day:hover[b-m6sawypf6f] {
        filter: brightness(1.1);
    }

    .mode-timeline-day.today[b-m6sawypf6f] {
        box-shadow: inset 0 0 0 2px rgba(212, 165, 116, 0.5);
    }

    .mode-timeline-day .mode-name[b-m6sawypf6f] {
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--mp-text-faint);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ===== Mode Timeline - Month View ===== */
    .month-mode-timeline[b-m6sawypf6f] {
        margin: 1rem 2rem;
        background: var(--mp-bg-surface);
        border: 1px solid var(--mp-border);
        border-radius: 12px;
        padding: 1rem;
    }

    .mode-timeline-header[b-m6sawypf6f] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
        color: var(--mp-text-muted);
        font-size: 0.85rem;
    }

    .mode-timeline-header i[b-m6sawypf6f] {
        color: var(--mp-accent-text);
        font-size: 1rem;
    }

    .mode-timeline-header span[b-m6sawypf6f] {
        font-weight: 500;
        color: var(--mp-text-secondary);
    }

    .mode-legend[b-m6sawypf6f] {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-left: auto;
        flex-wrap: wrap;
    }

    .legend-item[b-m6sawypf6f] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.75rem;
    }

    .legend-color[b-m6sawypf6f] {
        width: 12px;
        height: 12px;
        border-radius: 3px;
        flex-shrink: 0;
    }

    .legend-name[b-m6sawypf6f] {
        color: var(--mp-text-muted);
        white-space: nowrap;
    }

    .mode-timeline-bar[b-m6sawypf6f] {
        display: flex;
        height: 32px;
        border-radius: 6px;
        overflow: hidden;
        background: var(--mp-bg-elevated);
    }

    .mode-bar-segment[b-m6sawypf6f] {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: all 0.2s ease;
        border-right: 1px solid rgba(0, 0, 0, 0.2);
    }

    .mode-bar-segment:last-child[b-m6sawypf6f] {
        border-right: none;
    }

    .mode-bar-segment:hover[b-m6sawypf6f] {
        filter: brightness(1.2);
        z-index: 1;
    }

    .mode-bar-segment.today[b-m6sawypf6f] {
        box-shadow: inset 0 0 0 2px rgba(212, 165, 116, 0.8);
    }

    .mode-bar-segment.weekend[b-m6sawypf6f] {
        opacity: 0.7;
    }

    .mode-bar-segment .segment-day[b-m6sawypf6f] {
        font-size: 0.65rem;
        color: var(--mp-text-secondary);
        font-weight: 500;
    }

    /* Responsive adjustments for mode timeline */
    @media (max-width: 768px) {
        .mode-timeline[b-m6sawypf6f] {
            flex-direction: column;
            align-items: stretch;
        }

        .mode-timeline-label[b-m6sawypf6f] {
            border-radius: 8px 8px 0 0;
            justify-content: center;
        }

        .mode-timeline-track[b-m6sawypf6f] {
            grid-template-columns: repeat(7, 1fr);
        }

        .mode-timeline-day:last-child[b-m6sawypf6f] {
            border-radius: 0 0 8px 0;
        }

        .mode-timeline-day:first-child[b-m6sawypf6f] {
            border-radius: 0 0 0 8px;
        }

        .month-mode-timeline[b-m6sawypf6f] {
            margin: 1rem;
        }

        .mode-timeline-header[b-m6sawypf6f] {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .mode-legend[b-m6sawypf6f] {
            margin-left: 0;
            margin-top: 0.5rem;
        }

        .mode-bar-segment .segment-day[b-m6sawypf6f] {
            font-size: 0.55rem;
        }
    }
/* /Components/Pages/Shifts/WeeklyPlanner.razor.rz.scp.css */
.weekly-planner[b-swhnzygipq] {
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* Header - Shared with Daily */
.planner-header[b-swhnzygipq] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    color: white;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
}

.header-content[b-swhnzygipq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.header-left[b-swhnzygipq] {
    flex: 1;
}

.page-title[b-swhnzygipq] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-title i[b-swhnzygipq] {
    color: #d4a574;
}

.page-subtitle[b-swhnzygipq] {
    margin: 0.25rem 0 0 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
}

.header-right[b-swhnzygipq] {
    min-width: 300px;
}

/* Week Navigation */
.week-navigation[b-swhnzygipq] {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-icon[b-swhnzygipq] {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-icon:hover[b-swhnzygipq] {
    background: #f5f5f5;
    border-color: #667eea;
    color: #667eea;
}

.week-display[b-swhnzygipq] {
    flex: 1;
    text-align: center;
}

.week-main[b-swhnzygipq] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a1a;
}

.week-sub[b-swhnzygipq] {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.25rem;
}

/* Week Stats */
.week-stats[b-swhnzygipq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card[b-swhnzygipq] {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

.stat-card:hover[b-swhnzygipq] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.stat-icon[b-swhnzygipq] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 1.5rem;
}

.stat-icon-warning[b-swhnzygipq] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon-success[b-swhnzygipq] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon-info[b-swhnzygipq] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-value[b-swhnzygipq] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.stat-label[b-swhnzygipq] {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.25rem;
}

/* Weekly Grid */
.weekly-grid[b-swhnzygipq] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.day-column[b-swhnzygipq] {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

.day-column:hover[b-swhnzygipq] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.day-column.is-today[b-swhnzygipq] {
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.25);
}

.day-column.is-weekend[b-swhnzygipq] {
    background: rgba(255,255,255,0.04);
}

.day-header[b-swhnzygipq] {
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid #f0f0f0;
    position: relative;
}

.is-today .day-header[b-swhnzygipq] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom-color: transparent;
}

.day-name[b-swhnzygipq] {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.day-date[b-swhnzygipq] {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0.25rem;
}

.today-badge[b-swhnzygipq] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.3);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
}

.day-shifts[b-swhnzygipq] {
    padding: 1rem;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.shift-block[b-swhnzygipq] {
    padding: 0.75rem;
    border-radius: 8px;
    border-left: 3px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: all 0.2s;
}

.shift-block:hover[b-swhnzygipq] {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(2px);
}

.shift-block.shift-pending[b-swhnzygipq] {
    border-left-color: #ffc107;
    background: rgba(234,179,8,0.08);
}

.shift-block.shift-confirmed[b-swhnzygipq] {
    border-left-color: #17a2b8;
    background: #d1ecf1;
}

.shift-block.shift-active[b-swhnzygipq] {
    border-left-color: #28a745;
    background: #d4edda;
}

.shift-block.shift-completed[b-swhnzygipq] {
    border-left-color: rgba(255,255,255,0.45);
    background: #e2e3e5;
}

.shift-block-header[b-swhnzygipq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.shift-block-name[b-swhnzygipq] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1a1a1a;
}

.shift-block-status[b-swhnzygipq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.shift-block-status.status-warning[b-swhnzygipq] {
    background: #ffc107;
}

.shift-block-status.status-info[b-swhnzygipq] {
    background: #17a2b8;
}

.shift-block-status.status-success[b-swhnzygipq] {
    background: #28a745;
}

.shift-block-status.status-secondary[b-swhnzygipq] {
    background: #6c757d;
}

.shift-block-time[b-swhnzygipq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #666;
}

.shift-block-time i[b-swhnzygipq] {
    font-size: 0.75rem;
}

/* No Shifts Placeholder */
.no-shifts-placeholder[b-swhnzygipq] {
    text-align: center;
    padding: 2rem 1rem;
    color: #999;
}

.no-shifts-placeholder i[b-swhnzygipq] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Week Actions */
.week-actions[b-swhnzygipq] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Empty State */
.empty-state[b-swhnzygipq] {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.empty-state-icon[b-swhnzygipq] {
    font-size: 4rem;
    color: rgba(255,255,255,0.2);
    margin-bottom: 1rem;
}

.empty-state h3[b-swhnzygipq] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.empty-state p[b-swhnzygipq] {
    color: #666;
}

/* Loading State */
.loading-state[b-swhnzygipq] {
    text-align: center;
    padding: 4rem 2rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .weekly-grid[b-swhnzygipq] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .weekly-planner[b-swhnzygipq] {
        padding: 1rem;
    }

    .planner-header[b-swhnzygipq] {
        padding: 1.5rem;
    }

    .header-content[b-swhnzygipq] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-title[b-swhnzygipq] {
        font-size: 1.5rem;
    }

    .weekly-grid[b-swhnzygipq] {
        grid-template-columns: 1fr;
    }

    .week-stats[b-swhnzygipq] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Stockpiles/StockpileDashboard.razor.rz.scp.css */
.stockpile-dashboard[b-86el7vtpy3] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.dashboard-header[b-86el7vtpy3] {
    margin-bottom: 2rem;
}

.header-content[b-86el7vtpy3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.header-left[b-86el7vtpy3] {
    flex: 1;
}

.page-title[b-86el7vtpy3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mp-text-heading);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-title i[b-86el7vtpy3] {
    color: var(--mp-accent-text);
}

.page-subtitle[b-86el7vtpy3] {
    font-size: 0.85rem;
    color: var(--mp-text-muted);
    margin: 0.25rem 0 0 0;
}

/* Summary Cards */
.summary-cards[b-86el7vtpy3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.summary-card[b-86el7vtpy3] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-card:hover[b-86el7vtpy3] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.summary-icon[b-86el7vtpy3] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.summary-icon.icon-green[b-86el7vtpy3] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.summary-icon.icon-red[b-86el7vtpy3] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.summary-icon.icon-yellow[b-86el7vtpy3] {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}

.summary-icon.icon-blue[b-86el7vtpy3] {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}

.summary-content[b-86el7vtpy3] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.summary-label[b-86el7vtpy3] {
    font-size: 0.8rem;
    color: var(--mp-text-muted);
    font-weight: 500;
}

.summary-value[b-86el7vtpy3] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--mp-text-heading);
    line-height: 1;
}

/* Category Filter */
.category-filter[b-86el7vtpy3] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-btn[b-86el7vtpy3] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--mp-border-medium);
    background: var(--mp-bg-surface);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mp-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.filter-btn:hover[b-86el7vtpy3] {
    border-color: var(--mp-accent-border);
    color: var(--mp-accent-text);
    background: var(--mp-bg-hover);
}

.filter-btn.active[b-86el7vtpy3] {
    background: var(--mp-accent-bg);
    border-color: var(--mp-accent-border);
    color: var(--mp-accent-text);
}

/* Table cell styling */
.stockpile-code-badge[b-86el7vtpy3] {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mp-accent-text);
}

.stockpile-name-cell[b-86el7vtpy3] {
    font-weight: 600;
    color: var(--mp-text-heading);
}

.category-badge[b-86el7vtpy3] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.category-badge.category-input[b-86el7vtpy3] {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.category-badge.category-output[b-86el7vtpy3] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.category-badge.category-waste[b-86el7vtpy3] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.category-badge.category-intermediate[b-86el7vtpy3] {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}

.category-badge.category-consumable[b-86el7vtpy3] {
    background: rgba(251, 191, 36, 0.12);
    color: #f59e0b;
}

/* Level bar in table */
.level-cell[b-86el7vtpy3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.level-bar-mini[b-86el7vtpy3] {
    flex: 1;
    height: 6px;
    background: var(--mp-bg-elevated);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

.level-fill-mini[b-86el7vtpy3] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.level-fill-mini.fill-critical[b-86el7vtpy3] {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.level-fill-mini.fill-low[b-86el7vtpy3] {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.level-fill-mini.fill-good[b-86el7vtpy3] {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.level-fill-mini.fill-high[b-86el7vtpy3] {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.level-pct[b-86el7vtpy3] {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}

.level-pct.fill-critical[b-86el7vtpy3] {
    color: #ef4444;
}

.level-pct.fill-low[b-86el7vtpy3] {
    color: #f59e0b;
}

.level-pct.fill-good[b-86el7vtpy3] {
    color: #22c55e;
}

.level-pct.fill-high[b-86el7vtpy3] {
    color: #ef4444;
}

/* Loading State */
.loading-state[b-86el7vtpy3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

/* Empty State */
.empty-state[b-86el7vtpy3] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 12px;
}

.empty-state-icon[b-86el7vtpy3] {
    font-size: 4rem;
    color: var(--mp-text-faint);
    margin-bottom: 1.5rem;
}

.empty-state h3[b-86el7vtpy3] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mp-text-heading);
    margin-bottom: 0.75rem;
}

.empty-state p[b-86el7vtpy3] {
    font-size: 1rem;
    color: var(--mp-text-muted);
    margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .dark-table-container[b-86el7vtpy3] {
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    .stockpile-dashboard[b-86el7vtpy3] {
        padding: 1rem;
    }

    .header-content[b-86el7vtpy3] {
        flex-direction: column;
        gap: 1rem;
    }

    .summary-cards[b-86el7vtpy3] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Shared/AssetSelector.razor.rz.scp.css */
.asset-selector[b-s5sbp8qqo9] {
    position: relative;
    width: 100%;
}

/* Input wrapper */
.asset-selector-input[b-s5sbp8qqo9] {
    position: relative;
    display: flex;
    align-items: center;
}

.asset-selector-input input[b-s5sbp8qqo9] {
    padding-right: 56px;
}

.asset-selector-input .btn-clear[b-s5sbp8qqo9],
.asset-selector-input .btn-toggle[b-s5sbp8qqo9] {
    position: absolute;
    right: 0;
    border: none;
    background: transparent;
    padding: 0.25rem 0.5rem;
    color: var(--mp-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asset-selector-input .btn-clear[b-s5sbp8qqo9] {
    right: 26px;
}

.asset-selector-input .btn-clear:hover[b-s5sbp8qqo9],
.asset-selector-input .btn-toggle:hover[b-s5sbp8qqo9] {
    color: var(--mp-text);
}

/* Dropdown panel */
.asset-dropdown[b-s5sbp8qqo9] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    z-index: 1060;
    margin-top: 2px;
    padding: 0.25rem 0;
    background: var(--mp-dropdown-bg);
    border: 1px solid var(--mp-border);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
}

/* Category group header */
.asset-category-header[b-s5sbp8qqo9] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mp-text-muted);
    background: var(--mp-bg-elevated);
    border-top: 1px solid var(--mp-border);
    user-select: none;
}

.asset-category-header:first-child[b-s5sbp8qqo9] {
    border-top: none;
}

.asset-category-header .badge[b-s5sbp8qqo9] {
    font-size: 0.6rem;
    margin-left: auto;
}

/* Asset item row */
[b-s5sbp8qqo9] .asset-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background-color 0.1s;
}

[b-s5sbp8qqo9] .asset-item:hover,
[b-s5sbp8qqo9] .asset-item.highlighted {
    background-color: var(--mp-bg-hover);
}

[b-s5sbp8qqo9] .asset-item.selected {
    background-color: var(--mp-accent-bg);
    border-left-color: var(--mp-accent);
}

[b-s5sbp8qqo9] .asset-item-icon {
    flex-shrink: 0;
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-s5sbp8qqo9] .asset-item-code {
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
    color: var(--mp-text);
    min-width: 60px;
}

[b-s5sbp8qqo9] .asset-item-name {
    font-size: 0.8rem;
    color: var(--mp-text-muted);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-s5sbp8qqo9] .asset-item-check {
    color: #4ade80;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Empty / hint row */
.asset-item-empty[b-s5sbp8qqo9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--mp-text-faint);
}
/* /Components/Shared/ConnectionLine.razor.rz.scp.css */
/* ConnectionLine.razor styles */

.connection-line[b-sy9mv9xadu] {
    cursor: pointer;
}

.connection-line:hover path:not(.connection-hitarea)[b-sy9mv9xadu] {
    stroke-width: 3;
}

.connection-line.selected path:not(.connection-hitarea):not([opacity])[b-sy9mv9xadu] {
    stroke-width: 3;
}

.connection-line.temporary[b-sy9mv9xadu] {
    pointer-events: none;
}

.connection-line.temporary path[b-sy9mv9xadu] {
    stroke-dasharray: 4 4;
    opacity: 0.7;
}

.connection-hitarea[b-sy9mv9xadu] {
    cursor: pointer;
}

.connection-flow[b-sy9mv9xadu] {
    animation: flow-b-sy9mv9xadu 1s linear infinite;
}

@keyframes flow-b-sy9mv9xadu {
    from {
        stroke-dashoffset: 24;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.waypoint-handle[b-sy9mv9xadu] {
    cursor: move;
}

.waypoint-handle:hover .waypoint-circle[b-sy9mv9xadu] {
    stroke-width: 3;
    filter: drop-shadow(0 0 3px rgba(13, 110, 253, 0.5));
}

.connection-label text[b-sy9mv9xadu],
.split-indicator text[b-sy9mv9xadu] {
    pointer-events: none;
    user-select: none;
}
/* /Components/Shared/ContextSelector.razor.rz.scp.css */
/* ===== Context Selector ===== */
.context-selector[b-9014epuhol] {
    margin: 0.75rem;
}

.context-display[b-9014epuhol] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.context-display:hover[b-9014epuhol] {
    background: rgba(102, 126, 234, 0.15);
}

.context-icon[b-9014epuhol] {
    width: 2rem;
    height: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.context-icon .bi[b-9014epuhol] {
    width: 1.25rem;
    height: 1.25rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z'/%3E%3Cpath d='M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V1Zm11 0H3v14h3v-2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V15h3V1Z'/%3E%3C/svg%3E");
}

.context-details[b-9014epuhol] {
    flex: 1;
    min-width: 0;
}

.context-primary[b-9014epuhol] {
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.context-secondary[b-9014epuhol] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.context-clear[b-9014epuhol] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 4px;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.context-clear:hover[b-9014epuhol] {
    background: rgba(255, 255, 255, 0.2);
}

.context-clear .bi[b-9014epuhol] {
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/%3E%3C/svg%3E");
}

.context-empty[b-9014epuhol] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.context-empty:hover[b-9014epuhol] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

.context-empty .bi[b-9014epuhol] {
    width: 1.25rem;
    height: 1.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgba(255,255,255,0.5)' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z'/%3E%3Cpath d='M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V1Zm11 0H3v14h3v-2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V15h3V1Z'/%3E%3C/svg%3E");
}

.context-text[b-9014epuhol] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 500;
}

/* ===== Modal ===== */
.context-modal[b-9014epuhol] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(4px);
}

.context-modal-content[b-9014epuhol] {
    background: #252535;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

.context-modal-header[b-9014epuhol] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.context-modal-header h3[b-9014epuhol] {
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.context-modal-header button[b-9014epuhol] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.context-modal-header button:hover[b-9014epuhol] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.context-modal-body[b-9014epuhol] {
    padding: 1.5rem;
}

.context-selector-group[b-9014epuhol] {
    margin-bottom: 1.25rem;
}

.context-selector-group:last-child[b-9014epuhol] {
    margin-bottom: 0;
}

.context-selector-group label[b-9014epuhol] {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.context-selector-group .form-select[b-9014epuhol] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    width: 100%;
    font-size: 0.875rem;
}

.context-selector-group .form-select:focus[b-9014epuhol] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.context-selector-group .form-select:disabled[b-9014epuhol] {
    opacity: 0.5;
    cursor: not-allowed;
}

.context-modal-footer[b-9014epuhol] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.context-modal-footer .btn[b-9014epuhol] {
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.context-modal-footer .btn-secondary[b-9014epuhol] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.context-modal-footer .btn-secondary:hover[b-9014epuhol] {
    background: rgba(255, 255, 255, 0.15);
}

.context-modal-footer .btn-primary[b-9014epuhol] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.context-modal-footer .btn-primary:hover[b-9014epuhol] {
    opacity: 0.9;
}

.context-modal-footer .btn-primary:disabled[b-9014epuhol] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Collapsed state */
.nav-container.collapsed .context-selector[b-9014epuhol] {
    margin: 0.75rem 0.5rem;
}

.nav-container.collapsed .context-display[b-9014epuhol],
.nav-container.collapsed .context-empty[b-9014epuhol] {
    padding: 0.5rem;
    justify-content: center;
}

.nav-container.collapsed .context-details[b-9014epuhol],
.nav-container.collapsed .context-text[b-9014epuhol],
.nav-container.collapsed .context-clear[b-9014epuhol] {
    display: none;
}

.nav-container.collapsed:hover .context-details[b-9014epuhol],
.nav-container.collapsed:hover .context-text[b-9014epuhol],
.nav-container.collapsed:hover .context-clear[b-9014epuhol] {
    display: block;
}

.nav-container.collapsed:hover .context-display[b-9014epuhol],
.nav-container.collapsed:hover .context-empty[b-9014epuhol] {
    padding: 0.75rem;
    justify-content: flex-start;
}
/* /Components/Shared/DeviceChartModal.razor.rz.scp.css */
.draggable-chart-modal[b-eo22lejx3y] {
    position: fixed;
    min-width: 380px;
    max-width: 800px;
    background: var(--mp-modal-bg);
    border: 1px solid var(--mp-modal-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: height 0.2s ease;
    color: var(--mp-text);
}

.draggable-chart-modal.minimized[b-eo22lejx3y] {
    width: 280px !important;
    min-width: 280px;
}

.draggable-chart-modal .modal-header[b-eo22lejx3y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--bs-primary) 0%, #4f46e5 100%);
    cursor: move;
    user-select: none;
}

.modal-title-section[b-eo22lejx3y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
}

.device-indicator[b-eo22lejx3y] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.device-indicator i[b-eo22lejx3y] {
    font-size: 1rem;
}

.title-text[b-eo22lejx3y] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.device-name[b-eo22lejx3y] {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-id[b-eo22lejx3y] {
    font-size: 0.6875rem;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.7);
}

.modal-controls[b-eo22lejx3y] {
    display: flex;
    gap: 0.25rem;
}

.btn-icon[b-eo22lejx3y] {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.15s ease;
}

.btn-icon:hover[b-eo22lejx3y] {
    background: rgba(255, 255, 255, 0.25);
}

.btn-close-modal:hover[b-eo22lejx3y] {
    background: var(--bs-danger);
}

/* Modal Body */
.draggable-chart-modal .modal-body[b-eo22lejx3y] {
    padding: 1rem;
}

/* Live Values Bar */
.live-values-bar[b-eo22lejx3y] {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--mp-bg-elevated);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.live-value[b-eo22lejx3y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.live-value.primary[b-eo22lejx3y] {
    border-right: 1px solid var(--mp-border-medium);
    padding-right: 1rem;
}

.value-label[b-eo22lejx3y] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--mp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.value-number[b-eo22lejx3y] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mp-text-heading);
}

.live-value.primary .value-number[b-eo22lejx3y] {
    color: var(--bs-primary);
    font-size: 1.5rem;
}

.value-unit[b-eo22lejx3y] {
    font-size: 0.75rem;
    color: var(--mp-text-muted);
}

.status-badge[b-eo22lejx3y] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
}

.status-badge.running[b-eo22lejx3y] {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success);
}

.status-badge.stopped[b-eo22lejx3y] {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
}

/* Time Range Selector */
.time-range-selector[b-eo22lejx3y] {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.time-range-selector .btn[b-eo22lejx3y] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Chart Container */
.chart-container[b-eo22lejx3y] {
    position: relative;
    height: 200px;
    background: var(--mp-bg-surface);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-container canvas[b-eo22lejx3y] {
    width: 100% !important;
    height: 100% !important;
}

.chart-loading[b-eo22lejx3y],
.chart-no-data[b-eo22lejx3y] {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--mp-text-muted);
}

.chart-no-data i[b-eo22lejx3y] {
    font-size: 2rem;
    opacity: 0.5;
}

/* Metric Toggle */
.metric-toggle[b-eo22lejx3y] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    background: var(--mp-bg-surface);
    border-radius: 6px;
}

.toggle-label[b-eo22lejx3y] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mp-text-muted);
}

.metric-toggle .form-check[b-eo22lejx3y] {
    margin: 0;
}

.metric-toggle .form-check-label[b-eo22lejx3y] {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.metric-indicator[b-eo22lejx3y] {
    width: 12px;
    height: 3px;
    border-radius: 2px;
}

.metric-indicator.tph[b-eo22lejx3y] {
    background: var(--bs-primary);
}

.metric-indicator.totalizer[b-eo22lejx3y] {
    background: var(--bs-success);
}

/* Resize Handle */
.resize-handle[b-eo22lejx3y] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: se-resize;
    color: rgba(255,255,255,0.25);
    transition: color 0.15s ease;
}

.resize-handle:hover[b-eo22lejx3y] {
    color: rgba(255,255,255,0.55);
}

.resize-handle i[b-eo22lejx3y] {
    font-size: 0.75rem;
    transform: rotate(90deg);
}

/* Dragging and Resizing States */
.draggable-chart-modal.dragging[b-eo22lejx3y] {
    opacity: 0.9;
    cursor: move;
}

.draggable-chart-modal.resizing[b-eo22lejx3y] {
    opacity: 0.9;
}
/* /Components/Shared/DeviceStatusCard.razor.rz.scp.css */
.device-status-card[b-7qwyilpkdm] {
    background: var(--mp-bg-surface);
    border: 2px solid var(--mp-border);
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.device-status-card:hover[b-7qwyilpkdm] {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

/* Status-specific styling */
.device-status-card.status-running[b-7qwyilpkdm] {
    border-left: 4px solid #27ae60;
}

.device-status-card.status-low-production[b-7qwyilpkdm] {
    border-left: 4px solid #f39c12;
}

.device-status-card.status-stopped[b-7qwyilpkdm] {
    border-left: 4px solid #e74c3c;
}

/* Device Header */
.device-header[b-7qwyilpkdm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.device-title h5[b-7qwyilpkdm] {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mp-text);
}

.device-id[b-7qwyilpkdm] {
    font-size: 0.75rem;
    color: var(--mp-text-muted);
    font-family: 'Courier New', monospace;
}

.device-status-badge[b-7qwyilpkdm] {
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.device-status-badge.status-running[b-7qwyilpkdm] {
    background-color: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}

.device-status-badge.status-low-production[b-7qwyilpkdm] {
    background-color: rgba(243, 156, 18, 0.15);
    color: #f39c12;
}

.device-status-badge.status-stopped[b-7qwyilpkdm] {
    background-color: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

/* Device Metrics */
.device-metrics[b-7qwyilpkdm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.metric-large[b-7qwyilpkdm] {
    text-align: center;
}

.metric-large .metric-value[b-7qwyilpkdm] {
    font-size: 3rem;
    font-weight: 700;
    color: var(--mp-text);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.metric-large .metric-label[b-7qwyilpkdm] {
    font-size: 0.875rem;
    color: var(--mp-text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.metric-secondary[b-7qwyilpkdm] {
    text-align: right;
}

.metric-secondary > div[b-7qwyilpkdm] {
    margin-bottom: 0.5rem;
}

.metric-secondary strong[b-7qwyilpkdm] {
    margin-left: 0.5rem;
    font-size: 1.125rem;
}

.performance-indicator .percentage[b-7qwyilpkdm] {
    font-size: 2rem;
    font-weight: 700;
}

.percentage.performance-excellent[b-7qwyilpkdm] {
    color: #27ae60;
}

.percentage.performance-good[b-7qwyilpkdm] {
    color: #2ecc71;
}

.percentage.performance-warning[b-7qwyilpkdm] {
    color: #f39c12;
}

.percentage.performance-danger[b-7qwyilpkdm] {
    color: #e74c3c;
}

/* Progress Section */
.progress-section[b-7qwyilpkdm] {
    margin-bottom: 1rem;
}

.progress[b-7qwyilpkdm] {
    height: 1.5rem;
    background-color: var(--mp-bg-elevated);
    border-radius: 8px;
    overflow: hidden;
}

.progress-bar[b-7qwyilpkdm] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    transition: width 0.6s ease;
}

/* Status Indicators */
.status-indicators[b-7qwyilpkdm] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: var(--mp-bg-elevated);
    border-radius: 8px;
}

.indicator[b-7qwyilpkdm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
}

.indicator i[b-7qwyilpkdm] {
    font-size: 1.5rem;
}

.indicator span[b-7qwyilpkdm] {
    font-size: 0.75rem;
    font-weight: 600;
}

.indicator.active[b-7qwyilpkdm] {
    color: #27ae60;
}

.indicator.inactive[b-7qwyilpkdm] {
    color: #95a5a6;
}

.indicator.warning[b-7qwyilpkdm] {
    color: #f39c12;
}

.indicator.normal[b-7qwyilpkdm] {
    color: #95a5a6;
    opacity: 0.5;
}

/* Last Update */
.last-update[b-7qwyilpkdm] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.last-update i[b-7qwyilpkdm] {
    font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .device-status-card[b-7qwyilpkdm] {
        padding: 1rem;
    }

    .device-header[b-7qwyilpkdm] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .device-metrics[b-7qwyilpkdm] {
        flex-direction: column;
        gap: 1rem;
    }

    .metric-secondary[b-7qwyilpkdm] {
        text-align: left;
        width: 100%;
    }

    .status-indicators[b-7qwyilpkdm] {
        gap: 0.5rem;
    }

    .indicator span[b-7qwyilpkdm] {
        font-size: 0.625rem;
    }
}
/* /Components/Shared/DraggableAssetModal.razor.rz.scp.css */
.draggable-modal[b-npd7vbrwtv] {
    position: fixed;
    width: 360px;
    background: var(--mp-modal-bg);
    border: 1px solid var(--mp-modal-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: width 0.2s ease, height 0.2s ease;
    color: var(--mp-text);
}

.draggable-modal.minimized[b-npd7vbrwtv] {
    width: 280px;
}

.draggable-modal .modal-header[b-npd7vbrwtv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--mp-bg-elevated);
    cursor: move;
    user-select: none;
    border-bottom: 1px solid var(--mp-border);
}

.modal-title-section[b-npd7vbrwtv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
}

.asset-type-indicator[b-npd7vbrwtv] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.asset-type-indicator i[b-npd7vbrwtv] {
    font-size: 1rem;
}

.title-text[b-npd7vbrwtv] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.asset-code[b-npd7vbrwtv] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-primary);
    font-family: monospace;
}

.asset-name[b-npd7vbrwtv] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mp-text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-controls[b-npd7vbrwtv] {
    display: flex;
    gap: 0.25rem;
}

.btn-icon[b-npd7vbrwtv] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--mp-text-muted);
    transition: all 0.15s ease;
}

.btn-icon:hover[b-npd7vbrwtv] {
    background: var(--mp-bg-hover);
    color: var(--mp-text-heading);
}

.btn-close-modal:hover[b-npd7vbrwtv] {
    background: var(--bs-danger);
    color: white;
}

/* Modal Body */
.draggable-modal .modal-body[b-npd7vbrwtv] {
    padding: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

/* Status Banner */
.status-banner[b-npd7vbrwtv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.status-banner.status-running[b-npd7vbrwtv] {
    background: var(--bs-success-bg-subtle);
    border: 1px solid var(--bs-success-border-subtle);
}

.status-banner.status-stopped[b-npd7vbrwtv] {
    background: var(--bs-danger-bg-subtle);
    border: 1px solid var(--bs-danger-border-subtle);
}

.status-banner.status-warning[b-npd7vbrwtv] {
    background: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning-border-subtle);
}

.status-banner.status-offline[b-npd7vbrwtv] {
    background: var(--bs-secondary-bg-subtle);
    border: 1px solid var(--bs-secondary-border-subtle);
}

.status-info[b-npd7vbrwtv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-indicator[b-npd7vbrwtv] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: pulse-b-npd7vbrwtv 2s infinite;
}

.status-running .status-indicator[b-npd7vbrwtv] {
    background: var(--bs-success);
}

.status-stopped .status-indicator[b-npd7vbrwtv] {
    background: var(--bs-danger);
    animation: none;
}

.status-warning .status-indicator[b-npd7vbrwtv] {
    background: var(--bs-warning);
}

.status-offline .status-indicator[b-npd7vbrwtv] {
    background: var(--bs-secondary);
    animation: none;
}

@keyframes pulse-b-npd7vbrwtv {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-text[b-npd7vbrwtv] {
    font-weight: 600;
    font-size: 0.75rem;
}

.last-updated[b-npd7vbrwtv] {
    font-size: 0.6875rem;
    color: var(--mp-text-muted);
}

/* Data Section */
.data-section[b-npd7vbrwtv] {
    margin-bottom: 1rem;
}

.data-section h6[b-npd7vbrwtv],
.devices-section h6[b-npd7vbrwtv],
.details-section h6[b-npd7vbrwtv],
.description-section h6[b-npd7vbrwtv] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--mp-text-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.data-cards[b-npd7vbrwtv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.data-card[b-npd7vbrwtv] {
    background: var(--mp-bg-elevated);
    padding: 0.625rem;
    border-radius: 6px;
    text-align: center;
}

.data-card.primary[b-npd7vbrwtv] {
    background: var(--bs-primary-bg-subtle);
    grid-column: span 2;
}

.card-label[b-npd7vbrwtv] {
    display: block;
    font-size: 0.625rem;
    color: var(--mp-text-muted);
    margin-bottom: 0.125rem;
    text-transform: uppercase;
}

.card-value[b-npd7vbrwtv] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mp-text-heading);
}

.card-unit[b-npd7vbrwtv] {
    font-size: 0.75rem;
    color: var(--mp-text-muted);
    margin-left: 0.25rem;
}

/* Devices Section */
.devices-section[b-npd7vbrwtv] {
    margin-bottom: 1rem;
}

.device-list[b-npd7vbrwtv] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.device-item[b-npd7vbrwtv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.625rem;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.device-item:hover[b-npd7vbrwtv] {
    background: var(--mp-bg-hover);
    border-color: var(--mp-accent-border);
}

.device-info[b-npd7vbrwtv] {
    display: flex;
    flex-direction: column;
}

.device-name[b-npd7vbrwtv] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mp-text-heading);
}

.device-id[b-npd7vbrwtv] {
    font-size: 0.6875rem;
    font-family: monospace;
    color: var(--mp-text-muted);
}

.device-status[b-npd7vbrwtv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.device-status .badge[b-npd7vbrwtv] {
    font-size: 0.625rem;
}

.action-icon[b-npd7vbrwtv] {
    color: var(--bs-primary);
    font-size: 1rem;
}

/* Details Section */
.details-section[b-npd7vbrwtv] {
    margin-bottom: 1rem;
}

.entity-details[b-npd7vbrwtv] {
    background: var(--mp-bg-surface);
    border-radius: 6px;
    padding: 0.5rem;
}

.detail-row[b-npd7vbrwtv] {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0.25rem;
    border-bottom: 1px solid var(--mp-border);
}

.detail-row:last-child[b-npd7vbrwtv] {
    border-bottom: none;
}

.detail-label[b-npd7vbrwtv] {
    font-size: 0.75rem;
    color: var(--mp-text-muted);
}

.detail-value[b-npd7vbrwtv] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mp-text-heading);
}

/* Description Section */
.description-section p[b-npd7vbrwtv] {
    font-size: 0.8125rem;
    color: var(--mp-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Modal Footer */
.draggable-modal .modal-footer[b-npd7vbrwtv] {
    padding: 0.5rem 1rem;
    background: var(--mp-bg-elevated);
    border-top: 1px solid var(--mp-border);
    display: flex;
    justify-content: flex-end;
}

/* Orange badge color */
.bg-orange[b-npd7vbrwtv] {
    background-color: #fd7e14 !important;
    color: white;
}

/* Scrollbar styling */
.draggable-modal .modal-body[b-npd7vbrwtv]::-webkit-scrollbar {
    width: 6px;
}

.draggable-modal .modal-body[b-npd7vbrwtv]::-webkit-scrollbar-track {
    background: var(--mp-bg-surface);
}

.draggable-modal .modal-body[b-npd7vbrwtv]::-webkit-scrollbar-thumb {
    background: var(--mp-border-medium);
    border-radius: 3px;
}

.draggable-modal .modal-body[b-npd7vbrwtv]::-webkit-scrollbar-thumb:hover {
    background: var(--mp-text-muted);
}

/* Resize Handle */
.resize-handle[b-npd7vbrwtv] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    cursor: se-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mp-text-faint);
    transition: color 0.15s ease;
}

.resize-handle:hover[b-npd7vbrwtv] {
    color: var(--mp-text-secondary);
}

.resize-handle i[b-npd7vbrwtv] {
    font-size: 0.75rem;
}

/* Dragging and Resizing States */
.draggable-modal.dragging[b-npd7vbrwtv] {
    opacity: 0.9;
    cursor: move;
}

.draggable-modal.resizing[b-npd7vbrwtv] {
    opacity: 0.9;
}
/* /Components/Shared/DraggablePlantEventsModal.razor.rz.scp.css */
/* Draggable Events Modal */
.draggable-events-modal[b-nqrzrk84w6] {
    position: fixed;
    min-width: 350px;
    max-width: 600px;
    min-height: 200px;
    max-height: 80vh;
    background: var(--mp-modal-bg);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mp-border-medium);
}

.draggable-events-modal.minimized[b-nqrzrk84w6] {
    min-height: auto;
    max-height: none;
}

/* Modal Header */
.draggable-events-modal .modal-header[b-nqrzrk84w6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--mp-bg-elevated);
    cursor: move;
    user-select: none;
    border-bottom: 1px solid var(--mp-accent-border);
    flex-shrink: 0;
}

.draggable-events-modal .modal-title-section[b-nqrzrk84w6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
}

.draggable-events-modal .events-icon[b-nqrzrk84w6] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #d4a574 0%, #c4956a 100%);
    color: white;
    flex-shrink: 0;
}

.draggable-events-modal .events-icon i[b-nqrzrk84w6] {
    font-size: 1rem;
}

.draggable-events-modal .title-text[b-nqrzrk84w6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.draggable-events-modal .modal-title[b-nqrzrk84w6] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #d4a574;
}

.draggable-events-modal .event-counts[b-nqrzrk84w6] {
    display: flex;
    gap: 0.375rem;
}

.draggable-events-modal .event-counts .badge[b-nqrzrk84w6] {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
}

/* Modal Controls */
.draggable-events-modal .modal-controls[b-nqrzrk84w6] {
    display: flex;
    gap: 0.25rem;
}

.draggable-events-modal .btn-icon[b-nqrzrk84w6] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--mp-text-muted);
    transition: all 0.15s ease;
}

.draggable-events-modal .btn-icon:hover[b-nqrzrk84w6] {
    background: var(--mp-bg-hover);
    color: var(--mp-text-heading);
}

.draggable-events-modal .btn-close-modal:hover[b-nqrzrk84w6] {
    background: rgba(220, 53, 69, 0.8);
    color: white;
}

/* Modal Body */
.draggable-events-modal .modal-body[b-nqrzrk84w6] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
    min-height: 150px;
    max-height: calc(80vh - 60px);
}

/* Resize Handle */
.draggable-events-modal .resize-handle[b-nqrzrk84w6] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mp-text-faint);
    transition: color 0.2s ease;
}

.draggable-events-modal .resize-handle:hover[b-nqrzrk84w6] {
    color: #d4a574;
}

.draggable-events-modal .resize-handle i[b-nqrzrk84w6] {
    font-size: 0.75rem;
    transform: rotate(90deg);
}

/* Override PlantEventPanel styles for theme */
.draggable-events-modal[b-nqrzrk84w6]  .event-card {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border-medium);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.draggable-events-modal[b-nqrzrk84w6]  .event-card:hover {
    background: var(--mp-bg-hover);
    border-color: var(--mp-accent);
    box-shadow: 0 2px 6px rgba(212, 165, 116, 0.1);
}

.draggable-events-modal[b-nqrzrk84w6]  .events-header h6 {
    color: var(--mp-accent-text);
}

.draggable-events-modal[b-nqrzrk84w6]  .add-event-btn {
    background: var(--mp-accent-bg);
    border: 1px solid var(--mp-accent-border);
    color: var(--mp-accent-text);
    font-weight: 600;
}

.draggable-events-modal[b-nqrzrk84w6]  .add-event-btn:hover {
    background: var(--mp-accent);
    color: #1a1a2e;
    border-color: var(--mp-accent);
}

.draggable-events-modal[b-nqrzrk84w6]  .event-time {
    color: var(--mp-text-muted);
}

.draggable-events-modal[b-nqrzrk84w6]  .event-duration {
    color: var(--mp-text-faint);
}

.draggable-events-modal[b-nqrzrk84w6]  .reason-badge {
    background: var(--mp-accent-bg);
    color: var(--mp-accent-text);
}

.draggable-events-modal[b-nqrzrk84w6]  .no-events-message {
    color: var(--mp-text-faint);
}

.draggable-events-modal[b-nqrzrk84w6]  .btn-assign-reason {
    background: rgba(212, 165, 116, 0.15);
    border-color: rgba(212, 165, 116, 0.3);
    color: #d4a574;
}

.draggable-events-modal[b-nqrzrk84w6]  .btn-assign-reason:hover {
    background: rgba(212, 165, 116, 0.25);
}

/* Scrollbar styling */
.draggable-events-modal .modal-body[b-nqrzrk84w6]::-webkit-scrollbar {
    width: 6px;
}

.draggable-events-modal .modal-body[b-nqrzrk84w6]::-webkit-scrollbar-track {
    background: var(--mp-bg-surface);
    border-radius: 3px;
}

.draggable-events-modal .modal-body[b-nqrzrk84w6]::-webkit-scrollbar-thumb {
    background: var(--mp-border-medium);
    border-radius: 3px;
}

.draggable-events-modal .modal-body[b-nqrzrk84w6]::-webkit-scrollbar-thumb:hover {
    background: var(--mp-text-muted);
}
/* /Components/Shared/EquipmentDetailModal.razor.rz.scp.css */
/* EquipmentDetailModal - Content Styles */
/* Shell styling handled by ModalWrapper */

.equipment-type-badge[b-r95tju2zd1] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: var(--bs-gray-100);
    color: var(--bs-gray-600);
    border-radius: 4px;
}

/* Status Banner */
.status-banner[b-r95tju2zd1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.status-banner.status-running[b-r95tju2zd1] {
    background: var(--bs-success-bg-subtle);
    border: 1px solid var(--bs-success-border-subtle);
}

.status-banner.status-stopped[b-r95tju2zd1] {
    background: var(--bs-danger-bg-subtle);
    border: 1px solid var(--bs-danger-border-subtle);
}

.status-banner.status-warning[b-r95tju2zd1] {
    background: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning-border-subtle);
}

.status-banner.status-offline[b-r95tju2zd1] {
    background: var(--bs-secondary-bg-subtle);
    border: 1px solid var(--bs-secondary-border-subtle);
}

.status-info[b-r95tju2zd1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-indicator[b-r95tju2zd1] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse-b-r95tju2zd1 2s infinite;
}

.status-running .status-indicator[b-r95tju2zd1] {
    background: var(--bs-success);
}

.status-stopped .status-indicator[b-r95tju2zd1] {
    background: var(--bs-danger);
    animation: none;
}

.status-warning .status-indicator[b-r95tju2zd1] {
    background: var(--bs-warning);
}

.status-offline .status-indicator[b-r95tju2zd1] {
    background: var(--bs-secondary);
    animation: none;
}

@keyframes pulse-b-r95tju2zd1 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-text[b-r95tju2zd1] {
    font-weight: 600;
    font-size: 0.875rem;
}

.last-updated[b-r95tju2zd1] {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.last-updated i[b-r95tju2zd1] {
    margin-right: 0.25rem;
}

/* Data Section */
.data-section[b-r95tju2zd1] {
    margin-bottom: 1.5rem;
}

.data-section h6[b-r95tju2zd1] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-gray-600);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-cards[b-r95tju2zd1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.data-card[b-r95tju2zd1] {
    background: var(--bs-gray-100);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.data-card.primary[b-r95tju2zd1] {
    background: var(--bs-primary-bg-subtle);
}

.card-label[b-r95tju2zd1] {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-600);
    margin-bottom: 0.25rem;
}

.card-value[b-r95tju2zd1] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-gray-800);
}

/* Linked Section */
.linked-section[b-r95tju2zd1] {
    background: var(--bs-gray-50);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.linked-section h6[b-r95tju2zd1] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-gray-700);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Entity Details */
.entity-details[b-r95tju2zd1] {
    margin-bottom: 1rem;
}

.detail-row[b-r95tju2zd1] {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--bs-gray-200);
}

.detail-row:last-child[b-r95tju2zd1] {
    border-bottom: none;
}

.detail-label[b-r95tju2zd1] {
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
}

.detail-value[b-r95tju2zd1] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-gray-800);
}

.detail-value.code[b-r95tju2zd1] {
    font-family: monospace;
    background: var(--bs-gray-200);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* Reading Details */
.reading-details[b-r95tju2zd1] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-gray-200);
}

.reading-details h6[b-r95tju2zd1] {
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
}

.reading-grid[b-r95tju2zd1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.reading-item[b-r95tju2zd1] {
    background: rgba(255,255,255,0.03);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--bs-gray-200);
}

.reading-label[b-r95tju2zd1] {
    display: block;
    font-size: 0.6875rem;
    color: var(--bs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reading-value[b-r95tju2zd1] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-gray-800);
}

/* Stockpile Level */
.stockpile-level-section[b-r95tju2zd1] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-gray-200);
}

.stockpile-level-section h6[b-r95tju2zd1] {
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
}

.level-display[b-r95tju2zd1] {
    margin-bottom: 0.75rem;
}

.level-bar[b-r95tju2zd1] {
    height: 20px;
    background: var(--bs-gray-200);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.level-fill[b-r95tju2zd1] {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.level-fill.level-normal[b-r95tju2zd1] {
    background: linear-gradient(90deg, var(--bs-success), #28a745);
}

.level-fill.level-low[b-r95tju2zd1] {
    background: linear-gradient(90deg, var(--bs-warning), #ffc107);
}

.level-fill.level-high[b-r95tju2zd1] {
    background: linear-gradient(90deg, var(--bs-danger), #dc3545);
}

.level-stats[b-r95tju2zd1] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
}

.level-stats .current[b-r95tju2zd1] {
    font-weight: 600;
    color: var(--bs-gray-800);
}

.level-stats .separator[b-r95tju2zd1] {
    color: var(--bs-gray-400);
}

.level-stats .max[b-r95tju2zd1] {
    color: var(--bs-gray-600);
}

.level-stats .percentage[b-r95tju2zd1] {
    color: var(--bs-gray-500);
    font-size: 0.8125rem;
}

.level-alerts[b-r95tju2zd1] {
    margin-top: 0.75rem;
}

.level-alerts .alert[b-r95tju2zd1] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
}

.level-alerts .alert i[b-r95tju2zd1] {
    margin-right: 0.375rem;
}

/* Action Buttons */
.action-buttons[b-r95tju2zd1] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Description Section */
.description-section[b-r95tju2zd1] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-gray-200);
}

.description-section h6[b-r95tju2zd1] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-gray-600);
    margin-bottom: 0.5rem;
}

.description-section p[b-r95tju2zd1] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--bs-gray-700);
}

/* Loading */
.loading-spinner[b-r95tju2zd1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
}

.loading-spinner p[b-r95tju2zd1] {
    color: var(--bs-gray-500);
    margin: 0;
}
/* /Components/Shared/EquipmentPorts.razor.rz.scp.css */
/* EquipmentPorts.razor styles */

.port[b-ykfy2ui4fp] {
    cursor: pointer;
    transition: all 0.15s ease;
}

.port:hover .port-highlight[b-ykfy2ui4fp] {
    fill: rgba(13, 110, 253, 0.2);
    stroke: #0d6efd;
}

.port.highlighted .port-highlight[b-ykfy2ui4fp] {
    fill: rgba(13, 110, 253, 0.3);
    stroke: #0d6efd;
    stroke-width: 2;
}

.port.valid-target .port-highlight[b-ykfy2ui4fp] {
    fill: rgba(25, 135, 84, 0.3);
    stroke: #198754;
    animation: pulse-b-ykfy2ui4fp 1s infinite;
}

.port.can-connect[b-ykfy2ui4fp] {
    cursor: crosshair;
}

.port-circle[b-ykfy2ui4fp] {
    transition: all 0.15s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.port:hover .port-circle[b-ykfy2ui4fp] {
    transform: scale(1.2);
    filter: drop-shadow(0 0 2px #0d6efd);
}

.port-label[b-ykfy2ui4fp] {
    pointer-events: none;
    font-weight: 500;
    text-shadow: 0 0 3px white, 0 0 3px white, 0 0 3px white;
}

@keyframes pulse-b-ykfy2ui4fp {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
/* /Components/Shared/EquipmentShapeDesigner.razor.rz.scp.css */
.shape-designer[b-a3hatnohbo] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bs-gray-100);
    border-radius: 8px;
    overflow: hidden;
}

/* Toolbar */
.designer-toolbar[b-a3hatnohbo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--bs-gray-300);
}

.toolbar-section[b-a3hatnohbo] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-divider[b-a3hatnohbo] {
    width: 1px;
    height: 24px;
    background: var(--bs-gray-300);
    margin: 0 0.5rem;
}

.toolbar-spacer[b-a3hatnohbo] {
    flex: 1;
}

.zoom-level[b-a3hatnohbo] {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
    min-width: 45px;
    text-align: center;
}

.canvas-size[b-a3hatnohbo] {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

/* Designer Body */
.designer-body[b-a3hatnohbo] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Shape Palette */
.shape-palette[b-a3hatnohbo] {
    width: 160px;
    background: rgba(255,255,255,0.03);
    border-right: 1px solid var(--bs-gray-300);
    overflow-y: auto;
    padding: 0.5rem;
}

.palette-title[b-a3hatnohbo] {
    font-weight: 600;
    color: var(--bs-gray-700);
    padding: 0.5rem;
    margin: 0;
    border-bottom: 1px solid var(--bs-gray-200);
}

.shape-list[b-a3hatnohbo] {
    padding: 0.5rem 0;
}

.shape-item[b-a3hatnohbo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
    cursor: grab;
    border-radius: 4px;
    transition: all 0.15s;
}

.shape-item:hover[b-a3hatnohbo] {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.shape-item:active[b-a3hatnohbo] {
    cursor: grabbing;
}

.shape-item i[b-a3hatnohbo] {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

/* Canvas Container */
.canvas-container[b-a3hatnohbo] {
    flex: 1;
    overflow: auto;
    background: var(--bs-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.shape-canvas[b-a3hatnohbo] {
    display: block;
    background: rgba(255,255,255,0.03);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Composed Shapes */
.composed-shape[b-a3hatnohbo] {
    cursor: move;
}

.composed-shape:hover[b-a3hatnohbo] {
    filter: brightness(0.95);
}

.composed-shape.selected rect[b-a3hatnohbo],
.composed-shape.selected ellipse[b-a3hatnohbo],
.composed-shape.selected polygon[b-a3hatnohbo],
.composed-shape.selected line[b-a3hatnohbo] {
    stroke: var(--bs-primary) !important;
}

/* Resize Handles */
.resize-handle[b-a3hatnohbo] {
    cursor: pointer;
    pointer-events: all;
}

.resize-handle.nw[b-a3hatnohbo] { cursor: nw-resize; }
.resize-handle.ne[b-a3hatnohbo] { cursor: ne-resize; }
.resize-handle.sw[b-a3hatnohbo] { cursor: sw-resize; }
.resize-handle.se[b-a3hatnohbo] { cursor: se-resize; }
.resize-handle.line-start[b-a3hatnohbo] { cursor: grab; }
.resize-handle.line-end[b-a3hatnohbo] { cursor: grab; }

/* Rotation Handle */
.rotation-handle[b-a3hatnohbo] {
    cursor: grab;
    pointer-events: all;
}

.rotation-handle:hover[b-a3hatnohbo] {
    r: 7;
    fill: #34c759;
}

.rotation-handle:active[b-a3hatnohbo] {
    cursor: grabbing;
}

.rotation-connector[b-a3hatnohbo] {
    pointer-events: none;
}

/* Vertex Handles */
.vertex-handle[b-a3hatnohbo] {
    cursor: grab;
    pointer-events: all;
}

.vertex-handle:hover[b-a3hatnohbo] {
    r: 6;
    fill: #ff1744;
}

.vertex-handle:active[b-a3hatnohbo] {
    cursor: grabbing;
}

/* Properties Panel */
.properties-panel[b-a3hatnohbo] {
    width: 220px;
    background: rgba(255,255,255,0.03);
    border-left: 1px solid var(--bs-gray-300);
    overflow-y: auto;
    padding: 1rem;
}

.panel-title[b-a3hatnohbo] {
    font-weight: 600;
    color: var(--bs-gray-800);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-gray-200);
}

.panel-subtitle[b-a3hatnohbo] {
    font-weight: 500;
    color: var(--bs-gray-700);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.property-group[b-a3hatnohbo] {
    margin-bottom: 0.75rem;
}

.property-group label[b-a3hatnohbo] {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-gray-600);
    margin-bottom: 0.25rem;
}

.property-row[b-a3hatnohbo] {
    display: flex;
    gap: 0.5rem;
}

.property-row .property-group[b-a3hatnohbo] {
    flex: 1;
}

.color-input-group[b-a3hatnohbo] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.color-input-group .form-control-color[b-a3hatnohbo] {
    width: 40px;
    min-width: 40px;
    height: 31px;
    padding: 0.25rem;
    border: 1px solid var(--bs-gray-300);
    border-radius: 4px;
    cursor: pointer;
}

.color-input-group .form-control[b-a3hatnohbo] {
    flex: 1;
}
/* /Components/Shared/GroupContextBadge.razor.rz.scp.css */
.group-context-badge[b-5k3o531m7w] {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem 0.375rem 2.25rem;
}

.group-indicator[b-5k3o531m7w] {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: rgba(212, 165, 116, 0.15);
    color: #d4a574;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(212, 165, 116, 0.2);
}

.group-indicator i[b-5k3o531m7w] {
    font-size: 0.9rem;
    color: #d4a574;
}

.group-name[b-5k3o531m7w] {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-5k3o531m7w] .btn-outline-secondary {
    color: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    font-size: 0.75rem !important;
    padding: 0.2rem 0.5rem !important;
}

[b-5k3o531m7w] .btn-outline-secondary:hover {
    color: #d4a574 !important;
    border-color: rgba(212, 165, 116, 0.3) !important;
    background: rgba(212, 165, 116, 0.1) !important;
}

[b-5k3o531m7w] .text-warning {
    color: rgba(234, 179, 8, 0.7) !important;
    font-size: 0.8rem;
    padding-left: 0.5rem;
}

/* Modal styling */
.group-context-badge .modal-content[b-5k3o531m7w] {
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.group-context-badge .list-group-item[b-5k3o531m7w] {
    border-left: none;
    border-right: none;
    padding: 0.875rem 1rem;
    transition: all 0.15s ease;
}

.group-context-badge .list-group-item:first-child[b-5k3o531m7w] {
    border-top: none;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

.group-context-badge .list-group-item:last-child[b-5k3o531m7w] {
    border-bottom: none;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.group-context-badge .list-group-item:hover:not(.active)[b-5k3o531m7w] {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.group-context-badge .list-group-item.active[b-5k3o531m7w] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
/* /Components/Shared/KPICard.razor.rz.scp.css */
.kpi-card[b-s4voes03pn] {
    background: var(--mp-bg-surface);
    border: 2px solid var(--mp-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.kpi-card[b-s4voes03pn]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--mp-border);
    transition: all 0.3s ease;
}

.kpi-card.status-good[b-s4voes03pn]::before {
    background: linear-gradient(180deg, #27ae60, #2ecc71);
}

.kpi-card.status-warning[b-s4voes03pn]::before {
    background: linear-gradient(180deg, #f39c12, #f1c40f);
}

.kpi-card.status-danger[b-s4voes03pn]::before {
    background: linear-gradient(180deg, #e74c3c, #c0392b);
}

.kpi-card:hover[b-s4voes03pn] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* KPI Icon */
.kpi-icon[b-s4voes03pn] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.status-neutral .kpi-icon[b-s4voes03pn] {
    background-color: var(--mp-bg-elevated);
    color: var(--mp-text-muted);
}

.status-good .kpi-icon[b-s4voes03pn] {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.15), rgba(46, 204, 113, 0.15));
    color: #27ae60;
}

.status-warning .kpi-icon[b-s4voes03pn] {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.15), rgba(241, 196, 15, 0.15));
    color: #f39c12;
}

.status-danger .kpi-icon[b-s4voes03pn] {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.15), rgba(192, 57, 43, 0.15));
    color: #e74c3c;
}

/* KPI Content */
.kpi-content[b-s4voes03pn] {
    flex: 1;
    min-width: 0;
}

.kpi-label[b-s4voes03pn] {
    font-size: 0.875rem;
    color: var(--mp-text-muted);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
}

.kpi-value[b-s4voes03pn] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--mp-text);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.kpi-unit[b-s4voes03pn] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--mp-text-muted);
    margin-left: 0.25rem;
}

/* KPI Trend */
.kpi-trend[b-s4voes03pn] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
}

.kpi-trend i[b-s4voes03pn] {
    font-size: 0.75rem;
}

.trend-up[b-s4voes03pn] {
    background-color: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}

.trend-down[b-s4voes03pn] {
    background-color: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

/* Threshold Indicator */
.threshold-indicator[b-s4voes03pn] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.25rem;
}

.threshold-good[b-s4voes03pn] {
    color: #27ae60;
}

.threshold-warning[b-s4voes03pn] {
    color: #f39c12;
}

.threshold-danger[b-s4voes03pn] {
    color: #e74c3c;
}

/* Animation */
@keyframes pulse-b-s4voes03pn {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.kpi-card.status-danger .threshold-indicator[b-s4voes03pn] {
    animation: pulse-b-s4voes03pn 2s infinite;
}

/* Responsive Design */
@media (max-width: 768px) {
    .kpi-card[b-s4voes03pn] {
        padding: 1rem;
    }

    .kpi-icon[b-s4voes03pn] {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .kpi-value[b-s4voes03pn] {
        font-size: 1.5rem;
    }

    .kpi-unit[b-s4voes03pn] {
        font-size: 0.875rem;
    }

    .threshold-indicator[b-s4voes03pn] {
        font-size: 1rem;
        top: 0.75rem;
        right: 0.75rem;
    }
}
/* /Components/Shared/LayoutCanvas.razor.rz.scp.css */
/* LayoutCanvas.razor.css - Styles for the reusable layout canvas component */

/* Base canvas styles */
.layout-canvas[b-143p5mx5ne] {
    display: block;
    user-select: none;
}

.layout-canvas.readonly[b-143p5mx5ne] {
    cursor: default;
}

.layout-canvas.editable[b-143p5mx5ne] {
    cursor: default;
}

/* Element styles */
.layout-element[b-143p5mx5ne] {
    transition: opacity 0.15s ease;
}

.layout-element:hover[b-143p5mx5ne] {
    opacity: 0.95;
}

.layout-element.selected[b-143p5mx5ne] {
    filter: drop-shadow(0 0 4px rgba(13, 110, 253, 0.5));
}

.layout-element.locked[b-143p5mx5ne] {
    opacity: 0.7;
}

.layout-element.readonly[b-143p5mx5ne] {
    cursor: pointer;
}

/* Selection handles (edit mode only) */
.resize-handle[b-143p5mx5ne] {
    fill: #0d6efd;
    stroke: #fff;
    stroke-width: 1;
    transition: transform 0.1s ease;
}

.resize-handle:hover[b-143p5mx5ne] {
    transform: scale(1.2);
}

.rotation-handle[b-143p5mx5ne] {
    transition: transform 0.1s ease;
}

.rotation-handle:hover[b-143p5mx5ne] {
    transform: scale(1.15);
}

.rotation-connector[b-143p5mx5ne] {
    stroke: #0d6efd;
    stroke-width: 1.5;
    stroke-dasharray: 4 2;
}

/* Status indicator (viewer mode) */
.status-indicator[b-143p5mx5ne] {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
}

/* Connection line styles are in ConnectionLine.razor.css */
/* /Components/Shared/LayoutDesigner.razor.rz.scp.css */
.layout-designer[b-tpi9jg2yn1] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 65px);
    background: var(--bs-gray-100);
    overflow: hidden;
    transition: all 0.3s ease;
    outline: none; /* Remove focus outline for keyboard handling */
}

/* Fullscreen Mode */
.layout-designer.fullscreen[b-tpi9jg2yn1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1050;
    border-radius: 0;
    background: var(--bs-gray-100);
}

.layout-designer.fullscreen .equipment-toolbox[b-tpi9jg2yn1] {
    width: 200px;
}

.layout-designer.fullscreen .properties-panel[b-tpi9jg2yn1] {
    width: 280px;
}

/* Toolbar */
.designer-toolbar[b-tpi9jg2yn1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--bs-gray-300);
}

.toolbar-section[b-tpi9jg2yn1] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-divider[b-tpi9jg2yn1] {
    width: 1px;
    height: 24px;
    background: var(--bs-gray-300);
    margin: 0 0.5rem;
}

.toolbar-spacer[b-tpi9jg2yn1] {
    flex: 1;
}

.zoom-level[b-tpi9jg2yn1] {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
    min-width: 45px;
    text-align: center;
}

/* Designer Body */
.designer-body[b-tpi9jg2yn1] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Equipment Toolbox */
.equipment-toolbox[b-tpi9jg2yn1] {
    width: 220px;
    background: rgba(255,255,255,0.03);
    border-right: 1px solid var(--bs-gray-300);
    overflow-y: auto;
    padding: 0.5rem;
}

.toolbox-title[b-tpi9jg2yn1] {
    font-weight: 600;
    color: var(--bs-gray-700);
    padding: 0.5rem;
    margin: 0;
    border-bottom: 1px solid var(--bs-gray-200);
}

.toolbox-category[b-tpi9jg2yn1] {
    margin-bottom: 0.25rem;
}

.category-header[b-tpi9jg2yn1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--bs-gray-700);
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.category-header:hover[b-tpi9jg2yn1] {
    background: var(--bs-gray-100);
}

.category-items[b-tpi9jg2yn1] {
    padding-left: 1rem;
}

.toolbox-item[b-tpi9jg2yn1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
    cursor: grab;
    border-radius: 4px;
    transition: all 0.15s;
    user-select: none;
    -webkit-user-select: none;
    min-height: 36px;
}

/* Prevent child elements from interfering with drag */
.toolbox-item > *[b-tpi9jg2yn1] {
    pointer-events: none;
}

.toolbox-item:hover[b-tpi9jg2yn1] {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.toolbox-item:active[b-tpi9jg2yn1] {
    cursor: grabbing;
}

.toolbox-item.placed[b-tpi9jg2yn1] {
    opacity: 0.5;
    cursor: default;
    background: var(--bs-gray-100);
}

.toolbox-item.placed:hover[b-tpi9jg2yn1] {
    background: var(--bs-gray-100);
    color: var(--bs-gray-600);
}

.asset-group-header[b-tpi9jg2yn1] {
    font-weight: 600;
    color: var(--bs-gray-500);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.5rem;
    border-top: 1px solid var(--bs-gray-200);
    padding-top: 0.5rem !important;
}

.toolbox-item i[b-tpi9jg2yn1] {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.toolbox-item span[b-tpi9jg2yn1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Canvas Container */
.canvas-container[b-tpi9jg2yn1] {
    flex: 1;
    overflow: auto;
    background: var(--bs-gray-200);
    position: relative;
    min-width: 0;
    min-height: 0;
}

/* Custom scrollbar styling for canvas */
.canvas-container[b-tpi9jg2yn1]::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.canvas-container[b-tpi9jg2yn1]::-webkit-scrollbar-track {
    background: var(--bs-gray-200);
    border-radius: 6px;
}

.canvas-container[b-tpi9jg2yn1]::-webkit-scrollbar-thumb {
    background: var(--bs-gray-400);
    border-radius: 6px;
    border: 2px solid var(--bs-gray-200);
}

.canvas-container[b-tpi9jg2yn1]::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-500);
}

.canvas-container[b-tpi9jg2yn1]::-webkit-scrollbar-corner {
    background: var(--bs-gray-200);
}

.layout-canvas[b-tpi9jg2yn1] {
    display: block;
    cursor: default;
    min-width: 100%;
    min-height: 100%;
}

.layout-canvas[data-tool="pan"][b-tpi9jg2yn1] {
    cursor: grab;
}

.layout-canvas[data-tool="pan"]:active[b-tpi9jg2yn1] {
    cursor: grabbing;
}

/* Layout Elements */
.layout-element[b-tpi9jg2yn1] {
    cursor: move;
}

.layout-element:hover:not(.selected)[b-tpi9jg2yn1] {
    filter: brightness(0.95);
}

.layout-element.selected rect[b-tpi9jg2yn1],
.layout-element.selected ellipse[b-tpi9jg2yn1],
.layout-element.selected polygon[b-tpi9jg2yn1] {
    stroke: var(--bs-primary) !important;
    stroke-width: 3 !important;
}

.layout-element.locked[b-tpi9jg2yn1] {
    cursor: not-allowed;
    opacity: 0.8;
}

.equipment-icon[b-tpi9jg2yn1] {
    font-family: 'bootstrap-icons';
    font-size: 24px;
}

/* Selection Handles */
.resize-handle[b-tpi9jg2yn1] {
    fill: var(--bs-primary);
    stroke: white;
    stroke-width: 1;
    pointer-events: all;
}

.resize-handle.nw[b-tpi9jg2yn1] { cursor: nw-resize; }
.resize-handle.ne[b-tpi9jg2yn1] { cursor: ne-resize; }
.resize-handle.sw[b-tpi9jg2yn1] { cursor: sw-resize; }
.resize-handle.se[b-tpi9jg2yn1] { cursor: se-resize; }
.resize-handle.n[b-tpi9jg2yn1] { cursor: n-resize; }
.resize-handle.s[b-tpi9jg2yn1] { cursor: s-resize; }
.resize-handle.e[b-tpi9jg2yn1] { cursor: e-resize; }
.resize-handle.w[b-tpi9jg2yn1] { cursor: w-resize; }

/* Rotation Handle */
.rotation-handle[b-tpi9jg2yn1] {
    cursor: crosshair;
    fill: #28a745;
    stroke: white;
    stroke-width: 2;
    transition: fill 0.15s ease, filter 0.15s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.rotation-handle:hover[b-tpi9jg2yn1] {
    fill: #218838;
    transform: scale(1.2);
    filter: drop-shadow(0 0 3px #28a745);
}

.rotation-connector[b-tpi9jg2yn1] {
    stroke: var(--bs-primary);
    stroke-width: 1.5;
    stroke-dasharray: 2,2;
}

/* Connections */
.connection[b-tpi9jg2yn1] {
    cursor: pointer;
}

.connection:hover line[b-tpi9jg2yn1],
.connection:hover path[b-tpi9jg2yn1] {
    stroke-width: 4 !important;
}

.connection.selected line[b-tpi9jg2yn1],
.connection.selected path[b-tpi9jg2yn1] {
    stroke: var(--bs-primary) !important;
    stroke-width: 3 !important;
}

.connection-label[b-tpi9jg2yn1] {
    font-size: 12px;
    pointer-events: none;
}

/* Animated connections */
.connection line.animated[b-tpi9jg2yn1],
.connection path.animated[b-tpi9jg2yn1] {
    stroke-dasharray: 10, 5;
    animation: flowAnimation-b-tpi9jg2yn1 1s linear infinite;
}

@keyframes flowAnimation-b-tpi9jg2yn1 {
    to {
        stroke-dashoffset: -15;
    }
}

/* Color Input Group */
.color-input-group[b-tpi9jg2yn1] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.color-input-group .form-control-color[b-tpi9jg2yn1] {
    width: 40px;
    min-width: 40px;
    height: 31px;
    padding: 0.25rem;
    border: 1px solid var(--bs-gray-300);
    border-radius: 4px;
    cursor: pointer;
}

.color-input-group .form-control[b-tpi9jg2yn1] {
    flex: 1;
}

/* Properties Panel */
.properties-panel[b-tpi9jg2yn1] {
    width: 260px;
    background: rgba(255,255,255,0.03);
    border-left: 1px solid var(--bs-gray-300);
    overflow-y: auto;
    padding: 1rem;
}

.panel-title[b-tpi9jg2yn1] {
    font-weight: 600;
    color: var(--bs-gray-800);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-gray-200);
}

.panel-subtitle[b-tpi9jg2yn1] {
    font-weight: 500;
    color: var(--bs-gray-700);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.property-group[b-tpi9jg2yn1] {
    margin-bottom: 0.75rem;
}

.property-group label[b-tpi9jg2yn1] {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-gray-600);
    margin-bottom: 0.25rem;
}

.property-row[b-tpi9jg2yn1] {
    display: flex;
    gap: 0.5rem;
}

.property-row .property-group[b-tpi9jg2yn1] {
    flex: 1;
}

/* Port editing rows */
.port-edit-row[b-tpi9jg2yn1] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
}

.port-label-text[b-tpi9jg2yn1] {
    flex: 1;
    font-size: 0.75rem;
    min-width: 0;
}

.port-position-select[b-tpi9jg2yn1] {
    width: 90px;
    flex-shrink: 0;
    font-size: 0.75rem;
    padding: 0.15rem 0.375rem;
}

.form-control-color[b-tpi9jg2yn1] {
    width: 100%;
    height: 31px;
    padding: 0.25rem;
}

/* Saving Overlay */
.saving-overlay[b-tpi9jg2yn1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 1000;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .equipment-toolbox[b-tpi9jg2yn1] {
        width: 180px;
    }
    
    .properties-panel[b-tpi9jg2yn1] {
        width: 220px;
    }
}

@media (max-width: 992px) {
    .designer-body[b-tpi9jg2yn1] {
        flex-direction: column;
    }
    
    .equipment-toolbox[b-tpi9jg2yn1],
    .properties-panel[b-tpi9jg2yn1] {
        width: 100%;
        max-height: 200px;
        border-right: none;
        border-left: none;
                border-bottom: 1px solid var(--bs-gray-300);
            }

            .canvas-container[b-tpi9jg2yn1] {
                min-height: 400px;
            }
        }

        /* Bulk Asset Editor */
        .bulk-editor-grid[b-tpi9jg2yn1] {
            max-height: 60vh;
            overflow-y: auto;
        }

        .bulk-editor-grid table[b-tpi9jg2yn1] {
            table-layout: fixed;
        }

        .bulk-editor-grid thead[b-tpi9jg2yn1] {
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .bulk-editor-grid th[b-tpi9jg2yn1] {
            font-weight: 600;
            font-size: 0.8125rem;
            white-space: nowrap;
            vertical-align: middle;
        }

        .bulk-editor-grid td[b-tpi9jg2yn1] {
            padding: 0.25rem;
            vertical-align: middle;
        }

        .bulk-editor-grid input[b-tpi9jg2yn1],
        .bulk-editor-grid select[b-tpi9jg2yn1] {
            border-color: transparent;
            background: transparent;
        }

        .bulk-editor-grid input:focus[b-tpi9jg2yn1],
        .bulk-editor-grid select:focus[b-tpi9jg2yn1] {
            border-color: var(--bs-primary);
            background: rgba(255,255,255,0.03);
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
        }

        .bulk-editor-grid input:hover[b-tpi9jg2yn1],
        .bulk-editor-grid select:hover[b-tpi9jg2yn1] {
            background: var(--bs-gray-100);
        }

        .bulk-editor-grid tr:hover td[b-tpi9jg2yn1] {
            background: var(--bs-gray-50);
        }

        .bulk-editor-grid tr.table-warning td[b-tpi9jg2yn1] {
            background: var(--bs-warning-bg-subtle);
        }

        .bulk-add-buttons[b-tpi9jg2yn1] {
            border-bottom: 1px solid var(--bs-gray-200);
            margin-bottom: 0.25rem;
        }
/* /Components/Shared/LayoutViewer.razor.rz.scp.css */
.layout-viewer[b-2teawxdtbu] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--mp-bg);
    overflow: hidden;
    position: relative;
}

/* Fullscreen mode is handled by parent container (PlantLayoutDashboard)
   to include footer and events panel */

/* Viewer Toolbar */
.viewer-toolbar[b-2teawxdtbu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--mp-bg-elevated);
    border-bottom: 1px solid var(--mp-border);
}

.layout-title[b-2teawxdtbu] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mp-text);
}

.toolbar-section[b-2teawxdtbu] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Header content slot styling */
.header-content-slot[b-2teawxdtbu] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

[b-2teawxdtbu] .toolbar-header-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-2teawxdtbu] .toolbar-header-content i {
    font-size: 1.25rem;
    color: var(--mp-accent-text);
}

[b-2teawxdtbu] .toolbar-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mp-text-heading);
    white-space: nowrap;
}

[b-2teawxdtbu] .toolbar-plant-selector {
    display: flex;
    align-items: center;
}

.toolbar-divider[b-2teawxdtbu] {
    width: 1px;
    height: 24px;
    background: var(--mp-border-medium);
    margin: 0 0.5rem;
}

.toolbar-spacer[b-2teawxdtbu] {
    flex: 1;
}

.zoom-level[b-2teawxdtbu] {
    font-size: 0.75rem;
    color: var(--mp-text-muted);
    min-width: 45px;
    text-align: center;
}

.spinning[b-2teawxdtbu] {
    animation: spin-b-2teawxdtbu 1s linear infinite;
}

@keyframes spin-b-2teawxdtbu {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Viewer Canvas */
.viewer-canvas[b-2teawxdtbu] {
    flex: 1;
    overflow: auto;
    background: var(--mp-bg-surface);
    cursor: grab;
    position: relative;
    /* Prevent browser zoom gestures on trackpad pinch */
    touch-action: none;
}

.viewer-canvas:active[b-2teawxdtbu] {
    cursor: grabbing;
}

.layout-svg[b-2teawxdtbu] {
    display: block;
}

/* No Layout State */
.no-layout[b-2teawxdtbu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
    color: var(--mp-text-secondary);
}

.no-layout i[b-2teawxdtbu] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-layout h4[b-2teawxdtbu] {
    margin-bottom: 0.5rem;
    color: var(--mp-text-heading);
}

.no-layout p[b-2teawxdtbu] {
    margin-bottom: 1.5rem;
}

/* Viewer Elements */
.viewer-element[b-2teawxdtbu] {
    transition: filter 0.2s, transform 0.2s;
}

.viewer-element:hover[b-2teawxdtbu] {
    filter: brightness(0.95);
    transform: scale(1.02);
}

.viewer-element.running rect[b-2teawxdtbu] {
    stroke: var(--bs-success) !important;
}

.viewer-element.stopped rect[b-2teawxdtbu] {
    stroke: var(--bs-danger) !important;
}

.viewer-element.warning rect[b-2teawxdtbu] {
    stroke: var(--bs-warning) !important;
}

.viewer-element.offline rect[b-2teawxdtbu] {
    stroke: var(--bs-secondary) !important;
}

.status-indicator[b-2teawxdtbu] {
    filter: drop-shadow(0 0 3px currentColor);
}

.equipment-icon[b-2teawxdtbu] {
    font-family: 'bootstrap-icons';
}

/* Connections */
.viewer-connection line.animated[b-2teawxdtbu],
.viewer-connection path.animated[b-2teawxdtbu] {
    stroke-dasharray: 10, 5;
    animation: flowAnimation-b-2teawxdtbu 1s linear infinite;
}

@keyframes flowAnimation-b-2teawxdtbu {
    to {
        stroke-dashoffset: -15;
    }
}

.connection-label[b-2teawxdtbu] {
    font-size: 11px;
    font-weight: 500;
}

/* Legend */
.viewer-legend[b-2teawxdtbu] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--mp-bg-elevated);
    border-top: 1px solid var(--mp-border);
    font-size: 0.8125rem;
}

.legend-item[b-2teawxdtbu] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--mp-text-secondary);
}

.legend-dot[b-2teawxdtbu] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-item.last-updated[b-2teawxdtbu] {
    margin-left: auto;
    color: var(--mp-text-muted);
}

.legend-item.last-updated i[b-2teawxdtbu] {
    font-size: 0.75rem;
}

/* Element Detail Modal */
.modal-element-detail[b-2teawxdtbu] {
    max-width: 500px;
}

.element-status-banner[b-2teawxdtbu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.element-status-banner.running[b-2teawxdtbu] {
    background: var(--bs-success-bg-subtle);
}

.element-status-banner.stopped[b-2teawxdtbu] {
    background: var(--bs-danger-bg-subtle);
}

.element-status-banner.warning[b-2teawxdtbu] {
    background: var(--bs-warning-bg-subtle);
}

.element-status-banner.offline[b-2teawxdtbu] {
    background: var(--bs-secondary-bg-subtle);
}

.status-badge[b-2teawxdtbu] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

.last-update[b-2teawxdtbu] {
    font-size: 0.75rem;
    color: var(--mp-text-muted);
}

.element-data-grid[b-2teawxdtbu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.data-card[b-2teawxdtbu] {
    background: var(--mp-bg-surface);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.data-card.primary[b-2teawxdtbu] {
    background: var(--bs-primary-bg-subtle);
}

.data-label[b-2teawxdtbu] {
    display: block;
    font-size: 0.75rem;
    color: var(--mp-text-muted);
    margin-bottom: 0.25rem;
}

.data-value[b-2teawxdtbu] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mp-text-heading);
}

.linked-entity[b-2teawxdtbu] {
    background: var(--mp-bg-surface);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.linked-entity h6[b-2teawxdtbu] {
    margin-bottom: 0.5rem;
    color: var(--mp-text-secondary);
}

.linked-entity h6 i[b-2teawxdtbu] {
    margin-right: 0.5rem;
}

.linked-entity p[b-2teawxdtbu] {
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.stockpile-quick-stats[b-2teawxdtbu] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--mp-text-muted);
    margin-bottom: 0.75rem;
}

/* Modal Backdrop */
.modal-backdrop[b-2teawxdtbu] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

.modal-dialog[b-2teawxdtbu] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    width: 90%;
}

.modal-content[b-2teawxdtbu] {
    background: var(--mp-modal-bg);
    border: 1px solid var(--mp-modal-border);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    color: var(--mp-text);
}

.modal-header[b-2teawxdtbu] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--mp-border);
}

.modal-body[b-2teawxdtbu] {
    padding: 1.25rem;
}

.modal-footer[b-2teawxdtbu] {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--mp-border);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .viewer-legend[b-2teawxdtbu] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .legend-item.last-updated[b-2teawxdtbu] {
        width: 100%;
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

/* Toolbar button overrides */
.viewer-toolbar[b-2teawxdtbu]  .btn-outline-secondary {
    color: var(--mp-text-secondary);
    border-color: var(--mp-border-medium);
}

.viewer-toolbar[b-2teawxdtbu]  .btn-outline-secondary:hover {
    background: var(--mp-bg-hover);
    color: var(--mp-text-heading);
    border-color: var(--mp-border-medium);
}

.viewer-toolbar[b-2teawxdtbu]  .btn-success {
    background: #198754;
    border-color: #198754;
}

.viewer-toolbar[b-2teawxdtbu]  .btn-info {
    background: #0dcaf0;
    border-color: #0dcaf0;
    color: #000;
}

/* Modal close button */
.modal-header[b-2teawxdtbu]  .btn-close {
    filter: var(--mp-close-filter);
}

/* Modal body overrides */
.modal-body[b-2teawxdtbu]  .data-card {
    background: var(--mp-bg-surface);
}

.modal-body[b-2teawxdtbu]  .data-label {
    color: var(--mp-text-muted);
}

.modal-body[b-2teawxdtbu]  .data-value {
    color: var(--mp-text-heading);
}

.modal-body[b-2teawxdtbu]  .linked-entity {
    background: var(--mp-bg-surface);
}

.modal-body[b-2teawxdtbu]  .linked-entity h6 {
    color: var(--mp-text-secondary);
}
/* /Components/Shared/LiveChart.razor.rz.scp.css */
.live-chart-container[b-01hwqyjqu0] {
    background: var(--mp-bg-surface);
    border: 2px solid var(--mp-border);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chart-header[b-01hwqyjqu0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--mp-border);
}

.chart-header h4[b-01hwqyjqu0] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mp-text);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.chart-header h4 i[b-01hwqyjqu0] {
    color: var(--mp-accent-text);
}

.chart-timerange[b-01hwqyjqu0] {
    font-size: 0.875rem;
    color: var(--mp-text-muted);
    font-weight: 400;
    margin-left: 0.5rem;
}

.chart-controls[b-01hwqyjqu0] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Chart Legend */
.chart-legend[b-01hwqyjqu0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.legend-item[b-01hwqyjqu0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--device-color);
    border-radius: 20px;
    background-color: var(--mp-bg-surface);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.875rem;
    font-weight: 500;
}

.legend-item.active[b-01hwqyjqu0] {
    background-color: var(--device-color);
    color: white;
}

.legend-item.inactive[b-01hwqyjqu0] {
    opacity: 0.5;
    background-color: var(--mp-bg-elevated);
    border-color: var(--mp-border);
}

.legend-item:hover[b-01hwqyjqu0] {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.legend-color[b-01hwqyjqu0] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--device-color);
}

.legend-item.inactive .legend-color[b-01hwqyjqu0] {
    background-color: var(--mp-border);
}

.legend-label[b-01hwqyjqu0] {
    font-weight: 600;
}

/* Chart Loading */
.chart-loading[b-01hwqyjqu0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--mp-text-muted);
}

.chart-loading p[b-01hwqyjqu0] {
    margin-top: 1rem;
}

/* Chart Canvas */
.chart-canvas-wrapper[b-01hwqyjqu0] {
    position: relative;
    height: 400px;
    width: 100%;
}

.chart-canvas-wrapper canvas[b-01hwqyjqu0] {
    max-width: 100%;
    max-height: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .live-chart-container[b-01hwqyjqu0] {
        padding: 1rem;
    }

    .chart-header[b-01hwqyjqu0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .chart-header h4[b-01hwqyjqu0] {
        font-size: 1.25rem;
        flex-wrap: wrap;
    }

    .chart-timerange[b-01hwqyjqu0] {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-top: 0.25rem;
    }

    .chart-controls[b-01hwqyjqu0] {
        width: 100%;
    }

    .chart-controls .btn-group[b-01hwqyjqu0] {
        width: 100%;
    }

    .chart-controls .btn[b-01hwqyjqu0] {
        flex: 1;
    }

    .chart-legend[b-01hwqyjqu0] {
        gap: 0.5rem;
    }

    .legend-item[b-01hwqyjqu0] {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
    }

    .legend-color[b-01hwqyjqu0] {
        width: 12px;
        height: 12px;
    }

    .chart-canvas-wrapper[b-01hwqyjqu0] {
        height: 300px;
    }
}
/* /Components/Shared/ManualMovementModal.razor.rz.scp.css */
/* ManualMovementModal - Content Styles */
/* Shell styling handled by ModalWrapper */

.form-group[b-q9frfobm4d] {
    margin-bottom: 1.25rem;
}

.form-group label[b-q9frfobm4d] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mp-text-heading);
    margin-bottom: 0.5rem;
}

.form-info[b-q9frfobm4d] {
    background: var(--mp-bg-surface);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.form-info h6[b-q9frfobm4d] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mp-text-secondary);
    margin: 0 0 0.75rem 0;
}

.preview-grid[b-q9frfobm4d] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.preview-item[b-q9frfobm4d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.preview-label[b-q9frfobm4d] {
    font-size: 0.813rem;
    color: var(--mp-text-muted);
}

.preview-value[b-q9frfobm4d] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mp-text-heading);
}

.preview-highlight[b-q9frfobm4d] {
    color: var(--primary-color, #3498db);
    font-size: 1rem;
}
/* /Components/Shared/Modals/ApplyPatternModal.razor.rz.scp.css */
/* ApplyPatternModal - Content Styles */
/* Shell styling handled by ModalWrapper */

/* Loading State */
.loading-state[b-lxzmzrqdx7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--mp-text-muted);
}

/* Empty State */
.empty-state[b-lxzmzrqdx7] {
    text-align: center;
    padding: 2rem;
}

.empty-state .empty-icon[b-lxzmzrqdx7] {
    width: 80px;
    height: 80px;
    background: var(--mp-accent-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.empty-state .empty-icon i[b-lxzmzrqdx7] {
    font-size: 2rem;
    color: var(--mp-accent);
}

.empty-state h4[b-lxzmzrqdx7] {
    color: var(--mp-text-heading);
    margin-bottom: 0.5rem;
}

.empty-state p[b-lxzmzrqdx7] {
    color: var(--mp-text-muted);
    margin-bottom: 1.5rem;
}

/* Step Content */
.step-content[b-lxzmzrqdx7] {
    animation: fadeIn-b-lxzmzrqdx7 0.3s ease;
}

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

.step-header[b-lxzmzrqdx7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.step-number[b-lxzmzrqdx7] {
    width: 36px;
    height: 36px;
    background: var(--mp-accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.step-header h4[b-lxzmzrqdx7] {
    color: var(--mp-text-heading);
    margin: 0;
    font-size: 1.1rem;
}

.step-header p[b-lxzmzrqdx7] {
    color: var(--mp-text-muted);
    margin: 0;
    font-size: 0.85rem;
}

/* Pattern List */
.pattern-list[b-lxzmzrqdx7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pattern-card[b-lxzmzrqdx7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pattern-card:hover[b-lxzmzrqdx7] {
    background: var(--mp-bg-hover);
    border-color: var(--mp-border-medium);
}

.pattern-card.selected[b-lxzmzrqdx7] {
    background: var(--mp-accent-bg);
    border-color: var(--mp-accent-border);
}

.pattern-icon[b-lxzmzrqdx7] {
    width: 48px;
    height: 48px;
    background: var(--mp-accent-bg);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pattern-icon i[b-lxzmzrqdx7] {
    font-size: 1.25rem;
    color: var(--mp-accent);
}

.pattern-info[b-lxzmzrqdx7] {
    flex: 1;
    min-width: 0;
}

.pattern-info h5[b-lxzmzrqdx7] {
    color: var(--mp-text-heading);
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
}

.pattern-meta[b-lxzmzrqdx7] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.pattern-meta .badge[b-lxzmzrqdx7] {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: var(--mp-accent-bg);
    color: var(--mp-accent);
    border-radius: 4px;
}

.pattern-meta .team-badge[b-lxzmzrqdx7] {
    background: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
}

.pattern-desc[b-lxzmzrqdx7] {
    color: var(--mp-text-muted);
    font-size: 0.8rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pattern-select[b-lxzmzrqdx7] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pattern-select i[b-lxzmzrqdx7] {
    font-size: 1.5rem;
    color: var(--mp-accent);
}

/* Date Range Form */
.date-range-form[b-lxzmzrqdx7] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row[b-lxzmzrqdx7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group label[b-lxzmzrqdx7] {
    display: block;
    color: var(--mp-text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.quick-select[b-lxzmzrqdx7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.quick-select span[b-lxzmzrqdx7] {
    color: var(--mp-text-muted);
    font-size: 0.85rem;
}

.quick-select .btn-sm[b-lxzmzrqdx7] {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    background: transparent;
    border: 1px solid var(--mp-border);
    color: var(--mp-text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-select .btn-sm:hover[b-lxzmzrqdx7] {
    background: var(--mp-accent-bg);
    border-color: var(--mp-accent-border);
    color: var(--mp-accent);
}

.preview-summary[b-lxzmzrqdx7] {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    background: var(--mp-accent-bg);
    border: 1px solid var(--mp-accent-border);
    border-radius: 8px;
}

.summary-item[b-lxzmzrqdx7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mp-text-secondary);
    font-size: 0.9rem;
}

.summary-item i[b-lxzmzrqdx7] {
    color: var(--mp-accent);
}

/* Confirm Summary */
.confirm-summary[b-lxzmzrqdx7] {
    margin-bottom: 1rem;
}

.confirm-card[b-lxzmzrqdx7] {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    padding: 1rem;
}

.confirm-row[b-lxzmzrqdx7] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mp-border);
}

.confirm-row:last-child[b-lxzmzrqdx7] {
    border-bottom: none;
}

.confirm-label[b-lxzmzrqdx7] {
    color: var(--mp-text-muted);
    font-size: 0.9rem;
}

.confirm-value[b-lxzmzrqdx7] {
    color: var(--mp-text-heading);
    font-size: 0.9rem;
    font-weight: 500;
}

.confirm-row.warning[b-lxzmzrqdx7] {
    background: rgba(245, 158, 11, 0.08);
    margin: 0.5rem -1rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border-bottom: none;
}

.confirm-row.warning .confirm-label[b-lxzmzrqdx7] {
    color: #fbbf24;
}

.confirm-row.warning .confirm-value[b-lxzmzrqdx7] {
    color: #fbbf24;
}

.applying-state[b-lxzmzrqdx7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--mp-accent);
}

/* Responsive */
@media (max-width: 576px) {
    .form-row[b-lxzmzrqdx7] {
        grid-template-columns: 1fr;
    }

    .preview-summary[b-lxzmzrqdx7] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .quick-select[b-lxzmzrqdx7] {
        justify-content: flex-start;
    }
}
/* /Components/Shared/Modals/ModeEditModal.razor.rz.scp.css */
.stockpile-grid[b-4ka4jyzm3g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    max-height: 350px;
    overflow-y: auto;
    padding: 0.25rem;
}

.stockpile-item[b-4ka4jyzm3g] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 2px solid var(--bs-gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: rgba(255,255,255,0.03);
}

.stockpile-item:hover[b-4ka4jyzm3g] {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.stockpile-item.selected[b-4ka4jyzm3g] {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.stockpile-checkbox[b-4ka4jyzm3g] {
    padding-top: 0.125rem;
}

.stockpile-icon[b-4ka4jyzm3g] {
    font-size: 1.25rem;
    line-height: 1;
}

.stockpile-info[b-4ka4jyzm3g] {
    flex: 1;
    min-width: 0;
}

.stockpile-code[b-4ka4jyzm3g] {
    font-weight: 600;
    font-family: monospace;
    color: var(--bs-primary);
}

.stockpile-name[b-4ka4jyzm3g] {
    font-size: 0.85rem;
    color: var(--bs-gray-700);
}

.stockpile-meta[b-4ka4jyzm3g] {
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}
/* /Components/Shared/Modals/PlantEventModal.razor.rz.scp.css */
/* PlantEventModal - Content Styles */
/* Shell styling handled by ModalWrapper */

.detail-item[b-43fy8lw4fr] {
    margin-bottom: 0.5rem;
}

.detail-label[b-43fy8lw4fr] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--mp-text-muted);
    margin-bottom: 0.25rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.detail-value[b-43fy8lw4fr] {
    font-weight: 500;
}

.section-title[b-43fy8lw4fr] {
    color: var(--mp-text-secondary);
    border-bottom: 1px solid var(--mp-border);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.assigned-reason[b-43fy8lw4fr] {
    background: var(--mp-bg-surface);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--mp-border);
}

.reason-display[b-43fy8lw4fr] {
    padding: 0.75rem 1rem;
    background: var(--mp-bg-surface);
    border-radius: 6px;
    border: 1px solid var(--mp-border);
}

.reason-display .reason-code[b-43fy8lw4fr] {
    font-weight: 600;
    font-size: 1.1rem;
}

.reason-display .reason-name[b-43fy8lw4fr] {
    color: var(--mp-text-secondary);
}

.reason-meta[b-43fy8lw4fr] {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--mp-text-muted);
}

.reason-selector[b-43fy8lw4fr] {
    background: var(--mp-bg-surface);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--mp-border);
}

.reason-list[b-43fy8lw4fr] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    background: var(--mp-bg-surface);
}

.reason-item[b-43fy8lw4fr] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mp-border);
    cursor: pointer;
    border-left: 4px solid transparent;
    transition: all 0.15s ease;
    position: relative;
}

.reason-item:last-child[b-43fy8lw4fr] {
    border-bottom: none;
}

.reason-item:hover[b-43fy8lw4fr] {
    background-color: var(--mp-bg-hover);
}

.reason-item.selected[b-43fy8lw4fr] {
    background-color: var(--mp-accent-bg);
    border-left-color: var(--mp-accent);
}

.reason-item .reason-code[b-43fy8lw4fr] {
    font-weight: 600;
    font-size: 0.9rem;
}

.reason-item .reason-name[b-43fy8lw4fr] {
    font-size: 0.85rem;
    color: var(--mp-text-secondary);
}

.reason-item .selected-indicator[b-43fy8lw4fr] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.create-event-form[b-43fy8lw4fr] {
    padding: 0.5rem 0;
}

/* Scrollbar styling for reason list */
.reason-list[b-43fy8lw4fr]::-webkit-scrollbar {
    width: 6px;
}

.reason-list[b-43fy8lw4fr]::-webkit-scrollbar-track {
    background: var(--mp-bg-surface);
}

.reason-list[b-43fy8lw4fr]::-webkit-scrollbar-thumb {
    background: var(--mp-border-medium);
    border-radius: 3px;
}

.reason-list[b-43fy8lw4fr]::-webkit-scrollbar-thumb:hover {
    background: var(--mp-text-muted);
}
/* /Components/Shared/Modals/PlantModeChangeModal.razor.rz.scp.css */
/* PlantModeChangeModal - Content Styles */
/* Shell styling handled by ModalWrapper */

/* Current Mode Info */
.current-mode-info[b-8k6gqoo8e7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--mp-accent-bg);
    border: 1px solid var(--mp-accent-border);
    border-radius: 8px;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.current-mode-info .label[b-8k6gqoo8e7] {
    color: var(--mp-text-muted);
    font-size: 0.875rem;
}

.mode-badge[b-8k6gqoo8e7] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}

.mode-badge i[b-8k6gqoo8e7] {
    font-size: 0.875rem;
}

.mode-since[b-8k6gqoo8e7] {
    color: var(--mp-text-faint);
    font-size: 0.75rem;
    margin-left: auto;
}

/* Mode Selection */
.mode-selection[b-8k6gqoo8e7] {
    margin-bottom: 1.25rem;
}

.mode-selection .form-label[b-8k6gqoo8e7] {
    color: var(--mp-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.mode-grid[b-8k6gqoo8e7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mode-option[b-8k6gqoo8e7] {
    display: flex;
    align-items: stretch;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border-medium);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mode-option:hover[b-8k6gqoo8e7] {
    background: var(--mp-bg-hover);
    border-color: var(--mp-accent-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.mode-option.selected[b-8k6gqoo8e7] {
    background: rgba(59,130,246,0.08);
    border-color: #60a5fa;
}

.mode-option.current[b-8k6gqoo8e7] {
    opacity: 0.6;
}

.mode-color-bar[b-8k6gqoo8e7] {
    width: 6px;
    min-height: 100%;
}

.mode-content[b-8k6gqoo8e7] {
    flex: 1;
    padding: 0.75rem;
}

.mode-name[b-8k6gqoo8e7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--mp-text-heading);
    margin-bottom: 0.25rem;
}

.mode-name i[b-8k6gqoo8e7] {
    color: var(--mp-text-muted);
}

.mode-material[b-8k6gqoo8e7] {
    color: var(--mp-text-muted);
    font-size: 0.8125rem;
}

.mode-tph[b-8k6gqoo8e7] {
    color: var(--mp-text-faint);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.current-indicator[b-8k6gqoo8e7] {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: #22c55e;
    font-size: 1.25rem;
}

/* Change Reason */
.change-reason[b-8k6gqoo8e7] {
    margin-bottom: 1.25rem;
}

.change-reason .form-label[b-8k6gqoo8e7] {
    color: var(--mp-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Effective Time */
.effective-time[b-8k6gqoo8e7] {
    margin-bottom: 1.25rem;
}

.effective-time .form-label[b-8k6gqoo8e7] {
    color: var(--mp-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.time-options[b-8k6gqoo8e7] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.time-option[b-8k6gqoo8e7] {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border-medium);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.time-option:hover[b-8k6gqoo8e7] {
    background: var(--mp-bg-hover);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.time-option.selected[b-8k6gqoo8e7] {
    background: rgba(59,130,246,0.08);
    border-color: #60a5fa;
}

.time-option input[b-8k6gqoo8e7] {
    display: none;
}

.option-text[b-8k6gqoo8e7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mp-text-secondary);
    font-size: 0.875rem;
}

.option-text i[b-8k6gqoo8e7] {
    color: #60a5fa;
}

/* History Panel */
.history-panel[b-8k6gqoo8e7] {
    max-height: 450px;
    overflow-y: auto;
}

.history-list[b-8k6gqoo8e7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-item[b-8k6gqoo8e7] {
    display: flex;
    align-items: stretch;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border-medium);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.history-item:hover[b-8k6gqoo8e7] {
    background: var(--mp-bg-hover);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.history-item.active[b-8k6gqoo8e7] {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.05);
}

.history-color-bar[b-8k6gqoo8e7] {
    width: 5px;
    min-height: 100%;
}

.history-content[b-8k6gqoo8e7] {
    flex: 1;
    padding: 0.75rem;
    min-width: 0;
}

.history-header[b-8k6gqoo8e7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

.history-mode[b-8k6gqoo8e7] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    color: var(--mp-text-heading);
}

.history-mode i[b-8k6gqoo8e7] {
    color: var(--mp-text-muted);
}

.history-status[b-8k6gqoo8e7] {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-active[b-8k6gqoo8e7] {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.status-completed[b-8k6gqoo8e7] {
    background: rgba(107, 114, 128, 0.15);
    color: var(--mp-text-muted);
}

.status-scheduled[b-8k6gqoo8e7] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.status-cancelled[b-8k6gqoo8e7] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.history-times[b-8k6gqoo8e7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
}

.time-label[b-8k6gqoo8e7] {
    color: var(--mp-text-faint);
}

.time-value[b-8k6gqoo8e7] {
    color: var(--mp-text-secondary);
}

.history-reason[b-8k6gqoo8e7] {
    font-size: 0.8125rem;
    color: var(--mp-text-muted);
    font-style: italic;
    margin-bottom: 0.375rem;
}

.history-reason i[b-8k6gqoo8e7] {
    margin-right: 0.25rem;
    font-size: 0.75rem;
}

.history-meta[b-8k6gqoo8e7] {
    font-size: 0.75rem;
    color: var(--mp-text-faint);
}

.history-actions[b-8k6gqoo8e7] {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
}

.history-actions .badge[b-8k6gqoo8e7] {
    font-size: 0.7rem;
}
/* /Components/Shared/Modals/ShiftStockEntryModal.razor.rz.scp.css */
/* ShiftStockEntryModal - Content Styles */
/* Shell styling handled by ModalWrapper */

.shift-info[b-qtwcqqzl36] {
    background: rgba(255,255,255,0.04);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
}

.input-group .btn[b-qtwcqqzl36] {
    z-index: 0;
}

.input-group .btn.btn-success[b-qtwcqqzl36],
.input-group .btn.btn-danger[b-qtwcqqzl36] {
    z-index: 1;
}
/* /Components/Shared/Modals/SingleShiftModal.razor.rz.scp.css */
/* SingleShiftModal - Content Styles */
/* Shell styling handled by ModalWrapper */

/* Shift Preview */
.shift-preview[b-ye83yb31za] {
    background: var(--mp-bg-elevated);
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.preview-label[b-ye83yb31za] {
    color: var(--mp-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.preview-content[b-ye83yb31za] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.preview-time[b-ye83yb31za] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--mp-text-heading);
    font-size: 1.125rem;
    font-weight: 600;
}

.preview-time i[b-ye83yb31za] {
    color: var(--mp-accent-text);
    font-size: 1rem;
}

.preview-arrow[b-ye83yb31za] {
    color: var(--mp-text-faint);
    font-size: 1.25rem;
}

.preview-duration[b-ye83yb31za] {
    color: var(--mp-text-muted);
    font-size: 0.875rem;
    margin-left: auto;
}

/* Responsive */
@media (max-width: 576px) {
    .preview-content[b-ye83yb31za] {
        flex-direction: column;
        align-items: flex-start;
    }

    .preview-duration[b-ye83yb31za] {
        margin-left: 0;
    }
}
/* /Components/Shared/ModalWrapper.razor.rz.scp.css */
/* ==============================================
   ModalWrapper - Unified Modal Shell
   ==============================================
   Z-Index Strategy:
     Overlay:  1190
     Dialog:   1200
     Draggable modals: 1000-1100 (separate system)
   ============================================== */

/* Overlay / Backdrop */
.mw-overlay[b-6gv1zoqvbs] {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: mw-fade-in-b-6gv1zoqvbs 0.15s ease-out;
}

@keyframes mw-fade-in-b-6gv1zoqvbs {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Dialog Container */
.mw-dialog[b-6gv1zoqvbs] {
    position: relative;
    z-index: 1200;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: mw-slide-in-b-6gv1zoqvbs 0.2s ease-out;
}

@keyframes mw-slide-in-b-6gv1zoqvbs {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Size Variants */
.mw-sm[b-6gv1zoqvbs] { max-width: 400px; }
.mw-md[b-6gv1zoqvbs] { max-width: 550px; }
.mw-lg[b-6gv1zoqvbs] { max-width: 800px; }
.mw-xl[b-6gv1zoqvbs] { max-width: 1100px; }
.mw-detail[b-6gv1zoqvbs] { max-width: 900px; }

/* Content Shell */
.mw-content[b-6gv1zoqvbs] {
    background: var(--mp-modal-bg);
    border: 1px solid var(--mp-border-medium);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

/* ---- Header ---- */
.mw-header[b-6gv1zoqvbs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--mp-border);
    flex-shrink: 0;
    gap: 1rem;
    background: var(--mp-bg-elevated);
}

.mw-title-group[b-6gv1zoqvbs] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    flex: 1;
}

.mw-title-icon[b-6gv1zoqvbs] {
    font-size: 1.125rem;
    color: var(--mp-accent-text);
    flex-shrink: 0;
}

.mw-title[b-6gv1zoqvbs] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--mp-text-heading);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Close button */
.mw-close[b-6gv1zoqvbs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--mp-text-faint);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.mw-close:hover[b-6gv1zoqvbs] {
    background: var(--mp-bg-hover);
    color: var(--mp-text-heading);
}

.mw-close-light[b-6gv1zoqvbs] {
    color: var(--mp-text-muted);
}

.mw-close-light:hover[b-6gv1zoqvbs] {
    background: var(--mp-bg-elevated);
    color: var(--mp-text-heading);
}

/* Header Variants */
.mw-header-danger[b-6gv1zoqvbs] {
    background: #dc3545;
    border-bottom-color: #c82333;
    color: #fff;
}

.mw-header-danger .mw-title[b-6gv1zoqvbs],
.mw-header-danger .mw-title-icon[b-6gv1zoqvbs] {
    color: #fff;
}

.mw-header-warning[b-6gv1zoqvbs] {
    background: #ffc107;
    border-bottom-color: #e0a800;
    color: #1a1a2e;
}

.mw-header-warning .mw-title[b-6gv1zoqvbs],
.mw-header-warning .mw-title-icon[b-6gv1zoqvbs] {
    color: #1a1a2e;
}

.mw-header-dark[b-6gv1zoqvbs] {
    background: var(--mp-bg-surface);
    border-bottom-color: var(--mp-border-medium);
    color: var(--mp-text-heading);
}

.mw-header-dark .mw-title[b-6gv1zoqvbs],
.mw-header-dark .mw-title-icon[b-6gv1zoqvbs] {
    color: var(--mp-text-heading);
}

/* ---- Body ---- */
.mw-body[b-6gv1zoqvbs] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.mw-body-flush[b-6gv1zoqvbs] {
    padding: 0;
}

/* ---- Footer ---- */
.mw-footer[b-6gv1zoqvbs] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--mp-border);
    background: var(--mp-bg-elevated);
    flex-shrink: 0;
}

/* ---- Footer Button Styling ---- */
.mw-footer[b-6gv1zoqvbs]  .btn {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 1.125rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.15s ease;
}

.mw-footer[b-6gv1zoqvbs]  .btn-secondary {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border-medium);
    color: var(--mp-text-secondary);
}

.mw-footer[b-6gv1zoqvbs]  .btn-secondary:hover {
    background: var(--mp-bg-hover);
    border-color: var(--mp-border-medium);
}

.mw-footer[b-6gv1zoqvbs]  .btn-primary {
    background: #3b82f6;
    border: none;
    color: #fff;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}

.mw-footer[b-6gv1zoqvbs]  .btn-primary:hover {
    background: #2563eb;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.mw-footer[b-6gv1zoqvbs]  .btn-danger {
    background: #ef4444;
    border: none;
    color: #fff;
}

.mw-footer[b-6gv1zoqvbs]  .btn-danger:hover {
    background: #dc2626;
}

/* ---- Body Form Styling (via ::deep) ---- */
.mw-body[b-6gv1zoqvbs]  .form-label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--mp-text-secondary);
    margin-bottom: 0.375rem;
}

.mw-body[b-6gv1zoqvbs]  .form-control,
.mw-body[b-6gv1zoqvbs]  .form-select {
    font-size: 0.875rem;
    border: 1px solid var(--mp-input-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mw-body[b-6gv1zoqvbs]  .form-control:focus,
.mw-body[b-6gv1zoqvbs]  .form-select:focus {
    border-color: rgba(212,165,116,0.4);
    box-shadow: 0 0 0 3px rgba(212,165,116,0.1);
}

.mw-body[b-6gv1zoqvbs]  .form-control::placeholder {
    color: var(--mp-input-placeholder);
}

.mw-body[b-6gv1zoqvbs]  small.text-muted {
    font-size: 0.75rem;
    color: var(--mp-text-faint) !important;
}

/* Tabs inside modals */
.mw-body[b-6gv1zoqvbs]  .nav-tabs {
    border-bottom: 2px solid var(--mp-border);
    gap: 0;
}

.mw-body[b-6gv1zoqvbs]  .nav-tabs .nav-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mp-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.625rem 1rem;
    transition: color 0.15s ease, border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.mw-body[b-6gv1zoqvbs]  .nav-tabs .nav-link:hover {
    color: var(--mp-text-secondary);
    border-bottom-color: var(--mp-border-medium);
}

.mw-body[b-6gv1zoqvbs]  .nav-tabs .nav-link.active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
    background: transparent;
}

/* Alerts inside modals */
.mw-body[b-6gv1zoqvbs]  .alert {
    font-size: 0.875rem;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
}

.mw-body[b-6gv1zoqvbs]  .alert-danger {
    background: rgba(239,68,68,0.1);
    color: #fca5a5;
}

.mw-body[b-6gv1zoqvbs]  .alert-info {
    background: rgba(59,130,246,0.1);
    color: #93c5fd;
}

.mw-body[b-6gv1zoqvbs]  .alert-warning {
    background: rgba(234,179,8,0.1);
    color: #fde68a;
}

.mw-body[b-6gv1zoqvbs]  .alert-success {
    background: rgba(34,197,94,0.1);
    color: #86efac;
}

/* Validation messages */
.mw-body[b-6gv1zoqvbs]  .validation-message {
    color: #ef4444;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Section separators */
.mw-body[b-6gv1zoqvbs]  hr {
    border-color: var(--mp-border);
    opacity: 1;
}

/* Section headings inside modals */
.mw-body[b-6gv1zoqvbs]  h6 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mp-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Modal actions (inline footer alternative) */
.mw-body[b-6gv1zoqvbs]  .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mp-border);
    margin-top: 1.5rem;
}

/* ---- Responsive ---- */
@media (max-width: 576px) {
    .mw-overlay[b-6gv1zoqvbs] {
        padding: 0.5rem;
    }

    .mw-header[b-6gv1zoqvbs] {
        padding: 0.875rem 1rem;
    }

    .mw-title[b-6gv1zoqvbs] {
        font-size: 0.9375rem;
    }

    .mw-body[b-6gv1zoqvbs] {
        padding: 1rem;
    }

    .mw-footer[b-6gv1zoqvbs] {
        padding: 0.875rem 1rem;
    }

    .mw-sm[b-6gv1zoqvbs], .mw-md[b-6gv1zoqvbs], .mw-lg[b-6gv1zoqvbs], .mw-xl[b-6gv1zoqvbs], .mw-detail[b-6gv1zoqvbs] {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .mw-lg[b-6gv1zoqvbs], .mw-xl[b-6gv1zoqvbs], .mw-detail[b-6gv1zoqvbs] {
        max-width: 100%;
    }
}
/* /Components/Shared/OperatorDashboardFooter.razor.rz.scp.css */
/* Operator Dashboard Footer - sticky bottom bar */

.od-footer[b-gi259yl7cm] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0;
    gap: 0;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
    min-height: 56px;
    color: rgba(255,255,255,0.2);
    font-size: 0.72rem;
}

.od-footer-section[b-gi259yl7cm] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 14px;
    gap: 2px;
}

.od-footer-divider[b-gi259yl7cm] {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    align-self: stretch;
    flex-shrink: 0;
}

/* Section header */
.od-footer-section-header[b-gi259yl7cm] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
    white-space: nowrap;
}

.od-footer-section-header i[b-gi259yl7cm] {
    font-size: 0.7rem;
}

/* Shift section */
[b-gi259yl7cm] .od-footer-shift {
    min-width: 120px;
}

[b-gi259yl7cm] .od-footer-shift-name {
    font-weight: 600;
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.1;
}

[b-gi259yl7cm] .od-footer-shift-times {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
}

[b-gi259yl7cm] .od-footer-set-shift {
    font-size: 0.68rem;
    padding: 2px 8px;
    border-color: rgba(255, 193, 7, 0.5);
    color: #ffc107;
}

[b-gi259yl7cm] .od-footer-set-shift:hover {
    background: rgba(255, 193, 7, 0.15);
    border-color: #ffc107;
    color: #ffc107;
}

[b-gi259yl7cm] .od-footer-mode {
    margin-top: 1px;
}

[b-gi259yl7cm] .od-footer-mode-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

/* KPI grid */
[b-gi259yl7cm] .od-footer-kpi-grid {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

[b-gi259yl7cm] .od-footer-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 42px;
}

[b-gi259yl7cm] .od-footer-kpi-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

[b-gi259yl7cm] .od-footer-kpi-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

[b-gi259yl7cm] .od-footer-kpi-stop {
    color: #ef4444;
}

[b-gi259yl7cm] .od-footer-kpi-idle {
    color: #f59e0b;
}

/* Last shift name */
[b-gi259yl7cm] .od-footer-last-shift-name {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.35);
    margin-left: auto;
}

/* Gauge bars */
[b-gi259yl7cm] .od-footer-gauge {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 80px;
}

[b-gi259yl7cm] .od-footer-gauge-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

[b-gi259yl7cm] .od-footer-gauge-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

[b-gi259yl7cm] .od-footer-gauge-fill.oee {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

[b-gi259yl7cm] .od-footer-gauge-fill.opp {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

[b-gi259yl7cm] .od-footer-gauge-value {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    min-width: 36px;
    text-align: right;
}

/* Actions section */
[b-gi259yl7cm] .od-footer-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
}

[b-gi259yl7cm] .od-footer-snapshots-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    padding: 4px 10px;
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

[b-gi259yl7cm] .od-footer-snapshots-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

[b-gi259yl7cm] .od-footer-snapshots-btn .badge {
    font-size: 0.55rem;
    padding: 1px 4px;
}
/* /Components/Shared/PlantEventPanel.razor.rz.scp.css */
.plant-event-panel[b-w630biki4d] {
    background: var(--mp-bg-surface);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.panel-header[b-w630biki4d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--mp-bg-elevated);
    border-bottom: 1px solid var(--mp-border);
}

.panel-body[b-w630biki4d] {
    max-height: 400px;
    overflow-y: auto;
}

.event-section[b-w630biki4d] {
    border-bottom: 1px solid var(--mp-border);
}

    .event-section:last-child[b-w630biki4d] {
        border-bottom: none;
    }

.section-header[b-w630biki4d] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    background: var(--mp-bg-elevated);
}

.event-card[b-w630biki4d] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--mp-border);
}

    .event-card:last-child[b-w630biki4d] {
        border-bottom: none;
    }

    .event-card:hover[b-w630biki4d] {
        background: var(--mp-bg-hover);
    }

    .event-card.active[b-w630biki4d] {
        background: rgba(239,68,68,0.08);
    }

        .event-card.active:hover[b-w630biki4d] {
            background: rgba(239,68,68,0.12);
        }

    .event-card.pending[b-w630biki4d] {
        background: rgba(234,179,8,0.06);
    }

        .event-card.pending:hover[b-w630biki4d] {
            background: rgba(234,179,8,0.1);
        }

.event-indicator[b-w630biki4d] {
    width: 4px;
    height: 40px;
    border-radius: 2px;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.event-content[b-w630biki4d] {
    flex: 1;
    min-width: 0;
}

.event-time[b-w630biki4d] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mp-text);
}

    .event-time .duration[b-w630biki4d] {
        color: var(--mp-text-muted);
        font-weight: normal;
        font-size: 0.85rem;
    }

.event-type[b-w630biki4d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.badge-sm[b-w630biki4d] {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
}

.reason-badge[b-w630biki4d] {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--mp-bg-elevated);
    color: var(--mp-text-heading);
}

.reason-desc[b-w630biki4d] {
    font-size: 0.8rem;
    color: var(--mp-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-footer[b-w630biki4d] {
    padding: 0.75rem 1rem;
    background: var(--mp-bg-elevated);
    border-top: 1px solid var(--mp-border);
}

.summary-stats[b-w630biki4d] {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.stat[b-w630biki4d] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-w630biki4d] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mp-text);
}

.stat-label[b-w630biki4d] {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--mp-text-muted);
}

/* Scrollbar styling */
.panel-body[b-w630biki4d]::-webkit-scrollbar {
    width: 6px;
}

.panel-body[b-w630biki4d]::-webkit-scrollbar-track {
    background: var(--mp-bg-surface);
}

.panel-body[b-w630biki4d]::-webkit-scrollbar-thumb {
    background: var(--mp-border-medium);
    border-radius: 3px;
}

.panel-body[b-w630biki4d]::-webkit-scrollbar-thumb:hover {
    background: var(--mp-text-muted);
}
/* /Components/Shared/PlantSelector.razor.rz.scp.css */
.plant-selector[b-bvtbmuvnst] {
    position: relative;
    min-width: 250px;
}

.plant-selector-trigger[b-bvtbmuvnst] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.plant-selector-trigger:hover[b-bvtbmuvnst] {
    border-color: rgba(212,165,116,0.4);
}

.plant-selector.open .plant-selector-trigger[b-bvtbmuvnst] {
    border-color: rgba(212,165,116,0.4);
    box-shadow: 0 0 0 0.2rem rgba(212, 165, 116, 0.1);
}

.selected-plant[b-bvtbmuvnst],
.placeholder[b-bvtbmuvnst] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.selected-plant .plant-info[b-bvtbmuvnst] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.selected-plant .plant-name[b-bvtbmuvnst] {
    font-weight: 500;
    color: var(--mp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected-plant .plant-hierarchy[b-bvtbmuvnst] {
    font-size: 0.75rem;
    color: var(--mp-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.placeholder[b-bvtbmuvnst] {
    color: var(--mp-text-muted);
    background: transparent !important;
    background-image: none !important;
    opacity: 1 !important;
}

.placeholder i[b-bvtbmuvnst] {
    color: var(--mp-text-faint);
    background: transparent !important;
}

.dropdown-arrow[b-bvtbmuvnst] {
    margin-left: auto;
    transition: transform 0.2s ease;
    color: var(--mp-text-muted);
}

.plant-selector.open .dropdown-arrow[b-bvtbmuvnst] {
    transform: rotate(180deg);
}

/* Dropdown */
.plant-dropdown[b-bvtbmuvnst] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 320px;
    max-height: 400px;
    background: var(--mp-dropdown-bg);
    border: 1px solid var(--mp-border-medium);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Search Box */
.search-box[b-bvtbmuvnst] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--mp-border);
    background: var(--mp-bg-surface);
}

.search-box i.bi-search[b-bvtbmuvnst] {
    color: var(--mp-text-muted);
}

    .search-box input[b-bvtbmuvnst] {
        flex: 1;
        border: none;
        background: transparent;
        padding: 0;
        font-size: 0.875rem;
        color: var(--mp-input-text);
        caret-color: var(--mp-accent) !important;
    }

.search-box input:focus[b-bvtbmuvnst] {
    outline: none;
    box-shadow: none;
}

.btn-clear[b-bvtbmuvnst] {
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--mp-text-muted);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-clear:hover[b-bvtbmuvnst] {
    background: var(--mp-bg-hover);
    color: var(--mp-text);
}

/* Plant List */
.plant-list[b-bvtbmuvnst] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
    background: transparent;
}

.loading[b-bvtbmuvnst],
.no-results[b-bvtbmuvnst] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--mp-text-muted);
}

.no-results i[b-bvtbmuvnst] {
    font-size: 1.5rem;
    opacity: 0.5;
}

/* Company Group */
.company-group[b-bvtbmuvnst] {
    margin-bottom: 0.5rem;
}

.company-header[b-bvtbmuvnst] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--mp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--mp-bg-surface);
    border-top: 1px solid var(--mp-border);
    border-bottom: 1px solid var(--mp-border);
}

.company-group:first-child .company-header[b-bvtbmuvnst] {
    border-top: none;
}

.company-header i[b-bvtbmuvnst] {
    font-size: 0.875rem;
    color: var(--mp-accent-text);
}

/* Operation Group */
.operation-group[b-bvtbmuvnst] {
    margin-left: 0.5rem;
}

.operation-header[b-bvtbmuvnst] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mp-text-muted);
}

.operation-header i[b-bvtbmuvnst] {
    font-size: 0.75rem;
    color: #4ade80;
}

/* Plant Item */
.plant-item[b-bvtbmuvnst] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    color: var(--mp-text);
}

.plant-item:hover[b-bvtbmuvnst] {
    background: var(--mp-bg-hover);
}

.plant-item.selected[b-bvtbmuvnst] {
    background: var(--mp-accent-bg);
    color: var(--mp-accent-text);
}

.plant-item i.bi-diagram-3[b-bvtbmuvnst] {
    font-size: 0.875rem;
    color: #60a5fa;
}

.plant-item.selected i.bi-diagram-3[b-bvtbmuvnst] {
    color: var(--mp-accent-text);
}

.plant-item .plant-name[b-bvtbmuvnst] {
    flex: 1;
    font-size: 0.875rem;
}

.plant-item .check-icon[b-bvtbmuvnst] {
    color: var(--mp-accent-text);
}

/* Backdrop */
.plant-selector-backdrop[b-bvtbmuvnst] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
}
/* /Components/Shared/PlantSelectorDropdown.razor.rz.scp.css */
.plant-selector-dropdown[b-1eq8ec1015] {
    min-width: 300px;
}

.plant-selector-dropdown .form-label[b-1eq8ec1015] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.plant-selector-dropdown .form-select[b-1eq8ec1015] {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.95);
    padding: 0.625rem 1rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.plant-selector-dropdown .form-select:focus[b-1eq8ec1015] {
    border-color: white;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
    background: rgba(255,255,255,0.03);
}

.plant-selector-dropdown .form-select:disabled[b-1eq8ec1015] {
    background-color: rgba(255, 255, 255, 0.7);
    cursor: not-allowed;
}

.plant-selector-compact[b-1eq8ec1015] {
    min-width: 250px;
}

.plant-selector-compact .form-select[b-1eq8ec1015] {
    font-size: 0.9rem;
    padding: 0.5rem 0.875rem;
}

/* For use outside gradient headers */
.plant-selector-standard .form-label[b-1eq8ec1015] {
    color: var(--bs-secondary);
}

.plant-selector-standard .form-select[b-1eq8ec1015] {
    border: 2px solid var(--bs-border-color);
    background: rgba(255,255,255,0.03);
}

.plant-selector-standard .form-select:focus[b-1eq8ec1015] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

@media (max-width: 768px) {
    .plant-selector-dropdown[b-1eq8ec1015] {
        width: 100%;
        min-width: unset;
    }
}
/* /Components/Shared/ProductionSnapshotCard.razor.rz.scp.css */
.snapshot-card[b-gf3rhd3xum] {
    background: var(--mp-bg-surface);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1.25rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.snapshot-card:hover[b-gf3rhd3xum] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.snapshot-header[b-gf3rhd3xum] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--mp-border);
}

.snapshot-time[b-gf3rhd3xum] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mp-text-secondary);
}

.snapshot-time i[b-gf3rhd3xum] {
    color: var(--primary-color, #3498db);
}

.time-separator[b-gf3rhd3xum] {
    color: var(--mp-text-faint);
}

.mode-indicator[b-gf3rhd3xum] {
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}

.snapshot-body[b-gf3rhd3xum] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.primary-metric[b-gf3rhd3xum] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--mp-bg-elevated);
    border-radius: 8px;
}

.primary-metric i[b-gf3rhd3xum] {
    font-size: 2rem;
}

.metric-value[b-gf3rhd3xum] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--mp-text);
}

.metric-unit[b-gf3rhd3xum] {
    font-size: 0.875rem;
    color: var(--mp-text-muted);
    margin-left: 0.25rem;
}

.secondary-metrics[b-gf3rhd3xum] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.metric-item[b-gf3rhd3xum] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--mp-text-secondary);
}

.metric-item i[b-gf3rhd3xum] {
    color: var(--primary-color, #3498db);
}

.movements-summary[b-gf3rhd3xum] {
    padding: 0.5rem 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 6px;
}

.movements-label[b-gf3rhd3xum] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.813rem;
    color: var(--primary-color, #3498db);
}

.quality-indicator[b-gf3rhd3xum] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.quality-good[b-gf3rhd3xum] {
    background: rgba(39, 174, 96, 0.1);
    color: #27ae60;
}

.quality-warning[b-gf3rhd3xum] {
    background: rgba(251,146,60,0.08);
    color: #f39c12;
}

.adjusted-badge[b-gf3rhd3xum] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: rgba(251,146,60,0.08);
    border: 1px solid #f39c12;
    color: #f39c12;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    align-self: flex-start;
}

@media (max-width: 768px) {
    .snapshot-card[b-gf3rhd3xum] {
        padding: 1rem;
    }

    .primary-metric[b-gf3rhd3xum] {
        padding: 0.75rem;
    }

    .metric-value[b-gf3rhd3xum] {
        font-size: 1.5rem;
    }
}
/* /Components/Shared/SearchableDropdown.razor.rz.scp.css */
.searchable-dropdown[b-4wxgywelzq] {
    position: relative;
    width: 100%;
}

.dropdown-input-wrapper[b-4wxgywelzq] {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown-input-wrapper input[b-4wxgywelzq] {
    padding-right: 60px;
}

.dropdown-input-wrapper .btn-clear[b-4wxgywelzq],
.dropdown-input-wrapper .btn-toggle[b-4wxgywelzq] {
    position: absolute;
    right: 0;
    border: none;
    background: transparent;
    padding: 0.375rem 0.5rem;
    color: var(--mp-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-input-wrapper .btn-clear[b-4wxgywelzq] {
    right: 28px;
}

.dropdown-input-wrapper .btn-clear:hover[b-4wxgywelzq],
.dropdown-input-wrapper .btn-toggle:hover[b-4wxgywelzq] {
    color: var(--mp-text);
}

.searchable-dropdown .dropdown-menu[b-4wxgywelzq] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1060;
    margin-top: 2px;
    padding: 0.25rem 0;
    background: var(--mp-dropdown-bg);
    border: 1px solid var(--mp-border);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
}

.searchable-dropdown .dropdown-item[b-4wxgywelzq] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease-in-out;
}

.searchable-dropdown .dropdown-item:hover[b-4wxgywelzq],
.searchable-dropdown .dropdown-item.highlighted[b-4wxgywelzq] {
    background-color: var(--mp-bg-hover);
}

.searchable-dropdown .dropdown-item.selected[b-4wxgywelzq] {
    background-color: var(--mp-accent-bg);
    border-left-color: var(--mp-accent);
}

.searchable-dropdown .dropdown-item .bi-check[b-4wxgywelzq] {
    color: #4ade80;
    font-size: 1rem;
}

/* Item content styling */
.searchable-dropdown .dropdown-item .item-code[b-4wxgywelzq] {
    font-weight: 600;
    margin-right: 0.75rem;
    white-space: nowrap;
}

.searchable-dropdown .dropdown-item .item-name[b-4wxgywelzq] {
    color: var(--mp-text-muted);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0.5rem;
}

.searchable-dropdown .dropdown-item .badge[b-4wxgywelzq] {
    margin-left: auto;
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* Scrollbar styling */
.searchable-dropdown .dropdown-menu[b-4wxgywelzq]::-webkit-scrollbar {
    width: 6px;
}

.searchable-dropdown .dropdown-menu[b-4wxgywelzq]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.searchable-dropdown .dropdown-menu[b-4wxgywelzq]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.searchable-dropdown .dropdown-menu[b-4wxgywelzq]::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}
/* /Components/Shared/SearchableMultiSelect.razor.rz.scp.css */
.searchable-multi-select[b-zifrgibs0r] {
    position: relative;
    width: 100%;
}

.multi-select-wrapper[b-zifrgibs0r] {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background: rgba(255,255,255,0.03);
    min-height: 38px;
    cursor: text;
}

.multi-select-wrapper:focus-within[b-zifrgibs0r] {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.multi-select-wrapper input[b-zifrgibs0r] {
    flex: 1;
    min-width: 100px;
    border: none;
    outline: none;
    padding: 0.25rem 0.5rem;
    background: transparent;
}

.multi-select-wrapper input:focus[b-zifrgibs0r] {
    box-shadow: none;
}

.multi-select-wrapper .btn-toggle[b-zifrgibs0r] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0.375rem 0.5rem;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
}

.multi-select-wrapper .btn-toggle:hover[b-zifrgibs0r] {
    color: rgba(255,255,255,0.85);
}

.selected-tags[b-zifrgibs0r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.tag[b-zifrgibs0r] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    background: rgba(255,255,255,0.06);
    border-radius: 0.25rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.tag-more[b-zifrgibs0r] {
    background: #0d6efd;
    color: white;
}

.tag-remove[b-zifrgibs0r] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    margin-left: 0.25rem;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    font-size: 0.9rem;
}

.tag-remove:hover[b-zifrgibs0r] {
    color: #dc3545;
}

.searchable-multi-select .dropdown-menu[b-zifrgibs0r] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1060;
    margin-top: 2px;
    padding: 0.25rem 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.searchable-multi-select .dropdown-item[b-zifrgibs0r] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.searchable-multi-select .dropdown-item:hover[b-zifrgibs0r],
.searchable-multi-select .dropdown-item.highlighted[b-zifrgibs0r] {
    background-color: rgba(255,255,255,0.04);
}

.searchable-multi-select .dropdown-item.selected[b-zifrgibs0r] {
    background-color: #e7f1ff;
}

.searchable-multi-select .dropdown-item .form-check-input[b-zifrgibs0r] {
    margin-top: 0;
    cursor: pointer;
}

.searchable-multi-select .dropdown-item .item-code[b-zifrgibs0r] {
    font-weight: 600;
    margin-right: 0.75rem;
    white-space: nowrap;
}

.searchable-multi-select .dropdown-item .item-name[b-zifrgibs0r] {
    color: rgba(255,255,255,0.45);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-multi-select .dropdown-footer[b-zifrgibs0r] {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 0.25rem;
}

/* Scrollbar styling */
.searchable-multi-select .dropdown-menu[b-zifrgibs0r]::-webkit-scrollbar {
    width: 6px;
}

.searchable-multi-select .dropdown-menu[b-zifrgibs0r]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.searchable-multi-select .dropdown-menu[b-zifrgibs0r]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.searchable-multi-select .dropdown-menu[b-zifrgibs0r]::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}
/* /Components/Shared/ShiftMatrixEditor.razor.rz.scp.css */
/* Shift Matrix Editor Styles */
.shift-matrix-editor[b-zkico6mar9] {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.matrix-header h4[b-zkico6mar9] {
    margin: 0 0 0.25rem;
    color: #1a1a2e;
    font-size: 1.125rem;
    font-weight: 600;
}

.matrix-header .text-muted[b-zkico6mar9] {
    margin: 0 0 1rem;
    font-size: 0.875rem;
}

/* Quick Actions */
.matrix-actions[b-zkico6mar9] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.matrix-actions .btn[b-zkico6mar9] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
}

/* Matrix Container */
.matrix-container[b-zkico6mar9] {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.matrix-table[b-zkico6mar9] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    min-width: 600px;
}

/* Header Cells */
.shift-header[b-zkico6mar9] {
    text-align: left;
    padding: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 150px;
}

.day-header[b-zkico6mar9] {
    text-align: center;
    padding: 0.75rem 0.5rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    font-size: 0.8125rem;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    min-width: 70px;
}

.day-header.weekend[b-zkico6mar9] {
    background: #fef3c7;
    color: #fde68a;
}

.day-short[b-zkico6mar9] {
    display: none;
}

.day-full[b-zkico6mar9] {
    display: inline;
}

@media (max-width: 768px) {
    .day-short[b-zkico6mar9] {
        display: inline;
    }
    .day-full[b-zkico6mar9] {
        display: none;
    }
}

/* Shift Row */
.shift-row[b-zkico6mar9] {
    transition: background-color 0.15s ease;
}

.shift-row:hover[b-zkico6mar9] {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Shift Name Cell */
.shift-name-cell[b-zkico6mar9] {
    padding: 0.5rem 0.75rem;
}

.shift-info[b-zkico6mar9] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.shift-color[b-zkico6mar9] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.shift-name[b-zkico6mar9] {
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    font-size: 0.9375rem;
}

.shift-time[b-zkico6mar9] {
    color: rgba(255,255,255,0.35);
    font-size: 0.8125rem;
    margin-left: auto;
}

/* Matrix Cells */
.matrix-cell[b-zkico6mar9] {
    width: 70px;
    height: 48px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 6px;
    border: 2px solid transparent;
    background: rgba(255,255,255,0.04);
    transition: all 0.15s ease;
}

.matrix-cell:hover[b-zkico6mar9] {
    background: rgba(255,255,255,0.06);
    transform: scale(1.02);
}

.matrix-cell.active[b-zkico6mar9] {
    border-width: 2px;
    border-style: solid;
}

.matrix-cell.active i[b-zkico6mar9] {
    font-size: 1.25rem;
    font-weight: bold;
}

.matrix-cell.weekend[b-zkico6mar9] {
    background: #fefce8;
}

.matrix-cell.weekend:hover[b-zkico6mar9] {
    background: #fef9c3;
}

.matrix-cell.weekend.active[b-zkico6mar9] {
    background-color: inherit;
}

/* Legend */
.matrix-legend[b-zkico6mar9] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 1rem;
}

.legend-item[b-zkico6mar9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.45);
}

.legend-box[b-zkico6mar9] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.08);
}

.legend-box.active[b-zkico6mar9] {
    background: rgba(212, 165, 116, 0.2);
    border-color: #d4a574;
}

.legend-box.weekend[b-zkico6mar9] {
    background: #fefce8;
    border-color: #fef9c3;
}

/* Summary */
.matrix-summary[b-zkico6mar9] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.summary-item[b-zkico6mar9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    min-width: 100px;
}

.summary-value[b-zkico6mar9] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1;
}

.summary-label[b-zkico6mar9] {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.25rem;
}

/* Responsive */
@media (max-width: 640px) {
    .shift-matrix-editor[b-zkico6mar9] {
        padding: 1rem;
    }
    
    .matrix-actions[b-zkico6mar9] {
        justify-content: center;
    }
    
    .shift-header[b-zkico6mar9] {
        min-width: 120px;
    }
    
    .day-header[b-zkico6mar9] {
        min-width: 50px;
        padding: 0.5rem 0.25rem;
    }
    
    .matrix-cell[b-zkico6mar9] {
        width: 50px;
        height: 40px;
    }
    
    .shift-time[b-zkico6mar9] {
        display: none;
    }
    
    .matrix-summary[b-zkico6mar9] {
        justify-content: center;
    }
    
    .summary-item[b-zkico6mar9] {
        flex: 1;
        min-width: 80px;
        padding: 0.5rem 1rem;
    }
}
/* /Components/Shared/ShiftModeDetailsModal.razor.rz.scp.css */
/* Backdrop - semi-transparent, not too dark */
.shift-mode-backdrop[b-r6vayak113] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1050;
}

/* Modal content */
.shift-mode-modal[b-r6vayak113] {
    background: var(--mp-modal-bg);
    border: 1px solid var(--mp-accent-border);
    color: var(--mp-text);
    z-index: 1055;
}

.shift-mode-modal .modal-header[b-r6vayak113] {
    border-bottom: 1px solid rgba(212, 165, 116, 0.2);
}

.shift-mode-modal .modal-title[b-r6vayak113] {
    color: #d4a574;
}

/* Grid layout */
.shift-mode-grid[b-r6vayak113] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Detail cards */
.detail-card[b-r6vayak113] {
    background: var(--mp-bg-surface);
    border-radius: 12px;
    border: 1px solid var(--mp-border-medium);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.detail-card-header[b-r6vayak113] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--mp-accent-bg);
    color: var(--mp-accent-text);
    font-weight: 600;
    border-bottom: 1px solid var(--mp-accent-border);
}

.detail-card-header i[b-r6vayak113] {
    font-size: 1rem;
}

/* Card header action buttons - always visible */
.btn-card-action[b-r6vayak113] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--mp-accent-border);
    background: var(--mp-bg-surface);
    color: var(--mp-accent-text);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.btn-card-action:hover[b-r6vayak113] {
    background: var(--mp-accent);
    color: #1a1a2e;
    border-color: var(--mp-accent);
    box-shadow: 0 2px 6px rgba(212, 165, 116, 0.25);
}

.detail-card-body[b-r6vayak113] {
    padding: 1rem;
}

/* Detail rows */
.detail-row[b-r6vayak113] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mp-border);
}

.detail-row:last-child[b-r6vayak113] {
    border-bottom: none;
}

.detail-row:hover[b-r6vayak113] {
    background: var(--mp-bg-hover);
    margin: 0 -1rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
}

.detail-label[b-r6vayak113] {
    color: var(--mp-text-muted);
    font-size: 0.8125rem;
}

.detail-value[b-r6vayak113] {
    color: var(--mp-text-heading);
    font-weight: 500;
}

.shift-time-large[b-r6vayak113] {
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

/* Shift status badges */
.shift-status[b-r6vayak113] {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-active[b-r6vayak113] {
    background: rgba(25, 135, 84, 0.15);
    color: #16a34a;
    border: 1px solid rgba(25, 135, 84, 0.25);
}

.status-completed[b-r6vayak113] {
    background: rgba(108, 117, 125, 0.2);
    color: var(--mp-text-muted);
}

.status-scheduled[b-r6vayak113] {
    background: rgba(13, 110, 253, 0.12);
    color: #2563eb;
    border: 1px solid rgba(13, 110, 253, 0.2);
}

/* Mode display */
.mode-display[b-r6vayak113] {
    margin-bottom: 1rem;
}

.mode-badge-large[b-r6vayak113] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

/* Empty state */
.no-data-large[b-r6vayak113] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    background: var(--mp-bg-elevated);
    border-radius: 8px;
    border: 1px dashed var(--mp-border-medium);
}

.no-data-large i[b-r6vayak113] {
    font-size: 2rem;
    color: var(--mp-text-faint);
}

.no-data-large span[b-r6vayak113] {
    color: var(--mp-text-muted);
    font-weight: 500;
}

.no-data-large small[b-r6vayak113] {
    color: var(--mp-text-faint);
    font-size: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
    .shift-mode-grid[b-r6vayak113] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/ShiftProductionSummary.razor.rz.scp.css */
.shift-production-summary[b-zi5sxhauy1] {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.summary-header[b-zi5sxhauy1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.shift-info h5[b-zi5sxhauy1] {
    color: white;
}

.shift-info small[b-zi5sxhauy1] {
    color: rgba(255,255,255,0.8) !important;
}

.shift-status .badge[b-zi5sxhauy1] {
    font-size: 0.75rem;
}

/* Metrics Grid */
.metrics-grid[b-zi5sxhauy1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.06);
}

.metric-card[b-zi5sxhauy1] {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: rgba(255,255,255,0.03);
    gap: 0.75rem;
}

.metric-icon[b-zi5sxhauy1] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.metric-card.production .metric-icon[b-zi5sxhauy1] {
    background: #d4edda;
    color: #28a745;
}

.metric-card.runtime .metric-icon[b-zi5sxhauy1] {
    background: #cce5ff;
    color: #d4a574;
}

.metric-card.downtime .metric-icon[b-zi5sxhauy1] {
    background: #e2e3e5;
    color: rgba(255,255,255,0.45);
}

.metric-card.downtime.has-downtime .metric-icon[b-zi5sxhauy1] {
    background: #f8d7da;
    color: #dc3545;
}

.metric-card.tph .metric-icon[b-zi5sxhauy1] {
    background: rgba(234,179,8,0.08);
    color: #856404;
}

.metric-value[b-zi5sxhauy1] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.metric-label[b-zi5sxhauy1] {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

/* Section Styles */
.section-title[b-zi5sxhauy1] {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* OEE Section */
.oee-section[b-zi5sxhauy1] {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.oee-bars[b-zi5sxhauy1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.oee-item[b-zi5sxhauy1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.oee-label[b-zi5sxhauy1] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

.oee-value[b-zi5sxhauy1] {
    font-weight: 600;
}

/* Events Section */
.events-section[b-zi5sxhauy1] {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.events-breakdown[b-zi5sxhauy1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-item[b-zi5sxhauy1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    border-left: 4px solid #6c757d;
}

.category-item.pending[b-zi5sxhauy1] {
    background: rgba(234,179,8,0.08);
    border-left-color: #ffc107;
}

.category-name[b-zi5sxhauy1] {
    font-weight: 500;
    font-size: 0.85rem;
}

.category-stats[b-zi5sxhauy1] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.stat-count[b-zi5sxhauy1] {
    font-weight: 600;
}

.stat-duration[b-zi5sxhauy1] {
    color: rgba(255,255,255,0.45);
}

/* Stock Section */
.stock-section[b-zi5sxhauy1] {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.stock-list[b-zi5sxhauy1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stock-item[b-zi5sxhauy1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .stock-item:hover[b-zi5sxhauy1] {
        background: rgba(255,255,255,0.06);
    }

.stock-info[b-zi5sxhauy1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stock-name[b-zi5sxhauy1] {
    font-weight: 500;
    font-size: 0.9rem;
}

.stock-type[b-zi5sxhauy1] {
    font-size: 0.65rem;
}

.stock-qty[b-zi5sxhauy1] {
    font-weight: 600;
    font-size: 0.9rem;
}

    .stock-qty.positive[b-zi5sxhauy1] {
        color: #28a745;
    }

    .stock-qty.negative[b-zi5sxhauy1] {
        color: #dc3545;
    }

/* Actions */
.summary-actions[b-zi5sxhauy1] {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.04);
}

/* Responsive */
@media (max-width: 768px) {
    .metrics-grid[b-zi5sxhauy1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .metrics-grid[b-zi5sxhauy1] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/StockpileCard.razor.rz.scp.css */
.stockpile-card[b-bf0uspn4oh] {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.stockpile-card.clickable[b-bf0uspn4oh] {
    cursor: pointer;
}

.stockpile-card.clickable:hover[b-bf0uspn4oh] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.stockpile-card.fill-critical[b-bf0uspn4oh] {
    border-color: var(--danger-color, #e74c3c);
}

.stockpile-card.fill-high[b-bf0uspn4oh] {
    border-color: var(--warning-color, #f39c12);
}

/* Header */
.stockpile-header[b-bf0uspn4oh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.stockpile-title[b-bf0uspn4oh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stockpile-code[b-bf0uspn4oh] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary-color, #3498db);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stockpile-category[b-bf0uspn4oh] {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stockpile-actions[b-bf0uspn4oh] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-bf0uspn4oh] {
    padding: 0.375rem;
    line-height: 1;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    transition: all 0.2s;
}

.btn-icon:hover[b-bf0uspn4oh] {
    background: var(--primary-color, #3498db);
    border-color: var(--primary-color, #3498db);
    color: white;
}

/* Body */
.stockpile-body[b-bf0uspn4oh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stockpile-name[b-bf0uspn4oh] {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    margin: 0;
    line-height: 1.3;
}

.stockpile-material[b-bf0uspn4oh] {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.45);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Level Visualization */
.stockpile-level[b-bf0uspn4oh] {
    margin: 0.5rem 0;
}

.level-bar[b-bf0uspn4oh] {
    width: 100%;
    height: 32px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.level-fill[b-bf0uspn4oh] {
    height: 100%;
    transition: width 0.5s ease, background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.5rem;
    position: relative;
}

.level-fill.fill-critical[b-bf0uspn4oh] {
    background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%);
}

.level-fill.fill-low[b-bf0uspn4oh] {
    background: linear-gradient(90deg, #f39c12 0%, #e67e22 100%);
}

.level-fill.fill-good[b-bf0uspn4oh] {
    background: linear-gradient(90deg, #27ae60 0%, #229954 100%);
}

.level-fill.fill-high[b-bf0uspn4oh] {
    background: linear-gradient(90deg, #f39c12 0%, #e67e22 100%);
}

.level-text[b-bf0uspn4oh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.fill-percentage[b-bf0uspn4oh] {
    font-weight: 700;
    color: rgba(255,255,255,0.8);
}

.level-status[b-bf0uspn4oh] {
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.fill-critical .level-status[b-bf0uspn4oh] {
    background: #ffe6e6;
    color: #e74c3c;
}

.fill-low .level-status[b-bf0uspn4oh] {
    background: rgba(251,146,60,0.08);
    color: #f39c12;
}

.fill-good .level-status[b-bf0uspn4oh] {
    background: #e8f8f0;
    color: #27ae60;
}

.fill-high .level-status[b-bf0uspn4oh] {
    background: rgba(251,146,60,0.08);
    color: #f39c12;
}

/* Stats */
.stockpile-stats[b-bf0uspn4oh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
}

.stat[b-bf0uspn4oh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label[b-bf0uspn4oh] {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value[b-bf0uspn4oh] {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
}

/* Metadata */
.stockpile-device[b-bf0uspn4oh],
.stockpile-location[b-bf0uspn4oh],
.stockpile-reconciled[b-bf0uspn4oh] {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stockpile-device i[b-bf0uspn4oh],
.stockpile-location i[b-bf0uspn4oh],
.stockpile-reconciled i[b-bf0uspn4oh] {
    color: var(--primary-color, #3498db);
}

/* Footer */
.stockpile-footer[b-bf0uspn4oh] {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.alert-indicators[b-bf0uspn4oh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.alert-badge[b-bf0uspn4oh] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.alert-badge i[b-bf0uspn4oh] {
    font-size: 0.875rem;
}

.alert-low[b-bf0uspn4oh] {
    background: rgba(251,146,60,0.08);
    color: #f39c12;
    border: 1px solid #f39c12;
}

.alert-high[b-bf0uspn4oh] {
    background: rgba(251,146,60,0.08);
    color: #f39c12;
    border: 1px solid #f39c12;
}

.alert-inactive[b-bf0uspn4oh] {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.45);
    border: 1px solid rgba(255,255,255,0.08);
}

/* Responsive */
@media (max-width: 768px) {
    .stockpile-card[b-bf0uspn4oh] {
        padding: 1rem;
    }

    .stockpile-stats[b-bf0uspn4oh] {
        gap: 0.75rem;
    }

    .stat-value[b-bf0uspn4oh] {
        font-size: 0.875rem;
    }
}
/* /Components/Shared/StockpileDetailModal.razor.rz.scp.css */
/* StockpileDetailModal - Content Styles */
/* Shell styling handled by ModalWrapper */

.stockpile-code-badge[b-lhcvxym9nw] {
    padding: 0.375rem 0.75rem;
    background: var(--primary-color, #3498db);
    color: white;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Summary Section */
.detail-summary[b-lhcvxym9nw] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.summary-row[b-lhcvxym9nw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.summary-item[b-lhcvxym9nw] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-label[b-lhcvxym9nw] {
    font-size: 0.75rem;
    color: var(--mp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value[b-lhcvxym9nw] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mp-text-heading);
}

/* Level Section */
.level-section[b-lhcvxym9nw] {
    background: var(--mp-bg-surface);
    padding: 1.5rem;
    border-radius: 8px;
}

.level-header[b-lhcvxym9nw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.level-header h5[b-lhcvxym9nw] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mp-text-heading);
    margin: 0;
}

.fill-percentage[b-lhcvxym9nw] {
    font-size: 1.5rem;
    font-weight: 700;
}

.fill-percentage.fill-critical[b-lhcvxym9nw] { color: #e74c3c; }
.fill-percentage.fill-low[b-lhcvxym9nw] { color: #f39c12; }
.fill-percentage.fill-good[b-lhcvxym9nw] { color: #27ae60; }
.fill-percentage.fill-high[b-lhcvxym9nw] { color: #f39c12; }

.level-bar-large[b-lhcvxym9nw] {
    height: 48px;
    background: var(--mp-bg-elevated);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    margin-bottom: 1rem;
}

.level-fill[b-lhcvxym9nw] {
    height: 100%;
    transition: width 0.5s ease;
}

.level-fill.fill-critical[b-lhcvxym9nw] {
    background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%);
}

.level-fill.fill-low[b-lhcvxym9nw] {
    background: linear-gradient(90deg, #f39c12 0%, #e67e22 100%);
}

.level-fill.fill-good[b-lhcvxym9nw] {
    background: linear-gradient(90deg, #27ae60 0%, #229954 100%);
}

.level-fill.fill-high[b-lhcvxym9nw] {
    background: linear-gradient(90deg, #f39c12 0%, #e67e22 100%);
}

.level-stats[b-lhcvxym9nw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.stat-item[b-lhcvxym9nw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stat-item i[b-lhcvxym9nw] {
    font-size: 1.5rem;
    color: var(--primary-color, #3498db);
}

.stat-item .stat-label[b-lhcvxym9nw] {
    font-size: 0.75rem;
    color: var(--mp-text-muted);
}

.stat-item .stat-value[b-lhcvxym9nw] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mp-text-heading);
}

/* Info Sections */
.linked-device-info[b-lhcvxym9nw],
.reconciliation-info[b-lhcvxym9nw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #e3f2fd;
    border-left: 4px solid var(--primary-color, #3498db);
    border-radius: 4px;
    font-size: 0.875rem;
}

.reconciliation-info[b-lhcvxym9nw] {
    background: #e8f8f0;
    border-left-color: #27ae60;
}

/* Movements Section */
.movements-section[b-lhcvxym9nw] {
    margin-top: 2rem;
}

.section-header[b-lhcvxym9nw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--mp-border);
}

.section-header h5[b-lhcvxym9nw] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mp-text-heading);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.movements-table-container[b-lhcvxym9nw] {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--mp-border);
}

.movements-table[b-lhcvxym9nw] {
    width: 100%;
    border-collapse: collapse;
}

.movements-table thead[b-lhcvxym9nw] {
    background: var(--mp-bg-elevated);
}

.movements-table th[b-lhcvxym9nw] {
    padding: 0.75rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mp-accent-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--mp-accent-border);
}

.movements-table tbody tr[b-lhcvxym9nw] {
    border-bottom: 1px solid var(--mp-border);
    transition: background-color 0.2s;
}

.movements-table tbody tr:hover[b-lhcvxym9nw] {
    background: var(--mp-bg-hover);
}

.movements-table td[b-lhcvxym9nw] {
    padding: 0.75rem;
    font-size: 0.875rem;
}

.movement-date[b-lhcvxym9nw] {
    font-weight: 500;
    color: var(--mp-text-secondary);
}

.movement-type-badge[b-lhcvxym9nw] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--mp-bg-elevated);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.movement-production[b-lhcvxym9nw] { background: #e8f8f0; }
.movement-consumption[b-lhcvxym9nw] { background: #ffe6e6; }
.movement-delivery[b-lhcvxym9nw] { background: #e3f2fd; }

.movement-reference[b-lhcvxym9nw] {
    color: var(--mp-text-muted);
    font-size: 0.813rem;
}

.system-badge[b-lhcvxym9nw],
.user-badge[b-lhcvxym9nw] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.system-badge[b-lhcvxym9nw] {
    background: var(--mp-bg-elevated);
    color: var(--mp-text-muted);
}

.user-badge[b-lhcvxym9nw] {
    background: #e3f2fd;
    color: var(--primary-color, #3498db);
}

.movement-notes-row td[b-lhcvxym9nw] {
    padding: 0.5rem 0.75rem;
    background: var(--mp-bg-surface);
}

.empty-movements[b-lhcvxym9nw] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--mp-text-muted);
}

.empty-movements i[b-lhcvxym9nw] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.loading-spinner[b-lhcvxym9nw] {
    text-align: center;
    padding: 3rem 2rem;
}

.loading-spinner .spinner-border[b-lhcvxym9nw] {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .movements-table[b-lhcvxym9nw] {
        font-size: 0.813rem;
    }

    .movements-table th[b-lhcvxym9nw],
    .movements-table td[b-lhcvxym9nw] {
        padding: 0.5rem;
    }

    .level-stats[b-lhcvxym9nw] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/TeamRotationEditor.razor.rz.scp.css */
/* ===== Team Rotation Editor ===== */
/* Bronze theme (#d4a574) */

.team-rotation-editor[b-5t785f1hlx] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.editor-header h4[b-5t785f1hlx] {
    color: #d4a574;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.editor-header p[b-5t785f1hlx] {
    color: #888;
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* ===== Section Styling ===== */
.teams-section[b-5t785f1hlx],
.rotation-config-section[b-5t785f1hlx],
.rotation-matrix-section[b-5t785f1hlx] {
    background: rgba(30, 30, 46, 0.6);
    border: 1px solid rgba(212, 165, 116, 0.2);
    border-radius: 8px;
    padding: 1rem;
}

.section-header[b-5t785f1hlx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h5[b-5t785f1hlx] {
    color: #d4a574;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-header h5 i[b-5t785f1hlx] {
    opacity: 0.8;
}

.section-header p[b-5t785f1hlx] {
    color: #888;
    font-size: 0.8rem;
    margin: 0.25rem 0 0 0;
}

/* ===== Teams List ===== */
.teams-list[b-5t785f1hlx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.team-card[b-5t785f1hlx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(20, 20, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid #d4a574;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.team-card:hover[b-5t785f1hlx] {
    background: rgba(30, 30, 50, 0.8);
    border-color: rgba(212, 165, 116, 0.3);
}

.team-info[b-5t785f1hlx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.team-color-dot[b-5t785f1hlx] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.team-name[b-5t785f1hlx] {
    color: rgba(255,255,255,0.2);
    font-weight: 500;
    cursor: pointer;
}

.team-name:hover[b-5t785f1hlx] {
    color: #d4a574;
}

.team-name-input[b-5t785f1hlx] {
    background: rgba(30, 30, 46, 0.8);
    border: 1px solid rgba(212, 165, 116, 0.5);
    color: rgba(255,255,255,0.2);
    padding: 0.25rem 0.5rem;
    width: 150px;
}

.team-name-input:focus[b-5t785f1hlx] {
    outline: none;
    border-color: #d4a574;
    box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.2);
}

.team-member-count[b-5t785f1hlx] {
    color: #888;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.team-actions[b-5t785f1hlx] {
    display: flex;
    gap: 0.25rem;
}

.team-actions .btn-icon[b-5t785f1hlx] {
    background: transparent;
    border: none;
    color: #888;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.team-actions .btn-icon:hover[b-5t785f1hlx] {
    background: rgba(212, 165, 116, 0.2);
    color: #d4a574;
}

.team-actions .btn-icon.btn-danger:hover[b-5t785f1hlx] {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.empty-teams[b-5t785f1hlx] {
    text-align: center;
    padding: 2rem;
    color: #888;
}

.empty-teams i[b-5t785f1hlx] {
    font-size: 2rem;
    opacity: 0.5;
    margin-bottom: 0.5rem;
    display: block;
}

.empty-teams p[b-5t785f1hlx] {
    margin: 0;
    font-size: 0.875rem;
}

/* ===== Rotation Configuration ===== */
.rotation-options[b-5t785f1hlx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.rotation-options .form-group[b-5t785f1hlx] {
    margin-bottom: 0;
}

.rotation-options .form-label[b-5t785f1hlx] {
    color: #b0b0b0;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

.rotation-options .form-select[b-5t785f1hlx],
.rotation-options .form-control[b-5t785f1hlx] {
    background: rgba(20, 20, 35, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255,255,255,0.2);
    font-size: 0.875rem;
}

.rotation-options .form-select:focus[b-5t785f1hlx],
.rotation-options .form-control:focus[b-5t785f1hlx] {
    border-color: #d4a574;
    box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.2);
    background: rgba(30, 30, 46, 0.9);
}

/* ===== Rotation Matrix ===== */
.matrix-container[b-5t785f1hlx] {
    overflow-x: auto;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
}

.rotation-matrix-table[b-5t785f1hlx] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    min-width: 500px;
}

.rotation-matrix-table th[b-5t785f1hlx],
.rotation-matrix-table td[b-5t785f1hlx] {
    padding: 0.5rem;
    text-align: center;
}

.rotation-matrix-table .shift-header[b-5t785f1hlx] {
    color: #d4a574;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    text-align: left;
    padding-left: 0;
    min-width: 120px;
}

.rotation-matrix-table .period-header[b-5t785f1hlx] {
    background: rgba(212, 165, 116, 0.1);
    border-radius: 4px;
    min-width: 100px;
}

.period-label[b-5t785f1hlx] {
    color: #d4a574;
    font-weight: 600;
    font-size: 0.75rem;
    display: block;
}

.period-dates[b-5t785f1hlx] {
    color: #888;
    font-size: 0.7rem;
    display: block;
}

.shift-row .shift-name-cell[b-5t785f1hlx] {
    text-align: left;
    padding: 0.5rem 0;
}

.shift-row .shift-info[b-5t785f1hlx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shift-row .shift-color[b-5t785f1hlx] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.shift-row .shift-name[b-5t785f1hlx] {
    color: rgba(255,255,255,0.2);
    font-weight: 500;
    font-size: 0.875rem;
}

.matrix-cell[b-5t785f1hlx] {
    background: rgba(30, 30, 46, 0.5);
    border: 2px solid transparent;
    border-radius: 6px;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.matrix-cell:hover[b-5t785f1hlx] {
    background: rgba(40, 40, 60, 0.7);
}

.team-select[b-5t785f1hlx] {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: rgba(20, 20, 35, 0.6);
    color: rgba(255,255,255,0.2);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.team-select:hover[b-5t785f1hlx] {
    border-color: rgba(212, 165, 116, 0.4);
}

.team-select:focus[b-5t785f1hlx] {
    outline: none;
    border-color: #d4a574;
    box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.2);
}

/* ===== Quick Fill Actions ===== */
.quick-fill-actions[b-5t785f1hlx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.action-label[b-5t785f1hlx] {
    color: #888;
    font-size: 0.8rem;
    font-weight: 500;
}

.quick-fill-actions .btn[b-5t785f1hlx] {
    font-size: 0.8rem;
}

.quick-fill-actions .btn-outline-secondary[b-5t785f1hlx] {
    border-color: rgba(255, 255, 255, 0.2);
    color: #b0b0b0;
}

.quick-fill-actions .btn-outline-secondary:hover[b-5t785f1hlx] {
    background: rgba(212, 165, 116, 0.15);
    border-color: rgba(212, 165, 116, 0.4);
    color: #d4a574;
}

/* ===== Rotation Hint ===== */
.rotation-hint[b-5t785f1hlx] {
    background: rgba(212, 165, 116, 0.1);
    border: 1px solid rgba(212, 165, 116, 0.2);
    border-radius: 6px;
    padding: 1rem;
    color: #b0b0b0;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rotation-hint i[b-5t785f1hlx] {
    color: #d4a574;
    font-size: 1.1rem;
}

/* ===== Summary ===== */
.rotation-summary[b-5t785f1hlx] {
    display: flex;
    gap: 1.5rem;
    background: rgba(212, 165, 116, 0.08);
    border: 1px solid rgba(212, 165, 116, 0.15);
    border-radius: 6px;
    padding: 0.75rem 1rem;
}

.summary-item[b-5t785f1hlx] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.summary-label[b-5t785f1hlx] {
    color: #888;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value[b-5t785f1hlx] {
    color: #d4a574;
    font-size: 1.1rem;
    font-weight: 600;
}

/* ===== Color Picker ===== */
.color-picker-overlay[b-5t785f1hlx] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
}

.color-picker-popup[b-5t785f1hlx] {
    background: #1e1e2e;
    border: 1px solid rgba(212, 165, 116, 0.3);
    border-radius: 8px;
    padding: 1rem;
    min-width: 200px;
}

.color-picker-popup h6[b-5t785f1hlx] {
    color: #d4a574;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.color-options[b-5t785f1hlx] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.color-option[b-5t785f1hlx] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.color-option:hover[b-5t785f1hlx] {
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.color-option.selected[b-5t785f1hlx] {
    border-color: white;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.color-option i[b-5t785f1hlx] {
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .rotation-options[b-5t785f1hlx] {
        grid-template-columns: 1fr;
    }

    .rotation-summary[b-5t785f1hlx] {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .summary-item[b-5t785f1hlx] {
        flex: 1 1 40%;
    }
}