/* Diogo Auto Service — dark theme */

/* ─── Superfícies: bg-white → card escuro ──────────────────────────── */
.bg-white { background-color: #1c1c1c !important; }

/* ─── Inputs sem classe de background explícita ──────────────────── */
input, textarea, select {
  background-color: #171717;
  color: #e8e8e8;
  color-scheme: dark;
}

/* ─── Sidebar drawer (mobile) ──────────────────────────────────────── */
@media (max-width: 1023px) {
  #sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
  }
  #sidebar.sidebar-open { transform: translateX(0); }
}

/* ─── Scrollbar ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f0f0f; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #484848; }

/* ─── Transições ─────────────────────────────────────────────────────── */
aside a { transition: background 0.15s, color 0.15s; }
#toast  { transition: opacity 0.3s; }

/* ─── Tabelas clicáveis ─────────────────────────────────────────────── */
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background-color: #252525 !important; }

/* ─── Spinner ────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block; width: 1.25rem; height: 1.25rem;
  border: 2px solid rgba(255,255,255,0.15); border-top-color: #fff;
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Steps / Ficha ──────────────────────────────────────────────────── */
.step { display: none; }
.step.active { display: block; }
.step-bar-item { flex: 1; height: 4px; border-radius: 2px; background: #2d2d2d; transition: background 0.3s; }
.step-bar-item.done { background: #DC2626; }

/* ─── Placeholder ────────────────────────────────────────────────────── */
::placeholder { color: #454545; opacity: 1; }

/* ─── Select options ─────────────────────────────────────────────────── */
select option { background-color: #1c1c1c; color: #e8e8e8; }

/* ─── Badges de status — versão dark ─────────────────────────────────── */
.bg-green-100    { background-color: rgba(22,163,74,0.15)  !important; }
.text-green-800  { color: #4ade80 !important; }
.text-green-700  { color: #4ade80 !important; }
.text-green-600  { color: #86efac !important; }
.text-green-500  { color: #86efac !important; }
.bg-green-50     { background-color: rgba(22,163,74,0.1)   !important; }
.border-green-200{ border-color: rgba(22,163,74,0.25)      !important; }

.bg-blue-100     { background-color: rgba(59,130,246,0.15) !important; }
.text-blue-800   { color: #93c5fd !important; }
.text-blue-700   { color: #93c5fd !important; }

.bg-yellow-100   { background-color: rgba(234,179,8,0.15)  !important; }
.text-yellow-800 { color: #fde047 !important; }
.text-yellow-700 { color: #fde047 !important; }

.bg-red-50       { background-color: rgba(220,38,38,0.12)  !important; }
.bg-red-100      { background-color: rgba(220,38,38,0.15)  !important; }
.border-red-100  { border-color: rgba(220,38,38,0.3)       !important; }
.border-red-200  { border-color: rgba(220,38,38,0.3)       !important; }
.text-red-600    { color: #f87171 !important; }
.text-red-500    { color: #f87171 !important; }

/* ─── Dropdown de busca ─────────────────────────────────────────────── */
#dropdown-pecas { background-color: #1c1c1c; border-color: #303030; }

/* ─── Balão WhatsApp dark ───────────────────────────────────────────── */
.wpp-bubble {
  background: #1a3a2a;
  border-radius: 0 12px 12px 12px;
  position: relative;
}
.wpp-bubble::before {
  content: '';
  position: absolute;
  top: 0; left: -8px;
  border: 8px solid transparent;
  border-top-color: #1a3a2a;
  border-right-color: #1a3a2a;
}

/* ─── Badge animado ─────────────────────────────────────────────────── */
.badge-enviado { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

/* ─── Focus rings ────────────────────────────────────────────────────── */
input:focus, textarea:focus, select:focus { outline: none; }