/**
 * GestorPec CRM — Tema Acrílico
 * Isolado: só aplica sob html.theme-acrylic
 * Conceito: glassmorphism sobre paisagem dusk + verde musgo
 */

/* ── Tokens ─────────────────────────────────────────────────── */
html.theme-acrylic {
  color-scheme: dark;

  --acrylic-bg-image: url("/images/acrylic-bg.jpg");
  /* fallback remoto (admin) se o asset local falhar no CSS — o deploy inclui a cópia local */
  --acrylic-blur: 28px;
  --acrylic-saturate: 140%;

  --acrylic-shell: rgba(14, 16, 18, 0.55);
  --acrylic-shell-border: rgba(255, 255, 255, 0.10);
  --acrylic-panel: rgba(22, 24, 28, 0.48);
  --acrylic-panel-strong: rgba(28, 30, 34, 0.62);
  --acrylic-sunk: rgba(8, 10, 12, 0.35);
  --acrylic-card: rgba(36, 38, 42, 0.55);
  --acrylic-card-hover: rgba(46, 48, 54, 0.65);

  --acrylic-line: rgba(255, 255, 255, 0.08);
  --acrylic-line-strong: rgba(255, 255, 255, 0.14);

  --acrylic-ink: #f5f6f7;
  --acrylic-ink-soft: rgba(255, 255, 255, 0.92);
  --acrylic-ink-faint: rgba(255, 255, 255, 0.80);

  --acrylic-accent: #3d6b56;
  --acrylic-accent-bright: #4ade80;
  --acrylic-accent-soft: rgba(61, 107, 86, 0.38);
  --acrylic-accent-glow: rgba(74, 222, 128, 0.18);

  --acrylic-ochre: #eab308;

  --acrylic-radius-shell: 1.35rem;
  --acrylic-radius-card: 0.85rem;
  --acrylic-radius-pill: 999px;

  --acrylic-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --acrylic-shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.28);

  /* Mapear tokens do app para o acrílico (sem editar design-tokens.css) */
  --paper: transparent;
  --paper-panel: var(--acrylic-panel);
  --paper-sunk: var(--acrylic-sunk);
  --ink: var(--acrylic-ink);
  --ink-soft: var(--acrylic-ink-soft);
  --ink-faint: var(--acrylic-ink-faint);
  --forest: var(--acrylic-accent-bright);
  --forest-deep: var(--acrylic-accent);
  --forest-deeper: #0a1410;
  --forest-soft: var(--acrylic-accent-soft);
  --forest-50: var(--acrylic-accent-soft);
  --forest-100: rgba(61, 107, 86, 0.45);
  --forest-200: rgba(61, 107, 86, 0.55);
  --forest-300: var(--acrylic-accent-bright);
  --forest-400: #6ee7a0;
  --forest-500: var(--acrylic-accent-bright);
  --forest-600: var(--acrylic-accent);
  --forest-700: var(--acrylic-accent-bright);
  --forest-800: #a7f3c0;
  --forest-900: #fff;
  --ochre: var(--acrylic-ochre);
  --ochre-deep: #ca8a04;
  --ochre-50: rgba(234, 179, 8, 0.12);
  --line: var(--acrylic-line);
  --line-strong: var(--acrylic-line-strong);
  --cta-primary: var(--acrylic-accent);
  --on-forest: #f5f6f7;
  --focus-ring: rgba(74, 222, 128, 0.28);
  --shadow-sm: var(--acrylic-shadow-sm);
  --shadow-md: var(--acrylic-shadow);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);
}

/* ── Backdrop paisagem ──────────────────────────────────────── */
html.theme-acrylic body {
  background: #070809 !important;
  color: var(--acrylic-ink);
  min-height: 100dvh;
}

html.theme-acrylic body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(180deg, rgba(6, 8, 10, 0.25) 0%, rgba(6, 8, 10, 0.45) 50%, rgba(6, 8, 10, 0.65) 100%),
    var(--acrylic-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.08) brightness(0.78);
  transform: scale(1.03);
}

html.theme-acrylic body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(18px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(18px) saturate(var(--acrylic-saturate));
  background: rgba(8, 10, 12, 0.25);
  pointer-events: none;
}

/* Login no acrílico — glass sobre a paisagem (não o card claro quebrado) */
html.theme-acrylic body.is-login::before,
html.theme-acrylic body.is-login::after {
  display: block !important;
}

html.theme-acrylic #login-screen {
  color-scheme: dark;
  background: transparent !important;
  --paper: transparent;
  --paper-panel: rgba(22, 24, 28, 0.58);
  --paper-sunk: rgba(8, 10, 12, 0.4);
  --ink: #f5f6f7;
  --ink-soft: rgba(255, 255, 255, 0.92);
  --ink-faint: rgba(255, 255, 255, 0.80);
  --forest: #3d6b56;
  --forest-deep: #3d6b56;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.18);
  --focus-ring: rgba(74, 222, 128, 0.28);
  --shadow-instrument: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 8px 28px rgba(0, 0, 0, 0.35);
}

html.theme-acrylic #login-screen .gp-login-card {
  background: rgba(22, 24, 28, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  box-shadow: var(--shadow-instrument) !important;
  color: #f5f6f7;
}

html.theme-acrylic #login-screen .gp-login-logo {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

html.theme-acrylic #login-screen h2,
html.theme-acrylic #login-screen .text-ink {
  color: #f5f6f7 !important;
}

html.theme-acrylic #login-screen .text-ink-soft {
  color: rgba(255, 255, 255, 0.68) !important;
}

html.theme-acrylic #login-screen .text-ink-faint,
html.theme-acrylic #login-screen .gp-login-by {
  color: rgba(255, 255, 255, 0.48) !important;
}

html.theme-acrylic #login-screen .gp-login-by span {
  color: #4ade80 !important;
}

html.theme-acrylic #login-screen label {
  color: rgba(255, 255, 255, 0.62) !important;
}

html.theme-acrylic #login-screen input:not([type="checkbox"]):not([type="radio"]) {
  background: rgba(0, 0, 0, 0.38) !important;
  color: #f5f6f7 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.theme-acrylic #login-screen input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

html.theme-acrylic #login-screen #login-eye,
html.theme-acrylic #login-screen button.text-ink-faint {
  color: rgba(255, 255, 255, 0.55) !important;
}

html.theme-acrylic #login-screen .gp-btn-primary {
  background: #3d6b56 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(34, 107, 64, 0.35);
}

html.theme-acrylic #login-screen .gp-btn-primary:hover {
  background: #4a7f66 !important;
}

html.theme-acrylic #login-screen #login-error,
html.theme-acrylic #login-screen .bg-red-50 {
  background: rgba(248, 113, 113, 0.16) !important;
  border-color: rgba(248, 113, 113, 0.42) !important;
  color: #fecaca !important;
}

html.theme-acrylic #login-screen .border-red-200 {
  border-color: rgba(248, 113, 113, 0.42) !important;
}

html.theme-acrylic #login-screen .text-red-700 {
  color: #fecaca !important;
}

/* ── Nav glass ──────────────────────────────────────────────── */
html.theme-acrylic .gp-nav {
  background: var(--acrylic-shell) !important;
  backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  border-bottom: 1px solid var(--acrylic-shell-border) !important;
  box-shadow: none !important;
  color: var(--acrylic-ink) !important;
}

html.theme-acrylic .gp-nav-brand-kicker {
  display: none !important;
}

html.theme-acrylic .gp-nav-brand-title,
html.theme-acrylic .gp-nav-brand-title i {
  color: var(--acrylic-ink) !important;
}

html.theme-acrylic .gp-nav-brand-title i.fa-chart-line {
  color: var(--acrylic-accent-bright) !important;
}

html.theme-acrylic .gp-nav-tabs .tab-btn {
  background: transparent !important;
  color: var(--acrylic-ink-soft) !important;
  border-radius: var(--acrylic-radius-pill) !important;
  font-weight: 500;
  box-shadow: none !important;
}

html.theme-acrylic .gp-nav-tabs .tab-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--acrylic-ink) !important;
}

html.theme-acrylic .gp-nav-tabs .tab-btn.bg-white,
html.theme-acrylic .gp-nav-tabs .tab-btn.text-forest-700 {
  background: var(--acrylic-accent-soft) !important;
  color: #fff !important;
  border: 1px solid rgba(74, 222, 128, 0.22);
  box-shadow: none !important;
}

html.theme-acrylic #status-badge {
  background: var(--acrylic-accent-glow) !important;
  color: var(--acrylic-accent-bright) !important;
  border: 1px solid rgba(74, 222, 128, 0.25);
}

html.theme-acrylic .gp-nav button.bg-white:not(.tab-btn),
html.theme-acrylic .gp-nav .bg-white.text-forest-deep {
  background: var(--acrylic-accent) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none !important;
}

html.theme-acrylic #btn-logout {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--acrylic-ink-soft) !important;
  border: 1px solid var(--acrylic-line);
}

html.theme-acrylic #navbar-user,
html.theme-acrylic #btn-theme-toggle {
  color: var(--acrylic-ink-soft) !important;
}

html.theme-acrylic #tarefas-nav-badge {
  background: var(--acrylic-ochre) !important;
  color: #1a1400 !important;
}

/* ── Painéis / cards genéricos ──────────────────────────────── */
html.theme-acrylic .bg-white,
html.theme-acrylic .bg-paper-panel,
html.theme-acrylic .gp-card,
html.theme-acrylic .gp-card-elevated {
  background: var(--acrylic-panel) !important;
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border: 1px solid var(--acrylic-line) !important;
  box-shadow: var(--acrylic-shadow-sm) !important;
  color: var(--acrylic-ink);
}

html.theme-acrylic .bg-paper-sunk,
html.theme-acrylic .bg-paper {
  background: var(--acrylic-sunk) !important;
}

html.theme-acrylic .text-ink { color: var(--acrylic-ink) !important; }
html.theme-acrylic .text-ink-soft { color: var(--acrylic-ink-soft) !important; }
html.theme-acrylic .text-ink-faint { color: var(--acrylic-ink-faint) !important; }
html.theme-acrylic .text-forest-700,
html.theme-acrylic .text-forest-600,
html.theme-acrylic .text-forest-deep,
html.theme-acrylic .text-forest-500 {
  color: var(--acrylic-accent-bright) !important;
}

html.theme-acrylic .border-line,
html.theme-acrylic .border-line-strong,
html.theme-acrylic .border-b,
html.theme-acrylic .border-t {
  border-color: var(--acrylic-line) !important;
}

html.theme-acrylic .divide-line > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--acrylic-line);
}

html.theme-acrylic .shadow-sm,
html.theme-acrylic .shadow,
html.theme-acrylic .shadow-md,
html.theme-acrylic .shadow-lg,
html.theme-acrylic .shadow-2xl {
  box-shadow: var(--acrylic-shadow-sm) !important;
}

/* Botões */
html.theme-acrylic .gp-btn-primary,
html.theme-acrylic .bg-forest,
html.theme-acrylic .bg-forest-600,
html.theme-acrylic .bg-forest-deep {
  background: var(--acrylic-accent) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html.theme-acrylic .bg-forest-soft,
html.theme-acrylic .bg-forest-50 {
  background: var(--acrylic-accent-soft) !important;
}

/* Inputs */
html.theme-acrylic input:not([type="checkbox"]):not([type="radio"]):not(.gp-lead-search-input),
html.theme-acrylic select,
html.theme-acrylic textarea {
  background: rgba(0, 0, 0, 0.28) !important;
  color: var(--acrylic-ink) !important;
  border-color: var(--acrylic-line-strong) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.theme-acrylic .gp-lead-search-input {
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  color: #fff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.theme-acrylic input::placeholder,
html.theme-acrylic textarea::placeholder {
  color: var(--acrylic-ink-faint);
}

/* Modais */
html.theme-acrylic .bg-black\/50 {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html.theme-acrylic #lead-modal > .lead-modal-sheet,
html.theme-acrylic [id^="modal-"] > div.bg-white,
html.theme-acrylic .lead-modal-sheet {
  background: rgba(18, 20, 24, 0.78) !important;
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid var(--acrylic-shell-border) !important;
  box-shadow: var(--acrylic-shadow) !important;
}

html.theme-acrylic #lead-modal.lead-layout-sidebar > .lead-modal-sheet {
  border-radius: 0 !important;
  border-left: 1px solid var(--acrylic-shell-border) !important;
  box-shadow: -16px 0 50px rgba(0, 0, 0, 0.55) !important;
}

/* ── Kanban ─────────────────────────────────────────────────── */
html.theme-acrylic #kanban-board > div {
  background: var(--acrylic-sunk) !important;
  border: 1px solid var(--acrylic-line) !important;
  border-radius: 1rem !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none !important;
}

/* Header da coluna: sem faixa colorida — só bolinha + texto */
html.theme-acrylic #kanban-board > div > div:first-child {
  background: transparent !important;
  background-image: none !important;
  color: var(--acrylic-ink) !important;
  border-bottom: 1px solid var(--acrylic-line);
  border-radius: 1rem 1rem 0 0 !important;
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}

html.theme-acrylic #kanban-board > div > div:first-child .font-semibold,
html.theme-acrylic #kanban-board > div > div:first-child .uppercase {
  color: var(--acrylic-ink) !important;
  letter-spacing: 0.04em;
}

/* Contador */
html.theme-acrylic #kanban-board > div > div:first-child span.rounded-full.bg-white\/25,
html.theme-acrylic #kanban-board > div > div:first-child span.bg-white\/25 {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--acrylic-ink-soft) !important;
}

/* Botões do header (mover / cor) — glass neutro; a bolinha colorida fica intacta */
html.theme-acrylic #kanban-board > div > div:first-child > div.flex button {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--acrylic-line) !important;
  color: var(--acrylic-ink-soft) !important;
}
html.theme-acrylic #kanban-board > div > div:first-child > div.flex button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--acrylic-ink) !important;
}
/* Bolinha de cor (swatch) permanece com a cor inline */
html.theme-acrylic #kanban-board > div > div:first-child [data-cor-swatch] span.rounded-full {
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

html.theme-acrylic #kanban-board .bg-white,
html.theme-acrylic #kanban-board [draggable="true"] {
  background: var(--acrylic-card) !important;
  border: 1px solid var(--acrylic-line) !important;
  border-radius: var(--acrylic-radius-card) !important;
  box-shadow: var(--acrylic-shadow-sm) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html.theme-acrylic #kanban-board [draggable="true"]:hover {
  background: var(--acrylic-card-hover) !important;
  border-color: var(--acrylic-line-strong) !important;
}

html.theme-acrylic .kanban-card-chip {
  background: rgba(0, 0, 0, 0.35) !important;
  border-color: var(--acrylic-line) !important;
  box-shadow: none !important;
}

html.theme-acrylic .kanban-lead-check {
  accent-color: var(--acrylic-accent-bright);
}

/* Badges dias na fila — soft glass */
html.theme-acrylic #kanban-board .border.rounded,
html.theme-acrylic #kanban-board span.rounded.border {
  backdrop-filter: blur(8px);
}

html.theme-acrylic .bg-emerald-50,
html.theme-acrylic .bg-forest-50 {
  background: var(--acrylic-accent-glow) !important;
}

html.theme-acrylic .text-emerald-700,
html.theme-acrylic .text-emerald-800 {
  color: var(--acrylic-accent-bright) !important;
}

/* Bulk bar */
html.theme-acrylic #kanban-bulk-bar {
  background: var(--acrylic-accent-soft) !important;
  border-color: rgba(74, 222, 128, 0.25) !important;
  backdrop-filter: blur(16px);
}

/* Scrollbars */
html.theme-acrylic ::-webkit-scrollbar-track {
  background: transparent;
}
html.theme-acrylic ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
html.theme-acrylic ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Painel de aparência (config) — legado; mantido visível */
.acrylic-theme-panel {
  display: block;
}