/* ===== Page: Terminal (layout + controls) ===== */
:root {
  --container-w: 1400px;
  --gutter: 16px;
  --header-h: 61px;
}

/* Navbar like other pages */
.navbar-component {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

.navbar-component .container {
  width: min(var(--container-w), 100% - calc(2 * var(--gutter)));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* компенсуємо fixed header */
body { padding-top: var(--header-h); }

/* контент тягнеться, щоб футер був внизу */
.terminal-page {
  flex: 1;
  width: min(var(--container-w), 100% - calc(2 * var(--gutter)));
  margin-inline: auto;
  padding: 18px var(--gutter);
}

/* Footer container width like other pages */
.footer-component .container {
  width: min(var(--container-w), 100% - calc(2 * var(--gutter)));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ===== Controls ===== */
.terminal-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 12px 0 14px;
}

.terminal-control {
  display: flex;
}

.terminal-control select {
  min-width: 220px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.25);
  color: #fff;
  padding: 0 10px;
}

.terminal-tf {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.tf-btn {
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.25);
  color: #fff;
  cursor: pointer;
}

.tf-btn.active {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
}

/* ===== Maximize chart (in-page) ===== */
body.terminal-maximized .terminal-page {
  /* розширюємо контейнер на максимум у межах сторінки */
  width: calc(100% - calc(2 * var(--gutter)));
  max-width: none;
}