/* shell.css ─ tabs, spinner, settings panel, saved-views, glossary, kb-shortcuts, .table-scroll. Loads after feature files because .saved-views-bar .dma-label overrides bloomberg's .dma-label. */

/* ── Settings ────────────────────────────────────── */
/* Settings is a long, content-rich panel (display currency, saved views,
   briefing, LLM, shortcuts, alerts). #app and body are overflow:hidden, so
   without an explicit scroll container the analyst can't reach anything
   past the viewport edge. When visible the panel takes whatever space is
   left in the column and scrolls its own contents. */
#settings-panel,
#help-panel {
  overflow-y: auto;
  min-height: 0;
}
#settings-panel:not(.hidden),
#help-panel:not(.hidden) {
  flex: 1 1 auto;
}
/* Help-panel header bar — title + close button on one line. The h3 inside
   keeps its uppercase / spaced styling from the .panel rule. */
.help-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.help-panel-head h3 {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 11px;
  color: #c8cde0;
}
/* "What each tab does" overview — tighter spacing than the default <ul>. */
#help-panel .help-overview {
  list-style: disc;
  padding-left: 18px;
  margin: 4px 0 8px;
  font-size: 11.5px;
  color: #b8bdd0;
}
#help-panel .help-overview li { margin-bottom: 4px; }
#help-panel .help-overview strong { color: #c9a84c; }
#help-panel .help-overview code,
#help-panel .help-recipes code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px;
  background: #1e2130;
  border: 1px solid #2a2d3e;
  border-radius: 3px;
  padding: 0 4px;
  color: #e6e8f0;
}
/* Numbered "Common workflows" recipes — slightly more breathing room than
   the dense overview bullets, since each item is a multi-step sentence. */
#help-panel .help-recipes {
  padding-left: 20px;
  margin: 4px 0 8px;
  font-size: 11.5px;
  color: #b8bdd0;
}
#help-panel .help-recipes li { margin-bottom: 6px; }
#help-panel .help-recipes strong { color: #c9a84c; }
#help-panel .help-recipes em {
  color: #e6e8f0;
  font-style: normal;
  font-weight: 600;
}
/* Glossary search input — matches the cost-table search styling for visual
   consistency across the addin. */
#help-glossary-search {
  width: 100%;
  padding: 6px 10px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #e6e8f0;
  font-size: 11px;
  margin-bottom: 8px;
}
#help-glossary-search:focus {
  outline: none;
  border-color: #c9a84c;
}
.help-glossary-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.help-glossary-item {
  padding: 6px 10px;
  background: #1a1d2b;
  border: 1px solid #2a2d3e;
  border-radius: 4px;
  font-size: 11px;
}
.help-glossary-term {
  display: inline-block;
  font-weight: 600;
  color: #c9a84c;
  min-width: 70px;
  margin-right: 6px;
}
.help-glossary-body { color: #b8bdd0; }
.help-glossary-empty {
  padding: 8px;
  font-size: 11px;
  color: #8a8fa3;
  font-style: italic;
}
#settings-panel label,
#tab-briefing label {
  display: block;
  font-size: 11px;
  color: #aaa;
  margin: 10px 0 4px;
}
/* Checkbox-row labels (`.fmt-check-label` / `.settings-check`) need flex
   layout — without this the broad label rule above forces them to
   display:block, breaking the inline checkbox + text alignment.
   Specificity: id + class beats id + tag. */
#settings-panel .fmt-check-label,
#settings-panel .settings-check,
#tab-briefing .fmt-check-label,
#tab-briefing .settings-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  font-size: 11.5px;
  color: #c9d0e0;
  cursor: pointer;
}

#settings-panel input,
#settings-panel select,
#tab-briefing input,
#tab-briefing select {
  width: 100%;
  padding: 7px 9px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 5px;
  color: #e8e8e8;
  font-size: 12px;
}
/* Checkboxes / radios must NOT take the broad width:100% above — they'd
   stretch to the full row and push their label off to the side or onto a
   new line. Pin them to native size. */
#settings-panel input[type='checkbox'],
#settings-panel input[type='radio'],
#tab-briefing input[type='checkbox'],
#tab-briefing input[type='radio'] {
  width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #c9a84c;
}

#settings-panel input:focus,
#settings-panel select:focus,
#tab-briefing input:focus,
#tab-briefing select:focus {
  outline: none;
  border-color: #c9a84c;
}

.hint {
  font-size: 11px;
  color: #b8bdd0;
  margin-top: 5px;
  line-height: 1.4;
}

.hint a {
  color: #c9a84c;
  text-decoration: none;
}
.hint a:hover {
  text-decoration: underline;
}

/* ── Spinner ─────────────────────────────────────── */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.spinning {
  display: inline-block;
  animation: spin 1s linear infinite;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ── Tabs ────────────────────────────────────────── */
.tab-bar {
  display: flex;
  flex-direction: column;
  background: #1a1d27;
  border-bottom: 2px solid #2a2e40;
}

.tab-row {
  display: flex;
}

.tab-row--primary {
  border-bottom: 1px solid #2a2e40;
}

.tab-btn {
  flex: 1;
  padding: 8px 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: #8b92a5;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    background-color 0.15s;
}

.tab-btn:hover {
  color: #d4b86a;
  background-color: rgba(201, 168, 76, 0.06);
}

.tab-btn.active {
  color: #c9a84c;
  border-bottom-color: #c9a84c;
  background-color: rgba(201, 168, 76, 0.08);
}

.tab-btn:focus-visible {
  outline: 2px solid #c9a84c;
  outline-offset: -2px;
  border-radius: 2px;
}

.tab-content {
  display: block;
}
.tab-content.hidden {
  display: none;
}

/* Saved-view presets bar — sits at the top of a tab, lets the user recall a
   previously-named combination of metal/range/format/filters in one click.
   Reuses .news-filter-recency and .news-filter-clear styles for visual
   consistency with the rest of the chrome. */
.saved-views-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 4px;
}
.saved-views-bar .dma-label { margin-right: 2px; }
.saved-views-bar select { flex: 0 1 220px; min-width: 0; }

/* LLM key input row — flex with the input expanding and the Clear button
   keeping its natural size. Boost specificity to win against the generic
   #settings-panel input rule that forces width:100% + 7px padding. */
#settings-panel .llm-key-input-row {
  display: flex;
  gap: 6px;
  margin: 4px 0 4px;
}
#settings-panel .llm-key-input-row input {
  flex: 1 1 auto;
  width: auto;
  padding: 6px 8px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
}
#settings-panel .llm-key-input-row button {
  flex: 0 0 auto;
  width: auto;
}

/* BYO-LLM Settings rows. Each provider's key + model live in a sub-block
   that's shown only when that provider is active. */
.llm-key-row { margin-bottom: 8px; }
.llm-key-input-row {
  display: flex;
  gap: 6px;
  margin: 4px 0 4px;
}
.llm-key-input-row input {
  flex: 1;
  padding: 4px 8px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #e6e8f0;
  font-size: 11px;
  font-family: ui-monospace, Consolas, monospace;
}
.llm-key-input-row input:focus {
  outline: none;
  border-color: #c9a84c;
}
.llm-key-display {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px;
  color: #8a8fa3;
  margin-bottom: 4px;
}

/* Inline-glossary affordance — any element tagged data-glossary picks up
   a dotted underline so analysts know it has a tooltip. The tooltip
   itself is the browser's native title. */
.has-glossary {
  text-decoration: underline dotted #8a8fa3;
  text-underline-offset: 3px;
  cursor: help;
}
.has-glossary:focus {
  outline: 1px dotted #c9a84c;
  outline-offset: 2px;
}

/* Keyboard-shortcuts table in Settings. <kbd> tags get the rounded-pill
   look familiar from GitHub / Linear. */
.shortcuts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-bottom: 8px;
}
.shortcuts-table td {
  padding: 4px 6px;
  border-top: 1px solid #2a2d3e;
  vertical-align: middle;
}
.shortcuts-table td:first-child {
  width: 110px;
  white-space: nowrap;
}
.shortcuts-table kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  background: #1e2130;
  border: 1px solid #3a3d52;
  border-bottom-width: 2px;
  border-radius: 3px;
  color: #e6e8f0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px;
  text-align: center;
  margin: 0 1px;
}

/* ── Settings panel additions ────────────────────── */
.settings-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 8px;
  font-size: 11px;
  color: #aaa;
}

.settings-actions {
  margin-bottom: 8px;
}

.table-scroll {
  overflow-x: auto;
  /* Thin, theme-matched scrollbar instead of the chunky default */
  scrollbar-width: thin;                /* Firefox */
  scrollbar-color: #3a3f55 transparent; /* Firefox */
}

/* WebKit (Edge / Chrome / Office runtime) */
.table-scroll::-webkit-scrollbar          { height: 6px; }
.table-scroll::-webkit-scrollbar-track    { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb    { background: #3a3f55; border-radius: 3px; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: #4e5474; }