/* Inter — lokal gehostet (kein CDN zur Laufzeit) */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/vendor/fonts/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/vendor/fonts/inter-500.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/vendor/fonts/inter-600.woff2") format("woff2");
}

/* Typografie & Grundlayout */

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Hauptbereich — mehr Luft */

.tm-main {
  max-width: 1600px;
}

.tm-panel {
  border-radius: 0.75rem;
  border: 1px solid rgba(42, 42, 58, 0.9);
  background: rgba(28, 28, 40, 0.72);
  padding: 1.25rem 1.5rem;
}

.tm-panel + .tm-panel,
.tm-panel-spaced {
  margin-top: 1.5rem;
}

/* Tabellen — luftiger */

.data-table th,
.data-table td {
  padding: 0.875rem 1.25rem 0.875rem 0;
  vertical-align: middle;
}

.data-table th:last-child,
.data-table td:last-child {
  padding-right: 0;
}

.data-table thead tr {
  border-bottom: 1px solid rgba(42, 42, 58, 0.85);
}

.data-table tbody tr {
  border-bottom: 1px solid rgba(42, 42, 58, 0.45);
}

/* Sidebar */

#appSidebar {
  background: linear-gradient(180deg, #16161f 0%, #12121a 100%);
}

.sb-section-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
}

.sb-filter-select option {
  padding: 0.25rem 0.5rem;
}

.sb-filter-select {
  scrollbar-width: thin;
  scrollbar-color: #3f3f55 transparent;
}

/* Trends-Tab-Gruppen (wie System) */

.trends-tab-groups {
  gap: 0.5rem 0;
}

.trends-level-tab {
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.trends-level-tab.active {
  border-bottom-width: 2px;
  border-bottom-color: #6d5fc4;
  color: #c4b5fd;
  background: transparent;
}

.header-sources-mobile {
  display: none;
}

.mobile-bottom-nav {
  display: none;
}

.header-sources-desktop {
  display: block;
}

/* Mobile: Filter in Topbar, Sidebar für Detail-Filter, Bottom-Nav */

#mobileFilterBar {
  display: none;
}

@media (max-width: 767px) {
  body {
    padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  }

  .header-main-nav {
    display: none !important;
  }

  .header-sources-desktop {
    display: none !important;
  }

  .header-sources-mobile {
    display: block;
  }

  #mobileFilterBar {
    display: flex;
  }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    align-items: stretch;
    justify-content: space-around;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    background: rgba(22, 22, 31, 0.96);
    border-top: 1px solid rgba(42, 42, 58, 0.95);
    backdrop-filter: blur(8px);
  }

  .mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 3rem;
    padding: 0.35rem 0.25rem;
    border-radius: 0.5rem;
    font-size: 0.65rem;
    font-weight: 500;
    color: #94a3b8;
    border: 1px solid transparent;
    background: transparent;
  }

  .mobile-nav-btn.active {
    color: #c4b5fd;
    background: rgba(109, 95, 196, 0.18);
    border-color: rgba(109, 95, 196, 0.35);
  }

  .mobile-nav-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .tm-footer {
    margin-bottom: 0.5rem;
  }

  .sb-section-mobile-hide {
    display: none !important;
  }

  #menuToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #appSidebar {
    position: fixed;
    top: 6.75rem;
    left: 0;
    bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    width: min(18rem, 88vw);
    max-width: 88vw;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45);
    overflow-y: auto;
  }

  #appSidebar.sidebar-open {
    transform: translateX(0);
  }

  #sidebarBackdrop {
    display: none;
    position: fixed;
    top: 6.75rem;
    left: 0;
    right: 0;
    bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
  }

  #sidebarBackdrop.sidebar-open {
    display: block;
  }

  #appMain {
    min-width: 0;
    width: 100%;
    padding: 1rem 1rem 1.25rem;
  }
}

/* Trends: Karten statt breiter Tabellen auf schmalen Displays */

@media (max-width: 639px) {
  .tm-mobile-card {
    border-radius: 0.75rem;
    border: 1px solid rgba(42, 42, 58, 0.9);
    background: rgba(28, 28, 40, 0.72);
    padding: 0.875rem 1rem;
  }

  .tm-mobile-card + .tm-mobile-card {
    margin-top: 0.625rem;
  }
}

@media (min-width: 768px) {
  #menuToggle {
    display: none;
  }

  #sidebarBackdrop {
    display: none !important;
  }
}

/* Chat-Eingabe & Aktions-Buttons — expliziter Kontrast (nicht nur Tailwind-CDN) */

#chatInput {
  color: #f1f5f9;
  background-color: #1c1c28;
}

#chatInput::placeholder {
  color: #64748b;
}

.tm-chat-btn {
  display: block;
  width: 100%;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tm-chat-btn-primary {
  color: #ffffff;
  background-color: #6d5fc4;
  border: 2px solid transparent;
}

.tm-chat-btn-primary:hover:not(:disabled) {
  background-color: #5b4db0;
}

.tm-chat-btn-askb {
  color: #fffbeb;
  background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
  border: 2px solid #fbbf24;
  box-shadow: 0 1px 0 rgba(251, 191, 36, 0.25);
}

.tm-chat-btn-askb:hover:not(:disabled) {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  border-color: #fcd34d;
}

.tm-chat-btn:disabled {
  cursor: not-allowed;
  color: #94a3b8;
  background: #1e293b;
  border: 2px solid #475569;
  box-shadow: none;
  opacity: 1;
}

.tag-followup-input {
  color: #f1f5f9;
  background-color: #1c1c28;
}

.tag-followup-input::placeholder {
  color: #64748b;
}

.tag-followup-send.tm-chat-btn-primary,
.tag-followup-askb.tm-chat-btn-askb {
  width: 100%;
}

  body {
    padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  }
}