/* ============================================================================
   Report form + public gallery components
   Auto-saving photo gallery, video manager, and the generic file dropzone
   (event report + reimbursement receipts). Ported into the design system.
   ========================================================================== */

/* generic file dropzone (reimbursement receipts) */
.file-dropzone { margin-top: 4px; }
.file-dropzone__zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  width: 100%; padding: 28px 16px; border: 2px dashed var(--border); border-radius: var(--r-media);
  background: var(--cream); color: var(--ink); cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.file-dropzone__zone:hover, .file-dropzone.is-dragover .file-dropzone__zone { border-color: var(--orange); background: var(--surface); }
.file-dropzone__icon { width: 26px; height: 26px; margin-bottom: 8px; color: var(--orange); }
.file-dropzone__hint { font-size: .85rem; opacity: .85; line-height: 1.35; }
.file-dropzone__previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.file-thumb { position: relative; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-thumb__doc { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 6px; text-align: center; }
.file-thumb__doc svg { width: 22px; height: 22px; color: var(--orange); }
.file-thumb__name { margin-top: 4px; font-size: .65rem; line-height: 1.1; word-break: break-word; max-height: 2.2rem; overflow: hidden; }
.file-thumb__remove { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; line-height: 20px; text-align: center; padding: 0; border: none; border-radius: 50%; background: rgba(9, 31, 44, .65); color: #fff; font-size: .9rem; cursor: pointer; }
.file-thumb__remove:hover { background: var(--orange); }

/* event-photo gallery (report form): auto-saving thumbnails + add tile */
.report-gallery { position: relative; border: 2px dashed transparent; border-radius: var(--r-media); transition: border-color .15s ease, background-color .15s ease; padding: 4px; margin: 0 -4px; }
.report-gallery.is-dragover { border-color: var(--orange); background: var(--cream); }
.report-gallery.is-busy { opacity: .75; }
.report-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.report-photo { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: var(--r-media); overflow: hidden; background: var(--cream); box-shadow: 0 1px 3px rgba(9, 31, 44, .12); }
.report-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.report-photo__remove { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; background: rgba(9, 31, 44, .6); color: #fff; font-size: 1rem; opacity: 0; cursor: pointer; transition: opacity .15s ease, background-color .15s ease; }
.report-photo:hover .report-photo__remove, .report-photo:focus-within .report-photo__remove { opacity: 1; }
.report-photo__remove:hover { background: var(--orange); }
.report-photo--add { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; cursor: pointer; border: 2px dashed var(--border); box-shadow: none; color: var(--ink); font-size: .8rem; line-height: 1.25; padding: 8px; transition: border-color .15s ease, background-color .15s ease; }
.report-photo--add:hover { border-color: var(--orange); background: var(--surface); }
.report-photo--add svg { width: 26px; height: 26px; color: var(--orange); }
.report-gallery__busy { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .85rem; color: var(--ink); }

/* video manager (report form) + public video gallery */
.report-video__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.report-video { position: relative; margin: 0; }
.report-videos .frow { grid-template-columns: 1fr auto; align-items: start; }
.my-divider { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
.hint-globe { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--orange-deep); }
.event-video-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.event-video-gallery__item, .report-video__embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-media); overflow: hidden; background: #000; }
.event-video-gallery__item iframe, .report-video__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* public event page photo gallery */
.event-photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.event-photo-gallery__item { display: block; aspect-ratio: 1 / 1; border-radius: var(--r-media); overflow: hidden; background: var(--cream); box-shadow: 0 1px 3px rgba(9, 31, 44, .12); }
.event-photo-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.event-photo-gallery__item:hover img { transform: scale(1.05); }