/**
 * File Converter — tool styles
 *
 * Every class here is namespaced `fconv-` so nothing can bleed into another
 * tool, and every colour, radius and gap is a --fw-* token so both themes work
 * without a second rule. No Bootstrap: the v1 stylesheet leaned on .row/.col-*
 * for its two-column layout and on Bootstrap's .modal for the lightbox; both
 * are CSS grid and frikwork's .fw-modal now.
 */

/* ---------------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------------ */

.fconv-tabs {
  margin-bottom: var(--fw-space-lg);
}

/* v1: .col-lg-4 + .col-lg-8. The sidebar is fixed-ish and the results take the
   rest, collapsing to one column when there is no room for two. */
.fconv-layout {
  display: grid;
  grid-template-columns: minmax(320px, 26rem) minmax(0, 1fr);
  gap: var(--fw-space-lg);
  align-items: start;
}

@media (max-width: 1100px) {
  .fconv-layout { grid-template-columns: minmax(0, 1fr); }
}

.fconv-side {
  min-width: 0;
}

.fconv-results-panel,
.fconv-output-panel {
  min-width: 0;
}

.fconv-notes {
  margin-top: var(--fw-space-lg);
}

.fconv-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fw-space-sm);
}

/* ---------------------------------------------------------------------------
 * Dropzone
 *
 * frikwork has no dropzone component — .fw-file is a styled <input type=file>,
 * which is a different thing. Built here from tokens.
 * ------------------------------------------------------------------------ */

.fconv-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fw-space-xs);
  padding: var(--fw-space-xl) var(--fw-space-md);
  text-align: center;
  cursor: pointer;
  background: var(--fw-bg-2);
  border: 2px dashed var(--fw-border);
  border-radius: var(--fw-radius-lg);
  transition: border-color var(--fw-dur) ease, background var(--fw-dur) ease;
}

.fconv-drop:hover,
.fconv-drop:focus-visible {
  border-color: var(--fw-brand);
  background: var(--fw-bg-hover);
}

.fconv-drop:focus-visible {
  outline: 2px solid var(--fw-brand);
  outline-offset: 2px;
}

/* Set while a drag is over the zone. */
.fconv-drop.is-dragging {
  border-color: var(--fw-brand);
  border-style: solid;
  background: color-mix(in srgb, var(--fw-brand) 10%, transparent);
}

.fconv-drop__icon {
  font-size: 1.75rem;
  color: var(--fw-brand-text);
}

.fconv-drop__title {
  font-weight: 600;
  color: var(--fw-text);
}

.fconv-drop__hint {
  font-size: 0.85rem;
  color: var(--fw-text-muted);
}

.fconv-drop__formats {
  margin-top: var(--fw-space-xs);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--fw-text-muted);
  letter-spacing: 0.02em;
}

/* The real input covers the zone so a click anywhere opens the picker and
   keyboard focus lands somewhere sensible — but it must not be display:none,
   or it stops being focusable at all. */
.fconv-drop__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * URL fetch
 * ------------------------------------------------------------------------ */

.fconv-urlfield {
  margin-top: var(--fw-space-md);
}

.fconv-status--busy    { color: var(--fw-text-muted); }
.fconv-status--success { color: var(--fw-success); }
.fconv-status--error   { color: var(--fw-danger); }

/* ---------------------------------------------------------------------------
 * The queued-file list
 * ------------------------------------------------------------------------ */

.fconv-queue {
  margin-top: var(--fw-space-md);
}

.fconv-queue__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fw-space-sm);
  margin-bottom: var(--fw-space-sm);
}

.fconv-queue__list {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-xs);
  max-height: 18rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fconv-queue__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--fw-space-sm);
  padding: var(--fw-space-xs) var(--fw-space-sm);
  background: var(--fw-bg-2);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
}

.fconv-queue__ext {
  padding: 0.1em 0.45em;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fw-brand-text);
  background: color-mix(in srgb, var(--fw-brand) 14%, transparent);
  border-radius: var(--fw-radius-sm);
}

.fconv-queue__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--fw-text);
}

.fconv-queue__size {
  font-size: 0.75rem;
  color: var(--fw-text-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Settings
 * ------------------------------------------------------------------------ */

.fconv-quality__value {
  color: var(--fw-brand-text);
  font-weight: 700;
}

.fconv-range__ends {
  display: flex;
  justify-content: space-between;
  margin-top: var(--fw-space-xs);
  color: var(--fw-text-muted);
}

.fconv-svg {
  margin-top: var(--fw-space-md);
}

.fconv-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fw-space-xs);
  margin: var(--fw-space-sm) 0;
}

/* ---------------------------------------------------------------------------
 * Progress
 * ------------------------------------------------------------------------ */

.fconv-progress {
  margin-bottom: var(--fw-space-md);
}

.fconv-progress__head {
  display: flex;
  justify-content: space-between;
  gap: var(--fw-space-sm);
  margin-bottom: var(--fw-space-xs);
}

/* ---------------------------------------------------------------------------
 * Batch summary
 * ------------------------------------------------------------------------ */

.fconv-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--fw-space-sm);
  margin-bottom: var(--fw-space-md);
  padding: var(--fw-space-md);
  background: var(--fw-bg-2);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-lg);
}

.fconv-summary__item {
  text-align: center;
}

.fconv-summary__value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fw-text);
}

.fconv-summary__label {
  font-size: 0.75rem;
  color: var(--fw-text-muted);
}

/* ---------------------------------------------------------------------------
 * Result cards
 * ------------------------------------------------------------------------ */

.fconv-results {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-sm);
}

.fconv-results:empty {
  display: none;
}

.fconv-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--fw-space-md);
  padding: var(--fw-space-sm);
  background: var(--fw-bg-2);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-lg);
  transition: border-color var(--fw-dur) ease;
}

.fconv-result:hover {
  border-color: color-mix(in srgb, var(--fw-brand) 45%, var(--fw-border));
}

.fconv-result--error {
  grid-template-columns: minmax(0, 1fr);
  border-color: color-mix(in srgb, var(--fw-danger) 45%, var(--fw-border));
}

.fconv-result__thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--fw-bg);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
}

.fconv-result__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fconv-result__zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity var(--fw-dur) ease;
}

.fconv-result__thumb:hover .fconv-result__zoom,
.fconv-result__thumb:focus-visible .fconv-result__zoom {
  opacity: 1;
}

.fconv-result__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--fw-text);
}

.fconv-result__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--fw-space-sm);
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--fw-text-muted);
}

.fconv-delta--down { color: var(--fw-success); }
.fconv-delta--up   { color: var(--fw-danger); }
.fconv-delta--same { color: var(--fw-text-muted); }

.fconv-result__error {
  font-size: 0.82rem;
  color: var(--fw-danger);
}

/* ---------------------------------------------------------------------------
 * Document output
 * ------------------------------------------------------------------------ */

.fconv-docfile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--fw-space-sm);
  margin-top: var(--fw-space-md);
  padding: var(--fw-space-sm);
  background: var(--fw-bg-2);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
}

.fconv-docfile__icon {
  color: var(--fw-brand-text);
}

.fconv-docfile__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.88rem;
}

.fconv-preview {
  display: block;
  max-height: 32rem;
  margin: 0;
  padding: var(--fw-space-md);
  overflow: auto;
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre;
  tab-size: 4;
  color: var(--fw-text-2);
  background: var(--fw-bg);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
}

/* ---------------------------------------------------------------------------
 * Lightbox
 *
 * The container is frikwork's .fw-modal (opened with frikwork.modal.open), so
 * only the inside of it is ours. app.css gives .app-modal--xl a 1200px cap.
 * ------------------------------------------------------------------------ */

.fconv-lightbox .fw-modal__body {
  padding: var(--fw-space-md);
}

.fconv-lightbox__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--fw-space-sm);
}

.fconv-lightbox__frame {
  display: grid;
  place-items: center;
  min-height: 12rem;
  max-height: 70vh;
  overflow: hidden;
  background: var(--fw-bg);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
}

.fconv-lightbox__frame img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

.fconv-lightbox__nav {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--fw-text-2);
  background: var(--fw-bg-2);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-pill);
  cursor: pointer;
  transition: background var(--fw-dur) ease, color var(--fw-dur) ease;
}

.fconv-lightbox__nav:hover {
  color: var(--fw-text);
  background: var(--fw-bg-hover);
  border-color: var(--fw-brand);
}

.fconv-lightbox__name {
  margin: var(--fw-space-sm) 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--fw-text-2);
  overflow-wrap: anywhere;
}

.fconv-lightbox .fw-modal__footer {
  justify-content: space-between;
  gap: var(--fw-space-sm);
}

@media (max-width: 640px) {
  .fconv-lightbox__stage { grid-template-columns: minmax(0, 1fr); }
  .fconv-lightbox__nav   { display: none; }
  .fconv-result          { grid-template-columns: auto minmax(0, 1fr); }
  .fconv-result__actions { grid-column: 1 / -1; }
}