/* Bridge layer: Telerik runs the Material theme, but we re-paint its
 * tokens with the Nordic palette so buttons, inputs, grid, chart, dialog
 * all read as part of the same surface as the surrounding nordic.css.
 *
 * Loaded AFTER kendo-theme-material/all.css so the Telerik root tokens
 * inside .k-* scopes are overridden, not before.
 */

.k-root, .k-content, body {
  --kendo-color-primary:           var(--nd-accent);
  --kendo-color-primary-hover:     #4d7da3;
  --kendo-color-primary-active:    #3f6b8e;
  --kendo-color-primary-emphasis:  var(--nd-accent-2);
  --kendo-color-primary-on-subtle: var(--nd-accent);
  --kendo-color-primary-subtle:    #e8eef5;

  --kendo-color-base:              var(--nd-surface);
  --kendo-color-base-hover:        var(--nd-surface-2);
  --kendo-color-base-active:       #e8e4df;
  --kendo-color-base-emphasis:     var(--nd-surface-2);

  --kendo-color-surface:           var(--nd-surface);
  --kendo-color-surface-alt:       var(--nd-surface-2);

  --kendo-color-on-app-surface:    var(--nd-ink);
  --kendo-color-on-base:           var(--nd-ink);
  --kendo-color-on-primary:        #ffffff;
  --kendo-color-on-surface:        var(--nd-ink);

  --kendo-color-subtle:            var(--nd-muted);
  --kendo-color-border:            var(--nd-border);
  --kendo-color-border-alt:        var(--nd-border-2);

  --kendo-color-success:           var(--nd-ok);
  --kendo-color-warning:           var(--nd-warn);
  --kendo-color-error:             var(--nd-danger);
  --kendo-color-info:              var(--nd-info);

  --kendo-font-family:             var(--nd-font);
  --kendo-font-size:               var(--nd-fs-base);
  --kendo-line-height:             1.5;
  --kendo-border-radius-md:        var(--nd-radius);
  --kendo-border-radius-lg:        10px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.k-button {
  font-family: var(--nd-font);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  border-radius: var(--nd-radius) !important;
  padding: 7px 16px;
  font-size: var(--nd-fs-base);
  box-shadow: none !important;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.k-button.k-button-md   { padding: 7px 16px; }
.k-button.k-button-sm   { padding: 5px 12px; font-size: var(--nd-fs-sm); }
.k-button:focus, .k-button.k-focus { box-shadow: 0 0 0 3px rgba(90,139,176,0.18) !important; }

.k-button-solid-primary {
  background: var(--nd-accent) !important;
  color: #fff !important;
  border-color: var(--nd-accent) !important;
}
.k-button-solid-primary:hover {
  background: #4d7da3 !important;
  border-color: #4d7da3 !important;
}

.k-button-solid-base:not(.k-input-button):not(.k-spinner-increase):not(.k-spinner-decrease) {
  background: var(--nd-surface) !important;
  color: var(--nd-ink) !important;
  border: 1px solid var(--nd-border) !important;
}
.k-button-solid-base:not(.k-input-button):not(.k-spinner-increase):not(.k-spinner-decrease):hover {
  background: var(--nd-surface-2) !important;
  border-color: var(--nd-border-2) !important;
}

/* The caret/icon button glued to the right edge of an input
   (DropDown / DatePicker / NumericTextBox spinners) must NOT carry
   the full pill chrome — it'd look like a stuck-on box. Make it
   borderless, transparent, and a tone-on-tone hover. We target the
   classes directly (not via a parent selector) because Telerik wraps
   these buttons in a few different containers (.k-input, .k-picker,
   .k-numerictextbox, …) depending on the widget. */
.k-input-button,
.k-spinner-increase,
.k-spinner-decrease {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-left: 1px solid var(--nd-border) !important;
  border-radius: 0 !important;
  color: var(--nd-muted) !important;
  padding: 0 10px !important;
  min-width: 32px;
  box-shadow: none !important;
  align-self: stretch !important;     /* fill input height */
}
.k-input-button:hover,
.k-spinner-increase:hover,
.k-spinner-decrease:hover {
  background: var(--nd-surface-2) !important;
  background-color: var(--nd-surface-2) !important;
  color: var(--nd-accent) !important;
}
.k-input-button:focus,
.k-spinner-increase:focus,
.k-spinner-decrease:focus { box-shadow: none !important; outline: none !important; }
.k-input-button .k-button-icon,
.k-spinner-increase .k-button-icon,
.k-spinner-decrease .k-button-icon { font-size: 12px; }
.k-input-button .k-icon svg,
.k-input-button .k-svg-icon svg { width: 12px; height: 12px; }
/* The numeric textbox stacks two spinner buttons; halve their padding so
   each one fits in half the input height without overflow. */
.k-spinner-increase, .k-spinner-decrease { padding: 0 6px !important; }

.k-button-flat-primary, .k-button-flat-base {
  text-transform: none;
  font-weight: 600;
}

/* ── Inputs (TextBox / NumericTextBox / DropDown / TextArea) ─────────── */
.k-input, .k-textbox, .k-picker, .k-numerictextbox, .k-dropdownlist, .k-combobox, .k-textarea {
  font-family: var(--nd-font) !important;
  font-size: var(--nd-fs-md) !important;
  border-radius: var(--nd-radius) !important;
}
.k-input-solid {
  background: var(--nd-surface) !important;
  border: 1px solid var(--nd-border) !important;
  box-shadow: none !important;
  transition: border-color .12s, box-shadow .12s;
}
.k-input-solid:hover  { border-color: var(--nd-border-2) !important; }
.k-input-solid.k-focus, .k-input-solid:focus-within {
  border-color: var(--nd-accent) !important;
  box-shadow: 0 0 0 3px rgba(90,139,176,0.15) !important;
}
.k-input-inner { padding: 7px 10px !important; color: var(--nd-ink) !important; }
.k-input-inner::placeholder { color: var(--nd-muted) !important; opacity: 1; }

/* Material's floating label is heavy — flatten to a static muted label */
.k-floating-label-container > .k-label {
  position: static;
  transform: none;
  background: transparent;
  padding: 0 0 4px 0;
  font-size: var(--nd-fs-sm);
  color: var(--nd-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ── Grid ─────────────────────────────────────────────────────────────── */
.k-grid {
  font-family: var(--nd-font);
  font-size: var(--nd-fs-base);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius);
  background: var(--nd-surface);
}
.k-grid-header {
  background: var(--nd-surface-2) !important;
  border-bottom: 1px solid var(--nd-border) !important;
}
.k-grid-header th, .k-grid-header .k-cell-inner > .k-link {
  color: var(--nd-muted) !important;
  font-size: var(--nd-fs-sm) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 12px !important;
}
.k-grid td {
  padding: 9px 12px !important;
  color: var(--nd-ink-2) !important;
  border-color: var(--nd-border) !important;
}
.k-grid tbody > tr:hover > td { background: var(--nd-surface-2) !important; }
.k-pager {
  background: var(--nd-surface-2) !important;
  border-top: 1px solid var(--nd-border) !important;
  padding: 6px 10px !important;
  font-size: var(--nd-fs-sm) !important;
}

/* ── nd-grid: opinionated wrapper for every TelerikGrid in the app ────── */
.nd-grid {
  width: 100% !important;
  border-radius: var(--nd-radius) !important;
  overflow: hidden;
}
/* Force the inner <table> to stretch so unsized columns share remaining
   space evenly instead of hugging content on the left. */
.nd-grid .k-grid-header-table,
.nd-grid .k-grid-table { width: 100% !important; min-width: 100% !important; }
/* Kill Kendo's ugly full-width gray band behind the thead — we already
   have a nice surface-2 background on .k-grid-header itself. */
.nd-grid .k-grid-header-wrap { background: var(--nd-surface-2) !important; }
/* Quieter zebra striping — the Material theme default is too hot. */
.nd-grid tbody > tr.k-alt > td { background: color-mix(in srgb, var(--nd-surface) 92%, var(--nd-surface-2) 8%) !important; }
/* Tighter vertical rhythm for dashboards that stack 2-3 grids on one page. */
.nd-grid td { padding: 7px 12px !important; font-size: var(--nd-fs-base); }
.nd-grid .k-grid-header th, .nd-grid .k-grid-header .k-cell-inner > .k-link { padding: 8px 12px !important; }
/* Hover highlight on reorder — makes draggable columns feel draggable. */
.nd-grid .k-grid-header th { cursor: grab; }
.nd-grid .k-grid-header th:active { cursor: grabbing; }
/* Subtler filter icons — the default filter funnel was competing with titles. */
.nd-grid .k-grid-filter-menu { opacity: 0.55; }
.nd-grid .k-grid-filter-menu:hover,
.nd-grid .k-grid-filter-menu.k-active { opacity: 1; color: var(--nd-accent) !important; }
/* Selection accent line — left border on the selected row for a subtle cue. */
.nd-grid tbody > tr.k-selected > td { background: color-mix(in srgb, var(--nd-accent) 6%, var(--nd-surface) 94%) !important; }
.nd-grid tbody > tr.k-selected > td:first-child { box-shadow: inset 3px 0 0 var(--nd-accent); }
/* Footer aggregates (when we add them) inherit the same quieter surface. */
.nd-grid .k-grid-footer { background: var(--nd-surface-2) !important; border-top: 1px solid var(--nd-border) !important; }
.nd-grid .k-grid-footer td { font-weight: 700; color: var(--nd-ink) !important; }

/* ── Chart ────────────────────────────────────────────────────────────── */
.k-chart, .k-chart text { font-family: var(--nd-font) !important; }

/* ── Window / Dialog ──────────────────────────────────────────────────── */
.k-window, .k-dialog {
  border-radius: 10px !important;
  border: 1px solid var(--nd-border) !important;
  box-shadow: 0 18px 48px rgba(45,52,54,0.12) !important;
  background: var(--nd-surface) !important;
}
.k-window-titlebar, .k-dialog-titlebar {
  background: var(--nd-surface) !important;
  color: var(--nd-ink) !important;
  border-bottom: 1px solid var(--nd-border) !important;
  padding: 12px 16px !important;
  font-weight: 700;
  font-size: var(--nd-fs-md);
}
.k-window-content, .k-dialog-content { padding: 16px !important; color: var(--nd-ink-2) !important; }
.k-window-actions, .k-dialog-actions, .k-actions {
  background: var(--nd-surface-2) !important;
  border-top: 1px solid var(--nd-border) !important;
  padding: 10px 16px !important;
}
/* Our convention: Cancel/Save buttons live inside WindowContent in a footer
   div (the tenant-ng pattern). .k-window-actions is reserved for title-bar
   icons (<WindowAction Name="Close" />). */
.nd-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 16px -16px -16px;
  padding: 12px 16px;
  border-top: 1px solid var(--nd-border);
  background: var(--nd-surface-2);
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.k-tabstrip-items .k-item {
  font-family: var(--nd-font) !important;
  font-size: var(--nd-fs-md) !important;
  font-weight: 600 !important;
  text-transform: none;
  color: var(--nd-muted) !important;
  padding: 8px 14px !important;
}
.k-tabstrip-items .k-item.k-active { color: var(--nd-accent) !important; }

/* ── Avatar / Badge (used by user widget if we ever swap) ─────────────── */
.k-avatar { font-family: var(--nd-font); font-weight: 700; }
.k-badge  { font-family: var(--nd-font); font-weight: 600; }

/* ── Checkbox / Radio / Switch ────────────────────────────────────────── */
.k-checkbox, .k-radio { border-color: var(--nd-border) !important; }
.k-checkbox:checked, .k-radio:checked {
  background-color: var(--nd-accent) !important;
  border-color: var(--nd-accent) !important;
}
.k-switch-on .k-switch-track { background: var(--nd-accent) !important; border-color: var(--nd-accent) !important; }

/* ── Notification / toast ─────────────────────────────────────────────── */
.k-notification { font-family: var(--nd-font); border-radius: var(--nd-radius); }

/* Take Material's heavier ripple/shadow off — Nordic is flat */
.k-button.k-button-solid:not(:disabled):active { box-shadow: none !important; }