/* Ícones do Material Design */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/icons.woff2') format('woff2');
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

/* Fontes de Texto (Inter e Manrope) */
@font-face { font-family: 'Inter'; font-weight: 400; src: url('../fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 700; src: url('../fonts/Inter-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-weight: 700; src: url('../fonts/Manrope-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-weight: 800; src: url('../fonts/Manrope-ExtraBold.ttf') format('truetype'); }

/* ==========================================================================
   POLISH DO SISTEMA DE DESIGN (IMPECCABLE CRAFT FLOOR)
   ========================================================================== */

/* 1. Seleção de Texto Temática */
::selection {
  background-color: #0058be;
  color: #ffffff;
}

/* 2. Barra de Rolagem Moderna e Discreta */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

/* 3. Números Tabulares para Valores Monetários e Datas */
.tabular-nums, .font-mono, td, th {
  font-variant-numeric: tabular-nums;
}

/* 4. Anel de Foco Acessível e Suave */
:focus-visible {
  outline: 2px solid #0058be;
  outline-offset: 2px;
}

/* 5. Elevação e Sombras Suaves (Ghost Shadows) */
.ghost-shadow {
  box-shadow: 0 4px 20px -2px rgba(9, 20, 38, 0.04), 0 2px 6px -1px rgba(9, 20, 38, 0.02);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 6. Overlays de Modal */
.modal-overlay {
  background: rgba(9, 20, 38, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* 7. Silhueta do Veículo e Mapa de Avarias */
.car-part {
  cursor: pointer;
  transition: all 0.2s ease;
  fill: #f8fafc;
  stroke: #94a3b8;
  stroke-width: 1.5;
}
.car-part:hover {
  fill: #dbeafe;
  stroke: #2563eb;
  stroke-width: 2;
}
.car-part.selected {
  fill: #fee2e2 !important;
  stroke: #ef4444 !important;
  stroke-width: 2.5;
}

/* 8. Toast Notifier com Countdown */
.toast-undo {
  animation: slideUpToast 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes slideUpToast {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.toast-progress {
  animation: toastTimer 10s linear forwards;
}
@keyframes toastTimer {
  from { width: 100%; }
  to { width: 0%; }
}