/* Overlays that are not dialogs: symbol search dropdown, sign-in gate, account drawer/sheet, upgrade
 * banner, drawing context menu, debug console log + filter bar. */

/* ===================== Symbol search dropdown ===================== */
.symbol-search-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-modal);
  display: flex; flex-direction: column; margin-top: var(--space-xs);
  max-height: min(420px, 70dvh); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius-sm);
}
/* Phone: the Crypto/Stocks switch is the dropdown's first row (dashboard.js setupAssetTypePlacement). */
.symbol-search-dropdown .asset-type-toggle--in-search {
  position: sticky; top: 0; z-index: 2;
  padding: var(--space-sm) var(--space-md); background: var(--surface);
  border-bottom: 1px solid var(--outline-variant);
}
.dropdown-section { display: flex; flex-direction: column; }
.dropdown-section + .dropdown-section { border-top: 1px solid var(--outline-variant); }
.dropdown-section-header {
  position: sticky; top: 0; z-index: 1; padding: var(--space-sm) var(--space-md);
  background: var(--surface); color: var(--text-secondary);
  font-size: var(--fs-label-md); font-weight: var(--fw-label-md);
}
.symbol-search-dropdown .dropdown-item {
  position: relative; display: block; width: 100%;
  min-height: var(--touch-target); padding: var(--space-sm) var(--space-xxl) var(--space-sm) var(--space-md);
  cursor: pointer; color: var(--text); text-align: left;
  transition: background-color var(--motion-fast) var(--ease-emphasized);
}
.symbol-search-dropdown .dropdown-item .symbol-info { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; min-width: 0; }
.symbol-search-dropdown .dropdown-item .symbol-name { font-size: var(--fs-title-sm); font-weight: var(--fw-title-sm); color: var(--text); }
.symbol-search-dropdown .dropdown-item .symbol-provider-badge,
.symbol-search-dropdown .dropdown-item .symbol-exchange-badge {
  display: inline-flex; padding: var(--space-xxs) var(--space-sm); border-radius: var(--radius-pill);
  border: 1px solid var(--outline); color: var(--text-secondary);
  font-size: var(--fs-label-sm); font-weight: var(--fw-label-sm); line-height: 1.3;
}
.symbol-search-dropdown .dropdown-item .symbol-details {
  display: block; flex-basis: 100%; margin-top: var(--space-xxs); color: var(--text-secondary); font-size: var(--fs-body-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dropdown-item:hover, .dropdown-item.selected { background: var(--surface-hover); }
.star-btn, .favourite-star {
  position: absolute; right: var(--space-xs); top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer;
  color: var(--primary); font-size: var(--fs-title-md);
}
.star-btn:hover, .favourite-star:hover { background: var(--hover-wash); }
/* "Open in a new tab" beside the star (chart tabs, symbol-search.js _newTabButton). */
.newtab-btn {
  position: absolute; right: calc(var(--space-xs) + 40px); top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer; color: var(--text-secondary);
}
.newtab-btn svg { width: 20px; height: 20px; }
.newtab-btn:hover { background: var(--hover-wash); color: var(--text); }
.symbol-search-dropdown .dropdown-item.has-newtab { padding-right: calc(var(--space-xxl) * 2); }
.symbol-search-dropdown .dropdown-newtab-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  background: var(--surface-bright); color: var(--text); font-size: var(--fs-label-lg);
  border-bottom: 1px solid var(--outline-variant);
}
.favourite-star.not-favourite, .star-btn.not-favourite { color: var(--text); }
.dropdown-no-results, .dropdown-error, .no-results { padding: var(--space-lg) var(--space-md); text-align: center; color: var(--text-secondary); }
.no-results-text, .no-results-title { color: var(--text); font-size: var(--fs-body-md); margin-bottom: var(--space-xs); }
.dropdown-error .error-text { color: var(--error); }
.no-results-hint, .no-results-subtitle { font-size: var(--fs-body-sm); }
.symbol-search-dropdown .dropdown-extend-search {
  padding: var(--space-sm) var(--space-md); min-height: var(--touch-target);
  display: flex; align-items: center; justify-content: center; gap: var(--space-xs);
  color: var(--primary); font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); cursor: pointer;
  border-top: 1px solid var(--outline-variant);
}
.symbol-search-dropdown .dropdown-extend-search:hover { background: var(--hover-wash); }
.symbol-search-dropdown .dropdown-action {
  display: flex; align-items: center; justify-content: center; gap: var(--space-xs); width: 100%;
  min-height: var(--touch-target); padding: var(--space-sm) var(--space-md);
  border: 0; border-top: 1px solid var(--outline-variant); background: transparent;
  color: var(--text-secondary); font: inherit; font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); cursor: pointer;
}
.symbol-search-dropdown .dropdown-action:hover { background: var(--hover-wash); color: var(--text); }
.symbol-search-dropdown .dropdown-action__icon { color: var(--primary); }
.symbol-search-dropdown .dropdown-extend-panel {
  display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md);
  border-top: 1px solid var(--outline-variant);
}
.symbol-search-dropdown .extend-panel-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.symbol-search-dropdown .extend-provider-select, .symbol-search-dropdown .extend-type-select {
  flex: 1 1 120px; min-width: 0; min-height: var(--control-height); padding: var(--space-xs) var(--space-sm);
  background: transparent; color: var(--text); border: 1px solid var(--outline); border-radius: var(--radius-field);
  font-size: var(--fs-body-sm);
}
.symbol-search-dropdown .extend-provider-select option, .symbol-search-dropdown .extend-type-select option { background: var(--surface); }
.symbol-search-dropdown .extend-search-btn {
  flex: 1 1 100%; min-height: var(--control-height); border: 0; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--on-primary); font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); cursor: pointer;
}
.symbol-search-dropdown .extend-search-btn:disabled { background: var(--disabled-bg); color: var(--disabled-text); cursor: default; }
.symbol-search-dropdown .extend-search-hint, .symbol-search-dropdown .extend-search-status {
  font-size: var(--fs-body-sm); color: var(--text-secondary); text-align: center;
}
.symbol-search-dropdown .extend-search-status.extend-search-error { color: var(--error); }

/* ===================== Sign-in gate ===================== */
.auth-gate {
  position: fixed; inset: 0; z-index: var(--z-modal); display: none;
  align-items: center; justify-content: center; padding: var(--space-md); overflow-y: auto;
  background: var(--bg);
}
.auth-gate-card {
  width: min(440px, 100%); padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-overlay);
  background: var(--surface); color: var(--text); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-md);
}
.auth-gate-card::before {
  content: "TradeScope"; font-size: var(--fs-headline-sm); font-weight: var(--fw-display-sm); color: var(--text);
}
#auth-gate-body { width: 100%; color: var(--text-secondary); font-size: var(--fs-body-md); display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
#auth-gate-body p { color: var(--text); }
#auth-gate-body button {
  min-height: var(--control-height); padding: var(--space-sm) var(--space-lg); border: 0; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--on-primary); font-weight: var(--fw-label-lg); cursor: pointer;
}

/* ===================== Account: right drawer (desktop), bottom sheet (phone) ===================== */
.account-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal); display: none;
  justify-content: flex-end; align-items: stretch; background: var(--scrim);
}
.account-card {
  width: min(480px, 100%); height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: var(--space-lg); background: var(--surface); color: var(--text);
  border-radius: var(--radius-overlay) 0 0 var(--radius-overlay);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.account-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm); }
.account-head h2 { font-size: var(--fs-title-lg); font-weight: var(--fw-title-lg); }
.account-card h3 { font-size: var(--fs-title-sm); font-weight: var(--fw-title-sm); margin-top: var(--space-md); }
.account-close {
  display: inline-flex; align-items: center; justify-content: center; width: var(--control-height); height: var(--control-height);
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text); font-size: var(--fs-headline-sm); cursor: pointer;
}
.account-close:hover { background: var(--hover-wash); }
.account-identity { display: flex; flex-direction: column; gap: var(--space-xxs); min-width: 0; }
.account-name { font-size: var(--fs-title-md); font-weight: var(--fw-title-md); overflow-wrap: anywhere; }
.account-email, .account-role, .account-hint, .account-keymeta { color: var(--text-secondary); font-size: var(--fs-body-sm); overflow-wrap: anywhere; }
.account-key { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-top: 1px solid var(--outline-variant); }
.account-keyname { font-weight: var(--fw-title-sm); overflow-wrap: anywhere; }
.account-key-revoked .account-keyname, .account-key-expired .account-keyname { color: var(--text-secondary); text-decoration: line-through; }
.account-keyinfo { min-width: 0; }
.account-provider { margin-top: var(--space-sm); padding: var(--space-md); border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); }
.account-provider-name { font-weight: var(--fw-title-sm); margin-bottom: var(--space-xs); }
.account-keyform { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.account-keyform input { flex: 1 1 180px; min-width: 0; }
/* Only our own controls are styled here: Clerk's mounted UI brings its own theme (auth.js appearance). */
.account-keyform input, .account-keyform select {
  min-height: var(--control-height); padding: var(--space-sm) var(--space-md);
  background: transparent; color: var(--text); border: 1px solid var(--outline); border-radius: var(--radius-field);
}
.account-keyform input:focus, .account-keyform select:focus { border-color: var(--primary); }
.account-keyform select option { background: var(--surface); }
.account-keyform button, .account-newkey button {
  min-height: var(--control-height); padding: var(--space-sm) var(--space-lg); border: 0; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--on-primary); font-weight: var(--fw-label-lg); cursor: pointer;
}
.account-revoke {
  min-height: 32px; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); cursor: pointer;
  background: transparent; color: var(--error); border: 1px solid var(--outline); font-weight: var(--fw-label-lg);
}
.account-revoke:hover { background: var(--hover-wash); }
.account-signout {
  align-self: flex-start; margin-top: var(--space-md); min-height: var(--control-height); padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); border: 1px solid var(--outline); cursor: pointer;
}
.account-signout:hover { color: var(--text); }
.account-newkey { padding: var(--space-md); border: 1px solid var(--primary); border-radius: var(--radius-sm); }
.account-newkey-value { display: block; margin: var(--space-sm) 0; font-family: var(--font-mono); font-size: var(--fs-body-sm); overflow-wrap: anywhere; user-select: all; }
.account-message { min-height: 18px; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.account-error { color: var(--error); }
.account-empty { color: var(--text-secondary); font-size: var(--fs-body-sm); }
.account-profile { max-width: 100%; overflow-x: auto; }
.plan-summary { margin-bottom: var(--space-sm); }
.plan-buttons { display: flex; flex-direction: column; gap: var(--space-sm); }
.plan-upgrade, .plan-manage, .upgrade-go {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-xxs);
  min-height: var(--control-height); padding: var(--space-sm) var(--space-lg); border: 0; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--on-primary); font-weight: var(--fw-label-lg); cursor: pointer; text-align: left;
}
.plan-manage { background: transparent; color: var(--text); border: 1px solid var(--outline); }
.plan-upgrade .plan-price { font-weight: var(--fw-body-sm); font-size: var(--fs-body-sm); }

/* ===================== Upgrade / limit banner (billing-ui.js) ===================== */
.upgrade-banner {
  position: fixed; left: 50%; bottom: var(--space-md); transform: translateX(-50%); z-index: var(--z-banner);
  display: none; align-items: center; gap: var(--space-md); width: max-content; max-width: calc(100vw - var(--space-xl));
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg); border-radius: var(--radius-card);
  background: var(--surface); color: var(--text); border: 1px solid var(--outline);
}
.upgrade-text { font-size: var(--fs-body-md); min-width: 0; }
.upgrade-go { align-items: center; flex-shrink: 0; }
.upgrade-close {
  flex-shrink: 0; width: var(--control-height); height: var(--control-height); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-secondary); font-size: var(--fs-headline-sm); cursor: pointer;
}
.upgrade-close:hover { background: var(--hover-wash); color: var(--text); }

/* ===================== Drawing context menu ===================== */
.drawing-context-menu {
  position: fixed; z-index: var(--z-popover); min-width: 200px; padding: var(--space-sm) 0;
  background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius-sm);
}
.drawing-context-menu button {
  display: block; width: 100%; min-height: var(--control-height); padding: var(--space-sm) var(--space-md);
  background: none; border: 0; color: var(--text); text-align: left; font-size: var(--fs-body-md); cursor: pointer;
}
.drawing-context-menu button:hover { background: var(--hover-wash); }
.drawing-context-menu__sep { height: 1px; background: var(--outline-variant); margin: var(--space-xs) 0; }
.drawing-context-menu button.drawing-context-menu__danger { color: var(--error); }
.drawing-context-menu button.ctx-checked::before { content: "\2713  "; color: var(--primary); }

/* ===================== Debug console: log entries + filter bar ===================== */
#debug-log { display: flex; flex-direction: column; gap: var(--space-xxs); }
.debug-entry { word-break: break-word; color: var(--text); }
.debug-entry--error { color: var(--error); }
.debug-entry--warn { color: var(--warning); }
.debug-entry--info, .debug-entry--log { color: var(--text); }
.debug-entry--debug, .debug-entry--system { color: var(--text-secondary); }
.debug-entry__ts, .debug-entry__src--fe { color: var(--text-secondary); }
.debug-entry__src--be { color: var(--primary); }
.debug-entry__tag { color: var(--text); font-weight: 600; }
#debug-filter-bar {
  position: relative; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--outline-variant);
}
#debug-filter-input {
  flex: 1; min-width: 0; min-height: 36px; padding: var(--space-xs) var(--space-md);
  background: transparent; color: var(--text); border: 1px solid var(--outline); border-radius: var(--radius-field);
  font-family: var(--font-mono); font-size: var(--fs-body-sm);
}
#debug-filter-input:focus { border-color: var(--primary); }
.debug-filter-btn {
  flex-shrink: 0; min-width: 36px; min-height: 36px; padding: 0 var(--space-sm); border: 1px solid var(--outline);
  border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); cursor: pointer; font-size: var(--fs-body-md); line-height: 1;
}
.debug-filter-btn:hover { color: var(--text); }
.debug-filter-btn--star { border-color: transparent; }
.debug-filter-btn--star.is-saved { color: var(--primary); }
.debug-filter-dropdown {
  display: none; position: absolute; top: 100%; left: var(--space-md); right: var(--space-md); z-index: var(--z-chart-overlay);
  max-height: 200px; overflow-y: auto; background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius-sm);
}
.debug-filter-row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); cursor: pointer; }
.debug-filter-row:hover { background: var(--hover-wash); }
.debug-filter-row__label { flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debug-filter-row__delete { background: none; border: 0; color: var(--text-secondary); cursor: pointer; font-size: var(--fs-body-md); line-height: 1; padding: 0 var(--space-xxs); }
.debug-filter-row__delete:hover { color: var(--error); }

@media (max-width: 767px) {
  .account-overlay { align-items: flex-end; }
  .account-card {
    height: auto; max-height: 92dvh; width: 100%;
    border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
  }
  .account-card::before {
    content: ""; align-self: center; width: 32px; height: 4px; border-radius: var(--radius-pill);
    background: var(--outline); margin-bottom: var(--space-xs); flex-shrink: 0;
  }
  .upgrade-banner { left: var(--space-md); right: var(--space-md); transform: none; width: auto; max-width: none; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-md); }
  .upgrade-text { flex: 1 1 calc(100% - var(--control-height) - var(--space-sm)); }
  .upgrade-close { order: 2; }
  .upgrade-go { order: 3; margin-left: auto; }
  /* The search results span the whole phone width under the search row, not just the input. The
     box is anchored to the input, so it reaches past whatever sits right of it (the ÷ button) by
     --search-trailing, which ui/topbar.js measures. Without that it overhung the left edge (2026-10-14). */
  .symbol-search-dropdown .asset-type-toggle--in-search ~ .dropdown-section .dropdown-section-header { position: static; }
  .symbol-search-dropdown {
    left: auto; right: calc(-1 * var(--search-trailing, 0px));
    width: calc(100vw - 2 * var(--page-pad)); max-height: 60dvh;
  }
}

/* Remote debug badge (debug-logger.js, opt-in with ?remoteDebug=1): a fixed status pill. */
#remote-debug-badge {
  position: fixed; right: var(--space-sm); bottom: var(--space-sm); z-index: var(--z-banner);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill);
  background: var(--surface-float); border: 1px solid var(--outline); color: var(--text);
  font-size: var(--fs-label-md); font-weight: var(--fw-label-md); pointer-events: none;
}
/* The server refused remote debug (403) or could not be reached: nothing is being sent. */
#remote-debug-badge.is-off { color: var(--text-secondary); }

/* Delete account: a clearly separate danger section at the bottom of the account panel, and the plain screen shown afterwards. */
.account-danger { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--outline); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.account-danger h3 { margin-top: 0; color: var(--error); }
.account-danger .account-delete { margin-left: calc(-1 * var(--space-md)); } /* the text button keeps its pill padding for the hit area, its label lines up with the heading */
.account-deleted { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-lg); background: var(--surface); color: var(--text); }
.account-deleted__card { max-width: 440px; width: 100%; padding: var(--space-xl) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.account-deleted__card h1 { font-size: var(--fs-title-lg); font-weight: var(--fw-title-lg); }
.account-deleted__card p { color: var(--text-secondary); }