/* ─────────────────────────────────────────────────────────────────────────────
   sicoob.css — Tema customizado SICOOB · Bootstrap 5.3 override
   Plataforma de Crédito Veicular · SICOOB UNIÃO DOS VALES (3164)
───────────────────────────────────────────────────────────────────────────── */

/* ── Variáveis globais ───────────────────────────────────────────────────────── */
:root {
  /* Cores primárias SICOOB — sobrescrevem o azul padrão do Bootstrap */
  --bs-primary:         #00ae9d;
  --bs-primary-rgb:     0, 174, 157;
  --bs-primary-dark:    #008878;
  --bs-primary-light:   #e0f7f5;

  /* Verde SICOOB */
  --bs-success:         #2e7d32;
  --bs-success-rgb:     46, 125, 50;

  /* Layout */
  --sidebar-w:          220px;
  --sidebar-w-min:      60px;
  --header-h:           56px;
  --bs-border-radius:   10px;
  --bs-box-shadow:      0 2px 16px rgba(0,0,0,.10);

  /* Cores de status da esteira */
  --status-inclusao:      #00ae9d;
  --status-analise:       #f59e0b;
  --status-aprovacao:     #10b981;
  --status-formalizacao:  #8b5cf6;
  --status-liberacao:     #2e7d32;
  --status-contrato-pago: #0ea5e9;
  --status-reprovado:     #ef4444;
  --status-cancelado:     #6b7280;
}

/* ── Dark mode ───────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --bs-body-bg:        #1a1a2e;
  --bs-body-color:     #e2e8f0;
  --bs-secondary-bg:   #16213e;
  --bs-border-color:   #2d3748;
}

/* ── Override de cor primária Bootstrap ──────────────────────────────────────── */
.btn-primary {
  background-color: var(--bs-primary);
  border-color:     var(--bs-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bs-primary-dark);
  border-color:     var(--bs-primary-dark);
}
.btn-outline-primary {
  color:        var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-outline-primary:hover {
  background-color: var(--bs-primary);
  border-color:     var(--bs-primary);
}
.text-primary  { color: var(--bs-primary) !important; }
.bg-primary    { background-color: var(--bs-primary) !important; }
.border-primary{ border-color: var(--bs-primary) !important; }

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
#sidebar {
  position:        fixed;
  top:             0;
  left:            0;
  bottom:          0;
  width:           var(--sidebar-w);
  background:      #0d2137;
  color:           #c8ddf0;
  overflow:        hidden;
  transition:      width .22s ease;
  z-index:         1030;
  display:         flex;
  flex-direction:  column;
  user-select:     none;
}

body.sidebar-collapsed #sidebar {
  width: var(--sidebar-w-min);
}

/* Brand */
#sidebar .sidebar-brand {
  height:          var(--header-h);
  display:         flex;
  align-items:     center;
  padding:         0 14px;
  border-bottom:   1px solid rgba(255,255,255,.08);
  white-space:     nowrap;
  overflow:        hidden;
  flex-shrink:     0;
}

#sidebar .sidebar-brand img {
  width:     32px;
  height:    32px;
  flex-shrink: 0;
}

#sidebar .sidebar-brand span {
  margin-left: 10px;
  font-size:   .875rem;
  font-weight: 600;
  color:       #fff;
  transition:  opacity .18s, width .18s;
  white-space: nowrap;
}

body.sidebar-collapsed #sidebar .sidebar-brand span {
  opacity:  0;
  width:    0;
  overflow: hidden;
}

/* Rótulos de seção */
#sidebar .nav-label {
  display:         block;
  font-size:       .65rem;
  text-transform:  uppercase;
  letter-spacing:  1px;
  color:           rgba(255,255,255,.35);
  padding:         14px 18px 4px;
  white-space:     nowrap;
  overflow:        hidden;
  transition:      opacity .18s, height .18s;
}

body.sidebar-collapsed #sidebar .nav-label {
  opacity: 0;
  height:  0;
  padding: 0;
}

/* Links de navegação */
#sidebar .nav-link {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       9px 16px;
  color:         #c8ddf0;
  white-space:   nowrap;
  border-radius: 8px;
  margin:        1px 6px;
  font-size:     .875rem;
  transition:    background .15s, color .15s;
  overflow:      hidden;
  text-decoration: none;
}

#sidebar .nav-link:hover {
  background: rgba(255,255,255,.10);
  color:      #fff;
}

#sidebar .nav-link.active {
  background: rgba(27,108,168,.45);
  color:      #fff;
}

#sidebar .nav-link i {
  font-size:   1.05rem;
  flex-shrink: 0;
  width:       24px;
  text-align:  center;
}

#sidebar .nav-link span {
  transition: opacity .18s;
  overflow:   hidden;
}

body.sidebar-collapsed #sidebar .nav-link span {
  opacity: 0;
  width:   0;
}

/* Rodapé da sidebar */
#sidebar .sidebar-footer {
  padding:      10px 16px;
  border-top:   1px solid rgba(255,255,255,.06);
  white-space:  nowrap;
  overflow:     hidden;
}

body.sidebar-collapsed #sidebar .sidebar-footer {
  opacity: 0;
}

/* ── Wrapper principal ───────────────────────────────────────────────────────── */
#main-wrapper {
  margin-left:     var(--sidebar-w);
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  transition:      margin-left .22s ease;
}

body.sidebar-collapsed #main-wrapper {
  margin-left: var(--sidebar-w-min);
}

/* ── Header / topbar ─────────────────────────────────────────────────────────── */
#topbar {
  height:      var(--header-h);
  background:  var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  position:    sticky;
  top:         0;
  z-index:     1020;
  display:     flex;
  align-items: center;
  padding:     0 1.25rem;
  gap:         .75rem;
}

.topbar-toggler {
  background:    none;
  border:        none;
  font-size:     1.25rem;
  color:         var(--bs-body-color);
  cursor:        pointer;
  padding:       4px 7px;
  border-radius: 7px;
  line-height:   1;
  transition:    background .15s;
}

.topbar-toggler:hover {
  background: rgba(0,0,0,.07);
}

[data-bs-theme="dark"] .topbar-toggler:hover {
  background: rgba(255,255,255,.08);
}

/* ── Conteúdo da página ──────────────────────────────────────────────────────── */
#page-content {
  flex:             1;
  padding:          1.5rem;
  background-color: #f0f4f9;
}

[data-bs-theme="dark"] #page-content {
  background-color: #111827;
}

/* ── Rodapé ──────────────────────────────────────────────────────────────────── */
#footer {
  padding:    .6rem 1.25rem;
  font-size:  .75rem;
  color:      var(--bs-secondary-color);
  border-top: 1px solid var(--bs-border-color);
  text-align: center;
}

/* ── Página de autenticação ──────────────────────────────────────────────────── */
.auth-page {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      linear-gradient(135deg, #0d2137 0%, #00ae9d 100%);
  padding:         1rem;
}

.auth-card {
  width:         100%;
  max-width:     440px;
  border-radius: 16px;
  box-shadow:    0 8px 40px rgba(0,0,0,.30);
}

/* ── Badges de status da esteira ─────────────────────────────────────────────── */
.badge-inclusao      { background-color: var(--status-inclusao); }
.badge-analise       { background-color: var(--status-analise); color: #000; }
.badge-aprovacao     { background-color: var(--status-aprovacao); }
.badge-formalizacao  { background-color: var(--status-formalizacao); }
.badge-liberacao     { background-color: var(--status-liberacao); }
.badge-contrato-pago { background-color: var(--status-contrato-pago); }
.badge-reprovado     { background-color: var(--status-reprovado); }
.badge-cancelado     { background-color: var(--status-cancelado); }

/* ── Cards da mesa de operações ──────────────────────────────────────────────── */
.card-esteira {
  border-left: 4px solid transparent;
  cursor:      pointer;
  transition:  border-color .15s, box-shadow .15s;
}
.card-esteira:hover,
.card-esteira.active {
  box-shadow: var(--bs-box-shadow);
}
.card-esteira.c-inclusao      { border-color: var(--status-inclusao); }
.card-esteira.c-analise       { border-color: var(--status-analise); }
.card-esteira.c-aprovacao     { border-color: var(--status-aprovacao); }
.card-esteira.c-formalizacao  { border-color: var(--status-formalizacao); }
.card-esteira.c-liberacao     { border-color: var(--status-liberacao); }
.card-esteira.c-contrato-pago { border-color: var(--status-contrato-pago); }

/* ── Utilitários ─────────────────────────────────────────────────────────────── */
.overflow-y-auto { overflow-y: auto; }

/* ── Responsividade mobile ───────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  #sidebar {
    transform:  translateX(-100%);
    transition: transform .22s ease, width .22s ease;
    width:      var(--sidebar-w);
  }

  #sidebar.mobile-open {
    transform: translateX(0);
  }

  #main-wrapper {
    margin-left: 0 !important;
  }

  #page-content {
    padding: 1rem;
  }
}