/* Stonkie Admin: only what Bootstrap 5.3 doesn't already provide. */

/* ---- Page --------------------------------------------------------------------------------- */
/* Always reserve the vertical scrollbar's space, so short pages (no scrollbar) don't sit a few
   pixels to the right of long ones when switching between them. Phones use overlay scrollbars,
   so this changes nothing there. */
html { scrollbar-gutter: stable; }
/* Opening a modal, Bootstrap pads the page by the scrollbar's width to make up for hiding it. The gutter
   above already keeps that space, so the padding would push everything behind the modal ~15px left. */
body.modal-open { padding-right: 0 !important; }

.brand-badge { font-size: .6rem; vertical-align: middle; }

/* Menu: account block (theme, user, Sign out). Stacked inside the ☰ menu below 1200px
   (set in the HTML); one line without the divider on wide screens. */
@media (min-width: 1200px) {
  .nav-account { border-top: 0 !important; }
  .nav-account .nav-account-theme { width: auto; }
  .nav-account .btn { width: auto !important; }
}

/* Buttons with an icon: icon and text aligned and centered vertically. */
.btn:has(.bi) { display: inline-flex; align-items: center; justify-content: center; gap: .45em; }

/* ---- Dashboard ---------------------------------------------------------------------------- */
/* margin-bottom evens the visible gaps around the big value: without it, the text below sat ~8px
   closer to the value than the label above. */
.stat-card .value { font-size: 2rem; font-weight: 700; line-height: 1.1; margin-bottom: .45rem; }
.chart-box { position: relative; height: 280px; }   /* Chart.js fills this height */

/* Consolas detail text: the card's sector/industry line, quote/updated line, and the line under
   each stat card's value. */
.company-class, .mono-meta { font-family: Consolas, "Courier New", monospace; font-size: .75rem; line-height: 1.2; }
/* Badges inside (e.g. the OK status) are Bootstrap's own, in the normal font. Bootstrap sizes a
   badge at 75% of the surrounding text, which in this small line made it a tiny 9px; a fixed
   .75rem gives it the size it has in normal text. */
.mono-meta .badge { font-family: var(--bs-body-font-family); font-size: .75rem; }

/* ---- Company search: field and suggestions ------------------------------------------------- */
/* Field follows the theme; the icon box matches the field's background. */
.company-search .input-group-text { background-color: var(--bs-body-bg); color: var(--bs-secondary-color); }
/* Focus: highlight the whole field, icon box included (Bootstrap only colors the input itself). */
.company-search .form-control:focus { box-shadow: none; }
.company-search .input-group:focus-within { box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2); border-radius: var(--bs-border-radius-lg); }
.company-search .input-group:focus-within > .input-group-text,
.company-search .input-group:focus-within > .form-control { border-color: #86b7fe; }

/* Suggestions: floating under the field; always white with dark text, in both themes. */
.search-suggestions {
  position: absolute; z-index: 1050; top: calc(100% + .35rem); left: 0; right: 0;
  max-height: 22rem; overflow-y: auto;
  --bs-list-group-bg: #fff; --bs-list-group-color: #212529; --bs-list-group-border-color: #dee2e6;
  --bs-list-group-action-hover-bg: #fff; --bs-list-group-action-hover-color: #212529;
  --bs-list-group-action-active-bg: #e9ecef; --bs-list-group-action-active-color: #212529;
}
.search-suggestions .text-body-secondary { color: #6c757d !important; }
.search-suggestions .list-group-item-action { padding-top: .6rem; padding-bottom: .6rem; }
/* The single selected suggestion, moved by both the mouse and the arrow keys (hover adds no second
   highlight). Own class: Bootstrap's .active also changes border and margin, resizing the list. */
.search-suggestions .list-group-item-action.is-active { background: #cfe2ff; color: #052c65; }
.search-suggestions mark { padding: 0; background: rgba(var(--bs-warning-rgb), .35); color: inherit; border-radius: .15rem; }
.search-symbol { font-weight: 700; min-width: 4.5rem; font-variant-numeric: tabular-nums; }
/* Phones: drop the price (the % change stays) and narrow the ticker column, so names stay readable. */
@media (max-width: 575.98px) {
  .search-suggestions .search-price { display: none; }
  .search-symbol { min-width: 3.25rem; }
}

/* "Searching…" row with an Android (Material Design) circular spinner: an arc that grows and
   shrinks while the whole circle rotates. */
.search-loading { display: flex; align-items: center; gap: .75rem; color: #6c757d; }
.md-spinner { width: 28px; height: 28px; flex: none; animation: md-rotate 1.4s linear infinite; }
.md-spinner circle { fill: none; stroke: #1a73e8; stroke-width: 4.5; stroke-linecap: round; animation: md-dash 1.4s ease-in-out infinite; }
@keyframes md-rotate { to { transform: rotate(360deg); } }
@keyframes md-dash {
  0%   { stroke-dasharray: 1, 150;  stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

/* ---- Company card -------------------------------------------------------------------------- */
.company-card { position: relative; animation: card-in .18s ease-out; }
@keyframes card-in { from { opacity: 0; transform: translateY(-4px); } }
/* Ticker, name and sector/industry fill exactly the height of the 72px logo tile: first line at
   the top of the logo, last line at its bottom. Each line stays on one line (long text ends with
   "…", full text on hover), so the block keeps its height on narrow phones too. */
.company-heading { display: flex; flex-direction: column; justify-content: space-between; height: 72px; min-width: 0; }
.company-symbol { font-size: 1.3rem; font-weight: 800; letter-spacing: .02em; line-height: 1.1; }
.company-heading .badge { font-size: .6rem; }
.company-name { font-size: 1rem; line-height: 1.2; }
.company-price { font-size: 2.2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.min-w-0 { min-width: 0; }

/* Company logo: shown as it is, with nothing behind it. One-color logos (black silhouettes) turn white
   in dark mode. The gray square is only for the initials, when there's no logo. */
.logo-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; }
.logo-tile img { width: 100%; height: 100%; object-fit: contain; }
[data-bs-theme=dark] .logo-tile img.logo-mono { filter: invert(1); }
[data-bs-theme=light] .logo-tile img.logo-faint-light { background: #3c4048; padding: 8%; }
[data-bs-theme=dark] .logo-tile img.logo-faint-dark { background: #f0f2f6; padding: 8%; }
.logo-tile:has(.logo-initials) { background: var(--bs-secondary-bg); }
.logo-sm { width: 36px; height: 36px; }
.logo-lg { width: 72px; height: 72px; }
.logo-initials { color: var(--bs-secondary-color); font-weight: 700; letter-spacing: .02em; }
.logo-sm .logo-initials { font-size: .8rem; }
.logo-lg .logo-initials { font-size: 1.5rem; }

/* ---- Stock searches page ----------------------------------------------------------------- */
/* What the player typed: wraps between words only (never mid-word), and very long words still fit. */
.search-query { min-width: 8rem; word-break: normal; overflow-wrap: break-word; }

/* ---- Runs page ----------------------------------------------------------------------------- */
.run-message { min-width: 14rem; max-width: 32rem; }