/**
 * 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
 */

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

.mdl-button {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: var(--transition-base);
}

.mdl-button--raised,
.mdl-button--fab {
  background-color: var(--color-primary) !important;
  color: white !important;
}

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

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

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

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

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

.mdl-button--colored {
  color: var(--color-primary);
}

/* ============================================================
   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);
}