/* ============================================================
   BI SCOLimp — Estilo Principal
   Cor: roxo Vivo — Púrpura Vivo (#660099)
   ============================================================ */

:root {
  --scolimp-purple: #660099;   /* Púrpura Vivo */
  --scolimp-dark:   #4d0073;   /* Roxo escuro */
  --scolimp-light:  #F3EAF8;
  --text-main:  #1a1a2e;
  --card-radius: 12px;
  --shadow-sm:  0 2px 8px rgba(0,0,0,.08);
  --shadow-md:  0 6px 24px rgba(0,0,0,.12);
}

/* ── Base ─────────────────────────────────────────────────── */
body { font-family: 'Segoe UI', Arial, sans-serif; color: var(--text-main); background: #f4f6fb; }

/* ── Topbar ───────────────────────────────────────────────── */
:root {
  --sidebar-w:      185px;
  --topbar-h:       56px;
  --sidebar-bg:     #4d0073;
  --sidebar-hover:  rgba(255,255,255,.12);
  --sidebar-active: rgba(255,255,255,.22);
  --sidebar-text:   #fff;
}

.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: linear-gradient(90deg, var(--scolimp-dark) 0%, var(--scolimp-purple) 60%, #7c1bb3 100%);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem;
  z-index: 1040;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.topbar-left  { display: flex; align-items: center; gap: .75rem; }
.topbar-right { display: flex; align-items: center; gap: .75rem; color: #fff; }
.topbar-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.topbar-brand-name { color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .3px; }
.topbar-user  { color: rgba(255,255,255,.85); font-size: .875rem; }
.topbar-logout, .topbar-print {
  color: rgba(255,255,255,.75); font-size: 1.1rem;
  background: none; border: none; cursor: pointer;
  text-decoration: none; transition: color .15s;
}
.topbar-logout:hover, .topbar-print:hover { color: #fff; }
.sidebar-toggle-btn {
  background: none; border: none; color: #fff;
  font-size: 1.4rem; cursor: pointer; padding: 4px 8px;
  border-radius: 6px; line-height: 1;
  transition: background .15s;
}
.sidebar-toggle-btn:hover { background: rgba(255,255,255,.15); }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
  position: fixed; top: var(--topbar-h); left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--topbar-h));
  background: var(--sidebar-bg);
  overflow-y: auto; overflow-x: hidden;
  z-index: 1030;
  transition: width .25s ease, transform .25s ease;
  display: flex; flex-direction: column;
  padding-bottom: 1rem;
}
.sidebar.collapsed { width: 58px; }

/* Itens do sidebar */
.sidebar-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem;
  color: var(--sidebar-text); text-decoration: none;
  font-size: .72rem; font-weight: 500;
  border: none; background: none; width: 100%;
  text-align: left; cursor: pointer;
  transition: background .15s;
  white-space: nowrap; overflow: hidden;
}
.sidebar-item i { font-size: .70rem; flex-shrink: 0; min-width: 22px; text-align: center; }
.sidebar-item:hover   { background: var(--sidebar-hover); color: #fff; }
.sidebar-item.active  { background: var(--sidebar-active); color: #fff; font-weight: 700; }
.sidebar-item-logout  { margin-top: auto; color: rgba(255,255,255,.7); }
.sidebar-item-logout:hover { background: rgba(220,53,69,.35); color: #fff; }

/* Grupos com submenu */
.sidebar-group { display: flex; flex-direction: column; }
.sidebar-arrow { font-size: .55rem; transition: transform .2s; margin-left: auto; flex-shrink: 0; }
.sidebar-group.open .sidebar-arrow { transform: rotate(180deg); }

.sidebar-submenu {
  display: none;
  flex-direction: column;
  background: rgba(0,0,0,.18);
}
.sidebar-group.open .sidebar-submenu { display: flex; }

.sidebar-sub-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 1rem .55rem 2.5rem;
  color: rgba(255,255,255,.82); font-size: .65rem;
  text-decoration: none; white-space: nowrap; overflow: hidden;
  transition: background .15s, color .15s;
}
.sidebar-sub-item i { font-size: .62rem; flex-shrink: 0; }
.sidebar-sub-item:hover { background: var(--sidebar-hover); color: #fff; }

.sidebar-sub-label {
  padding: .5rem 1rem .2rem 2.5rem;
  font-size: .58rem; text-transform: uppercase;
  letter-spacing: .6px; color: rgba(255,255,255,.45);
  font-weight: 600;
}
.sidebar-sub-divider {
  height: 1px; background: rgba(255,255,255,.12);
  margin: .25rem 1rem;
}

.sidebar-divider {
  height: 1px; background: rgba(255,255,255,.2);
  margin: .5rem .75rem;
}

/* Sidebar collapsed — esconde texto, mantém ícones */
.sidebar.collapsed .sidebar-item span,
.sidebar.collapsed .sidebar-arrow,
.sidebar.collapsed .sidebar-sub-label,
.sidebar.collapsed .sidebar-submenu { display: none !important; }
.sidebar.collapsed .sidebar-item { justify-content: center; padding: .75rem; gap: 0; }

/* Pré-colapso via <html> — evita flash */
html.sb-collapsed .sidebar { width: 58px; overflow: hidden; }
html.sb-collapsed .sidebar .sidebar-item span,
html.sb-collapsed .sidebar .sidebar-arrow,
html.sb-collapsed .sidebar .sidebar-sub-label,
html.sb-collapsed .sidebar .sidebar-submenu { display: none !important; }
html.sb-collapsed .sidebar .sidebar-item { justify-content: center; padding: .75rem; gap: 0; }
html.sb-collapsed .main-wrapper  { margin-left: 58px; }
html.sb-collapsed .main-footer   { margin-left: 58px; }

/* ── Main Wrapper ─────────────────────────────────────────── */
.main-wrapper {
  margin-left: var(--sidebar-w);
  margin-top: var(--topbar-h);
  min-height: calc(100vh - var(--topbar-h));
  transition: margin-left .25s ease;
}
.main-wrapper.sidebar-collapsed { margin-left: 58px; }

/* ── Footer ───────────────────────────────────────────────── */
.main-footer {
  margin-left: var(--sidebar-w);
  background: #212529; color: #6c757d;
  padding: .5rem 1rem;
  font-size: .68rem;
  transition: margin-left .25s ease;
}
.main-wrapper.sidebar-collapsed ~ .main-footer { margin-left: 58px; }
.footer-link { color: #adb5bd; text-decoration: none; }
.footer-link:hover { color: #fff; text-decoration: underline; }

/* ── Mobile: sidebar vira overlay ────────────────────────── */
@media (max-width: 576px) {
  .sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; }
  .sidebar.mobile-open { transform: translateX(0); }
  .main-wrapper, .main-footer { margin-left: 0 !important; }
}

/* ── Cor de marca (barra, topbar) ─────────────────────────── */
.bg-scolimp { background: linear-gradient(90deg, var(--scolimp-dark) 0%, var(--scolimp-purple) 100%) !important; }

/* ── Hub Category Header ──────────────────────────────────── */
.hub-category-header {
  display: flex; align-items: center;
  font-size: .70rem; text-transform: uppercase; letter-spacing: .7px;
  padding-bottom: .35rem;
  border-bottom: 2px solid currentColor;
  opacity: .9;
}

/* ── Hub Cards ────────────────────────────────────────────── */
.hub-card-title {
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: .78rem;
}
.hub-desc { display: none; font-size: .68rem; }
a:hover .hub-desc { display: block; }

.hub-card {
  border-radius: var(--card-radius);
  transition: transform .18s ease, box-shadow .18s ease;
  background: #fff;
}
.hub-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md) !important;
}
.hub-card-wip { background: #f3f4f6 !important; box-shadow: none !important; }
.hub-card-wip:hover { transform: none !important; box-shadow: none !important; }
.hub-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--scolimp-purple), #8a1ac2);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.hub-icon i { color: #fff; font-size: .90rem; }

/* ── DRE Table ────────────────────────────────────────────── */
.dre-table { font-size: .75rem; }
.dre-table thead th {
  background: var(--scolimp-purple); color: #fff;
  position: sticky; top: 0; z-index: 2;
  padding: 10px 8px; white-space: nowrap;
}
.dre-table tbody tr:hover { background: var(--scolimp-light); }
.dre-table .row-grupo td {
  font-weight: 700; background: #f8f9fa;
  border-top: 2px solid #dee2e6;
}
.dre-table .row-resultado td {
  font-weight: 800; background: #fff3cd;
  border-top: 3px solid #ffc107;
  font-size: .80rem;
}
.dre-table .row-ebitda td {
  font-weight: 800; color: var(--scolimp-purple);
  background: var(--scolimp-light);
}
.dre-table .row-negativo td { color: #dc3545; }
.dre-table td, .dre-table th { padding: 7px 10px; }
.dre-table .col-label { min-width: 200px; }
.dre-table .col-valor  { text-align: right; min-width: 100px; }
.dre-table .col-pct    { text-align: right; min-width: 70px; color: #6c757d; font-size:.68rem; }
.dre-table .acumulado  { background:#dbeeff !important; font-weight:700; }

/* ── KPI Cards ────────────────────────────────────────────── */
.kpi-card {
  border-radius: var(--card-radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--scolimp-purple);
}
.kpi-card .kpi-label { font-size: .65rem; text-transform: uppercase; letter-spacing:.5px; color:#6c757d; }
.kpi-card .kpi-value { font-size: 1.1rem; font-weight: 800; color: var(--text-main); }
.kpi-card .kpi-sub   { font-size: .68rem; color: #6c757d; }
.kpi-card.kpi-positive .kpi-value { color: #198754; }
.kpi-card.kpi-negative .kpi-value { color: #dc3545; }
.kpi-card.kpi-warning  .kpi-value { color: #fd7e14; }

/* ── Gráficos ─────────────────────────────────────────────── */
.chart-container { position: relative; background: #fff; border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm); padding: 1.25rem; }
.chart-title { font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: #6c757d; margin-bottom: .75rem; }

/* ── Análise / Caixas de info ─────────────────────────────── */
.analise-box {
  background: linear-gradient(135deg, var(--scolimp-light), #fff);
  border-left: 4px solid var(--scolimp-purple);
  border-radius: var(--card-radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.analise-box .analise-titulo { font-weight: 700; color: var(--scolimp-purple); margin-bottom:.5rem; }

/* ── Filtro período ───────────────────────────────────────── */
.filtro-bar { background:#fff; border-radius:var(--card-radius);
  padding:.75rem 1.25rem; box-shadow:var(--shadow-sm); margin-bottom:1.5rem; }

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb-scolimp { background: none; padding: 0; margin-bottom: 1rem; font-size: .70rem; }
.breadcrumb-scolimp .breadcrumb-item.active { color: var(--scolimp-purple); font-weight: 600; }

/* ── Badges variação ─────────────────────────────────────── */
.badge-up   { background:#d1fae5; color:#065f46; font-weight:700; }
.badge-down { background:#fee2e2; color:#991b1b; font-weight:700; }
.badge-neu  { background:#f3f4f6; color:#6b7280; font-weight:700; }

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .no-print, nav, footer, .filtro-bar .btn, .btn-print { display: none !important; }
  body { background: #fff !important; font-size: 11pt; }
  .dre-table { font-size: 9pt; }
  .dre-table thead th { background: var(--scolimp-purple) !important; -webkit-print-color-adjust: exact; }
  .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
  .kpi-card { border: 1px solid #dee2e6 !important; }
  h2, h3 { color: var(--scolimp-purple) !important; }
  a { text-decoration: none !important; color: inherit !important; }
  .page-break { page-break-before: always; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .dre-table { font-size: .68rem; }
  .kpi-card .kpi-value { font-size: 1.0rem; }
}