/* ==========================================================================
   VetDay — Responsividade global (mobile, tablet, desktop, ultrawide)
   ========================================================================== */

:root {
  --content-gutter-x: clamp(1rem, 2.5vw, 2rem);
  --content-gutter-y: clamp(1rem, 2vw, 1.75rem);
  --content-max-width: none;
  --chart-min-height: 260px;
  --chart-max-height: 400px;
  --page-title-size: clamp(1.25rem, 2.5vw, 1.6rem);
}

/* ---------- Área principal: largura máxima em monitores grandes ---------- */
.app-content {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--content-gutter-y) var(--content-gutter-x) 4rem;
  box-sizing: border-box;
}

@media (min-width: 1200px) {
  :root {
    --content-max-width: 1200px;
    --chart-max-height: 380px;
  }
}

@media (min-width: 1400px) {
  :root {
    --content-max-width: 1320px;
  }
}

@media (min-width: 1600px) {
  :root {
    --content-max-width: 1440px;
    --content-gutter-x: clamp(1.5rem, 3vw, 3rem);
  }
}

@media (min-width: 1920px) {
  :root {
    --content-max-width: 1520px;
  }
}

@media (min-width: 2200px) {
  :root {
    --content-max-width: 1600px;
  }
}

/* Topbar e sidebar: sem gap — largura total da coluna principal */
.app-main {
  width: 100%;
  box-sizing: border-box;
}

.topbar {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* ---------- Gráficos: proporção estável, sem distorção ---------- */
.chart-host,
.report-chart-host,
.chart-card .chart-host,
.card-body > canvas[id^="chart"] {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: var(--chart-min-height);
  max-height: var(--chart-max-height);
  margin-inline: auto;
}

.chart-host > div,
.report-chart-host > div {
  width: 100% !important;
  max-width: 100%;
}

.chart-card .card-body {
  overflow: hidden;
}

.chart-card .card-header {
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Grid de gráficos em dashboard/relatórios */
.report-charts-grid,
.dashboard-charts-row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .dashboard-charts-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .report-charts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-charts-grid .report-chart-card--wide {
    grid-column: 1 / -1;
  }
}

/* ---------- Cabeçalhos e KPIs ---------- */
.page-header {
  gap: clamp(0.75rem, 2vw, 1rem);
}

.page-title {
  font-size: var(--page-title-size);
  line-height: 1.25;
  word-break: break-word;
}

.page-header > .d-flex,
.page-header > div:last-child:not(:first-child) {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

@media (max-width: 575.98px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .kpi-card {
    padding: 1rem;
  }

  .kpi-card .kpi-value {
    font-size: 1.35rem;
  }
}

@media (max-width: 380px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Filtros e abas roláveis no mobile ---------- */
.filter-bar {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}

.filter-bar .filter-actions {
  flex-wrap: wrap;
}

.finance-tabs,
.dash-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  max-width: 100%;
}

.finance-tabs::-webkit-scrollbar,
.dash-tabs::-webkit-scrollbar {
  display: none;
}

.finance-tabs a,
.dash-tabs a {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---------- Cards e tabelas ---------- */
.card-soft .card-header {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.table-wrap {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Bootstrap rows não estouram */
.app-content .row {
  margin-inline: 0;
  max-width: 100%;
}

.app-content .row > [class*="col-"] {
  min-width: 0;
}

/* ---------- Topbar mobile ---------- */
@media (max-width: 991.98px) {
  .topbar {
    padding-inline: 0.75rem;
    height: auto;
    min-height: var(--topbar-height);
    flex-wrap: wrap;
    padding-block: 0.5rem;
  }

  .topbar-actions {
    gap: 0.25rem;
  }

  .topbar-actions .btn-primary.btn-sm span {
    display: none;
  }

  .notification-menu {
    width: min(320px, calc(100vw - 2rem));
  }
}

@media (max-width: 575.98px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .page-header .btn,
  .page-header .d-flex {
    width: 100%;
    justify-content: flex-start;
  }

  .page-header .d-flex .btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  .filter-bar .filter-actions {
    width: 100%;
  }

  .filter-bar .filter-actions .btn {
    flex: 1;
  }
}

/* ---------- Toasts e modais ---------- */
@media (max-width: 575.98px) {
  .toast-container {
    left: 0.75rem !important;
    right: 0.75rem !important;
    top: auto !important;
    bottom: 0.75rem !important;
    padding: 0 !important;
  }

  .toast {
    width: 100%;
  }

  .command-palette {
    width: calc(100vw - 1.5rem);
    max-width: none;
    margin: 0.75rem;
  }

  .modal-dialog {
    margin: 0.75rem;
    max-width: calc(100% - 1.5rem);
  }
}

/* ---------- Páginas públicas (landing, auth) ---------- */
@media (min-width: 1400px) {
  .public-navbar .container,
  .public-footer .container,
  .site-footer--public .site-footer-inner,
  .hero .container,
  section .container {
    max-width: min(1320px, calc(100vw - 4rem));
  }
}

@media (min-width: 1800px) {
  .public-navbar .container,
  .public-footer .container,
  .site-footer--public .site-footer-inner,
  .hero .container,
  section .container {
    max-width: 1400px;
  }
}

/* Workspaces alinhados ao mesmo max-width do app */
.pet-workspace,
.tutor-workspace-hub {
  max-width: var(--content-max-width);
  margin-inline: auto;
  width: 100%;
}

/* ---------- Utilitários ---------- */
.overflow-touch {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.img-fluid-constrained {
  max-width: 100%;
  height: auto;
}

/* Evita zoom indesejado em inputs iOS */
@media (max-width: 767.98px) {
  input.form-control,
  input.form-select,
  select.form-select,
  textarea.form-control {
    font-size: 16px;
  }
}

/* Safe area (notch) */
@supports (padding: max(0px)) {
  .topbar {
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .app-content {
    padding-bottom: max(4rem, env(safe-area-inset-bottom));
  }
}