/* ==========================================================================
   BLUE THEME - KJSD SCHEDULER REDESIGN
   Scoped strictly under .blue-theme / body.blue-theme
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

body.blue-theme,
.blue-theme {
    --primary-color: #1A4BAA !important;
    --primary-hover-color: #123985 !important;
    --primary-light-bg: #EBF2FF !important;
    --primary-light-border: #C7DAF9 !important;
    --primary-light-text: #1A4BAA !important;
    --body-bg: #F6F8FA !important;
    --card-bg: #FFFFFF !important;
    --card-border: #EAECF0 !important;
    --text-main: #101828 !important;
    --text-secondary: #667085 !important;
    --text-muted: #98A2B3 !important;
    --primary-color: #1A4BAA !important;
    --sf-brand: #1A4BAA !important;
    --sf-brand-dark: #123985 !important;
    --sf-brand-soft: #EFF6FF !important;
    --sf-brand-line: #BEDBFF !important;
    --green: #1A4BAA !important;
    --bs-success-rgb: 17, 136, 230 !important;
}
.blue-theme .sf-wrapper {
    --sf-brand: #1A4BAA !important;
    --sf-brand-dark: #123985 !important;
    --sf-brand-soft: #EFF6FF !important;
    --sf-brand-line: #BEDBFF !important;
}

/* Base Body Styling */
body.blue-theme {
    background-color: #f8fafc !important;
    color: #101828 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
}

/* Global Links */
body.blue-theme a {
    color: #1A4BAA;
}

body.blue-theme a:hover,
body.blue-theme a:focus {
    color: #123985;
}
    body.blue-theme .user-dropdown .dropdown-menu li .dropdown-item:focus {
        color: #fff;
    }
/* ==========================================================================
   SIDEBAR REDESIGN (Figma Node 6-1204 Alignment)
   ========================================================================== */
.blue-theme .wrapper {
    padding-left: calc(var(--sidebar-width) + 144px);
    padding-right: 0px !important;
}
.blue-theme .wrapper.sidebar-close {
    padding-left: var(--sidebar-width);
    padding-right: 0px !important;
}

/* Dashboard page specific: keep space between sidebar and wrapper */
.blue-theme .wrapper:has(#main-dashboard),
.blue-theme .wrapper:has(#dashboardTabs),
.blue-theme .wrapper:has(.sf-dashboard-pane),
.blue-theme .wrapper:has(.student-summary-list),
.blue-theme .wrapper:has(#assign-student-forms),
.blue-theme .wrapper:has(.busing-dashboard),
.blue-theme .wrapper.dashboard-page {
    padding-left: calc(var(--sidebar-width) + 160px);
    padding-right: 15px !important;
}

.blue-theme .wrapper.sidebar-close:has(#main-dashboard),
.blue-theme .wrapper.sidebar-close:has(#dashboardTabs),
.blue-theme .wrapper.sidebar-close:has(.sf-dashboard-pane),
.blue-theme .wrapper.sidebar-close:has(.student-summary-list),
.blue-theme .wrapper.sidebar-close:has(#assign-student-forms),
.blue-theme .wrapper.sidebar-close:has(.busing-dashboard),
.blue-theme .wrapper.sidebar-close.dashboard-page {
    padding-left: calc(var(--sidebar-width) + 15px);
    padding-right: 15px !important;
}
.blue-theme .sidebar {
    width: calc(var(--sidebar-width) + 144px);
}
.blue-theme .sidebar-close .sidebar {
    width: var(--sidebar-width);
}
.blue-theme .sidebar-close .sidebar .sidebar-nav {
    overflow: hidden;
}
.blue-theme .sidebar-close .sidebar .detail {
    display: none;
}
.blue-theme .sidebar .logobar {
    padding: 6px 6px 6px 10px;
    border-bottom: 1px solid #F1F5F9;
    min-height: 50px;
    transform: none;
}

.blue-theme .sidebar .logobar .logo img {
    max-width: 104px !important;
}

.blue-theme .sidebar-nav li.nav-item {
    padding: 0px 6px;
    position: relative;
}
.blue-theme .sidebar-nav li.nav-item.active .dropdown-menu a:before {
    content: '';
    display: none;
}
.blue-theme .sidebar-nav li .dropdown-menu li.nav-item.active a:before {
    content: '';
    display: none;
}
.blue-theme .sidebar-nav li.nav-item a {
    color: #b0b9c7 !important;
    padding: 7.5px 8px;
    font-size: 12px;
    font-weight: 500 !important;
    border-radius: 16px !important;
    transition: all 0.3s ease;
    position: relative;
    width: 100% !important;
    box-shadow: none !important;
}

.blue-theme .sidebar-nav li.nav-item.active a {
    color: #133A80 !important;
    background: #E8F0FC;
    box-shadow: none;
    border-radius: 16px;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.blue-theme .sidebar-nav li.nav-item a:hover {
    color: #133A80 !important;
    box-shadow: none;
    border-radius: 16px;
    font-weight: 600 !important;
}

.blue-theme .sidebar-nav li.nav-item.active a:before {
    content: '';
    width: 6px;
    height: 6px;
    background: #3273E6;
    position: absolute;
    top: 50%;
    right: 8px;
    border-radius: 16px;
    transform: translate(0px, -50%);
}
.blue-theme .sidebar-nav li.nav-item.dropdown.active a.dropdown-toggle:before {
    right: 20px;
}

.blue-theme .sidebar-nav li.nav-item .text {
    padding-left: 8px;
}

.blue-theme .sidebar-nav li.nav-item .icon svg {
    color: #b0b9c7;
    /* stroke: currentColor; */
}
.blue-theme .sidebar-nav li.nav-item.active .icon svg, .blue-theme .sidebar-nav li.nav-item.active a:hover .icon svg {
    color: currentColor;
}
.blue-theme .sidebar-nav li.nav-item.active a .icon svg {
    fill: currentColor;
    stroke: currentColor;
}

.blue-theme .sidebar-nav .dropdown-toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: 5px;
    border-top: 1px solid #b0b9c7;
    border-left: 1px solid #b0b9c7;
    border-right: 0px;
    transform: rotate(225deg);
}

.blue-theme .user-dropdown {
    padding: 10px 16px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    min-height: 50px;
}

.blue-theme .sidebar .user-dropdown .dropdown-link:after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border: 1px solid #b0b9c7;
    border-bottom: 0;
    border-left: 0;
    border-radius: 1px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    color: #b0b9c7;
    margin-left: auto;
}

.blue-theme .user-dropdown .dropdown-link {
    flex: 1;
}

.blue-theme .user-dropdown .dropdown-link .image {
    width: 24px;
    min-width: 24px;
    height: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, #3D71D6 0%, #1A4BAA 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.blue-theme .user-dropdown .dropdown-link .detail h5,
.blue-theme .user-dropdown .dropdown-menu .user-detail h5 {
    color: #1D293D;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
}

.blue-theme .user-dropdown .dropdown-link .detail p {
    font-size: 9px;
    color: #90A1B9;
    font-weight: 400;
}

/* ==========================================================================
   GRID TOOLS CONTAINER STYLING
   ========================================================================== */
.blue-theme .grid-tools {
    padding-left: 12px !important;
    padding-right: 12px !important;
    grid-gap: 8px;
}

/* ==========================================================================
   BUTTONS (btn-primary)
   ========================================================================== */
.blue-theme .btn-primary,
.blue-theme button.btn-primary,
.blue-theme a.btn-primary,
.blue-theme input[type="submit"].btn-primary,
.blue-theme input[type="button"].btn-primary,
.blue-theme .grid-tools button[onclick*="Export"],
.blue-theme .grid-tools button[onclick*="PrintLabels"] {
    background-color: #1A4BAA !important;
    background: #1A4BAA !important;
    color: #ffffff !important;
    border-color: #1A4BAA !important;
    box-shadow: 0px 1px 2px -1px #0000001A, 0px 1px 3px 0px #0000001A !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
}

.blue-theme .btn-primary:hover,
.blue-theme button.btn-primary:hover,
.blue-theme a.btn-primary:hover,
.blue-theme .btn-primary:focus,
.blue-theme button.btn-primary:focus,
.blue-theme .btn-primary:active,
.blue-theme button.btn-primary:active,
.blue-theme .grid-tools button[onclick*="Export"]:hover,
.blue-theme .grid-tools button[onclick*="PrintLabels"]:hover {
    background-color: #133A80 !important;
    background: #133A80 !important;
    border-color: #133A80 !important;
    color: #ffffff !important;
    box-shadow: 0px 2px 4px -1px #00000026, 0px 2px 6px 0px #00000026 !important;
}

/* Base .btn Default Rules */
.blue-theme .btn,
.blue-theme button.btn,
.blue-theme a.btn,
.blue-theme input[type="button"].btn,
.blue-theme input[type="submit"].btn {
    border-radius: 16px !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
}

/* ==========================================================================
   BUTTONS (btn-border-gray / Secondary Bordered Buttons)
   ========================================================================== */
.blue-theme .btn-border-gray,
.blue-theme .btn-border,
.blue-theme button.btn-border-gray,
.blue-theme a.btn-border-gray,
.blue-theme .grid-tools .btn-border:not([onclick*="Export"]):not([onclick*="PrintLabels"]),
.blue-theme .grid-tools .btn-transparent {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    color: #45556C !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    line-height: 16.5px !important;
    text-align: center !important;
    border-radius: 16px !important;
    padding: 6px 14px !important;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease-in-out !important;
}

.blue-theme .btn-border-gray:hover,
.blue-theme .btn-border:hover,
.blue-theme button.btn-border-gray:hover,
.blue-theme a.btn-border-gray:hover,
.blue-theme .grid-tools .btn-border:not([onclick*="Export"]):not([onclick*="PrintLabels"]):hover,
.blue-theme .grid-tools .btn-transparent:hover {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    color: #1E293B !important;
}

.blue-theme .btn-border-gray .icon,
.blue-theme .btn-border-gray svg,
.blue-theme .btn-border-gray i {
    color: #45556C !important;
    fill: #45556C !important;
    stroke: #45556C !important;
}

/* ==========================================================================
   INPUTS & SEARCH FIELDS
   ========================================================================== */
.blue-theme .form-search {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.blue-theme .field-search,
.blue-theme input.field-search,
.blue-theme input[type="text"].field-search,
.blue-theme #studentSearchText {
    height: 28px !important;
    padding-right: 10px !important;
    padding-left: 28px !important;
    border-radius: 16px !important;
    border: 1px solid #E2E8F0 !important;
    background: #F8FAFC !important;
    background-color: #F8FAFC !important;
    color: #45556C !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 11px !important;
    transition: all 0.2s ease-in-out !important;
}

.blue-theme .form-search .btn-search {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.blue-theme .form-search .btn-search svg,
.blue-theme .form-search .btn-search .icon {
    fill: #90A1B9 !important;
    color: #90A1B9 !important;
}

.blue-theme .field-search::placeholder,
.blue-theme input.field-search::placeholder,
.blue-theme #studentSearchText::placeholder {
    color: #90A1B9 !important;
    font-size: 11px !important;
}

.blue-theme .field-search:focus,
.blue-theme #studentSearchText:focus {
    background-color: #FFFFFF !important;
    border-color: #1A4BAA !important;
    box-shadow: 0 0 0 3px rgba(26, 75, 170, 0.1) !important;
    outline: none !important;
}

/* ==========================================================================
   AG GRID HEADER STYLING
   ========================================================================== */
.blue-theme .ag-theme-balham .ag-header-cell-text,
.blue-theme .ag-theme-balham .ag-header-cell-label,
.blue-theme .ag-header-cell-text,
.blue-theme .ag-header-cell-label {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    line-height: 15px !important;
    letter-spacing: 0.25px !important;
    text-transform: uppercase !important;
    color: #62748E !important;
}

.blue-theme .ag-theme-balham,
body.blue-theme .ag-theme-balham,
.blue-theme .aggrid-table .ag-theme-balham,
.blue-theme .ag-root-wrapper {
    --ag-row-height: 33px !important;
    --ag-header-height: 33px !important;
    --ag-row-hover-color: #E5EDFA !important;
    border-top: none !important;
}

.blue-theme .ag-theme-balham .ag-header,
.blue-theme .ag-header {
    background-color: #f2f5f9 !important;
    background: #f2f5f9 !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

/* ==========================================================================
   AG GRID ROW CELL TEXT STYLING
   ========================================================================== */
.blue-theme .ag-theme-balham .ag-cell,
.blue-theme .ag-theme-balham .ag-cell-value,
.blue-theme .ag-cell,
.blue-theme .ag-cell-value {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: 0px !important;
    color: #000000 !important;
    display: flex !important;
    align-items: center !important;
}

/* ==========================================================================
   AG GRID ROW GROUP DROP PANEL ("Drag here to set row groups")
   ========================================================================== */
.blue-theme .ag-theme-balham .ag-column-drop-wrapper,
.blue-theme .ag-theme-balham .ag-column-drop,
.blue-theme .ag-column-drop-wrapper,
.blue-theme .ag-column-drop {
    height: 23px !important;
    min-height: 23px !important;
    padding: 4px 12px !important;
    opacity: 1 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 9px !important;
    color: #62748E !important;
}

.ag-theme-balham .ag-ltr .ag-column-drop-horizontal {
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    border: none;
    border: none !important;
}

/* ==========================================================================
   AG GRID EVEN ROW BACKGROUND
   ========================================================================== */

.blue-theme .ag-theme-balham .ag-row-odd,
.blue-theme .ag-row-odd {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
}

/* ==========================================================================
   AG GRID LAST NAME & FIRST NAME COLUMN STYLING
   ========================================================================== */
.blue-theme .ag-theme-balham .ag-cell[col-id="lastName"],
.blue-theme .ag-cell[col-id="lastName"],
.blue-theme .ag-cell-last-name,
.blue-theme .cell-last-name {
    color: #000000 !important;
}

.blue-theme .ag-theme-balham .ag-cell[col-id="firstName"],
.blue-theme .ag-cell[col-id="firstName"],
.blue-theme .ag-cell-first-name,
.blue-theme .cell-first-name {
    color: #000000 !important;
}

.blue-theme .ag-theme-balham .ag-cell[col-id="iepCoordinator"],
.blue-theme .ag-cell[col-id="iepCoordinator"],
.blue-theme .ag-cell-iep-coordinator,
.blue-theme .cell-iep-coordinator {
    color: #000000 !important;
}

/* ==========================================================================
   PROGRAM TYPE BADGE STYLES
   ========================================================================== */
.blue-theme .badge-itinerant-girls,
.blue-theme .ag-cell[col-id="programType"] .badge-itinerant-girls {
    background-color: #EFF6FF !important;
    background: #EFF6FF !important;
    color: #1447E6 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-weight: 500 !important;
    font-size: 10px !important;
    line-height: 15px !important;
    border-radius: 16px !important;
    padding: 2px 6px !important;
    display: inline-block !important;
}

.blue-theme .badge-preschool-itinerant,
.blue-theme .ag-cell[col-id="programType"] .badge-preschool-itinerant {
    background-color: #F5F3FF !important;
    background: #F5F3FF !important;
    color: #7008E7 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-weight: 500 !important;
    font-size: 10px !important;
    line-height: 15px !important;
    border-radius: 16px !important;
    padding: 2px 6px !important;
    display: inline-block !important;
}

.blue-theme .badge-special-class,
.blue-theme .ag-cell[col-id="programType"] .badge-special-class {
    background-color: #FFF3EF !important;
    background: #FFF3EF !important;
    color: #CA3500 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-weight: 500 !important;
    font-size: 10px !important;
    line-height: 15px !important;
    border-radius: 16px !important;
    padding: 2px 6px !important;
    display: inline-block !important;
}

.blue-theme .badge-itinerant-boys,
.blue-theme .ag-cell[col-id="programType"] .badge-itinerant-boys {
    background-color: #E8F0FC !important;
    background: #E8F0FC !important;
    color: #133A80 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-weight: 500 !important;
    font-size: 10px !important;
    line-height: 15px !important;
    border-radius: 16px !important;
    padding: 2px 6px !important;
    display: inline-block !important;
}

/* ==========================================================================
   SITE COLUMN BADGE STYLES
   ========================================================================== */
.blue-theme .badge-site,
.blue-theme .ag-cell[col-id="offSite"] .badge-site,
.blue-theme .ag-cell[col-id="site"] .badge-site {
    border: 1px solid #E2E8F0 !important;
    border-top: 1px solid #E2E8F0 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    line-height: 15px !important;
    background-color: #F1F5F9 !important;
    background: #F1F5F9 !important;
    color: #314158 !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    display: inline-block !important;
}

/* ==========================================================================
   ENROLLMENT COLUMN BADGE STYLES (DB, AH, ML, PW, HR)
   ========================================================================== */
.blue-theme .badge-enrollment,
.blue-theme .ag-cell[col-id="building"] .badge-enrollment {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    line-height: 15px !important;
    border-radius: 16px !important;
    padding: 2px 6px !important;
    display: inline-block !important;
}

.blue-theme .badge-enrollment-db,
.blue-theme .ag-cell[col-id="building"] .badge-enrollment-db {
    color: #00598A !important;
    background-color: #DFF2FE !important;
    background: #DFF2FE !important;
}

.blue-theme .badge-enrollment-ah,
.blue-theme .ag-cell[col-id="building"] .badge-enrollment-ah {
    color: #5D0EC0 !important;
    background-color: #EDE9FE !important;
    background: #EDE9FE !important;
}

.blue-theme .badge-enrollment-ml,
.blue-theme .ag-cell[col-id="building"] .badge-enrollment-ml {
    color: #973C00 !important;
    background-color: #FFF3EF !important;
    background: #FFF3EF !important;
}

.blue-theme .badge-enrollment-pw,
.blue-theme .ag-cell[col-id="building"] .badge-enrollment-pw {
    color: #A50036 !important;
    background-color: #FFE4E6 !important;
    background: #FFE4E6 !important;
}

.blue-theme .badge-enrollment-hr,
.blue-theme .ag-cell[col-id="building"] .badge-enrollment-hr {
    color: #0E2D66 !important;
    background-color: #C8DAFA !important;
    background: #C8DAFA !important;
}

/* ==========================================================================
   AG GRID SELECTED ROW STYLING
   ========================================================================== */
.blue-theme .ag-theme-balham .ag-row-selected,
.blue-theme .ag-row-selected {
    background-color: #E5EDFA !important;
    background: #E5EDFA !important;
    border-style: solid !important;
    border-color: #1A4BAA !important;
    border-top-width: 0px !important;
    border-right-width: 0px !important;
    border-bottom-width: 1px !important;
    border-left-width: 2px !important;
}

.blue-theme .ag-theme-balham .ag-row-selected .ag-cell,
.blue-theme .ag-row-selected .ag-cell {
    background-color: #E5EDFA !important;
    background: #E5EDFA !important;
}

/* ==========================================================================
   AG GRID HOVER ROW STYLING
   ========================================================================== */
.blue-theme .ag-theme-balham .ag-row-hover,
.blue-theme .ag-row-hover,
.blue-theme .ag-theme-balham .ag-row:hover,
.blue-theme .ag-row:hover {
    background-color: #E5EDFA !important;
    background: #E5EDFA !important;
}

.blue-theme .ag-theme-balham .ag-row-hover .ag-cell,
.blue-theme .ag-row-hover .ag-cell,
.blue-theme .ag-theme-balham .ag-row:hover .ag-cell,
.blue-theme .ag-row:hover .ag-cell {
    background-color: #E5EDFA !important;
    background: #E5EDFA !important;
}

/* ==========================================================================
   REMOVE CELL FOCUS BORDER / OUTLINE
   ========================================================================== */
.blue-theme .ag-theme-balham .ag-cell-focus,
.blue-theme .ag-cell-focus,
.blue-theme .ag-cell:focus,
.blue-theme .ag-cell-focus:not(.ag-cell-range-selected) {
    border: 1px solid transparent !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.blue-theme .modal-rightslide .modal-content {
    padding: 0 !important;
}

.blue-theme .modal-detail .detail-tab {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.blue-theme .modal-detail .detail-tab .nav-tabs {
    flex-basis: 176px;
    padding: 8px 6px;
    background: #F8FAFC;
    border-right: 1px solid #E2E8F0;
        height: calc(100vh - 176px);
}

.blue-theme .nav-vertical-tab li.nav-item .nav-link {
    cursor: pointer;
    width: 100%;
    text-align: left;
    border: 1px solid transparent !important;
    padding: 9px 10px;
    color: #62748E !important;
    font-size: 12px;
    font-weight: 500;
    border-radius: 16px;
    box-shadow: none;
    background-color: transparent;
    background: transparent !important;
    display: flex;
    align-items: center;
}

.blue-theme .nav-vertical-tab li.nav-item .nav-link:hover {
    color: #143880 !important;

}
.blue-theme .nav-vertical-tab li.nav-item .nav-link.active {
    background: transparent !important;
    border: 1px solid var(--primary-color) !important;
    color: #143880 !important;
    padding-left: 10px;
    box-shadow: 0px 1px 3px 0px #0000001A;
    font-weight: 600;

}

.blue-theme .modal-detail .detail-tab .tab-content .tab-pane {
    margin-right: 0 !important;
    padding: 16px !important;
    height: calc(100vh - 176px);
}
.blue-theme .modal-detail .detail-tab .tab-content .student-row {
    height: 100%;
}

/* ==========================================================================
   STUDENT PRIMARY DETAIL (2-Column Grid Layout matching Figma)
   ========================================================================== */
.blue-theme .student-primary-detail {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 24px !important;
    padding: 0px !important;
    background: transparent !important;
}

.blue-theme .student-primary-detail .form-group-inline {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.blue-theme .student-primary-detail .form-group-inline label.control-label,
.blue-theme .student-primary-detail .form-group-inline .control-label {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 15px !important;
    letter-spacing: 0.25px !important;
    text-transform: uppercase !important;
    color: #90A1B9 !important;
    margin-bottom: 2px !important;
    width: auto !important;
    min-width: auto !important;
    float: none !important;
}

.blue-theme .student-primary-detail .form-group-inline label.control-label::after,
.blue-theme .student-primary-detail .form-group-inline .control-label::after {
    content: "" !important;
    display: none !important;
}

.blue-theme .student-primary-detail .form-group-inline .value,
.blue-theme .student-primary-detail .form-group-inline span.value {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    color: #0F172B !important;
    width: auto !important;
}

.blue-theme .student-primary-detail .form-group-inline .value::before,
.blue-theme .student-primary-detail .form-group-inline span.value::before {
    content: "" !important;
    display: none !important;
    padding-right: 0 !important;
}

.blue-theme .modal-detail .detail-tab .tab-content .student-col .form-group-inline .control-label {
    padding-left: 0 !important;
    flex-basis: auto !important;
}

.blue-theme .modal-detail .detail-tab .tab-content .student-col .form-group-inline .value {
    padding-left: 0px !important;
}

/* ==========================================================================
   CONTACT INFO CARDS VISIBILITY TOGGLE (Default vs Blue Theme)
   ========================================================================== */
.blue-theme-contact-card {
    display: none !important;
}

body.blue-theme .default-contact-card {
    display: none !important;
}

body.blue-theme .blue-theme-contact-card {
    display: flex !important;
}

/* ==========================================================================
   CONTACT INFO CARDS (Exact Figma Blue Theme Alignment)
   ========================================================================== */
.blue-theme .contact-info .blue-theme-contact-card {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
}

.blue-theme .contact-info .contact-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background-color: #B4D3FE !important;
    background: #B4D3FE !important;
    color: #123985 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-right: 10px !important;
}

.blue-theme .contact-info .contact-body h4 {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #0F172B !important;
    margin-bottom: 0 !important;
}

.blue-theme .contact-info .badge-relationship {
    background-color: #E2E8F0 !important;
    background: #E2E8F0 !important;
    color: #62748E !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    border-radius: 12px !important;
    padding: 4px 8px !important;
}

.blue-theme .contact-info .badge-primary-contact,
.blue-theme .contact-info .btn-badge,
.blue-theme .contact-info .badge-primary {
    background-color: #E5EDFA !important;
    background: #E5EDFA !important;
    color: #143880 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 4px 8px !important;
    border: none !important;
}

.blue-theme .contact-info .contact-address {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 10px !important;
    color: #62748E !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
}

.blue-theme .contact-info .contact-address i,
.blue-theme .contact-info .contact-address svg {
    color: #62748E !important;
    fill: #62748E !important;
}

.blue-theme .contact-info .phone-pill {
    display: inline-flex !important;
    align-items: center !important;
    background: #EFF6FF !important;
    background-color: #EFF6FF !important;
    border: 1px solid #BEDBFF !important;
    border-radius: 16px !important;
    padding: 4px 10px !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #155DFC !important;
    cursor: pointer !important;
}

.blue-theme .contact-info .phone-pill svg,
.blue-theme .contact-info .phone-pill i {
    fill: #155DFC !important;
    color: #155DFC !important;
}

.blue-theme .contact-info {
    margin-top: 16px;
    border-top: 1px solid #F1F5F9;
    padding-top: 16px;
}


.blue-theme .modal-detail .detail-tab .tab-content .student-row .notation-col {
    flex-basis: 17% !important;
    min-width: 17% !important;
    border-left: 1px solid #E2E8F0;
    background: #F8FAFC66;
    margin-top: -16px !important;
    margin-right: -16px;
}

.blue-theme .modal-detail .detail-tab .tab-content .student-row .notation-col h3 {
    padding: 10px 12px !important;
    border-bottom: 1px solid #F1F5F9;
    color: #314158 !important;
    font-weight: 600;
    font-size: 11px !important;
    margin-bottom: 0 !important;
    text-transform: uppercase;
}

.blue-theme .modal-detail .detail-tab .tab-content .notation-box {
    background: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    height: 100%;
}

.blue-theme .modal-detail .detail-tab .tab-content .student-row .notation-col .notation-items-wrapper {
    display: flex;
    align-items: self-start;
    grid-gap: 8px;
    position: relative;
}
.modal-detail .detail-tab .tab-content .student-row .notation-col .initials {
    display: none;
}
.blue-theme .modal-detail .detail-tab .tab-content .student-row .notation-col .initials {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    border-radius: 50%;
    background: #D6E4FF;
    color: #143880;
    font-size: 8px;
    font-weight: 700;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blue-theme .modal-detail .detail-tab .tab-content .notation-box .notation-items {
    border: 1px solid #97B3E999 !important;
    background: #EAF1FF99 !important;
    border-radius: 16px !important;
    padding: 10px;
}

.blue-theme .modal-detail .detail-tab .tab-content .notation-box .notation-items p {
    font-size: 10px;
}

.blue-theme .modal-detail .detail-tab .tab-content .notation-box .notation-items .text p:first-child {
    color: #90A1B9;
}

.blue-theme .modal-detail .detail-tab .tab-content .student-row .notation-col .notation-items-wrapper .notation-items:before {
    content: '';
    background: #F1F5F9;
    width: 1px;
    position: absolute;
    display: block;
    height: calc(100% - 10px);
    left: 10px;
    top: 0;
    z-index: 1;
}
.blue-theme .user-box.user-box-row {
    padding: 16px 20px 10px 20px !important;
    display: flex;
    align-items: self-start;
    grid-gap: 16px;
    border-bottom: 1px solid #E2E8F0;
    background-color: #ffffff !important;
    border-radius: 0 !important;
}
.user-box.user-box-row .intials {
    display: none;
}
.blue-theme .user-box.user-box-row .intials {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0248D1 0%, #1A4BAA 100%);
    color: #FFFFFF;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0px 4px 6px -1px #1A4BAA54;
}
.blue-theme .modal-detail .user-box .top {
    border-bottom: 0 !important;
    align-items: self-start;
    padding-bottom: 0 !important;
}
.blue-theme .name {
    width: auto !important;
}
.blue-theme .modal-detail .user-box .summary {
    padding-top: 0 !important;
}
.blue-theme .modal-detail .user-box .summary .control-label {
    font-size: 9px !important;
    font-weight: 500 !important;
}
.blue-theme .title .action-tool {
    margin-left: 8px !important;
}
/* ==========================================================================
   TITLE & MODAL ACTION BUTTONS (Matching Figma Pill Design)
   ========================================================================== */
.blue-theme .modal-detail .title .btn-edit,
.blue-theme .modal-rightslide .title .btn-edit,
.blue-theme .title .btn-edit,
.blue-theme .title .btn-border,
.blue-theme .modal-detail .title .btn-border {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    color: #314158 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    border-radius: 16px !important;
    padding: 5px 14px !important;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease-in-out !important;
}

.blue-theme .modal-detail .title .btn-edit:hover,
.blue-theme .modal-rightslide .title .btn-edit:hover,
.blue-theme .title .btn-edit:hover,
.blue-theme .title .btn-border:hover,
.blue-theme .modal-detail .title .btn-border:hover {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    color: #0F172B !important;
}

/* Delete Action Button (Red Bordered Pill) */
.blue-theme .title .btn-border[onclick*="delete"],
.blue-theme .title .btn-border[onclick*="Delete"],
.blue-theme .title .btn-edit[onclick*="delete"],
.blue-theme .title .btn-edit[onclick*="Delete"],
.blue-theme .modal-detail .title .btn-edit[onclick*="delete"],
.blue-theme .modal-detail .title .btn-edit[onclick*="Delete"],
.blue-theme .btn-delete {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid #FCA5A5 !important;
    color: #E11D48 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    border-radius: 16px !important;
    padding: 5px 14px !important;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease-in-out !important;
}

.blue-theme .title .btn-border[onclick*="delete"]:hover,
.blue-theme .title .btn-border[onclick*="Delete"]:hover,
.blue-theme .title .btn-edit[onclick*="delete"]:hover,
.blue-theme .title .btn-edit[onclick*="Delete"]:hover,
.blue-theme .modal-detail .title .btn-edit[onclick*="delete"]:hover,
.blue-theme .modal-detail .title .btn-edit[onclick*="Delete"]:hover,
.blue-theme .btn-delete:hover {
    background-color: #FFF5F5 !important;
    background: #FFF5F5 !important;
    border-color: #F87171 !important;
    color: #BE123C !important;
}

/* Maximize / Minimize Circular Icon Button */
.blue-theme .minimize-maximize-student-screen,
.blue-theme .action-tool .minimize-maximize-student-screen {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    border: 1px solid #E2E8F0 !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: #62748E !important;
    transition: all 0.2s ease-in-out !important;
}

.blue-theme .minimize-maximize-student-screen:hover,
.blue-theme .action-tool .minimize-maximize-student-screen:hover {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    color: #1A4BAA !important;
}

.blue-theme .minimize-maximize-student-screen svg {
    width: 13px !important;
    height: 13px !important;
    fill: #62748E !important;
    color: #62748E !important;
}

.blue-theme .minimize-maximize-student-screen:hover svg {
    fill: #1A4BAA !important;
    color: #1A4BAA !important;
}
.blue-theme-icon {
    display: none !important;
}

.blue-theme .nav-item .icon {
    display: none !important;
}
.blue-theme .nav-item .blue-theme-icon {
    display: flex !important;
}

/* ==========================================================================
   REPLACE #CEE5C7 WITH #E5EDFA FOR BLUE THEME
   ========================================================================== */
.blue-theme .student-summary-list ul.active-list li .box-sm .count {
    background-color: #E5EDFA !important;
    background: #E5EDFA !important;
    color: #1A4BAA !important;
}

.blue-theme .session-section .progress-lists .items.active {
    background-color: #E5EDFA !important;
    background: #E5EDFA !important;
    box-shadow: none !important;
}

/* ==========================================================================
   REPLACE #57c738 AND #4FB030 WITH #1A4BAA FOR BLUE THEME
   ========================================================================== */

.blue-theme [style*="#57c738"],
.blue-theme [style*="#4FB030"],
.blue-theme [style*="#79cc5c"] {
    background: linear-gradient(135deg, #0248D1 0%, #1A4BAA 100%) !important;
    background-color: #1A4BAA !important;
}

.blue-theme .session-section .progress-lists .items.active .progress-bar,
.blue-theme .session-section .progress-bar.bg-green,
.blue-theme .bg-green {
    background-color: #1A4BAA !important;
    background: #1A4BAA !important;
}

.blue-theme .text-green,
.blue-theme .nav-tabs-secondary li.nav-item .nav-link.active,
.blue-theme .nav-tabs-secondary li.nav-item .nav-link.active:focus,
.blue-theme .nav-tabs-secondary li.nav-item .nav-link.active:hover {
    color: #1A4BAA !important;
    border-top-color: #1A4BAA !important;
}

.blue-theme .sf-tab-btn.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0248D1 0%, #1A4BAA 100%) !important;
    box-shadow: 0 4px 12px rgba(26, 75, 170, 0.3) !important;
}

.blue-theme .sf-tab-btn.active svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.blue-theme #main-dashboard .progress-lists .items .progress-bar {
    background: linear-gradient(90deg, #0248D1, #1A4BAA) !important;
    border-radius: 4px !important;
}

.blue-theme #main-dashboard .progress-lists .items.active .label {
    color: #1A4BAA !important;
}

.blue-theme #main-dashboard .summay-list .card:hover {
    box-shadow: 0 16px 32px -8px rgba(26, 75, 170, 0.12) !important;
    border-color: #BEDBFF !important;
}

.blue-theme .sf-badge.success {
    background: var(--sf-brand-soft) !important;
    color: #123985 !important;
    border-color: var(--sf-brand-line) !important;
}

.blue-theme .sf-badge.success::before {
    background: #1A4BAA !important;
}

/* ==========================================================================
   REPLACE GREEN BOX SHADOWS WITH BLUE THEME BOX SHADOWS
   ========================================================================== */
.sidebar-nav .nav-item.dropdown ul.dropdown-menu li.nav-item.active a {
    box-shadow: 0px 3px 20px rgba(26, 75, 170, 0.35) !important;
}

.blue-theme [style*="rgba(79, 176, 48"],
.blue-theme [style*="rgb(79 176 48"] {
    box-shadow: 0px 3px 20px rgba(26, 75, 170, 0.35) !important;
}

/* ==========================================================================
   REPLACE .bg-color-4 & ALL GREEN BACKGROUNDS WITH BLUE THEME TINTS
   ========================================================================== */
.blue-theme .bg-color-4,
.blue-theme [style*="#D7ECD9"],
.blue-theme [style*="D7ECD9"] {
    background-color: #E5EDFA !important;
    background: #E5EDFA !important;
}

.blue-theme .badge-success,
.blue-theme .badge-green,
.blue-theme .bg-success-soft {
    background-color: #EFF6FF !important;
    background: #EFF6FF !important;
    color: #1A4BAA !important;
    border-color: #BEDBFF !important;
}

/* ==========================================================================
   GLOBAL OVERRIDE: REPLACE ALL #4FB030 GREEN INSTANCES WITH #1A4BAA
   ========================================================================== */
.blue-theme .form-switch-primary .form-check-input:checked {
    background-color: #1A4BAA !important;
    border-color: #1A4BAA !important;
}

.blue-theme .ag-theme-balham input[type="checkbox"]:checked {
    background-color: #1A4BAA !important;
    border-color: #1A4BAA !important;
}

.blue-theme .bus-schedule .arriving {
    background: #1A4BAA !important;
    background-color: #1A4BAA !important;
}

.blue-theme .recording-active-field,
.blue-theme .recording-active-field:focus {
    border: 2px solid #1A4BAA !important;
    background-color: #EFF6FF !important;
    box-shadow: 0 0 15px rgba(26, 75, 170, 0.6) !important;
}

.blue-theme .cell-value-changed-success {
    background: rgba(26, 75, 170, 0.1) !important;
    border-color: rgba(26, 75, 170, 0.1) !important;
}

.blue-theme .reportsContent .reportLists li .box .icon {
    color: #1A4BAA !important;
    background: rgba(26, 75, 170, 0.13) !important;
    background-color: rgba(26, 75, 170, 0.13) !important;
}

.blue-theme [style*="rgba(79, 176, 48, 0.13)"],
.blue-theme [style*="rgba(79,176,48,0.13)"] {
    background: rgba(26, 75, 170, 0.13) !important;
    background-color: rgba(26, 75, 170, 0.13) !important;
    color: #1A4BAA !important;
}
.blue-theme .modal-report-detail {
    width: calc(100% - var(--sidebar-width) - 156px);
}

/* ==========================================================================
   REPLACE #3da828 WITH #1A4BAA FOR BLUE THEME
   ========================================================================== */
.blue-theme [style*="#3da828"],
.blue-theme [style*="3da828"],
.blue-theme .bd-toggle.active .bd-switch {
    background-color: #1A4BAA !important;
    background: #1A4BAA !important;
    border-color: #1A4BAA !important;
}
.blue-theme .bd-shift-btn.active {
    background-color: #1A4BAA !important;
    background: #1A4BAA !important;
    border-color: #1A4BAA !important;
}
.blue-theme .modal-detail .user-box .top .name h4 {
    white-space: nowrap;
    margin-right: 8px;
}
.blue-theme .modal-detail .user-box {
    background: #ffffff;
    border-bottom: 1px solid #E2E8F0;
}

.blue-theme .student-gridTable {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.blue-theme .summary-section.collapse.show+.student-gridTable {
    height: calc(100vh - 58px);
}

.blue-theme .summary-section.collapse:not(.show)+.student-gridTable,
.blue-theme .summary-section.collapsing+.student-gridTable {
    height: calc(100vh - 192px);
}

.blue-theme .summary-section {
    padding: 0px 12px;
}

.blue-theme .rsc-widget {
    margin: 0 12px;
    width: calc(100% - 24px);
}

/* ==========================================================================
   KJ-PANEL BLUE THEME STYLING
   ========================================================================== */
.blue-theme .kj-panel {
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

/* Base kj-btn in Blue Theme */
.blue-theme .kj-panel .kj-btn,
.blue-theme .kj-panel .kj-btn--ghost,
.blue-theme .kj-panel .kj-btn--primary,
.blue-theme .kj-panel .kj-btn--outline,
.blue-theme .kj-panel .kj-btn-new,
.blue-theme .kj-panel .btn-new,
.blue-theme .kj-panel .kj-panel-header button,
.blue-theme .kj-panel .kj-panel .kj-btn {
    font-size: 12px !important;
    font-weight: 600 !important;
    height: 23px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    line-height: 23px !important;
}

.blue-theme .kj-panel-icon,
.blue-theme .kj-panel-icon--red,
.blue-theme .kj-panel-icon--blue,
.blue-theme .kj-panel-icon--green,
.blue-theme .kj-panel--red .kj-panel-icon,
.blue-theme .kj-panel--blue .kj-panel-icon,
.blue-theme .kj-panel--green .kj-panel-icon,
.blue-theme .kj-panel-welcome-icon {
    border: none !important;
    box-shadow: none !important;
}

.blue-theme .kj-panel-header {
    background: #ffffff !important;
    border-bottom: none !important;
    padding: 16px !important;
}

.blue-theme .kj-panel-header::before {
    display: none !important;
}

/* kj-panel--red (Medical Incident) */
.blue-theme .kj-panel--red {
    border-left: 1px solid #E5E7EB !important;
}

.blue-theme .kj-panel--red .kj-panel-icon,
.blue-theme .kj-panel-icon--red,
.blue-theme .kj-panel--red .kj-panel-welcome-icon {
    background-color: #FDF2F2 !important;
    background: #FDF2F2 !important;
    color: #EF4444 !important;
    border: none !important;
    box-shadow: none !important;
}

.blue-theme .kj-panel--red .kj-btn--ghost,
.blue-theme .kj-panel--red .btn-new,
.blue-theme .kj-panel--red .kj-panel-header button:not(.btn-primary),
.blue-theme .kj-panel--red .kj-btn-new {
    background-color: #FDF2F2 !important;
    background: #FDF2F2 !important;
    color: #EF4444 !important;
    border: 1px solid #EF4444 !important;
    border-color: #EF4444 !important;
    border-radius: 6px !important;
}

.blue-theme .kj-panel--red .kj-btn--ghost:hover,
.blue-theme .kj-panel--red .btn-new:hover,
.blue-theme .kj-panel--red .kj-panel-header button:not(.btn-primary):hover,
.blue-theme .kj-panel--red .kj-btn-new:hover {
    background-color: #EF4444 !important;
    background: #EF4444 !important;
    color: #ffffff !important;
    border-color: #EF4444 !important;
}

.blue-theme .kj-panel--red .kj-btn--primary,
.blue-theme .kj-panel--red .btn-primary {
    background-color: #EF4444 !important;
    background: #EF4444 !important;
    color: #ffffff !important;
    border-color: #EF4444 !important;
    border-radius: 6px !important;
}

.blue-theme .kj-panel--red .kj-btn--primary:hover,
.blue-theme .kj-panel--red .btn-primary:hover {
    background-color: #DC2626 !important;
    background: #DC2626 !important;
    border-color: #DC2626 !important;
}

.blue-theme .kj-panel--red .kj-empty-icon,
.blue-theme .kj-panel--red .kj-empty-state i,
.blue-theme .kj-panel--red .kj-empty-state svg,
.blue-theme .kj-panel--red .kj-empty-state .icon {
    color: #EF4444 !important;
}

.blue-theme .kj-panel--red .kj-empty-state strong,
.blue-theme .kj-panel--red .kj-empty-state span strong,
.blue-theme .kj-panel--red .kj-empty-hint strong {
    color: #EF4444 !important;
}

.blue-theme .kj-panel--red .kj-hist-count-badge {
    background-color: #FDF2F2 !important;
    background: #FDF2F2 !important;
    color: #EF4444 !important;
}

.blue-theme .kj-panel--red .kj-share-toggle input:checked+.kj-share-track {
    background-color: #EF4444 !important;
    background: #EF4444 !important;
}

.blue-theme .kj-panel--red .kj-input:focus {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* kj-panel--blue (Communication) */
.blue-theme .kj-panel--blue {
    border-left: 1px solid #E5E7EB !important;
}

.blue-theme .kj-panel--blue .kj-panel-icon,
.blue-theme .kj-panel-icon--blue,
.blue-theme .kj-panel--blue .kj-panel-welcome-icon {
    background-color: #EEF2FF !important;
    background: #EEF2FF !important;
    color: #1188E6 !important;
    border: none !important;
    box-shadow: none !important;
}

.blue-theme .kj-panel--blue .kj-btn--ghost,
.blue-theme .kj-panel--blue .btn-new,
.blue-theme .kj-panel--blue .kj-panel-header button:not(.btn-primary),
.blue-theme .kj-panel--blue .kj-btn-new {
    background-color: #EEF2FF !important;
    background: #EEF2FF !important;
    color: #1188E6 !important;
    border: 1px solid #1188E6 !important;
    border-color: #1188E6 !important;
    border-radius: 6px !important;
}

.blue-theme .kj-panel--blue .kj-btn--ghost:hover,
.blue-theme .kj-panel--blue .btn-new:hover,
.blue-theme .kj-panel--blue .kj-panel-header button:not(.btn-primary):hover,
.blue-theme .kj-panel--blue .kj-btn-new:hover {
    background-color: #1188E6 !important;
    background: #1188E6 !important;
    color: #ffffff !important;
    border-color: #1188E6 !important;
}

.blue-theme .kj-panel--blue .kj-btn--primary,
.blue-theme .kj-panel--blue .btn-primary {
    background-color: #1188E6 !important;
    background: #1188E6 !important;
    color: #ffffff !important;
    border-color: #1188E6 !important;
    border-radius: 6px !important;
}

.blue-theme .kj-panel--blue .kj-btn--primary:hover,
.blue-theme .kj-panel--blue .btn-primary:hover {
    background-color: #0E74C4 !important;
    background: #0E74C4 !important;
    border-color: #0E74C4 !important;
}

.blue-theme .kj-panel--blue .kj-empty-icon,
.blue-theme .kj-panel--blue .kj-empty-state i,
.blue-theme .kj-panel--blue .kj-empty-state svg,
.blue-theme .kj-panel--blue .kj-empty-state .icon {
    color: #1188E6 !important;
}

.blue-theme .kj-panel--blue .kj-empty-state strong,
.blue-theme .kj-panel--blue .kj-empty-state span strong,
.blue-theme .kj-panel--blue .kj-empty-hint strong {
    color: #1188E6 !important;
}

.blue-theme .kj-panel--blue .kj-hist-count-badge {
    background-color: #EEF2FF !important;
    background: #EEF2FF !important;
    color: #1188E6 !important;
}

.blue-theme .kj-panel--blue .kj-share-toggle input:checked+.kj-share-track {
    background-color: #1188E6 !important;
    background: #1188E6 !important;
}

.blue-theme .kj-panel--blue .kj-input:focus {
    border-color: #1188E6 !important;
    box-shadow: 0 0 0 3px rgba(17, 136, 230, 0.15) !important;
}

/* kj-panel--green (Team Meeting) */
.blue-theme .kj-panel--green {
    border-left: 1px solid #E5E7EB !important;
}

.blue-theme .kj-panel--green .kj-panel-icon,
.blue-theme .kj-panel-icon--green,
.blue-theme .kj-panel--green .kj-panel-welcome-icon {
    background-color: #F0FDF4 !important;
    background: #F0FDF4 !important;
    color: #16A34A !important;
    border: none !important;
    box-shadow: none !important;
}

.blue-theme .kj-panel--green .kj-btn--ghost,
.blue-theme .kj-panel--green .btn-new,
.blue-theme .kj-panel--green .kj-panel-header button:not(.btn-primary),
.blue-theme .kj-panel--green .kj-btn-new {
    background-color: #F0FDF4 !important;
    background: #F0FDF4 !important;
    color: #16A34A !important;
    border: 1px solid #16A34A !important;
    border-color: #16A34A !important;
    border-radius: 6px !important;
}

.blue-theme .kj-panel--green .kj-btn--ghost:hover,
.blue-theme .kj-panel--green .btn-new:hover,
.blue-theme .kj-panel--green .kj-panel-header button:not(.btn-primary):hover,
.blue-theme .kj-panel--green .kj-btn-new:hover {
    background-color: #16A34A !important;
    background: #16A34A !important;
    color: #ffffff !important;
    border-color: #16A34A !important;
}

.blue-theme .kj-panel--green .kj-btn--primary,
.blue-theme .kj-panel--green .btn-primary {
    background-color: #16A34A !important;
    background: #16A34A !important;
    color: #ffffff !important;
    border-color: #16A34A !important;
    border-radius: 6px !important;
}

.blue-theme .kj-panel--green .kj-btn--primary:hover,
.blue-theme .kj-panel--green .btn-primary:hover {
    background-color: #15803D !important;
    background: #15803D !important;
    border-color: #15803D !important;
}

.blue-theme .kj-panel--green .kj-empty-icon,
.blue-theme .kj-panel--green .kj-empty-state i,
.blue-theme .kj-panel--green .kj-empty-state svg,
.blue-theme .kj-panel--green .kj-empty-state .icon {
    color: #16A34A !important;
}

.blue-theme .kj-panel--green .kj-empty-state strong,
.blue-theme .kj-panel--green .kj-empty-state span strong,
.blue-theme .kj-panel--green .kj-empty-hint strong {
    color: #16A34A !important;
}

.blue-theme .kj-panel--green .kj-hist-count-badge {
    background-color: #F0FDF4 !important;
    background: #F0FDF4 !important;
    color: #16A34A !important;
}

.blue-theme .kj-panel--green .kj-share-toggle input:checked+.kj-share-track {
    background-color: #16A34A !important;
    background: #16A34A !important;
}

.blue-theme .kj-panel--green .kj-input:focus {
    border-color: #16A34A !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15) !important;
}

.blue-theme .kj-panel-title-text {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

.blue-theme .kj-panel-subtitle-text {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #9CA3AF !important;
}

.blue-theme .kj-panel-history {
    border-top: none !important;
}

.blue-theme .kj-hist-count-badge {
    margin-left: auto !important;
}

.blue-theme .kj-hist-count-badge:empty {
    display: none !important;
}

.blue-theme .kj-history-label {
    justify-content: flex-start !important;
    border-top: none !important;
    border-bottom: none !important;
    color: #6B7280 !important;
}

.blue-theme .kj-history-list:has(.kj-empty-state) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

/* Theme Icon Toggle Rules */
.blue-theme-icon {
    display: none;
}

.blue-theme .blue-theme-icon {
    display: inline-block !important;
}

.blue-theme .default-theme-icon,
.blue-theme .kj-empty-icon i { /*,
.blue-theme .kj-panel-icon svg:not(.blue-theme-icon)*/
    display: none !important;
}

.blue-theme .kj-empty-title,
.blue-theme .kj-empty-hint,
.blue-theme .kj-empty-hint em {
    font-style: normal !important;
}

.blue-theme .kj-empty-title {
    color: #6B7280 !important;
    font-weight: 700 !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.blue-theme .kj-empty-icon,
.blue-theme .kj-empty-icon--red,
.blue-theme .kj-empty-icon--blue,
.blue-theme .kj-empty-icon--green {
    background: transparent !important;
    background-color: transparent !important;
    margin-bottom: 0 !important;
}

.blue-theme #studentCommunication,
body.blue-theme #studentCommunication,
html body.blue-theme #studentCommunication {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
}

.blue-theme .kj-panel-body {
    background-color: #FBFBFB !important;
    background: #FBFBFB !important;
}

.blue-theme .kj-panel-body .kj-label {
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    color: #6B7280 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
}

.blue-theme .kj-panel-body .kj-checkbox-panel {
    gap: 6px !important;
    grid-gap: 6px !important;
}

.blue-theme .kj-panel-body .kj-checkbox-panel .form-check-label,
.blue-theme .kj-panel-body .kj-checkbox-panel label {
    font-weight: 500 !important;
    font-size: 11px !important;
    height: 21px !important;
    color: #6B7280 !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    line-height: 21px !important;
}

.blue-theme .kj-panel-body .kj-toggle-card {
    margin-top: 0 !important;
    border: 1px solid #EFF6FF !important;
    background: #F4F6F8 !important;
    background-color: #F4F6F8 !important;
    border-radius: 8px !important;
}

.blue-theme .kj-panel-body .kj-input,
.blue-theme .kj-panel-body select.kj-input,
.blue-theme .kj-panel-body .kj-tp-trigger,
.blue-theme .kj-panel-body input.form-control,
.blue-theme .kj-panel-body select.form-select,
.blue-theme .kj-panel-body input[type="text"],
.blue-theme .kj-panel-body input[type="number"],
.blue-theme .kj-panel-body input[type="date"],
.blue-theme .kj-panel-body input[type="time"],
.blue-theme .kj-panel-body select,
.blue-theme .kj-panel-body textarea {
    border: 1px solid #E2E7EE !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    height: 32px !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    color: #111827 !important;
}

.blue-theme .kj-panel-body textarea.kj-input,
.blue-theme .kj-panel-body textarea.kj-textarea,
.blue-theme .kj-panel-body .kj-textarea,
.blue-theme .kj-panel-body textarea {
    height: 60px !important;
    min-height: 60px !important;
}

.blue-theme .kj-panel-body .kj-input::placeholder,
.blue-theme .kj-panel-body input.form-control::placeholder,
.blue-theme .kj-panel-body select.form-select::placeholder,
.blue-theme .kj-panel-body input::placeholder,
.blue-theme .kj-panel-body textarea::placeholder,
.blue-theme .kj-panel-body .kj-textarea::placeholder {
    color: #9CA3AF !important;
    opacity: 1 !important;
}

.blue-theme .kj-panel-body textarea::placeholder,
.blue-theme .kj-panel-body .kj-textarea::placeholder,
.blue-theme .kj-panel-body textarea.kj-input::placeholder,
.blue-theme .kj-panel-body textarea::placeholder {
    font-size: 12px !important;
}

.blue-theme .kj-panel-body .kj-share-track {
    width: 36px !important;
    height: 20px !important;
}

.blue-theme .kj-panel-body .kj-share-track::after {
    width: 16px !important;
    height: 16px !important;
    top: 2px !important;
    left: 2px !important;
}

.blue-theme .kj-panel-body .kj-share-toggle input:checked+.kj-share-track::after,
.blue-theme .kj-panel-body .kj-share-toggle input:checked~.kj-share-track::after {
    transform: translateX(16px) !important;
}

.blue-theme .btn-light-primary {
    background: rgba(17, 136, 230, 0.1) !important;
    border-color: rgba(17, 136, 230, 0.1) !important;
    color: var(--primary-color, #1188E6) !important;
}

.blue-theme .btn-light-primary:hover,
.blue-theme .btn-light-primary:focus,
.blue-theme .btn-light-primary:not(:disabled):not(.disabled):active {
    background: var(--primary-hover-color, #0e70be) !important;
    border-color: var(--primary-hover-color, #0e70be) !important;
    color: #ffffff !important;
}

.blue-theme #studentTeacherForms,
.blue-theme #studentTherapyForms,
.blue-theme .studentTeacherForms,
.blue-theme .studentTherapyForms {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.blue-theme .gf-goals-header-actions .gf-btn-save,
.blue-theme .gf-goals-header-actions .js-open-goal-form-btn,
.blue-theme .gf-goals-header-actions .gf-editor-btn--save,
.blue-theme .sg-clean-wrapper .gf-btn-save {
    background: linear-gradient(135deg, #1188E6 0%, #0E70BE 100%) !important;
    border: 1px solid #0E70BE !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(17, 136, 230, 0.28) !important;
}

.blue-theme .sg-clean-wrapper .gf-btn-save:hover,
.blue-theme .gf-goals-header-actions .gf-btn-save:hover,
.blue-theme .gf-goals-header-actions .js-open-goal-form-btn:hover,
.blue-theme .gf-goals-header-actions .gf-editor-btn--save:hover {
    background: linear-gradient(135deg, #0E70BE 0%, #0C5FA2 100%) !important;
    box-shadow: 0 2px 5px rgba(17, 136, 230, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.blue-theme .gf-progress-strip .btn-add-on-demand-form {
    background: linear-gradient(180deg, #1188E6 0%, #0E70BE 100%) !important;
    border: 1px solid #0C5FA2 !important;
    color: #ffffff !important;
}

.blue-theme .gf-progress-strip .btn-add-on-demand-form:hover {
    background: linear-gradient(180deg, #0E70BE 0%, #0C5FA2 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 6px rgba(14, 112, 190, 0.35) !important;
    color: #ffffff !important;
}

.blue-theme .administration-wrapper,
.blue-theme #administration-wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.blue-theme .reportsContent,
.blue-theme #reportsContent {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.blue-theme h1.mainTitle:not(:has(button)),
.blue-theme h1.mainTitle:has(+ .reportsContent) {
    margin-left: 16px !important;
    margin-right: 16px !important;
}

.blue-theme .content-wrapper,
.blue-theme #content-wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.blue-theme .buslist-tabs,
.blue-theme #buslist-tabs {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.blue-theme #genericMain,
.blue-theme .genericMain {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.blue-theme .styled-checkbox:checked + label:before,
.blue-theme .styled-checkbox:hover + label:before,
.blue-theme input.styled-checkbox:checked + label:before,
.blue-theme input.styled-checkbox:hover + label:before {
    background: var(--primary-color, #1188E6) !important;
    background-color: var(--primary-color, #1188E6) !important;
    border: 1px solid var(--primary-color, #1188E6) !important;
    border-color: var(--primary-color, #1188E6) !important;
}

.blue-theme .btn {
    font-size: 11px !important;
    border-radius: 16px !important;
}
.blue-theme .grid-tools .dropdown.dropdown-filter {
    margin-right: 8px !important;
}
.blue-theme .grid-tools .vertical-divider {
    display: none;
}

.blue-theme .nav-custom-bg,
.blue-theme .table-background thead,
.blue-theme .table-background thead th,
.blue-theme [style*="#F3F3FE"],
.blue-theme [style*="#f3f3fe"],
.blue-theme [style*="F3F3FE"],
.blue-theme [style*="f3f3fe"] {
    background: #e8f0fc !important;
    background-color: #e8f0fc !important;
}
.blue-theme .therapy-teacher-forms-container .sg-clean-wrapper .progress-section-wrap {
    background: #fff !important;
    border: none !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
}
.blue-theme .therapy-teacher-forms-container .sg-clean-wrapper .progress-section-wrap .tracking-wider {
    font-size: 11px !important;
    color: #8E8E93 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    margin-bottom: 8px;
}
.blue-theme .therapy-teacher-forms-container .progress-tracking-table thead th {
    font-weight: 700 !important;
    color: #8E8E93 !important;
    font-size: 11px !important;
        padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.blue-theme .therapy-teacher-forms-container .sg-clean-wrapper .progress-section-wrap .accuracy-text {
    font-size: 11px !important;
}
.blue-theme .therapy-teacher-forms-container .sg-clean-wrapper .progress-section-wrap .table .badge  {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    min-height: 23px !important;
    border-radius: 10px !important;
    background-color: #F1F3F5 !important;
    color: #A8A8A8 !important;
    border-color: #F1F3F5 !important;
}
.blue-theme .therapy-teacher-forms-container .sg-clean-wrapper .progress-section-wrap .table .bg-success-subtle {
    color: #133A80 !important;
    background: #E8F0FC !important;
    border-color: #E8F0FC !important;
}
.blue-theme .therapy-teacher-forms-container .bg-success-subtle i {
    color: #133A80 !important;
}
.blue-theme .sg-clean-wrapper .progress-tracking-table tbody tr:hover {
    background-color: #E8F0FC !important;
    background: #E8F0FC !important;
}
.blue-theme .table-hover>tbody>tr:hover>* {
    background-color: #E8F0FC !important;
        --bs-table-accent-bg: #E8F0FC;
}
.blue-theme .therapy-teacher-forms-container .sg-clean-wrapper .progress-section-wrap .table td .gf-row-btn {
    border-radius: 50% !important;
}
.blue-theme .therapy-teacher-forms-container .sg-clean-wrapper .progress-section-wrap .table td .gf-row-btn--save {
    background: #E8F0FC !important;
    border-color: #E8F0FC !important;
    color: #133A80  !important;
}
.blue-theme .goal-view-mode .sg-badge-goal {
    min-height: 25px !important;
    border-radius: 4px !important;
    background: #E8F0FC !important;
    border-color: #E8F0FC !important;
    color: #133A80  !important;
}
.blue-theme .goal-view-mode .sg-badge-goal i  {
    display: none;
}
.blue-theme .goal-view-mode .gf-progress-toggle-btn,
.blue-theme .sg-clean-wrapper .gf-progress-toggle-btn {
    background: #E8F0FC !important;
    border-color: #E8F0FC !important;
    color: #133A80 !important;
    grid-gap: 8px;
}
.blue-theme .sg-clean-wrapper .gf-progress-toggle-btn:hover,
.blue-theme .sg-clean-wrapper .gf-progress-toggle-btn.is-active,
.blue-theme .goal-view-mode .gf-progress-toggle-btn:hover,
.blue-theme .goal-view-mode .gf-progress-toggle-btn.is-active {
    background: #D4E4FA !important;
    border-color: #BEDBFF !important;
    color: #133A80 !important;
    box-shadow: 0 2px 6px rgba(19, 58, 128, 0.15) !important;
    transform: translateY(-1px) !important;
}
.blue-theme .gf-goals-top-header .gf-goals-avatar {
    display: none !important;
}

.blue-theme .therapy-teacher-forms-container .gf-goals-top-header .badge  {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    min-height: 23px !important;
    border-radius: 10px !important;
    background-color: #F1F3F5 !important;
    color: #A8A8A8 !important;
    border-color: #F1F3F5 !important;
}
.blue-theme .therapy-teacher-forms-container .gf-goals-top-header .badge i {
    display: none !important;
}
.blue-theme .therapy-teacher-forms-container .gf-goals-top-header .bg-success-subtle {
    color: #133A80 !important;
    background: #E8F0FC !important;
    border-color: #E8F0FC !important;
}
.blue-theme .therapy-teacher-forms-container .gf-goals-top-header .js-sg-card-count {
    color: #8E8E93 !important;
}
.blue-theme .therapy-teacher-forms-container .gf-strip-empty {
    font-size: 12px !important;
}
.blue-theme .therapy-teacher-forms-container .sg-clean-wrapper .sg-goal-card, .sg-clean-wrapper .goal-card-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 3px solid #189aff !important;}

.blue-theme .select2-container--default .select2-results__option[aria-selected="true"],
body.blue-theme .select2-container--default .select2-results__option[aria-selected="true"] {
    background: #E8F0FC !important;
    border-left: 3.5px solid #1188E6 !important;
}

/* ==========================================================================
   SELECT2 CHIP & CROSS BUTTON STYLING (.kj-select2-wrap) - BLUE THEME
   ========================================================================== */
.blue-theme .kj-select2-wrap .select2-container--default .select2-selection--multiple {
    background-color: #ffffff !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    min-height: 44px !important;
    max-height: 125px !important;
    overflow-y: auto !important;
    padding: 4px 8px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
}

.blue-theme .kj-select2-wrap .select2-container--default.select2-container--focus .select2-selection--multiple,
.blue-theme .kj-select2-wrap .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #1188E6 !important;
    box-shadow: 0 0 0 3.5px rgba(17, 136, 230, 0.15) !important;
}

/* Choice Pill Container */
.blue-theme .kj-select2-wrap .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: linear-gradient(135deg, #F0F6FE 0%, #E2EEFF 100%) !important;
    border: 1px solid #BEDBFF !important;
    border-radius: 20px !important;
    padding: 3px 10px 3px 7px !important;
    margin: 3px 4px 3px 0 !important;
    color: #1E3A8A !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    box-shadow: 0 1px 3px rgba(17, 136, 230, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    position: relative !important;
}

/* Cross / Remove Button Alignment & Spacing Fix */
.blue-theme .kj-select2-wrap .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: relative !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 2px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    background: rgba(17, 136, 230, 0.12) !important;
    border-radius: 50% !important;
    color: #1D4ED8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
    padding-bottom: 2px !important;
}

.blue-theme .kj-select2-wrap .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: #EF4444 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

/* Chip Content Layout */
.blue-theme .kj-select2-wrap .kj-s2-chip-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.blue-theme .kj-select2-wrap .kj-s2-chip-avatar {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.blue-theme .kj-select2-wrap .kj-s2-chip-name {
    font-weight: 600 !important;
    color: #1E293B !important;
}

.blue-theme .kj-select2-wrap .kj-s2-chip-role {
    color: #1D4ED8 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}
.blue-theme #studentAdditionalStaffContent .kj-add-staff-wrapper .card .btn-group {
    grid-gap: 8px;
}
/* Clear All Cross Button */
.blue-theme .kj-select2-wrap .select2-container--default .select2-selection__clear {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: rgba(17, 136, 230, 0.1) !important;
    color: #1D4ED8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    margin-right: 8px !important;
        padding-bottom: 5px !important;
}

.blue-theme .kj-select2-wrap .select2-container--default .select2-selection__clear:hover {
    background: #EF4444 !important;
    color: #ffffff !important;
}

/* Category Filter Pills - Blue Theme */
.blue-theme .kj-filter-pill:hover {
    background: #E8F0FC !important;
    color: #1188E6 !important;
    border-color: #BEDBFF !important;
}

.blue-theme .kj-filter-pill.active {
    background: #1188E6 !important;
    color: #ffffff !important;
    border-color: #1188E6 !important;
    box-shadow: 0 2px 6px rgba(17, 136, 230, 0.3) !important;
}

.blue-theme .kj-add-staff-icon-wrap {
    background: linear-gradient(135deg, #E8F0FC 0%, #EBF2FF 100%) !important;
    color: #1188E6 !important;
    box-shadow: 0 2px 8px rgba(17, 136, 230, 0.18) !important;
}

/* Search Box & Input Group Border Radius Fix - Blue Theme */
.blue-theme .kj-assigned-search-box,
body.blue-theme .kj-assigned-search-box {
    border-radius: 8px !important;
    border: 1px solid #CBD5E1 !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.blue-theme .kj-assigned-search-box:focus-within,
body.blue-theme .kj-assigned-search-box:focus-within {
    border-color: #1188E6 !important;
    box-shadow: 0 0 0 3px rgba(17, 136, 230, 0.15) !important;
}

.blue-theme .kj-assigned-search-box .input-group-text,
.blue-theme .kj-assigned-search-box .form-control,
.blue-theme .kj-assigned-search-box .btn,
body.blue-theme .kj-assigned-search-box .input-group-text,
body.blue-theme .kj-assigned-search-box .form-control,
body.blue-theme .kj-assigned-search-box .btn {
    border: none !important;
    background: transparent !important;
}

.blue-theme .kj-assigned-search-box.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
body.blue-theme .kj-assigned-search-box.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.blue-theme .kj-assigned-search-box.input-group:not(.has-validation) > .input-group-text:first-child,
body.blue-theme .kj-assigned-search-box.input-group:not(.has-validation) > .input-group-text:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

/* ==========================================================================
   GLOBAL OVERRIDES FOR #10b981 / GREEN ACCENTS -> BLUE THEME (#1188E6)
   ========================================================================== */
.blue-theme .gf-card--done,
.blue-theme .templateListWrapper .gf-card--done {
    border-left-color: #1188E6 !important;
}

.blue-theme .progress-month-card.is-saved {
    border-left: 3px solid #1188E6 !important;
}

.blue-theme .pmc-btn-save {
    color: #1188E6 !important;
}

.blue-theme .pmc-btn-save:hover {
    background: #E8F0FC !important;
    color: #0E70BE !important;
    border-color: #BEDBFF !important;
}

.blue-theme .sg-clean-wrapper .sg-goal-card,
.blue-theme .sg-clean-wrapper .goal-card-item {
    border-left: 3px solid #1188E6 !important;
}

.blue-theme .sg-clean-wrapper .sg-badge-goal i {
    color: #1188E6 !important;
}

.blue-theme .sg-goal-desc-box {
    border-left: 3.5px solid #1188E6 !important;
}

.blue-theme .sg-goal-desc-box:hover {
    border-left-color: #0E70BE !important;
}

.blue-theme .sg-goal-desc-icon {
    color: #1188E6 !important;
}

.blue-theme .kj-icon-btn.js-sf-edit-med:hover i,
.blue-theme .kj-icon-btn.js-sf-edit-comm:hover i,
.blue-theme .kj-icon-btn.js-sf-edit-meeting:hover i {
    color: #1188E6 !important;
}

.blue-theme .text-success,
body.blue-theme .text-success {
    --bs-text-opacity: 1 !important;
    color: #1188E6 !important;
}

.blue-theme a.text-success:hover,
.blue-theme a.text-success:focus,
body.blue-theme a.text-success:hover,
body.blue-theme a.text-success:focus {
    color: #0E70BE !important;
}

.blue-theme .bg-success,
body.blue-theme .bg-success {
    background-color: #1188E6 !important;
    color: #ffffff !important;
}

.blue-theme .border-success,
body.blue-theme .border-success {
    border-color: #1188E6 !important;
}

.blue-theme .btn-success,
body.blue-theme .btn-success {
    background-color: #1188E6 !important;
    border-color: #0E70BE !important;
    color: #ffffff !important;
}

.blue-theme .btn-success:hover,
.blue-theme .btn-success:focus,
.blue-theme .btn-success:active,
body.blue-theme .btn-success:hover,
body.blue-theme .btn-success:focus,
body.blue-theme .btn-success:active {
    background-color: #0E70BE !important;
    border-color: #0C5FA2 !important;
    color: #ffffff !important;
}

.blue-theme .badge.bg-success,
.blue-theme .badge-success,
body.blue-theme .badge.bg-success,
body.blue-theme .badge-success {
    background-color: #1188E6 !important;
    color: #ffffff !important;
}

.blue-theme .bg-success-subtle,
body.blue-theme .bg-success-subtle {
    background-color: #E8F0FC !important;
    color: #133A80 !important;
    border-color: #E8F0FC !important;
}

/* Comprehensive Attribute-based Overrides for Inline #10b981 Styles */
.blue-theme [style*="color: #10b981" i],
.blue-theme [style*="color:#10b981" i],
.blue-theme [style*="color: #10B981" i],
.blue-theme [style*="color:#10B981" i],
body.blue-theme [style*="color: #10b981" i],
body.blue-theme [style*="color:#10b981" i],
body.blue-theme [style*="color: #10B981" i],
body.blue-theme [style*="color:#10B981" i] {
    color: #1188E6 !important;
}

.blue-theme [style*="background: #10b981" i],
.blue-theme [style*="background:#10b981" i],
.blue-theme [style*="background-color: #10b981" i],
.blue-theme [style*="background-color:#10b981" i],
.blue-theme [style*="background: #10B981" i],
.blue-theme [style*="background:#10B981" i],
.blue-theme [style*="background-color: #10B981" i],
.blue-theme [style*="background-color:#10B981" i],
body.blue-theme [style*="background: #10b981" i],
body.blue-theme [style*="background:#10b981" i],
body.blue-theme [style*="background-color: #10b981" i],
body.blue-theme [style*="background-color:#10b981" i],
body.blue-theme [style*="background: #10B981" i],
body.blue-theme [style*="background:#10B981" i],
body.blue-theme [style*="background-color: #10B981" i],
body.blue-theme [style*="background-color:#10B981" i] {
    background: #1188E6 !important;
    background-color: #1188E6 !important;
}

.blue-theme [style*="border-color: #10b981" i],
.blue-theme [style*="border-color:#10b981" i],
.blue-theme [style*="border-color: #10B981" i],
.blue-theme [style*="border-color:#10B981" i],
.blue-theme [style*="border-left-color: #10b981" i],
.blue-theme [style*="border-left-color:#10b981" i],
.blue-theme [style*="border-left: 3px solid #10b981" i],
.blue-theme [style*="border-left: 3.5px solid #10b981" i],
body.blue-theme [style*="border-color: #10b981" i],
body.blue-theme [style*="border-color:#10b981" i],
body.blue-theme [style*="border-color: #10B981" i],
body.blue-theme [style*="border-color:#10B981" i],
body.blue-theme [style*="border-left-color: #10b981" i],
body.blue-theme [style*="border-left-color:#10b981" i],
body.blue-theme [style*="border-left: 3px solid #10b981" i],
body.blue-theme [style*="border-left: 3.5px solid #10b981" i] {
    border-color: #1188E6 !important;
    border-left-color: #1188E6 !important;
}

.blue-theme svg[stroke*="#10b981" i],
.blue-theme svg[stroke*="#10B981" i],
.blue-theme [stroke*="#10b981" i],
.blue-theme [stroke*="#10B981" i],
body.blue-theme svg[stroke*="#10b981" i],
body.blue-theme svg[stroke*="#10B981" i],
body.blue-theme [stroke*="#10b981" i],
body.blue-theme [stroke*="#10B981" i] {
    stroke: #1188E6 !important;
}

.blue-theme svg[fill*="#10b981" i],
.blue-theme svg[fill*="#10B981" i],
.blue-theme [fill*="#10b981" i],
.blue-theme [fill*="#10B981" i],
body.blue-theme svg[fill*="#10b981" i],
body.blue-theme svg[fill*="#10B981" i],
body.blue-theme [fill*="#10b981" i],
body.blue-theme [fill*="#10B981" i] {
    fill: #1188E6 !important;
}
body.blue-theme .sg-pulse-dot {
    background: #133A80 !important;
}

/* Progress Graph Column Values - Blue Theme */
.blue-theme .sg-graph-col .sg-col-val.val-high {
    color: #1188E6 !important;
    font-weight: 800 !important;
}

.blue-theme .sg-graph-col .sg-col-val.val-mid {
    color: #1D4ED8 !important;
    font-weight: 800 !important;
}

.blue-theme .sg-graph-col .sg-col-val.val-low {
    color: #0284C7 !important;
    font-weight: 800 !important;
}

.blue-theme .sg-graph-col .sg-col-val.no-val {
    color: #94A3B8 !important;
    font-weight: 500 !important;
    opacity: 0.6;
}

/* Progress Graph Bars - Blue Theme */
.blue-theme .sg-bar-fill.bar-high {
    background: linear-gradient(180deg, #1188E6 0%, #0E70BE 100%) !important;
    box-shadow: 0 2px 5px rgba(17, 136, 230, 0.4) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.blue-theme .sg-bar-fill.bar-mid {
    background: linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%) !important;
    box-shadow: 0 2px 5px rgba(59, 130, 246, 0.4) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.blue-theme .sg-bar-fill.bar-low {
    background: linear-gradient(180deg, #93C5FD 0%, #60A5FA 100%) !important;
    box-shadow: 0 2px 5px rgba(147, 197, 253, 0.4) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.blue-theme .sg-graph-col:hover .sg-bar-fill.bar-high {
    background: linear-gradient(180deg, #0E70BE 0%, #0C5FA2 100%) !important;
    box-shadow: 0 3px 8px rgba(17, 136, 230, 0.55) !important;
}

.blue-theme .sg-graph-col:hover .sg-bar-fill.bar-mid {
    background: linear-gradient(180deg, #1D4ED8 0%, #1E40AF 100%) !important;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.55) !important;
}

.blue-theme .sg-graph-col:hover .sg-bar-fill.bar-low {
    background: linear-gradient(180deg, #60A5FA 0%, #3B82F6 100%) !important;
    box-shadow: 0 3px 8px rgba(96, 165, 250, 0.55) !important;
}
.blue-theme .kj-add-staff-wrapper .table tbody {
    border-top: 1px solid #e0e0e0;
}
.blue-theme .kj-add-staff-wrapper .table tbody tr {
    border-bottom: 1px solid #e0e0e0;
}
/* ==========================================================================
   GENERIC SIDEBAR REDESIGN (#genericSidebar / .left-sidebar / .genericSidebarCSS) OLD MODULE
   ========================================================================== */
.blue-theme #genericSidebar,
.blue-theme .left-sidebar,
.blue-theme .genericSidebarCSS {
    width: calc(var(--sidebar-width) + 144px) !important;
    flex-basis: calc(var(--sidebar-width) + 144px) !important;
    min-width: calc(var(--sidebar-width) + 144px) !important;
    max-width: calc(var(--sidebar-width) + 144px) !important;
    background-color: #ffffff !important;
    border-right: 1px solid #F1F5F9 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    padding-top: 0 !important;
    box-shadow: 1px 0px 0px rgb(96 96 96 / 10%) !important;
}

.blue-theme .sidebar-close #genericSidebar,
.blue-theme .sidebar-close .left-sidebar,
.blue-theme .sidebar-close .genericSidebarCSS,
.blue-theme .sidebar-collapse #genericSidebar,
.blue-theme .sidebar-collapse .left-sidebar,
.blue-theme .sidebar-collapse .genericSidebarCSS,
.blue-theme #genericSidebar.sidebar-close,
.blue-theme #genericSidebar.sidebar-collapse,
.blue-theme .left-sidebar.sidebar-close,
.blue-theme .left-sidebar.sidebar-collapse {
    width: var(--sidebar-width) !important;
    flex-basis: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
}

.blue-theme .sidebar-close #genericSidebar .navbar-nav,
.blue-theme .sidebar-close .left-sidebar .navbar-nav,
.blue-theme .sidebar-collapse #genericSidebar .navbar-nav,
.blue-theme .sidebar-collapse .left-sidebar .navbar-nav,
.blue-theme #genericSidebar.sidebar-close .navbar-nav,
.blue-theme #genericSidebar.sidebar-collapse .navbar-nav,
.blue-theme .left-sidebar.sidebar-close .navbar-nav,
.blue-theme .left-sidebar.sidebar-collapse .navbar-nav {
    overflow: hidden;
}

.blue-theme .sidebar-close #genericSidebar .icon-text,
.blue-theme .sidebar-close .left-sidebar .icon-text,
.blue-theme .sidebar-collapse #genericSidebar .icon-text,
.blue-theme .sidebar-collapse .left-sidebar .icon-text,
.blue-theme #genericSidebar.sidebar-close .icon-text,
.blue-theme #genericSidebar.sidebar-collapse .icon-text,
.blue-theme .left-sidebar.sidebar-close .icon-text,
.blue-theme .left-sidebar.sidebar-collapse .icon-text {
    display: none;
}

.blue-theme #genericSidebar .logo,
.blue-theme .left-sidebar .logo {
    padding: 6px 6px 6px 10px !important;
    border-bottom: 1px solid #F1F5F9 !important;
}
.blue-theme #genericSidebar .logo a,
.blue-theme .left-sidebar .logo a {
    padding: 0 !important;
}

.blue-theme #genericSidebar .logo img,
.blue-theme .left-sidebar .logo img,
.blue-theme #genericSidebar .logo .navbar-brand img,
.blue-theme .left-sidebar .logo .navbar-brand img {
    max-width: 104px !important;
    height: auto !important;
}
.blue-theme .left-sidebar ul.navbar-nav,
.blue-theme #genericSidebar ul.navbar-nav {
    padding-top: 12px;
}
.blue-theme #genericSidebar ul.navbar-nav li,
.blue-theme #genericSidebar ul.navbar-nav li.nav-item,
.blue-theme .left-sidebar ul.navbar-nav li,
.blue-theme .left-sidebar ul.navbar-nav li.nav-item,
.blue-theme .genericSidebarCSS ul li {
    padding: 0px 6px !important;
    position: relative;
    margin-bottom: 4px;
}

.blue-theme #genericSidebar ul.navbar-nav li.active .dropdown-menu a:before,
.blue-theme .left-sidebar ul.navbar-nav li.active .dropdown-menu a:before {
    content: '';
    display: none;
}

.blue-theme #genericSidebar ul.navbar-nav li .dropdown-menu li.active a:before,
.blue-theme .left-sidebar ul.navbar-nav li .dropdown-menu li.active a:before {
    content: '';
    display: none;
}

.blue-theme #genericSidebar ul.navbar-nav li a,
.blue-theme .left-sidebar ul.navbar-nav li a,
.blue-theme .genericSidebarCSS a {
    color: #b0b9c7 !important;
    padding: 7.5px 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 16px !important;
    transition: all 0.3s ease;
    position: relative;
    width: 100% !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.blue-theme #genericSidebar ul.navbar-nav li.active a,
.blue-theme #genericSidebar ul.navbar-nav li a.active,
.blue-theme .left-sidebar ul.navbar-nav li.active a,
.blue-theme .left-sidebar ul.navbar-nav li a.active,
.blue-theme .genericSidebarCSS a.active {
    color: #133A80 !important;
    background: #E8F0FC !important;
    background-color: #E8F0FC !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    font-weight: 600 !important;
}

.blue-theme #genericSidebar ul.navbar-nav li a:hover,
.blue-theme .left-sidebar ul.navbar-nav li a:hover,
.blue-theme .genericSidebarCSS a:hover {
    color: #133A80 !important;
    background: #E8F0FC !important;
    background-color: #E8F0FC !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    font-weight: 600 !important;
}

.blue-theme #genericSidebar ul.navbar-nav li.active a:before,
.blue-theme #genericSidebar ul.navbar-nav li a.active:before,
.blue-theme .left-sidebar ul.navbar-nav li.active a:before,
.blue-theme .left-sidebar ul.navbar-nav li a.active:before,
.blue-theme .genericSidebarCSS a.active:before {
    content: '';
    width: 6px;
    height: 6px;
    background: #3273E6;
    position: absolute;
    top: 50%;
    right: 8px;
    border-radius: 16px;
    transform: translate(0px, -50%);
}

.blue-theme #genericSidebar ul.navbar-nav li .icon-text,
.blue-theme #genericSidebar ul.navbar-nav li .text,
.blue-theme .left-sidebar ul.navbar-nav li .icon-text,
.blue-theme .left-sidebar ul.navbar-nav li .text,
.blue-theme .genericSidebarCSS .icon-text {
    padding-left: 8px !important;
    font-size: 12px !important;
    font-weight: inherit !important;
}

.blue-theme #genericSidebar ul.navbar-nav li .icon svg,
.blue-theme #genericSidebar ul.navbar-nav li .icon i,
.blue-theme #genericSidebar ul.navbar-nav li .icon img,
.blue-theme .left-sidebar ul.navbar-nav li .icon svg,
.blue-theme .left-sidebar ul.navbar-nav li .icon i,
.blue-theme .left-sidebar ul.navbar-nav li .icon img,
.blue-theme .genericSidebarCSS .icon i,
.blue-theme .genericSidebarCSS .icon svg {
    color: #b0b9c7 !important;
}

.blue-theme #genericSidebar ul.navbar-nav li.active .icon svg,
.blue-theme #genericSidebar ul.navbar-nav li.active a:hover .icon svg,
.blue-theme #genericSidebar ul.navbar-nav li a.active .icon svg,
.blue-theme #genericSidebar ul.navbar-nav li a:hover .icon svg,
.blue-theme .left-sidebar ul.navbar-nav li.active .icon svg,
.blue-theme .left-sidebar ul.navbar-nav li.active a:hover .icon svg,
.blue-theme .left-sidebar ul.navbar-nav li a.active .icon svg,
.blue-theme .left-sidebar ul.navbar-nav li a:hover .icon svg,
.blue-theme #genericSidebar ul.navbar-nav li.active .icon i,
.blue-theme #genericSidebar ul.navbar-nav li.active a:hover .icon i,
.blue-theme #genericSidebar ul.navbar-nav li a.active .icon i,
.blue-theme #genericSidebar ul.navbar-nav li a:hover .icon i,
.blue-theme .left-sidebar ul.navbar-nav li.active .icon i,
.blue-theme .left-sidebar ul.navbar-nav li.active a:hover .icon i,
.blue-theme .left-sidebar ul.navbar-nav li a.active .icon i,
.blue-theme .left-sidebar ul.navbar-nav li a:hover .icon i {
    color: #133A80 !important;
}

.blue-theme #genericSidebar ul.navbar-nav li.active a .icon svg,
.blue-theme #genericSidebar ul.navbar-nav li a.active .icon svg,
.blue-theme .left-sidebar ul.navbar-nav li.active a .icon svg,
.blue-theme .left-sidebar ul.navbar-nav li a.active .icon svg {
    fill: currentColor;
    stroke: currentColor;
}
.blue-theme .left-sidebar .logo button.navbar-toggler {
    padding: 0;
    box-shadow: none;
    margin-left: auto;
    padding: 0.25rem;
    width: 25px;
    height: 28px;
}
.blue-theme .student-services-report-main-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.blue-theme .modal-report-detail {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
}
.blue-theme .bd-controls {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
}

.kj-board-logo img {
    width: 100%;
}

.blue-theme #calendar_page_therapist_content .card-header.bg-gray,
.blue-theme #calendar_page_student_content .card-header.bg-gray {
    background-color: #E8F0FC !important;
    color: #133A80 !important
}
.blue-theme #calendar_page_therapist_content .checkList .btn.btn-secondary,
.blue-theme #calendar_page_schedule_content .print-schedule-content-none .btn.btn-secondary,
.blue-theme #calendar_page_student_content .btn.btn-secondary {
    background-color: var(--primary-color) !important;
}
.blue-theme #calendar_page_therapist_content .checkList .staff-container .staff-short-unsch-count,
.blue-theme #calendar_page_student_content .student-container .staff-short-unsch-count {
    background-color: #E8F0FC !important;
}
.blue-theme #calendar_page_therapist_content .checkList .staff-container i.fa-info-circle,
.blue-theme #calendar_page_student_content .student-container i.fa-info-circle {
    color: var(--primary-color) !important;
}

.blue-theme #calendar_page_schedule_content .calendar-content .boxcontent .calendar-title h3 {
    color: var(--primary-color) !important;
}

.blue-theme #calendar_page_schedule_content .calendar-content .boxcontent .calendar-title .statusAction li .dot.bg-lightgreen {
    background: #66d566 !important
}
.blue-theme #calendar_page_schedule_content .calendar-content .boxcontent .calendar-title .statusAction li .dot.bg-lightblue {
    background: #f8d3d9 !important
}
.blue-theme #calendar_page_schedule_content .calendar-content .boxcontent .calendar-title .statusAction li .dot.bg-lightyellow {
    background: #ab9aeb !important
}
.blue-theme #calendar_page_schedule_content .calendar-content .boxcontent .calendar-title .statusAction li .dot.bg-dark-blue {
    background: #95b9fb !important
}

.blue-theme #calendar_page_schedule_content .calendar-prep {
    background: #66d566 !important
}
.blue-theme #calendar_page_schedule_content .calendar-titleone {
    background: #9ff0e5 !important
}
.blue-theme #calendar_page_schedule_content .calendar-work {
    background: #f8d3d9 !important;
}
.blue-theme #calendar_page_schedule_content .calendar-teammeeting {
    background: #95b9fb !important;
}
.blue-theme #calendar_page_schedule_content .calendar-lunch {
    background: #ab9aeb !important;
}

/* ==========================================================================
   BETA BADGE ON LOGO & WELCOME MODAL
   ========================================================================== */
.beta-badge-sticker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff !important;
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
    transition: all 0.2s ease-in-out;
    margin-left: 6px;
    flex-shrink: 0;
}

.beta-badge-sticker:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
    box-shadow: 0 3px 8px rgba(217, 119, 6, 0.5);
    transform: translateY(-1px);
}

.beta-welcome-modal .modal-content {
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.beta-welcome-modal .modal-header {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.beta-welcome-modal .modal-footer {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

@media print {
    .beta-badge-sticker,
    .beta-welcome-modal {
        display: none !important;
    }
}
.blue-theme .sidebar-close .sidebar .user-dropdown .dropdown-link:after {
    display: none !important;
}
.blue-theme .sidebar-close .user-dropdown .dropdown-link {
    justify-content: center;
}
.blue-theme .sidebar-close .sidebar .logobar .logo {
    display: none !important;
}
.blue-theme .sidebar .logobar .toggler {
    transition: none !important;
}
.blue-theme .sidebar-close .sidebar .logobar .toggler {
    transform: rotate(180deg);
}
.blue-theme #main-dashboard .progress-lists {
    margin-right: 0px;
    padding-right: 4px;
}
.blue-theme #main-dashboard .session-section .title h2 {
    font-size: 18px;
}
.blue-theme .session-section .card-table .table-responsive {
    max-height: calc(100vh - 339px);
}
.blue-theme .session-section .progress-lists {
    max-height: calc(99vh - 333px);
}
.sidebar .user-dropdown .image .fa-user {
    display: none !important;
}
.blue-theme .sidebar .user-dropdown .image .fa-user {
    display: inline-block !important;
}
.blue-theme #ddlWeekOffset:focus {
    border-color: #1A4BAA;
    box-shadow: 0 0 0 3px rgba(26, 75, 170, 0.15);
}
.blue-theme #main-dashboard .progress-lists .items.active .label {
    color: #1A4BAA !important;
}
.blue-theme #studentRecommendationPrintPage .user-box .top {
    border-bottom: 1px solid #1A4BAA !important;
}
.blue-theme #main-dashboard .summay-list .card:hover {
    border-color: #E5EDFA !important;
}
.blue-theme #main-dashboard .progress-lists .items.active {
    border: 1px solid #E5EDFA;
}
.blue-theme .sf-wrapper .sf-stats-grid .sf-stat-card .sf-icon-wrap {
    background: #eff6ff !important;
    color: #1A4BAA !important;
    border: 1px solid #dbeafe !important;
}
.blue-theme .sf-wrapper .sf-stats-grid .sf-stat-card .sf-icon-wrap span,
.blue-theme .sf-wrapper .sf-stats-grid .sf-stat-card .sf-icon-wrap svg {
    color: #1A4BAA !important;
}
.blue-theme .sf-toolbar .sf-count-tag {
    color: #1A4BAA !important;
}
.blue-theme .sf-head::before {
    background: linear-gradient(180deg, var(--sf-brand) 0%, #eff6ff 100%) !important;
}
.blue-theme .kj-chip--time.kj-chip--blue i, 
.blue-theme .kj-chip--time i {
    color: #1A4BAA !important;
}
.blue-theme #toast-container > .toast-success {
    background-image: url(/assets/images/alert-icon-primary.svg) !important;
}
.blue-theme .form-control:focus, .blue-theme .form-select:focus {
    border: 1px solid #E8F0FC;
}
.blue-theme .form-switch .form-check-input:checked {
    background-color: #1A4BAA;
}
.blue-theme .calendar-prep {
    background: #66d566 !important
}
.blue-theme .calendar-titleone {
    background: #9ff0e5 !important
}
.blue-theme .calendar-work {
    background: #f8d3d9 !important;
}
.blue-theme .calendar-teammeeting {
    background: #95b9fb !important;
}
.blue-theme .calendar-lunch {
    background: #ab9aeb !important;
}
.blue-theme .calendar-training {
    background: #b1c5ff !important;
}
.blue-theme .dropdown-print .dropdown-menu .dropdown-item:hover {
    background-color: #E5EDFA;
}
.blue-theme .dropdown-item:focus, .blue-theme .dropdown-item:hover {
    background-color: #E5EDFA;
}
.blue-theme .select2-results__option {
    padding: 5px 10px !important;
}
.blue-theme .sf-right-hdr svg {
    stroke: #1A4BAA !important;
}
.blue-theme .select-default-dropdown .select2-results__options li.select2-results__option--selected, 
.blue-theme .select-default-dropdown .select2-results__options li.select2-results__option--selected:hover {
    background-color: #E5EDFA !important;
}
.blue-theme .select-default-dropdown .select2-results__options li.select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #E5EDFA !important;
}
.print-container .spacial_class {
    background: #1A4BAA;
}
.blue-theme .dropdown-filter .dropdown-menu {
    min-width: 200px;
}
.blue-theme .dropdown-filter .button {
    display: inline-flex !important;
}
.blue-theme .text-info {
    color: #1a4baa !important;
}
.blue-theme .text-success, 
body.blue-theme .text-success {
    --bs-text-opacity: 1 !important;
    color: #1a4baa !important;
}
body.blue-theme a {
    color: #1A4BAA !important;
}
.blue-theme .bd-toggle.active {
    background: rgba(26, 75, 170, 0.10);
    border-color: rgba(26, 75, 170, 0.40);
}
.blue-theme .dot.bg-lightgreen {
    background: #66d566 !important
}
.blue-theme .dot.bg-lightblue {
    background: #f8d3d9 !important
}
.blue-theme .dot.bg-lightyellow {
    background: #ab9aeb !important
}
.blue-theme .dot.bg-dark-blue {
    background: #95b9fb !important
}