/* ============================================
   EnergyLog.AI — Forecast Page Styles v2
   ============================================ */

.forecast-page{position:relative;z-index:1}

/* Limit bar */
.limit-bar{max-width:1100px;margin:0 auto;padding:8px 32px}
.limit-inner{
  display:flex;align-items:center;gap:16px;
  padding:8px 16px;border-radius:8px;
  font-size:12px;font-weight:500;
}
.limit-inner.limit-warn{background:var(--am-bg);color:var(--am)}
.limit-inner.limit-ok{background:var(--green-bg);color:var(--green)}
.limit-inner svg{width:14px;height:14px;flex-shrink:0}
.limit-inner a{color:inherit;font-weight:700}

/* Main content */
.forecast-main{max-width:1100px;margin:0 auto;padding:12px 32px 40px;position:relative;z-index:1}

/* Filters */
.filters-card{
  background:var(--card);border:1px solid var(--brd);
  border-radius:var(--rl);padding:24px;margin-bottom:18px;
  box-shadow:var(--sh);
}
.filters-title{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--ac);margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.filters-title svg{width:14px;height:14px;stroke:var(--ac)}
.filters-grid{
  display:grid;grid-template-columns:170px 1fr 1fr 140px auto;
  gap:12px;align-items:end;
}
.fg input[type=text].search-input{
  border-radius:9px 9px 0 0;border-bottom:none;
  height:34px;font-size:12px;color:var(--tx2);
}
.fg select.with-search{border-radius:0 0 9px 9px}
.btn-go{
  height:40px;padding:0 24px;border:none;border-radius:9px;
  background:var(--ac);color:#fff;font-size:13px;font-weight:600;
  font-family:inherit;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;
  transition:all .2s;box-shadow:0 2px 8px rgba(26,109,255,.15);
}
.btn-go:hover{background:#0050d4;transform:translateY(-1px)}
.btn-go:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-go svg{width:14px;height:14px}

/* Metrics — для mixed показываем 5 карточек */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.metrics.has-gen{grid-template-columns:repeat(5,1fr)}
.metric{
  background:var(--card);border:1px solid var(--brd);
  border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh);
}
.metric .ml{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--tx3);margin-bottom:4px;
}
.metric .mv{font-size:22px;font-weight:800;letter-spacing:-.5px}
.metric .md{font-size:11px;font-weight:500;margin-top:3px;color:var(--tx2)}

/* Цвет метрики по типу */
.metric.metric-gen  .mv{color:#7c3aed}
.metric.metric-wind .mv{color:#3b82f6}
.metric.metric-sol  .mv{color:#f59e0b}
.metric.metric-hyd  .mv{color:#06b6d4}
.metric.metric-cons .mv{color:#1a6dff}

/* Content grid */
.content-grid{
  display:grid;grid-template-columns:1.4fr .6fr;
  gap:12px;margin-bottom:16px;
}

/* Table */
.tbl-scroll{max-height:420px;overflow-y:auto}
.tbl th{
  position:sticky;top:0;
  background:var(--card);z-index:1;
}

/* Object type badge */
.obj-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:20px;
  font-size:12px;font-weight:600;
  white-space:nowrap;
}

/* Weather */
.weather-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--brd);font-size:13px;
}
.weather-item:last-child{border-bottom:none}
.wl{color:var(--tx2)}.wv{font-weight:600}
.compare-box{
  margin-top:14px;padding:12px;background:var(--ac-bg);
  border-radius:9px;font-size:12px;line-height:1.8;
}

/* Chart */
.chart-card{
  background:var(--card);border:1px solid var(--brd);
  border-radius:var(--rl);padding:18px 20px;
  box-shadow:var(--sh);margin-bottom:16px;
}
.chart-header{
  display:flex;justify-content:space-between;
  align-items:center;margin-bottom:10px;
}
.chart-t{font-size:14px;font-weight:700}
.chart-st{font-size:11px;color:var(--tx3);margin-top:2px}
.chart-wrap{width:100%;height:200px;position:relative}
.chart-wrap canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important}

/* Legend */
.legend-row{
  display:flex;flex-wrap:wrap;gap:12px 18px;
  margin-top:10px;padding-top:9px;
  border-top:1px solid var(--brd);
  font-size:11px;color:var(--tx2);
}
.legend-item{display:flex;align-items:center;gap:5px}
.ldot{width:14px;height:3px;border-radius:2px;flex-shrink:0}

/* Download bar */
.dl-bar{
  background:var(--card);border:1px solid var(--brd);
  border-radius:var(--rl);padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:var(--sh);
}
.dl-info{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--tx2)}
.dl-info svg{width:16px;height:16px;stroke:var(--ac)}
.btn-dl{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 20px;border:none;border-radius:9px;
  background:var(--green);color:#fff;font-size:13px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:all .2s;
}
.btn-dl:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-dl svg{width:14px;height:14px}

/* Generator specific — фиолетовый акцент */
.gen-accent{color:#7c3aed}
.wind-accent{color:#3b82f6}
.solar-accent{color:#f59e0b}
.hydro-accent{color:#06b6d4}

/* Таблица — цвет колонок генерации */
.tbl .gen-col{color:#7c3aed;font-weight:600}
.tbl .cons-col{color:#1a6dff;font-weight:600}

/* Peak row highlight */
.tbl tr.peak td{background:rgba(26,109,255,.06)}
.tbl tr.peak td:first-child{
  border-left:3px solid var(--ac);
  padding-left:9px;
}

/* Scrollbar */
.tbl-scroll::-webkit-scrollbar{width:4px}
.tbl-scroll::-webkit-scrollbar-track{background:transparent}
.tbl-scroll::-webkit-scrollbar-thumb{background:var(--brd);border-radius:2px}

/* Loading */
.loading{
  display:flex;align-items:center;justify-content:center;
  gap:12px;padding:40px;color:var(--tx2);font-size:14px;
}
.spinner{
  width:20px;height:20px;border:2px solid var(--brd);
  border-top-color:var(--ac);border-radius:50%;
  animation:spin .7s linear infinite;flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Hidden */
.hidden{display:none!important}

/* Responsive */
@media(max-width:900px){
  .forecast-main{padding:10px}
  .filters-grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .metrics.has-gen{grid-template-columns:1fr 1fr}
  .content-grid{grid-template-columns:1fr}
  .chart-wrap{height:160px}
}
@media(max-width:480px){
  .metrics{grid-template-columns:1fr}
  .metrics.has-gen{grid-template-columns:1fr}
}