/* Home-page table cards use a bare .overflow-auto wrapper (not
   .component-body's own 24px/20px padding), so table content -- and
   DataTables' search/length controls on tables that have them -- sat flush
   against the colored component-header with no breathing room. */
.component-card > .overflow-auto {
    padding: 16px 16px 4px;
}
.component-card > .overflow-auto .dataTables_wrapper > .row:first-child {
    margin-bottom: 14px;
}

.sector-snap-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sector-snap-row {
    display: grid;
    grid-template-columns: 180px 1fr 72px;
    align-items: center;
    gap: 10px;
}
.sector-snap-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--navy-mid);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sector-snap-name:hover { color: var(--amber); }
.sector-snap-track {
    position: relative;
    height: 10px;
    background: #f0f2f5;
    border-radius: 99px;
    overflow: hidden;
}
.sector-snap-bar {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 99px;
    width: 0;
    transition: width .6s ease;
}
.sector-snap-bar.pos { background: linear-gradient(90deg, #28a745, #48d368); left: 50%; }
.sector-snap-bar.neg { background: linear-gradient(90deg, #e84040, #dc3545); right: 50%; }
.sector-snap-pct {
    font-size: .82rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}
@media (max-width: 576px) {
    .sector-snap-row { grid-template-columns: 130px 1fr 62px; }
}

/* Home page DataTables (Most Active, Top Gainers, Biggest Decliners, Top
   Crypto, Recently Delisted) — same white/bold header on navy gradient as
   the "Latest price targets" table (#dtBasicExample in style.css).
   No padding-top here (unlike #dtBasicExample): these tables render with
   dom: 't' (no search/length toolbar above them), so top padding just
   left an empty gap between the colored section header and the navy
   thead instead of separating it from a toolbar that no longer exists. */
.home-dt thead {
    color: #fff;
    font-weight: 700;
    background-image: linear-gradient(var(--navy-deep), var(--navy-mid));
    border-bottom: 2px solid var(--navy-mid) !important;
}
.home-dt th {
    font-size: 15px;
    font-weight: 700;
    vertical-align: middle;
}
.home-dt tr {
    text-align: left;
    vertical-align: middle;
}