/* ===========================
   Disputa de Motoristas — UI
   =========================== */

/* Paleta e tokens */
:root{
  /* cores base (dark) */
  --bg:#0f1216;
  --card:#161b22;
  --line:#273041;
  --fg:#e8eef4;
  --muted:#9aa6b2;

  /* semânticas */
  --acc:#2dd4bf;
  --acc-ink:#022a24;         /* cor do texto sobre o botão */
  --ok:#16a34a;
  --warn:#f59e0b;
  --danger:#ef4444;

  /* raio, sombra, espaço e animação */
  --r:12px;
  --shadow:0 6px 18px rgba(0,0,0,.22);
  --sp-1:6px;
  --sp-2:10px;
  --sp-3:14px;
  --sp-4:20px;
  --dur:.15s;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:var(--bg);
  color:var(--fg);
  padding:12px;
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--acc);text-decoration:none}
a:hover{opacity:.9}

/* Layouts */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  margin-bottom:10px;
}

.grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.col{display:flex;flex-direction:column;gap:8px}

/* Cartões */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--sp-3);
  margin-bottom:10px;
  box-shadow:var(--shadow);
}
.card:hover{border-color:#344155}

/* Badges & helpers */
.badge{
  display:inline-block;padding:4px 8px;border:1px solid var(--line);
  border-radius:8px;background:#0b0f14;color:var(--fg)
}
.badge.ok{border-color:color-mix(in oklab, var(--ok), #000 40%);color:var(--ok)}
.badge.warn{border-color:color-mix(in oklab, var(--warn), #000 40%);color:var(--warn)}
.badge.danger{border-color:color-mix(in oklab, var(--danger), #000 40%);color:var(--danger)}
.muted{color:var(--muted)}
.barra{display:flex;justify-content:space-between;align-items:center;margin:8px 0;color:var(--muted)}

/* Botões */
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--acc);
  color:var(--acc-ink);
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:transform var(--dur),opacity var(--dur),background var(--dur),border-color var(--dur);
}
.btn:hover{opacity:.95}
.btn:active{transform:translateY(1px)}
.btn.small{padding:6px 10px}

.btn.ghost{
  background:transparent;color:var(--fg);
  border-color:var(--line);
}
.btn.ghost:hover{background:#0b0f14}

.btn.secondary{
  background:#1d2634;color:var(--fg);
  border-color:#2a364a;
}

.btn:disabled,
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* Formulários */
label{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
input,select,button,textarea{
  padding:10px;border-radius:8px;border:1px solid var(--line);
  background:#0b0f14;color:var(--fg);width:100%;
  outline:none;transition:border-color var(--dur),box-shadow var(--dur);
}
input::placeholder,textarea::placeholder{color:#6d788a}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  border-color:color-mix(in oklab, var(--acc), #000 35%);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--acc), transparent 75%);
}

/* Chips (Uber/99/InDriver/Outros) */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.chip{
  padding:6px 10px;border:1px solid var(--line);
  border-radius:999px;background:#0b0f14;color:var(--fg);
  cursor:pointer;transition:background var(--dur),border-color var(--dur),color var(--dur);
}
.chip:hover{background:#0e141d}
.chip.active{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}

/* Tabelas */
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;margin-top:8px}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
thead th{background:#111823;position:sticky;top:0;z-index:1}
tbody tr:nth-child(odd){background:#121720}
tbody tr:hover{background:#151c27}

/* Alerts dentro do card (auth e mensagens) */
.card .alert{
  background:#2b1e1e;border:1px solid #7f1d1d;color:#fca5a5;
  padding:10px;border-radius:8px;margin-bottom:8px
}

/* Página de auth centralizada */
body.auth{display:grid;place-items:center;min-height:100vh;padding:20px}

/* Acessibilidade */
:focus-visible{
  outline:2px solid color-mix(in oklab, var(--acc), #000 40%);
  outline-offset:2px;border-radius:8px
}
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* Mobile helpers */
.sticky-bottom{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px))}
@supports(padding:max(0px)){
  .sticky-bottom{bottom:max(8px, env(safe-area-inset-bottom))}
}

/* Animação opcional respeitando o sistema */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}

/* (Opcional) Light mode futuro
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f8fb; --card:#ffffff; --line:#e5e9f2; --fg:#0a0c10; --muted:#5a6676;
    --acc:#0ea5e9; --acc-ink:#07202a;
    --shadow:0 8px 24px rgba(0,0,0,.08);
  }
}
*/