/* ===== RADZEN COMPONENT OVERRIDES ===== */

/* Force Radzen notifications to appear at the top instead of bottom */
.rz-notification-container {
  position: fixed !important;
  top: 20px !important;
  bottom: auto !important;
  right: 20px !important;
  z-index: 9999 !important;
}

/* Optional: Make error notifications more prominent */
.rz-notification.rz-notification-error {
  background-color: #dc3545 !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

/* Style all notification types to appear at top */
.rz-notification.rz-notification-success {
  background-color: #53AF31 !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(83, 175, 49, 0.3) !important;
}

.rz-notification.rz-notification-info {
  background-color: #0dcaf0 !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(13, 202, 240, 0.3) !important;
}

.rz-notification.rz-notification-warning {
  background-color: #ffc107 !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3) !important;
}

/* Ensure all notification types appear at the top */
.rz-notification {
  margin-bottom: 10px !important;
}

/* Override Radzen primary buttons to use our green and consistent font */
.rz-button {
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.rz-button.rz-primary.rz-shade-default {
  background-color: #53AF31 !important;
  color: white !important;
}

.rz-button.rz-primary.rz-shade-default:hover,
.rz-button:hover {
  background-color: #478F2A !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.rz-button.rz-primary.rz-shade-default:active {
  background-color: #3C7A24 !important;
}

/* Override standard Bootstrap buttons */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: #53AF31;
  border-color: #53AF31;
}

.btn-primary:hover {
  background-color: #478F2A;
  border-color: #478F2A;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Also target other Radzen primary elements */
.rz-primary {
  --rz-primary: #53AF31 !important;
  --rz-primary-light: #6BC346 !important;
  --rz-primary-lighter: #8CD46C !important;
  --rz-primary-dark: #478F2A !important;
  --rz-primary-darker: #3C7A24 !important;
}

/* ===== RADZEN COLOR OVERRIDES ===== */

/* Override Radzen secondary colors */
:root {
  /* Override the rz-secondary-light with a lighter green color */
  --rz-secondary-light: #E0E0E0 !important; /* This is a lighter shade of green */
  /* Optional: Override other secondary colors if needed */
  --rz-secondary: #53AF31 !important; /* The main green color */
  --rz-secondary-lighter: #E0E0E0 !important; /* Even lighter shade of green */
  --rz-secondary-dark: #478F2A !important; /* Darker shade (already defined) */
  --rz-secondary-darker: #E0E0E0 !important; /* Darkest shade (already defined) */
}

/* Apply these overrides in dark mode too */
[data-theme='dark'] {
  --rz-secondary-light: #E0E0E0 !important; /* Lighter green but visible in dark mode */
  --rz-secondary-lighter: #E0E0E0 !important; /* Even lighter shade for dark mode */
}

/* Explicitly target both textareas with important flags */
.system-prompt-textarea,
#transcription {
  transition: border-color 0.2s ease !important;
  background-color: white !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
  border-radius: 5px !important;
  padding: 10px !important;
  font-family: inherit !important;
  resize: vertical !important;
}

.system-prompt-textarea:hover,
#transcription:hover {
  border-color: #000 !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) !important;
}

.system-prompt-textarea:focus,
#transcription:focus {
  border-color: #000 !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) !important;
}

/* Dark mode specific styles for both textareas */
[data-theme='dark'] .system-prompt-textarea,
[data-theme='dark'] #transcription {
  background-color: #333 !important;
  color: #eee !important;
  border-color: #555 !important;
}

[data-theme='dark'] .system-prompt-textarea:hover,
[data-theme='dark'] #transcription:hover {
  border-color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

[data-theme='dark'] .system-prompt-textarea:focus,
[data-theme='dark'] #transcription:focus {
  border-color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

/* General textarea styling for other textareas */
textarea,
.rz-textarea,
.rz-textarea-input {
  transition: border-color 0.2s ease;
  background-color: white;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  font-family: inherit;
  resize: vertical;
}

textarea:hover,
.rz-textarea:hover,
.rz-textarea-input:hover {
  border-color: #000;
  outline: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

textarea:focus,
.rz-textarea:focus,
.rz-textarea-input:focus {
  border-color: #000;
  outline: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Dark mode for other textareas */
[data-theme='dark'] textarea,
[data-theme='dark'] .rz-textarea,
[data-theme='dark'] .rz-textarea-input {
  background-color: #333 !important;
  color: #eee !important;
  border-color: #555 !important;
}

[data-theme='dark'] textarea:hover,
[data-theme='dark'] .rz-textarea:hover,
[data-theme='dark'] .rz-textarea-input:hover {
  border-color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

[data-theme='dark'] textarea:focus,
[data-theme='dark'] .rz-textarea:focus,
[data-theme='dark'] .rz-textarea-input:focus {
  border-color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}