/* --- 1. BASIS & LAYOUT --- */
html { scroll-behavior: smooth; }
body { 
  font-family: 'Segoe UI', Arial, sans-serif; 
  background: #f4f4f4; 
  padding: 0; margin: 0; 
  color: #333;
}

#main-wrapper {
  max-width: 1800px;
  margin: 0 auto;
  padding: 20px;
}

/* --- DASHBOARD GRID LAYOUT (Desktop) --- */
.dashboard-grid {
  display: grid;
  grid-template-columns: 180px 1fr; 
  gap: 25px;
  align-items: start;
  transition: grid-template-columns 0.3s ease; 
}

.dashboard-grid.sidebar-closed {
  grid-template-columns: 0px 1fr; 
  gap: 0; 
}

/* SIDEBAR */
.sidebar {
  position: sticky;
  top: 20px; 
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding-right: 10px;
  overflow-x: hidden; 
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.2s;
}

.dashboard-grid.sidebar-closed .sidebar {
  opacity: 0;
  padding-right: 0;
}

/* NAVIGATION LINKS */
.toc-wrapper { display: flex; flex-direction: column; gap: 8px; }

.toc-link {
  text-decoration: none; color: #555; background: #fff;
  padding: 10px 15px; border-radius: 6px;
  border: 1px solid #e0e0e0;
  border-left-width: 5px; 
  font-size: 13px; font-weight: 600; 
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  text-align: left;
}
.toc-link:hover {
  background: #f8f9fa; border-color: #ccc;
  color: #333; transform: translateX(3px); 
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.toc-link.table01 { border-left-color: #3498db; }
.toc-link.table02 { border-left-color: #e74c3c; }
.toc-link.table03 { border-left-color: #f1c40f; }
.toc-link.table04 { border-left-color: #9b59b6; }
.toc-link.table05 { border-left-color: #2ecc71; }
.toc-link.table06 { border-left-color: #34495e; }
.toc-link.currency-link { border-left-color: #95a5a6; }

/* MAIN CONTENT */
.main-content { min-width: 0; transition: margin 0.3s; }

/* HEADER STYLES */
.header-line-1 { display: flex; align-items: center; margin-bottom: 8px; }
.header-indent { padding-left: 50px; } 

.controls-row { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; margin-top: 10px; }
.btn-group { display: flex; gap: 5px; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 15px; font-size: 13px; align-items: center; }

#sidebarToggle {
  background: white; border: 1px solid #ddd; border-radius: 4px;
  cursor: pointer; font-size: 18px; padding: 4px 10px; margin-right: 15px;
  color: #555; vertical-align: middle; transition: background 0.2s; height: 36px;
}
#sidebarToggle:hover { background: #eee; color: #000; }

#filterStarBtn, #viewToggleBtn {
    padding: 8px 12px; font-size: 13px; border-radius: 6px; 
    border: 1px solid #ccc; background: white; cursor: pointer; height: 38px; 
}
#filterStarBtn { border-color: #f1c40f; color: #f39c12; }

.container, .currency-box {
  background: white; padding: 15px; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 30px;
  overflow-x: auto; scroll-margin-top: 20px; 
}

.header, .currency-header {
  font-weight: bold; background: #f8f9fa; color: #555; position: sticky; top: 0; z-index: 5;
}

/* --- 2. HEADER ELEMENTE (Tabellen) --- */
h1, h2, h3 { margin-top: 0; color: #2c3e50; }

.container h2, .currency-box h3 {
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 15px;
}
.container h2::after, .currency-box h3::after { content: "▼"; font-size: 0.7em; color: #999; }
.container.collapsed h2::after, .currency-box.collapsed h3::after { content: "◀"; }

.home-btn {
  font-size: 14px; margin-left: 12px; color: #bbb; text-decoration: none;
  padding: 2px 8px; border: 1px solid #f0f0f0; border-radius: 12px; background: #fff;
  vertical-align: middle; transition: all 0.2s;
}
.home-btn:hover { color: #333; background: #eee; border-color: #ccc; }

/* SPALTEN-MENÜ (Settings UI) */
.col-settings { position: relative; z-index: 10; margin-left: auto; }
.col-settings summary { cursor: pointer; font-weight: 600; font-size: 13px; color: #104e8b; user-select: none; list-style: none; padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px; background: white; }
.col-settings summary::-webkit-details-marker { display: none; }
.col-settings[open] summary { background: #f0f4f8; border-color: #104e8b; }
.col-grid { 
    position: absolute; right: 0; top: calc(100% + 5px); width: 450px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; 
    background: white; padding: 15px; border: 1px solid #ddd; border-radius: 8px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); max-height: 400px; overflow-y: auto;
}
.col-grid label { font-size: 12px; cursor: pointer; display: flex; align-items: center; margin: 0; }
.col-grid input { margin-right: 8px; cursor: pointer; }
@media screen and (max-width: 600px) {
    .col-grid { width: 300px; grid-template-columns: 1fr 1fr; left: auto; right: 0; }
}

.controls { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; align-items: flex-start; justify-content: space-between; }
.search-wrapper { position: relative; display: inline-flex; align-items: center; width: 100%; max-width: 300px; margin-bottom: 10px; }
.search-wrapper input { width: 100%; padding: 8px 30px 8px 10px; border: 1px solid #ddd; border-radius: 6px; }
.clear-btn { position: absolute; right: 10px; cursor: pointer; color: #999; display: none; font-size: 18px; }
.search-wrapper input:not(:placeholder-shown) + .clear-btn { display: block; }

.news-badge {
  display: inline-flex; align-items: center; background-color: #e1f5fe; color: #0277bd;
  padding: 6px 12px; border-radius: 50px; font-weight: 600; font-size: 13px;
  border: 1px solid #b3e5fc; text-decoration: none; transition: all 0.2s ease;
}
.news-badge:hover { background-color: #0277bd; color: white; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.news-badge .icon { margin-right: 8px; font-size: 1.2em; }

#viewToggleBtn { display: none; } 

/* --- 3. TABELLEN GRID --- */
.container {
  --w-ai: 35px; --w-news: 35px; --w-isin: 105px; --w-name: 200px; --w-merkmale: 90px;
  --w-initial: 70px; --w-initial_currency: 40px; --w-kurs: 70px; --w-eur: 45px; --w-kurs_currency: 70px;
  --w-change: 60px; --w-change_pct: 15px; --w-change_prev: 60px; --w-change_prev_pct: 15px;
  --w-change_total: 60px; --w-change_total_pct: 15px; --w-time: 60px; --w-open: 60px;
  --w-close: 60px; --w-high: 60px; --w-low: 60px; --w-vola: 55px; --w-dividend: 60px;
  --w-dkurs: 50px; --w-market: 80px; --w-sektor: 110px; --w-ema: 45px; --w-roc: 70px;
  --w-macd: 50px; --w-ln: 30px; --w-plus: 30px; --w-minus: 30px; --w-chart: 30px; --w-story: 30px;
}

.header, .item {
  display: grid;
  grid-template-columns:
    var(--w-ai) var(--w-news) var(--w-isin) var(--w-name) var(--w-merkmale)
    var(--w-initial) var(--w-initial_currency) var(--w-kurs) var(--w-eur) var(--w-kurs_currency)
    var(--w-change) var(--w-change_pct) var(--w-change_prev) var(--w-change_prev_pct) var(--w-change_total) var(--w-change_total_pct)
    var(--w-time) var(--w-open) var(--w-close) var(--w-high) var(--w-low)
    var(--w-vola) var(--w-dividend) var(--w-dkurs) var(--w-market) var(--w-sektor)
    var(--w-ema) var(--w-roc) var(--w-macd) var(--w-ln) var(--w-plus) var(--w-minus)
    var(--w-chart) var(--w-story);
  gap: 6px; padding: 8px 4px; border-bottom: 1px solid #eee; align-items: center;
  font-size: 13px; min-width: max-content; 
}

.item > div, .header > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item > div:empty { overflow: visible; }

.currency-header, .currency-item {
  display: grid; grid-template-columns: 1fr 120px 80px; 
  gap: 15px; padding: 10px; border-bottom: 1px solid #eee; font-size: 14px; align-items: center;
}
.currency-item > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item:nth-child(even), .currency-item:nth-child(even) { background: #fafafa; }
.item:hover, .currency-item:hover { background-color: #f0f8ff; }

.sort { cursor: pointer; user-select: none; }
.sort::after { content: " ⇅"; font-size: 0.8em; color: #ccc; }
.sort.asc::after { content: " ▲"; color: #333; }
.sort.desc::after { content: " ▼"; color: #333; }

/* --- 4. FARBEN --- */
.num { text-align: right; } .center { text-align: center; } .italic { font-style: italic; }
.pos { color: #27ae60; font-weight: bold; } .neg { color: #c0392b; font-weight: bold; }

.bgGold { background-color: #fff3cd !important; } .bgGreen { background-color: #d4edda !important; }
.bgGreenCh { background-color: #c3e6cb !important; } .bgRed { background-color: #f8d7da !important; }
.bgRedCh { background-color: #f5c6cb !important; }

.table01 { border-top: 4px solid #3498db; } .table02 { border-top: 4px solid #e74c3c; }
.table03 { border-top: 4px solid #f1c40f; } .table04 { border-top: 4px solid #9b59b6; }
.table05 { border-top: 4px solid #2ecc71; } .table06 { border-top: 4px solid #34495e; }

a { text-decoration: none; color: inherit; } a:hover { text-decoration: underline; color: #2980b9; }
.star-icon { color: #f1c40f; margin-right: 5px; font-size: 1.2em; vertical-align: middle; }

/* STYLING FÜR VERALTETE ZEILEN (> 90 Min) */
body.stale-check-active .item.stale-row, body.stale-check-active .item.stale-row a,
body.stale-check-active .item.stale-row .w_name, body.stale-check-active .item.stale-row .pos,
body.stale-check-active .item.stale-row .neg, body.stale-check-active .item.stale-row .star-icon { color: #a0a0a0 !important; }

/* --- 5. HILFSKLASSEN SPALTEN (ZUM AUSBLENDEN) --- */
.container.hide-ai { --w-ai: 0px; } .container.hide-ai .c-ai { visibility: hidden; padding: 0; margin: 0; }
.container.hide-news { --w-news: 0px; } .container.hide-news .c-news { visibility: hidden; padding: 0; margin: 0; }
.container.hide-merkmale { --w-merkmale: 0px; } .container.hide-merkmale .c-merkmale { visibility: hidden; padding: 0; margin: 0; }
.container.hide-initial { --w-initial: 0px; } .container.hide-initial .c-initial { visibility: hidden; padding: 0; margin: 0; }
.container.hide-initial_currency { --w-initial_currency: 0px; } .container.hide-initial_currency .c-initial_currency { visibility: hidden; padding: 0; margin: 0; }
.container.hide-kurs { --w-kurs: 0px; } .container.hide-kurs .c-kurs { visibility: hidden; padding: 0; margin: 0; }
.container.hide-eur { --w-eur: 0px; } .container.hide-eur .c-eur { visibility: hidden; padding: 0; margin: 0; }
.container.hide-kurs_currency { --w-kurs_currency: 0px; } .container.hide-kurs_currency .c-kurs_currency { visibility: hidden; padding: 0; margin: 0; }
.container.hide-change { --w-change: 0px; --w-change_pct: 0px; } .container.hide-change .c-change { visibility: hidden; padding: 0; margin: 0; }
.container.hide-change_prev { --w-change_prev: 0px; --w-change_prev_pct: 0px; } .container.hide-change_prev .c-change_prev { visibility: hidden; padding: 0; margin: 0; }
.container.hide-change_total { --w-change_total: 0px; --w-change_total_pct: 0px; } .container.hide-change_total .c-change_total { visibility: hidden; padding: 0; margin: 0; }
.container.hide-time { --w-time: 0px; } .container.hide-time .c-time { visibility: hidden; padding: 0; margin: 0; }
.container.hide-open { --w-open: 0px; } .container.hide-open .c-open { visibility: hidden; padding: 0; margin: 0; }
.container.hide-close { --w-close: 0px; } .container.hide-close .c-close { visibility: hidden; padding: 0; margin: 0; }
.container.hide-high { --w-high: 0px; } .container.hide-high .c-high { visibility: hidden; padding: 0; margin: 0; }
.container.hide-low { --w-low: 0px; } .container.hide-low .c-low { visibility: hidden; padding: 0; margin: 0; }
.container.hide-vola { --w-vola: 0px; } .container.hide-vola .c-vola { visibility: hidden; padding: 0; margin: 0; }
.container.hide-dividend { --w-dividend: 0px; } .container.hide-dividend .c-dividend { visibility: hidden; padding: 0; margin: 0; }
.container.hide-dkurs { --w-dkurs: 0px; } .container.hide-dkurs .c-dkurs { visibility: hidden; padding: 0; margin: 0; }
.container.hide-market { --w-market: 0px; } .container.hide-market .c-market { visibility: hidden; padding: 0; margin: 0; }
.container.hide-sektor { --w-sektor: 0px; } .container.hide-sektor .c-sektor { visibility: hidden; padding: 0; margin: 0; }
.container.hide-ema { --w-ema: 0px; } .container.hide-ema .c-ema { visibility: hidden; padding: 0; margin: 0; }
.container.hide-roc { --w-roc: 0px; } .container.hide-roc .c-roc { visibility: hidden; padding: 0; margin: 0; }
.container.hide-macd { --w-macd: 0px; } .container.hide-macd .c-macd { visibility: hidden; padding: 0; margin: 0; }
.container.hide-ln { --w-ln: 0px; } .container.hide-ln .c-ln { visibility: hidden; padding: 0; margin: 0; }
.container.hide-plus { --w-plus: 0px; } .container.hide-plus .c-plus { visibility: hidden; padding: 0; margin: 0; }
.container.hide-minus { --w-minus: 0px; } .container.hide-minus .c-minus { visibility: hidden; padding: 0; margin: 0; }
.container.hide-chart { --w-chart: 0px; } .container.hide-chart .c-chart { visibility: hidden; padding: 0; margin: 0; }
.container.hide-story { --w-story: 0px; } .container.hide-story .c-story { visibility: hidden; padding: 0; margin: 0; }

.container.collapsed .controls, .container.collapsed .header, .container.collapsed .list,
.currency-box.collapsed .currency-header, .currency-box.collapsed .list { display: none; }
.container.collapsed, .currency-box.collapsed { padding-bottom: 5px; }

/* --- 6. MOBILE / CARD VIEW (< 1100px) --- */
@media screen and (max-width: 1100px) {
  .dashboard-grid { display: block; }
  .dashboard-grid.sidebar-closed { display: block; } 
  #sidebarToggle { display: none; }
  .header-indent, .controls-row { padding-left: 0 !important; } 

  .sidebar { position: static; width: 100%; height: auto; margin-bottom: 20px; overflow-y: visible; opacity: 1 !important; }
  .toc-wrapper { flex-direction: row; flex-wrap: wrap; } .toc-link { flex: 1 1 auto; text-align: center; } 
  .container, .currency-box { -webkit-overflow-scrolling: touch; }
  
  .controls { display: block; }
  .search-wrapper { width: 100% !important; max-width: none; }
  .search-wrapper input { font-size: 16px; height: 50px; }
  .clear-btn { font-size: 24px; top: 50%; transform: translateY(-50%); right: 15px; }

  #viewToggleBtn { display: inline-block; margin-bottom: 15px; }

  /* Wenn in Mobilansicht eine Spalte abgewählt wird, entferne sie komplett */
  body:not(.force-list-view) .container.hide-ai .c-ai, body:not(.force-list-view) .container.hide-news .c-news,
  body:not(.force-list-view) .container.hide-merkmale .c-merkmale, body:not(.force-list-view) .container.hide-initial .c-initial,
  body:not(.force-list-view) .container.hide-initial_currency .c-initial_currency, body:not(.force-list-view) .container.hide-kurs .c-kurs,
  body:not(.force-list-view) .container.hide-eur .c-eur, body:not(.force-list-view) .container.hide-kurs_currency .c-kurs_currency,
  body:not(.force-list-view) .container.hide-change .c-change, body:not(.force-list-view) .container.hide-change_prev .c-change_prev,
  body:not(.force-list-view) .container.hide-change_total .c-change_total, body:not(.force-list-view) .container.hide-time .c-time,
  body:not(.force-list-view) .container.hide-open .c-open, body:not(.force-list-view) .container.hide-close .c-close,
  body:not(.force-list-view) .container.hide-high .c-high, body:not(.force-list-view) .container.hide-low .c-low,
  body:not(.force-list-view) .container.hide-vola .c-vola, body:not(.force-list-view) .container.hide-dividend .c-dividend,
  body:not(.force-list-view) .container.hide-dkurs .c-dkurs, body:not(.force-list-view) .container.hide-market .c-market,
  body:not(.force-list-view) .container.hide-sektor .c-sektor, body:not(.force-list-view) .container.hide-ema .c-ema,
  body:not(.force-list-view) .container.hide-roc .c-roc, body:not(.force-list-view) .container.hide-macd .c-macd,
  body:not(.force-list-view) .container.hide-ln .c-ln, body:not(.force-list-view) .container.hide-plus .c-plus,
  body:not(.force-list-view) .container.hide-minus .c-minus, body:not(.force-list-view) .container.hide-chart .c-chart,
  body:not(.force-list-view) .container.hide-story .c-story {
      display: none !important;
  }

  .header, .currency-header { display: none !important; }
  .container, .currency-box { overflow-x: visible; background: transparent; box-shadow: none; padding: 0; }
  .container h2, .currency-box h3 { background: white; padding: 15px; border-radius: 10px; margin-bottom: 15px; }

  .item, .currency-item {
    display: block; background: white; border: 1px solid #e0e0e0; border-radius: 12px; margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); padding: 0;
  }

  .show-outdated .item.stale-row { background: #ebebeb !important; }
  .show-outdated .item.stale-row .w_name { background: #dedede !important; }

  .item > div, .currency-item > div {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 15px; border-bottom: 1px solid #f5f5f5; font-size: 15px; text-align: right;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .item > div:last-child, .currency-item > div:last-child { border-bottom: none; }
  .item > div:empty { display: none; } .mobile-hidden { display: none !important; }

  .item > div::before, .currency-item > div::before {
    content: attr(data-label); font-weight: 600; color: #7f8c8d; text-align: left; margin-right: auto; flex-shrink: 0;
  }

  .item .w_name, .currency-item .w_name {
    background: #f1f2f6; color: #2c3e50; font-size: 1.2em; justify-content: center;
    border-radius: 12px 12px 0 0; font-weight: bold; padding: 15px; white-space: normal; height: auto;
  }
  .item .w_name::before, .currency-item .w_name::before { display: none; }
  .item .isin { justify-content: center; color: #95a5a6; font-size: 0.9em; padding: 5px; border-bottom: 2px solid #eee; }
  .item .isin::before { display: none; }
  
  /* Mobile Override: List View */
  body.force-list-view .container, body.force-list-view .currency-box {
    display: block !important; width: 100% !important; overflow-x: auto !important;
    white-space: nowrap !important; background: white; padding: 10px;
  }
  body.force-list-view .header, body.force-list-view .currency-header { display: grid !important; }
  body.force-list-view .item, body.force-list-view .currency-item {
    display: grid !important; border: none !important; box-shadow: none !important;
    margin: 0 !important; border-bottom: 1px solid #eee !important; padding: 6px !important;
  }
  body.force-list-view .item > div, body.force-list-view .currency-item > div {
    display: block !important; border: none !important; padding: 0 !important;
    font-size: 13px !important; text-align: inherit !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  body.force-list-view .item > div::before, body.force-list-view .currency-item > div::before { display: none !important; }
  body.force-list-view .item .w_name { background: transparent; font-size: inherit; justify-content: start; padding: 0; border-radius: 0; white-space: nowrap; }
  body.force-list-view .item .isin { justify-content: start; border: none; padding: 0; font-size: inherit; }
  body.force-list-view .mobile-hidden { display: block !important; }
}

/* --- FOOTER STYLES --- */
footer { background: #333; color: #bbb; padding: 20px; text-align: center; font-size: 12px; margin-top: 40px; border-top: 3px solid #ddd; }
.footer-info { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.footer-info span b { color: #fff; }