/* Design der Website für die Werkzeuge (mytools-gps-suite). Wird per nginx nach shared-styles.css eingefügt
   und überschreibt dessen Variablen und feste Farben. Farben wie src/styles/tokens.css. */
:root {
  color-scheme: dark;
  --bg: #111417;
  --surface: #1a1f24;
  --surface-2: #222930;
  --text: #eef1f3;
  --muted: #a6b0b9;
  --line: #333c45;
  --accent: #f2a541;
  --accent-soft: #3a2c17;
  --ink: #1d1406;
  --link: #f6bb6a;
  --ok: #5bbf7f;
  --bad: #e5655c;
}
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f5f3ee;
  --surface: #ffffff;
  --surface-2: #efebe2;
  --text: #1c2227;
  --muted: #55606a;
  --line: #d6d0c3;
  --accent: #b4600c;
  --accent-soft: #f7e6cf;
  --ink: #ffffff;
  --link: #9a4f05;
  --ok: #24804a;
  --bad: #c0392b;
}

/* Variablen von shared-styles.css auf die Website-Farben legen */
:root,
:root[data-theme='light'] {
  --primary-color: var(--text);
  --secondary-color: var(--accent);
  --success-color: var(--ok);
  --warning-color: var(--accent);
  --error-color: var(--bad);
  --light-bg: var(--surface-2);
  --dark-bg: var(--surface);
  --text-color: var(--text);
  --text-light: var(--muted);
  --border-color: var(--line);
  --shadow: none;
  --shadow-hover: 0 0 0 1px var(--accent);
  --border-radius: 12px;
  --gradient-bg: var(--bg);
}

html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}
a {
  color: var(--link);
}
h1, h2, h3, h4, h5, label, strong, .tool-title, .file-display-name {
  color: var(--text) !important;
}
p, small, .subtitle, .text-light, .tool-description, .file-meta, .file-date, .file-size, .progress-text, .card-header p {
  color: var(--muted) !important;
}

/* Flächen */
.card, .tool-card, .footer .card, .modal-content, .loading-content, .file-item, .results-container,
.help-step, .status-container, .bg-white, .bg-light, .options-section, .help-section, .preview-section,
.empty-state, .file-info, .table, table, .poi-preview, .job-card, .result-card, .stats, .stat-card {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
.card, .tool-card, .file-item {
  border: 1px solid var(--line) !important;
}
.help-step, .options-section, .file-info, .empty-state {
  background: var(--surface-2) !important;
}
th {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
td, th {
  border-color: var(--line) !important;
}
.header {
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--line);
}
.header h1 i, .card-header h2 i, h3 i, h4 i {
  color: var(--accent) !important;
}

/* Eingaben */
input:not([type='checkbox']):not([type='radio']):not([type='file']), textarea, select, .form-textarea, .file-description {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent) !important;
  border-color: var(--accent) !important;
}
input[type='checkbox'], input[type='radio'] {
  accent-color: var(--accent);
}
.file-input-label, .drop-zone, #dropZone, .upload-area {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 2px dashed var(--line) !important;
  border-radius: 12px !important;
}
.file-input-label:hover, .drop-zone:hover, #dropZone:hover, .drop-zone.dragover, #dropZone.dragover {
  border-color: var(--accent) !important;
}
.code-preview, pre, code {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

/* Knöpfe wie auf der Website */
.btn, button.btn, .btn-primary, .btn-large {
  background: var(--accent) !important;
  color: var(--ink) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 700;
}
.btn:hover {
  filter: brightness(1.08);
  transform: none !important;
}
.btn-secondary, .btn-small, .btn-warning {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}
.btn-success {
  background: var(--ok) !important;
  color: #fff !important;
}
.delete-file-btn:hover, .btn-danger {
  background: var(--bad) !important;
  color: #fff !important;
}
.step-number {
  background: var(--accent) !important;
  color: var(--ink) !important;
}
.progress-bar {
  background: var(--surface-2) !important;
}
.progress-fill {
  background: var(--accent) !important;
}

/* Meldungen */
.status-message.success, .flash-success, .alert-success {
  background: color-mix(in srgb, var(--ok) 16%, var(--surface)) !important;
  color: var(--text) !important;
  border-color: var(--ok) !important;
}
.status-message.error, .flash-error, .alert-danger, .error-container {
  background: color-mix(in srgb, var(--bad) 16%, var(--surface)) !important;
  color: var(--text) !important;
  border-color: var(--bad) !important;
}
.status-message.info, .status-message.warning, .flash-info, .flash-warning, .alert-info, .alert-warning {
  background: var(--accent-soft) !important;
  color: var(--text) !important;
  border-color: var(--accent) !important;
}

/* In einem Beitrag eingebettet: ohne eigenen Kopf, ohne Rand, transparent */
html.embedded,
html.embedded body {
  background: transparent !important;
  min-height: 0 !important;
}
html.embedded .container {
  max-width: none !important;
  padding: 16px !important;
  margin: 0 !important;
}
html.embedded .header,
html.embedded .breadcrumb {
  display: none !important;
}
html.embedded .main-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Dateiauswahl: natives Feld ausblenden, wenn ein gestaltetes Label daneben steht (POI Pattern Extractor) */
.file-input-container input[type='file'] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
}
.upload-button, button[type='submit']:not(.btn) {
  background: var(--accent) !important;
  color: var(--ink) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0.75rem 1.4rem !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  cursor: pointer;
}