/* ============================================
   taskvel - Radzen Blazor Override
   Override completo de variables --rz-*
   para integrar con el design system
   ============================================ */

/* --- Variables base Radzen --- */
:root {
  /* Base colors */
  --rz-base-background-color: var(--ft-surface);
  --rz-base-color: var(--ft-text);

  /* Primary */
  --rz-primary: var(--ft-accent);
  --rz-primary-lighter: var(--ft-accent-soft);
  --rz-primary-light: var(--ft-accent-soft);
  --rz-primary-dark: var(--ft-accent-hover);
  --rz-primary-darker: var(--ft-accent-hover);

  /* Secondary */
  --rz-secondary: var(--ft-surface-alt);
  --rz-secondary-lighter: var(--ft-surface);
  --rz-secondary-light: var(--ft-surface-alt);
  --rz-secondary-dark: var(--ft-border);
  --rz-secondary-darker: var(--ft-border-strong);

  /* Semantic */
  --rz-success: var(--ft-success);
  --rz-success-lighter: rgba(34, 197, 94, 0.1);
  --rz-success-light: rgba(34, 197, 94, 0.2);
  --rz-danger: var(--ft-danger);
  --rz-danger-lighter: rgba(239, 68, 68, 0.1);
  --rz-danger-light: rgba(239, 68, 68, 0.2);
  --rz-warning: var(--ft-warning);
  --rz-warning-lighter: rgba(245, 158, 11, 0.1);
  --rz-info: var(--ft-info);
  --rz-info-lighter: rgba(59, 130, 246, 0.1);

  /* Text */
  --rz-text-color: var(--ft-text);
  --rz-text-secondary-color: var(--ft-text-secondary);
  --rz-text-tertiary-color: var(--ft-text-tertiary);
  --rz-text-disabled-color: var(--ft-text-tertiary);
  --rz-on-primary: white;
  --rz-on-secondary: var(--ft-text);

  /* Font */
  --rz-body-font-family: 'Satoshi', system-ui, sans-serif;
  --rz-body-font-size: 0.875rem;
  --rz-body-line-height: 1.5;

  /* Borders */
  --rz-border-color: var(--ft-border);
  --rz-border-radius: 0.625rem;
  --rz-border-style: solid;
  --rz-border-width: 1px;

  /* Shadows */
  --rz-shadow-1: 0 1px 2px rgba(0,0,0,0.04);
  --rz-shadow-2: 0 2px 4px rgba(0,0,0,0.06);
  --rz-shadow-3: 0 4px 12px rgba(0,0,0,0.08);
  --rz-shadow-4: 0 8px 24px rgba(0,0,0,0.10);

  /* Spacing */
  --rz-spacing: 1rem;
}

/* --- Input / TextBox --- */
.rz-textbox,
.rz-inputtext,
.rz-spinner .rz-inputtext,
.rz-dropdown,
.rz-multiselect,
.rz-autocomplete .rz-inputtext,
.rz-textarea {
  background: var(--ft-surface) !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: 0.625rem !important;
  color: var(--ft-text) !important;
  font-family: 'Satoshi', system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 0.75rem !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.rz-textbox:focus,
.rz-inputtext:focus,
.rz-textarea:focus {
  border-color: var(--ft-accent) !important;
  box-shadow: 0 0 0 3px var(--ft-accent-soft) !important;
  outline: none !important;
}

.rz-textbox::placeholder,
.rz-inputtext::placeholder,
.rz-textarea::placeholder {
  color: var(--ft-text-tertiary) !important;
}

/* --- Buttons --- */
.rz-button {
  border-radius: 0.625rem !important;
  font-family: 'Satoshi', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 1rem !important;
  transition: all 0.15s var(--ft-ease-out) !important;
  border: none !important;
}

.rz-button:active {
  transform: scale(0.98) !important;
}

.rz-button.rz-primary {
  background: var(--ft-accent) !important;
  color: white !important;
}

.rz-button.rz-primary:hover {
  background: var(--ft-accent-hover) !important;
}

.rz-button.rz-secondary {
  background: var(--ft-surface-alt) !important;
  color: var(--ft-text) !important;
  border: 1px solid var(--ft-border) !important;
}

.rz-button.rz-secondary:hover {
  background: var(--ft-surface-raised) !important;
}

.rz-button.rz-light {
  background: transparent !important;
  color: var(--ft-text-secondary) !important;
}

.rz-button.rz-light:hover {
  background: var(--ft-surface-alt) !important;
}

.rz-button.rz-danger {
  background: var(--ft-danger) !important;
  color: white !important;
}

.rz-button.rz-success {
  background: var(--ft-success) !important;
  color: white !important;
}

/* --- DataGrid --- */
.rz-datatable {
  border: 1px solid var(--ft-border) !important;
  border-radius: 0.625rem !important;
  overflow: hidden !important;
  background: var(--ft-surface-raised) !important;
}

.rz-datatable .rz-datatable-thead > tr > th {
  background: var(--ft-surface-alt) !important;
  color: var(--ft-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid var(--ft-border) !important;
  padding: 0.75rem 1rem !important;
}

.rz-datatable .rz-datatable-tbody > tr > td {
  background: var(--ft-surface-raised) !important;
  color: var(--ft-text) !important;
  border-bottom: 1px solid var(--ft-border) !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
}

.rz-datatable .rz-datatable-tbody > tr:hover > td {
  background: var(--ft-surface-alt) !important;
}

.rz-datatable .rz-datatable-tbody > tr:last-child > td {
  border-bottom: none !important;
}

/* --- Calendar / DatePicker --- */
.rz-calendar {
  border: 1px solid var(--ft-border) !important;
  border-radius: 0.625rem !important;
  background: var(--ft-surface-raised) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.rz-calendar .rz-datepicker-header {
  background: var(--ft-surface-alt) !important;
  border-bottom: 1px solid var(--ft-border) !important;
  padding: 0.75rem !important;
}

.rz-calendar .rz-datepicker-title {
  color: var(--ft-text) !important;
  font-weight: 600 !important;
  font-family: 'General Sans', system-ui, sans-serif !important;
}

.rz-calendar table td > span {
  border-radius: 0.5rem !important;
  transition: all 0.15s !important;
  color: var(--ft-text) !important;
}

.rz-calendar table td > span:hover {
  background: var(--ft-accent-soft) !important;
  color: var(--ft-accent-text) !important;
}

.rz-calendar table td.rz-datepicker-today > span {
  border: 2px solid var(--ft-accent) !important;
  font-weight: 600 !important;
}

.rz-calendar table td > span.rz-state-active {
  background: var(--ft-accent) !important;
  color: white !important;
}

.rz-calendar .rz-datepicker-day-header {
  color: var(--ft-text-tertiary) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

/* --- Dialog --- */
.rz-dialog {
  border-radius: 0.75rem !important;
  border: 1px solid var(--ft-border) !important;
  background: var(--ft-surface-raised) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12) !important;
  overflow: hidden !important;
}

.rz-dialog-titlebar {
  background: var(--ft-surface-alt) !important;
  border-bottom: 1px solid var(--ft-border) !important;
  padding: 1rem 1.25rem !important;
}

.rz-dialog-title {
  color: var(--ft-text) !important;
  font-weight: 600 !important;
  font-family: 'General Sans', system-ui, sans-serif !important;
}

.rz-dialog-content {
  padding: 1.25rem !important;
  color: var(--ft-text) !important;
}

.rz-dialog-mask {
  background: var(--ft-backdrop) !important;
  backdrop-filter: blur(4px) !important;
}

/* --- Tooltip --- */
.rz-tooltip {
  background: var(--ft-surface-raised) !important;
  color: var(--ft-text) !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  font-size: 0.8125rem !important;
  padding: 0.375rem 0.75rem !important;
}

/* --- Tabs --- */
.rz-tabview {
  border: none !important;
}

.rz-tabview .rz-tabview-nav {
  border-bottom: 1px solid var(--ft-border) !important;
  background: transparent !important;
  gap: 0 !important;
}

.rz-tabview .rz-tabview-nav li {
  margin-bottom: -1px !important;
}

.rz-tabview .rz-tabview-nav li a {
  color: var(--ft-text-secondary) !important;
  font-weight: 500 !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.15s !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.rz-tabview .rz-tabview-nav li a:hover {
  color: var(--ft-text) !important;
  background: var(--ft-surface-alt) !important;
}

.rz-tabview .rz-tabview-nav li.rz-tabview-selected a,
.rz-tabview .rz-tabview-nav li.rz-state-active a {
  color: var(--ft-accent) !important;
  border-bottom-color: var(--ft-accent) !important;
  background: transparent !important;
}

.rz-tabview .rz-tabview-panel {
  padding: 1rem 0 !important;
}

/* --- Dropdown panel --- */
.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-autocomplete-panel {
  background: var(--ft-surface-raised) !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: 0.625rem !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
  margin-top: 4px !important;
}

.rz-dropdown-panel .rz-dropdown-item,
.rz-multiselect-panel .rz-multiselect-item,
.rz-autocomplete-panel .rz-autocomplete-item {
  padding: 0.5rem 0.75rem !important;
  color: var(--ft-text) !important;
  transition: background 0.1s !important;
}

.rz-dropdown-panel .rz-dropdown-item:hover,
.rz-multiselect-panel .rz-multiselect-item:hover,
.rz-autocomplete-panel .rz-autocomplete-item:hover {
  background: var(--ft-surface-alt) !important;
}

.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight,
.rz-multiselect-panel .rz-multiselect-item.rz-state-highlight {
  background: var(--ft-accent-soft) !important;
  color: var(--ft-accent-text) !important;
}

/* --- Checkbox / Switch --- */
.rz-chkbox .rz-chkbox-box {
  border: 2px solid var(--ft-border-strong) !important;
  border-radius: 0.375rem !important;
  background: var(--ft-surface) !important;
  transition: all 0.15s !important;
}

.rz-chkbox .rz-chkbox-box.rz-state-active {
  background: var(--ft-accent) !important;
  border-color: var(--ft-accent) !important;
}

.rz-switch .rz-switch-slider {
  border-radius: 999px !important;
}

/* --- Badge --- */
.rz-badge {
  border-radius: 999px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.125rem 0.5rem !important;
}

/* --- Pager --- */
.rz-pager {
  background: transparent !important;
  border: none !important;
  padding: 0.75rem 0 !important;
}

.rz-pager .rz-paginator-page {
  border-radius: 0.5rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  transition: all 0.15s !important;
}

.rz-pager .rz-paginator-page:hover {
  background: var(--ft-surface-alt) !important;
}

.rz-pager .rz-paginator-page.rz-state-active {
  background: var(--ft-accent) !important;
  color: white !important;
}

/* --- Notification (Radzen built-in) --- */
.rz-notification {
  border-radius: 0.625rem !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}

/* --- Scrollbar --- */
.rz-datatable .rz-datatable-scrollable-body::-webkit-scrollbar,
.rz-dropdown-panel .rz-dropdown-items-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.rz-datatable .rz-datatable-scrollable-body::-webkit-scrollbar-thumb,
.rz-dropdown-panel .rz-dropdown-items-wrapper::-webkit-scrollbar-thumb {
  background: var(--ft-border-strong);
  border-radius: 3px;
}

.rz-datatable .rz-datatable-scrollable-body::-webkit-scrollbar-track,
.rz-dropdown-panel .rz-dropdown-items-wrapper::-webkit-scrollbar-track {
  background: transparent;
}