/* ============================================================
   Radar de Dividendos — App CSS
   Bootstrap 5 dark theme + custom fintech components
   ============================================================ */

:root {
  --rd-bg:          #0d1117;
  --rd-bg-card:     #161b22;
  --rd-bg-sidebar:  #0d1117;
  --rd-border:      #30363d;
  --rd-text:        #e6edf3;
  --rd-text-muted:  #8b949e;
  --rd-primary:     #2188ff;
  --rd-primary-dim: #1a2a4a;
  --rd-success:     #3fb950;
  --rd-danger:      #f85149;
  --rd-warning:     #d29922;
  --rd-info:        #58a6ff;
  --rd-gold:        #d4a017;
  --rd-sidebar-w:   220px;
  --rd-navbar-h:    56px;
}

/* Bootstrap define .text-muted com um cinza calibrado para fundo claro
   (#6c757d). Nesse tema escuro isso fica quase ilegível — sobrescreve
   com a variável de texto secundário do próprio tema, que tem contraste
   adequado contra --rd-bg / --rd-bg-card. */
.text-muted { color: var(--rd-text-muted) !important; }

/* ── Reset / Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--rd-bg);
  color:       var(--rd-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  font-size:   14px;
  line-height: 1.5;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: var(--rd-bg); }
::-webkit-scrollbar-thumb   { background: var(--rd-border); border-radius: 3px; }

/* ── Auth page ─────────────────────────────────────────────── */
.auth-body {
  min-height: 100vh;
  display:    flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, #0d1117 0%, #1a237e22 100%);
  padding:    16px;
}
.auth-wrapper  { width: 100%; max-width: 420px; }
.auth-card     { background: var(--rd-bg-card); border: 1px solid var(--rd-border); border-radius: 12px; padding: 32px; }
.auth-logo     { max-height: 64px; margin-bottom: 8px; }
.auth-brand    { font-size: 1.4rem; font-weight: 800; color: var(--rd-text); }

/* Nav pills em auth */
.nav-pills .nav-link       { color: var(--rd-text-muted); background: transparent; border-radius: 8px; }
.nav-pills .nav-link.active{ background: var(--rd-primary); color: #fff; }

/* ── App layout ────────────────────────────────────────────── */
.app-body    { background: var(--rd-bg); min-height: 100vh; }

.app-navbar {
  background:   var(--rd-bg-card);
  border-bottom: 1px solid var(--rd-border);
  height:        var(--rd-navbar-h);
  z-index:       1030;
}
.brand-text    { color: var(--rd-text); font-size: 1rem; }

.app-layout {
  display:      flex;
  min-height:   calc(100vh - var(--rd-navbar-h));
}

/* ── Sidebar ───────────────────────────────────────────────── */
.app-sidebar {
  width:          var(--rd-sidebar-w);
  background:     var(--rd-bg-sidebar);
  border-right:   1px solid var(--rd-border);
  padding:        20px 0;
  position:       sticky;
  top:            var(--rd-navbar-h);
  height:         calc(100vh - var(--rd-navbar-h));
  overflow-y:     auto;
  flex-shrink:    0;
}
.sidebar-nav    { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.sidebar-link {
  display:        flex;
  align-items:    center;
  gap:            10px;
  padding:        9px 12px;
  border-radius:  8px;
  color:          var(--rd-text-muted);
  text-decoration:none;
  font-size:      13px;
  font-weight:    500;
  transition:     all .15s;
}
.sidebar-link:hover { background: rgba(255,255,255,.05); color: var(--rd-text); }
.sidebar-link.active{ background: var(--rd-primary-dim); color: var(--rd-primary); }
.sidebar-link i      { font-size: 16px; width: 20px; text-align: center; }
.sidebar-link-premium{ opacity: .6; }

/* ── Content area ──────────────────────────────────────────── */
.app-content {
  flex: 1;
  padding: 24px;
  overflow-x: hidden;
  min-width: 0;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background:    var(--rd-bg-card);
  border:        1px solid var(--rd-border);
  border-radius: 10px;
  color:         var(--rd-text);
}
.card-header {
  background:    transparent;
  border-bottom: 1px solid var(--rd-border);
  padding:       14px 16px;
  font-size:     13px;
  font-weight:   600;
  color:         var(--rd-text);
}
.card-body { padding: 16px; }

/* Metric cards */
.metric-card {
  background:    var(--rd-bg-card);
  border:        1px solid var(--rd-border);
  border-radius: 10px;
  padding:       18px 20px;
  transition:    border-color .2s, transform .15s;
}
.metric-card:hover  { border-color: var(--rd-primary); transform: translateY(-2px); }
.metric-card-icon   { font-size: 22px; margin-bottom: 10px; }
.metric-card-label  { font-size: 11px; color: var(--rd-text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.metric-card-value  { font-size: 22px; font-weight: 700; color: var(--rd-text); }
.metric-card-badge  { font-size: 12px; font-weight: 600; margin-top: 4px; }

.metric-card-primary { border-left: 3px solid var(--rd-primary); }
.metric-card-success { border-left: 3px solid var(--rd-success); }
.metric-card-danger  { border-left: 3px solid var(--rd-danger); }
.metric-card-info    { border-left: 3px solid var(--rd-info); }

/* ── Tables ────────────────────────────────────────────────── */
.table {
  color:           var(--rd-text);
  --bs-table-bg:   transparent;
  --bs-table-hover-bg: rgba(255,255,255,.03);
  font-size:       13px;
}
.table thead th {
  color:         var(--rd-text-muted);
  font-weight:   600;
  font-size:     11px;
  text-transform:uppercase;
  letter-spacing:.4px;
  border-color:  var(--rd-border);
  padding:       10px 12px;
}
.table td { border-color: var(--rd-border); padding: 10px 12px; vertical-align: middle; }
.table tbody tr:hover td { background: rgba(255,255,255,.02); }

/* Ticker badge */
.ticker-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  font-weight:    700;
  font-size:      13px;
  color:          var(--rd-info);
}
.asset-type-badge {
  font-size:    10px;
  padding:      2px 6px;
  border-radius:4px;
  background:   rgba(88,166,255,.15);
  color:        var(--rd-info);
}

/* P&L colors */
.pnl-positive { color: var(--rd-success) !important; font-weight: 600; }
.pnl-negative { color: var(--rd-danger)  !important; font-weight: 600; }
.pnl-neutral  { color: var(--rd-text-muted); }

/* ── Chart cards ───────────────────────────────────────────── */
.card-chart canvas { max-width: 100%; }

/* ── Market bar (navbar) ───────────────────────────────────── */
.market-bar      { gap: 24px; }
.market-item     { font-size: 12px; color: var(--rd-text-muted); white-space: nowrap; }
.market-item strong { color: var(--rd-text); }

/* ── Page header ───────────────────────────────────────────── */
.page-header h4 { font-weight: 700; color: var(--rd-text); }

/* ── Forms ─────────────────────────────────────────────────── */
.form-control, .form-select {
  background:   #0d1117;
  border:       1px solid var(--rd-border);
  color:        var(--rd-text);
  border-radius:8px;
}
.form-control:focus, .form-select:focus {
  background:   #0d1117;
  border-color: var(--rd-primary);
  color:        var(--rd-text);
  box-shadow:   0 0 0 3px rgba(33,136,255,.15);
}
.form-control::placeholder { color: var(--rd-text-muted); }
.form-label                { color: var(--rd-text); font-size: 13px; font-weight: 500; }
.input-group-text          { background: #21262d; border-color: var(--rd-border); color: var(--rd-text-muted); }
.btn-toggle-pass           { cursor: pointer; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary    { background: var(--rd-primary);  border-color: var(--rd-primary); }
.btn-primary:hover { background: #1a6fe8; border-color: #1a6fe8; }
.btn-outline-primary { color: var(--rd-primary); border-color: var(--rd-primary); }
.btn-outline-primary:hover { background: var(--rd-primary); color: #fff; }
.btn-outline-secondary { color: var(--rd-text-muted); border-color: var(--rd-border); }
.btn-outline-secondary:hover { background: var(--rd-border); color: var(--rd-text); }

/* ── Modal ─────────────────────────────────────────────────── */
.modal-content { background: var(--rd-bg-card); border: 1px solid var(--rd-border); color: var(--rd-text); }
.modal-header  { border-bottom: 1px solid var(--rd-border); }
.modal-footer  { border-top:    1px solid var(--rd-border); }

/* ── Dropdown ──────────────────────────────────────────────── */
.dropdown-menu-dark { background: var(--rd-bg-card); border: 1px solid var(--rd-border); }
.dropdown-item:hover{ background: rgba(255,255,255,.05); }

/* ── Alerts ────────────────────────────────────────────────── */
.alert { border-radius: 8px; font-size: 13px; }

/* ── Badges ────────────────────────────────────────────────── */
.badge { font-size: 11px; }

/* ── Loading spinner ───────────────────────────────────────── */
.spinner-border-sm { width: 1rem; height: 1rem; border-width: .15em; }

/* ── Sidebar footer ────────────────────────────────────────── */
.sidebar-footer { font-size: 11px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .app-content { padding: 16px; }
  .metric-card-value { font-size: 18px; }
}
@media (max-width: 575.98px) {
  .auth-card { padding: 24px 16px; }
  .app-content { padding: 12px; }
}

/* ── Portfolio page specifics ──────────────────────────────── */
.portfolio-summary-bar {
  background:    var(--rd-bg-card);
  border:        1px solid var(--rd-border);
  border-radius: 10px;
  padding:       16px 20px;
  margin-bottom: 20px;
  display:       flex;
  gap:           32px;
  flex-wrap:     wrap;
  align-items:   center;
}
.portfolio-summary-item label { font-size: 11px; color: var(--rd-text-muted); display: block; }
.portfolio-summary-item span  { font-size: 16px; font-weight: 700; }

/* Weight bar */
.weight-bar {
  height:        6px;
  background:    var(--rd-border);
  border-radius: 3px;
  overflow:      hidden;
  width:         60px;
  display:       inline-block;
  vertical-align:middle;
}
.weight-bar-fill {
  height:        100%;
  background:    var(--rd-primary);
  border-radius: 3px;
  transition:    width .3s;
}