/* =========================================================================
   plant.voir.su — dashboard grid + персонализация (spbflot, общий для всех страниц)
   Блоки: drag&drop, resize span 1..4, hide/restore, персональная раскладка.
   Текст всегда читается: контент в статическом HTML, панель — декоративный слой.
   ========================================================================= */

/* ---- сетка дашборда ---- */
#dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(110px, auto);
  gap: 16px;
  padding: 20px 24px 40px;
  max-width: var(--max);
  margin: 0 auto;
  align-items: start;
}
#dashboard.editing .pblock {
  outline: 1px dashed rgba(232, 163, 61, .5);
  outline-offset: 4px;
}

/* ---- карточка блока ---- */
.pblock {
  position: relative;
  grid-column: span var(--w, 1);
  grid-row: span var(--h, 1);
  background: var(--panel, #0E1524);
  border: 1px solid var(--line, rgba(143,163,184,.14));
  border-radius: var(--radius-lg, 22px);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 50px rgba(4, 10, 20, .35);
  transition: box-shadow .2s, transform .2s;
  min-height: calc(var(--h, 1) * 110px); /* номинальная высота; контент может расти */
}
.pblock:hover { transform: translateY(-2px); }
.pblock.dragging { opacity: .5; cursor: grabbing; }

.pblock-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--line, rgba(143,163,184,.14));
  font-weight: 700; font-size: .92rem; letter-spacing: .02em;
}
.pblock-title { color: var(--ink, #F2F6FA); }
.pblock-title::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal, #2FB8A6); margin-right: 10px; vertical-align: middle;
}

.pblock-body {
  padding: 18px;
  overflow: auto;
  flex: 1;
}

/* ---- скрыть / resize контролы (только в режиме редактирования) ---- */
.pblock-hide {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(14, 21, 36, .8);
  color: var(--muted, #8FA3B8); cursor: pointer; font-size: .85rem; line-height: 1;
  opacity: 0; transition: opacity .15s;
}
#dashboard.editing .pblock-hide { opacity: 1; }
.pblock-hide:hover { color: #fff; border-color: rgba(232,163,61,.6); }

.pblock-resize {
  position: absolute; right: 6px; bottom: 6px; z-index: 3;
  width: 14px; height: 14px;
  border-right: 2px solid rgba(232,163,61,.7);
  border-bottom: 2px solid rgba(232,163,61,.7);
  cursor: nwse-resize; opacity: 0; transition: opacity .15s;
}
#dashboard.editing .pblock-resize { opacity: 1; }

/* ---- плавающая кнопка «Настроить» ---- */
.pcontrol {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  background: var(--amber, #E8A33D); color: #1C1206;
  border: none; border-radius: 999px; padding: 12px 20px;
  font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 28px rgba(232, 163, 61, .35);
  transition: transform .2s, box-shadow .2s;
}
.pcontrol:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(232,163,61,.45); }
.pcontrol.active { background: var(--teal, #2FB8A6); color: #06231E; }

/* ---- панель персонализации ---- */
.ppanel {
  position: fixed; right: 22px; bottom: 78px; z-index: 61;
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--panel, #0E1524); border: 1px solid var(--line);
  border-radius: 18px; padding: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.ppanel[hidden] { display: none; }
.ppanel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ppanel-head strong { color: var(--ink, #F2F6FA); font-size: 1.02rem; }
.ppanel-close {
  background: none; border: 1px solid var(--line); color: var(--muted);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.ppanel-hint { color: var(--muted, #8FA3B8); font-size: .84rem; margin: 0 0 14px; }
.ppanel-section-title { color: var(--teal, #2FB8A6); font-size: .82rem; font-weight: 700; margin: 12px 0 6px; }
.ppanel-restore {
  display: block; width: 100%; text-align: left;
  background: var(--teal-soft); border: 1px solid rgba(47,184,166,.3);
  color: var(--ink); border-radius: 10px; padding: 9px 12px; margin: 6px 0;
  cursor: pointer; font-size: .88rem;
}
.ppanel-restore:hover { border-color: var(--teal, #2FB8A6); }
.ppanel-reset {
  display: block; width: 100%; margin-top: 14px;
  background: rgba(232,163,61,.12); border: 1px solid rgba(232,163,61,.4);
  color: var(--amber, #E8A33D); border-radius: 10px; padding: 10px 12px;
  cursor: pointer; font-weight: 700; font-size: .88rem;
}
.ppanel-reset:hover { background: rgba(232,163,61,.22); }

/* ---- читать текст всегда: контент блоков не прячется анимациями ---- */
.pblock-body > * { opacity: 1 !important; transform: none !important; }

/* ---- hero-блок: 3D-сцена фоном, копия поверх ---- */
.pblock-hero .pblock-body { position: relative; overflow: hidden; }
.pblock-hero .canvas-slot {
  position: absolute; inset: 0; z-index: 0;
}
.pblock-hero .canvas-slot::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 70% 30%, rgba(232, 163, 61, .10), transparent 70%),
    radial-gradient(45% 45% at 20% 75%, rgba(47, 184, 166, .10), transparent 70%),
    linear-gradient(180deg, rgba(7,11,20,.82), rgba(7,11,20,.55));
}
.hero-copy { position: relative; z-index: 2; padding: 28px; max-width: 640px; }
.pblock-hero .pblock-body { min-height: 360px; }

/* статичная 3D-витрина (не absolute, поток) */
.canvas-static { position: relative; height: 240px; border-radius: 14px; overflow: hidden; margin-bottom: 16px; }

/* KPI-сетка ровная, без сирот */
.hero-stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); display: grid; }
.hero-stats li { margin: 0; }

.mini-note { color: var(--muted, #8FA3B8); font-size: .85rem; margin: 10px 0 0; }

/* ---- мобильный: drag/resize отключены, сетка в 1 колонку ---- */
@media (max-width: 768px) {
  #dashboard { grid-template-columns: 1fr; grid-auto-rows: auto; padding: 16px; }
  .pblock { grid-column: span 1 !important; grid-row: span 1 !important; }
  .pblock-resize { display: none; }
  .pcontrol .pcontrol-label { display: none; }
  .pcontrol { padding: 14px; border-radius: 50%; }
  .hero-copy { padding: 18px; }
  .pblock-hero .pblock-body { min-height: 320px; }
  .canvas-static { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .pblock, .pcontrol { transition: none; }
  .pblock:hover { transform: none; }
}