/* 
Telerik component overrides - maps ALL Telerik styling to design tokens
NO hardcoded colors allowed - everything MUST use CSS custom properties
SPEC-014 CLARIFIED: Liberal use of !important is REQUIRED for theme enforcement
*/

/* === DockManager Components (SPEC-015) === */
.k-dock-manager {
  background-color: hsl(var(--c-bg)) !important;
  color: hsl(var(--c-text)) !important;
  font-family: var(--font-body) !important;
  height: 100% !important;
  width: 100% !important;
}

.k-dock-pane {
  background-color: hsl(var(--c-surface)) !important;
  border-color: hsl(var(--c-border)) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
}

.k-dock-pane-header {
  background-color: hsl(var(--c-surface-2)) !important;
  color: hsl(var(--c-text)) !important;
  border-color: hsl(var(--c-border)) !important;
  font-weight: 600 !important;
  cursor: grab !important;
  user-select: none !important;
}

.k-dock-pane-header:hover {
  background-color: hsl(var(--c-surface)) !important;
}

.k-dock-pane-header:active {
  cursor: grabbing !important;
}

.k-dock-pane-content {
  background-color: hsl(var(--c-surface)) !important;
  color: hsl(var(--c-text)) !important;
}

.k-dock-drop-hint {
  background-color: hsl(var(--c-primary)) !important;
  opacity: 0.3 !important;
  border: 2px dashed hsl(var(--c-primary)) !important;
}

.k-dock-resize-handle {
  background-color: hsl(var(--c-border)) !important;
}

.k-dock-resize-handle:hover {
  background-color: hsl(var(--c-primary)) !important;
}

/* === Grid Components === */
.k-grid {
  background-color: hsl(var(--c-surface)) !important;
  color: hsl(var(--c-text)) !important;
  border-color: hsl(var(--c-border)) !important;
  font-family: var(--font-body) !important;
  border-radius: var(--radius-md) !important;
}

.k-grid-header {
  background-color: hsl(var(--c-surface-2)) !important;
  color: hsl(var(--c-text)) !important;
  border-color: hsl(var(--c-border)) !important;
  font-weight: 600 !important;
}

.k-grid-header .k-header {
  color: hsl(var(--c-text)) !important;
  font-weight: 600 !important;
  font-size: var(--font-size-sm) !important;
}

.k-grid tbody tr {
  border-color: hsl(var(--c-border)) !important;
}

.k-grid tbody tr:hover {
  background-color: hsl(var(--ws-cell-hover)) !important;
}

.k-grid tbody tr.k-selected {
  background-color: hsl(var(--c-primary) / 0.1) !important;
  color: hsl(var(--c-text)) !important;
}

.k-grid tbody tr.k-selected:hover {
  background-color: hsl(var(--c-primary) / 0.15) !important;
}

/* === Button Components - Design System (SPEC-026) === */
.k-button {
  font-family: var(--font-body) !important;
  border-radius: var(--btn-border-radius) !important;
  font-weight: var(--btn-font-weight) !important;
  font-size: var(--font-size-sm) !important;
  padding: var(--btn-padding-y) var(--btn-padding-x) !important;
  transition: all 150ms ease-out !important;
  border: 1px solid;
}

.k-button.k-primary {
  background-color: hsl(var(--btn-bg)) !important;
  color: hsl(var(--btn-text)) !important;
  border-color: hsl(var(--btn-bg)) !important;
}

.k-button.k-primary:hover:not(:disabled) {
  background-color: hsl(var(--btn-bg-hover)) !important;
  border-color: hsl(var(--btn-bg-hover)) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.k-button.k-primary:focus-visible {
  outline: 2px solid hsl(var(--c-primary)) !important;
  outline-offset: 2px !important;
}

.k-button.k-secondary {
  background-color: var(--btn-secondary-bg) !important;
  color: hsl(var(--btn-secondary-text)) !important;
  border-color: hsl(var(--btn-secondary-border)) !important;
}

.k-button.k-secondary:hover:not(:disabled) {
  background-color: hsl(var(--c-surface-2)) !important;
  border-color: hsl(var(--c-border-strong)) !important;
  color: hsl(var(--c-text)) !important;
}

.k-button.k-secondary:focus-visible {
  outline: 2px solid hsl(var(--c-primary)) !important;
  outline-offset: 2px !important;
}

.k-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed;
}

/* === Input Components - Design System (SPEC-026) === */
.k-input,
.k-textbox,
.k-textarea {
  background-color: hsl(var(--input-bg)) !important;
  color: hsl(var(--c-text)) !important;
  border-color: hsl(var(--input-border)) !important;
  border-radius: var(--input-border-radius) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-sm) !important;
  padding: var(--input-padding-y) var(--input-padding-x) !important;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out !important;
}

.k-input:focus,
.k-textbox:focus,
.k-textarea:focus {
  border-color: hsl(var(--input-border-focus)) !important;
  box-shadow: 0 0 0 3px hsl(var(--input-glow) / 0.4) !important;
  outline: none !important;
}

.k-input::placeholder,
.k-textbox::placeholder,
.k-textarea::placeholder {
  color: hsl(var(--c-text-muted));
}

/* === Dropdown Components === */
.k-dropdown,
.k-dropdownlist,
.k-combobox {
  background-color: hsl(var(--c-surface));
  color: hsl(var(--c-text));
  border-color: hsl(var(--c-border));
  border-radius: var(--radius-md);
  font-family: var(--font-body);
}

.k-dropdown-wrap:hover {
  border-color: hsl(var(--c-border-strong));
}

.k-dropdown-wrap.k-focus {
  border-color: hsl(var(--c-primary));
  box-shadow: 0 0 0 2px hsl(var(--c-primary) / 0.2);
}

.k-list-item {
  color: hsl(var(--c-text));
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3);
}

.k-list-item:hover,
.k-list-item.k-focus {
  background-color: hsl(var(--ws-cell-hover));
  color: hsl(var(--c-text));
}

.k-list-item.k-selected {
  background-color: hsl(var(--c-primary));
  color: hsl(var(--c-primary-contrast));
}

/* === Popup/Modal Components === */
.k-popup,
.k-animation-container {
  background-color: hsl(var(--c-surface));
  border-color: hsl(var(--c-border));
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
  transform-origin: top left;
  animation: dropdown-enter var(--duration-fast) var(--ease-out) both;
}

/* Telerik dropdowns that open upwards */
.k-animation-container-shown.k-animation-container-up .k-popup {
  animation: dropdown-enter-up var(--duration-fast) var(--ease-out) both;
}

.k-window {
  background-color: hsl(var(--c-surface));
  border-color: hsl(var(--c-border));
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-lg);
  animation: modal-enter var(--modal-animation-duration) var(--ease-out) both;
}

.k-window-titlebar {
  background-color: hsl(var(--c-surface-2));
  color: hsl(var(--c-text));
  border-bottom-color: hsl(var(--c-border));
  font-family: var(--font-body);
  font-weight: 600;
}

/* === Splitter Components === */
.k-splitter {
  background-color: hsl(var(--c-surface));
  border-color: hsl(var(--c-border));
  border-radius: var(--radius-md);
}

.k-splitbar {
  background-color: hsl(var(--c-border));
  transition: background-color 0.2s ease;
}

.k-splitbar:hover {
  background-color: hsl(var(--c-primary));
}

.k-splitbar-draggable-horizontal,
.k-splitbar-draggable-vertical {
  cursor: resize;
}

.k-pane {
  background-color: transparent;
}

/* === DockManager Components === */
.k-dock-manager {
  background-color: hsl(var(--c-surface));
  color: hsl(var(--c-text));
  font-family: var(--font-body);
}

.k-dock-manager-tab {
  background-color: hsl(var(--c-surface-2));
  color: hsl(var(--c-text-muted));
  border-color: hsl(var(--c-border));
  font-size: var(--font-size-sm);
  transition: all 0.2s ease;
}

.k-dock-manager-tab.k-active {
  background-color: hsl(var(--c-surface));
  color: hsl(var(--c-text));
  border-bottom-color: hsl(var(--c-primary));
}

.k-dock-manager-tab:hover {
  background-color: hsl(var(--c-surface-3));
  color: hsl(var(--c-text));
}

/* === Notification Components === */
.k-notification {
  background-color: hsl(var(--c-surface));
  color: hsl(var(--c-text));
  border-color: hsl(var(--c-border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
}

.k-notification.k-notification-success {
  border-left: 4px solid hsl(var(--c-success));
}

.k-notification.k-notification-error {
  border-left: 4px solid hsl(var(--c-danger));
}

.k-notification.k-notification-warning {
  border-left: 4px solid hsl(var(--c-warning));
}

.k-notification.k-notification-info {
  border-left: 4px solid hsl(var(--c-info));
}

/* === Loading/Progress Components === */
.k-loading-mask {
  background-color: hsl(var(--c-bg) / 0.8);
  backdrop-filter: blur(4px);
}

.k-loader {
  border-color: hsl(var(--c-primary));
  border-top-color: transparent;
}

/* === Chart Components === */
.k-chart {
  font-family: var(--font-body);
  color: hsl(var(--c-text));
}

.k-chart-tooltip {
  background-color: hsl(var(--c-surface));
  color: hsl(var(--c-text));
  border-color: hsl(var(--c-border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
}

/* === Form Components === */
.k-form-field {
  margin-bottom: var(--space-4);
}

.k-form-field > label {
  color: hsl(var(--c-text));
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

.k-form-field-error {
  color: hsl(var(--c-danger));
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
}

/* === Remove conflicting default Telerik styling === */
.k-widget,
.k-widget * {
  font-family: var(--font-body) !important;
}

.k-icon {
  color: currentColor;
}

.k-button .k-icon {
  color: currentColor;
}

/* Override any hardcoded Telerik colors */
.k-button.k-flat.k-primary,
.k-button.k-outline.k-primary {
  color: hsl(var(--c-primary)) !important;
  border-color: hsl(var(--c-primary)) !important;
}

.k-button.k-flat.k-primary:hover,
.k-button.k-outline.k-primary:hover {
  background-color: hsl(var(--c-primary) / 0.1) !important;
  color: hsl(var(--c-primary)) !important;
}