/* =========================================================================
   dp-confirm.css — DigitalPainters Confirm Dialog
   Grid-adaptive overlay (10x6 / 8x5 / 6x4) with TTS, OK/Cancel buttons.
   Layout: Icon+Title+TTS (top) | Image (middle) | OK+Cancel (bottom)
   ========================================================================= */

/* Self-contained overlay base (works without dp-theme.css in app pages) */
#dp-confirm-overlay {
  display: none; position: fixed; inset: 0; z-index: 50000;
  background: var(--dp-bg-overlay, rgba(10, 10, 20, 0.97));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#dp-confirm-overlay.open {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 10), minmax(0, 1fr));
  grid-template-rows: repeat(var(--grid-rows, 6), minmax(0, 1fr));
  gap: var(--dp-gap, clamp(3px, 0.5vw, 6px)); padding: var(--dp-gap, clamp(3px, 0.5vw, 6px));
}

/* --- Top row: Icon | Title | TTS --- */

#dp-confirm-icon {
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(36px, 6vw, 72px);
  color: var(--dp-text, #fff);
}
#dp-confirm-icon svg {
  width: clamp(48px, 8vw, 96px);
  height: clamp(48px, 8vw, 96px);
  color: var(--dp-text, #fff);
  stroke: var(--dp-text, #fff);
}
#dp-confirm-title {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: clamp(18px, 3vw, 36px);
  font-weight: 700;
  color: var(--dp-text, #fff);
}

/* --- TTS (Vorlesen) button --- */

#dp-confirm-tts {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--dp-bg-card, linear-gradient(135deg, #1a1a2e, #2a2a45));
  border: 3px solid var(--dp-accent, #7b68ee);
  border-radius: var(--dp-radius, min(16px, 1.5vw));
  color: var(--dp-text, #fff);
  cursor: pointer;
  position: relative; overflow: hidden;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
#dp-confirm-tts svg {
  width: clamp(28px, 5vw, 56px);
  height: clamp(28px, 5vw, 56px);
}
@media (hover: hover) {
  #dp-confirm-tts:hover {
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(123,104,238,0.3);
    z-index: 2;
  }
}

/* --- Middle: Image/Description preview --- */

#dp-confirm-desc {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: clamp(13px, 1.8vw, 22px);
  color: var(--dp-text-dim, rgba(255,255,255,0.7));
  line-height: 1.4;
  padding: 0 8px;
  overflow: hidden;
  min-height: 0;       /* prevent grid blowout */
}
#dp-confirm-desc img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain; border-radius: 8px;
}

/* --- Bottom: OK / Cancel buttons --- */

#dp-confirm-ok,
#dp-confirm-cancel {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--dp-bg-card, linear-gradient(135deg, #1a1a2e, #2a2a45));
  border-radius: var(--dp-radius, min(16px, 1.5vw));
  color: var(--dp-text, #fff);
  cursor: pointer;
  position: relative; overflow: hidden;
  font-family: inherit;
  font-size: clamp(16px, 2.5vw, 28px);
  font-weight: 700;
  transition: transform 0.15s, box-shadow 0.15s;
}
#dp-confirm-ok { border: 3px solid var(--dp-ok, #4CAF50); }
#dp-confirm-cancel { border: 3px solid var(--dp-cancel, #F44336); }
@media (hover: hover) {
  #dp-confirm-ok:hover { transform: scale(1.03); box-shadow: 0 0 20px rgba(76,175,80,0.3); z-index: 2; }
  #dp-confirm-cancel:hover { transform: scale(1.03); box-shadow: 0 0 20px rgba(244,67,54,0.3); z-index: 2; }
}

/* --- Lucide SVG icons inside OK / Cancel --- */

.dp-confirm-icon {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.dp-confirm-icon svg {
  width: clamp(32px, 5vw, 56px);
  height: clamp(32px, 5vw, 56px);
}
#dp-confirm-ok .dp-confirm-icon svg { color: var(--dp-ok, #4CAF50); }
#dp-confirm-cancel .dp-confirm-icon svg { color: var(--dp-cancel, #F44336); }