/* Input widgets: same 36px / Inter 14px contract as forms.css. Kendo owns
   visibility, widths, popup placement and interaction; only skin it here.
   Keep selection/focus neutral and preserve color swatches as user data. */
:is(.k-datepicker,.k-datetimepicker,.k-timepicker,.k-dateinput,.k-numerictextbox,.k-maskedtextbox,.k-dropdownlist,.k-combobox,.k-multiselect,.k-colorpicker) {
  min-width: 0;
  min-height: var(--mkp-control-height);
  max-width: 100%;
  padding: 0;
  border-color: var(--mkp-border);
  border-radius: var(--mkp-radius);
  background-color: var(--mkp-surface);
  color: var(--mkp-foreground);
  font: 400 var(--mkp-font-size)/1.25rem var(--mkp-font);
  box-shadow: var(--mkp-shadow);
}
:is(.k-datepicker,.k-datetimepicker,.k-timepicker,.k-dateinput,.k-numerictextbox,.k-maskedtextbox,.k-dropdownlist,.k-combobox,.k-colorpicker):not(.k-input-sm,.k-picker-sm) {
  height: var(--mkp-control-height);
}
:is(.k-input,.k-picker):is(.k-input-sm,.k-picker-sm) {
  min-height: var(--mkp-control-height-sm);
}
/* Explicit small widgets keep the same 32px contract inside admin-form;
   its generic Kendo rule otherwise gives these controls a 36px height. */
body :is(.k-datepicker,.k-datetimepicker,.k-timepicker,.k-dateinput,.k-numerictextbox,.k-maskedtextbox,.k-dropdownlist,.k-combobox,.k-colorpicker):is(.k-input-sm,.k-picker-sm) {
  height: var(--mkp-control-height-sm);
  min-height: var(--mkp-control-height-sm);
}
:is(.k-datepicker,.k-datetimepicker,.k-timepicker,.k-numerictextbox,.k-maskedtextbox,.k-dropdownlist,.k-combobox) > .k-input-inner {
  min-height: 0;
  padding: .4375rem .75rem;
  line-height: 1.25rem;
  color: inherit;
}
/* MVC's form-control class must not change the text inset compared with
   native fields. The wrapper, never the inner input, owns the focus ring. */
:is(.k-datepicker,.k-datetimepicker,.k-timepicker,.k-dateinput,.k-numerictextbox,.k-maskedtextbox,.k-combobox) > .k-input-inner.form-control,
:is(.k-datepicker,.k-datetimepicker,.k-timepicker,.k-dateinput,.k-numerictextbox,.k-maskedtextbox,.k-combobox) > .k-input-inner.form-control:focus {
  padding-inline: .75rem;
}
/* A 32px shell has 30px inside its border: 20px text + 5px per side.
   Include MVC form-control inputs and the editor's compact font picker. */
body :is(.k-datepicker,.k-datetimepicker,.k-timepicker,.k-dateinput,.k-numerictextbox,.k-maskedtextbox,.k-dropdownlist,.k-combobox):is(.k-input-sm,.k-picker-sm) > .k-input-inner,
.k-editor .k-editor-toolbar :is(.k-combobox,.k-dropdownlist) > .k-input-inner {
  padding-block: .3125rem;
}
/* DateInput can be nested inside a DatePicker. Only the outer shell has a
   border/ring; a second minimum height would push its buttons off center. */
:is(.k-datepicker,.k-datetimepicker,.k-timepicker) > .k-dateinput,
:is(.k-datepicker,.k-datetimepicker,.k-timepicker) > .k-dateinput:is(:focus-within,.k-focus) {
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  background: transparent;
}
:is(.k-datepicker,.k-datetimepicker,.k-timepicker,.k-dateinput,.k-numerictextbox,.k-maskedtextbox,.k-dropdownlist,.k-combobox,.k-multiselect,.k-colorpicker):is(:focus-within,.k-focus) {
  border-color: var(--mkp-ring-color);
  box-shadow: var(--mkp-ring);
}
:is(.k-input,.k-picker) .k-input-inner::placeholder {
  color: var(--mkp-muted-foreground);
  opacity: 1;
}
:is(.k-datepicker,.k-datetimepicker,.k-timepicker,.k-dropdownlist,.k-combobox,.k-colorpicker) > .k-input-button {
  width: 2rem;
  padding: 0;
  border-width: 0;
  border-radius: 0 calc(var(--mkp-radius) - 1px) calc(var(--mkp-radius) - 1px) 0;
  background: transparent;
  color: var(--mkp-muted-foreground);
  box-shadow: none;
}
:is(.k-datepicker,.k-datetimepicker,.k-timepicker,.k-dropdownlist,.k-combobox,.k-colorpicker) > .k-input-button:hover {
  background: var(--mkp-muted);
  color: var(--mkp-foreground);
}
/* Page-size pickers are compact controls, even when Kendo emits picker-md.
   Reserve space for three digits (100/200), two 8px insets and the 24px
   arrow together. Generic form padding previously left only 12px for "20".
   Keep this contract in compact pagers too; Grids owns pager visibility. */
.k-pager .k-pager-sizes > .k-picker.k-dropdownlist,
.k-grid .k-grid-pager .k-pager-sizes > .k-picker.k-dropdownlist {
  width: 80px;
  min-width: 80px;
  height: var(--mkp-control-height-sm);
  min-height: var(--mkp-control-height-sm);
  flex-shrink: 0;
  font-size: var(--mkp-font-size);
  font-variant-numeric: tabular-nums;
}
.k-pager .k-pager-sizes > .k-picker.k-dropdownlist > .k-input-inner,
.k-grid .k-grid-pager .k-pager-sizes > .k-picker.k-dropdownlist > .k-input-inner {
  padding: 0 .5rem;
}
.k-pager .k-pager-sizes > .k-picker.k-dropdownlist > .k-input-button,
.k-grid .k-grid-pager .k-pager-sizes > .k-picker.k-dropdownlist > .k-input-button {
  width: 24px;
  min-width: 24px;
  flex: 0 0 24px;
  padding: 0;
}
.k-numerictextbox .k-spin-button {
  border-color: var(--mkp-border);
  background: transparent;
  color: var(--mkp-muted-foreground);
  box-shadow: none;
}
.k-numerictextbox .k-spin-button:hover { background: var(--mkp-muted); color: var(--mkp-foreground); }
:is(.k-datepicker,.k-datetimepicker,.k-timepicker,.k-numerictextbox) .k-input-inner,
input:is(.cpf-mask,.cnpj-mask,.cpfCnpj-mask,.cep-mask,.phone-mask,.money-mask) { font-variant-numeric: tabular-nums; }

/* Multi-value controls grow with their chips, without a fixed height. */
.k-multiselect .k-input-values { min-width: 0; padding: .25rem .5rem; gap: .25rem; }
.k-multiselect .k-chip {
  max-width: 100%;
  min-height: 1.5rem;
  border: 1px solid var(--mkp-border);
  border-radius: var(--mkp-radius-sm);
  background: var(--mkp-muted);
  color: var(--mkp-foreground);
  font-size: .75rem;
  box-shadow: none;
}
.k-multiselect .k-chip.k-focus { outline: 1px solid var(--mkp-ring-color); }
.k-multiselect .k-chip-content { min-width: 0; }
.k-multiselect .k-chip-label { overflow: hidden; text-overflow: ellipsis; }

/* MVC validation is attached to the original input, sometimes hidden by
   the widget. Reflect it on the visible shell, including after focus. */
:is(.k-input,.k-picker):is(.k-invalid,.input-validation-error,.is-invalid,.error,[aria-invalid="true"]),
:is(.k-input,.k-picker):has(input:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"]),select:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"])) {
  border-color: var(--mkp-danger);
}
:is(.k-input,.k-picker):is(.k-invalid,.input-validation-error,.is-invalid,.error,[aria-invalid="true"]):focus-within,
:is(.k-input,.k-picker):has(input:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"]),select:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"])):focus-within {
  box-shadow: 0 0 0 3px rgb(185 28 28 / 20%);
}
:is(.k-input,.k-picker):is(.k-disabled,[aria-disabled="true"]) {
  background-color: var(--mkp-muted);
  cursor: not-allowed;
  box-shadow: none;
}

/* Popup containers retain Kendo's positioning and animation dimensions. */
.k-calendar-container,
.k-popup:is(.k-list-container,.k-multiselect-popup,.k-colorpicker-popup,.k-datetime-container,.k-time-popup) {
  border: 1px solid var(--mkp-border);
  border-radius: var(--mkp-radius);
  background: var(--mkp-surface);
  color: var(--mkp-foreground);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
}
.k-list-container .k-list,
.k-multiselect-popup .k-list { background: var(--mkp-surface); color: var(--mkp-foreground); }
:is(.k-list-container,.k-multiselect-popup) .k-list-content { padding: .25rem; }
:is(.k-list-container,.k-multiselect-popup) .k-list-item {
  min-height: 2rem;
  padding: .375rem .5rem;
  border-radius: var(--mkp-radius-sm);
  font: 400 var(--mkp-font-size)/1.25rem var(--mkp-font);
}
:is(.k-list-container,.k-multiselect-popup) .k-list-item:is(:hover,.k-hover,.k-selected) {
  background: var(--mkp-muted);
  color: var(--mkp-foreground);
}
:is(.k-list-container,.k-multiselect-popup) .k-list-item.k-selected {
  background: var(--mkp-selection);
}
:is(.k-list-container,.k-multiselect-popup) .k-list-item.k-focus {
  box-shadow: inset 0 0 0 1px var(--mkp-ring-color);
}

.k-calendar {
  border-color: var(--mkp-border);
  border-radius: var(--mkp-radius);
  background: var(--mkp-surface);
  color: var(--mkp-foreground);
  font: 400 var(--mkp-font-size)/1.25rem var(--mkp-font);
}
.k-calendar .k-calendar-header,
.k-calendar .k-header { background: var(--mkp-surface); border-color: var(--mkp-border); }
.k-calendar .k-calendar-title,
.k-calendar .k-nav-fast,
.k-calendar .k-calendar-nav-fast { font-weight: 600; color: var(--mkp-foreground); }
/* Navigation remains visibly focusable without a tenant-colored outline.
   Do not resize the header: Kendo measures it for popup placement. */
.k-calendar :is(.k-calendar-header,.k-header) :is(.k-button,.k-link):is(:focus-visible,.k-focus) {
  box-shadow: inset 0 0 0 2px var(--mkp-ring-color);
  outline: 0;
}
.k-calendar .k-calendar-th,
.k-calendar th { color: var(--mkp-muted-foreground); font-size: .75rem; font-weight: 400; }
/* Compact the ordinary date picker only. Infinite/range calendars retain
   their measured scrolling geometry and number of displayed months. */
.k-calendar:not(.k-calendar-infinite,.k-calendar-range) {
  --INTERNAL--kendo-calendar-view-width: 256px;
}
.k-calendar:not(.k-calendar-infinite,.k-calendar-range) .k-calendar-header { min-width: 0; }
.k-calendar:not(.k-calendar-infinite,.k-calendar-range) .k-calendar-view { min-height: 224px; }
.k-calendar:not(.k-calendar-infinite,.k-calendar-range) :is(.k-month-calendar,.k-calendar-monthview) {
  --INTERNAL--kendo-calendar-cell-size: 32px;
}
.k-calendar:not(.k-calendar-infinite,.k-calendar-range) :is(.k-year-calendar,.k-calendar-yearview,.k-decade-calendar,.k-calendar-decadeview,.k-century-calendar,.k-calendar-centuryview) {
  --INTERNAL--kendo-calendar-cell-size: 64px;
}
.k-calendar:not(.k-calendar-infinite,.k-calendar-range) .k-calendar-th { block-size: 32px; }
.k-calendar .k-link { border-radius: var(--mkp-radius-sm); color: var(--mkp-foreground); text-decoration: none; }
.k-calendar :is(.k-calendar-td,td):is(:hover,.k-hover) .k-link { background: var(--mkp-muted); }
.k-calendar :is(.k-calendar-td,td).k-selected .k-link {
  background: var(--mkp-foreground);
  color: var(--mkp-surface);
  border-color: var(--mkp-foreground);
}
.k-calendar :is(.k-calendar-td,td).k-today:not(.k-selected) .k-link {
  background: var(--mkp-muted);
  color: var(--mkp-foreground);
  box-shadow: inset 0 0 0 1px var(--mkp-border);
  font-weight: 600;
}
/* Match the vendor's combined selected/today + focus specificity. The
   selected day must never inherit the tenant-colored inset shadow. */
.k-calendar .k-calendar-view :is(.k-calendar-td,td):is(:focus,.k-focus,.k-focused,.k-state-focused) :is(.k-link,.k-calendar-cell-inner),
.k-calendar .k-calendar-view :is(.k-calendar-td,td):is(.k-selected,.k-today):is(:focus,.k-focus,.k-focused,.k-state-focused) :is(.k-link,.k-calendar-cell-inner) {
  border-color: var(--mkp-ring-color);
  box-shadow: inset 0 0 0 2px var(--mkp-ring-color);
}
.k-calendar :is(.k-other-month,.k-other-year) .k-link { color: var(--mkp-muted-foreground); }
.k-calendar :is(.k-calendar-footer,.k-footer) { padding: .25rem .5rem; border-color: var(--mkp-border); background: var(--mkp-surface); }
.k-calendar :is(.k-calendar-footer,.k-footer) :is(.k-link,.k-calendar-nav-today) {
  min-height: 1.75rem;
  padding: .25rem;
  font-size: .75rem;
  color: var(--mkp-link);
}
.k-time-list .k-item:is(:hover,.k-hover,.k-selected),
.k-time-list .k-time-list-item:is(:hover,.k-hover,.k-selected) { background: var(--mkp-muted); color: var(--mkp-foreground); }

/* Editor tool groups keep Kendo's responsive overflow and keyboard model. */
.k-editor { border-color: var(--mkp-border); border-radius: var(--mkp-radius); background: var(--mkp-surface); }
.k-editor .k-editor-toolbar {
  container: mkp-editor-tools / inline-size;
  padding: .5rem;
  gap: .375rem;
  column-gap: .25rem;
  border-color: var(--mkp-border);
  border-radius: var(--mkp-radius) var(--mkp-radius) 0 0;
  background: var(--mkp-muted);
}
.k-editor-toolbar .k-button {
  min-height: 0;
  border-radius: var(--mkp-radius-sm);
  border-color: transparent;
  background: transparent;
  color: var(--mkp-foreground);
  box-shadow: none;
}
/* Toolbar actions share the compact picker's 32px height. The embedded
   picker arrow must fit inside its border, not inherit a second minimum. */
.k-editor-toolbar .k-button:not(.k-input-button) {
  height: var(--mkp-control-height-sm);
  min-height: var(--mkp-control-height-sm);
  padding-block: .3125rem;
  line-height: 1.25rem;
}
.k-editor-toolbar .k-icon-button:not(.k-input-button) {
  width: var(--mkp-control-height-sm);
}
.k-editor-toolbar .k-button:is(:hover,.k-hover,.k-selected,.k-active) {
  border-color: var(--mkp-border);
  background: var(--mkp-surface);
  color: var(--mkp-foreground);
  box-shadow: var(--mkp-shadow);
}
.k-editor-toolbar .k-button:is(.k-selected,.k-active,[aria-pressed="true"]) {
  border-color: var(--mkp-ring-color);
  background: var(--mkp-selection);
  color: var(--mkp-foreground);
}
.k-editor-toolbar .k-button:is(:focus-visible,.k-focus) { box-shadow: var(--mkp-ring); }
.k-editor-toolbar :is(.k-combobox,.k-dropdownlist,.k-colorpicker) {
  min-height: var(--mkp-control-height-sm);
  height: var(--mkp-control-height-sm);
}
/* The localized inherited-size label needs room for both its text and
   the arrow. Kendo measures this width for the list and toolbar overflow. */
.k-editor .k-editor-toolbar .k-combobox {
  width: 14rem;
  min-width: 14rem;
  flex-shrink: 0;
}
/* Narrow editors keep the font-size label, clear action and 32px arrow
   intact. Smaller text insets make room for lists and table on the same
   line, without changing tool order or Kendo's contextual visibility. */
@container mkp-editor-tools (max-width: 34rem) {
  .k-editor .k-editor-toolbar .k-combobox {
    width: 13rem;
    min-width: 13rem;
  }
  .k-editor .k-editor-toolbar .k-combobox > .k-input-inner {
    padding-inline: .5rem;
  }
}
/* Below the combined width of the picker + list group + table action,
   give the picker its own row instead of orphaning the table command. */
@container mkp-editor-tools (max-width: 310px) {
  .k-editor .k-editor-toolbar > .k-toolbar-item:has(.k-combobox) {
    flex-basis: 100%;
  }
  .k-editor .k-editor-toolbar .k-combobox {
    width: 100%;
  }
}
.k-editor .k-editable-area { padding: 0; }
.k-colorpicker .k-color-preview { border-color: var(--mkp-border); border-radius: .25rem; }

/* Keep the vendor's flag sprite, dial-code width, input padding and list
   placement. Those encode the selected country and must not be hardcoded. */
:is(.iti,.intl-tel-input,.country-select) { font: 400 var(--mkp-font-size)/1.25rem var(--mkp-font); max-width: 100%; }
:is(.iti,.intl-tel-input,.country-select) input {
  min-height: var(--mkp-control-height);
  height: var(--mkp-control-height);
  border: 1px solid var(--mkp-border);
  border-radius: var(--mkp-radius);
  background-color: var(--mkp-surface);
  color: var(--mkp-foreground);
  font: inherit;
  box-shadow: var(--mkp-shadow);
}
:is(.iti,.intl-tel-input,.country-select) input:focus {
  outline: 0;
  border-color: var(--mkp-ring-color);
  box-shadow: var(--mkp-ring);
}
/* CountrySelect intentionally marks its text input readonly; the flag is
   still an interactive selector, so keep the normal field surface/shadow. */
.country-select input:where(.form-control[readonly]):not(:disabled) {
  background-color: var(--mkp-surface);
  color: var(--mkp-foreground);
  box-shadow: var(--mkp-shadow);
}
.country-select input:where(.form-control[readonly]):not(:disabled):focus,
:is(.iti,.intl-tel-input,.country-select):where(:has(:is(.selected-flag,.iti__selected-flag):focus-visible)) input:not(:disabled) {
  border-color: var(--mkp-ring-color);
  box-shadow: var(--mkp-ring);
}
:is(.iti,.intl-tel-input,.country-select) :is(.selected-flag,.iti__selected-flag) {
  border-radius: calc(var(--mkp-radius) - 1px) 0 0 calc(var(--mkp-radius) - 1px);
  background-color: transparent;
}
:is(.iti,.intl-tel-input,.country-select) :is(.selected-flag,.iti__selected-flag):is(:hover,:focus-visible) {
  background-color: var(--mkp-muted);
}
:is(.iti,.intl-tel-input,.country-select) :is(.selected-flag,.iti__selected-flag):focus-visible { outline: 2px solid var(--mkp-ring-color); outline-offset: -2px; }
.iti__country-list,
:is(.intl-tel-input,.country-select) .country-list {
  max-width: calc(100vw - 2rem);
  padding: .25rem;
  border: 1px solid var(--mkp-border);
  border-radius: var(--mkp-radius);
  background: var(--mkp-surface);
  color: var(--mkp-foreground);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
  font: 400 var(--mkp-font-size)/1.25rem var(--mkp-font);
}
.iti__country,
:is(.intl-tel-input,.country-select) .country-list .country {
  padding: .375rem .5rem;
  border-radius: var(--mkp-radius-sm);
  white-space: normal;
}
.iti__country:is(.iti__highlight,.iti__active),
:is(.intl-tel-input,.country-select) .country-list .country:is(.highlight,.active) {
  background-color: var(--mkp-muted);
  color: var(--mkp-foreground);
}
.iti__dial-code,
.intl-tel-input .country-list .dial-code { color: var(--mkp-muted-foreground); }
:is(.iti,.intl-tel-input,.country-select) input:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"]) { border-color: var(--mkp-danger); }
:is(.iti,.intl-tel-input,.country-select) input:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"]):focus,
:is(.iti,.intl-tel-input,.country-select):focus-within input:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"]) { box-shadow: 0 0 0 3px rgb(185 28 28 / 20%); }
:is(.iti,.intl-tel-input,.country-select) input:disabled { background: var(--mkp-muted); cursor: not-allowed; opacity: .5; }