/* Custom Radzen component styles to match Hearthly Bootstrap theme */
/* This file overrides Radzen's default colors with our custom theme colors */

:root {
  /* Primary colors (using our red theme) */
  --rz-primary: #C1272D;
  --rz-primary-light: #D84A48;
  --rz-primary-dark: #A01F25;
  
  /* Secondary colors (using our gray theme) */
  --rz-secondary: #6c757d;
  --rz-secondary-light: #adb5bd;
  --rz-secondary-dark: #495057;
  
  /* Success colors (using our blue theme) */
  --rz-success: #272DC1;
  --rz-success-light: #4248D8;
  --rz-success-dark: #1E23A0;
  
  /* Info colors (using our cyan theme) */
  --rz-info: #27C1BB;
  --rz-info-light: #42D8D2;
  --rz-info-dark: #1EA095;
  
  /* Warning colors (using our yellow theme) */
  --rz-warning: #C1BB27;
  --rz-warning-light: #D8D242;
  --rz-warning-dark: #A0951E;
  
  /* Danger colors (using our red theme) */
  --rz-danger: #C1272D;
  --rz-danger-light: #D84A48;
  --rz-danger-dark: #A01F25;
  
  /* Neutral colors */
  --rz-light: #f8f9fa;
  --rz-dark: #212529;
  --rz-muted: #adb5bd;
  
  /* Text colors */
  --rz-text-primary: #212529;
  --rz-text-secondary: #6c757d;
  --rz-text-muted: #adb5bd;
  
  /* Background colors */
  --rz-bg-primary: #fff;
  --rz-bg-secondary: #f8f9fa;
  --rz-bg-tertiary: #e9ecef;
  
  /* Border colors */
  --rz-border-color: #dee2e6;
  --rz-border-color-light: #e9ecef;
  --rz-border-color-dark: #ced4da;
  
  /* Shadow colors */
  --rz-shadow: rgba(0, 0, 0, 0.1);
  --rz-shadow-light: rgba(0, 0, 0, 0.05);
  --rz-shadow-dark: rgba(0, 0, 0, 0.15);
}

/* Radzen Button customizations - using maximum specificity to override theme */
.rz-button.rz-button-primary,
button.rz-button.rz-button-primary,
.rz-button[class*="rz-button-primary"],
button[class*="rz-button-primary"],
.rz-button[class*="primary"]{
  background-color: #C1272D !important;
  border-color: #C1272D !important;
  color: white !important;
  border-radius: 0.375rem !important; /* Bootstrap's default border radius */
  border-width: 1px !important;
  border-style: solid !important;
  padding: 0.5rem 1rem !important; /* Moderate padding for better visual appearance */
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important; /* Remove any text transformation */
  vertical-align: middle !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.rz-button.rz-button-primary:hover,
button.rz-button.rz-button-primary:hover,
.rz-button[class*="rz-button-primary"]:hover,
button[class*="rz-button-primary"]:hover,
.rz-button[class*="primary"]:hover,
button[class*="primary"]:hover,
.rz-button.rz-button-primary:hover:not(:disabled),
button.rz-button.rz-button-primary:hover:not(:disabled),
.rz-button[class*="rz-button-primary"]:hover:not(:disabled),
button[class*="rz-button-primary"]:hover:not(:disabled),
.rz-button[class*="primary"]:hover:not(:disabled),
button[class*="primary"]:hover:not(:disabled) {
  background-color: #A01F25 !important;
  border-color: #A01F25 !important;
}

.rz-button.rz-button-primary:focus,
button.rz-button.rz-button-primary:focus,
.rz-button[class*="rz-button-primary"]:focus,
button[class*="rz-button-primary"]:focus,
.rz-button[class*="primary"]:focus,
button[class*="primary"]:focus,
.rz-button.rz-button-primary:focus:not(:disabled),
button.rz-button.rz-button-primary:focus:not(:disabled),
.rz-button[class*="rz-button-primary"]:focus:not(:disabled),
button[class*="rz-button-primary"]:focus:not(:disabled),
.rz-button[class*="primary"]:focus:not(:disabled),
button[class*="primary"]:focus:not(:disabled) {
  box-shadow: 0 0 0 0.2rem rgba(193, 39, 45, 0.25) !important;
}

.rz-button.rz-button-primary:active,
button.rz-button.rz-button-primary:active,
.rz-button[class*="rz-button-primary"]:active,
button[class*="rz-button-primary"]:active,
.rz-button[class*="primary"]:active,
button[class*="primary"]:active,
.rz-button.rz-button-primary:active:not(:disabled),
button.rz-button.rz-button-primary:active:not(:disabled),
.rz-button[class*="rz-button-primary"]:active:not(:disabled),
button[class*="rz-button-primary"]:active:not(:disabled),
.rz-button[class*="primary"]:active:not(:disabled),
button[class*="primary"]:active:not(:disabled) {
  background-color: #A01F25 !important;
  border-color: #A01F25 !important;
}

/* Additional override for any Radzen button with primary styling */
button[class*="rz-button"][class*="primary"],
.rz-button[class*="primary"] {
  background-color: #C1272D !important;
  border-color: #C1272D !important;
  color: white !important;
  border-radius: 0.375rem !important;
}

/* Secondary button styling */
.rz-button.rz-button-secondary,
button.rz-button.rz-button-secondary {
  background-color: var(--rz-secondary) !important;
  border-color: var(--rz-secondary) !important;
  color: white !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem 1rem !important; /* Moderate padding for better visual appearance */
  text-transform: none !important; /* Remove any text transformation */
  border-width: 1px !important;
  border-style: solid !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.rz-button.rz-button-secondary:hover,
button.rz-button.rz-button-secondary:hover {
  background-color: var(--rz-secondary-dark) !important;
  border-color: var(--rz-secondary-dark) !important;
}

/* Success button styling */
.rz-button.rz-button-success,
button.rz-button.rz-button-success {
  background-color: var(--rz-success) !important;
  border-color: var(--rz-success) !important;
  color: white !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem 1rem !important; /* Moderate padding for better visual appearance */
  text-transform: none !important; /* Remove any text transformation */
  border-width: 1px !important;
  border-style: solid !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.rz-button.rz-button-success:hover,
button.rz-button.rz-button-success:hover {
  background-color: var(--rz-success-dark) !important;
  border-color: var(--rz-success-dark) !important;
}

/* Danger button styling */
.rz-button.rz-button-danger,
button.rz-button.rz-button-danger {
  background-color: var(--rz-danger) !important;
  border-color: var(--rz-danger) !important;
  color: white !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem 1rem !important; /* Moderate padding for better visual appearance */
  text-transform: none !important; /* Remove any text transformation */
  border-width: 1px !important;
  border-style: solid !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.rz-button.rz-button-danger:hover,
button.rz-button.rz-button-danger:hover {
  background-color: var(--rz-danger-dark) !important;
  border-color: var(--rz-danger-dark) !important;
}

/* Radzen TextBox customizations */
.rz-textbox {
  border-color: var(--rz-border-color) !important;
  border-radius: 0.375rem !important;
  border-width: 1px !important;
  border-style: solid !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.rz-textbox:focus {
  border-color: var(--rz-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(193, 39, 45, 0.25) !important;
  outline: 0 !important;
}

/* Radzen DropDown customizations */
.rz-dropdown {
  border-color: var(--rz-border-color) !important;
  border-radius: 0.375rem !important;
  border-width: 1px !important;
  border-style: solid !important;
}

.rz-dropdown:focus {
  border-color: var(--rz-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(193, 39, 45, 0.25) !important;
}

.rz-dropdown-panel {
  border-color: var(--rz-border-color) !important;
  box-shadow: 0 0.5rem 1rem var(--rz-shadow) !important;
  border-radius: 0.375rem !important;
}

.rz-dropdown-item {
  border-radius: 0.25rem !important;
}

.rz-dropdown-item:hover {
  background-color: var(--rz-bg-secondary) !important;
}

.rz-dropdown-item.rz-state-selected {
  background-color: var(--rz-primary) !important;
  color: white !important;
}

/* Radzen DataGrid customizations */
.rz-datagrid {
  border-color: var(--rz-border-color) !important;
  border-radius: 0.375rem !important;
}

.rz-datagrid-header {
  background-color: var(--rz-bg-secondary) !important;
  border-bottom-color: var(--rz-border-color) !important;
}

.rz-datagrid-row:hover {
  background-color: var(--rz-bg-secondary) !important;
}

.rz-datagrid-row.rz-state-selected {
  background-color: var(--rz-primary) !important;
  color: white !important;
}

.rz-datagrid-cell {
  border-color: var(--rz-border-color-light) !important;
}

/* Radzen CheckBox customizations */
.rz-checkbox .rz-checkbox-box {
  border-color: var(--rz-border-color) !important;
  border-radius: 0.25rem !important;
}

.rz-checkbox .rz-checkbox-box:hover {
  border-color: var(--rz-primary) !important;
}

.rz-checkbox-checked .rz-checkbox-box {
  background-color: var(--rz-primary) !important;
  border-color: var(--rz-primary) !important;
}

/* Radzen Badge customizations */
.rz-badge {
  border-radius: 0.375rem !important;
  padding: 0.25em 0.4em !important;
  font-size: 0.75em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  vertical-align: baseline !important;
}

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

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

.rz-badge.rz-badge-warning {
  background-color: var(--rz-warning) !important;
  color: var(--rz-text-primary) !important;
}

.rz-badge.rz-badge-info {
  background-color: var(--rz-info) !important;
  color: white !important;
}

/* Radzen Dialog customizations */
.rz-dialog {
  border-radius: 0.5rem !important;
}

.rz-dialog-header {
  background-color: var(--rz-bg-secondary) !important;
  border-bottom-color: var(--rz-border-color) !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;
}

.rz-dialog-content {
  background-color: var(--rz-bg-primary) !important;
}

.rz-dialog-footer {
  background-color: var(--rz-bg-secondary) !important;
  border-top-color: var(--rz-border-color) !important;
  border-radius: 0 0 0.5rem 0.5rem !important;
}

/* Radzen Notification customizations */
.rz-notification {
  border-radius: 0.375rem !important;
  box-shadow: 0 0.5rem 1rem var(--rz-shadow) !important;
}

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

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

.rz-notification.rz-notification-warning {
  background-color: var(--rz-warning) !important;
  color: var(--rz-text-primary) !important;
}

.rz-notification.rz-notification-info {
  background-color: var(--rz-info) !important;
  color: white !important;
}

/* Radzen Tooltip customizations */
.rz-tooltip {
  background-color: var(--rz-dark) !important;
  color: white !important;
  border-color: var(--rz-border-color-dark) !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0.5rem 1rem var(--rz-shadow) !important;
}

/* Radzen ContextMenu customizations */
.rz-contextmenu {
  background-color: var(--rz-bg-primary) !important;
  border-color: var(--rz-border-color) !important;
  box-shadow: 0 0.5rem 1rem var(--rz-shadow) !important;
  border-radius: 0.375rem !important;
}

.rz-contextmenu-item {
  border-radius: 0.25rem !important;
}

.rz-contextmenu-item:hover {
  background-color: var(--rz-bg-secondary) !important;
}

.rz-contextmenu-item.rz-state-selected {
  background-color: var(--rz-primary) !important;
  color: white !important;
}

/* Radzen ProgressBar customizations */
.rz-progressbar {
  background-color: var(--rz-bg-tertiary) !important;
  border-radius: 0.375rem !important;
  height: 1rem !important;
}

.rz-progressbar-value {
  background-color: var(--rz-primary) !important;
  border-radius: 0.375rem !important;
}

/* Radzen Slider customizations */
.rz-slider .rz-slider-handle {
  background-color: var(--rz-primary) !important;
  border-color: var(--rz-primary) !important;
  border-radius: 50% !important;
}

.rz-slider .rz-slider-range {
  background-color: var(--rz-primary) !important;
  border-radius: 0.375rem !important;
}

/* Radzen Switch customizations */
.rz-switch .rz-switch-slider {
  background-color: var(--rz-bg-tertiary) !important;
  border-radius: 1rem !important;
}

.rz-switch .rz-switch-slider:before {
  background-color: white !important;
  border-radius: 50% !important;
}

.rz-switch.rz-switch-checked .rz-switch-slider {
  background-color: var(--rz-primary) !important;
}

/* Radzen Calendar customizations */
.rz-calendar {
  border-color: var(--rz-border-color) !important;
  border-radius: 0.375rem !important;
}

.rz-calendar-header {
  background-color: var(--rz-bg-secondary) !important;
  border-bottom-color: var(--rz-border-color) !important;
  border-radius: 0.375rem 0.375rem 0 0 !important;
}

.rz-calendar-cell {
  border-radius: 0.25rem !important;
}

.rz-calendar-cell:hover {
  background-color: var(--rz-bg-secondary) !important;
}

.rz-calendar-cell.rz-state-selected {
  background-color: var(--rz-primary) !important;
  color: white !important;
}

.rz-calendar-cell.rz-state-today {
  background-color: var(--rz-primary-light) !important;
  color: white !important;
}

/* Radzen Panel customizations */
.rz-panel {
  border-color: var(--rz-border-color) !important;
  border-radius: 0.375rem !important;
}

.rz-panel-header {
  background-color: var(--rz-bg-secondary) !important;
  border-bottom-color: var(--rz-border-color) !important;
  border-radius: 0.375rem 0.375rem 0 0 !important;
}

.rz-panel-content {
  background-color: var(--rz-bg-primary) !important;
  border-radius: 0 0 0.375rem 0.375rem !important;
}

/* Radzen Card customizations */
.rz-card {
  border-color: var(--rz-border-color) !important;
  background-color: var(--rz-bg-primary) !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0.125rem 0.25rem var(--rz-shadow-light) !important;
}

.rz-card-header {
  background-color: var(--rz-bg-secondary) !important;
  border-bottom-color: var(--rz-border-color) !important;
  border-radius: 0.375rem 0.375rem 0 0 !important;
}

/* Radzen Tab customizations */
.rz-tabview .rz-tabview-nav {
  border-bottom-color: var(--rz-border-color) !important;
}

.rz-tabview .rz-tabview-nav-item {
  border-radius: 0.375rem 0.375rem 0 0 !important;
}

.rz-tabview .rz-tabview-nav-item:hover {
  background-color: var(--rz-bg-secondary) !important;
}

.rz-tabview .rz-tabview-nav-item.rz-state-active {
  background-color: var(--rz-primary) !important;
  color: white !important;
}

.rz-tabview .rz-tabview-panel {
  background-color: var(--rz-bg-primary) !important;
  border-radius: 0 0.375rem 0.375rem 0.375rem !important;
}

/* Radzen Accordion customizations */
.rz-accordion .rz-accordion-header {
  background-color: var(--rz-bg-secondary) !important;
  border-color: var(--rz-border-color) !important;
  border-radius: 0.375rem !important;
}

.rz-accordion .rz-accordion-header:hover {
  background-color: var(--rz-bg-tertiary) !important;
}

.rz-accordion .rz-accordion-header.rz-state-active {
  background-color: var(--rz-primary) !important;
  color: white !important;
  border-radius: 0.375rem 0.375rem 0 0 !important;
}

.rz-accordion .rz-accordion-content {
  background-color: var(--rz-bg-primary) !important;
  border-color: var(--rz-border-color) !important;
  border-radius: 0 0 0.375rem 0.375rem !important;
}