/**
 * File: HeroX\assets\css\upload-modal.css
 *
 * Purpose:
 * - Styles for global upload modal
 * - Type-specific cropper layouts
 * - Preview displays for icons
 * - Ratio selection buttons
 *
 * Dependencies:
 * - Bootstrap 5.3
 * - upload-modal.js
 */

/* ============================================================================
   DROPZONE
   ============================================================================ */
.um-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  border: 2px dashed var(--bs-border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--bs-body-bg);
  position: relative;
}

.um-dropzone:hover,
.um-dropzone-active {
  border-color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.05);
}

.um-dropzone i {
  color: var(--bs-secondary);
  transition: color 0.2s ease;
}

.um-dropzone:hover i {
  color: var(--bs-primary);
}

.um-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* ============================================================================
   HINT
   ============================================================================ */
.um-hint {
  padding: 0.75rem 1rem;
  background: rgba(var(--bs-info-rgb), 0.1);
  border-left: 3px solid var(--bs-info);
  border-radius: 0 8px 8px 0;
  font-size: 0.875rem;
  color: var(--bs-info);
}

/* ============================================================================
   RATIO BUTTONS
   ============================================================================ */
.um-ratio-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.um-ratio-buttons button {
  min-width: 60px;
}

/* ============================================================================
   CROP WRAPPER - BASE
   ============================================================================ */
.um-crop-wrap {
  max-height: 400px;
  overflow: hidden;
  border-radius: 8px;
  background: #1a1a1a;
}

.um-crop-wrap img {
  display: block;
  max-width: 100%;
  max-height: 400px;
}

/* ============================================================================
   CROP WRAPPER - TYPE-SPECIFIC SIZES
   ============================================================================ */

/* Character image - portrait oriented */
.um-crop-char-image {
  max-height: 500px;
}

.um-crop-char-image img {
  max-height: 500px;
}

/* Icons - compact square */
.um-crop-attack-icon,
.um-crop-skill-icon,
.um-crop-item-icon {
  max-height: 300px;
  max-width: 400px;
  margin: 0 auto;
}

.um-crop-attack-icon img,
.um-crop-skill-icon img,
.um-crop-item-icon img {
  max-height: 300px;
}

/* Images - larger area */
.um-crop-attack-image,
.um-crop-skill-image,
.um-crop-item-image,
.um-crop-timeline-image {
  max-height: 450px;
}

.um-crop-attack-image img,
.um-crop-skill-image img,
.um-crop-item-image img,
.um-crop-timeline-image img {
  max-height: 450px;
}

/* Banner - wide */
.um-crop-group-banner {
  max-height: 350px;
}

.um-crop-group-banner img {
  max-height: 350px;
}

/* ============================================================================
   PREVIEWS
   ============================================================================ */
.um-previews {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background: var(--bs-body-tertiary-bg);
  border-radius: 8px;
}

.um-preview {
  width: 64px;
  height: 64px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid rgba(93, 214, 201, 0.4);
  background-color: var(--bs-body-bg);
}

.um-preview-square {
  border-radius: 4px;
}

.um-preview-rounded {
  border-radius: 12px;
}

.um-preview-circle {
  border-radius: 50%;
}

/* Preview labels */
.um-previews::before {
  content: 'Vorschau:';
  font-size: 0.75rem;
  color: var(--bs-secondary);
  margin-right: 0.5rem;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 576px) {
  .um-dropzone {
    padding: 2rem 1rem;
  }

  .um-crop-wrap {
    max-height: 300px;
  }

  .um-crop-wrap img {
    max-height: 300px;
  }

  .um-previews {
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .um-preview {
    width: 48px;
    height: 48px;
  }

  .um-ratio-buttons button {
    min-width: 50px;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
}

/* ============================================================================
   CROPPER.JS OVERRIDES
   ============================================================================ */
.cropper-view-box,
.cropper-face {
  border-radius: 0;
}

/* For icon types, show circular guide */
.um-crop-attack-icon .cropper-view-box,
.um-crop-skill-icon .cropper-view-box,
.um-crop-item-icon .cropper-view-box,
.um-crop-group-logo .cropper-view-box {
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(93, 214, 201, 0.5);
}

.cropper-line {
  background-color: rgba(93, 214, 201, 0.5);
}

.cropper-point {
  background-color: #5dd6c9;
  width: 8px;
  height: 8px;
}

.cropper-modal {
  background-color: rgba(0, 0, 0, 0.7);
}