/* ─────────────────────────────────────────────────────────────────────────────
   SIP GLOBAL — Markets terminal (light)
───────────────────────────────────────────────────────────────────────────── */

.term {
  background    : var(--term-bg);
  color         : var(--term-text);
  min-height    : 100vh;
  display       : flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}

.term__bar {
  display        : flex;
  align-items    : center;
  gap            : var(--space-md);
  padding        : 10px var(--space-md);
  background     : var(--term-header);
  font-size      : var(--text-xs);
  letter-spacing : 0.1em;
  text-transform : uppercase;
  color          : var(--color-white);
  position       : sticky;
  top            : 0;
  z-index        : 20;
}

.term__brand {
  font-weight    : var(--weight-bold);
  color          : var(--color-white);
  text-decoration: none;
}

.term__brand:hover { color: var(--color-blue-bright); }

.term__bar-spacer { flex: 1; }

.term__meta,
.term__clock {
  color: rgba(255, 255, 255, 0.62);
}

.term__bar-link {
  color          : rgba(255, 255, 255, 0.72);
  text-decoration: none;
  letter-spacing : 0.1em;
}

.term__bar-link:hover { color: var(--color-white); }

/* Toolbar -------------------------------------------------------------------- */

.term__toolbar {
  display      : flex;
  flex-wrap    : wrap;
  gap          : var(--space-xs);
  align-items  : center;
  padding      : var(--space-xs) var(--space-md);
  background   : var(--term-surface);
  border-bottom: 1px solid var(--term-border);
}

.term__search {
  flex        : 1 1 300px;
  display     : flex;
  align-items : center;
  gap         : 8px;
  background  : var(--color-white);
  border      : 1px solid var(--term-border);
  padding     : 0 10px;
  height      : 36px;
}

.term__prompt {
  color      : var(--term-accent);
  font-weight: var(--weight-bold);
  font-size  : var(--text-sm);
}

.term__search input {
  flex       : 1;
  background : transparent;
  border     : none;
  outline    : none;
  color      : var(--term-text);
  font-family: inherit;
  font-size  : var(--text-sm);
  height     : 100%;
}

.term__search input::placeholder { color: var(--term-text-dim); }

.cat-filter { position: relative; }

.cat-filter__toggle {
  height        : 36px;
  padding       : 0 12px;
  background    : var(--color-white);
  border        : 1px solid var(--term-border);
  color         : var(--term-text-dim);
  font-family   : inherit;
  font-size     : var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor        : pointer;
  display       : inline-flex;
  align-items   : center;
  gap           : 8px;
  white-space   : nowrap;
}

.cat-filter__toggle:hover,
.cat-filter.is-open .cat-filter__toggle {
  color       : var(--term-accent);
  border-color: var(--term-accent);
}

.cat-filter__panel {
  display   : none;
  position  : absolute;
  z-index   : 40;
  top       : calc(100% + 2px);
  left      : 0;
  min-width : 240px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-white);
  border    : 1px solid var(--term-border);
  padding   : 8px;
}

.cat-filter.is-open .cat-filter__panel { display: block; }

.cat-filter__option {
  display    : flex;
  align-items: center;
  gap        : 8px;
  padding    : 5px 6px;
  font-size  : var(--text-xs);
  color      : var(--term-text);
  cursor     : pointer;
}

.cat-filter__option:hover { background: var(--term-accent-soft); }

.cat-filter__option input { accent-color: var(--term-accent); }

.cat-filter__clear {
  width         : 100%;
  margin-top    : 6px;
  padding       : 6px;
  background    : transparent;
  border        : 1px solid var(--term-border);
  color         : var(--term-text-dim);
  font-family   : inherit;
  font-size     : var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor        : pointer;
}

.cat-filter__clear:hover { color: var(--term-accent); border-color: var(--term-accent); }

/* Grid ----------------------------------------------------------------------- */

.term__cols,
.tg-row {
  display              : grid;
  grid-template-columns: 190px 150px minmax(180px, 1.4fr) minmax(160px, 1fr) 110px 28px;
  gap                  : var(--space-md);
  align-items          : center;
  padding              : 0 var(--space-md);
}

.term__cols {
  height        : 30px;
  background    : var(--term-surface);
  border-bottom : 1px solid var(--term-border);
  font-size     : var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color         : var(--term-text-dim);
  position      : sticky;
  top           : 0;
  z-index       : 5;
}

.term__body {
  flex      : 1;
  overflow-y: auto;
  background: var(--term-bg);
}

.tg-group {
  padding       : 6px var(--space-md);
  background    : var(--term-surface);
  border-top    : 1px solid var(--term-border);
  border-bottom : 1px solid var(--term-border);
  font-size     : var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color         : var(--term-text-dim);
}

.tg-row {
  height        : 34px;
  border-bottom : 1px solid var(--term-border);
  color         : var(--term-text);
  font-size     : var(--text-sm);
  text-decoration: none;
  cursor        : pointer;
}

.tg-row:hover {
  background: var(--term-accent-soft);
  color     : var(--color-black);
}

.tg-row > span {
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
}

.tg-sym {
  color         : var(--term-accent);
  font-weight   : var(--weight-semibold);
  font-size     : var(--text-xs);
  letter-spacing: 0.04em;
}

.tg-loc { color: var(--term-text-dim); }

.tg-state {
  font-size     : var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color         : var(--term-text-dim);
}

.tg-ext {
  color     : var(--term-text-dim);
  text-align: right;
  font-size : var(--text-sm);
}

.tg-row:hover .tg-ext { color: var(--term-accent); }

.cat-loading,
.cat-no-match {
  padding  : var(--space-lg) var(--space-md);
  color    : var(--term-text-dim);
  font-size: var(--text-sm);
}

.cat-no-match__primary { color: var(--term-text); margin-bottom: var(--space-xs); }
.cat-no-match a { color: var(--term-accent); }

/* Status line ---------------------------------------------------------------- */

.term__status {
  display      : flex;
  flex-wrap    : wrap;
  gap          : var(--space-md);
  padding      : 8px var(--space-md);
  background   : var(--term-surface);
  border-top   : 1px solid var(--term-border);
  font-size    : var(--text-xs);
  color        : var(--term-text-dim);
}

.term__status a { color: var(--term-accent); }

.term__status kbd {
  border      : 1px solid var(--term-border);
  padding     : 1px 5px;
  color       : var(--term-text);
  font-family : inherit;
}

/* Layout section inside the terminal ----------------------------------------- */

.term .markets-layout-section {
  min-height     : 0;
  padding        : 0;
  background     : var(--term-bg);
  color          : var(--term-text);
  flex           : 1;
  display        : flex;
  flex-direction : column;
  justify-content: flex-start;
}

/* Market detail inside the terminal ------------------------------------------ */

.term .spec-wrap {
  flex   : 1;
  padding: 0;
  min-height: 0;
  background: var(--term-bg);
}

.term__back {
  display        : inline-flex;
  align-items    : center;
  gap            : 8px;
  padding        : 8px var(--space-md);
  background     : var(--term-surface);
  border-bottom  : 1px solid var(--term-border);
  width          : 100%;
  font-size      : var(--text-xs);
  letter-spacing : 0.1em;
  text-transform : uppercase;
  color          : var(--term-text-dim);
  text-decoration: none;
  font-family    : inherit;
  cursor         : pointer;
}

.term__back:hover { color: var(--term-accent); }

.term .mkt-detail {
  display              : grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items          : start;
  max-width            : none;
  margin               : 0;
  padding              : 0;
  gap                  : 0;
}

.term .mkt-sidebar {
  position     : sticky;
  top          : 46px;
  background   : var(--term-surface);
  border-right : 1px solid var(--term-border);
  border-radius: 0;
  box-shadow   : none;
  padding      : var(--space-md);
}

.term .mkt-content {
  padding: var(--space-md) var(--space-lg);
  max-width: 880px;
}

.term .mkt-content__heading {
  font-size     : var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color         : var(--term-text-dim);
  border-bottom : 1px solid var(--term-border);
  padding-bottom: 6px;
  margin        : var(--space-lg) 0 var(--space-sm);
}

.term .mkt-content__heading:first-child { margin-top: 0; }

.term .spec-table,
.term .tenor-table { border-color: var(--term-border); }

.term .spec-table td,
.term .spec-table th,
.term .tenor-table td,
.term .tenor-table th {
  border-color: var(--term-border);
  font-size   : var(--text-sm);
}


.term .mkt-price-value--state,
.term .mkt-share__btn:hover { color: var(--term-accent); }

@media (max-width: 900px) {
  .term__cols { display: none; }

  .tg-row {
    grid-template-columns: 1fr auto;
    gap    : 2px var(--space-sm);
    height : auto;
    padding: 10px var(--space-md);
  }

  .tg-sym   { grid-column: 1; }
  .tg-ext   { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .tg-cmdty { grid-column: 1; color: var(--term-text-dim); font-size: var(--text-xs); }
  .tg-grade { grid-column: 1; }
  .tg-loc   { grid-column: 1; font-size: var(--text-xs); }
  .tg-state { grid-column: 1; }

  .term__toolbar {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : var(--space-xs);
  }
  .term__search { grid-column: 1 / -1; }
  .term .cat-filter,
  .term .cat-filter__toggle { width: 100%; }

  .term .mkt-detail { grid-template-columns: 1fr; }
  .term .mkt-sidebar {
    position     : static;
    border-right : none;
    border-bottom: 1px solid var(--term-border);
  }
  .term .mkt-content { padding: var(--space-md); }
}

.term .mkt-sidebar__meta {
  grid-template-columns: 1fr;
  gap                  : 0 0;
}

.term .mkt-meta-label { margin-top: var(--space-xs); }

.term .mkt-meta-value { text-align: left; }

.term .mkt-price-row {
  display              : grid;
  grid-template-columns: 1fr;
  gap                  : 0;
}

.term .mkt-price-value {
  text-align : left;
  margin-left: 0;
}

.term .mkt-sidebar { border: none; }


.tg-group__hub {
  margin-left    : var(--space-xs);
  color          : var(--term-accent);
  text-decoration: none;
  letter-spacing : 0.1em;
}

.tg-group__hub:hover { text-decoration: underline; }