/* Shared visual language for the predictor / strategy / optimization / simulation
   detail pages: hero header with chips, stat tiles, pill gates, clean tables. */

.detail-hero { margin-bottom: 1.25rem; }
.detail-hero h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.detail-hero .hero-desc { color: #6e7684; max-width: 72ch; margin-bottom: 0; }
.hero-chips { display: inline-flex; flex-wrap: wrap; gap: .35rem; vertical-align: middle; }
.hero-chips .badge { font-size: .72rem; font-weight: 600; padding: .45em .7em; border-radius: 999px; }

.stat-tile { border: 0; box-shadow: 0 1px 3px rgba(18, 38, 63, .08); border-radius: .75rem; height: 100%; }
.stat-tile .card-body { padding: .9rem 1.1rem; }
.stat-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #8a93a2; margin-bottom: .15rem; }
.stat-value { font-size: 1.35rem; font-weight: 700; line-height: 1.15; margin-bottom: 0; }
.stat-sub { font-size: .75rem; color: #8a93a2; }
.stat-pos { color: #10893e; }
.stat-neg { color: #c0392b; }

.detail-card { border: 0; box-shadow: 0 1px 3px rgba(18, 38, 63, .08); border-radius: .75rem; }
.detail-card > .card-header { background: transparent; border-bottom: 1px solid #eef1f5; padding: .85rem 1.25rem; }
.detail-card > .card-header h5 { margin: 0; font-size: .95rem; font-weight: 700; }

.kv-list { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: .3rem; font-size: .85rem; }
.kv-list dt { color: #8a93a2; font-weight: 500; white-space: nowrap; }
.kv-list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.param-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #8a93a2;
                 margin: .9rem 0 .35rem; border-bottom: 1px solid #eef1f5; padding-bottom: .2rem; }
.param-section:first-child { margin-top: 0; }

.gate-pills { display: flex; flex-wrap: wrap; gap: .25rem; }
.gate-pill { display: inline-block; min-width: 1.9rem; text-align: center; padding: .12rem .3rem;
             border-radius: 999px; font-size: .7rem; font-weight: 600;
             background: #e9edf2; color: #aab2bf; }
.gate-pill.on { background: #d9efe2; color: #10893e; }

.table-clean { font-size: .84rem; }
.table-clean thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
                        color: #8a93a2; border-bottom-width: 1px; white-space: nowrap; }
.table-clean td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.table-clean tbody tr:hover { background: #f7f9fb; }

.status-badge { font-size: .7rem; font-weight: 600; border-radius: 999px; padding: .35em .7em; }

/* ---- List pages (predictors / strategies / symbols / signals / optimizations / slots) ---- */

.table-clean .cell-sub { display: block; font-size: .72rem; color: #8a93a2; font-weight: 400; }
.table-clean td .form-select-sm, .table-clean td .form-control-sm { font-size: .8rem; }

/* DataTables (v2) controls, restyled to match the cards they live in */
.detail-card .dt-container { font-size: .84rem; }
.detail-card .dt-container .dt-search input,
.detail-card .dt-container .dt-length select {
  border: 1px solid #e3e8ee; border-radius: .5rem; padding: .3rem .6rem; font-size: .8rem; background: #fff; }
.detail-card .dt-container .dt-search input:focus {
  outline: none; border-color: #9fb6d4; box-shadow: 0 0 0 3px rgba(38, 107, 193, .12); }
.detail-card .dt-container .dt-info { color: #8a93a2; font-size: .75rem; padding-top: .6rem; }
.detail-card .dt-container .dt-paging .dt-paging-button { border-radius: .5rem; font-size: .8rem; }
.detail-card .dt-buttons .dt-button {
  border: 1px solid #e3e8ee; border-radius: .5rem; background: #fff; font-size: .75rem; padding: .3rem .7rem; }
.detail-card .dt-buttons .dt-button:hover { background: #f0f4f8; border-color: #d5dde6; }
.detail-card .dt-container table.dataTable { margin-top: .5rem; }

/* Searchable picker (combobox): text input filters a dropdown of options.
   The menu is position:fixed and placed by JS from the input's rect, so it
   escapes the table's horizontal-scroll container instead of being clipped by it. */
.searchable-picker { position: relative; min-width: 13rem; }
.searchable-picker .picker-menu {
  position: fixed; z-index: 1080;
  background: #fff; border: 1px solid #e3e8ee; border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(18, 38, 63, .15); max-height: 16rem; overflow-y: auto; display: none; }
.searchable-picker.open .picker-menu { display: block; }
.picker-option { padding: .4rem .7rem; cursor: pointer; font-size: .8rem; line-height: 1.25; }
.picker-option .picker-sub { display: block; font-size: .7rem; color: #8a93a2; }
.picker-option:hover, .picker-option.active-option { background: #f0f4f8; }
.picker-option.selected { font-weight: 700; }
.picker-empty { padding: .5rem .7rem; color: #8a93a2; font-size: .78rem; }