/* Overrides de Ant Design basados en variables de Tailwind
 * IMPORTANTE:
 * - No usar @apply aquí, solo CSS plano.
 * - Todos los colores deben venir de variables CSS definidas en src/styles/tailwind.css
 *   (por ejemplo: --color-primary, --color-primary-light, etc.)
 */

/* ===============================
   Botón primario
   =============================== */

.ant-btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-white);
}

.ant-btn-primary:hover,
.ant-btn-primary:focus {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: var(--color-text-white);
}

.ant-btn-primary:active {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Ghost primary (si se usa) */
.ant-btn-primary.ant-btn-background-ghost {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.ant-btn-primary.ant-btn-background-ghost:hover,
.ant-btn-primary.ant-btn-background-ghost:focus {
  color: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

/* ===============================
   Botón por defecto (secundario)
   =============================== */

.ant-btn-default {
  background-color: var(--color-component-card);
  border-color: var(--color-bg-border);
  color: var(--color-text-default);
}

.ant-btn-default:hover,
.ant-btn-default:focus {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-bg-border);
  color: var(--color-text-default);
}

.ant-btn-default:active {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-bg-border);
  color: var(--color-text-default);
}

/* Color de la "ola" (wave) al hacer click en cualquier botón:
   forzamos la variable global que usa Antd para el wave */
html {
  --antd-wave-shadow-color: var(--color-primary) !important;
}

/* Variante texto: enlaces de acción con color del tema
   Forzamos con !important para sobreescribir overrides legacy en LESS */
.ant-btn-text {
  color: var(--color-primary) !important;
  background-color: transparent !important;
}

.ant-btn-text:hover,
.ant-btn-text:focus {
  color: var(--color-primary-light) !important;
  background-color: var(--color-primary-soft) !important;
}

/* ===============================
   Checkbox
   =============================== */

.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.ant-checkbox-checked::after {
  border: 1px solid var(--color-primary);
}

.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner {
  border-color: var(--color-primary);
}

.ant-checkbox-input:focus + .ant-checkbox-inner {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(40, 114, 79, 0.2); /* basado en --color-primary */
}

/* Asegurar que el check (::after) también usa el color del tema */
.ant-checkbox-checked .ant-checkbox-inner::after,
.ant-checkbox-indeterminate .ant-checkbox-inner::after {
  border-color: var(--color-text-white);
  background-color: var(--color-primary);
}

/* ===============================
   Radio
   =============================== */

.ant-radio-checked .ant-radio-inner {
  border-color: var(--color-primary);
}

.ant-radio-inner::after {
  background-color: var(--color-primary);
}

.ant-radio-wrapper:hover .ant-radio-inner,
.ant-radio:hover .ant-radio-inner {
  border-color: var(--color-primary);
}

.ant-radio-input:focus + .ant-radio-inner {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(40, 114, 79, 0.2);
}

/* ===============================
   Switch
   =============================== */

.ant-switch-checked {
  background-color: var(--color-primary);
}

.ant-switch-checked:hover {
  background-color: var(--color-primary-light);
}

/* ===============================
   Input
   =============================== */

.ant-input,
.ant-input-affix-wrapper {
  border-color: var(--color-component-input-border);
  background-color: var(--color-component-input);
  color: var(--color-text-dark);
}

.ant-input::placeholder,
.ant-input-affix-wrapper input::placeholder {
  color: var(--color-text-light);
}

.ant-input:hover,
.ant-input-affix-wrapper:hover {
  border-color: var(--color-primary-light);
}

.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper-focused,
.ant-input-affix-wrapper:focus {
  border-color: var(--color-primary);
  /* Halo de enfoque usando el color del tema */
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* Prefijos/sufijos de iconos en inputs (Search, Password, etc.) */
.ant-input-affix-wrapper .ant-input-prefix .anticon,
.ant-input-affix-wrapper .ant-input-suffix .anticon {
  color: var(--color-text-light);
}

.ant-input-affix-wrapper:hover .ant-input-prefix .anticon,
.ant-input-affix-wrapper:hover .ant-input-suffix .anticon,
.ant-input-affix-wrapper-focused .ant-input-prefix .anticon,
.ant-input-affix-wrapper-focused .ant-input-suffix .anticon {
  color: var(--color-primary);
}

/* ===============================
   InputNumber
   =============================== */

.ant-input-number {
  border-color: var(--color-component-input-border);
  background-color: var(--color-component-input);
  color: var(--color-text-dark);
}

.ant-input-number-input {
  color: var(--color-text-dark);
}

.ant-input-number-input::placeholder {
  color: var(--color-text-light);
}

.ant-input-number:hover {
  border-color: var(--color-primary-light);
}

.ant-input-number-focused,
.ant-input-number:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* ===============================
   Select
   =============================== */

.ant-select:not(.ant-select-customize-input) .ant-select-selector {
  border-color: var(--color-component-input-border);
  background-color: var(--color-component-input);
  color: var(--color-text-dark);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ant-select:not(.ant-select-disabled):hover .ant-select-selector {
  border-color: var(--color-primary) !important;
}

/* Focus / open / estados de formulario: forzamos el halo al tema */
.ant-select-focused:not(.ant-select-disabled) .ant-select-selector,
.ant-select-open:not(.ant-select-disabled) .ant-select-selector,
.ant-select-status-success:not(.ant-select-disabled) .ant-select-selector,
.ant-select-status-warning:not(.ant-select-disabled) .ant-select-selector,
.ant-select-status-error:not(.ant-select-disabled) .ant-select-selector,
.ant-form-item-has-success .ant-select .ant-select-selector,
.ant-form-item-has-warning .ant-select .ant-select-selector,
.ant-form-item-has-error .ant-select .ant-select-selector {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px var(--color-primary-light) !important;
}

.ant-select-dropdown {
  border-color: var(--color-bg-border);
}

/* Opción seleccionada / hover usa colores del tema */
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background-color: var(--color-component-disabled);
  color: var(--color-primary);
}

.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-dark);
}

/* Icono de flecha del Select */
.ant-select-arrow .anticon {
  color: var(--color-text-light);
}

.ant-select-focused .ant-select-arrow .anticon,
.ant-select-open .ant-select-arrow .anticon {
  color: var(--color-primary);
}

/* ===============================
   Tabs
   =============================== */

.ant-tabs-ink-bar {
  background-color: var(--color-primary);
}

.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--color-primary);
}

.ant-tabs-tab:hover .ant-tabs-tab-btn {
  color: var(--color-primary-light);
}

.ant-tabs-tab-btn:focus {
  color: var(--color-primary);
}

/* ===============================
   Slider
   =============================== */

.ant-slider-track {
  background-color: var(--color-primary);
}

.ant-slider-handle {
  border-color: var(--color-primary);
}

.ant-slider-handle:hover {
  border-color: var(--color-primary-light);
}

.ant-slider-handle:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(40, 114, 79, 0.2);
}

/* ===============================
   Pagination
   =============================== */

.ant-pagination-item-active {
  border-color: var(--color-primary) !important;
  background-color: var(--color-component-card) !important;
}

.ant-pagination-item-active a {
  color: var(--color-primary) !important;
}

.ant-pagination-item:hover a {
  color: var(--color-primary-light) !important;
}

.ant-pagination-item:hover {
  border-color: var(--color-primary-light) !important;
}

/* Texto base del paginador */
.ant-pagination-item a {
  color: var(--color-text-default);
}

/* Flechas anterior / siguiente */
.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  border-color: var(--color-bg-border);
  color: var(--color-text-default);
}

.ant-pagination-prev:hover .ant-pagination-item-link,
.ant-pagination-next:hover .ant-pagination-item-link {
  border-color: var(--color-primary-light);
  color: var(--color-primary-light);
}

.ant-pagination-prev.ant-pagination-disabled .ant-pagination-item-link,
.ant-pagination-next.ant-pagination-disabled .ant-pagination-item-link {
  border-color: var(--color-bg-border);
  color: var(--color-component-disabled);
}

/* ===============================
   Progress
   =============================== */

.ant-progress-bg {
  background-color: var(--color-primary);
}

/* ===============================
   Menu (side & top) – colores base
   =============================== */

/* Menú claro: usar fondo/card y texto del tema Tailwind */
.ant-menu-light,
.ant-menu-light .ant-menu-sub {
  background-color: var(--color-component-card);
  color: var(--color-text-dark);
}

.ant-menu-light .ant-menu-item,
.ant-menu-light .ant-menu-submenu-title {
  color: var(--color-text-default);
}

.ant-menu-light .ant-menu-item:hover,
.ant-menu-light .ant-menu-submenu-title:hover {
  color: var(--color-primary);
}

/* Menú oscuro: usar fondo y texto oscuros del tema Tailwind */
.ant-menu-dark,
.ant-menu-dark .ant-menu-sub {
  background-color: var(--color-bg-dark);
  color: var(--color-text-white);
}

.ant-menu-dark .ant-menu-item,
.ant-menu-dark .ant-menu-submenu-title {
  color: var(--color-text-light);
}

.ant-menu-dark .ant-menu-item:hover,
.ant-menu-dark .ant-menu-submenu-title:hover {
  color: var(--color-primary-light);
}

/* Ítems seleccionados, activo y foco – usan color primario */
.ant-menu-light .ant-menu-item-selected,
.ant-menu-light .ant-menu-submenu-selected,
.ant-menu-light.ant-menu-inline .ant-menu-item-selected {
  /* Fondo ligeramente destacado usando colores neutros del tema */
  background-color: var(--color-component-disabled) !important;
  color: var(--color-primary) !important;
}

.ant-menu-dark .ant-menu-item-selected,
.ant-menu-dark .ant-menu-submenu-selected,
.ant-menu-dark.ant-menu-inline .ant-menu-item-selected {
  background-color: var(--color-bg-light) !important;
  color: var(--color-primary-light) !important;
}

/* Asegurar que el texto/enlace del item seleccionado hereda el color del tema */
.ant-menu-light .ant-menu-item-selected > a,
.ant-menu-light .ant-menu-item-selected > a:hover,
.ant-menu-light .ant-menu-item-selected .ant-menu-title-content {
  color: var(--color-primary) !important;
}

.ant-menu-dark .ant-menu-item-selected > a,
.ant-menu-dark .ant-menu-item-selected > a:hover,
.ant-menu-dark .ant-menu-item-selected .ant-menu-title-content {
  color: var(--color-primary-light) !important;
}

/* Indicador lateral (border-right) en menú inline/vertical:
   forzamos que use el color primario del tema Tailwind */
.ant-menu-inline .ant-menu-item::after,
.ant-menu-vertical .ant-menu-item::after,
.ant-menu-vertical-left .ant-menu-item::after,
.ant-menu-vertical-right .ant-menu-item::after {
  border-right-color: var(--color-primary) !important;
}

/* Modo horizontal (top nav) – por si se comparte estilo */
.ant-menu-horizontal.ant-menu-light > .ant-menu-item-selected,
.ant-menu-horizontal.ant-menu-light > .ant-menu-submenu-selected {
  border-bottom-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.ant-menu-horizontal.ant-menu-dark > .ant-menu-item-selected,
.ant-menu-horizontal.ant-menu-dark > .ant-menu-submenu-selected {
  border-bottom-color: var(--color-primary-light) !important;
  color: var(--color-primary-light) !important;
}

/* ===============================
   Card, List, Timeline
   =============================== */

.ant-card {
  background-color: var(--color-component-card);
  border-color: var(--color-bg-border);
  box-shadow: var(--shadow-card);
  color: var(--color-text-dark);
}

.ant-card-head {
  border-bottom-color: var(--color-bg-border);
}

.ant-card-head-title {
  color: var(--color-text-dark);
}

.ant-list {
  background-color: var(--color-component-card);
  border-color: var(--color-bg-border);
}

.ant-list-item {
  border-bottom-color: var(--color-bg-border);
}

.ant-timeline-item-head {
  border-color: var(--color-primary);
}

.ant-timeline-item-head-blue {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ===============================
   Breadcrumb
   =============================== */

.ant-breadcrumb,
.ant-breadcrumb a {
  color: var(--color-text-light);
}

.ant-breadcrumb a:hover {
  color: var(--color-primary);
}

.ant-breadcrumb-separator {
  color: var(--color-text-light);
}

/* ===============================
   Drawer & Modal
   =============================== */

.ant-drawer-header,
.ant-modal-header {
  background-color: var(--color-component-card);
  border-bottom-color: var(--color-bg-border);
}

.ant-drawer-title,
.ant-modal-title {
  color: var(--color-text-dark);
}

.ant-drawer-body,
.ant-modal-body {
  background-color: var(--color-component-card);
  color: var(--color-text-default);
}

.ant-modal-footer {
  border-top-color: var(--color-bg-border);
}

/* ===============================
   Table
   =============================== */

.ant-table {
  background-color: var(--color-component-card);
  color: var(--color-text-default);
}

.ant-table-thead > tr > th {
  background-color: var(--color-bg-light);
  color: var(--color-text-dark);
  border-bottom-color: var(--color-bg-border);
}

.ant-table-tbody > tr > td {
  border-bottom-color: var(--color-bg-border);
}

.ant-table-tbody > tr:hover > td {
  background-color: var(--color-component-disabled);
}

.ant-table-tbody > tr.ant-table-row-selected > td {
  background-color: var(--color-bg-light);
}

/* ===============================
   DatePicker
   =============================== */

.ant-picker {
  background-color: var(--color-component-input);
  border-color: var(--color-component-input-border);
  color: var(--color-text-dark);
}

.ant-picker:hover,
.ant-picker-focused {
  border-color: var(--color-primary);
}

.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,
.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

.ant-picker-today-btn {
  color: var(--color-primary);
}

/* ===============================
   Calendar (ant-picker-calendar)
   =============================== */

.ant-picker-calendar {
  background-color: var(--color-component-card);
  color: var(--color-text-default);
}

.ant-picker-calendar .ant-picker-panel {
  background-color: var(--color-component-card);
}

.ant-picker-calendar-full .ant-picker-content th {
  color: var(--color-text-light);
}

/* Día de hoy en calendario: pill con borde y fondo primario, texto blanco */
.ant-picker-calendar-full
  .ant-picker-cell-in-view.ant-picker-calendar-today
  .ant-picker-calendar-date-value {
  border: 1px solid var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-text-white) !important;
  border-radius: 9999px;
  padding: 0 6px;
}

/* Variante específica de Antd para "hoy" dentro del panel de calendario */
.ant-picker-calendar-full
  .ant-picker-panel
  .ant-picker-calendar-date-today
  .ant-picker-calendar-date-value {
  border: 1px solid var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-text-white) !important;
  border-radius: 9999px;
  padding: 0 6px;
}

/* Día seleccionado en calendario:
   - fondo con primary-light
   - número con fondo primary y texto blanco dentro de un "pill"
*/
.ant-picker-calendar-full
  .ant-picker-cell-in-view.ant-picker-cell-selected
  .ant-picker-calendar-date,
.ant-picker-calendar-full
  .ant-picker-cell-in-view.ant-picker-cell-selected
  .ant-picker-calendar-date:hover {
  background-color: var(--color-primary-light);
}

.ant-picker-calendar-full
  .ant-picker-cell-in-view.ant-picker-cell-selected
  .ant-picker-calendar-date-value {
  background-color: var(--color-primary);
  color: var(--color-text-white) !important;
  border-radius: 9999px;
  padding: 0 6px;
}

/* Fechas fuera de mes actual */
.ant-picker-calendar-full
  .ant-picker-cell:not(.ant-picker-cell-in-view)
  .ant-picker-calendar-date {
  color: var(--color-text-light);
}

/* Hover en fechas */
.ant-picker-calendar-full
  .ant-picker-cell-in-view
  .ant-picker-calendar-date:hover {
  background-color: var(--color-bg-subtle);
}

/* ===============================
   Alert, message, notification
   =============================== */

.ant-alert-info {
  background-color: rgba(14, 165, 233, 0.08);
  border-color: var(--color-info);
  color: var(--color-text-default);
}

.ant-alert-success {
  background-color: rgba(34, 197, 94, 0.08);
  border-color: var(--color-success);
  color: var(--color-text-default);
}

.ant-alert-error {
  background-color: rgba(239, 68, 68, 0.08);
  border-color: var(--color-error);
  color: var(--color-text-default);
}

.ant-alert-warning {
  background-color: rgba(234, 179, 8, 0.08);
  border-color: var(--color-warning);
  color: var(--color-text-default);
}

.ant-message-notice-content,
.ant-notification-notice {
  background-color: var(--color-component-card);
  border: 1px solid var(--color-bg-border);
  color: var(--color-text-dark);
  box-shadow: var(--shadow-card);
}

/* ===============================
   Tooltip
   =============================== */

.ant-tooltip-inner {
  background-color: var(--color-bg-dark);
  color: var(--color-text-white);
}

.ant-tooltip-arrow-content {
  background-color: var(--color-bg-dark);
}

/* ===============================
   Avatar, Badge, Tag
   =============================== */

.ant-avatar {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

.ant-badge-count,
.ant-badge-dot {
  background-color: var(--color-primary);
}

.ant-tag-has-color,
.ant-badge-status-processing,
.ant-badge-status-success {
  background-color: var(--color-primary);
}

/* ===============================
   UploadImage (picture-card) – ajustar a ancho completo y tema
   =============================== */

.upload-image-wrapper .ant-upload.ant-upload-select-picture-card {
  width: 100% !important;
  height: 100% !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  border: none !important;
  background-color: transparent !important;
}

/* Texto e ícono internos del Upload respetando el tema */
.upload-image-wrapper .ant-upload .ant-upload-text,
.upload-image-wrapper .ant-upload .ant-upload-text span {
  color: var(--color-primary) !important;
}

.upload-image-wrapper .ant-upload .ant-upload-icon .anticon {
  color: var(--color-primary) !important;
}

/* ===============================
   WasteFields - Modal redondeado
   =============================== */

.waste-modal .ant-modal-content {
  border-radius: 12px;
  overflow: hidden;
}

/* ===============================
   Calendar - Actives (assets) pantalla
   =============================== */

.assets-calendar .ant-picker-content thead {
  display: none;
}

@media (max-width: 400px) {
  .assets-calendar {
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .assets-calendar .ant-picker-body {
    width: 600px;
  }
}

.assets-calendar .ant-picker-calendar-date-content {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f0f0f0;
}

.assets-calendar .ant-picker-calendar-date {
  text-align: center;
}