/* cabinet.css — вход и личный кабинет (Этап 12).
   Токены — из :root card.css (--yellow, --ink, --paper, --band, --line, --radius, --gray, --head). */

.cab-sec{padding-bottom:64px}

.cab-narrow{max-width:420px;margin:24px auto 0}
.cab-narrow h1{color:var(--head);font-size:28px;margin:0 0 24px;text-align:center}

.cab-form{
  display:flex;flex-direction:column;gap:16px;
  padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
}
.cab-field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--head)}
.cab-field input,.cab-field select,.cab-field textarea{
  padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius);
  font-size:15px;font-family:inherit;background:var(--paper);color:var(--ink);
}
.cab-field textarea{resize:vertical;min-height:64px}
.cab-field input:focus,.cab-field select:focus,.cab-field textarea:focus{outline:none;border-color:var(--yellow)}

.cab-error{
  background:#FDECEC;border:1px solid #F3B9B9;color:#A32E2E;
  padding:10px 14px;border-radius:var(--radius);font-size:14px;
}

.cab-foot{border-top:3px solid var(--yellow);padding:18px 0;color:var(--gray);font-size:14px}
.cab-foot a{color:var(--gray)}

/* ── Кабинет: шапка страницы ── */
.cab-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:8px 0 28px;flex-wrap:wrap}
.cab-topbar h1{color:var(--head);font-size:28px;margin:0}
.cab-who{color:var(--gray);font-size:14px}

/* ── Кабинет: раздел «Избранное» ── */
#cabFavorites h2{color:var(--head);font-size:24px;margin:0 0 6px}
.cab-fav-intro{color:var(--gray);font-size:14px;margin:0 0 24px;max-width:640px}
.cab-fav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.cab-fav-card{
  position:relative;display:block;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden;
  transition:.15s;color:inherit;
}
.cab-fav-card:hover{border-color:var(--yellow)}
.cab-fav-card img,.cab-fav-noimg{width:100%;height:140px;object-fit:contain;background:var(--band);display:block}
.cab-fav-body{padding:12px 14px}
.cab-fav-name{font-weight:600;color:var(--head);font-size:15px}
.cab-fav-principle{color:var(--gray);font-size:12.5px;margin-top:2px}
.cab-fav-remove{
  position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);color:var(--gray);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;
}
.cab-fav-remove:hover{border-color:#A32E2E;color:#A32E2E}

/* ── Кабинет: переключатель разделов админ-панели (Пользователи/Операции) —
   тот же паттерн подчёркивания активного пункта, что .toc-h-bar в card.css. ── */
.cab-tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:28px}
.cab-tab{
  appearance:none;background:none;border:none;cursor:pointer;font-family:inherit;
  padding:14px 2px;margin-bottom:-1px;
  font-size:15px;font-weight:500;color:var(--gray);
  border-bottom:2px solid transparent;transition:.15s;
}
.cab-tab:hover{color:var(--head)}
.cab-tab.is-active{color:var(--head);font-weight:700;border-bottom-color:var(--yellow)}
.cab-tab-panel[hidden]{display:none}

/* ── Кабинет: фильтр таблицы пользователей по статусу — второй уровень иерархии,
   сегментированный переключатель (не подчёркивание) — визуально отличим от .cab-tabs. ── */
.cab-subtabs{display:inline-flex;gap:2px;padding:3px;margin-bottom:16px;background:var(--band);border-radius:calc(var(--radius) + 4px)}
.cab-subtab{
  appearance:none;background:none;border:none;cursor:pointer;font-family:inherit;
  padding:7px 14px;border-radius:var(--radius);
  font-size:13.5px;font-weight:500;color:var(--gray);transition:.15s;
}
.cab-subtab:hover{color:var(--head)}
.cab-subtab.is-active{background:var(--paper);color:var(--head);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* ── Кабинет: форма создания/редактирования + таблица пользователей ── */
.cab-admin-form{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;
  padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  margin-bottom:28px;
}
/* .cab-admin-form{display:grid} побеждает браузерный [hidden]{display:none} (обе — author-правила
   одного происхождения, класс+атрибут специфичнее одного класса) — раньше не мешало, т.к.
   #cabUserForm у админа всегда виден; форма ОПИ — первая, которую нужно скрывать/показывать. */
.cab-admin-form[hidden]{display:none}
.cab-admin-form h3{grid-column:1/-1;margin:0 0 4px;color:var(--head);font-size:18px}
.cab-admin-form .cab-field{grid-column:span 1}
.cab-admin-form .cab-actions{grid-column:1/-1;display:flex;gap:12px;align-items:center}
.cab-admin-form .cab-error{grid-column:1/-1}
.cab-btn-sm{padding:7px 12px;font-size:13px}

.cab-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.cab-table{width:100%;border-collapse:collapse;font-size:14px}
.cab-table th,.cab-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
.cab-table th{background:var(--band);color:var(--head);font-weight:600;font-size:13px}
.cab-table th:has(.cab-sort-btn){padding:0}
.cab-sort-btn{
  display:block;width:100%;padding:12px 16px;border:none;background:none;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:13px;color:var(--head);text-align:left;
}
.cab-sort-btn:hover{color:var(--yellow-d)}
.cab-sort-btn.is-active{color:var(--yellow-d)}
.cab-table tr:last-child td{border-bottom:none}
.cab-row-actions{display:flex;gap:8px;flex-wrap:wrap}
.cab-btn-toggle{width:140px;text-align:center}
.cab-empty{color:var(--gray);text-align:center;padding:24px}

.cab-badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600}
.cab-badge-ok{background:#E7F6EC;color:#1E7A3E}
.cab-badge-off{background:#F3F3F3;color:var(--gray)}
.cab-badge-archived{background:transparent;border:1px solid var(--line);color:var(--gray);padding:2px 9px}
.cab-badge-neg{background:#FDECEC;color:#A32E2E}

/* ── Кабинет: секция «Операции» — паттерн settings-row (см. DESIGN.md) ──
   Заголовок+описание слева, кнопка+статус справа, разделитель между строками
   на всю ширину. Не таблица (нет общей шапки-колонок) и не карточка на строку —
   один контейнер с построчными разделителями. */
.cab-ops{
  margin-top:28px;padding:8px 24px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
}
.cab-ops h3{margin:0;padding:16px 0;color:var(--head);font-size:18px;border-bottom:1px solid var(--line)}
.cab-ops-row{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.cab-ops-row:last-child{border-bottom:none}

.cab-ops-info{flex:1;min-width:0}
.cab-ops-title{font-weight:600;color:var(--head);font-size:15px}
.cab-ops-desc{color:var(--gray);font-size:13px;line-height:1.45;margin-top:4px;max-width:62ch}

.cab-ops-action{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cab-ops-btn{width:150px;text-align:center}
.cab-ops-status{font-size:12.5px;color:var(--gray);min-height:16px}
.cab-ops-status.is-error{color:#A32E2E}
.cab-ops-status.is-ok{color:#1E7A3E}

/* ── Кабинет менеджера: раздел «ОПИ и ОПЭ» ── */
.cab-opi-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
/* .cab-subtabs{margin-bottom:16px} — общее правило (используется и у фильтра пользователей
   в админке, где сегменты идут отдельной строкой). Внутри этого тулбара оно как раз и ломает
   вертикальное выравнивание: align-items:center центрует margin-box, а лишний нижний отступ
   сдвигает подтабы вверх относительно поиска/кнопки, у которых margin-bottom:0. */
.cab-opi-toolbar .cab-subtabs{margin-bottom:0}
.cab-opi-toolbar .cab-opi-search{flex:1;min-width:200px}
.cab-opi-toolbar #cabOpiNewBtn{margin-left:auto}
.cab-opi-search input{
  width:100%;padding:8px 14px;border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);
  font-size:13.5px;font-family:inherit;background:var(--band);
}
.cab-opi-search input:focus{outline:none;border-color:var(--yellow);background:var(--paper)}

.cab-opi-hint{margin:-6px 0 12px;color:var(--gray);font-size:13px}

.cab-opi-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.cab-opi-filters select{
  padding:7px 12px;border:1px solid var(--line);border-radius:var(--radius);
  font-size:13px;font-family:inherit;background:var(--paper);color:var(--head);
}
.cab-opi-filters select:focus{outline:none;border-color:var(--yellow)}

.cab-opi-devices{grid-column:1/-1;display:flex;flex-direction:column;gap:8px}
.cab-opi-device-row{
  display:flex;flex-direction:column;gap:8px;
  padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--band);
}
.cab-opi-device-row-top{display:grid;grid-template-columns:1fr 1.1fr 1fr .9fr .5fr auto;gap:8px;align-items:center}
.cab-opi-device-row-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.cab-opi-device-row input,.cab-opi-device-row select{padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);font-size:13.5px;font-family:inherit;background:var(--paper)}
.cab-opi-dev-name[readonly]{background:var(--band);color:var(--gray);cursor:not-allowed}
.cab-opi-device-row-new{border-style:dashed}
.cab-opi-device-remove{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  color:var(--gray);cursor:pointer;font-size:13px;line-height:1;justify-self:end;
}
.cab-opi-device-remove:hover{border-color:#A32E2E;color:#A32E2E}

.cab-opi-row-customer{font-weight:600;color:var(--head)}
.cab-opi-row-devices{color:var(--gray);font-size:13px}
.cab-opi-row-devices a{color:var(--ink-2)}
.cab-opi-row-devices a:hover{color:var(--yellow-d)}

.cab-opi-open-btn{width:96px;text-align:center}

/* Разворачиваемая строка деталей испытания — прямо под кликнутой строкой таблицы,
   не отдельная панель внизу списка (неудобно мотать при большом списке). */
.cab-opi-detail-row td{padding:0;border-bottom:1px solid var(--line)}
.cab-opi-detail{
  padding:24px;background:var(--band);border-top:2px solid var(--yellow);
}
.cab-opi-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.cab-opi-detail-title{font-size:20px;font-weight:700;color:var(--head)}
.cab-opi-detail-sub{color:var(--gray);font-size:13.5px;margin-top:3px}
.cab-opi-detail-close{background:none;border:none;color:var(--gray);cursor:pointer;font-size:14px}
.cab-opi-detail-close:hover{color:var(--head)}

.cab-opi-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.cab-opi-fields .cab-field select{padding:9px 12px;font-size:14px}

.cab-opi-reassign{display:flex;align-items:flex-end;gap:10px;margin-bottom:24px;padding:14px;background:var(--band);border-radius:var(--radius)}
.cab-opi-reassign .cab-field{flex:1}

.cab-opi-devices-list{margin-bottom:24px}
.cab-opi-devices-list h4,.cab-opi-feed h4{font-size:14px;color:var(--head);margin:0 0 10px;text-transform:uppercase;letter-spacing:.04em;font-size:12px}
.cab-opi-device-card{
  position:relative;padding:10px 150px 10px 14px;border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:8px;font-size:13.5px;background:var(--paper);
}
.cab-opi-device-card b{color:var(--head)}
.cab-opi-device-params{color:var(--gray);margin-top:3px}
.cab-opi-device-card-actions{position:absolute;top:9px;right:12px;display:flex;gap:12px}
.cab-opi-device-edit-btn,.cab-opi-device-delete-btn{
  background:none;border:none;cursor:pointer;font-size:12.5px;text-decoration:underline;
}
.cab-opi-device-edit-btn{color:var(--gray)}
.cab-opi-device-edit-btn:hover{color:var(--head)}
.cab-opi-device-delete-btn{color:#A32E2E}
.cab-opi-device-delete-btn:hover{color:#7a2222}
.cab-opi-devices-list .cab-opi-device-row{margin-bottom:8px}
.cab-opi-device-row-actions{display:flex;justify-content:flex-end;margin-top:2px}
.cab-opi-device-error{margin-top:4px}
.cab-opi-new-devices:empty{display:none}
.cab-opi-new-devices .cab-opi-device-row{margin-top:8px}
.cab-opi-devices-actions{display:flex;gap:10px;margin-top:8px}
.cab-opi-devices-error{margin-top:8px}

.cab-opi-feed-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.cab-opi-feed-item:last-child{border-bottom:none}
.cab-opi-feed-icon{
  width:28px;height:28px;border-radius:50%;background:var(--band);color:var(--gray);
  display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;
}
.cab-opi-feed-body{flex:1;font-size:13.5px}
.cab-opi-feed-meta{color:var(--gray);font-size:12px;margin-top:2px}
.cab-opi-feed-actions{display:flex;gap:6px;flex-shrink:0;align-items:flex-start}
.cab-opi-feed-actions a,.cab-opi-feed-actions button{
  appearance:none;font-family:inherit;cursor:pointer;
  font-size:12px;font-weight:500;color:var(--gray);text-decoration:none;background:var(--paper);
  padding:4px 9px;border:1px solid var(--line);border-radius:var(--radius);white-space:nowrap;
}
.cab-opi-feed-actions a:hover,.cab-opi-feed-actions button:hover{border-color:var(--yellow);color:var(--head)}
.cab-opi-feed-form{display:flex;gap:10px;margin-top:16px;align-items:flex-end}
.cab-opi-feed-form textarea{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);font-family:inherit;font-size:13.5px;resize:vertical;min-height:40px}

/* Нативный input[type=file] визуально прячем, вместо него — <label for=...> в стиле кнопки */
.cab-opi-file-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.cab-opi-file-picker-status{color:var(--gray);font-size:12.5px}

.cab-opi-pagination{display:flex;justify-content:center;margin-top:16px}

/* Модалка просмотра файла ленты — картинки/PDF инлайн, вместо перехода по ссылке
   (браузер иначе либо открывает в новой вкладке, либо сразу скачивает — не «просмотр»). */
.cab-opi-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.cab-opi-modal[hidden]{display:none}
.cab-opi-modal-backdrop{position:absolute;inset:0;background:rgba(20,18,14,.6)}
.cab-opi-modal-box{
  position:relative;background:var(--paper);border-radius:var(--radius);
  width:100%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.cab-opi-modal-close{
  position:absolute;top:10px;right:10px;z-index:1;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:7px 12px;font-size:13px;cursor:pointer;font-family:inherit;
}
.cab-opi-modal-close:hover{border-color:var(--yellow)}
.cab-opi-modal-body{padding:24px;overflow:auto;display:flex;align-items:center;justify-content:center;min-height:200px}
.cab-opi-modal-body img{max-width:100%;max-height:80vh;display:block}
.cab-opi-modal-body iframe{width:100%;height:78vh;border:none}

@media (max-width:820px){
  .cab-opi-toolbar{flex-direction:column;align-items:stretch}
  .cab-opi-toolbar #cabOpiNewBtn{margin-left:0}
  .cab-opi-fields{grid-template-columns:1fr}
  .cab-opi-device-row-top{grid-template-columns:1fr}
  .cab-opi-device-row-bottom{grid-template-columns:1fr}
  .cab-opi-device-remove{justify-self:stretch}
  .cab-opi-modal{padding:0}
  .cab-opi-modal-box{max-height:100vh;border-radius:0}
  .cab-opi-reassign{flex-direction:column;align-items:stretch}
  .cab-opi-feed-form{flex-direction:column;align-items:stretch}
}

@media (max-width:820px){
  .cab-admin-form{grid-template-columns:1fr}
  .cab-ops-row{flex-direction:column;align-items:stretch;gap:12px}
  .cab-ops-action{align-items:stretch}
  .cab-ops-btn{width:100%}
  .cab-ops-status{text-align:left}
}

@media (max-width:390px){
  .cab-form{padding:20px}
  .cab-narrow{max-width:none}
}