/* Deep ITM overnight: additions on top of qqq-call-put.css and call-put-overnight.css, whose qcp-* / cpo-* layout the
   page reuses; colours come from the site's Metronic tokens (--tw-*), so both themes follow. */

/* the year tabs under the symbol tabs; a year without a snapshot yet is greyed */
.dio-page .dio-years { margin-top: -14px; gap: 0 1rem; }
.dio-page .qcp-symbols { row-gap: 0; }   /* ten symbols wrap on phones */
.dio-page .dio-years .tab { padding: .7rem 0; font-variant-numeric: tabular-nums; }
.dio-page .dio-years .tab.dio-unbuilt { color: var(--tw-gray-500); }
.dio-page .dio-years .tab.dio-unbuilt:hover, .dio-page .dio-years .tab.dio-unbuilt:focus { color: var(--tw-gray-700); }
.dio-page .dio-years .tab.dio-unbuilt.active { color: var(--tw-primary); }

/* form: the longer option texts */
.dio-page .ls-controls select[name="basis"], .dio-page .ls-controls select[name="fb"], .dio-page .ls-controls select[name="ex"] { min-width: 215px; }
.dio-page .ls-controls select[name="tol"] { min-width: 110px; }
@media (max-width: 720px) {
  .dio-page .ls-controls select[name="basis"], .dio-page .ls-controls select[name="fb"], .dio-page .ls-controls select[name="ex"],
  .dio-page .ls-controls select[name="tol"] { min-width: 0; }
}

/* eight KPI cards: two rows of four, two columns on phones */
.dio-page .ls-kpis, body:not(.sidebar-collapse) .dio-page .ls-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .dio-page .ls-kpis, body:not(.sidebar-collapse) .dio-page .ls-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the sort and CSV on one row */
.dio-page .qcp-days-tools .select { width: auto; }
/* a leg bought as the nearest to the price, when no strike fitted the formula */
.dio-page .qcp-days small.dio-near { margin-top: 4px; }
.dio-page .ls-detail-box .dio-expiry { margin: -4px 0 10px; font-size: 12px; }
.dio-page .ls-detail-box p small { margin-top: 1px; }

/* the notice shown instead of the tool while a year is not built */
.dio-empty h2 { margin-bottom: 4px; color: var(--tw-gray-900); }
.dio-empty a { font-weight: 600; }