/* Оболочка приложения: хедер, лента состояний, рабочая область из панелей
   и общий вокабуляр элементов — метки, кнопки, чипы, полосы, заглушки
   картинок. Каркас один на все экраны (записка, раздел 3; Style Guide,
   разделы 1 и 6). Размеры — с листов макета, цвета и шрифты — только
   токенами дизайн-системы. */

html,body{height:100%}
body{overflow-x:auto}

.app{
  height:100%;
  min-width:1560px; /* Style Guide: рабочий экран 1920×1080, минимум 1560 */
  display:flex;
  flex-direction:column;
  background:var(--bg-primary);
  color:var(--text-primary);
  font-size:var(--fs-body-sm);
  overflow:hidden;
}

/* Хедер, 52px, закреплен */
.header{
  height:var(--header-h);
  flex:none;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 var(--pad-header-x);
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
}
.wordmark{font:var(--fs-logo) var(--font-wordmark);color:var(--accent-primary)}
.header-spacer{flex:1}
.header-server{font-size:var(--fs-small)}

/* Лента состояний: ячейки с микролейблом и значением, разделитель 1px */
.ribbon{
  flex:none;
  display:flex;
  align-items:stretch;
  gap:1px;
  background:var(--border-subtle);
  border-bottom:1px solid var(--border);
}
.ribbon-cell{
  background:var(--bg-surface);
  padding:8px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}
.ribbon-value{font-size:var(--fs-body)}
.ribbon-row{display:flex;gap:6px;align-items:center}

/* Рабочая область: панели с отступом 16px */
.workspace{flex:1;display:flex;gap:16px;padding:16px;min-height:0}
.panel{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
  overflow:hidden;
}
.panel-head{
  height:32px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 12px;
  border-bottom:1px solid var(--border-subtle);
}
/* Прокручивается только тело панели */
.panel-body{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.panel-foot{
  flex:none;
  padding:8px 12px;
  border-top:1px solid var(--border-subtle);
  display:flex;
  align-items:center;
  gap:12px;
}

/* Текст */
.label{
  font:600 var(--fs-micro)/1 var(--font-body);
  letter-spacing:var(--ls-label-wide);
  text-transform:uppercase;
  color:var(--text-muted);
}
.number{font-family:var(--font-mono)}
.muted{color:var(--text-muted)}
.secondary{color:var(--text-secondary)}
.title{font:var(--fs-title) var(--font-display);color:var(--text-primary)}
.caption{font-size:var(--fs-caption)}

/* Кнопка — действие; акцентная рамка только у главного действия панели.
   Наведение — текст на уровень ярче, у акцентной — заливка 8% (Style Guide, 8). */
.button{
  margin:0;
  font:inherit;
  font-size:var(--fs-small);
  line-height:inherit;
  padding:4px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-secondary);
  cursor:pointer;
  transition:var(--t-hover);
}
.button:enabled:hover{color:var(--text-primary)}
.button.accent{border-color:var(--accent-primary);color:var(--accent-primary)}
.button.accent:enabled:hover{background:var(--accent-wash)}

/* Чип — фильтр или ресурс */
.chip{
  margin:0;
  font:inherit;
  font-size:var(--fs-caption);
  line-height:inherit;
  padding:3px 7px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-muted);
  background:var(--bg-elevated);
  transition:var(--t-ui);
}
button.chip{cursor:pointer}
button.chip:enabled:hover{color:var(--text-secondary)}

/* Неактивное: не прячется, видно, что действие существует (Style Guide, 8) */
.button:disabled,.chip:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}

:focus-visible{outline:1px solid var(--border-focus);outline-offset:1px}

/* Полоса прогресса 4px — единственный градиент и единственная анимация размера */
.progress{height:4px;border-radius:2px;background:var(--bg-elevated);overflow:hidden;flex:1}
.progress-fill{height:100%;background:var(--progress-fill);transition:width var(--t-slow)}

/* Строка ресурса */
.resource-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  border-radius:var(--radius-sm);
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
}

/* Пунктирная рамка — место под картинку, которой еще нет */
.image-placeholder{
  border:1px dashed var(--border);
  border-radius:var(--radius-xs);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fs-micro);
  color:var(--text-muted);
  flex:none;
}