:root{
  --radius:18px;
  --stroke:rgba(255,255,255,.10);
  --shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* DARK */
:root[data-theme="dark"]{
  --bg:#0b1220;
  --card:#0f1a33;
  --text:#e9efff;
  --muted:#9fb0d0;
  --accent1:#7c3aed;
  --accent2:#22c55e;
  --stroke:rgba(255,255,255,.10);
  --shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* LIGHT */
:root[data-theme="light"]{
  --bg:#f6f8ff;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#51627f;
  --accent1:#6d28d9;
  --accent2:#16a34a;
  --stroke:rgba(15, 23, 42, .10);
  --shadow: 0 18px 40px rgba(15,23,42,.10);
}

html,body{ height:100%; }
body{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(124,58,237,.18), transparent 55%),
    radial-gradient(1000px 600px at 90% 30%, rgba(34,197,94,.14), transparent 60%),
    var(--bg);
  color: var(--text);
  background-attachment: fixed;
}

a{ color: color-mix(in oklab, var(--accent1) 70%, var(--text)); }
a:hover{ color: var(--text); }

.app-nav{
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent1) 70%, #111 30%), rgba(15,26,51,.9));
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
}

.card.app-card{
  background: color-mix(in oklab, var(--card) 92%, transparent 8%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  /* O Bootstrap define color na propria .card (--bs-body-color, cinza escuro),
     o que vence a cor herdada do body. Sem isto, todo texto dentro de um
     cartao sai escuro no tema escuro. */
  color: var(--text);
}

/* .text-white-50 e .text-white sao brancos fixos do Bootstrap: no tema claro
   ficam ilegiveis sobre fundo branco. Passam a seguir o tema em toda a
   aplicacao — inclusive nas telas de login, que nao usam <main>.
   A navbar e reexcecao explicita: tem fundo escuro nos dois temas e
   precisa mesmo de texto branco. */
.text-white-50{ color: var(--muted) !important; }
.text-white{ color: var(--text) !important; }
.app-nav .text-white-50{ color: rgba(255,255,255,.55) !important; }
.app-nav .text-white{ color: #fff !important; }

/* .btn-outline-light e branco fixo do Bootstrap. Dentro de um .app-card no
   tema claro isso e branco sobre branco: o botao existe, recebe clique e
   fica invisivel. Mesma correcao de .text-white acima — segue o tema.
   A navbar continua excecao: fundo escuro nos dois temas. */
:root[data-theme="light"] .btn-outline-light{
  --bs-btn-color: var(--text);
  --bs-btn-border-color: color-mix(in oklab, var(--text) 30%, transparent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--accent1);
  --bs-btn-hover-border-color: var(--accent1);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--accent1);
  --bs-btn-active-border-color: var(--accent1);
}
:root[data-theme="light"] .app-nav .btn-outline-light{
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #f8f9fa;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f8f9fa;
  --bs-btn-active-border-color: #f8f9fa;
}

.form-control, .form-select, .btn{ border-radius: 14px; }
.form-control, .form-select{
  background: color-mix(in oklab, var(--card) 92%, transparent 8%);
  border: 1px solid var(--stroke);
  color: var(--text);
}
.form-control:focus, .form-select:focus{
  border-color: color-mix(in oklab, var(--accent1) 65%, transparent 35%);
  box-shadow: 0 0 0 .25rem color-mix(in oklab, var(--accent1) 20%, transparent 80%);
}

.table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  border-color: var(--stroke);
}

/* Tabela larga demais para o card rola na horizontal (.table-responsive), mas a
   coluna de acoes precisa continuar a vista — senao o botao existe e some fora
   do recorte. Prende a ultima coluna na direita do container que rola. */
.table-acoes-fixas th:last-child,
.table-acoes-fixas td:last-child{
  position: sticky;
  right: 0;
  background: var(--card);
  box-shadow: -8px 0 12px -8px rgba(0,0,0,.35);
}

.kpi{
  border:1px solid var(--stroke);
  border-radius:16px;
  background: color-mix(in oklab, var(--card) 92%, transparent 8%);
}
.kpi .val{ font-size: 1.6rem; font-weight: 800; }
.kpi .lab{ color: var(--muted); }

.brand-logos{
  display:flex; align-items:center; gap:10px;
}
.brand-logos { display:flex; align-items:center; gap:10px; width:100%; }
.brand-logos .brand-group { display:flex; align-items:center; gap:10px; }
.brand-logos .brand-divider { width:1px; height:28px; background: var(--stroke); }

.brand-logos img{
  width:auto;
  object-fit:contain;
  border-radius:10px;
  background: color-mix(in oklab, var(--card) 92%, transparent 8%);
  border:1px solid var(--stroke);
  padding:6px 8px;
}

/* Padrões de tamanho */
.brand-logos img.brand-akoma,
.brand-logos img.brand-omni{
  height:28px;           /* pequenas */
  max-width:120px;
  opacity:.95;
}

.brand-logos img.brand-company{
  height:40px;           /* maior que Akoma/Omni */
  max-width:170px;
}

.brand-divider{
  width:1px; height:28px; background: var(--stroke);
}
/* Barra de filtros das listas (fila, usuários). O .app-card já dá fundo e
   borda; aqui só o espaçamento dos campos e o rótulo pequeno acima deles. */
.filtro-bar .form-label{
  font-size:.78rem;
  margin-bottom:.15rem;
  color: var(--muted);
}

/* .input-group-text usa --bs-tertiary-bg (cinza claro fixo): no tema escuro a
   lupa vira um bloco branco colado no campo. Segue o tema, como .form-control. */
.input-group-text{
  background: color-mix(in oklab, var(--card) 92%, transparent 8%);
  border: 1px solid var(--stroke);
  color: var(--muted);
}

/* O ícone nativo do <input type="date"> é preto e some no tema escuro. */
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity:.65;
}