/* public/assets/css/style.css — design system do Ozer (constituição, seção 8).
   Tematização via CSS variables + classes .ozer-* (sem quebrar o grid do Bootstrap). */

/* ─── Design tokens ─────────────────────────────────────────────── */
:root {
  --ozer-primary:   #4f46e5;
  --ozer-primary-d: #4338ca;
  --ozer-violet:    #7c3aed;
  --ozer-accent:    #06b6d4;
  --ozer-ink:       #0f172a;
  --ozer-slate:     #1e293b;
  --ozer-muted:     #6b7280;
  --ozer-bg:        #f4f5fb;
  --ozer-line:      #e9eaf2;

  --ozer-grad:      linear-gradient(135deg, #6366f1 0%, #7c3aed 55%, #a855f7 100%);
  --ozer-grad-dark: linear-gradient(135deg, #0b1020 0%, #14122e 60%, #1e1b4b 100%);
  --ozer-shadow:    0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05);
  --ozer-shadow-lg: 0 18px 50px rgba(79,70,229,.16);

  /* Override do tema Bootstrap (seção 8 — ajuste de tema documentado) */
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79,70,229;
  --bs-body-bg: var(--ozer-bg);
  --bs-body-color: #1f2937;
  /* O BS 5.3 herda o fundo de input/select de --bs-body-bg: com o cinza da
     página ali, todo campo dentro de card/modal BRANCO ficava cinza
     "transparente". Campo de formulário é branco, sempre. */
  --bs-form-control-bg: #fff;
  --bs-form-select-bg: #fff;
  --bs-border-radius: .7rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-link-color: #4f46e5;
  --bs-link-hover-color: #4338ca;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--ozer-bg);
  color: #1f2937;
}

/* ─── Marca ─────────────────────────────────────────────────────── */
.ozer-brand {
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--ozer-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ─── Botões ────────────────────────────────────────────────────── */
.btn { --bs-btn-border-radius: .65rem; font-weight: 600; }
.btn-primary {
  --bs-btn-bg: var(--ozer-primary);
  --bs-btn-border-color: var(--ozer-primary);
  --bs-btn-hover-bg: var(--ozer-primary-d);
  --bs-btn-hover-border-color: var(--ozer-primary-d);
  --bs-btn-active-bg: #3730a3;
}
.ozer-btn-grad {
  background: var(--ozer-grad); border: 0; color: #fff;
  box-shadow: 0 6px 18px rgba(124,58,237,.28);
}
.ozer-btn-grad:hover { color: #fff; filter: brightness(1.06); }

/* ─── Navbar do painel ──────────────────────────────────────────── */
.ozer-navbar { background: var(--ozer-ink); }
.ozer-navbar .ozer-brand { font-size: 1.25rem; }
.ozer-orgchip {
  --bs-btn-color: #cbd5e1; --bs-btn-border-color: rgba(255,255,255,.18);
  --bs-btn-hover-bg: rgba(255,255,255,.08); --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgba(255,255,255,.3);
  /* Aberto/pressionado (.show/:active): sem isto o Bootstrap cai no texto
     escuro padrão do .btn — ilegível sobre a barra escura. */
  --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255,255,255,.12);
  --bs-btn-active-border-color: rgba(255,255,255,.3);
}

/* Chip de saldo (ADR-0013): estados de atenção do crédito pré-pago */
.ozer-chip-saldo { white-space: nowrap; }
.ozer-chip-saldo-baixo {
  --bs-btn-color: #fbbf24; --bs-btn-border-color: rgba(251,191,36,.5);
  --bs-btn-hover-color: #fcd34d; --bs-btn-hover-border-color: #fbbf24;
  --bs-btn-active-color: #fcd34d; --bs-btn-active-border-color: #fbbf24;
}
.ozer-chip-saldo-zerado {
  --bs-btn-color: #f87171; --bs-btn-border-color: rgba(248,113,113,.6);
  --bs-btn-hover-color: #fca5a5; --bs-btn-hover-border-color: #f87171;
  --bs-btn-active-color: #fca5a5; --bs-btn-active-border-color: #f87171;
  animation: ozer-pulso-saldo 1.6s ease-in-out infinite;
}
@keyframes ozer-pulso-saldo {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* Palavras-chave em fichinhas (substitui o Tagify por CDN do legado) */
.ozer-chips { min-height: 38px; height: auto; cursor: text; }
.ozer-chip-input { border: 0; outline: 0; min-width: 140px; padding: 2px; }
.ozer-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #ede9fe; color: #4c1d95; border-radius: 1rem;
  padding: .1rem .5rem; font-size: .85rem; white-space: nowrap;
}
.ozer-chip button { border: 0; background: none; color: inherit; line-height: 1; padding: 0; opacity: .6; }
.ozer-chip button:hover { opacity: 1; }

/* Área de atuação: cartões de modo (por distância × por bairro) */
.ozer-modo { cursor: pointer; border: 2px solid transparent !important; transition: border-color .15s, background .15s; }
.ozer-modo:hover { background: #f8fafc; }
.ozer-modo-ativo { border-color: var(--ozer-primaria, #6366f1) !important; background: #f5f3ff; }

/* Home: KPI com destaque (faturamento/ROI) */
.ozer-kpi-destaque { background: #f5f3ff; border-color: #d7d3fb !important; }

/* Caminho do cliente: checklist de ativação (Home) + faixa de alertas global */
.ozer-passo { border: 1px solid transparent; transition: background .15s, border-color .15s; }
.ozer-passo:hover { background: #f8fafc; border-color: var(--ozer-line); }
.ozer-passo-feito { opacity: .75; }
.ozer-passo-proximo { background: #f5f3ff; border-color: #d7d3fb; }
.ozer-passo-proximo:hover { background: #ede9fe; }
#ozer-alertas .alert { box-shadow: var(--ozer-shadow); }

/* ─── Cards ─────────────────────────────────────────────────────── */
.ozer-card {
  background: #fff; border: 1px solid var(--ozer-line); border-radius: 1rem;
  box-shadow: var(--ozer-shadow); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  /* O ozer-card NÃO é um .card do Bootstrap, e o .card-body tira o padding das
     variáveis --bs-card-spacer-* que só o .card define — sem estas duas linhas,
     um card-body sem p-* explícito fica com padding ZERO (bug visto na Base de
     conhecimento). 1.5rem = o p-4 que as telas já usam explicitamente. */
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
}
.ozer-card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.ozer-card-link:hover .ozer-card { transform: translateY(-4px); box-shadow: var(--ozer-shadow-lg); border-color: #d7d3fb; }
/* Faixa de cabeçalho colada no topo de um .ozer-card (ex.: colunas do quadro de
   pedidos): os cantos superiores acompanham o raio do card, sem vazar por cima. */
.ozer-card > .ozer-card-topo { border-top-left-radius: inherit; border-top-right-radius: inherit; }

/* Badge de ícone (emoji) dos módulos */
.ozer-ico {
  width: 48px; height: 48px; border-radius: .85rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
  background: var(--ozer-grad); color: #fff; box-shadow: 0 6px 16px rgba(124,58,237,.22);
}
.ozer-seta { color: #c7c9d6; transition: transform .16s ease, color .16s ease; }
.ozer-card-link:hover .ozer-seta { transform: translateX(4px); color: var(--ozer-primary); }

/* ─── Tela de autenticação (fundo escuro com brilho) ────────────── */
.ozer-auth {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background:
    radial-gradient(at 18% 18%, rgba(99,102,241,.28), transparent 42%),
    radial-gradient(at 85% 12%, rgba(168,85,247,.20), transparent 42%),
    radial-gradient(at 50% 100%, rgba(6,182,212,.14), transparent 45%),
    var(--ozer-grad-dark);
}
.ozer-auth-card {
  width: 100%; max-width: 430px;
  background: rgba(255,255,255,.97); border: 1px solid rgba(255,255,255,.5);
  border-radius: 1.25rem; box-shadow: 0 24px 70px rgba(0,0,0,.4);
}
.ozer-auth-brand { font-weight: 800; font-size: 1.8rem; letter-spacing: -.02em; }
.ozer-auth-card .form-control { border-radius: .65rem; padding: .6rem .8rem; }
.ozer-auth-card .form-control:focus { border-color: var(--ozer-violet); box-shadow: 0 0 0 .2rem rgba(124,58,237,.18); }

/* ─── Lista de organizações (na tela de auth) ───────────────────── */
/* O hover vem pelos TOKENS do botão, não por uma regra à parte: o
   btn-outline-secondary pinta o texto de branco no hover/active, e com o
   nosso fundo claro o nome da organização sumia. */
.ozer-org-btn {
  --bs-btn-border-color: var(--ozer-line);
  --bs-btn-color: var(--ozer-ink);
  --bs-btn-hover-color: var(--ozer-ink);
  --bs-btn-hover-bg: #f7f7ff;
  --bs-btn-hover-border-color: var(--ozer-primary);
  --bs-btn-active-color: var(--ozer-ink);
  --bs-btn-active-bg: #eeeefb;
  --bs-btn-active-border-color: var(--ozer-primary);
  border-radius: .8rem; padding: .7rem .9rem;
}
.ozer-org-ini {
  width: 38px; height: 38px; border-radius: .6rem; flex: 0 0 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ozer-grad); color: #fff; font-weight: 700;
}

/* ─── Utilidades ────────────────────────────────────────────────── */
.ozer-page-title { font-weight: 700; letter-spacing: -.01em; }
.ozer-soft { color: var(--ozer-muted); }

/* ─── Landing ───────────────────────────────────────────────────── */
.ozer-section { padding: 4.5rem 0; }

.ozer-hero { position: relative; overflow: hidden; background: var(--ozer-grad-dark); color: #e7e9f3; }
.ozer-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; background:
    radial-gradient(at 12% 18%, rgba(99,102,241,.38), transparent 42%),
    radial-gradient(at 88% 8%,  rgba(168,85,247,.24), transparent 42%),
    radial-gradient(at 70% 95%, rgba(6,182,212,.16), transparent 45%);
}
.ozer-hero > .container { position: relative; z-index: 1; }
.ozer-hero h1 { font-weight: 800; letter-spacing: -.02em; line-height: 1.08; color: #fff; }
.ozer-hero .lead { color: #b9bfd6; }
.ozer-eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #c4b5fd; background: rgba(124,58,237,.18); border: 1px solid rgba(168,85,247,.32);
  padding: .32rem .8rem; border-radius: 2rem;
}

/* mockup de conversa no hero */
.ozer-chatmock {
  background: #0b141a; border-radius: 1.25rem; padding: 1rem 1rem .6rem;
  box-shadow: 0 30px 70px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.08);
}
.ozer-chatmock .bub { max-width: 82%; padding: .5rem .75rem; border-radius: .9rem; margin-bottom: .5rem; font-size: .9rem; line-height: 1.35; }
.ozer-chatmock .in  { background: #fff; color: #111; border-top-left-radius: .25rem; }
.ozer-chatmock .out { background: #d9fdd3; color: #111; border-top-right-radius: .25rem; margin-left: auto; }

.ozer-step-num {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px;
  background: var(--ozer-grad); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ozer-feat-ico {
  width: 46px; height: 46px; border-radius: .7rem; flex: 0 0 46px;
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem; background: #eef0fe;
}
.ozer-stat-num { font-size: 3.4rem; font-weight: 800; background: var(--ozer-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ozer-cta { background: var(--ozer-grad); color: #fff; border-radius: 1.5rem; box-shadow: var(--ozer-shadow-lg); }

/* ─── Painel: sidebar + dashboard ───────────────────────────────── */
.ozer-sidebar { width: 250px; background: #fff; border-right: 1px solid var(--ozer-line); }
@media (min-width: 992px) { .ozer-sidebar { min-height: calc(100vh - 56px); } }
.ozer-navitem {
  color: #475569; border-radius: .6rem; padding: .55rem .75rem; font-weight: 500;
  display: flex; align-items: center; gap: .55rem; text-decoration: none;
}
.ozer-navitem:hover { background: #f1f2f9; color: var(--ozer-ink); }
.ozer-navitem.active { background: rgba(79,70,229,.1); color: var(--ozer-primary); font-weight: 600; }
.ozer-navico { width: 1.4rem; text-align: center; flex: 0 0 1.4rem; }
.ozer-main { background: var(--ozer-bg); min-height: calc(100vh - 56px); }
.ozer-stat-big { font-size: 2.1rem; font-weight: 800; line-height: 1.1; margin-top: .25rem; color: var(--ozer-ink); }
.ozer-navsec { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9aa0b5; padding: .9rem .75rem .25rem; }
/* Logo da marca na topbar (logo-branco.png, 400x146 transparente) */
.ozer-logo-topbar { height: 26px; width: auto; display: block; }

/* Identidade da organização no topo da sidebar (logo + nome, acima das seções) */
.ozer-org-ident {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem .75rem .6rem; border-bottom: 1px solid var(--ozer-line);
}
.ozer-org-logo {
  width: 38px; height: 38px; border-radius: .7rem; object-fit: cover; flex: 0 0 38px;
  border: 1px solid var(--ozer-line); background: #fff;
}
.ozer-org-logo-inicial {
  display: flex; align-items: center; justify-content: center;
  background: rgba(79,70,229,.1); color: var(--ozer-primary); font-weight: 700; font-size: 1.1rem;
}
.ozer-org-nome { font-weight: 600; color: var(--ozer-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ozer-navitem-soon { color: #b6bac6; cursor: default; }
.ozer-navitem-soon:hover { background: transparent; }
.ozer-soon { font-size: .6rem; padding: .1rem .4rem; background: #eef0f6; color: #9aa0b5; border-radius: 1rem; margin-left: auto; }

/* ─── Central de notificações (toasts) ──────────────────────────── */
/* top: 170px, não 70px — a faixa de ~90-160px é onde as páginas põem seus
   botões de ação no canto direito (Assumir/Finalizar do atendimento, headers):
   o toast crítico de chamado (que NÃO tem X de propósito) cobria exatamente
   o botão Assumir que o resolveria. Abaixo dessa faixa só há conteúdo rolável. */
.ozer-toast-container {
  position: fixed; top: 170px; right: 16px; z-index: 1080;
  display: flex; flex-direction: column; gap: .6rem;
  width: 340px; max-width: calc(100vw - 32px);
}
@media (max-width: 575.98px) {
  .ozer-toast-container { top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; }
}
.ozer-toast {
  background: #fff; border: 1px solid var(--ozer-line); border-left: 4px solid var(--ozer-primary);
  border-radius: .7rem; box-shadow: var(--ozer-shadow-lg); padding: .7rem .85rem;
  animation: ozer-toast-in .25s ease; overflow: hidden;
}
.ozer-toast.removing { animation: ozer-toast-out .25s ease forwards; }
.ozer-toast-chamado { border-left-color: #ef4444; }
.ozer-toast-pedido  { border-left-color: #16a34a; }
.ozer-toast-duvida  { border-left-color: var(--ozer-accent); }
.ozer-toast-msg-success { border-left-color: #16a34a; }
.ozer-toast-msg-error   { border-left-color: #ef4444; }
.ozer-toast-msg-info    { border-left-color: var(--ozer-primary); }
.ozer-toast-header { display: flex; align-items: center; gap: .5rem; }
.ozer-toast-ico { font-size: 1.1rem; flex: 0 0 auto; }
.ozer-toast-title { font-weight: 700; color: var(--ozer-ink); font-size: .92rem; }
.ozer-toast-close {
  margin-left: auto; background: none; border: none; font-size: 1.25rem; line-height: 1;
  color: var(--ozer-muted); cursor: pointer; padding: 0 .15rem;
}
.ozer-toast-close:hover { color: var(--ozer-ink); }
/* Minimizar (só nos críticos, que não têm X): recolhe para a linha do título —
   o card sai da frente do que estiver embaixo SEM ser dispensado (som continua,
   e ele segue na tela até o chamado/pedido ser resolvido). */
.ozer-toast-min {
  margin-left: auto; background: none; border: none; font-size: 1.1rem; line-height: 1;
  color: var(--ozer-muted); cursor: pointer; padding: 0 .15rem;
}
.ozer-toast-min:hover { color: var(--ozer-ink); }
.ozer-toast.minimizado .ozer-toast-body,
.ozer-toast.minimizado .ozer-toast-actions { display: none; }
.ozer-toast.minimizado { cursor: pointer; }
.ozer-toast-body { color: var(--ozer-slate); font-size: .85rem; margin-top: .3rem; }
.ozer-toast-actions { margin-top: .55rem; display: flex; gap: .4rem; }
.ozer-toast-btn {
  text-decoration: none; font-size: .82rem; font-weight: 600; padding: .35rem .7rem;
  border-radius: .5rem; background: var(--ozer-primary); color: #fff;
}
.ozer-toast-btn:hover { background: var(--ozer-primary-d); color: #fff; }
@keyframes ozer-toast-in  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes ozer-toast-out { to { opacity: 0; transform: translateX(20px); } }