/* Оформление: сначала «основа стиля» (:root), затем правила блоков. */
/* Расположение и размеры — в app.css. Правила и термины — harness/docs/STYLE-GUIDE.md, UI-KIT.md. */

/* ============================================================
   ОСНОВА СТИЛЯ — палитра и «ручки» общего вида.
   Меняя значения здесь, вы меняете вид всего приложения.
   Правила и полный список — harness/docs/STYLE-GUIDE.md.

   Цвета шапки/кнопок/активной вкладки/дат задаются в админке
   («Настройки → Шапка сайта») и приходят как --site-*; ниже они
   используются как значения по умолчанию.
   ============================================================ */
:root{
  /* Поверхности и текст */
  --bg:#f4f5f8; --card:#fff; --surface-soft:#fafbff; --surface-hover:#f8faff;
  --surface-2:#eef1f8; --surface-active:#f4f6fb;
  --line:#e2e5ee; --line-2:#ccd2e2; --ink:#22263a; --ink-soft:#3c4570; --muted:#6b7387;
  /* Акцент и статусы */
  --acc:#3f6ad8; --acc-soft:#eef3fd;
  --green:#1f9d62; --green-soft:#e8f6ee; --amber:#b7791f; --amber-soft:#fdf3e3;
  --red:#d64550; --red-soft:#fbe9eb;
  /* Шапка сайта (.topbar) и Шторка — шапка страницы (.hero-search) */
  --hdr-bg:var(--site-hdr-bg,#242a3f); --hdr-bg-page:var(--site-hdr-bg,#2c3350);
  --hdr-ink:var(--site-hdr-ink,#dfe3f2); --hdr-muted:var(--site-hdr-muted,#c3c9dd); --hdr-sub:var(--site-hdr-sub,#b6bdd4);
  --nav-active:var(--site-nav-active,var(--site-acc,#3f6ad8));
  /* Геометрия и тени */
  --radius:10px; --radius-sm:7px; --pill:99px;
  --shadow:0 1px 2px rgba(20,30,60,.05),0 2px 10px rgba(20,30,60,.05);
  --shadow-menu:0 10px 28px rgba(20,30,60,.16);
}
/* ===== База: типографика приложения и контролы ===== */
body{font-family:'Segoe UI',system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
input,select,textarea{font-family:inherit;font-size:13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-soft)}
a{color:var(--acc);text-decoration:none}
/* ===== Шапка сайта (.topbar): название, меню, роль ===== */
.topbar{background:var(--hdr-bg);color:var(--hdr-ink)}
.brand{font-weight:700;font-size:15px;cursor:pointer}
.brand .dot{border-radius:3px;background:var(--nav-active)}
.nav button{border-radius:var(--radius-sm);color:var(--hdr-muted);font-weight:600;font-size:13px}
.nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.nav button.active{background:var(--nav-active);color:#fff}
.role{background:rgba(255,255,255,.08);border-radius:8px}
.role .rl{border-radius:6px;font-size:12px;font-weight:600;color:var(--hdr-muted)}
.role .rl.active{background:var(--card);color:#242a3f}
/* ===== Заголовки секций ===== */
.section-title{font-size:17px;font-weight:700}
.section-sub{color:var(--muted);font-size:12px}
/* ===== Карточка события (.card) ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);cursor:pointer;transition:.12s}
.card:hover{border-color:var(--acc)}
.card .emo{border-radius:8px;font-size:17px;background:var(--surface-2)}
.card h3{font-size:13px;line-height:1.3;font-weight:600}
.card .meta{font-size:11px;color:var(--muted)}
/* ===== Теги (.tag) ===== */
.tag{background:#eceff7;color:var(--ink-soft);border-radius:var(--pill);font-size:11px;font-weight:600;border:none;cursor:pointer}
.tag.on{background:var(--acc);color:#fff}
.tag.tag-clear{background:var(--surface-soft);color:var(--muted);border:1px solid var(--line)}
.tag:disabled{opacity:.5;cursor:default}
/* ===== Прогресс заполнения ===== */
.progress .bar{background:#eaedf5;border-radius:var(--pill)}
.progress .fill{background:var(--acc);border-radius:var(--pill)}
.progress .fill.full{background:var(--red)}
.progress .lbl{font-size:11px;color:var(--muted)}
.progress .lbl b{color:var(--ink-soft);font-weight:600}
/* ===== Строка списка (.row-list / .row-item) ===== */
.row-list{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.row-item{border-bottom:1px solid #f0f1f7;cursor:pointer}
.row-item:last-child{border-bottom:none}
.row-item:hover{background:var(--surface-hover)}
.row-item .d{font-size:12px;font-weight:700;color:var(--ink-soft)}
.row-item .n b{font-size:13px}
.row-item .n span{font-size:11px;color:var(--muted)}
/* ===== Сегмент-переключатель и фильтры ===== */
.seg{background:#eef0f7;border-radius:var(--radius-sm)}
.seg button{border-radius:5px;font-size:12px;font-weight:600;color:var(--muted)}
.seg button.active{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(20,30,60,.15)}
/* ===== Кнопки ===== */
.btn{border-radius:var(--radius-sm);font-weight:600;font-size:13px;transition:.12s}
.btn-primary{background:var(--site-btn,var(--acc));color:var(--site-btn-ink,#fff)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:var(--acc-soft);color:var(--acc)}
.btn-green{background:var(--green);color:#fff}
.btn-red{background:var(--red-soft);color:var(--red)}
.btn-light{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.btn-light:hover{background:var(--surface-active)}
.btn-sm{font-size:12px}
.btn:disabled{opacity:.5;cursor:default}
.btn-outline{border:1px solid var(--line);border-radius:var(--radius-sm);font-weight:600;font-size:13px;background:var(--card)}
.btn-outline:hover{background:var(--surface-active)}
/* ===== Шапка события ===== */
.event-head{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--card),var(--surface-soft))}
.event-head h1{font-size:20px;line-height:1.25}
.event-head .sub{font-size:12px;color:var(--muted)}
/* ===== Панель ===== */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel h2{font-size:14px}
/* ===== Программа и серии события ===== */
.program{list-style:none}
.program li{border-bottom:1px dashed #eceef6;font-size:13px}
.program li:last-child{border-bottom:none}
.program .time{font-weight:700;color:var(--acc);font-size:12px}
.program .desc b{font-size:13px}
.program .desc span{color:var(--muted);font-size:12px}
.series-box{border-left:3px solid var(--acc)}
.mocker{font-size:10.5px;color:#a5aabb}
/* ===== Модальное окно ===== */
.modal-back{background:rgba(15,19,35,.45)}
.modal{background:var(--card);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.modal h2{font-size:17px}
.modal .mhh{color:var(--muted);font-size:13px}
/* ===== Форма и чекбоксы ===== */
.form-field label{font-size:11px;font-weight:700;color:var(--muted)}
.check-row{font-size:12px;color:var(--ink-soft)}
input[type="checkbox"]{appearance:none;-webkit-appearance:none;border:1.5px solid #b7bfd6;border-radius:0;padding:0;background:var(--card);cursor:pointer;transition:.12s}
input[type="checkbox"]:hover{border-color:var(--acc)}
input[type="checkbox"]:checked{background:var(--acc);border-color:var(--acc)}
input[type="checkbox"]:checked::after{content:"";border:solid #fff;border-width:0 2px 2px 0;background:none}
/* ===== Баннеры ===== */
.banner-ok{background:var(--green-soft);color:var(--green);border-radius:8px;font-weight:600;font-size:13px}
.banner-warn{background:var(--amber-soft);color:#8a5b14;border-radius:8px;font-size:12px}
/* ===== Кабинет участника ===== */
.cabin-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.cabin-box h2{font-size:14px}
.reg-row{border-bottom:1px solid var(--line);font-size:13px}
.reg-row:last-child{border-bottom:none}
.sub-row{border-bottom:1px solid var(--line);font-size:13px}
.sub-row:last-child{border-bottom:none}
.notif-row{border-bottom:1px solid var(--line);font-size:12px}
.notif-row .n-ic{border-radius:var(--radius-sm);background:var(--acc-soft)}
.notif-row b{font-size:12px}
/* ===== Календарь ===== */
.cal-dow{font-size:10px;color:var(--muted);font-weight:700}
.cal-day{border:1px solid var(--line);border-radius:6px;font-size:11px;cursor:pointer}
.cal-day:hover{border-color:var(--acc)}
.cal-day.today{border-color:var(--acc);background:var(--acc-soft)}
.cal-day.dim{opacity:.45}
.cal-day.in-range{background:var(--acc-soft);border-color:var(--acc)}
.cal-day.sel-start,.cal-day.sel-end{background:var(--acc);color:#fff;border-color:var(--acc)}
.cal-day.sel-start .cnt,.cal-day.sel-end .cnt{color:#fff}
.cal-week{font-size:10px;font-weight:700;color:var(--muted);cursor:pointer;border:1px solid transparent;border-radius:6px}
.cal-week:hover{border-color:var(--acc);color:var(--acc)}
.cal-day .cnt{font-size:9px;color:var(--acc);font-weight:700}
.cal-ev{background:var(--acc-soft);color:var(--acc);border-radius:3px;font-size:9.5px;line-height:1.25}
.cal-ev.full{background:var(--red-soft);color:var(--red)}
.cal-ev.more{background:transparent;color:var(--muted);font-weight:700}
.cal-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.cal-panel h2{font-size:14px}
/* ===== Тултип дня (используется только fixed-вариант) ===== */
.cal-tip-fixed{background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-menu);font-size:11px;color:var(--ink)}
.cal-tip-fixed b{font-size:11px}
.cal-tip-fixed .ct-ev{border-radius:5px;cursor:pointer}
.cal-tip-fixed .ct-ev:hover{background:var(--acc-soft)}
.cal-tip-fixed .ct-ev.full{color:var(--red)}
.cal-day.sel-start .cal-ev,.cal-day.sel-end .cal-ev{background:rgba(255,255,255,.18);color:#fff}
.cal-day.sel-start .cal-ev.full,.cal-day.sel-end .cal-ev.full{background:rgba(255,255,255,.18);color:#fff}
.cal-day.sel-start .cal-ev.more,.cal-day.sel-end .cal-ev.more{background:transparent;color:#fff}
/* ===== Дропдаун выбора дат (.drp) ===== */
.drp-trigger{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:.12s}
.drp-trigger:hover{border-color:var(--acc)}
.drp-arrow{font-size:9px;color:var(--muted)}
.drp-back{background:transparent}
.drp-menu{background:var(--card);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow-menu);color:var(--ink)}
.drp-head b{font-size:12.5px}
.drp-dow{font-size:10px;font-weight:700;color:var(--muted)}
.drp-day{border-radius:6px;font-size:11.5px;cursor:pointer;transition:.1s}
.drp-day:hover{background:var(--acc-soft)}
.drp-day.dim{color:var(--muted);opacity:.5}
.drp-day.today{outline:1px solid var(--acc)}
.drp-day.in-range{background:var(--acc-soft);color:var(--acc)}
.drp-day.sel-start,.drp-day.sel-end{background:var(--acc);color:#fff;font-weight:700}
/* ===== Таблица ===== */
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
table{font-size:12.5px}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);border-bottom:1px solid var(--line);background:var(--surface-soft)}
td{border-bottom:1px solid #f0f1f7}
tr:hover td{background:var(--surface-hover)}
tr.sel td{background:var(--acc-soft)}
/* ===== Бейдж статуса и мини-кнопки ===== */
.st{border-radius:var(--pill);font-size:11px;font-weight:600}
.st.ok{background:var(--green-soft);color:var(--green)}
.st.wait{background:var(--amber-soft);color:var(--amber)}
.st.no{background:var(--red-soft);color:var(--red)}
.mini-btn{border-radius:5px;font-size:11px;font-weight:600;border:1px solid var(--line);background:var(--card)}
.mini-btn:hover{background:var(--surface-active)}
.mini-btn.green{background:var(--green);color:#fff;border-color:transparent}
.mini-btn.red{background:var(--red-soft);color:var(--red);border-color:transparent}
/* ===== Карточки статистики и служебные блоки ===== */
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.stat-card .v{font-size:20px;font-weight:700}
.stat-card .l{font-size:11px;color:var(--muted)}
.empty-c{color:var(--muted);font-size:13px}
.scan-result{border:1px solid var(--green);background:var(--green-soft);border-radius:8px}
.scan-result h4{color:var(--green);font-size:13px}
.parsed-field label{font-size:10px;color:var(--muted);font-weight:700}
.pkg-file{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:12px}
.pkg-file b{font-weight:600}
.pkg-file span{color:var(--muted);font-size:11px}
@keyframes sp{to{transform:rotate(360deg)}}
/* ===== Тост, спиннер, подсказка ===== */
.toast{background:#242a3f;color:#fff;border-radius:9px;font-size:13px;font-weight:600;opacity:0;transition:.2s;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.toast.show{opacity:1}
.hint{color:#8991a7;font-size:11px}
/* ===== Шторка — шапка страницы (.hero-search) ===== */
.hero-search{background:var(--hdr-bg-page);color:#fff;border-radius:0 0 12px 12px}
.hs-title{font-size:17px;font-weight:700;color:#fff}
.hs-sub{font-size:12px;color:var(--hdr-sub)}
/* ===== Страница события: материалы, места, попап ===== */
.material{border-bottom:1px solid var(--line);font-size:12px}
.material:last-child{border-bottom:none}
.material b{font-weight:600}
.material span{color:var(--muted)}
.seats{font-size:13px;color:var(--muted)}
.seats .big{font-size:22px;color:var(--acc);font-weight:700}
.ev-popup{background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);font-size:12px}
/* ===== Вкладки админки ===== */
.admin-tabs{background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.admin-tabs button{border-radius:6px;font-weight:600;font-size:12px;color:var(--muted)}
.admin-tabs button.active{background:var(--acc-soft);color:var(--acc)}
/* ===== Экран загрузки ===== */
.loading-progress{background:var(--hdr-bg-page)}
.lp-brand{color:#fff;font-weight:700;font-size:17px}
.lp-dot{border-radius:3px;background:var(--acc)}
.loader-spin{border:4px solid rgba(255,255,255,.18);border-top-color:#fff;border-right-color:#fff;border-radius:50%;animation:sp .8s linear infinite}
#app .loading-progress-text{font-size:12px;color:var(--hdr-sub)}
#blazor-error-ui.reload{background:var(--red-soft);color:var(--red);font-size:13px;font-weight:600}
/* ===== Комбо (.styled-select) ===== */
.styled-select .ss-trigger{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);font-size:13px;font-weight:600;line-height:1.25;cursor:pointer;transition:.12s}
.styled-select .ss-trigger:hover{border-color:var(--acc)}
.styled-select .ss-arrow{font-size:10px;color:var(--muted);transition:transform .15s}
.styled-select .ss-menu{background:var(--card);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow-menu)}
.styled-select .ss-opt{border-radius:6px;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:.1s}
.styled-select .ss-opt:hover{background:var(--acc-soft);color:var(--acc)}
.styled-select .ss-opt.sel{background:var(--acc);color:#fff}
.styled-select .ss-menu-sided{background:var(--card);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow-menu)}
table .styled-select .ss-trigger{font-size:12px}
.hs-tools .styled-select .ss-trigger{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.hs-tools .styled-select .ss-trigger:hover{border-color:rgba(255,255,255,.55)}
.hs-tools .styled-select .ss-arrow{color:var(--hdr-muted)}
.hs-tools .styled-select .ss-menu,.hs-tools .styled-select .ss-menu-sided{background:var(--card);border-color:var(--line);color:var(--ink)}


/* ===== Таблицы телеметрии: общий вид (класс используется и компонентом, и «сырыми» таблицами) ===== */
.ops-table table{width:100%;border-collapse:collapse;font-size:12px;table-layout:auto}
.ops-table th{text-align:left;padding:4px 6px;font-weight:400;color:var(--muted);white-space:normal}
.ops-table td{padding:3px 6px;border-top:1px solid var(--line);vertical-align:top;white-space:normal}
/* Длинные значения (пути, описания ОС) переносятся, а не вылазают за панель. */
.ops-table th,.ops-table td{overflow-wrap:anywhere;word-break:break-word}

/* Внутренний скролл блока (узкие таблицы телеметрии, журнал). */
.ops-scroll{flex:1;min-height:0;max-height:min(72vh,700px);overflow:auto}

/* ===== Подсказка при наведении (карточки, таблицы, заголовки «Сервера») =====
   Навешивается классом .ops-tip + атрибутом data-tip; первая строка — смысл,
   вторая — «как получаем». white-space:pre-line сохраняет перенос строки. */
.ops-tip[data-tip]:not([data-tip=""]){position:relative;cursor:help}
.ops-tip[data-tip]:not([data-tip=""]):hover::after{
  content:attr(data-tip);position:absolute;left:0;top:100%;z-index:40;
  padding:6px 8px;max-width:360px;width:max-content;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:0 6px 18px rgba(0,0,0,.25);font-size:11px;font-weight:400;
  color:var(--ink-soft);white-space:pre-line;text-align:left;line-height:1.35;pointer-events:none
}

/* ===== Шапка сайта и Шторка: фон и согласование градиента =====
   ВАЖНО: правила обязаны идти ПОСЛЕ обычных background: (шорткат сбрасывает size/attachment),
   поэтому этот блок — последний в файле.
   background-attachment:fixed привязывает градиент к вьюпорту: иначе Шапка сайта и Шторка
   рисуют градиент каждая в своём масштабе и на стыке виден шов. */
.topbar,.hero-search,.loading-progress{background-size:cover;background-repeat:no-repeat;background-attachment:fixed}