/* JET Monitor - Integrations Styles */

.integrations-container {
  max-width: 1200px;
  margin: 0 auto;
}

.integration-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.integration-card {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  border: 3px solid transparent;
  position: relative;
  overflow: hidden;
}

.integration-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF6600, #ff8833);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.integration-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #FF6600;
}

.integration-card:hover::before {
  transform: scaleX(1);
}

.integration-card.active {
  border-color: #FF6600;
  box-shadow: 0 4px 16px rgba(255, 102, 0, 0.2);
}

.integration-card.active::before {
  transform: scaleX(1);
}

.integration-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  font-size: 2.5rem;
  background: linear-gradient(135deg, #f7fafc, #edf2f7);
  color: #FF6600;
}

.integration-card.cloudflare .integration-icon { background: linear-gradient(135deg, #fff5e6, #ffe0b3); }
.integration-card.hubsoft .integration-icon { background: linear-gradient(135deg, #e6f7ff, #b3e0ff); }
.integration-card.zabbix .integration-icon { background: linear-gradient(135deg, #ffe6e6, #ffb3b3); }
.integration-card.grafana .integration-icon { background: linear-gradient(135deg, #ffe6f2, #ffb3d9); }

.integration-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 0.5rem;
}

.integration-description {
  font-size: 0.875rem;
  color: #718096;
}

.integration-status {
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.integration-status.enabled {
  background: #d1fae5;
  color: #065f46;
}

.integration-status.disabled {
  background: #fee2e2;
  color: #991b1b;
}

/* Configuration Panel */
.config-panel {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f1f5f9;
}

.config-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a202c;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.config-header h2 i {
  color: #FF6600;
}

.config-actions {
  display: flex;
  gap: 0.75rem;
}

.config-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  font-size: 0.875rem;
  color: #4a5568;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-group label i {
  color: #FF6600;
  font-size: 0.75rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-family: inherit;
  transition: all 0.2s;
  background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #FF6600;
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
}

.form-group input[type="password"] {
  font-family: monospace;
  letter-spacing: 0.1em;
}

.form-group.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.form-group.checkbox input {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-hint {
  font-size: 0.8125rem;
  color: #718096;
  margin-top: 0.25rem;
}

.form-hint a {
  color: #FF6600;
  text-decoration: underline;
}

/* Import Section */
.import-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px dashed #e2e8f0;
}

.import-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.import-header i {
  font-size: 1.5rem;
  color: #FF6600;
}

.import-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a202c;
}

.import-form {
  display: flex;
  gap: 1rem;
  align-items: end;
}

.import-form .form-group {
  flex: 1;
}

.import-results {
  margin-top: 1.5rem;
}

/* Mappings List */
.mappings-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.mapping-item {
  background: #f9fafb;
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
  border: 2px solid transparent;
}

.mapping-item:hover {
  border-color: #FF6600;
  box-shadow: 0 2px 8px rgba(255, 102, 0, 0.1);
}

.mapping-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mapping-arrow {
  color: #FF6600;
  font-size: 1.25rem;
}

.mapping-actions {
  display: flex;
  gap: 0.5rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, #FF6600, #ff8833);
  color: white;
  box-shadow: 0 2px 4px rgba(255, 102, 0, 0.2);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 102, 0, 0.3);
}

.btn-success {
  background: #10b981;
  color: white;
}

.btn-success:hover {
  background: #059669;
}

.btn-danger {
  background: #ef4444;
  color: white;
}

.btn-danger:hover {
  background: #dc2626;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Info Boxes */
.info-box {
  background: #e6f7ff;
  border: 2px solid #3b82f6;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.info-box.warning {
  background: #fef3c7;
  border-color: #f59e0b;
}

.info-box.success {
  background: #d1fae5;
  border-color: #10b981;
}

.info-box h4 {
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.info-box ul {
  margin-left: 1.5rem;
  margin-top: 0.5rem;
}

.info-box li {
  margin-bottom: 0.25rem;
}

/* Documentation Links */
.doc-links {
  background: #f9fafb;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-top: 2rem;
}

.doc-links h4 {
  font-weight: 700;
  margin-bottom: 1rem;
  color: #1a202c;
}

.doc-links ul {
  list-style: none;
  padding: 0;
}

.doc-links li {
  margin-bottom: 0.5rem;
}

.doc-links a {
  color: #FF6600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
}

.doc-links a:hover {
  text-decoration: underline;
  gap: 0.75rem;
}

/* Loading State */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 31, 46, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-content {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  min-width: 300px;
}

.loading-spinner {
  font-size: 3rem;
  color: #FF6600;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

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

/* Responsive */
@media (max-width: 768px) {
  .integration-selector {
    grid-template-columns: 1fr;
  }
  
  .config-form {
    grid-template-columns: 1fr;
  }
  
  .config-header {
    flex-direction: column;
    align-items: start;
    gap: 1rem;
  }
  
  .config-actions {
    width: 100%;
  }
  
  .config-actions .btn {
    flex: 1;
  }
  
  .import-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .mapping-item {
    flex-direction: column;
    align-items: start;
    gap: 1rem;
  }
}