/* TrampoClaro — Theme V5 “Aurora/Scandi” (CSS drop-in, sem alterar HTML)
   Visual: dark profundo, gradiente esmeralda/azul, vidro, cards arredondados,
   tipografia grande e suave. Faz override do Tailwind onde precisa. */

/* ===== Tokens ===== */
:root{
  --page-max: 1180px;

  --r-md: 1rem;
  --r-lg: 1.25rem;
  --r-xl: 1.75rem;
  --r-xxl: 2rem;

  --shadow: 0 14px 40px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.25);
  --shadow-xl: 0 50px 120px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.35);

  /* Paleta “Scandi” (noite de aurora) */
  --bg: #0b1416;          /* dark petróleo */
  --bg-2:#0d1a1d;         /* painéis */
  --surface: rgba(14,27,30,.72); /* vidro */
  --ink: #e8f0f2;         /* texto */
  --muted:#a9bcc2;        /* texto secundário */
  --border: rgba(120,180,190,.22);

  /* Acentos */
  --teal: #22d3a3;
  --green:#34d399;
  --blue: #60a5fa;
  --indigo:#4f46e5;
  --amber:#f59e0b;

  /* Gradientes */
  --grad-hero:
    radial-gradient(1200px 700px at 20% -10%, rgba(56,189,248,.18), transparent 40%),
    radial-gradient(1100px 620px at 110% 10%, rgba(52,211,153,.20), transparent 50%),
    linear-gradient(180deg, #0a1315 0%, #071012 100%);
  --grad-cta: linear-gradient(135deg, #38bdf8 0%, #2563eb 55%);
  --grad-cta-green: linear-gradient(135deg, #34d399 0%, #0ea5e9 60%);
  --glass: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

/* ===== Base global (dark-first e overrides do Tailwind) ===== */
html{ color-scheme:dark; }
*{ -webkit-tap-highlight-color:transparent; }
body{
  margin:0; color:var(--ink);
  background: var(--grad-hero); background-color: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size: 17px; line-height: 1.7;
}
main, .max-w-7xl, .container-xl{ max-width: var(--page-max) !important; margin: 0 auto; padding: 0 20px; }
h1,h2,h3{ letter-spacing: -.02em; }
p, .text-slate-400{ color: var(--muted) !important; }

/* Corrige “fundo branco” de utilitários */
.bg-white, .bg-slate-50, .bg-slate-100 { background-color: transparent !important; }
.text-black, .text-slate-900 { color: var(--ink) !important; }

/* ===== Header (frosted + borda) ===== */
.app-header, header.sticky, header[class*="sticky"]{
  position: sticky; top:0; z-index:60;
  backdrop-filter: saturate(160%) blur(12px);
  background: linear-gradient(180deg, rgba(9,17,19,.85), rgba(9,17,19,.55));
  border-bottom: 1px solid var(--border);
}
.app-header a, header nav a{ color: rgba(232,240,242,.86); }
.app-header a:hover, header nav a:hover{ color:#fff; }
.app-header .brand, header a[href="/"]{ font-weight:900; letter-spacing:.2px; color:#fff !important; }

/* ===== Botões ===== */
.btn, .btn-outline, .btn-primary, a.btn, button.btn,
a[href="/publicar/"], .app-header a[href="/publicar/"]{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.15rem; border-radius:999px; font-weight:700;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--ink);
  transition: transform .15s, box-shadow .25s, background .2s, border-color .2s, filter .2s;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-primary, a.btn-primary, a[href="/publicar/"]{
  color:#fff !important; border-color: transparent !important;
  background: var(--grad-cta) !important;
  box-shadow: 0 14px 36px rgba(37,99,235,.35), 0 0 0 1px rgba(99,102,241,.1) inset;
}
.btn-outline{ background: rgba(255,255,255,.06); }

/* ===== Inputs / Form ===== */
.input, input[type="text"], input[type="search"], input[type="email"], input[type="number"],
select, .select, textarea, .textarea{
  width:100%; border:1px solid var(--border) !important;
  border-radius: 1.1rem !important; padding: 1rem 1.15rem !important;
  background: var(--glass) !important; color: var(--ink) !important;
}
input::placeholder, textarea::placeholder{ color: rgba(232,240,242,.55); }

/* ===== Hero / Badges ===== */
.hero{ display:grid; grid-template-columns: 1.15fr .85fr; gap:3rem; align-items:center; }
@media (max-width:1024px){ .hero{ grid-template-columns:1fr; } }
.section-accent, .badge{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:800;
  padding:.5rem .95rem; border-radius:999px; color:#e7fff7;
  background: linear-gradient(180deg, rgba(52,211,153,.35), rgba(56,189,248,.22));
  border:1px solid rgba(52,211,153,.35);
  box-shadow: inset 0 0 26px rgba(56,189,248,.18), 0 10px 28px rgba(0,0,0,.25);
}
.gradient-word{ background: linear-gradient(90deg,#b9f6e8, #6ee7b7 40%, #60a5fa 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gradient-word-2{ background: linear-gradient(90deg,#93c5fd, #60a5fa 50%, #2563eb); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===== Cards (vidro) ===== */
.card{
  background: var(--glass) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow) !important;
}
.card-hover{ transition: transform .25s ease, box-shadow .35s ease, border-color .2s; }
.card-hover:hover{ transform: translateY(-2px); box-shadow: var(--shadow-xl); border-color: rgba(120,200,210,.35); }

/* ===== Lista de Vagas ===== */
.job-card .title{ font-weight: 800; font-size: 1.12rem; }
.job-card .meta{ color: var(--muted); font-size: .92rem; }
.pill, .job-card .pill{
  padding:.38rem .72rem; border-radius:999px; border:1px solid var(--border); font-size:.75rem;
  background: rgba(255,255,255,.05);
}
.salary{ font-weight:800; color:#a0e8ff; letter-spacing:.2px; }

/* ===== Skeleton ===== */
.skeleton{
  position:relative; overflow:hidden; border-radius: var(--r-xl);
  min-height: 6rem; border:1px solid var(--border); background: rgba(255,255,255,.05);
}
.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ to{ transform: translateX(100%); } }

/* ===== Prosa (descrição) ===== */
.prose{ line-height:1.75; }
.prose h2{ font-weight:900; margin:1.2rem 0 .5rem; }
.prose ul{ padding-left:1.1rem; list-style: disc; }

/* ===== Links / tipografia ===== */
a{ color:#cfe9ff; transition: color .15s, opacity .15s; }
a:hover{ color:#eaf5ff; }

/* ===== Footer ===== */
.footer, footer{
  border-top: 1px solid var(--border);
  margin-top: 4rem; padding: 3rem 0;
  background: linear-gradient(180deg, rgba(10,20,22,.25), rgba(10,20,22,.38));
}
footer .text-slate-400, .footer .text-slate-400{ color: var(--muted) !important; }

/* ===== Foco/Acessibilidade ===== */
:focus-visible{ outline:3px solid rgba(136,227,206,.6); outline-offset:2px; border-radius:.75rem; }

/* ===== Responsivo ===== */
@media (max-width:640px){
  .hero{ gap:2rem; }
  .btn, .btn-outline, .btn-primary{ padding:.85rem 1rem; }
}

/* ===== Pequenos toques de “site bonito” ===== */
main > section:first-of-type{ padding-top: 2.5rem; }
main > section:not(:first-of-type){ margin-top: 2rem; }


/* === LIGHT MODE (final) === */
html:not(.dark){
  --bg:#ffffff; --bg-2:#f5f7fb; --surface:#ffffff;
  --ink:#0b0f14; --muted:#334155; --border:rgba(0,0,0,.12);
  --grad-hero:linear-gradient(180deg,#fff 0%,#eff4f9 100%);
  --glass:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.05));
  --shadow:0 8px 24px rgba(2,6,23,.08), 0 1px 2px rgba(2,6,23,.04);
}
html:not(.dark) .app-header{
  background:linear-gradient(180deg,rgba(2,6,23,.06),rgba(255,255,255,0));
  border-bottom:1px solid var(--border);
}
html:not(.dark) .app-header .brand,
html:not(.dark) .app-header nav a{ color:var(--ink) !important; }
html:not(.dark) footer, html:not(.dark) footer a{ color:var(--ink) !important; }
html:not(.dark) select, html:not(.dark) .select{ background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--border)!important; }
html:not(.dark) .card, html:not(.dark) .job-card, html:not(.dark) .input, html:not(.dark) textarea{ background:var(--surface)!important;color:var(--ink)!important;border-color:var(--border)!important; }
/* Força dropdown escuro para selects no dark mode */
select.select,
select.select option {
  background-color: #0f172a !important; /* fundo dark */
  color: #e2e8f0 !important;           /* texto claro */
}

/* Firefox */
@-moz-document url-prefix() {
  select.select {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
  }
  select.select option {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
  }
}

/* Ajuste do highlight */
select.select option:checked,
select.select option:hover {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

/* =========================================================
   ESTILO GLOBAL DOS INPUTS — APPLE CLEAN (FUNDO BRANCO)
   ========================================================= */
input,
select,
textarea {
  background: #ffffff !important;     /* FUNDO BRANCO */
  color: #0b0f14 !important;          /* TEXTO PRETO */
  border: 1px solid #d1d5db !important; /* BORDA CINZA SUAVE */
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* Placeholders legíveis */
input::placeholder,
textarea::placeholder {
  color: #6b7280 !important; /* CINZA BONITO */
}

/* Remove estilos escuros que estavam vindo do tema */
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: #3b82f6 !important; /* Azul suave ao focar */
  background: #ffffff !important;
  color: #0b0f14 !important;
}
/* ============================================
   ESTILO GLOBAL DO SELECT — PADRÃO APPLE CLEAN
   ============================================ */
select {
  background: #ffffff !important;      /* fundo branco */
  color: #0b0f14 !important;           /* texto preto */
  border: 1px solid #d1d5db !important;/* borda suave */
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Ícone da seta do select (mais clean) */
select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='12' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M2 4l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

/* MENU DROPDOWN DO SELECT */
select option {
  background: #ffffff !important;   /* fundo branco */
  color: #0b0f14 !important;        /* texto preto */
  padding: 8px 12px;
  font-size: 15px !important;
}

/* Hover nas opções */
select option:hover,
select option:focus {
  background: #e5e7eb !important;  /* cinza claro */
}