/* ==========================================================================
   Shared feature styles — merged bundle (was 3 separate files: document-
   audit.css + video-audit.css + products.css). Combined into one file as a
   performance optimization: any page that needs one of these feature sets
   now makes a single extra CSS request instead of up to three, cutting
   round trips on pages that use more than one (product.html, reviews.html).
   All rules below 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, so cards look and behave identically across Photos,
   Documents, Videos, and Products.
   ========================================================================== */

/* ---------------- Document Audit ---------------- */

/* --- Add Document form: multi-line URL textarea + one row of selects --- */
.add-doc-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.add-doc-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-doc-form textarea:focus { outline: none; border-color: var(--hpi-red); }

.add-doc-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.add-doc-form-row select,
.add-doc-form-row input[type="text"] {
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.85rem;
}

.add-doc-status {
  width: 100%;
  margin: 0;
  font-size: 0.78rem;
  color: var(--hpi-gray-600);
}

.add-doc-status.is-error,
.add-doc-status.error { color: var(--hpi-red); }
.add-doc-status.success { color: #1a8f3c; }
.add-doc-status.info { color: var(--hpi-gray-600); }

/* --- Document thumbnail: big file-type icon instead of a photo --- */
.doc-thumb-icon-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hpi-charcoal);
}

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

.doc-thumb-icon-wrap.doc-pdf i { color: #e05353; }
.doc-thumb-icon-wrap.doc-word i { color: #3b7dd8; }
.doc-thumb-icon-wrap.doc-excel i { color: #1a8f3c; }
.doc-thumb-icon-wrap.doc-powerpoint i { color: #d97a2b; }
.doc-thumb-icon-wrap.doc-zip i { color: #b98ad1; }
.doc-thumb-icon-wrap.doc-image i { color: #4fb0c6; }

.doc-ext-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;
}

/* --- Title row + inline rename --- */
.doc-title-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.doc-title-row .card-product-name { flex: 1 1 auto; word-break: break-word; }

.doc-rename-btn {
  border: none;
  background: none;
  color: var(--hpi-gray-400);
  font-size: 0.78rem;
  padding: 2px 4px;
  flex: 0 0 auto;
}

.doc-rename-btn:hover { color: var(--hpi-red); }

.doc-title-edit-form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.doc-title-edit-form input[type="text"] {
  flex: 1 1 auto;
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.85rem;
}

.doc-title-edit-form input[type="text"]:focus { outline: none; border-color: var(--hpi-red); }

.doc-title-edit-form button {
  border: none;
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.doc-title-edit-save { background: var(--hpi-red); color: var(--hpi-white); }
.doc-title-edit-cancel { background: var(--hpi-gray-100); color: var(--hpi-gray-600); }

/* --- Reviewed toggle (replaces the star row used by images/videos) --- */
.doc-reviewed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  border: 1px solid var(--hpi-gray-200);
  background: var(--hpi-white);
  color: var(--hpi-gray-600);
  padding: 5px 11px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.doc-reviewed-toggle.is-reviewed {
  background: #1a8f3c;
  border-color: #1a8f3c;
  color: var(--hpi-white);
}

.doc-reviewed-toggle:hover { border-color: #1a8f3c; }

.doc-reviewed-meta {
  font-size: 0.72rem;
  color: var(--hpi-gray-600);
  margin: -2px 0 0;
}

/* --- Existing shared note (single note per document, not a list) --- */
.doc-note-display {
  background: var(--hpi-gray-100);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 0.78rem;
  color: var(--hpi-gray-800);
  white-space: pre-wrap;
  margin: 0;
}

@media (max-width: 768px) {
  .add-doc-form-row { flex-direction: column; align-items: stretch; }
}

/* ---------------- Video Audit ---------------- */

/* Flat category filter bar (dropdown, not the accordion menu) */
.video-filter-bar {
  background: var(--hpi-white);
  border-bottom: 1px solid var(--hpi-gray-200);
  padding: 10px 20px;
}

.video-filter-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1500px;
  margin: 0 auto;
}

.video-filter-inner label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--hpi-gray-600);
}

.video-filter-inner select {
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 0.85rem;
  background: var(--hpi-white);
  color: var(--hpi-black);
}

.video-filter-inner select:focus {
  outline: none;
  border-color: var(--hpi-red);
}

.add-video-toggle-category { margin-left: auto; }

.add-video-status {
  width: 100%;
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--hpi-gray-600);
}

.add-video-status.is-error { color: var(--hpi-red); }

/* Video thumbnail: platform badge + play button overlay, since videos use
   a static thumbnail image (YouTube) or a plain platform-colored panel
   (Vimeo, since fetching its thumbnail would require a network call). */
.video-thumb-platform {
  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;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.video-thumb-platform.youtube { background: rgba(224, 27, 30, 0.85); }
.video-thumb-platform.vimeo { background: rgba(26, 183, 234, 0.85); }

.video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: var(--hpi-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  pointer-events: none;
  transition: background 0.15s;
}

.card-thumb-wrap:hover .video-play-overlay { background: var(--hpi-red); }

.video-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hpi-charcoal);
  color: var(--hpi-gray-400);
  font-size: 2.5rem;
}

/* Inline player, shown inside the shared #lightbox overlay */
.video-player-wrap {
  width: 90vw;
  max-width: 960px;
  aspect-ratio: 16 / 9;
}

.video-player-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .video-filter-inner { flex-wrap: wrap; }
  .add-video-toggle-category { margin-left: 0; }
}

/* ---------------- All Products index (products.html) ----------------
   One card per product, linking into its master page
   (product.html?category=<category-id>). */

.products-index-intro {
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px 20px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
}

.products-index-intro p {
  color: var(--hpi-gray-600);
  font-size: 0.9rem;
  margin: 0;
}

.products-search-input {
  border: 1px solid var(--hpi-gray-200);
  border-radius: 20px;
  padding: 9px 16px;
  font-size: 0.85rem;
  min-width: 220px;
  flex: 0 0 auto;
}

.products-search-input:focus { outline: none; border-color: var(--hpi-red); }

.products-index-main {
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px;
}

.products-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.product-index-card {
  background: var(--hpi-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.product-index-card:hover {
  border-color: var(--hpi-red);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

/* Example product photo (the first image found for that product) — falls
   back to a plain placeholder icon tile when the product has no images
   yet, so the card layout never breaks/collapses. */
.product-index-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--hpi-gray-100);
  overflow: hidden;
  flex: 0 0 auto;
}

.product-index-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-index-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hpi-gray-400);
  font-size: 2rem;
}

.product-index-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  flex: 1 1 auto;
}

.product-index-card h2 {
  font-size: 1rem;
  margin: 0;
  color: var(--hpi-black);
}

.product-index-card .product-index-category {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hpi-red);
  font-weight: 700;
  margin: 0;
}

.product-index-counts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
}

.product-index-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hpi-gray-100);
  color: var(--hpi-gray-600);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
}

.product-index-count i { color: var(--hpi-gray-400); }

.product-index-count.has-items {
  background: rgba(26, 143, 60, 0.12);
  color: #1a8f3c;
}

.product-index-count.has-items i { color: #1a8f3c; }

@media (max-width: 768px) {
  .products-index-intro { padding: 16px 14px 0; }
  .products-search-input { width: 100%; }

  /* Two columns on mobile, matching the Image Audit page's .image-grid
     mobile behavior (css/style.css). */
  .products-index-main { padding: 14px; }
  .products-index-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .product-index-card-body { padding: 10px 12px 12px; gap: 8px; }
  .product-index-card h2 { font-size: 0.9rem; }
  .product-index-thumb-placeholder { font-size: 1.5rem; }
}