/* Text Case Converter Specific CSS */

html, body {
  height: 100% !important;
  overflow: hidden !important;
}

.app-container {
  height: calc(100vh - 82px) !important;
  display: flex !important;
  flex-direction: column !important;
}

.text-textarea {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  resize: none;
  height: 100% !important;
  padding: 1.25rem !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border-radius: 16px !important;
  transition: var(--transition-smooth);
}

.textarea-container {
  flex-grow: 1 !important;
  height: 100% !important;
}

.glass-card {
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.glass-card:focus-within {
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.15) !important;
}

.metrics-grid {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.metrics-grid .status-indicator-badge {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.4rem 0.8rem;
  border-radius: 50px;
}

.action-grid-case button {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.6rem 1rem !important;
  transition: var(--transition-smooth);
}

.case-btn {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-muted) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  transition: var(--transition-smooth);
}

.case-btn:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: var(--text-light) !important;
  background: rgba(56, 189, 248, 0.05) !important;
}

.case-btn.active {
  background: var(--primary-glow) !important;
  border-color: var(--primary-glow) !important;
  color: #000000 !important;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.4) !important;
}