:root { --cor-primaria: #0d6efd; --sidebar-bg: #1f2937; --sidebar-w: 250px; }

/* Cor primária dinâmica sobrepõe o Bootstrap */
.btn-primary { --bs-btn-bg: var(--cor-primaria); --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-bg: color-mix(in srgb, var(--cor-primaria) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--cor-primaria) 85%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--cor-primaria) 80%, black); }
.text-primary { color: var(--cor-primaria) !important; }
.bg-primary { background-color: var(--cor-primaria) !important; }
.btn-outline-primary { --bs-btn-color: var(--cor-primaria); --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-bg: var(--cor-primaria); --bs-btn-hover-border-color: var(--cor-primaria); }
a { color: var(--cor-primaria); }

body { background: #f3f4f6; }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
  width: var(--sidebar-w); background: var(--sidebar-bg); color: #cbd5e1;
  display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040;
  transition: transform .2s ease;
}
.sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; background:#fff; padding:2px; }
.sidebar-title { font-weight: 600; color: #fff; font-size: .98rem; line-height: 1.1; }
.sidebar-nav { padding: .6rem; overflow-y: auto; flex: 1; }
.sidebar-nav .nav-link { color: #cbd5e1; border-radius: 8px; padding: .55rem .8rem; margin-bottom: 2px; display: flex; align-items: center; gap: .6rem; font-size: .93rem; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-nav .nav-link.active { background: var(--cor-primaria); color: #fff; }
.sidebar-sep { text-transform: uppercase; font-size: .68rem; letter-spacing: .05em; color: #64748b; padding: .9rem .8rem .3rem; }
.sidebar-logout { padding: .8rem; border-top: 1px solid rgba(255,255,255,.08); }

.app-main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }
.app-topbar { background: #fff; height: 60px; display: flex; align-items: center; gap: 1rem; padding: 0 1.2rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); position: sticky; top: 0; z-index: 1030; }
.topbar-logo { height: 38px; width: 38px; object-fit: contain; border-radius: 8px; background: #fff; padding: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.topbar-title { font-size: 1.1rem; font-weight: 600; margin: 0; flex: 1; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--cor-primaria); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.app-content { padding: 1.4rem; flex: 1; }

/* ---------- Auth ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: linear-gradient(135deg, var(--cor-primaria), color-mix(in srgb, var(--cor-primaria) 40%, #111827)); }
.auth-card { width: 100%; max-width: 410px; background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25); padding: 2rem; }
.auth-logo { width: 84px; height: 84px; object-fit: cover; margin: 0 auto .6rem; display: block; border-radius: 18px; background: #fff; padding: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.auth-inner { width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center; }

/* ---------- Selo LinoCode (todas as telas) ---------- */
.linocode-seal { text-align: center; padding: .9rem 1rem 1.15rem; font-size: .75rem; line-height: 1.2; margin-top: auto; }
.linocode-seal .lc-seal-inner { display: inline-flex; align-items: center; gap: .45rem; }
.linocode-seal strong { font-weight: 600; }
.linocode-seal .lc-mark { flex: 0 0 auto; }
.linocode-seal .lc-mark .lc-bg { fill: #fff; stroke: rgba(0,0,0,.10); }
.linocode-seal .lc-mark .lc-glyph { stroke: var(--cor-primaria); }
.app-main .linocode-seal { color: #94a3b8; }
.app-main .linocode-seal strong { color: #475569; }
.auth-wrap .linocode-seal { color: rgba(255,255,255,.9); }
.auth-wrap .linocode-seal strong { color: #fff; }

/* ---------- Cards / stats ---------- */
.card { border: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-radius: 12px; }
.stat-card { display: flex; align-items: center; gap: 1rem; }
.stat-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.stat-label { color: #6b7280; font-size: .85rem; }

/* ---------- Responsivo ---------- */
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0; }
}

/* ---------- Documento de impressão (relatórios com design próprio) ---------- */
.print-body { background: #e9ecef; }
.print-toolbar { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid #dee2e6; padding: .6rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.doc-print { background: #fff; max-width: 210mm; margin: 1.2rem auto; padding: 16mm 14mm; box-shadow: 0 2px 12px rgba(0,0,0,.12); color: #1f2937; }
.doc-head { display: flex; align-items: center; gap: 1rem; border-bottom: 3px solid var(--cor-primaria); padding-bottom: .8rem; margin-bottom: .6rem; }
.doc-logo { height: 60px; width: 60px; object-fit: contain; }
.doc-org { font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; }
.doc-title { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--cor-primaria); }
.doc-sub { font-size: .82rem; color: #6b7280; }
.doc-filtros { font-size: .82rem; background: #f3f4f6; border-radius: 6px; padding: .4rem .7rem; margin-bottom: 1rem; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.doc-grid > * { min-width: 0; } /* itens do grid encolhem — senão o gráfico estoura o documento */
.doc-chart { border: 1px solid #e5e7eb; border-radius: 8px; padding: .5rem; height: 180px; display: flex; flex-direction: column; min-width: 0; }
.doc-chart canvas { max-width: 100%; }
.doc-chart-wide { grid-column: span 2; }
.doc-chart-t { font-size: .8rem; font-weight: 600; text-align: center; margin-bottom: .3rem; }
.doc-chart canvas { flex: 1; min-height: 0; }
.doc-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.doc-table th { background: var(--cor-primaria); color: #fff; text-align: left; padding: .4rem .5rem; }
.doc-table td { padding: .35rem .5rem; border-bottom: 1px solid #e5e7eb; }
.doc-table tbody tr:nth-child(even) { background: #f9fafb; }

/* ---------- Responsividade global (nada estoura a largura da tela) ---------- */
img, svg, video { max-width: 100%; height: auto; }
canvas { max-width: 100%; }
.app-main, .app-content { min-width: 0; }
.app-content { max-width: 100%; }
/* impede que gráficos/tabelas estiquem a coluna e vazem a tela */
.row > * { min-width: 0; }
.table-responsive { width: 100%; }
@media (max-width: 767.98px) {
  .app-content { padding: 1rem 0.8rem; }
  .doc-print { padding: 9mm 6mm; margin: .6rem auto; }
  .doc-head { flex-wrap: wrap; }
  .doc-title { font-size: 1.25rem; }
  .doc-table { font-size: .72rem; }
}

/* ---------- Impressão ---------- */
@media print {
  .app-sidebar, .app-topbar, .no-print, .btn, .sidebar-logout, .linocode-seal { display: none !important; }
  .app-main { margin-left: 0 !important; }
  .app-content { padding: 0 !important; }
  body { background: #fff !important; }
  .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
  .print-body { background: #fff !important; }
  .doc-print { box-shadow: none !important; margin: 0 !important; max-width: none !important; padding: 0 !important; }
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-chart { break-inside: avoid; }
}