/* static/css/page_terminal.css */

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

  /* Висота navbar (компенсація, бо navbar fixed) */
  --header-h: 61px;

  /* Відступ між графіком і футером (базово норм на 32") */
  --terminal-footer-gap: 13px;
}

/* === 1) Navbar: fixed + 100% ширина (фон), але контент як на Cycle (центрований контейнер) === */
.navbar-component{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
}

/* Внутрішній контейнер navbar — СТРОГО як на Cycle: по центру, з gutter */
.navbar-component .container{
  width: min(var(--container-w), 100% - calc(2 * var(--gutter)));
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

/* Компенсуємо fixed header, щоб контент не залазив під нього */
body{
  padding-top: var(--header-h);
}

/* ===== Terminal сторінка: flex, щоб графік міг займати “весь залишок” ===== */
html, body{
  height: 100%;
}

#app{
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
}

/* Основний контейнер сторінки */
.terminal-page{
  flex: 1;

  width: min(var(--container-w), 100% - calc(2 * var(--gutter)));
  margin-inline: auto;
  padding: 18px var(--gutter) 0;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  /* важливо для коректного флексу (без “зайвого півскролу”) */
  min-height: 0;
}

/* ===== 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;
  box-sizing: border-box;
}

.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);
}

/* ===== Max mode (в межах сторінки) ===== */
body.terminal-maximized .terminal-page{
  width: calc(100% - calc(2 * var(--gutter)));
  max-width: none;
}

/* ===== 2) Footer: НЕ fixed. Просто повертаємо контейнер як на Cycle ===== */
.footer-component{
  width: 100%;
}

/* Контейнер футера — як на Cycle: по центру, з gutter */
.footer-component .container{
  width: min(var(--container-w), 100% - calc(2 * var(--gutter)));
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

/* Відступ між графіком і футером (керований) */
.terminal-chart-wrap{
  flex: 1;
  min-height: 0;
  margin-bottom: var(--terminal-footer-gap);
}

/* На всяк випадок: якщо у component_footer є margin-top — вирівнюємо його нашим значенням */
.footer-component .site-footer{
  margin-top: var(--terminal-footer-gap) !important;
}

/* ===== Laptop: зменшуємо gap, щоб графік став вищим ===== */
@media (max-height: 900px){
  :root{
    --terminal-footer-gap: 6px;
  }
}