/*
 * BC Email Extractor - Tool Styles
 * Version: 1.3.0
 */

:root {
  --ee-primary: #2563eb;
  --ee-green: #10b981;
  --ee-amber: #f59e0b;
  --ee-teal: #14b8a6;
  --ee-red: #ef4444;
  --ee-border: #e5e7eb;
  --ee-text: #111827;
  --ee-sub: #6b7280;
  --ee-muted: #9ca3af;
}

/* Tool wrapper */
.ee-tool-wrapper {
  max-width: 100%;
}

/* Input meta (char count + shortcut hint) */
.ee-input-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ee-muted);
}

.ee-shortcut-hint kbd {
  background: #f3f4f6;
  border: 1px solid var(--ee-border);
  border-radius: 4px;
  padding: 0.125rem 0.375rem;
  font-family: inherit;
  font-size: 0.75rem;
}

/* 4-column stats grid */
.ee-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

/* Button variants */
.ee-btn-primary {
  background: var(--ee-primary) !important;
  color: #fff !important;
  font-weight: 600;
}

.ee-btn-copy { background: var(--ee-green) !important; color: #fff !important; }
.ee-btn-txt { background: var(--ee-amber) !important; color: #fff !important; }
.ee-btn-csv { background: var(--ee-teal) !important; color: #fff !important; }
.ee-btn-clear { background: var(--ee-red) !important; color: #fff !important; }

.ee-btn-sm {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.8125rem !important;
}

/* Domain breakdown clickable badges */
.ee-badge {
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.ee-badge:hover {
  background: #e5e7eb;
  transform: translateY(-1px);
}

.ee-badge .ee-count {
  background: var(--ee-primary);
  color: #fff;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Group output styling */
.ee-group-wrapper {
  margin-bottom: 1rem;
}

.ee-group-wrapper:last-child {
  margin-bottom: 0;
}

.ee-group-title {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.ee-group-pre {
  background: #fff;
  border: 1px dashed var(--ee-border);
  border-radius: 8px;
  padding: 0.75rem;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Toast notifications */
.ee-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #fff;
  background: var(--ee-text);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
  z-index: 9999;
}

.ee-toast-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

.ee-toast-success { background: var(--ee-green); }
.ee-toast-warning { background: var(--ee-amber); }
.ee-toast-error { background: var(--ee-red); }
.ee-toast-info { background: var(--ee-primary); }

/* Responsive */
@media (max-width: 900px) {
  .ee-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .ee-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .ee-input-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}