/* ===== Page: Cycle (layout only) ===== */
:root {
  --container-w: 1400px;
  --gutter: 16px;
  --header-h: 61px; /* поточна висота хедера */
}

/* Хедер фіксований угорі (компонент лишається "чистим") */
.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);
}

/* Відштовхуємо контент від фіксованого хедера */
body { padding-top: var(--header-h); }

/* Головний контент тягнеться, футер при дні */
.page-main { flex: 1; }

/* Центрування й ширина ключових секцій цієї сторінки */
.controls-panel,
.cards-wrapper,
.price-strip-container,
.table-active-orders-component,
.table-open-positions-component,
.page-main,
.page-section,
.page-footer {
  width: min(var(--container-w), 100% - calc(2 * var(--gutter)));
  margin-inline: auto;
}

/* Панель селектів одразу під хедером */
.controls-panel {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Слот під кнопки (до 6 місць) у компоненті: якщо порожній — не займає місця */
.controls-panel .strategy-selector-panel:empty { display: none; }

/* “Випадні” панелі: за замовчуванням приховані (JS відкриває) */
.cards-wrapper,
.price-strip-container {
  display: none;
  margin-top: var(--gutter);
}

/* Футер (плейсхолдер) */
.page-footer { margin: 24px auto; }

/* Футер-компонент: внутрішній контейнер 1400px */
.footer-component .container {
  width: min(var(--container-w), 100% - calc(2 * var(--gutter)));
  margin-inline: auto;
  padding-inline: var(--gutter);
}