/* Shared "drop an AGS" upload card — templates/includes/tools/ags_dropzone.html
 * + static/assets/js/pages/ags-upload.js. Theme-aware (light + .dark-version).
 * Factored from the AGS-to-3D wizard so every AGS general tool shares one look. */

.ags-up-inner { max-width: 560px; margin: 0 auto; }
.ags-up-title { margin-bottom: 4px; }
.ags-up-sub { color: #67748e; font-size: 0.95rem; margin-bottom: 18px; }

.ags-up-dz {
  border: 2px dashed #c9cdd6; border-radius: 14px; padding: 34px 20px;
  text-align: center; cursor: pointer; background: #fafbfc;
  transition: border-color 0.15s, background 0.15s;
}
.ags-up-dz:hover, .ags-up-dz.ags-up-drag { border-color: #744c54; background: rgba(116, 76, 84, 0.04); }
.ags-up-dz .material-symbols-rounded { font-size: 40px; color: #744c54; }
.ags-up-dz h5 { margin: 8px 0 2px; }
.ags-up-dz small { color: #8a90a2; }

.ags-up-file {
  display: none; align-items: center; gap: 8px; margin-top: 14px;
  padding: 10px 12px; border-radius: 10px; background: #f1f2f6; font-size: 0.9rem;
}
.ags-up-file .rm { margin-left: auto; cursor: pointer; color: #8a90a2; display: inline-flex; }

.ags-up-alert { display: none; margin-top: 12px; font-size: 0.875rem; }
.ags-up-alert.show { display: block; }
.ags-up-alert.warn { color: #d97706; }
.ags-up-alert.err { color: #dc3545; }

.ags-up-run { margin-top: 16px; }

/* ── dark mode ── */
:root.dark-version .ags-up-sub { color: #a1a7c4; }
:root.dark-version .ags-up-dz { background: #2a2a2a; border-color: #444; }
:root.dark-version .ags-up-dz h5 { color: #ddd; }
:root.dark-version .ags-up-dz small { color: #999; }
:root.dark-version .ags-up-file { background: #2a2a2a; color: #ddd; }
:root.dark-version .ags-up-alert.warn { color: #ffca2c; }
:root.dark-version .ags-up-alert.err { color: #ff6b7a; }

/* ══════════════════════════════════════════════════════════════════════════
 * Two-column tool layout (input LEFT, result RIGHT) — AGS→Excel, AGS Validator,
 * PDF→AGS. Everything here is scoped under `.ags-tool-2col` (a wrapper class the
 * three runTool.html templates add) or uses new class names, so the SAME shared
 * upload card in the full-page AGS→3D wizard (which loads this file but does NOT
 * carry `.ags-tool-2col`) keeps its centred, max-width look untouched.
 * ══════════════════════════════════════════════════════════════════════════ */

/* In a column the card should fill the width, not stay capped + centred. This
 * covers both the dropzone's own .ags-up-inner and any options block below it. */
.ags-tool-2col .ags-up-inner { max-width: none; margin: 0; }

/* Keep the (short) input card in view while a long result scrolls, on wide
 * screens. The inner wrapper — not the stretched Bootstrap column — is what
 * sticks, so it works regardless of the column's height. */
@media (min-width: 992px) {
  .ags-tool-2col .ags-2col-left { position: sticky; top: 1.5rem; }
}

/* Right-column empty state, shown until a result arrives (each tool seeds this
 * as the result container's initial innerHTML; the tool's renderer overwrites
 * it). Shared by all three tools — PDF→AGS only loads this stylesheet. */
.ags-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 320px; height: 100%;
  padding: 40px 28px; border: 2px dashed #dfe2e9; border-radius: 16px;
  background: #fcfcfd;
}
.ags-placeholder .material-symbols-rounded {
  font-size: 52px; line-height: 1; color: #c2c7d2; margin-bottom: 12px;
}
.ags-placeholder h5 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: #67748e; }
.ags-placeholder p { margin: 0; max-width: 34ch; font-size: 0.875rem; color: #8a90a2; }

:root.dark-version .ags-placeholder { border-color: #3a3a3a; background: #232323; }
:root.dark-version .ags-placeholder .material-symbols-rounded { color: #555; }
:root.dark-version .ags-placeholder h5 { color: #cfcfcf; }
:root.dark-version .ags-placeholder p { color: #999; }