/* ==========================================================================
   GLS Equity - Watchlist page (Session 3, extended Session 4e)
   Page layout only. Cards, tables, forms, buttons and messages come from styles.css.
   ========================================================================== */

/* Sidebar + table side by side on desktop, stacked on mobile */
.wl-layout { display: flex; flex-direction: column; gap: 20px; }

.wl-sidebar { padding: 0; }   /* no overflow:hidden - it clipped the Add Symbol suggestion list */
.wl-sidebar-header { padding: 16px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; border-radius: 12px 12px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wl-sidebar .wl-accordion:last-of-type, .wl-sidebar .wl-accordion:last-of-type summary { border-radius: 0 0 12px 12px; }
.wl-auth-notice { padding: 16px; font-size: 0.9rem; color: #475569; }
.wl-auth-notice a { color: #2563eb; text-decoration: underline; font-weight: 600; }

.wl-section { padding: 16px; border-bottom: 1px solid #f1f5f9; }
.wl-section .filter-label, .wl-accordion-body .filter-label { display: block; margin-bottom: 6px; }
.wl-input-row { display: flex; gap: 6px; align-items: center; }
.wl-input-row .form-control, .wl-input-row .search-suggest-wrap { flex: 1; min-width: 0; }
.wl-btn-row { display: flex; gap: 6px; margin-top: 8px; }
.wl-btn-row .btn { flex: 1; }
.wl-inline-form { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; }
.wl-symbol-input { text-transform: uppercase; }
.wl-symbol-input::placeholder { text-transform: none; }
.wl-legend-near { background: #fef3c7; color: #b45309; padding: 0 6px; border-radius: 4px; font-weight: 700; }
.wl-legend-hit { background: #d1fae5; color: #047857; padding: 0 6px; border-radius: 4px; font-weight: 700; }

/* Suggestion list under the Add Symbol box: left-aligned to the box, wide enough for company names */
ul.search-dropdown.wl-suggest { left: 0; transform: none; width: 420px; }

/* Accordions (same look as the scanner filters) */
.wl-accordion { border-bottom: 1px solid #f1f5f9; }
.wl-accordion:last-of-type { border-bottom: none; }
.wl-accordion summary {
    padding: 14px 16px; font-size: 0.95rem; font-weight: 700; color: #0f172a; cursor: pointer;
    list-style: none; display: flex; justify-content: space-between; align-items: center; user-select: none;
}
.wl-accordion summary::-webkit-details-marker { display: none; }
.wl-accordion summary::after { content: '+'; font-size: 1.2rem; color: #64748b; font-weight: normal; }
.wl-accordion[open] summary::after { content: '−'; }
.wl-accordion summary:hover { background: #f8fafc; }
.wl-accordion-body { padding: 0 16px 16px; }

/* Main area */
.wl-main { flex: 1; min-width: 0; }
.wl-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 10px 4px; }
.wl-summary { font-size: 0.85rem; color: #64748b; font-weight: 500; margin: 0; }
.wl-filter-row { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #475569; }
.wl-check { display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.wl-pct-input { width: 70px; padding: 4px 8px; font-size: 13px; }
.wl-th-check, .wl-td-check { width: 34px; text-align: center; padding-left: 12px !important; padding-right: 4px !important; }
.wl-th-check { cursor: default !important; }
.wl-th-check::after { display: none; }
.wl-th-info { font-size: 0.9rem; padding: 0 2px; vertical-align: middle; }
.wl-th-notes { cursor: default !important; }
.wl-th-notes::after { display: none; }
.wl-row-check, #wl-select-all { width: 16px; height: 16px; cursor: pointer; accent-color: #2563eb; }
.data-table td.empty-state { padding: 40px 16px; }
/* Notes: preview button in the row, editor in a row underneath */
.wl-note-cell { max-width: 260px; }
.wl-note-btn { background: none; border: none; padding: 0; font: inherit; font-size: 13px; color: #475569; cursor: pointer; text-align: left; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-note-btn:hover { color: #0f172a; text-decoration: underline; }
.wl-note-add { color: #2563eb; font-weight: 600; }
.data-table tr.wl-note-row td { background: #f8fafc; white-space: normal; padding: 12px 16px 14px; box-shadow: inset 0 2px 0 #e2e8f0; }
.wl-note-editor { max-width: 720px; }
.wl-note-text { min-height: 72px; resize: vertical; font-size: 14px; }

/* Column chooser */
.wl-col-chooser { position: relative; margin-left: 8px; }
.wl-col-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 500; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); padding: 10px 14px; min-width: 190px; display: flex; flex-direction: column; gap: 6px; }
.wl-col-menu-title { font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.wl-col-menu .wl-check { font-size: 14px; color: #0f172a; }
.wl-pct { font-size: 12px; font-weight: normal; margin-left: 4px; }
.wl-earnings { font-weight: 500; color: #475569; }
.wl-target-input { width: 96px; padding: 4px 8px; font-size: 13px; text-align: right; display: inline-block; }
.wl-gap { white-space: nowrap; }
.wl-hit-badge { background: #10b981; color: #fff; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* Table box: tall enough to be the thing that scrolls, so the sticky header stays put */
.wl-table-box { max-height: calc(100vh - 210px); }

/* Row shading: within range of the target (amber) / target reached (green) / ticked (blue tint) */
.data-table tr.wl-row-near td, .data-table tr.wl-row-near:hover td { background-color: #fef3c7; }
.data-table tr.wl-row-hit td, .data-table tr.wl-row-hit:hover td { background-color: #d1fae5; }
.data-table tr.wl-row-selected td:first-child { box-shadow: inset 3px 0 0 #2563eb; }   /* one blue bar on the left, not a line per cell */
.data-table tr.wl-row-selected:not(.wl-row-near):not(.wl-row-hit) td { background-color: #eff6ff; }
.data-table tr.wl-row-selected.wl-row-near td { background-color: #fde68a; }
.data-table tr.wl-row-selected.wl-row-hit td { background-color: #a7f3d0; }

/* Bulk action bar (shows when rows are ticked) */
.wl-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 10px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; }
.wl-bulk-count { font-weight: 700; color: #1e40af; font-size: 0.9rem; margin-right: 4px; }
.wl-bulk-select { width: auto; min-width: 180px; padding: 6px 10px; font-size: 13px; }
.wl-bulk-new-form { width: 100%; }
.wl-bulk-new-form .form-control { max-width: 260px; }

/* Target-reached banner */
.wl-target-banner { text-align: left; }
.wl-banner-link { color: #065f46; text-decoration: underline; font-weight: 800; }

/* Desktop: fixed sidebar that can be minimised to a thin strip */
@media (min-width: 769px) {
    .wl-layout { flex-direction: row; align-items: flex-start; }
    .wl-sidebar { width: 320px; flex-shrink: 0; position: sticky; top: 80px; transition: width 0.25s ease; }
    .wl-sidebar.collapsed { width: 56px; }
    .page-container.wl-expanded { max-width: 3000px; }   /* use the whole screen once the panel is minimised */
    .wl-sidebar.collapsed .wl-sidebar-header { justify-content: center; padding: 12px 8px; }
    .wl-sidebar.collapsed .panel-title,
    .wl-sidebar.collapsed #watchlist-controls,
    .wl-sidebar.collapsed #watchlist-auth-notice { display: none !important; }
}

@media (max-width: 768px) {
    .wl-sidebar { border-radius: 0; border-left: none; border-right: none; }
    .wl-sidebar.collapsed #watchlist-controls { display: none !important; }
    .wl-toolbar { padding: 0 12px; }
    .wl-bulk-bar { border-radius: 0; }
    .wl-table-box { max-height: 70vh; }
    ul.search-dropdown.wl-suggest { width: calc(100vw - 32px); }
}