/* ==========================================================================
   Testimonials Audit — feature-specific styles only. Cards still reuse the
   shared .image-card / .card-thumb-wrap / .card-body / .card-stars /
   .card-notes-* / .card-delete-btn / .multi-select-toggle / .bulk-action-bar
   primitives defined in css/style.css (same as Document/Video Audit), so
   testimonial cards look and behave consistently with the rest of the site.
   ========================================================================== */

/* --- Thumbnail: big quote icon instead of a photo/file-type icon, colored
       by source (Facebook blue / Google multicolor-ish / manual gray) --- */
.testimonial-thumb-icon-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hpi-charcoal);
}

.testimonial-thumb-icon-wrap i {
  font-size: 3rem;
  color: var(--hpi-gray-400);
}

.testimonial-thumb-icon-wrap.source-facebook i { color: #3b7dd8; }
.testimonial-thumb-icon-wrap.source-google i { color: #d97a2b; }
.testimonial-thumb-icon-wrap.source-manual i { color: var(--hpi-gray-400); }

.testimonial-source-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,0.6);
  color: var(--hpi-white);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 12px;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.testimonial-recommends-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(26,143,60,0.85);
  color: var(--hpi-white);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.testimonial-recommends-badge.not-recommend {
  background: rgba(227,30,36,0.85);
}

/* --- Source star rating (from the ORIGINAL platform, read-only) --- */
.testimonial-source-rating {
  font-size: 0.78rem;
  color: var(--hpi-gray-600);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.testimonial-source-rating i.fa-star { color: #f0ad4e; font-size: 0.75rem; }
.testimonial-source-rating i.fa-star.empty { color: var(--hpi-gray-200); }

/* --- Testimonial body text quoted block --- */
.testimonial-text-block {
  font-size: 0.85rem;
  color: var(--hpi-gray-700);
  line-height: 1.45;
  margin: 4px 0 8px;
  font-style: italic;
  position: relative;
  padding-left: 14px;
  border-left: 3px solid var(--hpi-gray-200);
}

.testimonial-customer-meta {
  font-size: 0.78rem;
  color: var(--hpi-gray-600);
  margin: 0 0 4px;
}

/* --- Add Testimonial form --- */
.add-testimonial-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.add-testimonial-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.add-testimonial-form-grid input,
.add-testimonial-form-grid select {
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: var(--font-body);
}

.add-testimonial-recommends-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--hpi-gray-700);
}

.add-testimonial-form textarea {
  width: 100%;
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  resize: vertical;
}

.add-testimonial-form textarea:focus { outline: none; border-color: var(--hpi-red); }

/* --- CSV Import modal --- */
.csv-import-dialog { max-width: 780px; }

/* Widen and un-stack the "Detected format" / "Assign all to category"
   selects on desktop. Scoped to .csv-import-dialog specifically so the
   unrelated Image Audit bulk-import modal (index.html), which reuses the
   same shared .bulk-import-controls class, is not affected. */
.csv-import-dialog .bulk-import-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.csv-import-dialog .bulk-import-controls label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.csv-import-dialog .bulk-import-controls select {
  flex: 1 1 220px;
  min-width: 220px;
}

@media (min-width: 769px) {
  .csv-import-dialog .bulk-import-controls {
    flex-wrap: nowrap;
  }
  .csv-import-dialog .bulk-import-controls select {
    flex: 1 1 0;
    min-width: 240px;
  }
}

@media (max-width: 768px) {
  .csv-import-dialog .bulk-import-controls select { min-width: 0; }
}

.csv-import-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.csv-import-or {
  font-size: 0.78rem;
  color: var(--hpi-gray-600);
}

#csv-import-textarea {
  width: 100%;
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 10px 12px;
  font-family: monospace;
  font-size: 0.78rem;
  resize: vertical;
  margin-bottom: 8px;
}

#csv-import-textarea:focus { outline: none; border-color: var(--hpi-red); }

.csv-import-results { margin-top: 14px; }

.csv-import-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.csv-import-format-badge {
  background: var(--hpi-charcoal);
  color: var(--hpi-white);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 12px;
}

.csv-import-preview-wrap {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  margin-top: 10px;
  -webkit-overflow-scrolling: touch;
}

.csv-import-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.csv-import-preview-table th,
.csv-import-preview-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--hpi-gray-100);
  vertical-align: top;
}

.csv-import-preview-table th {
  background: var(--hpi-gray-100);
  position: sticky;
  top: 0;
  font-weight: 700;
  color: var(--hpi-gray-700);
}

.csv-import-preview-table td.csv-preview-text {
  max-width: 320px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.csv-import-preview-table tr.csv-row-skip { opacity: 0.45; text-decoration: line-through; }

.csv-import-row-toggle {
  cursor: pointer;
}

/* Flexible, shrink-safe columns on mobile, matching the Image/Document
   Audit page's .image-grid mobile behavior. A fixed 2-column split
   (1fr 1fr) let inputs/selects overflow their column on very narrow
   phones (grid items don't shrink below their intrinsic content width
   by default), which pushed the whole page wider and caused unwanted
   horizontal scrolling. auto-fit + min-width: 0 lets each field actually
   shrink to fit instead of forcing extra page width. */
@media (max-width: 640px) {
  .add-testimonial-form-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .add-testimonial-form-grid input,
  .add-testimonial-form-grid select { min-width: 0; }
}

/* ---------------- Mobile: prevent any horizontal scroll ----------------
   Belt-and-suspenders safety net scoped to this page only (via the body
   selector's specificity is still page-scoped since this stylesheet is
   only linked from testimonials-audit.html). Nothing on this page should
   ever need to scroll sideways on a phone; if any element's intrinsic
   width slips past the viewport, clip it here rather than letting the
   whole page grow wider than the screen. */
@media (max-width: 768px) {
  body { overflow-x: hidden; }
  #main-content,
  .add-image-bar,
  .add-image-inner,
  .add-testimonial-form,
  .add-testimonial-form-grid,
  .progress-inner,
  .csv-import-summary { max-width: 100%; }
  .csv-import-preview-table th,
  .csv-import-preview-table td { word-break: break-word; }
}