/* ========================================================================
   ODIE Custom Override Stylesheet
   ------------------------------------------------------------------------
   Single source of truth for ODIE's site-wide CSS overrides.
   Aligns Telerik Bootstrap-skinned controls with the Limitless template
   (v4 light), and carries forward all of ODIE's long-standing custom
   classes. Load AFTER Telerik's Bootstrap skin and Bootstrap itself.

   Brand:
     - Body background: #CFD9EA
     - Link color:      #157AAC (always underlined in body content)
   ======================================================================== */

/* Inter — the Limitless template's default sans. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");


/* =========================================================================
   1. Design tokens
   Edit these in ONE place to retheme everything below.
   ========================================================================= */
:root {
    --odie-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --odie-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --odie-body-color: #1F2937; /* gray-900 */
    --odie-body-bg: #CFD9EA; /* ODIE brand */
    --odie-muted: #6B7280; /* gray-600 */
    --odie-border: #D1D5DB; /* gray-400 */
    --odie-border-light: #E5E7EB; /* gray-300 */

    --odie-link: #157AAC; /* ODIE brand */
    --odie-link-hover: #0F5A80; /* ~25% darker */
    --odie-link-rgb: 21, 122, 172;
    --odie-font-size: 0.875rem; /* 14px */
    --odie-font-size-sm: 0.75rem;
    --odie-font-size-lg: 1rem;
    --odie-line-height: 1.5715;
    --odie-radius: 0.375rem;
    --odie-radius-sm: 0.25rem;
    --odie-radius-lg: 0.5rem;
    --odie-shadow: 0 1px 3px rgba(0, 0, 0, 0.125);
}


/* =========================================================================
   2. Body & global typography
   ========================================================================= */
body,
#divMainContent {
    font-family: var(--odie-font-sans) !important;
    font-size: var(--odie-font-size);
    font-weight: 400;
    line-height: var(--odie-line-height);
    color: var(--odie-body-color);
    background-color: var(--odie-body-bg);
}

h1, .h1 {
    font-size: 2rem;
    line-height: 1.375;
    font-weight: 500;
    color: var(--odie-body-color);
}

h2, .h2 {
    font-size: 1.75rem;
    line-height: 1.375;
    font-weight: 500;
    color: var(--odie-body-color);
}

h3, .h3 {
    font-size: 1.5rem;
    line-height: 1.375;
    font-weight: 500;
    color: var(--odie-body-color);
}

h4, .h4 {
    font-size: 1.25rem;
    line-height: 1.375;
    font-weight: 500;
    color: var(--odie-body-color);
}

h5, .h5 {
    font-size: 1.125rem;
    line-height: 1.375;
    font-weight: 500;
    color: var(--odie-body-color);
}

h6, .h6 {
    font-size: 1rem;
    line-height: 1.375;
    font-weight: 500;
    color: var(--odie-body-color);
}

small, .small {
    font-size: var(--odie-font-size-sm);
}

.text-muted {
    color: var(--odie-muted) !important;
}

a {
    color: var(--odie-link);
    text-decoration: underline;
}

    a:hover {
        color: var(--odie-link-hover);
        text-decoration: underline;
    }

code {
    font-family: var(--odie-font-mono);
    color: #f35c86;
}


/* Navigation chrome + button-styled links — no underline */
.sidebar a,
.sidebar a:hover,
.navbar a,
.navbar a:hover,
.page-header a,
.page-header a:hover,
a.btn,
a.btn:hover,
a.nav-link,
a.nav-link:hover,
a.dropdown-item,
a.dropdown-item:hover,
a.dropdown-toggle,
a.dropdown-toggle:hover,
a.list-group-item,
a.list-group-item:hover,
a.list-group-item-action,
a.list-group-item-action:hover,
a.rounded-pill,
a.rounded-pill:hover,
.card-footer a,
.card-footer a:hover {
    text-decoration: none;
}


/* =========================================================================
   3. Layout & generic utilities
   ========================================================================= */
.box_sizing_is_fun *,
.box_sizing_is_fun *::before,
.box_sizing_is_fun *::after {
    box-sizing: border-box;
}

.RadLabel {
    padding-right: 0 !important;
}

/* not for sure if this is used */
.container {
    position: relative;
    min-height: 100%;
}

/* so the page content is not right on the bottom of the screen */
.content {
    padding-bottom: 150px;
}

.details_table {
    background-color: #FFF;
    width: 100%;
}

.page_divider {
    padding-bottom: 10px;
}

.icon {
    height: 16px;
    width: 16px;
    border: 10px #000000; /* preserved from legacy CSS — invalid declaration, no effect */
}

    .icon img {
        border: 0;
    }

.image {
    border: none;
}

    .image img {
        border: 0;
    }

.icon-sm {
    height: 12px;
    width: 16px;
    border: 0;
}

.error {
    color: #cc0000;
}

.break_word {
    max-width: 500px;
    word-wrap: break-word !important;
}

.cursor_hand {
    cursor: pointer;
}

.horizontal-line {
    border-bottom: solid 1px #C0C0C0;
}

.AutoShrink {
    width: auto !important;
}

div.AutoShrink {
    float: left;
}

/* Headings inside text-white containers should stay white */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6,
.text-white .h1, .text-white .h2, .text-white .h3,
.text-white .h4, .text-white .h5, .text-white .h6 {
    color: inherit;
}


/* =========================================================================
   4. Page titles, headings, sections
   ========================================================================= */
.title {
    padding-bottom: 5px;
}

.sub-title {
    font-weight: 600;
}

.page-section-line {
    padding-top: 5px;
    border: 0 solid #d9d9d9;
    border-bottom-width: 1px;
    width: 100%;
}

.hr {
    color: #666666;
    font: italic 18pt Arial, Helvetica, Sans-Serif;
    padding: 10px;
    text-align: left;
}

/* used in repair dashboard */
a.title-link {
    font-size: 20pt;
    color: #636363;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
}

    a.title-link:hover {
        text-decoration: underline;
    }

a.title-linkheader {
    font-size: 10pt;
    color: #636363;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
}

    a.title-linkheader:hover {
        text-decoration: underline;
    }

.title-icon {
    margin: 0;
    border: none;
    cursor: pointer;
}

    .title-icon img {
        border: 0;
    }

a.title-icon {
    color: #4d7fb1;
    font: bold 10pt Arial, Helvetica, Sans-Serif;
    text-decoration: none;
}

    a.title-icon:hover {
        text-decoration: underline;
    }

/* Title icons — wrapper styles applied via parent class */
.title_icons_style a,
.title_icons_style_link {
    padding: 0.8rem;
    border-radius: 0.25rem;
    color: #575C5F;
    font: 7pt Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    cursor: pointer;
    /* btn-like reset */
    position: relative;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .title_icons_style a:hover,
    .title_icons_style_link:hover {
        color: #575C5F;
        text-decoration: underline;
    }

.title_icons_style span,
.title_icons_style_span {
    display: block;
    padding-top: 0.625rem;
    margin-bottom: -0.4375rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title_icons_style img,
.title_icons_style_img {
    margin: 0;
    border: none;
    cursor: pointer;
    vertical-align: middle;
    height: 16px;
    width: 16px;
}

.title_school_profile {
    color: #575C5F;
    font: bold 8pt Arial, Helvetica, Sans-Serif;
    text-transform: uppercase;
    text-align: right !important;
}


/* =========================================================================
   5. Labels & data classes  (legacy ODIE typography)
   ========================================================================= */
.label_text {
    font-weight: 600 !important;
}

.label {
    padding-left: 24px !important;
    font-weight: 600 !important;
}

    .label:after {
        content: ":";
    }

.label_no_colon {
    padding-left: 24px !important;
    font-weight: 600 !important;
}

.label_colon_only:after {
    content: ":";
}

/* Arial preserved per request */
.label-id {
    color: #575C5F;
    font: bold 8pt Arial, Helvetica, Sans-Serif;
}

.label-hd-temp {
    color: #575C5F;
    font: 9pt Arial, Helvetica, Sans-Serif;
}

/* Icon caption / system alert / memo — Arial preserved per request */
.icon_text {
    color: #575C5F;
    font: 7pt Arial, Helvetica, Sans-Serif;
    padding-left: 4px;
    padding-right: 12px;
    padding-bottom: 2px;
}

.data-att {
    font-weight: 600;
    font-size: 1.125rem;
}

.data-sm {
    font-size: smaller;
}

/* Updated: now inherit Inter from body */
.data-bold {
    color: #666666;
    font-weight: bold;
}

/* Pasted/uploaded images in data cells shouldn't blow out their container */
.data img,
.data-att img {
    max-width: 100%;
    height: auto;
}

/*.card-body img {
    max-width: 100%;
    height: auto;
}*/

.image-overflow-fix img {
    max-width: 100%;
    height: auto;
}

.bold-header {
    color: #666666;
    font-weight: bold;
}

.media-center-title {
    color: #000000;
    font-size: 1.25rem;
}

.data_district_profile {
    font-weight: 400;
}

.label_district_profile {
    font-weight: 600 !important;
}

    .label_district_profile:after {
        content: ":";
    }


/* =========================================================================
   6. Custom link helpers
   ========================================================================= */
a.link-att {
    color: var(--odie-link) !important;
    text-decoration: underline !important;
    font-weight: 600;
    font-size: 1.125rem;
}

    a.link-att:hover {
        color: var(--odie-link-hover) !important;
    }

a.data-link {
    color: var(--odie-link) !important;
    text-decoration: underline !important;
    font-weight: 700;
}

    a.data-link:hover {
        color: var(--odie-link-hover) !important;
    }

.data-link-text {
    color: var(--odie-link) !important;
    text-decoration: underline !important;
    font-weight: 700;
}

/* Color-coded helpers — keep the colors, drop the legacy Arial declaration */
a.green-link, a.green-link:hover {
    color: Green !important;
    text-decoration: underline;
}

a.purple-link, a.purple-link:hover {
    color: Purple !important;
    text-decoration: underline;
}

a.blue-link, a.blue-link:hover {
    color: Blue !important;
    text-decoration: underline;
}

a.red-link, a.red-link:hover {
    color: Red !important;
    text-decoration: underline;
}


/* =========================================================================
   7. Table line backgrounds, lists, msg blocks
   ========================================================================= */
.line {
    background-color: #FFFFFF;
}

.linealt {
    background-color: #f5f5f5;
}

.lineselected {
    background-color: #f5f5f5;
}
/* .lineselectedalt removed — old code, no longer used */

.list, .list-sm {
    padding: 6px 0;
}

.msg_list {
    margin: 0;
    padding: 0;
    width: 100%;
}

.msg_head {
    padding: 5px 25px;
    cursor: pointer;
    position: relative;
    background-color: #ECECEC;
    margin: 1px;
    background-image: url('/images/icons/expand.png');
    background-repeat: no-repeat;
    background-position: left center;
}

.msg_body {
    padding: 5px 10px 15px;
    background-color: #fff;
}

.staffeval_card {
    padding: 5px;
    border-radius: 10px;
    margin: 2px;
    box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
}


/* =========================================================================
   8. Status badges
   ========================================================================= */
.statusError {
    color: #D8000C;
    font-weight: bold;
    background-color: #FFD2D2;
    border-radius: 8px;
    padding: 2px 10px;
}

.statusWarn {
    color: #9F6000;
    font-weight: bold;
    background-color: #FEEFB3;
    border-radius: 8px;
    padding: 2px 10px;
}

.statusOk {
    color: #4F8A10;
    background-color: #DFF2BF;
    border-radius: 8px;
    padding: 2px 10px;
}

.statusInfo {
    color: #fff;
    font-weight: bold;
    background-color: #286090;
    border-radius: 8px;
    padding: 5px 10px;
}

/* Yes/No badges for the Request List Processed column */
.odie_badge {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
}

.odie_badge_yes {
    background-color: #E4F7E9;
    color: #14532D;
    border: 1px solid #86D99C;
}

.odie_badge_no {
    background-color: #FCEBEB;
    color: #791F1F;
    border: 1px solid #EFA9A9;
}


/* =========================================================================
   9. Filters
   ========================================================================= */
.filtertype {
    font-size: 8pt;
    font-weight: bold;
}

.filtername {
    font-size: 10pt;
}

.filterremove {
    width: 16px;
}

    .filterremove img {
        height: 16px;
        width: 16px;
    }


/* =========================================================================
  10. Calendars  (Arial preserved per request)
   ========================================================================= */
.cal {
    color: #575C5F;
    font: 8pt Arial, Helvetica, Sans-Serif;
    text-decoration: none;
}

.calday {
    background-color: #F4F5F1;
    text-decoration: none;
    padding: 2px;
}

.caltitle {
    background-color: #F4F5F1;
    font: bold 12pt Arial, Helvetica, Sans-Serif;
    padding: 0;
    margin: 0;
    border: 0 solid #F4F5F1;
}

.calselected {
    background-color: #F4F5F1;
    font-weight: bold;
    color: #000000;
    border-width: 1px;
}

.calothermonth {
    background-color: #FFFFFF;
    text-decoration: none;
    padding: 2px;
}

/* still used in repair reports */
.threecal {
    color: #000000;
    font: 10pt Arial, Helvetica, Sans-Serif;
}

.threecaltitle {
    background-color: #FFF8D9;
    color: #60513A;
    font: 12pt Arial, Helvetica, Sans-Serif;
    border-bottom: solid 1px #60513A;
}

.threecalheader {
    background-color: #FFFFFF;
    color: #A19177;
    font: 10pt Times, Serif;
}

.threecalothermonth {
    background-color: #FFFFFF;
    color: #A19177;
    font: italic 10pt Arial, Helvetica, Sans-Serif;
    text-decoration: none;
}

.threecalday {
    background-color: #FFFFFF;
    color: #60513A;
    font: 10pt Arial, Helvetica, Sans-Serif;
}

.threecaltoday {
    background-color: #FFFFFF;
    color: #60513A;
    border: solid 1px #60513A;
    font: 10pt Arial, Helvetica, Sans-Serif;
}

.threecalevent {
    background-color: #F4F5F1;
}

    .threecalevent a {
        color: #60513A;
        font: 10pt Arial, Helvetica, Sans-Serif;
        text-decoration: none;
    }

.threecalreg {
    background-color: #BDD678;
}

    .threecalreg a {
        color: #60513A;
        font: 10pt Arial, Helvetica, Sans-Serif;
        text-decoration: none;
    }

.threecalselected {
    background-color: #FFE749;
}

    .threecalselected a {
        color: #60513A;
        font: 10pt Arial, Helvetica, Sans-Serif;
        text-decoration: none;
    }

a.threecalonemonth {
    color: #A19177;
    font: 9pt Arial, Helvetica, Sans-Serif;
    text-decoration: none;
}

    a.threecalonemonth:hover {
        text-decoration: underline;
    }


/* =========================================================================
  11. Account calendar (RadScheduler tweaks)
   ========================================================================= */
.account_calendar .rsMonthView .rsWrap {
    height: 44px !important;
}
/* spacing between events */
.account_calendar .rsMonthView .rsDateWrap {
    height: 24px !important;
}
/* top of calendar */
.account_calendar .rsMonthView .rsApt {
    height: 40px !important;
}
/* event height */
.account_calendar .rsMonthView .rsLastWrap {
    height: 50px !important;
}
/* bottom of calendar */
.account_calendar .rsAptDelete {
    display: none !important;
}

.account_calendar .RadScheduler .rsAptSimple .rsAptContent {
    margin-top: 0 !important;
}




/* Absence Request calendar special days */
.RadCalendar td.special_day_closed {
    border-radius: 6px;
    background-color: #FCEBEB !important;
    box-shadow: inset 0 0 0 1px #E24B4A;
    color: #791F1F;
    font-weight: 500;
}

.RadCalendar td.special_day_mandatory {
    border-radius: 6px;
    background-color: #EEEDFE !important;
    box-shadow: inset 0 0 0 1px #7F77DD;
    color: #3C3489;
    font-weight: 500;
}

.RadCalendar td.special_day_event {
    border-radius: 6px;
    background-color: #FAEEDA !important;
    box-shadow: inset 0 0 0 1px #EF9F27;
    color: #633806;
    font-weight: 500;
}

    .RadCalendar td.special_day_closed.rcSelected,
    .RadCalendar td.special_day_mandatory.rcSelected,
    .RadCalendar td.special_day_event.rcSelected {
        background-color: inherit !important;
        color: inherit;
        font-weight: inherit;
    }

/* Absence Request calendar legend */
.calendar_legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 18px;
    margin-top: 6px;
    font-size: 0.8125rem;
    color: #6c757d;
}

.calendar_legend_swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    vertical-align: -2px;
    margin-right: 4px;
}

.calendar_legend_swatch_closed {
    background-color: #FCEBEB;
    border: 1px solid #E24B4A;
}

.calendar_legend_swatch_mandatory {
    background-color: #EEEDFE;
    border: 1px solid #7F77DD;
}

.calendar_legend_swatch_event {
    background-color: #FAEEDA;
    border: 1px solid #EF9F27;
}

.calendar_legend_swatch_disabled {
    background-color: darkgray;
}


/* =========================================================================
  12. System alert  (Arial preserved per request)
   ========================================================================= */
.systemalert-position {
    position: absolute;
    top: 78px;
    text-align: center;
    z-index: 19;
}

.systemalert-text {
    color: red;
    font: 10pt Arial, Helvetica, Sans-Serif;
    text-decoration: none;
}


/* =========================================================================
  13. AJAX notifications  (.ajaxerror removed — old code)
   ========================================================================= */
.ajaxnotify {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    font-weight: bold;
    font-size: 1.1em;
    padding-left: 18px;
}


/* =========================================================================
  14. Helpdesk: avatar & memo  (Arial preserved on memo-text/memo-sysmsgs)
   ========================================================================= */
.avatar {
    max-height: 50px;
    max-width: 50px;
    border: solid 1px #000000;
}

.avatar_label {
    color: #575C5F;
    text-align: center;
    vertical-align: top;
}

.avatar_padding {
    padding-top: 10px !important;
    padding-left: 10px !important;
}

.memo_radgrid {
    border-width: 0 !important;
}

    .memo_radgrid td {
        padding: 0 !important;
        border: 0 !important;
    }

.memo_main_table {
    width: 100%;
}

    .memo_main_table td {
        padding: 6px !important;
    }

.memo_data {
    word-break: break-word;
}

.memo-sysmsgs {
    color: #000000;
    font: 9pt Times, Serif;
}

.memo-text {
    color: #000000;
    font: 10pt Arial, Helvetica, Sans-Serif;
}

@media screen and (max-width: 700px) {
    .memo_data img {
        width: 100% !important;
    }
}


/* =========================================================================
  15. Gridview header (legacy)
   ========================================================================= */
.gridview-header {
    color: #333333;
    font: 8pt Arial, Helvetica, Sans-Serif;
    font-weight: lighter;
}


/* =========================================================================
  16. RadFormDecorator — decorated HTML elements
      (DecoratedControls = Buttons, CheckBoxes, Fieldset, GridFormDetailsViews,
       RadioButtons, Textarea, Textbox per the masterpage RFD)
   ========================================================================= */
.RadForm_Bootstrap,
.RadForm_Bootstrap input,
.RadForm_Bootstrap select,
.RadForm_Bootstrap textarea,
.RadForm_Bootstrap button,
.RadForm_Bootstrap fieldset,
.RadForm_Bootstrap legend,
.RadForm.rfdLabel_Bootstrap,
.RadForm.rfdCheckbox_Bootstrap,
.RadForm.rfdRadio_Bootstrap,
.RadForm.rfdTextbox_Bootstrap,
.RadForm.rfdTextarea_Bootstrap,
.RadForm.rfdButton_Bootstrap {
    font-family: var(--odie-font-sans) !important;
    color: var(--odie-body-color);
}


/* =========================================================================
  17. RadGrid
   ========================================================================= */
.RadGrid_Bootstrap,
.RadGrid_Bootstrap .rgMasterTable,
.RadGrid_Bootstrap .rgDetailTable,
.RadGrid_Bootstrap .rgGroupPanel,
.RadGrid_Bootstrap .rgGroupPanel table,
.RadGrid_Bootstrap .rgCommandRow,
.RadGrid_Bootstrap .rgCommandRow table,
.RadGrid_Bootstrap .rgEditForm,
.RadGrid_Bootstrap .rgEditForm table,
.RadGrid_Bootstrap .rgPager,
.RadGrid_Bootstrap .rgPager table,
.RadGrid_Bootstrap .rgHeader,
.RadGrid_Bootstrap .rgFilterRow,
.RadGrid_Bootstrap .rgFilterRow input,
.RadGrid_Bootstrap .rgFooter,
.RadGrid_Bootstrap .rgNoRecords {
    font-family: var(--odie-font-sans) !important;
}

/* WCAG 2.5.8 — ensure stacked links in grid cells have enough spacing.
   Skip icon-only links (would push the icon out of alignment) and
   button-styled links (Bootstrap's .btn already provides its own padding). */
/*.RadGrid_Bootstrap td a {
        display: inline-block;
        line-height: 1.4;
        vertical-align: middle;
    }*/


/* fixes the button spacing of the radgrid paging buttons */
/*   .RadGrid_Bootstrap .rgRow td a:not(:has(> img:only-child)):not(.btn),
    .RadGrid_Bootstrap .rgAltRow td a:not(:has(> img:only-child)):not(.btn),
    .RadGrid_Bootstrap .rgEditRow td a:not(:has(> img:only-child)):not(.btn) {
        padding: 4px 0;
    }*/



/* Optional helper for cells with multiple stacked links — adds tap-target
   spacing per WCAG 2.5.8. Apply to each <a> after the first in a cell. 
    used for the spacing of the entities in account list
*/
.rad_grid_link_stacked {
    display: inline-block;
    margin-top: 8px;
}







/* RadCalendar selected day */
.RadCalendar_Bootstrap .rcMain .rcRow .rcSelected a {
    color: #FFF;
}

/* RadGrid row links (general) */
.rad_grid_item_style a,
.rad_grid_alternating_item_style a {
    color: var(--odie-link) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

    .rad_grid_item_style a:hover,
    .rad_grid_alternating_item_style a:hover {
        color: var(--odie-link-hover) !important;
    }

.rad_grid_selected_item_style a,
.rad_grid_selected_item_style a:hover {
    color: #FFF !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}


/* District profile RadGrid — transparent rows */
.rad_grid_item_style_district_profile,
.rad_grid_alternating_item_style_district_profile {
    background-color: transparent !important;
    border: 0 !important;
}

.rad_grid_alternating_item_style_district_profile {
    padding-top: 50px !important;
}


/* Ticket / helpdesk dashboard */
.rad_grid_item_style_dashboard img {
    vertical-align: unset;
}

.rad_grid_item_style_dashboard a,
.rad_grid_alternating_item_style_dashboard a {
    color: var(--odie-link) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

    .rad_grid_item_style_dashboard a:hover,
    .rad_grid_alternating_item_style_dashboard a:hover {
        color: var(--odie-link-hover) !important;
    }

.dashboard_grid {
    cursor: pointer;
}


/* =========================================================================
  18. RadButton / RadLinkButton
   ========================================================================= */
.RadButton_Bootstrap,
.RadButton_Bootstrap .rbDecorated,
.RadButton_Bootstrap .rbText,
.RadLinkButton_Bootstrap,
.RadLinkButton_Bootstrap .rbText {
    font-family: var(--odie-font-sans) !important;
}


/* =========================================================================
  19. RadComboBox + dropdown
       (Match body line-height so dropdown items don't overflow Telerik's
       fixed scroll container and trigger a phantom scrollbar.)
   ========================================================================= */
.RadComboBox_Bootstrap,
.RadComboBox_Bootstrap .rcbInput,
.RadComboBox_Bootstrap .rcbReadOnly,
.RadComboBoxDropDown_Bootstrap,
.RadComboBoxDropDown_Bootstrap .rcbItem,
.RadComboBoxDropDown_Bootstrap .rcbHovered,
.RadComboBoxDropDown_Bootstrap .rcbDisabled,
.RadComboBoxDropDown_Bootstrap .rcbHeader,
.RadComboBoxDropDown_Bootstrap .rcbFooter {
    font-family: var(--odie-font-sans) !important;
}

.RadComboBoxDropDown_Bootstrap {
    line-height: var(--odie-line-height);
}


/* =========================================================================
  20. RadInput family (RadTextBox, RadNumericTextBox, RadMaskedTextBox,
       RadDateInput)
   ========================================================================= */
.RadInput_Bootstrap,
.RadInput_Bootstrap .riTextBox,
.RadInput_Bootstrap .riLabel,
.RadInputMgr_Bootstrap {
    font-family: var(--odie-font-sans) !important;
}


/* =========================================================================
  21. RadDatePicker / RadDateTimePicker / RadTimePicker / RadCalendar
   ========================================================================= */
.RadPicker_Bootstrap,
.RadPicker_Bootstrap .rcInputWrap,
.RadPicker_Bootstrap .rcInput,
.RadCalendarPopup_Bootstrap,
.RadCalendar_Bootstrap,
.RadCalendar_Bootstrap table {
    font-family: var(--odie-font-sans) !important;
}


/* =========================================================================
  22. RadEditor (knowledgebase article pages)
   ========================================================================= */
.RadEditor_Bootstrap,
.RadEditor_Bootstrap .reToolbar,
.RadEditor_Bootstrap .reToolCell,
.RadEditor_Bootstrap .reContentArea,
.RadEditor_Bootstrap .reContentCell,
.reWrapper_Bootstrap {
    font-family: var(--odie-font-sans) !important;
}


/* =========================================================================
  23. RadWindow (dialogs)
   ========================================================================= */
.RadWindow_Bootstrap,
.RadWindow_Bootstrap .rwTitleBar,
.RadWindow_Bootstrap .rwTitleRow,
.RadWindow_Bootstrap .rwTitle,
.RadWindow_Bootstrap .rwDialogText {
    font-family: var(--odie-font-sans) !important;
}


/* =========================================================================
  24. RadTabStrip / RadMultiPage
   ========================================================================= */
.RadTabStrip_Bootstrap,
.RadTabStrip_Bootstrap .rtsLink,
.RadTabStrip_Bootstrap .rtsTxt,
.RadMultiPage_Bootstrap {
    font-family: var(--odie-font-sans) !important;
}


/* =========================================================================
  25. RadTreeView
   ========================================================================= */
.RadTreeView_Bootstrap,
.RadTreeView_Bootstrap .rtIn,
.RadTreeView_Bootstrap a,
.RadTreeView_Bootstrap input {
    font-family: var(--odie-font-sans) !important;
}


/* =========================================================================
  26. RadListBox / RadDropDownList / RadListView
   ========================================================================= */
.RadListBox_Bootstrap,
.RadListBox_Bootstrap .rlbTemplate,
.RadDropDownList_Bootstrap,
.RadDropDownList_Bootstrap .rddlInner,
.RadDropDownListPopup_Bootstrap,
.RadListView_Bootstrap {
    font-family: var(--odie-font-sans) !important;
}


/* =========================================================================
  27. RadMenu / RadToolBar / RadPanelBar
       (any remaining before the Bootstrap collapse conversion is fully done)
   ========================================================================= */
.RadMenu_Bootstrap,
.RadMenu_Bootstrap a,
.RadToolBar_Bootstrap,
.RadToolBar_Bootstrap .rtbText,
.RadPanelBar_Bootstrap,
.RadPanelBar_Bootstrap .rpLink,
.RadPanelBar_Bootstrap .rpText {
    font-family: var(--odie-font-sans) !important;
}


/* =========================================================================
  28. RadToolTip / RadNotification / RadCallout
   ========================================================================= */
.RadToolTip_Bootstrap,
.RadToolTip_Bootstrap .rtTitlebar,
.RadToolTip_Bootstrap .rtCallout,
.RadNotification_Bootstrap,
.RadNotification_Bootstrap .rnTitleBar,
.RadCallout_Bootstrap {
    font-family: var(--odie-font-sans) !important;
}


/* =========================================================================
  29. RadAsyncUpload / RadUpload / RadFileExplorer
   ========================================================================= */
.RadUpload_Bootstrap,
.RadAsyncUpload_Bootstrap,
.RadAsyncUpload_Bootstrap .ruFileWrap,
.RadFileExplorer_Bootstrap {
    font-family: var(--odie-font-sans) !important;
}


/* =========================================================================
  30. Bootstrap card / form polish to match Limitless chrome
   ========================================================================= */
.card {
    border-color: var(--odie-border-light);
    border-radius: var(--odie-radius);
    box-shadow: var(--odie-shadow);
}

.card-title {
    color: var(--odie-body-color);
    font-weight: 500;
}

.card-header {
    background-color: transparent;
    border-bottom-color: var(--odie-border-light);
}

.form-control,
.form-select {
    font-family: var(--odie-font-sans);
    font-size: var(--odie-font-size);
    border-color: var(--odie-border);
    border-radius: var(--odie-radius);
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--odie-link);
        box-shadow: 0 0 0 0.125rem rgba(var(--odie-link-rgb), 0.25);
    }

/* Checkboxes and radios are clickable, and so is their text, since Bootstrap ties
   each label to its input with a for attribute. Bootstrap sets no cursor on either
   one, so the pointer has to come from here. Disabled controls are excluded so they
   never advertise a click that does nothing. */
.form-check-input:not(:disabled),
.form-check-input:not(:disabled) ~ .form-check-label {
    cursor: pointer;
}

/* Dark navbar form controls — heavy specificity to beat Limitless's defaults */
.navbar.navbar-dark .form-control,
.navbar [data-color-theme="dark"] .form-control,
.navbar-dark input.form-control {
    color: #FFF !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    border-color: transparent !important;
}

    .navbar.navbar-dark .form-control::placeholder,
    .navbar [data-color-theme="dark"] .form-control::placeholder {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .navbar.navbar-dark .form-control:focus,
    .navbar [data-color-theme="dark"] .form-control:focus,
    .navbar-dark input.form-control:focus {
        color: #FFF !important;
        background-color: rgba(0, 0, 0, 0.9) !important;
        border-color: rgba(255, 255, 255, 0.8) !important;
        box-shadow: 0 0 0 0.09rem rgba(255, 255, 255, 0.35) !important;
    }

.submit_button .icon {
    padding-right: 10px;
}


/* =========================================================================
  31. Print
   ========================================================================= */
@media print {
    .logo,
    .header-background,
    .right-corner-picture,
    .left-column,
    .systemalert-position,
    .search-position,
    .login-position {
        display: none;
    }

    .main-body-content {
        position: absolute;
        top: 1in;
        left: 0in;
        width: 7in;
    }

    .title-position {
        position: absolute;
        top: .5in;
        left: 0in;
    }
}


/* ============================================================================
   Staff Evaluation shared styles (se- prefix)

   The shared look and feel for the Staff Evaluation module: FrameworkDetails,
   RubricManage, FormalEvaluationDetails, FormalEvaluationEdit, and any future
   pages in the section. Append this block to the master stylesheet.

   Conventions this block encodes:
   - Muted #f7f6f1 boxes are static containers; white #e0ddd2 bordered cards
     are items; interactive button styling stays page local (edit page only).
   - Icon glyph standard: ph-check-circle in #27500A for met/observed,
     ph-warning-circle in #791F1F for not met/not observed, ph-binoculars for
     observable in walkthrough, ph-link for linked evidence.
   - The Legend sticky note is the legend treatment for detail pages.
   ============================================================================ */

/* ---- rubric: one rubric block inside a practice card, with the left rail ---- */
.se-rubric {
    border-left: 3px solid #d3d1c7;
    padding-left: 16px;
}

.se-rubric-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.se-rubric-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}

.se-rubric-head .se-rubric-title {
    margin-bottom: 0;
}

/* ---- performance level grid with colored header chips ---- */
.se-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.se-level {
    min-width: 0;
}

    .se-level .se-head {
        margin-bottom: 8px;
    }

.se-head {
    border-radius: 8px;
    padding: 8px 10px;
}

    .se-head .se-head-title {
        font-weight: 600;
    }

    .se-head .se-head-desc {
        font-size: 12px;
        line-height: 1.5;
    }

.se-head-1 {
    background: #FCEBEB;
}

    .se-head-1 .se-head-title {
        color: #791F1F;
    }

    .se-head-1 .se-head-desc {
        color: #A32D2D;
    }

.se-head-green {
    background: #EAF3DE;
}

    .se-head-green .se-head-title {
        color: #27500A;
    }

    .se-head-green .se-head-desc {
        color: #3B6D11;
    }

/* indicators stack in the cell with a flex gap, so no bottom margin hacks */
.se-cell {
    font-size: 13px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---- linked evidence box under an indicator (muted on white) ---- */
.se-linked {
    margin-top: 4px;
    padding: 6px 8px;
    background: #f7f6f1;
    border-radius: 8px;
    font-size: 12px;
    color: #5f5e5a;
}

.se-linked-item {
    margin-bottom: 2px;
}

/* ---- evidence section: muted box holding white item cards ---- */
.se-evidence {
    background: #f7f6f1;
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
}

.se-evidence-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* typography comes from the shared se-section-label eyebrow (end of this file);
   se-evidence-label remains as an alias selector on that rule so existing markup
   and code-behind emissions need no changes */

.se-evidence-actions {
    display: flex;
    gap: 14px;
}

/* dense grid for short definition items (FrameworkDetails, RubricManage) */
.se-evidence-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 10px;
    margin-top: 8px;
}

    /* wide variant for items carrying status badges or controls (evaluation pages) */
    .se-evidence-list.se-evidence-list-wide {
        grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
        gap: 12px;
    }

.se-evidence-item {
    font-size: 13px;
    line-height: 1.6;
    background: #ffffff;
    border: 1px solid #e0ddd2;
    border-radius: 8px;
    padding: 10px 12px;
}

.se-evidence-type {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: #5f5e5a;
    background: #ECEAE2;
    padding: 1px 7px;
    border-radius: 4px;
    margin-right: 2px;
}

/* ---- icon glyph standard ---- */
.se-ico {
    font-size: 16px;
    vertical-align: -2px;
}

.se-ico-met {
    color: #27500A;
}

.se-ico-notmet {
    color: #791F1F;
}

.se-ico-obs {
    color: #5f5e5a;
}

.se-ico-link {
    color: #888780;
}



/* ---- Legend: the pinned sticky note legend in the top card's right column ---- */
.se-legend-wrap {
    display: flex;
    justify-content: center;
    padding-top: 14px;
}

.se-legend-note {
    position: relative;
    background: #FFF9DB;
    border-radius: 2px;
    padding: 16px 18px 18px 18px;
    transform: rotate(-1.5deg);
    box-shadow: 0 4px 10px rgba(0,0,0,0.14);
}

.legend-pushpin {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: auto;
}

.se-legend-title {
    font-size: 13px;
    font-weight: 700;
    color: #8A5B12;
    text-align: center;
    margin-bottom: 10px;
}

.se-legend-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #5f5e5a;
    margin-bottom: 7px;
}

    .se-legend-entry:last-child {
        margin-bottom: 0;
    }

.se-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* ---- inline action links ---- */
.se-edit {
    color: #888780;
    margin-left: 4px;
    text-decoration: none;
}

    .se-edit:hover {
        color: #185fa5;
    }

.se-add, .se-action {
    color: #185fa5;
    text-decoration: none;
    font-size: 13px;
}

    .se-add:hover, .se-action:hover {
        text-decoration: underline;
    }

/* staff evaluation status badges */

.se-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

    .se-status i {
        font-size: 15px;
        line-height: 1;
    }

/* the evaluator is still working on the evaluation */
.se-status-working {
    background: #F1EFE8;
    color: #444441;
}

/* completed and waiting on the employee's signature */
.se-status-waiting {
    background: #FAEEDA;
    color: #633806;
}

/* the employee has signed */
.se-status-signed {
    background: #E6F1FB;
    color: #0C447C;
}

/* filed formal evaluations and completed professional development plans */
.se-status-filed,
.se-status-completed {
    background: #EAF3DE;
    color: #27500A;
}

/* the muted date text that follows a badge */
.se-status-date {
    color: #5F5E5A;
    font-size: 13px;
    white-space: nowrap;
}

/* no evaluation or plan exists yet for the selected school year */
.se-status-notstarted {
    background: #FFFFFF;
    color: #6B6A66;
    border: 1px dashed #C9C7BF;
}

/* the employee finished a step and the item is waiting on the evaluator to act.
   deliberately a deeper orange than se-status-waiting: both mean "waiting on a
   person", but waiting is on the employee and review is on the evaluator, so
   they stay distinguishable at a glance */
.se-status-review {
    background: #FCE8D2;
    color: #7A4106;
}

/* the evaluator sent the item back to the employee for improvements */
.se-status-returned {
    background: #F7E6E6;
    color: #7C2020;
}

/* linked badge affordance: a badge is a badge everywhere, and clickability shows
   itself on touch. any se-status badge rendered inside an anchor gets a pointer
   and a ring in its own status color on hover, so badges on details pages need
   no changes and never suggest a link they do not have */
a .se-status {
    cursor: pointer;
}

a:hover .se-status,
a:focus-visible .se-status {
    box-shadow: inset 0 0 0 1.5px currentColor;
}

/* staff evaluation your-move callout

   one card directly under the header on the details pages (formal, self, plan,
   slo) that answers "what happens next". the variant colors follow the status
   badge families: amber when it is the viewer's turn, red when the item came
   back to the viewer for improvements, and quieter cousins of the badge
   families while the item is waiting on someone else: waiting amber for a
   signature, an approval or a review, returned red while improvements sit
   with the employee,
   blue when a signed item is waiting on the evaluator to file (the signed
   badge family), the quiet white idle treatment while the evaluator is still
   working, green when the item is filed or completed and nothing is left to
   do. replaces the page local ed-move-* family on the details pages so the
   palette lives in one place */

.se-move-note {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.se-move-ico {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .se-move-ico i {
        font-size: 21px;
    }

.se-move-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
}

.se-move-text {
    font-size: 13px;
    line-height: 1.55;
}

.se-move-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

/* the viewer has a step to act on right now */
.se-move-amber {
    background: #FAEEDA;
    border-color: #EF9F27;
}

    .se-move-amber .se-move-ico {
        background: #FAC775;
    }

        .se-move-amber .se-move-ico i {
            color: #633806;
        }

    .se-move-amber .se-move-title {
        color: #633806;
    }

    .se-move-amber .se-move-text {
        color: #854F0B;
    }

    .se-move-amber .se-move-btn {
        background: #854F0B;
        color: #FAEEDA;
    }

/* the item came back to the viewer for improvements: still the viewer's turn,
   so the strong border and the button, but in the returned red family */
.se-move-red {
    background: #FCEBEB;
    border-color: #A32D2D;
}

    .se-move-red .se-move-ico {
        background: #F7C1C1;
    }

        .se-move-red .se-move-ico i {
            color: #791F1F;
        }

    .se-move-red .se-move-title {
        color: #791F1F;
    }

    .se-move-red .se-move-text {
        color: #A32D2D;
    }

    .se-move-red .se-move-btn {
        background: #791F1F;
        color: #FCEBEB;
    }

/* an item in a waiting badge state (waiting for a signature, awaiting
   approval, results recorded) is waiting on someone else: the se-status-waiting
   badge family. the same palette as the viewer's-turn amber but with the softer
   border and no button, so "someone must act" and "you must act" rhyme without
   being mistaken for each other */
.se-move-waiting {
    background: #FAEEDA;
    border-color: #FAC775;
}

    .se-move-waiting .se-move-ico {
        background: #FAC775;
    }

        .se-move-waiting .se-move-ico i {
            color: #633806;
        }

    .se-move-waiting .se-move-title {
        color: #633806;
    }

    .se-move-waiting .se-move-text {
        color: #854F0B;
    }

/* the item went back to the employee for improvements and someone else is
   looking: the se-status-returned badge family in the quieter waiting
   treatment, without the strong border and button the act-now red carries */
.se-move-returned {
    background: #F7E6E6;
    border-color: #F7C1C1;
}

    .se-move-returned .se-move-ico {
        background: #F7C1C1;
    }

        .se-move-returned .se-move-ico i {
            color: #7C2020;
        }

    .se-move-returned .se-move-title {
        color: #7C2020;
    }

    .se-move-returned .se-move-text {
        color: #A32D2D;
    }

/* an item in a signed badge state (signed, approved, admin review done) is
   waiting on the next actor: informational blue, deliberately the same family
   as the se-status-signed badge so the card and the badge above it tell one
   story */
.se-move-blue {
    background: #E6F1FB;
    border-color: #B5D4F4;
}

    .se-move-blue .se-move-ico {
        background: #B5D4F4;
    }

        .se-move-blue .se-move-ico i {
            color: #0C447C;
        }

    .se-move-blue .se-move-title {
        color: #0C447C;
    }

    .se-move-blue .se-move-text {
        color: #185FA5;
    }

/* the item is waiting on someone else earlier in the flow: the quiet white
   treatment, echoing the not started badge, so nothing on the page competes
   with the amber card shown when it is the viewer's turn */
.se-move-idle {
    background: #FFFFFF;
    border-color: #C9C7BF;
    border-style: dashed;
}

    .se-move-idle .se-move-ico {
        background: #F1EFE8;
    }

        .se-move-idle .se-move-ico i {
            color: #6B6A66;
        }

    .se-move-idle .se-move-title {
        color: #444441;
    }

    .se-move-idle .se-move-text {
        color: #6B6A66;
    }

/* the item is filed or completed: permanent, no further action for anyone */
.se-move-green {
    background: #EAF3DE;
    border-color: #97C459;
}

    .se-move-green .se-move-ico {
        background: #C0DD97;
    }

        .se-move-green .se-move-ico i {
            color: #27500A;
        }

    .se-move-green .se-move-title {
        color: #27500A;
    }

    .se-move-green .se-move-text {
        color: #3B6D11;
    }

/* staff evaluation in-progress notice

   shown to an evaluator while the employee is still working: the draft content
   below the header card is replaced with this notice so the evaluation is
   findable without exposing the draft. it lives in a normal card / card-body;
   these rules only arrange the icon chip and text, and the message text itself
   uses the sitewide data class. replaces the page local ed-progress-* family on
   the formal and self evaluation details pages */

.se-progress-note {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.se-progress-ico {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #EFEEE9;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .se-progress-ico i {
        font-size: 22px;
        color: #5F5E5A;
    }

.se-progress-title {
    font-weight: 600;
    font-size: 15px;
    color: #3a3a37;
    margin-bottom: 4px;
}

/* staff evaluation labeled subsections

   the shared "labeled block" pattern for detail and edit pages: an eyebrow label
   over a content block, with breathing room between blocks and a muted style for
   empty values. the eyebrow reads as a structural marker through its shape
   (uppercase + letterspacing) rather than its size, so it can never be mistaken
   for body text, and the amber separates it from muted metadata like timeline
   notes. replaces the page local pdp-section-label / pdp-subsection / pdp-content
   / pdp-none family and the equivalent label styles on the self evaluation and
   formal evaluation pages as they adopt it */

.se-subsection {
    margin-top: 18px;
}

.se-section-label,
.se-evidence-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #854F0B;
    margin-bottom: 5px;
}

.se-content {
    line-height: 1.6;
    margin-bottom: 4px;
}

/* muted empty value text, e.g. "No action steps were recorded." or "Not provided." */
.se-none {
    font-size: 13px;
    color: #B4B2A9;
}