/* DataTools Pro - Tools Page Supplemental CSS */

.tool-page-header {
  padding: var(--space-8) 0 var(--space-5);
}

.tool-page-header .breadcrumb {
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
}

.tool-page-header .tool-meta-bar {
  margin-bottom: var(--space-3);
}

.tool-page-header .section-title {
  margin-bottom: var(--space-2);
}

.tool-page-layout {
  padding: var(--space-8) 0;
  gap: var(--space-6);
}

.tool-panel-header {
  padding: var(--space-4) var(--space-6);
}

.tool-panel-body {
  padding: var(--space-5) var(--space-6);
}

.progress-steps {
  margin-bottom: var(--space-5);
}

.tool-upload-form .upload-zone {
  margin-bottom: 0;
}

.upload-zone {
  padding: var(--space-10) var(--space-6);
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--color-primary);
  background: var(--color-primary-xlight);
}

.upload-zone:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-xlight);
}

.upload-zone:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-xlight);
  outline: none;
}

.upload-zone input[type="file"] {
  z-index: 2;
}

.upload-zone > :not(input[type="file"]) {
  pointer-events: none;
}

.tool-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.tool-status-badge.is-success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.tool-status-badge.is-warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.tool-status-badge.is-error {
  background: var(--color-error-light);
  color: var(--color-error);
}

.tool-result-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.tool-result-banner-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.tool-result-banner-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin: 0;
}

.tool-result-banner-subtitle {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin: var(--space-1) 0 0;
}

.tool-result-banner.is-success {
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.06);
}

.tool-result-banner.is-success .tool-result-banner-icon {
  background: rgba(16, 185, 129, 0.14);
  color: var(--color-success);
}

.tool-result-banner.is-error {
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.06);
}

.tool-result-banner.is-error .tool-result-banner-icon {
  background: rgba(239, 68, 68, 0.14);
  color: var(--color-error);
}

@media (min-width: 900px) {
  .tool-page-layout > aside {
    position: sticky;
    top: 96px;
  }
}

.tool-upload-form,
.tool-page-layout,
.tool-panel,
#tool-result-area {
  min-width: 0;
}

.tool-upload-form .tool-panel {
  overflow: hidden;
}

#tool-result-area .card,
#tool-result-area .alert {
  max-width: 100%;
}

@media (max-width: 720px) {
  .tool-upload-form .grid,
  .tool-page-layout {
    grid-template-columns: 1fr !important;
  }

  .progress-steps {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .tool-upload-form .btn,
  #tool-result-area .btn {
    width: 100%;
    justify-content: center;
  }

  .upload-zone {
    padding: var(--space-5);
  }
}