/* ============================================================================
 * desk-unifier.css  (2026-08-04)
 *
 * Shared "unified panel shell" pattern for wrapping multiple existing widget
 * mounts into ONE visually coherent panel. Reused across broad-market,
 * scalping-command, canslim-scanner, and scalp-smallcap pages.
 *
 * Design principle: rather than rewriting widget internals (high risk), we
 * put existing mount divs inside a .du-panel shell with a shared header,
 * shared border/background, and thin internal dividers. The widgets keep
 * working; the page just looks like ONE dashboard instead of N cards.
 *
 * Structure:
 *   <div class="du-panel">
 *     <div class="du-panel-hdr">
 *       <span class="du-panel-title">TITLE</span>
 *       <span class="du-panel-meta">meta</span>
 *     </div>
 *     <div class="du-panel-body">
 *       <div class="du-col">... existing widget mount ...</div>
 *       <div class="du-col">... another mount ...</div>
 *     </div>
 *   </div>
 * ==========================================================================*/

.du-panel {
  background: rgba(11, 15, 22, 0.72);
  border: 1px solid rgba(126, 231, 135, 0.18);
  border-radius: 8px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #c9d1d9;
  overflow: hidden;
  margin: 0 auto 10px;
  max-width: 1320px;
  box-sizing: border-box;
}

.du-panel-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(126, 231, 135, 0.14);
  background: linear-gradient(180deg, rgba(126, 231, 135, 0.05), rgba(126, 231, 135, 0.01));
  flex-wrap: wrap;
}
.du-panel-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7ee787;
}
.du-panel-meta {
  font-size: 10px;
  color: #7d8590;
}
.du-panel-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.du-panel-actions button {
  background: transparent;
  color: #7ee787;
  border: 1px solid rgba(126, 231, 135, 0.35);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.du-panel-actions button:hover {
  background: rgba(126, 231, 135, 0.08);
  border-color: #7ee787;
}
.du-panel-actions button:disabled { opacity: 0.5; cursor: wait; }

.du-panel-body {
  padding: 10px 14px;
  min-width: 0;
}

/* --- Multi-column bodies --- */
.du-panel-body.du-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.du-panel-body.du-2col-wide-left {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.du-panel-body.du-3col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.du-panel-body.du-3col-l {
  /* Left-heavy 3-column (e.g. SIP + Actionable + A+) */
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.du-col {
  min-width: 0;
  padding: 0;
}
.du-col + .du-col {
  border-left: 1px dashed rgba(126, 231, 135, 0.14);
  padding-left: 12px;
}

/* Sub-labels for sections within a column */
.du-sublabel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7d8590;
  margin: 0 0 6px 0;
  padding-bottom: 4px;
  border-bottom: 1px dotted rgba(125, 133, 144, 0.25);
}
.du-sublabel:first-child { margin-top: 0; }
.du-sublabel b { color: #7ee787; font-weight: 700; }

/* When wrapping an existing full-width mount div, reset its own max-width/margin/padding */
.du-panel .du-embed { width: 100%; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; }
.du-panel .du-embed > * { max-width: 100% !important; box-sizing: border-box; }
/* Some widgets wrap themselves in a nested container that also sets max-width; strip that */
.du-panel .du-embed > div[style*="max-width"] { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

/* Responsive collapse */
@media (max-width: 1200px) {
  .du-panel-body.du-3col,
  .du-panel-body.du-3col-l { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .du-panel-body.du-3col .du-col:last-child,
  .du-panel-body.du-3col-l .du-col:last-child { grid-column: span 2; border-left: none; padding-left: 0; border-top: 1px dashed rgba(126, 231, 135, 0.14); padding-top: 10px; }
}
@media (max-width: 900px) {
  .du-panel-body.du-2col,
  .du-panel-body.du-2col-wide-left,
  .du-panel-body.du-3col,
  .du-panel-body.du-3col-l { grid-template-columns: 1fr; }
  .du-col + .du-col { border-left: none; padding-left: 0; border-top: 1px dashed rgba(126, 231, 135, 0.14); padding-top: 10px; }
  .du-panel-body.du-3col-l .du-col:last-child { grid-column: span 1; }
}

/* --- Reference library accordion (tabbed reference stack) --- */
.du-reflib {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.du-reflib-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid rgba(126, 231, 135, 0.15);
  margin-bottom: 8px;
}
.du-reflib-tab {
  background: transparent;
  color: #7d8590;
  border: 0;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  text-transform: uppercase;
  font-family: inherit;
  transition: color 0.12s, border-color 0.12s;
}
.du-reflib-tab:hover { color: #c9d1d9; }
.du-reflib-tab.active {
  color: #7ee787;
  border-bottom-color: #7ee787;
}
.du-reflib-panel { display: none; padding: 4px 2px; min-height: 60px; }
.du-reflib-panel.active { display: block; }
.du-reflib-panel .du-embed { display: block; }

/* --- Sticky control bar (scan control) --- */
.du-sticky-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(11, 15, 22, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(126, 231, 135, 0.18);
  padding: 8px 14px;
  margin-bottom: 8px;
  border-radius: 6px 6px 0 0;
}