/* TELERIK Styles */

/* ************************************************************ */
/* ************************ TAB STRIP ***************************/
/* ************************************************************ */
/* Strong global override for Telerik TabStrip tab font size */
.RadTabStrip .rtUL .rtLI a,
.RadTabStrip .rtsLink, /* common alternative class name for tab links in some skins */
.RadTabStrip .rtsLink > span, /* if the text is wrapped in span or other tag */
.RadTabStrip .rtsOut, /* in some skins the link is split into out/in spans */
.RadTabStrip .rtsIn {
    font-size: 1.2rem !important; /* try large first to see if it changes */
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

/* Force Montserrat on Telerik TabStrip */
.RadTabStrip, .RadTabStrip .rtsLink, .RadTabStrip .rtsOut, .RadTabStrip .rtsIn, .RadTabStrip .rtsText, .RadTabStrip .rtsTxt {
    font-family: 'Montserrat',sans-serif !important
}

/* ============================================================
   Telerik + Bootstrap Integration Layer
   Applies Bootstrap-like styling to Telerik input controls
   ============================================================ */

/* ************************************************************ */
/* ******************** GENERAL CONTROLS ************************/
/* ************************************************************ */
/* General Telerik input containers styled as Bootstrap inputs */
.RadInput_Bootstrap,
.RadTextBox_Bootstrap,
.RadMaskedTextBox_Bootstrap,
.RadNumericTextBox_Bootstrap,
.RadDatePicker_Bootstrap,
.RadCheckBoxList_Bootstrap,
.RadComboBox_Bootstrap,
.RadDropDownList_Bootstrap {
    width: 100% !important;
    display: block;
    border-radius: 0.375rem !important;
    box-sizing: border-box !important;
}

.RadDateTimePicker_Bootstrap {
    width: 50% !important;
}


/* Inner input box styling */
    .RadInput_Bootstrap .riTextBox,
    .RadTextBox_Bootstrap .riTextBox,
    .RadMaskedTextBox_Bootstrap .riTextBox,
    .RadNumericTextBox_Bootstrap .riTextBox,
    .RadDatePicker_Bootstrap .riTextBox,
    .RadDateTimePicker_Bootstrap .riTextBox,
    .RadDropDownList_Bootstrap .rddlInput {
        width: 100% !important;
        font-size: 1rem !important;
        font-family: 'Montserrat', sans-serif;
        padding: 0.375rem 0.75rem !important;
        line-height: 1.5 !important;
        color: #212529 !important;
        background-color: #fff !important;
        background-clip: padding-box !important;
        border: 1px solid #ced4da !important;
        border-radius: 0.375rem !important;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        box-sizing: border-box !important;
    }

/* Focus state */
        .RadInput_Bootstrap .riTextBox:focus,
        .RadTextBox_Bootstrap .riTextBox:focus,
        .RadMaskedTextBox_Bootstrap .riTextBox:focus,
        .RadNumericTextBox_Bootstrap .riTextBox:focus,
        .RadDatePicker_Bootstrap .riTextBox:focus,
        .RadDateTimePicker_Bootstrap .riTextBox:focus,
        .RadComboBox_Bootstrap .rcbInput:focus,
        .RadDropDownList_Bootstrap .rddlInput:focus {
            border-color: #86b7fe !important;
            outline: 0 !important;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
        }

/* Icon padding for some controls */
.RadDatePicker_Bootstrap .rcCalPopup,
.RadComboBox_Bootstrap .rcbArrowCell,
.RadDropDownList_Bootstrap .rddlArrowCell {
    padding-right: 0.75rem !important;
}

/* Override inline styles Telerik may apply */
.RadInput .riTextBox[style],
.RadInput input[style] {
    width: 100% !important;
}

/* Read only baground color for telerik radtextbox */
span.RadInput .riTextBox.read-only {
    background: #f8f9fa !important;
    color: #fff;
}

span.RadInput .riTextBox.read-only:focus,
span.RadInput .riTextBox.read-only:hover {
    background: #667b7d;
}

/* Generic gap for all Telerik date/time popup buttons */
.RadDatePicker a.rcCalPopup[id$="_popupButton"],
.RadDateTimePicker a.rcCalPopup[id$="_popupButton"] {
    display: inline-block;
    margin-left: 8px !important; /* visible gap next to the textbox */
}

.RadDatePicker_Bootstrap .rcCalPopup,
.RadDateTimePicker_Bootstrap .rcCalPopup,
.RadDateTimePicker_Bootstrap .rcTimePopup {
    padding-right: 0.75rem !important;
    vertical-align: middle !important;
}

/* ************************************************************ */
/* ********************** RADMASKEDIT ***************************/
/* ************************************************************ */
/* ===== RadMaskedTextBox Specific: enforce height and sizing ===== */
/* Outer wrappers */
.RadMaskedTextBox_Bootstrap,
.RadMaskedTextBox_Bootstrap .riWrapper,
.RadMaskedTextBox_Bootstrap .riContent,
.RadMaskedTextBox_Bootstrap .riBorder {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    box-sizing: border-box !important;
}

.RadDateTimePicker_Bootstrap .rcTable {
    display: flex !important;
    align-items: center !important;
}


/* Inner input field and input element */
.RadMaskedTextBox_Bootstrap .riTextBox,
.RadMaskedTextBox_Bootstrap input {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 38px !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    border: 1px solid #ced4da !important;
    background-color: #fff !important;
    color: #212529 !important;
    display: inline-block !important;
    width: 100% !important;
    font-size: 1rem !important;
    border-radius: 0.375rem !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* ************************************************************ */
/* ********************** RAD TEXTBOX ***************************/
/* ************************************************************ */
.RadTextBox_Bootstrap .riWrapper {
    min-height: 38px !important;
}

.RadTextBox_Bootstrap input.riTextBox {
    height: 38px !important;
    line-height: 38px !important;
}

.RadInput textarea {
    resize: both !important;
}

/* ************************************************************ */
/* ************************ RADWINDOW ***************************/
/* ************************************************************ */
.rwCorner .rwTopLeft,
.rwTitlebar,
.rwCorner .rwTopRight,
.rwIcon,
.rwTopLeft,
.rwTopRight,
.rwFooterLeft,
.rwFooterRight,
.rwFooterCenter,
.rwBodyLeft,
.rwBodyRight,
.rwTitlebar,
.rwTopResize,
.rwStatusbar,
.rwStatusbar .rwLoading {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ************************************************************ */
/* **************** RADSWITCH(TOGGLE BUTTON) ********************/
/* ************************************************************ */
:root {
    /* Variables of Default Size*/
    --default-width: 60px;
    --default-height: 30px;
    --default-line-height: 30px;
    --default-font-size: 10px;
    --default-left: 30px;
    /* Variables for Small Size */
    --small-width: calc(var(--default-width) - 30px);
    --small-height: calc(var(--small-width) / 2);
    --small-line-height: calc(var(--small-width) / 2);
    --small-font-size: calc(var(--default-font-size) * 50 / 100);
    --small-left: calc(var(--small-width) / 2);
    /* Variables for Medium Size*/
    --medium-width: calc(var(--default-width) - 20px);
    --medium-height: calc(var(--medium-width) / 2);
    --medium-line-height: calc(var(--medium-width) / 2);
    --medium-font-size: calc(var(--default-font-size) * 66 / 100);
    --medium-left: calc(var(--medium-width) / 2);
}

/* CSS Styles for the Small Size */
.small.k-switch,
.small .k-switch-container {
    font-size: var(--small-font-size);
    width: var(--small-width);
}

.small .k-switch-label-on, .small .k-switch-label-off {
    line-height: var(--small-line-height);
}

.small .k-switch-handle {
    width: var(--small-height);
    height: var(--small-height);
}

.small.k-switch-on .k-switch-handle {
    left: var(--small-left);
}

/* CSS Styles for the Medium Size */
.medium.k-switch,
.medium .k-switch-container {
    font-size: var(--medium-font-size);
    width: var(--medium-width);
}

.medium .k-switch-label-on, .medium .k-switch-label-off {
    line-height: var(--medium-line-height);
}

.medium .k-switch-handle {
    width: var(--medium-height);
    height: var(--medium-height);
}

.medium.k-switch-on .k-switch-handle {
    left: var(--medium-left);
}

/* 1) Kill the outer white pill the Bootstrap skin paints on the button */
button.RadButton_Bootstrap.k-switch.bs-switch::before {
    display: none !important;
}

/* 2) Make the button itself transparent (no extra frame/shadow) */
button.RadSwitch.k-switch.bs-switch {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: inline-block; /* lets us center it */
    margin: 0 auto; /* horizontal center in the cell */
}

    /* 3) Hide label elements so they don’t reserve width (harmless if absent) */
button.RadSwitch.k-switch.bs-switch .k-switch-labels,
button.RadSwitch.k-switch.bs-switch .k-switch-label,
button.RadSwitch.k-switch.bs-switch .k-switch-label-on,
button.RadSwitch.k-switch.bs-switch .k-switch-label-off {
    display: none !important;
}

/* ************************************************************ */
/* ********************** LISTBOX *******************************/
/* ************************************************************ */
/* Guarantee the right-side button rail is visible and has room */
.RadListBox_Bootstrap .rlbButtonArea {
    display: block !important;
    width: 36px !important; /* ~ Telerik’s default rail width */
    min-width: 36px !important;
    box-sizing: border-box;
}

/* Let the list fill the remaining space without spilling horizontally */
.RadListBox_Bootstrap .rlbList,
.RadListBox_Bootstrap .rlbList[style] {
    width: auto !important; /* cancel any fixed/100% widths */
    min-width: 0;
    overflow-x: hidden;
}

/* ************************************************************ */
/* *********************** GRID *********************************/
/* ************************************************************ */
/* ===== Compact Bootstrapy RadGrid ===== */
.RadGrid_Bootstrap.rg-compact .rgMasterTable th.rgHeader,
.RadGrid_Bootstrap.rg-compact .rgMasterTable td {
    padding: .4rem .55rem; /* tighter density */
    font-size: .9rem;
    line-height: 1.25;
    vertical-align: middle;
}

/* Header look */
.RadGrid_Bootstrap.rg-compact .rgMasterTable th.rgHeader {
    background: #f8f9fa; /* bs-light */
    color: #212529;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
}

/* Rows */
.RadGrid_Bootstrap.rg-compact .rgMasterTable tr.rgRow td,
.RadGrid_Bootstrap.rg-compact .rgMasterTable tr.rgAltRow td {
    border-color: #e9ecef; /* lighter row separators */
}

.RadGrid_Bootstrap.rg-compact .rgMasterTable tr.rgAltRow td {
    background-color: #fcfcfd; /* subtle zebra */
}

.RadGrid_Bootstrap.rg-compact .rgMasterTable tr:hover td {
    background-color: #f1f3f5; /* hover highlight */
}

/* No-records row */
.RadGrid_Bootstrap.rg-compact .rgNoRecords td {
    text-align: center;
    color: #6c757d;
    padding: 1rem;
}

/* Pager */
.RadGrid_Bootstrap.rg-compact .rgPagerCell,
.RadGrid_Bootstrap.rg-compact .rgPager {
    padding: .25rem .5rem;
    font-size: .875rem;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
}

/* Action column helper (add Item/Header CssClass="col-actions" on that column) */
.RadGrid_Bootstrap.rg-compact .col-actions {
    width: 56px; /* or whatever you like */
    text-align: center !important;
    white-space: nowrap;
}

.RadGrid_Bootstrap.rg-compact .col-actions .grid-actions {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.RadGrid_Bootstrap.rg-compact .col-actions img,
.RadGrid_Bootstrap.rg-compact .col-actions input[type="image"] {
    width: 18px;
    height: 18px;
    opacity: .85;
}

.RadGrid_Bootstrap.rg-compact .col-actions img:hover,
.RadGrid_Bootstrap.rg-compact .col-actions input[type="image"]:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Align money & numbers right (optional helpers) */
.RadGrid_Bootstrap.rg-compact .text-right {
    text-align: right !important;
}

.RadGrid_Bootstrap.rg-compact .text-center {
    text-align: center !important;
}


/* Compact spacing to decrease distance between labels and controls*/
.compact-forms .form-label {margin-bottom: .25rem !important;
}
/* was .5rem */
.compact-forms .row {--bs-gutter-y: .5rem;} /* was 1rem (g-3) */


/* ************************************************************ */
/* ******************** RADCOMBOBOX *****************************/
/* ************************************************************ */
/* remove inner textbox look ===== */
.RadComboBox_Bootstrap .rcbInput {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0.375rem 0.75rem !important;
    height: 100% !important;
}

/* Remove inner wrapper padding */
.RadComboBox_Bootstrap .rcbInner {
    padding: 0 !important;
}

/* Focus state should apply to the outer control, not inner input */
.RadComboBox_Bootstrap:focus-within {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}