/* ===================================
   BEBOP DESIGN SYSTEM - RADZEN OVERRIDE
   =================================== 
   
   Este arquivo sobrescreve as configurações padrão do Radzen
   para usar as cores e estilos do novo design system.
   =================================== */

/* ===================================
   CORES PRIMÁRIAS DO RADZEN
   =================================== */

/* Botões */
.rz-button.rz-button-primary {
  background-color: var(--color-primary-600) !important;
  border-color: var(--color-primary-600) !important;
  color: #000000 !important;
}

.rz-button.rz-button-primary:hover {
  background-color: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
  color: #000000 !important;
}

.rz-button.rz-button-primary:active {
  background-color: var(--color-primary-800) !important;
  border-color: var(--color-primary-800) !important;
  color: #000000 !important;
}

.rz-button.rz-button-primary:focus {
  color: #000000 !important;
}

/* Garantir texto preto mesmo com classes Bootstrap aplicadas */
.rz-button.rz-button-primary.text-dark,
.rz-button.btn-primary.text-dark,
.rz-button[class*="primary"].text-dark {
  color: #000000 !important;
}

.rz-button.rz-button-primary.text-dark:hover,
.rz-button.btn-primary.text-dark:hover,
.rz-button[class*="primary"].text-dark:hover {
  color: #000000 !important;
}

.rz-button.rz-button-primary.text-dark:focus,
.rz-button.btn-primary.text-dark:focus,
.rz-button[class*="primary"].text-dark:focus {
  color: #000000 !important;
}

.rz-button.rz-button-primary.text-dark:active,
.rz-button.btn-primary.text-dark:active,
.rz-button[class*="primary"].text-dark:active {
  color: #000000 !important;
}

.rz-button.rz-button-secondary {
  background-color: var(--color-secondary-600) !important;
  border-color: var(--color-secondary-600) !important;
  color: white !important;
}

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

/* Botões Success - Verde Bebop com texto preto */
.rz-button.rz-button-success,
.rz-button[class*="success"],
.rz-button.btn-success {
  background-color: #21fe33 !important;
  border-color: #21fe33 !important;
  color: #000000 !important;
}

.rz-button.rz-button-success:hover,
.rz-button[class*="success"]:hover,
.rz-button.btn-success:hover {
  background-color: #1ee62e !important;
  border-color: #1ee62e !important;
  color: #000000 !important;
}

.rz-button.rz-button-success:active,
.rz-button[class*="success"]:active,
.rz-button.btn-success:active,
.rz-button.rz-button-success.active,
.rz-button[class*="success"].active,
.rz-button.btn-success.active {
  background-color: #1bd429 !important;
  border-color: #1bd429 !important;
  color: #000000 !important;
}

.rz-button.rz-button-success:focus,
.rz-button[class*="success"]:focus,
.rz-button.btn-success:focus {
  background-color: #1ee62e !important;
  border-color: #1ee62e !important;
  color: #000000 !important;
  box-shadow: 0 0 0 0.25rem rgba(33, 254, 51, 0.25) !important;
}

/* Garantir texto preto mesmo com classes Bootstrap aplicadas */
.rz-button.btn-success.text-dark,
.rz-button[class*="success"].text-dark,
.rz-button.rz-button-success.text-dark {
  color: #000000 !important;
}

.rz-button.btn-success.text-dark:hover,
.rz-button[class*="success"].text-dark:hover,
.rz-button.rz-button-success.text-dark:hover {
  color: #000000 !important;
}

.rz-button.btn-success.text-dark:focus,
.rz-button[class*="success"].text-dark:focus,
.rz-button.rz-button-success.text-dark:focus {
  color: #000000 !important;
}

.rz-button.btn-success.text-dark:active,
.rz-button[class*="success"].text-dark:active,
.rz-button.rz-button-success.text-dark:active {
  color: #000000 !important;
}

/* Links */
.rz-button.rz-button-link {
  color: var(--color-primary-600) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

.rz-button.rz-button-link:hover {
  color: var(--color-primary-700) !important;
  background-color: var(--color-primary-50) !important;
}

/* ===================================
   FORMULÁRIOS
   =================================== */

/* Campos de entrada */
.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-multiselect,
.rz-datepicker,
.rz-timepicker,
.rz-numberbox {
  border-color: var(--color-neutral-300) !important;
  border-radius: var(--border-radius-lg) !important;
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-base) !important;
  padding: var(--spacing-3) var(--spacing-4) !important;
  transition: all var(--transition-normal) !important;
}

.rz-textbox:focus,
.rz-textarea:focus,
.rz-dropdown:focus,
.rz-multiselect:focus,
.rz-datepicker:focus,
.rz-timepicker:focus,
.rz-numberbox:focus {
  border-color: var(--color-primary-500) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}

/* Labels */
.rz-form-field-label {
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--color-neutral-700) !important;
  margin-bottom: var(--spacing-2) !important;
}

/* Validação */
.rz-textbox.rz-state-invalid,
.rz-textarea.rz-state-invalid,
.rz-dropdown.rz-state-invalid,
.rz-multiselect.rz-state-invalid,
.rz-datepicker.rz-state-invalid,
.rz-timepicker.rz-state-invalid,
.rz-numberbox.rz-state-invalid {
  border-color: var(--color-error-500) !important;
}

.rz-textbox.rz-state-valid,
.rz-textarea.rz-state-valid,
.rz-dropdown.rz-state-valid,
.rz-multiselect.rz-state-valid,
.rz-datepicker.rz-state-valid,
.rz-timepicker.rz-state-valid,
.rz-numberbox.rz-state-valid {
  border-color: var(--color-success-500) !important;
}

/* Mensagens de validação */
.rz-field-validation-message {
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-sm) !important;
  margin-top: var(--spacing-1) !important;
}

.rz-field-validation-message.rz-error {
  color: var(--color-error-600) !important;
}

.rz-field-validation-message.rz-success {
  color: var(--color-success-600) !important;
}

/* ===================================
   TABELAS
   =================================== */

/* Cabeçalho da tabela */
.rz-data-table thead th {
  background-color: var(--color-neutral-50) !important;
  border-bottom-color: var(--color-neutral-200) !important;
  color: var(--color-neutral-900) !important;
  font-weight: var(--font-weight-semibold) !important;
  padding: var(--spacing-4) !important;
}

/* Linhas da tabela */
.rz-data-table tbody tr {
  border-bottom-color: var(--color-neutral-100) !important;
}

.rz-data-table tbody tr:hover {
  background-color: var(--color-neutral-50) !important;
}

.rz-data-table tbody tr.rz-state-selected {
  background-color: var(--color-primary-100) !important;
}

/* Células da tabela */
.rz-data-table tbody td {
  padding: var(--spacing-4) !important;
  color: var(--color-neutral-700) !important;
}

/* ===================================
   PAGINAÇÃO
   =================================== */

/* Botões de paginação */
.rz-paginator .rz-paginator-page,
.rz-paginator .rz-paginator-first,
.rz-paginator .rz-paginator-prev,
.rz-paginator .rz-paginator-next,
.rz-paginator .rz-paginator-last {
  border-color: var(--color-neutral-300) !important;
  color: var(--color-neutral-600) !important;
  background-color: white !important;
  border-radius: var(--border-radius-base) !important;
  margin: 0 var(--spacing-1) !important;
  padding: var(--spacing-2) var(--spacing-3) !important;
}

.rz-paginator .rz-paginator-page:hover,
.rz-paginator .rz-paginator-first:hover,
.rz-paginator .rz-paginator-prev:hover,
.rz-paginator .rz-paginator-next:hover,
.rz-paginator .rz-paginator-last:hover {
  background-color: var(--color-neutral-100) !important;
  border-color: var(--color-neutral-400) !important;
}

.rz-paginator .rz-paginator-page.rz-state-active {
  background-color: var(--color-primary-600) !important;
  border-color: var(--color-primary-600) !important;
  color: white !important;
}

/* ===================================
   DROPDOWNS
   =================================== */

/* Correção para texto cortado nos dropdowns */
.rz-dropdown,
.rz-multiselect {
  min-height: 44px !important;
  line-height: 1.5 !important;
}

/* Texto selecionado dentro do dropdown */
.rz-dropdown .rz-dropdown-trigger,
.rz-multiselect .rz-multiselect-trigger {
  height: 100% !important;
  padding: 0 !important;
  width: var(--rz-dropdown-trigger-icon-width) !important;
  justify-content: center;
  z-index: 1;
}

/* Ícone de limpar (AllowClear) - evitar sobreposição com o ícone de abrir */
.rz-dropdown .rz-dropdown-clear-icon,
.rz-multiselect .rz-dropdown-clear-icon {
  inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + var(--spacing-2)) !important;
  z-index: 2;
}

/* Valor selecionado */
.rz-dropdown .rz-dropdown-trigger .rz-dropdown-trigger-icon,
.rz-multiselect .rz-multiselect-trigger .rz-multiselect-trigger-icon {
  margin-left: auto !important;
}

/* Dropdown aberto */
.rz-dropdown-panel {
  border-color: var(--color-neutral-200) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  background-color: white !important;
}

/* Itens do dropdown */
.rz-dropdown-item {
  padding: var(--spacing-3) var(--spacing-4) !important;
  color: var(--color-neutral-700) !important;
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-base) !important;
}

.rz-dropdown-item:hover {
  background-color: var(--color-neutral-100) !important;
  color: var(--color-neutral-900) !important;
}

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

/* ===================================
   MODAIS
   =================================== */

/* Overlay do modal */
.rz-overlay-panel {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Modal */
.rz-dialog {
  border-radius: var(--border-radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  border: none !important;
}

/* Cabeçalho do modal */
.rz-dialog-titlebar {
  background-color: var(--color-neutral-50) !important;
  border-bottom-color: var(--color-neutral-200) !important;
  border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0 !important;
  padding: var(--spacing-6) !important;
}

.rz-dialog-title {
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-xl) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-neutral-900) !important;
}

/* Corpo do modal */
.rz-dialog-content {
  padding: var(--spacing-6) !important;
}

/* Rodapé do modal */
.rz-dialog-titlebar-toolbar {
  border-top-color: var(--color-neutral-200) !important;
  background-color: var(--color-neutral-50) !important;
  border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl) !important;
  padding: var(--spacing-6) !important;
}

/* ===================================
   MODAIS DE CONFIRMAÇÃO
   =================================== */

/* Botões do modal de confirmação - Seletores mais específicos */
.rz-dialog .rz-dialog-titlebar-toolbar .rz-button,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button {
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  border-radius: var(--border-radius-lg) !important;
  padding: var(--spacing-3) var(--spacing-6) !important;
  transition: all var(--transition-normal) !important;
  border: 2px solid transparent !important;
  min-width: 100px !important;
}

/* Botão de confirmação (Sim) - Primeiro botão */
.rz-dialog .rz-dialog-titlebar-toolbar .rz-button:first-child,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button:first-child {
  background-color: var(--color-error-600) !important;
  border-color: var(--color-error-600) !important;
  color: white !important;
}

.rz-dialog .rz-dialog-titlebar-toolbar .rz-button:first-child:hover,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button:first-child:hover {
  background-color: var(--color-error-700) !important;
  border-color: var(--color-error-700) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

.rz-dialog .rz-dialog-titlebar-toolbar .rz-button:first-child:active,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button:first-child:active {
  background-color: var(--color-error-800) !important;
  border-color: var(--color-error-800) !important;
  transform: translateY(0) !important;
}

/* Botão de cancelamento (Não) - Último botão */
.rz-dialog .rz-dialog-titlebar-toolbar .rz-button:last-child,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button:last-child {
  background-color: transparent !important;
  border-color: var(--color-neutral-400) !important;
  color: var(--color-neutral-700) !important;
}

.rz-dialog .rz-dialog-titlebar-toolbar .rz-button:last-child:hover,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button:last-child:hover {
  background-color: var(--color-neutral-100) !important;
  border-color: var(--color-neutral-500) !important;
  color: var(--color-neutral-800) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

.rz-dialog .rz-dialog-titlebar-toolbar .rz-button:last-child:active,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button:last-child:active {
  background-color: var(--color-neutral-200) !important;
  border-color: var(--color-neutral-600) !important;
  transform: translateY(0) !important;
}

/* Espaçamento entre os botões */
.rz-dialog .rz-dialog-titlebar-toolbar .rz-button + .rz-button,
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button + .rz-button {
  margin-left: var(--spacing-3) !important;
}

/* Forçar cores específicas para botões de confirmação */
.rz-dialog .rz-dialog-titlebar-toolbar .rz-button[data-command="ok"],
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button[data-command="ok"] {
  background-color: var(--color-error-600) !important;
  border-color: var(--color-error-600) !important;
  color: white !important;
}

.rz-dialog .rz-dialog-titlebar-toolbar .rz-button[data-command="cancel"],
.rz-overlay-panel .rz-dialog .rz-dialog-titlebar-toolbar .rz-button[data-command="cancel"] {
  background-color: transparent !important;
  border-color: var(--color-neutral-400) !important;
  color: var(--color-neutral-700) !important;
}

/* ===================================
   NOTIFICAÇÕES
   =================================== */

/* Toast de sucesso */
.rz-toast.rz-toast-success {
  background-color: var(--color-success-50) !important;
  border-color: var(--color-success-200) !important;
  color: var(--color-success-800) !important;
}

/* Toast de erro */
.rz-toast.rz-toast-error {
  background-color: var(--color-error-50) !important;
  border-color: var(--color-error-200) !important;
  color: var(--color-error-800) !important;
}

/* Toast de aviso */
.rz-toast.rz-toast-warning {
  background-color: var(--color-warning-50) !important;
  border-color: var(--color-warning-200) !important;
  color: var(--color-warning-800) !important;
}

/* Toast de informação */
.rz-toast.rz-toast-info {
  background-color: var(--color-info-50) !important;
  border-color: var(--color-info-200) !important;
  color: var(--color-info-800) !important;
}

/* ===================================
   PROGRESS BARS
   =================================== */

/* Barra de progresso */
.rz-progressbar {
  background-color: var(--color-neutral-200) !important;
  border-radius: var(--border-radius-full) !important;
  overflow: hidden !important;
}

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

/* ===================================
   SLIDERS
   =================================== */

/* Slider */
.rz-slider {
  background-color: var(--color-neutral-200) !important;
}

.rz-slider .rz-slider-handle {
  background-color: var(--color-primary-600) !important;
  border-color: var(--color-primary-600) !important;
  border-radius: 50% !important;
}

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

/* ===================================
   CHECKBOXES E RADIOS
   =================================== */

/* Checkbox */
.rz-checkbox-box {
  border-color: var(--color-neutral-300) !important;
  border-radius: var(--border-radius-base) !important;
}

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

.rz-checkbox-box.rz-state-checked .rz-checkbox-icon {
  color: white !important;
}

/* Radio */
.rz-radiobutton-box {
  border-color: var(--color-neutral-300) !important;
}

.rz-radiobutton-box.rz-state-checked {
  border-color: var(--color-primary-600) !important;
}

.rz-radiobutton-box.rz-state-checked .rz-radiobutton-icon {
  background-color: var(--color-primary-600) !important;
}

/* ===================================
   RESPONSIVIDADE
   =================================== */

@media (max-width: 1650px) {
  .rz-dialog {
    margin: var(--spacing-4) !important;
    max-width: calc(100vw - var(--spacing-8)) !important;
  }

  .rz-dialog-titlebar,
  .rz-dialog-content,
  .rz-dialog-titlebar-toolbar {
    padding: var(--spacing-4) !important;
  }

  .rz-data-table thead th,
  .rz-data-table tbody td {
    padding: var(--spacing-3) !important;
  }
}

/* ===================================
   DATEPICKER ESPECÍFICO
   =================================== */

/* Ajuste do padding interno do DatePicker para ficar consistente com outros campos */
.rz-datepicker {
  padding: 0px 5px !important;
  min-height: 22px !important;
}

/* Ajuste do padding quando o DatePicker tem ShowTime=true */
.rz-datepicker.rz-has-time {
  padding: 6px 12px !important; /* Reduzindo ainda mais para campos com tempo */
}

/* Forçar padding específico para campos de data */
.rz-datepicker input[type="text"] {
  padding: 8px 12px !important;
  min-height: 44px !important;
}

/* Ajuste específico para campos com tempo */
.rz-datepicker.rz-has-time input[type="text"] {
  padding: 6px 12px !important;
  min-height: 44px !important;
}

/* Sobrescrever qualquer padding inline do Radzen */
.rz-datepicker[style*="padding"] {
  padding: 8px 12px !important;
}

.rz-datepicker.rz-has-time[style*="padding"] {
  padding: 6px 12px !important;
}

/* Tema do calendário - alterando cor de seleção de vermelho para preto */
/* Usando seletores mais específicos para sobrescrever o tema material */
.rz-calendar .rz-calendar-cell.rz-state-selected,
.rz-calendar-popup .rz-calendar .rz-calendar-cell.rz-state-selected {
  background-color: #000000 !important; /* Preto sólido */
  color: white !important;
}

.rz-calendar .rz-calendar-cell.rz-state-selected:hover,
.rz-calendar-popup .rz-calendar .rz-calendar-cell.rz-state-selected:hover {
  background-color: #1a1a1a !important; /* Preto mais claro no hover */
  color: white !important;
}

/* Cabeçalho do calendário */
.rz-calendar .rz-calendar-header,
.rz-calendar-popup .rz-calendar .rz-calendar-header {
  background-color: #f3f4f6 !important;
  border-bottom-color: #e5e7eb !important;
}

/* Navegação do calendário */
.rz-calendar .rz-calendar-nav,
.rz-calendar-popup .rz-calendar .rz-calendar-nav {
  color: #374151 !important;
}

.rz-calendar .rz-calendar-nav:hover,
.rz-calendar-popup .rz-calendar .rz-calendar-nav:hover {
  color: #111827 !important;
}

/* Células do calendário */
.rz-calendar .rz-calendar-cell,
.rz-calendar-popup .rz-calendar .rz-calendar-cell {
  color: #374151 !important;
}

.rz-calendar .rz-calendar-cell:hover,
.rz-calendar-popup .rz-calendar .rz-calendar-cell:hover {
  background-color: #f3f4f6 !important;
}

/* Células de outros meses */
.rz-calendar .rz-calendar-cell.rz-calendar-other-month,
.rz-calendar-popup .rz-calendar .rz-calendar-cell.rz-calendar-other-month {
  color: #9ca3af !important;
}

/* Célula de hoje */
.rz-calendar .rz-calendar-cell.rz-calendar-today,
.rz-calendar-popup .rz-calendar .rz-calendar-cell.rz-calendar-today {
  background-color: #e5e7eb !important;
  color: #111827 !important;
  font-weight: 600 !important;
}

/* Botões de navegação do calendário */
.rz-calendar .rz-calendar-nav-button,
.rz-calendar-popup .rz-calendar .rz-calendar-nav-button {
  color: #6b7280 !important;
}

.rz-calendar .rz-calendar-nav-button:hover,
.rz-calendar-popup .rz-calendar .rz-calendar-nav-button:hover {
  color: #374151 !important;
  background-color: #f3f4f6 !important;
}

/* Popup do calendário */
.rz-calendar-popup {
  border-color: #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Campos de tempo (quando ShowTime=true) */
.rz-timepicker {
  padding: 6px 12px !important; /* Reduzindo padding para consistência */
  min-height: 44px !important;
}

/* Botões de incremento/decremento do tempo */
.rz-timepicker .rz-spinner-button {
  color: #6b7280 !important;
}

.rz-timepicker .rz-spinner-button:hover {
  color: #374151 !important;
  background-color: #f3f4f6 !important;
}

/* ===================================
   SOBRESCRITA FINAL DO TEMA MATERIAL
   =================================== */

/* Regra final para sobrescrever completamente o tema material do Radzen */
.rz-calendar .rz-calendar-cell.rz-state-selected,
.rz-calendar-popup .rz-calendar .rz-calendar-cell.rz-state-selected,
.rz-calendar .rz-calendar-cell.rz-state-selected[style*="background-color"],
.rz-calendar-popup .rz-calendar .rz-calendar-cell.rz-state-selected[style*="background-color"] {
  background-color: #000000 !important;
  color: white !important;
}