/* ================================================================
 * PSP Portal — zadaniya.css
 * Общие стили страниц-прототипов системы заданий:
 * участники/ярлыки, постановка задач, мои задачи, реестр.
 * Только портальные CSS-переменные — тема переключается вместе с порталом.
 * ================================================================ */

.proto-flag { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding:2px 9px; border-radius:6px; background:var(--accent-dim); border:1px dashed var(--accent);
  color:var(--accent); vertical-align:middle; margin-left:9px; }

.tabs { display:flex; gap:7px; flex-wrap:wrap; margin:10px 0 16px; border-bottom:1px solid var(--card-border); }
.tab { font-family:var(--fn-h); font-size:13px; padding:8px 15px; border:1px solid var(--card-border); border-bottom:none;
  border-radius:9px 9px 0 0; background:var(--card-bg); color:var(--text-3); cursor:pointer; margin-bottom:-1px; }
.tab.on { background:var(--accent-dim); border-color:var(--accent); color:var(--text-1); }
.tab .cnt { font-size:10.5px; opacity:.65; margin-left:4px; }
.panel[hidden] { display:none; }

.hint { font-size:12.5px; color:var(--text-3); margin:0 0 13px; line-height:1.5; }
.muted { color:var(--text-3); }
/* Поле поиска — самостоятельный класс, а не только внутри .bar: такие поля
   стоят и в карточках (подбор участника), и в модалках. Раньше вне .bar
   оставались нестилизованными (браузерный дефолт). */
input.search {
  background:var(--accent-dim); border:1px solid var(--card-border); border-radius:9px;
  color:var(--text-1); padding:8px 11px; font-size:13.5px; font-family:inherit;
  outline:none; transition:border-color .15s ease;
}
input.search::placeholder { color:var(--text-3); }
input.search:focus { border-color:var(--accent); }

.bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:11px; }
.bar select, .bar input[type=time] { background:var(--accent-dim); border:1px solid var(--card-border);
  border-radius:9px; color:var(--text-1); padding:8px 11px; font-size:13.5px; }
.bar input.search { flex:1; min-width:180px; }
.bar .count { font-size:12.5px; color:var(--text-3); }

.card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; padding:15px 17px; }
.card + .card { margin-top:12px; }
.card > h3 { font-family:var(--fn-h); font-size:14px; margin:0 0 4px; }
.card > .sub { font-size:12px; color:var(--text-3); margin-bottom:11px; line-height:1.45; }
.cols { display:grid; grid-template-columns:1fr 340px; gap:14px; align-items:start; }
@media (max-width:900px){ .cols { grid-template-columns:1fr; } }

/* ─── чипы и ярлыки ─── */
.chip { font-size:12px; padding:3px 11px; border-radius:20px; border:1px solid var(--card-border);
  background:var(--card-bg); color:var(--text-3); cursor:pointer; user-select:none; white-space:nowrap; }
.chip.on { background:var(--accent-dim); border-color:var(--accent); color:var(--text-1); }
.chip.all { border-style:dashed; color:var(--text-2); }
.chip-n { opacity:.55; font-size:10.5px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.lbl { display:inline-block; font-size:11.5px; padding:2px 9px; border-radius:20px;
  background:var(--accent-dim); border:1px solid var(--card-border); color:var(--text-2); white-space:nowrap; }
.lbl.grp-dep  { border-color:#3b82f6; color:#60a5fa; }
.lbl.grp-resp { border-color:#a855f7; color:#c084fc; }
.lbl.grp-ext  { border-color:#f59e0b; color:#fbbf24; }
.lbl.grp-proj { border-color:#14b8a6; color:#2dd4bf; }
.flt-lbl { font-size:12px; color:var(--text-3); margin-right:2px; }

/* ─── таблицы ─── */
.tbl-wrap { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; overflow:auto; max-height:66vh; }
table.ppl { border-collapse:collapse; width:100%; font-size:13px; }
table.ppl th, table.ppl td { padding:7px 10px; text-align:left; border-bottom:1px solid var(--card-border); vertical-align:top; }
table.ppl thead th { font-family:var(--fn-h); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-3); position:sticky; top:0; background:var(--card-bg); white-space:nowrap; z-index:1; }
table.ppl thead th.sortable { cursor:pointer; user-select:none; }
table.ppl thead th .arr { color:var(--accent); font-size:10px; }
table.ppl tbody tr:hover { background:var(--accent-dim); }
table.ppl tbody tr:last-child td { border-bottom:0; }
table.ppl tbody tr.clickable { cursor:pointer; }
table.ppl td.nw { white-space:nowrap; }
tr.grp td { background:var(--accent-dim); font-family:var(--fn-h); font-size:11.5px; letter-spacing:.4px;
  text-transform:uppercase; color:var(--text-2); padding:6px 10px; }
tr.grp td .cnt { color:var(--text-3); font-weight:400; text-transform:none; letter-spacing:0; margin-left:6px; }
tr.late td { background:rgba(239,68,68,.07); }
tr.late:hover td { background:rgba(239,68,68,.13); }
.badge { display:inline-block; font-size:10px; font-weight:700; padding:1px 7px; border-radius:6px;
  background:var(--accent-dim); border:1px solid var(--card-border); color:var(--text-2); }
.badge.yes { color:#16a34a; border-color:#16a34a; }
.badge.no  { color:var(--text-3); }
.who-late { color:#ef4444; font-weight:600; }
.days-late { display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:6px;
  background:rgba(239,68,68,.15); border:1px solid #ef4444; color:#ef4444; white-space:nowrap; }

/* ─── формы ─── */
.fld { margin-bottom:12px; }
.fld > label { display:block; font-size:12px; color:var(--text-3); margin-bottom:5px; }
.fld input[type=text], .fld input[type=date], .fld input[type=number], .fld input[type=time],
.fld select, .fld textarea {
  width:100%; box-sizing:border-box; background:var(--accent-dim); border:1px solid var(--card-border);
  border-radius:8px; color:var(--text-1); padding:8px 11px; font-size:13.5px; font-family:inherit; }
.fld textarea { min-height:76px; resize:vertical; line-height:1.5; }
.fld .sub { font-size:11.5px; color:var(--text-3); margin-top:5px; line-height:1.45; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px; }
@media (max-width:700px){ .grid2,.grid3 { grid-template-columns:1fr; } }

.prow { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--card-border); }
.prow:last-child { border-bottom:0; }
.prow .pname { flex:1; font-size:13.5px; }
.prow .pname small { display:block; color:var(--text-3); font-size:11.5px; margin-top:1px; }
.prow .px { font-size:15px; color:var(--text-3); cursor:pointer; padding:0 4px; }
.prow .px:hover { color:#ef4444; }

/* Переключатель. ВАЖНО: правило .fld > label (display:block) специфичнее .sw,
   поэтому ползунок вставал НАД текстом. Дублируем с той же специфичностью. */
.sw, .fld > label.sw { display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  user-select:none; font-size:11.5px; color:var(--text-3); margin-bottom:0; }
.sw input { display:none; }
.sw .track { width:34px; height:19px; border-radius:20px; background:var(--card-border); position:relative; transition:.16s; flex:none; }
.sw .track::after { content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:var(--text-3); transition:.16s; }
.sw input:checked + .track { background:var(--accent-dim); border:1px solid var(--accent); }
.sw input:checked + .track::after { left:16px; background:var(--accent); }
.sw input:checked ~ .swt { color:var(--accent); }

/* Галочка с подписью в строку — та же беда со специфичностью, что и у .sw */
.chk, .fld > label.chk { display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; cursor:pointer; margin-bottom:0; }

.note { font-size:12.5px; line-height:1.55; padding:10px 13px; border-radius:9px;
  background:var(--accent-dim); border:1px solid var(--card-border); color:var(--text-2); }
.note.warn { border-color:#f59e0b; }
.note.stop { border-color:#ef4444; }
.note b { color:var(--text-1); }

/* ─── карточка задачи ─── */
.task-head { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.task-head h2 { font-family:var(--fn-h); font-size:18px; margin:0 0 5px; }
.task-head .meta { font-size:12.5px; color:var(--text-3); line-height:1.6; }
.st { display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; border:1px solid; white-space:nowrap; }
.st.work { color:#f59e0b; border-color:#f59e0b; }
.st.wait { color:#38bdf8; border-color:#38bdf8; }
.st.ok   { color:#16a34a; border-color:#16a34a; }
.st.late { color:#ef4444; border-color:#ef4444; }
.st.new  { color:var(--accent); border-color:var(--accent); }
.st.grey { color:var(--text-3); border-color:var(--card-border); }
.myrole { display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  padding:2px 8px; border-radius:6px; margin-right:5px; background:var(--accent-dim); border:1px solid var(--accent); color:var(--accent); }

.item { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--card-border); }
.item:last-child { border-bottom:0; }
.item .idx { font-size:12px; color:var(--text-3); min-width:14px; padding-top:2px; }
.item .itxt { flex:1; font-size:13.5px; line-height:1.5; }

.arow { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; margin-bottom:7px;
  border:1px solid var(--card-border); background:var(--card-bg); }
.arow:last-child { margin-bottom:0; }
.arow .an { flex:1; font-size:13.5px; }
.arow .an small { display:block; font-size:11.5px; color:var(--text-3); margin-top:1px; }
.arow.pending { border-color:#ef4444; background:rgba(239,68,68,.09); }
.arow.pending .an { font-weight:600; }
.arow.agreed { opacity:.72; }
.arow.optional { border-style:dashed; }

.ev { display:flex; gap:11px; font-size:12.5px; color:var(--text-3); padding:7px 0; border-bottom:1px solid var(--card-border); line-height:1.5; }
.ev:last-child { border-bottom:0; }
.ev .evd { min-width:92px; }
.ev b { color:var(--text-2); }

.acts { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.acts-grp { margin-bottom:12px; }
.acts-grp:last-child { margin-bottom:0; }
.acts-grp .gh { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-3); margin-bottom:6px; }
.backlink { font-size:12.5px; color:var(--accent); cursor:pointer; display:inline-block; margin-bottom:11px; background:none; border:0; padding:0; font-family:inherit; }

/* ─── кто вошёл ─── */
.whoami { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 13px; border-radius:10px;
  background:var(--accent-dim); border:1px solid var(--card-border); margin-bottom:14px; font-size:12.5px; color:var(--text-2); }
.whoami b { color:var(--text-1); }

/* ─── модалка ─── */
.ovl { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:flex-start;
  justify-content:center; z-index:70; overflow:auto; padding:6vh 16px; }
.ovl.open { display:flex; }
.modal { background:var(--panel-bg,var(--card-bg)); border:1px solid var(--card-border); border-radius:14px;
  width:100%; max-width:480px; padding:18px 20px; }
.modal.wide { max-width:720px; }
.modal h2 { font-family:var(--fn-h); font-size:17px; margin:0 0 12px; }
.modal-actions { display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.dropzone { border:1px dashed var(--card-border); border-radius:10px; padding:15px; text-align:center;
  font-size:12.5px; color:var(--text-3); cursor:pointer; }
.dropzone:hover { border-color:var(--accent); color:var(--text-2); }
.file { display:flex; align-items:center; gap:9px; font-size:12.5px; padding:7px 10px; border-radius:8px;
  background:var(--accent-dim); border:1px solid var(--card-border); margin-top:8px; }
.file .fx { margin-left:auto; cursor:pointer; color:var(--text-3); }

/* ─── плавающая кнопка постановки ─── */
.fab { position:fixed; right:24px; bottom:24px; z-index:60; width:56px; height:56px; border-radius:50%;
  border:0; cursor:pointer; color:#fff; background:var(--accent); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.28); transition:transform .15s, box-shadow .15s; }
.fab:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.34); }
.fab svg { width:26px; height:26px; }
.fab-hint { position:fixed; right:92px; bottom:38px; z-index:60; font-size:12px; color:var(--text-3);
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px; padding:5px 10px;
  opacity:0; pointer-events:none; transition:opacity .15s; white-space:nowrap; }
.fab:hover + .fab-hint, .fab-hint.on { opacity:1; }
@media (max-width:600px){ .fab { right:16px; bottom:16px; } .fab-hint { display:none; } }

/* ─── меню «Задачи» в шапке (прототип) ─── */
.ptasks-menu { position:relative; display:inline-flex; }
.ptasks-pop { position:absolute; top:100%; right:0; margin-top:8px; background:var(--panel-bg,var(--card-bg));
  border:1px solid var(--card-border); border-radius:10px; padding:6px; min-width:210px;
  box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:60; flex-direction:column; gap:2px; display:none; }
.ptasks-pop.open { display:flex; }
.ptasks-pop a { padding:8px 12px; border-radius:7px; color:var(--text-1); font-size:13.5px; text-decoration:none;
  white-space:nowrap; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.ptasks-pop a:hover { background:var(--accent-dim); }
.ptasks-pop a .n { font-size:11.5px; color:var(--text-3); }
.ptasks-pop .sep { height:1px; background:var(--card-border); margin:4px 2px; }

/* ─── хаб на главной ─── */
.hub { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .hub { grid-template-columns:1fr; } }
.hub a { display:block; text-decoration:none; color:inherit; background:var(--card-bg);
  border:1px solid var(--card-border); border-radius:14px; padding:18px 20px; transition:border-color .15s, transform .15s; }
.hub a:hover { border-color:var(--accent); transform:translateY(-2px); }
.hub .ic { width:38px; height:38px; border-radius:10px; background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:11px; }
.hub .ic svg { width:20px; height:20px; }
.hub h3 { font-family:var(--fn-h); font-size:15.5px; margin:0 0 5px; }
.hub p { font-size:12.5px; color:var(--text-3); line-height:1.5; margin:0; }
.hub .n { display:inline-block; margin-top:10px; font-size:11.5px; color:var(--accent); }

/* ─── подсказка поиска участника ───
   Выпадающих списков людей в интерфейсе НЕТ: справочник растёт, листать его
   нельзя. Вместо select — поиск, показывающий несколько совпадений. */
.lookup { position:absolute; left:0; right:0; top:100%; z-index:30; margin-top:4px;
  background:var(--panel-bg,var(--card-bg)); border:1px solid var(--card-border);
  border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.22); max-height:280px; overflow:auto; }
.lookup[hidden] { display:none; }
.lookup .lk { display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer;
  border-bottom:1px solid var(--card-border); font-size:13.5px; }
.lookup .lk:last-child { border-bottom:0; }
.lookup .lk:hover, .lookup .lk.on { background:var(--accent-dim); }
.lookup .lk small { display:block; color:var(--text-3); font-size:11.5px; margin-top:1px; }
.lookup .lk-empty { padding:10px 12px; font-size:12.5px; color:var(--text-3); }
.lookup .lk-more { padding:7px 12px; font-size:11.5px; color:var(--text-3); border-top:1px solid var(--card-border); }

/* ─── рассылка: дни недели ─── */
.dows { display:flex; gap:6px; flex-wrap:wrap; }
.dow { width:40px; height:34px; border-radius:8px; border:1px solid var(--card-border); background:var(--card-bg);
  color:var(--text-3); font-size:12.5px; cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:center; }
.dow.on { background:var(--accent-dim); border-color:var(--accent); color:var(--text-1); font-weight:600; }
.mail-preview { background:var(--accent-dim); border:1px solid var(--card-border); border-radius:10px; padding:13px 15px; font-size:12.5px; line-height:1.6; }
.mail-preview .mh { font-family:var(--fn-h); font-size:13.5px; color:var(--text-1); margin-bottom:8px; }
.mail-preview table { width:100%; border-collapse:collapse; margin-top:8px; font-size:12px; }
.mail-preview th { text-align:left; color:var(--text-3); font-weight:600; padding:4px 8px 4px 0; border-bottom:1px solid var(--card-border); }
.mail-preview td { padding:5px 8px 5px 0; border-bottom:1px solid var(--card-border); color:var(--text-2); vertical-align:top; }