/**
 * tool-layout.css
 * ---------------------------------------------------------------------------
 * Outer widget shell + tool-specific row layouts. Depends on the custom
 * properties defined in imganva-tools.css (must load first).
 *
 * WHAT LIVES HERE VS. imganva-tools.css:
 *   imganva-tools.css handles the resting look of generic components
 *   (a button looks like a button everywhere). This file handles the
 *   things that are specific to HOW those components are arranged inside
 *   a given tool — the operator+size+unit row in Compressor, the
 *   width+height row in Resizer, the read-only "From" box in Converter,
 *   the per-file result cards in OCR's batch view — plus the overall
 *   widget shell sizing that makes all four tools feel like the same
 *   product regardless of which one is on the page.
 *
 * "UNIFORM WIDGET LAYOUT, MIN-HEIGHT, FULL-WIDTH":
 *   Three concrete problems this file solves:
 *
 *   1. UNIFORM — a person may encounter Compressor on one page and OCR on
 *      another. Both should feel like the same widget: same max content
 *      width, same corner treatment, same header rhythm. That consistency
 *      comes from imganva-tools.css's shared .imganva-tool rules; this
 *      file adds the shell sizing (max-width, centering) on top.
 *
 *   2. MIN-HEIGHT — every tool's height changes drastically as the user
 *      progresses: empty dropzone → populated form → progress bar →
 *      results. Without a floor, the widget visibly collapses to a
 *      short stub in its idle state and then lurches taller once a
 *      result appears, which reads as broken rather than responsive.
 *      --imganva-widget-min-height keeps the idle state from looking
 *      like an unfinished fragment of a page.
 *
 *   3. FULL-WIDTH — the widget fills whatever column WordPress/Elementor
 *      gives it (width: 100%) rather than assuming a fixed page layout,
 *      but content inside is capped at a comfortable reading/form width
 *      and centered, so the widget doesn't stretch into awkwardly wide
 *      form rows on a full-bleed page template. A `.imganva-full-bleed`
 *      modifier is available for layouts that want the cap removed.
 *
 * Exposes no new custom properties beyond --imganva-widget-min-height —
 * everything else reads from imganva-tools.css's token set.
 * ---------------------------------------------------------------------------
 */

/** =========================================================================
 *  WIDGET SHELL
 *  ========================================================================= */
.imganva-tool-container {
  --imganva-widget-min-height: 480px;
  --imganva-widget-max-width: 720px;

  display: block;
  width: 100%;
  position: relative; /* anchor point for any future overlay content (e.g. a processing overlay in state.css) */
}

.imganva-tool {
  width: 100%;
  max-width: var(--imganva-widget-max-width);
  min-height: var(--imganva-widget-min-height);
  margin: 0 auto;
}

/** Opt-out for layouts that want the widget to fill its column edge to
 *  edge instead of capping at --imganva-widget-max-width — e.g. a
 *  full-width Elementor section built specifically to host one tool. */
.imganva-tool-container.imganva-full-bleed .imganva-tool {
  max-width: none;
}

/** =========================================================================
 *  GENERIC ROW LAYOUT
 *  Shared flex-row base — .imganva-row alone just establishes the row;
 *  the specific column-width ratios below are opt-in modifiers layered
 *  on top, since a two-field row (Resizer's width/height) and a
 *  three-field row (Compressor's operator/size/unit) need different
 *  proportions.
 *  ========================================================================= */
.imganva-row {
  display: flex;
  align-items: flex-start;
  gap: var(--imganva-space-3);
  flex-wrap: wrap;
}

.imganva-row > .imganva-field {
  flex: 1 1 140px;
  margin-bottom: 0; /* the row itself carries the bottom margin, not each field inside it */
}

.imganva-row {
  margin-bottom: var(--imganva-space-5);
}

/** ---- Compressor: operator + size value + unit ---- */
/** Operator ("< / =") and unit ("KB / MB") are short, fixed-vocabulary
 *  selects — giving them a narrower basis than the free-typed size value
 *  keeps the row from wasting width on mostly-empty dropdowns. */
.imganva-condition-row > .imganva-field:nth-child(1) {
    flex: 0 0 180px;
}

.imganva-condition-row > .imganva-field:nth-child(2) {
    flex: 1 1 130px;
}

.imganva-condition-row > .imganva-field:nth-child(3) {
    flex: 0 0 90px;
}

/** ---- Resizer: width + height ---- */
/** Even split — neither dimension is more important than the other. */
.imganva-dimension-row > .imganva-field {
  flex: 1 1 0;
}

/** =========================================================================
 *  MODE PANEL (Compressor: quality vs. target-size)
 *  ========================================================================= */
.imganva-mode-panel {
  padding-top: var(--imganva-space-1);
}

/** =========================================================================
 *  FROM-DISPLAY (Converter's read-only detected-format box)
 *  Deliberately styled to sit alongside real <select>/<input> fields
 *  without looking interactive — no hover state, no focus ring, no
 *  pointer cursor. It mirrors their box shape purely for visual rhythm.
 *  ========================================================================= */
.imganva-from-display {
  background: var(--imganva-surface);
  border: 1px solid var(--imganva-border);
  border-radius: var(--imganva-radius-sm);
  padding: var(--imganva-space-3) var(--imganva-space-4);
  font-family: var(--imganva-font-mono);
  font-size: var(--imganva-text-base);
  color: var(--imganva-text-muted);
}

/** =========================================================================
 *  OCR BATCH RESULTS
 *  Each completed file in a batch gets its own filename heading + text
 *  output + actions row (built in ui-ocr.js's buildBatchOcrItem()) —
 *  this lays those blocks out as a vertical stack of distinct cards,
 *  visually separate from the live per-file progress list above them.
 *  ========================================================================= */
.imganva-ocr-batch-results {
  display: flex;
  flex-direction: column;
  gap: var(--imganva-space-4);
  margin-top: var(--imganva-space-5);
}

.imganva-ocr-batch-item {
  background: var(--imganva-surface);
  border: 1px solid var(--imganva-border);
  border-radius: var(--imganva-radius-md);
  padding: var(--imganva-space-5);
}

.imganva-ocr-batch-item-title {
  font-family: var(--imganva-font-mono);
  font-size: var(--imganva-text-sm);
  font-weight: 600;
  color: var(--imganva-text-muted);
  margin: 0 0 var(--imganva-space-3) 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imganva-ocr-batch-item .imganva-textarea {
  min-height: 120px;
}

/** =========================================================================
 *  RESPONSIVE
 *  ========================================================================= */
@media (max-width: 640px) {
  .imganva-tool-container {
    --imganva-widget-min-height: 360px;
  }

  .imganva-row {
    flex-direction: column;
  }

  .imganva-condition-row > .imganva-field:nth-child(1),
  .imganva-condition-row > .imganva-field:nth-child(2),
  .imganva-condition-row > .imganva-field:nth-child(3),
  .imganva-dimension-row > .imganva-field {
    flex-basis: auto;
    width: 100%;
  }
}