/* visa-ui.css - визы, квоты, кабинет консула. Префикс vs-, токены дизайна v4 (style.css), шрифт Manrope наследуется. */

.vs-root{min-width:0}
.vs-loading{padding:28px 0;font-size:14px}
.vs-root .tag.red,.vs-worker .tag.red{background:#fde8e4;color:#a3321f}
.vs-root .page-title{margin-top:12px}

/* Ссылка на файл документа */
.vs-link{display:inline-flex;align-items:center;gap:5px;color:var(--blue);font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.vs-link:hover{text-decoration:underline;text-underline-offset:4px}
.vs-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;margin:0 0 18px;font:inherit;font-size:13px;font-weight:700;color:var(--blue);cursor:pointer}
.vs-back svg{transform:rotate(180deg)}

/* Шапка карточки пакета */
.vs-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.vs-detail-head h2{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:30px;letter-spacing:-1px;margin:0 0 8px;line-height:1.15}
.vs-detail-head .section-label{margin-bottom:10px}
.vs-detail-head>div>p.pf-muted{margin:0;font-size:14px}
.vs-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.vs-actions .button.vs-danger{color:#a3321f;border-color:#f0c9c1}
.vs-actions .button.vs-danger:hover{background:#fde8e4}
.vs-detail .pf-grid-2{margin-top:10px}
.vs-detail .pf-panel:first-child{margin-top:0}

/* Чек-лист */
.vs-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.vs-check-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:var(--white)}
.vs-check-mark{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--paper);color:var(--muted);flex:none}
.vs-check-item.is-attached .vs-check-mark{background:#eaf0ff;color:var(--blue)}
.vs-check-item.is-accepted .vs-check-mark{background:#e4f3df;color:#3a6731}
.vs-check-item.is-requested{border-color:var(--pf-peach-line);background:#fff6f0}
.vs-check-item.is-requested .vs-check-mark{background:var(--pf-peach);color:var(--pf-peach-ink)}
.vs-check-body{min-width:0}
.vs-check-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;line-height:1.4}
.vs-check-title .pf-muted{font-size:12px;font-weight:600}
.vs-check-body small{display:block;color:var(--muted);font-size:12px;margin-top:4px;overflow:hidden;text-overflow:ellipsis}
.vs-comment{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--white);border:1px solid var(--pf-peach-line);font-size:12.5px;line-height:1.5;color:var(--pf-peach-ink);display:flex;gap:8px;align-items:flex-start}
.vs-comment svg{flex:none;margin-top:2px}
.vs-check-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:420px}
.vs-check-actions .button.small{padding:8px 13px;min-height:36px;font-size:11.5px}
.vs-replace{font-size:12.5px;font-weight:700;padding:6px 2px;background:none;border:0;color:var(--blue)}
.vs-replace:hover{text-decoration:underline;text-underline-offset:3px}
.vs-check-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex-basis:100%}
.vs-check-tools[hidden]{display:none}
.vs-pick{border:1px solid var(--line);border-radius:12px;padding:8px 12px;font:inherit;font-size:12.5px;background:var(--white);color:var(--ink);max-width:220px;min-width:0}
.vs-pick:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #eaf0ff}

/* История */
.vs-history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.vs-history li{display:flex;gap:14px;position:relative;padding:0 0 18px}
.vs-history li:before{content:'';position:absolute;left:6px;top:18px;width:1px;height:calc(100% - 18px);background:var(--line)}
.vs-history li:last-child{padding-bottom:0}
.vs-history li:last-child:before{display:none}
.vs-history-dot{width:13px;height:13px;border-radius:50%;background:var(--paper);border:2px solid var(--line);flex:none;margin-top:3px}
.vs-history-dot.submitted,.vs-history-dot.claimed,.vs-history-dot.invitation{background:#eaf0ff;border-color:var(--blue)}
.vs-history-dot.approve,.vs-history-dot.quota,.vs-history-dot.application,.vs-history-dot.attached,.vs-history-dot.generated{background:#e4f3df;border-color:#3a6731}
.vs-history-dot.request{background:var(--pf-peach);border-color:var(--pf-peach-ink)}
.vs-history-dot.reject{background:#fde8e4;border-color:#a3321f}
.vs-history li b{display:block;font-size:13.5px}
.vs-history li small{display:block;color:var(--muted);font-size:12px;margin-top:2px;line-height:1.5}

/* Таблица пакетов */
.vs-table td small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.vs-table tr[data-vs-row]{cursor:pointer}

/* Расширение экрана работника «Виза и квота» */
.wk-root .vs-worker{margin-top:24px}
.vs-worker-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.wk-root .vs-worker .section-label{margin:0;color:var(--muted)}
.wk-root .vs-worker .vs-detail-head h2{font-size:24px}
.wk-root .vs-worker .pf-panel{margin-top:14px}
.wk-root .vs-worker .pf-panel-heading h2{font-size:17px;max-width:none}
.wk-root .vs-worker .button{font-size:12px}
.wk-root .vs-worker .pf-note{margin-top:14px}

/* Планшет */
@media (max-width:1050px){
  .vs-check-item{grid-template-columns:34px minmax(0,1fr)}
  .vs-check-actions{grid-column:2;justify-content:flex-start;max-width:none}
  .vs-detail-head h2{font-size:26px}
}

/* Телефон */
@media (max-width:740px){
  .vs-detail-head{flex-direction:column;align-items:stretch}
  .vs-detail-head h2{font-size:22px}
  .vs-actions{justify-content:flex-start}
  .vs-actions .button{flex:1 1 auto;justify-content:center}
  .vs-check-item{padding:12px 14px;gap:10px;grid-template-columns:30px minmax(0,1fr)}
  .vs-check-mark{width:30px;height:30px}
  .vs-check-actions{gap:6px}
  .vs-pick{max-width:100%;width:100%}
  .vs-check-actions .button.small{flex:1 1 auto;justify-content:center}
  .vs-history li{gap:10px}
  .wk-root .vs-worker .vs-detail-head h2{font-size:20px}
}

/* BUG-001: блоки эталона экрана «Виза», скрытые до привязки к реальному пакету; непройденные этапы таймлайна; BUG-042: выбор другого пакета */
.wk-root .vs-hidden{display:none!important}
.wk-root .wk-timeline-item.vs-step-pending{opacity:.45}
.wk-root .vs-worker .pf-note .vs-other{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* QA 110526 BUG-052: на 1440 селект «Подобрать документ» и кнопки не сжимают название пункта */
@media (min-width:1051px){.vs-check-item{grid-template-columns:34px minmax(220px,1fr) minmax(0,auto)}}
/* QA 110526 BUG-053: номер пакета и имя работника в таблице консула не переносятся по буквам */
.vs-table td:first-child{white-space:nowrap;min-width:120px}
.vs-table td:nth-child(2){min-width:150px}
.vs-table td small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* QA 110526 BUG-111: бейдж статуса в заголовке пакета без «растянутого» межбуквенного интервала */
.vs-detail-head h2 .tag{letter-spacing:normal;font-size:11.5px}
/* UX-аудит 06.11.2026: очередь консула на 1440 px не помещалась в панель (сумма минимальных ширин 9 колонок ~1090 px при
   панели 1060 px) - колонка «Открыть» уходила под горизонтальную прокрутку. Ячейки и кнопка компактнее; селектор длиннее правила
   кабинета в platform.css (html body.pf-authed.in-workspace .pf-table td), иначе оно побеждает. На телефоне таблица и так в карточках. */
html body.pf-authed.in-workspace .vs-root[data-vs^="consul"] .vs-table th,html body.pf-authed.in-workspace .vs-root[data-vs^="consul"] .vs-table td{padding-left:9px;padding-right:9px}
html body.pf-authed.in-workspace .vs-root[data-vs^="consul"] .vs-table th:first-child,html body.pf-authed.in-workspace .vs-root[data-vs^="consul"] .vs-table td:first-child{padding-left:14px;min-width:0}
html body.pf-authed.in-workspace .vs-root[data-vs^="consul"] .vs-table td:nth-child(2){min-width:0}
.vs-root[data-vs^="consul"] .vs-table .pf-table-actions .button.small{padding:9px 12px;min-height:36px;gap:6px;white-space:nowrap}

/* QA 07.11 BUG-101: бейдж статуса пункта - всегда в строке с названием (название сжимается и переносится по словам) */
.vs-check-title{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:2px 10px}
.vs-check-title>b{grid-column:1;min-width:0}
.vs-check-title>.pf-muted{grid-column:1}
.vs-check-title>.tag{grid-column:2;grid-row:1;justify-self:end}
.vs-check-body small{overflow-wrap:anywhere}
/* на телефоне у работника - одна рамка на уровень: панели чек-листа и истории внутри пакета без своей рамки и полей */
@media (max-width:740px){
  .wk-root .vs-worker{padding:16px}
  .wk-root .vs-worker .pf-panel{border:0;padding:0;background:none;box-shadow:none;border-radius:0;margin-top:20px}
  .wk-root .vs-worker .pf-panel-heading{margin-bottom:10px}
  .wk-root .vs-worker .vs-check-item{padding:12px}
}

/* Повторная визуальная приёмка 07.11 (QA BUG-038): очередь консула на 1280 (панель ~900 px) без горизонтальной прокрутки -
   страна под типом визы (visa-ui.js), подписи колонок переносятся и с меньшей разрядкой, поля ячеек уже */
@media (min-width:1051px){
  html body.pf-authed.in-workspace .vs-root[data-vs^="consul"] .vs-table th{white-space:normal;letter-spacing:.04em;vertical-align:bottom}
  html body.pf-authed.in-workspace .vs-root[data-vs^="consul"] .vs-table th,html body.pf-authed.in-workspace .vs-root[data-vs^="consul"] .vs-table td{padding-left:7px;padding-right:7px}
  html body.pf-authed.in-workspace .vs-root[data-vs^="consul"] .vs-table th:first-child,html body.pf-authed.in-workspace .vs-root[data-vs^="consul"] .vs-table td:first-child{padding-left:14px}
  html body.pf-authed.in-workspace .vs-root[data-vs^="consul"] .vs-table th:last-child,html body.pf-authed.in-workspace .vs-root[data-vs^="consul"] .vs-table td:last-child{padding-right:12px}
  /* вторые строки после «Работника» (город, страна, «0 дн. с запроса») переносятся - в EN они длиннее и раздвигали таблицу */
  .vs-root[data-vs^="consul"] .vs-table td:nth-child(n+3) small{white-space:normal}
}