/* Social Report Dashboard v6.0 — Responsive CSS */
.social-report-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  color: #1a1a2e;
  -webkit-text-size-adjust: 100%;
}
.social-report-container * { box-sizing: border-box; }
.social-report-container button { cursor: pointer; line-height: normal; font-family: inherit; }
.social-report-container input, .social-report-container select, .social-report-container textarea { font-family: inherit; }
.social-report-container input[type="number"]::-webkit-inner-spin-button,
.social-report-container input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.social-report-container input[type="number"] { -moz-appearance: textfield; }
.social-report-container table { border-collapse: collapse; width: 100%; }

/* ── Responsive grids ─────────────────────────────── */

/* 4-col KPIs → 2 cols on mobile */
.social-report-container .sr-g4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}

/* 3-col → 2 cols on mobile */
.social-report-container .sr-g3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

/* 2-col → 1 col on mobile */
.social-report-container .sr-g2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

/* 5-col post KPIs → 3 cols on mobile */
.social-report-container .sr-g5 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
}

/* Metric rows (label + input): horizontal on desktop */
.social-report-container .sr-pmrow {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.social-report-container .sr-pmrow input {
  width: 100px !important;
  min-width: 80px !important;
  flex-shrink: 0 !important;
}

/* Tab bar — horizontal scroll, no wrap */
.social-report-container .sr-tabbar {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 4px;
  padding-bottom: 0;
}
.social-report-container .sr-tabbar::-webkit-scrollbar { display: none; }

/* ── MOBILE breakpoint: max 600px ────────────────── */
@media (max-width: 600px) {

  /* 4-col → 2 cols */
  .social-report-container .sr-g4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 3-col → 2 cols */
  .social-report-container .sr-g3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 2-col → 1 col */
  .social-report-container .sr-g2 {
    grid-template-columns: 1fr !important;
  }

  /* 5-col → 2 cols */
  .social-report-container .sr-g5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }

  /* Metric rows: stack label on top, input full width */
  .social-report-container .sr-pmrow {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 8px 10px !important;
  }
  .social-report-container .sr-pmrow input {
    width: 100% !important;
    text-align: left !important;
  }

  /* Reduce header padding */
  .social-report-container [style*="padding:16px 18px"] {
    padding: 12px 14px !important;
  }

  /* Reduce body padding */
  .social-report-container [style*="padding:16px"] {
    padding: 10px !important;
  }

  /* Post card like/comment row: wrap */
  .social-report-container [style*="display:flex;gap:16px"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Comparison table: allow horizontal scroll */
  .social-report-container table {
    min-width: 0 !important;
    font-size: 11px !important;
  }
  .social-report-container [style*="overflow-x:auto"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Post form — selects and inputs full width */
  .social-report-container select,
  .social-report-container input[type="text"],
  .social-report-container input[type="date"],
  .social-report-container textarea {
    width: 100% !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }

  /* Post toolbar: stack buttons */
  .social-report-container [style*="justify-content:space-between"] > div {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Engagement badge in header: smaller */
  .social-report-container [style*="font-size:20px;font-weight:700"] {
    font-size: 16px !important;
  }

  /* KPI values: smaller on mobile */
  .social-report-container .sr-g4 [style*="font-size:20px;font-weight:700"] {
    font-size: 17px !important;
  }

  /* Pills bar */
  .social-report-container [style*="overflow-x:auto;scrollbar-width:none"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── iOS zoom prevention for inputs ──────────────── */
@media (max-width: 768px) {
  .social-report-container input[type="number"],
  .social-report-container input[type="text"],
  .social-report-container input[type="date"],
  .social-report-container select,
  .social-report-container textarea {
    font-size: 16px !important;
  }
}

/* ── Print ───────────────────────────────────────── */
@media print {
  .sr-no-print { display: none !important; }
}