/* ================================
   Unified Table Styles (MTX)
   ================================
   Harmonized table layout across all pages
   Excel/TradingView-style professional alignment
   ================================ */

.mtx-table {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
  color: var(--text-secondary, #ffffff);
}

.mtx-table th,
.mtx-table td {
  padding: 10px 12px;
  white-space: normal;
  border-bottom: 1px solid var(--border-color, #1a3a6b);
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Default: Header center-aligned for consistency */
.mtx-table th {
  text-align: center;
  font-weight: 600;
  opacity: 0.95;
  background: rgba(0, 200, 150, 0.15);
  color: var(--text-primary, #00c896);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Default: Data cells center-aligned (will be overridden by specific column rules) */
.mtx-table td {
  text-align: center;
}

.mtx-table tbody tr {
  transition: background 0.2s ease;
}

.mtx-table tbody tr:hover {
  background: rgba(0, 200, 150, 0.08);
}

/* Unified column widths for 8-column layout: DATUM | COIN | PREIS | TREND | SEITE | BETRAG | GEWINN | ZEIT */
.mtx-table.col-8 th:nth-child(1), .mtx-table.col-8 td:nth-child(1) { width: 150px; } /* DATUM */
.mtx-table.col-8 th:nth-child(2), .mtx-table.col-8 td:nth-child(2) { width: 120px; } /* COIN */
.mtx-table.col-8 th:nth-child(3), .mtx-table.col-8 td:nth-child(3) { width: 100px; } /* PREIS */
.mtx-table.col-8 th:nth-child(4), .mtx-table.col-8 td:nth-child(4) { width: 100px; } /* TREND */
.mtx-table.col-8 th:nth-child(5), .mtx-table.col-8 td:nth-child(5) { width: 100px; } /* SEITE */
.mtx-table.col-8 th:nth-child(6), .mtx-table.col-8 td:nth-child(6) { width: 120px; } /* BETRAG */
.mtx-table.col-8 th:nth-child(7), .mtx-table.col-8 td:nth-child(7) { width: 100px; } /* GEWINN */
.mtx-table.col-8 th:nth-child(8), .mtx-table.col-8 td:nth-child(8) { width: 120px; } /* ZEIT */

/* Column alignment for 8-column layout */
.mtx-table.col-8 td:nth-child(1) {
  text-align: left;
  padding-left: 16px;
  padding-right: 8px;
} /* DATUM - left */
.mtx-table.col-8 td:nth-child(2) {
  text-align: left;
  padding-left: 16px;
  padding-right: 8px;
} /* COIN - left */
.mtx-table.col-8 td:nth-child(3) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* PREIS - right (number) */
.mtx-table.col-8 td:nth-child(4) {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
} /* TREND - center (icon) */
.mtx-table.col-8 td:nth-child(5) {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
} /* SEITE - center (badge) */
.mtx-table.col-8 td:nth-child(6) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* BETRAG - right (number) */
.mtx-table.col-8 td:nth-child(7) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* GEWINN - right (number) */
.mtx-table.col-8 td:nth-child(8) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* ZEIT - right */

/* Header alignment for 8-column layout (match data alignment) */
.mtx-table.col-8 th:nth-child(1) {
  text-align: left;
  padding-left: 16px;
  padding-right: 8px;
} /* DATUM */
.mtx-table.col-8 th:nth-child(2) {
  text-align: left;
  padding-left: 16px;
  padding-right: 8px;
} /* COIN */
.mtx-table.col-8 th:nth-child(3) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* PREIS */
.mtx-table.col-8 th:nth-child(4) {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
} /* TREND */
.mtx-table.col-8 th:nth-child(5) {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
} /* SEITE */
.mtx-table.col-8 th:nth-child(6) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* BETRAG */
.mtx-table.col-8 th:nth-child(7) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* GEWINN */
.mtx-table.col-8 th:nth-child(8) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* ZEIT */

/* Unified column widths for 7-column layout: COIN | PREIS | TREND | SEITE | BETRAG | GEWINN | ZEIT */
/* Based on 8-column grid: DATUM(150) | COIN(120) | PREIS(100) | TREND(100) | SEITE(100) | BETRAG(120) | GEWINN(100) | ZEIT(120) */
.mtx-table.col-7 th:nth-child(1), .mtx-table.col-7 td:nth-child(1) { width: 120px; } /* COIN */
.mtx-table.col-7 th:nth-child(2), .mtx-table.col-7 td:nth-child(2) { width: 100px; } /* PREIS */
.mtx-table.col-7 th:nth-child(3), .mtx-table.col-7 td:nth-child(3) { width: 100px; } /* TREND */
.mtx-table.col-7 th:nth-child(4), .mtx-table.col-7 td:nth-child(4) { width: 100px; } /* SEITE */
.mtx-table.col-7 th:nth-child(5), .mtx-table.col-7 td:nth-child(5) { width: 120px; } /* BETRAG */
.mtx-table.col-7 th:nth-child(6), .mtx-table.col-7 td:nth-child(6) { width: 100px; } /* GEWINN */
.mtx-table.col-7 th:nth-child(7), .mtx-table.col-7 td:nth-child(7) { width: 120px; } /* ZEIT */

/* Column alignment for 7-column layout (Dashboard) */
.mtx-table.col-7 td:nth-child(1) {
  text-align: left;
  padding-left: 16px;
  padding-right: 8px;
} /* COIN - left */
.mtx-table.col-7 td:nth-child(2) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* PREIS - right (number) */
.mtx-table.col-7 td:nth-child(3) {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
} /* TREND - center (icon) */
.mtx-table.col-7 td:nth-child(4) {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
} /* SEITE - center (badge) */
.mtx-table.col-7 td:nth-child(5) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* BETRAG - right (number) */
.mtx-table.col-7 td:nth-child(6) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* GEWINN - right (number) */
.mtx-table.col-7 td:nth-child(7) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* ZEIT - right */

/* Header alignment for 7-column layout (match data alignment) */
.mtx-table.col-7 th:nth-child(1) {
  text-align: left;
  padding-left: 16px;
  padding-right: 8px;
} /* COIN */
.mtx-table.col-7 th:nth-child(2) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* PREIS */
.mtx-table.col-7 th:nth-child(3) {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
} /* TREND */
.mtx-table.col-7 th:nth-child(4) {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
} /* SEITE */
.mtx-table.col-7 th:nth-child(5) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* BETRAG */
.mtx-table.col-7 th:nth-child(6) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* GEWINN */
.mtx-table.col-7 th:nth-child(7) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* ZEIT */

/* Unified column widths for 5-column layout: COIN | TRADES | GEWINN | LETZTER PREIS | PERFORMANCE */
/* Based on Dashboard 7-column grid: consistent fixed pixel widths */
.mtx-table.col-5 th:nth-child(1), .mtx-table.col-5 td:nth-child(1) { width: 120px; } /* COIN */
.mtx-table.col-5 th:nth-child(2), .mtx-table.col-5 td:nth-child(2) { width: 100px; } /* TRADES */
.mtx-table.col-5 th:nth-child(3), .mtx-table.col-5 td:nth-child(3) { width: 120px; } /* GEWINN */
.mtx-table.col-5 th:nth-child(4), .mtx-table.col-5 td:nth-child(4) { width: 120px; } /* LETZTER PREIS */
.mtx-table.col-5 th:nth-child(5), .mtx-table.col-5 td:nth-child(5) { width: 200px; } /* PERFORMANCE */

/* Column alignment for 5-column layout (Portfolio & Historie) */
/* Portfolio: COIN | TRADES | GEWINN | LETZTER PREIS | PERFORMANCE */
.mtx-table.col-5 td:nth-child(1) {
  text-align: left;
  padding-left: 16px;
  padding-right: 8px;
} /* COIN - left */
.mtx-table.col-5 td:nth-child(2) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* TRADES - right (number) */
.mtx-table.col-5 td:nth-child(3) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* GEWINN - right (number) */
.mtx-table.col-5 td:nth-child(4) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* LETZTER PREIS - right (number) */
.mtx-table.col-5 td:nth-child(5) {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
} /* PERFORMANCE - center (progress bar) */

/* Header alignment for 5-column layout (Portfolio) */
.mtx-table.col-5 th:nth-child(1) {
  text-align: left;
  padding-left: 16px;
  padding-right: 8px;
} /* COIN */
.mtx-table.col-5 th:nth-child(2) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* TRADES */
.mtx-table.col-5 th:nth-child(3) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* GEWINN */
.mtx-table.col-5 th:nth-child(4) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* LETZTER PREIS */
.mtx-table.col-5 th:nth-child(5) {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
} /* PERFORMANCE */

/* Historie-specific: DATUM | COIN | PREIS | RICHTUNG | PNL */
/* Override column widths for Historie table to match Dashboard style */
.history-table .mtx-table.col-5 th:nth-child(1), .history-table .mtx-table.col-5 td:nth-child(1) { width: 150px; } /* DATUM */
.history-table .mtx-table.col-5 th:nth-child(2), .history-table .mtx-table.col-5 td:nth-child(2) { width: 120px; } /* COIN */
.history-table .mtx-table.col-5 th:nth-child(3), .history-table .mtx-table.col-5 td:nth-child(3) { width: 100px; } /* PREIS */
.history-table .mtx-table.col-5 th:nth-child(4), .history-table .mtx-table.col-5 td:nth-child(4) { width: 100px; } /* RICHTUNG */
.history-table .mtx-table.col-5 th:nth-child(5), .history-table .mtx-table.col-5 td:nth-child(5) { width: 120px; } /* PNL */

/* Override for historie table: first column (Datum) should be left, Richtung (4th) should be center */
.history-table .mtx-table.col-5 td:nth-child(1) {
  text-align: left;
  padding-left: 16px;
  padding-right: 8px;
} /* DATUM - left */
.history-table .mtx-table.col-5 td:nth-child(2) {
  text-align: left;
  padding-left: 16px;
  padding-right: 8px;
} /* COIN - left */
.history-table .mtx-table.col-5 td:nth-child(3) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* PREIS - right (number) */
.history-table .mtx-table.col-5 td:nth-child(4) {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
} /* RICHTUNG - center (badge) */
.history-table .mtx-table.col-5 td:nth-child(5) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* PNL - right (number) */

/* Header alignment for Historie table */
.history-table .mtx-table.col-5 th:nth-child(1) {
  text-align: left;
  padding-left: 16px;
  padding-right: 8px;
} /* DATUM */
.history-table .mtx-table.col-5 th:nth-child(2) {
  text-align: left;
  padding-left: 16px;
  padding-right: 8px;
} /* COIN */
.history-table .mtx-table.col-5 th:nth-child(3) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* PREIS */
.history-table .mtx-table.col-5 th:nth-child(4) {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
} /* RICHTUNG */
.history-table .mtx-table.col-5 th:nth-child(5) {
  text-align: right;
  padding-left: 8px;
  padding-right: 16px;
} /* PNL */

/* Unified table wrapper for consistent scrolling */
.mtx-table-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  position: relative;
  /* Add subtle scroll indicator shadow */
  background:
    /* Shadow covers */
    linear-gradient(90deg, var(--bg-card, #0a1e3d) 30%, rgba(10, 30, 61, 0)),
    linear-gradient(90deg, rgba(10, 30, 61, 0), var(--bg-card, #0a1e3d) 70%) 0 100%,
    /* Shadows */
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: var(--bg-card, #0a1e3d);
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Remove scroll indicator for non-scrolling tables */
.mtx-table-wrapper:not(:hover) {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 200, 150, 0.3) transparent;
}

.mtx-table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.mtx-table-wrapper::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.mtx-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 200, 150, 0.3);
  border-radius: 4px;
}

.mtx-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 200, 150, 0.5);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .mtx-table {
    table-layout: auto;
  }
  
  .mtx-table th,
  .mtx-table td {
    padding: 10px 8px;
    font-size: 0.85rem;
    white-space: normal; /* Allow wrapping on mobile */
  }
  
  /* Maintain alignment on mobile, but allow wrapping */
  .mtx-table.col-8 th:nth-child(n),
  .mtx-table.col-8 td:nth-child(n),
  .mtx-table.col-7 th:nth-child(n),
  .mtx-table.col-7 td:nth-child(n),
  .mtx-table.col-5 th:nth-child(n),
  .mtx-table.col-5 td:nth-child(n) {
    width: auto;
    min-width: 80px;
  }
  
  /* Preserve text alignment on mobile */
  .mtx-table.col-7 td:nth-child(1),
  .mtx-table.col-5 td:nth-child(1),
  .mtx-table.col-5 td:nth-child(2),
  .history-table .mtx-table.col-5 td:nth-child(1),
  .history-table .mtx-table.col-5 td:nth-child(2) {
    text-align: left;
    padding-left: 8px;
    padding-right: 6px;
  }
  
  .mtx-table.col-7 td:nth-child(2),
  .mtx-table.col-7 td:nth-child(5),
  .mtx-table.col-7 td:nth-child(6),
  .mtx-table.col-7 td:nth-child(7),
  .mtx-table.col-5 td:nth-child(2),
  .mtx-table.col-5 td:nth-child(3),
  .mtx-table.col-5 td:nth-child(4),
  .history-table .mtx-table.col-5 td:nth-child(3),
  .history-table .mtx-table.col-5 td:nth-child(5) {
    text-align: right;
    padding-left: 6px;
    padding-right: 8px;
  }
}

/* ================================
   Shared Sidebar Logout Button
   ================================
   Harmonized styles for logout button
   across all pages (dashboard, portfolio, historie, einstellungen, profil)
   ================================ */

.logout-btn {
  /* Base button styles from dashboard.css .btn */
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  
  /* Danger button styles from dashboard.css .btn-danger */
  background: var(--danger, #f44336);
  color: white;
  
  /* Sidebar-specific styles */
  width: 100%;
  margin-top: 12px;
  box-sizing: border-box;
}

.logout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow, rgba(0, 200, 150, 0.15));
  background: #ff3030;
}

.logout-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px var(--shadow, rgba(0, 200, 150, 0.15));
}

/* Mobile responsiveness - unchanged */
@media (max-width: 768px) {
  .logout-btn {
    font-size: 0.85rem;
    padding: 10px 16px;
  }
}

/* ================================
   Theme Toggle Button (Global)
   ================================
   Harmonized theme toggle button
   across all pages (dashboard, portfolio, historie, einstellungen, profil)
   ================================ */

/* Einzig gültige Definition für Theme-Toggle in der Sidebar */
.sidebar .theme-toggle {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

#themeToggle {
  background: transparent;
  border: 2px solid var(--text-primary, #00c896);
  color: var(--text-primary, #00c896);
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  width: auto;
  min-width: 50px;
  display: inline-block;
  line-height: 1.4;
  opacity: 1;
  visibility: visible;
}

#themeToggle:hover {
  background: var(--text-primary, #00c896);
  color: var(--bg-primary, #0a1e3d);
  transform: scale(1.1);
}

#themeToggle:active {
  transform: scale(0.95);
}

/* Mobile responsiveness for theme toggle */
@media (max-width: 768px) {
  .sidebar .theme-toggle {
    bottom: 15px;
  }
  
  #themeToggle {
    font-size: 1rem;
    padding: 8px 16px;
  }
}