/* =====================================================================
   Общий стиль старого приложения (новый дизайн SKRINEX).
   Подключается в layout::telegram ПОСЛЕ bootstrap.

   Включение на странице: любой элемент с классом .ui-new (обычно корневой блок страницы).
   Страницы без .ui-new выглядят как раньше — переводим их по одной.

   Что здесь:
     1. Токены (цвета, масштаб --ui-fs)
     2. Фон страницы
     3. Верхний шаблон telegram::top-template (назад / заголовок / вверх)
     4. Кнопки .ui-btn и поля .ui-select / .ui-input
     5. Оболочка модальных окон #input-panel / #input-panel2 (salary::modal)

   Задачи/заметки пока оформлены своими файлами (task-*.css, привязка к #service.tc).
   Чтобы они брали шапку отсюда, достаточно добавить класс ui-new к #service —
   тогда блок «заголовок» в task-calendar.css можно удалить.
   ===================================================================== */

/* ---------- 1. токены ---------- */
/* масштаб: 16px при окне 400x640, растёт вместе с окном, но не больше 20px (как в задачах) */
:root{--ui-fs:clamp(16px,calc(min(100vw,62.5vh)/25),20px)}
@supports (height:1dvh){:root{--ui-fs:clamp(16px,calc(min(100vw,62.5dvh)/25),20px)}}

body:has(.ui-new){
  --ui-ink:#0d1933;   --ui-muted:#6a7a8c;  --ui-line:#d3e2ea;
  --ui-blue:#1676f3;  --ui-blue-soft:#e4f3ff;
  --ui-green:#49d595; --ui-green-soft:#dcf8e9; --ui-green-ink:#086b39;
  --ui-yellow:#ffc83d;--ui-yellow-soft:#fff5dc;--ui-yellow-ink:#6b4e00;
  --ui-red:#ff646c;   --ui-red-soft:#ffe6e7;   --ui-red-ink:#c0303a;
  --ui-gray-soft:#e6eef3;
  --ui-shadow:0 .3rem .9rem rgba(38,124,115,.14);
  --ui-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------- 2. фон ---------- */
body:has(.ui-new){
  background:linear-gradient(145deg,#e3f8f0,#c5efe8 60%,#e4f7f1) fixed;
  font-family:var(--ui-font);color:var(--ui-ink);
}

/* ---------- 3. верхний шаблон ---------- */
body:has(.ui-new) .title .main-menu{
  width:calc(100% - 1.5rem);max-width:calc(var(--ui-fs) * 25);
}
body:has(.ui-new) .title a.btn-primary{
  display:flex;align-items:center;justify-content:center;
  margin:0;border:0;border-radius:.9rem;
  background:#acf1de;color:var(--ui-ink);font-size:1.25rem;
  box-shadow:0 .3rem .75rem rgba(27,108,98,.18);
}
body:has(.ui-new) .title a.btn-primary:active{transform:scale(.97)}
body:has(.ui-new) .title a.flex-grow-1{margin:0}
body:has(.ui-new) .title a.flex-grow-1 > div{
  background:#fff !important;background-image:none !important;
  border:0 !important;border-radius:1.2rem !important;
  box-shadow:var(--ui-shadow);color:var(--ui-ink);
}
body:has(.ui-new) .title h5{margin:0;color:var(--ui-ink);letter-spacing:.02em}
body:has(.ui-new) .title h6:empty{display:none}
/* распорка под фиксированной шапкой: без точки «.» и без лишней высоты */
body:has(.ui-new) .title + div{
  height:4.6rem;margin:0 !important;padding:0 !important;
  font-size:0;line-height:0;color:transparent;overflow:hidden;
}

/* ---------- 4. кнопки и поля ---------- */
body:has(.ui-new) .ui-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  min-height:2.4em;margin:0;padding:0 1em;
  border:1.5px solid transparent;border-radius:.9em;
  background:#fff;color:var(--ui-ink);box-shadow:var(--ui-shadow);
  font-family:var(--ui-font);font-size:.9em;font-weight:700;line-height:1;white-space:nowrap;
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .12s,filter .12s,background-color .12s;
}
body:has(.ui-new) .ui-btn:hover{filter:brightness(1.04)}
body:has(.ui-new) .ui-btn:active{transform:scale(.97)}
body:has(.ui-new) .ui-btn:focus-visible{outline:2px solid var(--ui-blue);outline-offset:2px}
body:has(.ui-new) .ui-btn-blue{background:var(--ui-blue);color:#fff;box-shadow:0 .3em .75em rgba(22,118,243,.28)}
body:has(.ui-new) .ui-btn-soft-blue{background:var(--ui-blue-soft);border-color:#48afff;color:#1648a3;box-shadow:none}
body:has(.ui-new) .ui-btn-soft-green{background:var(--ui-green-soft);border-color:#71dbac;color:var(--ui-green-ink);box-shadow:none}
body:has(.ui-new) .ui-btn-soft-yellow{background:var(--ui-yellow-soft);border-color:#f6dc80;color:var(--ui-yellow-ink);box-shadow:none}
body:has(.ui-new) .ui-btn-soft-red{background:var(--ui-red-soft);border-color:#ffb3b7;color:var(--ui-red-ink);box-shadow:none}
body:has(.ui-new) .ui-btn-icon{padding:0;width:2.4em;flex:none}

body:has(.ui-new) .ui-label{
  display:block;margin:0 0 .35em .2em;
  font-size:.72em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-muted);
}
body:has(.ui-new) .ui-select{
  height:2.6em;padding:0 2.2em 0 .9em;
  border:0;border-radius:.9em;background-color:#fff;color:var(--ui-ink);
  box-shadow:var(--ui-shadow);font-size:.95em;font-weight:600;
}
body:has(.ui-new) .ui-select:focus{box-shadow:0 0 0 2px var(--ui-blue),var(--ui-shadow)}

/* ---------- 5. модальные окна (salary::modal: #input-panel и клон #input-panel2) ---------- */
body:has(.ui-new) :is(#input-panel,#input-panel2){
  font-size:var(--ui-fs);font-family:var(--ui-font);color:var(--ui-ink);
}
body:has(.ui-new) :is(#input-panel,#input-panel2) .modal-dialog{
  --bs-modal-margin:.75rem;max-width:none;width:min(calc(100% - 1.5rem),25em);margin:var(--bs-modal-margin) auto;
}
body:has(.ui-new) :is(#input-panel,#input-panel2) .modal-content{
  max-height:calc(100vh - 1.5rem);max-height:calc(100dvh - 1.5rem);overflow:hidden;
  border:0;border-radius:1.4em;background:linear-gradient(160deg,#f4fcf9,#e3f6f0);
  box-shadow:0 1.2em 3em rgba(13,25,51,.28);
}
body:has(.ui-new) .modal-backdrop{
  --bs-backdrop-bg:#0d1933;--bs-backdrop-opacity:.4;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
body:has(.ui-new) :is(#input-panel,#input-panel2) .modal-header{padding:.85em 1em .5em;border:0;background:transparent;gap:.6em}
body:has(.ui-new) :is(#input-panel,#input-panel2) .modal-title{font-size:1.1em !important;font-weight:800;line-height:1.2}
body:has(.ui-new) :is(#input-panel,#input-panel2) .modal-header .btn-close{
  flex:none;width:2.2em;height:2.2em;margin:0 0 0 auto;padding:0;
  border-radius:.8em;background-color:#fff;background-size:.75em auto;opacity:1;box-shadow:var(--ui-shadow);
}
body:has(.ui-new) :is(#input-panel,#input-panel2) .modal-body{padding:.2em 1em 1em;overflow-y:auto !important;min-height:0}
/* salary2: .modal-body button:hover{background:red;color:white} — нейтрализуем */
body:has(.ui-new) :is(#input-panel,#input-panel2) :where(.modal-body button):hover{background-color:var(--bs-btn-hover-bg);color:var(--bs-btn-hover-color)}
body:has(.ui-new) :is(#input-panel,#input-panel2) .form-control{
  width:100%;padding:.65em .85em;border:1.5px solid var(--ui-line) !important;border-radius:.9em;
  background:#fff;color:var(--ui-ink);box-shadow:none;font-size:.95em;outline:0;
}
body:has(.ui-new) :is(#input-panel,#input-panel2) .form-control:focus{border-color:var(--ui-blue) !important;box-shadow:0 0 0 3px rgba(22,118,243,.15)}

body:has(.ui-new) :is(#input-panel,#input-panel2) .modal-footer{padding:.6em 1em 1em;border:0;background:transparent;gap:.5em;flex-wrap:nowrap}
body:has(.ui-new) :is(#input-panel,#input-panel2) .modal-footer > .btn{
  flex:1 1 0;min-width:0;margin:0;height:2.7em;padding:0 .6em;
  border:0;border-radius:.9em;font-size:.95em;font-weight:800;white-space:nowrap;
}
body:has(.ui-new) :is(#input-panel,#input-panel2) .modal-footer .btn{box-shadow:none !important}   /* общий стиль .btn даёт чёрную тень */
body:has(.ui-new) :is(#input-panel,#input-panel2) .modal-footer .input-panel-cancel{order:2;background:var(--ui-gray-soft);color:var(--ui-ink)}
body:has(.ui-new) :is(#input-panel,#input-panel2) .modal-footer .input-panel-submit{order:3;background:var(--ui-blue);color:#fff;box-shadow:0 .3em .75em rgba(22,118,243,.28) !important}
body:has(.ui-new) :is(#input-panel,#input-panel2) .modal-footer .btn:hover{filter:brightness(1.05)}
body:has(.ui-new) :is(#input-panel,#input-panel2) .modal-footer .btn:active{transform:scale(.98)}

@media (prefers-reduced-motion:reduce){
  body:has(.ui-new) .ui-btn{transition:none}
}

/* ---------- 6. список бригад (salary::subcustomers / subcustomer-row) ----------
   Без привязки к .ui-new: шаблон может выводиться и вне табеля. */
.sc-list{
  --sc-ink:#0d1933;--sc-muted:#6a7a8c;--sc-line:#d3e2ea;--sc-blue:#1676f3;
  display:flex;flex-direction:column;gap:.7em;padding-top:.3em;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--sc-ink);
}
.sc-list *{box-sizing:border-box}
.sc-items{display:flex;flex-direction:column;gap:.55em}
.sc-items:empty::before{content:"Бригад пока нет";padding:1em;text-align:center;color:var(--sc-muted)}

.sc-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.3em .5em;
  padding:.5em;border-radius:1em;background:#fff;box-shadow:0 .25em .8em rgba(38,124,115,.12);
}
.sc-field{position:relative;display:flex;align-items:center;min-width:0;margin:0;cursor:pointer}
.sc-ico,.sc-edit{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2}
.sc-ico{left:.75em;color:#8292a4}
.sc-edit{right:.75em;color:var(--sc-muted);opacity:.6;font-size:.9em}
.sc-field:hover .sc-edit{opacity:1;color:var(--sc-blue)}
.sc-list .sc-input{
  width:100%;height:2.6em;margin:0;padding:0 2.2em 0 2.3em;
  border:1.5px solid transparent !important;border-radius:.8em;background:#f3f7fa;box-shadow:none;
  font-size:1em;font-weight:700;color:var(--sc-ink);text-overflow:ellipsis;outline:0;
}
.sc-field:hover .sc-input{border-color:var(--sc-line) !important;background:#fff}
.sc-list .sc-input:focus-visible{border-color:var(--sc-blue) !important}

.sc-list .sc-del{
  display:flex;align-items:center;justify-content:center;
  width:2.6em;height:2.6em;margin:0;padding:0;border:0;border-radius:.8em;
  background:#ffe6e7;color:#c0303a;font-size:1em;cursor:pointer;transition:background .12s,color .12s;
}
.sc-list .sc-del:hover{background:#ff646c;color:#fff}
.sc-list .sc-del:active,.sc-list .sc-add:active{transform:scale(.97)}
.sc-meta{grid-column:1 / -1;padding:0 .4em;font-size:.68em;color:var(--sc-muted)}

.sc-list .sc-add{
  display:flex;align-items:center;justify-content:center;gap:.45em;
  width:100%;height:2.6em;margin:0;border:1.5px dashed #71dbac;border-radius:.9em;
  background:#dcf8e9;color:#086b39;font-size:.95em;font-weight:800;cursor:pointer;
}
.sc-list .sc-add:hover{background:#c9f8e3}
.sc-tip{margin:.1em .3em 0;font-size:.72em;color:var(--sc-muted)}