/* =====================================================================
   TEMA — Controle Financeiro
   Este arquivo define o visual padrão. Para personalizar:
     1) Cores, arredondamento, fonte e modo escuro: menu "Empresa" > Aparência
     2) Qualquer ajuste de CSS: assets/css/custom.css (não é sobrescrito)
        ou o campo "CSS personalizado" no menu "Empresa".
   Tudo abaixo usa VARIÁVEIS: mude uma variável e o sistema inteiro acompanha.
   ===================================================================== */

/* ---------- 1. VARIÁVEIS (tema claro) ---------- */
:root {
  --cor-primaria: #6366f1;
  --cor-primaria-hover: color-mix(in srgb, var(--cor-primaria) 82%, #000);
  --cor-primaria-suave: color-mix(in srgb, var(--cor-primaria) 12%, transparent);
  --cor-fundo-claro: #f4f6fb;
  --cor-fundo: var(--cor-fundo-claro);
  --cor-superficie: #ffffff;          /* cartões, menus, campos */
  --cor-borda: #e8ebf3;
  --cor-texto-suave: #6b7280;
  --raio: 14px;                       /* arredondamento dos cartões */
  --raio-sm: calc(var(--raio) * .6);  /* botões e campos */
  --sombra: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --sombra-hover: 0 2px 4px rgba(16,24,40,.05), 0 14px 32px rgba(16,24,40,.12);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ligação com o Bootstrap */
  --bs-primary: var(--cor-primaria);
  --bs-primary-rgb: 99, 102, 241;
  --bs-link-color: var(--cor-primaria);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: var(--cor-primaria-hover);
  --bs-link-hover-color-rgb: var(--bs-primary-rgb);
  --bs-body-bg: var(--cor-fundo);
  --bs-body-font-family: var(--fonte);
  --bs-border-color: var(--cor-borda);
  --bs-border-radius: var(--raio-sm);
}

/* ---------- 2. VARIÁVEIS (tema escuro) ---------- */
[data-bs-theme="dark"] {
  --cor-fundo: #0f1222;
  --cor-superficie: #171b30;
  --cor-borda: #272c47;
  --cor-texto-suave: #9aa3bd;
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --sombra-hover: 0 2px 4px rgba(0,0,0,.35), 0 14px 32px rgba(0,0,0,.5);
}

/* ---------- 3. BASE ---------- */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--fonte); background: var(--cor-fundo); padding-bottom: env(safe-area-inset-bottom); }
h1,h2,h3,h4,h5 { font-weight: 700; letter-spacing: -.01em; }
.app-main { animation: entrar .35s ease both; padding-top: .25rem; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- 4. MENU ---------- */
.app-nav {
  background: color-mix(in srgb, var(--cor-superficie) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--cor-borda); box-shadow: var(--sombra);
  margin-bottom: 1.5rem; padding: .55rem 0; padding-top: calc(.55rem + env(safe-area-inset-top));
}
.navbar-brand { font-weight: 700; color: var(--bs-body-color); margin-right: 1.25rem; }
.brand-logo { height: 30px; width: auto; border-radius: 6px; }
.brand-nome { display: inline-block; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.app-nav .nav-link { color: var(--cor-texto-suave); font-weight: 500; border-radius: var(--raio-sm); padding: .5rem .9rem; transition: background .2s, color .2s; }
.app-nav .nav-link:hover { color: var(--bs-body-color); background: var(--cor-primaria-suave); }
.app-nav .nav-link.active { color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.navbar-toggler { border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); padding: .4rem .6rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem var(--cor-primaria-suave); }
[data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1) grayscale(1); }
.btn-modo { border: 1px solid var(--cor-borda); background: var(--cor-superficie); border-radius: 999px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.user-link { color: var(--bs-body-color); font-weight: 500; text-decoration: none; }
@media (max-width: 991.98px) {
  .offcanvas { --bs-offcanvas-bg: var(--cor-superficie); --bs-offcanvas-width: min(84vw, 320px); border-left: 1px solid var(--cor-borda); border-radius: var(--raio) 0 0 var(--raio); }
  .offcanvas-body .nav-link { padding: .9rem 1rem; font-size: 1.05rem; }
  .offcanvas-body .user-area { border-top: 1px solid var(--cor-borda); padding-top: 1rem; margin-top: 1rem; flex-wrap: wrap; }
}

/* ---------- 5. CARTÕES ---------- */
.card { --bs-card-bg: var(--cor-superficie); --bs-card-border-color: var(--cor-borda); --bs-card-border-radius: var(--raio); --bs-card-inner-border-radius: calc(var(--raio) - 1px); --bs-card-cap-bg: transparent;
  background: var(--cor-superficie); border-radius: var(--raio); box-shadow: var(--sombra); transition: box-shadow .2s, transform .2s; }
a > .card:hover { box-shadow: var(--sombra-hover); transform: translateY(-2px); }
.card-header { font-weight: 600; border-bottom: 1px solid var(--cor-borda); }
/* cartões com borda colorida viram "faixa lateral" suave */
.card.border-primary, .card.border-success, .card.border-danger, .card.border-warning, .card.border-info, .card.border-secondary { border-color: var(--cor-borda) !important; border-left-width: 4px !important; }
.card.border-primary { border-left-color: var(--bs-primary) !important; }
.card.border-success { border-left-color: var(--bs-success) !important; }
.card.border-danger { border-left-color: var(--bs-danger) !important; }
.card.border-warning { border-left-color: var(--bs-warning) !important; }
.card.border-info { border-left-color: var(--bs-info) !important; }
.card.border-secondary { border-left-color: var(--bs-secondary) !important; }

/* ---------- 6. TABELAS ---------- */
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--cor-borda); --bs-table-hover-bg: var(--cor-primaria-suave); }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cor-texto-suave); font-weight: 600; white-space: nowrap; }
.table > :not(caption) > * > * { padding: .75rem 1rem; }
.table-sm > :not(caption) > * > * { padding: .5rem .75rem; }
.card > .table:last-child, .card > .table-responsive:last-child > .table { margin-bottom: 0; }

/* ---------- 7. BOTÕES ---------- */
.btn { border-radius: var(--raio-sm); font-weight: 500; padding: .5rem 1rem; transition: background .2s, border-color .2s, box-shadow .2s, transform .1s; }
.btn:active { transform: scale(.98); }
.btn-sm { padding: .3rem .7rem; }
.btn-dark, .btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--cor-primaria); --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--cor-primaria-hover); --bs-btn-hover-border-color: var(--cor-primaria-hover);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--cor-primaria-hover); --bs-btn-active-border-color: var(--cor-primaria-hover);
  --bs-btn-disabled-bg: var(--cor-primaria); --bs-btn-disabled-border-color: var(--cor-primaria);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cor-primaria) 30%, transparent);
}
.btn-outline-dark, .btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--cor-borda); --bs-btn-bg: var(--cor-superficie);
  --bs-btn-hover-color: var(--cor-primaria); --bs-btn-hover-bg: var(--cor-primaria-suave); --bs-btn-hover-border-color: var(--cor-primaria);
  --bs-btn-active-color: var(--cor-primaria); --bs-btn-active-bg: var(--cor-primaria-suave); --bs-btn-active-border-color: var(--cor-primaria);
}
.btn-outline-light { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--cor-borda); --bs-btn-hover-bg: var(--cor-primaria-suave); --bs-btn-hover-color: var(--cor-primaria); --bs-btn-hover-border-color: var(--cor-primaria); }

/* ---------- 8. FORMULÁRIOS ---------- */
.form-control, .form-select { background-color: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); padding: .55rem .85rem; }
.form-control-sm, .form-select-sm { padding: .3rem .6rem; }
.form-control:focus, .form-select:focus { border-color: var(--cor-primaria); box-shadow: 0 0 0 .25rem var(--cor-primaria-suave); background-color: var(--cor-superficie); }
.form-check-input:checked { background-color: var(--cor-primaria); border-color: var(--cor-primaria); }
.form-label { color: var(--cor-texto-suave); }

/* ---------- 9. OUTROS COMPONENTES ---------- */
.badge { border-radius: 999px; font-weight: 600; padding: .4em .75em; }
.alert { border: 0; border-radius: var(--raio); box-shadow: var(--sombra); }
.dropdown-menu { --bs-dropdown-bg: var(--cor-superficie); --bs-dropdown-border-color: var(--cor-borda); --bs-dropdown-border-radius: var(--raio); box-shadow: var(--sombra-hover); padding: .4rem; }
.dropdown-item { border-radius: var(--raio-sm); padding: .5rem .8rem; }
.dropdown-item:hover { background: var(--cor-primaria-suave); color: var(--cor-primaria); }
[data-bs-theme="dark"] .text-dark { color: var(--bs-body-color) !important; }
[data-bs-theme="dark"] .text-bg-light { background: var(--cor-superficie) !important; color: var(--bs-body-color) !important; }

/* ---------- 10. LOGIN ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: radial-gradient(900px 500px at 10% -10%, var(--cor-primaria-suave), transparent), radial-gradient(700px 400px at 100% 110%, var(--cor-primaria-suave), transparent), var(--cor-fundo); }
.login-card { width: 100%; max-width: 380px; padding: 1.75rem; }
.login-logo { max-width: 160px; max-height: 70px; display: block; margin: 0 auto 1rem; }

/* ---------- 11. CELULAR / TABLET ---------- */
@media (max-width: 767.98px) {
  body { font-size: 15px; }
  h3 { font-size: 1.35rem; }
  .container { padding-left: 1rem; padding-right: 1rem; }
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 38px; }
  .form-control, .form-select { font-size: 16px; min-height: 44px; }   /* evita zoom automático no iPhone */
  .form-control-sm, .form-select-sm { min-height: 40px; font-size: 16px; }
  .card-body { padding: 1rem; }
  .app-nav { margin-bottom: 1rem; }

  /* Tabelas viram "cartões" (o rótulo de cada campo vem do cabeçalho da coluna) */
  table.cartoes, table.cartoes tbody, table.cartoes tr { display: block; width: 100%; }
  table.cartoes thead { display: none; }
  table.cartoes tr { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--cor-borda); }
  table.cartoes tr:last-child { border-bottom: 0; }
  table.cartoes td { display: block; padding: 0; border: 0; text-align: left !important; min-width: 0; overflow-wrap: anywhere; }
  table.cartoes td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cor-texto-suave); font-weight: 600; }
  table.cartoes td:first-child { grid-column: 1 / -1; font-weight: 600; }
  table.cartoes td:first-child::before { display: none; }
  table.cartoes td:last-child { grid-column: 1 / -1; }
  table.cartoes td .btn { min-height: 38px; }
}
@media (min-width: 768px) and (max-width: 991.98px) { .container { max-width: 100%; } }

/* ---------- 12. IMPRESSÃO DA TELA ---------- */
@media print { .app-nav, .btn, .alert { display: none !important; } body { background: #fff; } .card { box-shadow: none; } }