/*
    Radzen -> legacy theme bridge (loaded right after the legacy bundle).
    Radzen components that carry legacy bootstrap classes (".form-control", ".btn") keep Radzen's behavior but must look like
    the Web Forms screens. Radzen's state rules outrank bootstrap's, so instead of fighting specificity the Radzen variables
    they read are pointed at the computed legacy values (measured on the legacy markup).
*/

/* ---------- Inputs (RadzenTextBox / RadzenTextArea / RadzenNumeric / RadzenDatePicker / RadzenDropDown with ".form-control") ---------- */
/* bootstrap.css ".form-control:hover" (border #bdbdbd), ".form-control:focus" (border + glow) and
   ".form-control[disabled], fieldset[disabled] .form-control" (gray, fully opaque). */
.rz-textbox.form-control,
.rz-textarea.form-control,
.rz-numeric.form-control,
.rz-datepicker.form-control,
.rz-dropdown.form-control {
    --rz-input-hover-border: 1px solid #bdbdbd;
    --rz-input-hover-border-block-end: 1px solid #bdbdbd;
    --rz-input-hover-shadow: none;
    --rz-input-hover-background-color: #ffffff;
    --rz-input-focus-border: 1px solid #bdbdbd;
    --rz-input-focus-border-block-end: 1px solid #bdbdbd;
    --rz-input-focus-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(189, 189, 189, 0.6);
    --rz-input-focus-background-color: #ffffff;
    --rz-input-disabled-background-color: #eeeeee;
    --rz-input-disabled-border: 1px solid #cacaca;
    --rz-input-disabled-border-block-end: 1px solid #cacaca;
    --rz-input-disabled-color: #333333;
    --rz-input-disabled-placeholder-color: #777777;
    --rz-input-disabled-opacity: 1;
    --rz-input-disabled-shadow: none;
}

/* ---------- Buttons (CustomButton: RadzenButton with "btn btn-*") ---------- */
/* Radzen paints only background-color (var --rz-base) and color (var --rz-on-base) over bootstrap's ".btn" rules; borders,
   padding and fonts already come from bootstrap. Values: computed legacy colors per state (transitions disabled). */
.rz-button.btn {
    --rz-button-size-md: 0;
    --rz-button-hover-gradient: none;
    --rz-button-focus-gradient: none;
    --rz-button-active-gradient: none;
    --rz-button-hover-shadow: none;
    --rz-button-focus-shadow: none;
    --rz-button-active-shadow: none;
    --rz-button-focus-outline: none;
    --rz-button-disabled-opacity: 0.65;
}

.rz-button.btn-default { --rz-base: #e8e8e8; --rz-on-base: #333333; }
.rz-button.btn-default:hover, .rz-button.btn-default:focus { --rz-base: #dbdbdb; }
.rz-button.btn-default:active { --rz-base: #f5f5f5; }
.rz-button.btn-default:active:hover, .rz-button.btn-default:active:focus { --rz-base: #dbdbdb; }

.rz-button.btn-primary { --rz-base: #0bacd3; --rz-on-base: #ffffff; }
.rz-button.btn-primary:hover, .rz-button.btn-primary:focus { --rz-base: #0a98bb; }
.rz-button.btn-primary:active { --rz-base: #0cc0eb; }
.rz-button.btn-primary:active:hover, .rz-button.btn-primary:active:focus { --rz-base: #076981; }

.rz-button.btn-success { --rz-base: #51bf87; --rz-on-base: #ffffff; }
.rz-button.btn-success:hover, .rz-button.btn-success:focus { --rz-base: #3ba26e; }
.rz-button.btn-success:active { --rz-base: #64c694; }
.rz-button.btn-success:active:hover, .rz-button.btn-success:active:focus { --rz-base: #32875c; }

.rz-button.btn-info { --rz-base: #29b6d8; --rz-on-base: #ffffff; }
.rz-button.btn-info:hover, .rz-button.btn-info:focus { --rz-base: #24a5c4; }
.rz-button.btn-info:active { --rz-base: #3fbddc; }
.rz-button.btn-info:active:hover, .rz-button.btn-info:active:focus { --rz-base: #1a7990; }

.rz-button.btn-warning { --rz-base: #f4ad49; --rz-on-base: #ffffff; }
.rz-button.btn-warning:hover, .rz-button.btn-warning:focus { --rz-base: #f3a231; }
.rz-button.btn-warning:active { --rz-base: #f5b861; }
.rz-button.btn-warning:active:hover, .rz-button.btn-warning:active:focus { --rz-base: #d9840d; }

.rz-button.btn-danger { --rz-base: #db5565; --rz-on-base: #ffffff; }
.rz-button.btn-danger:hover, .rz-button.btn-danger:focus { --rz-base: #d12c40; }
.rz-button.btn-danger:active { --rz-base: #df6a78; }
.rz-button.btn-danger:active:hover, .rz-button.btn-danger:active:focus { --rz-base: #b32637; }

.rz-button.btn-link { --rz-base: transparent; --rz-on-base: #0bacd3; }
.rz-button.btn-link:hover, .rz-button.btn-link:focus { --rz-on-base: #07718a; }
.rz-button.btn-link:active { --rz-on-base: #0bacd3; }
.rz-button.btn-link:active:hover, .rz-button.btn-link:active:focus { --rz-on-base: #07718a; }

    /* The legacy button content is plain inline text after the icon. */
    .rz-button.btn .rz-button-box {
        display: inline;
        line-height: inherit;
        vertical-align: baseline;
    }

/* ---------- Select (CustomSelectInput: RadzenDropDown as the legacy select2 4.0.5 ".selectManual" / ".selectManualClear") ---------- */
/* Legacy cascade: bootstrap ".form-control" on "span.select2-selection" (select2.js), select2.min.css ("--default" theme),
   select2.app.css, Site.css (italic placeholder, option padding) and the App_Themes highlight color. Values in comments
   are the legacy selectors they restate. */
.rz-dropdown.custom-select-input {
    /* The field is the dropdown's anchor (".select2-container" is the arrow's offset parent). */
    position: relative;
    /* ".select2-container--default .select2-selection--single" (outranks bootstrap's 3px). */
    border-radius: 4px;
    cursor: pointer;
    /* Open: the focus is in the search box, so the field keeps its normal border. */
    --rz-dropdown-open-border: 1px solid #cacaca;
    --rz-dropdown-open-background-color: #ffffff;
}

    /* ".select2-container--open.select2-container--below .select2-selection--single" (Radzen opens below when it fits). */
    .rz-dropdown.custom-select-input[aria-expanded="true"] {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Site.css ".select2-container--disabled .form-control". */
    .rz-dropdown.custom-select-input.rz-state-disabled,
    .rz-dropdown.custom-select-input.rz-state-disabled * {
        cursor: not-allowed;
    }

    /* ".select2-selection__rendered": 4px after the ".form-control" padding, 10px before the arrow. */
    .rz-dropdown.custom-select-input > .rz-dropdown-label {
        padding: 0 10px 0 4px;
    }

    /* The clear button floats inside the rendered text, before its 10px padding. */
    .rz-dropdown.custom-select-input.rz-clear > .rz-dropdown-label {
        padding-right: 21px;
    }

    /* Site.css ".select2-selection__placeholder". */
    .rz-dropdown.custom-select-input > .rz-dropdown-label.rz-placeholder {
        font-style: italic;
        color: #777777;
    }

    /* ".select2-selection__arrow": 16x30 box 1px inside the field's top/right border. */
    .rz-dropdown.custom-select-input > .rz-dropdown-trigger {
        position: absolute;
        top: 0;
        right: 0;
        width: 16px;
        height: 30px;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
    }

        /* ".select2-selection__arrow b": CSS triangle instead of Radzen's icon glyph. */
        .rz-dropdown.custom-select-input > .rz-dropdown-trigger > .rz-dropdown-trigger-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            margin: -2px 0 0 -4px;
            font-size: 0;
            border-style: solid;
            border-width: 6px 3px 0 3px;
            border-color: #333333 transparent transparent transparent;
        }

            .rz-dropdown.custom-select-input > .rz-dropdown-trigger > .rz-dropdown-trigger-icon::before {
                content: none;
            }

        /* ".select2-container--open ... .select2-selection__arrow b". */
        .rz-dropdown.custom-select-input[aria-expanded="true"] > .rz-dropdown-trigger > .rz-dropdown-trigger-icon {
            border-width: 0 4px 5px 4px;
            border-color: transparent transparent #333333 transparent;
        }

    /* ".select2-selection__clear" (select2.js renders <i class="fa fa-close">): floated at the end of the rendered text, on its
       20px line (glyph centered 16px below the field's top). */
    .rz-dropdown.custom-select-input > .rz-dropdown-clear-icon {
        inset-inline-end: 22px;
        width: auto;
        height: 30px;
        font: normal normal normal 14px/1 FontAwesome;
        color: #333333;
        opacity: 1;
    }

        .rz-dropdown.custom-select-input > .rz-dropdown-clear-icon::before {
            content: "\f00d";
        }

/* ".select2-dropdown": same width as the field, sharing its border on the side it opens to ("--below": no top border,
   "--above": no bottom border). Radzen gives no class for the side, so the top and bottom lines are 1px shadows outside the
   box: they land on the field's own border either way. RadzenDropDown is only used by CustomSelectInput, and its popup is
   moved to <body>, so these rules are not scoped. */
.rz-dropdown-panel {
    padding: 0;
    font-size: 14px;
    color: #333333;
    background-color: #ffffff;
    border: solid #cacaca;
    border-width: 0 1px;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 -1px 0 0 #cacaca, 0 1px 0 0 #cacaca;
}

    /* ".select2-search--dropdown" / select2.app.css ".select2-search". */
    .rz-dropdown-panel .rz-dropdown-filter-container {
        position: relative;
        display: block;
        padding: 4px;
        border: none;
    }

        /* ".select2-search--dropdown .select2-search__field" + select2.app.css ".select2-search input" (magnifier sprite). */
        .rz-dropdown-panel .rz-dropdown-filter-container .rz-dropdown-filter,
        .rz-dropdown-panel .rz-dropdown-filter-container .rz-dropdown-filter:hover,
        .rz-dropdown-panel .rz-dropdown-filter-container .rz-dropdown-filter:focus {
            display: block;
            box-sizing: border-box;
            width: 100%;
            height: auto;
            min-height: 30px;
            margin: 0;
            padding: 4px;
            font-family: sans-serif;
            font-size: 14px;
            font-weight: normal;
            font-style: normal;
            line-height: 20px;
            color: #333333;
            background: #ffffff url("../images/select2.png") no-repeat 100% -22px;
            border: 1px solid #cacaca;
            border-radius: 0;
            outline: 0;
            box-shadow: none;
        }

        .rz-dropdown-panel .rz-dropdown-filter-container .rz-dropdown-filter-icon {
            display: none;
        }

    /* ".select2-results > .select2-results__options": scroll box of up to 380px (CustomSelectInput's PopupStyle). */
    .rz-dropdown-panel .rz-dropdown-items-wrapper {
        margin: 0;
        padding: 0;
        overflow-y: auto;
    }

    .rz-dropdown-panel .rz-dropdown-items {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        /* Site.css ".select2-results__option" (padding 10px); text as the page body. */
        .rz-dropdown-panel .rz-dropdown-items li.rz-dropdown-item {
            margin: 0;
            padding: 10px;
            font-size: 14px;
            font-weight: inherit;
            line-height: 20px;
            color: #333333;
            background-color: transparent;
            border-radius: 0;
        }

            .rz-dropdown-panel .rz-dropdown-items li.rz-dropdown-item > span {
                font: inherit;
                color: inherit;
            }

            /* ".select2-results__option[aria-selected=true]". */
            .rz-dropdown-panel .rz-dropdown-items li.rz-dropdown-item.rz-state-highlight {
                color: #333333;
                background-color: #dddddd;
            }

            /* ".select2-results__option--highlighted[aria-selected]" (color white; background from the theme, below). select2 opens
               with the selected option, or else the first one, highlighted and then moves the highlight with the mouse. */
            .rz-dropdown-panel .rz-dropdown-items li.rz-dropdown-item:hover,
            .rz-dropdown-panel .rz-dropdown-items li.rz-dropdown-item.rz-state-focused,
            .rz-dropdown-panel .rz-dropdown-items:not(:hover):not(:has(.rz-state-focused)) li.rz-dropdown-item.rz-state-highlight,
            .rz-dropdown-panel .rz-dropdown-items:not(:hover):not(:has(.rz-state-focused)):not(:has(.rz-state-highlight)) li.rz-dropdown-item:first-child {
                color: #ffffff;
                background-color: var(--legacy-select2-highlight);
            }

/* themes/cinza.css and themes/azul.css ".select2-container--default .select2-results__option--highlighted[aria-selected]"
   (html class from SiteTheme). */
.tema-cinza {
    --legacy-select2-highlight: #7a7a7a;
}

.tema-azul {
    --legacy-select2-highlight: #4871a3;
}