@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.84wtju4z0n.bundle.scp.css';

/* /Components/Layout/DepartmentNavItem.razor.rz.scp.css */
.dept-nav-item[b-051cetu74q] {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

    .dept-nav-item:hover[b-051cetu74q] {
        background-color: rgba(0, 0, 0, 0.04);
    }

.dept-nav-item-selected[b-051cetu74q] {
    background-color: rgba(0, 120, 212, 0.1);
    box-shadow: inset 3px 0 0 0 #0078d4;
}

.dept-nav-content[b-051cetu74q] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
}

.dept-nav-expand[b-051cetu74q] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

    .dept-nav-expand:hover[b-051cetu74q] {
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }

.dept-nav-expand-placeholder[b-051cetu74q] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.dept-nav-icon[b-051cetu74q] {
    flex-shrink: 0;
    color: #666;
}

.dept-nav-text[b-051cetu74q] {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dept-nav-item-selected .dept-nav-text[b-051cetu74q] {
    font-weight: 500;
}
/* /Components/Layout/EmptyLayout.razor.rz.scp.css */
body[b-l5jar2g8fz], html[b-l5jar2g8fz] {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.empty-layout[b-l5jar2g8fz] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: calc(100vh - 86px);
    height: calc(100vh - 1px);
    overflow: hidden;
}

.empty-layout[b-l5jar2g8fz]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    background-image: url('/background3.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(1px);
    z-index: -1;
}

.empty-box[b-l5jar2g8fz] {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
}

.empty-form[b-l5jar2g8fz] {
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* /Components/Layout/HeaderUserMenu.razor.rz.scp.css */
.user-menu[b-7fk41bet0m] {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.user-menu-popup[b-7fk41bet0m] {
  min-width: 220px;
  padding: 0;
}

.menu-user-info[b-7fk41bet0m] {
  padding: 12px 16px;
}

.user-name[b-7fk41bet0m] {
  font-weight: 700;
}

.user-email[b-7fk41bet0m] {
  font-size: 0.9rem;
  color: var(--neutral-foreground-secondary);
  margin-top: 4px;
}

.language-section[b-7fk41bet0m] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
}

.language-buttons[b-7fk41bet0m] {
  display: flex;
  gap: 6px;
}

.signout-item[b-7fk41bet0m] {
  color: var(--accent-fill-rest);
}


/* /Components/Layout/LoginLayout.razor.rz.scp.css */

.login-layout[b-v2fzflcmhc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 0;
}

.login-layout[b-v2fzflcmhc]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('/Background3.jpg');
    background-size: cover;
    background-position: top center;
    filter: blur(1px);
    z-index: -1;
}

.login-box[b-v2fzflcmhc] {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
}

.login-logo[b-v2fzflcmhc] {
    display: block;
    margin: 0 auto 1.5rem auto;
    max-width: 150px;
    height: auto;
}

.login-title[b-v2fzflcmhc] {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 2rem;
    color: var(--header-background);
}

.error-message[b-v2fzflcmhc] {
    color: #d32f2f;
    text-align: center;
    margin-top: 1rem;
    font-weight: 500;
}

.info-message[b-v2fzflcmhc] {
    color: #1976d2;
    text-align: center;
    margin-top: 1rem;
    font-weight: 500;
}


/* /Components/Layout/NavMenu.razor.rz.scp.css */
.myclass[b-qancd24gi8] {
}

.navmenu[b-qancd24gi8]  .fluent-nav-item.expander {
    display: none !important;
}

[b-qancd24gi8] .content-region {
    margin-inline-start: 0 !important;
}

[b-qancd24gi8] .fluent-nav-item .positioning-region {
    gap: 8px !important;
    margin-left: 0 !important;
    position: relative !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.submenu-container[b-qancd24gi8] {
    position: relative;
}
.submenu-list[b-qancd24gi8] {
    margin-left: 36px;
    padding-left: 8px;
    display: flex;
    flex-direction: column;
border-left: 2px solid #e0e0e0;
    gap: 1px;
}
.submenu-item[b-qancd24gi8] {
    font-size: 0.97em;
    padding-left: 12px !important;
    background: none !important;
}
.submenu-parent.active[b-qancd24gi8], .submenu-item.active[b-qancd24gi8] {
    font-weight: 600;
}

/* Ensure active indicator is always on the left side */
[b-qancd24gi8] fluent-nav-link .positioning-region::before {
    left: 0 !important;
    right: auto !important;
    inset-inline-start: 0 !important;
    transform: none !important;
}

[b-qancd24gi8] .org-nav-link {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background-color: transparent;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
}

[b-qancd24gi8] .org-nav-link .positioning-region {
    padding: 8px 12px !important;
    margin: 0 !important;
    gap: 8px !important;
}

[b-qancd24gi8] .fluent-nav-icon {
    padding-left: 8px !important;
    width: 25px !important;
    margin-right: 8px !important;
}

[b-qancd24gi8] .org-nav-link .fluent-nav-icon {
    display: none !important;
}

[b-qancd24gi8] .org-nav-link .content-region {
    padding: 0 !important;
    margin: 0 !important;
}

[b-qancd24gi8] .org-nav-link:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

[b-qancd24gi8] .org-nav-link-selected {
    background-color: rgba(30, 74, 123, 0.08) !important;
    font-weight: 500 !important;
    box-shadow: inset 4px 0 0 0 var(--brand-primary, #1E4A7B) !important;
}

.navmenu[b-qancd24gi8] {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 84px);
    max-height: calc(100dvh - 84px);
    min-height: 0;
    overflow: hidden;
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    flex-shrink: 0;
    transition: width 0.2s ease-in-out, min-width 0.2s ease-in-out, max-width 0.2s ease-in-out;
}

.navmenu-collapsed[b-qancd24gi8] {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
}

.navmenu-collapsed .nav-header[b-qancd24gi8] {
    justify-content: center;
    padding: 10px 8px;
}

.navmenu-collapsed .sitenav[b-qancd24gi8] {
    width: 64px;
}

.navmenu-collapsed .nav-links-container[b-qancd24gi8],
.navmenu-collapsed .settings-container[b-qancd24gi8] {
    width: 64px;
}

.navmenu-collapsed[b-qancd24gi8]  fluent-nav-link .content-region {
    display: none !important;
}

.navmenu-collapsed[b-qancd24gi8]  fluent-nav-link,
.navmenu-collapsed[b-qancd24gi8]  .fluent-nav-item {
    width: 64px !important;
    min-width: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.navmenu-collapsed[b-qancd24gi8]  fluent-nav-link .positioning-region {
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.navmenu-collapsed[b-qancd24gi8]  .fluent-nav-icon {
    padding-left: 0 !important;
    margin: 0 auto !important;
}

.navmenu-collapsed[b-qancd24gi8]  fluent-nav-link.active,
.navmenu-collapsed[b-qancd24gi8]  fluent-nav-link.themed-nav-link.active,
.navmenu-collapsed[b-qancd24gi8]  .fluent-nav-item.active {
    box-shadow: inset 4px 0 0 0 #1E4A7B !important;
    background-color: #1E4A7B !important;
}

.navmenu-collapsed[b-qancd24gi8]  fluent-nav-link.active .fluent-nav-icon,
.navmenu-collapsed[b-qancd24gi8]  fluent-nav-link.active .fluent-icon {
    color: white !important;
    fill: white !important;
}

.navmenu-collapsed[b-qancd24gi8]  .org-nav-link-selected {
    box-shadow: inset 4px 0 0 0 #1E4A7B !important;
    background-color: rgba(30, 74, 123, 0.15) !important;
}

.main[b-qancd24gi8] {
    min-height: 0;
    height: calc(100dvh - 86px);
    overflow: hidden;
}

.nav-header[b-qancd24gi8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background-color: #f8f8f8;
    color: #333;
    flex-shrink: 0;
}

.menu-icon[b-qancd24gi8],
.add-icon-wrapper[b-qancd24gi8] {
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
}

    .menu-icon[b-qancd24gi8]  .fluent-icon,
    .add-icon-wrapper[b-qancd24gi8]  .fluent-icon {
        color: #333 !important;
        fill: #333 !important;
    }

.navmenu-toggle-checkbox[b-qancd24gi8] {
    display: none;
}

.sitenav[b-qancd24gi8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    max-height: 100%;
    width: 100%;
}

/* Ensure no visible scrollbars inside the navigation region (Fluent UI components are deeply scoped) */
[b-qancd24gi8] .fluent-navmenu,
[b-qancd24gi8] .fluent-tree-view,
[b-qancd24gi8] .fluent-listbox,
[b-qancd24gi8] .fluent-nav {
    overflow: hidden !important;
    width: 100% !important;
}

/* Hide native scrollbars (WebKit) for nav elements */
[b-qancd24gi8] .fluent-navmenu::-webkit-scrollbar,
[b-qancd24gi8] .fluent-tree-view::-webkit-scrollbar,
[b-qancd24gi8] .fluent-listbox::-webkit-scrollbar,
[b-qancd24gi8] .fluent-listbox-container::-webkit-scrollbar,
.navmenu[b-qancd24gi8]::-webkit-scrollbar,
.sitenav[b-qancd24gi8]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Hide scrollbars in Firefox */
[b-qancd24gi8] .fluent-navmenu,
[b-qancd24gi8] .fluent-tree-view,
[b-qancd24gi8] .fluent-listbox,
.navmenu[b-qancd24gi8],
.sitenav[b-qancd24gi8] {
    scrollbar-width: none !important;
}

/* Fallback: prevent overflow that causes scrollbars */
.nav-links-container[b-qancd24gi8],
.menu-items-container[b-qancd24gi8],
.organization-tree-nav[b-qancd24gi8],
.organization-tree-nav-popup[b-qancd24gi8] {
    overflow: hidden !important;
    width: 100% !important;
}

[b-qancd24gi8] #main-menu {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

.navmenu-collapsed[b-qancd24gi8]  #main-menu {
    width: 64px !important;
}

.navmenu-collapsed[b-qancd24gi8]  fluent-nav-menu,
.navmenu-collapsed[b-qancd24gi8]  .fluent-nav-menu {
    width: 64px !important;
}

#main-menu[b-qancd24gi8] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

/* Ensure FluentNavLink items are full width */
[b-qancd24gi8] fluent-nav-link,
[b-qancd24gi8] .fluent-nav-link {
    width: 100% !important;
}

[b-qancd24gi8] fluent-nav-menu,
[b-qancd24gi8] .fluent-nav-menu {
    width: 100% !important;
    overflow: hidden !important;
}

.nav-links-container[b-qancd24gi8] {
    flex-shrink: 0;
    width: 100%;
}

.plus-menu-wrapper[b-qancd24gi8] {
    width: 100%;
    overflow: hidden;
}

.plus-menu-container[b-qancd24gi8] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    cursor: pointer;
    background-color: transparent;
}

.menu-items-container[b-qancd24gi8] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.positioning-region[b-qancd24gi8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.plus-menu-text[b-qancd24gi8] {
    font-size: 0.8rem;
    color: #333;
    padding-left: 12px;
    flex-grow: 1;
}

.plus-menu-container FluentButton[b-qancd24gi8] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    padding: 0;
    margin-left: auto;
    background-color: brown;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

    .plus-menu-container FluentButton .plus-menu-icon[b-qancd24gi8] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

.tree-search-box[b-qancd24gi8] {
    margin-bottom: 8px;
    width: 100%;
}

.org-search-textfield[b-qancd24gi8] {
    width: 100%;
    margin-bottom: 8px;
    padding: 0 !important;
}

#Nodes[b-qancd24gi8] {
    padding: 0 !important;
    margin: 0 !important;
}

.search-loading[b-qancd24gi8] {
    padding: 12px;
    text-align: center;
    color: #666;
    font-style: italic;
}

.search-no-results[b-qancd24gi8] {
    padding: 12px;
    text-align: center;
    color: #999;
}

.org-search-autocomplete[b-qancd24gi8] {
    width: 100%;
    position: relative;
    z-index: 100;
}

    .org-search-autocomplete[b-qancd24gi8]  fluent-anchored-region {
        z-index: 10000 !important;
    }

    .org-search-autocomplete[b-qancd24gi8]  .listbox {
        z-index: 10000 !important;
        background: white;
        border: 1px solid #ccc;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        max-height: 300px;
        overflow-y: auto;
    }

    .org-search-autocomplete[b-qancd24gi8]  fluent-option {
        cursor: pointer;
        padding: 8px 12px;
    }

        .org-search-autocomplete[b-qancd24gi8]  fluent-option:hover {
            background-color: rgba(30, 74, 123, 0.1);
        }

/*.organization-tree-nav {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0 8px;
    background: #f8f8f8;
    border-radius: 8px;
}*/

.org-separator[b-qancd24gi8] {
    /*height: 16px;*/
    border-bottom: 1px solid #e0e0e0;
    border-bottom-color: #3a3a3a;
    /*margin: 8px 0 16px 0;*/
}


.organization-tree-nav[b-qancd24gi8] {
    margin-top: 8px;

}



.organization-tree-nav[b-qancd24gi8],
.organization-tree-nav-popup[b-qancd24gi8] {
    --neutral-fill-stealth-selected: aquamarine;
    
}

    .organization-tree-nav[b-qancd24gi8]  fluent-tree-item,
    .organization-tree-nav-popup[b-qancd24gi8]  fluent-tree-item {
        --neutral-fill-stealth-selected: aquamarine;
      
    }


    .organization-tree-nav h5[b-qancd24gi8] {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
     
    }

.collapsed-top5-menu-btn-wrapper[b-qancd24gi8],
.departments-collapsed-icon-wrapper[b-qancd24gi8] {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

.collapsed-top5-menu-popup[b-qancd24gi8],
.organization-tree-nav-popup[b-qancd24gi8] {
    padding: 10px;
    min-width: 280px;
    max-width: 380px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1000;
    max-height: 500px;
    overflow-y: auto;

}

.collapsed-top5-list[b-qancd24gi8] {
    margin-top: 10px;
    max-height: 350px;
    overflow-y: auto;
}

    .collapsed-top5-list[b-qancd24gi8]  .fluent-nav-link {
        font-size: 14px;
        cursor: pointer;
    }

        .collapsed-top5-list[b-qancd24gi8]  .fluent-nav-link:hover {
            background-color: rgba(30, 74, 123, 0.1);
        }

.collapsed-top5-menu-popup[b-qancd24gi8]  .fluent-autocomplete {
    width: 100%;
}

.collapsed-top5-menu-popup[b-qancd24gi8]  .fluent-autocomplete-input {
    width: 100%;
}

.collapsed-top5-menu-popup[b-qancd24gi8]  .fluent-listbox-container {
    position: absolute !important;
    z-index: 10000 !important;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    min-width: 280px;
}

.collapsed-top5-menu-popup[b-qancd24gi8]  .fluent-listbox {
    max-height: 250px;
    overflow-y: auto;
    background: white;
}

.collapsed-top5-menu-popup[b-qancd24gi8]  .fluent-option {
    cursor: pointer;
    padding: 8px 12px;
}

    .collapsed-top5-menu-popup[b-qancd24gi8]  .fluent-option:hover {
        background-color: rgba(30, 74, 123, 0.1);
    }

.organization-tree-nav-popup[b-qancd24gi8]  .fluent-tree-view {
    max-height: 400px;
    overflow-y: auto;
}

.sitenav[b-qancd24gi8]  .fluent-nav-item .fluent-nav-icon .fluent-icon {
    color: #333 !important;
    fill: #333 !important;

}

.themed-nav-link.active[b-qancd24gi8]  .fluent-nav-icon .fluent-icon {
    color: white !important;
    fill: white !important;
}

.departments-collapsed-icon[b-qancd24gi8] {
    font-size: 24px;
    cursor: pointer;
    color: #333 !important;
    fill: #333 !important;
}

.departments-collapsed-icon-wrapper[b-qancd24gi8]  .fluent-icon {
    color: #333 !important;
    fill: #333 !important;
}

.settings-container[b-qancd24gi8] {
    border-top: 1px solid #ccc;
    margin-top: auto;
    flex-shrink: 0;
}

 /*Settings container active state - when on any settings page 
.settings-container.settings-active {
    background-color: var(--brand-primary, #1E4A7B) !important;
}

.settings-container.settings-active ::deep fluent-nav-link,
.settings-container.settings-active ::deep .fluent-nav-link {
    background-color: var(--brand-primary, #1E4A7B) !important;
    color: white !important;
}

.settings-container.settings-active ::deep .content-region {
    color: white !important;
}

.settings-container.settings-active ::deep .fluent-nav-icon,
.settings-container.settings-active ::deep .fluent-nav-icon .fluent-icon,
.settings-container.settings-active ::deep .fluent-icon {
    color: white !important;
    fill: white !important;
}

 More specific selectors to ensure settings link highlighting 
.settings-container.settings-active ::deep fluent-nav-link::part(content),
.settings-container.settings-active ::deep fluent-nav-link::part(positioning-region) {
    background-color: var(--brand-primary, #1E4A7B) !important;
    color: white !important;
}

.settings-container.settings-active ::deep fluent-nav-link::part(icon) {
    color: white !important;
    fill: white !important;
}*/

.settings-navlink[b-qancd24gi8] {
    margin-top: auto;
    display: flex;
    align-items: center;
    min-height: 48px;
}

.fluent-navmenu[collapsed] .fluent-navlink .fluent-navlink-content[b-qancd24gi8] {
    display: none;
}

.fluent-navmenu[collapsed] .settings-navlink .fluent-navlink-content[b-qancd24gi8] {
    display: none;
}

.fluent-navmenu .settings-navlink .fluent-navlink-content[b-qancd24gi8] {
    display: inline;
}

.themed-nav-link:hover[b-qancd24gi8] {
    background-color: rgba(30, 74, 123, 0.1) !important;
}

.themed-nav-link.active[b-qancd24gi8] {
    background-color: var(--brand-primary) !important;
    color: white !important;
    box-shadow: inset 4px 0 0 0 var(--brand-primary, #1E4A7B) !important;
}

    .themed-nav-link.active[b-qancd24gi8]  .fluent-icon {
        color: white !important;
        fill: white !important;
    }

/* Active state for all nav links - blue line on left */
[b-qancd24gi8] fluent-nav-link.themed-nav-link.active,
[b-qancd24gi8] .fluent-nav-link.themed-nav-link.active,
[b-qancd24gi8] fluent-nav-link.active,
.settings-container[b-qancd24gi8]  fluent-nav-link.active {
    background-color: var(--brand-primary) !important;
    color: white !important;
    box-shadow: inset 4px 0 0 0 var(--brand-primary, #1E4A7B) !important;
}

[b-qancd24gi8] fluent-nav-link.themed-nav-link.active .fluent-nav-icon,
[b-qancd24gi8] fluent-nav-link.themed-nav-link.active .fluent-nav-icon .fluent-icon,
.settings-container[b-qancd24gi8]  fluent-nav-link.active .fluent-nav-icon,
.settings-container[b-qancd24gi8]  fluent-nav-link.active .fluent-icon {
    color: white !important;
    fill: white !important;
}

[b-qancd24gi8] fluent-nav-link.themed-nav-link.active .content-region,
.settings-container[b-qancd24gi8]  fluent-nav-link.active .content-region {
    color: white !important;
}

.fluent-navlink[b-qancd24gi8] {
    transition: background-color 0.3s ease;
}

.selected-org-nav-link[b-qancd24gi8] {
    background-color: rgba(30, 74, 123, 0.1) !important;
    box-shadow: inset 4px 0 0 0 var(--brand-primary, #1E4A7B) !important;
    font-weight: 600;
}

    .selected-org-nav-link[b-qancd24gi8]  .fluent-nav-icon .fluent-icon {
        color: var(--brand-primary) !important;
        fill: var(--brand-primary) !important;
    }

[b-qancd24gi8] fluent-menu {
    z-index: 1001 !important;
}

    [b-qancd24gi8] fluent-menu[placement="bottom-start"] {
        margin-left: 0;
    }

.collapsed-top5-menu-btn-wrapper fluent-menu[b-qancd24gi8],
.departments-collapsed-icon-wrapper fluent-menu[b-qancd24gi8] {
    position: absolute !important;
    left: 60px !important;
}

/* ============================================================
   DARK MODE OVERRIDES
   ============================================================ */
[data-theme="dark"][b-qancd24gi8],
body.dark[b-qancd24gi8] {
    /* Nav header strip */
    .nav-header {
        background-color: var(--neutral-layer-2, #2d2d2d);
        color: var(--neutral-foreground-rest, #e8e8e8);
    }

    /* Hamburger / add icons */
    .menu-icon[b-qancd24gi8],
    .add-icon-wrapper[b-qancd24gi8] {
        color: var(--neutral-foreground-rest, #e8e8e8);
    }

    .menu-icon[b-qancd24gi8]  .fluent-icon,
    .add-icon-wrapper[b-qancd24gi8]  .fluent-icon {
        color: var(--neutral-foreground-rest, #e8e8e8) !important;
        fill: var(--neutral-foreground-rest, #e8e8e8) !important;
    }

    /* Nav item icons */
    .sitenav[b-qancd24gi8]  .fluent-nav-item .fluent-nav-icon .fluent-icon {
        color: #c0c0c0 !important;
        fill: #c0c0c0 !important;
    }

    /* Departments collapsed icon */
    .departments-collapsed-icon[b-qancd24gi8] {
        color: #c0c0c0 !important;
        fill: #c0c0c0 !important;
    }

    .departments-collapsed-icon-wrapper[b-qancd24gi8]  .fluent-icon {
        color: #c0c0c0 !important;
        fill: #c0c0c0 !important;
    }

    /* Plus-menu text */
    .plus-menu-text[b-qancd24gi8] {
        color: var(--neutral-foreground-rest, #e8e8e8);
    }

    /* Search helper text */
    .search-loading[b-qancd24gi8] {
        color: #a0a0a0;
    }

    .search-no-results[b-qancd24gi8] {
        color: #888;
    }

    /* Org search autocomplete dropdown */
    .org-search-autocomplete[b-qancd24gi8]  .listbox {
        background: var(--neutral-layer-2, #2d2d2d);
        border-color: #4a4a4a;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }


    /* Settings container top border */
    .settings-container[b-qancd24gi8] {
        border-top-color: #3a3a3a;
    }

    /* Collapsed top-5 popup and org tree popup */
    .collapsed-top5-menu-popup[b-qancd24gi8],
    .organization-tree-nav-popup[b-qancd24gi8] {
        background: var(--neutral-layer-2, #2d2d2d);
        border-color: #4a4a4a;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

    /* Autocomplete listbox inside collapsed popup */
    .collapsed-top5-menu-popup[b-qancd24gi8]  .fluent-listbox-container {
        background: var(--neutral-layer-2, #2d2d2d);
        border-color: #4a4a4a;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    }

    .collapsed-top5-menu-popup[b-qancd24gi8]  .fluent-listbox {
        background: var(--neutral-layer-2, #2d2d2d);
    }
}
/* /Components/Layout/ProfileNavMenu.razor.rz.scp.css */

.content[b-us4wsg3bf8] {
    padding: 0rem !important;
    align-self: stretch !important;
    /*  width: 100%; */
}

.profile-menu[b-us4wsg3bf8] {
    background: var(--neutral-layer-3);
    align-self: stretch;
    height: calc(100dvh - 190px) !important;
    display: flex;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
}




/* /Components/Layout/SettingsLayout.razor.rz.scp.css */
.header[b-uv3fq6ta47] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    color: white !important;
    background-color: transparent !important;
    padding: 0.5rem 1rem;
    box-shadow: none !important;
}

/* Remove margin from header-gutters */
[b-uv3fq6ta47] .header .header-gutters,
[b-uv3fq6ta47] .header-gutters {
    margin: 0 !important;
}

.header-brand[b-uv3fq6ta47] {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    left: 1rem;
    z-index: 10;
}

    .header-brand .logo-text[b-uv3fq6ta47] {
        margin-left: 4px;
    }

.header-left[b-uv3fq6ta47] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-right: auto;
}

.page-header-text[b-uv3fq6ta47] {
    display: flex;
    flex-direction: column;
    margin-left: calc(var(--nav-expanded-width, 250px) + 240px); /* NavMenu + SettingsNavMenu */
    padding: 0;
    align-items: flex-start;
    background: transparent !important;
    color: white !important;
    transition: margin-left 0.2s ease;
}

.header.nav-collapsed .page-header-text[b-uv3fq6ta47] {
    margin-left: calc(var(--nav-collapsed-width, 64px) + 200px); 
}

.page-title[b-uv3fq6ta47] {
    font-size: 1.25rem;
    font-weight: 600;
    color: white !important;
    margin-left: 260px;
}

.page-subtitle[b-uv3fq6ta47] {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9) !important;
    margin-left: 260px;
}

.Main-body-content[b-uv3fq6ta47] {
    padding-top: 0.5rem !important;
}
/* /Components/Layout/SettingsNavMenu.razor.rz.scp.css */
.main[b-7223zkwq97], .fluent-stack[b-7223zkwq97] {
    gap: 0 !important;
}

.content[b-7223zkwq97] {
    padding: 0rem !important;
    align-self: stretch !important;
}

.settings-nav-wrapper[b-7223zkwq97] {
    display: flex;
    flex-direction: column;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease;
}

.settings-nav-wrapper.settings-nav-collapsed[b-7223zkwq97] {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    --neutral-layer-1: var(--neutral-layer-3);
    --neutral-fill-rest: var(--neutral-layer-3);
    --neutral-fill-stealth-rest: var(--neutral-layer-3);
}

/* Collapsed state: hide text labels */
.settings-nav-collapsed[b-7223zkwq97]  fluent-nav-link .content-region {
    display: none !important;
}

/* Collapsed state: size and center nav links */
.settings-nav-collapsed[b-7223zkwq97]  fluent-nav-link,
.settings-nav-collapsed[b-7223zkwq97]  .fluent-nav-item {
    width: 64px !important;
    min-width: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--neutral-layer-3) !important;
}

/* Collapsed state: center the positioning region */
.settings-nav-collapsed[b-7223zkwq97]  fluent-nav-link .positioning-region {
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: var(--neutral-layer-3) !important;
}

/* Collapsed state: center the icon */
.settings-nav-collapsed[b-7223zkwq97]  .fluent-nav-icon {
    padding-left: 0 !important;
    margin: 0 auto !important;
}

/* Collapsed state: background match */
.settings-nav-collapsed[b-7223zkwq97]  #settings-menu,
.settings-nav-collapsed[b-7223zkwq97]  fluent-nav-menu#settings-menu {
    background: var(--neutral-layer-3) !important;
}

.settings-nav-toggle[b-7223zkwq97] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    width: 100%;
    height: 40px;
    cursor: pointer;
    background: var(--neutral-layer-3);
    color: var(--neutral-foreground-rest);
    flex-shrink: 0;
    box-sizing: border-box;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.settings-nav-wrapper.settings-nav-collapsed .settings-nav-toggle[b-7223zkwq97] {
    justify-content: center;
    padding-right: 0;
    background: var(--neutral-layer-3);
}

.settings-nav-toggle:hover[b-7223zkwq97] {
    background: var(--neutral-layer-2);
}

.settings-menu[b-7223zkwq97] {
    background: var(--neutral-layer-3);
    align-self: stretch;
    height: calc(100dvh - 86px - 40px) !important;
    display: flex;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    overflow: hidden;
}

/* Force FluentNavMenu to be transparent so .settings-menu background shows */
.settings-nav-collapsed .settings-menu[b-7223zkwq97] {
    background: var(--neutral-layer-3) !important;
}

.settings-nav-collapsed[b-7223zkwq97]  fluent-nav-menu {
    background: transparent !important;
    background-color: transparent !important;
}

.settings-nav-collapsed[b-7223zkwq97]  fluent-nav-link {
    background: transparent !important;
    background-color: transparent !important;
}

/* Compact nav link items */
[b-7223zkwq97] .fluent-nav-item .positioning-region {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Hide scrollbars in settings menu */
[b-7223zkwq97] #settings-menu::-webkit-scrollbar,
.settings-menu[b-7223zkwq97]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

[b-7223zkwq97] #settings-menu,
.settings-menu[b-7223zkwq97] {
    scrollbar-width: none !important;
}

/* /Components/Pages/Admin/Categories.razor.rz.scp.css */
.category-search[b-9ht334azeo] {
    width: 250px;
}

.status-filter[b-9ht334azeo] {
    min-width: 120px;
}

/* Categories Grid */
.categories-grid[b-9ht334azeo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* Category Card */
.category-card[b-9ht334azeo] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}

.category-card:hover[b-9ht334azeo] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.category-card.inactive[b-9ht334azeo] {
    opacity: 0.7;
}

.category-card .card-header[b-9ht334azeo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 20px 0 20px;
}

.category-icon[b-9ht334azeo] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.category-icon-table[b-9ht334azeo] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 18px;
}

.card-actions[b-9ht334azeo] {
    position: relative;
}

.category-card .card-body[b-9ht334azeo] {
    padding: 16px 20px;
}

.category-name[b-9ht334azeo] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.category-description[b-9ht334azeo] {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    white-space: pre-line;
}

.category-stats[b-9ht334azeo] {
    display: flex;
    gap: 16px;
}

.stat-item[b-9ht334azeo] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
}

.category-card .card-footer[b-9ht334azeo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #f9fafb;
    border-top: 1px solid #f0f0f0;
}

/* Status Badges */
.status-badge[b-9ht334azeo] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-active[b-9ht334azeo] {
    background: #dcfce7;
    color: #16a34a;
}

.status-inactive[b-9ht334azeo] {
    background: #f3f4f6;
    color: #6b7280;
}

.order-badge[b-9ht334azeo] {
    font-size: 12px;
    color: #888;
}

/* Loading & Empty States */
.loading-container[b-9ht334azeo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.empty-state[b-9ht334azeo] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.empty-state h3[b-9ht334azeo] {
    margin: 16px 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.empty-state p[b-9ht334azeo] {
    margin: 0 0 24px 0;
    font-size: 14px;
}

/* Dialog Overlay (for Delete Confirmation) */
.dialog-overlay[b-9ht334azeo] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

/* Delete Confirmation Dialog */
.confirm-dialog[b-9ht334azeo] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
}

.dialog-header[b-9ht334azeo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 24px 0 24px;
    gap: 16px;
}

.dialog-title h2[b-9ht334azeo] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

.close-button[b-9ht334azeo] {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #666;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-button:hover[b-9ht334azeo] {
    background: #f5f5f5;
    color: #1a1a1a;
}

.dialog-body[b-9ht334azeo] {
    padding: 24px;
}

.dialog-footer[b-9ht334azeo] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 24px 24px;
    border-top: 1px solid #eee;
}

/* Table Styles for Questions */
.questions-table-container[b-9ht334azeo] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}



.col-question[b-9ht334azeo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.category-icon-table[b-9ht334azeo] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 18px;
}

.category-name-list[b-9ht334azeo] {
    font-weight: 500;
    color: #1a1a1a;
    font-size: 15px;
}

.col-description[b-9ht334azeo] {
    color: #666;
    font-size: 14px;
    white-space: pre-line;
}

.col-questions[b-9ht334azeo], .col-lessons[b-9ht334azeo], .col-status[b-9ht334azeo], .col-order[b-9ht334azeo] {
    color: #666;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.col-actions[b-9ht334azeo] {
    display: flex;
    justify-content: flex-end;
}

/* /Components/Pages/Admin/Components/AddressInfoPanel.razor.rz.scp.css */
.address-info-grid[b-po6qzaxens] {
    display: grid;
    grid-template-columns: auto 1fr; /* �ndret fra 1fr 1fr. F�rste kolonne tilpasser sig indhold, anden tager resten. */
    gap: 10px 8px; /* Mindre horisontal afstand mellem label og input */
    width: 100%;
    align-items: start; /* Juster elementer til toppen af deres grid celle */
    margin-bottom: 12px;
}

/* Ny CSS-regel for view-mode, der �ndrer grid til en enkelt kolonne */
.address-info-grid.view-mode-grid[b-po6qzaxens] {
    grid-template-columns: 1fr; /* Enkelt kolonne layout */
    gap: 6px 0; /* Reduceret mellemrum for view-mode */
}

/* Justering for at sikre at .address-info-item fylder hele bredden i view-mode-grid */
.address-info-grid.view-mode-grid .address-info-item[b-po6qzaxens] {
    grid-column: 1 / -1; /* F�r item til at sp�nde over alle kolonner (selvom der kun er �n) */
    /* Yderligere justeringer kan tilf�jes her om n�dvendigt */
}

.address-info-actions[b-po6qzaxens] {
    display: flex;
    gap: 12px; /* Mellemrum mellem knapper */
    margin-top: 20px; /* Lidt mere plads over knapperne */
    justify-content: flex-end; /* Juster knapper til h�jre */
}

.address-info-select-row[b-po6qzaxens] {
    margin-bottom: 15px; /* Plads under dropdown */
}

/* Styling for adresseinformation items i label-format */
.address-info-item[b-po6qzaxens] {
    display: flex;
    align-items: baseline;
    margin-bottom: 6px; 
    padding: 2px 0;
}

.address-info-label[b-po6qzaxens] {
    font-weight: 600;
    color: #555;
    min-width: 120px; /* Juster evt. denne bredde for at aligne labels p�nt */
    margin-right: 8px; 
    flex-shrink: 0;
    text-align: left; /* Sikrer venstrejustering af label-tekst */
}

.address-info-value[b-po6qzaxens] {
    color: #333;
    word-break: break-word;
    text-align: left; /* Sikrer venstrejustering af v�rdi-tekst */
}


.address-info-panel-scroll[b-po6qzaxens] {
    /* Fast h�jde container med scrolling */
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 0 2px;
    display: flex;
    flex-direction: column;
    /* Forhindrer indhold i at udvide containeren */
    flex: 1 1 0%;
    min-height: 0;
}

/* G�r inputfelter st�rre og labels t�ttere p� input i edit-mode */
.address-info-grid .fluent-text-field[b-po6qzaxens],
.address-info-grid .fluent-select[b-po6qzaxens] {
    font-size: 1.15rem;
    min-height: 44px;
    padding: 10px 14px;
    margin-left: 0 !important; /* Fjern evt. default margin-left */
}

.address-info-grid .fluent-text-field-label[b-po6qzaxens],
.address-info-grid .fluent-select-label[b-po6qzaxens] {
    font-size: 1.08rem;
    margin-bottom: 2px !important; /* Mindre afstand mellem label og input */
    margin-top: 0;
    padding-bottom: 0;
    /* Tilf�j for at rykke label t�ttere p� input */
    display: block;
}
/* /Components/Pages/Admin/Components/Dialogs/CategoryDialog.razor.rz.scp.css */
.dialog-overlay[b-004qmdsbqr] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.create-category-dialog[b-004qmdsbqr] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

.dialog-header[b-004qmdsbqr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 24px 0 24px;
    gap: 16px;
}

.dialog-title h2[b-004qmdsbqr] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

.dialog-subtitle[b-004qmdsbqr] {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #666;
}

.close-button[b-004qmdsbqr] {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #666;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-button:hover[b-004qmdsbqr] {
    background: #f5f5f5;
    color: #1a1a1a;
}

.dialog-body[b-004qmdsbqr] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-004qmdsbqr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-004qmdsbqr] {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.form-label.required[b-004qmdsbqr]::after {
    content: " *";
    color: #dc2626;
}

.form-input[b-004qmdsbqr] {
    width: 100%;
}

.color-select-wrapper[b-004qmdsbqr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-select-swatch[b-004qmdsbqr] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    flex-shrink: 0;
}

.color-select[b-004qmdsbqr] {
    flex: 1;
}

.icon-select-wrapper[b-004qmdsbqr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-select[b-004qmdsbqr] {
    width: 100%;
}

.toggle-group[b-004qmdsbqr] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.toggle-label[b-004qmdsbqr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-label .form-label[b-004qmdsbqr] {
    margin: 0;
}

.toggle-description[b-004qmdsbqr] {
    font-size: 13px;
    color: #666;
}

.dialog-footer[b-004qmdsbqr] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 24px 24px;
    border-top: 1px solid #eee;
}
/* /Components/Pages/Admin/Components/Dialogs/CreateEditRoadSignDialog.razor.rz.scp.css */
.dialog-overlay[b-ez8lx3w19v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.roadsign-dialog[b-ez8lx3w19v] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: dialog-slide-in-b-ez8lx3w19v 0.2s ease-out;
}

@keyframes dialog-slide-in-b-ez8lx3w19v {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dialog-header[b-ez8lx3w19v] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 24px 0;
}

.dialog-title h2[b-ez8lx3w19v] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.dialog-subtitle[b-ez8lx3w19v] {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
}

.close-button[b-ez8lx3w19v] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: #9ca3af;
}

.close-button:hover[b-ez8lx3w19v] {
    background: #f3f4f6;
    color: #374151;
}

.dialog-body[b-ez8lx3w19v] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group[b-ez8lx3w19v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-row[b-ez8lx3w19v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-label[b-ez8lx3w19v] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.form-label.required[b-ez8lx3w19v]::after {
    content: " *";
    color: #ef4444;
}

.form-input[b-ez8lx3w19v] {
    width: 100%;
}

.form-input[b-ez8lx3w19v]::part(control) {
    border-radius: 6px;
    border-color: #e5e7eb;
}

.image-upload-area[b-ez8lx3w19v] {
    border: 2px dashed #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.upload-placeholder[b-ez8lx3w19v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    cursor: pointer;
    color: #6b7280;
    transition: background-color 0.15s;
}

.upload-placeholder:hover[b-ez8lx3w19v] {
    background-color: #f9fafb;
}

.upload-hint[b-ez8lx3w19v] {
    font-size: 12px;
    color: #9ca3af;
}

.file-input-hidden[b-ez8lx3w19v] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.image-preview[b-ez8lx3w19v] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background: #f9fafb;
}

.image-preview img[b-ez8lx3w19v] {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 4px;
}

.remove-image-btn[b-ez8lx3w19v] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: background-color 0.15s;
}

.remove-image-btn:hover[b-ez8lx3w19v] {
    background: rgba(0, 0, 0, 0.8);
}

.tags-input-container[b-ez8lx3w19v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tags-list[b-ez8lx3w19v] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-item[b-ez8lx3w19v] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.tag-remove[b-ez8lx3w19v] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    color: #1d4ed8;
    opacity: 0.6;
}

.tag-remove:hover[b-ez8lx3w19v] {
    opacity: 1;
}

.tag-input-row[b-ez8lx3w19v] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.tag-input[b-ez8lx3w19v] {
    flex: 1;
}

.toggle-group[b-ez8lx3w19v] {
    background: #f9fafb;
    padding: 16px;
    border-radius: 8px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.toggle-label[b-ez8lx3w19v] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toggle-description[b-ez8lx3w19v] {
    font-size: 12px;
    color: #6b7280;
}

.dialog-footer[b-ez8lx3w19v] {
    padding: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid #f3f4f6;
}

@media (max-width: 640px) {
    .roadsign-dialog[b-ez8lx3w19v] {
        margin: 16px;
        max-width: 100%;
    }

    .form-row[b-ez8lx3w19v] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/Components/Dialogs/InstructorDialog.razor.rz.scp.css */
.dialog-overlay[b-8bjo4giwc1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.create-instructor-dialog[b-8bjo4giwc1] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: dialog-slide-in-b-8bjo4giwc1 0.2s ease-out;
}

.dialog-header[b-8bjo4giwc1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 24px 0 24px;
}

.dialog-title h2[b-8bjo4giwc1] {
    margin: 0 0 4px 0;
    font-size: 22px;
    font-weight: 600;
    color: #111827;
}

.dialog-subtitle[b-8bjo4giwc1] {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

.close-button[b-8bjo4giwc1] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.close-button:hover[b-8bjo4giwc1] {
    background-color: #f3f4f6;
    color: #111827;
}

.dialog-body[b-8bjo4giwc1] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@keyframes dialog-slide-in-b-8bjo4giwc1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.form-label[b-8bjo4giwc1] {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.form-label.required[b-8bjo4giwc1]::after {
    content: " *";
    color: #ef4444;
}

.form-group[b-8bjo4giwc1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-row[b-8bjo4giwc1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}



.form-input[b-8bjo4giwc1] {
    width: 100%;
}

.form-input[b-8bjo4giwc1]::part(control) {
    border-radius: 6px;
    border-color: #e5e7eb;
}

.specializations-grid[b-8bjo4giwc1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.toggle-group[b-8bjo4giwc1] {
    background: #f9fafb;
    padding: 16px;
    border-radius: 8px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.toggle-label[b-8bjo4giwc1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toggle-description[b-8bjo4giwc1] {
    font-size: 12px;
    color: #6b7280;
}

.dialog-footer[b-8bjo4giwc1] {
    padding: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid #f3f4f6;
    margin-top: 24px;
}

@media (max-width: 640px) {
    .create-instructor-dialog[b-8bjo4giwc1] {
        margin: 16px;
        max-width: 100%;
    }

    .form-row[b-8bjo4giwc1] {
        grid-template-columns: 1fr;
    }

    .specializations-grid[b-8bjo4giwc1] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/Components/Dialogs/SourceDocumentChunkDialog.razor.rz.scp.css */
.source-document-chunk-dialog__header[b-eoogic5hgw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.source-document-chunk-dialog__title[b-eoogic5hgw] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.2;
}

.source-document-chunk-dialog__content[b-eoogic5hgw] {
    display: flex;
    flex: 1;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.source-document-chunk-dialog__body[b-eoogic5hgw] {
    display: flex;
    flex: 1;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.source-document-chunk-dialog__content[b-eoogic5hgw]  textarea {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    resize: none;
}

.source-document-chunk-dialog__footer[b-eoogic5hgw] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}
/* /Components/Pages/Admin/Components/InfoPanel.razor.rz.scp.css */
.info-panel[b-946bi51l7q] {
    background: linear-gradient(135deg, #fff 80%, #f4f6fa 100%);
    border-radius: 12px;
    margin-top: 0;
    padding: 22px 20px 18px 20px;
    min-height: 120px;
    flex: 1 1 0%;
    box-shadow: 0 4px 24px rgba(33, 150, 243, 0.13), 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: 2px solid var(--brand-primary);
    transition: box-shadow 0.2s, border 0.2s;
    position: relative;
    /* Fixed height to prevent expanding beyond viewport */
    max-height: calc(100vh - 160px); /* Adjust based on your header and footer height */
    min-height: 0;
    overflow: hidden; /* Hide overflow at the panel level */
}

    .info-panel h6[b-946bi51l7q] {
        font-size: 17px;
        font-weight: 700;
        color: var(--brand-primary);
        margin-bottom: 10px;
        letter-spacing: 0.2px;
    }

.info-topbar[b-946bi51l7q] {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1.5px solid #e0e0e0;
    margin-bottom: 18px;
    min-height: 48px;
    flex: 0 0 auto; /* Don't allow this to flex/grow/shrink */
}

.topbar-buttons[b-946bi51l7q] {
    display: flex;
    gap: 8px; /* Juster efter behov for mellemrum mellem knapperne */
    margin-left: auto; /* Skubber knapperne til h�jre */
}

.icon-btn[b-946bi51l7q] {
    /* Bevar eksisterende .icon-btn styles eller tilf�j/juster efter behov */
    min-width: 44px;
    min-height: 44px;
}



.info-text[b-946bi51l7q] {
    font-size: 1.08rem;
    color: #444;
    font-style: italic;
    flex: 1 1 auto;
}

.add-btn[b-946bi51l7q] {
    margin-left: auto;
    min-width: 44px;
    min-height: 44px;
}

.info-flex-container[b-946bi51l7q] {
    display: flex;
    flex-direction: row;
    gap: 32px;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0; /* Critical for child elements to scroll */
    overflow: hidden; /* Don't show overflow at container level */
}

.add-address-btn[b-946bi51l7q] {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
}

    .add-address-btn .fluent-icon[b-946bi51l7q] {
        margin-right: 4px;
    }

.info-placeholder[b-946bi51l7q] {
    color: #888;
    font-style: italic;
    margin-bottom: 10px;
}

.info-panel .left-panel[b-946bi51l7q] {
    flex: 0 0 260px;
    min-width: 220px;
    max-width: 320px;
    padding-right: 2px;
    border-right: 1.5px solid #e0e0e0;
    position: relative;
    background: transparent;
    overflow-y: auto; /* Allow scrolling if needed */
}

.info-panel .right-panel[b-946bi51l7q] {
    flex: 1 1 0%;
    padding-left: 0px;
    min-width: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* Critical for flexbox child scrolling */
    overflow: hidden; /* Hide overflow, let child elements scroll */
}

.address-info-panel-scroll[b-946bi51l7q] {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    padding: 0 2px;
    /* Remove height/max-height so flexbox controls the height */
}
/* /Components/Pages/Admin/Components/Organization/OrganizationDialog.razor.rz.scp.css */
[b-ddj6tvg8qc] .styled-dialog {
    --dialog-width: 600px;
    --dialog-height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    padding: 0;
}

[b-ddj6tvg8qc] .styled-dialog::part(control) {
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
}

.dialog-close-btn[b-ddj6tvg8qc] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    z-index: 10;
}

.dialog-title[b-ddj6tvg8qc] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    padding: 16px 16px 8px 16px;
    display: flex;
    align-items: center;
}

.dialog-subtitle[b-ddj6tvg8qc] {
    font-size: 14px;
    color: #605e5c;
    padding: 0 16px 16px 16px;
    border-bottom: 1px solid #edebe9;
}

.dialog-content[b-ddj6tvg8qc] {
    padding: 16px;
    max-height: 70vh;
    overflow-y: auto;
}

.form-section[b-ddj6tvg8qc] {
    margin-bottom: 16px;
}

.section-header[b-ddj6tvg8qc] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.section-indicator[b-ddj6tvg8qc] {
    width: 4px;
    height: 16px;
    background-color: #323130;
    margin-right: 8px;
    border-radius: 2px;
}

.section-label[b-ddj6tvg8qc] {
    font-size: 14px;
    font-weight: 600;
    color: #323130;
}

.form-group[b-ddj6tvg8qc] {
    margin-bottom: 16px;
}

.form-row[b-ddj6tvg8qc] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.half-width[b-ddj6tvg8qc] {
    flex: 1;
    margin-bottom: 0;
}




.full-width[b-ddj6tvg8qc] {
    width: 100%;
}

/* Logo Upload Styling */
.logo-upload-container[b-ddj6tvg8qc] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.upload-box[b-ddj6tvg8qc] {
    width: 80px;
    height: 80px;
    border: 1px dashed #c8c6c4;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #faf9f8;
    color: #605e5c;
    font-size: 12px;
}

.upload-box:hover[b-ddj6tvg8qc] {
    background-color: #f3f2f1;
    border-color: #8a8886;
}

.upload-text[b-ddj6tvg8qc] {
    font-size: 14px;
    color: #323130;
}

.upload-hint[b-ddj6tvg8qc] {
    font-size: 12px;
    color: #a19f9d;
    margin-top: 4px;
}

/* Status Section */
.status-section[b-ddj6tvg8qc] {
    background-color: #faf9f8;
    border: 1px solid #edebe9;
    border-radius: 4px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-label[b-ddj6tvg8qc] {
    font-size: 14px;
    font-weight: 600;
    color: #323130;
}

.status-description[b-ddj6tvg8qc] {
    font-size: 12px;
    color: #605e5c;
    margin-top: 4px;
}

/* Footer */
.dialog-footer[b-ddj6tvg8qc] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #edebe9;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
/* /Components/Pages/Admin/Components/Organization/OrganizationEdit.razor.rz.scp.css */
/* /Components/Pages/Admin/Components/OrganizationTree.razor.rz.scp.css */
.organization-tree h5[b-cwasd0thm6] {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--brand-primary);
    letter-spacing: 0.5px;
}

.organization-tree-scroll[b-cwasd0thm6] {
    overflow-y: auto;
    max-height: 100%;
}

.org-tree[b-cwasd0thm6] {
    margin-top: 18px;
    margin-bottom: 8px;
    padding-left: 0;
}

.tree-item-row-grid[b-cwasd0thm6] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 32px;
    width: 100%; /* Ensure full width for alignment */
}

.tree-item-main[b-cwasd0thm6] {
    display: flex;
    align-items: center;
    min-width: 0;
    cursor: pointer;
}

.tree-item-actions[b-cwasd0thm6] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 120px;
    justify-content: flex-start;
    margin-left: 0;
    padding-left: 0;
    grid-column: 2;
}

.tree-action-btn[b-cwasd0thm6] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
/* /Components/Pages/Admin/Components/Users/EditUserDialog.razor.rz.scp.css */
.module-row[b-czp6ve244n] {
    align-items: flex-start !important;
}

    .module-row[b-czp6ve244n]  {
        padding-top: 8px;
    }

    .module-row .form-input[b-czp6ve244n] {
        padding-top: 0;
    }
/* /Components/Pages/Admin/Components/Users/OrganizationUsers.razor.rz.scp.css */
.users-list[b-30r30d244j] {
    background: #fff;
    border-radius: 12px;
    padding: 2px 0px 1px 2px;
    box-shadow: 0 4px 24px rgba(33, 150, 243, 0.13), 0 2px 8px rgba(0,0,0,0.08);
    min-width: 260px;
    display: flex;
    flex-direction: column;
    min-height: 250px;
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 12px;
    border: 2px solid var(--brand-primary);
    transition: box-shadow 0.2s, border 0.2s;
}



    .users-list h5[b-30r30d244j] {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 10px;
        color: var(--brand-primary);
        letter-spacing: 0.2px;
    }
/* /Components/Pages/Admin/Components/Users/OrganizationUsersList.razor.rz.scp.css */
.users-list[b-jchl1ih3fm], .custom-datagrid[b-jchl1ih3fm] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.loading-container[b-jchl1ih3fm] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
}

.loading-spinner[b-jchl1ih3fm] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-jchl1ih3fm 1s linear infinite;
}

@keyframes spin-b-jchl1ih3fm {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Pages/Admin/Components/Users/UserModuleClaimsList.razor.rz.scp.css */
.loading-container[b-8as86bh7y6] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
}

.loading-spinner[b-8as86bh7y6] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-8as86bh7y6 1s linear infinite;
}

@keyframes spin-b-8as86bh7y6 {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Pages/Admin/Components/Users/UsersList.razor.rz.scp.css */
.search-bar[b-pkvsiv0urf] {
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-end;
    padding-right: 16px;
}

.search-input[b-pkvsiv0urf] {
    min-width: 320px;
    max-width: 400px;
}
/* /Components/Pages/Admin/DriveSchoolSettings.razor.rz.scp.css */
.logo-upload-row[b-l7ggrjof94] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.logo-preview[b-l7ggrjof94] {
    max-height: 64px;
    max-width: 200px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid var(--neutral-stroke-rest);
    padding: 6px;
    background: var(--neutral-layer-2);
}

.fluent-label[b-l7ggrjof94] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}
/* /Components/Pages/Admin/Instructors.razor.rz.scp.css */
.instructor-search[b-x0ow6xbllk] {
    width: 250px;
}

/* Table */
.instructors-table-container[b-x0ow6xbllk] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}



/* Columns */
.col-instructor[b-x0ow6xbllk] {
    display: flex;
    flex-direction: column;
}

.instructor-name[b-x0ow6xbllk] {
    font-weight: 500;
    color: #1a1a1a;
}

.instructor-id[b-x0ow6xbllk] {
    font-size: 12px;
    color: #666;
}

.col-contact[b-x0ow6xbllk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #444;
}

.contact-item[b-x0ow6xbllk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.col-specializations[b-x0ow6xbllk] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.spec-tag[b-x0ow6xbllk] {
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.col-groups[b-x0ow6xbllk] {
    font-weight: 500;
    color: #1a1a1a;
    padding-left: 8px;
}

.col-status[b-x0ow6xbllk] {
    display: flex;
    align-items: center;
}

.col-actions[b-x0ow6xbllk] {
    display: flex;
    justify-content: flex-end;
}

/* Status Badges */
.status-badge[b-x0ow6xbllk] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-active[b-x0ow6xbllk] {
    background: #dcfce7;
    color: #16a34a;
}

.status-inactive[b-x0ow6xbllk] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Loading & Empty States */
.loading-container[b-x0ow6xbllk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.empty-state[b-x0ow6xbllk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    color: #666;
}

.empty-state h3[b-x0ow6xbllk] {
    margin: 16px 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.empty-state p[b-x0ow6xbllk] {
    margin: 0 0 24px 0;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
    .table-header[b-x0ow6xbllk],
    .table-row[b-x0ow6xbllk] {
        grid-template-columns: 2fr 2fr 1fr 1fr 60px;
    }

    .col-specializations[b-x0ow6xbllk] {
        display: none;
    }
}

@media (max-width: 768px) {
    .page-header[b-x0ow6xbllk] {
        flex-direction: column;
        gap: 16px;
    }

    .toolbar[b-x0ow6xbllk] {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .toolbar-left[b-x0ow6xbllk] {
        flex-direction: column;
    }

    .instructor-search[b-x0ow6xbllk] {
        width: 100%;
    }

    .table-header[b-x0ow6xbllk],
    .table-row[b-x0ow6xbllk] {
        grid-template-columns: 2fr 1fr 60px;
    }

    .col-contact[b-x0ow6xbllk], .col-groups[b-x0ow6xbllk] {
        display: none;
    }
}
/* /Components/Pages/Admin/NotificationLog.razor.rz.scp.css */
.page-container[b-1igfgthdet] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    max-width: 1100px;
}

.page-toolbar[b-1igfgthdet] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.page-title[b-1igfgthdet] {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
}

.page-subtitle[b-1igfgthdet] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

.loading-row[b-1igfgthdet] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 40px 0;
    color: var(--neutral-foreground-rest);
}

.empty-state[b-1igfgthdet] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 0;
    color: var(--neutral-foreground-hint);
}

.log-summary[b-1igfgthdet] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.log-table-wrapper[b-1igfgthdet] {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-rest);
}

.log-table[b-1igfgthdet] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.log-table thead tr[b-1igfgthdet] {
    background: var(--neutral-fill-secondary-rest);
}

.log-table th[b-1igfgthdet] {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.log-table td[b-1igfgthdet] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--neutral-stroke-subtle-rest);
    vertical-align: middle;
}

.log-table tbody tr:last-child td[b-1igfgthdet] {
    border-bottom: none;
}

.log-table tbody tr:hover[b-1igfgthdet] {
    background: var(--neutral-fill-stealth-hover);
}

.row-error[b-1igfgthdet] {
    background: color-mix(in srgb, var(--error) 5%, transparent) !important;
}

.col-time[b-1igfgthdet] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-hint);
    font-size: 13px;
}

.student-link[b-1igfgthdet] {
    color: var(--accent-foreground-rest);
    text-decoration: none;
    font-weight: 500;
}

.student-link:hover[b-1igfgthdet] {
    text-decoration: underline;
}

.channel-badge[b-1igfgthdet] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.channel-push[b-1igfgthdet] {
    background: color-mix(in srgb, var(--accent-fill-rest) 15%, transparent);
    color: var(--accent-foreground-rest);
}

.channel-email[b-1igfgthdet] {
    background: color-mix(in srgb, var(--info) 15%, transparent);
    color: var(--info-foreground-rest);
}

.channel-sms[b-1igfgthdet] {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    color: var(--success-foreground-rest);
}

.col-error[b-1igfgthdet] {
    max-width: 260px;
}

.error-text[b-1igfgthdet] {
    font-size: 12px;
    color: var(--error-foreground-rest);
    font-family: monospace;
    cursor: help;
}

.pagination[b-1igfgthdet] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.page-indicator[b-1igfgthdet] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    min-width: 80px;
    text-align: center;
}
/* /Components/Pages/Admin/NotificationSettings.razor.rz.scp.css */
/* Notification Settings Page */

.ns-page[b-f2w95vl2ee] {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.ns-header[b-f2w95vl2ee] {
    margin-bottom: 24px;
}

.ns-header h1[b-f2w95vl2ee] {
    margin: 0 0 6px 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a1a1a;
}

.ns-subtitle[b-f2w95vl2ee] {
    margin: 0;
    font-size: 14px;
    color: #666;
}

.ns-loading[b-f2w95vl2ee] {
    display: flex;
    justify-content: center;
    padding: 64px;
}

/* Two-column grid */
.ns-grid[b-f2w95vl2ee] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .ns-grid[b-f2w95vl2ee] {
        grid-template-columns: 1fr;
    }
}

.ns-left[b-f2w95vl2ee],
.ns-right[b-f2w95vl2ee] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Cards */
.ns-card[b-f2w95vl2ee] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ns-card-title[b-f2w95vl2ee] {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

/* Recipients card fills remaining height */
.ns-recipients-card[b-f2w95vl2ee] {
    flex: 1;
}

/* Channels */
.ns-channel-list[b-f2w95vl2ee] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ns-channel[b-f2w95vl2ee] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Hint text */
.ns-hint[b-f2w95vl2ee] {
    margin: 0;
    font-size: 13px;
    color: #888;
    line-height: 1.4;
}

/* Time row */
.ns-time-row[b-f2w95vl2ee] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.ns-time-sep[b-f2w95vl2ee] {
    font-size: 20px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

.ns-time-hint[b-f2w95vl2ee] {
    font-size: 13px;
    color: #888;
    margin-bottom: 6px;
    white-space: nowrap;
}

/* Picker */
.ns-picker-label[b-f2w95vl2ee] {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

.ns-picker-list[b-f2w95vl2ee] {
    max-height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

/* Save footer */
.ns-footer[b-f2w95vl2ee] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
}
/* /Components/Pages/Admin/OrganizationManage.razor.rz.scp.css */
di.manage-layout[b-rumfrqu3kq] {
    display: flex;
    flex-direction: row;
    gap: 32px;
    margin-top: 16px; /* Consistent small spacing under page title */
    flex: none;
    min-height: 0;
    height: auto;
    align-items: flex-start; /* Align children to top */
}
.manage-layout-grid[b-rumfrqu3kq] {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 32px;
    margin-top: 12px; /* Consistent small spacing under page title */
    min-height: 0;
    min-height: calc(100vh - 230px);
    align-items: flex-start;
}

.loading-indicator[b-rumfrqu3kq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}

.organization-manager .left-panel[b-rumfrqu3kq] {
    min-width: 340px;
    max-width: 480px;
    width: 420px;
    background: #f6f7fa;
    border-radius: 12px;
    padding: 24px 20px 18px 20px;
    box-shadow: 0 4px 24px rgba(33, 150, 243, 0.10), 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    border: 1.5px solid #e3eaf3;
}

.organization-manager .right-panel[b-rumfrqu3kq] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-height: none;
    gap: 18px;
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    border: none;
}

.organization-manager .right-panel > .user-list[b-rumfrqu3kq] {
    flex: 0 0 30%;
    min-height: 0;
    overflow-y: auto;
}

.organization-manager .right-panel > .info-panel-root[b-rumfrqu3kq] {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
}
/* End of file. Shared layout styles are now in app.css */
/* /Components/Pages/Admin/Profile.razor.rz.scp.css */
.profile-container[b-cd86ipfsz7] {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.profile-header[b-cd86ipfsz7] {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.profile-avatar[b-cd86ipfsz7] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1.5rem;
    border: 3px solid var(--brand-primary);
}



.profile-form-grid[b-cd86ipfsz7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}


.profile-header-stack[b-cd86ipfsz7] {
    margin-left: 240px;
}
/* /Components/Pages/Admin/PromptBuilder.razor.rz.scp.css */
.prompt-builder-page[b-7s5ae3hx48] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0.5rem 1.5rem;
}

.eyebrow[b-7s5ae3hx48] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    margin: 0;
    color: #cbd5e1;
}

.content-grid[b-7s5ae3hx48] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1rem;
}

.left-col[b-7s5ae3hx48],
.right-col[b-7s5ae3hx48] {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
}

.helper-grid[b-7s5ae3hx48] {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}


.toggle-row[b-7s5ae3hx48] {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 0.5rem 0;
}

.actors-section[b-7s5ae3hx48] {
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.actors-header[b-7s5ae3hx48] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.actor-buttons[b-7s5ae3hx48] {
    display: flex;
    gap: 0.5rem;
}

.actors-grid[b-7s5ae3hx48] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.actor-card[b-7s5ae3hx48] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.75rem;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.actor-title[b-7s5ae3hx48] {
    font-weight: 700;
    color: #111827;
}

.helper-text[b-7s5ae3hx48] {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
}

.helper-text.compact[b-7s5ae3hx48] {
    margin-top: -0.15rem;
}

.warning-list[b-7s5ae3hx48] {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412;
}

@media (max-width: 1024px) {
    .content-grid[b-7s5ae3hx48] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/RoadSignEdit.razor.rz.scp.css */
.roadsign-edit-container[b-6bq91z5n62] {
    padding: 32px;
    background-color: #f3f4f6;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Toolbar */
.toolbar[b-6bq91z5n62] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 12px 24px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.toolbar-left[b-6bq91z5n62] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.toolbar-right[b-6bq91z5n62] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.back-button[b-6bq91z5n62] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    color: #4b5563;
    transition: all 0.2s;
    flex-shrink: 0;
}

.back-button:hover[b-6bq91z5n62] {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}

.header-info[b-6bq91z5n62] {
    display: flex;
    flex-direction: column;
}

.page-title[b-6bq91z5n62] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.page-subtitle[b-6bq91z5n62] {
    margin: 2px 0 0;
    font-size: 13px;
    color: #6b7280;
}

/* Layout */
.content-layout[b-6bq91z5n62] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}

.form-card[b-6bq91z5n62] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.card-header[b-6bq91z5n62] {
    padding: 20px 24px 0;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 16px;
}

.card-header h2[b-6bq91z5n62] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.card-body[b-6bq91z5n62] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Image section */
.image-section[b-6bq91z5n62] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-header[b-6bq91z5n62] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.section-header h3[b-6bq91z5n62] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.section-helper[b-6bq91z5n62] {
    font-size: 12px;
    color: #9ca3af;
}

.image-preview-container[b-6bq91z5n62] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.image-preview[b-6bq91z5n62] {
    width: 200px;
    height: 200px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview img[b-6bq91z5n62] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.upload-placeholder[b-6bq91z5n62] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 200px;
    height: 200px;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.2s;
    color: #9ca3af;
}

.upload-placeholder:hover[b-6bq91z5n62] {
    border-color: #0078d4;
    background: #f0f7ff;
    color: #0078d4;
}

.upload-text[b-6bq91z5n62] {
    font-size: 13px;
    font-weight: 500;
}

.upload-hint[b-6bq91z5n62] {
    font-size: 11px;
    color: #9ca3af;
}

.file-input-hidden[b-6bq91z5n62] {
    display: none;
}

.upload-error[b-6bq91z5n62] {
    font-size: 12px;
    color: #dc2626;
    margin-top: 4px;
}

/* Form fields */
.form-row[b-6bq91z5n62] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-field[b-6bq91z5n62] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-6bq91z5n62] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.form-label.required[b-6bq91z5n62]::after {
    content: " *";
    color: #dc2626;
}

.full-width[b-6bq91z5n62] {
    width: 100%;
}

/* Tags */
.tags-section[b-6bq91z5n62] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tags-list[b-6bq91z5n62] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

.tag-item[b-6bq91z5n62] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    color: #1d4ed8;
}

.tag-remove[b-6bq91z5n62] {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #93c5fd;
    line-height: 1;
}

.tag-remove:hover[b-6bq91z5n62] {
    color: #1d4ed8;
}

.tag-input-row[b-6bq91z5n62] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tag-input[b-6bq91z5n62] {
    flex: 1;
}

/* Sidebar */
.sidebar[b-6bq91z5n62] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.metadata-card[b-6bq91z5n62] {
    display: flex;
    flex-direction: column;
}

/* Toggle */
.toggle-row[b-6bq91z5n62] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-label[b-6bq91z5n62] {
    font-size: 13px;
    color: #4b5563;
}

/* Loading */
.loading-container[b-6bq91z5n62] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 0;
    color: #6b7280;
}
/* /Components/Pages/Admin/RoadSigns.razor.rz.scp.css */
.roadsign-search[b-siuo06ugx3] {
    width: 250px;
}

.category-filter[b-siuo06ugx3] {
    min-width: 160px;
}

.signtype-filter[b-siuo06ugx3] {
    min-width: 140px;
}

.status-filter[b-siuo06ugx3] {
    min-width: 120px;
}

.tag-filter-panel[b-siuo06ugx3] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
}

.tag-filter-header[b-siuo06ugx3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.tag-filter-header h4[b-siuo06ugx3] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tag-chips[b-siuo06ugx3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-chip[b-siuo06ugx3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tag-chip:hover[b-siuo06ugx3] {
    background: #e5e7eb;
    border-color: #d1d5db;
    transform: translateY(-1px);
}

.tag-chip.selected[b-siuo06ugx3] {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
}

.tag-chip.selected:hover[b-siuo06ugx3] {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

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

.roadsign-card[b-siuo06ugx3] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s;
}

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

.card-image[b-siuo06ugx3] {
    position: relative;
    width: 100%;
    height: 200px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-image img[b-siuo06ugx3] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.inactive-overlay[b-siuo06ugx3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.inactive-overlay span[b-siuo06ugx3] {
    padding: 6px 16px;
    background: white;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    color: #dc2626;
}

.card-body[b-siuo06ugx3] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-header[b-siuo06ugx3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.sign-name[b-siuo06ugx3] {
    flex: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
}

.sign-code[b-siuo06ugx3] {
    display: inline-block;
    padding: 4px 10px;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    font-family: 'Courier New', monospace;
}

.sign-description[b-siuo06ugx3] {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

.card-footer[b-siuo06ugx3] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sign-type-badge[b-siuo06ugx3] {
    padding: 4px 10px;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.category-badge[b-siuo06ugx3] {
    padding: 4px 10px;
    background: #f3e8ff;
    color: #6b21a8;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.tags-container[b-siuo06ugx3] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag[b-siuo06ugx3] {
    padding: 4px 8px;
    background: #f5f5f5;
    border-radius: 12px;
    font-size: 11px;
    color: #666;
    border: 1px solid #e5e5e5;
}

.roadsigns-table-container[b-siuo06ugx3] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.table-header[b-siuo06ugx3] {
    display: grid;
    grid-template-columns: 80px 2fr 120px 140px 140px 120px 100px;
    gap: 16px;
    padding: 16px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 13px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table-row[b-siuo06ugx3] {
    display: grid;
    grid-template-columns: 80px 2fr 120px 140px 140px 120px 100px;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    align-items: center;
    transition: background 0.15s;
}

.table-row:hover[b-siuo06ugx3] {
    background: #f9fafb;
}

.col-image[b-siuo06ugx3] {
    display: flex;
    align-items: center;
}

.sign-thumbnail[b-siuo06ugx3] {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: #f9fafb;
    border-radius: 8px;
    padding: 4px;
}

.col-name[b-siuo06ugx3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sign-info[b-siuo06ugx3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sign-name-link[b-siuo06ugx3] {
    font-weight: 500;
    color: #1a1a1a;
    font-size: 14px;
}

.sign-description-small[b-siuo06ugx3] {
    font-size: 13px;
    color: #9ca3af;
}

.col-code[b-siuo06ugx3] {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #4b5563;
    font-weight: 600;
}

.col-type[b-siuo06ugx3] {
    display: flex;
}

.col-category[b-siuo06ugx3] {
    color: #4b5563;
    font-size: 14px;
}

.col-status[b-siuo06ugx3] {
    display: flex;
}

.status-badge[b-siuo06ugx3] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.status-active[b-siuo06ugx3] {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.status-inactive[b-siuo06ugx3] {
    background: #fee2e2;
    color: #991b1b;
}

.col-actions[b-siuo06ugx3] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.empty-state[b-siuo06ugx3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    background: white;
    border-radius: 12px;
}

.empty-state h3[b-siuo06ugx3] {
    margin: 20px 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

.empty-state p[b-siuo06ugx3] {
    margin: 0 0 24px;
    color: #6b7280;
    font-size: 15px;
}

.loading-container[b-siuo06ugx3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 16px;
}
/* /Components/Pages/Admin/SourceDocuments.razor.rz.scp.css */
.page-container[b-dvorpvfptf] {
    padding: 24px;
    max-width: 1200px;
}

.page-toolbar[b-dvorpvfptf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-toolbar h3[b-dvorpvfptf] {
    margin: 0;
}

.upload-form[b-dvorpvfptf] {
    margin-bottom: 24px;
}

.form-field[b-dvorpvfptf] {
    margin-bottom: 16px;
}

.form-actions[b-dvorpvfptf] {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.file-label[b-dvorpvfptf] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.file-selected[b-dvorpvfptf] {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--neutral-foreground-hint);
}

.upload-error[b-dvorpvfptf] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 16px;
    color: var(--error);
}

.processing-banner[b-dvorpvfptf] {
    margin-bottom: 16px;
    padding: 16px;
}

.processing-banner-content[b-dvorpvfptf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.processing-banner-text[b-dvorpvfptf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9rem;
}

.processing-banner-text strong[b-dvorpvfptf] {
    font-size: 1rem;
}

.upload-warning[b-dvorpvfptf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--neutral-layer-2);
    border-radius: 4px;
    margin-top: 12px;
    font-size: 0.875rem;
    color: var(--neutral-foreground-hint);
}

.document-list[b-dvorpvfptf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.document-card[b-dvorpvfptf] {
    padding: 16px;
}

.document-header[b-dvorpvfptf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.document-info[b-dvorpvfptf] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

.document-title[b-dvorpvfptf] {
    margin: 0 0 4px 0;
    font-size: 1rem;
}

.document-meta[b-dvorpvfptf] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8125rem;
    color: var(--neutral-foreground-hint);
}

.document-actions[b-dvorpvfptf] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.document-description[b-dvorpvfptf] {
    margin: 8px 0 0 32px;
    font-size: 0.875rem;
    color: var(--neutral-foreground-hint);
}

.empty-state[b-dvorpvfptf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px;
    text-align: center;
}

.empty-state p[b-dvorpvfptf] {
    margin: 8px 0 0;
}

.empty-state-hint[b-dvorpvfptf] {
    font-size: 0.875rem;
    color: var(--neutral-foreground-hint);
}

.chunks-section[b-dvorpvfptf] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.chunk-item[b-dvorpvfptf] {
    padding: 12px;
    margin-bottom: 8px;
    background: var(--neutral-layer-2);
    border-radius: 4px;
}

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

.chunk-title-row[b-dvorpvfptf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chunk-header-actions[b-dvorpvfptf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chunk-meta[b-dvorpvfptf] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
}

.chunk-content[b-dvorpvfptf] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--neutral-foreground-rest);
    white-space: pre-wrap;
}

/* /Components/Pages/Admin/SourceDocumentSections.razor.rz.scp.css */
.sections-page[b-p5tcq1f94g] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 72px);
    box-sizing: border-box;
}

.sections-toolbar[b-p5tcq1f94g] {
    margin-bottom: 16px;
    flex-shrink: 0;
}

.reprocess-progress-banner[b-p5tcq1f94g] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    flex-shrink: 0;
}

.reprocess-progress-label[b-p5tcq1f94g] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--neutral-foreground-rest);
}

.sections-layout[b-p5tcq1f94g] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Section list (left panel) ── */

.sections-list[b-p5tcq1f94g] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
}

.sections-list-header[b-p5tcq1f94g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    position: sticky;
    top: 0;
    background: var(--neutral-layer-1);
    z-index: 1;
}

.section-item[b-p5tcq1f94g] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
}

.section-item:last-child[b-p5tcq1f94g] {
    border-bottom: none;
}

.section-item:hover[b-p5tcq1f94g] {
    background: var(--neutral-fill-hover);
}

.section-item.selected[b-p5tcq1f94g] {
    background: var(--accent-fill-rest);
}

.section-item-content[b-p5tcq1f94g] {
    flex: 1;
    min-width: 0;
}

.section-item-header[b-p5tcq1f94g] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.section-item-title[b-p5tcq1f94g] {
    font-size: 0.8125rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-item-page[b-p5tcq1f94g] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    flex-shrink: 0;
}

.section-item.selected .section-item-page[b-p5tcq1f94g] {
    color: var(--accent-foreground-rest);
    opacity: 0.8;
}

.section-item-preview[b-p5tcq1f94g] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.section-item.selected .section-item-preview[b-p5tcq1f94g] {
    color: var(--accent-foreground-rest);
    opacity: 0.9;
}

/* ── Editor (right panel) ── */

.sections-editor[b-p5tcq1f94g] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
}

.editor-header[b-p5tcq1f94g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    flex-shrink: 0;
}

.editor-title[b-p5tcq1f94g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.editor-section-label[b-p5tcq1f94g] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
}

.editor-page[b-p5tcq1f94g] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
}

.unsaved-badge[b-p5tcq1f94g] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--warning);
    background: var(--warning-fill-rest);
    border-radius: 4px;
    padding: 2px 8px;
}

.editor-header-actions[b-p5tcq1f94g] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.editor-toolbar[b-p5tcq1f94g] {
    padding: 8px 20px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.editor-body[b-p5tcq1f94g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 20px;
    gap: 12px;
    min-height: 0;
}

.editor-body.with-preview[b-p5tcq1f94g] {
    flex-direction: row;
}

.editor-textarea-wrapper[b-p5tcq1f94g] {
    flex: 1;
    display: flex;
    min-height: 0;
}

.chunk-textarea[b-p5tcq1f94g] {
    flex: 1;
    width: 100%;
    font-family: var(--body-font);
    font-size: 0.875rem;
    line-height: 1.7;
    padding: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-floating);
    color: var(--neutral-foreground-rest);
    resize: none;
    box-sizing: border-box;
}

.chunk-textarea:focus[b-p5tcq1f94g] {
    outline: none;
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.chunk-textarea:disabled[b-p5tcq1f94g] {
    opacity: 0.6;
    cursor: not-allowed;
}

.editor-preview[b-p5tcq1f94g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.preview-label[b-p5tcq1f94g] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    margin-bottom: 6px;
    flex-shrink: 0;
}

.preview-content[b-p5tcq1f94g] {
    flex: 1;
    overflow-y: auto;
    font-size: 0.875rem;
    line-height: 1.7;
    padding: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-floating);
}

.editor-footer[b-p5tcq1f94g] {
    padding: 12px 20px;
    border-top: 1px solid var(--neutral-stroke-rest);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.editor-footer-right[b-p5tcq1f94g] {
    display: flex;
    gap: 8px;
}

.sections-empty[b-p5tcq1f94g] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-hint);
}

.empty-state[b-p5tcq1f94g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px;
    text-align: center;
}

.add-section-form[b-p5tcq1f94g] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 400px;
}

.rename-section-form[b-p5tcq1f94g] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 400px;
}
/* /Components/Pages/Admin/Tags.razor.rz.scp.css */
/* Tags page styles */

.page-container[b-ckwgjghhzx] {
    padding: 16px;
    max-width: 1200px;
}

.page-toolbar[b-ckwgjghhzx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

.page-toolbar-left[b-ckwgjghhzx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.page-toolbar-right[b-ckwgjghhzx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tag-search[b-ckwgjghhzx] {
    width: 300px;
}

/* Table */
.tags-table-container[b-ckwgjghhzx] {
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.table-header[b-ckwgjghhzx] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 60px;
    padding: 10px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.table-row[b-ckwgjghhzx] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 60px;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    align-items: center;
    transition: background-color 0.15s;
}

.table-row:last-child[b-ckwgjghhzx] {
    border-bottom: none;
}

.table-row:hover[b-ckwgjghhzx] {
    background-color: #f9fafb;
}

/* Tag chip */
.tag-chip[b-ckwgjghhzx] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

/* Color swatch */
.color-swatch-container[b-ckwgjghhzx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-swatch[b-ckwgjghhzx] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.color-hex[b-ckwgjghhzx] {
    font-size: 12px;
    color: #6b7280;
    font-family: monospace;
}

.no-color[b-ckwgjghhzx] {
    color: #9ca3af;
}

/* Empty state */
.empty-state[b-ckwgjghhzx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 12px;
    color: #6b7280;
}

.empty-state h3[b-ckwgjghhzx] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
}

.empty-state p[b-ckwgjghhzx] {
    margin: 0;
    font-size: 14px;
    text-align: center;
    max-width: 320px;
}

/* Loading */
.loading-container[b-ckwgjghhzx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    gap: 16px;
    color: #6b7280;
}

/* Dialog */
.dialog-overlay[b-ckwgjghhzx] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.create-tag-dialog[b-ckwgjghhzx],
.confirm-dialog[b-ckwgjghhzx] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 440px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dialog-header[b-ckwgjghhzx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.dialog-title h2[b-ckwgjghhzx] {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.dialog-subtitle[b-ckwgjghhzx] {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.close-button[b-ckwgjghhzx] {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.close-button:hover[b-ckwgjghhzx] {
    background: #f3f4f6;
    color: #374151;
}

.dialog-body[b-ckwgjghhzx] {
    padding: 20px 24px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group[b-ckwgjghhzx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-ckwgjghhzx] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.form-label.required[b-ckwgjghhzx]::after {
    content: " *";
    color: #ef4444;
}

.form-input[b-ckwgjghhzx] {
    width: 100%;
}

.color-select-wrapper[b-ckwgjghhzx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-select-swatch[b-ckwgjghhzx] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.color-select[b-ckwgjghhzx] {
    flex: 1;
}

/* Tag preview */
.tag-preview[b-ckwgjghhzx] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tag-preview[b-ckwgjghhzx]::before {
    content: "Preview:";
    font-size: 12px;
    color: #9ca3af;
}

.dialog-footer[b-ckwgjghhzx] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
}
/* /Components/Pages/Admin/User.razor.rz.scp.css */
.user-profile-page[b-xdybgz87zb] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

.profile-header[b-xdybgz87zb] {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    width: 100%;
}

.profile-header-content[b-xdybgz87zb] {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 100%;
}

.profile-avatar[b-xdybgz87zb] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #323130;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-avatar img[b-xdybgz87zb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials[b-xdybgz87zb] {
    font-size: 28px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

.profile-info[b-xdybgz87zb] {
    flex: 1;
}

.profile-name-row[b-xdybgz87zb] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.profile-name[b-xdybgz87zb] {
    font-size: 24px;
    font-weight: 600;
    color: #323130;
    margin: 0;
}

.profile-role-badge[b-xdybgz87zb] {
    padding: 4px 12px;
    background: #323130;
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.profile-organization[b-xdybgz87zb] {
    color: #605e5c;
    font-size: 14px;
    margin: 0;
}

.profile-actions[b-xdybgz87zb] {
    margin-left: auto;
}

.profile-tabs[b-xdybgz87zb] {
    background: white;
    border-radius: 12px;
    padding: 0;
    margin-bottom: 24px;
    display: flex;
    border-bottom: 2px solid #edebe9;
    width: 100%;
}

.tab-button[b-xdybgz87zb] {
    flex: 1;
    padding: 16px 24px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #605e5c;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.tab-button:hover[b-xdybgz87zb] {
    color: #323130;
}

.tab-button.active[b-xdybgz87zb] {
    color: #323130;
}

.tab-button.active[b-xdybgz87zb]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #323130;
}

.profile-content[b-xdybgz87zb] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.profile-section[b-xdybgz87zb] {
    background: white;
    border-radius: 12px;
    border: 1px solid #edebe9;
    overflow: hidden;
    width: 100%;
}

.section-header[b-xdybgz87zb] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
    border-bottom: 1px solid #edebe9;
}

.section-title[b-xdybgz87zb] {
    flex: 1;
}

.section-title h2[b-xdybgz87zb] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin: 0 0 4px 0;
}

.section-title p[b-xdybgz87zb] {
    font-size: 13px;
    color: #605e5c;
    margin: 0;
}

.section-content[b-xdybgz87zb] {
    padding: 24px;
}

.form-row[b-xdybgz87zb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group[b-xdybgz87zb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width[b-xdybgz87zb] {
    grid-column: 1 / -1;
}

.form-label[b-xdybgz87zb] {
    font-size: 13px;
    font-weight: 600;
    color: #323130;
}

.form-input[b-xdybgz87zb] {
    width: 100%;
}

.input-with-badge[b-xdybgz87zb] {
    position: relative;
}

.verified-badge[b-xdybgz87zb] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 8px;
    background: #107c10;
    color: white;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.section-actions[b-xdybgz87zb] {
    margin-top: 24px;
    display: flex;
    justify-content: flex-start;
}

.two-factor-option[b-xdybgz87zb] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #faf9f8;
    border-radius: 8px;
}

.two-factor-icon[b-xdybgz87zb] {
    width: 48px;
    height: 48px;
    background: #edebe9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.two-factor-info[b-xdybgz87zb] {
    flex: 1;
}

.two-factor-info h3[b-xdybgz87zb] {
    font-size: 14px;
    font-weight: 600;
    color: #323130;
    margin: 0 0 4px 0;
}

.two-factor-info p[b-xdybgz87zb] {
    font-size: 13px;
    color: #605e5c;
    margin: 0;
}

.danger-zone[b-xdybgz87zb] {
    border-color: #f1aeb5;
    background: #f8d7da;
}

.danger-zone .section-header[b-xdybgz87zb] {
    border-bottom-color: #f1aeb5;
}

.danger-title[b-xdybgz87zb] {
    color: #842029;
}

.danger-action[b-xdybgz87zb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #f1aeb5;
}

.danger-info[b-xdybgz87zb] {
    flex: 1;
}

.danger-info h3[b-xdybgz87zb] {
    font-size: 14px;
    font-weight: 600;
    color: #842029;
    margin: 0 0 4px 0;
}

.danger-info p[b-xdybgz87zb] {
    font-size: 13px;
    color: #721c24;
    margin: 0;
}

.danger-button[b-xdybgz87zb] {
    background: #d32f2f !important;
    color: white !important;
}

.danger-button:hover[b-xdybgz87zb] {
    background: #c62828 !important;
}

.empty-state[b-xdybgz87zb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.empty-state h3[b-xdybgz87zb] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    margin: 16px 0 8px 0;
}

.empty-state p[b-xdybgz87zb] {
    font-size: 14px;
    color: #605e5c;
    margin: 0;
}

@media (max-width: 768px) {
    .profile-header-content[b-xdybgz87zb] {
        flex-direction: column;
        text-align: center;
    }

    .profile-actions[b-xdybgz87zb] {
        margin-left: 0;
        width: 100%;
    }

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

    .profile-tabs[b-xdybgz87zb] {
        overflow-x: auto;
    }

    .tab-button[b-xdybgz87zb] {
        flex-shrink: 0;
        min-width: 120px;
    }

    .two-factor-option[b-xdybgz87zb] {
        flex-direction: column;
        text-align: center;
    }

    .danger-action[b-xdybgz87zb] {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
}
/* /Components/Pages/Admin/Users.razor.rz.scp.css */
/* User profile specific styles (different from Users list) */
.user-profile-page[b-90dc8asbv5] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

.profile-header[b-90dc8asbv5] {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    width: 100%;
}

.profile-header-content[b-90dc8asbv5] {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 100%;
}

.profile-avatar[b-90dc8asbv5] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #323130;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

    .profile-avatar img[b-90dc8asbv5] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.avatar-initials[b-90dc8asbv5] {
    font-size: 28px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

.profile-info[b-90dc8asbv5] {
    flex: 1;
}

.profile-name-row[b-90dc8asbv5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.profile-name[b-90dc8asbv5] {
    font-size: 24px;
    font-weight: 600;
    color: #323130;
    margin: 0;
}

.profile-role-badge[b-90dc8asbv5] {
    padding: 4px 12px;
    background: #323130;
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.profile-organization[b-90dc8asbv5] {
    color: #605e5c;
    font-size: 14px;
    margin: 0;
}

.profile-actions[b-90dc8asbv5] {
    margin-left: auto;
}

.profile-tabs[b-90dc8asbv5] {
    background: white;
    border-radius: 12px;
    padding: 0;
    margin-bottom: 24px;
    display: flex;
    border-bottom: 2px solid #edebe9;
    width: 100%;
}

.tab-button[b-90dc8asbv5] {
    flex: 1;
    padding: 16px 24px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #605e5c;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

    .tab-button:hover[b-90dc8asbv5] {
        color: #323130;
    }

    .tab-button.active[b-90dc8asbv5] {
        color: #323130;
    }

        .tab-button.active[b-90dc8asbv5]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: #323130;
        }

.profile-content[b-90dc8asbv5] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.profile-section[b-90dc8asbv5] {
    background: white;
    border-radius: 12px;
    border: 1px solid #edebe9;
    overflow: hidden;
    width: 100%;
}

.section-header[b-90dc8asbv5] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
    border-bottom: 1px solid #edebe9;
}

.section-title[b-90dc8asbv5] {
    flex: 1;
}

    .section-title h2[b-90dc8asbv5] {
        font-size: 16px;
        font-weight: 600;
        color: #323130;
        margin: 0 0 4px 0;
    }

    .section-title p[b-90dc8asbv5] {
        font-size: 13px;
        color: #605e5c;
        margin: 0;
    }

.section-content[b-90dc8asbv5] {
    padding: 24px;
}

.form-row[b-90dc8asbv5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group[b-90dc8asbv5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group.full-width[b-90dc8asbv5] {
        grid-column: 1 / -1;
    }

.form-label[b-90dc8asbv5] {
    font-size: 13px;
    font-weight: 600;
    color: #323130;
}

.form-input[b-90dc8asbv5] {
    width: 100%;
}

.input-with-badge[b-90dc8asbv5] {
    position: relative;
}

.verified-badge[b-90dc8asbv5] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 8px;
    background: #107c10;
    color: white;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.section-actions[b-90dc8asbv5] {
    margin-top: 24px;
    display: flex;
    justify-content: flex-start;
}

.two-factor-option[b-90dc8asbv5] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #faf9f8;
    border-radius: 8px;
}

.two-factor-icon[b-90dc8asbv5] {
    width: 48px;
    height: 48px;
    background: #edebe9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.two-factor-info[b-90dc8asbv5] {
    flex: 1;
}

    .two-factor-info h3[b-90dc8asbv5] {
        font-size: 14px;
        font-weight: 600;
        color: #323130;
        margin: 0 0 4px 0;
    }

    .two-factor-info p[b-90dc8asbv5] {
        font-size: 13px;
        color: #605e5c;
        margin: 0;
    }

.danger-zone[b-90dc8asbv5] {
    border-color: #f1aeb5;
    background: #f8d7da;
}

    .danger-zone .section-header[b-90dc8asbv5] {
        border-bottom-color: #f1aeb5;
    }

.danger-title[b-90dc8asbv5] {
    color: #842029;
}

.danger-action[b-90dc8asbv5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #f1aeb5;
}

.danger-info[b-90dc8asbv5] {
    flex: 1;
}

    .danger-info h3[b-90dc8asbv5] {
        font-size: 14px;
        font-weight: 600;
        color: #842029;
        margin: 0 0 4px 0;
    }

    .danger-info p[b-90dc8asbv5] {
        font-size: 13px;
        color: #721c24;
        margin: 0;
    }

.danger-button[b-90dc8asbv5] {
    background: #d32f2f !important;
    color: white !important;
}

    .danger-button:hover[b-90dc8asbv5] {
        background: #c62828 !important;
    }

.empty-state[b-90dc8asbv5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

    .empty-state h3[b-90dc8asbv5] {
        font-size: 18px;
        font-weight: 600;
        color: #323130;
        margin: 16px 0 8px 0;
    }

    .empty-state p[b-90dc8asbv5] {
        font-size: 14px;
        color: #605e5c;
        margin: 0;
    }

@media (max-width: 768px) {
    .profile-header-content[b-90dc8asbv5] {
        flex-direction: column;
        text-align: center;
    }

    .profile-actions[b-90dc8asbv5] {
        margin-left: 0;
        width: 100%;
    }

    .form-row[b-90dc8asbv5] {
        grid-template-columns: 1fr;
    }

    .profile-tabs[b-90dc8asbv5] {
        overflow-x: auto;
    }

    .tab-button[b-90dc8asbv5] {
        flex-shrink: 0;
        min-width: 120px;
    }

    .two-factor-option[b-90dc8asbv5] {
        flex-direction: column;
        text-align: center;
    }

    .danger-action[b-90dc8asbv5] {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
}
/* /Components/Pages/Login/Login.razor.rz.scp.css */
.dialog-grid[b-43yrm6oca1] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px 16px;
}

.dialog-grid label:not(.remember-me-checkbox)[b-43yrm6oca1] {
    font-weight: 500;
    color: #323130;
    white-space: nowrap;
}

.dialog-grid input[type="email"][b-43yrm6oca1],
.dialog-grid input[type="password"][b-43yrm6oca1] {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #c8c6c4;
    border-radius: 6px;
    font-size: 0.95rem;
    color: #201f1e;
    background: #faf9f8;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dialog-grid input[type="email"]:focus[b-43yrm6oca1],
.dialog-grid input[type="password"]:focus[b-43yrm6oca1] {
    border-color: #0078d4;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
    background: #fff;
}

.remember-me-checkbox[b-43yrm6oca1] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #323130;
    user-select: none;
}

.remember-me-checkbox input[type="checkbox"][b-43yrm6oca1] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid #c8c6c4;
    border-radius: 4px;
    background: #faf9f8;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease;
    position: relative;
}

.remember-me-checkbox input[type="checkbox"]:checked[b-43yrm6oca1] {
    background: #0078d4;
    border-color: #0078d4;
}

.remember-me-checkbox input[type="checkbox"]:checked[b-43yrm6oca1]::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: 2px solid white;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.remember-me-checkbox input[type="checkbox"]:focus[b-43yrm6oca1] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

.themed-button[b-43yrm6oca1] {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 8px;
    background-color: #af212f !important;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.themed-button:hover:not(:disabled)[b-43yrm6oca1] {
    background-color: #8a1a25 !important;
}

.themed-button:disabled[b-43yrm6oca1] {
    opacity: 0.6;
    cursor: not-allowed;
}

.info-message[b-43yrm6oca1] {
    color: #0078d4;
    font-weight: bold;
    margin-top: 1rem;
}

.error-message[b-43yrm6oca1] {
    color: #d13438;
    font-weight: bold;
    margin-top: 1rem;
}
/* /Components/Pages/Portal/Activity.razor.rz.scp.css */
.activity-page[b-9c9cphfyhg] {
    padding: 24px;
    background-color: #fafafa;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

.activity-header[b-9c9cphfyhg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.header-content h1[b-9c9cphfyhg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 24px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
}

.header-content .subtitle[b-9c9cphfyhg] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.header-actions[b-9c9cphfyhg] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.filters-row[b-9c9cphfyhg] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
}

.filter-select[b-9c9cphfyhg] {
    min-width: 200px;
}

.activity-content[b-9c9cphfyhg] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.loading-container[b-9c9cphfyhg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 24px;
    color: #666;
}

.empty-state[b-9c9cphfyhg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    color: #666;
}

.empty-state fluent-icon[b-9c9cphfyhg] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-9c9cphfyhg] {
    font-size: 16px;
    margin: 0;
    color: #666;
}

.activity-list[b-9c9cphfyhg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item[b-9c9cphfyhg] {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #fafafa;
    border-radius: 8px;
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
}

.activity-item:hover[b-9c9cphfyhg] {
    background: #f5f5f5;
    transform: translateX(4px);
}

.activity-item.correct[b-9c9cphfyhg] {
    border-left-color: #16a34a;
}

.activity-item.incorrect[b-9c9cphfyhg] {
    border-left-color: #dc2626;
}

.activity-indicator[b-9c9cphfyhg] {
    display: flex;
    align-items: flex-start;
    padding-top: 0.25rem;
}

.activity-details[b-9c9cphfyhg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-header-row[b-9c9cphfyhg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.student-info[b-9c9cphfyhg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #111827;
}

.student-name[b-9c9cphfyhg] {
    font-size: 15px;
}

.activity-time[b-9c9cphfyhg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

.activity-question[b-9c9cphfyhg] {
    padding: 12px;
    background: white;
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
}

.question-text[b-9c9cphfyhg] {
    font-size: 14px;
    color: #111827;
    line-height: 1.5;
}

.activity-meta[b-9c9cphfyhg] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.answered-date[b-9c9cphfyhg] {
    font-size: 13px;
    color: #6b7280;
}

.load-more-container[b-9c9cphfyhg] {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

@media (max-width: 768px) {
    .activity-page[b-9c9cphfyhg] {
        padding: 16px;
    }

    .activity-header[b-9c9cphfyhg] {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }

    .header-content h1[b-9c9cphfyhg] {
        font-size: 20px;
    }

    .header-actions[b-9c9cphfyhg] {
        width: 100%;
    }

    .filters-row[b-9c9cphfyhg] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-select[b-9c9cphfyhg] {
        width: 100%;
    }

    .activity-item[b-9c9cphfyhg] {
        flex-direction: column;
        gap: 12px;
    }

    .activity-header-row[b-9c9cphfyhg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
/* /Components/Pages/Portal/Components/AuditLogPanel.razor.rz.scp.css */
/* AuditLogPanel – timeline layout */

.audit-log-panel[b-zed9uihslk] {
    padding: 4px 0;
}

.audit-loading[b-zed9uihslk],
.audit-empty[b-zed9uihslk] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
    color: #9ca3af;
    font-size: 14px;
}

/* ── Timeline ── */

.audit-timeline[b-zed9uihslk] {
    display: flex;
    flex-direction: column;
}

.audit-timeline-item[b-zed9uihslk] {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

/* Left column: icon + connector */

.audit-icon-col[b-zed9uihslk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 36px;
}

.audit-icon-circle[b-zed9uihslk] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audit-icon-circle.action-created[b-zed9uihslk] {
    background: #d1fae5;
    color: #059669;
}

.audit-icon-circle.action-updated[b-zed9uihslk] {
    background: #dbeafe;
    color: #2563eb;
}

.audit-icon-circle.action-deleted[b-zed9uihslk] {
    background: #fee2e2;
    color: #dc2626;
}

.audit-icon-circle.action-other[b-zed9uihslk] {
    background: #f3f4f6;
    color: #6b7280;
}

.audit-connector[b-zed9uihslk] {
    flex: 1;
    width: 2px;
    background: #e5e7eb;
    margin: 4px 0;
    min-height: 8px;
}

.audit-timeline-item:last-child .audit-connector[b-zed9uihslk] {
    display: none;
}

/* ── Card ── */

.audit-card[b-zed9uihslk] {
    flex: 1;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.audit-card-header[b-zed9uihslk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.audit-card-left[b-zed9uihslk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Action badge */

.audit-action-badge[b-zed9uihslk] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.audit-action-badge.action-created[b-zed9uihslk] {
    background: #d1fae5;
    color: #059669;
}

.audit-action-badge.action-updated[b-zed9uihslk] {
    background: #dbeafe;
    color: #2563eb;
}

.audit-action-badge.action-deleted[b-zed9uihslk] {
    background: #fee2e2;
    color: #dc2626;
}

.audit-action-badge.action-other[b-zed9uihslk] {
    background: #f3f4f6;
    color: #6b7280;
}

.audit-changed-by[b-zed9uihslk] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
}

.audit-time-label[b-zed9uihslk] {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    margin-left: auto;
}

/* ── Field changes ── */

.audit-fields-list[b-zed9uihslk] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.audit-field-row[b-zed9uihslk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    flex-wrap: wrap;
}

.audit-field-key[b-zed9uihslk] {
    color: #6b7280;
    font-weight: 500;
    min-width: 90px;
}

.audit-old-value[b-zed9uihslk] {
    color: #ef4444;
    text-decoration: line-through;
    font-size: 12px;
    opacity: 0.8;
}

.audit-field-arrow[b-zed9uihslk] {
    color: #d1d5db;
    font-size: 11px;
}

.audit-field-value[b-zed9uihslk] {
    color: #374151;
    word-break: break-word;
}

.audit-more-fields[b-zed9uihslk] {
    font-size: 11px;
    color: #9ca3af;
    font-style: italic;
    padding-top: 2px;
}


.audit-panel-header[b-zed9uihslk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.audit-panel-header h4[b-zed9uihslk] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.audit-loading[b-zed9uihslk],
.audit-empty[b-zed9uihslk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    color: #9ca3af;
    font-size: 13px;
}

.audit-list[b-zed9uihslk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.audit-item[b-zed9uihslk] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    background: white;
    border-radius: 6px;
    border: 1px solid #f3f4f6;
}

.audit-icon[b-zed9uihslk] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audit-icon.action-created[b-zed9uihslk] {
    background: #d1fae5;
    color: #059669;
}

.audit-icon.action-updated[b-zed9uihslk] {
    background: #dbeafe;
    color: #2563eb;
}

.audit-icon.action-deleted[b-zed9uihslk] {
    background: #fee2e2;
    color: #dc2626;
}

.audit-icon.action-other[b-zed9uihslk] {
    background: #f3f4f6;
    color: #6b7280;
}

.audit-content[b-zed9uihslk] {
    flex: 1;
    min-width: 0;
}

.audit-row[b-zed9uihslk] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.audit-action[b-zed9uihslk] {
    font-size: 12px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
}

.audit-action.action-created[b-zed9uihslk] {
    background: #d1fae5;
    color: #059669;
}

.audit-action.action-updated[b-zed9uihslk] {
    background: #dbeafe;
    color: #2563eb;
}

.audit-action.action-deleted[b-zed9uihslk] {
    background: #fee2e2;
    color: #dc2626;
}

.audit-action.action-other[b-zed9uihslk] {
    background: #f3f4f6;
    color: #6b7280;
}

.audit-by[b-zed9uihslk] {
    font-size: 12px;
    color: #374151;
}

.audit-time[b-zed9uihslk] {
    font-size: 11px;
    color: #9ca3af;
    margin-left: auto;
}

.audit-details[b-zed9uihslk] {
    margin-top: 4px;
}

.audit-details summary[b-zed9uihslk] {
    font-size: 11px;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
}

.audit-json[b-zed9uihslk] {
    font-size: 11px;
    background: #f3f4f6;
    border-radius: 4px;
    padding: 6px 8px;
    margin-top: 4px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: #374151;
}
/* /Components/Pages/Portal/Components/Dialogs/AiGenerateQuestionDialog.razor.rz.scp.css */
.ai-dialog-overlay[b-l5swuv7r7r] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    padding: 80px 24px 24px 24px;
    overflow-y: auto;
}

.ai-dialog[b-l5swuv7r7r] {
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.ai-dialog h3[b-l5swuv7r7r] {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.ai-dialog-hint[b-l5swuv7r7r] {
    margin: 0 0 16px;
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.5;
}

.ai-dialog-error[b-l5swuv7r7r] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #fef2f2;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #b91c1c;
}

.ai-dialog-actions[b-l5swuv7r7r] {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: flex-end;
}

.ai-dialog-loading[b-l5swuv7r7r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

/* Limit dropdown height for section select to show only 4-5 items before scrolling */
[b-l5swuv7r7r] fluent-select::part(listbox) {
    max-height: 320px !important;
    overflow-y: auto !important;
}
/* /Components/Pages/Portal/Components/Dialogs/AiPromptDebugDialog.razor.rz.scp.css */
.prompt-debug-overlay[b-kf6ujprham] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prompt-debug-dialog[b-kf6ujprham] {
    background: var(--neutral-layer-1, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    width: 720px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.prompt-debug-header[b-kf6ujprham] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest, #e5e7eb);
}

.prompt-debug-header h3[b-kf6ujprham] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.prompt-debug-tabs[b-kf6ujprham] {
    display: flex;
    gap: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--neutral-stroke-rest, #e5e7eb);
}

.debug-tab[b-kf6ujprham] {
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--neutral-foreground-hint, #6b7280);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s, border-color 0.15s;
}

.debug-tab:hover[b-kf6ujprham] {
    color: var(--neutral-foreground-rest, #111827);
}

.debug-tab.active[b-kf6ujprham] {
    color: var(--accent-fill-rest, #0066cc);
    border-bottom-color: var(--accent-fill-rest, #0066cc);
    font-weight: 600;
}

.debug-tab-badge[b-kf6ujprham] {
    background: var(--accent-fill-rest, #0066cc);
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 600;
}

.prompt-debug-body[b-kf6ujprham] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prompt-toolbar[b-kf6ujprham] {
    display: flex;
    justify-content: flex-end;
}

.prompt-text[b-kf6ujprham] {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.6;
    background: var(--neutral-layer-2, #f9fafb);
    border: 1px solid var(--neutral-stroke-rest, #e5e7eb);
    border-radius: 6px;
    padding: 14px 16px;
    margin: 0;
    color: var(--neutral-foreground-rest, #111827);
    flex: 1;
}

.debug-empty[b-kf6ujprham] {
    color: var(--neutral-foreground-hint, #6b7280);
    font-size: 0.875rem;
    text-align: center;
    padding: 32px 0;
}

.source-chunks-list[b-kf6ujprham] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.source-chunk[b-kf6ujprham] {
    border: 1px solid var(--neutral-stroke-rest, #e5e7eb);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--neutral-layer-2, #f9fafb);
}

.source-chunk-header[b-kf6ujprham] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.source-chunk-index[b-kf6ujprham] {
    background: var(--accent-fill-rest, #0066cc);
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.source-chunk-doc[b-kf6ujprham] {
    font-weight: 600;
    font-size: 0.875rem;
    flex: 1;
}

.source-chunk-meta[b-kf6ujprham] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint, #6b7280);
    background: var(--neutral-layer-3, #f3f4f6);
    border-radius: 4px;
    padding: 2px 6px;
}

.source-chunk-section[b-kf6ujprham] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint, #6b7280);
    margin-bottom: 6px;
    font-style: italic;
}

.source-chunk-content[b-kf6ujprham] {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--neutral-foreground-rest, #374151);
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Components/Pages/Portal/Components/Dialogs/CreateEditGroupDialog.razor.rz.scp.css */
/* CreateEditGroupDialog - Uses shared styles from /css/DialogShared.css */
/* Add component-specific overrides here if needed */

.lessons-select[b-zcsi0xoz6q] {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #1a1a1a;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 20px;
    padding-right: 36px;
}

.lessons-select:hover[b-zcsi0xoz6q] {
    border-color: #9ca3af;
}

.lessons-select:focus[b-zcsi0xoz6q] {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(30, 74, 123, 0.2);
}
/* /Components/Pages/Portal/Components/Dialogs/CreateEditItemDialog.razor.rz.scp.css */
/* CreateEditItemDialog - Uses shared styles from /css/DialogShared.css */
/* Add component-specific overrides here if needed */

.field-hint[b-o69h1cip9f] {
    font-size: 12px;
    color: #6b7280;
}

.error-text[b-o69h1cip9f] {
    font-size: 14px;
    color: #ef4444;
    margin: 0;
}
/* /Components/Pages/Portal/Components/Dialogs/CreateEditLessonDialog.razor.rz.scp.css */
/* CreateEditLessonDialog - Uses shared styles from /css/DialogShared.css */
/* Add component-specific overrides here if needed */

/* Larger dialog size for this component */
.dialog[b-1ro3puqp8u] {
    max-width: 550px;
}
/* /Components/Pages/Portal/Components/Dialogs/CreateEditModuleDialog.razor.rz.scp.css */
/* CreateEditModuleDialog - Uses shared styles from /css/DialogShared.css */
/* Add component-specific overrides here if needed */

/* Larger dialog size for this component */
.dialog[b-bb9tnwsvjy] {
    max-width: 550px;
}
/* /Components/Pages/Portal/Components/Dialogs/CreateEditStudentDialog.razor.rz.scp.css */
.create-edit-student-dialog[b-3kkz28bs3y] {
    max-width: 600px;
}

.validation-error-banner[b-3kkz28bs3y] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 1px solid #fca5a5;
    border-radius: 8px;
    color: #991b1b;
    margin-bottom: 24px;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
}

.form-row[b-3kkz28bs3y] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 0;
}

.form-group[b-3kkz28bs3y] {
    margin-bottom: 20px;
    width: 100%;
}

.form-label[b-3kkz28bs3y] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
    letter-spacing: 0.01em;
}

.form-label.required[b-3kkz28bs3y]::after {
    content: " *";
    color: #ef4444;
    font-weight: 700;
}

.status-section[b-3kkz28bs3y] {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 10px;
    margin-bottom: 0;
}

.status-content[b-3kkz28bs3y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-info[b-3kkz28bs3y] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.status-info .form-label[b-3kkz28bs3y] {
    margin-bottom: 0;
    color: #0c4a6e;
}

.status-description[b-3kkz28bs3y] {
    font-size: 13px;
    color: #0369a1;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .form-row[b-3kkz28bs3y] {
        grid-template-columns: 1fr;
    }

    .create-edit-student-dialog[b-3kkz28bs3y] {
        max-width: 100%;
    }
}

/* /Components/Pages/Portal/Components/Dialogs/CreateTheoryScheduleDialog.razor.rz.scp.css */
.loading-lessons[b-fyn5san7oy] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    padding: 12px 0;
}

.lesson-selection[b-fyn5san7oy] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    padding: 8px;
    background: var(--neutral-layer-1);
}

.lesson-item[b-fyn5san7oy] {
    display: flex;
    align-items: flex-start;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.lesson-item:hover[b-fyn5san7oy] {
    background: var(--neutral-layer-2);
}

.lesson-checkbox[b-fyn5san7oy] {
    width: 100%;
}

.lesson-info[b-fyn5san7oy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.lesson-title[b-fyn5san7oy] {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-size: 14px;
}

.lesson-category[b-fyn5san7oy] {
    font-size: 12px;
    color: var(--accent-foreground-rest);
    font-weight: 500;
}

.lesson-description[b-fyn5san7oy] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-lessons-summary[b-fyn5san7oy] {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--accent-layer-2);
    border-radius: 4px;
    font-size: 13px;
    color: var(--accent-foreground-rest);
    font-weight: 500;
}

.no-lessons-available[b-fyn5san7oy] {
    padding: 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

.form-hint[b-fyn5san7oy] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-bottom: 8px;
    display: block;
}
/* /Components/Pages/Portal/Components/Dialogs/EditTheoryScheduleDialog.razor.rz.scp.css */
.validation-error-banner[b-xyme28khxd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    border-left: 4px solid;
    font-size: 14px;
}

.loading-lessons[b-xyme28khxd] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    padding: 12px 0;
}

.lesson-selection[b-xyme28khxd] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    padding: 8px;
    background: var(--neutral-layer-1);
}

.lesson-item[b-xyme28khxd] {
    display: flex;
    align-items: flex-start;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.lesson-item:hover[b-xyme28khxd] {
    background: var(--neutral-layer-2);
}

.lesson-checkbox[b-xyme28khxd] {
    width: 100%;
}

.lesson-info[b-xyme28khxd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.lesson-title[b-xyme28khxd] {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-size: 14px;
}

.lesson-category[b-xyme28khxd] {
    font-size: 12px;
    color: var(--accent-foreground-rest);
    font-weight: 500;
}

.lesson-description[b-xyme28khxd] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-lessons-summary[b-xyme28khxd] {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--accent-layer-2);
    border-radius: 4px;
    font-size: 13px;
    color: var(--accent-foreground-rest);
    font-weight: 500;
}

.no-lessons-available[b-xyme28khxd] {
    padding: 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

.form-hint[b-xyme28khxd] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-bottom: 8px;
    display: block;
}
/* /Components/Pages/Portal/Components/Dialogs/ImportStudentsDialog.razor.rz.scp.css */
/* ImportStudentsDialog - Uses shared styles from /css/DialogShared.css */
/* Add component-specific overrides here if needed */

[b-7r0mlcf47r] .import-dialog {
    width: 600px;
    max-width: 90vw;
}

.dialog-container[b-7r0mlcf47r] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.import-result[b-7r0mlcf47r] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f0f9ff;
    border: 1px solid #0ea5e9;
    border-radius: 6px;
}

.import-instructions p[b-7r0mlcf47r] {
    margin: 0 0 8px 0;
    font-weight: 500;
}

.import-instructions ul[b-7r0mlcf47r] {
    margin: 0;
    padding-left: 20px;
}

.import-instructions li[b-7r0mlcf47r] {
    margin-bottom: 8px;
    color: #666;
}

.file-input[b-7r0mlcf47r] {
    width: 100%;
    padding: 8px;
    border: 2px dashed #ddd;
    border-radius: 6px;
    cursor: pointer;
}

.file-input:hover[b-7r0mlcf47r] {
    border-color: #1E4A7B;
}
/* /Components/Pages/Portal/Components/Dialogs/Info/ActivityInfoDialog.razor.rz.scp.css */
/* ActivityInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */
/* /Components/Pages/Portal/Components/Dialogs/Info/CategoriesInfoDialog.razor.rz.scp.css */
/* CategoriesInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */

/* /Components/Pages/Portal/Components/Dialogs/Info/CreateImageInfoDialog.razor.rz.scp.css */
/* CreateImageInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */
/* /Components/Pages/Portal/Components/Dialogs/Info/CurriculumInfoDialog.razor.rz.scp.css */
/* CurriculumInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */
/* /Components/Pages/Portal/Components/Dialogs/Info/DashboardInfoDialog.razor.rz.scp.css */
/* DashboardInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */

/* /Components/Pages/Portal/Components/Dialogs/Info/GroupDetailsInfoDialog.razor.rz.scp.css */
/* GroupDetailsInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */




/* /Components/Pages/Portal/Components/Dialogs/Info/GroupsInfoDialog.razor.rz.scp.css */
/* GroupsInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */
/* /Components/Pages/Portal/Components/Dialogs/Info/LessonDetailsInfoDialog.razor.rz.scp.css */
/* LessonDetailsInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */
/* /Components/Pages/Portal/Components/Dialogs/Info/LessonsInfoDialog.razor.rz.scp.css */
/* LessonsInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */
/* /Components/Pages/Portal/Components/Dialogs/Info/LowPerformanceInfoDialog.razor.rz.scp.css */
/* LowPerformanceInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */

/* /Components/Pages/Portal/Components/Dialogs/Info/ModuleDetailsInfoDialog.razor.rz.scp.css */
/* ModuleDetailsInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */
/* /Components/Pages/Portal/Components/Dialogs/Info/PerformanceInfoDialog.razor.rz.scp.css */
/* PerformanceInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */


.benefits-grid[b-czxp0ematb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.benefit-item[b-czxp0ematb] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.benefit-item span[b-czxp0ematb] {
    font-size: 13px;
    color: #111827;
    line-height: 1.5;
}

.success-highlight[b-czxp0ematb] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}

.success-highlight h4[b-czxp0ematb] {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: #166534;
}

.success-highlight p[b-czxp0ematb] {
    margin: 0;
    font-size: 13px;
    color: #166534;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .performance-info-dialog[b-czxp0ematb] {
        max-width: 95%;
        max-height: 95vh;
    }

    .benefits-grid[b-czxp0ematb] {
        grid-template-columns: 1fr;
    }

    .success-highlight[b-czxp0ematb] {
        flex-direction: column;
    }
}
/* /Components/Pages/Portal/Components/Dialogs/Info/QuestionAddEditInfoDialog.razor.rz.scp.css */
/* QuestionAddEditInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */

/* /Components/Pages/Portal/Components/Dialogs/Info/QuestionDetailsInfoDialog.razor.rz.scp.css */
/* QuestionDetailsInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */


/* /Components/Pages/Portal/Components/Dialogs/Info/QuestionsInfoDialog.razor.rz.scp.css */
/* QuestionsInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */
/* /Components/Pages/Portal/Components/Dialogs/Info/SchedulesInfoDialog.razor.rz.scp.css */
/* SchedulesInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */
/* /Components/Pages/Portal/Components/Dialogs/Info/StudentDetailsInfoDialog.razor.rz.scp.css */
.student-details-info-dialog[b-1nyz99cib3] {
    max-width: 700px;
}

.info-dialog-header[b-1nyz99cib3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-dialog-header h2[b-1nyz99cib3] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.info-close-button[b-1nyz99cib3] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.info-close-button:hover[b-1nyz99cib3] {
    color: #111827;
}

.info-content[b-1nyz99cib3] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.info-intro[b-1nyz99cib3] {
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

.info-sections[b-1nyz99cib3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-section-item[b-1nyz99cib3] {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.info-section-item:hover[b-1nyz99cib3] {
    background: #f3f4f6;
}

.section-icon[b-1nyz99cib3] {
    flex-shrink: 0;
}

.section-content h3[b-1nyz99cib3] {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.section-content p[b-1nyz99cib3] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
}

.info-features h3[b-1nyz99cib3] {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.info-features ul[b-1nyz99cib3] {
    margin: 0;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-features li[b-1nyz99cib3] {
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;
}

.info-tip[b-1nyz99cib3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde047;
    border-radius: 8px;
}

.info-tip p[b-1nyz99cib3] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #92400e;
}

/* /Components/Pages/Portal/Components/Dialogs/Info/StudentsInfoDialog.razor.rz.scp.css */
/* StudentsInfoDialog - Uses shared styles from /css/InfoDialogShared.css */
/* Add component-specific overrides here if needed */
/* /Components/Pages/Portal/Components/Dialogs/PdfViewerDialog.razor.rz.scp.css */
.pdf-dialog-overlay[b-g6p2kzstys] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.pdf-dialog[b-g6p2kzstys] {
    background: var(--neutral-layer-1, #fff);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    width: 90vw;
    max-width: 1600px;
    height: 90vh;
    overflow: hidden;
}

.pdf-dialog-header[b-g6p2kzstys] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest, #e5e7eb);
    flex-shrink: 0;
}

.pdf-dialog-title[b-g6p2kzstys] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
}

.pdf-page-badge[b-g6p2kzstys] {
    background: var(--accent-fill-rest, #0078d4);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
}

.pdf-close-button[b-g6p2kzstys] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    color: var(--neutral-foreground-rest, #333);
    border-radius: 4px;
}

.pdf-close-button:hover[b-g6p2kzstys] {
    background: var(--neutral-fill-hover, #f3f4f6);
}

.pdf-dialog-body[b-g6p2kzstys] {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-loading[b-g6p2kzstys] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--neutral-foreground-rest, #666);
    font-size: 0.9rem;
}

.pdf-iframe[b-g6p2kzstys] {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.pdf-dialog-footer[b-g6p2kzstys] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--neutral-stroke-layer-rest, #e5e7eb);
    flex-shrink: 0;
}
/* /Components/Pages/Portal/Components/Dialogs/QuestionPreviewDialog.razor.rz.scp.css */
/* Preview Overlay */
.preview-overlay[b-320kvjh8ne] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 24px;
    backdrop-filter: blur(4px);
}

.preview-container[b-320kvjh8ne] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    animation: slideUp-b-320kvjh8ne 0.3s ease-out;
}

@keyframes slideUp-b-320kvjh8ne {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.preview-close-btn[b-320kvjh8ne] {
    background: #ffffff !important;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    min-width: 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    margin-left: 8px;
}

.preview-close-btn:hover[b-320kvjh8ne] {
    background: #f0f0f0 !important;
    transform: scale(1.05);
}

/* Phone Frame */
.phone-frame[b-320kvjh8ne] {
    position: relative;
    width: 375px;
    height: 812px;
    background: #1a1a1a;
    border-radius: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(0, 0, 0, 0.1),
                inset 0 0 0 2px #2a2a2a;
    overflow: hidden;
}

/* Phone Notch */
.phone-notch[b-320kvjh8ne] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 30px;
    background: #1a1a1a;
    border-radius: 0 0 20px 20px;
    z-index: 10;
}

/* Phone Screen */
.phone-screen[b-320kvjh8ne] {
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Status Bar */
.status-bar[b-320kvjh8ne] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    padding-top: 12px;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 500;
    min-height: 44px;
    background: white;
}

.time[b-320kvjh8ne] {
    font-weight: 600;
}

.status-icons[b-320kvjh8ne] {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 11px;
}

.status-icon[b-320kvjh8ne] {
    line-height: 1;
}

/* App Header */
.app-header[b-320kvjh8ne] {
    padding: 10px 20px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
}

.header-title[b-320kvjh8ne] {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.header-subtitle[b-320kvjh8ne] {
    font-size: 12px;
    color: #666;
    font-weight: 400;
}

/* Question Content */
.question-content[b-320kvjh8ne] {
    flex: 1;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    background: #f8f9fa;
}

.question-image-container[b-320kvjh8ne] {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.question-image[b-320kvjh8ne] {
    width: 200px;
    height: 150px;
    object-fit: contain;
    display: block;
}

.question-text[b-320kvjh8ne] {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    padding: 0;
    margin: 0;
}

/* Answer Options */
.answer-options[b-320kvjh8ne] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.answer-option[b-320kvjh8ne] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: white;
    border: 2px solid #e8eaed;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.answer-option:hover:not(.disabled)[b-320kvjh8ne] {
    border-color: #5f6368;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.answer-option.selected:not(.correct):not(.incorrect)[b-320kvjh8ne] {
    background: #e3f2fd;
    border-color: #2196f3;
}

.answer-option.selected.correct[b-320kvjh8ne] {
    background: #e8f5e9;
    border-color: #4caf50;
}

.answer-option.selected.incorrect[b-320kvjh8ne] {
    background: #ffebee;
    border-color: #f44336;
}

.answer-option.correct-answer[b-320kvjh8ne] {
    background: #e8f5e9;
    border-color: #4caf50;
}

.answer-option.disabled[b-320kvjh8ne] {
    opacity: 0.6;
    cursor: not-allowed;
}

.option-letter[b-320kvjh8ne] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5f6368;
    color: white;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
}

.answer-option.selected:not(.correct):not(.incorrect) .option-letter[b-320kvjh8ne] {
    background: #2196f3;
}

.answer-option.selected.correct .option-letter[b-320kvjh8ne] {
    background: #4caf50;
}

.answer-option.selected.incorrect .option-letter[b-320kvjh8ne] {
    background: #f44336;
}

.answer-option.correct-answer .option-letter[b-320kvjh8ne] {
    background: #4caf50;
}

/* Explanation Box */
.explanation-box[b-320kvjh8ne] {
    padding: 16px;
    border-radius: 12px;
    border-left: 4px solid;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.explanation-box.correct[b-320kvjh8ne] {
    border-left-color: #4caf50;
}

.explanation-box.incorrect[b-320kvjh8ne] {
    border-left-color: #f44336;
}

.explanation-header[b-320kvjh8ne] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: #1a1a1a;
}

.info-icon[b-320kvjh8ne] {
    font-size: 16px;
}

.explanation-text[b-320kvjh8ne] {
    font-size: 14px;
    line-height: 1.5;
    color: #5f6368;
}

/* Action Button */
.action-button[b-320kvjh8ne] {
    margin-top: 4px;
}

.submit-button[b-320kvjh8ne] {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #1E4A7B 0%, #153a63 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(30, 74, 123, 0.3);
}

.submit-button:hover:not(:disabled):not(.disabled)[b-320kvjh8ne] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(30, 74, 123, 0.4);
}

.submit-button:disabled[b-320kvjh8ne],
.submit-button.disabled[b-320kvjh8ne] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.submit-icon[b-320kvjh8ne] {
    font-size: 18px;
}

/* Hint Text */
.hint-text[b-320kvjh8ne] {
    text-align: center;
    font-size: 13px;
    color: #5f6368;
    font-style: italic;
}

/* Bottom Navigation */
.bottom-nav[b-320kvjh8ne] {
    display: flex;
    justify-content: center;
    padding: 12px;
    background: white;
}

.nav-indicator[b-320kvjh8ne] {
    width: 134px;
    height: 5px;
    background: #1a1a1a;
    border-radius: 3px;
}

/* Phone Buttons */
.phone-button-left[b-320kvjh8ne] {
    position: absolute;
    left: -3px;
    top: 120px;
    width: 3px;
    height: 32px;
    background: #2a2a2a;
    border-radius: 0 2px 2px 0;
}

.phone-button-right-1[b-320kvjh8ne] {
    position: absolute;
    right: -3px;
    top: 100px;
    width: 3px;
    height: 56px;
    background: #2a2a2a;
    border-radius: 2px 0 0 2px;
}

.phone-button-right-2[b-320kvjh8ne] {
    position: absolute;
    right: -3px;
    top: 170px;
    width: 3px;
    height: 56px;
    background: #2a2a2a;
    border-radius: 2px 0 0 2px;
}

/* Preview Info */
.preview-info[b-320kvjh8ne] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: #666;
    font-size: 14px;
}

.preview-icon[b-320kvjh8ne] {
    font-size: 16px;
}

/* Scrollbar Styling */
.phone-screen[b-320kvjh8ne]::-webkit-scrollbar {
    width: 4px;
}

.phone-screen[b-320kvjh8ne]::-webkit-scrollbar-track {
    background: transparent;
}

.phone-screen[b-320kvjh8ne]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.phone-screen[b-320kvjh8ne]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.question-content[b-320kvjh8ne]::-webkit-scrollbar {
    width: 4px;
}

.question-content[b-320kvjh8ne]::-webkit-scrollbar-track {
    background: transparent;
}

.question-content[b-320kvjh8ne]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

/* Responsive */
@media (max-width: 768px) {
    .phone-frame[b-320kvjh8ne] {
        transform: scale(0.85);
    }

    .preview-container[b-320kvjh8ne] {
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .phone-frame[b-320kvjh8ne] {
        transform: scale(0.7);
    }
}
/* /Components/Pages/Portal/Components/Dialogs/RoadSignPickerDialog.razor.rz.scp.css */
.dialog-overlay[b-nkrexl91pv] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.road-sign-picker-dialog[b-nkrexl91pv] {
    background: white;
    border-radius: 16px;
    width: 640px;
    max-width: 90vw;
    max-height: 80vh;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dialog-header[b-nkrexl91pv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 24px 16px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.dialog-title h2[b-nkrexl91pv] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.dialog-subtitle[b-nkrexl91pv] {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #6b7280;
}

.close-button[b-nkrexl91pv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.15s;
}

.close-button:hover[b-nkrexl91pv] {
    background: #f3f4f6;
    color: #111827;
}

.dialog-body[b-nkrexl91pv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px;
    overflow: hidden;
    flex: 1;
}

.picker-toolbar[b-nkrexl91pv] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.picker-search[b-nkrexl91pv] {
    flex: 1;
}

.type-filter-chips[b-nkrexl91pv] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.type-chip[b-nkrexl91pv] {
    padding: 5px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #f9fafb;
    color: #4b5563;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.type-chip:hover[b-nkrexl91pv] {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #111827;
}

.type-chip.active[b-nkrexl91pv] {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
}

.picker-grid[b-nkrexl91pv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    overflow-y: auto;
    max-height: 400px;
    padding: 4px;
}

.picker-sign-item[b-nkrexl91pv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}

.picker-sign-item:hover[b-nkrexl91pv] {
    background: #f0f7ff;
    border-color: #93c5fd;
}

.picker-sign-item.selected[b-nkrexl91pv] {
    background: #eff6ff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.picker-sign-item img[b-nkrexl91pv] {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 6px;
    background: white;
    border: 1px solid #e5e7eb;
}

.picker-sign-info[b-nkrexl91pv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.picker-sign-name[b-nkrexl91pv] {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
}

.picker-sign-code[b-nkrexl91pv] {
    font-size: 11px;
    color: #9ca3af;
    font-family: monospace;
}

.picker-empty[b-nkrexl91pv] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px;
    color: #6b7280;
    font-size: 14px;
}

.dialog-footer[b-nkrexl91pv] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}
/* /Components/Pages/Portal/Components/Dialogs/ScheduleDialog.razor.rz.scp.css */
.question-search-container[b-9hisl6jd3s] {
    margin-bottom: 12px;
    width: 100%;
}

.question-search-input[b-9hisl6jd3s] {
    width: 100%;
}

[b-9hisl6jd3s] .question-search-input {
    width: 100%;
}

[b-9hisl6jd3s] .question-search-input fluent-text-field {
    width: 100%;
}

.question-list[b-9hisl6jd3s] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-1);
}

.question-item[b-9hisl6jd3s] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    transition: background-color 0.15s ease;
}

.question-item:last-child[b-9hisl6jd3s] {
    border-bottom: none;
}

.question-item:hover[b-9hisl6jd3s] {
    background-color: var(--neutral-fill-stealth-hover);
}

.question-item.selected[b-9hisl6jd3s] {
    background-color: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
}

.question-item.selected .question-number[b-9hisl6jd3s] {
    color: var(--foreground-on-accent-rest);
    opacity: 0.9;
}

.question-thumbnail[b-9hisl6jd3s] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    object-fit: cover;
    border-radius: 4px;
}

.question-info[b-9hisl6jd3s] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.question-number[b-9hisl6jd3s] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-foreground-rest);
    margin-bottom: 2px;
}

.question-text[b-9hisl6jd3s] {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-questions-message[b-9hisl6jd3s] {
    padding: 20px;
    text-align: center;
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

.question-option[b-9hisl6jd3s] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px;
}

.question-details[b-9hisl6jd3s] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.question-id[b-9hisl6jd3s] {
    font-size: 0.8em;
    color: var(--neutral-foreground-hint);
}
/* /Components/Pages/Portal/Components/Dialogs/ScheduleStudentLessonDialog.razor.rz.scp.css */
.schedule-lesson-dialog[b-8vy6gis4ww] {
    max-width: 650px;
}

.form-row[b-8vy6gis4ww] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 0;
}

.form-group[b-8vy6gis4ww] {
    margin-bottom: 20px;
    width: 100%;
}

.form-label[b-8vy6gis4ww] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
}

.form-label.required[b-8vy6gis4ww]::after {
    content: " *";
    color: #ef4444;
    font-weight: 700;
}

.form-hint[b-8vy6gis4ww] {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

@media (max-width: 640px) {
    .form-row[b-8vy6gis4ww] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Portal/Components/Dialogs/SmsDialog.razor.rz.scp.css */
[b-0ckbn96w70] .sms-dialog {
    max-width: 480px;
    width: 100%;
}

.sms-form[b-0ckbn96w70] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-field[b-0ckbn96w70] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-label[b-0ckbn96w70] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

.required-marker[b-0ckbn96w70] {
    color: #dc2626;
    font-weight: 600;
}

.field-hint[b-0ckbn96w70] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-top: 4px;
}

.character-counter[b-0ckbn96w70] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-top: 4px;
}

.character-counter .over-limit[b-0ckbn96w70] {
    color: #dc2626;
    font-weight: 600;
}

.character-counter .sms-parts[b-0ckbn96w70] {
    color: var(--accent-fill-rest);
    font-weight: 500;
}

.dialog-actions[b-0ckbn96w70] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    width: 100%;
}

/* /Components/Pages/Portal/Components/Dialogs/StudentNoteDialog.razor.rz.scp.css */
.student-note-dialog[b-nby3rtwkd3] {
    max-width: 550px;
}
/* /Components/Pages/Portal/Components/Milestones/MilestoneTimeline.razor.rz.scp.css */
/* MilestoneTimeline scoped styles */

.milestone-timeline[b-zju9s9qytm] {
    padding: 0;
}

.milestone-header[b-zju9s9qytm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.milestone-header-left[b-zju9s9qytm] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.milestone-header-actions[b-zju9s9qytm] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.milestone-header-left h4[b-zju9s9qytm] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
}

.milestone-count-badge[b-zju9s9qytm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #dbeafe;
    color: #2563eb;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.milestone-loading[b-zju9s9qytm],
.milestone-empty[b-zju9s9qytm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 8px;
    color: #9ca3af;
    font-size: 13px;
    text-align: center;
}

.milestone-empty p[b-zju9s9qytm] {
    margin: 0;
}

.milestone-empty-hint[b-zju9s9qytm] {
    font-size: 12px;
    color: #d1d5db;
    max-width: 280px;
}

/* Timeline */
.timeline[b-zju9s9qytm] {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.timeline[b-zju9s9qytm]::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #e5e7eb;
    z-index: 0;
}

.timeline-item[b-zju9s9qytm] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    padding: 8px 0;
}

.timeline-dot[b-zju9s9qytm] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
    position: relative;
}

.timeline-dot.milestone-theory[b-zju9s9qytm] {
    background: #dbeafe;
    color: #2563eb;
}

.timeline-dot.milestone-practical[b-zju9s9qytm] {
    background: #d1fae5;
    color: #059669;
}

.timeline-dot.milestone-license[b-zju9s9qytm] {
    background: #fef3c7;
    color: #d97706;
}

.timeline-dot.milestone-module[b-zju9s9qytm] {
    background: #ede9fe;
    color: #7c3aed;
}

.timeline-dot.milestone-hours[b-zju9s9qytm] {
    background: #e0f2fe;
    color: #0891b2;
}

.timeline-dot.milestone-other[b-zju9s9qytm] {
    background: #f3f4f6;
    color: #6b7280;
}

.timeline-content[b-zju9s9qytm] {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}

.milestone-title[b-zju9s9qytm] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.milestone-meta[b-zju9s9qytm] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.milestone-date[b-zju9s9qytm] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #9ca3af;
}

.milestone-by[b-zju9s9qytm] {
    font-size: 11px;
    color: #9ca3af;
}

.milestone-notes[b-zju9s9qytm] {
    margin: 4px 0 0;
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
}

/* Dialog */
.dialog-overlay[b-zju9s9qytm] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.milestone-dialog[b-zju9s9qytm] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 420px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dialog-header[b-zju9s9qytm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.dialog-title h3[b-zju9s9qytm] {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
    color: #111827;
}

.dialog-subtitle[b-zju9s9qytm] {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.close-button[b-zju9s9qytm] {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.close-button:hover[b-zju9s9qytm] {
    background: #f3f4f6;
}

.dialog-body[b-zju9s9qytm] {
    padding: 20px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group[b-zju9s9qytm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-zju9s9qytm] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.form-label.required[b-zju9s9qytm]::after {
    content: " *";
    color: #ef4444;
}

.form-input[b-zju9s9qytm] {
    width: 100%;
}

.dialog-footer[b-zju9s9qytm] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
}
/* /Components/Pages/Portal/Components/OptionEditor.razor.rz.scp.css */
.option-row[b-hm2r0b1t66] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    transition: all 0.2s ease-in-out;
}

.option-row:hover[b-hm2r0b1t66] {
    border-color: #b0b0b0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.option-row.correct[b-hm2r0b1t66] {
    background: #f0fdf4;
    border-color: #86efac;
}

.option-marker[b-hm2r0b1t66] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    background: #f3f4f6;
    color: #4b5563;
    flex-shrink: 0;
    margin-top: 2px;
}

.option-marker.correct[b-hm2r0b1t66] {
    background: #16a34a;
    color: white;
}

.option-content[b-hm2r0b1t66] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-actions[b-hm2r0b1t66] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
}

.option-actions .button-group[b-hm2r0b1t66] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.correct-selector[b-hm2r0b1t66] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

.correct-selector input[type="radio"][b-hm2r0b1t66] {
    width: 16px;
    height: 16px;
    accent-color: #16a34a;
    cursor: pointer;
}

.correct-selector:hover[b-hm2r0b1t66] {
    color: #16a34a;
}
/* /Components/Pages/Portal/Components/PushNotificationAdminPanel.razor.rz.scp.css */
.push-admin-panel[b-lqa1ztiidj] {
    background: var(--neutral-layer-2, #f8f9fa);
    border: 1px solid var(--neutral-stroke-layer-rest, #e0e0e0);
    border-radius: 8px;
    padding: 16px 20px;
}

.push-admin-header[b-lqa1ztiidj] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.push-admin-info[b-lqa1ztiidj] {
    flex: 1;
    min-width: 0;
}

.push-admin-title[b-lqa1ztiidj] {
    font-weight: 600;
    font-size: 14px;
    color: var(--neutral-foreground-rest, #242424);
}

.push-admin-subtitle[b-lqa1ztiidj] {
    font-size: 12px;
    color: var(--neutral-foreground-hint, #707070);
    margin-top: 2px;
}

.push-admin-status[b-lqa1ztiidj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.push-admin-actions[b-lqa1ztiidj] {
    margin-top: 10px;
}

.push-status-success[b-lqa1ztiidj] {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--success-text, #198754);
    background: var(--success-bg, #f0fff4);
    border-radius: 4px;
    padding: 6px 10px;
}

.push-status-error[b-lqa1ztiidj] {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--error-text, #dc3545);
    background: var(--error-bg, #fff0f0);
    border-radius: 4px;
    padding: 6px 10px;
}
/* /Components/Pages/Portal/Components/PushNotificationSubscribe.razor.rz.scp.css */
.push-notification-section[b-1rpgkkdk7j] {
    background: var(--neutral-layer-2, #f8f9fa);
    border: 1px solid var(--neutral-stroke-layer-rest, #e0e0e0);
    border-radius: 8px;
    padding: 16px 20px;
}

.push-header[b-1rpgkkdk7j] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.push-icon[b-1rpgkkdk7j] {
    width: 36px;
    height: 36px;
    background: var(--accent-fill-rest, #1E4A7B);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.push-info[b-1rpgkkdk7j] {
    flex: 1;
    min-width: 0;
}

.push-title[b-1rpgkkdk7j] {
    font-weight: 600;
    font-size: 14px;
    color: var(--neutral-foreground-rest, #242424);
}

.push-subtitle[b-1rpgkkdk7j] {
    font-size: 12px;
    color: var(--neutral-foreground-hint, #707070);
    margin-top: 2px;
}

.push-toggle[b-1rpgkkdk7j] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.push-unsupported[b-1rpgkkdk7j] {
    font-size: 12px;
    color: var(--neutral-foreground-hint, #707070);
    font-style: italic;
}

.push-error[b-1rpgkkdk7j] {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--error-text, #dc3545);
    background: var(--error-bg, #fff0f0);
    border-radius: 4px;
    padding: 6px 10px;
}
/* /Components/Pages/Portal/Components/StudentActivityPanel.razor.rz.scp.css */
.activity-list-modern[b-e9vwoou1w3] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.activity-item-modern[b-e9vwoou1w3] {
    display: grid;
    grid-template-columns: 60px 1fr auto 40px;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s;
}

.activity-item-modern:last-child[b-e9vwoou1w3] {
    border-bottom: none;
}

.activity-item-modern:hover[b-e9vwoou1w3] {
    background-color: #fafbfc;
}

.activity-date-badge[b-e9vwoou1w3] {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    text-align: left;
}

.activity-content-modern[b-e9vwoou1w3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.activity-title[b-e9vwoou1w3] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.activity-subtitle[b-e9vwoou1w3] {
    font-size: 13px;
    color: #9ca3af;
}

.activity-time-modern[b-e9vwoou1w3] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #6b7280;
}

.activity-status-icon[b-e9vwoou1w3] {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Components/Pages/Portal/Components/StudentAnswerHistory.razor.rz.scp.css */
.answer-history-container[b-xjfo1n7z0z] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.loading-state[b-xjfo1n7z0z] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    color: var(--neutral-foreground-rest);
}

.empty-state[b-xjfo1n7z0z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px;
    color: var(--neutral-foreground-hint);
}

.history-summary[b-xjfo1n7z0z] {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.correct-count[b-xjfo1n7z0z] {
    color: var(--success);
    font-weight: 600;
}

.answer-history-grid[b-xjfo1n7z0z] {
    width: 100%;
}

.question-col[b-xjfo1n7z0z] {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge[b-xjfo1n7z0z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.badge.correct[b-xjfo1n7z0z] {
    background-color: var(--success-tint);
    color: var(--success);
}

.badge.incorrect[b-xjfo1n7z0z] {
    background-color: var(--error-tint);
    color: var(--error);
}

.question-preview[b-xjfo1n7z0z] {
    font-style: italic;
    color: var(--neutral-foreground-hint);
    font-size: 13px;
    margin-top: 4px;
}

.incomplete-section[b-xjfo1n7z0z] {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.incomplete-section-header[b-xjfo1n7z0z] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.incomplete-section-header h4[b-xjfo1n7z0z] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.incomplete-hint[b-xjfo1n7z0z] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-left: auto;
}

.incomplete-list[b-xjfo1n7z0z] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.incomplete-item[b-xjfo1n7z0z] {
    display: grid;
    grid-template-columns: 120px 1fr 130px 110px;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fafafa;
}

.incomplete-item.partial[b-xjfo1n7z0z] {
    border-left: 3px solid var(--warning);
    background: #fffbf0;
}

.incomplete-item.skipped[b-xjfo1n7z0z] {
    border-left: 3px solid var(--error);
    background: #fff5f5;
}

.incomplete-date[b-xjfo1n7z0z] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.incomplete-progress[b-xjfo1n7z0z] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.incomplete-fraction[b-xjfo1n7z0z] {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    min-width: 40px;
}

.incomplete-bar[b-xjfo1n7z0z] {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.incomplete-bar-fill[b-xjfo1n7z0z] {
    height: 100%;
    background: var(--accent-fill-rest);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.incomplete-item.skipped .incomplete-bar-fill[b-xjfo1n7z0z] {
    background: var(--error);
}

.incomplete-missed[b-xjfo1n7z0z] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    text-align: right;
}

.badge.partial[b-xjfo1n7z0z] {
    background-color: #fff3cd;
    color: #856404;
}

.badge.skipped[b-xjfo1n7z0z] {
    background-color: #f8d7da;
    color: #842029;
}
/* /Components/Pages/Portal/Components/StudentAppLoginPanel.razor.rz.scp.css */
/* StudentAppLoginPanel styles */

.app-login-section-full[b-udf9ir6dxo] {
    width: 100%;
}

.section-header-large[b-udf9ir6dxo] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid #e2e8f0;
}

.section-header-large h3[b-udf9ir6dxo] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #2d3748;
}

.section-description[b-udf9ir6dxo] {
    color: #64748b;
    font-size: 14px;
    margin: 4px 0 0 0;
}

/* Credentials box */

.credentials-display-box[b-udf9ir6dxo] {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 32px;
    border: 2px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.credential-section[b-udf9ir6dxo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.credential-section.password-reveal-section[b-udf9ir6dxo] {
    background: #fffbeb;
    padding: 24px;
    border-radius: 12px;
    border: 2px solid #fbbf24;
}

.credential-label[b-udf9ir6dxo] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.credential-label.warning[b-udf9ir6dxo] {
    color: #f59e0b;
}

.credential-display-large[b-udf9ir6dxo] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.credential-id-box[b-udf9ir6dxo],
.credential-password-box[b-udf9ir6dxo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
}

.credential-password-box[b-udf9ir6dxo] {
    background: #ffffff;
    border-color: #fbbf24;
}

.credential-id-large[b-udf9ir6dxo],
.credential-password-large[b-udf9ir6dxo] {
    font-size: 32px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: 3px;
}

.credential-id-large[b-udf9ir6dxo] {
    color: #667eea;
}

.credential-password-large[b-udf9ir6dxo] {
    color: #f59e0b;
}

.credential-empty-large[b-udf9ir6dxo] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: #fef3c7;
    border-radius: 12px;
    border: 2px dashed #fbbf24;
}

.empty-title[b-udf9ir6dxo] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #92400e;
}

.empty-subtitle[b-udf9ir6dxo] {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #78350f;
}

.help-text-success[b-udf9ir6dxo] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #16a34a;
    font-weight: 500;
}

/* Account status badge */

.status-badge-large[b-udf9ir6dxo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    align-self: flex-start;
}

.status-badge-large.status-active[b-udf9ir6dxo] {
    background: #dcfce7;
    color: #16a34a;
    border: 2px solid #bbf7d0;
}

.status-badge-large.status-inactive[b-udf9ir6dxo] {
    background: #fee2e2;
    color: #dc2626;
    border: 2px solid #fecaca;
}

/* Password management */

.password-management-section[b-udf9ir6dxo] {
    margin-top: 24px;
}

.section-title[b-udf9ir6dxo] {
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
    margin: 0 0 24px 0;
}

.management-cards[b-udf9ir6dxo] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.management-card[b-udf9ir6dxo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
}

.card-icon[b-udf9ir6dxo] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
}

.card-content h5[b-udf9ir6dxo] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
}

.card-content p[b-udf9ir6dxo] {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

/* Info banner */

.info-banner[b-udf9ir6dxo] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #eff6ff;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    font-size: 13px;
    color: #1e40af;
    margin-top: 16px;
}

/* Responsive */

@media (max-width: 768px) {
    .management-cards[b-udf9ir6dxo] {
        grid-template-columns: 1fr;
    }

    .credential-id-large[b-udf9ir6dxo],
    .credential-password-large[b-udf9ir6dxo] {
        font-size: 24px;
    }
}
/* /Components/Pages/Portal/Components/StudentNotesPanel.razor.rz.scp.css */
/* Notes Styles */
.notes-header[b-p7mqw481k3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.notes-header h3[b-p7mqw481k3] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
}

.notes-list[b-p7mqw481k3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.note-item[b-p7mqw481k3] {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}

.note-item:hover[b-p7mqw481k3] {
    border-color: #cbd5e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.note-header[b-p7mqw481k3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.note-header strong[b-p7mqw481k3] {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
}

.note-actions[b-p7mqw481k3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.note-date[b-p7mqw481k3] {
    font-size: 13px;
    color: #64748b;
    margin-right: 8px;
}

.note-content[b-p7mqw481k3] {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #4a5568;
    white-space: pre-wrap;
}

.note-updated[b-p7mqw481k3] {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
}

.empty-state[b-p7mqw481k3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    color: #666;
}

.empty-state h3[b-p7mqw481k3] {
    margin: 16px 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
}

.empty-state p[b-p7mqw481k3] {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: #64748b;
}
/* /Components/Pages/Portal/Components/StudentNotificationsPanel.razor.rz.scp.css */
.notifications-panel[b-axx98k5aoh] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 8px 0;
}

.loading-row[b-axx98k5aoh] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--neutral-foreground-rest);
}

.info-banner-warn[b-axx98k5aoh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--warning-fill-rest);
    border-radius: 8px;
    font-size: 14px;
}

.panel-section[b-axx98k5aoh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-header-large[b-axx98k5aoh] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.section-header-large h3[b-axx98k5aoh] {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
}

.section-description[b-axx98k5aoh] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.receive-status-card[b-axx98k5aoh] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid;
}

.receive-status-card.status-active[b-axx98k5aoh] {
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

.receive-status-card.status-inactive[b-axx98k5aoh] {
    background: color-mix(in srgb, var(--error) 8%, transparent);
    border-color: color-mix(in srgb, var(--error) 25%, transparent);
}

.status-title[b-axx98k5aoh] {
    font-size: 15px;
    font-weight: 600;
}

.status-reason[b-axx98k5aoh] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}

.toggle-row[b-axx98k5aoh] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.section-title[b-axx98k5aoh] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.format-grid[b-axx98k5aoh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.format-item[b-axx98k5aoh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--neutral-fill-secondary-rest);
}

.format-item.disabled[b-axx98k5aoh] {
    opacity: 0.55;
}

.format-label[b-axx98k5aoh] {
    flex: 1;
    font-size: 14px;
}

.timing-display[b-axx98k5aoh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--neutral-fill-secondary-rest);
    font-size: 14px;
}
/* /Components/Pages/Portal/Components/StudentProgressPanel.razor.rz.scp.css */
.progress-grid[b-anqhihjzrg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.progress-section[b-anqhihjzrg] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    position: relative;
}

.section-header[b-anqhihjzrg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e2e8f0;
}

.section-header h3[b-anqhihjzrg] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
}

.drag-handle[b-anqhihjzrg] {
    cursor: grab;
    color: #94a3b8;
    display: flex;
    align-items: center;
}

.drag-handle:active[b-anqhihjzrg] {
    cursor: grabbing;
}

.progress-items[b-anqhihjzrg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.progress-item[b-anqhihjzrg] {
    background: #ffffff;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.progress-label[b-anqhihjzrg] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    color: #4a5568;
}

.progress-value[b-anqhihjzrg] {
    font-weight: 600;
    color: #2d3748;
}

.category-list[b-anqhihjzrg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-item[b-anqhihjzrg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.category-info[b-anqhihjzrg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-name[b-anqhihjzrg] {
    font-size: 13px;
    color: #4a5568;
}

.category-score[b-anqhihjzrg] {
    font-size: 13px;
    font-weight: 600;
}

.category-score.success[b-anqhihjzrg] {
    color: #16a34a;
}

.category-score.warning[b-anqhihjzrg] {
    color: #d97706;
}

.activity-summary[b-anqhihjzrg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-summary-item[b-anqhihjzrg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.activity-result-small[b-anqhihjzrg] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-result-small.correct[b-anqhihjzrg] {
    background: #dcfce7;
    color: #16a34a;
}

.activity-result-small.incorrect[b-anqhihjzrg] {
    background: #fee2e2;
    color: #dc2626;
}

.activity-summary-text[b-anqhihjzrg] {
    font-size: 13px;
    color: #4a5568;
}

.empty-text[b-anqhihjzrg] {
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    margin: 8px 0;
}
/* /Components/Pages/Portal/CreateImage.razor.rz.scp.css */
.image-generator-page[b-qxjrkk8k50] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0.5rem 1.5rem;
}



.hero-meta[b-qxjrkk8k50] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.meta-chip[b-qxjrkk8k50] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
}

.eyebrow[b-qxjrkk8k50] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin: 0;
}

.endpoint-chip[b-qxjrkk8k50] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: #111827;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.meta-chip[b-qxjrkk8k50] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: 10px;
    background: #f3f4f6;
    color: #111827;
    font-weight: 600;
}

.content-grid[b-qxjrkk8k50] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1rem;
}

.form-card[b-qxjrkk8k50],
.result-card[b-qxjrkk8k50] {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08);
}

.card-header[b-qxjrkk8k50] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.5rem;
}

.card-header h2[b-qxjrkk8k50] {
    margin: 0;
    font-size: 1.1rem;
}

.card-subtitle[b-qxjrkk8k50] {
    margin: 0.2rem 0 0;
    color: #4b5563;
    font-size: 0.95rem;
}

.helper-tag[b-qxjrkk8k50] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-weight: 600;
    font-size: 0.85rem;
}

.required[b-qxjrkk8k50] {
    color: var(--brand-primary);
    font-weight: 700;
}

.form-grid[b-qxjrkk8k50] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 1.25rem 1.25rem;
}


.helper-panel[b-qxjrkk8k50] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    background: linear-gradient(160deg, #f9fafb 0%, #f3f4f6 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
}

.helper-panel-header[b-qxjrkk8k50] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}



.helper-grid[b-qxjrkk8k50] {

    gap: 0.75rem 1rem;
    align-items: start;
}

.form-field[b-qxjrkk8k50] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}






.helper-text[b-qxjrkk8k50] {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
}

.helper-text.compact[b-qxjrkk8k50] {
    margin-top: -0.15rem;
}

.toggle-row[b-qxjrkk8k50] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.helper-toggles[b-qxjrkk8k50] {
    align-items: flex-start;
}

.toggle-item[b-qxjrkk8k50] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.error-banner[b-qxjrkk8k50] {
    margin: 0 1.25rem 0.5rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: #fef2f2;
    color: #991b1b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.form-actions[b-qxjrkk8k50] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem 1.25rem;
}

.loading-text[b-qxjrkk8k50] {
    margin-left: 0.35rem;
}

.actors-section[b-qxjrkk8k50] {
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    padding: 0.75rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.actors-header[b-qxjrkk8k50] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.actor-buttons[b-qxjrkk8k50] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.actors-grid[b-qxjrkk8k50] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.actor-card[b-qxjrkk8k50] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.75rem;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.actor-title[b-qxjrkk8k50] {
    font-weight: 700;
    color: #111827;
}

.helper-preview[b-qxjrkk8k50] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.75rem 0.9rem 0.25rem;
    border-top: 1px dashed #d1d5db;
    margin-top: 0.25rem;
}

.helper-preview pre[b-qxjrkk8k50] {
    margin: 0;
    background: #111827;
    color: #e5e7eb;
    padding: 0.75rem;
    border-radius: 10px;
    font-size: 0.9rem;
    white-space: pre-wrap;
    width: 50%;
    min-width: 280px;
}

.pill[b-qxjrkk8k50] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #111827;
    font-weight: 600;
    font-size: 0.9rem;
}

.empty-state[b-qxjrkk8k50] {
    text-align: center;
    padding: 1.5rem;
    color: #4b5563;
}

.empty-state h3[b-qxjrkk8k50] {
    margin: 0.6rem 0 0.2rem;
}

.answer-block[b-qxjrkk8k50] {
    padding: 0 1.25rem 1.25rem;
}

.prompt-block[b-qxjrkk8k50] {
    padding: 0 1.25rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1rem;
}

.prompt-header[b-qxjrkk8k50] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.5rem;
}

.prompt-icon[b-qxjrkk8k50] {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #f0fdf4;
    color: #16a34a;
}

.prompt-text[b-qxjrkk8k50] {
    margin: 0;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 400px;
    overflow-y: auto;
    color: #334155;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

.answer-header[b-qxjrkk8k50] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.5rem;
}

.images-grid[b-qxjrkk8k50] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    padding: 0 1.25rem 1.25rem;
}

.image-card[b-qxjrkk8k50] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #f9fafb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    max-width: 600px;
}

.image-card img[b-qxjrkk8k50] {
    width: 100%;
    max-width: 600px;
    height: 400px;
    object-fit: contain;
    display: block;
    background: #f3f4f6;
}

.image-meta[b-qxjrkk8k50] {
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.image-edit-section[b-qxjrkk8k50] {
    padding: 0.75rem;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.edit-input-row[b-qxjrkk8k50] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.edit-error[b-qxjrkk8k50] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    color: #991b1b;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.reference-image-section[b-qxjrkk8k50] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.upload-label[b-qxjrkk8k50] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    color: #6b7280;
    text-align: center;
}

.upload-label:hover[b-qxjrkk8k50] {
    color: #111827;
}

.upload-hint[b-qxjrkk8k50] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.reference-image-preview[b-qxjrkk8k50] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.reference-image-preview img[b-qxjrkk8k50] {
    max-width: 200px;
    max-height: 150px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #d1d5db;
}

.image-save-section[b-qxjrkk8k50] {
    padding: 0.75rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.save-error[b-qxjrkk8k50] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    color: #991b1b;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.saved-indicator[b-qxjrkk8k50] {
    color: #16a34a;
    font-weight: 600;
    font-size: 0.85rem;
}

@media (max-width: 1024px) {
    .content-grid[b-qxjrkk8k50] {
        grid-template-columns: 1fr;
    }

    .endpoint-chip[b-qxjrkk8k50] {
        align-self: flex-start;
    }

    .helper-panel-header[b-qxjrkk8k50] {
        flex-direction: column;
        align-items: flex-start;
    }

    .helper-preview[b-qxjrkk8k50] {
        flex-direction: column;
    }

    .helper-preview pre[b-qxjrkk8k50] {
        width: 100%;
    }

    .helper-panel-header[b-qxjrkk8k50] {
        flex-direction: column;
        align-items: flex-start;
    }

    .helper-preview[b-qxjrkk8k50] {
        flex-direction: column;
    }

    .helper-preview pre[b-qxjrkk8k50] {
        width: 100%;
    }
}
/* /Components/Pages/Portal/Curriculum.razor.rz.scp.css */
/* Curriculum Page Styles */
/* Shared tab styles are in wwwroot/css/SharedTabs.css (loaded globally in App.razor) */

.curriculum-page[b-xv4ofkqij9] {
    padding: 24px;
    background-color: #fafafa;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

.curriculum-header[b-xv4ofkqij9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.header-content h1[b-xv4ofkqij9] {
    font-size: 24px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
}

.subtitle[b-xv4ofkqij9] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.header-actions[b-xv4ofkqij9] {
    display: flex;
    align-items: center;
    gap: 12px;
}



.curriculum-content[b-xv4ofkqij9] {
    display: flex;
    gap: 24px;
    overflow: hidden;
}

/* Loading Container */
.loading-container[b-xv4ofkqij9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
}

/* Page-specific styles below - Tabs use SharedTabs.css */
#template-filters[b-xv4ofkqij9] {
    padding-top: 10px;

}
#template-content[b-xv4ofkqij9] {
    padding: 0px;

}

.template-filters[b-xv4ofkqij9] {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

/* Template Accordion Styles */

.template-accordion[b-xv4ofkqij9] {
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.template-header[b-xv4ofkqij9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 4px 0;
}

.template-title-section[b-xv4ofkqij9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.expand-button[b-xv4ofkqij9] {
    min-width: auto;
    padding: 4px;
}

.template-name[b-xv4ofkqij9] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.template-meta[b-xv4ofkqij9] {
    margin-top: 8px;
    padding-left: 40px;
}

.meta-description[b-xv4ofkqij9] {
    font-size: 14px;
    color: #6b7280;
}

.template-stats[b-xv4ofkqij9] {
    display: flex;
    gap: 20px;
    margin-top: 8px;
    padding-left: 40px;
}

.stat-item[b-xv4ofkqij9] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

.template-modules[b-xv4ofkqij9] {
    padding: 8px 0 8px 8px;
}

.module-item[b-xv4ofkqij9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
    background-color: #f9fafb;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.module-info[b-xv4ofkqij9] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.module-sequence[b-xv4ofkqij9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

.module-name[b-xv4ofkqij9] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.module-duration[b-xv4ofkqij9],
.module-lessons[b-xv4ofkqij9] {
    font-size: 13px;
    color: #6b7280;
}

.no-modules[b-xv4ofkqij9] {
    font-size: 14px;
    color: #9ca3af;
    font-style: italic;
}

.empty-state[b-xv4ofkqij9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-state fluent-icon[b-xv4ofkqij9] {
    margin-bottom: 16px;
    color: #d1d5db;
}

.empty-state p[b-xv4ofkqij9] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 24px;
}

.empty-state-message[b-xv4ofkqij9] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.empty-state-message p[b-xv4ofkqij9] {
    font-size: 15px;
    color: #6b7280;
    max-width: 500px;
}

.modules-grid[b-xv4ofkqij9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.module-card[b-xv4ofkqij9] {
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.module-card:hover[b-xv4ofkqij9] {
    border-color: #3b82f6;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.module-card-header[b-xv4ofkqij9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.module-card-header h3[b-xv4ofkqij9] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.module-card-description[b-xv4ofkqij9] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
    line-height: 1.5;
}

.module-card-stats[b-xv4ofkqij9] {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #9ca3af;
}

.info-message[b-xv4ofkqij9] {
    font-size: 15px;
    color: #6b7280;
    text-align: center;
    padding: 40px 20px;
}

.lessons-view[b-xv4ofkqij9] {
    padding: 0;
    max-width: 100%;
}

.lessons-table[b-xv4ofkqij9] {
    width: 100%;
    background: white;
}

.lessons-table-header[b-xv4ofkqij9] {
    display: grid;
    grid-template-columns: 1fr 140px 120px 120px 140px;
    gap: 16px;
    padding: 12px 32px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lessons-table-body[b-xv4ofkqij9] {
    display: flex;
    flex-direction: column;
}

.lesson-row[b-xv4ofkqij9] {
    display: grid;
    grid-template-columns: 1fr 140px 120px 120px 140px;
    gap: 16px;
    padding: 16px 32px;
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.15s ease;
}

.lesson-row:hover[b-xv4ofkqij9] {
    background-color: #f9fafb;
}

.lesson-row:last-child[b-xv4ofkqij9] {
    border-bottom: none;
}

.lesson-cell[b-xv4ofkqij9] {
    display: flex;
    align-items: center;
    min-height: 40px;
}

.lesson-title-column[b-xv4ofkqij9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.lesson-info[b-xv4ofkqij9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lesson-title[b-xv4ofkqij9] {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}

.lesson-description[b-xv4ofkqij9] {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.items-view[b-xv4ofkqij9] {
    padding: 0;
    max-width: 100%;
}

.items-table[b-xv4ofkqij9] {
    width: 100%;
    background: white;
}

.items-table-header[b-xv4ofkqij9] {
    display: grid;
    grid-template-columns: 300px 180px 1fr 140px;
    gap: 16px;
    padding: 12px 32px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.items-table-body[b-xv4ofkqij9] {
    background: white;
}

.item-row[b-xv4ofkqij9] {
    display: grid;
    grid-template-columns: 300px 180px 1fr 140px;
    gap: 16px;
    padding: 16px 32px;
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.15s ease;
    align-items: center;
}

.item-row:hover[b-xv4ofkqij9] {
    background-color: #f9fafb;
}

.item-row:last-child[b-xv4ofkqij9] {
    border-bottom: none;
}

.item-cell[b-xv4ofkqij9] {
    display: flex;
    align-items: center;
    min-height: 40px;
}

.name-column[b-xv4ofkqij9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.item-icon-wrapper[b-xv4ofkqij9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.item-icon-wrapper fluent-icon[b-xv4ofkqij9] {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

.item-position[b-xv4ofkqij9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 600;
    color: #3b82f6;
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
}

.item-name[b-xv4ofkqij9] {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}

.category-column fluent-badge[b-xv4ofkqij9] {
    font-size: 12px;
    padding: 4px 12px;
    background-color: #eff6ff !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}

.item-description[b-xv4ofkqij9] {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

.actions-column[b-xv4ofkqij9] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.actions-column fluent-button[b-xv4ofkqij9] {
    opacity: 0;
    transition: opacity 0.15s ease;
    width: 32px;
    height: 32px;
    min-width: 32px;
}

.actions-column fluent-button fluent-icon[b-xv4ofkqij9] {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

.item-row:hover .actions-column fluent-button[b-xv4ofkqij9] {
    opacity: 1;
}

@media (max-width: 1200px) {
    .statistics-cards[b-xv4ofkqij9] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .statistics-cards[b-xv4ofkqij9] {
        grid-template-columns: 1fr;
    }

    .modules-grid[b-xv4ofkqij9] {
        grid-template-columns: 1fr;
    }

    .curriculum-header[b-xv4ofkqij9] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-actions[b-xv4ofkqij9] {
        width: 100%;
        justify-content: space-between;
    }

    .tab-header[b-xv4ofkqij9] {
        flex-wrap: wrap;
    }

    .tab-filters[b-xv4ofkqij9] {
        margin-left: 0;
        width: 100%;
    }
}

/* Quick Actions Panel */
.actions-card[b-xv4ofkqij9] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    height: fit-content;
    min-width: 280px;
}

.actions-card h2[b-xv4ofkqij9] {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.actions-list[b-xv4ofkqij9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.action-item[b-xv4ofkqij9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: none;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #1a1a1a;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
}

.action-item:hover[b-xv4ofkqij9] {
    background: #f5f5f5;
    border-color: #d0d0d0;
}

.action-item fluent-icon[b-xv4ofkqij9] {
    flex-shrink: 0;
}

.action-item span[b-xv4ofkqij9] {
    flex: 1;
}

/* View Toggle */
.view-toggle[b-xv4ofkqij9] {
    display: flex;
    gap: 4px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 2px;
    background: white;
}

/* Modules Table View */
.modules-table[b-xv4ofkqij9] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.modules-table-header[b-xv4ofkqij9] {
    display: grid;
    grid-template-columns: 250px 1fr 120px 100px 120px 140px;
    gap: 16px;
    padding: 16px 32px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modules-table-body[b-xv4ofkqij9] {
    background: white;
}

.module-row[b-xv4ofkqij9] {
    display: grid;
    grid-template-columns: 250px 1fr 120px 100px 120px 140px;
    gap: 16px;
    padding: 16px 32px;
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.15s ease;
    align-items: center;
    cursor: pointer;
}

.module-row:hover[b-xv4ofkqij9] {
    background-color: #f9fafb;
}

.module-row:last-child[b-xv4ofkqij9] {
    border-bottom: none;
}

.module-cell[b-xv4ofkqij9] {
    display: flex;
    align-items: center;
    min-height: 40px;
}

.module-name-column[b-xv4ofkqij9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.module-name-column .module-name[b-xv4ofkqij9] {
    font-weight: 600;
    color: #1a1a1a;
}

.module-description-column[b-xv4ofkqij9] {
    font-size: 14px;
    color: #6b7280;
}

.module-duration-column[b-xv4ofkqij9],
.module-lessons-column[b-xv4ofkqij9] {
    font-size: 14px;
    color: #1a1a1a;
}

.module-status-column[b-xv4ofkqij9] {
    justify-content: center;
}

.actions-column[b-xv4ofkqij9] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Module Accordion Styles (nested within templates) */
.module-accordion[b-xv4ofkqij9] {
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
}

.module-accordion[b-xv4ofkqij9]::part(region) {
    padding: 0 !important;
    margin: 0 !important;
}

.module-lessons-list[b-xv4ofkqij9] {
    padding: 0;
    margin: 0;
}

.lesson-item[b-xv4ofkqij9] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s ease;
}

.lesson-item:last-child[b-xv4ofkqij9] {
    border-bottom: none;
}

.lesson-item:hover[b-xv4ofkqij9] {
    background-color: #f9fafb;
}

.lesson-sequence[b-xv4ofkqij9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #3b82f6;
}

.lesson-item .lesson-info[b-xv4ofkqij9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lesson-item .lesson-title[b-xv4ofkqij9] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.lesson-item .lesson-description[b-xv4ofkqij9] {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.lesson-meta[b-xv4ofkqij9] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9ca3af;
}

.meta-separator[b-xv4ofkqij9] {
    color: #d1d5db;
}

.no-lessons[b-xv4ofkqij9] {
    font-size: 14px;
    color: #9ca3af;
    font-style: italic;
    padding: 16px;
    text-align: center;
}





/* /Components/Pages/Portal/Dashboard.razor.rz.scp.css */


/* Dashboard Page Styles */
/* Shared stat card styles are in wwwroot/css/SharedStats.css (loaded globally in App.razor) */

.dasboard-page[b-a8yh0mank3] {
    padding: 24px;
    background-color: #fafafa;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

.dasboard-header[b-a8yh0mank3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.header-content h1[b-a8yh0mank3] {
    font-size: 24px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
}

.subtitle[b-a8yh0mank3] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.header-actions[b-a8yh0mank3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filters-row[b-a8yh0mank3] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
}

.filter-select[b-a8yh0mank3] {
    min-width: 140px;
}

.demo-badge[b-a8yh0mank3] {
    background: #fef3c7;
    color: #92400e;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.empty-data-badge[b-a8yh0mank3] {
    background: #fee2e2;
    color: #991b1b;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Main Content */
.main-content[b-a8yh0mank3] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
}

.content-section[b-a8yh0mank3] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.section-header[b-a8yh0mank3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header h2[b-a8yh0mank3] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-all-link[b-a8yh0mank3] {
    color: #666;
    font-size: 13px;
    text-decoration: none;
}

.view-all-link:hover[b-a8yh0mank3] {
    color: var(--brand-primary);
}

/* Group Table */
.group-table[b-a8yh0mank3] {
    display: flex;
    flex-direction: column;
}



.col-students[b-a8yh0mank3] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
}

.col-answer[b-a8yh0mank3] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
}

.progress-bar-container[b-a8yh0mank3] {
    width: 80px;
    height: 6px;
    background: #e5e5e5;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar[b-a8yh0mank3] {
    height: 100%;
    background: #1a1a1a;
    border-radius: 3px;
    transition: width 0.3s;
}

.col-correct[b-a8yh0mank3] {
    font-weight: 600;
}

.col-correct.high[b-a8yh0mank3] {
    color: #16a34a;
}

.col-correct.medium[b-a8yh0mank3] {
    color: #ca8a04;
}

.col-correct.low[b-a8yh0mank3] {
    color: #dc2626;
}

/* Sidebar */
.sidebar[b-a8yh0mank3] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Activity List */
.activity-list[b-a8yh0mank3] {
    display: flex;
    flex-direction: column;
}

.activity-item[b-a8yh0mank3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

.activity-item:last-child[b-a8yh0mank3] {
    border-bottom: none;
}

.activity-indicator[b-a8yh0mank3] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.activity-indicator.correct[b-a8yh0mank3] {
    background: #16a34a;
}

.activity-indicator.incorrect[b-a8yh0mank3] {
    background: #dc2626;
}

.activity-content[b-a8yh0mank3] {
    flex: 1;
    min-width: 0;
}

.activity-name[b-a8yh0mank3] {
    font-weight: 500;
    color: #1a1a1a;
    font-size: 14px;
}

.activity-question[b-a8yh0mank3] {
    color: #666;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-time[b-a8yh0mank3] {
    color: #999;
    font-size: 12px;
    white-space: nowrap;
}

/* Low Performance */
.low-perf-list[b-a8yh0mank3] {
    display: flex;
    flex-direction: column;
}

.low-perf-item[b-a8yh0mank3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    margin-bottom: 8px;
    background: #fef9f9;
    border-radius: 8px;
    border-left: 3px solid #fecaca;
    cursor: pointer;
    transition: background-color 0.15s;
}

.low-perf-item:hover[b-a8yh0mank3] {
    background: #fef2f2;
}

.question-content[b-a8yh0mank3] {
    flex: 1;
    min-width: 0;
}

.question-text[b-a8yh0mank3] {
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.question-meta[b-a8yh0mank3] {
    display: flex;
    gap: 12px;
    font-size: 12px;
}

.category-tag[b-a8yh0mank3] {
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 4px;
    color: #666;
}

.answer-count[b-a8yh0mank3] {
    color: #999;
}

.question-rate[b-a8yh0mank3] {
    text-align: right;
    font-size: 20px;
    font-weight: 600;
    flex-shrink: 0;
    margin-left: 16px;
}

.question-rate .rate-label[b-a8yh0mank3] {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #999;
}

/* Loading & Empty States */
.loading-container[b-a8yh0mank3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
}

.empty-state[b-a8yh0mank3] {
    text-align: center;
    padding: 32px;
    color: #666;
}

.dashboard-container .empty-state[b-a8yh0mank3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.empty-state p[b-a8yh0mank3] {
    margin: 0 0 16px 0;
}

.empty-state-small[b-a8yh0mank3] {
    text-align: center;
    padding: 16px;
    color: #666;
}

.empty-state-small p[b-a8yh0mank3] {
    margin: 8px 0 0 0;
    font-size: 13px;
}

.empty-state-small.success[b-a8yh0mank3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #16a34a;
}

/* System Dashboard */
.system-dashboard[b-a8yh0mank3] {
    width: 100%;
}

.status-badge[b-a8yh0mank3] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.active[b-a8yh0mank3] {
    background-color: #dcfce7;
    color: #166534;
}

.status-badge.inactive[b-a8yh0mank3] {
    background-color: #f3f4f6;
    color: #374151;
}

/* Responsive */
@media (max-width: 1200px) {
    .stat-cards[b-a8yh0mank3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-content[b-a8yh0mank3] {
        grid-template-columns: 1fr;
    }
}

/* Loading Container */
.loading-container[b-a8yh0mank3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
}

@media (max-width: 768px) {
    .stat-cards[b-a8yh0mank3] {
        grid-template-columns: 1fr;
    }

    .dashboard-header[b-a8yh0mank3] {
        flex-direction: column;
        gap: 16px;
    }

    .filters-row[b-a8yh0mank3] {
        flex-direction: column;
        align-items: flex-start;
    }

    .table-header[b-a8yh0mank3],
    .table-row[b-a8yh0mank3] {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .col-answer[b-a8yh0mank3],
    .col-trend[b-a8yh0mank3] {
        display: none;
    }
}

/* Performance Info Button & Dialog */
.section-title-with-info[b-a8yh0mank3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-button-small[b-a8yh0mank3] {
    min-width: 28px !important;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.info-button-small:hover[b-a8yh0mank3] {
    background-color: #f0f9ff;
    transform: scale(1.05);
}


.info-dialog[b-a8yh0mank3] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 600px;
    width: 90vw;
    max-height: 85vh;
    overflow: hidden;
    position: relative;
}



.info-content[b-a8yh0mank3] {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 8px;
}

.info-content[b-a8yh0mank3]::-webkit-scrollbar {
    width: 6px;
}

.info-content[b-a8yh0mank3]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.info-content[b-a8yh0mank3]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.info-section[b-a8yh0mank3] {
    margin-bottom: 24px;
}

.info-section h4[b-a8yh0mank3] {
    margin: 0 0 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
}

.info-section p[b-a8yh0mank3] {
    margin: 0 0 8px 0;
    line-height: 1.6;
    color: #4b5563;
}

.info-section ul[b-a8yh0mank3] {
    margin: 0;
    padding-left: 20px;
    color: #4b5563;
}

.info-section li[b-a8yh0mank3] {
    margin-bottom: 6px;
    line-height: 1.5;
}

.benefits-grid[b-a8yh0mank3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.benefit-item[b-a8yh0mank3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #374151;
}

.success-highlight[b-a8yh0mank3] {
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.success-highlight div[b-a8yh0mank3] {
    flex: 1;
}

.success-highlight h4[b-a8yh0mank3] {
    color: #166534;
    margin: 0 0 6px 0;
}

.success-highlight p[b-a8yh0mank3] {
    color: #15803d;
    margin: 0;
    font-size: 14px;
}

.dialog-footer[b-a8yh0mank3] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 24px 24px;
    border-top: 1px solid #eee;
}

@media (max-width: 640px) {
    .benefits-grid[b-a8yh0mank3] {
        grid-template-columns: 1fr;
    }

    .info-dialog[b-a8yh0mank3] {
        width: 95vw;
        max-height: 90vh;
    }
}

/* ============================================================
   DARK MODE — Dashboard page overrides
   ============================================================ */
[data-theme="dark"][b-a8yh0mank3],
body.dark[b-a8yh0mank3] {
    /* Page background */
    .dasboard-page {
        background-color: var(--neutral-layer-1, #1c1c1c);
    }

    /* Section headings */
    .section-header h2[b-a8yh0mank3],
    .header-content h1[b-a8yh0mank3],
    .question-text[b-a8yh0mank3],
    .activity-name[b-a8yh0mank3] {
        color: var(--neutral-foreground-rest, #e8e8e8);
    }

    .subtitle[b-a8yh0mank3],
    .view-all-link[b-a8yh0mank3],
    .col-students[b-a8yh0mank3],
    .col-answer[b-a8yh0mank3],
    .answer-count[b-a8yh0mank3],
    .question-rate .rate-label[b-a8yh0mank3] {
        color: var(--neutral-foreground-hint, #a0a0a0);
    }

    /* Activity list dividers */
    .activity-item[b-a8yh0mank3] {
        border-bottom-color: #3a3a3a;
    }

    /* Progress bar track */
    .progress-bar-container[b-a8yh0mank3] {
        background: #3a3a3a;
    }

    /* Progress bar fill */
    .progress-bar[b-a8yh0mank3] {
        background: #a0a0a0;
    }

    /* Low-performance items */
    .low-perf-item[b-a8yh0mank3] {
        background: rgba(220, 38, 38, 0.08);
        border-left-color: rgba(220, 38, 38, 0.4);
    }

    .low-perf-item:hover[b-a8yh0mank3] {
        background: rgba(220, 38, 38, 0.14);
    }

    /* Category tag pill */
    .category-tag[b-a8yh0mank3] {
        background: rgba(107, 114, 128, 0.25);
        color: #a0a0a0;
    }

    /* Status badges */
    .status-badge.active[b-a8yh0mank3] {
        background-color: rgba(22, 163, 74, 0.2);
        color: #4ade80;
    }

    .status-badge.inactive[b-a8yh0mank3] {
        background-color: rgba(107, 114, 128, 0.2);
        color: #9ca3af;
    }

    /* Info dialog (performance info popup) */
    .info-dialog[b-a8yh0mank3] {
        background: var(--neutral-layer-2, #2d2d2d);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    }

    .info-section h4[b-a8yh0mank3] {
        color: var(--neutral-foreground-rest, #e8e8e8);
    }

    .info-section p[b-a8yh0mank3],
    .info-section ul[b-a8yh0mank3],
    .info-section li[b-a8yh0mank3] {
        color: var(--neutral-foreground-hint, #a0a0a0);
    }

    .benefit-item[b-a8yh0mank3] {
        background: var(--neutral-layer-3, #242424);
        border-color: #3a3a3a;
        color: #a0a0a0;
    }

    .dialog-footer[b-a8yh0mank3] {
        border-top-color: #3a3a3a;
    }

    .info-content[b-a8yh0mank3]::-webkit-scrollbar-track {
        background: #2d2d2d;
    }

    .info-content[b-a8yh0mank3]::-webkit-scrollbar-thumb {
        background: #4a4a4a;
    }

    /* Demo / empty data badges */
    .demo-badge[b-a8yh0mank3] {
        background: rgba(217, 119, 6, 0.2);
        color: #fbbf24;
    }

    .empty-data-badge[b-a8yh0mank3] {
        background: rgba(220, 38, 38, 0.2);
        color: #f87171;
    }
}
/* /Components/Pages/Portal/GroupDetails.razor.rz.scp.css */
/* GroupDetails Page Styles */
/* Shared tab styles are in wwwroot/css/SharedTabs.css (loaded globally in App.razor) */
/* Shared stat card styles are in wwwroot/css/SharedStats.css (loaded globally in App.razor) */

.group-details-container[b-8oua461yd7] {
    padding: 24px;
    background-color: #fafafa;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Loading & Not Found States */
.loading-container[b-8oua461yd7],
.not-found[b-8oua461yd7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    text-align: center;
    padding: 48px;
}

.not-found h2[b-8oua461yd7] {
    margin: 0;
    font-size: 20px;
    color: #1a1a1a;
}

.not-found p[b-8oua461yd7] {
    margin: 0 0 16px 0;
    color: #666;
}

/* Header */
.page-header[b-8oua461yd7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
}

.header-left[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.back-button[b-8oua461yd7] {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #666;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-button:hover[b-8oua461yd7] {
    background: #f0f0f0;
    color: #1a1a1a;
}

.group-icon[b-8oua461yd7] {
    width: 48px;
    height: 48px;
    background: #f0f0f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-info h1[b-8oua461yd7] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
}

.date-range[b-8oua461yd7] {
    font-size: 14px;
    color: #666;
}

.header-right[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-toolbar-item[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.search-box[b-8oua461yd7] {
    width: 200px;
}

/* Tabs */
/*.tabs-container {
    padding: 0 24px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.tabs {
    display: flex;
    gap: 8px;
}

.tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.tab:hover {
    color: #111827;
    background-color: #f9fafb;
}

.tab.active {
    color: #111827;
    background-color: white;
    border-color: #e5e7eb;
    border-bottom-color: white;
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #3b82f6;
}*/

/* Tab Content */
/*.tab-content {
    min-height: 400px;
}*/

/* Overview Layout */
.overview-layout[b-8oua461yd7] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
}

/* Info Card */
.info-card[b-8oua461yd7] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-header[b-8oua461yd7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.card-header h2[b-8oua461yd7] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.card-body[b-8oua461yd7] {
    padding: 24px;
}

.description[b-8oua461yd7] {
    margin: 0 0 24px 0;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

.info-grid[b-8oua461yd7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.info-item[b-8oua461yd7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-details[b-8oua461yd7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-label[b-8oua461yd7] {
    font-size: 12px;
    color: #999;
}

.info-value[b-8oua461yd7] {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

.card-footer[b-8oua461yd7] {
    display: flex;
    gap: 24px;
    padding: 16px 24px;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
}

.footer-item[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.footer-label[b-8oua461yd7] {
    color: #666;
}

.footer-value[b-8oua461yd7] {
    font-weight: 500;
    color: #1a1a1a;
}

/* Status Badges */
.status-badge[b-8oua461yd7] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-active[b-8oua461yd7] {
    background: #dcfce7;
    color: #16a34a;
}

.status-inactive[b-8oua461yd7] {
    background: #f3f4f6;
    color: #6b7280;
}

.status-archived[b-8oua461yd7] {
    background: #fef3c7;
    color: #92400e;
}

.status-default[b-8oua461yd7] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Actions Card */
.actions-card[b-8oua461yd7] {
    background: white;
    /*border-radius: 12px;*/
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    height: fit-content;
}

.actions-card h2[b-8oua461yd7] {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.actions-list[b-8oua461yd7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.action-item[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: none;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #1a1a1a;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
}

.action-item:hover[b-8oua461yd7] {
    background: #f5f5f5;
    border-color: #d0d0d0;
}

/* Students Tab */
.students-tab[b-8oua461yd7],
.lessons-tab[b-8oua461yd7] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.tab-header[b-8oua461yd7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.tab-header h2[b-8oua461yd7] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.students-list[b-8oua461yd7],
.lessons-list[b-8oua461yd7] {
    padding: 0;
}

.module-section[b-8oua461yd7] {
    border-bottom: 1px solid #f0f0f0;
}

.module-section:last-child[b-8oua461yd7] {
    border-bottom: none;
}

.module-header[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

.module-header h3[b-8oua461yd7] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    display: inline;
}

.module-meta[b-8oua461yd7] {
    font-size: 13px;
    color: #666;
    display: inline;
}

.student-item[b-8oua461yd7],
.lesson-item[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.2s ease;
}

.lesson-item-header[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 8px 0;
}

.lesson-info-expanded[b-8oua461yd7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lesson-items-expanded[b-8oua461yd7] {
    padding: 20px 24px 20px 60px;
    background: #f8fafc;
}

.student-details-expanded[b-8oua461yd7] {
    padding: 20px 24px 20px 80px;
    background: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%);
    border-top: 1px solid #e2e8f0;
}

.student-detail-grid[b-8oua461yd7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.detail-item[b-8oua461yd7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.detail-item:hover[b-8oua461yd7] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.detail-label[b-8oua461yd7] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-8oua461yd7] {
    font-size: 15px;
    font-weight: 500;
    color: #1e293b;
}

.student-actions-expanded[b-8oua461yd7] {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
}

.student-actions[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lesson-items-expanded h4[b-8oua461yd7] {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.items-grid[b-8oua461yd7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.item-card[b-8oua461yd7] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.item-card:hover[b-8oua461yd7] {
    border-color: #0369a1;
    box-shadow: 0 2px 8px rgba(3, 105, 161, 0.1);
}

.item-position[b-8oua461yd7] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
}

.item-details[b-8oua461yd7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-name[b-8oua461yd7] {
    font-weight: 500;
    font-size: 14px;
    color: #1e293b;
}

.item-description[b-8oua461yd7] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.no-items-message[b-8oua461yd7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 12px;
    color: #94a3b8;
}

.no-items-message p[b-8oua461yd7] {
    margin: 0;
    font-size: 14px;
}

.student-item:hover[b-8oua461yd7] {
    background: #fafafa;
}

.student-item:last-child[b-8oua461yd7],
.lesson-item:last-child[b-8oua461yd7] {
    border-bottom: none;
}

.student-avatar[b-8oua461yd7] {
    width: 40px;
    height: 40px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.student-info[b-8oua461yd7],
.lesson-info[b-8oua461yd7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lesson-header-row[b-8oua461yd7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.lesson-meta[b-8oua461yd7] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.lesson-actions[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lesson-items[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #0369a1;
    font-weight: 500;
}

.student-name[b-8oua461yd7],
.lesson-name[b-8oua461yd7] {
    font-weight: 500;
    color: #1a1a1a;
    font-size: 14px;
}

.student-email[b-8oua461yd7],
.lesson-questions[b-8oua461yd7] {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
}

.student-stats[b-8oua461yd7] {
    text-align: right;
}

.stat[b-8oua461yd7] {
    font-size: 13px;
    color: #666;
}

.lesson-number[b-8oua461yd7] {
    width: 32px;
    height: 32px;
    background: #f0f0f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #666;
    font-size: 14px;
}

.lesson-status[b-8oua461yd7] {
    text-align: right;
}

/* Empty State */
.empty-state[b-8oua461yd7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    color: #666;
}

.empty-state p[b-8oua461yd7] {
    margin: 16px 0 24px 0;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1200px) {
    .stat-cards[b-8oua461yd7] {
        grid-template-columns: repeat(3, 1fr);
    }

    .overview-layout[b-8oua461yd7] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stat-cards[b-8oua461yd7] {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-header[b-8oua461yd7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-right[b-8oua461yd7] {
        width: 100%;
    }

    .search-box[b-8oua461yd7] {
        width: 100%;
    }

    .info-grid[b-8oua461yd7] {
        grid-template-columns: 1fr;
    }

    .card-footer[b-8oua461yd7] {
        flex-direction: column;
        gap: 12px;
    }

    .tabs[b-8oua461yd7] {
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .stat-cards[b-8oua461yd7] {
        grid-template-columns: 1fr;
    }
}

/* Performance Tab Styles */
.performance-tab[b-8oua461yd7] {
    padding: 0;
}

.performance-section[b-8oua461yd7] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.section-header[b-8oua461yd7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.section-title-with-info[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-button[b-8oua461yd7] {
    min-width: 32px !important;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.info-button:hover[b-8oua461yd7] {
    background-color: #f0f9ff;
    transform: scale(1.05);
}

.section-header h3[b-8oua461yd7] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.threshold-info[b-8oua461yd7] {
    font-size: 13px;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Low Performance Questions List */
.low-perf-list[b-8oua461yd7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.low-perf-item[b-8oua461yd7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #fafbfc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.low-perf-item:hover[b-8oua461yd7] {
    background: #f3f4f6;
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-content[b-8oua461yd7] {
    flex: 1;
    margin-right: 20px;
}

.question-text[b-8oua461yd7] {
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 8px;
    line-height: 1.4;
}

.question-meta[b-8oua461yd7] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.category-tag[b-8oua461yd7],
.answer-count[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
}

.question-rate[b-8oua461yd7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 80px;
}

.rate-circle[b-8oua461yd7] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: white;
}

.rate-label[b-8oua461yd7] {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Performance Classes */
.performance-critical .rate-circle[b-8oua461yd7] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.performance-poor .rate-circle[b-8oua461yd7] {
    background: linear-gradient(135deg, #ea580c, #c2410c);
}

.performance-average .rate-circle[b-8oua461yd7] {
    background: linear-gradient(135deg, #d97706, #b45309);
}

.performance-good .rate-circle[b-8oua461yd7] {
    background: linear-gradient(135deg, #16a34a, #15803d);
}

/* Performance Insights */
.insights-grid[b-8oua461yd7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.insight-card[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.insight-icon[b-8oua461yd7] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.insight-icon.warning[b-8oua461yd7] {
    background: #fef3c7;
    color: #d97706;
}

.insight-icon.neutral[b-8oua461yd7] {
    background: #f3f4f6;
    color: #6b7280;
}

.insight-icon.category[b-8oua461yd7] {
    background: #ddd6fe;
    color: #7c3aed;
}

.insight-content[b-8oua461yd7] {
    flex: 1;
}

.insight-value[b-8oua461yd7] {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}

.insight-label[b-8oua461yd7] {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

/* Empty State Success */
.empty-state.success[b-8oua461yd7] {
    color: #16a34a;
}

.empty-state.success h3[b-8oua461yd7] {
    color: #15803d;
    margin: 16px 0 8px 0;
}

/* ==========================================
   Statistics Tab
   ========================================== */

.statistics-tab[b-8oua461yd7] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Summary cards row */
.stats-summary-grid[b-8oua461yd7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stats-summary-card[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.summary-icon[b-8oua461yd7] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.summary-icon.students[b-8oua461yd7] {
    background: #dbeafe;
    color: #1d4ed8;
}

.summary-icon.scheduled[b-8oua461yd7] {
    background: #e0e7ff;
    color: #4338ca;
}

.summary-icon.answered[b-8oua461yd7] {
    background: #d1fae5;
    color: #065f46;
}

.summary-icon.rate-good[b-8oua461yd7] {
    background: #d1fae5;
    color: #065f46;
}

.summary-icon.rate-average[b-8oua461yd7] {
    background: #fef3c7;
    color: #92400e;
}

.summary-icon.rate-poor[b-8oua461yd7] {
    background: #fee2e2;
    color: #991b1b;
}

.summary-icon.rate-critical[b-8oua461yd7] {
    background: #fee2e2;
    color: #7f1d1d;
}

.summary-content[b-8oua461yd7] {
    flex: 1;
    min-width: 0;
}

.summary-value[b-8oua461yd7] {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.summary-label[b-8oua461yd7] {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

/* Stats sections */
.stats-section[b-8oua461yd7] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.stats-section-header[b-8oua461yd7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.stats-section-header h3[b-8oua461yd7] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-meta[b-8oua461yd7] {
    font-size: 13px;
    color: #94a3b8;
}

/* Statistics table */
.stats-table-wrapper[b-8oua461yd7] {
    overflow-x: auto;
}

.stats-table[b-8oua461yd7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.stats-table thead tr[b-8oua461yd7] {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.stats-table th[b-8oua461yd7] {
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.stats-table td[b-8oua461yd7] {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    color: #1a1a1a;
    vertical-align: middle;
}

.stats-table tbody tr:last-child td[b-8oua461yd7] {
    border-bottom: none;
}

.stats-table tbody tr:hover[b-8oua461yd7] {
    background: #fafafa;
}

.text-center[b-8oua461yd7] {
    text-align: center;
}

.text-right[b-8oua461yd7] {
    text-align: right;
}

.text-muted[b-8oua461yd7] {
    color: #94a3b8 !important;
    font-size: 13px;
}

/* Student cell in table */
.student-cell[b-8oua461yd7] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-avatar-sm[b-8oua461yd7] {
    width: 32px;
    height: 32px;
    background: #f0f4f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.student-name-sm[b-8oua461yd7] {
    font-weight: 500;
    color: #1a1a1a;
    font-size: 14px;
}

.student-email-sm[b-8oua461yd7] {
    font-size: 12px;
    color: #94a3b8;
}

/* Rate pill */
.rate-pill[b-8oua461yd7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.rate-pill.rate-good[b-8oua461yd7] {
    background: #d1fae5;
    color: #065f46;
}

.rate-pill.rate-average[b-8oua461yd7] {
    background: #fef3c7;
    color: #92400e;
}

.rate-pill.rate-poor[b-8oua461yd7] {
    background: #fee2e2;
    color: #991b1b;
}

.rate-pill.rate-critical[b-8oua461yd7] {
    background: #fecaca;
    color: #7f1d1d;
}

/* Question text cell */
.question-text-cell[b-8oua461yd7] {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Category chip */
.category-chip[b-8oua461yd7] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Empty state small */
.empty-state-sm[b-8oua461yd7] {
    padding: 40px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
}

@media (max-width: 900px) {
    .stats-summary-grid[b-8oua461yd7] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stats-summary-grid[b-8oua461yd7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Portal/Groups.razor.rz.scp.css */
.group-search[b-wjhzezhmov] {
    width: 250px;
}

.status-filter[b-wjhzezhmov] {
    min-width: 140px;
}

/* Table */
.groups-table-container[b-wjhzezhmov] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}


/* Columns */
.col-name[b-wjhzezhmov] {
    font-weight: 500;
    color: #1a1a1a;
}

.group-link[b-wjhzezhmov] {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.15s;
}

.group-link:hover[b-wjhzezhmov] {
    color: var(--brand-primary);
}

.col-students[b-wjhzezhmov] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
}

.col-duration[b-wjhzezhmov] {
    color: #666;
    font-size: 14px;
}

.col-lessons[b-wjhzezhmov] {
    color: #666;
}

.lessons-link[b-wjhzezhmov] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.lessons-link:hover[b-wjhzezhmov] {
    text-decoration: underline;
}

.col-status[b-wjhzezhmov] {
    display: flex;
    align-items: center;
}

.col-actions[b-wjhzezhmov] {
    display: flex;
    justify-content: flex-end;
}

/* Status Badges */
.status-badge[b-wjhzezhmov] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-active[b-wjhzezhmov] {
    background: #dcfce7;
    color: #16a34a;
}

.status-inactive[b-wjhzezhmov] {
    background: #f3f4f6;
    color: #6b7280;
}

.status-archived[b-wjhzezhmov] {
    background: #fef3c7;
    color: #92400e;
}

.status-default[b-wjhzezhmov] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Loading & Empty States */
.loading-container[b-wjhzezhmov] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.empty-state[b-wjhzezhmov] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    color: #666;
}

.empty-state h3[b-wjhzezhmov] {
    margin: 16px 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.empty-state p[b-wjhzezhmov] {
    margin: 0 0 24px 0;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
    .table-header[b-wjhzezhmov],
    .table-row[b-wjhzezhmov] {
        grid-template-columns: 2fr 1fr 1fr 60px;
    }

    .col-duration[b-wjhzezhmov],
    .col-lessons[b-wjhzezhmov] {
        display: none;
    }
}

@media (max-width: 768px) {
    .page-header[b-wjhzezhmov] {
        flex-direction: column;
        gap: 16px;
    }

    .toolbar[b-wjhzezhmov] {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .toolbar-left[b-wjhzezhmov] {
        flex-direction: column;
    }

    .group-search[b-wjhzezhmov] {
        width: 100%;
    }

    .table-header[b-wjhzezhmov],
    .table-row[b-wjhzezhmov] {
        grid-template-columns: 2fr 1fr 60px;
    }

    .col-students[b-wjhzezhmov] {
        display: none;
    }

    .create-group-dialog[b-wjhzezhmov] {
        max-width: 100%;
        margin: 16px;
    }

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

    .dialog-overlay[b-wjhzezhmov] {
        padding: 16px;
    }
}
/* /Components/Pages/Portal/GroupTheorySchedules.razor.rz.scp.css */
/* GroupTheorySchedules - Uses shared dialog styles from /css/DialogShared.css */

/* ==============================================
   Page Layout
   ============================================== */
.theory-schedule-page[b-gtn76ox2r7] {
    padding: 1.5rem;
}

.page-header[b-gtn76ox2r7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-header h3[b-gtn76ox2r7] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
}

/* ==============================================
   Empty State
   ============================================== */
.empty-state[b-gtn76ox2r7] {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state h4[b-gtn76ox2r7] {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.empty-state p[b-gtn76ox2r7] {
    color: var(--neutral-foreground-hint);
}

/* ==============================================
   Preview Dialog - Summary Stats
   ============================================== */
.preview-summary[b-gtn76ox2r7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.preview-stat[b-gtn76ox2r7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.preview-stat fluent-icon[b-gtn76ox2r7] {
    flex-shrink: 0;
    margin-top: 2px;
}

.preview-stat .stat-value[b-gtn76ox2r7] {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.preview-stat .stat-label[b-gtn76ox2r7] {
    font-size: 13px;
    color: #666;
}

/* ==============================================
   Preview Dialog - Dates List
   ============================================== */
.preview-dates-list[b-gtn76ox2r7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 8px;
}

.preview-date-item[b-gtn76ox2r7] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #1a1a1a;
}

.preview-date-item fluent-icon[b-gtn76ox2r7] {
    flex-shrink: 0;
}

/* ==============================================
   Conflict Dialog - Conflicts List
   ============================================== */
.conflicts-list[b-gtn76ox2r7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.conflict-item[b-gtn76ox2r7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    font-size: 14px;
}

.conflict-item fluent-icon[b-gtn76ox2r7] {
    flex-shrink: 0;
    margin-top: 2px;
}

/* /Components/Pages/Portal/InstructorSchedule.razor.rz.scp.css */
/* InstructorSchedule page styles */

.page-container[b-nqhcgupyga] {
    padding: 16px;
    max-width: 1300px;
}

.page-toolbar[b-nqhcgupyga] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

.page-toolbar-left[b-nqhcgupyga] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.page-toolbar-right[b-nqhcgupyga] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.instructor-filter[b-nqhcgupyga],
.status-filter[b-nqhcgupyga] {
    min-width: 180px;
}

/* Table */
.schedule-table-container[b-nqhcgupyga] {
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.table-header[b-nqhcgupyga] {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 80px 1fr 100px 60px;
    padding: 10px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.table-row[b-nqhcgupyga] {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 80px 1fr 100px 60px;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    align-items: center;
    font-size: 13px;
    transition: background-color 0.15s;
}

.table-row:last-child[b-nqhcgupyga] {
    border-bottom: none;
}

.table-row:hover[b-nqhcgupyga] {
    background-color: #f9fafb;
}

/* Date/time column */
.lesson-date[b-nqhcgupyga] {
    display: block;
    font-weight: 500;
    color: #111827;
}

.lesson-time[b-nqhcgupyga] {
    display: block;
    font-size: 12px;
    color: #6b7280;
}

/* Status badges */
.status-badge[b-nqhcgupyga] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-scheduled[b-nqhcgupyga] {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-completed[b-nqhcgupyga] {
    background: #d1fae5;
    color: #065f46;
}

.status-cancelled[b-nqhcgupyga] {
    background: #fee2e2;
    color: #991b1b;
}

/* Empty state */
.empty-state[b-nqhcgupyga] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 12px;
    color: #6b7280;
}

.empty-state h3[b-nqhcgupyga] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
}

.empty-state p[b-nqhcgupyga] {
    margin: 0;
    font-size: 14px;
    text-align: center;
    max-width: 320px;
}

/* Loading */
.loading-container[b-nqhcgupyga] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    gap: 16px;
    color: #6b7280;
}

/* Dialog */
.dialog-overlay[b-nqhcgupyga] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.schedule-dialog[b-nqhcgupyga],
.confirm-dialog[b-nqhcgupyga] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 480px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dialog-header[b-nqhcgupyga] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.dialog-title h2[b-nqhcgupyga] {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.dialog-subtitle[b-nqhcgupyga] {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.close-button[b-nqhcgupyga] {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.close-button:hover[b-nqhcgupyga] {
    background: #f3f4f6;
}

.dialog-body[b-nqhcgupyga] {
    padding: 20px 24px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group[b-nqhcgupyga] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-nqhcgupyga] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.form-label.required[b-nqhcgupyga]::after {
    content: " *";
    color: #ef4444;
}

.form-input[b-nqhcgupyga] {
    width: 100%;
}

.dialog-footer[b-nqhcgupyga] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
}
/* /Components/Pages/Portal/LessonDetails.razor.rz.scp.css */
/* LessonDetails Page Styles */
/* Shared stat card styles are in wwwroot/css/SharedStats.css (loaded globally in App.razor) */

.lesson-details-container[b-7au41y6x87] {
    padding: 24px;
    background-color: #fafafa;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Loading & Not Found */
.loading-container[b-7au41y6x87] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.not-found[b-7au41y6x87] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    text-align: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 48px;
}

.not-found h2[b-7au41y6x87] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

.not-found p[b-7au41y6x87] {
    margin: 0;
    color: #666;
}


/* Toolbar */
.toolbar[b-7au41y6x87] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.toolbar-left[b-7au41y6x87] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.toolbar-right[b-7au41y6x87] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.lesson-search[b-7au41y6x87] {
    width: 250px;
}

.category-filter[b-7au41y6x87] {
    min-width: 160px;
}

.status-filter[b-7au41y6x87] {
    min-width: 120px;
}

.back-button[b-7au41y6x87] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    color: #666;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.15s;
}

.back-button:hover[b-7au41y6x87] {
    background: #f5f5f5;
    color: #1a1a1a;
}

.header-info[b-7au41y6x87] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-title-row[b-7au41y6x87] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-title-row h1[b-7au41y6x87] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
}

.header-meta[b-7au41y6x87] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.category-tag[b-7au41y6x87] {
    color: #2563eb;
    font-weight: 500;
}

.meta-separator[b-7au41y6x87] {
    color: #ccc;
}

.header-right[b-7au41y6x87] {
    display: flex;
    gap: 12px;
}

/* Status Badges */
.status-badge[b-7au41y6x87] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-active[b-7au41y6x87] {
    background: #dcfce7;
    color: #16a34a;
}

.status-draft[b-7au41y6x87] {
    background: #fef3c7;
    color: #d97706;
}

.status-archived[b-7au41y6x87] {
    background: #f3f4f6;
    color: #6b7280;
}

.status-default[b-7au41y6x87] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Content Layout */
.content-layout[b-7au41y6x87] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
    align-items: start;
}

/* Cards */
.lesson-card[b-7au41y6x87],
.modules-card[b-7au41y6x87],
.items-card[b-7au41y6x87],
.group-performance-card[b-7au41y6x87],
.questions-card[b-7au41y6x87] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Full-width cards */
.group-performance-card[b-7au41y6x87],
.questions-card[b-7au41y6x87] {
    grid-column: 1 / -1;
}

.card-header[b-7au41y6x87] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.card-header h2[b-7au41y6x87] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.card-body[b-7au41y6x87] {
    padding: 24px;
}

.card-actions[b-7au41y6x87] {
    display: flex;
    gap: 8px;
}

/* Sections */
.description-section[b-7au41y6x87],
.completion-section[b-7au41y6x87],
.groups-section[b-7au41y6x87] {
    margin-bottom: 24px;
}

.description-section:last-child[b-7au41y6x87],
.completion-section:last-child[b-7au41y6x87],
.groups-section:last-child[b-7au41y6x87] {
    margin-bottom: 0;
}

.description-section h3[b-7au41y6x87],
.completion-section h3[b-7au41y6x87],
.groups-section h3[b-7au41y6x87] {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.description-text[b-7au41y6x87] {
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.6;
    margin: 0;
}

/* Completion Bar */
.completion-bar-container[b-7au41y6x87] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.completion-info[b-7au41y6x87] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.completion-label[b-7au41y6x87] {
    font-size: 14px;
    color: #666;
}

.completion-percentage[b-7au41y6x87] {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.completion-bar-bg[b-7au41y6x87] {
    width: 100%;
    height: 8px;
    background: #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
}

.completion-bar[b-7au41y6x87] {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    border-radius: 4px;
    transition: width 0.3s;
}

/* Groups Section */
.groups-list[b-7au41y6x87] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.group-badge[b-7au41y6x87] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f3e8ff;
    border-radius: 16px;
    font-size: 12px;
    color: #7c3aed;
    font-weight: 500;
}

.groups-performance-list[b-7au41y6x87] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-performance-item[b-7au41y6x87] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.group-info[b-7au41y6x87] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.group-info .group-name[b-7au41y6x87] {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

.group-info .student-count[b-7au41y6x87] {
    font-size: 12px;
    color: #666;
}

.group-stats[b-7au41y6x87] {
    display: flex;
    gap: 24px;
}

.group-stats .stat-item[b-7au41y6x87] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.group-stats .stat-label[b-7au41y6x87] {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
}

.group-stats .stat-value[b-7au41y6x87] {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.empty-groups[b-7au41y6x87] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    color: #666;
}

.empty-groups p[b-7au41y6x87] {
    margin: 12px 0 0 0;
    font-size: 14px;
}

/* Questions Table */
.questions-table[b-7au41y6x87] {
    display: flex;
    flex-direction: column;
}



.td-order[b-7au41y6x87] {
    font-size: 14px;
    font-weight: 600;
    color: #888;
}

.td-question[b-7au41y6x87] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.td-question .question-text[b-7au41y6x87] {
    font-size: 14px;
    color: #1a1a1a;
}

.td-question .question-status[b-7au41y6x87] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    width: fit-content;
}

.td-stats[b-7au41y6x87],
.td-rate[b-7au41y6x87],
.td-difficulty[b-7au41y6x87] {
    font-size: 14px;
    color: #1a1a1a;
}

.td-actions[b-7au41y6x87] {
    display: flex;
    justify-content: center;
}

.icon-button[b-7au41y6x87] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.icon-button:hover[b-7au41y6x87] {
    background: #fee2e2;
    color: #dc2626;
}

.empty-questions[b-7au41y6x87] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    text-align: center;
    color: #666;
}

.empty-questions p[b-7au41y6x87] {
    margin: 12px 0 16px 0;
    font-size: 14px;
}

.count-badge[b-7au41y6x87] {
    padding: 4px 12px;
    background: #f3f4f6;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    color: #666;
}

.modules-list[b-7au41y6x87] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.module-item[b-7au41y6x87] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.module-icon[b-7au41y6x87] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #eff6ff;
    border-radius: 8px;
    flex-shrink: 0;
}

.module-content[b-7au41y6x87] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.module-header[b-7au41y6x87] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.module-name[b-7au41y6x87] {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

.module-meta[b-7au41y6x87] {
    font-size: 12px;
    color: #666;
}

.module-description[b-7au41y6x87] {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.empty-modules[b-7au41y6x87] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    color: #666;
}

.empty-modules p[b-7au41y6x87] {
    margin: 12px 0 0 0;
    font-size: 14px;
}

/* Items Card */
.items-list[b-7au41y6x87] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.item-card[b-7au41y6x87] {
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.item-header[b-7au41y6x87] {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.item-order[b-7au41y6x87] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #6366f1;
    flex-shrink: 0;
}

.item-title[b-7au41y6x87] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-title h4[b-7au41y6x87] {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

.item-category[b-7au41y6x87] {
    padding: 2px 8px;
    background: #f0f9ff;
    border-radius: 4px;
    font-size: 11px;
    color: #0284c7;
    width: fit-content;
}

.item-description[b-7au41y6x87] {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.item-content[b-7au41y6x87] {
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    border-left: 3px solid #6366f1;
}

.empty-items[b-7au41y6x87] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    color: #666;
}

.empty-items p[b-7au41y6x87] {
    margin: 12px 0 0 0;
    font-size: 14px;
}

/* Stat icon colors for new stat types */
.stat-icon.items[b-7au41y6x87] {
    background: #fef3c7;
    color: #f59e0b;
}

.stat-icon.modules[b-7au41y6x87] {
    background: #dbeafe;
    color: #3b82f6;
}

/* /Components/Pages/Portal/Lessons.razor.rz.scp.css */
.lesson-search[b-f928lowzx6] {
    width: 250px;
}

.category-filter[b-f928lowzx6] {
    min-width: 160px;
}

.status-filter[b-f928lowzx6] {
    min-width: 120px;
}

/* Filter Notification */
.filter-notification[b-f928lowzx6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    margin-bottom: 16px;
    color: #1e40af;
    font-size: 14px;
}

.filter-notification fluent-icon[b-f928lowzx6] {
    flex-shrink: 0;
}

.filter-notification span[b-f928lowzx6] {
    flex: 1;
}

/* Table */
.lessons-table-container[b-f928lowzx6] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    --table-columns: 2.4fr 1.6fr 1fr 0.8fr 1.2fr 0.9fr 64px;
}


/* Title Column */
.col-title[b-f928lowzx6] {
    font-weight: 500;
    color: #1a1a1a;
}

.lesson-link[b-f928lowzx6] {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}

.lesson-link:hover[b-f928lowzx6] {
    color: var(--brand-primary);
}

/* Category Column */
.col-category[b-f928lowzx6] {
    display: flex;
    align-items: center;
}

.category-tag[b-f928lowzx6] {
    color: #2563eb;
    font-size: 14px;
}

/* Questions Column */
.col-questions[b-f928lowzx6] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 14px;
}

/* Items Column */
.col-items[b-f928lowzx6] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 14px;
}

/* Groups Column */
.col-groups[b-f928lowzx6] {
    display: flex;
    align-items: center;
}

.groups-display[b-f928lowzx6] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
}

.groups-text[b-f928lowzx6] {
    font-size: 14px;
    color: #2563eb;
}

.no-groups[b-f928lowzx6] {
    color: #999;
    font-style: italic;
    font-size: 14px;
}

/* Status Column */
.col-status[b-f928lowzx6] {
    display: flex;
    align-items: center;
}

/* Status Badges */
.status-badge[b-f928lowzx6] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-active[b-f928lowzx6] {
    background: #dcfce7;
    color: #16a34a;
}

.status-draft[b-f928lowzx6] {
    background: #fef3c7;
    color: #d97706;
}

.status-archived[b-f928lowzx6] {
    background: #f3f4f6;
    color: #6b7280;
}

.status-default[b-f928lowzx6] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Actions Column */
.col-actions[b-f928lowzx6] {
    display: flex;
    justify-content: flex-end;
}

/* Loading & Empty States */
.loading-container[b-f928lowzx6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.empty-state[b-f928lowzx6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    color: #666;
}

.empty-state h3[b-f928lowzx6] {
    margin: 16px 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.empty-state p[b-f928lowzx6] {
    margin: 0 0 24px 0;
    font-size: 14px;
}

/* Dialog Overlay */
.dialog-overlay[b-f928lowzx6] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

/* Create Lesson Dialog */
.create-lesson-dialog[b-f928lowzx6] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}


.form-group[b-f928lowzx6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}



.form-input[b-f928lowzx6] {
    width: 100%;
}

/* Toggle Group */
.toggle-group[b-f928lowzx6] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.toggle-label[b-f928lowzx6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-label .form-label[b-f928lowzx6] {
    margin: 0;
}

.toggle-description[b-f928lowzx6] {
    font-size: 13px;
    color: #666;
}

.dialog-footer[b-f928lowzx6] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 24px 24px;
    border-top: 1px solid #eee;
}
/* /Components/Pages/Portal/ModuleDetails.razor.rz.scp.css */
/* LessonDetails Page Styles */
/* Shared stat card styles are in wwwroot/css/SharedStats.css (loaded globally in App.razor) */

.lesson-details-container[b-mnzn9d3j0d] {
    padding: 24px;
    background-color: #fafafa;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Loading & Not Found */
.loading-container[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.not-found[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    text-align: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 48px;
}

.not-found h2[b-mnzn9d3j0d] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

.not-found p[b-mnzn9d3j0d] {
    margin: 0;
    color: #666;
}


/* Toolbar */
.toolbar[b-mnzn9d3j0d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.toolbar-left[b-mnzn9d3j0d] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.toolbar-right[b-mnzn9d3j0d] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.lesson-search[b-mnzn9d3j0d] {
    width: 250px;
}

.category-filter[b-mnzn9d3j0d] {
    min-width: 160px;
}

.status-filter[b-mnzn9d3j0d] {
    min-width: 120px;
}

.back-button[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    color: #666;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.15s;
}

.back-button:hover[b-mnzn9d3j0d] {
    background: #f5f5f5;
    color: #1a1a1a;
}

.header-info[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-title-row[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-title-row h1[b-mnzn9d3j0d] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
}

.header-meta[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.category-tag[b-mnzn9d3j0d] {
    color: #2563eb;
    font-weight: 500;
}

.meta-separator[b-mnzn9d3j0d] {
    color: #ccc;
}

.header-right[b-mnzn9d3j0d] {
    display: flex;
    gap: 12px;
}

/* Status Badges */
.status-badge[b-mnzn9d3j0d] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-active[b-mnzn9d3j0d] {
    background: #dcfce7;
    color: #16a34a;
}

.status-inactive[b-mnzn9d3j0d] {
    background: #fee2e2;
    color: #dc2626;
}

.status-draft[b-mnzn9d3j0d] {
    background: #fef3c7;
    color: #d97706;
}

.status-archived[b-mnzn9d3j0d] {
    background: #f3f4f6;
    color: #6b7280;
}

.status-default[b-mnzn9d3j0d] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Lessons Accordion */
.lessons-accordion[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lesson-accordion-header[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    width: 100%;
}

.lesson-number[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #f3f4f6;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #6b7280;
    flex-shrink: 0;
}

.lesson-main-info[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.lesson-title-row[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lesson-title[b-mnzn9d3j0d] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.lesson-metadata-row[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lesson-meta-item[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

.lesson-badges[b-mnzn9d3j0d] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.lesson-badges .type-badge[b-mnzn9d3j0d] {
    background: #eff6ff;
    color: #2563eb;
}

.lesson-badges .category-badge[b-mnzn9d3j0d] {
    background: #f0fdf4;
    color: #16a34a;
}

.lesson-actions[b-mnzn9d3j0d] {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.lesson-accordion-content[b-mnzn9d3j0d] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #fafafa;
    border-top: 1px solid #e5e7eb;
}

.lesson-description-section h5[b-mnzn9d3j0d],
.lesson-items-section h5[b-mnzn9d3j0d] {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lesson-description-section p[b-mnzn9d3j0d] {
    margin: 0;
    color: #374151;
    line-height: 1.6;
}

.items-list[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.item-row[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.item-row:last-child[b-mnzn9d3j0d] {
    border-bottom: none;
}

.item-row:hover[b-mnzn9d3j0d] {
    background: #fafafa;
}

.item-index[b-mnzn9d3j0d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: #f3f4f6;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    color: #6b7280;
    flex-shrink: 0;
}

.item-main-info[b-mnzn9d3j0d] {
    flex: 1;
    min-width: 0;
}

.item-title[b-mnzn9d3j0d] {
    font-weight: 500;
    color: #1a1a1a;
    font-size: 14px;
}

.item-metadata[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.item-type-badge[b-mnzn9d3j0d] {
    font-size: 12px !important;
    padding: 4px 10px !important;
}

.item-duration[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #6b7280;
}

.items-grid[b-mnzn9d3j0d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.item-card-compact[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    font-size: 13px;
}

.item-number[b-mnzn9d3j0d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #f3f4f6;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
    color: #6b7280;
    flex-shrink: 0;
}

.item-name[b-mnzn9d3j0d] {
    color: #1a1a1a;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Content Layout */
.content-layout[b-mnzn9d3j0d] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Cards */
.lesson-card[b-mnzn9d3j0d],
.group-performance-card[b-mnzn9d3j0d],
.questions-card[b-mnzn9d3j0d] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-header[b-mnzn9d3j0d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.card-header h2[b-mnzn9d3j0d] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.card-body[b-mnzn9d3j0d] {
    padding: 24px;
}

.card-actions[b-mnzn9d3j0d] {
    display: flex;
    gap: 8px;
}

/* Lesson Card */
.lesson-card[b-mnzn9d3j0d] {
    grid-column: 1;
    grid-row: 1;
}

/* Sections */
.description-section[b-mnzn9d3j0d],
.completion-section[b-mnzn9d3j0d],
.groups-section[b-mnzn9d3j0d] {
    margin-bottom: 24px;
}

.description-section:last-child[b-mnzn9d3j0d],
.completion-section:last-child[b-mnzn9d3j0d],
.groups-section:last-child[b-mnzn9d3j0d] {
    margin-bottom: 0;
}

.description-section h3[b-mnzn9d3j0d],
.completion-section h3[b-mnzn9d3j0d],
.groups-section h3[b-mnzn9d3j0d] {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.description-text[b-mnzn9d3j0d] {
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.6;
    margin: 0;
}

/* Completion Bar */
.completion-bar-container[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.completion-info[b-mnzn9d3j0d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.completion-label[b-mnzn9d3j0d] {
    font-size: 14px;
    color: #666;
}

.completion-percentage[b-mnzn9d3j0d] {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.completion-bar-bg[b-mnzn9d3j0d] {
    width: 100%;
    height: 8px;
    background: #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
}

.completion-bar[b-mnzn9d3j0d] {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    border-radius: 4px;
    transition: width 0.3s;
}

/* Groups Section */
.groups-list[b-mnzn9d3j0d] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Lessons Section */
.lessons-section[b-mnzn9d3j0d] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.section-header[b-mnzn9d3j0d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-header h2[b-mnzn9d3j0d] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.lessons-list[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lesson-card[b-mnzn9d3j0d] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fafafa;
    transition: all 0.2s;
}

.lesson-card:hover[b-mnzn9d3j0d] {
    background: #f5f5f5;
    border-color: #d4d4d4;
}

.lesson-sequence[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #4f46e5;
    color: white;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.lesson-info[b-mnzn9d3j0d] {
    flex: 1;
    min-width: 0;
}

.lesson-header[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.lesson-header h3[b-mnzn9d3j0d] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.lesson-description[b-mnzn9d3j0d] {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.lesson-meta[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #999;
}

.lesson-actions[b-mnzn9d3j0d] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Description Section */
.description-section[b-mnzn9d3j0d] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.info-card[b-mnzn9d3j0d] {
    padding: 0;
}

.info-card h3[b-mnzn9d3j0d] {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.info-card p[b-mnzn9d3j0d] {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* Empty State */
.empty-state[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    text-align: center;
    gap: 16px;
}

.empty-state p[b-mnzn9d3j0d] {
    margin: 0;
    color: #666;
    font-size: 14px;
}


.group-badge[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f3e8ff;
    border-radius: 16px;
    font-size: 12px;
    color: #7c3aed;
    font-weight: 500;
}

/* Group Performance Card */
.group-performance-card[b-mnzn9d3j0d] {
    grid-column: 2;
    grid-row: 1;
}

.groups-performance-list[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-performance-item[b-mnzn9d3j0d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.group-info[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.group-info .group-name[b-mnzn9d3j0d] {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

.group-info .student-count[b-mnzn9d3j0d] {
    font-size: 12px;
    color: #666;
}

.group-stats[b-mnzn9d3j0d] {
    display: flex;
    gap: 24px;
}

.group-stats .stat-item[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.group-stats .stat-label[b-mnzn9d3j0d] {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
}

.group-stats .stat-value[b-mnzn9d3j0d] {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.empty-groups[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    color: #666;
}

.empty-groups p[b-mnzn9d3j0d] {
    margin: 12px 0 0 0;
    font-size: 14px;
}

/* Questions Card */
.questions-card[b-mnzn9d3j0d] {
    grid-column: 1 / -1;
    grid-row: 2;
}

/* Questions Table */
.questions-table[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
}



.td-order[b-mnzn9d3j0d] {
    font-size: 14px;
    font-weight: 600;
    color: #888;
}

.td-question[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.td-question .question-text[b-mnzn9d3j0d] {
    font-size: 14px;
    color: #1a1a1a;
}

.td-question .question-status[b-mnzn9d3j0d] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    width: fit-content;
}

.td-stats[b-mnzn9d3j0d],
.td-rate[b-mnzn9d3j0d],
.td-difficulty[b-mnzn9d3j0d] {
    font-size: 14px;
    color: #1a1a1a;
}

.td-actions[b-mnzn9d3j0d] {
    display: flex;
    justify-content: center;
}

.icon-button[b-mnzn9d3j0d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.icon-button:hover[b-mnzn9d3j0d] {
    background: #fee2e2;
    color: #dc2626;
}

.empty-questions[b-mnzn9d3j0d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    text-align: center;
    color: #666;
}

.empty-questions p[b-mnzn9d3j0d] {
    margin: 12px 0 16px 0;
    font-size: 14px;
}
/* /Components/Pages/Portal/QuestionAddEdit.razor.rz.scp.css */
.question-add-container[b-zatklxw3zy] {
    padding: 32px;
    background-color: #f3f4f6;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Page Header - simplified */
.page-header[b-zatklxw3zy] {
    display: none; /* We moved controls to toolbar */
}

/* Back Button */
.back-button[b-zatklxw3zy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    color: #4b5563;
    transition: all 0.2s;
}

.back-button:hover[b-zatklxw3zy] {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}

/* Toolbar */
.toolbar[b-zatklxw3zy] {
    display: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 12px 24px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    flex-shrink: 0; /* Prevent toolbar from shrinking */
}

.toolbar-left[b-zatklxw3zy] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.header-info[b-zatklxw3zy] {
    display: flex;
    flex-direction: column;
}

.header-title-row[b-zatklxw3zy] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolbar-right[b-zatklxw3zy] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Badge Styles */
.status-badge[b-zatklxw3zy] {
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-active[b-zatklxw3zy] {
    background: #dcfce7;
    color: #15803d;
}

.status-draft[b-zatklxw3zy] {
    background: #fef3c7;
    color: #b45309;
}

.status-archived[b-zatklxw3zy] {
    background: #f3f4f6;
    color: #4b5563;
}

.status-default[b-zatklxw3zy] {
    background: #f3f4f6;
    color: #4b5563;
}

.category-tag[b-zatklxw3zy] {
    color: #2563eb;
    font-weight: 500;
    font-size: 14px;
    background: #eff6ff;
    padding: 2px 8px;
    border-radius: 6px;
}

.meta-separator[b-zatklxw3zy] {
    color: #d1d5db;
}

.meta-text[b-zatklxw3zy] {
    color: #6b7280;
    font-size: 14px;
}

/* Layout */
.content-layout[b-zatklxw3zy] {
    display: grid;
    grid-template-columns: 2fr 360px; /* Fixed width sidebar */
    gap: 24px;
    align-items: start;
    flex: 1; /* Take remaining height */
}

/* Cards */
.question-card[b-zatklxw3zy],
.statistics-card[b-zatklxw3zy],
.recent-answers-card[b-zatklxw3zy] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    overflow: visible; /* Helper tooltips might need this */
}

.card-header[b-zatklxw3zy] {
    display: flex;
    flex-direction: column;
    padding: 24px 24px 0 24px;
    margin-bottom: 24px;
}

.card-header h2[b-zatklxw3zy] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.card-subtitle[b-zatklxw3zy] {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.card-body[b-zatklxw3zy] {
    padding: 0 24px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Forms */
.form-field[b-zatklxw3zy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-zatklxw3zy] {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.helper-text[b-zatklxw3zy] {
    font-size: 13px;
    color: #6b7280;
}

.form-grid[b-zatklxw3zy] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Create Fluent UI overrides carefully */
[b-zatklxw3zy](.question-input textarea) {
    font-size: 16px;
    line-height: 1.5;
    padding: 12px;
}

/* Options Section */
.options-section[b-zatklxw3zy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #f9fafb;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.section-header[b-zatklxw3zy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.section-header h3[b-zatklxw3zy] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.section-helper[b-zatklxw3zy] {
    font-size: 13px;
    color: #6b7280;
}

.options-list[b-zatklxw3zy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Removed deep styles for options as they are now in OptionEditor.razor.css */

.option-toolbar[b-zatklxw3zy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.note[b-zatklxw3zy] {
    color: #9ca3af;
    font-size: 13px;
    font-style: italic;
}

/* Image Section */
.image-section[b-zatklxw3zy] {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.image-controls[b-zatklxw3zy] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.image-preview-container[b-zatklxw3zy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.image-preview[b-zatklxw3zy] {
    width: 100%;
    background: #f3f4f6;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    border: 1px solid #e5e7eb;
}

.image-preview img[b-zatklxw3zy] {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}

.image-actions[b-zatklxw3zy] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

/* Image Source Toggle */
.image-source-toggle[b-zatklxw3zy] {
    display: flex;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #f9fafb;
}

.source-tab[b-zatklxw3zy] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.15s;
}

.source-tab:first-child[b-zatklxw3zy] {
    border-right: 1px solid #e5e7eb;
}

.source-tab:hover[b-zatklxw3zy] {
    background: #f3f4f6;
    color: #374151;
}

.source-tab.active[b-zatklxw3zy] {
    background: white;
    color: #2563eb;
    box-shadow: inset 0 -2px 0 #2563eb;
}

.image-source-badge[b-zatklxw3zy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.road-sign-source[b-zatklxw3zy] {
    background: #f0f7ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.road-sign-source .road-sign-code[b-zatklxw3zy] {
    font-size: 11px;
    color: #6b7280;
    font-family: monospace;
}

/* Sidebar Specifics */
.sidebar[b-zatklxw3zy] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.metadata-card .card-body[b-zatklxw3zy] {
    gap: 20px;
}

.checklist[b-zatklxw3zy] {
    margin: 0;
    padding-left: 16px;
    color: #4b5563;
    font-size: 14px;
}

.checklist li[b-zatklxw3zy] {
    margin-bottom: 8px;
    line-height: 1.5;
}

.divider[b-zatklxw3zy] {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 0;
}

.save-actions[b-zatklxw3zy] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.save-actions.column[b-zatklxw3zy] {
    flex-direction: column;
}

/* AI Prompt */
.ai-prompt-overlay[b-zatklxw3zy] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.ai-prompt[b-zatklxw3zy] {
    background: white;
    padding: 24px;
    border-radius: 16px;
    width: 540px;
    max-width: 90vw;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ai-prompt h3[b-zatklxw3zy] {
    margin-top: 0;
}

/* Lesson Selection */
.lesson-select-container[b-zatklxw3zy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #f9fafb;
}

.lesson-checkbox-item[b-zatklxw3zy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.lesson-checkbox-item:hover[b-zatklxw3zy] {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

.lesson-checkbox-item input[type="checkbox"][b-zatklxw3zy] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.lesson-name[b-zatklxw3zy] {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.lesson-category[b-zatklxw3zy] {
    font-size: 12px;
    padding: 2px 8px;
    background-color: #e5e7eb;
    color: #6b7280;
    border-radius: 4px;
}

/* Road Sign Picker */
.road-sign-selected[b-zatklxw3zy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    margin-bottom: 8px;
}

.road-sign-thumb[b-zatklxw3zy] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 4px;
    background: white;
    border: 1px solid #e5e7eb;
}

.road-sign-info[b-zatklxw3zy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.road-sign-name[b-zatklxw3zy] {
    font-size: 13px;
    font-weight: 600;
    color: #1d4ed8;
}

.road-sign-code[b-zatklxw3zy] {
    font-size: 11px;
    color: #6b7280;
    font-family: monospace;
}

.road-sign-picker[b-zatklxw3zy] {
    margin-top: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.road-sign-picker-toolbar[b-zatklxw3zy] {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #f3f4f6;
    background: #f9fafb;
}

.road-sign-search[b-zatklxw3zy] {
    flex: 1;
}

.road-sign-list[b-zatklxw3zy] {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.road-sign-item[b-zatklxw3zy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.road-sign-item:last-child[b-zatklxw3zy] {
    border-bottom: none;
}

.road-sign-item:hover[b-zatklxw3zy] {
    background: #f3f4f6;
}

.road-sign-item.selected[b-zatklxw3zy] {
    background: #eff6ff;
}

.road-sign-item img[b-zatklxw3zy] {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 4px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.road-sign-item-info[b-zatklxw3zy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.road-sign-item-name[b-zatklxw3zy] {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
}

.road-sign-item-code[b-zatklxw3zy] {
    font-size: 11px;
    color: #9ca3af;
    font-family: monospace;
}

.road-sign-empty[b-zatklxw3zy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    color: #6b7280;
    font-size: 13px;
}

/* Responsive */
@media (max-width: 1024px) {
    .content-layout[b-zatklxw3zy] {
        grid-template-columns: 1fr;
    }

    .toolbar[b-zatklxw3zy] {
        position: static;
        margin-bottom: 24px;
    }
}

/* AI Generation Dialog */
.ai-dialog-overlay[b-zatklxw3zy] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    padding: 80px 24px 24px 24px;
    overflow-y: auto;
}

.ai-dialog[b-zatklxw3zy] {
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.ai-dialog h3[b-zatklxw3zy] {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.ai-dialog-hint[b-zatklxw3zy] {
    margin: 0 0 16px;
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.5;
}

.ai-dialog-error[b-zatklxw3zy] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #fef2f2;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #b91c1c;
}

.ai-dialog-actions[b-zatklxw3zy] {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: flex-end;
}

/* Source document link shown after AI generation */
.source-document-link[b-zatklxw3zy] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    font-size: 13px;
    color: #374151;
}

.source-document-link a[b-zatklxw3zy] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.source-document-link a:hover[b-zatklxw3zy] {
    text-decoration: underline;
}

.source-page[b-zatklxw3zy] {
    color: #6b7280;
    font-weight: 400;
    margin-left: 4px;
}

/* Tag picker */
.tag-picker[b-zatklxw3zy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.tag-chip[b-zatklxw3zy] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    background: none;
    line-height: 1.4;
}

.tag-chip:hover[b-zatklxw3zy] {
    opacity: 0.85;
    transform: scale(1.03);
}

.tag-chip--selected[b-zatklxw3zy] {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}
/* /Components/Pages/Portal/QuestionDetails.razor.rz.scp.css */
/* QuestionDetails Page Styles */
/* Shared stat card styles are in wwwroot/css/SharedStats.css (loaded globally in App.razor) */

.loading-container[b-0dpddwtbe6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.not-found[b-0dpddwtbe6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    text-align: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 48px;
}

.not-found h2[b-0dpddwtbe6] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

.not-found p[b-0dpddwtbe6] {
    margin: 0;
    color: #666;
}

.back-button[b-0dpddwtbe6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    color: #666;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.15s;
}

.back-button:hover[b-0dpddwtbe6] {
    background: #f5f5f5;
    color: #1a1a1a;
}

.header-info[b-0dpddwtbe6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-title-row[b-0dpddwtbe6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-title-row h1[b-0dpddwtbe6] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
}

.header-meta[b-0dpddwtbe6] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.category-tag[b-0dpddwtbe6] {
    color: #2563eb;
    font-weight: 500;
}

.meta-separator[b-0dpddwtbe6] {
    color: #ccc;
}

.header-right[b-0dpddwtbe6] {
    display: flex;
    gap: 12px;
}

/* Status Badges */
.status-badge[b-0dpddwtbe6] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-active[b-0dpddwtbe6] {
    background: #dcfce7;
    color: #16a34a;
}

.status-draft[b-0dpddwtbe6] {
    background: #fef3c7;
    color: #d97706;
}

.status-generated[b-0dpddwtbe6] {
    background: #dbeafe;
    color: #2563eb;
}

.status-archived[b-0dpddwtbe6] {
    background: #f3f4f6;
    color: #6b7280;
}

.status-default[b-0dpddwtbe6] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Content Layout */
.content-layout[b-0dpddwtbe6] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

/* Cards */
.question-card[b-0dpddwtbe6],
.statistics-card[b-0dpddwtbe6],
.recent-answers-card[b-0dpddwtbe6] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-header[b-0dpddwtbe6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.card-header h2[b-0dpddwtbe6] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.card-body[b-0dpddwtbe6] {
    padding: 24px;
}

/* Question Card */
.question-card[b-0dpddwtbe6] {
    grid-column: 1;
    grid-row: 1 / 3;
}

.question-text[b-0dpddwtbe6] {
    font-size: 18px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.question-image[b-0dpddwtbe6] {
    margin-bottom: 24px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.question-image img[b-0dpddwtbe6] {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Options Section */
.options-section[b-0dpddwtbe6] {
    margin-bottom: 24px;
}

.options-section h3[b-0dpddwtbe6],
.explanation-section h3[b-0dpddwtbe6],
.source-section h3[b-0dpddwtbe6],
.prompt-section h3[b-0dpddwtbe6],
.tags-section h3[b-0dpddwtbe6],
.lessons-section h3[b-0dpddwtbe6] {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.options-list[b-0dpddwtbe6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-item[b-0dpddwtbe6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: all 0.15s;
}

.option-item.correct[b-0dpddwtbe6] {
    background: #f0fdf4;
    border-color: #86efac;
}

.option-marker[b-0dpddwtbe6] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    background: #e5e7eb;
    color: #666;
}

.option-marker.correct[b-0dpddwtbe6] {
    background: #16a34a;
    color: white;
}

.option-text[b-0dpddwtbe6] {
    font-size: 14px;
    color: #1a1a1a;
}

/* Explanation Section */
.explanation-section[b-0dpddwtbe6] {
    margin-bottom: 24px;
    padding: 16px;
    background: #f0f9ff;
    border-radius: 8px;
    border-left: 4px solid #0ea5e9;
}

.explanation-text[b-0dpddwtbe6] {
    margin: 0;
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.6;
}

.source-section[b-0dpddwtbe6],
.prompt-section[b-0dpddwtbe6] {
    margin-bottom: 24px;
}

.source-section[b-0dpddwtbe6] {
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.source-meta[b-0dpddwtbe6] {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
}

.source-actions[b-0dpddwtbe6] {
    margin-bottom: 12px;
}

.source-reference[b-0dpddwtbe6] {
    margin: 0;
    padding-left: 16px;
    border-left: 4px solid #94a3b8;
    color: #1e293b;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.prompt-hint[b-0dpddwtbe6] {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #64748b;
}

.prompt-content[b-0dpddwtbe6] {
    margin: 0;
    padding: 16px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
}

/* Tags Section */
.tags-section[b-0dpddwtbe6] {
    margin-bottom: 24px;
}

.tags-list[b-0dpddwtbe6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag[b-0dpddwtbe6] {
    padding: 4px 12px;
    background: #f5f5f5;
    border-radius: 16px;
    font-size: 12px;
    color: #666;
    border: 1px solid #e5e5e5;
}

/* Lessons Section */
.lessons-section[b-0dpddwtbe6] {
    margin-bottom: 0;
}

.lessons-list[b-0dpddwtbe6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lesson-badge[b-0dpddwtbe6] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f3e8ff;
    border-radius: 16px;
    font-size: 12px;
    color: #7c3aed;
    font-weight: 500;
}

/* Statistics Card */
.statistics-card[b-0dpddwtbe6] {
    grid-column: 2;
    grid-row: 1;
}

.statistics-list[b-0dpddwtbe6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stat-item[b-0dpddwtbe6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-header[b-0dpddwtbe6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-option[b-0dpddwtbe6] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1a1a1a;
}

.stat-option.correct[b-0dpddwtbe6] {
    color: #16a34a;
    font-weight: 500;
}

.stat-value[b-0dpddwtbe6] {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.stat-bar-container[b-0dpddwtbe6] {
    width: 100%;
    height: 8px;
    background: #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
}

.stat-bar[b-0dpddwtbe6] {
    height: 100%;
    background: #9ca3af;
    border-radius: 4px;
    transition: width 0.3s;
}

.stat-bar.correct[b-0dpddwtbe6] {
    background: #16a34a;
}

.stat-count[b-0dpddwtbe6] {
    font-size: 12px;
    color: #888;
}

.empty-stats[b-0dpddwtbe6],
.empty-answers[b-0dpddwtbe6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    color: #666;
}

.empty-stats p[b-0dpddwtbe6],
.empty-answers p[b-0dpddwtbe6] {
    margin: 12px 0 0 0;
    font-size: 14px;
}

/* Recent Answers Card */
.recent-answers-card[b-0dpddwtbe6] {
    grid-column: 2;
    grid-row: 2;
}

.answer-count[b-0dpddwtbe6] {
    font-size: 13px;
    color: #888;
}

.answers-list[b-0dpddwtbe6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.answer-item[b-0dpddwtbe6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
}

.answer-result[b-0dpddwtbe6] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.answer-result.correct[b-0dpddwtbe6] {
    background: #dcfce7;
    color: #16a34a;
}

.answer-result.incorrect[b-0dpddwtbe6] {
    background: #fee2e2;
    color: #dc2626;
}

.answer-info[b-0dpddwtbe6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.student-name[b-0dpddwtbe6] {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

.group-name[b-0dpddwtbe6] {
    font-size: 12px;
    color: #666;
}

.answer-time[b-0dpddwtbe6] {
    font-size: 12px;
    color: #888;
}

/* /Components/Pages/Portal/Questions.razor.rz.scp.css */
.question-search[b-tqkul9ig8m] {
    width: 250px;
}

.category-filter[b-tqkul9ig8m] {
    min-width: 160px;
}

.status-filter[b-tqkul9ig8m] {
    min-width: 120px;
}

/* Tag Filter Panel */
.tag-filter-panel[b-tqkul9ig8m] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
}

.tag-filter-header[b-tqkul9ig8m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.tag-filter-header h4[b-tqkul9ig8m] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tag-chips[b-tqkul9ig8m] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-chip[b-tqkul9ig8m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tag-chip:hover[b-tqkul9ig8m] {
    background: #e5e7eb;
    border-color: #d1d5db;
    transform: translateY(-1px);
}

.tag-chip.selected[b-tqkul9ig8m] {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
}

.tag-chip.selected:hover[b-tqkul9ig8m] {
    background: #1d4ed8;
    border-color: #1d4ed8;
}



/* Card View */
.questions-grid[b-tqkul9ig8m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.question-card[b-tqkul9ig8m] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow 0.15s, transform 0.15s;
}

.question-icon[b-tqkul9ig8m] {
    width: 68px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.question-icon-table[b-tqkul9ig8m] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 18px;
}

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

.card-header[b-tqkul9ig8m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-body[b-tqkul9ig8m] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.question-text[b-tqkul9ig8m] {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.5;
    transition: color 0.15s;
}

.question-text:hover[b-tqkul9ig8m] {
    color: var(--brand-primary);
}

/* Card view thumbnail */
.card-thumbnail[b-tqkul9ig8m] {
    width: 100%;
    height: 80px;
    overflow: hidden;
}

.card-thumbnail img[b-tqkul9ig8m] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-thumbnail-placeholder[b-tqkul9ig8m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

.no-image-text[b-tqkul9ig8m] {
    margin-top: 8px;
    font-size: 12px;
    color: #9ca3af;
}

.category-badge[b-tqkul9ig8m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #0369a1;
    width: fit-content;
}

.category-badge fluent-icon[b-tqkul9ig8m] {
    font-size: 14px;
}

.tags-container[b-tqkul9ig8m] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag[b-tqkul9ig8m] {
    padding: 4px 10px;
    background: #f5f5f5;
    border-radius: 16px;
    font-size: 12px;
    color: #666;
    border: 1px solid #e5e5e5;
}

.card-footer[b-tqkul9ig8m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.correct-rate[b-tqkul9ig8m] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
}

.rate-label[b-tqkul9ig8m] {
    font-weight: 400;
    color: #666;
}

.answer-count[b-tqkul9ig8m] {
    font-size: 13px;
    color: #888;
}

/* List View Table */
.questions-table-container[b-tqkul9ig8m] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}



/* Table Columns */
.col-question[b-tqkul9ig8m] {
    display: flex;
    align-items: flex-start;
}

.question-info[b-tqkul9ig8m] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

/* List view thumbnail */
.list-thumbnail[b-tqkul9ig8m] {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

.list-thumbnail-placeholder[b-tqkul9ig8m] {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

.question-link[b-tqkul9ig8m] {
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.15s;
    line-height: 1.4;
}

.question-link:hover[b-tqkul9ig8m] {
    color: var(--brand-primary);
}

.tags-container-inline[b-tqkul9ig8m] {
    display: flex;
    gap: 6px;
}

.tag-small[b-tqkul9ig8m] {
    padding: 2px 8px;
    background: #f5f5f5;
    border-radius: 12px;
    font-size: 11px;
    color: #666;
    border: 1px solid #e5e5e5;
}

.col-category[b-tqkul9ig8m] {
    color: #666;
    font-size: 14px;
}

.col-status[b-tqkul9ig8m] {
    display: flex;
    align-items: center;
}

.col-correct[b-tqkul9ig8m] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 14px;
}

.col-answers[b-tqkul9ig8m] {
    color: #666;
    font-size: 14px;
}

.col-actions[b-tqkul9ig8m] {
    display: flex;
    justify-content: flex-end;
}

/* Status Badges */
.status-badge[b-tqkul9ig8m] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-active[b-tqkul9ig8m] {
    background: #dcfce7;
    color: #16a34a;
}

.status-draft[b-tqkul9ig8m] {
    background: #fef3c7;
    color: #d97706;
}

.status-generated[b-tqkul9ig8m] {
    background: #dbeafe;
    color: #2563eb;
}

.status-archived[b-tqkul9ig8m] {
    background: #f3f4f6;
    color: #6b7280;
}

.status-default[b-tqkul9ig8m] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Correct Rate Colors */
.rate-high[b-tqkul9ig8m] {
    color: #16a34a;
}

.rate-medium[b-tqkul9ig8m] {
    color: #d97706;
}

.rate-low[b-tqkul9ig8m] {
    color: #dc2626;
}

/* Loading & Empty States */
.loading-container[b-tqkul9ig8m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.empty-state[b-tqkul9ig8m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.empty-state h3[b-tqkul9ig8m] {
    margin: 16px 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.empty-state p[b-tqkul9ig8m] {
    margin: 0 0 24px 0;
    font-size: 14px;
}

/* Dialog Overlay */
.dialog-overlay[b-tqkul9ig8m] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

/* Create Question Dialog */
.create-question-dialog[b-tqkul9ig8m] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
}


.form-group[b-tqkul9ig8m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}



.form-input[b-tqkul9ig8m] {
    width: 100%;
}

.dialog-footer[b-tqkul9ig8m] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 24px 24px;
    border-top: 1px solid #eee;
}
/* /Components/Pages/Portal/Reports.razor.rz.scp.css */
/* Reports Page Styles */
/* Shared tab styles are in wwwroot/css/SharedTabs.css (loaded globally in App.razor) */

.period-filter[b-dkx3eg2jlf] {
    min-width: 140px;
}

.group-filter[b-dkx3eg2jlf] {
    min-width: 140px;
}

/* Loading */
.loading-container[b-dkx3eg2jlf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Overview Tab */
.overview-tab[b-dkx3eg2jlf] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Chart Cards */
.chart-card[b-dkx3eg2jlf],
.table-card[b-dkx3eg2jlf] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-header[b-dkx3eg2jlf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.card-header h2[b-dkx3eg2jlf] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.record-count[b-dkx3eg2jlf] {
    font-size: 13px;
    color: #888;
}

.card-body[b-dkx3eg2jlf] {
    padding: 24px;
}

.chart-body[b-dkx3eg2jlf] {
    min-height: 300px;
}

.empty-chart[b-dkx3eg2jlf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: #666;
}

.empty-chart p[b-dkx3eg2jlf] {
    margin: 12px 0 0 0;
    font-size: 14px;
}

/* Table Styles */
.table-header[b-dkx3eg2jlf] {
    display: grid;
    padding: 12px 16px;
    background: #fafafa;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.table-row[b-dkx3eg2jlf] {
    display: grid;
    padding: 16px;
    border-bottom: 1px solid #f5f5f5;
    align-items: center;
    transition: background-color 0.15s;
}

.table-row:hover[b-dkx3eg2jlf] {
    background-color: #fafafa;
}

.table-row:last-child[b-dkx3eg2jlf] {
    border-bottom: none;
}

/* Questions Tab Table */
.questions-tab .table-header[b-dkx3eg2jlf],
.questions-tab .table-row[b-dkx3eg2jlf] {
    grid-template-columns: 3fr 1.5fr 1fr 1fr 1fr;
}

/* Students Tab Table */
.students-tab .table-header[b-dkx3eg2jlf],
.students-tab .table-row[b-dkx3eg2jlf] {
    grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr 1fr 1.5fr;
}

/* Column Styles */
.col-question[b-dkx3eg2jlf],
.col-student[b-dkx3eg2jlf] {
    font-weight: 500;
}

.question-link[b-dkx3eg2jlf],
.student-link[b-dkx3eg2jlf] {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.15s;
}

.question-link:hover[b-dkx3eg2jlf],
.student-link:hover[b-dkx3eg2jlf] {
    color: var(--brand-primary);
}

.col-category[b-dkx3eg2jlf],
.col-group[b-dkx3eg2jlf] {
    color: #666;
    font-size: 14px;
}

.col-answers[b-dkx3eg2jlf],
.col-correct[b-dkx3eg2jlf],
.col-rate[b-dkx3eg2jlf],
.col-streak[b-dkx3eg2jlf],
.col-activity[b-dkx3eg2jlf],
.col-difficulty[b-dkx3eg2jlf] {
    font-size: 14px;
}

/* Percentage Colors */
.percentage[b-dkx3eg2jlf] {
    font-weight: 600;
}

.rate-high[b-dkx3eg2jlf] {
    color: #16a34a;
}

.rate-medium[b-dkx3eg2jlf] {
    color: #d97706;
}

.rate-low[b-dkx3eg2jlf] {
    color: #dc2626;
}

/* Difficulty Badges */
.difficulty-badge[b-dkx3eg2jlf] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.difficulty-easy[b-dkx3eg2jlf] {
    background: #dcfce7;
    color: #16a34a;
}

.difficulty-medium[b-dkx3eg2jlf] {
    background: #fef3c7;
    color: #d97706;
}

.difficulty-hard[b-dkx3eg2jlf] {
    background: #fee2e2;
    color: #dc2626;
}

.difficulty-unknown[b-dkx3eg2jlf] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Streak Badge */
.streak-badge[b-dkx3eg2jlf] {
    font-weight: 500;
    color: #d97706;
}

.no-streak[b-dkx3eg2jlf] {
    color: #ccc;
}

/* Empty State */
.empty-state[b-dkx3eg2jlf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    color: #666;
}

.empty-state p[b-dkx3eg2jlf] {
    margin: 16px 0 0 0;
    font-size: 14px;
}

/* Dialog Header and Body */
.dialog-header[b-dkx3eg2jlf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.dialog-title h2[b-dkx3eg2jlf] {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.dialog-subtitle[b-dkx3eg2jlf] {
    margin: 0;
    font-size: 13px;
    color: #888;
}

.dialog-body[b-dkx3eg2jlf] {
    padding: 20px 24px 24px 24px;
}

.close-button[b-dkx3eg2jlf] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    border-radius: 6px;
    transition: background 0.15s;
    flex-shrink: 0;
}

.close-button:hover[b-dkx3eg2jlf] {
    background: #f3f4f6;
    color: #333;
}

/* Export Dialog Overlay */
.dialog-overlay[b-dkx3eg2jlf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

/* Export Dialog */
.export-dialog[b-dkx3eg2jlf] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}



/* Export Options */
.export-options[b-dkx3eg2jlf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.export-option[b-dkx3eg2jlf] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.export-option:hover[b-dkx3eg2jlf] {
    background: #f9fafb;
    border-color: #d1d5db;
}

.export-icon[b-dkx3eg2jlf] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fee2e2;
    border-radius: 10px;
}

.export-info[b-dkx3eg2jlf] {
    flex: 1;
}

.export-info h4[b-dkx3eg2jlf] {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.export-info p[b-dkx3eg2jlf] {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

/* Export Progress */
.export-progress[b-dkx3eg2jlf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    margin-top: 16px;
    background: #f9fafb;
    border-radius: 8px;
    color: #666;
    font-size: 14px;
}

/* Export Error */
.export-error[b-dkx3eg2jlf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 14px;
}

/* Disabled export option */
.export-option.disabled[b-dkx3eg2jlf] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* New export option row layout (icon + info left, PDF/CSV buttons right) */
.export-option-row[b-dkx3eg2jlf] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    transition: background 0.15s;
}

.export-option-row:hover[b-dkx3eg2jlf] {
    background: #f9fafb;
}

.export-option-row .export-info[b-dkx3eg2jlf] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.export-option-row .export-info div h4[b-dkx3eg2jlf] {
    margin: 0 0 2px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.export-option-row .export-info div p[b-dkx3eg2jlf] {
    margin: 0;
    font-size: 12px;
    color: #888;
}

.export-buttons[b-dkx3eg2jlf] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Low Performance Tab */
.lowperf-tab .table-header[b-dkx3eg2jlf],
.lowperf-tab .table-row[b-dkx3eg2jlf] {
    grid-template-columns: 3fr 1.5fr 1fr 1fr;
}

/* Threshold slider control */
.threshold-control[b-dkx3eg2jlf] {
    margin-bottom: 20px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

.threshold-label[b-dkx3eg2jlf] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 10px;
}

.threshold-slider-row[b-dkx3eg2jlf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.threshold-slider[b-dkx3eg2jlf] {
    flex: 1;
    height: 4px;
    accent-color: var(--brand-primary, #333);
    cursor: pointer;
}

.threshold-min[b-dkx3eg2jlf],
.threshold-max[b-dkx3eg2jlf] {
    font-size: 12px;
    color: #888;
    min-width: 30px;
    text-align: center;
}

/* Sortable table headers */
.table-header.sortable .sort-col[b-dkx3eg2jlf] {
    cursor: pointer;
    user-select: none;
}

.table-header.sortable .sort-col:hover[b-dkx3eg2jlf] {
    color: #444;
}

/* Error container */
.error-container[b-dkx3eg2jlf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.error-container p[b-dkx3eg2jlf] {
    margin: 0;
    font-size: 14px;
    color: #666;
}
/* /Components/Pages/Portal/Schedules.razor.rz.scp.css */
.group-filter[b-gbizdxe7mr] {
    min-width: 160px;
}

.view-toggle[b-gbizdxe7mr] {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f5f5f5;
    border-radius: 8px;
}

/* Calendar Container */
.calendar-container[b-gbizdxe7mr] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 24px;
}

/* Week Navigation */
.week-navigation[b-gbizdxe7mr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.nav-button[b-gbizdxe7mr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e5e5;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    color: #666;
    transition: all 0.15s;
}

.nav-button:hover[b-gbizdxe7mr] {
    background: #f5f5f5;
    color: #1a1a1a;
    border-color: #ccc;
}

.week-title[b-gbizdxe7mr] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

/* Week Grid */
.week-grid[b-gbizdxe7mr] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}

.day-column[b-gbizdxe7mr] {
    display: flex;
    flex-direction: column;
    min-height: 300px;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
}

.day-column.today[b-gbizdxe7mr] {
    border-color: #2563eb;
    background: #f0f7ff;
}

.day-header[b-gbizdxe7mr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid #e5e5e5;
}

.day-column.today .day-header[b-gbizdxe7mr] {
    border-bottom-color: #bfdbfe;
}

.day-name[b-gbizdxe7mr] {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.day-column.today .day-name[b-gbizdxe7mr] {
    color: #2563eb;
}

.day-number[b-gbizdxe7mr] {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin-top: 4px;
}

.day-column.today .day-number[b-gbizdxe7mr] {
    color: #2563eb;
}

.day-content[b-gbizdxe7mr] {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Schedule Card in Calendar */
.schedule-card[b-gbizdxe7mr] {
    position: relative;
    padding: 8px 10px;
    background: white;
    border-radius: 8px;
    border-left: 3px solid #2563eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.15s;
}

.schedule-card:hover[b-gbizdxe7mr] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.schedule-delete-btn[b-gbizdxe7mr] {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 24px;
    min-height: 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: white;
    cursor: pointer;
    opacity: 1;
    transition: background-color 0.15s;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.schedule-delete-btn:hover[b-gbizdxe7mr] {
    background: #fee2e2;
    color: #dc2626;
}

.schedule-card.status-completed[b-gbizdxe7mr] {
    border-left-color: #16a34a;
    opacity: 0.7;
}

.schedule-card.status-cancelled[b-gbizdxe7mr] {
    border-left-color: #dc2626;
    opacity: 0.6;
}

.schedule-question[b-gbizdxe7mr] {
    font-size: 12px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.4;
    margin-bottom: 4px;
}

.schedule-group[b-gbizdxe7mr] {
    font-size: 11px;
    color: #666;
}

.schedule-thumbnail[b-gbizdxe7mr] {
    width: 100%;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    margin-bottom: 4px;
}

/* Add Schedule Button */
.add-schedule-button[b-gbizdxe7mr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px;
    border: 1px dashed #ccc;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #888;
    transition: all 0.15s;
    margin-top: auto;
}

.add-schedule-button:hover[b-gbizdxe7mr] {
    border-color: #2563eb;
    color: #2563eb;
    background: #f0f7ff;
}

/* List View */
.list-container[b-gbizdxe7mr] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}


.date-display[b-gbizdxe7mr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-day[b-gbizdxe7mr] {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
}

.date-full[b-gbizdxe7mr] {
    font-size: 14px;
    color: #1a1a1a;
}

.col-question[b-gbizdxe7mr] {
    display: flex;
    align-items: center;
}

.question-link[b-gbizdxe7mr] {
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.15s;
}

.question-link:hover[b-gbizdxe7mr] {
    color: var(--brand-primary);
}

.question-info[b-gbizdxe7mr] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.list-thumbnail[b-gbizdxe7mr] {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

.col-group[b-gbizdxe7mr] {
    display: flex;
    align-items: center;
}

.group-link[b-gbizdxe7mr] {
    color: #2563eb;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s;
}

.group-link:hover[b-gbizdxe7mr] {
    color: #1d4ed8;
}

.all-groups[b-gbizdxe7mr] {
    color: #666;
    font-style: italic;
    font-size: 14px;
}

.col-status[b-gbizdxe7mr] {
    display: flex;
    align-items: center;
}

.col-actions[b-gbizdxe7mr] {
    display: flex;
    justify-content: flex-end;
}

/* Status Badges */
.status-badge[b-gbizdxe7mr] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-scheduled[b-gbizdxe7mr] {
    background: #dbeafe;
    color: #2563eb;
}

.status-completed[b-gbizdxe7mr] {
    background: #dcfce7;
    color: #16a34a;
}

.status-cancelled[b-gbizdxe7mr] {
    background: #fee2e2;
    color: #dc2626;
}

.status-default[b-gbizdxe7mr] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Loading & Empty States */
.loading-container[b-gbizdxe7mr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.empty-state[b-gbizdxe7mr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    color: #666;
}

.empty-state h3[b-gbizdxe7mr] {
    margin: 16px 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.empty-state p[b-gbizdxe7mr] {
    margin: 0 0 24px 0;
    font-size: 14px;
}


/* /Components/Pages/Portal/StudentCalendar.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   CALENDAR CONTAINER
═══════════════════════════════════════════════════════════ */
.cal-container[b-f1nbrjsatw] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    font-family: inherit;
}

.cal-container.is-embedded[b-f1nbrjsatw] {
    height: 700px;
    border: 1px solid #e5e7eb;
}

.cal-container.is-full-page[b-f1nbrjsatw] {
    height: calc(100vh - 120px);
    border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════
   TOOLBAR
═══════════════════════════════════════════════════════════ */
.cal-toolbar[b-f1nbrjsatw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}

.cal-toolbar-left[b-f1nbrjsatw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cal-toolbar-right[b-f1nbrjsatw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* View switcher */
.view-switcher[b-f1nbrjsatw] {
    display: flex;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
}

.view-btn[b-f1nbrjsatw] {
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    background: #fff;
    cursor: pointer;
    color: #374151;
    transition: background 0.15s, color 0.15s;
}

.view-btn:not(:last-child)[b-f1nbrjsatw] {
    border-right: 1px solid #d1d5db;
}

.view-btn.active[b-f1nbrjsatw] {
    background: #3b82f6;
    color: #fff;
}

.view-btn:hover:not(.active)[b-f1nbrjsatw] {
    background: #f3f4f6;
}

/* Nav buttons */
.nav-btn[b-f1nbrjsatw] {
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s, border-color 0.15s;
}

.nav-btn:hover[b-f1nbrjsatw] {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.today-btn[b-f1nbrjsatw] {
    font-weight: 600;
}

.nav-arrows[b-f1nbrjsatw] {
    display: flex;
    gap: 2px;
}

.arrow-btn[b-f1nbrjsatw] {
    padding: 5px 8px;
}

.expand-btn[b-f1nbrjsatw] {
    color: #6b7280;
    font-size: 12px;
}

/* Period label */
.cal-period-label[b-f1nbrjsatw] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-left: 4px;
}

/* Loading */
.cal-loading[b-f1nbrjsatw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px;
    color: #6b7280;
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════
   EVENT TYPE COLORS
═══════════════════════════════════════════════════════════ */
:root[b-f1nbrjsatw] {
    --type-theory-bg: #dbeafe;
    --type-theory-border: #3b82f6;
    --type-theory-text: #1d4ed8;
    --type-driving-bg: #d1fae5;
    --type-driving-border: #10b981;
    --type-driving-text: #065f46;
    --type-test-bg: #fef3c7;
    --type-test-border: #f59e0b;
    --type-test-text: #92400e;
    --type-firstaid-bg: #fce7f3;
    --type-firstaid-border: #ec4899;
    --type-firstaid-text: #9d174d;
    --error: #ef4444;
}

/* ═══════════════════════════════════════════════════════════
   MONTH VIEW
═══════════════════════════════════════════════════════════ */
.month-view[b-f1nbrjsatw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.month-day-names[b-f1nbrjsatw] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

.month-day-name[b-f1nbrjsatw] {
    padding: 8px 0;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.month-grid[b-f1nbrjsatw] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1;
    overflow-y: auto;
    border-left: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
}

.month-cell[b-f1nbrjsatw] {
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 4px 6px;
    min-height: 90px;
    position: relative;
    cursor: default;
    transition: background 0.1s;
}

.month-cell:hover[b-f1nbrjsatw] {
    background: #f9fafb;
}

.month-cell.other-month[b-f1nbrjsatw] {
    background: #fafafa;
}

.month-cell.other-month .day-number[b-f1nbrjsatw] {
    color: #d1d5db;
}

.month-cell.is-today[b-f1nbrjsatw] {
    background: #eff6ff;
}

/* Drop target for month view */
.month-cell.drag-over-day[b-f1nbrjsatw] {
    background: #dbeafe !important;
    border: 2px dashed #3b82f6 !important;
    box-shadow: inset 0 0 0 2px #bfdbfe;
}

.month-drop-indicator[b-f1nbrjsatw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    color: #3b82f6;
    font-size: 12px;
    font-weight: 600;
    height: 60px;
}

.month-cell-header[b-f1nbrjsatw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.day-number[b-f1nbrjsatw] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.today-number[b-f1nbrjsatw] {
    background: #3b82f6;
    color: #fff !important;
    font-weight: 700;
}

.month-event-pill[b-f1nbrjsatw] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    margin-bottom: 2px;
    cursor: pointer;
    border-left: 3px solid;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.15s;
}

.month-event-pill:hover[b-f1nbrjsatw] {
    opacity: 0.85;
}

.month-event-pill.type-theory[b-f1nbrjsatw]  { background: var(--type-theory-bg);  border-color: var(--type-theory-border);  color: var(--type-theory-text); }
.month-event-pill.type-driving[b-f1nbrjsatw] { background: var(--type-driving-bg); border-color: var(--type-driving-border); color: var(--type-driving-text); }
.month-event-pill.type-test[b-f1nbrjsatw]    { background: var(--type-test-bg);    border-color: var(--type-test-border);    color: var(--type-test-text); }
.month-event-pill.type-firstaid[b-f1nbrjsatw]{ background: var(--type-firstaid-bg);border-color: var(--type-firstaid-border);color: var(--type-firstaid-text); }

.pill-time[b-f1nbrjsatw] { font-weight: 700; flex-shrink: 0; }
.pill-title[b-f1nbrjsatw] { overflow: hidden; text-overflow: ellipsis; }

.month-event-more[b-f1nbrjsatw] {
    font-size: 11px;
    color: #6b7280;
    padding: 2px 6px;
    cursor: pointer;
}

.month-cell-add-btn[b-f1nbrjsatw] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    color: #9ca3af;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.month-cell:hover .month-cell-add-btn[b-f1nbrjsatw] {
    opacity: 1;
}

.month-cell-add-btn:hover[b-f1nbrjsatw] {
    color: #3b82f6;
    background: #eff6ff;
}

/* ═══════════════════════════════════════════════════════════
   WEEK & DAY SHARED — TIME GUTTER + SLOTS
═══════════════════════════════════════════════════════════ */
.week-view[b-f1nbrjsatw], .day-view[b-f1nbrjsatw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* Header rows */
.week-header[b-f1nbrjsatw] {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    border-bottom: 2px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

.day-header-bar[b-f1nbrjsatw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 2px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

.time-gutter-header[b-f1nbrjsatw] {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    padding: 8px 4px;
    border-right: 1px solid #e5e7eb;
    box-sizing: border-box;
}

.week-day-header[b-f1nbrjsatw] {
    padding: 8px 4px;
    text-align: center;
    border-right: 1px solid #e5e7eb;
    cursor: default;
    box-sizing: border-box;
}

.week-day-header.is-today-header[b-f1nbrjsatw] {
    background: #eff6ff;
}

.day-header-bar.is-today-header[b-f1nbrjsatw] {
    background: #eff6ff;
}

.week-day-name[b-f1nbrjsatw] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.week-day-number[b-f1nbrjsatw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    border-radius: 50%;
    margin-top: 2px;
}

.day-full-name[b-f1nbrjsatw] {
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.day-full-number[b-f1nbrjsatw] {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}

.day-month-year[b-f1nbrjsatw] {
    font-size: 16px;
    color: #374151;
}

.today-circle[b-f1nbrjsatw] {
    background: #3b82f6;
    color: #fff !important;
}

.is-today-col[b-f1nbrjsatw] {
    background: #fafbff;
}

/* Scrollable body */
.week-body[b-f1nbrjsatw], .day-body[b-f1nbrjsatw] {
    display: flex;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.time-gutter[b-f1nbrjsatw] {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    flex-shrink: 0;
    border-right: 1px solid #e5e7eb;
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 5;
    box-sizing: border-box;
}

.time-label[b-f1nbrjsatw] {
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
    padding-right: 8px;
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
    justify-content: flex-end;
    box-sizing: border-box;
    margin-top: -8px; /* visually align label with the grid line */
}

.time-label-half[b-f1nbrjsatw] {
    border-top: 1px dashed #f0f0f0;
}

/* ═══════════════════════════════════════════════════════════
   WEEK VIEW — DAY COLUMNS
═══════════════════════════════════════════════════════════ */
.week-day-col[b-f1nbrjsatw] {
    flex: 1;
    position: relative;
    border-right: 1px solid #e5e7eb;
    box-sizing: border-box;
    cursor: pointer;
    min-width: 0;
}

/* Time slots */
.time-slot[b-f1nbrjsatw] {
    border-top: 1px solid transparent;
    box-sizing: border-box;
    position: relative;
    transition: background 0.1s;
}

.time-slot.hour-start[b-f1nbrjsatw] {
    border-top-color: #e5e7eb;
}

.time-slot.half-hour[b-f1nbrjsatw] {
    border-top-color: #f5f5f5;
}

.time-slot:hover[b-f1nbrjsatw] {
    background: rgba(59, 130, 246, 0.04);
}

/* Drop indicator — week view: shows only the time */
.time-slot.drag-over-slot[b-f1nbrjsatw] {
    background: rgba(59, 130, 246, 0.12) !important;
    border-top: 2px solid #3b82f6 !important;
    z-index: 10;
}

.week-drop-indicator[b-f1nbrjsatw] {
    position: absolute;
    top: 1px;
    left: 4px;
    background: #3b82f6;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    pointer-events: none;
    z-index: 20;
    box-shadow: 0 1px 4px rgba(59,130,246,0.4);
}

/* Drop indicator — day view: shows full date + time */
.day-drop-indicator[b-f1nbrjsatw] {
    position: absolute;
    top: 1px;
    left: 4px;
    right: 4px;
    background: #3b82f6;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(59,130,246,0.35);
}

/* ═══════════════════════════════════════════════════════════
   EVENT CARDS — WEEK VIEW
═══════════════════════════════════════════════════════════ */
.week-event-card[b-f1nbrjsatw] {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 11px;
    cursor: grab;
    z-index: 10;
    border-left: 3px solid;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.15s, opacity 0.15s;
    user-select: none;
}

.week-event-card:hover[b-f1nbrjsatw] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 15;
}

.week-event-card:active[b-f1nbrjsatw] {
    cursor: grabbing;
    opacity: 0.75;
}

.week-event-card.type-theory[b-f1nbrjsatw]  { background: var(--type-theory-bg);  border-color: var(--type-theory-border);  color: var(--type-theory-text); }
.week-event-card.type-driving[b-f1nbrjsatw] { background: var(--type-driving-bg); border-color: var(--type-driving-border); color: var(--type-driving-text); }
.week-event-card.type-test[b-f1nbrjsatw]    { background: var(--type-test-bg);    border-color: var(--type-test-border);    color: var(--type-test-text); }
.week-event-card.type-firstaid[b-f1nbrjsatw]{ background: var(--type-firstaid-bg);border-color: var(--type-firstaid-border);color: var(--type-firstaid-text); }

.week-event-card.status-done[b-f1nbrjsatw]      { opacity: 0.65; text-decoration: line-through; }
.week-event-card.status-cancelled[b-f1nbrjsatw] { opacity: 0.4; filter: grayscale(0.6); }

.event-time[b-f1nbrjsatw] {
    font-weight: 700;
    font-size: 10px;
    line-height: 1.2;
}

.event-title[b-f1nbrjsatw] {
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-instructor[b-f1nbrjsatw], .event-location[b-f1nbrjsatw] {
    font-size: 10px;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════
   EVENT CARDS — DAY VIEW
═══════════════════════════════════════════════════════════ */
.day-col[b-f1nbrjsatw] {
    flex: 1;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
}

.day-event-card[b-f1nbrjsatw] {
    position: absolute;
    left: 6px;
    right: 6px;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: grab;
    z-index: 10;
    border-left: 4px solid;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.15s;
    user-select: none;
    overflow: hidden;
}

.day-event-card:hover[b-f1nbrjsatw] {
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    z-index: 15;
}

.day-event-card:active[b-f1nbrjsatw] {
    cursor: grabbing;
    opacity: 0.75;
}

.day-event-card.type-theory[b-f1nbrjsatw]  { background: var(--type-theory-bg);  border-color: var(--type-theory-border);  color: var(--type-theory-text); }
.day-event-card.type-driving[b-f1nbrjsatw] { background: var(--type-driving-bg); border-color: var(--type-driving-border); color: var(--type-driving-text); }
.day-event-card.type-test[b-f1nbrjsatw]    { background: var(--type-test-bg);    border-color: var(--type-test-border);    color: var(--type-test-text); }
.day-event-card.type-firstaid[b-f1nbrjsatw]{ background: var(--type-firstaid-bg);border-color: var(--type-firstaid-border);color: var(--type-firstaid-text); }

.day-event-card.status-done[b-f1nbrjsatw]      { opacity: 0.65; }
.day-event-card.status-cancelled[b-f1nbrjsatw] { opacity: 0.4; filter: grayscale(0.6); }

.event-type-badge[b-f1nbrjsatw] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
    margin-bottom: 2px;
}

.day-event-card .event-title[b-f1nbrjsatw] {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.day-event-card .event-time[b-f1nbrjsatw] {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
}

.day-event-card .event-instructor[b-f1nbrjsatw],
.day-event-card .event-location[b-f1nbrjsatw] {
    font-size: 12px;
    margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════
   DIALOG
═══════════════════════════════════════════════════════════ */
.cal-dialog-backdrop[b-f1nbrjsatw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cal-dialog[b-f1nbrjsatw] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    width: 480px;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.cal-dialog-header[b-f1nbrjsatw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #e5e7eb;
}

.cal-dialog-header h2[b-f1nbrjsatw] {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.cal-dialog-close[b-f1nbrjsatw] {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: background 0.15s;
}

.cal-dialog-close:hover[b-f1nbrjsatw] {
    background: #f3f4f6;
    color: #111827;
}

.cal-dialog-body[b-f1nbrjsatw] {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cal-dialog-footer[b-f1nbrjsatw] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px 18px;
    border-top: 1px solid #e5e7eb;
}

/* Form fields */
.form-field[b-f1nbrjsatw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-f1nbrjsatw] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.form-row[b-f1nbrjsatw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Type selector */
.type-selector[b-f1nbrjsatw] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.type-btn[b-f1nbrjsatw] {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    opacity: 0.7;
}

.type-btn.type-theory[b-f1nbrjsatw]   { background: var(--type-theory-bg);  color: var(--type-theory-text); }
.type-btn.type-driving[b-f1nbrjsatw]  { background: var(--type-driving-bg); color: var(--type-driving-text); }
.type-btn.type-test[b-f1nbrjsatw]     { background: var(--type-test-bg);    color: var(--type-test-text); }
.type-btn.type-firstaid[b-f1nbrjsatw] { background: var(--type-firstaid-bg);color: var(--type-firstaid-text); }

.type-btn.type-theory.selected[b-f1nbrjsatw]   { border-color: var(--type-theory-border);  opacity: 1; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
.type-btn.type-driving.selected[b-f1nbrjsatw]  { border-color: var(--type-driving-border); opacity: 1; box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
.type-btn.type-test.selected[b-f1nbrjsatw]     { border-color: var(--type-test-border);    opacity: 1; box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }
.type-btn.type-firstaid.selected[b-f1nbrjsatw] { border-color: var(--type-firstaid-border);opacity: 1; box-shadow: 0 0 0 3px rgba(236,72,153,0.2); }

.type-btn:not(.selected):hover[b-f1nbrjsatw] { opacity: 1; }

/* Delete confirm */
.delete-confirm[b-f1nbrjsatw] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}

.delete-confirm span[b-f1nbrjsatw] {
    font-size: 13px;
    font-weight: 600;
    color: var(--error);
}

/* ═══════════════════════════════════════════════════════════
   DRAG & DROP — PASSIVE / SOURCE STATES
   During a drag, all event cards become pointer-events:none
   so that the time-slot drop zones BEHIND them receive the
   drag events (dragover, drop). Without this, cards with
   z-index:10 silently absorb the events and block drops,
   causing the lesson to appear at both the old and new
   position ("copy" instead of "move").
═══════════════════════════════════════════════════════════ */
.week-event-card.dnd-passive[b-f1nbrjsatw],
.day-event-card.dnd-passive[b-f1nbrjsatw],
.month-event-pill.dnd-passive[b-f1nbrjsatw] {
    pointer-events: none;
}

/* The card being dragged: show a ghost outline at its
   original position so the user knows where it came from. */
.week-event-card.dnd-source[b-f1nbrjsatw],
.day-event-card.dnd-source[b-f1nbrjsatw],
.month-event-pill.dnd-source[b-f1nbrjsatw] {
    opacity: 0.25 !important;
    filter: grayscale(0.4);
    border-style: dashed !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════
   LEGEND (optional future use)
═══════════════════════════════════════════════════════════ */
.cal-legend[b-f1nbrjsatw] {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

.legend-item[b-f1nbrjsatw] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #374151;
}

.legend-dot[b-f1nbrjsatw] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.type-theory[b-f1nbrjsatw]   { background: var(--type-theory-border); }
.legend-dot.type-driving[b-f1nbrjsatw]  { background: var(--type-driving-border); }
.legend-dot.type-test[b-f1nbrjsatw]     { background: var(--type-test-border); }
.legend-dot.type-firstaid[b-f1nbrjsatw] { background: var(--type-firstaid-border); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cal-toolbar[b-f1nbrjsatw] {
        flex-direction: column;
        align-items: flex-start;
    }

    .cal-toolbar-left[b-f1nbrjsatw], .cal-toolbar-right[b-f1nbrjsatw] {
        width: 100%;
    }

    .cal-period-label[b-f1nbrjsatw] {
        display: none;
    }

    .week-header[b-f1nbrjsatw] {
        grid-template-columns: 48px repeat(7, 1fr);
    }

    .week-day-header[b-f1nbrjsatw] {
        padding: 4px 1px;
    }

    .week-day-name[b-f1nbrjsatw] {
        font-size: 9px;
    }

    .week-day-number[b-f1nbrjsatw] {
        font-size: 13px;
        width: 24px;
        height: 24px;
    }

    .time-gutter[b-f1nbrjsatw] {
        width: 48px;
    }
}
/* /Components/Pages/Portal/StudentDetails.razor.rz.scp.css */
/* StudentDetails Page Styles */
/* Shared tab styles are in wwwroot/css/SharedTabs.css (loaded globally in App.razor) */
/* Shared stat card styles are in wwwroot/css/SharedStats.css (loaded globally in App.razor) */

/* Tab Container */
.student-content[b-6hup0k1rty] {
    display: flex;
    gap: 24px;
    overflow: hidden;
}

.main-content[b-6hup0k1rty] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.loading-container[b-6hup0k1rty] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.not-found[b-6hup0k1rty] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    text-align: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 48px;
}

.not-found h2[b-6hup0k1rty] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

.not-found p[b-6hup0k1rty] {
    margin: 0;
    color: #666;
}



.back-button[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    color: #666;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.15s;
}

.back-button:hover[b-6hup0k1rty] {
    background: #f5f5f5;
    color: #1a1a1a;
}

.student-avatar[b-6hup0k1rty] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e0e7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4f46e5;
}

.header-info[b-6hup0k1rty] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-title-row[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-title-row h1[b-6hup0k1rty] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
}

.header-meta[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.meta-separator[b-6hup0k1rty] {
    color: #ccc;
}

.header-right[b-6hup0k1rty] {
    display: flex;
    gap: 12px;
}

/* Status Badges */
.status-badge[b-6hup0k1rty] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-active[b-6hup0k1rty] {
    background: #dcfce7;
    color: #16a34a;
}

.status-pending[b-6hup0k1rty] {
    background: #fef3c7;
    color: #d97706;
}

.status-inactive[b-6hup0k1rty] {
    background: #f3f4f6;
    color: #6b7280;
}

.status-default[b-6hup0k1rty] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Student Info Header */
.student-info-header[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 32px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.student-avatar[b-6hup0k1rty] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b9ff7 0%, #a68ed4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: 600;
    flex-shrink: 0;
}

.student-header-details[b-6hup0k1rty] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.student-name-row[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-name-row h2[b-6hup0k1rty] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
}

.student-meta-grid[b-6hup0k1rty] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.meta-item[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
}

.meta-item span[b-6hup0k1rty] {
    color: #1a1a1a;
}

/* App Login Styles - Redesigned */
.app-login-section-full[b-6hup0k1rty] {
    width: 100%;
}

.section-header-large[b-6hup0k1rty] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid #e2e8f0;
}

.section-header-large h3[b-6hup0k1rty] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #2d3748;
}

.section-description[b-6hup0k1rty] {
    color: #64748b;
    font-size: 14px;
    margin: 4px 0 0 0;
}

.credentials-display-box[b-6hup0k1rty] {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 32px;
    border: 2px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.credential-section[b-6hup0k1rty] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.credential-section.password-reveal-section[b-6hup0k1rty] {
    background: #fffbeb;
    padding: 24px;
    border-radius: 12px;
    border: 2px solid #fbbf24;
}

.credential-label[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.credential-label.warning[b-6hup0k1rty] {
    color: #f59e0b;
}

.credential-display-large[b-6hup0k1rty] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.credential-id-box[b-6hup0k1rty],
.credential-password-box[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
}

.credential-password-box[b-6hup0k1rty] {
    background: #ffffff;
    border-color: #fbbf24;
}

.credential-id-large[b-6hup0k1rty],
.credential-password-large[b-6hup0k1rty] {
    font-size: 32px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: 3px;
}

.credential-id-large[b-6hup0k1rty] {
    color: #667eea;
}

.credential-password-large[b-6hup0k1rty] {
    color: #f59e0b;
}

.credential-empty-large[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: #fef3c7;
    border-radius: 12px;
    border: 2px dashed #fbbf24;
}

.empty-title[b-6hup0k1rty] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #92400e;
}

.empty-subtitle[b-6hup0k1rty] {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #78350f;
}

.help-text-success[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #16a34a;
    font-weight: 500;
}

.help-text-error[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #dc2626;
    font-weight: 500;
    margin-top: 8px;
}

.warning-banner[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fef3c7;
    border-radius: 6px;
    border: 1px solid #fbbf24;
}

.warning-banner span[b-6hup0k1rty] {
    font-size: 14px;
    color: #92400e;
    font-weight: 600;
}

.status-badge-large[b-6hup0k1rty] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    align-self: flex-start;
}

.status-badge-large.status-active[b-6hup0k1rty] {
    background: #dcfce7;
    color: #16a34a;
    border: 2px solid #bbf7d0;
}

.status-badge-large.status-inactive[b-6hup0k1rty] {
    background: #fee2e2;
    color: #dc2626;
    border: 2px solid #fecaca;
}

.password-management-section[b-6hup0k1rty] {
    margin-top: 24px;
}

.section-title[b-6hup0k1rty] {
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
    margin: 0 0 24px 0;
}

.management-cards[b-6hup0k1rty] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.management-card[b-6hup0k1rty] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
}

.card-icon[b-6hup0k1rty] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
}

.card-content h5[b-6hup0k1rty] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
}

.card-content p[b-6hup0k1rty] {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

.recent-logins-section[b-6hup0k1rty] {
    margin-top: 32px;
}

.login-history[b-6hup0k1rty] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-entry[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}

.login-entry:hover[b-6hup0k1rty] {
    border-color: #cbd5e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.login-icon[b-6hup0k1rty] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.login-details[b-6hup0k1rty] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.login-device[b-6hup0k1rty] {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
}

.login-time[b-6hup0k1rty] {
    font-size: 13px;
    color: #64748b;
}

/* Legacy styles cleanup */
.app-login-section[b-6hup0k1rty] {
    max-width: 800px;
}

.credentials-box[b-6hup0k1rty],
.password-section[b-6hup0k1rty],
.password-fields[b-6hup0k1rty],
.password-actions[b-6hup0k1rty],
.recent-logins[b-6hup0k1rty] {
    /* Deprecated - using new structure above */
}

/* Responsive */
@media (max-width: 768px) {
    .stat-cards[b-6hup0k1rty] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .password-fields[b-6hup0k1rty] {
        grid-template-columns: 1fr;
    }
    
    .password-actions[b-6hup0k1rty] {
        flex-direction: column;
    }
    
    .activity-timeline-item[b-6hup0k1rty] {
        flex-direction: column;
    }
    
    .activity-date[b-6hup0k1rty] {
        min-width: auto;
    }
    
    .student-info-header[b-6hup0k1rty] {
        flex-direction: column;
        text-align: center;
    }
    
    .student-meta-grid[b-6hup0k1rty] {
        grid-template-columns: 1fr;
    }
    
    .management-cards[b-6hup0k1rty] {
        grid-template-columns: 1fr;
    }
    
    .credential-id-large[b-6hup0k1rty],
    .credential-password-large[b-6hup0k1rty] {
        font-size: 24px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .activity-item-clean[b-6hup0k1rty] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .activity-date-clean[b-6hup0k1rty] {
        font-size: 12px;
    }
    
    .activity-score-badge[b-6hup0k1rty] {
        align-self: flex-start;
    }
}

/* Schedule — Calendar wrapper (replaces old list layout) */
.schedule-calendar-wrapper[b-6hup0k1rty] {
    padding: 0;
    margin: -24px -32px; /* bleed to tab-content edges */
}

/* Schedule - Clean Design (kept for potential re-use) */
.schedule-section[b-6hup0k1rty] {
    margin-bottom: 32px;
}

.schedule-section-title[b-6hup0k1rty] {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 24px 0;
}

.schedule-list-clean[b-6hup0k1rty] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.schedule-item-clean[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s ease;
}

.schedule-item-clean:last-child[b-6hup0k1rty] {
    border-bottom: none;
}

.schedule-item-clean:hover[b-6hup0k1rty] {
    background-color: #f9fafb;
}

.schedule-item-clean.past[b-6hup0k1rty] {
    opacity: 0.7;
}

.schedule-item-left[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.schedule-item-icon[b-6hup0k1rty] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 8px;
    color: #6b7280;
    flex-shrink: 0;
}

.schedule-item-details[b-6hup0k1rty] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.schedule-item-title[b-6hup0k1rty] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.schedule-item-datetime[b-6hup0k1rty] {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.lesson-result[b-6hup0k1rty] {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
}

.lesson-result.passed[b-6hup0k1rty] {
    color: #059669;
}

.lesson-result.failed[b-6hup0k1rty] {
    color: #dc2626;
}

.past-lessons .schedule-item-clean:hover[b-6hup0k1rty] {
    background-color: transparent;
    cursor: default;
}

/* Responsive */
@media (max-width: 768px) {
    .schedule-item-clean[b-6hup0k1rty] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .schedule-item-left[b-6hup0k1rty] {
        width: 100%;
    }
}

/* Theory vs Driving Lesson Differentiation */
.schedule-item-clean.theory-lesson[b-6hup0k1rty] {
    border-left: 4px solid #3b82f6;
}

.schedule-item-clean.driving-lesson[b-6hup0k1rty] {
    border-left: 4px solid #10b981;
}

.schedule-item-icon.theory[b-6hup0k1rty] {
    background: #dbeafe;
    color: #3b82f6;
}

.schedule-item-icon.driving[b-6hup0k1rty] {
    background: #d1fae5;
    color: #10b981;
}

.lesson-type-header[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.lesson-type-badge[b-6hup0k1rty] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lesson-type-badge.theory[b-6hup0k1rty] {
    background: #dbeafe;
    color: #1e40af;
}

.lesson-type-badge.driving[b-6hup0k1rty] {
    background: #d1fae5;
    color: #065f46;
}

.schedule-item-instructor[b-6hup0k1rty],
.schedule-item-location[b-6hup0k1rty] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.theory-lesson-note[b-6hup0k1rty] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #eff6ff;
    border-radius: 6px;
    font-size: 12px;
    color: #1e40af;
    line-height: 1.4;
}

.theory-banner[b-6hup0k1rty] {
    margin-bottom: 24px;
    padding: 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.theory-banner fluent-icon[b-6hup0k1rty] {
    flex-shrink: 0;
    margin-top: 2px;
}

.theory-banner div[b-6hup0k1rty] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.theory-banner strong[b-6hup0k1rty] {
    font-size: 14px;
    font-weight: 600;
    color: #1e40af;
}

.theory-banner span[b-6hup0k1rty] {
    font-size: 13px;
    color: #3b82f6;
    line-height: 1.5;
}



/* /Components/Pages/Portal/Students.razor.rz.scp.css */
.student-search[b-2fhsh21etq] {
    width: 250px;
}

.group-filter[b-2fhsh21etq] {
    min-width: 160px;
}

.status-filter[b-2fhsh21etq] {
    min-width: 120px;
}

/* Table */
.students-table-container[b-2fhsh21etq] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.table-header[b-2fhsh21etq] {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1.2fr 1fr 1.5fr 60px;
    gap: 16px;
    padding: 16px 24px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-row[b-2fhsh21etq] {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1.2fr 1fr 1.5fr 60px;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s;
    align-items: center;
}

.table-row:last-child[b-2fhsh21etq] {
    border-bottom: none;
}

.table-row:hover[b-2fhsh21etq] {
    background-color: #f9fafb;
}




/* Student Column */
.col-student[b-2fhsh21etq] {
    display: flex;
    align-items: center;
}

.student-info[b-2fhsh21etq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.student-name[b-2fhsh21etq] {
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.15s;
}

.student-name:hover[b-2fhsh21etq] {
    color: var(--brand-primary);
}

.student-email[b-2fhsh21etq] {
    font-size: 13px;
    color: #666;
}

/* Group Column */
.col-group[b-2fhsh21etq] {
    color: #1a1a1a;
}

.group-link[b-2fhsh21etq] {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.15s;
}

.group-link:hover[b-2fhsh21etq] {
    color: var(--brand-primary);
}

.no-group[b-2fhsh21etq] {
    color: #999;
    font-style: italic;
}

/* Status Column */
.col-status[b-2fhsh21etq] {
    display: flex;
    align-items: center;
}

/* Status Badges */
.status-badge[b-2fhsh21etq] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-active[b-2fhsh21etq] {
    background: #dcfce7;
    color: #16a34a;
}

.status-pending[b-2fhsh21etq] {
    background: #fef3c7;
    color: #d97706;
}

.status-inactive[b-2fhsh21etq] {
    background: #f3f4f6;
    color: #6b7280;
}

.status-default[b-2fhsh21etq] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Answer Rate Column */
.col-answer-rate[b-2fhsh21etq] {
    display: flex;
    align-items: center;
}

.rate-display[b-2fhsh21etq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-bar-container[b-2fhsh21etq] {
    width: 80px;
    height: 6px;
    background: #e5e5e5;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar[b-2fhsh21etq] {
    height: 100%;
    background: #1a1a1a;
    border-radius: 3px;
    transition: width 0.3s;
}

.rate-value[b-2fhsh21etq] {
    font-size: 14px;
    color: #666;
    min-width: 40px;
}

/* Correct Rate Column */
.col-correct[b-2fhsh21etq] {
    font-weight: 600;
    font-size: 14px;
}

.rate-high[b-2fhsh21etq] {
    color: #16a34a;
}

.rate-medium[b-2fhsh21etq] {
    color: #d97706;
}

.rate-low[b-2fhsh21etq] {
    color: #dc2626;
}

/* Activity Column */
.col-activity[b-2fhsh21etq] {
    display: flex;
    align-items: center;
}

.activity-display[b-2fhsh21etq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.activity-display:hover[b-2fhsh21etq] {
    transform: scale(1.05);
}

.activity-text[b-2fhsh21etq] {
    white-space: nowrap;
}

/* Activity Status Colors */
.activity-today[b-2fhsh21etq] {
    background-color: #dcfce7;
    color: #16a34a;
}

.activity-week[b-2fhsh21etq] {
    background-color: #dbeafe;
    color: #2563eb;
}

.activity-month[b-2fhsh21etq] {
    background-color: #fef3c7;
    color: #d97706;
}

.activity-old[b-2fhsh21etq] {
    background-color: #fee2e2;
    color: #dc2626;
}

.activity-never[b-2fhsh21etq] {
    background-color: #f3f4f6;
    color: #6b7280;
}

/* Actions Column */
.col-actions[b-2fhsh21etq] {
    display: flex;
    justify-content: flex-end;
}

/* Loading & Empty States */
.loading-container[b-2fhsh21etq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #666;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.empty-state[b-2fhsh21etq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    color: #666;
}

.empty-state h3[b-2fhsh21etq] {
    margin: 16px 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.empty-state p[b-2fhsh21etq] {
    margin: 0 0 24px 0;
    font-size: 14px;
}

/* Dialog Overlay */
.dialog-overlay[b-2fhsh21etq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

/* Create Student Dialog */
.create-student-dialog[b-2fhsh21etq] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}



.form-group[b-2fhsh21etq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}



.form-input[b-2fhsh21etq] {
    width: 100%;
}

/* Toggle Group */
.toggle-group[b-2fhsh21etq] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.toggle-label[b-2fhsh21etq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-label .form-label[b-2fhsh21etq] {
    margin: 0;
}

.toggle-description[b-2fhsh21etq] {
    font-size: 13px;
    color: #666;
}

.dialog-footer[b-2fhsh21etq] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 24px 24px;
    border-top: 1px solid #eee;
}

/* Responsive */
@media (max-width: 1200px) {
    .table-header[b-2fhsh21etq],
    .table-row[b-2fhsh21etq] {
        grid-template-columns: 2fr 1.5fr 1fr 1fr 60px;
    }

    .col-answer-rate[b-2fhsh21etq],
    .col-activity[b-2fhsh21etq] {
        display: none;
    }
}

@media (max-width: 768px) {
    .page-header[b-2fhsh21etq] {
        flex-direction: column;
        gap: 16px;
    }

    .toolbar[b-2fhsh21etq] {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .toolbar-left[b-2fhsh21etq] {
        flex-direction: column;
    }

    .toolbar-right[b-2fhsh21etq] {
        justify-content: flex-end;
    }

    .student-search[b-2fhsh21etq] {
        width: 100%;
    }

    .table-header[b-2fhsh21etq],
    .table-row[b-2fhsh21etq] {
        grid-template-columns: 2fr 1fr 60px;
    }

    .col-group[b-2fhsh21etq],
    .col-correct[b-2fhsh21etq] {
        display: none;
    }

    .create-student-dialog[b-2fhsh21etq] {
        max-width: 100%;
        margin: 16px;
    }

    .dialog-overlay[b-2fhsh21etq] {
        padding: 16px;
    }
}
/* /Components/Pages/Portal/TheoryAttendance.razor.rz.scp.css */
.attendance-page[b-77e7r1shn5] {
    padding: 20px;
}

.date-selector[b-77e7r1shn5] {
    margin-bottom: 20px;
}

.lesson-selector[b-77e7r1shn5] {
    margin-bottom: 20px;
}

.attendance-grid[b-77e7r1shn5] {
    margin-top: 20px;
}

.attendance-checkbox[b-77e7r1shn5] {
    text-align: center;
}

.student-name[b-77e7r1shn5] {
    font-weight: 500;
}

.status-label[b-77e7r1shn5] {
    font-weight: 600;
}

.notes-field[b-77e7r1shn5] {
    width: 100%;
}

.action-buttons[b-77e7r1shn5] {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.save-result[b-77e7r1shn5] {
    color: var(--success-color);
    font-weight: 500;
}

.error-message[b-77e7r1shn5] {
    color: var(--error-color);
    padding: 12px;
    border-radius: 4px;
    background-color: var(--error-background);
    margin-bottom: 20px;
}

.empty-state[b-77e7r1shn5] {
    text-align: center;
    padding: 40px;
    color: var(--neutral-foreground-hint);
}

.loading-spinner[b-77e7r1shn5] {
    display: flex;
    justify-content: center;
    padding: 40px;
}
/* /Components/Shared/BaseModal.razor.rz.scp.css */
.base-modal-overlay[b-mvgrhf6kbt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-mvgrhf6kbt 0.15s ease-out;
}

.base-modal[b-mvgrhf6kbt] {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: slideUp-b-mvgrhf6kbt 0.2s ease-out;
}

.base-modal-header[b-mvgrhf6kbt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
}

.base-modal-title[b-mvgrhf6kbt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.base-modal-title h2[b-mvgrhf6kbt] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.base-modal-subtitle[b-mvgrhf6kbt] {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

.base-modal-close-button[b-mvgrhf6kbt] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.base-modal-close-button:hover[b-mvgrhf6kbt] {
    color: #111827;
}

.base-modal-body[b-mvgrhf6kbt] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.base-modal-footer[b-mvgrhf6kbt] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
}

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

@keyframes slideUp-b-mvgrhf6kbt {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* /Components/Shared/FullScreenLoader.razor.rz.scp.css */
.fullscreen-loader-overlay[b-lc710y1mr5] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('/background3.jpg');
    background-size: cover;
    background-position: center;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fullscreen-loader-centerbox[b-lc710y1mr5] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.15);
    padding: 2rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fullscreen-loader-spinner[b-lc710y1mr5] {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.spinner[b-lc710y1mr5] {
    animation: rotate-b-lc710y1mr5 1s linear infinite;
    width: 60px;
    height: 60px;
}
@keyframes rotate-b-lc710y1mr5 {
    100% {
        transform: rotate(360deg);
    }
}
.path[b-lc710y1mr5] {
    stroke: var(--brand-primary);
    stroke-linecap: round;
    animation: dash-b-lc710y1mr5 1.5s ease-in-out infinite;
}
@keyframes dash-b-lc710y1mr5 {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}
.fullscreen-loader-text[b-lc710y1mr5] {
    margin-top: 1rem;
    font-size: 1.2rem;
    color: var(--brand-primary);
    font-weight: 500;
}
/* /Components/Shared/PdfModal.razor.rz.scp.css */
.pdf-modal-host[b-mtcdlob37g]  .pdf-modal {
    width: 90vw;
    height: 90vh;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
}

.pdf-modal-host[b-mtcdlob37g]  .pdf-modal .base-modal-body {
    padding: 0;
    overflow: hidden;
}

.pdf-modal-host[b-mtcdlob37g]  .pdf-modal .base-modal-header {
    padding: 16px 20px;
}

.pdf-modal-host[b-mtcdlob37g]  .pdf-modal .base-modal-footer {
    padding: 12px 20px;
}

.pdf-modal-header-content[b-mtcdlob37g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.pdf-modal-title[b-mtcdlob37g] {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.pdf-modal-title span[b-mtcdlob37g] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-page-badge[b-mtcdlob37g] {
    background: #e0e7ff;
    color: #3730a3;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.pdf-iframe[b-mtcdlob37g] {
    width: 100%;
    height: 100%;
    border: none;
}

.pdf-loading[b-mtcdlob37g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    color: var(--neutral-foreground-hint, #6b7280);
}

.pdf-error[b-mtcdlob37g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    color: var(--neutral-foreground-hint, #6b7280);
    text-align: center;
    padding: 24px;
}

/* /Components/Shared/SettingsPageContainer.razor.rz.scp.css */
/* Settings Page Container - Common styles for all settings pages */
.settings-page-container[b-khv90zbh1m] {
    width: 100%;
    padding: 24px;
    background-color: #fafafa;
    min-height: calc(100vh - 86px);
    display: flex;
    flex-direction: column;
}

/* Common page elements */
.settings-page-container .page-title[b-khv90zbh1m] {
    margin-bottom: 24px;
}

.settings-page-container .content-wrapper[b-khv90zbh1m] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    flex: 1;
}

/* Footer styling - full width at bottom */
.settings-page-container .page-footer-static[b-khv90zbh1m] {
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -24px;
    margin-top: auto;
    padding-top: 24px;
}

/* Page header common styling */
.settings-page-container .page-header[b-khv90zbh1m] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.settings-page-container .page-header h1[b-khv90zbh1m] {
    margin: 0 0 8px 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: #323130;
}

.settings-page-container .page-header .subtitle[b-khv90zbh1m] {
    margin: 0;
    color: #605e5c;
    font-size: 0.9rem;
}