/* ==========================================================================
   Equant360 Application Styles
   Import design tokens first, then override as needed
   ========================================================================== */

@import url('design-tokens.css');

:root:root {
    /* Neutrals - keeping existing grayscale */
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base-50: #f8fafc;
    --rz-base-100: #f1f5f9;
    --rz-base-200: #e2e8f0;
    --rz-base-300: #cbd5e1;
    --rz-base-400: #94a3b8;
    --rz-base-500: #64748b;
    --rz-base-600: #475569;
    --rz-base-700: #334155;
    --rz-base-800: #1e293b;
    --rz-base-900: #0f172a;

    /* Primary - Brand Slate Blue (from logo) */
    --rz-primary: #7BA3C7;
    --rz-primary-light: #9BB8D4;
    --rz-primary-lighter: rgba(123, 163, 199, 0.15);
    --rz-primary-dark: #5B8AB7;
    --rz-primary-darker: #4A7AA8;

    /* Secondary - Dark Slate */
    --rz-secondary: #2C3E50;
    --rz-secondary-light: #34495E;
    --rz-secondary-lighter: rgba(44, 62, 80, 0.15);
    --rz-secondary-dark: #1A252F;
    --rz-secondary-darker: #141D24;

    /* Info - Derived from Primary */
    --rz-info: #5B9BD5;
    --rz-info-light: #7DB3E0;
    --rz-info-lighter: rgba(91, 155, 213, 0.15);
    --rz-info-dark: #4A8AC4;
    --rz-info-darker: #3A7AB4;

    /* Success - Brand Green (from logo "3") */
    --rz-success: #2E9E49;
    --rz-success-light: #4DB366;
    --rz-success-lighter: rgba(46, 158, 73, 0.15);
    --rz-success-dark: #258A3D;
    --rz-success-darker: #1C7631;

    /* Warning - Brand Gold (from logo "6") */
    --rz-warning: #E8B923;
    --rz-warning-light: #F0C94D;
    --rz-warning-lighter: rgba(232, 185, 35, 0.15);
    --rz-warning-dark: #D4A61F;
    --rz-warning-darker: #B8901A;

    /* Danger - Brand Red (from logo "0") */
    --rz-danger: #D14D41;
    --rz-danger-light: #DC6B61;
    --rz-danger-lighter: rgba(209, 77, 65, 0.15);
    --rz-danger-dark: #B84238;
    --rz-danger-darker: #9E382F;
    /* --rz-series-1: #3700b3; */
    --rz-series-1: #855CF8;
    --rz-series-2: #475569;
    --rz-series-3: #FF8F6B;
    --rz-series-4: #C9DBFF;
    --rz-series-5: #FFD66B;
    --rz-series-6: #3FA535;
    --rz-series-7: #26a69a;
    --rz-series-8: #605BFF;
    --rz-series-9: #855CF8;
    --rz-series-10: #ce93d8;
    --rz-series-11: #f48fb1;
    --rz-series-12: #FF8F6B;
    --rz-series-13: #F5B617;
    --rz-series-14: #aed581;
    --rz-series-15: #5B93FF;
    --rz-series-16: #7394D4;
    --rz-series-17: #f06292;
    --rz-series-18: #e1bee7;
    --rz-series-19: #f8bbd0;
    --rz-series-20: #ffccbc;
    --rz-series-21: #fff59d;
    --rz-series-22: #c5e1a5;
    --rz-series-23: #80cbc4;
    --rz-series-24: #C9DBFF;
    --light-blue: #64748b;
    --rz-panel-menu-item-background-color: var(--rz-secondary);
    --rz-grid-selected-background-color: var(--rz-info-light);
    --rz-panel-menu-item-background-color: var(--rz-white);
    --rz-panel-menu-item-2nd-level-background-color: var(--rz-white);
    --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-white);
    --rz-panel-menu-item-active-color: var(--rz-primary);
    --rz-panel-menu-item-2nd-level-active-color: var(--rz-primary);
    --rz-panel-menu-item-hover-background-color: var(--rz-primary);
    --rz-panel-menu-item-active-indicator: var(--rz-primary);
    --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-primary);
    --rz-panel-menu-item-color: #545454;
    --rz-menu-top-item-selected-color: var(--rz-secondary);
    --rz-menu-item-hover-background-color: var(--rz-secondary);
    --rz-menu-top-item-hover-color: var(--rz-secondary);
    --rz-sidebar-background-color: var(--rz-secondary); /*Changed*/
    --rz-panel-menu-item-active-background-color: var(--rz-white);
    --rz-button-disabled-opacity: 0.6;
    --rz-accordion-item-background-color: var(--rz-base-200);
    --rz-tabs-padding: 5px;
    --rz-datalist-item-padding: 5 px;
    --rz-dropdown-item-selected-background-color: var(--rz-primary);
    --rz-accordion-item-background-color: var(--rz-white);
    --rz-scheduler-toolbar-background-color: var(--rz-white);
    --rz-upload-button-bar-background-color: var(--rz-white);
    --rz-grid-frozen-cell-background-color: var(--rz-base-200);
    --rz-grid-header-background-color: var(--rz-secondary);
    --rz-grid-header-color: var(--rz-white);
    --rz-tabs-tab-background-color: var(--rz-base-300);
    --rz-switch-checked-background-color: var(--rz-primary);
    --rz-scheduler-view-selected-background-color: var(--rz-primary);
    --rz-scheduler-prev-next-button-background-color: var(--rz-primary);
    --rz-selectbar-selected-background-color: var(--rz-primary);
    --rz-selectbar-selected-border: var(--rz-primary);
    --rz-footer-padding: 4px;
    --rz-tooltip-background-color: var(--rz-base-400);
    --rz-tabs-tab-color: var(--rz-base-800);
    --rz-on-primary-lighter: var(--rz-primary-light);
    --rz-dropdown-item-hover-background-color: var(--rz-primary);
    --rz-dropdown-item-selected-hover-background-color: var(--rz-primary);
    --rz-datepicker-calendar-hover-background-color: var(--rz-primary-light);
    --rz-dialog-background-color: var(--rz-white);
    --rz-layout-body-background-color: #f4f5f9;
    --rz-layout-body-padding: 0px;
    --rz-dialog-content-padding: 2px;
    --rz-scheduler-event-background-color: var(--rz-base-400);
    --rz-grid-header-cell-padding: 8px;
    --rz-header-min-height: 3.9rem;
    --rz-menu-top-item-background-color: var(--rz-secondary);
    --rz-menu-top-item-selected-color: var(--rz-white);
    --rz-menu-top-item-color: var(--rz-white);
    --rz-menu-top-item-icon-color: var(--rz-white);
    --rz-menu-top-item-icon-hover-color: var(--rz-white);
    --rz-menu-top-item-hover-color: var(--rz-white);
}


body {
    font-family: 'Material Symbols Outlined', sans-serif;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50060;
}

.validation-message {
    color: #e50060;
}

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

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }


.overlay-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}


@media (max-width: 768px) {
}

.student-card {
    box-shadow: rgb(202 204 209) 0px 3px 8px;
    border: 1px solid #cbccd1;
}

    .student-card .rz-label {
        color: #555555;
    }

.student-title-panel {
    background-color: #f3f5f9;
    border-radius: 10px;
}

    .student-title-panel .student-name {
        font-size: 22px;
    }

        .student-title-panel .student-name .rz-button-text {
            color: #4f4f50;
        }

    .student-title-panel .et-label {
        font-size: 14px;
        padding: 0;
        margin: 0;
        margin-left: 18px;
        color: #009cf6;
    }

.student-title-control-panel {
    background-color: var(--rz-white);
    padding: 5px;
    border-radius: 10px;
}

    .student-title-control-panel .rz-button-box {
        gap: .5rem !important;
    }
/*
    .student-title-control-panel .rz-button.rz-variant-outlined.rz-secondary.rz-shade-default {
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary);
        color: var(--rz-secondary);
    }*/

.classroom-exam-input {
}

    .classroom-exam-input .rz-form-field-end {
        padding: 0 !important;
        margin-left: 5px;
    }

    .classroom-exam-input .rz-form-field-content {
        padding: 0px !important;
        margin: 0px;
    }

.rz-tabview.rz-tabview-top {
    padding: 2px;
}

.rz-tabview-nav {
    overflow-x: auto;
    overflow-y: hidden;
}

.rz-border {
    border-color: var(--rz-base-400) !important;
    border-radius: var(--rz-accordion-border-radius);
}

.rz-chip .rz-chip-text p {
    margin: 0 !important;
}

/* changes */
#UserName:focus {
    border: 1px solid var(--light-blue)
}

#Password:focus {
    border: 1px solid var(--light-blue)
}

.student-name {
    color: var(--rz-secondary);
    /* <button tabindex="0" type="button" title="Attendance" textstyle="TextStyle.H6" tagname="TagName.H5" class="rz-button rz-button-md rz-variant-text rz-primary rz-shade-default rz-color-on-secondary-lighter student-name" id="hcm6jtPsGk" _bl_6c46eee2-de88-40b5-bd05-c2b2f06fe947="" fdprocessedid="jgq858"><span class="rz-button-box"><span class="rz-button-text">Aarav Kapoor</span></span></button> */
    /* remove rz-color-on-secondary-lighter from above button for all*/
}

    .student-name:hover {
        color: var(--rz-secondary) !important;
    }


.student-profile-card {
    background: var(--rz-primary-light) !important;
    height: 100%;
}

    .student-profile-card .rz-text-caption {
        color: var(--rz-white) !important;
    }

    .student-profile-card .rz-text-body2 {
        color: var(--rz-white) !important;
    }

    .student-profile-card .rzi {
        color: var(--rz-white);
    }

.student-title .rz-text-body2 {
    color: var(--light-blue);
}

.student-profile-panel .student-profile-item {
    border-bottom: 1px solid #e9ecef;
    width: 100%;
}

    .student-profile-panel .student-profile-item .student-profile-label {
        width: 150px;
        padding-top: 15px;
        padding-bottom: 0px;
        margin-bottom: 0px;
        font-size: 16px;
    }

    .student-profile-panel .student-profile-item .student-profile-text {
        padding-top: 15px;
        padding-bottom: 0px;
        color: var(--rz-black);
        margin-bottom: 0px;
        font-size: 16px;
        flex: 1;
        font-weight: 600;
        color: var(--rz-secondary);
    }

.my-profile-container .rz-dialog-side-content {
    height: 94%;
}

.rz-autocomplete-list-item:hover {
    background-color: var(--rz-primary) !important;
    color: var(--rz-white) !important;
}

.rz-autocomplete-list-item .rz-button:hover {
    color: var(--rz-white) !important;
}

.messages-item-group {
    background-color: var(--rz-primary-light) !important;
}

    .messages-item-group .messages-item-label {
        color: var(--rz-white) !important;
        padding-top: 5px;
        padding-left: 5px;
    }

    .messages-item-group i {
        color: var(--rz-white) !important;
        margin: 5px;
        max-width: 100% !important;
    }

.messages-item-content {
    color: var(--rz-white) !important;
}

.rz-data-row .rz-cell-data .rz-link-text {
    font-weight: bolder !important;
}

.rz-splitbutton .rz-button:hover {
    color: var(--light-blue) !important;
}

/*Inventory Start*/

.inventory-stack {
}

.inventory-stack .rz-datatable {
    border:none;
}
/*Inventory End*/
/* recieved messages class */
.recieved-messages-item-group {
    width: fit-content;
    margin-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--light-blue);
    max-width: 100% !important;
}

    .recieved-messages-item-group .messages-item-label {
        color: var(--rz-white) !important;
        padding-top: 5px;
        padding-left: 5px;
    }

.rz-tick .rz-tick-text {
    fill: var(--rz-black);
}

.recieved-messages-item-group {
    background-color: var(--rz-primary);
}

    .recieved-messages-item-group i {
        color: var(--rz-white) !important;
        margin: 5px;
    }


.rz-scheduler {
    font-weight: bolder;
}

.rz-tabview-title {
    text-wrap-mode:nowrap;
}


.students-in-classroom-div {
    overflow: hidden;
    border: none !important;
    border-radius: 7px;
    padding-right: 7px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: 0.1s linear scale;
}

    .students-in-classroom-div .download-highlight .rz-button {
        color: var(--light-blue) !important;
    }

        .students-in-classroom-div .download-highlight .rz-button:hover {
            color: var(--rz-primary) !important;
        }

@keyframes gradientAnimate {
    0% {
        background-position: 0 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.rz-header {
    background: var(--rz-secondary) !important;
    /* color:var(--rz-white) !important; */
}

.rz-sidebar-toggle {
    background: var(--rz-secondary) !important;
    border: none !important;
    color: var(--rz-white) !important;
}

ul.rz-profile-menu {
    background: var(--rz-secondary) !important;
    border: none !important;
    color: var(--rz-white) !important;
}

/* add this class to the right side user logo div and to the i inside that div too. Also to the H6 below the heading */
.dark-blue-div {
    background-color: var(--rz-secondary) !important;
    color: var(--rz-white) !important;
}

    .dark-blue-div .rz-text-body1 {
        color: var(--rz-white) !important;
    }

ul.rz-profile-menu.dark-blue-div {
    background: var(--rz-secondary) !important;
    border: none !important;
    color: var(--rz-white) !important;
}

    ul.rz-profile-menu.dark-blue-div .rz-navigation-item {
        background: var(--rz-secondary) !important;
        border: none !important;
        color: var(--rz-white) !important;
    }

    ul.rz-profile-menu.dark-blue-div .rz-navigation-item-wrapper-active {
        background: var(--rz-secondary) !important;
        border: none !important;
        color: var(--rz-white) !important;
    }

    ul.rz-profile-menu.dark-blue-div .rz-navigation-item.menu-items-pop {
        background: var(--rz-white) !important;
        border: none !important;
        color: var(--rz-secondary) !important;
    }

.dark-blue-div .rz-navigation-item .rz-navigation-item-icon-children {
    background: var(--rz-secondary) !important;
    border: none !important;
    color: var(--rz-white) !important;
}

.header-school-name {
}

.school-heading {
    color: var(--rz-info-dark);
    background-size: 200% auto;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: bolder !important;
}

/* Page Header Styles - Common across all modules */
.page-header-title {
    margin: 0 !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
}

.page-header-subtitle {
    color: #666;
    margin-top: 4px;
}

.bolder-text {
    font-weight: bolder !important;
}

.classroom-control:hover {
    color: var(--light-blue) !important;
}

.remove-margin-bottom {
    margin-bottom: 0px !important;
}

.rz-dropdown-item {
    transition: background-color linear 0.1s !important;
}

.rz-multiselect-item-content .rz-text-body1 {
    margin: 0;
}

.rz-dropdown-items-wrapper .rz-dropdown-item:hover {
    background-color: var(--rz-primary-light);
}

.rz-multiselect-items-wrapper .rz-text-body1 {
    color: inherit !important;
}

@media (max-width: 768px) {
    .rz-footer .equant360-footer {
        display: none !important;
    }

    .rz-layout .app-body {
        padding-right: 0rem !important;
    }

    .app-body .menu-icons {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .messages {
        padding: 0px !important;
    }
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0px !important;
}

@media print {

    .rz-sidebar {
        display: none !important;
    }

    .no-print, .no-print * {
        visibility: hidden;
        display: none !important;
    }

    .app-body {
        width: 1400px;
    }

    @page {
        size: 297mm 210mm; /* landscape */
        /* you can also specify margins here: */
        margin: 25mm;
        margin-right: 45mm; /* for compatibility with both A4 and Letter */
    }
}

/* style sheet for "A4" printing */
@media print {
    .rz-sidebar {
        display: none !important;
    }

    .no-print, .no-print * {
        visibility: hidden;
        display: none !important;
    }

    @page {
        margin: 3cm;
        size: A4 landscape;
    }
}

.menu-icons {
    max-width: 80px;
    background-color: var(--rz-white);
}

.rz-layout .app-body {
    padding-right: 1rem;
    padding-left: 10px;
    height: 100%;
    width: 100%;
    overflow-x: hidden; /* Prevent page-level horizontal scroll */
}

.top-controls-panel-grade .top-controls-section {
    border: none !important;
}

    .top-controls-panel-grade .top-controls-section .rz-form-field-content {
        border-radius: 15px;
        border: 1.5px solid #2679e5;
        padding: 1rem;
        background-color: #f7fbff;
    }

        .top-controls-panel-grade .top-controls-section .rz-form-field-content .rz-form-field-label {
            font-size: 14px;
            border-radius: 15px;
            border: 1px solid #2679e5;
            padding-top: 3px;
            padding-bottom: 3px;
            padding-left: 6px;
            padding-right: 6px;
            margin-left: 20px;
        }

        .top-controls-panel-grade .top-controls-section .rz-form-field-content:focus {
            border-radius: 15px !important;
            border: 1.5px solid #2679e5 !important;
            padding: 1rem !important;
            background-color: #f7fbff !important;
        }

.top-controls-panel-asses .top-controls-section {
    border: none !important;
}

.top-controls-panel-asses .rz-form-field:hover .rz-form-field-content {
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
    border: 1px solid rgb(215 216 217) !important;
    background-color: rgb(250 250 251) !important;
    row-gap: 0px;
    padding: 1rem;
}

.top-controls-panel-asses .top-controls-section .rz-form-field-content {
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
    border: 1px solid rgb(215 216 217) !important;
    background-color: rgb(250 250 251) !important;
    row-gap: 0px;
    padding: 1rem;
}

    .top-controls-panel-asses .top-controls-section .rz-form-field-content .rz-form-field-label {
        font-size: 14px;
        border-radius: 15px;
        border: 1px solid rgb(215 216 217);
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 6px;
        padding-right: 6px;
        margin-left: 20px;
    }

    .top-controls-panel-asses .top-controls-section .rz-form-field-content:focus {
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
        border: 1px solid rgb(215 216 217) !important;
        background-color: rgb(250 250 251) !important;
    }

.top-controls-panel {   
    background-color: var(--rz-white);
    border-end-end-radius: 15px 15px;
    border-end-start-radius: 15px 15px;
}

    .top-controls-panel .top-controls-panel-asses {
    }

.app-body .app-body-content {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.classroom-control-filter-panel {
    background-color: var(--rz-white);
    border: 1px solid var(--rz-white);
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
    padding-left: 20px;
}

    .classroom-control-filter-panel .rz-form-field-content {
        margin-block: 0px;
    }

    .classroom-control-filter-panel .classroom-control-search-icon {
        color: #d6d6d6;
    }

    .classroom-control-filter-panel .classroom-control-search-control {
        height: 30px;
    }

    .classroom-control-filter-panel .rz-label {
        padding: 3px;
        color: #a7a7a7;
    }

    .classroom-control-filter-panel .rz-text-body1 {
        border: 1px solid #e2e2e2;
        border-radius: 10px;
        margin-block: 0px;
        padding: 5px;
        width: 30px;
        text-align: center;
    }

.app-body .app-body-content {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.syllabus-stack .rz-row {
    background-color: var(--rz-white);
}

/* Syllabus/Subjects Page Styles */
.syllabus-stack {
    background-color: var(--rz-white);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 1rem;
}

    .syllabus-stack .rz-row {
        width: 100%;
    }

.syllabus-header .syllabus-control {
    width: 100%;
}

    .syllabus-stack .rz-row-container {
        border: 1px solid #0263b7;
        background-color: #C2DDFF21;
        border-radius: 15px;
        margin-top: 0.5rem;
    }

    .syllabus-stack .add-edit-btn {
        background-color: #1e293b !important;
    }

    .syllabus-stack .container-divider {
        border-left: 2px solid #DADDE6;
        padding-left: 5px;
    }

    .syllabus-stack .syllabus-upload-btn {
        background-color: var(--rz-secondary) !important;
    }

.syllabus-upload .rz-fileupload-content {
    display: none;
}

.syllabus-upload .rz-fileupload-buttonbar {
    background-color: var(--rz-base-200);
}

    .syllabus-upload .rz-fileupload-buttonbar .rz-fileupload-choose {
        background-color: var(--rz-base-200);
        color: var(--rz-text-color);
        height: auto;
    }

.syllabus-html-stack {
    background-color: var(--rz-white);
    border-radius: 5px;
    padding: 1rem;
}

    .syllabus-html-stack .save-btn {
        background-color: #1e293b !important;
    }

    .syllabus-html-stack .cancel-btn {
        background-color: #DEE2E6 !important;
        color: #212529 !important;
    }

.exam-settings-stack {
    height: 100%;
}

    .exam-settings-stack .exam-header {
        background-color: var(--rz-white);
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        width: 100%;
    }

    .exam-settings-stack .subject-header {
        width: 100%;
        border-radius: 1rem;
        background-color: #F8FAFB;
    }

    .exam-settings-stack .exam-subjects-tab {
        background-color: var(--rz-white);
        width: 100%;
        margin-top: 1rem;
        border-radius: 10px;
        padding: 10px;
    }

    .exam-settings-stack .exam-stack-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        width: 100%;
    }

    .exam-settings-stack .exam-stack-left {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .exam-settings-stack .exam-grade-left {
        display: flex;
        align-items: center;
        min-width: 180px;
        gap: 0.5rem;
    }

    .exam-settings-stack .exam-grade-row {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .exam-settings-stack .exam-stack-right {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

.exam-top-panel {
    background-color: var(--rz-white);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.exam-timetable-header {
    width: 100%;
    border: 1px solid #0263b7;
    padding: 15px;
    margin: 0.5rem;
    background-color: #C2DDFF21; /* Slight blue transparent */
    border-radius: 15px;
    display: flex;
    align-items: center;
}

    .exam-timetable-header .exam-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

.exam-calender-container {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 15px;
    border: 2px solid #ccc;
    border-radius: 3px;
}

    .exam-calender-container .calendar-row-header {
        font-weight: bold;
        background-color: #F8FAFB;
        border-bottom: 2px solid #D9D9D9;
    }

    .exam-calender-container .calendar-rows {
        border-bottom: 2px solid #D9D9D9;
    }

    .exam-calender-container .even-rows {
        background-color: #F8FAFB;
    }

.examresults-header {
    background-color: var(--rz-white);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.examreportcard-header {
    background-color: var(--rz-white);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 1rem;
}

.examreportcard-stack {
    min-height: 100vh;
    background-color: var(--rz-background);
    padding: 1rem;
}

    .examreportcard-stack .cardheader {
        background: white;
        width: 100%;
        max-width: 794px;
        padding: 2rem;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        border-radius: 8px;
    }

    .examreportcard-stack .logostyle {
        max-width: 150px;
        width: 100%;
        background-color: lightgray;
    }

    .examreportcard-stack .examtypeheader {
        background-color: #EAF3F7;
        padding: 0.5rem;
        text-align: center;
        color: white;
        margin-bottom: 1rem;
    }

    .examreportcard-stack .markscardheader {
        padding-bottom: 10px;
        margin-top: 20px;
    }

    .examreportcard-stack .markstotal {
        border-top: 2px solid #4a90e2;
        padding-top: 10px;
        margin-top: 15px;
    }

    .examreportcard-stack .signaturebox {
        height: 80px;
        width: 250px;
        border: 1px solid #ccc;
    }

    .examreportcard-stack .noteinfo {
        font-size: 0.9rem;
        color: gray;
    }

.attendance-header {
    width: 100%;
    background-color: var(--rz-white);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    display: flex;
    gap: 0;
}

    .attendance-header .grade-splitbutton {
        width: 100%;
        background-color: #C2DDFF21;
    }

.attendance-stack {
    width: 100%;
    background-color: var(--rz-white);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.calendar-stack {
    background-color: var(--rz-white);
    border-radius: 10px;
    margin-top: 15px;
    padding: 0.5rem;
    height: 100%;
    width: 100%;
}

    .calendar-stack .calender-label {
        font-weight: bolder;
        font-size: large;
        text-align: left;
        display: block;
        margin-top: 5px;
    }

    .calendar-stack .rz-month-view .rz-slot {
        border: none !important;
    }

    .calendar-stack .rz-event-list-btn {
        padding-top: 3px;
    }

.dashboard-stack {
    background-color: var(--rz-white);
    border-end-end-radius: 15px 15px;
    border-end-start-radius: 15px 15px;
    padding: 15px 15px 15px 15px;
}

    .dashboard-stack .profile-avatar {
        padding: 10px;
    }

    .dashboard-stack .student-info .student-name {
        color: var(--rz-black);
        font-size: 25px;
        font-weight: 600;
    }

    .dashboard-stack .student-info .student-grade .student-text {
        color: #475569;
        font-size: 15px;
        font-weight: 600;
    }

    .dashboard-stack .student-info .student-label {
        color: #6c777f;
        font-size: 15px;
    }

    .dashboard-stack .student-info .student-text.student-prop {
        color: var(--rz-black);
        font-size: 15px;
    }

.dashboard-item {
    background-color: var(--rz-white);
    border-radius: 15px 15px;
    padding: 10px;
}

.dashboard-items .dashboard-item i {
    padding: 15px;
    font-size: 30px;
    border-radius: 50px;
}

.dashboard-items .dashboard-item .dashboard-text {
    font-size: 30px;
    font-weight: 600;
}

.dashboard-items .dashboard-item .rz-month-view .rz-slot {
    border: none !important;
}

.dashboard-items .dashboard-item .rz-event-list-btn {
    padding-top: 3px;
}

.dashboard-items .dashboard-item .dashboard-item-block {
    border-radius: 10px 10px;
    background-color: #f4f5f9;
    padding: 20px;
}

.dashboard-items .dashboard-item .dashboard-item-value {
    font-weight: 800;
    font-size: 30px;
}

.dashboard-items .dashboard-item .dashboard-item-label {
    font-weight: 300;
    font-size: 15px;
}

.rz-button.rz-variant-outlined.rz-primary.rz-shade-default {
    box-shadow: inset 0 0 0 var(--rz-border-width) #2679e5 !important;
    color: var(--rz-black) !important;
}

.dashboard-item .asses {
    padding: 15px;
    width: 100%;
}

    .dashboard-item .asses .asses-title {
        font-size: 18px;
        font-weight: 600;
    }

    .dashboard-item .asses .asses-box {
        border-radius: 5px 5px;
        width: 100%;
    }

    .dashboard-item .asses .asses-subject-box {
        width: 100%;
        background-color: #e9f4fb;
        padding: 10px;
        border-start-end-radius: 5px 5px;
        border-start-start-radius: 5px 5px;
    }

        .dashboard-item .asses .asses-subject-box .sub-name {
            font-size: 12px;
        }

        .dashboard-item .asses .asses-subject-box .unit-name {
            font-size: 16px;
            font-weight: 500;
        }

    .dashboard-item .asses .asses-due-date {
        width: 100%;
        background-color: #7394d4;
        padding: 10px;
        border-end-end-radius: 5px 5px;
        border-end-start-radius: 5px 5px;
    }

.message-list {
    background-color: var(--rz-white);
    border-radius: 20px;
}

    .message-list .message-list-item {
        padding: 10px;
        color: var(--rz-black);
        min-height: 56px;
    }

        .message-list .message-list-item .rz-text-caption {
            color: var(--rz-white);
        }

        .message-list .message-list-item.selected-message-item {
            background-color: var(--rz-primary);
            color: var(--rz-white);
        }

        .message-list .message-list-item:hover {
            background-color: var(--rz-primary);
            color: var(--rz-white);
        }

.messages {
    border-radius: 20px;
    background-color: var(--rz-white);
    width: 100%;
    padding: 5px;
    height: 100%;
}

    .messages .messages-item-group {
        width: fit-content;
        margin-bottom: 5px;
        background-color: var(--rz-base-50);
        padding-left: 10px;
        padding-right: 10px;
    }

        .messages .messages-item-group .messages-item-label {
            color: var(--rz-white);
        }

        .messages .messages-item-group .messages-item-content {
            margin: 3px;
        }

.messages-header {
    background-color: var(--rz-white);
    width: 100%;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

    .messages-header .header-button {
        border-radius: 6px;
        padding: 10px 20px;
        height: 40px;
        width: 100%;
    }

    .messages-header .search-icon {
        position: absolute;
        left: 10px;
        top: 10px;
        color: #888;
    }

    .messages-header .search-box {
        padding-left: 30px;
        padding-right: 10px;
        border-radius: 12px;
        height: 40px;
        width: 100%;
        border: 1px solid #ddd;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

.messages-stack {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh;
    overflow: hidden;
    padding-bottom: 5px;
}

    .messages-stack .messages-module {
        width: 100%;
        display: flex !important;
        flex: 1 !important;
        flex-direction: column !important;
        overflow: hidden;
        flex-wrap: nowrap;
    }

        .messages-stack .messages-module .messages-module-row {
            width: 100%;
            display: flex !important;
            flex: 1 !important;
            overflow: hidden;
            flex-wrap: nowrap;
        }

            .messages-stack .messages-module .messages-module-row .messages {
                width: 100%;
                display: flex !important;
                flex: 1;
                flex-direction: column !important;
                overflow: hidden;
                flex-wrap: nowrap;
                --rz-gap: 0px;
                flex-wrap: nowrap;
            }

            .messages-stack .messages-module .messages-module-row .messages-list {
                width: 100%;
                display: flex !important;
                flex: 1;
                flex-direction: column !important;
                overflow: hidden;
                flex-wrap: nowrap;
            }

/* Teacher Timetable */

.teacher-schedule-dialog {
    background-color: #CECECE !important;
}

.teacher-schedule-stack .rz-datatable {
    border: none;
    background: #F3F4F8;
}

.teacher-schedule-stack .rz-grid-table {
    width: auto;
}

.teacher-schedule-stack .teacher-schedule-health-dashboard {
    background: #F3F4F8;
    padding: 15px;
}

    .teacher-schedule-stack .teacher-schedule-health-dashboard .teacher-schedule-health-dashboard {
        background: #FFFFFF;
        border-radius: 11px;
    }

.teacher-schedule-stack .teacher-schedule-health-score {
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    color: #4F4F50;
}

.teacher-schedule-stack .teacher-schedule-table-stack {
    background: #FFFFFF;
    box-shadow: 0px 4px 6px -4px rgba(24, 39, 75, 0.12), 0px 8px 8px -4px rgba(24, 39, 75, 0.08);
    border-radius: 13px;
    padding: 10px;
}

.teacher-schedule-stack .session-allocation-table .rz-grid-table {
    border-collapse: separate;
    border-spacing: 10px 5px; /* horizontal and vertical spacing between cells */
}

    .teacher-schedule-stack .session-allocation-table .rz-grid-table thead th {
        background-color: var(--rz-primary);
        border-radius: 12px;
        height: 40px;
    }

    .teacher-schedule-stack .session-allocation-table .rz-grid-table td {
        padding: 0 !important;
    }

    .teacher-schedule-stack .session-allocation-table .rz-grid-table .timetable-cell {
        box-sizing: border-box;
        background: #FBFBFB;
        box-sizing: border-box;
        margin: 2px;
        border-radius: 12px;
    }

    .teacher-schedule-stack .session-allocation-table .rz-grid-table .rz-cell-data {
        height: 60px;
    }

    .teacher-schedule-stack .session-allocation-table .rz-grid-table .timetable-cell .subject-name {
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        align-items: center;
        color: #767676;
    }

    .teacher-schedule-stack .session-allocation-table .rz-grid-table .timetable-cell .grade-name {
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        align-items: center;
        color: #000000;
    }

    .teacher-schedule-stack .session-allocation-table .rz-grid-table .timetable-cell-break {
        box-sizing: border-box;
        background: var(--rz-white);
        margin: 2px;
        border-radius: 12px;
    }

.teacher-schedule-health-dashboard-widget {
    background: #FFFFFF;
    border-radius: 11px;
    padding: 15px;
}

    .teacher-schedule-health-dashboard-widget .widget-icon {
        color: #5B93FF;
        font-size: 30px;
    }

    .teacher-schedule-health-dashboard-widget .widget-text {
        font-style: normal;
        font-weight: 600;
        font-size: 20px;
        color: #000000;
    }

    .teacher-schedule-health-dashboard-widget .widget-title {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        color: #767676;
    }

    .teacher-schedule-health-dashboard-widget .widget-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .teacher-schedule-health-dashboard-widget .info-icon-top-right {
        position: absolute;
        top: 6px;
        right: 6px;
        font-size: 18px;
        color: var(--rz-primary);
        cursor: help;
    }


.class-scheduler-stack {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh;
    overflow: hidden;
}

    .class-scheduler-stack .class-scheduler-parent, .class-scheduler-stack .class-scheduler-parent-child, .class-scheduler-stack .class-scheduler-parent-col {
        display: flex !important;
        flex: 1 !important;
        flex-direction: column !important;
    }

    .class-scheduler-stack .class-schedule-header {
        background-color: var(--rz-white);
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        width: 100%;
    }

    .class-scheduler-stack .class-timetable-header {
        background-color: var(--rz-white);
        border-radius: 15px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        width: 100%;
    }

    .class-scheduler-stack .class-schedule-wizard {
        background-color: var(--rz-white);
        border-radius: 15px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        width: 100%;
        display: flex !important;
    }

        .class-scheduler-stack .class-schedule-wizard .text-divider {
            font-size: 40px;
            font-weight: 100;
        }

        .class-scheduler-stack .class-schedule-wizard .wizard-item {
            padding: 8px;
            /*background-color: #F3F5F9;*/
            border: 1px solid #E9ECEF;
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            color: #4F4F50;
            border-radius: 12px;
        }

            .class-scheduler-stack .class-schedule-wizard .wizard-item.active {
                /*background-color: #00A6E0;*/
                border: 1px solid #A1DDFF;
                border-radius: 12px;
            }

            .class-scheduler-stack .class-schedule-wizard .wizard-item.completed {
                /*background-color: #16B859;*/
                border: 1px solid #E9ECEF;
                border-radius: 12px;
            }

        .class-scheduler-stack .class-schedule-wizard .timetable-title {
            font-weight: 600;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            color: #4F4F50;
        }

        .class-scheduler-stack .class-schedule-wizard .input-label {
            font-size: small;
            margin: 0;
            padding: 0;
            font-style: normal;
            font-weight: 400;
            font-size: 10px;
            color: #4F4F50;
        }

        .class-scheduler-stack .class-schedule-wizard .input-text {
            font-size: medium;
            margin: 0;
            padding: 0;
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            color: #262526;
        }

    .class-scheduler-stack .class-schedule-records {
        background-color: var(--rz-white);
        border-radius: 15px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        width: 100%;
    }

        .class-scheduler-stack .class-schedule-records .text-divider {
            font-size: 40px;
            font-weight: 100;
        }

        .class-scheduler-stack .class-schedule-records .timetable-title {
            font-weight: 600;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            color: #4F4F50;
        }

        .class-scheduler-stack .class-schedule-records .input-label {
            font-size: small;
            margin: 0;
            padding: 0;
            font-style: normal;
            font-weight: 400;
            font-size: 10px;
            color: #4F4F50;
        }

        .class-scheduler-stack .class-schedule-records .input-text {
            font-size: medium;
            margin: 0;
            padding: 0;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            color: #262526;
        }

    .class-scheduler-stack .rz-switch.rz-switch-checked .rz-switch-circle {
        background-color: #475569;
    }

    .class-scheduler-stack .input-controls {
        border: 1px solid #0263b7;
        background-color: #C2DDFF21;
        padding: 15px 20px;
        border-radius: 15px;
        flex: 1 1 auto;
    }

    .class-scheduler-stack .teacher-allocation-panel {
        background-color: var(--rz-white);
        border-radius: 15px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        padding: 10px;
        display: flex !important;
        flex: 1 !important;
        overflow: hidden;
    }

.teacher-allocation-panel .teacher-list-panel {
    display: flex !important;
    flex: 1 !important;
}

    .teacher-allocation-panel .teacher-list-panel .class-scheduler-parent-col {
        box-sizing: border-box;
        background: rgb(247 251 255);
        border: 1px solid #2679E5;
        box-shadow: 0px 1px 2px rgba(69, 73, 79, 0.3), 0px 1px 3px 1px rgba(69, 73, 79, 0.15);
        border-radius: 12px;
        padding: 10px;
    }

    .teacher-allocation-panel .teacher-list-panel .teacher-list, .teacher-allocation-panel .teacher-list-panel .allocation-list {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
    }

    .teacher-allocation-panel .teacher-list-panel .util-title {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        color: #1e293b;
    }

.teacher-allocation-panel .add-teachers-title {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    color: #4F4F50;
    padding-bottom: 5px;
}

.teacher-allocation-panel .teacher-list-panel .teacher-list .teacher-list-item {
    background: #DCECFE;
    border: 1px solid #C9E1FF;
    border-radius: 4px;
    cursor: grab;
}

    .teacher-allocation-panel .teacher-list-panel .teacher-list .teacher-list-item .rz-text-body1 {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        color: #1e293b
    }

    .teacher-allocation-panel .teacher-list-panel .teacher-list .teacher-list-item .teacher-busy-status {
        height: 100%;
    }

        .teacher-allocation-panel .teacher-list-panel .teacher-list .teacher-list-item .teacher-busy-status.free {
            background-color: seagreen;
        }

        .teacher-allocation-panel .teacher-list-panel .teacher-list .teacher-list-item .teacher-busy-status.partial {
            background-color: #EBA010;
        }

        .teacher-allocation-panel .teacher-list-panel .teacher-list .teacher-list-item .teacher-busy-status.busy {
            background-color: #F31155;
        }

.allocation-list .subject-header {
    background: #1e293b;
    border-radius: 6px 6px 0px 0px;
    padding: 5px;
}

    .allocation-list .subject-header .rz-text-body1 {
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        color: #FFFFFF;
    }

.allocation-list .subject-teachers {
    background-color: var(--rz-white);
    border-radius: 6px;
    pointer-events: auto !important;
}

    .allocation-list .subject-teachers .rz-form-field-content {
        margin: 0;
    }

    .allocation-list .subject-teachers .teacher-allocation-item {
        padding: 5px;
    }

        .allocation-list .subject-teachers .teacher-allocation-item .rz-button-icon-left {
            font-size: 15px;
        }

.time-allocation-stack {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 12px;
}

    .time-allocation-stack .rz-grid-table {
        width: auto;
    }

    .time-allocation-stack .remove-time-slot-button {
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .time-allocation-stack .add-time-slot-panel {
        box-sizing: border-box;
        background: #FFFFFF;
        border: 1px dashed #777777;
    }

    .time-allocation-stack .time-allocation-table .rz-grid-table {
        border-collapse: separate;
        border-spacing: 10px 5px; /* horizontal and vertical spacing between cells */
    }

        .time-allocation-stack .time-allocation-table .rz-grid-table thead th {
            background-color: var(--rz-white);
        }

        .time-allocation-stack .time-allocation-table .rz-grid-table td {
            padding: 0 !important;
        }

        .time-allocation-stack .time-allocation-table .rz-grid-table .timetable-cell {
            box-sizing: border-box;
            background: #D9D9D9;
            border: 1px solid #DEE2E7;
            margin: 2px;
            border-radius: 12px;
        }

        .time-allocation-stack .time-allocation-table .rz-grid-table .timetable-cell-break {
            box-sizing: border-box;
            background: var(--rz-white);
            margin: 2px;
        }

    .time-allocation-stack .session-allocation-table {
        border: none;
    }

        .time-allocation-stack .session-allocation-table .rz-grid-table {
            border-collapse: separate;
            border-spacing: 10px 5px; /* horizontal and vertical spacing between cells */
            border: none;
        }

        .time-allocation-stack .session-allocation-table .rz-data-grid-data {
            background: #F3F4F8;
            border-radius: 12px;
        }

        .time-allocation-stack .session-allocation-table .rz-grid-table thead th {
            background-color: var(--rz-primary);
            border-radius: 12px;
        }

        .time-allocation-stack .session-allocation-table .rz-grid-table td {
            padding: 0 !important;
        }

        .time-allocation-stack .session-allocation-table .rz-grid-table .timetable-cell {
            box-sizing: border-box;
            background: #D9D9D9;
            border: 1px solid #DEE2E7;
            margin: 2px;
            border-radius: 12px;
        }

            .time-allocation-stack .session-allocation-table .rz-grid-table .timetable-cell.timetable-cell-conflict {
                box-sizing: border-box;
                background: #D9D9D9;
                border: 5px groove red;
                margin: 2px;
                border-radius: 12px;
            }

            .time-allocation-stack .session-allocation-table .rz-grid-table .timetable-cell.timetable-cell-ignore-conflict {
                box-sizing: border-box;
                background: #D9D9D9;
                border: 5px groove #FFBF00;
                margin: 2px;
                border-radius: 12px;
            }

        .time-allocation-stack .session-allocation-table .rz-grid-table .timetable-cell-break {
            box-sizing: border-box;
            background: var(--rz-white);
            margin: 2px;
            border-radius: 12px;
        }

.session-allocation-table .subject-name {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: var(--rz-black);
}

.session-allocation-table .teacher-name .rz-button-text {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: var(--rz-black);
}

.session-allocation-table .period-time {
    font-style: normal;
    font-weight: 400;
    font-size: 12.7px;
    color: #FFFFFF;
}

.session-allocation-table .period-type {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
}

.add-time-slots-popup {
    display: none;
    position: absolute;
    overflow: hidden;
    border: var(--rz-panel-border);
    background-color: var(--rz-panel-background-color);
    box-shadow: var(--rz-panel-shadow);
    border-radius: var(--rz-border-radius)
}

.time-allocation-stack .time-allocation-color-pallete {
    background-color: var(--rz-white);
    border-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 20px;
}

/* Teacher Timetable end */


.login-tab {
    min-height: 100vh;
    width: 100%;
    padding: 0px !important;
    margin: 0;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.feesettings-header {
    background-color: var(--rz-white);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 1rem;
}

.feepayment-header {
    padding: 1rem;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: var(--rz-white);
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    flex-wrap: wrap;
}

    .feepayment-header .user-avatar {
        background-color: #f0f6ff;
        border-radius: 50%;
        padding: 0.75rem;
    }

        .feepayment-header .user-avatar .avatar-icon {
            font-size: 60px;
            color: #4a4a4a;
        }

        .feepayment-header .user-avatar .img-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
        }

    .feepayment-header .profile-row {
        width: 100%;
        flex-wrap: wrap;
    }

        .feepayment-header .profile-row .profile-item-fixed {
            width: 150px;
            gap: 0.25rem;
            display: flex;
            align-items: center;
        }

        .feepayment-header .profile-row .profile-item {
            gap: 0.25rem;
            display: flex;
            align-items: center;
        }

        .feepayment-header .profile-row .label-text {
            color: #888;
            font-size: 0.95rem;
        }

        .feepayment-header .profile-row .value-text {
            font-weight: bold;
            font-size: 1rem;
        }

.feepayment-card {
    background-color: #ffffff;
    padding: 1rem;
}

.feeshistory-card {
    padding: 1rem;
    height: 100%;
    position: relative;
}

    .feeshistory-card .payment-badge {
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
    }

.feereciept-header {
    max-width: 795px;
    width: 100%;
    background-color: white;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.05);
}

    .feereciept-header .feetype-title {
        font-weight: bold;
        text-transform: uppercase;
    }

.gallery-header {
    background-color: var(--rz-white);
    width: 100%;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    gap: 10px;
}

    .gallery-header .gallery-edit-header {
        border: 1px solid #0263b7;
        border-radius: 15px;
    }

.files-stack {
    width: 100%;
}

    .files-stack .elevated-box {
        background-color: var(--rz-white) !important;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1) !important;
        border-radius: 4px;
    }

    .files-stack .elevated-title {
        flex: 1;
        text-align: center;
        height: 40px;
        padding: 8px 16px;
        font-weight: 600;
    }

    .files-stack .btn-40 {
        height: 40px;
        min-width: 40px;
    }

.album-section {
    width: 100%;
    padding: 8px;
    margin: 0;
}

    .album-section .gallery-img-column {
        margin-bottom: 16px;
    }

    .album-section .image-stack {
        position: relative;
        background: var(--rz-white);
        border-radius: 8px;
        padding: 4px;
    }

    .album-section .gallery-thumbnail {
        width: 100%;
        height: 130px;
        object-fit: cover;
        border-radius: 6px;
        transition: transform 0.2s ease-in-out;
    }

        .album-section .gallery-thumbnail:hover {
            transform: scale(1.03);
        }

    .album-section .image-delete-icon {
        position: absolute;
        top: 6px;
        right: 6px;
        color: red;
        background: white;
        border-radius: 50%;
        padding: 2px;
        cursor: pointer;
    }

    .album-section .nofile-message {
        text-align: center;
        padding: 200px 0;
    }

.album-list-wrapper {
    padding: 16px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

    .album-list-wrapper .album-list-header {
        font-weight: 600;
        font-size: 16px;
        color: #555;
        margin-bottom: 12px;
    }

    .album-list-wrapper .album-card {
        background-color: #2562A8;
        border-radius: 12px;
        color: white;
        height: 120px;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .album-list-wrapper .album-card-hover:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        transform: scale(1.02);
        transition: all 0.2s ease-in-out;
    }

/*Main Layout CSS*/

.menu-icon {
    display: inline-block;
    background-image: url("../img/icons.png?v5");
    background-repeat: no-repeat;
}

.menu-icon-dashboard {
    width: 34px;
    height: 34px;
    background-position: -9px -11px;
}

.menu-icon-messages {
    width: 34px;
    height: 34px;
    background-position: -154px -50px;
}

.menu-icon-payroll {
    width: 34px;
    height: 34px;
    background-position: -106px -11px;
}

.menu-icon-leads {
    width: 34px;
    height: 34px;
    background-position: -9px -50px;
}

.menu-icon-calendar {
    width: 34px;
    height: 34px;
    background-position: -106px -50px;
}

.menu-icon-gallery {
    width: 34px;
    height: 34px;
    background-position: -5px -45px;
}

.menu-icon-admin {
    width: 34px;
    height: 34px;
    background-position: -9px -94px;
}

.menu-icon-task {
    width: 34px;
    height: 34px;
    background-position: -152px -11px;
}

.menu-icon-inventory {
    width: 34px;
    height: 34px;
    background-position: -57px -50px;
}

.menu-icon-staff {
    width: 34px;
    height: 34px;
    background-position: -59px -11px;
}

.app-drawer-popup {
    display: none;
    position: absolute;
    top: 55px !important;
    left: 10px !important;
    max-width: 600px;
    background: #FFFFFF;
    border: 3px solid var(--rz-secondary);
    box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2);
    border-radius: 12px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.5s ease-out, opacity 0.3s ease, transform 0.3s ease;
    overflow-y: auto;
}

    .app-drawer-popup.rz-open {
        max-height: 90vh; /* 90% of the viewport height */
        opacity: 1;
        transform: translateY(0);
    }

    .app-drawer-popup .app-drawer-stack {
        width: 100%;
        padding: 20px;
    }

.app-drawer-stack .modules-title {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0.04em;
    color: #7D7D7D;
    word-wrap: unset;
}

.app-drawer-stack .modules-title-stack {
    border-bottom: 1px solid #CFCFCF;
}

.menu-stack {
}

    .menu-stack .menu-item {
        width: 100%;
        border: 1px solid transparent; /* Blue border */
        border-radius: 12px; /* Optional: rounded corners */
    }

        .menu-stack .menu-item.active {
            width: 100%;
            border: 1px solid var(--rz-secondary); /* Blue border */
            border-radius: 12px; /* Optional: rounded corners */
            box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2); /* Soft shadow */
            background-color: #fff;
        }

        .menu-stack .menu-item:hover {
            width: 100%;
            border: 1px solid var(--rz-secondary); /* Blue border */
            border-radius: 12px; /* Optional: rounded corners */
            box-shadow: 0px 7px 29px rgba(100, 100, 111, 0.2); /* Soft shadow */
            background-color: #fff;
        }

.menu-item .menu-link {
    text-decoration: none;
    padding-left: 5px;
    padding-right: 5px;
}

    .menu-item .menu-link:hover {
        text-decoration: none;
    }

    .menu-item .menu-link.active .menu-link-stack {
        text-decoration: none;
    }

    .menu-item .menu-link .menu-link-stack {
    }

        .menu-item .menu-link .menu-link-stack .menu-link-text {
            font-style: normal;
            font-weight: 500;
            font-size: 14.2105px;
            line-height: 17px;
            text-align: center;
            color: #494949;
            text-wrap-mode: nowrap;
        }

        .menu-item .menu-link .menu-link-stack .menu-link-icon {
        }

.menu-item .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover {
    background-color: transparent;
    color: #494949;
}

.notification-popup {
    display: none;
    position: absolute;
    overflow: auto;
    width: 250px;
    border: var(--rz-panel-border);
    background-color: var(--rz-secondary);
    box-shadow: var(--rz-panel-shadow);
    border-radius: var(--rz-border-radius);
    right: auto !important;
}

    .notification-popup .notification-item {
    }

        .notification-popup .notification-item .rz-button-box {
            width: 100%;
        }

        .notification-popup .notification-item a {
            color: var(--rz-white);
        }

    .notification-popup .rz-text-body1 {
        color: var(--rz-white);
    }

.rz-header .menu-button {
    box-sizing: border-box;
    position: absolute;
    left: 15px;
    top: 5px;
    background: rgba(63, 122, 211, 0.77);
    border-radius: 19px;
}

    .rz-header .menu-button i {
        font-size: 30px !important;
    }


/*Main Layout CSS end*/


/*Lesson Plan*/


.lesson-plan-stack .rz-row {
    background-color: var(--rz-white);
}

/* lesson-plan/Subjects Page Styles */
.lesson-plan-stack {
    background-color: var(--rz-white);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 1rem;
}

    .lesson-plan-stack .rz-row {
        width: 100%;
    }

        .lesson-plan-stack .rz-row .lesson-plan-control {
            width: 100%;
        }

    .lesson-plan-stack .rz-row-container {
        border: 1px solid #0263b7;
        background-color: #C2DDFF21;
        border-radius: 15px;
        margin-top: 0.5rem;
    }

    .lesson-plan-stack .add-edit-btn {
        background-color: #1e293b !important;
    }

    .lesson-plan-stack .container-divider {
        border-left: 2px solid #DADDE6;
        padding-left: 5px;
    }

    .lesson-plan-stack .lesson-plan-upload-btn {
        background-color: var(--rz-secondary) !important;
    }

.lesson-plan-upload .rz-fileupload-content {
    display: none;
}

.lesson-plan-upload .rz-fileupload-buttonbar {
    background-color: var(--rz-base-200);
}

    .lesson-plan-upload .rz-fileupload-buttonbar .rz-fileupload-choose {
        background-color: var(--rz-base-200);
        color: var(--rz-text-color);
        height: auto;
    }

.lesson-plan-html-stack {
    background-color: var(--rz-white);
    border-radius: 5px;
    padding: 1rem;
    margin-top: 1rem;
}

    .lesson-plan-html-stack .save-btn {
        background-color: #1e293b !important;
    }

    .lesson-plan-html-stack .cancel-btn {
        background-color: #DEE2E6 !important;
        color: #212529 !important;
    }


    .lesson-plan-html-stack .lesson-plan-main-title {
        font-size: 25px;
        font-weight: 700;
        text-align: center;
        width: 100%;
        background-color: #DAE7F7;
        padding: 10px;
        color: var(--rz-text-h6-color);
    }

    .lesson-plan-html-stack .lesson-plan-section {
        background-color: #DAE7F7;
        padding: 10px;
        width: 100%;
        margin-bottom: 10px;
        color: var(--rz-text-h6-color);
        font-size: 18px;
        font-weight: 500;
    }

    .lesson-plan-html-stack .lesson-plan-info {
        color: var(--rz-text-h6-color);
        font-size: 18px;
        font-weight: 500;
    }

/* Task Management Styles */
.task-board-container {
    padding: 1rem;
    background-color: var(--rz-background);
    border-radius: 10px;
}

.task-board-column {
    background-color: var(--rz-white);
    border-radius: 10px;
    padding: 0.5rem;
    min-height: 500px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.task-column-header {
    background-color: var(--rz-base-100);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 3px solid var(--rz-primary);
}

.task-column-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--rz-text-color);
}

.task-column-count {
    margin-left: 0.5rem;
}

.task-column-content {
    min-height: 400px;
    padding: 10px;
}

.task-card {
    background-color: var(--rz-white);
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.task-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.task-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rz-text-color);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.task-card-description {
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.task-due-date {
    font-size: 0.8rem;
    color: var(--rz-text-tertiary-color);
}

.task-assigned-to {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.task-progress {
    width: 30px;
    height: 30px;
}

.task-priority-badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

.task-list-title {
    font-weight: 600;
    color: var(--rz-text-color);
}

.task-list-project {
    font-size: 0.85rem;
    color: var(--rz-text-tertiary-color);
}

.top-controls-section .rz-form-field-content .rz-inputtext, .top-controls-section .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover {
    border: var(--rz-input-border);
}

.task-list-progress {
    height: 8px;
    border-radius: 4px;
}

.task-view-controls {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: var(--rz-white);
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 0.5rem;
}

/* Task Dashboard Specific */
.task-card-project {
    font-size: 0.85rem;
    color: var(--rz-text-tertiary-color);
}

/* Responsive adjustments for task management */
@media (max-width: 768px) {
    .task-board-column {
        margin: 0.1rem;
        padding: 0.25rem;
    }
    
    .task-card {
        padding: 0.75rem;
        margin-bottom: 0.4rem;
    }
    
    .task-card-title {
        font-size: 0.9rem;
    }
    
    .task-card-description {
        font-size: 0.8rem;
    }
    
    .task-view-controls {
        bottom: 10px;
        right: 10px;
    }
}

/* Library Management */
.add-book-dialog{
    width:95vh;
    max-width:950px !important;
}

/* Task Status Specific Colors */
.status-todo {
    border-left-color: var(--rz-info) !important;
}

.status-inprogress {
    border-left-color: var(--rz-warning) !important;
}

.status-review {
    border-left-color: var(--rz-series-1) !important;
}

.status-done {
    border-left-color: var(--rz-success) !important;
}

.status-cancelled {
    border-left-color: var(--rz-danger) !important;
}

/*Lesson Plan end*/

/* Task Management Radzen DropZone Styles */
.task-card {
    transition: all 0.2s ease;
    width: 100%;
}

.task-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.task-draggable {
    cursor: move;
}

.task-drop-zone {
    transition: all 0.3s ease;
    border-radius: 8px;
    background-color: var(--rz-base-25);
    border: 2px solid transparent;
}

/* Radzen DropZone built-in classes */
.task-drop-zone.rz-can-drop {
    background-color: rgba(var(--rz-success), 0.1);
    border-color: var(--rz-success);
}

.task-drop-zone.rz-no-drop {
    background-color: rgba(var(--rz-danger), 0.1);
    border-color: var(--rz-danger);
}

.task-column-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--rz-white);
    border-bottom: 1px solid var(--rz-base-200);
    padding: 10px;
    margin: -10px -10px 10px -10px;
}

.task-board-column {
    background-color: var(--rz-base-50);
    border-radius: 8px;
    border: 1px solid var(--rz-base-200);
    min-height: 500px;
}

.task-column-content {
    max-height: 70vh;
    overflow-y: auto;
}

/* Enhanced drag visual feedback */
.rz-dragging .task-card {
    opacity: 0.8;
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

/* Task Management Layout Improvements */
.top-controls-panel {
}

.top-controls-panel .rz-formfield {
    margin-bottom: 0;
}

.date-filter-panel {
}

.actions-stats-panel {
    padding: 0 5px;
}

.task-stats-panel {
    padding: 10px 0;
}

.task-stats-panel .rz-badge {
    min-width: 24px;
    text-align: center;
}

/* Responsive SelectBar improvements */
.rz-selectbar {
    flex-wrap: wrap !important;
    gap: 4px;
}

.rz-selectbar .rz-selectbar-item {
    flex: 0 0 auto;
    min-width: fit-content;
    white-space: nowrap;
}

/* Responsive layout for medium screens */
@media (max-width: 992px) {
    .top-controls-panel-grade,
    .top-controls-panel-asses {
        margin-bottom: 15px;
    }
    
    .rz-selectbar .rz-selectbar-item {
        font-size: 0.85rem;
        padding: 6px 12px;
    }
}

@media (max-width: 768px) {
    .top-controls-panel .rz-stack {
        min-width: 100% !important;
    }
    
    .rz-selectbar {
        justify-content: center;
    }
    
    .rz-selectbar .rz-selectbar-item {
        font-size: 0.8rem;
        padding: 5px 10px;
    }
    
    .actions-stats-panel {
        margin-bottom: 20px;
    }
    
    .actions-stats-panel .rz-column {
        margin-bottom: 15px;
    }
    
    .task-stats-panel {
        justify-content: center !important;
        padding: 5px 0;
    }
    
    .actions-stats-panel .rz-button {
        font-size: 0.9rem;
        padding: 8px 12px;
    }
}

/* Dialog improvements - Enhanced for full width control */
.rz-dialog {
    max-width: 90vw;
}

.rz-dialog .rz-dialog-content {
    padding: 20px;
    width: 100%;
}

.rz-dialog .rz-formfield {
    width: 100%;
}

.rz-dialog .rz-formfield .rz-dropdown,
.rz-dialog .rz-formfield .rz-textbox,
.rz-dialog .rz-formfield .rz-textarea,
.rz-dialog .rz-formfield .rz-datepicker,
.rz-dialog .rz-formfield .rz-numeric,
.rz-dialog .rz-formfield .rz-colorpicker {
    width: 100% !important;
    min-width: unset !important;
    box-sizing: border-box;
}

.rz-dialog .rz-dropdown,
.rz-dialog .rz-textbox,
.rz-dialog .rz-textarea,
.rz-dialog .rz-datepicker,
.rz-dialog .rz-numeric,
.rz-dialog .rz-colorpicker {
    width: 100% !important;
    min-width: unset !important;
    box-sizing: border-box;
}

/* Ensure column controls take full width */
.rz-dialog .rz-row .rz-col .rz-formfield {
    width: 100%;
}

.rz-dialog .rz-row .rz-col .rz-formfield > * {
    width: 100% !important;
}

/* Color picker specific fix */
.rz-dialog .rz-colorpicker .rz-colorpicker-trigger {
    width: 100% !important;
}

/* Numeric input specific fix */
.rz-dialog .rz-numeric {
    display: flex;
    align-items: stretch;
}

.rz-dialog .rz-numeric .rz-numeric-spinner {
    width: auto !important;
    min-width: 32px;
    flex-shrink: 0;
}

/* Fix numeric spinner button styling */
.rz-numeric .rz-spinner-btn {
    background-color: var(--rz-base-200) !important;
    color: var(--rz-base-700) !important;
    border: 1px solid var(--rz-base-300) !important;
    width: 32px !important;
    min-width: 32px !important;
}

.rz-numeric .rz-spinner-btn:hover {
    background-color: var(--rz-base-300) !important;
    color: var(--rz-base-800) !important;
}

.rz-numeric .rz-spinner-btn:active {
    background-color: var(--rz-primary-lighter) !important;
}

/* Ensure numeric input takes remaining space */
.rz-numeric input {
    flex: 1;
    min-width: 0;
}

/* Tabs content full width */
.rz-dialog .rz-tabs-content {
    width: 100%;
    padding: 0;
}

.rz-dialog .rz-tabs-content .rz-stack {
    width: 100%;
}

/* Mobile responsive dialog improvements */
@media (max-width: 768px) {
    .rz-dialog {
        width: 95% !important;
        max-width: none !important;
        max-height: 90vh !important;
    }

    .rz-dialog .rz-dialog-content {
        padding: 15px;
    }

    .rz-dialog .rz-formfield {
        margin-bottom: 15px;
    }

    .rz-dialog .rz-row .rz-col {
        margin-bottom: 10px;
    }
}

/* Task board layout improvements */
.task-board-container {
    padding: 0 10px;
}

.task-board-column {
    padding: 15px 10px;
    margin-bottom: 20px;
}

.task-column-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--rz-base-300);
}

.task-column-title {
    font-weight: 600;
    font-size: 1.1rem;
}

.task-detail-tabs .rz-form-field{
    width:100%;
}

/* Staff DropDownDataGrid Styles */
#popup-staffDropDownDataGrid {
    height: 70vh !important;
    overflow: auto !important;
}

/* ========================================
   ModuleNavigation Component Styles
   Professional Tab Bar Design
   ======================================== */

.module-nav-wrapper {
    position: relative;
    width: 100%;
    background: #ffffff;
    /* Allow dropdowns to overflow */
    overflow: visible;
}

/* Right fade indicator to show more content */
.module-nav-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.9) 50%, #ffffff);
    pointer-events: none;
    z-index: 1;
}

.module-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    gap: 0;
    padding: 0 48px 0 16px; /* Extra right padding for fade indicator */
    background: #ffffff;
    border-bottom: 2px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    width: 100%;
}

/* Show thin scrollbar on hover for desktop */
.module-nav::-webkit-scrollbar {
    height: 4px;
}

.module-nav::-webkit-scrollbar-track {
    background: transparent;
}

.module-nav::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

.module-nav::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.module-nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    scroll-snap-align: start;
    min-height: 52px;
    padding: 14px 24px;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
}

.module-nav-item:hover:not(.module-nav-item--disabled) {
    background: #f8fafc;
    color: #1e293b;
}

.module-nav-item:focus {
    outline: none;
    background: #f1f5f9;
}

.module-nav-item--active {
    color: #1e40af;
    border-bottom-color: #1e40af;
    background: transparent;
    font-weight: 600;
}

.module-nav-item--active:hover {
    background: #eff6ff;
}

.module-nav-item--active .module-nav-icon {
    color: #1e40af;
}

.module-nav-item--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.module-nav-icon {
    font-size: 20px;
    color: #94a3b8;
    transition: color 0.2s ease;
}

.module-nav-item:hover .module-nav-icon {
    color: #64748b;
}

.module-nav-text {
    line-height: 1.2;
}

/* Badge styles */
.module-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
}

.module-nav-badge--primary {
    background: #3b82f6;
    color: white;
}

.module-nav-badge--secondary {
    background: #64748b;
    color: white;
}

.module-nav-badge--success {
    background: #10b981;
    color: white;
}

.module-nav-badge--warning {
    background: #f59e0b;
    color: white;
}

.module-nav-badge--danger {
    background: #ef4444;
    color: white;
}

.module-nav-badge--info {
    background: #06b6d4;
    color: white;
}

.module-nav-badge--light {
    background: #f1f5f9;
    color: #475569;
}

.module-nav-badge--dark {
    background: #1e293b;
    color: white;
}

/* Mobile responsive - stack items nicely */
@media (max-width: 768px) {
    .module-nav {
        padding: 0 8px;
    }

    .module-nav-item {
        padding: 12px 16px;
        min-height: 48px;
        gap: 8px;
    }

    .module-nav-icon {
        font-size: 18px;
    }

    .module-nav-text {
        font-size: 13px;
    }
}

/* ==========================================================================
   Module Navigation Dropdown Styles
   ========================================================================== */

.module-nav-dropdown {
    position: relative !important;
    display: inline-flex;
    z-index: 10;
}

.module-nav-item--has-dropdown {
    padding-right: 8px;
}

.module-nav-dropdown-icon {
    font-size: 18px !important;
    color: #94a3b8;
    margin-left: -4px;
    transition: transform 0.2s ease;
}

.module-nav-item--active .module-nav-dropdown-icon {
    color: #1e40af;
}

.module-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    padding: 8px 0;
    animation: dropdownFadeIn 0.15s ease;
    /* Ensure visibility */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.module-nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.module-nav-dropdown-item:hover {
    background: #f1f5f9;
    color: #1e40af;
}

.module-nav-dropdown-item:focus {
    outline: none;
    background: #e2e8f0;
}

.module-nav-dropdown-item--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.module-nav-dropdown-item--disabled:hover {
    background: transparent;
    color: #334155;
}

.module-nav-dropdown-item-icon {
    font-size: 18px !important;
    color: #64748b;
}

.module-nav-dropdown-item:hover .module-nav-dropdown-item-icon {
    color: #1e40af;
}

/* Mobile dropdown adjustments */
@media (max-width: 768px) {
    .module-nav-dropdown-menu {
        min-width: 180px;
        left: auto;
        right: 0;
    }

    .module-nav-dropdown-item {
        padding: 12px 16px;
        min-height: 44px;
    }
}

/* ==========================================================================
   Page Layout with Contained Grid Scroll
   Radzen-recommended flexbox pattern for DataGrid scroll containment
   ========================================================================== */

/* Main page container - fills viewport height with flex column layout */
.page-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px); /* Account for header/nav */
    padding: 20px;
    background: white;
    border-radius: 8px;
    margin: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    max-width: calc(100vw - 40px); /* Prevent expanding beyond viewport */
    overflow: hidden; /* Contain all overflow within */
}

/* Fixed header section - doesn't scroll */
.page-header {
    flex-shrink: 0;
}

/* Grid wrapper - expands to fill remaining space, enables scroll */
/* IMPORTANT: height: 0 is required for percentage-based child heights to work */
.grid-container {
    flex: 1;
    height: 0;
    min-height: 0;
    margin-top: 15px;
    overflow: auto; /* Both horizontal and vertical scroll within container */
}

/* DataGrid inside grid-container should fill 100% height */
.grid-container .rz-data-grid {
    height: 100% !important;
}

/* Variant: Full page without card styling */
.page-container--full {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    height: calc(100vh - 80px);
    padding: 20px;
}

/* Variant: Compact page with less padding */
.page-container--compact {
    padding: 15px;
    margin: 15px;
    height: calc(100vh - 110px);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .page-container {
        margin: 10px;
        padding: 15px;
        height: calc(100vh - 100px);
    }

    .page-container--full {
        height: calc(100vh - 60px);
        padding: 15px;
    }
}