/**
 * Import/Export Page Styles
 */

/* Page Container */
.prorank-import-export-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Page Header */
.prorank-page-header {
  margin-bottom: 32px;
}

.prorank-page-title {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--pr-gray-900, #18181b) !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.025em;
}

.prorank-page-subtitle {
  font-size: 16px;
  color: var(--pr-gray-600, #52525b);
  margin: 0;
}

/* Import/Export Grid */
.prorank-import-export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

/* Cards */
.prorank-export-card,
.prorank-import-card,
.prorank-reset-card {
  border: 1px solid var(--pr-gray-200, #e4e4e7);
  border-radius: 12px;
  transition: var(--pr-transition-fast, all 0.15s ease);
}

.prorank-export-card:hover,
.prorank-import-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
}

.prorank-export-card .components-card__header,
.prorank-import-card .components-card__header,
.prorank-reset-card .components-card__header {
  border-bottom: 1px solid var(--pr-gray-200, #e4e4e7);
  padding: 20px 24px;
}

.prorank-export-card .components-card__header h2,
.prorank-import-card .components-card__header h2,
.prorank-reset-card .components-card__header h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--pr-gray-900, #18181b);
}

.prorank-export-card .components-card__body,
.prorank-import-card .components-card__body,
.prorank-reset-card .components-card__body {
  padding: 24px;
}

.prorank-export-card .components-card__body > * + *,
.prorank-import-card .components-card__body > * + * {
  margin-top: 20px;
}

/* Export Info */
.prorank-export-info {
  background: var(--pr-gray-50, #fafafa);
  border: 1px solid var(--pr-gray-200, #e4e4e7);
  border-radius: 8px;
  padding: 16px;
}

.prorank-export-info .components-notice {
  margin: 0;
}

.prorank-export-info > .components-text {
  margin: 0;
  color: var(--pr-gray-700, #3f3f46);
}

/* File Input */
.prorank-file-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.prorank-file-name {
  color: var(--pr-gray-600, #52525b);
  font-size: 14px;
}

/* Select Controls */
.prorank-export-card .components-base-control,
.prorank-import-card .components-base-control {
  margin-bottom: 0;
}

.prorank-export-card .components-base-control__label,
.prorank-import-card .components-base-control__label {
  font-weight: 500;
  color: var(--pr-gray-900, #18181b);
  margin-bottom: 8px;
}

.prorank-export-card .components-base-control__help,
.prorank-import-card .components-base-control__help {
  margin-top: 4px;
  font-size: 13px;
  color: var(--pr-gray-600, #52525b);
}

/* Buttons */
.prorank-export-card .components-button.is-primary,
.prorank-import-card .components-button.is-primary {
  min-width: 120px;
  justify-content: center;
}

/* Reset Card */
.prorank-reset-card {
  background: linear-gradient(135deg, rgb(239 68 68 / 2%) 0%, rgb(255 255 255 / 100%) 100%);
  border-color: rgb(239 68 68 / 20%);
}

.prorank-reset-card .components-flex {
  align-items: flex-start;
}

.prorank-reset-card .components-text strong {
  color: var(--pr-accent-red, #ef4444);
}

.prorank-reset-card .components-button.is-destructive {
  background: white !important;
  color: var(--pr-accent-red, #ef4444) !important;
  border: 1px solid var(--pr-accent-red, #ef4444) !important;
}

.prorank-reset-card .components-button.is-destructive:hover {
  background: var(--pr-accent-red, #ef4444) !important;
  color: white !important;
}

/* Reset Modal */
.prorank-reset-modal .components-modal__content {
  padding: 24px;
}

.prorank-reset-modal .components-text {
  margin-bottom: 16px;
}

.prorank-reset-modal ul {
  margin: 16px 0 16px 24px;
  list-style-type: disc;
}

.prorank-reset-modal ul li {
  margin-bottom: 8px;
  color: var(--pr-gray-700, #3f3f46);
}

.prorank-reset-modal .components-flex {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--pr-gray-200, #e4e4e7);
}

/* Notices */
.prorank-import-card .components-notice {
  margin: 0;
}

.prorank-import-card .components-notice.is-warning {
  background: rgb(245 158 11 / 5%);
  border-color: rgb(245 158 11 / 30%);
}

.prorank-import-card .components-notice.is-error {
  background: rgb(239 68 68 / 5%);
  border-color: rgb(239 68 68 / 30%);
}

/* Loading States */
.prorank-export-card .components-button.is-busy,
.prorank-import-card .components-button.is-busy,
.prorank-reset-modal .components-button.is-busy {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Icon Styles */
.prorank-export-card .dashicons,
.prorank-import-card .dashicons,
.prorank-reset-card .dashicons {
  font-size: 18px;
  line-height: 1;
}

/* Responsive Design */
@media (width <= 768px) {
  .prorank-import-export-grid {
    grid-template-columns: 1fr;
  }

  .prorank-reset-card .components-flex {
    flex-direction: column;
    align-items: stretch;
  }

  .prorank-reset-card .components-button {
    width: 100%;
    justify-content: center;
  }

  .prorank-file-input-wrapper {
    flex-wrap: wrap;
  }

  .prorank-file-name {
    width: 100%;
  }
}