body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
/* Prevent accidental horizontal scroll on mobile due to wide children */
html, body { overflow-x: hidden; }

/* Hinweistext für fehlende Kurse (kleiner & dezenter) */
.price-missing-note {
  font-size: 0.78rem;
  line-height: 1.1;
  font-weight: 500;
  color: #777264; /* Bootstrap Warning Ton etwas dezenter als pures #ffc107 */
  display: inline-block;
}

.main-container {
  background: white;
  /* border-radius: 15px; */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin: 0px auto;
  max-width: 1400px;
  overflow-x: hidden; /* guard against child overflow on mobile */
}

.header-section {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  padding: 20px;
  /* border-radius: 15px 15px 0 0; */
  text-align: center;
  position: relative; /* allow positioning of header account */
}

.heading-small {
  font-size: 1.2rem;
}

.nav-tabs .nav-link {
  color: #666;
  border: none;
  padding: 15px 25px;
  font-weight: 500;
  margin-right: 5px;
}

.nav-tabs .nav-link.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 10px 10px 0 0;
}

/* Keep main tabs in a single row close to the 900px breakpoint by compressing padding and font-size */
@media (min-width: 901px) and (max-width: 1194.98px) {
  #mainTabs { flex-wrap: nowrap; }
  #mainTabs > li { padding-left: 0; padding-right: 0; }
  .nav-tabs .nav-link { padding: 10px 14px; font-size: 0.95rem; margin-right: 3px; }
}
@media (min-width: 901px) and (max-width: 960px) {
  #mainTabs { flex-wrap: nowrap; }
  .nav-tabs .nav-link { padding: 8px 10px; font-size: 0.9rem; margin-right: 2px; }
}
/* Padding für die li-Elemente der Hauptnavigation */
#mainTabs > li {
  padding-top: 2px;
  padding-left: 2px;
  padding-right: 2px;
}

.tab-content {
  padding: 30px;
  /* lower the min-height to avoid very large empty gaps when tab content is small */
  min-height: 360px;
}
/* Remove padding only when Dashboard is the active context */
#mainTabContent.no-dashboard-padding { padding: 0 !important; }

/* Ensure scrolling to tab panes accounts for the header (prevents content hiding under header on mobile) */
.tab-pane { scroll-margin-top: 84px; }
@media (max-width: 600px) {
  .tab-pane { scroll-margin-top: 120px; }
}

/* Responsive Styles */
@media (max-width: 600px) {
  .tab-content {
    padding: 10px 16px;
    background: #e7eefa;
  }
}

/* Tighten paddings and neutralize row margins for Dashboard on small screens */
@media (max-width: 1069.98px) {
  .tab-content { padding: 10px; }
  /* Ensure the dashboard tab never bleeds horizontally */
  #dashboard { overflow-x: hidden; }
  #dashboardContainer { margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; }
  /* Reduce default column padding a bit to gain space */
  #dashboardContainer > [class^="col-"],
  #dashboardContainer > [class*=" col-"] { padding-left: 8px; padding-right: 8px; }
  /* Make the sticky toggle bar respect the available width */
  #dashboardToggleBar { width: 100%; box-sizing: border-box; padding-left: 8px; padding-right: 8px; }
}

/* Mobile: keep the Dashboard toggle bar visible while scrolling within the tab */
@media (max-width: 1199.98px) { /* < XL */
  #dashboardToggleBar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #ffffff;
    padding-top: 6px;
    /* subtle divider when stuck */
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  }
}

/* Hide the mobile toggle bar for widths >=1070px since both panes are visible */
@media (min-width: 1070px) {
  #dashboardToggleBar { display: none !important; }
}

/* On narrow screens (<1070px), show editor/preview ABOVE the list in Notes */
@media (max-width: 1069.98px) {
  #aaaNotesEditorCol { order: 1; }
  #aaaNotesListCol { order: 2; }
}

/* Remove any free space between dashboard container and toggle bar on narrow screens */
@media (max-width: 900px) {
  #dashboardToggleBar { padding-top: 0; margin-top: 0; }
  #dashboardContainer, #favoritesContainer { margin-top: 0 !important; }
}

/* On wide screens (>1070px), stack Notes vertically with editor/preview ABOVE the list */
@media (min-width: 1071px) {
  /* Force the row to stack children vertically */
  #aaaNotesCard .card-body .row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  /* Reduce vertical gap between editor and list when stacked */
  #aaaNotesCard .card-body > .row.g-3 { --bs-gutter-y: 0.5rem; }
  /* Ensure both columns take full width and correct order */
  #aaaNotesEditorCol, #aaaNotesListCol {
    max-width: 100% !important;
    width: 100% !important;
    /* Let the list column grow while the editor stays auto height */
  }
  #aaaNotesEditorCol { order: 1 !important; flex: 0 0 auto !important; }
  #aaaNotesListCol { order: 2 !important; flex: 1 1 auto !important; min-height: 0 !important; }
  /* When stacked on wide screens, avoid inner scrollbars on the card body; let the list area manage scroll */
  #aaaNotesCard .card-body { overflow: hidden; }
}

/* >=1070px: three-pane horizontal layout where Board flex-fills between fixed Notes + Pie widths */
@media (min-width: 1070px) {
  /* Ensure continuous horizontal layout */
  #dashboardContainer { display: flex !important; flex-wrap: nowrap; align-items: stretch; width: 100%; }
  /* Fixed side widths; Board takes the remaining space */
  #dashboardNotesHost { flex: 0 0 320px !important; max-width: 320px !important; width: 320px !important; box-sizing: border-box; }
  #dashboardPieHost { flex: 0 0 300px !important; max-width: 300px !important; width: 300px !important; box-sizing: border-box; }
  #dashboardBoardHost { flex: 1 1 auto !important; width: auto !important; min-width: 380px; box-sizing: border-box; }
  /* Remove bottom margins to keep a clean full-height flex row */
  #dashboardNotesHost, #dashboardBoardHost, #dashboardPieHost { margin-bottom: 0 !important; }
  /* Preserve existing full-height behavior inside hosts */
  #dashboardNotesHost > div,
  #dashboardBoardHost > div,
  #dashboardPieHost > div { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
}

/* Contain any overly wide content inside Dashboard on mobile (Edge/Android fix) */
/* Images, canvases, tables should not exceed the viewport width */
@media (max-width: 1069.98px) {
  #dashboard .card-body { overflow-x: auto; }
  #dashboard img, #dashboard canvas, #dashboard svg { max-width: 100%; height: auto; }
  #dashboard table { display: block; max-width: 100%; width: 100%; overflow-x: auto; }
}

.search-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.episode-table {
  font-size: 0.9em;
  border-collapse: separate;
  border-spacing: 0 8px; /* vertical gaps for tile look */
}

.episode-table th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
}
/* Rounded corners for the entire thead row */
.episode-table thead tr th:first-child { border-top-left-radius: 10px; }
.episode-table thead tr th:last-child { border-top-right-radius: 10px; }

.episode-row {
  cursor: pointer;
  transition: all 0.3s ease;
}

.episode-row:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* Rounded corners per row to get a card-like look */
.episode-table tbody tr {
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.show-notes-preview {
  max-width: 300px;
  line-height: 1.4em;
  /* collapsed: show ~3 lines */
  max-height: calc(1.4em * 3);
  overflow: hidden;
  position: relative;
}

.show-notes-full {
  line-height: 1.4em;
  /* expanded: show ~17 lines and allow scroll */
  max-height: calc(1.4em * 17);
  overflow-y: auto;
}

.show-notes-expand {
  cursor: pointer;
  color: #007bff;
  text-decoration: underline;
}

.badge-stocks {
  background: linear-gradient(135deg, #f4f4f5ff 0%, #ededeeff 100%);
  margin: 2px;
  color: black;
}

.badge-funds {
  background: linear-gradient(135deg, #f4f4f5ff 0%, #ededeeff 100%);
  margin: 2px;
  color: black;
}

/* Instrument pills in episodes table */
.instrument-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: 100%; /* allow the cell to use available width */
}

/* ===================== Responsive Navigation (Burger for Tabs) ===================== */
@media (max-width: 900px) {
  #mainTabs { display:none !important; }
  #mobileTabBar { display:flex !important; }
  .header-section { padding:8px 9px; }
  .header-section h1 { font-size:1.22rem; margin-bottom:4px; letter-spacing:1px; }
  .header-section p { font-size:0.85rem; line-height:1.2; }
  .heading-small {
    font-size: 0.9rem;
  }
  .mb-2 {
  margin-bottom: 3px !important;
}
  .search-section { padding:6px 8px; margin-bottom:10px; }
  .search-section h5 { font-size:0.92rem; margin-bottom:10px !important; }
  .search-section .form-check-label { font-size:0.8rem; letter-spacing:0.3px; }
  #searchModeInputWrapper select, #searchModeInputWrapper input { font-size:0.78rem; padding:4px 6px; }
  #instrumentSuggestBox { font-size:0.7rem !important; }
  /* Episode Titel etwas größer für Lesbarkeit */
  .episode-table td:nth-child(2) { font-size:0.84rem; line-height:1.25; }
}

/* Always use burger-style tabs on phones, even in landscape/high DPI */
body.is-phone #mainTabs { display:none !important; }
body.is-phone #mobileTabBar { display:flex !important; }

/* Board header compact mode (<=500px): smaller header + single add button */
@media (max-width: 500px) {
  #aaaBoardCard .card-header { padding: 3px 10px; }
  #aaaBoardCard .aaa-board-title { font-size: 0.95rem; }
  #aaaBoardCard .aaa-board-actions { display: none !important; }
  #aaaBoardCard .aaa-board-actions-compact { display: flex !important; align-items: center; gap: 8px; }
  /* Make the '+' menu button match the outline secondary buttons with a bit more LR padding */
  #aaaBoardAddMenuBtn { padding-left: 12px; padding-right: 12px; }
}

/* Compact add menu styles inside the board header */
#aaaBoardCard .aaa-board-add-menu { position: absolute; top: 100%; right: 0; background: #fff; min-width: 180px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); z-index: 400; padding: 6px 0; border-radius: 6px; animation: fadeSlide .18s ease; }
#aaaBoardCard .aaa-board-add-menu .dropdown-item { display:block; width:100%; text-align:left; background:none; border:none; padding:10px 14px; font-size:0.9rem; color:#333; }
#aaaBoardCard .aaa-board-add-menu .dropdown-item:hover { background:#f1f3f5; }
body.is-phone .header-section { padding:8px 9px; }
body.is-phone .header-section h1 { font-size:1.22rem; margin-bottom:4px; letter-spacing:1px; }
body.is-phone .header-section p { font-size:0.85rem; line-height:1.2; }
body.is-phone .header-section .heading-small { font-size:0.9rem; }
body.is-phone .header-section .mb-2 { margin-bottom:3px !important; }
body.is-phone .card-header { padding: 6px 8px; font-size: 1rem; }

.mobile-tabbar {
  display:none; /* hidden by default, enabled via media query */
  align-items:center;
  gap:12px;
  /* alternativ #4ba28e (grünlich) anstatt #764ba2 (lila) */
  /* background:linear-gradient(135deg,#667eea 0%, #764ba2 100%);    */
  background:linear-gradient(135deg,#667eea 0%, #4b8aa2 100%);
  color:#fff;
  padding:10px 14px;
}
.mobile-tab-toggle { color:#fff; border-color:rgba(255,255,255,0.5); }
.mobile-tab-toggle:hover { background:rgba(255,255,255,0.15); }
.mobile-tab-current { font-weight:600; font-size:0.95rem; flex:1; }
.mobile-tabbar { position:relative; }
.mobile-tab-menu { position:absolute; top:100%; left:0; background:#fff; min-width:240px; box-shadow:0 6px 18px rgba(0,0,0,0.18); z-index:200; padding:6px 0; border-radius:6px; animation:fadeSlide .18s ease; }
.mobile-tab-menu button { white-space:nowrap; }
@keyframes fadeSlide { from { opacity:0; transform:translateY(-6px);} to { opacity:1; transform:translateY(0);} }
.mobile-tab-menu button { display:block; width:100%; text-align:left; background:none; border:none; padding:10px 16px; font-size:0.9rem; color:#333; }
.mobile-tab-menu button:hover { background:#f1f3f5; }
/* Dedicated Dashboard button on the right */
.mobile-tab-dashboard { margin-left:auto; background:none; border:none; color:#fff; font-weight:600; font-size:0.95rem; text-decoration:none; }
.mobile-tab-dashboard.underline { text-decoration: underline; }
/* Underline style for current label when non-dashboard tab is active */
.mobile-tab-current.underline { text-decoration: underline; }

/* Compact toggle buttons hosted inside the mobile tab bar */
.mobile-dash-toggles { display:flex; align-items:center; gap:8px; margin-left:8px; }
.mobile-dash-toggles .btn { padding:4px 8px; font-size:0.82rem; color: white; border-color: white;}
.mobile-dash-toggles .btn.active { background-color: #47d8df !important; border-color: #47d8df !important;}

/* ===================== Responsive Table Improvements ===================== */
/* Breakpoints: ≤575px card layout; 576–780px minimal columns; ≥781px full */
@media (max-width: 1100px) {
  /* optional earlier hide of long show notes at narrower desktops if needed */
}
@media (max-width: 780px) {
  /* Between 576–780px we keep: 1 Date, 2 Title, 3 Dauer; hide Show Notes (col 4) and Instruments (col 5) */
  /* Current columns: 1 Date, 2 Title, 3 Dauer, 4 Show Notes, 5 Instruments */
  .episode-table th:nth-child(4),
  .episode-table td:nth-child(4) { display:none; } /* hide Show Notes */
  .episode-table th:nth-child(5),
  .episode-table td:nth-child(5) { display:none; } /* hide Instruments */
}
@media (max-width: 575.98px) {
  .episode-table thead { display:none; }
  .episode-table tbody tr { position:relative; display:block; margin-bottom:10px; border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px 30px 14px; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,0.06); transition:.18s ease box-shadow, .18s ease transform; }
  .episode-table tbody tr:hover { box-shadow:0 4px 10px rgba(0,0,0,0.12); transform:translateY(-2px); }
  .episode-table tbody td { display:block; width:100%; padding:2px 0; border:none; font-size:0.83rem; background:transparent !important; }
  .episode-table tbody td:before { display:none !important; }
  .episode-table tbody td.ep-date { font-size:0.7rem; font-weight:500; color:#555; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:4px; }
  .episode-table tbody td.ep-title { font-weight:600; font-size:0.9rem; line-height:1.25; padding-right:10px; }
  /* Hide Dauer, Show Notes and Instruments cells in card layout; duration shown inline under title */
  .episode-table tbody td:nth-child(3), /* Dauer */
  .episode-table tbody td:nth-child(4), /* Show Notes */
  .episode-table tbody td:nth-child(5)  /* Instruments */
  { display:none !important; }
  .episode-table tbody tr .ep-title { position:relative; padding-right:70px; }
  .episode-table tbody tr .ep-duration { position:absolute; bottom:-2px; right:0; font-size:0.7rem; font-weight:600; color:#374151; background:#f1f5f9; padding:3px 8px; border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,0.08); }
  #episodesTable { border-collapse:separate; }
}

/* Ensure instrument suggest overlays on mobile */
@media (max-width: 640px) {
  #instrumentSuggestBox { width:100% !important; }
}
.instrument-pill {
  display: inline-block;
  background: #eef2ff; /* soft background */
  color: #111827;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.85em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Mobile: make instrument pills slightly larger and allow wrapping to show name */
@media (max-width: 640px) {
  .instrument-pill {
    padding: 6px 10px;
    font-size: 0.95em;
    white-space: normal; /* allow symbol + name to wrap/show */
    max-width: 60vw;
  }
  /* board pills (absolute positioned) should also allow name wrapping */
  .aaa-board-pill { white-space: normal !important; max-width: 60vw; }
  /* Strengthen against Bootstrap's .btn nowrap on some mobile browsers */
  button.instrument-pill.btn { white-space: normal !important; }
}

/* Episoden-Tabelle: max 3 Zeilen für Instrument-Pillen anzeigen */
.table-preview-3lines {
  max-height: calc(3 * 1.9em);
  overflow: hidden;
}

.instrument-pill.btn {
  line-height: 1.2;
  padding: 2px 6px;
}
.instrument-pill .symbol {
  font-weight: 700;
  margin-right: 6px;
}
.instrument-pill .name {
  opacity: 0.85;
}

/* Notes UI small tweaks */
.list-group-item .btn-link.text-danger { color: #c53030; }
.list-group-item .btn-link.text-danger:hover { color: #9b2c2c; }

/* Search actions dynamic spacing */
.search-actions { gap:6px; }
.search-actions #searchButtonRow { margin-bottom:2px; }
.search-actions #episodeSearchReset.d-none { display:none !important; }
.search-actions.compact #searchButtonRow { margin-bottom:0; }

/* Collapsible search status row */
.search-status-row { min-height:0; padding-top:0; padding-bottom:0; line-height:1; }
.search-status-row.empty { display:none !important; }


/* Back To Top Button */
.back-to-top {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 500;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  transform: translateY(10px);
}
.back-to-top.show { opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover { transform:translateY(-3px); }
@media (max-width: 600px){
  .back-to-top { width:40px; height:40px; bottom:14px; right:14px; }
}

.stats-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  text-align: center;
}

.stats-number {
  font-size: 2rem;
  font-weight: bold;
  color: #667eea;
}

.category-card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.category-card:hover {
  transform: translateY(-5px);
}

.btn-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  border-radius: 25px;
  padding: 10px 25px;
  font-weight: 500;
}

.btn-gradient:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  color: white;
  transform: translateY(-2px);
}

.font-small {
  font-size: 0.8em;
}

/* Highlighting support for selected text */
.highlighted {
  background-color: rgba(255, 255, 0, 0.5); /* default yellow-ish */
  border-radius: 2px;
}

.highlight-toolbar {
  position: absolute;
  z-index: 9999;
  display: none;
  gap: 6px;
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
}
.highlight-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.highlight-clear {
  font-size: 12px;
  color: #666;
  cursor: pointer;
}

/* Collapsible instrument cells (preview + expand link) */
.collapsible-cell .collapsible-preview {
  /* collapsed: show ~3 text lines */
  line-height: 1.4em;
  max-height: calc(1.4em * 3);
  overflow: hidden;
}
.collapsible-cell .collapsible-full {
  /* expanded: show ~17 text lines and allow scrolling if content larger */
  line-height: 1.4em;
  max-height: calc(1.4em * 17);
  overflow-y: auto;
}
.collapsible-toggle {
  color: #007bff;
  cursor: pointer;
  display: inline-block;
  margin-top: 6px;
}

/* Category card accent line via CSS variable */
.aaa-category-card {
  /* colored top border; color assigned via inline CSS variable from JS */
  border-top: 4px solid var(--aaa-accent, #667eea);
  cursor: pointer;
}

/* Search panel chevron styling (moved from inline styles) */
#searchPanelChevron {
  display: inline-block; /* allow transforms to behave reliably */
  font-size: 1.6rem; /* slightly larger on default/desktop */
  margin-left: 6px;
  line-height: 1;
  color: #646363;
  transition: transform .18s ease; /* smooth rotation when JS toggles transform */
  transform-origin: center;
  position: relative;
  top: 0px; /* nudge so the glyph sits one tick higher (adjusted) */
  vertical-align: middle;
}

/* On small screens, make the chevron a bit larger for easier tapping/readability */
@media (max-width: 768px) {
  #searchPanelChevron { font-size: 1.85rem; top: 2px; }
}

/* Use ARIA state on the header to control chevron rotation via CSS.
   This makes the visual state follow the accessibility attribute and
   removes the need for inline transform assignments in JS. */
#searchPanelHeader[aria-expanded="false"] #searchPanelChevron {
  transform: rotate(-90deg);
}
#searchPanelHeader[aria-expanded="true"] #searchPanelChevron {
  transform: rotate(0deg);
}

/* make card / admin headers slightly lighter on dark backgrounds */
.card,
.card-title h5,
/* admin-specific h5 headings (admin pages like admin/*.php) */
body.admin-area .card-title h5,
body.admin-area h5,
/* also match admin pages that use Bootstrap utility classes */
body.bg-dark.text-light h5,
body.bg-dark.text-light .card-title h5 {
  color: #d0d0d0 !important; /* slightly lighter gray for dark backgrounds */
}

body.admin-area h5.card-title {
  color: #d0d0d0 !important; /* slightly lighter gray for dark backgrounds */
}
.card {
  color: #d0d0d0 !important;
}

/* Admin: Show Notes Auswahl - lighten headings and detail panes */
body.admin-area h5,
body.admin-area h6,
body.admin-area #detailTitle,
body.admin-area #paneContent {
  color: #d0d0d0 !important;
}

/* ===================== Header Account (Login/User) ===================== */
.header-account { position:absolute; top:12px; right:16px; z-index:300; }
.header-account .btn-account { 
  display:flex; align-items:center; gap:8px; 
  color:#fff; 
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  padding: 6px 10px; border-radius: 20px;
  backdrop-filter: blur(2px);
  position: relative;
}
.header-account .btn-account:hover { background: rgba(255,255,255,0.18); }
.header-account .label { font-weight:600; font-size:0.9rem; }
.header-account-menu { 
  position:absolute; top:100%; right:0; margin-top:8px; 
  background:#fff; color:#333; min-width: 180px; 
  border:1px solid rgba(0,0,0,0.08); border-radius:8px; 
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
  padding:8px; display:none; z-index:350;
}
.header-account-menu.show { display:block; animation:fadeSlide .16s ease; }
.header-account-menu .menu-item { display:block; width:100%; text-align:left; border:none; background:none; padding:8px 10px; border-radius:6px; }
.header-account-menu .menu-item:hover { background:#f1f3f5; }

/* Logged-in visual badge */
.header-account .btn-account.logged-in { border-color: rgba(46, 204, 113, 0.7); }
.header-account .btn-account.logged-in::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: #2ecc71; /* green */
  top: 0px; right: 0px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
}

/* ===================== Dashboard full-height layout (all breakpoints) ===================== */
/* Container gets explicit height via JS. Hide overflow so inner cards manage scroll. */
#dashboardContainer, #favoritesContainer { overflow: hidden; }
/* Remove outer bottom margins from hosts on all breakpoints to avoid height bleed */
#dashboardNotesHost, #dashboardBoardHost, #favoritesNotesHost, #favoritesBoardHost { margin-bottom: 0 !important; }
/* Hosts fill assigned height; children manage their own scroll */
#favoritesNotesHost,
#favoritesBoardHost,
#dashboardNotesHost,
#dashboardBoardHost { height: 100%; display: flex; flex-direction: column; overflow: hidden; }

/* Board card fills height; body scrolls if needed */
#aaaBoardCard { height: 100%; display: flex; flex-direction: column; }
#aaaBoardCard .card-body { flex: 1 1 auto; overflow: auto; min-height: 0; }
#aaaBoard { height: 100%; min-height: 0; overflow: auto; }

/* Notes card fills height; internal list/editor manage scroll */
#aaaNotesCard { height: 100%; display: flex; flex-direction: column; }
#aaaNotesCard .card-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
#aaaNotesCard .card-body > .row { flex: 1 1 auto; min-height: 0; height: 100%; }
#aaaNotesCard .card-body .col-12.col-md-5,
#aaaNotesCard .card-body .col-12.col-md-7 { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* Explicit ID for left column to fine-tune behavior */
#aaaNotesListCol { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
#aaaNotesList { flex: 1 1 auto; /* fill remaining space in column */
  /* remove explicit heights so flex can constrain the box */
  overflow-y: auto; overflow-x: hidden; min-height: 0; box-sizing: border-box;
  scrollbar-gutter: stable both-edges;
  padding-right: 2px; /* avoid text under scrollbar */
  padding-bottom: 10px; /* breathing room after last item */
  overscroll-behavior: contain; }
/* Editor content should not be its own scroll container; let the card-body scroll */
#aaaNotesEditor { flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; overflow: visible; height: auto; }
/* Make the wrapper around the textarea a flex box so the textarea can actually flex */
#aaaNotesEditor > div:last-child { display: block; flex: 0 0 auto; min-height: 0; }
/* Ensure the actual editor scrolls inside the available space */
#aaaNoteContent { flex: 0 0 auto; min-height: 0; overflow: visible; resize: none; width: 100%; height: auto; }
/* Clip any child bleed and maintain clean borders */
#aaaNotesCard { overflow: hidden; }
/* Add a tiny bottom padding so content doesn't visually collide with the border */
#aaaNotesEditor { padding-bottom: 6px; }

/* Drag-over highlight for Notes dropzone */
#aaaNotesEditor.drag-over {
  outline: 2px dashed #0d6efd;
  outline-offset: 2px;
  background: #f0f8ff;
}
/* Generic drop highlight for preview or other drop areas */
.aaa-notes-drop.drag-over {
  outline: 2px dashed #0d6efd;
  outline-offset: 2px;
  background: #f0f8ff;
}

/* Episode modal: notes drop button drag-over feedback */
#episodeNotesDrop.drop-over {
  box-shadow: 0 0 0 2px rgba(13,110,253,0.35);
}

/* Ensure module wrappers inside hosts also flex to fill height so nested cards' height:100% works */
#dashboardBoardHost > div,
#dashboardNotesHost > div,
#favoritesBoardHost > div,
#favoritesNotesHost > div { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ===================== Dashboard Board: Quick Notes and Watch List ===================== */
/* Quick Notes styling: auto-sized contenteditable boxes with subtle border */
.aaa-quick-notes .aaa-quick-note {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 8px;
  background: #fafafa;
  margin-bottom: 6px;
  min-height: 32px;
  line-height: 1.35;
  outline: none;
}
.aaa-quick-notes .aaa-quick-note:focus {
  border-color: #bbb;
  background: #fff;
}

/* Make board widget body a bit tighter on very small screens */
@media (max-width: 575.98px) {
  #dashboard .aaa-board-item.card .card-body,
  #favorites .aaa-board-item.card .card-body {
    padding: 0.4rem !important;
  }
}

/* On small screens: allow natural vertical scrolling in Dashboard */
@media (max-width: 1069.98px) {
  /* Let the container grow and allow page scroll */
  #dashboardContainer, #favoritesContainer { overflow-y: auto; height: auto; min-height: 0; }
  /* Hosts and cards should not force full-height; let content define height */
  #dashboardNotesHost, #dashboardBoardHost, #favoritesNotesHost, #favoritesBoardHost { height: auto; overflow: visible; }
  #aaaBoardCard, #aaaNotesCard { height: auto; }
  #aaaBoardCard .card-body, #aaaNotesCard .card-body { overflow: visible; }
  /* Ensure board shows a reasonable viewport and can scroll internally when content exceeds */
  #aaaBoard { height: auto; min-height: 50vh; max-height: 80vh; overflow: auto; clear: both; }
}

/* Free items on board */
.aaa-board-pill { cursor: move; }
.aaa-note-chip {
  position: absolute;
  z-index: 1; /* create stacking context so ::after can layer above */
  display: inline-block;
  max-width: 80vw;
  padding: 4px 8px;
  border-radius: 0; /* square corners */
  border: 1px solid #ddd;
  background: #ffffff;
  color: #111827;
  font-size: 0.85em;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  cursor: move;
  /* Disable native resizer; we render a custom grip */
  resize: none;
  /* Allow content to expand vertically without clipping */
  overflow: visible;
  white-space: pre-wrap; /* preserve user line breaks and wrap */
  overflow-wrap: anywhere; /* break long words if needed */
  min-width: 60px; /* reasonable minimum for handle */
}

/* Custom resize grip (bottom-right), used to resize note width via JS */
.aaa-note-chip .aaa-note-resize {
  position: absolute;
  right: 0; top: 0; bottom: 0; /* full height on right edge */
  width: 14px; /* generous hit area */
  cursor: ew-resize;
  z-index: 5;
  background: transparent; /* no stripes along full height */
}

/* Only show the diagonal stripes in the bottom-right corner */
/* --- diagonal corner stripes for note resize (temporarily disabled) ---
.aaa-note-chip .aaa-note-resize::after,
.aaa-note-chip .aaa-note-resize::before {
  content: "";
  position: absolute;
  pointer-events: none;
  height: 1px;
  background: rgba(120,120,120,0.52);
  left: 0;
  transform: rotate(125deg);
  transform-origin: left bottom;
}
.aaa-note-chip .aaa-note-resize::after { bottom: 3px; width: 12px; }
.aaa-note-chip .aaa-note-resize::before { bottom: 0; width: 8px; }
--- end disabled stripes --- */
.aaa-note-chip.editing { cursor: text; border-color: #bbb; outline: 2px solid rgba(13,110,253,0.15); }

/* Header chips: like notes but bold + underlined */
.aaa-header-chip {
  position: absolute;
  z-index: 1;
  display: inline-block;
  max-width: 80vw;
  padding: 4px 8px;
  border-radius: 0;
  border: 1px solid #ddd;
  background: #ffffff;
  color: #111827;
  font-size: 0.92em;
  font-weight: 700;
  text-decoration: underline;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  cursor: move;
  resize: none;
  overflow: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 80px;
}
.aaa-header-chip .aaa-note-resize {
  position: absolute; right: 0; top: 0; bottom: 0; width: 14px; cursor: ew-resize; z-index: 5; background: transparent;
}
.aaa-header-chip.editing { cursor: text; border-color: #bbb; outline: 2px solid rgba(13,110,253,0.15); }

/* Frames: user-drawn rectangles to group areas */
.aaa-frame-box {
  position: absolute;
  border: 1px solid #bdbdbd;
  background: rgba(0,0,0,0.0);
  cursor: move;
  min-width: 40px;
  min-height: 40px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);
}
.aaa-frame-box .aaa-frame-resize {
  position: absolute; width: 14px; height: 14px; right: 0; bottom: 0; cursor: nwse-resize; background: #ffffff; box-shadow: -1px -1px 0 rgba(0,0,0,0.08);
}

/* Mobile in-place overlay controls removed; using tap-to-open context menu instead */

/* Small context menu for board items */
.aaa-board-menu {
  position: absolute;
  z-index: 2000;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  padding: 4px;
  min-width: 140px;
  font-size: 0.9rem;
}
.aaa-board-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
}
.aaa-board-menu button:hover { background: #f1f3f5; }

/* Drag ghost used for touch drags of instrument pills */
.aaa-drag-ghost {
  padding: 6px 10px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: #28a745 !important; /* green */
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transform: translate(-6px,-6px);
}

/* Highlight the dashboard toggle when a pill is dragged over it (touch) */
.aaa-drag-target-active {
  /* light green while hovering a draggable over the toggle */
  box-shadow: 0 0 0 3px rgba(46,204,113,0.22) !important;
  border-color: #2ecc71 !important; /* light green */
  background-color: rgba(46,204,113,0.12) !important;
}

/* neon green for 2s after successful drop */
.aaa-drag-target-dropped {
  box-shadow: 0 0 0 3px rgba(57,255,20,0.28) !important;
  border-color: #39ff14 !important; /* neon green */
  background-color: rgba(57,255,20,0.18) !important;
  transition: background-color .2s ease, box-shadow .2s ease;
}