/* =============================================================
   VISIMOB DESIGN SYSTEM — reskin do Bootstrap 5.3 (light + dark)
   Carregado DEPOIS do bootstrap.min.css. Não altera markup/JS.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400;1,500&display=swap');

/* ---- VisbyCF ---- */
@font-face { font-family:'VisbyCF'; src:url('../fonts/VisbyCF-Thin.otf'); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'VisbyCF'; src:url('../fonts/VisbyCF-ThinOblique.otf'); font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:'VisbyCF'; src:url('../fonts/VisbyCF-Light.otf'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'VisbyCF'; src:url('../fonts/VisbyCF-LightOblique.otf'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'VisbyCF'; src:url('../fonts/VisbyCF-Regular.otf'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'VisbyCF'; src:url('../fonts/VisbyCF-RegularOblique.otf'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'VisbyCF'; src:url('../fonts/VisbyCF-Medium.otf'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'VisbyCF'; src:url('../fonts/VisbyCF-MediumOblique.otf'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'VisbyCF'; src:url('../fonts/VisbyCF-DemiBold.otf'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'VisbyCF'; src:url('../fonts/VisbyCF-DemiBoldOblique.otf'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'VisbyCF'; src:url('../fonts/VisbyCF-Bold.otf'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'VisbyCF'; src:url('../fonts/VisbyCF-BoldOblique.otf'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'VisbyCF'; src:url('../fonts/VisbyCF-ExtraBold.otf'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'VisbyCF'; src:url('../fonts/VisbyCF-Heavy.otf'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'VisbyCF'; src:url('../fonts/VisbyCF-HeavyOblique.otf'); font-weight:900; font-style:italic; font-display:swap; }

/* =========================================================
   TOKENS
   ========================================================= */
:root {
  --vm-red:#E8192C; --vm-red-dark:#C41020; --vm-red-light:#FF3B4E; --vm-red-subtle:rgba(232,25,44,.12);
  --vm-ink:#181414; --vm-ink-med:#2C2626; --vm-ink-muted:#5A5050;
  --vm-off:#F8F5F5; --vm-surface:#F2EDED; --vm-border:#E5DEDE; --vm-card:#FFFFFF;
  --vm-green:#22C55E; --vm-green-sub:rgba(34,197,94,.14); --vm-green-text:#15803D;
  --vm-yellow:#F59E0B; --vm-yellow-sub:rgba(245,158,11,.16); --vm-yellow-text:#B45309;
  --vm-blue:#3B82F6; --vm-blue-sub:rgba(59,130,246,.12); --vm-blue-text:#1D4ED8;
  --vm-shadow-sm:0 1px 3px rgba(24,20,20,.12);
  --vm-shadow-md:0 4px 16px rgba(24,20,20,.14);
  --vm-shadow-lg:0 12px 40px rgba(24,20,20,.18);
  --vm-f:'VisbyCF',system-ui,-apple-system,sans-serif;
  --vm-fe:'Cormorant Garamond',Georgia,serif;
  /* sidebar é sempre escura (assinatura do DS) */
  --vm-sb-bg:#181414; --vm-sb-fg:rgba(255,255,255,.72); --vm-sb-fg-strong:#FFFFFF;
  --vm-sb-border:rgba(255,255,255,.08); --vm-sb-hover:rgba(255,255,255,.05);
}

:root[data-theme="dark"] {
  --vm-red:#FF3D51; --vm-red-dark:#E8192C; --vm-red-light:#FF6172; --vm-red-subtle:rgba(255,61,81,.16);
  --vm-ink:#F5F0F0; --vm-ink-med:#D9D2D2; --vm-ink-muted:#8A8080;
  --vm-off:#0F0B0B; --vm-surface:#241D1D; --vm-border:#2C2525; --vm-card:#1A1414;
  --vm-green:#34D37A; --vm-green-sub:rgba(52,211,122,.18); --vm-green-text:#6EE8A3;
  --vm-yellow:#FFB547; --vm-yellow-sub:rgba(255,181,71,.18); --vm-yellow-text:#FFCB7A;
  --vm-blue:#5B9DFF; --vm-blue-sub:rgba(91,157,255,.18); --vm-blue-text:#8FBAFF;
  --vm-shadow-sm:none; --vm-shadow-md:0 4px 16px rgba(0,0,0,.45); --vm-shadow-lg:0 12px 40px rgba(0,0,0,.55);
  --vm-sb-bg:#120D0D; --vm-sb-fg:rgba(245,240,240,.7); --vm-sb-fg-strong:#F5F0F0;
  --vm-sb-border:rgba(255,255,255,.06); --vm-sb-hover:rgba(255,255,255,.04);
}

/* =========================================================
   MAPEAR PARA O BOOTSTRAP (variáveis globais)
   ========================================================= */
:root {
  --bs-primary:var(--vm-red); --bs-primary-rgb:232,25,44;
  --bs-body-bg:var(--vm-off); --bs-body-color:var(--vm-ink); --bs-body-color-rgb:24,20,20;
  --bs-border-color:var(--vm-border);
  --bs-secondary-bg:var(--vm-surface); --bs-tertiary-bg:var(--vm-off);
  --bs-emphasis-color:var(--vm-ink);
  --bs-body-font-family:var(--vm-f);
  --bs-link-color:var(--vm-red); --bs-link-color-rgb:232,25,44; --bs-link-hover-color:var(--vm-red-dark);
  --bs-border-radius:4px; --bs-border-radius-sm:2px; --bs-border-radius-lg:4px;
  --bs-border-radius-xl:6px; --bs-border-radius-2xl:8px; --bs-border-radius-pill:9999px;
}
:root[data-theme="dark"] {
  --bs-primary-rgb:255,61,81; --bs-body-color-rgb:245,240,240;
  --bs-emphasis-color:var(--vm-ink); --bs-secondary-color:var(--vm-ink-muted);
  --bs-tertiary-color:var(--vm-ink-muted);
}

html, body { background:var(--vm-off); color:var(--vm-ink); font-family:var(--vm-f); }
body { font-size:14px; }
a { color:var(--vm-red); }
a:hover { color:var(--vm-red-dark); }
.text-muted { color:var(--vm-ink-muted) !important; }
.text-primary { color:var(--vm-red) !important; }
.text-danger { color:var(--vm-red) !important; }
em, .fe { font-family:var(--vm-fe); font-style:italic; font-weight:300; color:var(--vm-red); }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family:var(--vm-f); font-weight:800; letter-spacing:-.01em; color:var(--vm-ink); }

/* =========================================================
   LAYOUT / SIDEBAR
   ========================================================= */
.sidebar {
  min-height:100vh; background:var(--vm-sb-bg) !important;
  border-right:1px solid var(--vm-sb-border); padding-bottom:24px;
}
.sidebar .vm-brand { display:flex; align-items:center; gap:10px; padding:18px 16px 16px; border-bottom:1px solid var(--vm-sb-border); margin-bottom:8px; }
.sidebar .vm-brand img { height:22px; width:auto; }
.sidebar .vm-brand .vm-brand-txt { color:var(--vm-sb-fg-strong); font-weight:800; font-size:14px; letter-spacing:-.01em; line-height:1; }
.sidebar .vm-brand .vm-brand-txt em { color:rgba(255,255,255,.5); }
.sidebar h5 { color:var(--vm-sb-fg-strong); }
.sidebar hr { border-color:var(--vm-sb-border); }
.sidebar .text-muted, .sidebar small { color:rgba(255,255,255,.4) !important; }
.sidebar .nav-link {
  color:var(--vm-sb-fg); font-weight:500; font-size:13px; padding:8px 16px;
  border-left:2px solid transparent; border-radius:0; display:flex; align-items:center; gap:9px;
}
.sidebar .nav-link i { opacity:.75; width:16px; text-align:center; }
.sidebar .nav-link:hover { background:var(--vm-sb-hover); color:var(--vm-sb-fg-strong); }
.sidebar .nav-link.active {
  background:var(--vm-red-subtle) !important; color:#fff !important; font-weight:700;
  border-left-color:var(--vm-red);
}
.sidebar .nav-link.active i { opacity:1; }
/* rótulo de grupo no menu (ex.: MÓDULOS) */
.sidebar .nav .text-uppercase, .sidebar .sidebar-heading {
  color:rgba(255,255,255,.35) !important; font-size:10px; font-weight:800; letter-spacing:.14em;
}

/* Theme toggle */
.vm-theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:auto; padding:6px 12px; margin:4px 12px; border:1px solid var(--vm-sb-border);
  background:transparent; color:var(--vm-sb-fg); border-radius:4px; cursor:pointer;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.vm-theme-toggle:hover { background:var(--vm-sb-hover); color:var(--vm-sb-fg-strong); }
.vm-theme-toggle .bi { font-size:14px; }

/* =========================================================
   BOTÕES
   ========================================================= */
.btn {
  font-family:var(--vm-f); font-weight:700; letter-spacing:.04em;
  border-radius:4px; border-width:1.5px; transition:all .12s;
}
.btn-primary { background:var(--vm-red); border-color:var(--vm-red); color:#fff; }
.btn-primary:hover,.btn-primary:focus { background:var(--vm-red-dark); border-color:var(--vm-red-dark); color:#fff; }
.btn-primary:disabled { background:var(--vm-red); border-color:var(--vm-red); opacity:.5; }
.btn-secondary { background:var(--vm-ink); border-color:var(--vm-ink); color:#fff; }
.btn-secondary:hover { background:var(--vm-ink-med); border-color:var(--vm-ink-med); color:#fff; }
.btn-danger { background:var(--vm-red); border-color:var(--vm-red); color:#fff; }
.btn-danger:hover { background:var(--vm-red-dark); border-color:var(--vm-red-dark); }
.btn-outline-primary { color:var(--vm-red); border-color:var(--vm-red); background:transparent; }
.btn-outline-primary:hover { background:var(--vm-red); border-color:var(--vm-red); color:#fff; }
.btn-outline-secondary { color:var(--vm-ink-muted); border-color:var(--vm-border); background:transparent; }
.btn-outline-secondary:hover { background:var(--vm-ink); border-color:var(--vm-ink); color:#fff; }
.btn-outline-danger { color:var(--vm-red); border-color:var(--vm-red); background:transparent; }
.btn-outline-danger:hover { background:var(--vm-red); border-color:var(--vm-red); color:#fff; }
.btn-success { background:var(--vm-green); border-color:var(--vm-green); color:#fff; }
.btn-light { background:var(--vm-surface); border-color:var(--vm-border); color:var(--vm-ink); }
.btn-link { color:var(--vm-red); }
.btn-group .btn { letter-spacing:0; }

/* =========================================================
   CARDS
   ========================================================= */
.card { background:var(--vm-card); border:1px solid var(--vm-border); border-radius:4px; box-shadow:none; color:var(--vm-ink); }
.card-header { background:var(--vm-card); border-bottom:1px solid var(--vm-border); font-weight:800; color:var(--vm-ink); letter-spacing:-.01em; }
.card-footer { background:var(--vm-off); border-top:1px solid var(--vm-border); }
.card.text-center .small { color:var(--vm-ink-muted); text-transform:uppercase; letter-spacing:.1em; font-weight:700; font-size:10px; }

/* =========================================================
   TABELAS
   ========================================================= */
.table {
  --bs-table-bg:var(--vm-card); --bs-table-color:var(--vm-ink);
  --bs-table-border-color:var(--vm-border);
  --bs-table-striped-bg:var(--vm-off); --bs-table-striped-color:var(--vm-ink);
  --bs-table-hover-bg:var(--vm-red-subtle); --bs-table-hover-color:var(--vm-ink);
  color:var(--vm-ink); border-color:var(--vm-border); vertical-align:middle;
}
.table > :not(caption) > * > * { background-color:var(--bs-table-bg); color:var(--vm-ink); border-bottom-color:var(--vm-border); }
.table thead th, thead.table-dark th, .table-dark th, .table-dark td {
  background:var(--vm-ink) !important; color:rgba(255,255,255,.85) !important;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  border-color:var(--vm-ink) !important;
}
:root[data-theme="dark"] .table thead th, :root[data-theme="dark"] thead.table-dark th {
  background:#000 !important; color:rgba(255,255,255,.78) !important; border-color:#000 !important;
}
.table-secondary, .table-secondary > * { --bs-table-bg:var(--vm-surface); background:var(--vm-surface) !important; color:var(--vm-ink) !important; }
.table-responsive { border-radius:4px; }

/* =========================================================
   BADGES (mapeia bg-* do Bootstrap p/ paleta DS)
   ========================================================= */
.badge { font-family:var(--vm-f); font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-radius:9999px; padding:.4em .7em; font-size:.7em; }
.badge.bg-primary { background:var(--vm-red) !important; color:#fff !important; }
.badge.bg-success { background:var(--vm-green-sub) !important; color:var(--vm-green-text) !important; }
.badge.bg-danger  { background:var(--vm-red) !important; color:#fff !important; }
.badge.bg-warning { background:var(--vm-yellow-sub) !important; color:var(--vm-yellow-text) !important; }
.badge.bg-info    { background:var(--vm-blue-sub) !important; color:var(--vm-blue-text) !important; }
.badge.bg-secondary { background:var(--vm-surface) !important; color:var(--vm-ink-med) !important; }
.badge.bg-dark    { background:var(--vm-ink) !important; color:var(--vm-off) !important; }
.badge.bg-light   { background:var(--vm-surface) !important; color:var(--vm-ink-med) !important; }
.badge.text-dark  { color:var(--vm-ink-med) !important; }

/* =========================================================
   FORMS
   ========================================================= */
.form-control, .form-select {
  background:var(--vm-card); color:var(--vm-ink); border:1.5px solid var(--vm-border);
  border-radius:4px; font-family:var(--vm-f);
}
.form-control::placeholder { color:var(--vm-ink-muted); opacity:.7; }
.form-control:focus, .form-select:focus { background:var(--vm-card); color:var(--vm-ink); border-color:var(--vm-red); box-shadow:0 0 0 .2rem var(--vm-red-subtle); }
.form-control:disabled, .form-select:disabled { background:var(--vm-surface); }
.form-label { font-weight:700; font-size:12px; color:var(--vm-ink); }
.form-text { color:var(--vm-ink-muted); }
.form-check-input { border:1.5px solid var(--vm-ink-muted); background-color:var(--vm-card); }
.form-check-input:checked { background-color:var(--vm-red); border-color:var(--vm-red); }
.form-check-input:focus { border-color:var(--vm-red); box-shadow:0 0 0 .2rem var(--vm-red-subtle); }
.input-group-text { background:var(--vm-surface); border:1.5px solid var(--vm-border); color:var(--vm-ink-med); }
.is-invalid, .form-control.is-invalid { border-color:var(--vm-red) !important; }
.invalid-feedback { color:var(--vm-red); }

/* =========================================================
   MODAL / DROPDOWN / TABS / PAGINATION / ALERT
   ========================================================= */
.modal-content { background:var(--vm-card); color:var(--vm-ink); border:1px solid var(--vm-border); border-radius:6px; box-shadow:var(--vm-shadow-lg); }
.modal-header, .modal-footer { border-color:var(--vm-border); }
.modal-title { font-weight:800; }
:root[data-theme="dark"] .btn-close { filter:invert(1) grayscale(1) brightness(1.6); }

.dropdown-menu { background:var(--vm-card); border:1px solid var(--vm-border); border-radius:4px; box-shadow:var(--vm-shadow-md); color:var(--vm-ink); }
.dropdown-item { color:var(--vm-ink); }
.dropdown-item:hover, .dropdown-item:focus { background:var(--vm-red-subtle); color:var(--vm-red); }
.dropdown-item.active, .dropdown-item:active { background:var(--vm-red); color:#fff; }
.dropdown-divider { border-color:var(--vm-border); }

.nav-tabs { border-bottom:1px solid var(--vm-border); }
.nav-tabs .nav-link { color:var(--vm-ink-muted); border:0; border-bottom:2px solid transparent; font-weight:700; }
.nav-tabs .nav-link:hover { color:var(--vm-ink); border-bottom-color:var(--vm-border); }
.nav-tabs .nav-link.active { color:var(--vm-red); background:transparent; border-bottom-color:var(--vm-red); }

.page-link { color:var(--vm-ink-med); background:var(--vm-card); border:1px solid var(--vm-border); }
.page-link:hover { color:var(--vm-red); background:var(--vm-off); border-color:var(--vm-border); }
.page-item.active .page-link { background:var(--vm-ink); border-color:var(--vm-ink); color:#fff; }
.page-item.disabled .page-link { color:var(--vm-ink-muted); background:var(--vm-card); border-color:var(--vm-border); opacity:.6; }

.alert { border-radius:4px; border:1px solid var(--vm-border); }
.alert-success { background:var(--vm-green-sub); color:var(--vm-green-text); border-color:transparent; border-left:3px solid var(--vm-green); }
.alert-danger  { background:var(--vm-red-subtle); color:var(--vm-red); border-color:transparent; border-left:3px solid var(--vm-red); }
.alert-warning { background:var(--vm-yellow-sub); color:var(--vm-yellow-text); border-color:transparent; border-left:3px solid var(--vm-yellow); }
.alert-info    { background:var(--vm-blue-sub); color:var(--vm-blue-text); border-color:transparent; border-left:3px solid var(--vm-blue); }
.alert-primary { background:var(--vm-red-subtle); color:var(--vm-red); border-color:transparent; border-left:3px solid var(--vm-red); }

/* =========================================================
   FILTROS / TABELA DINÂMICA (chips)
   ========================================================= */
.dt-chip { background:var(--vm-red-subtle) !important; color:var(--vm-red) !important; border:1px solid transparent !important; border-radius:9999px !important; font-weight:700; }
.dt-chip .dt-chip-x { color:var(--vm-red); }

/* Modal de envio de cobrança — tabs (sobrepõe inline azul) */
#env-tabs .nav-link { color:var(--vm-red) !important; background:var(--vm-card) !important; border-color:var(--vm-border) !important; }
#env-tabs .nav-link.active { color:#fff !important; background:var(--vm-red) !important; border-color:var(--vm-red) !important; }

/* superfícies utilitárias */
.bg-light { background:var(--vm-surface) !important; color:var(--vm-ink) !important; }
.bg-white { background:var(--vm-card) !important; }
.border { border-color:var(--vm-border) !important; }
hr { border-color:var(--vm-border); opacity:.6; }
code { color:var(--vm-red); background:var(--vm-surface); padding:1px 5px; border-radius:3px; }

/* logo do login: escuro no claro, invertido p/ claro no dark */
:root[data-theme="dark"] .vm-login-logo { filter:invert(1) brightness(1.8); }

/* dashboard: esconder valores monetarios (toggle do olho) */
.vm-blur--on {
  filter: blur(8px);
  transition: filter .15s ease;
  user-select: none;        /* impede copiar o valor borrado */
  pointer-events: none;     /* desabilita tooltip do grafico enquanto escondido */
}