/* The nx widgets in Chairside's colours.
   The Kendo bootstrap theme reads every colour from --kendo-color-* and the nx inputs
   from --nx-*. Both are set here from Chairside's semantic tokens (tokens.css, layer 2),
   which already resolve for light, system dark and forced dark, so the widgets follow
   the theme with no dark-mode rules of their own. The kit's own theme.css and
   layout.css style a different shell (body, headings, side menu) and are not loaded. */

:root {
  --kendo-color-app-surface: var(--surface);
  --kendo-color-on-app-surface: var(--ink);
  --kendo-color-subtle: var(--ink-3);
  --kendo-color-surface: var(--surface-2);
  --kendo-color-surface-alt: var(--surface);
  --kendo-color-border: var(--line);
  --kendo-color-border-alt: var(--line-2);

  --kendo-color-base: var(--surface-2);
  --kendo-color-base-hover: var(--surface-3);
  --kendo-color-base-active: var(--surface-3);
  --kendo-color-base-subtle: var(--surface-2);
  --kendo-color-base-subtle-hover: var(--surface-3);
  --kendo-color-base-subtle-active: var(--surface-3);
  --kendo-color-base-emphasis: var(--line-2);
  --kendo-color-base-on-subtle: var(--ink);
  --kendo-color-on-base: var(--ink);

  --kendo-color-primary: var(--accent);
  --kendo-color-primary-hover: color-mix(in srgb, var(--accent) 88%, var(--ink));
  --kendo-color-primary-active: color-mix(in srgb, var(--accent) 78%, var(--ink));
  --kendo-color-primary-emphasis: var(--accent-line);
  --kendo-color-primary-subtle: var(--accent-soft);
  --kendo-color-primary-subtle-hover: var(--accent-soft);
  --kendo-color-primary-on-surface: var(--accent);
  --kendo-color-primary-on-subtle: var(--ink);
  --kendo-color-on-primary: var(--on-accent);

  --kendo-color-secondary: var(--ink-2);
  --kendo-color-on-secondary: var(--surface);
  --kendo-color-tertiary: var(--info);
  --kendo-color-on-tertiary: var(--surface);

  --kendo-color-info: var(--info);
  --kendo-color-info-subtle: var(--info-soft);
  --kendo-color-on-info: var(--surface);
  --kendo-color-success: var(--pos);
  --kendo-color-success-subtle: var(--pos-soft);
  --kendo-color-on-success: var(--surface);
  --kendo-color-warning: var(--warn);
  --kendo-color-warning-subtle: var(--warn-soft);
  --kendo-color-on-warning: var(--ink);
  --kendo-color-error: var(--neg);
  --kendo-color-error-subtle: var(--neg-soft);
  --kendo-color-error-on-surface: var(--neg);
  --kendo-color-on-error: var(--surface);

  --kendo-color-light: var(--surface-2);
  --kendo-color-on-light: var(--ink);
  --kendo-color-dark: var(--ink);
  --kendo-color-on-dark: var(--surface);
  --kendo-color-inverse: var(--ink);
  --kendo-color-on-inverse: var(--surface);

  --nx-font-family: var(--font-ui);
  --kendo-font-family-sans-serif: var(--font-ui);
  --kendo-font-family-monospace: var(--font-mono);
  --kendo-font-family: var(--font-ui);
  --kendo-font-size: var(--ui);
  --nx-font-size: var(--ui);
  --nx-text: var(--ink);
  --nx-muted: var(--ink-3);
  --nx-bg: var(--surface);
  --nx-border: var(--line);
  --nx-input-border: var(--line-2);
  --nx-focus-border: var(--accent);
  --nx-primary: var(--accent);
  --nx-on-primary: var(--on-accent);
  --nx-hover: var(--surface-2);
}

/* The widgets take the page's type: IBM Plex, Latin and Arabic. */
.k-grid, .k-pager, .k-toolbar, .k-popup, .k-window, .k-animation-container, .k-pivot {
  font-family: inherit;
}

/* Figures line up down a column. */
.k-grid td, .k-grid .k-footer-template td, .k-grid .k-group-footer td {
  font-variant-numeric: tabular-nums;
}

/* Right to left: the grid and its popups mirror with the page. */
[dir="rtl"] .k-grid, [dir="rtl"] .k-pager, [dir="rtl"] .k-popup, [dir="rtl"] .k-window {
  direction: rtl;
}
/* Figures sit at the end of the cell: the right in English, the left in Arabic. */
.k-grid td.ui-num, .k-grid .k-footer-template td.ui-num, .k-grid .k-group-footer td.ui-num {
  text-align: end;
}
.k-grid th.ui-num .k-cell-inner, .k-grid th.ui-num .k-link {
  justify-content: flex-end;
}

/* Dates are written left to right inside a right-to-left page, kept at the cell's start. */
[dir="rtl"] .k-grid td.ui-date {
  direction: ltr;
  text-align: right;
}

/* The page-size picker holds "100" without clipping it. */
.k-pager .k-pager-sizes .k-picker, .k-pager .k-pager-sizes .ts-wrapper {
  min-width: 72px;
}

/* In Arabic the picker's arrow sits on the left; its text keeps the room on the right. */
[dir="rtl"] .k-pager-sizes .nx-pager-sizes-picker .ts-control {
  padding-right: var(--nx-padding-x) !important;
}
.k-pager-sizes .nx-picker.nx-pager-sizes-picker {
  margin-right: 0;
  margin-inline-end: .5em;
}

/* In Arabic "next" is to the left: the pager's arrows turn with the page. */
[dir="rtl"] .k-pager .k-pager-nav .k-svg-icon,
[dir="rtl"] .k-pager .k-pager-first .k-svg-icon,
[dir="rtl"] .k-pager .k-pager-last .k-svg-icon {
  transform: scaleX(-1);
}

/* Kendo's own script sets this to the scrollbar's width; nx lines the header up itself,
   so it stays 0, which is what the theme fell back to when it was never defined. */
:root {
  --kendo-scrollbar-width: 0px;
}