/* App-wide styling of Telerik controls, except the Grid (grid.css). Loaded after the Telerik theme.

   Sections: Inputs (size of every input-type control) | Forms | TabStrip | Dialogs */

/* ===================== Inputs =====================
   One size for every Telerik input-type control in the app: TextBox, NumericTextBox, DropDownList,
   ComboBox, MultiColumnComboBox, DatePicker, ... It applies wherever the control is (forms, search
   areas, grid cell editors, grid filter row) and whatever Size it was given, including the controls
   Telerik renders in popups at the end of <body> (dropdown search box, grid filter menu), which
   page-scoped CSS can't reach. Don't size these controls in page or component CSS: change it here. */

.k-input,
.k-picker {
    --kendo-font-size: 0.8rem;      /* controls left at Telerik's default size (md) */
    --kendo-font-size-sm: 0.8rem;   /* Size="sm" */
    min-height: 0;
}

/* Listed per size to match the specificity of Telerik's own rules (.k-input.k-input-sm .k-input-inner);
   this file loads after the theme, so it wins. The plain .k-input / .k-picker lines cover controls
   rendered without a size class (e.g. the grid toolbar's search box). */
.k-input .k-input-inner,
.k-input .k-input-button,
.k-input .k-input-icon,
.k-picker .k-input-inner,
.k-picker .k-input-button,
.k-input.k-input-sm .k-input-icon,
.k-input.k-input-md .k-input-icon,
.k-input.k-input-lg .k-input-icon,
.k-input.k-input-sm .k-input-inner,
.k-input.k-input-md .k-input-inner,
.k-input.k-input-lg .k-input-inner,
.k-input.k-input-sm .k-input-button,
.k-input.k-input-md .k-input-button,
.k-input.k-input-lg .k-input-button,
.k-picker.k-picker-sm .k-input-inner,
.k-picker.k-picker-md .k-input-inner,
.k-picker.k-picker-lg .k-input-inner,
.k-picker.k-picker-sm .k-input-button,
.k-picker.k-picker-md .k-input-button,
.k-picker.k-picker-lg .k-input-button,
/* The clear "X" shown while there's text: with Telerik's padding it is taller than the box and grows it. */
.k-input .k-clear-value,
.k-input.k-input-sm .k-clear-value,
.k-input.k-input-md .k-clear-value,
.k-input.k-input-lg .k-clear-value,
.k-picker .k-clear-value,
.k-picker.k-picker-sm .k-clear-value,
.k-picker.k-picker-md .k-clear-value,
.k-picker.k-picker-lg .k-clear-value {
    padding-block: 0.1rem;
}

/* Number box arrows: two stacked buttons, each half the box height. */
.k-input .k-spin-button .k-button {
    height: auto;
    min-height: 0;
    padding-block: 0;
}

/* Popups use the same font size as the inputs: the lists of DropDownList, ComboBox, MultiColumnComboBox
   (its table too), the grid's filter menu... Telerik renders them at the end of <body>, outside any page,
   so they would otherwise get the theme's sizes (14px lists, 16px MultiColumnComboBox table).
   Grid cell editors' popups use the grid's font instead (.grid-editor-popup in grid.css). */
.k-popup {
    --kendo-font-size: 0.8rem;
    --kendo-font-size-sm: 0.8rem;
}

/* Buttons inside popups (grid filter menu: And / Or, Filter, Clear); not a dropdown's own arrow button */
.k-popup .k-button:not(.k-input-button, .k-spin-button .k-button) {
    padding-block: 0.15rem;
    font-size: 0.8rem;
}

/* ===================== Forms =====================
   Label above the control (TelerikForm FormItems and the Labeled* controls); red * for required fields. */
.k-form-field {
    display: flex;
    flex-direction: column;
    margin-block-end: 1rem;
}

.k-form-field .k-label {
    margin-block-end: .375rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.k-form-field .required-asterisk {
    margin-inline-start: .25rem;
    color: var(--kendo-color-error);
}

/* ===================== TabStrip ===================== */
.k-tabstrip-content,
.k-tabstrip > .k-content {
    border-color: transparent;
}

.k-tabstrip-items-wrapper .k-tabstrip-item,
.k-tabstrip-items-wrapper .k-item {
    color: inherit;
}

.k-tabstrip-items-wrapper .k-tabstrip-item:active,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-active,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-selected,
.k-tabstrip-items-wrapper .k-item:active,
.k-tabstrip-items-wrapper .k-item.k-active,
.k-tabstrip-items-wrapper .k-item.k-selected {
    border-color: var(--kendo-color-border);
    color: var(--kendo-color-primary);
    background-color: var(--kendo-color-surface-alt);
    font-weight: 500;
}

.k-tabstrip-items-wrapper .k-tabstrip-item:focus,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-focus,
.k-tabstrip-items-wrapper .k-item:focus,
.k-tabstrip-items-wrapper .k-item.k-focus {
    box-shadow: none;
}

/* ===================== Dialogs =====================
   Message boxes (MessageBoxService / MessageBoxHost) and any TelerikDialog:
   the text and buttons at the inputs' size, the title a little larger and bold. */
.k-dialog {
    --kendo-font-size: 0.8rem;
    font-size: 0.8rem;
}

.k-dialog .k-window-title,
.k-dialog .k-dialog-title {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Message box: the type's icon on the left, the text (and a Prompt's text box) next to it. */
.message-box-body {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.message-box-icon {
    flex-shrink: 0;
}

.message-box-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
    padding-top: 0.35rem;      /* first line level with the middle of the icon */
    white-space: pre-line;     /* line breaks in the message are kept */
}

/* Theme colors: the same in light and dark mode. */
.message-box-question { color: var(--kendo-color-primary); }
.message-box-info     { color: var(--kendo-color-info); }
.message-box-warning  { color: var(--kendo-color-warning); }
.message-box-error    { color: var(--kendo-color-error); }
.message-box-success  { color: var(--kendo-color-success); }

.k-dialog .k-actions .k-button {
    font-size: 0.8rem;
    padding-block: 0.25rem;
}