/* VYNDEXO_UPSCALE_ENHANCE_20260913 -- panel styling for the Upscale & Enhance
   tool mounted inside a Canvas tile's Tools tab (#lc-tools-host-<tileId>).
   Deliberately mirrors the .lc-bgr* rules already defined directly in
   index.html (BGRPANEL_20260905) for Background Remover -- same compact
   sidebar scale, same header/button/label language, same dark-theme
   variables (--s2, --s3, --accent, --text1/2/3, --border2) -- so every tool
   in this rail feels consistent. Kept in this external stylesheet (rather
   than inline in index.html) because index.html edits for this feature are
   scoped to the minimal anchors described in the build spec. */

.lc-upe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px;
  font-size: 12.5px;
  color: var(--text2);
}

.lc-upe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lc-upe-head span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.lc-upe-head button {
  border: 0;
  background: transparent;
  color: var(--text3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}

.lc-upe-head button:hover {
  background: var(--s3);
  color: var(--text);
}

.lc-upe button,
.lc-upe input[type="number"] {
  border: 1px solid var(--border2);
  background: var(--s2);
  color: var(--text);
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  padding: 7px 10px;
  min-height: 32px;
}

.lc-upe input[type="number"] {
  cursor: text;
  width: 100%;
  min-width: 0;
}

.lc-upe button:hover {
  border-color: var(--accent);
  background: var(--s3);
}

.lc-upe button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  width: 100%;
}

.lc-upe button.primary:hover {
  filter: brightness(1.08);
}

.lc-upe button.active,
.lc-upe .upe-mode-btn.active,
.lc-upe .upe-preset-btn.active,
.lc-upe .upe-framing-btn.active,
.lc-upe .upe-quality-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.lc-upe button:disabled,
.lc-upe input:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.lc-upe-status {
  font-size: 11.5px;
  color: var(--text3);
  line-height: 1.4;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(29, 32, 41, .48);
}

.lc-upe-status.busy {
  color: var(--accent);
}

.lc-upe-status.error {
  color: #e07a7a;
  border-color: rgba(220, 90, 110, .4);
}

.lc-upe-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lc-upe-box.disabled {
  opacity: .45;
  pointer-events: none;
}

.lc-upe-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
}

.lc-upe-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.lc-upe-row-wrap {
  flex-wrap: wrap;
}

.lc-upe-row button {
  flex: 1;
  white-space: nowrap;
}

.lc-upe-row-wrap button {
  flex: 0 0 auto;
}

.lc-upe-x {
  color: var(--text3);
  font-size: 12px;
}

.lc-upe-box input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

.lc-upe-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text2);
  cursor: pointer;
  user-select: none;
}

.lc-upe-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

[id^="upe-face-row-"].disabled {
  opacity: .45;
  pointer-events: none;
}

/* VYNDEXO_UPSCALE_ENHANCE_STANDALONE_20260913 -- standalone entry point:
   the left-rail "Upscale" button now also works with no Media Project/canvas
   open and no tile selected. Same .lc-upe panel body/logic mounted into its
   own centered modal instead of a canvas tile's Tools-tab host, with an
   upload-first source box and a result/download box in place of the
   canvas-layer swap. Same dark-theme variables as the rest of the panel. */

.lc-upe-modal-backdrop {
  position: fixed;
  inset: 0;
  /* Must render above the Media Studio's own fullscreen overlay
     (.v2-overlay, z-index:9000) since this standalone modal is opened
     from the left-rail Upscale button while that studio overlay is
     showing (no tile selected / no Media Project canvas). At the old
     z-index:2000 the modal was mounted correctly in the DOM (and worked
     when opened outside the studio) but rendered fully hidden behind
     the studio overlay -- appearing as if nothing happened. */
  z-index: 100003;
  background: rgba(8, 9, 14, .62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lc-upe-modal-card {
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.lc-upe-standalone .lc-upe-head span {
  font-size: 14px;
}

.lc-upe-source {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  border: 1px dashed var(--border2);
  border-radius: 10px;
  padding: 10px;
  background: rgba(29, 32, 41, .3);
}

.lc-upe-source img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  object-fit: contain;
  cursor: pointer;
}

.lc-upe-source-empty {
  width: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-size: 12.5px;
  border-radius: 8px;
  background: rgba(29, 32, 41, .5);
  cursor: pointer;
}

.lc-upe-source button {
  width: 100%;
}

.lc-upe-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 10px;
  background: rgba(29, 32, 41, .3);
}

.lc-upe-result img {
  max-width: 100%;
  max-height: 260px;
  border-radius: 8px;
  object-fit: contain;
}

.lc-upe-download {
  display: block;
  width: 100%;
  text-align: center;
  border: 1px solid var(--border2);
  background: var(--s2);
  color: var(--text);
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 650;
  padding: 7px 10px;
  text-decoration: none;
  box-sizing: border-box;
}

.lc-upe-download:hover {
  border-color: var(--accent);
  background: var(--s3);
}

/* CANVASPICKER_20260914 -- "Upload image" / "Pick from canvas" side-by-side
   buttons under the standalone source box, plus the pick-from-canvas
   thumbnail grid overlay. Same dark-theme variables and modal-backdrop
   pattern as the rest of this panel. */
.lc-upe-source-btnrow {
  display: flex;
  gap: 8px;
  width: 100%;
}

.lc-upe-source-btnrow button {
  flex: 1;
  width: auto;
}

.lc-upe-canvaspicker-backdrop {
  z-index: 100004; /* one above the standalone modal it opens on top of */
}

.lc-upe-cp-card {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.lc-upe-cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.lc-upe-cp-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: rgba(29, 32, 41, .3);
  cursor: pointer;
  text-align: left;
}

.lc-upe-cp-item:hover {
  border-color: var(--accent);
  background: var(--s3);
}

.lc-upe-cp-item img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.lc-upe-cp-item span {
  font-size: 11px;
  color: var(--text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-upe-cp-empty {
  grid-column: 1 / -1;
  padding: 24px 8px;
  text-align: center;
  color: var(--text3);
  font-size: 12.5px;
}