/* Loaded straight after material-main.css or meridian-main.css (Meridian = AgentLive's default theme since 2026-10-15;
   Meridian also loads meridian-compact.css after this). Keeps the theme's colours and look but sizes every control to
   Kendo's SMALL size (since 2026-10-15): js\kendoui\osl-kendo-small.js makes every widget size "small" (-sm classes),
   and here the -md classes that ~160 pages hard-code in their markup (k-button-md, k-input-md, k-checkbox-md...) get
   the same Small measurements, so widgets and markup match. Text is the site's Inter 13px, not Small's 14px.
   Selectors repeat the class pair the theme itself uses (e.g. .k-button.k-button-md) so these win. */

:root {
    --kendo-font-family: inherit;
    --kendo-font-size: 13px;        /* the site font is Inter 13px (Style.css body) - Kendo text matches it */
    --kendo-font-size-sm: 13px;     /* Small would be 14px */
}

/* buttons: Kendo Small - 4px x 8px padding (md and sm alike); lg left larger */
.k-button, .k-button.k-button-md, .k-button.k-button-sm { padding-block: 4px; padding-inline: 8px; font-weight: 400; }
.k-button.k-button-lg { padding-block: 6px; padding-inline: 12px; }
.k-button.k-icon-button, .k-button.k-button-md.k-icon-button, .k-button.k-button-sm.k-icon-button { padding: 4px; }
.k-button.k-button-lg.k-icon-button { padding: 6px; }

/* text boxes, pickers, dropdowns: Kendo Small - 4px x 8px inner padding, 13px text (the site font size) */
.k-input, .k-input.k-input-md, .k-input.k-input-sm,
.k-picker, .k-picker.k-picker-md, .k-picker.k-picker-sm { font-size: 13px; line-height: 20px; }
.k-input .k-input-inner, .k-input.k-input-md .k-input-inner, .k-input.k-input-sm .k-input-inner,
.k-picker .k-input-inner, .k-picker.k-picker-md .k-input-inner, .k-picker.k-picker-sm .k-input-inner { padding-block: 4px; padding-inline: 8px; }
.k-input .k-input-button, .k-input.k-input-md .k-input-button, .k-input.k-input-sm .k-input-button,
.k-picker .k-input-button, .k-picker.k-picker-md .k-input-button, .k-picker.k-picker-sm .k-input-button { padding-block: 4px; padding-inline: 4px; }

/* checkboxes and radios: Kendo Small - 16px */
.k-checkbox.k-checkbox-md, .k-checkbox.k-checkbox-sm, .k-radio.k-radio-md, .k-radio.k-radio-sm { width: 16px; height: 16px; }

/* grids: Kendo Small - 8px x 8px cells */
.k-grid .k-table-th, .k-grid.k-grid-md .k-table-th, .k-grid.k-grid-sm .k-table-th,
.k-grid .k-table-td, .k-grid.k-grid-md .k-table-td, .k-grid.k-grid-sm .k-table-td { padding-block: 8px; padding-inline: 8px; }
.k-grid { font-size: 13px; }
/* column headings: 13px semi-bold */
.k-grid .k-table-th, .k-grid.k-grid-md .k-table-th,
.k-grid .k-table-th .k-link, .k-grid .k-table-th .k-column-title { font-size: 13px; font-weight: 600; }
.k-list .k-list-item, .k-list.k-list-md .k-list-item,
.k-list .k-list-optionlabel, .k-list.k-list-md .k-list-optionlabel { padding-block: 4px; padding-inline: 8px; }
.k-tabstrip .k-tabstrip-items .k-link, .k-tabstrip.k-tabstrip-md .k-tabstrip-items .k-link { padding-block: 6px; padding-inline: 12px; }
.k-menu .k-menu-link, .k-menu.k-menu-md .k-menu-link { padding-block: 4px; padding-inline: 8px; }
.k-toolbar, .k-toolbar.k-toolbar-md, .k-toolbar.k-toolbar-sm { padding-block: 4px; padding-inline: 8px; }
/* tooltips: Meridian draws them at its medium 16px with 6px x 10px padding - compact like the rest (12px, 4px x 8px) */
.k-tooltip, .k-tooltip.k-popup { font-size: 12px; line-height: 1.4; padding-block: 4px; padding-inline: 8px; }

/* toolbar buttons fill the row's height, so icon-only ones (the listing's prev / next arrows) are as tall as their
   neighbours with image icons (Match, Flyers) instead of a few px shorter */
.k-toolbar .k-button.k-toolbar-button { align-self: stretch; }

/* switches: AgentLive shows YES / NO on its switches (Material hides switch labels and sizes the track for none, so
   the text sat on the edge and was cut off). The class is repeated (.k-switch.k-switch) to beat the theme's own rules,
   including .k-switch-sm now that switches are small. Wider 26px-high track; labels clear of the 18px thumb. */
.k-switch.k-switch, .k-switch.k-switch .k-switch-track { width: 64px; height: 26px; }
.k-switch.k-switch .k-switch-thumb { width: 18px; height: 18px; }
.k-switch.k-switch-on .k-switch-thumb-wrap { inset-inline-start: calc(100% - 18px/2 - 4px); }
.k-switch.k-switch-off .k-switch-thumb-wrap { inset-inline-start: calc(18px/2 + 4px); }
.k-switch.k-switch .k-switch-label-on, .k-switch.k-switch .k-switch-label-off {
    display: block; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .3px; overflow: visible;
}
.k-switch.k-switch .k-switch-label-on { inset-inline-start: 9px; color: #fff; }        /* on the dark 'on' track */
.k-switch.k-switch .k-switch-label-off { inset-inline-end: 8px; color: #49454f; }  /* on the light 'off' track */.k-switch.k-switch-off .k-switch-label-on, .k-switch.k-switch-on .k-switch-label-off { visibility: hidden; }   /* only the current state's label */

/* drawer menu: the selected item's highlight is light (Material's light purple, Meridian's light tint), so its text and
   icon must stay dark. (Style.css turns the selected icon white for the older themes' dark highlight, and the text was
   showing white too.) --osl-drawer-selected-text is set by meridian-compact.css; Material uses its on-secondary. */
#drawerMenu .k-drawer-item.k-selected, #drawerMenu .k-drawer-item.k-selected .k-item-text,
#sidebar .k-drawer-item.k-selected, #sidebar .k-drawer-item.k-selected .k-item-text {
    color: var(--osl-drawer-selected-text, var(--kendo-color-on-secondary, #3d3550)) !important;
}
#drawerMenu .k-drawer-item.k-selected .k-icon img, #sidebar .k-drawer-item.k-selected img { filter: none !important; }