/* ==========================================================================
   TERMINAL SKIN — amber-on-black market terminal aesthetic.
   Layered over Bootstrap 5 (dark mode); overrides its variables globally.
   ========================================================================== */

:root, [data-bs-theme="dark"] {
  --t-bg: #000000;
  --t-panel: #0a0a0a;
  --t-panel-head: #131313;
  --t-border: #2b2b2b;
  --t-amber: #ffa028;
  --t-amber-bright: #ffc15e;
  --t-amber-dim: #8a5e1a;
  --t-text: #d6d2c4;
  --t-dim: #8f8a7e;
  --t-green: #2be2a4;
  --t-red: #ff4d40;
  --t-cyan: #45c8e8;
  --t-yellow: #ffe23b;

  --bs-body-bg: var(--t-bg);
  --bs-body-color: var(--t-text);
  --bs-secondary-color: var(--t-dim);
  --bs-tertiary-bg: var(--t-bg);
  --bs-secondary-bg: #161616;
  --bs-border-color: var(--t-border);
  --bs-link-color: var(--t-amber);
  --bs-link-hover-color: var(--t-amber-bright);
  --bs-link-color-rgb: 255, 160, 40;
  --bs-link-hover-color-rgb: 255, 193, 94;
  --bs-emphasis-color: #ffffff;
  --bs-font-monospace: "IBM Plex Mono", "Consolas", monospace;
  --bs-body-font-family: "IBM Plex Mono", "Consolas", monospace;
  --bs-body-font-size: 0.8125rem;
}

body {
  background:
    radial-gradient(ellipse at top, rgba(255, 160, 40, 0.03), transparent 60%),
    var(--t-bg);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

::selection { background: var(--t-amber); color: #000; }

/* --- Scanline atmosphere (very subtle) --------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  background: repeating-linear-gradient(
    0deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* --- Navbar ------------------------------------------------------------- */
.navbar {
  background: #000 !important;
  border-bottom: 1px solid var(--t-amber-dim) !important;
}
.navbar .navbar-brand {
  color: #000 !important;
  background: var(--t-amber);
  padding: 0.1rem 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.navbar .nav-link {
  color: var(--t-dim) !important;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--t-amber) !important; }
.navbar .form-control {
  background: #101000;
  border: 1px solid var(--t-amber-dim);
  border-radius: 0;
  color: var(--t-amber-bright);
  caret-color: var(--t-amber);
}
.navbar .form-control::placeholder { color: var(--t-amber-dim); }
.navbar .form-control:focus {
  background: #161200;
  border-color: var(--t-amber);
  box-shadow: 0 0 0 0.15rem rgba(255, 160, 40, 0.15);
  color: var(--t-amber-bright);
}

/* --- Ticker tape --------------------------------------------------------- */
.tape {
  overflow: hidden;
  white-space: nowrap;
  background: #050505;
  border-bottom: 1px solid var(--t-border);
  font-size: 0.72rem;
  user-select: none;
}
.tape-track {
  display: inline-block;
  padding: 0.28rem 0;
  animation: tape-scroll 60s linear infinite;
}
.tape:hover .tape-track { animation-play-state: paused; }
.tape-item { margin-right: 2.2rem; }
.tape-item .code { color: var(--t-amber); font-weight: 600; }
.tape-item .px { color: var(--t-text); }
@keyframes tape-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- Panels (cards) ------------------------------------------------------ */
.card {
  background: var(--t-panel);
  border: 1px solid var(--t-border);
  border-radius: 0;
  box-shadow: none !important;
}
.card-header {
  background: var(--t-panel-head) !important;
  border-bottom: 1px solid var(--t-border);
  border-radius: 0 !important;
  color: var(--t-amber) !important;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.card-header .text-body-secondary { text-transform: none; letter-spacing: 0.02em; }
.card-header i { color: var(--t-amber-dim); }

h1, h2, h3, .h3, .h4, .h6 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
h1 .text-body-secondary, .h3 .text-body-secondary { text-transform: none; }

/* --- Tables -------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--t-text);
  --bs-table-border-color: #1d1d1d;
  --bs-table-hover-bg: rgba(255, 160, 40, 0.07);
  --bs-table-hover-color: #fff;
  font-size: 0.78rem;
}
.table thead th {
  color: var(--t-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  border-bottom: 1px solid var(--t-amber-dim) !important;
}
.table a { color: var(--t-cyan); text-decoration: none; }
.table a:hover { color: #fff; text-decoration: underline; }
.list-group-item {
  background: transparent;
  color: var(--t-text);
  border-color: #1d1d1d;
  font-size: 0.78rem;
}

/* --- Badges / score pills ------------------------------------------------ */
.badge {
  border-radius: 0;
  font-weight: 600;
  font-family: var(--bs-font-monospace);
}
.badge.text-bg-success { background: transparent !important; color: var(--t-green) !important; border: 1px solid var(--t-green); }
.badge.text-bg-primary { background: transparent !important; color: var(--t-cyan) !important; border: 1px solid var(--t-cyan); }
.badge.text-bg-warning { background: transparent !important; color: var(--t-yellow) !important; border: 1px solid var(--t-yellow); }
.badge.text-bg-danger  { background: transparent !important; color: var(--t-red) !important; border: 1px solid var(--t-red); }
.badge.text-bg-secondary { background: transparent !important; color: var(--t-dim) !important; border: 1px solid var(--t-border); }

.text-success { color: var(--t-green) !important; }
.text-danger { color: var(--t-red) !important; }
.text-warning { color: var(--t-yellow) !important; }
.text-primary { color: var(--t-cyan) !important; }

/* --- Buttons ------------------------------------------------------------- */
.btn { border-radius: 0; font-family: var(--bs-font-monospace);
       text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; }
.btn-primary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-success {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--t-amber);
  --bs-btn-border-color: var(--t-amber-dim);
  --bs-btn-hover-bg: var(--t-amber);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-border-color: var(--t-amber);
  --bs-btn-active-bg: var(--t-amber-bright);
  --bs-btn-active-color: #000;
  --bs-btn-active-border-color: var(--t-amber-bright);
}
.btn-warning, .btn-outline-warning {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--t-yellow);
  --bs-btn-border-color: var(--t-yellow);
  --bs-btn-hover-bg: var(--t-yellow);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-border-color: var(--t-yellow);
}
.btn-warning { --bs-btn-bg: var(--t-yellow); --bs-btn-color: #000; }
.btn-group-sm .btn.active {
  background: var(--t-amber);
  color: #000;
  border-color: var(--t-amber);
}

/* --- Forms --------------------------------------------------------------- */
.form-control, .form-select {
  background: #0d0d0d;
  border: 1px solid var(--t-border);
  border-radius: 0;
  color: var(--t-text);
}
.form-control:focus, .form-select:focus {
  background: #101010;
  border-color: var(--t-amber);
  box-shadow: 0 0 0 0.15rem rgba(255, 160, 40, 0.15);
  color: #fff;
}
.form-label { color: var(--t-dim); text-transform: uppercase;
              font-size: 0.62rem !important; letter-spacing: 0.1em; }

/* --- Metric cards -------------------------------------------------------- */
.metric-card .metric-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--t-amber-dim);
}
.metric-card .metric-value { font-size: 0.95rem; font-weight: 600; color: #fff; }

.score-pill { min-width: 3.2rem; text-align: center; }

.table-screener td, .table-screener th { white-space: nowrap; }

.sort-link { text-decoration: none; color: inherit; }
.sort-link:hover { color: var(--t-amber); }

/* --- Company description fade ------------------------------------------- */
.company-description { max-height: 9.5rem; overflow: hidden; position: relative; }
.company-description.expanded { max-height: none; }
.company-description:not(.expanded)::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3rem;
  background: linear-gradient(transparent, var(--t-panel));
}

/* --- Factor bars --------------------------------------------------------- */
.factor-bar { height: 5px; border-radius: 0; background: #191919; overflow: hidden; }
.factor-bar > div { height: 100%; }
.factor-bar .bg-success { background: var(--t-green) !important; }
.factor-bar .bg-primary { background: var(--t-cyan) !important; }
.factor-bar .bg-warning { background: var(--t-yellow) !important; }
.factor-bar .bg-danger { background: var(--t-red) !important; }

/* --- Hover explanations --------------------------------------------------- */
.explain {
  cursor: help;
  text-decoration: underline dotted var(--t-amber-dim);
  text-underline-offset: 3px;
}
.tooltip .tooltip-inner {
  background: #141414;
  color: var(--t-text);
  border: 1px solid var(--t-amber-dim);
  border-radius: 0;
  font-family: var(--bs-font-monospace);
  font-size: 0.7rem;
  max-width: 22rem;
  text-align: left;
}

/* --- Dynamic behaviour (HTMX) -------------------------------------------- */
.htmx-indicator { opacity: 0; transition: opacity 0.2s ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-swapping { opacity: 0.4; transition: opacity 0.15s ease-out; }
.htmx-settling { animation: settle-flash 0.6s ease-out; }
@keyframes settle-flash {
  from { box-shadow: inset 0 0 0 100vmax rgba(255, 160, 40, 0.05); }
  to { box-shadow: inset 0 0 0 100vmax transparent; }
}

/* Sticky table headers inside scrollable panels */
.table-sticky { overflow-y: auto; }
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--t-panel);
  box-shadow: 0 1px 0 var(--t-amber-dim);
}

/* --- Responsive adaptation ------------------------------------------------ */
html { scrollbar-color: var(--t-amber-dim) #101010; }

@media (max-width: 991px) {
  :root, [data-bs-theme="dark"] { --bs-body-font-size: 0.78rem; }
  .metric-card .metric-value { font-size: 0.85rem; }
  h1, .h3 { font-size: 1.15rem; }
  .card-header { font-size: 0.66rem; }
}

@media (max-width: 575px) {
  .tape { font-size: 0.64rem; }
  .table { font-size: 0.7rem; }
  .table td, .table th { padding: 0.2rem 0.3rem; }
  main.container-xxl { padding-left: 0.6rem; padding-right: 0.6rem; }
  .fs-3 { font-size: 1.2rem !important; }
  .btn-group-sm .btn { padding: 0.15rem 0.35rem; font-size: 0.62rem; }
}

/* Wide monitors: Bootstrap caps .container-xxl at 1320px, which leaves broad
   empty bands either side on a large screen. This is a data terminal — let it
   breathe out to the edges instead, with padding rather than dead space. */
@media (min-width: 1400px) {
  .container-xxl {
    max-width: none;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 2000px) {
  .container-xxl { padding-left: 3rem; padding-right: 3rem; }
  :root, [data-bs-theme="dark"] { --bs-body-font-size: 0.86rem; }
  .table { font-size: 0.82rem; }
}

/* Keep long prose readable even when the shell is very wide */
main.container-xxl > p,
main.container-xxl > .row > [class^="col"] > p.text-body-secondary {
  max-width: 90ch;
}

/* --- Alerts / pagination / footer ---------------------------------------- */
.alert { border-radius: 0; background: #101010; border: 1px solid var(--t-border); color: var(--t-text); }
.alert-info { border-left: 3px solid var(--t-cyan); }
.alert-secondary { border-left: 3px solid var(--t-dim); }
.alert-danger { border-left: 3px solid var(--t-red); }
.pagination { --bs-pagination-border-radius: 0; }
.page-link {
  background: transparent;
  border-color: var(--t-border);
  color: var(--t-amber);
}
.page-item.disabled .page-link { background: transparent; color: var(--t-dim); }
footer { border-color: var(--t-border) !important; font-size: 0.7rem; }