/* =========================================================
   CloudOne — Панель мониторинга (dashboard)
   Тёмная тема в стиле систем observability
   ========================================================= */

.dash-body{
  background: #0B1B24;
  color: #DCEEF0;
  font-family: var(--font-body);
  margin: 0;
}
.dash-mono{ font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; }

/* Верхняя панель */
.dash-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: rgba(11, 27, 36, 0.92);
  border-bottom: 1px solid rgba(63, 191, 191, 0.18);
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
}
.dash-topbar__brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: #FFFFFF;
}
.dash-topbar__brand img{ width: 26px; height: 26px; }
.dash-topbar__brand span.tag{
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: #3FBFBF;
  background: rgba(63,191,191,0.12);
  border: 1px solid rgba(63,191,191,0.35);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
}
.dash-topbar__nav{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-topbar__nav a{
  font-size: 13.5px;
  font-weight: 600;
  color: #9FC3CB;
  padding: 7px 12px;
  border-radius: 8px;
}
.dash-topbar__nav a:hover{ color: #fff; background: rgba(255,255,255,0.06); }
.dash-status{
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: #7FE3B4;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(127, 227, 180, 0.09);
  border: 1px solid rgba(127,227,180,0.3);
}
.dash-status__dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #4CD98A;
  box-shadow: 0 0 0 0 rgba(76,217,138,0.6);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot{
  0%{ box-shadow: 0 0 0 0 rgba(76,217,138,0.55); }
  70%{ box-shadow: 0 0 0 7px rgba(76,217,138,0); }
  100%{ box-shadow: 0 0 0 0 rgba(76,217,138,0); }
}

/* Заголовок раздела */
.dash-wrap{ max-width: 1360px; margin: 0 auto; padding: 26px 28px 60px; }
.dash-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.dash-heading h1{
  font-family: var(--font-display);
  color: #fff;
  font-size: 22px;
  margin: 0 0 4px;
}
.dash-heading p{
  margin: 0; color: #7C9AA3; font-size: 13.5px;
}
.dash-controls{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dash-filter{
  display: flex; background: #11242E; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 3px;
}
.dash-filter button{
  border: none; background: transparent; color: #7C9AA3; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
}
.dash-filter button.is-active{ background: #1E3A45; color: #fff; }
.dash-btn{
  display: inline-flex; align-items: center; gap: 6px;
  background: #143240; color: #DCEEF0; border: 1px solid rgba(63,191,191,0.3);
  padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.dash-btn:hover{ background: #1B4453; }
.dash-btn svg{ transition: transform .4s ease; }
.dash-btn.is-spinning svg{ transform: rotate(360deg); }

/* Сетка панелей */
.dash-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.dash-grid--2{ grid-template-columns: 2fr 1fr; }
.dash-grid--split{ grid-template-columns: 1.4fr 1fr; }

.panel{
  background: #101F28;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 20px;
}
.panel__head{
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.panel__title{
  font-size: 13px; font-weight: 700; color: #9FC3CB; text-transform: none;
  display: flex; align-items: center; gap: 8px;
}
.panel__title svg{ color: #3FBFBF; }

/* KPI карточки */
.kpi__value{
  font-size: 30px; font-weight: 700; color: #FFFFFF; letter-spacing: -0.02em;
}
.kpi__delta{
  font-size: 12.5px; font-weight: 600; margin-top: 6px; display: flex; align-items: center; gap: 4px;
}
.kpi__delta.up{ color: #4CD98A; }
.kpi__delta.flat{ color: #7C9AA3; }
.kpi__sub{ font-size: 12px; color: #5E7A83; margin-top: 4px; }

/* Прогресс-бар хранилища */
.progress{
  width: 100%; height: 10px; border-radius: 999px; background: #0B1B24;
  border: 1px solid rgba(255,255,255,0.06); overflow: hidden; margin-top: 10px;
}
.progress__bar{
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #2FA6A6, #4CD9C6);
  transition: width .6s ease;
}
.progress-row{ display: flex; justify-content: space-between; font-size: 12.5px; color: #7C9AA3; margin-top: 8px; }

/* Трафик числа */
.traffic-row{ display: flex; gap: 22px; margin-bottom: 12px; }
.traffic-item{ flex: 1; }
.traffic-item__label{ font-size: 12px; color: #7C9AA3; margin-bottom: 4px; display:flex; align-items:center; gap:6px;}
.traffic-item__value{ font-size: 21px; font-weight: 700; color: #fff; }
.traffic-item__value.in{ color: #4CD98A; }
.traffic-item__value.out{ color: #6FB6F1; }

canvas#trafficChart{ width: 100%; height: 220px; display:block; }

/* Процессы */
.process{ margin-bottom: 16px; }
.process:last-child{ margin-bottom: 0; }
.process__top{ display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; }
.process__name{ color: #DCEEF0; font-weight: 600; }
.badge{
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .02em;
}
.badge--running{ background: rgba(76,217,138,0.14); color: #4CD98A; border: 1px solid rgba(76,217,138,0.35); }
.badge--queued{ background: rgba(255,196,84,0.14); color: #FFC454; border: 1px solid rgba(255,196,84,0.35); }
.badge--completed{ background: rgba(111,182,241,0.14); color: #6FB6F1; border: 1px solid rgba(111,182,241,0.35); }
.process .progress{ height: 7px; margin-top: 0; }

/* Лог событий */
.log-list{ list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.log-list li{
  display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,0.06); font-size: 13px;
}
.log-list li:last-child{ border-bottom: none; }
.log-time{ color: #5E7A83; white-space: nowrap; flex-shrink: 0; }
.log-dot{ width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.log-dot--upload{ background: #4CD98A; }
.log-dot--album{ background: #6FB6F1; }
.log-dot--auth{ background: #C79CFF; }
.log-dot--index{ background: #FFC454; }
.log-text{ color: #C3DADF; }

/* Тепловая карта активности */
.heatmap{
  display: grid;
  grid-template-columns: 34px repeat(24, 1fr);
  gap: 3px;
  align-items: center;
}
.heatmap .hm-label{ font-size: 10px; color: #5E7A83; text-align: right; padding-right: 6px; }
.hm-cell{
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: rgba(63,191,191,0.08);
}
.heatmap-legend{ display:flex; align-items:center; gap:6px; margin-top:14px; font-size:11px; color:#5E7A83; }
.heatmap-legend .hm-cell{ width: 12px; height:12px; }

/* Индексация */
.speed-gauge{ display: flex; align-items: baseline; gap: 8px; }
.speed-gauge__value{ font-size: 32px; font-weight: 700; color: #fff; }
.speed-gauge__unit{ font-size: 14px; color: #7C9AA3; }
.mini-stats{ display: flex; gap: 18px; margin-top: 14px; }
.mini-stats div{ font-size: 12px; color: #7C9AA3; }
.mini-stats strong{ display:block; color:#DCEEF0; font-size: 14px; font-weight:700; }

footer.dash-footer{
  text-align:center; color:#5E7A83; font-size:12.5px; padding: 20px 0 40px;
}

@media (max-width: 1100px){
  .dash-grid, .dash-grid--2, .dash-grid--split{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 700px){
  .dash-grid, .dash-grid--2, .dash-grid--split{ grid-template-columns: 1fr; }
  .heatmap{ grid-template-columns: 28px repeat(24, minmax(10px,1fr)); overflow-x:auto; }
}