/* theme.css v0.8.0 — OpenCloud тёмная тема */

/* ─── ПЕРЕМЕННЫЕ ───────────────────────────────────────────── */
:root {
  /* Фоны — по скриншоту OpenCloud тёмная */
  --bg-page:     #111114;   /* рамка между областями              */
  --bg-surface:  #1c1c1f;   /* боковая панель, топбар             */
  --bg-element:  #26262a;   /* карточки, кнопки, поля ввода       */
  --bg-hover:    #2e2e33;   /* hover состояния                    */
  --bg-active:   #1a2a3a;   /* активный пункт (синеватый)         */

  /* Текст */
  --text-primary:   #e8e8ec;  /* основной                         */
  --text-secondary: #8888a0;  /* второстепенный                   */
  --text-muted:     #52525e;  /* подсказки, метки                 */

  /* Акцент — синий OpenCloud */
  --accent:   #0066cc;
  --accent-hover: #0052a3;
  --online:   #5aab5a;
  --offline:  #ab5a5a;

  /* Границы */
  --border:       rgba(255,255,255,0.08);
  --border-focus: rgba(0,102,204,0.6);

  /* Скругления */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;

  /* Переходы */
  --transition: 0.12s ease;

  /* «Стекло» — плавающие элементы поверх фрейма (мобайл):
     главные кнопки, drawer, dropdown. ОДИН источник прозрачности,
     рамки и скругления — всё в одном стиле. */
  --glass-bg:       rgba(16,16,20,0.6);
  --glass-border:   rgba(255,255,255,0.55);
  --glass-border-w: 2px;
  --glass-radius:   12px;
  --glass-blur:     8px;

  /* Размеры сетки — задаются из JS */
  --left-width:    220px;
  --right-width:   220px;
  --top-height:    46px;
  --bottom-height: 28px;
  --frame-gap:     5px;

  /* ── Типографика — 5 уровней ────────────────────────────────
     Переопределяются из коллекции theme_css динамически.
     title  — заголовки панелей, модалок
     body   — основной текст, кнопки, поля ввода
     nav    — пункты меню (крупнее чем контент в ресурсах)
     label  — категории, метки, бейджи
     micro  — подсказки, версии, время                         */
  --font-family:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-title:        16px;
  --font-title-weight: 700;
  --font-body:         14px;
  --font-body-weight:  400;
  --font-nav:          15px;
  --font-nav-weight:   600;
  --font-label:        13px;
  --font-label-weight: 700;
  --font-micro:        11px;
  --font-micro-weight: 400;

  font-family: var(--font-family);
  font-size: var(--font-body);
  line-height: 1.5;
  color: var(--text-primary);
}

/* ─── СБРОС ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-surface);  /* совпадает с областями — швы невидимы */
}

/* ─── СЕТКА 3×3 ─────────────────────────────────────────────
   Фрейм — отдельный элемент в grid (не в области).
   Области — только для плагинов.
   gap: 0 — никаких полос.                                    */
.grid-layout {
  display: grid;
  grid-template-columns: var(--left-width) 1fr var(--right-width);
  grid-template-rows:    var(--top-height) 1fr var(--bottom-height);
  height: 100vh;
  gap: 0;
  padding: 0;
  position: relative;
}

/* ─── ОБЛАСТИ ───────────────────────────────────────────────── */
.area {
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg-surface);
  position: relative;   /* для прозрачных плагинов с position:absolute */
}

/* Боковые и нижние панели — содержимое сверху */
.area--mid-left,
.area--mid-right,
.area--bottom-left,
.area--bottom-center,
.area--bottom-right {
  align-items: flex-start;
}

/* Верхние области — без нижней границы.
   Визуальное разделение создаёт сама рамка фрейма. */

/* ─── ФРЕЙМ ─────────────────────────────────────────────────
   Фрейм — position:absolute поверх grid.
   Размер и позиция задаются из JS через _recalcLayout().
   CSS здесь только базовые визуальные свойства.             */
.app-frame {
  position: absolute;
  border: none;
  border-radius: var(--radius);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  background: #000;
  z-index: 10;
}

/* Grid должен быть relative чтобы absolute iframe работал */
.grid-layout {
  position: relative;
}

/* ─── СПИННЕР ───────────────────────────────────────────────── */
.app-loader {
  position: fixed; inset: 0;
  background: var(--bg-page);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.app-loader__spinner {
  width: 28px; height: 28px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   УНИФИЦИРОВАННЫЕ КОМПОНЕНТЫ
   Используются и в боковом меню и в dropdown аватара.
   Все визуальные параметры меняются здесь — в одном месте.
═══════════════════════════════════════════════════════════════ */

/* ─── ОБЁРТКА КАТЕГОРИИ ─────────────────────────────────────
   Держит рамку вокруг заголовка и списка вместе.
   В свёрнутом состоянии рамка только вокруг заголовка.
   В раскрытом — охватывает всё включая список.             */
.item-group-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ─── ЗАГОЛОВОК КАТЕГОРИИ ────────────────────────────────────── */
.item-group {
  padding: 8px 12px;
  font-size: var(--font-label);
  font-weight: var(--font-label-weight);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-element);
  transition: background var(--transition);
}
.item-group:hover { background: var(--bg-hover); }

/* Стрелка: › в свёрнутом, повёрнутая в раскрытом */
.item-group::after {
  content: '›';
  font-size: 18px;
  color: var(--text-muted);
  transition: transform var(--transition);
  line-height: 1;
  flex-shrink: 0;
}
.item-group.open::after { transform: rotate(90deg); }

/* ─── СПИСОК ВНУТРИ КАТЕГОРИИ ────────────────────────────────── */
.item-list {
  display: none;
  flex-direction: column;
}
.item-list.open {
  display: flex;
  /* Разделитель между заголовком и списком — без отступов,
     вплотную к внешней рамке обёртки                            */
  border-top: 1px solid var(--border);
  padding: 0;
}

/* ─── ПУНКТ (меню + dropdown) ────────────────────────────────
   Единый стиль для .nav-item в меню и .dropdown-item в auth  */
.item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  color: var(--text-primary);      /* текст всегда белый: выделение — фоном */
  cursor: pointer;
  font-size: var(--font-nav);
  font-weight: var(--font-nav-weight);
  transition: background var(--transition), color var(--transition);
  position: relative;
  border-radius: 0;
  white-space: nowrap;
}
.item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Активный ресурс — открыт во фрейме сейчас */
.item--active {
  color: var(--text-primary);
  background: var(--bg-active);
}
.item--active::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

/* Загруженный ресурс — в скрытом iframe, но не активный */
.item--loaded {
  color: var(--text-primary);
  opacity: 0.75;
}
.item--loaded::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--text-muted);
  border-radius: 0 2px 2px 0;
}

/* ─── КАРТОЧКА / ВСПЛЫВАЮЩЕЕ МЕНЮ ───────────────────────────
   Используется в dropdown аватара.                            */
.card {
  background: var(--bg-element);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* Dropdown аватара */
.dropdown {
  position: fixed;
  z-index: 9000;
  display: none;
  min-width: 180px;
}
.dropdown.open { display: block; }

/* ─── КНОПКА ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg-element);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: var(--font-body);
  font-weight: var(--font-body-weight);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  white-space: nowrap;
  font-family: inherit;
}
.btn:hover { background: var(--bg-hover); }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ─── ПОЛЕ ВВОДА ─────────────────────────────────────────────── */
.input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-element);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: var(--font-body);
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition);
}
.input:focus { border-color: var(--border-focus); }
.input::placeholder { color: var(--text-muted); }

/* ─── СТАТУС ─────────────────────────────────────────────────── */
.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot--online  { background: var(--online); }
.status-dot--offline { background: var(--offline); }
.status-dot--warn    { background: #d9a05b; }  /* жив, но без frameable — во фрейме может не открыться */

/* ═══════════════════════════════════════════════════════════════
   СТИЛИ ПЛАГИНОВ — плагины не несут своих инлайн-стилей,
   весь вид правится здесь. Мобильные варианты — через
   html[data-viewport="mobile"] (атрибут ставит ядро).
═══════════════════════════════════════════════════════════════ */

/* ─── АВАТАР (плагин auth) ──────────────────────────────────── */
.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
  color: #fff; text-transform: uppercase;
  cursor: pointer; user-select: none; flex-shrink: 0;
}

/* ─── ГЛАВНЫЕ КНОПКИ НА МОБИЛЕ: крупнее, ч/б, полупрозрачные ──
   Бургер (.fab), кнопка входа (.auth-login) и аватар плавают
   ПОВЕРХ фрейма — выделяются размером и стилем: тёмное стекло,
   светлая рамка, без акцентного цвета.                          */
.fab {
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text-secondary);
  font-size: 20px; padding: 4px 10px;
  cursor: pointer;
}
html[data-viewport="mobile"] .fab {
  width: 48px; height: 48px;
  background: var(--glass-bg);
  border: var(--glass-border-w) solid var(--glass-border);
  border-radius: var(--glass-radius);   /* квадрат со скруглёнными углами */
  background-clip: padding-box;
  color: #fff; font-size: 22px; padding: 0;
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}
html[data-viewport="mobile"] .auth-login {
  background: var(--glass-bg);
  border: var(--glass-border-w) solid var(--glass-border);
  border-radius: var(--glass-radius);
  background-clip: padding-box;
  color: #fff; font-weight: 600;
  padding: 12px 18px; font-size: 15px;
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}
html[data-viewport="mobile"] .avatar {
  width: 48px; height: 48px; font-size: 18px;
  background: var(--glass-bg);
  border: var(--glass-border-w) solid var(--glass-border);
  border-radius: var(--glass-radius);
  background-clip: padding-box;
  color: #fff;
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* ─── ВЫДВИЖНОЕ МЕНЮ (мобайл, плагин menu) ──────────────────
   Полупрозрачное стекло. Высота — по содержимому: короткий
   список не тянется до низа; длинный — прокручивается
   (max-height + overflow).                                     */
.drawer {
  /* Лист поднимается СНИЗУ, над плавающим значком: верхние углы — территория
     кнопок самих панелей. На широких экранах прижат к правому краю. */
  position: fixed;
  right: 10px; bottom: 84px;
  width: max-content;                /* ширина — по содержимому, не во весь экран */
  min-width: 220px;
  max-width: 86vw;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);  /* мобильные: 100vh выше видимой области */
  display: flex; flex-direction: column;
  padding: 6px;
  background: var(--glass-bg);
  border: var(--glass-border-w) solid var(--glass-border);
  border-radius: var(--glass-radius);
  background-clip: padding-box;
  z-index: 290;
  opacity: 0; transform: translateY(115%);
  transition: transform 0.22s ease, opacity 0.22s ease;
  pointer-events: none;
}
.drawer.open { opacity: 1; transform: none; pointer-events: auto; }
/* Размытие — на псевдослое-СОСЕДЕ содержимого, не на предке скролла:
   backdrop-filter в цепочке предков убивает тач-скролл на мобильных движках. */
.drawer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}
/* Прокрутка — на внутреннем ЧИСТОМ контейнере: скролл внутри элемента с
   backdrop-filter/transform на мобильных умирает (глюк движков), поэтому
   стекло и анимация на родителе, а крутится этот ребёнок. */
.drawer-scroll {
  flex: 1 1 auto;
  min-height: 0;                     /* ключ overflow во flex-колонке */
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: 2px;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.drawer-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 199;
}
.drawer-overlay.open { display: block; }

/* Внутри стеклянного drawer — компоненты тоже полупрозрачные */
.drawer .item-group-wrap { border-color: rgba(255,255,255,0.18); }
.drawer .item-group      { background: rgba(38,38,42,0.55); }
.drawer .item-list.open  { border-top-color: rgba(255,255,255,0.14); }
.drawer .item:hover      { background: rgba(46,46,51,0.6); }

/* Dropdown аватара на мобиле — то же стекло, что кнопки и drawer */
html[data-viewport="mobile"] .dropdown.card {
  background: var(--glass-bg);
  border: var(--glass-border-w) solid var(--glass-border);
  border-radius: var(--glass-radius);
  background-clip: padding-box;
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}


/* ── v0.7: плавающий кластер, редактор, формы ───────────────────────── */
.fab-cluster { position: fixed; display: none; gap: 8px; align-items: center; z-index: 300; }
.fab-main { touch-action: none; }  /* захват пальца: жест не отдаётся скроллу страницы */
.fab { display: flex; align-items: center; justify-content: center; }
.item-group { display: flex; align-items: center; gap: 6px; }
.mini-btn {
  background: transparent; border: none; color: var(--text-secondary);
  padding: 2px 4px; cursor: pointer; display: inline-flex; align-items: center;
  border-radius: 4px; flex-shrink: 0; font-size: 12px; line-height: 1;
}
.mini-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.mini-btn.on { color: var(--accent); }
.menu-head {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 8px;
  font-size: var(--font-label); font-weight: var(--font-label-weight);
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em;
}
.menu-head span { flex: 1; }
.badge { opacity: .8; flex-shrink: 0; }
.edit-form-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.edit-form { width: 100%; max-width: 360px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.edit-form-title { font-size: var(--font-title); font-weight: var(--font-title-weight); }
.edit-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-label); color: var(--text-secondary); }
.edit-form .input { width: 100%; }
.edit-form-err { color: #d08080; font-size: var(--font-micro); min-height: 1em; }
.edit-form-row { display: flex; gap: 8px; justify-content: flex-end; }
html[data-viewport="mobile"] .edit-form {
  background: var(--glass-bg);
  border: var(--glass-border-w) solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}


/* ── v0.8: мультифрейм ─────────────────────────────────────────────── */
.app-frame.frame-active { outline: 2px solid var(--accent); outline-offset: -2px; }
.frame-badge {
  position: absolute; z-index: 60;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-micro); font-weight: 700;
  color: var(--text-primary);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  cursor: pointer; user-select: none;
}
.frame-badge.on { border-color: var(--accent); color: var(--accent); }
.frame-mark {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; padding: 0 3px;
  font-size: 10px; font-weight: 700;
  color: var(--accent); border: 1px solid var(--accent);
  border-radius: 4px; flex-shrink: 0;
}

/* ── v0.8: режим редактирования — честный DnD ──────────────────────── */
.editing .item {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 2px 0;
  background: var(--bg-surface);
  cursor: grab;
}
.editing .item.dragging { opacity: .45; }
.drop-slot {
  height: 0; margin: 0;
  border: 1px dashed var(--accent);
  border-radius: 6px;
  opacity: 0;
  transition: height .12s ease, opacity .12s ease, margin .12s ease;
}
.drop-slot.show { height: 34px; margin: 2px 0; opacity: .7; }

/* десктопная мини-иконка у аватара (сплит/карандаш) */
.icon-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-secondary); cursor: pointer; flex-shrink: 0;
}
.icon-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.icon-btn.on { color: var(--accent); border-color: var(--accent); }