/* ============================================================
   responsive.css — Regras responsivas compartilhadas D_Solutions
   Carregado em TODOS os templates (base + standalone)
   ============================================================ */

/* === Hamburger toggle para topbar customizada === */
.topbar-toggler {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  padding: .25rem .5rem;
  cursor: pointer;
  line-height: 1;
}
.topbar-nav { display: contents; }

@media (max-width: 767.98px) {
  /* Topbar: hamburger à direita, links colapsados */
  .topbar { gap: .4rem; }
  .topbar > .container-fluid { flex-wrap: wrap; }
  .topbar-toggler {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
  }
  .topbar-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: .4rem;
    padding: .6rem 0 .3rem;
    border-top: 1px solid rgba(255,255,255,.15);
    margin-top: .4rem;
  }
  .topbar-nav.show { display: flex; }
  .topbar-nav > .text-white-50 { display: none; } /* separadores */
  .topbar-nav > a { font-size: .85rem; white-space: nowrap; }
  .topbar-nav > span { font-size: .85rem; }
  .topbar-nav .d-flex {
    flex-wrap: wrap;
    gap: .35rem;
    margin-left: 0 !important;
    padding-top: .4rem;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .topbar-nav .d-flex .btn {
    font-size: .75rem;
    padding: .25rem .5rem;
  }
  .topbar .brand img,
  .topbar .brand video { height: 32px !important; }
}

/* === Touch targets — mínimo 36px === */
@media (max-width: 767.98px) {
  .btn-sm {
    min-height: 36px;
    min-width: 36px;
    font-size: .82rem;
  }
  .form-control-sm, .form-select-sm { min-height: 36px; }
}

/* === KPI / Scorecard font scaling === */
@media (max-width: 575.98px) {
  .kpi-val, .sc-val, .kpi-val-lg, .prazo-val {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
  }
  .kpi-lbl, .sc-lbl, .kpi-lbl-lg {
    font-size: .65rem !important;
  }
}

/* === Chart containers — altura fluida no mobile === */
@media (max-width: 767.98px) {
  .chart-area { height: 220px !important; }
  .chart-area-lg { height: 280px !important; }
}

/* === page-card — full width no mobile === */
@media (max-width: 575.98px) {
  .page-card {
    margin-left: .5rem !important;
    margin-right: .5rem !important;
    max-width: 100% !important;
  }
}

/* === Tabelas — padrão mobile === */
@media (max-width: 767.98px) {
  .table { font-size: .82rem; }
  .table th, .table td { padding: .35rem .5rem; }
}