/* ==========================================================================
   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;
}
.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;
}

/* ==========================================================================
   SIDEBAR REDESIGN (Figma Node 6-1204 Alignment)
   ========================================================================== */
.blue-theme .wrapper {
    padding-left: calc(var(--sidebar-width) + 160px);
}
.blue-theme .wrapper.sidebar-close {
    padding-left: calc(var(--sidebar-width) + 15px);
}
.blue-theme .sidebar {
    width: calc(var(--sidebar-width) + 144px);
}
.blue-theme .sidebar-close .sidebar {
    width: var(--sidebar-width);
}
.blue-theme .sidebar-close .sidebar .detail {
    display: none;
}
.blue-theme .sidebar .logobar {
    padding: 6px 6px 6px 10px;
    border-bottom: 1px solid #F1F5F9;
}

.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 .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%;
}

.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"]) {
    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 {
    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: 400 !important;
    font-size: 11px !important;
    letter-spacing: 0px !important;
    color: #62748E !important;
    line-height: 33px !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: #0F172B !important;
    font-weight: 600 !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: #314158 !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: #45556C !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;
}