/* ==========================================================================
   File preview modal (browse).
   Owning feature: browse
   Load order is defined in Views/Shared/_CssIncludes.cshtml — do not reorder.
   ========================================================================== */

/* --- File preview modal (browse) -------------------------------------- */
#previewModal .modal-dialog {
  max-width: min(96vw, var(--fh-preview-max, 1140px));
}
#previewModal .modal-content {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}
#previewModal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border-bottom: 1px solid var(--fh-border);
}
#previewModal .modal-title {
  font-size: var(--fh-text-lg);
  font-weight: var(--fh-weight-semibold);
  color: var(--fh-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#previewModal .modal-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
#previewModal .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--fh-border);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--fh-muted);
  font-size: var(--fh-text-md);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
#previewModal .btn-icon:hover {
  background: var(--fh-soft);
  color: var(--fh-text);
  border-color: #cbd5e1;
}
#previewModal #preview-download {
  background: var(--fh-primary);
  border-color: var(--fh-primary);
  color: #fff;
}
#previewModal #preview-download:hover {
  background: var(--fh-primary-dark);
  border-color: var(--fh-primary-dark);
}
#previewModal #preview-delete:hover {
  color: #dc3545;
  border-color: #f1aeb5;
}
#previewModal .modal-body {
  padding: 0;
  background: var(--fh-soft);
}

/* Preview viewport budget. Every preview kind below (iframe, image, video,
   text, markdown) used to hard-code `height: 80vh` — five copies of one
   number that took no account of the modal's own chrome. On a short laptop
   (1280x720, 1366x768) the header plus the centered dialog's margins pushed
   the whole modal to the very edge of the viewport. Subtracting a fixed chrome
   budget makes the preview fit with room to spare on short screens while
   still using 80vh of a tall one, and it's now one number to change. */
:root {
  --fh-preview-h: min(80vh, calc(100vh - 9rem));
}
.fh-preview-frame {
  display: block;
  width: 100%;
  height: var(--fh-preview-h);
  border: 0;
}
.fh-preview-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--fh-preview-h);
  overflow: auto;
  padding: 1rem;
}
.fh-preview-image-wrap img {
  max-width: 100%;
  /* Fills the wrap minus its own 1rem padding, rather than a second
     independently-tuned vh number that could drift out of step with it. */
  max-height: 100%;
  object-fit: contain;
}

/* Video Preview */
.fh-preview-video-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--fh-preview-h);
  background: #090d16;
  overflow: hidden;
  padding: 1rem;
}
.fh-preview-video-player {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--fh-radius);
  outline: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Audio Preview */
.fh-preview-audio-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Bounded against the same preview budget as the other kinds — a bare
     `min-height: 60vh` made this a 1296px-tall band on a 4K display around a
     480px card. */
  min-height: min(60vh, 32rem);
  max-height: var(--fh-preview-h);
  padding: clamp(1.25rem, 0.6rem + 1.6vw, 2.5rem) 1.5rem;
  background: var(--fh-soft);
}
.fh-preview-audio-card {
  background: #fff;
  border-radius: var(--fh-radius);
  padding: 2.5rem 2rem;
  box-shadow: var(--fh-shadow);
  border: 1px solid var(--fh-border);
  text-align: center;
  max-width: 480px;
  width: 100%;
}
.fh-preview-audio-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fdf2f8;
  color: #db2777;
  font-size: var(--fh-text-5xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  box-shadow: 0 4px 16px rgba(219, 39, 119, 0.15);
}
.fh-preview-audio-title {
  font-size: var(--fh-text-lg);
  font-weight: var(--fh-weight-semibold);
  color: var(--fh-text);
  margin-bottom: 0.25rem;
  word-break: break-word;
}
.fh-preview-audio-subtext {
  font-size: var(--fh-text-xs);
  color: var(--fh-muted);
  text-transform: uppercase;
  letter-spacing: var(--fh-tracking-wide);
  font-weight: var(--fh-weight-semibold);
  margin-bottom: 1.5rem;
}
.fh-preview-audio-player {
  width: 100%;
  outline: none;
}

/* Text Preview */
.fh-preview-text {
  margin: 0;
  padding: 1rem 1.25rem;
  height: var(--fh-preview-h);
  overflow: auto;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fh-text-base);
  line-height: var(--fh-leading-normal);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Markdown Preview */
.fh-preview-md {
  padding: 1.5rem clamp(1rem, 0.4rem + 1.6vw, 2.5rem);
  height: var(--fh-preview-h);
  overflow: auto;
  background: #fff;
  color: var(--fh-text);
}
.fh-preview-md h1, .fh-preview-md h2, .fh-preview-md h3,
.fh-preview-md h4, .fh-preview-md h5, .fh-preview-md h6 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: var(--fh-weight-semibold);
  color: var(--fh-text);
}
.fh-preview-md h1 { font-size: var(--fh-text-3xl); border-bottom: 1px solid var(--fh-border); padding-bottom: 0.3rem; }
.fh-preview-md h2 { font-size: var(--fh-text-2xl); border-bottom: 1px solid var(--fh-border); padding-bottom: 0.25rem; }
.fh-preview-md h3 { font-size: var(--fh-text-xl); }
.fh-preview-md p { margin: 0.5rem 0; line-height: var(--fh-leading-normal); }
.fh-preview-md ul, .fh-preview-md ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.fh-preview-md li { margin-bottom: 0.25rem; }
.fh-preview-md pre {
  background: #f8fafc;
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius);
  padding: 0.85rem 1rem;
  overflow: auto;
  margin: 1rem 0;
}
.fh-preview-md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fh-text-base);
  color: #0f172a;
}
.fh-preview-md blockquote {
  border-left: 3px solid var(--fh-primary);
  margin: 0.75rem 0;
  padding: 0.5rem 1rem;
  background: rgba(37, 99, 235, 0.03);
  color: var(--fh-muted);
  border-radius: 0 var(--fh-radius) var(--fh-radius) 0;
}
.fh-preview-md hr { border-color: var(--fh-border); margin: 1.5rem 0; opacity: 1; }
.fh-preview-md .fh-md-table {
  width: 100%;
  margin: 1rem 0;
  font-size: var(--fh-text-base);
  border-collapse: collapse;
}
.fh-preview-md .fh-md-table th {
  background: var(--fh-soft);
  font-weight: var(--fh-weight-semibold);
  padding: 0.5rem 0.75rem;
}
.fh-preview-md .fh-md-table td {
  padding: 0.5rem 0.75rem;
}
.fh-preview-md del {
  color: var(--fh-muted);
}

.fh-preview-loading { padding: 4rem 1rem; text-align: center; color: var(--fh-muted); background: #fff; font-size: var(--fh-text-md); }
.fh-preview-message {
  padding: clamp(2rem, 1rem + 2.5vw, 4rem) 2rem;
  text-align: center;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(50vh, 26rem);
}
.fh-preview-message i { font-size: var(--fh-text-6xl); margin-bottom: 1rem; }
.fh-preview-message p { margin: 0; }