/**
 * GALES-13220: Emergency Layout - Bridge MDL → Tailwind
 * 
 * Este arquivo mapeia classes Material Design Lite (MDL) para equivalentes Tailwind
 * Permite que componentes legados usando MDL adotem o visual do Design System
 * sem necessidade de refatoração de HTML
 * 
 * Estratégia: Sobrescrever apenas cores e estilos visuais básicos
 * NÃO alterar spacing, typography ou layout estrutural
 */

/* ============================================================
   GLOBAL: remover underline de todos os botões do sistema
   ============================================================ */

a[class*="btn"],
a[class*="btn"]:hover,
a[class*="mdl-button"],
a[class*="mdl-button"]:hover,
a[class*="listing-layout__btn"],
a[class*="listing-layout__btn"]:hover {
  text-decoration: none !important;
}

/* ============================================================
   MDL BUTTONS → Tailwind Design System
   ============================================================ */

/* Remover anel de foco de todos os botões */
.mdl-button:focus,
.mdl-button:focus-visible,
.btn:focus,
.btn:focus-visible,
.listing-layout__btn:focus,
.listing-layout__btn:focus-visible,
button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Base MDL Button - Arenito structure */
.mdl-button {
  font-family: var(--font-body, 'Inter'), sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  height: 40px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  transition: all 200ms ease-in-out !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.mdl-button:hover,
a.mdl-button,
a.mdl-button:hover,
a.mdl-button:active,
a.mdl-button:focus,
a[class*="mdl-button"],
a[class*="mdl-button"]:hover {
  text-decoration: none !important;
}

/* Filled (raised) - Arenito */
.mdl-button--raised,
.mdl-button--fab {
  background-color: var(--color-primary) !important;
  color: var(--color-neutral-100, #F6F6F9) !important;
  border: none !important;
  box-shadow: none !important;
}

.mdl-button--raised:hover,
.mdl-button--fab:hover {
  background-color: var(--color-primary-hover) !important;
  box-shadow: none !important;
}

/* Accent - Arenito filled */
.mdl-button--accent {
  background-color: var(--color-primary) !important;
  color: var(--color-neutral-100, #F6F6F9) !important;
}

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

/* Primary - Arenito filled */
.mdl-button--primary {
  background-color: var(--color-primary) !important;
  color: var(--color-neutral-100, #F6F6F9) !important;
}

.mdl-button--primary:hover {
  background-color: var(--color-primary-hover) !important;
}

/* Colored (text button) */
.mdl-button--colored {
  color: var(--color-primary) !important;
}

/* MDL button disabled - Arenito: sem opacity */
.mdl-button[disabled],
.mdl-button--raised[disabled] {
  background-color: var(--color-neutral-300, #E6E8EF) !important;
  color: var(--color-neutral-500, #7A839F) !important;
  opacity: 1 !important;
}

/* MDL button sem raised (ghost/flat) - exclui listing-layout buttons */
.mdl-button:not(.mdl-button--raised):not(.mdl-button--fab):not(.mdl-button--primary):not(.mdl-button--accent):not([class*="listing-layout"]) {
  background-color: transparent !important;
  color: var(--color-text-primary, #12151F) !important;
}

.mdl-button:not(.mdl-button--raised):not(.mdl-button--fab):not(.mdl-button--primary):not(.mdl-button--accent):not([class*="listing-layout"]):hover {
  background-color: var(--color-bg-tertiary, #ECEDF2) !important;
}

/* ============================================================
   LISTING LAYOUT BUTTONS - override final
   ============================================================ */

/* ============================================================
   .btn overrides - Arenito (último a carregar, vence tudo)
   ============================================================ */

.btn {
  height: 40px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-family: var(--font-body, 'Inter'), sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  text-decoration: none !important;
  text-transform: none !important;
}

.btn:hover {
  text-decoration: none !important;
}

.btn-outline-light {
  background-color: transparent !important;
  color: var(--color-text-primary, #12151F) !important;
  border: 1px solid var(--color-border, #CED3E2) !important;
}

.btn-outline-light:hover {
  background-color: var(--color-neutral-200, #ECEDF2) !important;
  color: var(--color-text-primary, #12151F) !important;
  border-color: var(--color-border, #CED3E2) !important;
}

.btn-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-neutral-100, #F6F6F9) !important;
  border: none !important;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover) !important;
  color: var(--color-neutral-100, #F6F6F9) !important;
}

.btn-danger {
  background-color: var(--color-danger) !important;
  color: var(--color-neutral-100, #F6F6F9) !important;
  border: none !important;
}

.btn-danger:hover {
  background-color: var(--color-danger-dark) !important;
  color: var(--color-neutral-100, #F6F6F9) !important;
}

/* Listing layout buttons - Arenito */
.listing-layout__btn--primary {
  background: var(--color-primary) !important;
  color: var(--color-neutral-100, #F6F6F9) !important;
}

.listing-layout__btn--primary:hover,
.listing-layout__btn--primary:focus,
.listing-layout__btn--primary:active {
  background: var(--color-primary-hover) !important;
  color: var(--color-neutral-100, #F6F6F9) !important;
}

.listing-layout__btn--outline {
  color: var(--color-text-primary, #12151F) !important;
}

.listing-layout__btn--outline:hover,
.listing-layout__btn--outline:focus,
.listing-layout__btn--outline:active {
  background: var(--color-bg-tertiary, #ECEDF2) !important;
  color: var(--color-text-primary, #12151F) !important;
  border-color: var(--color-border, #CED3E2) !important;
}

/* Desabilitar MDL ripple/overlay em botões do listing */
.listing-layout__btn .mdl-ripple,
.listing-layout__btn .mdl-button__ripple-container {
  display: none !important;
}

/* Garantir que nenhum overlay do MDL interfira */
.listing-layout__btn::before,
.listing-layout__btn::after {
  display: none !important;
}

/* ============================================================
   MDL CARDS → Tailwind Design System
   ============================================================ */

.mdl-card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.mdl-card__title {
  color: var(--color-text-primary);
}

.mdl-card__supporting-text {
  color: var(--color-text-secondary);
}

.mdl-card__actions {
  border-top: 1px solid var(--color-border-light);
}

/* ============================================================
   MDL TEXTFIELDS → Tailwind Design System
   ============================================================ */

.mdl-textfield__input {
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
  background-color: var(--color-bg-secondary) !important;
}

.mdl-textfield__input:focus {
  border-color: var(--color-primary) !important;
}

.mdl-textfield__label {
  color: var(--color-text-muted) !important;
}

.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
  color: var(--color-primary) !important;
}

.mdl-textfield__error {
  color: var(--color-danger) !important;
}

/* ============================================================
   MDL TABLES → Tailwind Design System
   ============================================================ */

.mdl-data-table {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
}

.mdl-data-table thead {
  background-color: var(--color-bg-tertiary);
}

.mdl-data-table th {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  border-bottom: 2px solid var(--color-border);
}

.mdl-data-table td {
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-light);
}

.mdl-data-table tbody tr:hover {
  background-color: var(--color-bg-tertiary);
}

/* ============================================================
   MDL CHIPS → Tailwind Design System
   ============================================================ */

.mdl-chip {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border-radius: var(--radius-full);
}

.mdl-chip__text {
  color: var(--color-text-primary);
}

.mdl-chip--contact {
  background-color: var(--color-primary);
  color: white;
}

/* ============================================================
   MDL PROGRESS → Tailwind Design System
   ============================================================ */

.mdl-progress {
  background-color: var(--color-bg-tertiary);
}

.mdl-progress > .progressbar {
  background-color: var(--color-primary) !important;
}

.mdl-progress > .bufferbar {
  background-color: var(--color-bg-tertiary);
}

.mdl-progress > .auxbar {
  background-color: var(--color-primary-hover);
}

/* ============================================================
   MDL SPINNER → Tailwind Design System
   ============================================================ */

.mdl-spinner__layer-1 {
  border-color: var(--color-primary);
}

.mdl-spinner__layer-2 {
  border-color: var(--color-accent-300);
}

.mdl-spinner__layer-3 {
  border-color: var(--color-success);
}

.mdl-spinner__layer-4 {
  border-color: var(--color-warning);
}

/* ============================================================
   MDL SWITCHES → Tailwind Design System
   ============================================================ */

.mdl-switch.is-checked .mdl-switch__track {
  background-color: var(--color-primary) !important;
}

.mdl-switch.is-checked .mdl-switch__thumb {
  background-color: var(--color-primary) !important;
}

.mdl-switch__track {
  background-color: var(--color-neutral-400);
}

/* ============================================================
   MDL RADIO → Tailwind Design System
   ============================================================ */

.mdl-radio.is-checked .mdl-radio__outer-circle {
  border-color: var(--color-primary) !important;
}

.mdl-radio.is-checked .mdl-radio__inner-circle {
  background-color: var(--color-primary) !important;
}

.mdl-radio__outer-circle {
  border-color: var(--color-border);
}

/* ============================================================
   MDL CHECKBOX → Tailwind Design System
   ============================================================ */

.mdl-checkbox.is-checked .mdl-checkbox__box-outline {
  border-color: var(--color-primary) !important;
}

.mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
  background-color: var(--color-primary) !important;
}

.mdl-checkbox__box-outline {
  border-color: var(--color-border);
}

/* ============================================================
   MDL MENU → Tailwind Design System
   ============================================================ */

.mdl-menu__container {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.mdl-menu__item {
  color: var(--color-text-primary);
}

.mdl-menu__item:hover {
  background-color: var(--color-bg-tertiary);
}

.mdl-menu__item--full-bleed-divider {
  border-bottom: 1px solid var(--color-border-light);
}

/* ============================================================
   MDL TOOLTIP → Tailwind Design System
   ============================================================ */

.mdl-tooltip {
  background-color: var(--color-neutral-800);
  color: white;
  border-radius: var(--radius-md);
  font-size: var(--font-size-p5);
}

/* ============================================================
   MDL SNACKBAR → Tailwind Design System
   ============================================================ */

.mdl-snackbar {
  background-color: var(--color-neutral-800);
  color: white;
  border-radius: var(--radius-md);
}

.mdl-snackbar__action {
  color: var(--color-accent-300);
}