/*
 * Ryder Theme review overrides
 * Compatible with @progress/kendo-theme-default v14.1.0 (Q2 2026).
 *
 * Import into the existing Ryder ThemeBuilder project as External Styles.
 * This file contains the Ryder foundations and the component patterns that
 * have been confirmed from the Ryder Figma component library.
 */

:root {
  /* Ryder application tokens. Feature styles should consume these aliases
     instead of redefining brand values locally. */
  --ryder-color-primary: #ce1126;
  --ryder-color-primary-hover: #900b1a;
  --ryder-color-primary-active: #900b1a;
  --ryder-color-on-primary: #ffffff;
  --ryder-color-surface: #ffffff;
  --ryder-color-surface-subtle: #fafafa;
  --ryder-color-text: #212121;
  --ryder-color-text-subtle: #757575;
  --ryder-color-border: #dddddd;
  --ryder-radius-control: 0.25rem;
  --ryder-radius-panel: 0.375rem;
  --ryder-space-1: 0.25rem;
  --ryder-space-2: 0.5rem;
  --ryder-space-3: 0.75rem;
  --ryder-space-4: 1rem;
  --ryder-space-6: 1.5rem;

  /* Typography */
  --kendo-font-family: Roboto, Arial, sans-serif;
  --kendo-font-family-sans: Roboto, Arial, sans-serif;
  --kendo-font-size: 0.875rem;
  --kendo-font-size-sm: 0.75rem;
  --kendo-font-size-md: 0.875rem;
  --kendo-font-size-lg: 1rem;
  --kendo-font-size-xl: 1.25rem;
  --kendo-font-weight-normal: 400;
  --kendo-font-weight-medium: 500;
  --kendo-font-weight-semibold: 500;
  --kendo-font-weight-bold: 700;
  --kendo-line-height: 1.428;
  --kendo-line-height-xs: 1;
  --kendo-line-height-sm: 1.25;
  --kendo-line-height-md: 1.428;
  --kendo-line-height-lg: 1.5;

  /* Brand */
  --kendo-color-primary: #ce1126;
  --kendo-color-primary-hover: #900b1a;
  --kendo-color-primary-active: #900b1a;
  --kendo-color-primary-emphasis: #900b1a;
  --kendo-color-primary-on-subtle: #900b1a;
  --kendo-color-on-primary: #ffffff;
  --kendo-color-secondary: #222222;
  --kendo-color-secondary-hover: #000000;
  --kendo-color-secondary-active: #000000;
  --kendo-color-on-secondary: #ffffff;

  /* Surfaces and text */
  --kendo-color-app-surface: #ffffff;
  --kendo-color-on-app-surface: #212121;
  --kendo-color-surface: #fafafa;
  --kendo-color-surface-alt: #ffffff;
  --kendo-color-base: #e0e0e0;
  --kendo-color-inverse: #424242;
  --kendo-color-on-inverse: #ffffff;
  --kendo-color-subtle: #757575;
  --kendo-color-border: #dddddd;
  --kendo-color-border-alt: #bdbdbd;

  /* Semantic colors */
  --kendo-color-success: #529b1c;
  --kendo-color-on-success: #ffffff;
  --kendo-color-warning: #eba442;
  --kendo-color-on-warning: #212121;
  --kendo-color-info: #17a2b8;
  --kendo-color-on-info: #ffffff;
  --kendo-color-error: #ce1126;
  --kendo-color-on-error: #ffffff;

  /* Shape and focus */
  --kendo-border-radius-sm: 0.125rem;
  --kendo-border-radius-md: 0.25rem;
  --kendo-border-radius-lg: 0.375rem;
  --ryder-focus-color: #66afe9;
  --ryder-input-background: #fafafa;
  --ryder-input-border: #bdbdbd;
  --ryder-placeholder: #9e9e9e;
}

/* Buttons: confirmed medium-button typography and 6px rounding. */
.k-button {
  border-radius: 0.375rem;
}

.k-button .k-button-text {
  font-family: var(--kendo-font-family-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025rem;
  line-height: 1.714;
}

.k-button:focus,
.k-button.k-focus,
.k-button.k-state-focus,
.k-button.k-state-focused {
  outline: 2px solid var(--ryder-focus-color);
  outline-offset: 2px;
}

/* Shared form-control shell: 4px rounding and Ryder neutral treatment. */
.k-input,
.k-picker,
.k-textarea,
.k-textbox.k-input,
.k-dropdownlist.k-picker {
  color: var(--kendo-color-on-app-surface);
  background-color: var(--ryder-input-background);
  background-image: none;
  border-color: var(--ryder-input-border);
  border-radius: 0.25rem;
}

.k-input-inner {
  font-family: var(--kendo-font-family-sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.009375rem;
  line-height: 1.19;
}

.k-input-inner::placeholder,
.k-textarea::placeholder {
  color: var(--ryder-placeholder);
  opacity: 1;
}

.k-input:focus-within,
.k-picker:focus-within,
.k-textarea:focus,
.k-textbox.k-input.k-focus,
.k-textbox.k-input.k-state-focus,
.k-textbox.k-input.k-state-focused,
.k-dropdownlist.k-picker.k-focus,
.k-dropdownlist.k-picker.k-state-focus,
.k-dropdownlist.k-picker.k-state-focused {
  border-color: var(--ryder-focus-color);
  border-width: 2px;
  outline: 0;
}

.k-input.k-valid,
.k-picker.k-valid,
.k-textarea.k-valid {
  border-color: var(--kendo-color-success);
  border-width: 2px;
}

.k-input.k-invalid,
.k-picker.k-invalid,
.k-textarea.k-invalid,
.k-input.ng-invalid.ng-touched,
.k-input.ng-invalid.ng-dirty,
.k-picker.ng-invalid.ng-touched,
.k-picker.ng-invalid.ng-dirty {
  border-color: var(--kendo-color-error);
  border-width: 2px;
}

.k-input:disabled,
.k-input.k-disabled,
.k-picker:disabled,
.k-picker.k-disabled,
.k-picker.k-state-disabled {
  color: var(--ryder-placeholder);
}