/* panel.css — компоненты панели поверх Adminator (style.css).
   Имена классов шаблонов сохранены, внешний вид приведён к системе Adminator. */

[hidden] { display: none !important; }

/* всплывашки */
.flash { border-radius: 10px; padding: 12px 16px; margin: 0 0 14px; font-size: 14px;
         border: 1px solid; }
.flash-ok { background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .35);
            color: #15803d; }
.flash-err { background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .35);
             color: #b91c1c; }
[data-theme=dark] .flash-ok { color: #4ade80; }
[data-theme=dark] .flash-err { color: #f87171; }

/* мелочи */
.muted { color: var(--t-light, #7c869c); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.err-cell { color: #b91c1c; font-size: 12px; }
[data-theme=dark] .err-cell { color: #f87171; }

/* пустые состояния */
.empty { padding: 34px 20px; text-align: center; color: var(--t-light, #7c869c);
         display: flex; flex-direction: column; gap: 8px; align-items: center;
         font-size: 14px; }
.empty b { color: var(--t, #1f2430); font-size: 15px; }

/* прогресс-бары (прогрев/здоровье сетки) */
.bar { height: 6px; border-radius: 4px; background: var(--bg-2, #e8ebf2);
       overflow: hidden; min-width: 70px; }
.bar-fill { height: 100%; border-radius: 4px; background: var(--p-1, #2f6bff);
            transition: width .4s; }
.bar-fill.bad { background: #ef4444; }
.bar-fill.warn { background: #f59e0b; }

/* журнал комментариев */
.log-box { max-height: 340px; overflow-y: auto; font-size: 12px;
           background: var(--bg-2, #eef1f7); border-radius: 10px;
           padding: 10px 12px; display: flex; flex-direction: column; gap: 3px;
           font-family: 'JetBrains Mono', ui-monospace, monospace; }
.log-line { line-height: 1.5; word-break: break-word; }
.log-ok { color: #15803d; }
.log-err { color: #b91c1c; }
.log-warn { color: #b45309; }
[data-theme=dark] .log-box { background: #12141c; }
[data-theme=dark] .log-ok { color: #4ade80; }
[data-theme=dark] .log-err { color: #f87171; }
[data-theme=dark] .log-warn { color: #fbbf24; }

/* строки таблиц с подсветкой состояния */
.row-err { background: rgba(239, 68, 68, .06); }
.row-warn { background: rgba(245, 158, 11, .08); }
.row-ok { background: rgba(34, 197, 94, .06); }

/* списки выбора в мастерах (аккаунты/фразы) */
.acc-list { display: flex; flex-direction: column; gap: 2px;
            border: 1px solid var(--bc, #e3e8f0); border-radius: 10px;
            padding: 8px 10px; overflow-y: auto; background: var(--bg-1, #fff); }
.acc-row { padding: 2px 0; }
.acc-row.acc-bad { opacity: .5; }
[data-theme=dark] .acc-list { background: #12141c; }
.phrase-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex;
               flex-direction: column; gap: 4px; }
.phrase-list li { display: flex; justify-content: space-between; gap: 8px;
                  align-items: center; border-bottom: 1px solid var(--bc, #e3e8f0);
                  padding: 6px 0; font-size: 13px; }

/* окно noVNC */
.browser-frame { width: 100%; height: 640px; border: 1px solid var(--bc, #e3e8f0);
                 border-radius: 12px; background: #000; display: block; }
.steps { padding-left: 20px; display: flex; flex-direction: column; gap: 6px;
         font-size: 14px; color: var(--t-2, #3d4658); }
.hint { font-size: 12px; color: var(--t-light, #7c869c); }

/* загрузка файла (upload) */
.upload-layout { display: grid; grid-template-columns: 7fr 6fr; gap: 20px; }
.upload-stage { display: flex; flex-direction: column; gap: 12px; }
.dropzone { min-height: 420px; border: 2px dashed var(--bc, #ccd4e2); border-radius: 14px;
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; gap: 10px; cursor: pointer; text-align: center;
            padding: 30px; color: var(--t-light, #7c869c);
            background: var(--bg-1, #fff); transition: border-color .2s, background .2s; }
.dropzone.over { border-color: var(--p-1, #2f6bff);
                 background: rgba(47, 107, 255, .04); }
[data-theme=dark] .dropzone { background: #12141c; }
.preview-frame { position: relative; border-radius: 14px; overflow: hidden;
                 background: #000; }
.preview-frame video { width: 100%; display: block; max-height: 480px; }
.preview-badge { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.7);
                 color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 6px;
                 font-family: 'JetBrains Mono', monospace; }
.preview-meta { display: flex; flex-direction: column; gap: 2px; }
.progress-wrap { display: flex; flex-direction: column; gap: 6px; }
.progress-bar { height: 8px; border-radius: 6px; background: var(--bg-2, #e8ebf2);
                overflow: hidden; }
#progress-fill { height: 100%; width: 0; background: var(--p-1, #2f6bff);
                 transition: width .2s; }

/* превью мастера заданий */
.wiz-preview { border: 1px dashed var(--bc, #ccd4e2); border-radius: 10px;
               padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;
               font-size: 13px; }

/* раскрывающиеся панели (queue детали) — используются редко */
details.fold { border: 1px solid var(--bc, #e3e8f0); border-radius: 10px;
               padding: 8px 12px; }
details.fold summary { cursor: pointer; font-size: 13px; }

/* счётчик заголовка */
.title-count { font-weight: 400; color: var(--t-light, #7c869c); }

/* мобильный drawer шелла */
@media (max-width: 1024px) {
  .shell { position: relative; }
  .d-sidebar { position: absolute; z-index: 40; height: 100%; transform: translateX(-100%);
               transition: transform .25s; }
  body.drawer-open .d-sidebar { transform: translateX(0);
                                box-shadow: 0 0 40px rgba(0,0,0,.25); }
}
@media (max-width: 980px) {
  .upload-layout { grid-template-columns: 1fr; }
}

/* --- центр наблюдения --- */
#obs-modal { position: fixed; inset: 0; background: rgba(15,18,28,.55); z-index: 90;
             display: flex; align-items: center; justify-content: center; padding: 24px; }
#obs-modal[hidden] { display: none; }
.obs-dialog { background: var(--bg-1, #fff); border-radius: 14px; max-width: 900px;
              width: 100%; max-height: 88vh; overflow-y: auto; padding: 18px 20px;
              box-shadow: 0 24px 64px rgba(0,0,0,.35); }
[data-theme=dark] .obs-dialog { background: #161927; }
.obs-head-row { display: flex; justify-content: space-between; align-items: center;
                margin-bottom: 12px; }
.obs-session { border: 1px solid var(--bc, #e3e8f0); border-radius: 12px;
               padding: 10px 12px; margin-bottom: 10px; display: none; }
.obs-session.active { display: block; }
.obs-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.obs-tab { display: inline-flex; align-items: center; gap: 7px;
           border: 1px solid var(--bc, #e3e8f0); background: var(--bg-2, #eef1f7);
           color: var(--t-2, #3d4658); border-radius: 999px; padding: 6px 14px;
           font-size: 13px; font-weight: 500; cursor: pointer; }
.obs-tab.active { border-color: var(--p-1, #2f6bff); color: var(--p-1, #2f6bff);
                  background: rgba(47, 107, 255, .07); }
.obs-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
               animation: obs-pulse 1.6s infinite; }
@keyframes obs-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.obs-live-ind { font-size: 12px; color: var(--t-light, #7c869c); }
.obs-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px;
            flex-wrap: wrap; }
.obs-shot { width: 100%; border-radius: 8px; border: 1px solid var(--bc, #e3e8f0);
            display: block; background: #0b0d14; min-height: 120px; }
.obs-frame { margin-top: 10px; height: 420px; }
.obs-log { margin-top: 12px; }