/* =========================================================
   DASHBOARD FINANCEIRO — Tema visual moderno
   ========================================================= */

:root{
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 78px;
  --topbar-height: 66px;

  --brand: #4f46e5;
  --brand-light: #6366f1;
  --brand-soft: #eef2ff;

  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --info: #0891b2;

  --bg-body: #f4f6fb;
  --bg-surface: #ffffff;
  --bg-sidebar: #12172b;
  --text-main: #1e2433;
  --text-muted: #7b8194;
  --border-color: #e9ecf3;
  --shadow-soft: 0 4px 18px rgba(20,20,50,.06);
  --radius-lg: 16px;
  --radius-md: 12px;
}

[data-bs-theme="dark"]{
  --bg-body: #0f1320;
  --bg-surface: #161b2c;
  --bg-sidebar: #0b0e19;
  --text-main: #e7e9f3;
  --text-muted: #98a0b6;
  --border-color: #262c42;
  --brand-soft: #1b2140;
  --shadow-soft: 0 4px 18px rgba(0,0,0,.35);
}

*{ box-sizing: border-box; }
img{ max-width: 100%; }

body{
  background: var(--bg-body);
  color: var(--text-main);
  font-family: "Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  transition: background .25s ease, color .25s ease;
}

/* ==========================================================
   AUTH PAGES
==========================================================*/

.auth-body{
    margin:0;
    min-height:100vh;
    overflow:hidden;
    background:#000;
    position:relative;
}


/* Escurecimento */

.login-video-overlay{

    position:fixed;
    inset:0;

    z-index:1;

    background:

    linear-gradient(
        to bottom,
        rgba(0,0,0,.70),
        rgba(0,0,0,.25) 40%,
        rgba(0,0,0,.55)
    );

}

/* Container */

.auth-wrapper{

    position:relative;

    z-index:5;

    width:100%;
    height:100vh;

    display:flex;

    justify-content:center;
    align-items:center;

    padding:30px;

}

/* Card */

.auth-card{
    width:460px;
    max-width:none;
    min-width:460px;
}

.auth-brand{
    text-align:center;
    margin-bottom:28px;
}

.auth-logo{
    width:60px;
    height:60px;
    margin-bottom:16px;
}

.auth-brand h1{
    font-size:30px;
    font-weight:700;
}

@media(max-width:768px){

    .login-video-bg{

        transform:translate(-50%,-50%) scale(1.18);

    }

    .auth-card{

        max-width:100%;
        padding:30px;

    }

}
.app-shell{ display:flex; min-height: 100vh; }

/* Painel Geral: 5 KPI cards numa linha só em telas grandes (>=1200px) */
@media (min-width: 1200px){
  .kpi-row-5 > .kpi-col-5{ flex: 0 0 20%; max-width: 20%; }
}

.sidebar{
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  color: #cdd2e6;
  display:flex; flex-direction:column;
  position: fixed; top:0; left:0; bottom:0;
  transition: width .25s ease;
  z-index: 1030;
}
.sidebar.collapsed{ width: var(--sidebar-width-collapsed); }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-text{ display:none; }
.sidebar.collapsed .sidebar-social{ display:none; }

.sidebar-brand{
  display:flex; flex-direction:column; align-items:flex-start; gap:.2rem;
  padding: 1.3rem 1.25rem;
  font-weight: 700; font-size: 1.05rem; color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand i{ color: var(--brand-light); font-size: 1.4rem; }

.sidebar-nav{ flex:1; padding: .9rem .6rem; overflow-y:auto; }
.sidebar-nav .nav-link{
  display:flex; align-items:center; gap:.85rem;
  padding: .7rem .85rem; margin-bottom:.2rem;
  border-radius: 10px; color:#aeb4cc; font-size:.9rem; font-weight:500;
  transition: all .15s ease;
}
.sidebar-nav .nav-link i{ font-size:1.05rem; width:20px; text-align:center; }
.sidebar-nav .nav-link:hover{ background: rgba(255,255,255,.06); color:#fff; }
.sidebar-nav .nav-link.active{ background: var(--brand); color:#fff; box-shadow: 0 4px 14px rgba(79,70,229,.4); }
.sidebar-nav .nav-link-logout{ margin-top: .5rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: 1rem; }

.sidebar-social{ display:flex; gap: .75rem; padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-social a{ color:#8790ab; font-size:1.05rem; }
.sidebar-social a:hover{ color:#fff; }

.main-content{
  margin-left: var(--sidebar-width);
  flex:1; display:flex; flex-direction:column;
  min-width:0;
  transition: margin-left .25s ease;
}
.sidebar.collapsed ~ .main-content{ margin-left: var(--sidebar-width-collapsed); }

.topbar{
  height: var(--topbar-height);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  display:flex; align-items:center; gap: 1rem;
  padding: 0 1.25rem;
  position: sticky; top:0; z-index: 1020;
}
.btn-icon{
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-color); background: var(--bg-surface); color: var(--text-main);
}
.btn-icon:hover{ background: var(--brand-soft); }

.topbar-search{
  flex:1; max-width: 420px;
  display:flex; align-items:center; gap:.5rem;
  background: var(--bg-body); border:1px solid var(--border-color);
  border-radius: 10px; padding: .45rem .8rem; color: var(--text-muted);
}
.topbar-search input{ border:0; background:transparent; outline:none; width:100%; color: var(--text-main); }

.topbar-actions{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.credor-logo-topbar{ height: 32px; width: auto; object-fit: contain; }
.sidebar-brand .brand-icon{ height: 30px; width: 30px; object-fit: contain; flex-shrink: 0; }
.badge-dot{ position:absolute; top:7px; right:7px; width:8px; height:8px; border-radius:50%; background: var(--danger); }
.notif-menu{ width: 300px; }

.user-chip{ display:flex; align-items:center; gap:.6rem; border:1px solid var(--border-color); border-radius: 10px; padding: .3rem .6rem; }
.avatar{
  width:32px; height:32px; border-radius:50%;
  background: var(--brand); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}

.page-content{ padding: 1.5rem; flex:1; }

/* ---------- CARDS / KPI ---------- */
.kpi-card{
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-soft);
  height:100%;
}
.kpi-card .kpi-icon{
  width:44px; height:44px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; margin-bottom:.75rem;
}
.kpi-card .kpi-value{ font-size: 1.55rem; font-weight: 700; }
.kpi-card .kpi-label{ color: var(--text-muted); font-size: .82rem; }
.kpi-trend{ font-size:.78rem; font-weight:600; display:inline-flex; align-items:center; gap:.25rem; }
.kpi-trend.up{ color: var(--success); }
.kpi-trend.down{ color: var(--danger); }

.bg-soft-primary{ background: var(--brand-soft); color: var(--brand); }
.bg-soft-success{ background: rgba(22,163,74,.12); color: var(--success); }
.bg-soft-danger{ background: rgba(220,38,38,.12); color: var(--danger); }
.bg-soft-warning{ background: rgba(217,119,6,.12); color: var(--warning); }
.bg-soft-info{ background: rgba(8,145,178,.12); color: var(--info); }

.panel{
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 1.4rem;
  margin-bottom: 1.5rem;
}
.panel-header{ display:flex; align-items:center; justify-content:between; margin-bottom: 1rem; }

/* Cards com a mesma altura dentro da linha — usado só onde marcado
   explicitamente com .row-cards-equal (Painel Geral), pra não vazar esse
   comportamento pras páginas que têm só 1 painel por linha (Recebimento
   Comparativo, Operacional etc.), onde isso fazia o card esticar até
   preencher o espaço vazio da página inteira. */
.row-cards-equal > [class*="col-"] > .panel{
  height: calc(100% - 1.5rem);
  display: flex;
  flex-direction: column;
}
.row-cards-equal > [class*="col-"] > .panel .panel-header{ flex: 0 0 auto; }
.panel-title{ font-weight: 700; font-size: 1rem; margin:0; }

.filters-bar{
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display:flex; flex-wrap:wrap; gap: .75rem; align-items:flex-end;
}
.filters-bar .form-label{ font-size:.75rem; color: var(--text-muted); margin-bottom:.25rem; }
.filters-bar select, .filters-bar input{ min-width: 150px; }

.chart-wrap{ position: relative; height: 300px; flex: 0 0 300px; }

/* Legenda de "Distribuição de Ações": ocupa o espaço que sobrar dentro do
   card (que agora tem a mesma altura dos vizinhos na linha, via .panel
   flex+height:100%) e só rola quando o conteúdo não couber — assim o card
   nunca fica maior nem menor que os outros da mesma linha. */
.legenda-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
.legenda-scroll::-webkit-scrollbar{ width: 6px; }
.legenda-scroll::-webkit-scrollbar-thumb{ background: var(--border-color); border-radius: 3px; }

.global-loader{
  position: fixed; inset:0; background: rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center; z-index: 2000;
}

table.dataTable{ font-size: .85rem; }

@keyframes spin-anim{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
.spin{ animation: spin-anim .6s ease; }

/* ---------- Responsivo ---------- */
@media (max-width: 992px){
  .sidebar{ transform: translateX(-100%); width: var(--sidebar-width); }
  .sidebar.mobile-open{ transform: translateX(0); }
  .main-content{ margin-left:0 !important; }
  .topbar-search{ display:none; }
}

/* Telas bem estreitas (celulares pequenos, ~360px e menos): aperta espaçamentos
   e some com ícones menos essenciais da topbar pra garantir que nunca estoure
   largura horizontal (o que forçaria a página inteira a rolar de lado). */
@media (max-width: 420px){
  .topbar{ gap:.4rem; padding:0 .6rem; }
  #btnFullscreen, #toggleTheme{ display:none; }
  .kpi-card{ padding:1rem .9rem; }
  .kpi-card .kpi-value{ font-size:1.15rem; }
  .panel{ padding:1rem; }
}