/* cybox-admin-theme.css — camada de tema para o APP-SIDE (auth + painel) do superaluguel.
   Carregado por último no layouts/app.blade.php. Tema CLARO refinado + acento teal +
   fonte Chakra Petch (template Cybox). Não-destrutivo: só sobrescreve. */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Fonte do template em todo o painel (troca a Poppins do admin) */
  --body-font-family: 'Chakra Petch', sans-serif;
  /* Acento teal (mesmo do site público) — escopo só app-side (este CSS só carrega no painel/auth) */
  --primary-color: #14C2A3;
  --primary-hover-color: #0e9e85;
  --primary-color-transparent: rgba(20,194,163,.10);
  /* Superfícies claras refinadas */
  --bg-light: #F4F7FB;
  --off-white: #F7F9FC;
  --border-color: #E6E9F0;
}

body { font-family: 'Chakra Petch', sans-serif; }

/* Botões/links de acento seguem --primary-color (agora teal) automaticamente.
   Reforços de contraste onde o base fixa azul: */
.btn-primary, .theme-btn, .bg-primary-color {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.btn-primary:hover, .theme-btn:hover { background-color: var(--primary-hover-color) !important; }

/* ---------- Login / cadastro / verificação (auth) ---------- */
.sign-up-page { background: #F4F7FB !important; }

/* Lateral de marca: painel teal→dark com texto claro (a img/título usam text-white no base) */
.sign-up-left-content {
  background: radial-gradient(130% 130% at 100% 0%, #14C2A3 0%, #0E1220 58%);
  border-radius: 20px;
  padding: 48px 32px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 60px rgba(14,18,32,.22);
}
.sign-up-left-content h1 { color: #fff !important; font-family: 'Chakra Petch', sans-serif; }
.sign-up-left-content p { color: rgba(255,255,255,.85); }

/* Form side limpo, foco teal */
.sign-up-right-content { background: #fff !important; }
.sign-up-page .form-control:focus,
.sign-up-page .form-control.email:focus,
.sign-up-page .form-control.password:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 .2rem rgba(20,194,163,.15);
}

/* ---------- Painel logado: polish claro refinado ---------- */
.card {
  border-radius: 14px;
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 22px rgba(16,24,40,.06);
}
.table thead th {
  color: var(--heading-color);
  border-bottom: 1px solid var(--border-color);
  font-family: 'Chakra Petch', sans-serif;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 .2rem rgba(20,194,163,.15);
}
/* Estado ativo/seleção usa o acento teal via --primary-color já herdado */

/* ---------- Painel: shell (sidebar / topbar) ---------- */
/* Sidebar (.vertical-menu, MetisMenu) — clara com borda de definição */
.vertical-menu { border-right: 1px solid var(--border-color); }
/* Item de menu ativo em teal + tint suave */
.metismenu li a.active,
.metismenu li.mm-active > a,
.metismenu li.active > a {
  color: var(--primary-color) !important;
  background: rgba(20,194,163,.08);
  border-radius: 8px;
}
.metismenu li a:hover { color: var(--primary-color); }
/* Topbar limpa */
.navbar-header {
  background: #fff;
  border-bottom: 1px solid var(--border-color);
}
/* Badges/pílulas de status mantêm cores semânticas (blue/green/purple) — não mexer */

/* Cards/containers de conteúdo do painel (.bg-white) — polish refinado (sombra sutil) */
.page-content-wrapper.bg-white,
.settings-inner-box.bg-white,
.account-settings-leftside.bg-white,
.dashboard-card,
.card {
  box-shadow: 0 6px 22px rgba(16,24,40,.05);
  border-color: var(--border-color);
}

/* ============ MODO ESCURO DO PAINEL/AUTH (html[data-theme="dark"]) ============
   O CLARO é o padrão (regras acima). Aqui só as sobreposições p/ o escuro.
   Superfícies via seletores específicos (não remapeamos --white-color p/ não
   quebrar texto branco do base). Texto via --heading-color/--body-font-color. */
html[data-theme="dark"] {
  --heading-color: #E7E9F0;
  --body-font-color: #9AA0B4;
  --border-color: #23304d;
  --border-color-2: #23304d;
  --bg-light: #0E1220;
  --off-white: #0E1220;
}
html[data-theme="dark"] body { background: #0E1220; color: #9AA0B4; }
html[data-theme="dark"] .main-content { background: transparent; }
html[data-theme="dark"] .vertical-menu { background: #0B0F1C !important; border-right-color: #23304d; }
html[data-theme="dark"] .navbar-header { background: #141A31 !important; border-bottom-color: #23304d; }
/* superfícies de conteúdo -> dark */
html[data-theme="dark"] .main-content .bg-white,
html[data-theme="dark"] .page-content-wrapper.bg-white,
html[data-theme="dark"] .settings-inner-box.bg-white,
html[data-theme="dark"] .account-settings-leftside.bg-white,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dashboard-card {
  background: #161C34 !important;
  border-color: #23304d !important;
  color: #E7E9F0;
}
/* tabelas */
html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table thead th { color: #E7E9F0; border-color: #23304d; }
/* inputs */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .zForm-control {
  background: #161C34 !important; color: #E7E9F0; border-color: #23304d;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .zForm-control::placeholder { color: #6b7180; }
/* menu lateral */
html[data-theme="dark"] .metismenu li a { color: #9AA0B4; }
html[data-theme="dark"] .metismenu li a.active,
html[data-theme="dark"] .metismenu li.mm-active > a,
html[data-theme="dark"] .metismenu li.active > a { background: rgba(20,194,163,.14); }
/* dropdowns / modais */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content { background: #161C34; border-color: #23304d; color: #E7E9F0; }
html[data-theme="dark"] .dropdown-item { color: #9AA0B4; }
html[data-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,.04); color: var(--primary-color); }
/* auth em dark */
html[data-theme="dark"] .sign-up-page { background: #0E1220 !important; }
html[data-theme="dark"] .sign-up-right-content { background: #161C34 !important; }