/* Stile aus der archivierten index.html.bak, um das ursprüngliche Design wiederherzustellen */

body {
  background: #fafbfc;
  font-family: 'Inter', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Medical Facts and Document Display Styles */
.fact-group {
    border-left: 4px solid #10b981;
    padding-left: 1rem;
}

.fact-group h4 {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #065f46;
}

.fact-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fact-group li {
    margin-bottom: 0.25rem;
    padding: 0.5rem;
    background: white;
    border-radius: 0.375rem;
    border-left: 4px solid #34d399;
    font-size: 0.875rem;
    line-height: 1.4;
}

.document-section {
    margin-bottom: 1.5rem;
}

.document-section h4 {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #1e40af;
    border-bottom: 2px solid #dbeafe;
    padding-bottom: 0.25rem;
}

.document-section .bg-gray-50 {
    background-color: #f9fafb;
    padding: 0.75rem;
    border-radius: 0.375rem;
    line-height: 1.6;
}

/* Status-Indikatoren, angepasst an die neuen Klassen */
.status-indicator {
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
    font-size: 0.875rem;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: fit-content;
}
.status-info { background-color: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.status-success { background-color: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.status-error { background-color: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.status-warning { background-color: #fefbeb; color: #d97706; border: 1px solid #fef08a; }
.status-loading { background-color: #fefce8; color: #a16207; border: 1px solid #fef08a; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }


#status { display: none; }

/* Microphone Button Styles from index.html.bak */
.microphone-button-inactive {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: none;
    background: #E53935;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(229, 57, 53, 0.3);
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.microphone-button-inactive:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(229, 57, 53, 0.4);
}

.microphone-button-inactive svg,
.microphone-button-active svg,
.microphone-button-recording svg,
.microphone-button-paused svg {
    color: white;
    width: 100px;
    height: 100px;
}

.microphone-button-recording,
.microphone-button-active {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: none;
    background: #FB923C; /* Orange color for recording */
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 8px rgba(251, 146, 60, 0.2);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.microphone-button-paused {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: none;
    background: #FB923C; /* Orange color for paused state */
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(251, 146, 60, 0.3);
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

/* Allgemeine UI-Elemente für die neue Struktur */
.status-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.results-container {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    width: 100%;
    max-width: 500px;
    min-height: 150px;
}

.timer {
    font-family: monospace;
    font-size: 1.25rem;
    color: #4b5563;
    text-align: center;
}

.transcription-results {
    min-height: 100px;
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: 0.5rem;
    color: #374151;
    line-height: 1.6;
    white-space: pre-wrap;
    font-size: 1rem;
}

/* Live transcription styling */
.final-transcript {
    color: #1f2937;
    font-weight: 500;
}

.interim-transcript {
    color: #6b7280;
    font-style: italic;
    opacity: 0.8;
}

.transcript-editor {
    width: 100%;
    min-height: 150px;
    padding: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 1rem;
}

.controls-container {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.generate-button {
    background-color: #1d4ed8;
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.generate-button:hover {
    background-color: #1e40af;
}

.main-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 90vh;
  padding: 2rem 1rem;
  gap: 1.5rem;
}

.transcript-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  width: 100%;
  max-width: 500px;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.transcript-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px 8px 24px;
  font-weight: 600;
  font-size: 1.1rem;
  border-bottom: 1px solid #ececec;
}

.copy-btn {
  background: none;
  border: none;
  color: #b0b0b0;
  cursor: pointer;
  font-size: 0.95rem;
}

.transcript-content {
  min-height: 180px;
  padding: 32px 24px;
  color: #7a7a7a;
  font-size: 1.1rem;
  text-align: center;
}

.recorder-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.record-btn {
  background: #f44336;
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 32px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(244,67,54,0.08);
  transition: background 0.2s;
}

.record-btn:active {
  background: #d32f2f;
}

.record-btn.recording {
  background: #d32f2f;
  animation: pulse 2s infinite;
}

.record-btn.paused {
  background: #f59e0b;
  color: #fff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.record-btn.paused:hover {
  background: #d97706;
}

.stop-btn {
  background: #374151;
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 24px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(55, 65, 81, 0.2);
  transition: background 0.2s;
}

.stop-btn:hover {
  background: #111827;
}

.stop-btn.hidden {
  display: none;
}

.stop-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
  }
}

.mic-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.settings-btn {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.settings-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.settings-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.settings-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  backdrop-filter: blur(4px);
}

.settings-backdrop.hidden {
  display: none;
}

.settings-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: 0;
  z-index: 100;
  width: 90%;
  max-width: 420px;
  max-height: 85vh;
  overflow: hidden;
}

.settings-menu.hidden {
  display: none;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
}

.settings-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

.close-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: #f9fafb;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease;
}

.close-settings-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.settings-section {
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
}

.settings-section:last-child {
  border-bottom: none;
}

.settings-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

.option-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-item {
  position: relative;
  display: flex;
  align-items: center;
}

.option-radio {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.option-label {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.option-label:before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  margin-right: 12px;
  transition: all 0.15s ease;
  background: #fff;
}

.option-radio:checked + .option-label {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
}

.option-radio:checked + .option-label:before {
  border-color: #3b82f6;
  background: #3b82f6;
  box-shadow: inset 0 0 0 2px #fff;
}

.option-label:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.option-radio:checked + .option-label:hover {
  background: #dbeafe;
  border-color: #3b82f6;
}

/* Microphone options will use the same styling as language options */

/* Report item cards */
.report-item {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.15s ease;
}

.report-item:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.report-header {
    margin-bottom: 0.5rem;
}

.report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Icon-only button styles for report management */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: #6b7280;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

.btn-icon-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: #dc2626;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon-danger:hover {
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

/* Tab locking styles */
.tab-locked {
    cursor: not-allowed !important;
}

.tab-locked-active {
    opacity: 0.7;
}

.tab-locked-inactive {
    opacity: 0.5;
}

/* ========================================
   UTILITY CLASSES
   WP-1.3: Semantic CSS classes to replace inline styles
   ======================================== */

/* Display utilities */
.display-none {
    display: none !important;
}

.display-block {
    display: block !important;
}

.display-flex {
    display: flex !important;
}

.display-inline-block {
    display: inline-block !important;
}

/* Visibility utilities (element still takes space) */
.invisible {
    visibility: hidden !important;
}

.visible {
    visibility: visible !important;
}

/* Opacity utilities */
.opacity-0 {
    opacity: 0;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-70 {
    opacity: 0.7;
}

.opacity-100 {
    opacity: 1;
}

/* Text color utilities */
.text-active {
    color: rgb(17, 24, 39); /* dark gray for active state */
}

.text-inactive {
    color: rgb(107, 114, 128); /* light gray for inactive state */
}

.text-error {
    color: #dc2626;
}

.text-success {
    color: #16a34a;
}

.text-warning {
    color: #d97706;
}

.text-info {
    color: #2563eb;
}

.text-muted {
    color: #6b7280;
}

/* Background color utilities */
.bg-blue {
    background-color: #3b82f6; /* Blue for facts mode */
}

.bg-green {
    background-color: #10b981; /* Green for transcript mode */
}

.bg-error {
    background-color: #fee2e2;
}

.bg-success {
    background-color: #dcfce7;
}

.bg-warning {
    background-color: #fef3c7;
}

.bg-info {
    background-color: #dbeafe;
}

/* Cursor utilities */
.cursor-pointer {
    cursor: pointer;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-default {
    cursor: default;
}

/* Transform utilities for toggle knob animation */
.translate-x-0 {
    transform: translateX(0px);
}

.translate-x-32 {
    transform: translateX(32px);
}

/* Transform utilities for rotation and scale */
.rotate-0 {
    transform: rotate(0deg);
}

.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.scale-105 {
    transform: scale(1.05);
}

/* Font size utilities */
.text-xs {
    font-size: 0.8em;
}

/* Margin utilities */
.mt-2px {
    margin-top: 2px;
}

/* Specific utility for option descriptions */
.option-description {
    font-size: 0.8em;
    color: #666;
    margin-top: 2px;
}

/* Textarea disabled state */
.textarea-disabled {
    background-color: #f9fafb !important;
    cursor: not-allowed !important;
}

/* Server status button hover effect for error/timeout states */
.server-status-hover-scale:hover {
    transform: scale(1.05);
    transition: transform 0.15s ease;
}