/* ==========================================================================
   New UI: Classroom Calendar controls and Student Groups tabs.
   Every selector under .nui-on. Reusable pieces belong in new-ui-kit.css.
   ========================================================================== */

/* ---- Student Groups: segmented tabs (asr-tabs look) ---------------------- */
.nui-on .classroom-student-groups ul.wh_nav-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    margin: 9px 9px 9px;
    background: var(--nk-white, #fff);
    border: 1px solid var(--nk-border, #C5CDD0);
    border-radius: 10px;
    list-style: none;
    width: auto;
}
.nui-on .classroom-student-groups ul.wh_nav-tabs::before,
.nui-on .classroom-student-groups ul.wh_nav-tabs::after { display: none; }
.nui-on .classroom-student-groups ul.wh_nav-tabs > li { float: none; margin: 0; }
.nui-on .classroom-student-groups ul.wh_nav-tabs > li > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px !important;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--nk-text, #4A5358);
    font: 600 12.5px/1 var(--nk-font, "Montserrat", Arial, sans-serif) !important;
    cursor: pointer;
    box-shadow: none;
}
.nui-on .classroom-student-groups ul.wh_nav-tabs > li > a:hover { background: var(--nk-line, #EEF1F2); color: var(--nk-ink, #222831); }
.nui-on .classroom-student-groups ul.wh_nav-tabs > li.active > a,
.nui-on .classroom-student-groups ul.wh_nav-tabs > li.active > a:hover {
    background: var(--nk-blue-soft, rgba(0, 116, 197, .10));
    border-color: rgba(0, 116, 197, .25);
    color: var(--nk-blue, #0074C5);
}
.nui-on .classroom-student-groups ul.wh_nav-tabs .wh_nav-tab-icon {
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    background: transparent !important;
    color: inherit;
    font-size: 14px !important;
}
.nui-on .classroom-student-groups ul.wh_nav-tabs .wh_nav-tab-icon .material-symbols-rounded { font-size: 17px !important; }

/* ---- Classroom Calendar toolbar ------------------------------------------ */
.nui-on classroom-calendar .cal-shell { --cc-blue: var(--nk-blue, #0074C5); --cc-soft: var(--nk-blue-soft, rgba(0,116,197,.10)); --cc-border: var(--nk-border, #C5CDD0); }
.nui-on classroom-calendar .cal-shell .cal-toolbar-secondary { align-items: flex-end; gap: 18px; padding-top: 14px; }
.nui-on classroom-calendar .cal-shell .cal-toolbar-secondary label,
.nui-on classroom-calendar .cal-shell .cal-toolbar-secondary label strong {
    font: 600 11.5px/1.2 var(--nk-font, "Montserrat", Arial, sans-serif);
    color: var(--nk-muted, #7B8E92);
}
.nui-on classroom-calendar .cal-shell .cal-toolbar-secondary .form-group { margin: 0; }
.nui-on classroom-calendar .cal-shell .cal-toolbar-secondary .form-control,
.nui-on classroom-calendar .cal-shell .cal-toolbar-secondary .select2-container .select2-selection {
    min-height: 34px;
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    box-shadow: none;
    font-size: 12.5px;
}
.nui-on classroom-calendar .cal-shell .cal-toolbar-secondary select.form-control { height: 34px; }

/* month title: quiet bold */
.nui-on classroom-calendar .cal-shell .panel-title-current {
    font: 700 16px/1.2 var(--nk-font, "Montserrat", Arial, sans-serif);
    color: var(--nk-ink, #222831);
    margin-right: 6px;
}

/* shared base for toolbar buttons */
.nui-on classroom-calendar .cal-shell .cal-toolbar-primary .btn-group { display: inline-flex; gap: 6px; align-items: center; }
.nui-on classroom-calendar .cal-shell .cal-toolbar-primary .btn-group > .btn {
    float: none;
    margin: 0;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    background: var(--nk-white, #fff);
    color: var(--nk-ink, #222831);
    font: 600 12.5px/1 var(--nk-font, "Montserrat", Arial, sans-serif);
    box-shadow: none;
}
.nui-on classroom-calendar .cal-shell .cal-toolbar-primary .btn-group > .btn:hover { border-color: var(--cc-blue); color: var(--cc-blue); background: var(--nk-white, #fff); }

/* Previous / Next: chevron icon buttons (label text hidden, glyph drawn) */
.nui-on classroom-calendar .cal-shell .cal-toolbar-left .btn-group > .btn[decrement],
.nui-on classroom-calendar .cal-shell .cal-toolbar-left .btn-group > .btn[increment] {
    width: 34px;
    padding: 0;
    font-size: 0;
    position: relative;
}
.nui-on classroom-calendar .cal-shell .cal-toolbar-left .btn-group > .btn[decrement]::before,
.nui-on classroom-calendar .cal-shell .cal-toolbar-left .btn-group > .btn[increment]::before {
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 12px;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nui-on classroom-calendar .cal-shell .cal-toolbar-left .btn-group > .btn[decrement]::before { content: "\f053"; }
.nui-on classroom-calendar .cal-shell .cal-toolbar-left .btn-group > .btn[increment]::before { content: "\f054"; }
.nui-on classroom-calendar .cal-shell .cal-toolbar-left .btn-group > .btn[decrement] { order: 1; }
.nui-on classroom-calendar .cal-shell .cal-toolbar-left .btn-group > .btn[set-to-today] { order: 2; }
.nui-on classroom-calendar .cal-shell .cal-toolbar-left .btn-group > .btn[increment] { order: 3; }

/* view switch: segmented control */
.nui-on classroom-calendar .cal-shell .cal-toolbar-right .btn-group {
    gap: 2px;
    padding: 3px;
    background: var(--nk-white, #fff);
    border: 1px solid var(--cc-border);
    border-radius: 10px;
}
.nui-on classroom-calendar .cal-shell .cal-toolbar-right .btn-group > label.btn {
    height: 32px;
    padding: 0 14px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--nk-text, #4A5358);
    font: 600 12.5px/30px var(--nk-font, "Montserrat", Arial, sans-serif);
    box-shadow: none;
    cursor: pointer;
}
.nui-on classroom-calendar .cal-shell .cal-toolbar-right .btn-group > label.btn:hover { background: var(--nk-line, #EEF1F2); color: var(--nk-ink, #222831); }
.nui-on classroom-calendar .cal-shell .cal-toolbar-right .btn-group > label.btn.active,
.nui-on classroom-calendar .cal-shell .cal-toolbar-right .btn-group > label.btn.btn-primary {
    background: var(--cc-soft);
    border-color: rgba(0, 116, 197, .25);
    color: var(--cc-blue);
}

/* Add Calendar Event: the one primary */
.nui-on classroom-calendar .cal-shell .cal-toolbar-right > button.btn-primary {
    height: 34px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--cc-blue);
    background: var(--cc-blue);
    color: #fff;
    font: 600 12.5px/1 var(--nk-font, "Montserrat", Arial, sans-serif);
    box-shadow: none;
}

/* calendar grid: today + events */
.nui-on classroom-calendar mwl-calendar .cal-month-view .cal-day-today,
.nui-on classroom-calendar mwl-calendar .cal-year-view .cal-day-today,
.nui-on classroom-calendar mwl-calendar .cal-week-view .cal-day-today,
.nui-on classroom-calendar mwl-calendar .cal-week-view .cal-day-headings .cal-day-today {
    background-color: var(--nk-blue-soft, rgba(0, 116, 197, .10)) !important;
}
.nui-on classroom-calendar mwl-calendar .cal-day-today span[data-cal-date],
.nui-on classroom-calendar mwl-calendar .cal-day-today .cal-day-number,
.nui-on classroom-calendar mwl-calendar .cal-day-today strong {
    color: var(--nk-blue, #0074C5) !important;
    font-weight: 700;
}
.nui-on classroom-calendar mwl-calendar .cal-month-view .cal-day-badge {
    background-color: var(--nk-blue, #0074C5);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
}
.nui-on classroom-calendar mwl-calendar .cal-event {
    border-radius: 6px;
    box-shadow: none;
}
.nui-on classroom-calendar mwl-calendar .cal-event-title { font-size: 12px; font-weight: 600; }
.nui-on classroom-calendar mwl-calendar .cal-month-view .cal-days { border-color: var(--nk-line, #EEF1F2); }