// Wrapper divs we added to satisfy the single-root-element requirement
.sp-preset-export-dialog,
.sp-preset-import-dialog {
  display: flex;
  flex-direction: column;
  height: 100%;
}


// Story 3.3: Preset Import & Export
// ============================================================================

// -----------------------------------------------------------------------------
// Shared Dialog Styles
// -----------------------------------------------------------------------------

.scrying-pool.dialog.preset-export,
.scrying-pool.dialog.preset-import {
  background: var(--sp-dialog-bg);
  color: var(--sp-text-primary);
  border: var(--sp-dialog-border);
  border-top: 2px solid var(--sp-accent);
  border-radius: var(--sp-dialog-radius);
  box-shadow: var(--sp-dialog-shadow);

  .sp-dialog-content {
    padding: var(--sp-space-m);
    color: var(--sp-text-primary);
  }

  .sp-dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-space-xs);
    padding: var(--sp-space-m);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
    border-radius: 0 0 var(--sp-dialog-radius) var(--sp-dialog-radius);
  }

  // Description text
  .sp-export-description,
  .sp-import-description {
    margin: 0 0 var(--sp-space-m) 0;
    color: var(--sp-text-secondary);
    line-height: 1.5;
  }

  // Form groups
  .sp-form-group {
    margin-bottom: var(--sp-space-m);

    &:last-child {
      margin-bottom: 0;
    }
  }

  .sp-form-label {
    display: block;
    margin-bottom: var(--sp-space-xs);
    font-weight: 600;
    color: var(--sp-text-primary);
    font-size: var(--sp-font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  // Info rows
  .sp-export-info,
  .sp-import-info {
    display: flex;
    align-items: center;
    gap: var(--sp-space-xs);
    margin-bottom: var(--sp-space-xs);
    padding: var(--sp-space-xs) var(--sp-space-sm);
    background: var(--sp-surface-subtle);
    border-radius: var(--sp-radius-sm);
    font-size: var(--sp-font-size-sm);
  }

  .sp-info-label {
    color: var(--sp-text-secondary);
    font-weight: 600;
  }

  .sp-info-value {
    color: var(--sp-text-primary);
  }

  .sp-filename {
    font-family: monospace;
    font-size: 0.85em;
    word-break: break-all;
  }

  // ---------------------------------------------------------------------------
  // Buttons — using shared SP button tokens
  // ---------------------------------------------------------------------------

  .sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-btn-gap, 6px);
    padding: var(--sp-btn-padding, 7px 14px);
    border: 1px solid transparent;
    border-radius: var(--sp-btn-radius, 5px);
    font-size: var(--sp-btn-font-size, 12px);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    line-height: 1.2;

    &:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      pointer-events: none;
    }

    i {
      font-size: 0.9em;
      pointer-events: none;
    }
  }

  .sp-btn-primary {
    background: var(--sp-btn-primary-bg, var(--sp-accent));
    color: var(--sp-btn-primary-text, #fff);

    &:hover:not(:disabled) {
      background: var(--sp-btn-primary-hover, var(--sp-accent-hover));
    }

    &:active:not(:disabled) {
      background: var(--sp-btn-primary-active, var(--sp-accent-active));
    }
  }

  .sp-btn-secondary {
    background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
    color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
    border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
    font-weight: 500;

    &:hover:not(:disabled) {
      background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
      color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
    }
  }

  .sp-btn-danger {
    background: var(--sp-btn-danger-bg, var(--sp-color-red));
    color: var(--sp-btn-danger-text, #fff);

    &:hover:not(:disabled) {
      background: var(--sp-btn-danger-hover, var(--sp-color-red-dark));
    }
  }

  // ---------------------------------------------------------------------------
  // File Upload Styles
  // ---------------------------------------------------------------------------

  .sp-file-upload {
    position: relative;
    overflow: hidden;
    display: inline-block;
  }

  .sp-file-input {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
  }

  .sp-file-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-space-xs);
    padding: var(--sp-space-sm) var(--sp-space-m);
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: var(--sp-btn-radius, 5px);
    cursor: pointer;
    color: var(--sp-text-secondary);
    transition: background 0.15s, border-color 0.15s, color 0.15s;

    &:hover {
      border-color: var(--sp-accent);
      color: var(--sp-accent);
      background: rgba(255, 255, 255, 0.06);
    }

    i {
      font-size: 1.1em;
    }
  }

  .sp-file-selected {
    display: flex;
    align-items: center;
    gap: var(--sp-space-xs);
    margin-top: var(--sp-space-xs);
    padding: var(--sp-space-xs) var(--sp-space-sm);
    background: var(--sp-color-green-subtle);
    border-radius: var(--sp-radius-sm);
    font-size: var(--sp-font-size-sm);
    color: var(--sp-color-green);

    i {
      font-size: 0.9em;
    }
  }

  // ---------------------------------------------------------------------------
  // Radio Group Styles
  // ---------------------------------------------------------------------------

  .sp-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-xs);
  }

  .sp-radio-label {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-space-sm);
    padding: var(--sp-space-xs) var(--sp-space-sm);
    border-radius: var(--sp-btn-radius, 5px);
    cursor: pointer;
    transition: background 0.15s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.04);
    }

    input[type="radio"] {
      margin-top: 0.2em;
      accent-color: var(--sp-accent);
    }

    .sp-radio-text {
      font-weight: 500;
      color: var(--sp-text-primary);
    }

    .sp-radio-hint {
      display: block;
      font-size: 0.85em;
      color: var(--sp-text-secondary);
      margin-top: 0.1em;
    }
  }

  // ---------------------------------------------------------------------------
  // Preview Section
  // ---------------------------------------------------------------------------

  .sp-preview-section {
    margin-top: var(--sp-space-m);
    padding-top: var(--sp-space-m);
    border-top: 1px solid var(--sp-border);
  }

  .sp-preview-title {
    margin: 0 0 var(--sp-space-sm) 0;
    font-size: var(--sp-font-size-sm);
    font-weight: 600;
    color: var(--sp-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .sp-preview-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--sp-btn-radius, 5px);
    background: rgba(0, 0, 0, 0.2);
  }

  .sp-preview-item {
    display: flex;
    align-items: center;
    gap: var(--sp-space-sm);
    padding: var(--sp-space-xs) var(--sp-space-sm);
    border-bottom: 1px solid var(--sp-border-subtle);

    &:last-child {
      border-bottom: none;
    }

    i {
      font-size: 0.9em;
      flex-shrink: 0;
    }

    .sp-valid {
      color: var(--sp-color-green);
    }

    .sp-invalid {
      color: var(--sp-color-red);
    }

    .sp-preview-name {
      flex-grow: 1;
      font-size: var(--sp-font-size-sm);
      color: var(--sp-text-primary);
    }

    .sp-preview-error {
      font-size: 0.8em;
      color: var(--sp-color-red);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 200px;
    }

    &--invalid {
      background: rgba(var(--sp-color-red-rgb), 0.05);
    }
  }

  // ---------------------------------------------------------------------------
  // Warning Box
  // ---------------------------------------------------------------------------

  .sp-warning-box {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-space-sm);
    padding: var(--sp-space-sm);
    margin-bottom: var(--sp-space-m);
    background: var(--sp-color-yellow-subtle);
    border-radius: var(--sp-radius-sm);
    color: var(--sp-color-yellow);
    font-size: var(--sp-font-size-sm);

    i {
      font-size: 1.1em;
      flex-shrink: 0;
      margin-top: 0.1em;
    }
  }

  // ---------------------------------------------------------------------------
  // Confirmation Section
  // ---------------------------------------------------------------------------

  .sp-confirmation-section {
    margin-top: var(--sp-space-m);
    padding: var(--sp-space-sm);
    background: var(--sp-color-red-subtle);
    border-radius: var(--sp-radius-sm);
  }

  .sp-confirmation-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-space-sm);
    color: var(--sp-color-red);
    font-size: var(--sp-font-size-sm);
    font-weight: 500;

    i {
      font-size: 1.1em;
      flex-shrink: 0;
      margin-top: 0.1em;
    }
  }

  // ---------------------------------------------------------------------------
  // Loading State
  // ---------------------------------------------------------------------------

  .fas.fa-spinner.fa-spin {
    animation: sp-spin 0.8s linear infinite;
  }

  @keyframes sp-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}

// -----------------------------------------------------------------------------
// Responsive adjustments
// -----------------------------------------------------------------------------

@media (max-width: 768px) {
  .scrying-pool.dialog.preset-export,
  .scrying-pool.dialog.preset-import {
    width: 90vw;
    max-width: 500px;
  }

  .sp-dialog-buttons {
    flex-wrap: wrap;
    gap: var(--sp-space-sm);

    .sp-btn {
      flex: 1 1 100%;
    }
  }
}