/*
 * Tema macOS CLEAN — override do styles.css base.
 * Vibe: macOS Big Sur / Sonoma. Cantos arredondados, glassmorphism, sombras
 * difusas e suaves, transicoes cubic-bezier, espaçamento confortavel, paleta
 * Stone aplicada como accent sobre superficies translucidas.
 * Paleta canonica: stone-cores.css (nao redefine).
 */

:root {
  --green-500: var(--stone-verde-escuro-2);
  --green-700: var(--stone-verde-escuro);
  --green-900: var(--stone-verde-escuro);
  --gray-50:  rgba(245, 247, 245, 1);
  --gray-100: rgba(240, 244, 240, 1);
  --gray-200: rgba(225, 230, 225, .65);
  --gray-300: rgba(190, 200, 190, .55);
  --gray-600: #5b6760;
  --gray-700: #38423b;
  --gray-900: #0e110e;
  --mac-radius: 14px;
  --mac-radius-sm: 10px;
  --mac-shadow: 0 1px 2px rgba(15, 23, 18, .04), 0 8px 24px rgba(15, 23, 18, .06);
  --mac-shadow-hover: 0 2px 4px rgba(15, 23, 18, .06), 0 16px 40px rgba(15, 23, 18, .09);
  /* Off-white puxado pro cinza, com gradiente bem sutil pra nao ficar chapado.
     Sem tons verdes no fundo: a Stone vem so nos accents (botoes, pills, focus). */
  --mac-bg-grad: radial-gradient(at 50% -20%, rgba(255, 255, 255, .55), transparent 60%),
                 radial-gradient(at 85% 100%, rgba(20, 25, 22, .035), transparent 55%),
                 #f3f4f3;
}

html { background: var(--mac-bg-grad); background-attachment: fixed; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  background: transparent;
  color: var(--gray-900);
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
}

/* Topbar mantida igual ao tema atual (preto Stone + nav-item verde escuro).
   Nao sobreescreve .topbar, .nav-item, .topbar-brand: o styles.css base assume. */

/* Cards: glassmorphism leve. */
.k-card, .v-card, .stage-card, .auth-card {
  background: rgba(255, 255, 255, .78) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255, 255, 255, .6) !important;
  border-radius: var(--mac-radius) !important;
  box-shadow: var(--mac-shadow) !important;
  transition: transform .22s cubic-bezier(.2,.7,.3,1),
              box-shadow .22s cubic-bezier(.2,.7,.3,1);
}
.k-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--mac-shadow-hover) !important;
}
.k-card.stuck { border-left: none !important; }
.k-card.stuck::before {
  content: "";
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 32px; border-radius: 4px;
  background: var(--stone-vermelho); opacity: .8;
}
.k-card { position: relative; }

/* Colunas kanban: superficies suaves. */
.k-col {
  background: rgba(255, 255, 255, .55) !important;
  backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid rgba(0, 70, 30, .05) !important;
  border-radius: var(--mac-radius) !important;
  box-shadow: var(--mac-shadow) !important;
}
.k-col-head {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 70, 30, .06);
  padding: 14px 18px;
}
.k-col-count {
  background: rgba(0, 70, 30, .08) !important;
  color: var(--stone-verde-escuro);
  border-radius: 999px;
  font-weight: 600;
  padding: 1px 9px;
}

/* TPV com peso e tracking macOS. */
.k-card-tpv {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--stone-verde-escuro);
}

/* Botoes capsulados. */
.btn-primary {
  background: linear-gradient(180deg, var(--stone-verde) 0%, var(--stone-verde-escuro-2) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 4px 12px rgba(0,125,0,.18) !important;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .18s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 6px 18px rgba(0,125,0,.25) !important;
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: rgba(255,255,255,.6) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 70, 30, .08) !important;
  border-radius: 999px !important;
  color: var(--gray-700) !important;
}
.btn-ghost:hover { background: rgba(255,255,255,.9) !important; }

/* Pills/badges: cantos arredondados + estetica glass (tons mais lavados que o
   original saturado, com blur leve). Cada tier mantem cor identificavel mas com
   saturacao reduzida e transparencia, evitando visual "infantil" na tabela
   Resumo por Distrito e similares. */
.cell-pill, .k-badge, .cnpj-flag {
  border-radius: 999px !important;
  padding: 2px 9px !important;
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.6) !important;
}

/* Per-tier: backgrounds lavados (alpha baixo) sobre branco translucido. */
.cell-pill.st-slate   { background: rgba(148,163,184,.14) !important; color: #475569 !important; border-color: rgba(148,163,184,.22) !important; }
.cell-pill.st-amber   { background: rgba(245,158,11,.12) !important; color: #b45309 !important; border-color: rgba(245,158,11,.22) !important; }
.cell-pill.st-orange  { background: rgba(249,115,22,.12) !important; color: #c2410c !important; border-color: rgba(249,115,22,.22) !important; }
.cell-pill.st-purple  { background: rgba(168,85,247,.12) !important; color: #7e22ce !important; border-color: rgba(168,85,247,.22) !important; }
.cell-pill.st-emerald { background: rgba(0,125,0,.10) !important; color: var(--stone-verde-escuro) !important; border-color: rgba(0,125,0,.20) !important; }
.cell-pill.st-cyan    { background: rgba(6,182,212,.12) !important; color: #0e7490 !important; border-color: rgba(6,182,212,.22) !important; }
.cell-pill.st-blue    { background: rgba(59,130,246,.12) !important; color: #1d4ed8 !important; border-color: rgba(59,130,246,.22) !important; }
.cell-pill.st-pink    { background: rgba(236,72,153,.12) !important; color: #be185d !important; border-color: rgba(236,72,153,.22) !important; }
.cell-pill.st-indigo  { background: rgba(99,102,241,.12) !important; color: #4338ca !important; border-color: rgba(99,102,241,.22) !important; }
.cell-pill.st-yellow  { background: rgba(234,179,8,.12) !important; color: #a16207 !important; border-color: rgba(234,179,8,.22) !important; }

/* Numero principal no pill (cnt) mantem peso pra continuar legivel. */
.cell-pill strong { font-weight: 600; }
.cell-pill .avg { color: rgba(0,0,0,.45) !important; }

/* Inputs estilo macOS: cinza suave com foco verde. */
input, select, textarea {
  background: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(0, 70, 30, .08) !important;
  border-radius: var(--mac-radius-sm) !important;
  color: var(--gray-900) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--stone-verde) !important;
  box-shadow: 0 0 0 4px rgba(0, 215, 0, .15) !important;
}

/* Seg buttons estilo segmented control iOS. */
.seg {
  background: rgba(0, 70, 30, .06) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 2px !important;
  gap: 0 !important;
}
.seg-btn {
  background: transparent !important;
  color: var(--gray-700) !important;
  border: none !important;
  border-radius: 8px !important;
  transition: all .18s cubic-bezier(.2,.7,.3,1);
  font-weight: 500;
}
.seg-btn.active {
  background: #ffffff !important;
  color: var(--stone-verde-escuro) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
}

/* Modais flutuantes com sombra macOS. */
.modal-overlay {
  background: rgba(15, 23, 18, .18) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-content {
  background: rgba(255, 255, 255, .92) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(15, 23, 18, .22), 0 0 0 1px rgba(255,255,255,.6) inset !important;
  border: none !important;
}

/* Tabelas leves. */
th {
  background: transparent;
  color: var(--gray-600);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(0,70,30,.06);
}
td { border-bottom: 1px solid rgba(0,70,30,.04); }

/* Foguinho e calendar com brilho macOS. */
.k-flame { color: var(--gray-300); transition: color .15s ease, transform .15s ease; }
.k-flame.on { color: var(--stone-laranja); filter: drop-shadow(0 1px 4px rgba(255, 130, 50, .35)); }
.k-cal { color: var(--stone-azul); filter: drop-shadow(0 1px 2px rgba(35, 80, 150, .25)); }

/* Theme switcher capsulado. */
.theme-switcher {
  border: 1px solid rgba(0,70,30,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
}